Merge pull request #1169 from strapi/release/1.8.1

Author: joshuaellis

lerna.json

@@ -1,6 +1,6 @@
 {
   "packages": ["packages/*", "docs"],
-  "version": "1.8.0",
+  "version": "1.8.1",
   "npmClient": "yarn",
   "$schema": "node_modules/lerna/schemas/lerna-schema.json"
 }

package.json

@@ -31,7 +31,7 @@
     "vers": "lerna version --no-push --no-git-tag-version --no-private --force-publish"
   },
   "devDependencies": {
-    "@babel/preset-react": "^7.22.3",
+    "@babel/preset-react": "^7.22.5",
     "@juggle/resize-observer": "^3.4.0",
     "@rollup/plugin-typescript": "^11.1.1",
     "@strapi/eslint-config": "^0.1.2",
@@ -44,7 +44,7 @@
     "@types/jest": "^29.5.2",
     "@types/react": "18.2.7",
     "@types/react-dom": "18.2.4",
-    "@typescript-eslint/eslint-plugin": "^5.59.1",
+    "@typescript-eslint/eslint-plugin": "^5.60.0",
     "@typescript-eslint/parser": "^5.59.9",
     "@vitejs/plugin-react": "^4.0.0",
     "chokidar-cli": "^3.0.0",
@@ -62,7 +62,6 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "fs-extra": "^11.1.1",
     "husky": "8.0.3",
-    "intl": "^1.2.5",
     "jest": "^29.5.0",
     "jest-environment-jsdom": "^29.5.0",
     "jest-styled-components": "^7.1.1",
@@ -71,7 +70,7 @@
     "prettier": "^2.8.8",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "rimraf": "^5.0.0",
+    "rimraf": "^5.0.1",
     "tiny-glob": "^0.2.9",
     "typescript": "^5.1.3",
     "vite": "^4.3.9"

packages/primitives/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@strapi/ui-primitives",
-  "version": "1.8.0",
+  "version": "1.8.1",
   "license": "MIT",
   "type": "module",
   "sideEffects": false,
@@ -29,12 +29,12 @@
     "@radix-ui/react-compose-refs": "^1.0.1",
     "@radix-ui/react-context": "^1.0.0",
     "@radix-ui/react-direction": "1.0.0",
-    "@radix-ui/react-dismissable-layer": "^1.0.3",
+    "@radix-ui/react-dismissable-layer": "^1.0.4",
     "@radix-ui/react-focus-guards": "1.0.1",
     "@radix-ui/react-focus-scope": "1.0.3",
     "@radix-ui/react-id": "^1.0.1",
     "@radix-ui/react-popper": "^1.1.2",
-    "@radix-ui/react-portal": "^1.0.2",
+    "@radix-ui/react-portal": "^1.0.3",
     "@radix-ui/react-primitive": "^1.0.3",
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-use-callback-ref": "^1.0.0",

packages/primitives/src/components/Collection/Collection.tsx

@@ -43,7 +43,12 @@ function createCollection<ItemElement extends HTMLElement, ItemData = {}>(name:
     listeners: new Set<Listener>(),
   });
 
-  const CollectionProvider: React.FC<{ children?: React.ReactNode; scope: any }> = (props) => {
+  interface CollectionProviderProps {
+    children?: React.ReactNode;
+    scope: any;
+  }
+
+  const CollectionProvider = (props: CollectionProviderProps) => {
     const { scope, children } = props;
     const ref = React.useRef<CollectionElement>(null);
     const itemMap = React.useRef<ContextValue['itemMap']>(new Map()).current;

packages/primitives/src/components/Combobox/Combobox.tsx

@@ -117,7 +117,7 @@ const ComboboxProviders = ({ children }: { children: React.ReactNode }) => (
   </PopperPrimitive.Root>
 );
 
-const Combobox: React.FC<RootProps> = (props) => {
+const Combobox = (props: RootProps) => {
   const {
     allowCustomValue = false,
     autocomplete = 'none',
@@ -536,6 +536,10 @@ const ComboxboxTextInput = React.forwardRef<ComboboxInputElement, TextInputProps
         }
       })}
       onBlur={composeEventHandlers(props.onBlur, () => {
+        if (context.open) {
+          return;
+        }
+
         context.onVisuallyFocussedItemChange(null);
 
         const [activeItem] = getItems().filter(
@@ -669,7 +673,7 @@ interface PortalProps extends Omit<IPortalProps, 'asChild'> {
   children?: React.ReactNode;
 }
 
-const ComboboxPortal: React.FC<PortalProps> = (props) => {
+const ComboboxPortal = (props: PortalProps) => {
   return <PortalPrimitive asChild {...props} />;
 };
 

packages/primitives/src/components/Select/Select.tsx

@@ -124,7 +124,7 @@ interface MultiSelectProps extends SharedSelectProps {
 
 type SelectProps = SingleSelectProps | MultiSelectProps;
 
-const Select: React.FC<SelectProps> = (props: ScopedProps<SelectProps>) => {
+const Select = (props: ScopedProps<SelectProps>) => {
   const {
     __scopeSelect,
     children,
@@ -499,7 +499,7 @@ interface SelectPortalProps extends Omit<PortalProps, 'asChild'> {
   children?: React.ReactNode;
 }
 
-const SelectPortal: React.FC<SelectPortalProps> = (props: ScopedProps<SelectPortalProps>) => {
+const SelectPortal = (props: ScopedProps<SelectPortalProps>) => {
   return <PortalPrimitive asChild {...props} />;
 };
 

packages/strapi-design-system/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@strapi/design-system",
-  "version": "1.8.0",
+  "version": "1.8.1",
   "license": "MIT",
   "type": "module",
   "sideEffects": false,
@@ -22,10 +22,10 @@
     "@floating-ui/react-dom": "^1.3.0",
     "@internationalized/date": "^3.2.0",
     "@internationalized/number": "^3.2.0",
-    "@radix-ui/react-dismissable-layer": "^1.0.3",
+    "@radix-ui/react-dismissable-layer": "^1.0.4",
     "@radix-ui/react-dropdown-menu": "^2.0.5",
     "@radix-ui/react-focus-scope": "1.0.3",
-    "@strapi/ui-primitives": "^1.8.0",
+    "@strapi/ui-primitives": "^1.8.1",
     "@uiw/react-codemirror": "^4.21.3",
     "aria-hidden": "^1.2.3",
     "compute-scroll-into-view": "^3.0.3",
@@ -34,7 +34,7 @@
   },
   "devDependencies": {
     "@playwright/test": "1.33.0",
-    "@strapi/icons": "^1.8.0",
+    "@strapi/icons": "^1.8.1",
     "@types/react-router-dom": "^5.3.3",
     "@types/styled-components": "^5.1.26",
     "axe-playwright": "^1.2.3",
@@ -54,7 +54,7 @@
     "build": "yarn build:prod",
     "build:prod": "vite build",
     "clean": "rimraf dist node_modules",
-    "generate:types": "tsc --noEmit false --emitDeclarationOnly --declarationDir dist",
+    "generate:types": "tsc --noEmit false --declaration --emitDeclarationOnly --declarationDir dist",
     "lint": "eslint . --ext .js,.jsx,.tsx,.ts",
     "format": "yarn lint --fix",
     "test": "jest -c jest.config.js",

packages/strapi-design-system/src/Button/Button.tsx

@@ -107,12 +107,7 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
       >
         {(startIcon || loading) && <Box aria-hidden>{loading ? <LoaderAnimated /> : startIcon}</Box>}
 
-        <Typography
-          variant={size === 'S' ? 'pi' : undefined}
-          fontWeight="bold"
-          lineHeight={0}
-          textColor="buttonNeutral0"
-        >
+        <Typography variant={size === 'S' ? 'pi' : undefined} fontWeight="bold" textColor="buttonNeutral0">
           {children}
         </Typography>
 

packages/strapi-design-system/src/Combobox/Combobox.tsx

@@ -189,6 +189,7 @@ export const ComboboxInput = ({
     <ComboboxPrimitive.Root
       autocomplete={autocomplete || (creatable ? 'list' : 'both')}
       onOpenChange={handleOpenChange}
+      open={internalIsOpen}
       onTextValueChange={handleTextValueChange}
       textValue={internalTextValue}
       allowCustomValue={creatable || allowCustomValue}

packages/strapi-design-system/src/Combobox/__tests__/Combobox.spec.tsx

@@ -35,6 +35,34 @@ describe('Combobox', () => {
     expect(getByRole('combobox')).toHaveValue('Hamburger');
   });
 
+  /**
+   * @see https://github.com/strapi/design-system/issues/1074
+   */
+  it('should correctly change the text value and value of the combobox even if two items are very similarly named', async () => {
+    const { getByRole, user } = render({
+      options: [
+        {
+          value: 'strawberry1',
+          children: 'Strawberry 1',
+        },
+        {
+          value: 'strawberry2',
+          children: 'Strawberry 2',
+        },
+      ],
+    });
+
+    getByRole('combobox').focus();
+
+    await user.type(getByRole('combobox'), 'Straw');
+
+    expect(getByRole('combobox')).toHaveValue('Strawberry 1');
+
+    await user.click(getByRole('option', { name: 'Strawberry 2' }));
+
+    expect(getByRole('combobox')).toHaveValue('Strawberry 2');
+  });
+
   describe('callbacks', () => {
     it('should fire onChange only when the value is changed not when the input does', async () => {
       const onChange = jest.fn();