@workday/canvas-kit-react 15.0.0-alpha.1326-next.0 → 15.0.0

package/collection/lib/useListItemRemoveable.ts

@@ -1,8 +1,9 @@
 import React from 'react';
+
 import {createElemPropsHook, slugify} from '@workday/canvas-kit-react/common';
 
-import {getCursor, isCursor, useCursorListModel} from './useCursorListModel';
 import {keyboardEventToCursorEvents} from './keyUtils';
+import {getCursor, isCursor, useCursorListModel} from './useCursorListModel';
 
 // retry a function each frame so we don't rely on the timing mechanism of React's render cycle.
 const retryEachFrame = (cb: () => boolean, iterations: number) => {
@@ -27,74 +28,76 @@ const retryEachFrame = (cb: () => boolean, iterations: number) => {
  * );
  * ```
  */
-export const useListItemRemove = createElemPropsHook(useCursorListModel)(
-  (model, _ref, elemProps: {'data-id'?: string} = {}) => {
-    // Create a ref out of state. We don't want to watch state on unmount, so we use a ref to get the
-    // current value at the time of unmounting. Otherwise, `state.items` would be a cached value of an
-    // empty array
-    const stateRef = React.useRef(model.state);
-    stateRef.current = model.state;
+export const useListItemRemove = createElemPropsHook(useCursorListModel)((
+  model,
+  _ref,
+  elemProps: {'data-id'?: string} = {}
+) => {
+  // Create a ref out of state. We don't want to watch state on unmount, so we use a ref to get the
+  // current value at the time of unmounting. Otherwise, `state.items` would be a cached value of an
+  // empty array
+  const stateRef = React.useRef(model.state);
+  stateRef.current = model.state;
 
-    const keyElementRef = React.useRef<Element | null>(null);
+  const keyElementRef = React.useRef<Element | null>(null);
 
-    React.useEffect(() => {
-      if (keyElementRef.current) {
-        const item = model.navigation.getItem(getCursor(model.state), model);
-        if (item) {
-          if (model.state.isVirtualized) {
-            model.state.UNSTABLE_virtual.scrollToIndex(item.index);
-          }
+  React.useEffect(() => {
+    if (keyElementRef.current) {
+      const item = model.navigation.getItem(getCursor(model.state), model);
+      if (item) {
+        if (model.state.isVirtualized) {
+          model.state.UNSTABLE_virtual.scrollToIndex(item.index);
+        }
 
-          const selector = (id?: string) => {
-            return document.querySelector<HTMLElement>(
-              `[data-focus-id="${slugify(`${id}-${item.id}`)}"]`
-            );
-          };
+        const selector = (id?: string) => {
+          return document.querySelector<HTMLElement>(
+            `[data-focus-id="${slugify(`${id}-${item.id}`)}"]`
+          );
+        };
 
-          // In React concurrent mode, there could be several render attempts before the element we're
-          // looking for could be available in the DOM
-          retryEachFrame(() => {
-            // Attempt to extract the ID from the DOM element. This fixes issues where the server and client
-            // do not agree on a generated ID
-            const clientId = keyElementRef.current?.getAttribute('data-focus-id')?.split('-')[0];
-            const element = selector(clientId) || selector(model.state.id);
+        // In React concurrent mode, there could be several render attempts before the element we're
+        // looking for could be available in the DOM
+        retryEachFrame(() => {
+          // Attempt to extract the ID from the DOM element. This fixes issues where the server and client
+          // do not agree on a generated ID
+          const clientId = keyElementRef.current?.getAttribute('data-focus-id')?.split('-')[0];
+          const element = selector(clientId) || selector(model.state.id);
 
-            element?.focus();
-            if (element) {
-              keyElementRef.current = null;
-            }
-            return !!element;
-          }, 5); // 5 should be enough, right?!
-        }
+          element?.focus();
+          if (element) {
+            keyElementRef.current = null;
+          }
+          return !!element;
+        }, 5); // 5 should be enough, right?!
       }
-      // we only want to run this effect if the cursor changes and not any other time
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [model.state.cursorId]);
+    }
+    // we only want to run this effect if the cursor changes and not any other time
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [model.state.cursorId]);
 
-    // Roving focus must always have a focus stop to function correctly
-    React.useEffect(() => {
-      if (!model.state.cursorId && model.state.items.length) {
-        model.events.goTo({id: model.state.items[0].id});
-      }
-    }, [model.state.cursorId, model.state.items, model.events]);
+  // Roving focus must always have a focus stop to function correctly
+  React.useEffect(() => {
+    if (!model.state.cursorId && model.state.items.length) {
+      model.events.goTo({id: model.state.items[0].id});
+    }
+  }, [model.state.cursorId, model.state.items, model.events]);
 
-    return {
-      onKeyDown(event: React.KeyboardEvent) {
-        const handled = keyboardEventToCursorEvents(event, model);
-        if (handled) {
-          event.preventDefault();
-          keyElementRef.current = event.currentTarget;
-        }
-      },
-      onClick() {
-        model.events.goTo({id: elemProps['data-id']!});
-      },
-      'data-focus-id': slugify(`${model.state.id}-${elemProps['data-id']}`),
-      tabIndex: !model.state.cursorId
-        ? 0 // cursor isn't known yet, be safe and mark this as focusable
-        : !!elemProps['data-id'] && isCursor(model.state, elemProps['data-id'])
+  return {
+    onKeyDown(event: React.KeyboardEvent) {
+      const handled = keyboardEventToCursorEvents(event, model);
+      if (handled) {
+        event.preventDefault();
+        keyElementRef.current = event.currentTarget;
+      }
+    },
+    onClick() {
+      model.events.goTo({id: elemProps['data-id']!});
+    },
+    'data-focus-id': slugify(`${model.state.id}-${elemProps['data-id']}`),
+    tabIndex: !model.state.cursorId
+      ? 0 // cursor isn't known yet, be safe and mark this as focusable
+      : !!elemProps['data-id'] && isCursor(model.state, elemProps['data-id'])
         ? 0 // A name is known and cursor is here
         : -1, // A name is known an cursor is somewhere else
-    };
-  }
-);
+  };
+});

package/collection/lib/useListItemRovingFocus.tsx

@@ -1,9 +1,10 @@
 import React from 'react';
+
 import {createElemPropsHook, slugify} from '@workday/canvas-kit-react/common';
 
-import {getCursor, isCursor} from './useCursorListModel';
-import {keyboardEventToCursorEvents} from './keyUtils';
 import {focusOnCurrentCursor} from './focusOnCurrentCursor';
+import {keyboardEventToCursorEvents} from './keyUtils';
+import {getCursor, isCursor} from './useCursorListModel';
 import {useListModel} from './useListModel';
 
 /**
@@ -20,53 +21,55 @@ import {useListModel} from './useListModel';
  * );
 ```
  */
-export const useListItemRovingFocus = createElemPropsHook(useListModel)(
-  (model, _ref, elemProps: {'data-id'?: string} = {}) => {
-    // Create a ref out of state. We don't want to watch state on unmount, so we use a ref to get the
-    // current value at the time of unmounting. Otherwise, `state.items` would be a cached value of an
-    // empty array
-    const stateRef = React.useRef(model.state);
-    stateRef.current = model.state;
+export const useListItemRovingFocus = createElemPropsHook(useListModel)((
+  model,
+  _ref,
+  elemProps: {'data-id'?: string} = {}
+) => {
+  // Create a ref out of state. We don't want to watch state on unmount, so we use a ref to get the
+  // current value at the time of unmounting. Otherwise, `state.items` would be a cached value of an
+  // empty array
+  const stateRef = React.useRef(model.state);
+  stateRef.current = model.state;
 
-    const keyElementRef = React.useRef<HTMLElement | null>(null);
+  const keyElementRef = React.useRef<HTMLElement | null>(null);
 
-    React.useEffect(() => {
-      // If the cursor change was triggered by this hook, we should change focus
-      if (keyElementRef.current) {
-        focusOnCurrentCursor(model, getCursor(model.state), keyElementRef.current).then(() => {
-          // Reset key element since focus was successful
-          keyElementRef.current = null;
-        });
-      }
-      // we only want to run this effect if the cursor changes and not any other time
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [model.state.cursorId]);
+  React.useEffect(() => {
+    // If the cursor change was triggered by this hook, we should change focus
+    if (keyElementRef.current) {
+      focusOnCurrentCursor(model, getCursor(model.state), keyElementRef.current).then(() => {
+        // Reset key element since focus was successful
+        keyElementRef.current = null;
+      });
+    }
+    // we only want to run this effect if the cursor changes and not any other time
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [model.state.cursorId]);
 
-    // We need to change this - maybe add an option to select first one with a keyboard action
-    // Roving focus must always have a focus stop to function correctly
-    React.useEffect(() => {
-      if (!model.state.cursorId && model.state.items.length) {
-        model.events.goTo({id: model.state.items[0].id});
-      }
-    }, [model.state.cursorId, model.state.items, model.events]);
+  // We need to change this - maybe add an option to select first one with a keyboard action
+  // Roving focus must always have a focus stop to function correctly
+  React.useEffect(() => {
+    if (!model.state.cursorId && model.state.items.length) {
+      model.events.goTo({id: model.state.items[0].id});
+    }
+  }, [model.state.cursorId, model.state.items, model.events]);
 
-    return {
-      onKeyDown(event: React.KeyboardEvent<HTMLElement>) {
-        const handled = keyboardEventToCursorEvents(event, model);
-        if (handled) {
-          event.preventDefault();
-          keyElementRef.current = event.currentTarget;
-        }
-      },
-      onClick() {
-        model.events.goTo({id: elemProps['data-id']!});
-      },
-      'data-focus-id': slugify(`${model.state.id}-${elemProps['data-id']}`),
-      tabIndex: !model.state.cursorId
-        ? 0 // cursor isn't known yet, be safe and mark this as focusable
-        : !!elemProps['data-id'] && isCursor(model.state, elemProps['data-id'])
+  return {
+    onKeyDown(event: React.KeyboardEvent<HTMLElement>) {
+      const handled = keyboardEventToCursorEvents(event, model);
+      if (handled) {
+        event.preventDefault();
+        keyElementRef.current = event.currentTarget;
+      }
+    },
+    onClick() {
+      model.events.goTo({id: elemProps['data-id']!});
+    },
+    'data-focus-id': slugify(`${model.state.id}-${elemProps['data-id']}`),
+    tabIndex: !model.state.cursorId
+      ? 0 // cursor isn't known yet, be safe and mark this as focusable
+      : !!elemProps['data-id'] && isCursor(model.state, elemProps['data-id'])
         ? 0 // A name is known and cursor is here
         : -1, // A name is known an cursor is somewhere else
-    };
-  }
-);
+  };
+});

package/collection/lib/useListItemSelect.tsx

@@ -16,18 +16,20 @@ import {useListModel} from './useListModel';
  * );
  * ```
  */
-export const useListItemSelect = createElemPropsHook(useListModel)(
-  ({state, events}, _, elemProps: {'data-id'?: string} = {}) => {
-    const name = elemProps['data-id'] || '';
-    const onClick = (event: React.MouseEvent<HTMLElement>) => {
-      if (
-        !state.nonInteractiveIds.includes(name) &&
-        event.currentTarget.getAttribute('aria-disabled') !== 'true'
-      ) {
-        events.select({id: name});
-      }
-    };
+export const useListItemSelect = createElemPropsHook(useListModel)((
+  {state, events},
+  _,
+  elemProps: {'data-id'?: string} = {}
+) => {
+  const name = elemProps['data-id'] || '';
+  const onClick = (event: React.MouseEvent<HTMLElement>) => {
+    if (
+      !state.nonInteractiveIds.includes(name) &&
+      event.currentTarget.getAttribute('aria-disabled') !== 'true'
+    ) {
+      events.select({id: name});
+    }
+  };
 
-    return {onClick};
-  }
-);
+  return {onClick};
+});

package/collection/lib/useListKeyboardHandler.ts

@@ -1,8 +1,9 @@
 import React from 'react';
+
 import {createElemPropsHook} from '@workday/canvas-kit-react/common';
 
-import {useCursorListModel} from './useCursorListModel';
 import {keyboardEventToCursorEvents} from './keyUtils';
+import {useCursorListModel} from './useCursorListModel';
 
 /**
  * This elemProps hook is used to attach keyboard events to handle keyboard navigation

package/collection/lib/useListLoader.ts

@@ -192,7 +192,7 @@ const resetItems = (total: number) => Array(total).fill(undefined);
 export function useListLoader<
   T,
   // I cannot get Typescript to accept models that extend from `useListModel` to be considered valid
-  M extends ((...args: any[]) => any) & Omit<typeof useListModel, 'Context'>
+  M extends ((...args: any[]) => any) & Omit<typeof useListModel, 'Context'>,
 >(
   config: AsyncCollectionConfig<T, ReturnType<M>> & M['TConfig'],
   modelHook: M

package/collection/lib/useListModel.tsx

@@ -1,4 +1,5 @@
 import {createModelHook} from '@workday/canvas-kit-react/common';
+
 import {useSelectionListModel} from './useSelectionListModel';
 
 // This file creates a `ListModel` composing a `BaseListModel`, `CursorListModel`, and

package/collection/lib/useListRenderItem.tsx

@@ -1,9 +1,9 @@
+import {VirtualItem} from '@tanstack/react-virtual';
 import React from 'react';
 
 import {Generic} from '@workday/canvas-kit-react/common';
 
 import {Item, useBaseListModel} from './useBaseListModel';
-import {VirtualItem} from '@tanstack/react-virtual';
 
 export const ListRenderItemContext = React.createContext<{
   item?: Item<Generic>;

package/collection/lib/useListResetCursorOnBlur.tsx

@@ -1,9 +1,10 @@
 import React from 'react';
 
 import {createElemPropsHook, useMountLayout} from '@workday/canvas-kit-react/common';
+
 import {orientationKeyMap} from './keyUtils';
-import {useListModel} from './useListModel';
 import {isCursor} from './useCursorListModel';
+import {useListModel} from './useListModel';
 
 /**
  * This elemProps hook resets the cursor when the list looses focus. By default,

package/collection/lib/useOverflowListItemMeasure.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+
 import {createElemPropsHook, useLocalRef, useMountLayout} from '@workday/canvas-kit-react/common';
 
 import {useOverflowListModel} from './useOverflowListModel';
@@ -19,60 +20,62 @@ const hiddenStyles = {
  * )
  * ```
  */
-export const useOverflowListItemMeasure = createElemPropsHook(useOverflowListModel)(
-  (model, ref, elemProps: {'data-id'?: string} = {}) => {
-    const {elementRef, localRef} = useLocalRef(ref as React.Ref<HTMLElement>);
-    const name = elemProps['data-id'] || '';
+export const useOverflowListItemMeasure = createElemPropsHook(useOverflowListModel)((
+  model,
+  ref,
+  elemProps: {'data-id'?: string} = {}
+) => {
+  const {elementRef, localRef} = useLocalRef(ref as React.Ref<HTMLElement>);
+  const name = elemProps['data-id'] || '';
 
-    useMountLayout(() => {
-      if (localRef.current) {
-        const styles = getComputedStyle(localRef.current);
-        model.events.addItemSize({
-          id: name,
-          width:
-            localRef.current.offsetWidth +
-            parseFloat(styles.marginLeft) +
-            parseFloat(styles.marginRight),
-          height:
-            localRef.current.offsetHeight +
-            parseFloat(styles.marginTop) +
-            parseFloat(styles.marginBottom),
-        });
-      }
+  useMountLayout(() => {
+    if (localRef.current) {
+      const styles = getComputedStyle(localRef.current);
+      model.events.addItemSize({
+        id: name,
+        width:
+          localRef.current.offsetWidth +
+          parseFloat(styles.marginLeft) +
+          parseFloat(styles.marginRight),
+        height:
+          localRef.current.offsetHeight +
+          parseFloat(styles.marginTop) +
+          parseFloat(styles.marginBottom),
+      });
+    }
 
-      return () => {
-        model.events.removeItemSize({id: name});
-      };
-    });
+    return () => {
+      model.events.removeItemSize({id: name});
+    };
+  });
 
-    const hidden = model.state.hiddenIds.includes(name);
+  const hidden = model.state.hiddenIds.includes(name);
 
-    return {
-      ref: elementRef,
-      'aria-hidden': hidden || undefined,
+  return {
+    ref: elementRef,
+    'aria-hidden': hidden || undefined,
 
-      style: hidden ? hiddenStyles : {},
+    style: hidden ? hiddenStyles : {},
 
-      // `inert` is not directly supported in React < 19 which means the prop is forwarded directly
-      // as an HTML attribute. React 19 adds support for this prop officially as a `boolean |
-      // undefined`. React <19 will ignore `true`, so we need to make it the string `'true'`. We
-      // cannot change this until we drop support for React <19. The old workaround was `inert: ''`
-      // which works in React <19, but in React 19, the empty string is considered `false` and the
-      // attribute is not added to the DOM. If we try to coerce a `'true'`, the attribute will be
-      // added in both React 18 and 19, but dev mode will throw a warning.
-      //
-      // - React 18: `inert: true` => no `inert` attribute
-      // - React 18: `inert: 'true'` => `inert="true"` in the DOM
-      // - React 19: `inert: true` => `inert` in the DOM
-      // - React 19: `inert: 'true'` => `inert` in the DOM
-      //
-      // The only way to remove the dev warning in React 19, but have the same functionality in all
-      // versions of React, we must detect React 19 and set the attribute accordingly in either
-      // case. Do not remove this wonky code until we drop support for React <19.
-      // https://github.com/facebook/react/issues/17157
-      //
-      // @ts-ignore
-      inert: React.use ? hidden : hidden ? '' : undefined,
-    };
-  }
-);
+    // `inert` is not directly supported in React < 19 which means the prop is forwarded directly
+    // as an HTML attribute. React 19 adds support for this prop officially as a `boolean |
+    // undefined`. React <19 will ignore `true`, so we need to make it the string `'true'`. We
+    // cannot change this until we drop support for React <19. The old workaround was `inert: ''`
+    // which works in React <19, but in React 19, the empty string is considered `false` and the
+    // attribute is not added to the DOM. If we try to coerce a `'true'`, the attribute will be
+    // added in both React 18 and 19, but dev mode will throw a warning.
+    //
+    // - React 18: `inert: true` => no `inert` attribute
+    // - React 18: `inert: 'true'` => `inert="true"` in the DOM
+    // - React 19: `inert: true` => `inert` in the DOM
+    // - React 19: `inert: 'true'` => `inert` in the DOM
+    //
+    // The only way to remove the dev warning in React 19, but have the same functionality in all
+    // versions of React, we must detect React 19 and set the attribute accordingly in either
+    // case. Do not remove this wonky code until we drop support for React <19.
+    // https://github.com/facebook/react/issues/17157
+    //
+    // @ts-ignore
+    inert: React.use ? hidden : hidden ? '' : undefined,
+  };
+});

package/collection/lib/useOverflowListMeasure.ts

@@ -2,9 +2,9 @@ import * as React from 'react';
 
 import {
   createElemPropsHook,
+  useLocalRef,
   useMountLayout,
   useResizeObserver,
-  useLocalRef,
 } from '@workday/canvas-kit-react/common';
 
 import {useOverflowListModel} from './useOverflowListModel';

package/collection/lib/useOverflowListModel.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
 
 import {createModelHook} from '@workday/canvas-kit-react/common';
-import {useSelectionListModel} from './useSelectionListModel';
+
 import {Item} from './useBaseListModel';
+import {useSelectionListModel} from './useSelectionListModel';
 
 export function getHiddenIds(
   containerSize: number,

package/collection/lib/useOverflowListTarget.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import {createElemPropsHook, useMountLayout, useLocalRef} from '@workday/canvas-kit-react/common';
+import {createElemPropsHook, useLocalRef, useMountLayout} from '@workday/canvas-kit-react/common';
 
 import {useOverflowListModel} from './useOverflowListModel';
 

package/collection/lib/useSelectionListModel.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+
 import {createModelHook} from '@workday/canvas-kit-react/common';
 
 import {useCursorListModel} from './useCursorListModel';

package/color-picker/lib/ColorInput.tsx

@@ -1,15 +1,17 @@
 import * as React from 'react';
+
 import {
+  ErrorType,
+  GrowthBehavior,
   createComponent,
   expandHex,
-  GrowthBehavior,
-  ErrorType,
 } from '@workday/canvas-kit-react/common';
+import {Subtext} from '@workday/canvas-kit-react/text';
 import {TextInput, TextInputProps} from '@workday/canvas-kit-react/text-input';
-import {ColorSwatch} from './parts/ColorSwatch';
 import {calc, createStencil, handleCsProp, px2rem} from '@workday/canvas-kit-styling';
 import {system} from '@workday/canvas-tokens-web';
-import {Subtext} from '@workday/canvas-kit-react/text';
+
+import {ColorSwatch} from './parts/ColorSwatch';
 
 export interface ColorInputProps extends TextInputProps, GrowthBehavior {
   /**
@@ -81,7 +83,7 @@ export const colorPickerHexInputStencil = createStencil({
     [swatchPart]: {
       position: 'absolute',
       top: px2rem(10),
-      left: system.space.x2,
+      left: system.legacy.gap.sm,
       boxShadow: `inset 0 0 0 ${px2rem(1)} rgba(0,0,0,0.25)`,
       pointerEvents: 'none',
     },
@@ -102,14 +104,9 @@ export const colorPickerHexInputStencil = createStencil({
       }),
     },
     disabled: {
-      true: ({inputPart, poundSignPart}) => ({
-        [inputPart]: {
-          borderColor: system.color.border.input.disabled,
-          backgroundColor: system.color.bg.alt.soft,
-          color: system.color.text.disabled,
-        },
+      true: ({poundSignPart}) => ({
         [poundSignPart]: {
-          color: system.color.text.disabled,
+          opacity: system.opacity.disabled,
         },
       }),
     },

package/color-picker/lib/ColorPreview.tsx

@@ -1,8 +1,9 @@
-import {ColorInput} from './ColorInput';
 import {createComponent} from '@workday/canvas-kit-react/common';
+import {TextInputProps} from '@workday/canvas-kit-react/text-input';
 import {createStencil, handleCsProp} from '@workday/canvas-kit-styling';
 import {system} from '@workday/canvas-tokens-web';
-import {TextInputProps} from '@workday/canvas-kit-react/text-input';
+
+import {ColorInput} from './ColorInput';
 
 export interface ColorPreviewProps extends TextInputProps {
   /**
@@ -17,8 +18,8 @@ export interface ColorPreviewProps extends TextInputProps {
 
 export const colorPreviewStencil = createStencil({
   base: {
-    backgroundColor: system.color.bg.default,
-    borderColor: system.color.border.inverse,
+    backgroundColor: system.legacy.color.surface.default,
+    borderColor: system.legacy.color.border.inverse.default,
     pointerEvents: 'none',
   },
 });

package/color-picker/lib/parts/ColorSwatch.tsx

@@ -1,9 +1,9 @@
 import * as React from 'react';
 
 import {pickForegroundColor} from '@workday/canvas-kit-react/common';
-import {checkSmallIcon} from '@workday/canvas-system-icons-web';
 import {SystemIcon, systemIconStencil} from '@workday/canvas-kit-react/icon';
 import {calc, createStencil, handleCsProp, px2rem} from '@workday/canvas-kit-styling';
+import {checkSmallIcon} from '@workday/canvas-system-icons-web';
 import {system} from '@workday/canvas-tokens-web';
 
 export interface ColorSwatchProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -18,9 +18,9 @@ export const colorPickerColorSwatchStencil = createStencil({
   },
   base: ({color, iconColor}) => ({
     [systemIconStencil.vars.color]: iconColor,
-    width: px2rem(20),
-    height: px2rem(20),
-    borderRadius: system.shape.half,
+    width: system.legacy.size.xxs,
+    height: system.legacy.size.xxs,
+    borderRadius: system.legacy.shape.sm,
     backgroundColor: color,
     display: 'flex',
     alignItems: 'center',

package/combobox/lib/Combobox.tsx

@@ -2,9 +2,10 @@ import React from 'react';
 
 import {createContainer} from '@workday/canvas-kit-react/common';
 
-import {useComboboxModel} from './hooks/useComboboxModel';
 import {ComboboxInput} from './ComboboxInput';
 import {ComboboxMenu} from './ComboboxMenu';
+import {useComboboxModel} from './hooks/useComboboxModel';
+
 export interface ComboboxProps {
   /**
    * Children of the `Combobox`. Should contain a `Combobox.Input` and a `Combobox.Menu`