@purpurds/autocomplete 7.3.0 → 7.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@purpurds/autocomplete",
-  "version": "7.3.0",
+  "version": "7.4.0",
   "license": "AGPL-3.0-only",
   "main": "./dist/autocomplete.cjs.js",
   "types": "./dist/autocomplete.d.ts",
@@ -17,13 +17,13 @@
   "dependencies": {
     "classnames": "~2.5.0",
     "eslint": "9.24.0",
-    "@purpurds/heading": "7.3.0",
-    "@purpurds/listbox": "7.3.0",
-    "@purpurds/notification": "7.3.0",
-    "@purpurds/paragraph": "7.3.0",
-    "@purpurds/text-field": "7.3.0",
-    "@purpurds/icon": "7.3.0",
-    "@purpurds/tokens": "7.3.0"
+    "@purpurds/icon": "7.4.0",
+    "@purpurds/listbox": "7.4.0",
+    "@purpurds/heading": "7.4.0",
+    "@purpurds/notification": "7.4.0",
+    "@purpurds/paragraph": "7.4.0",
+    "@purpurds/text-field": "7.4.0",
+    "@purpurds/tokens": "7.4.0"
   },
   "devDependencies": {
     "@storybook/blocks": "^8.6.4",
@@ -45,11 +45,11 @@
     "typescript": "^5.6.3",
     "vite": "^6.2.1",
     "vitest": "^3.1.2",
-    "@purpurds/button": "7.3.0",
+    "@purpurds/button": "7.4.0",
     "@purpurds/component-rig": "1.0.0",
-    "@purpurds/icon": "7.3.0",
-    "@purpurds/label": "7.3.0",
-    "@purpurds/search-field": "7.3.0"
+    "@purpurds/icon": "7.4.0",
+    "@purpurds/label": "7.4.0",
+    "@purpurds/search-field": "7.4.0"
   },
   "peerDependencies": {
     "@types/react": "^18 || ^19",

package/src/autocomplete.stories.tsx

@@ -138,7 +138,7 @@ export const WithTextField: Story = {
             <TextField
               {...inputProps}
               label="With Text Field"
-              id="autocomplete-input"
+              id={`${args.id}-autocomplete-input`}
               type="text"
               placeholder="Enter a fruit"
             />
@@ -202,14 +202,14 @@ export const WithSearchField: Story = {
             <SearchField
               {...inputProps}
               label="With Search Field"
-              id="autocomplete-input"
+              id={`${args.id}-autocomplete-input`}
               type="text"
               onClear={() => {
                 setInputValue("");
                 updateArgs({ selectedOption: undefined });
               }}
               placeholder="Find your fruit"
-              clearButtonAllyLabel="Clear search field"
+              clearButtonAriaLabel="Clear search field"
               variant="button-attached"
               iconOnlySearchButton
               searchButtonLabel="Search"
@@ -297,7 +297,6 @@ export const WithRenderOption: Story = {
                 {parts
                   .filter((part) => part)
                   .map((part, i) =>
-                     
                     regex.test(part) ? <strong key={i}>{part}</strong> : <span key={i}>{part}</span>
                   )}
               </Paragraph>
@@ -307,7 +306,7 @@ export const WithRenderOption: Story = {
             <TextField
               {...inputProps}
               label="With renderOption"
-              id="autocomplete-input"
+              id={`${args.id}-autocomplete-input`}
               type="text"
               placeholder="Enter a fruit"
             />
@@ -318,3 +317,83 @@ export const WithRenderOption: Story = {
   },
   tags: ["visual:check"],
 };
+
+export const WithCombobox: Story = {
+  args: {
+    id: "with-combobox",
+  },
+  argTypes: {
+    listboxMaxHeight: { type: "string" },
+    inputValue: { table: { disabled: true } },
+    onInputChange: { table: { disabled: true } },
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+          <Autocomplete
+  selectedOption={selectedOption}
+  noOptionsText="That is not a fruit... Try again!"
+  /*
+   * NOTE! To handle input change events, always use onInputChange on Autocomplete instead of
+   * onChange on the input (SearchField). Autocomplete internally uses onChange on the input,
+   * and setting it yourself will override this.
+   */
+  onInputChange={(value) => {
+    setInputValue(value);
+  }}
+  renderInput={(inputProps) => (
+    <TextField
+      {...inputProps}
+    />
+  )}
+  combobox
+/>`,
+      },
+    },
+  },
+  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
+
+    return (
+      <>
+        <Autocomplete
+          {...args}
+          selectedOption={selectedOption}
+          onSelect={(selectedOption) => updateArgs({ selectedOption })}
+          onInputChange={setInputValue}
+          inputValue={inputValue}
+          renderInput={(inputProps) => (
+            <TextField
+              {...inputProps}
+              id={`${args.id}-autocomplete-input`}
+              type="text"
+              onClear={() => {
+                setInputValue("");
+                updateArgs({ selectedOption: undefined });
+              }}
+              placeholder="Find your fruit"
+              clearButtonAllyLabel="Clear text field"
+            />
+          )}
+          combobox
+        />
+        <div style={{ marginTop: "var(--purpur-spacing-150)", marginRight: "-200px" }}>
+          <Notification status="warning" heading="Known issue in Storybook">
+            <Paragraph>
+              The chevron button used to toggle the suggestions list may behave inconsistently in
+              this Storybook environment.
+            </Paragraph>
+            <Paragraph style={{ marginTop: "var(--purpur-spacing-150)" }}>
+              <b>However, this issue does not occur in a real application.</b> In actual usage, the
+              chevron correctly toggles the list as expected.
+            </Paragraph>
+          </Notification>
+        </div>
+        <OnInputEventPitfallNotification />
+      </>
+    );
+  },
+  tags: ["visual:check"],
+};

package/src/utils.ts

@@ -3,7 +3,7 @@ import { MutableRefObject, useCallback, useEffect, useRef } from "react";
 // Used to "merge" "intersection types". Used to get comments on the props to the docs.
 export type Prettify<T> = {
   [K in keyof T]: T[K];
-} & {}; 
+} & {};
 
 export const useMutableRefObject = <T>(value: T): MutableRefObject<T> => {
   return useRef<T>(value) as MutableRefObject<T>;