@purpurds/autocomplete 5.10.1 → 5.11.1

package/dist/useAutocomplete.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useAutocomplete.d.ts","sourceRoot":"","sources":["../src/useAutocomplete.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAC;AAG7E,OAAO,KAAK,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAGhE,MAAM,MAAM,MAAM,GAAG;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG,IAAI,CAAC,qBAAqB,CAAC,OAAO,CAAC,EAAE,SAAS,GAAG,aAAa,CAAC,GAAG;IACzF,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,WAAW,EAAE,MAAM,IAAI,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,sBAAsB,CAAC,CAAC,SAAS,MAAM,IAAI;IAIrD,QAAQ,CAAC,EAAE,OAAO,CAAC;IAInB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAI/B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAI3B,UAAU,CAAC,EAAE,MAAM,CAAC;IAIpB,YAAY,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,GAAG,SAAS,EAAE,MAAM,EAAE,CAAC,KAAK,OAAO,CAAC;IAItE,EAAE,EAAE,MAAM,CAAC;IAIX,YAAY,EAAE,MAAM,CAAC;IAIrB,gBAAgB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAInC,aAAa,CAAC,EAAE,SAAS,CAAC;IAI1B,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAIxC,WAAW,CAAC,EAAE,OAAO,CAAC;IAItB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,GAAG,SAAS,KAAK,IAAI,CAAC;IAI3C,OAAO,EAAE,CAAC,EAAE,CAAC;IAIb,cAAc,CAAC,EAAE,CAAC,CAAC;IACnB,CAAC,aAAa,CAAC,CAAC,EAAE,MAAM,CAAC;CAC1B,CAAC;AAEF,eAAO,MAAM,eAAe,sPAgBzB,uBAAuB,CAAC,CAAC;;;;;;;;kCA4KW,CAAC,SAAS,MAAM,KAAG,gBAAgB;;CAqDzE,CAAC"}
+{"version":3,"file":"useAutocomplete.d.ts","sourceRoot":"","sources":["../src/useAutocomplete.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAC;AAG7E,OAAO,KAAK,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAGhE,MAAM,MAAM,MAAM,GAAG;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG,IAAI,CAAC,qBAAqB,CAAC,OAAO,CAAC,EAAE,SAAS,GAAG,aAAa,CAAC,GAAG;IACzF,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,WAAW,EAAE,MAAM,IAAI,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,sBAAsB,CAAC,CAAC,SAAS,MAAM,IAAI;IAIrD,QAAQ,CAAC,EAAE,OAAO,CAAC;IAInB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAI/B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAI3B,UAAU,CAAC,EAAE,MAAM,CAAC;IAIpB,YAAY,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,GAAG,SAAS,EAAE,MAAM,EAAE,CAAC,KAAK,OAAO,CAAC;IAItE,EAAE,EAAE,MAAM,CAAC;IAIX,YAAY,EAAE,MAAM,CAAC;IAIrB,gBAAgB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAInC,aAAa,CAAC,EAAE,SAAS,CAAC;IAI1B,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAIxC,WAAW,CAAC,EAAE,OAAO,CAAC;IAItB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,GAAG,SAAS,KAAK,IAAI,CAAC;IAI3C,OAAO,EAAE,CAAC,EAAE,CAAC;IAIb,cAAc,CAAC,EAAE,CAAC,CAAC;IACnB,CAAC,aAAa,CAAC,CAAC,EAAE,MAAM,CAAC;CAC1B,CAAC;AAEF,eAAO,MAAM,eAAe,GAAI,CAAC,SAAS,MAAM,mOAgB7C,sBAAsB,CAAC,CAAC,CAAC;;;;;;;;kCA4KW,CAAC,SAAS,MAAM,KAAG,gBAAgB;;CAqDzE,CAAC"}

package/dist/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAkC,MAAM,OAAO,CAAC;AAGzE,MAAM,MAAM,QAAQ,CAAC,CAAC,IAAI;KACvB,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CACrB,GAAG,EAAE,CAAC;AAEP,eAAO,MAAM,mBAAmB,aAAc,CAAC,KAAG,iBAAiB,CAAC,CAEnE,CAAC;AAEF,eAAO,MAAM,iBAAiB,YAAa,WAAW,GAAG,IAAI,YAAY,MAAM,IAAI,SAgBlF,CAAC"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAkC,MAAM,OAAO,CAAC;AAGzE,MAAM,MAAM,QAAQ,CAAC,CAAC,IAAI;KACvB,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CACrB,GAAG,EAAE,CAAC;AAEP,eAAO,MAAM,mBAAmB,GAAI,CAAC,SAAS,CAAC,KAAG,gBAAgB,CAAC,CAAC,CAEnE,CAAC;AAEF,eAAO,MAAM,iBAAiB,YAAa,WAAW,GAAG,IAAI,YAAY,MAAM,IAAI,SAgBlF,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@purpurds/autocomplete",
-  "version": "5.10.1",
+  "version": "5.11.1",
   "license": "AGPL-3.0-only",
   "main": "./dist/autocomplete.cjs.js",
   "types": "./dist/autocomplete.d.ts",
@@ -15,38 +15,39 @@
   "source": "src/autocomplete.tsx",
   "dependencies": {
     "classnames": "~2.5.0",
-    "@purpurds/paragraph": "5.10.1",
-    "@purpurds/tokens": "5.10.1",
-    "@purpurds/icon": "5.10.1",
-    "@purpurds/text-field": "5.10.1"
+    "@purpurds/icon": "5.11.1",
+    "@purpurds/paragraph": "5.11.1",
+    "@purpurds/tokens": "5.11.1",
+    "@purpurds/text-field": "5.11.1"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "~1.10.0",
-    "@storybook/blocks": "~7.6.0",
-    "@storybook/client-api": "~7.6.0",
-    "@storybook/react": "~7.6.0",
+    "@storybook/blocks": "^8.2.6",
+    "@storybook/preview-api": "^8.2.6",
+    "@storybook/react": "^8.2.6",
     "@telia/base-rig": "~8.2.0",
     "@telia/react-rig": "~3.2.0",
     "@testing-library/dom": "~9.3.3",
     "@testing-library/jest-dom": "~6.4.0",
     "@testing-library/react": "~14.3.0",
     "@types/node": "20.12.12",
-    "@types/react-dom": "~18.3.0",
-    "@types/react": "~18.3.0",
+    "@types/react-dom": "^18.3.0",
+    "@types/react": "^18.3.3",
     "eslint-plugin-testing-library": "~6.2.0",
-    "eslint": "~8.57.0",
+    "eslint": "^8.57.0",
     "jsdom": "~22.1.0",
     "lint-staged": "~10.5.3",
     "prettier": "~2.8.8",
-    "react-dom": "~18.3.0",
-    "react": "~18.3.0",
-    "typescript": "~5.4.2",
-    "vite": "~5.2.2",
+    "react-dom": "^18.3.1",
+    "react": "^18.3.1",
+    "storybook": "^8.2.6",
+    "typescript": "^5.5.4",
+    "vite": "5.3.4",
     "vitest": "~1.5.0",
-    "@purpurds/icon": "5.10.1",
-    "@purpurds/button": "5.10.1",
-    "@purpurds/search-field": "5.10.1",
-    "@purpurds/component-rig": "1.0.0"
+    "@purpurds/button": "5.11.1",
+    "@purpurds/icon": "5.11.1",
+    "@purpurds/component-rig": "1.0.0",
+    "@purpurds/search-field": "5.11.1"
   },
   "scripts": {
     "build:dev": "vite",

package/src/autocomplete.stories.tsx

@@ -2,11 +2,11 @@ import React from "react";
 import { Paragraph } from "@purpurds/paragraph";
 import { SearchField } from "@purpurds/search-field";
 import { TextField } from "@purpurds/text-field";
-import { useArgs, useState } from "@storybook/client-api";
+import { useArgs, useState } from "@storybook/preview-api";
 import type { Meta, StoryObj } from "@storybook/react";
 
-import "@purpurds/button/styles";
 import "@purpurds/icon/styles";
+import "@purpurds/button/styles";
 import "@purpurds/search-field/styles";
 import "@purpurds/text-field/styles";
 import { Autocomplete } from "./autocomplete";
@@ -34,7 +34,7 @@ const options = [
   { id: "19", label: "Strawberry" },
 ];
 
-const meta: Meta<typeof Autocomplete> = {
+const meta = {
   title: "Inputs/Autocomplete",
   component: Autocomplete,
   args: {
@@ -63,7 +63,7 @@ const meta: Meta<typeof Autocomplete> = {
       </div>
     ),
   ],
-};
+} satisfies Meta<typeof Autocomplete>;
 
 export default meta;
 type Story = StoryObj<typeof Autocomplete>;
@@ -74,6 +74,34 @@ export const WithTextField: Story = {
   },
   argTypes: {
     listboxMaxHeight: { type: "string" },
+
+    options: {
+      description: `
+    type Option = {
+      label: string;
+      id: string;
+      value?: string;
+      disabled?: boolean;
+    };`,
+
+      table: { type: { summary: "<T extends Option>[]" } },
+    },
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+          <Autocomplete        
+  selectedOption={selectedOption}
+  onSelect={(selectedOption) => updateArgs({ selectedOption })}
+  renderInput={(inputProps) => (
+    <TextField
+      {...inputProps}            
+    />
+  )}
+/>`,
+      },
+    },
   },
   render: ({ ...args }) => {
     const [{ selectedOption }, updateArgs] = useArgs(); // eslint-disable-line react-hooks/rules-of-hooks
@@ -106,6 +134,22 @@ export const WithSearchField: Story = {
     inputValue: { table: { disabled: true } },
     onInputChange: { table: { disabled: true } },
   },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+          <Autocomplete        
+  selectedOption={selectedOption}
+  onSelect={(selectedOption) => updateArgs({ selectedOption })}
+  renderInput={(inputProps) => (
+    <SearchField
+      {...inputProps}            
+    />
+  )}
+/>`,
+      },
+    },
+  },
   render: ({ ...args }) => {
     const [inputValue, setInputValue] = useState(""); // eslint-disable-line react-hooks/rules-of-hooks
     const [{ selectedOption }, updateArgs] = useArgs(); // eslint-disable-line react-hooks/rules-of-hooks
@@ -131,7 +175,7 @@ export const WithSearchField: Story = {
               updateArgs({ selectedOption: undefined });
             }}
             placeholder="Find your fruit"
-            clearButtonAllyLabel="Rensa sökfältet"
+            clearButtonAllyLabel="Clear search field"
             variant="button-attached"
             iconOnlySearchButton
             searchButtonLabel="Search"
@@ -151,6 +195,42 @@ export const WithRenderOption: Story = {
     inputValue: { table: { disabled: true } },
     onInputChange: { table: { disabled: true } },
   },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+          <Autocomplete        
+  selectedOption={selectedOption}
+  onSelect={(selectedOption) => updateArgs({ selectedOption })}
+  renderInput={(inputProps) => (
+    <TextField
+      {...inputProps}            
+    />
+  )}
+  renderOption={(option) => {
+    const optionText = option.label;
+    if (!inputValue.trim()) {
+      return optionText;
+    }
+
+    const escapeRegExp = (str = "") => str.replace(/([.?*+^$[\\]\\(){}|-])/g, "\\$1");
+    const regex = new RegExp(\`(\${escapeRegExp(inputValue)})\`, "gi");
+    const parts = optionText.split(regex);
+
+    return (
+      <Paragraph>
+        {parts
+          .filter((part) => part)
+          .map((part, i) =>
+            regex.test(part) ? <strong key={i}>{part}</strong> : <span key={i}>{part}</span>
+          )}
+      </Paragraph>
+    );
+  }}
+/>`,
+      },
+    },
+  },
   render: ({ ...args }) => {
     const [inputValue, setInputValue] = useState(""); // eslint-disable-line react-hooks/rules-of-hooks
     const [{ selectedOption }, updateArgs] = useArgs(); // eslint-disable-line react-hooks/rules-of-hooks

package/src/autocomplete.tsx

@@ -1,8 +1,7 @@
 import type { ComponentPropsWithRef, ForwardedRef, ReactNode } from "react";
-import React, { cloneElement, forwardRef, isValidElement } from "react";
+import React, { cloneElement, forwardRef } from "react";
 import { IconChevronDown } from "@purpurds/icon";
-import type { TextFieldProps } from "@purpurds/text-field";
-import { TextField } from "@purpurds/text-field";
+import { isTextField } from "@purpurds/text-field";
 import c from "classnames/bind";
 
 import styles from "./autocomplete.module.scss";
@@ -66,12 +65,7 @@ const AutocompleteComponent = <T extends Option>(
 
   const getInputComponent = () => {
     const input = renderInput(inputProps);
-    const isCombobox =
-      combobox &&
-      noOptionsText &&
-      input &&
-      isValidElement<TextFieldProps>(input) &&
-      input.type === TextField;
+    const isCombobox = combobox && noOptionsText && input && isTextField(input);
 
     if (isCombobox) {
       const endAdornment = (

package/src/useAutocomplete.ts

@@ -245,7 +245,7 @@ export const useAutocomplete = <T extends Option>({
 
   const handleOnBlur = () => {
     if (combobox) {
-      setInternalInputValue(selectedOption?.label ?? "");
+      populateInputField(selectedOption?.label ?? "");
     }
   };