@basic-ui/core 0.0.52 → 0.0.53

package/src/ComboBox/ComboBox.story.tsx

@@ -1,120 +1,120 @@
-import type { ChangeEvent } from 'react';
-import { useMemo, useState } from 'react';
-
-import { ComboboxOption } from './ComboboxOption';
-import { ComboboxList } from './ComboboxList';
-import { ComboboxPopover } from './ComboboxPopover';
-import { ComboboxInput } from './ComboboxInput';
-import { ComboboxLabel } from './ComboboxLabel';
-import { Combobox } from './Combobox';
-import cities from './cities';
-import './styles.css';
-
-export default {
-  title: 'components/Combobox',
-};
-
-function useCityMatch(searchTerm: string) {
-  return useMemo(() => {
-    const term = searchTerm.trim().toLowerCase();
-    return term === ''
-      ? []
-      : cities.filter(
-          (city) =>
-            city.city.toLowerCase().indexOf(term) !== -1 ||
-            city.state.toLowerCase().indexOf(term) !== -1
-        );
-  }, [searchTerm]);
-}
-
-export function UncontrolledClientSideExample({ initialValue = '' }) {
-  const [term, setTerm] = useState(initialValue);
-  const [selected, setSelected] = useState(initialValue);
-  const results = useCityMatch(term);
-
-  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
-    setTerm(event.target.value);
-  };
-
-  const handleSelect = (value: string) => {
-    setSelected(value);
-  };
-
-  return (
-    <div>
-      <h2>Clientside Search</h2>
-      <p>Selection: {selected}</p>
-      <p>Term: {term}</p>
-      <Combobox onSelect={handleSelect} selectOnBlur>
-        <ComboboxLabel>Enter a city name</ComboboxLabel>
-        <br />
-        <ComboboxInput onChange={handleChange} defaultValue={initialValue} />
-        {results.length > 0 && (
-          <ComboboxPopover>
-            <ComboboxList persistSelection={true}>
-              {results.slice(0, 100).map((result, index) => (
-                <ComboboxOption
-                  key={`${result.city}, ${result.state}, ${index}`}
-                  id={`${result.city}, ${result.state}, ${index}`}
-                  text={`${result.city}, ${result.state}`}
-                  value={result}
-                />
-              ))}
-            </ComboboxList>
-          </ComboboxPopover>
-        )}
-      </Combobox>
-    </div>
-  );
-}
-
-export function ControlledClientSideExample({ initialValue = '' }) {
-  const [term, setTerm] = useState(initialValue);
-  const [selected, setSelected] = useState(initialValue);
-  const results = useCityMatch(term);
-
-  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
-    setTerm(event.target.value);
-    setSelected('');
-  };
-
-  const handleSelect = (value: string) => {
-    setSelected(value);
-  };
-
-  return (
-    <div>
-      <h2>Clientside Search</h2>
-      <p>Selection: {selected}</p>
-      <p>Term: {term}</p>
-      <Combobox onSelect={handleSelect} selectOnBlur>
-        <ComboboxLabel>Enter a city name</ComboboxLabel>
-        <br />
-        <ComboboxInput onChange={handleChange} value={selected || term} />
-        {results.length > 0 && (
-          <ComboboxPopover>
-            <ComboboxList persistSelection={true}>
-              {results.slice(0, 10).map((result, index) => (
-                <ComboboxOption
-                  key={`${result.city}, ${result.state}, ${index}`}
-                  id={`${result.city}, ${result.state}, ${index}`}
-                  text={`${result.city}, ${result.state}`}
-                  value={result}
-                />
-              ))}
-            </ComboboxList>
-          </ComboboxPopover>
-        )}
-      </Combobox>
-    </div>
-  );
-}
-
-export const UncontrolledClientSide = () => <UncontrolledClientSideExample />;
-export const UncontrolledClientSideInitial = () => (
-  <UncontrolledClientSideExample initialValue="Aberdeen" />
-);
-export const ControlledClientSide = () => <ControlledClientSideExample />;
-export const ControlledClientsideInitial = () => (
-  <ControlledClientSideExample initialValue="Aberdeen" />
-);
+import type { ChangeEvent } from 'react';
+import { useMemo, useState } from 'react';
+
+import { ComboboxOption } from './ComboboxOption';
+import { ComboboxList } from './ComboboxList';
+import { ComboboxPopover } from './ComboboxPopover';
+import { ComboboxInput } from './ComboboxInput';
+import { ComboboxLabel } from './ComboboxLabel';
+import { Combobox } from './Combobox';
+import cities from './cities';
+import './styles.css';
+
+export default {
+  title: 'components/Combobox',
+};
+
+function useCityMatch(searchTerm: string) {
+  return useMemo(() => {
+    const term = searchTerm.trim().toLowerCase();
+    return term === ''
+      ? []
+      : cities.filter(
+          (city) =>
+            city.city.toLowerCase().indexOf(term) !== -1 ||
+            city.state.toLowerCase().indexOf(term) !== -1
+        );
+  }, [searchTerm]);
+}
+
+export function UncontrolledClientSideExample({ initialValue = '' }) {
+  const [term, setTerm] = useState(initialValue);
+  const [selected, setSelected] = useState(initialValue);
+  const results = useCityMatch(term);
+
+  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
+    setTerm(event.target.value);
+  };
+
+  const handleSelect = (value: string) => {
+    setSelected(value);
+  };
+
+  return (
+    <div>
+      <h2>Clientside Search</h2>
+      <p>Selection: {selected}</p>
+      <p>Term: {term}</p>
+      <Combobox onSelect={handleSelect} selectOnBlur>
+        <ComboboxLabel>Enter a city name</ComboboxLabel>
+        <br />
+        <ComboboxInput onChange={handleChange} defaultValue={initialValue} />
+        {results.length > 0 && (
+          <ComboboxPopover>
+            <ComboboxList persistSelection={true}>
+              {results.slice(0, 100).map((result, index) => (
+                <ComboboxOption
+                  key={`${result.city}, ${result.state}, ${index}`}
+                  id={`${result.city}, ${result.state}, ${index}`}
+                  text={`${result.city}, ${result.state}`}
+                  value={result}
+                />
+              ))}
+            </ComboboxList>
+          </ComboboxPopover>
+        )}
+      </Combobox>
+    </div>
+  );
+}
+
+export function ControlledClientSideExample({ initialValue = '' }) {
+  const [term, setTerm] = useState(initialValue);
+  const [selected, setSelected] = useState(initialValue);
+  const results = useCityMatch(term);
+
+  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
+    setTerm(event.target.value);
+    setSelected('');
+  };
+
+  const handleSelect = (value: string) => {
+    setSelected(value);
+  };
+
+  return (
+    <div>
+      <h2>Clientside Search</h2>
+      <p>Selection: {selected}</p>
+      <p>Term: {term}</p>
+      <Combobox onSelect={handleSelect} selectOnBlur>
+        <ComboboxLabel>Enter a city name</ComboboxLabel>
+        <br />
+        <ComboboxInput onChange={handleChange} value={selected || term} />
+        {results.length > 0 && (
+          <ComboboxPopover>
+            <ComboboxList persistSelection={true}>
+              {results.slice(0, 10).map((result, index) => (
+                <ComboboxOption
+                  key={`${result.city}, ${result.state}, ${index}`}
+                  id={`${result.city}, ${result.state}, ${index}`}
+                  text={`${result.city}, ${result.state}`}
+                  value={result}
+                />
+              ))}
+            </ComboboxList>
+          </ComboboxPopover>
+        )}
+      </Combobox>
+    </div>
+  );
+}
+
+export const UncontrolledClientSide = () => <UncontrolledClientSideExample />;
+export const UncontrolledClientSideInitial = () => (
+  <UncontrolledClientSideExample initialValue="Aberdeen" />
+);
+export const ControlledClientSide = () => <ControlledClientSideExample />;
+export const ControlledClientsideInitial = () => (
+  <ControlledClientSideExample initialValue="Aberdeen" />
+);

package/src/ComboBox/Combobox.tsx

@@ -1,148 +1,148 @@
-import type { HTMLAttributes, ReactNode, ElementType } from 'react';
-import { forwardRef, useRef, useMemo, useId } from 'react';
-
-import type { ActionTypes } from './hooks';
-import { stateChart, comboboxReducer, isVisible, INIT } from './hooks';
-import type { ComboBoxContextProps } from './context';
-import { ComboBoxProvider } from './context';
-import { useReducerMachine } from '../hooks/useReducerMachine';
-import type { Scope } from '../hooks';
-import { getScope } from '../hooks';
-
-export type SelectEventHandler = (
-  text: string,
-  itemId: string,
-  obj: any
-) => void;
-
-export type ComboboxProps = Omit<HTMLAttributes<HTMLDivElement>, 'onSelect'> & {
-  onSelect?: SelectEventHandler;
-  openOnFocus?: boolean;
-  selectOnBlur?: boolean;
-  children?: ReactNode;
-  as?: ElementType<any>;
-  innerAs?: ElementType<any>;
-};
-
-export const Combobox = forwardRef<HTMLDivElement, ComboboxProps>(
-  function Combobox(
-    {
-      // Called whenever the user selects an item from the list
-      onSelect,
-
-      // opens the list when the input receives focused (but only if there are
-      // items in the list)
-      openOnFocus = false,
-
-      // if set to true, it will select an item after blurring
-      selectOnBlur = false,
-
-      children,
-      as: Comp = 'div',
-      innerAs,
-      ...rest
-    }: ComboboxProps,
-    ref
-  ) {
-    // We store the values of all the ComboboxOptions on this ref. This makes it
-    // possible to perform the keyboard navigation from the input on the list. We
-    // manipulate this array through context so that we don't have to enforce a
-    // parent/child relationship between ComboboxList and ComboboxOption.
-    const optionsRef = useRef<{
-      [itemId: string]: {
-        value: string | unknown;
-        text: string;
-      };
-    }>({});
-
-    const listScope: Scope<HTMLElement> = useRef(getScope({ current: null }));
-
-    // Need this to focus it
-    const inputRef = useRef<HTMLInputElement>(null);
-
-    const popoverRef = useRef<HTMLDivElement>(null);
-
-    const buttonRef = useRef<HTMLButtonElement>(null);
-
-    // When <ComboboxInput autocomplete={false} /> we don't want cycle back to
-    // the user's value while navigating (because it's always the user's value),
-    // but we need to know this in useKeyDown which is far away from the prop
-    // here, so we do something sneaky and write it to this ref on context so we
-    // can use it anywhere else 😛. Another new trick for me and I'm excited
-    // about this one too!
-    const autocompletePropRef = useRef<boolean>(false);
-
-    const persistSelectionRef = useRef<boolean>(false);
-
-    const clearOnEscapeRef = useRef<boolean>(false);
-
-    const listboxIdRef = useRef<string | undefined>();
-
-    const labelIdRef = useRef<string | undefined>();
-
-    const defaultData = {
-      // initial state
-      state: stateChart.initial,
-      // the value the user has typed, we derived this also when the developer is
-      // controlling the value of ComboboxInput
-      text: '',
-      // the index the user has typed, we derived this also when the developer is
-      // controlling the value of ComboboxInput
-      item: '',
-      // the hash of the currently navigated item
-      navigationItem: '',
-      // the last submitted action
-      lastActionType: INIT as ActionTypes,
-    };
-
-    const [state, data, transition] = useReducerMachine(
-      stateChart,
-      comboboxReducer,
-      defaultData
-    );
-
-    listboxIdRef.current = useId();
-
-    labelIdRef.current = useId();
-
-    const context = useMemo(
-      (): ComboBoxContextProps => ({
-        data,
-        inputRef,
-        popoverRef,
-        buttonRef,
-        onSelect,
-        optionsRef,
-        listScope,
-        state,
-        transition,
-        listboxIdRef,
-        labelIdRef,
-        autocompletePropRef,
-        persistSelectionRef,
-        clearOnEscapeRef,
-        isVisible: isVisible(state),
-        openOnFocus,
-        selectOnBlur,
-      }),
-      [data, onSelect, listScope, state, transition, openOnFocus, selectOnBlur]
-    );
-
-    return (
-      <ComboBoxProvider value={context}>
-        <Comp
-          {...rest}
-          as={innerAs}
-          data-reach-combobox=""
-          ref={ref}
-          role="combobox"
-          aria-haspopup="listbox"
-          aria-owns={listboxIdRef.current}
-          aria-expanded={context.isVisible}
-        >
-          {children}
-        </Comp>
-      </ComboBoxProvider>
-    );
-  }
-);
+import type { HTMLAttributes, ReactNode, ElementType } from 'react';
+import { forwardRef, useRef, useMemo, useId } from 'react';
+
+import type { ActionTypes } from './hooks';
+import { stateChart, comboboxReducer, isVisible, INIT } from './hooks';
+import type { ComboBoxContextProps } from './context';
+import { ComboBoxProvider } from './context';
+import { useReducerMachine } from '../hooks/useReducerMachine';
+import type { Scope } from '../hooks';
+import { getScope } from '../hooks';
+
+export type SelectEventHandler = (
+  text: string,
+  itemId: string,
+  obj: any
+) => void;
+
+export type ComboboxProps = Omit<HTMLAttributes<HTMLDivElement>, 'onSelect'> & {
+  onSelect?: SelectEventHandler;
+  openOnFocus?: boolean;
+  selectOnBlur?: boolean;
+  children?: ReactNode;
+  as?: ElementType<any>;
+  innerAs?: ElementType<any>;
+};
+
+export const Combobox = forwardRef<HTMLDivElement, ComboboxProps>(
+  function Combobox(
+    {
+      // Called whenever the user selects an item from the list
+      onSelect,
+
+      // opens the list when the input receives focused (but only if there are
+      // items in the list)
+      openOnFocus = false,
+
+      // if set to true, it will select an item after blurring
+      selectOnBlur = false,
+
+      children,
+      as: Comp = 'div',
+      innerAs,
+      ...rest
+    }: ComboboxProps,
+    ref
+  ) {
+    // We store the values of all the ComboboxOptions on this ref. This makes it
+    // possible to perform the keyboard navigation from the input on the list. We
+    // manipulate this array through context so that we don't have to enforce a
+    // parent/child relationship between ComboboxList and ComboboxOption.
+    const optionsRef = useRef<{
+      [itemId: string]: {
+        value: string | unknown;
+        text: string;
+      };
+    }>({});
+
+    const listScope: Scope<HTMLElement> = useRef(getScope({ current: null }));
+
+    // Need this to focus it
+    const inputRef = useRef<HTMLInputElement>(null);
+
+    const popoverRef = useRef<HTMLDivElement>(null);
+
+    const buttonRef = useRef<HTMLButtonElement>(null);
+
+    // When <ComboboxInput autocomplete={false} /> we don't want cycle back to
+    // the user's value while navigating (because it's always the user's value),
+    // but we need to know this in useKeyDown which is far away from the prop
+    // here, so we do something sneaky and write it to this ref on context so we
+    // can use it anywhere else 😛. Another new trick for me and I'm excited
+    // about this one too!
+    const autocompletePropRef = useRef<boolean>(false);
+
+    const persistSelectionRef = useRef<boolean>(false);
+
+    const clearOnEscapeRef = useRef<boolean>(false);
+
+    const listboxIdRef = useRef<string | undefined>();
+
+    const labelIdRef = useRef<string | undefined>();
+
+    const defaultData = {
+      // initial state
+      state: stateChart.initial,
+      // the value the user has typed, we derived this also when the developer is
+      // controlling the value of ComboboxInput
+      text: '',
+      // the index the user has typed, we derived this also when the developer is
+      // controlling the value of ComboboxInput
+      item: '',
+      // the hash of the currently navigated item
+      navigationItem: '',
+      // the last submitted action
+      lastActionType: INIT as ActionTypes,
+    };
+
+    const [state, data, transition] = useReducerMachine(
+      stateChart,
+      comboboxReducer,
+      defaultData
+    );
+
+    listboxIdRef.current = useId();
+
+    labelIdRef.current = useId();
+
+    const context = useMemo(
+      (): ComboBoxContextProps => ({
+        data,
+        inputRef,
+        popoverRef,
+        buttonRef,
+        onSelect,
+        optionsRef,
+        listScope,
+        state,
+        transition,
+        listboxIdRef,
+        labelIdRef,
+        autocompletePropRef,
+        persistSelectionRef,
+        clearOnEscapeRef,
+        isVisible: isVisible(state),
+        openOnFocus,
+        selectOnBlur,
+      }),
+      [data, onSelect, listScope, state, transition, openOnFocus, selectOnBlur]
+    );
+
+    return (
+      <ComboBoxProvider value={context}>
+        <Comp
+          {...rest}
+          as={innerAs}
+          data-reach-combobox=""
+          ref={ref}
+          role="combobox"
+          aria-haspopup="listbox"
+          aria-owns={listboxIdRef.current}
+          aria-expanded={context.isVisible}
+        >
+          {children}
+        </Comp>
+      </ComboBoxProvider>
+    );
+  }
+);

package/src/ComboBox/ComboboxButton.tsx

@@ -1,61 +1,61 @@
-import type {
-  ButtonHTMLAttributes,
-  ElementType,
-  KeyboardEventHandler,
-  MouseEventHandler,
-  ReactNode,
-} from 'react';
-import { forwardRef } from 'react';
-
-import { useComboBoxContext } from './context';
-import { useKeyDown, IDLE, OPEN_WITH_BUTTON, CLOSE_WITH_BUTTON } from './hooks';
-import { wrapEvent } from '../utils/wrap-event';
-import { assignMultipleRefs } from '../utils/assign-ref';
-
-export interface ComboboxButtonProps
-  extends ButtonHTMLAttributes<HTMLButtonElement> {
-  as?: ElementType<any>;
-  innerAs?: ElementType<any>;
-  onClick?: MouseEventHandler<HTMLButtonElement>;
-  onKeyDown?: KeyboardEventHandler<HTMLButtonElement>;
-  children?: ReactNode;
-}
-
-export const ComboboxButton = forwardRef<
-  HTMLButtonElement,
-  ComboboxButtonProps
->(function ComboboxButton(
-  { as: Comp = 'button', innerAs, onClick, onKeyDown, ...props },
-  ref
-) {
-  const { transition, data, state, buttonRef, listboxIdRef, isVisible } =
-    useComboBoxContext();
-
-  const handleKeyDown = useKeyDown();
-
-  const handleClick = () => {
-    const payload = {
-      item: data.navigationItem,
-    };
-
-    if (state === IDLE) {
-      transition(OPEN_WITH_BUTTON, payload);
-    } else {
-      transition(CLOSE_WITH_BUTTON, payload);
-    }
-  };
-
-  return (
-    <Comp
-      as={innerAs}
-      data-reach-combobox-button=""
-      aria-controls={listboxIdRef.current}
-      aria-haspopup="listbox"
-      aria-expanded={isVisible}
-      ref={assignMultipleRefs(ref, buttonRef)}
-      onClick={wrapEvent(onClick, handleClick)}
-      onKeyDown={wrapEvent(onKeyDown, handleKeyDown)}
-      {...props}
-    />
-  );
-});
+import type {
+  ButtonHTMLAttributes,
+  ElementType,
+  KeyboardEventHandler,
+  MouseEventHandler,
+  ReactNode,
+} from 'react';
+import { forwardRef } from 'react';
+
+import { useComboBoxContext } from './context';
+import { useKeyDown, IDLE, OPEN_WITH_BUTTON, CLOSE_WITH_BUTTON } from './hooks';
+import { wrapEvent } from '../utils/wrap-event';
+import { assignMultipleRefs } from '../utils/assign-ref';
+
+export interface ComboboxButtonProps
+  extends ButtonHTMLAttributes<HTMLButtonElement> {
+  as?: ElementType<any>;
+  innerAs?: ElementType<any>;
+  onClick?: MouseEventHandler<HTMLButtonElement>;
+  onKeyDown?: KeyboardEventHandler<HTMLButtonElement>;
+  children?: ReactNode;
+}
+
+export const ComboboxButton = forwardRef<
+  HTMLButtonElement,
+  ComboboxButtonProps
+>(function ComboboxButton(
+  { as: Comp = 'button', innerAs, onClick, onKeyDown, ...props },
+  ref
+) {
+  const { transition, data, state, buttonRef, listboxIdRef, isVisible } =
+    useComboBoxContext();
+
+  const handleKeyDown = useKeyDown();
+
+  const handleClick = () => {
+    const payload = {
+      item: data.navigationItem,
+    };
+
+    if (state === IDLE) {
+      transition(OPEN_WITH_BUTTON, payload);
+    } else {
+      transition(CLOSE_WITH_BUTTON, payload);
+    }
+  };
+
+  return (
+    <Comp
+      as={innerAs}
+      data-reach-combobox-button=""
+      aria-controls={listboxIdRef.current}
+      aria-haspopup="listbox"
+      aria-expanded={isVisible}
+      ref={assignMultipleRefs(ref, buttonRef)}
+      onClick={wrapEvent(onClick, handleClick)}
+      onKeyDown={wrapEvent(onKeyDown, handleKeyDown)}
+      {...props}
+    />
+  );
+});