Merge branch 'main' into next

lerna.json

@@ -8,5 +8,6 @@
     "publish": {
       "ignoreChanges": ["**/stories/*", "**/build/*", "**/playground/*"]
     }
-  }
+  },
+  "ignore": "@digdir/design-system-react"
 }

packages/css/CHANGELOG.md

@@ -3,6 +3,16 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.10.0](https://github.com/digdir/designsystemet/compare/@digdir/[email protected]...@digdir/[email protected]) (2024-06-07)
+
+### Bug Fixes
+
+- **Heading:** :coffin: Remove non-working `3xlarge`/`3xl` size ([#2074](https://github.com/digdir/designsystemet/issues/2074)) ([dad4c8e](https://github.com/digdir/designsystemet/commit/dad4c8e3fa96e7e3232960b9224b03afbf9b2f1c))
+
+### Features
+
+- **css:** use native selectors ([#2050](https://github.com/digdir/designsystemet/issues/2050)) ([f1747b0](https://github.com/digdir/designsystemet/commit/f1747b033dd61d42734fd1ede758dc8b86516c45))
+
 # [0.9.0](https://github.com/digdir/designsystemet/compare/@digdir/[email protected]...@digdir/[email protected]) (2024-05-24)
 
 ### Bug Fixes

packages/react-old/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.54.0](https://github.com/digdir/designsystemet/compare/@digdir/[email protected]...@digdir/[email protected]) (2024-06-07)
+
+### Features
+
+- :heavy_minus_sign: Remove re-export of `@digdir/designsystemet-react` components ([#2114](https://github.com/digdir/designsystemet/issues/2114)) ([bc46492](https://github.com/digdir/designsystemet/commit/bc464924590ec64ecdac1af48ec3e2588cca2466))
+
+### BREAKING CHANGES
+
+- Removes re-export of components from
+  `@digdir/designsystemet-react`
+
 ## [0.53.12](https://github.com/digdir/designsystemet/compare/@digdir/[email protected]...@digdir/[email protected]) (2024-05-24)
 
 **Note:** Version bump only for package @digdir/design-system-react

packages/react-old/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digdir/design-system-react",
-  "version": "0.53.12",
+  "version": "0.54.0",
   "description": "Legacy React components for Designsystemet",
   "author": "Designsystemet team",
   "repository": "https://github.com/digdir/designsystemet",
@@ -29,7 +29,7 @@
   },
   "dependencies": {
     "@altinn/figma-design-tokens": "^6.0.1",
-    "@digdir/designsystemet-react": "0.62.0",
+    "@digdir/designsystemet-theme": "0.15.3",
     "@floating-ui/react": "0.26.4",
     "@navikt/aksel-icons": "^5.12.2",
     "react-number-format": "5.3.1"

packages/react-old/src/index.ts

@@ -1,3 +1,2 @@
 export * from './components';
 export { formatNumericText } from './utilities';
-export * from '@digdir/designsystemet-react';

packages/react/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.63.0](https://github.com/digdir/designsystemet/compare/@digdir/[email protected]...@digdir/[email protected]) (2024-06-07)
+
+### Bug Fixes
+
+- **Combobox:** make value as string of integer work ([#2095](https://github.com/digdir/designsystemet/issues/2095)) ([0a687f2](https://github.com/digdir/designsystemet/commit/0a687f2a8ef42d1b4ee051644bf3f8baaa7afcab)), closes [#2081](https://github.com/digdir/designsystemet/issues/2081) [#2106](https://github.com/digdir/designsystemet/issues/2106)
+- **Heading:** :coffin: Remove non-working `3xlarge`/`3xl` size ([#2074](https://github.com/digdir/designsystemet/issues/2074)) ([dad4c8e](https://github.com/digdir/designsystemet/commit/dad4c8e3fa96e7e3232960b9224b03afbf9b2f1c))
+
+### Features
+
+- **css:** use native selectors ([#2050](https://github.com/digdir/designsystemet/issues/2050)) ([f1747b0](https://github.com/digdir/designsystemet/commit/f1747b033dd61d42734fd1ede758dc8b86516c45))
+
 # [0.62.0](https://github.com/digdir/designsystemet/compare/@digdir/[email protected]...@digdir/[email protected]) (2024-05-24)
 
 ### Bug Fixes

packages/react/src/components/form/Combobox/Combobox.stories.tsx

@@ -580,3 +580,24 @@ export const RemoveAllOptions: StoryFn<typeof Combobox> = (args) => {
     </>
   );
 };
+
+export const WithNumberValues: StoryFn<typeof Combobox> = () => {
+  return (
+    <Combobox initialValue={['2000']}>
+      <Combobox.Option
+        id={'3000'}
+        key={'3000'}
+        value={'3000'}
+      >
+        some value
+      </Combobox.Option>
+      <Combobox.Option
+        id={'2000'}
+        key={'2000'}
+        value={'2000'}
+      >
+        some other value
+      </Combobox.Option>
+    </Combobox>
+  );
+};

packages/react/src/components/form/Combobox/Combobox.tsx

@@ -13,7 +13,7 @@ import { omit } from '../../../utilities';
 import { Spinner } from '../../Spinner';
 
 import type { Option } from './useCombobox';
-import useCombobox from './useCombobox';
+import useCombobox, { prefix, removePrefix } from './useCombobox';
 import ComboboxInput from './internal/ComboboxInput';
 import ComboboxLabel from './internal/ComboboxLabel';
 import ComboboxError from './internal/ComboboxError';
@@ -205,23 +205,23 @@ export const ComboboxComponent = forwardRef<HTMLInputElement, ComboboxProps>(
     // if value is set, set input value to the label of the value
     useEffect(() => {
       if (value && value.length > 0 && !multiple) {
-        const option = options[value[0]];
+        const option = options[prefix(value[0])];
         setInputValue(option?.label || '');
       }
     }, [multiple, value, options]);
 
     useEffect(() => {
       if (value && Object.keys(options).length >= 0) {
         const updatedSelectedOptions = value.map((option) => {
-          const value = options[option];
+          const value = options[prefix(option)];
           return value;
         });
 
         setSelectedOptions(
           updatedSelectedOptions.reduce<{
             [key: string]: Option;
           }>((acc, value) => {
-            acc[value.value] = value;
+            acc[prefix(value.value)] = value;
             return acc;
           }, {}),
         );
@@ -246,19 +246,21 @@ export const ComboboxComponent = forwardRef<HTMLInputElement, ComboboxProps>(
 
       if (remove) {
         const newSelectedOptions = { ...selectedOptions };
-        delete newSelectedOptions[option.value];
+        delete newSelectedOptions[prefix(option.value)];
         setSelectedOptions(newSelectedOptions);
-        onValueChange?.(Object.keys(newSelectedOptions));
+        onValueChange?.(
+          Object.keys(newSelectedOptions).map((key) => removePrefix(key)),
+        );
         return;
       }
 
       const newSelectedOptions = { ...selectedOptions };
 
       if (multiple) {
-        if (newSelectedOptions[option.value]) {
-          delete newSelectedOptions[option.value];
+        if (newSelectedOptions[prefix(option.value)]) {
+          delete newSelectedOptions[prefix(option.value)];
         } else {
-          newSelectedOptions[option.value] = option;
+          newSelectedOptions[prefix(option.value)] = option;
         }
         setInputValue('');
         inputRef.current?.focus();
@@ -267,7 +269,7 @@ export const ComboboxComponent = forwardRef<HTMLInputElement, ComboboxProps>(
         Object.keys(newSelectedOptions).forEach((key) => {
           delete newSelectedOptions[key];
         });
-        newSelectedOptions[option.value] = option;
+        newSelectedOptions[prefix(option.value)] = option;
         setInputValue(option?.label || '');
         // move cursor to the end of the input
         setTimeout(() => {
@@ -279,7 +281,9 @@ export const ComboboxComponent = forwardRef<HTMLInputElement, ComboboxProps>(
       }
 
       setSelectedOptions(newSelectedOptions);
-      onValueChange?.(Object.keys(newSelectedOptions));
+      onValueChange?.(
+        Object.keys(newSelectedOptions).map((key) => removePrefix(key)),
+      );
 
       !multiple && setOpen(false);
       refs.domReference.current?.focus();
@@ -309,7 +313,7 @@ export const ComboboxComponent = forwardRef<HTMLInputElement, ComboboxProps>(
       measureElement: (elem) => {
         return elem.getBoundingClientRect().height;
       },
-      overscan: 1,
+      overscan: 7,
     });
 
     return (
@@ -338,7 +342,7 @@ export const ComboboxComponent = forwardRef<HTMLInputElement, ComboboxProps>(
           onOptionClick: (value: string) => {
             if (readOnly) return;
             if (disabled) return;
-            const option = options[value];
+            const option = options[prefix(value)];
             debouncedHandleSelectOption({ option: option });
           },
           handleSelectOption: debouncedHandleSelectOption,

packages/react/src/components/form/Combobox/Option/useComboboxOption.tsx

@@ -4,6 +4,7 @@ import { useMergeRefs } from '@floating-ui/react';
 import { ComboboxContext } from '../ComboboxContext';
 import useDebounce from '../../../../utilities/useDebounce';
 import { useComboboxId, useComboboxIdDispatch } from '../ComboboxIdContext';
+import { prefix } from '../useCombobox';
 
 type UseComboboxOptionProps = {
   id?: string;
@@ -34,7 +35,7 @@ export default function useComboboxOption({
   } = context;
 
   const index = useMemo(
-    () => filteredOptions.indexOf(value) + customIds.length,
+    () => filteredOptions.indexOf(prefix(String(value))) + customIds.length,
     [customIds.length, filteredOptions, value],
   );
 
@@ -49,7 +50,7 @@ export default function useComboboxOption({
     throw new Error('Internal error: ComboboxOption did not find index');
   }
 
-  const selected = selectedOptions[value];
+  const selected = selectedOptions[prefix(value)];
   const active = activeIndex === index;
 
   useEffect(() => {

packages/react/src/components/form/Combobox/internal/ComboboxInput.tsx

@@ -9,6 +9,7 @@ import { Box } from '../../../Box';
 import { omit } from '../../../../utilities';
 import { useComboboxIdDispatch } from '../ComboboxIdContext';
 import type { ComboboxProps } from '../Combobox';
+import { prefix } from '../useCombobox';
 
 import ComboboxChips from './ComboboxChips';
 import ComboboxClearButton from './ComboboxClearButton';
@@ -68,9 +69,9 @@ export const ComboboxInput = ({
     setActiveIndex(0);
 
     // check if input value is the same as a label, if so, select it
-    const option = options[value.toLowerCase()];
+    const option = options[prefix(value.toLowerCase())];
     if (!option) return;
-    if (selectedOptions[option.value]) return;
+    if (selectedOptions[prefix(option.value)]) return;
 
     handleSelectOption({ option: option });
   };

packages/react/src/components/form/Combobox/internal/ComboboxNative.tsx

@@ -1,5 +1,6 @@
 import type { Option } from '../useCombobox';
 import type { ComboboxProps } from '../Combobox';
+import { removePrefix } from '../useCombobox';
 
 type ComboboxNativeProps = {
   selectedOptions: {
@@ -14,19 +15,17 @@ export const ComboboxNative = ({
   multiple,
   name,
 }: ComboboxNativeProps) => {
+  const VALUE = Object.keys(selectedOptions).map((key) => removePrefix(key));
+
   return (
     <select
       name={name}
       multiple={multiple}
       style={{ display: 'none' }}
-      value={
-        multiple
-          ? Object.keys(selectedOptions)
-          : Object.keys(selectedOptions)[0]
-      }
+      value={multiple ? VALUE : VALUE[0]}
       onChange={() => {}}
     >
-      {Object.keys(selectedOptions).map((value) => (
+      {VALUE.map((value) => (
         <option
           key={value}
           value={value}

packages/react/src/components/form/Combobox/useCombobox.tsx

@@ -42,6 +42,21 @@ export function isInteractiveComboboxCustom(
   return isComboboxCustom(child) && child.props.interactive === true;
 }
 
+const INTERNAL_OPTION_PREFIX = 'internal-option-';
+
+/**
+ * We use this function to prefix the value of the options so we can make sure numbers as strings are not parsed as numbers in objects
+ * @param value
+ * @returns
+ */
+export const prefix = (value?: string): string => {
+  return INTERNAL_OPTION_PREFIX + value;
+};
+
+export const removePrefix = (value: string): string => {
+  return value.slice(INTERNAL_OPTION_PREFIX.length);
+};
+
 export default function useCombobox({
   children,
   inputValue,
@@ -115,8 +130,8 @@ export default function useCombobox({
         label = childrenLabel;
       }
 
-      allOptions[props.value] = {
-        value: props.value,
+      allOptions[prefix(String(props.value))] = {
+        value: String(props.value),
         label,
         displayValue: props.displayValue,
         description: props.description,
@@ -128,7 +143,11 @@ export default function useCombobox({
 
   const preSelectedOptions = useMemo(
     () =>
-      (initialValue || []).reduce<{
+      (
+        initialValue?.map((key) => {
+          return prefix(key);
+        }) || []
+      ).reduce<{
         [key: string]: Option;
       }>((acc, value) => {
         const option = options[value];
@@ -151,16 +170,17 @@ export default function useCombobox({
       (option, index) => {
         /* If we have a selected value in single mode and the input matches an option, return all children */
         if (!multiple && Object.keys(selectedOptions).length === 1) {
-          filteredOptions.push(options[option].value);
+          filteredOptions.push(option);
           return optionsChildren[index];
         }
 
         if (multiple && selectedOptions[option]) {
-          filteredOptions.push(options[option].value);
+          filteredOptions.push(option);
           return optionsChildren[index];
         }
+
         if (filter(inputValue, options[option])) {
-          filteredOptions.push(options[option].value);
+          filteredOptions.push(option);
           return optionsChildren[index];
         }
       },

yarn.lock

@@ -2203,7 +2203,7 @@ __metadata:
   resolution: "@digdir/design-system-react@workspace:packages/react-old"
   dependencies:
     "@altinn/figma-design-tokens": "npm:^6.0.1"
-    "@digdir/designsystemet-react": "npm:0.62.0"
+    "@digdir/designsystemet-theme": "npm:0.15.3"
     "@floating-ui/react": "npm:0.26.4"
     "@navikt/aksel-icons": "npm:^5.12.2"
     "@types/fs-extra": "npm:^11.0.4"
@@ -2235,21 +2235,6 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@digdir/designsystemet-react@npm:0.62.0":
-  version: 0.62.0
-  resolution: "@digdir/designsystemet-react@npm:0.62.0"
-  dependencies:
-    "@floating-ui/react": "npm:0.26.12"
-    "@navikt/aksel-icons": "npm:^5.12.2"
-    "@radix-ui/react-slot": "npm:^1.0.2"
-    "@tanstack/react-virtual": "npm:^3.2.0"
-  peerDependencies:
-    react: ">=18.3.1"
-    react-dom: ">=18.3.1"
-  checksum: 10/c1f488c482a5358c9b6d4fd9a15390bbe923cba824cd6dddb47cbbf55e7be07fd4e2e4358767498995d95209352890a1a662a2cc748e37ed005a07ae9e35303f
-  languageName: node
-  linkType: hard
-
 "@digdir/designsystemet-react@workspace:^, @digdir/designsystemet-react@workspace:packages/react":
   version: 0.0.0-use.local
   resolution: "@digdir/designsystemet-react@workspace:packages/react"
@@ -2269,6 +2254,13 @@ __metadata:
   languageName: unknown
   linkType: soft
 
+"@digdir/designsystemet-theme@npm:0.15.3":
+  version: 0.15.3
+  resolution: "@digdir/designsystemet-theme@npm:0.15.3"
+  checksum: 10/0c9760ffbc42ed736ebcd1ee9069b2a8dd9312de08263d8beee74438933df736280c07fba2568d05f202ea88687b3309c40bf55be3d7d8e57f54cf84cc33af96
+  languageName: node
+  linkType: hard
+
 "@digdir/designsystemet-theme@workspace:^, @digdir/designsystemet-theme@workspace:packages/theme":
   version: 0.0.0-use.local
   resolution: "@digdir/designsystemet-theme@workspace:packages/theme"