@purpurds/autocomplete 5.14.0 → 5.15.0

package/dist/styles.css

@@ -1 +1 @@
-._purpur-autocomplete_1u8x6_1{position:relative}._purpur-autocomplete__listbox_1u8x6_4{position:absolute;z-index:1;top:calc(100% + var(--purpur-spacing-100))}._purpur-autocomplete__chevron-button_1u8x6_9{padding:0;border:0;background:none;cursor:pointer}._purpur-autocomplete_1u8x6_1 ._purpur-autocomplete__chevron-icon_1u8x6_15{display:block;transition:transform var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out)}._purpur-autocomplete_1u8x6_1 ._purpur-autocomplete__chevron-icon--up_1u8x6_19{transform:rotate(180deg)}._purpur-listbox_qhoi7_1{padding:0;margin:0;list-style-type:none;border:var(--purpur-border-width-xs) solid var(--purpur-color-border-interactive-subtle);border-radius:var(--purpur-border-radius-sm);color:var(--purpur-color-brand-off-black);width:100%;background-color:var(--purpur-color-brand-white);max-height:calc(2 * var(--purpur-spacing-1200));overflow-y:scroll;box-sizing:border-box}._purpur-listbox-item_qhoi7_15{list-style:none;padding:var(--purpur-spacing-150);border:var(--purpur-border-width-xs) solid transparent;cursor:pointer;max-width:100%;word-break:break-word;transition:background var(--purpur-motion-duration-150) ease;display:flex;justify-content:space-between;align-items:center;gap:var(--purpur-spacing-100)}@media (hover: hover) and (pointer: fine){._purpur-listbox-item--hovered_qhoi7_29{background:var(--purpur-color-background-interactive-transparent-hover)}}._purpur-listbox-item--highlighted_qhoi7_37{outline:var(--purpur-border-width-sm) solid var(--purpur-color-border-interactive-focus);outline-offset:calc(-1 * var(--purpur-border-width-sm))}._purpur-listbox-item_qhoi7_15:active:not(._purpur-listbox-item--noninteractive_qhoi7_41){background:var(--purpur-color-background-interactive-transparent-active)}._purpur-listbox-item--disabled_qhoi7_44{color:var(--purpur-color-text-weak);cursor:default}._purpur-listbox-item--noninteractive_qhoi7_41{cursor:default}._purpur-listbox-item__icon_qhoi7_51{color:var(--purpur-color-text-interactive-selected)}
+._purpur-autocomplete_1u8x6_1{position:relative}._purpur-autocomplete__listbox_1u8x6_4{position:absolute;z-index:1;top:calc(100% + var(--purpur-spacing-100))}._purpur-autocomplete__chevron-button_1u8x6_9{padding:0;border:0;background:none;cursor:pointer}._purpur-autocomplete_1u8x6_1 ._purpur-autocomplete__chevron-icon_1u8x6_15{display:block;transition:transform var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out)}._purpur-autocomplete_1u8x6_1 ._purpur-autocomplete__chevron-icon--up_1u8x6_19{transform:rotate(180deg)}

package/dist/useAutocomplete.d.ts

@@ -1,5 +1,5 @@
-import { ListboxItemProps, ListboxProps } from './listbox';
 import { ComponentPropsWithRef, ReactNode } from 'react';
+import { ListboxItemProps, ListboxProps } from '@purpurds/listbox';
 
 export type Option = {
     label: string;

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,GAAI,CAAC,SAAS,MAAM,mOAgB7C,sBAAsB,CAAC,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;AAE7E,OAAO,KAAK,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAIxE,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@purpurds/autocomplete",
-  "version": "5.14.0",
+  "version": "5.15.0",
   "license": "AGPL-3.0-only",
   "main": "./dist/autocomplete.cjs.js",
   "types": "./dist/autocomplete.d.ts",
@@ -15,10 +15,11 @@
   "source": "src/autocomplete.tsx",
   "dependencies": {
     "classnames": "~2.5.0",
-    "@purpurds/icon": "5.14.0",
-    "@purpurds/text-field": "5.14.0",
-    "@purpurds/tokens": "5.14.0",
-    "@purpurds/paragraph": "5.14.0"
+    "@purpurds/icon": "5.15.0",
+    "@purpurds/listbox": "5.15.0",
+    "@purpurds/paragraph": "5.15.0",
+    "@purpurds/text-field": "5.15.0",
+    "@purpurds/tokens": "5.15.0"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "~1.10.0",
@@ -44,10 +45,10 @@
     "typescript": "^5.5.4",
     "vite": "5.3.4",
     "vitest": "~1.5.0",
-    "@purpurds/button": "5.14.0",
-    "@purpurds/icon": "5.14.0",
-    "@purpurds/search-field": "5.14.0",
-    "@purpurds/component-rig": "1.0.0"
+    "@purpurds/button": "5.15.0",
+    "@purpurds/component-rig": "1.0.0",
+    "@purpurds/icon": "5.15.0",
+    "@purpurds/search-field": "5.15.0"
   },
   "scripts": {
     "build:dev": "vite",

package/src/autocomplete.stories.tsx

@@ -7,6 +7,7 @@ import type { Meta, StoryObj } from "@storybook/react";
 
 import "@purpurds/icon/styles";
 import "@purpurds/button/styles";
+import "@purpurds/listbox/styles";
 import "@purpurds/search-field/styles";
 import "@purpurds/text-field/styles";
 import { Autocomplete } from "./autocomplete";

package/src/autocomplete.tsx

@@ -1,11 +1,11 @@
 import type { ComponentPropsWithRef, ForwardedRef, ReactNode } from "react";
 import React, { cloneElement, forwardRef } from "react";
 import { IconChevronDown } from "@purpurds/icon";
+import { Listbox } from "@purpurds/listbox";
 import { isTextField } from "@purpurds/text-field";
 import c from "classnames/bind";
 
 import styles from "./autocomplete.module.scss";
-import * as ListBox from "./listbox";
 import type { Option, UseAutocompleteOptions } from "./useAutocomplete";
 import { useAutocomplete } from "./useAutocomplete";
 import type { Prettify } from "./utils";
@@ -48,9 +48,9 @@ const AutocompleteComponent = <T extends Option>(
     const { key, ...listboxItemProps } = getListBoxItemProps(option, index);
 
     return (
-      <ListBox.Item key={key} {...listboxItemProps}>
+      <Listbox.Item key={key} {...listboxItemProps}>
         {renderOption ? renderOption?.(option) : option.label}
-      </ListBox.Item>
+      </Listbox.Item>
     );
   };
 
@@ -101,13 +101,13 @@ const AutocompleteComponent = <T extends Option>(
     <div id={id} ref={setRootRef} className={cx([className, rootClassName])}>
       {getInputComponent()}
       {showListbox && (
-        <ListBox.Root {...listboxProps} className={cx(`${rootClassName}__listbox`)}>
+        <Listbox {...listboxProps} className={cx(`${rootClassName}__listbox`)}>
           {!optionsToShow.length ? (
-            <ListBox.Item noninteractive>{noOptionsText}</ListBox.Item>
+            <Listbox.Item noninteractive>{noOptionsText}</Listbox.Item>
           ) : (
             optionsToShow.filter((option): option is T => !!option).map(renderListboxItem)
           )}
-        </ListBox.Root>
+        </Listbox>
       )}
     </div>
   );

package/src/useAutocomplete.ts

@@ -1,7 +1,7 @@
 import type { ComponentPropsWithRef, CSSProperties, ReactNode } from "react";
 import { useRef, useState } from "react";
+import type { ListboxItemProps, ListboxProps } from "@purpurds/listbox";
 
-import type { ListboxItemProps, ListboxProps } from "./listbox";
 import { useMutableRefObject, useOnClickOutside } from "./utils";
 
 export type Option = {

package/dist/listbox.d.ts

@@ -1,22 +0,0 @@
-import { ComponentPropsWithRef, default as React } from 'react';
-
-export * from './useAutocomplete';
-type ListboxProps = Omit<ComponentPropsWithRef<"ul">, "role"> & {
-    "data-testid"?: string;
-    "aria-label": NonNullable<ComponentPropsWithRef<"ul">["aria-label"]>;
-    "aria-expanded": NonNullable<ComponentPropsWithRef<"ul">["aria-expanded"]>;
-};
-type ListboxItemProps = Omit<ComponentPropsWithRef<"li">, "role"> & {
-    "data-testid"?: string;
-    highlighted?: boolean;
-    hovered?: boolean;
-    key?: string;
-    selected?: boolean;
-    disabled?: boolean;
-    noninteractive?: boolean;
-};
-declare const Root: React.ForwardRefExoticComponent<Omit<ListboxProps, "ref"> & React.RefAttributes<HTMLUListElement>>;
-declare const Item: React.ForwardRefExoticComponent<Omit<ListboxItemProps, "ref"> & React.RefAttributes<HTMLLIElement>>;
-export { Item, Root };
-export type { ListboxItemProps, ListboxProps };
-//# sourceMappingURL=listbox.d.ts.map

package/dist/listbox.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"listbox.d.ts","sourceRoot":"","sources":["../src/listbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,qBAAqB,EAKtB,MAAM,OAAO,CAAC;AACf,OAAO,KAA+C,MAAM,OAAO,CAAC;AAOpE,cAAc,mBAAmB,CAAC;AAKlC,KAAK,YAAY,GAAG,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,EAAE,MAAM,CAAC,GAAG;IAC9D,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,YAAY,EAAE,WAAW,CAAC,qBAAqB,CAAC,IAAI,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC;IACrE,eAAe,EAAE,WAAW,CAAC,qBAAqB,CAAC,IAAI,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC;CAC5E,CAAC;AAgBF,KAAK,gBAAgB,GAAG,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,EAAE,MAAM,CAAC,GAAG;IAClE,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B,CAAC;AA0CF,QAAA,MAAM,IAAI,oGAAU,CAAC;AACrB,QAAA,MAAM,IAAI,qGAAc,CAAC;AAEzB,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC;AACtB,YAAY,EAAE,gBAAgB,EAAE,YAAY,EAAE,CAAC"}

package/src/listbox.module.scss

@@ -1,60 +0,0 @@
-.purpur-listbox {
-  padding: 0;
-  margin: 0;
-  width: 100%;
-  list-style-type: none;
-  border: var(--purpur-border-width-xs) solid var(--purpur-color-border-interactive-subtle);
-  border-radius: var(--purpur-border-radius-sm);
-  color: var(--purpur-color-brand-off-black);
-  width: 100%;
-  background-color: var(--purpur-color-brand-white);
-  max-height: calc(2 * var(--purpur-spacing-1200));
-  overflow-y: scroll;
-  box-sizing: border-box;
-
-  &-item {
-    $listboxItemRoot: &;
-
-    cursor: pointer;
-    list-style: none;
-    padding: var(--purpur-spacing-150);
-    border: var(--purpur-border-width-xs) solid transparent;
-    cursor: pointer;
-    max-width: 100%;
-    word-break: break-word;
-    transition: background var(--purpur-motion-duration-150) ease;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    gap: var(--purpur-spacing-100);
-
-    &--hovered {
-      /* Enable only on non-touch devices */
-      @media (hover: hover) and (pointer: fine) {
-        background: var(--purpur-color-background-interactive-transparent-hover);
-      }
-    }
-
-    &--highlighted {
-      outline: var(--purpur-border-width-sm) solid var(--purpur-color-border-interactive-focus);
-      outline-offset: calc(-1 * var(--purpur-border-width-sm));
-    }
-
-    &:active:not(#{$listboxItemRoot}--noninteractive) {
-      background: var(--purpur-color-background-interactive-transparent-active);
-    }
-
-    &--disabled {
-      color: var(--purpur-color-text-weak);
-      cursor: default;
-    }
-
-    &--noninteractive {
-      cursor: default;
-    }
-
-    &__icon {
-      color: var(--purpur-color-text-interactive-selected);
-    }
-  }
-}

package/src/listbox.tsx

@@ -1,94 +0,0 @@
-import type {
-  ComponentPropsWithRef,
-  ForwardedRef,
-  ReactElement,
-  ReactNode,
-  ReactPortal,
-} from "react";
-import React, { Children, forwardRef, isValidElement } from "react";
-import { checkmark, Icon } from "@purpurds/icon";
-import { Paragraph } from "@purpurds/paragraph";
-import c from "classnames/bind";
-
-import styles from "./listbox.module.scss";
-
-export * from "./useAutocomplete";
-const cx = c.bind(styles);
-
-const rootClassName = "purpur-listbox";
-
-type ListboxProps = Omit<ComponentPropsWithRef<"ul">, "role"> & {
-  "data-testid"?: string;
-  "aria-label": NonNullable<ComponentPropsWithRef<"ul">["aria-label"]>;
-  "aria-expanded": NonNullable<ComponentPropsWithRef<"ul">["aria-expanded"]>;
-};
-
-const Listbox = forwardRef(
-  ({ children, ...listboxProps }: ListboxProps, ref: ForwardedRef<HTMLUListElement>) => (
-    <ul
-      {...listboxProps}
-      ref={ref}
-      className={cx(rootClassName, listboxProps.className)}
-      role="listbox"
-    >
-      {Children.toArray(children).filter(isListboxItem)}
-    </ul>
-  )
-);
-Listbox.displayName = "ListBox";
-
-type ListboxItemProps = Omit<ComponentPropsWithRef<"li">, "role"> & {
-  "data-testid"?: string;
-  highlighted?: boolean;
-  hovered?: boolean;
-  key?: string;
-  selected?: boolean;
-  disabled?: boolean;
-  noninteractive?: boolean;
-};
-
-const ListboxItem = forwardRef((props: ListboxItemProps, ref: ForwardedRef<HTMLLIElement>) => {
-  const { disabled, highlighted, hovered, selected, children, noninteractive, ...liProps } = props;
-  const className = cx(`${rootClassName}-item`, liProps.className, {
-    [`${rootClassName}-item--highlighted`]: highlighted,
-    [`${rootClassName}-item--selected`]: selected,
-    [`${rootClassName}-item--hovered`]: hovered,
-    [`${rootClassName}-item--disabled`]: disabled,
-    [`${rootClassName}-item--noninteractive`]: noninteractive,
-  });
-
-  return (
-    <li
-      {...liProps}
-      ref={ref}
-      className={className}
-      aria-selected={!!selected}
-      role="option"
-      aria-disabled={!!disabled}
-    >
-      {typeof children === "string" ? <Paragraph>{children}</Paragraph> : children}
-      {selected && <Icon svg={checkmark} size="xs" className={cx(`${rootClassName}-item__icon`)} />}
-    </li>
-  );
-});
-ListboxItem.displayName = "ListBoxItem";
-
-function isListboxItem(
-  child:
-    | ReactElement
-    | Iterable<ReactNode>
-    | ReactPortal
-    | string
-    | number
-    | boolean
-    | null
-    | undefined
-): child is ReactElement<ListboxItemProps> {
-  return isValidElement<ListboxItemProps>(child) && child?.type === ListboxItem;
-}
-
-const Root = Listbox;
-const Item = ListboxItem;
-
-export { Item, Root };
-export type { ListboxItemProps, ListboxProps };