@workday/canvas-kit-react 7.1.4 → 7.2.0-427-next.2

package/button/lib/BaseButton.tsx

@@ -12,7 +12,8 @@ import {
   EmotionCanvasTheme,
   StyledType,
 } from '@workday/canvas-kit-react/common';
-import {BoxProps, boxStyleFn} from '@workday/canvas-kit-react/layout';
+import {SystemIconProps} from '@workday/canvas-kit-react/icon';
+import {boxStyleFn} from '@workday/canvas-kit-react/layout';
 import {borderRadius, space, spaceNumbers, type} from '@workday/canvas-kit-react/tokens';
 
 import {ButtonColors, ButtonSizes, IconPositions, TertiaryButtonSizes} from './types';
@@ -20,19 +21,16 @@ import {ButtonColors, ButtonSizes, IconPositions, TertiaryButtonSizes} from './t
 import {CSSObject} from '@emotion/styled';
 import {CanvasSystemIcon} from '@workday/design-assets-types';
 
-export interface ButtonContainerProps extends BoxProps, GrowthBehavior {
+export interface ButtonContainerProps extends Partial<SystemIconProps>, GrowthBehavior {
+  /**
+   * Override default colors of a button. The default will depend on the button type
+   */
   colors?: ButtonColors;
   /**
    * There are four button sizes: `extraSmall`, `small`, `medium`, and `large`.
    * If no size is provided, it will default to `medium`.
-   *
-   * @default 'medium'
    */
   size?: ButtonSizes;
-  /**
-   * The ref to the button that the styled component renders.
-   */
-  ref?: React.Ref<HTMLButtonElement>;
   /**
    * Whether the icon should received filled (colored background layer) or regular styles.
    * Corresponds to `toggled` in ToolbarIconButton
@@ -40,6 +38,13 @@ export interface ButtonContainerProps extends BoxProps, GrowthBehavior {
   fillIcon?: boolean;
 }
 
+/**
+ * Extends all the style properties from Box to our buttons as well as props from ButtonContainerProps.
+ * We omit `ref` since all of our buttons use `createComponent` and already give access to `ref`.
+ * Use this type to extend and customize any one off buttons that you want full control over styling.
+ */
+export interface BaseButtonProps extends Omit<ButtonContainerProps, 'ref'> {}
+
 function getIconColorSelectors(
   {
     canvas: {
@@ -291,7 +296,7 @@ export const BaseButton = createComponent('button')({
   displayName: 'Button',
   Component: ({children, ...elemProps}: ButtonContainerProps, ref, Element) => {
     return (
-      <ButtonContainer as={Element} ref={ref} {...elemProps}>
+      <ButtonContainer as={Element} ref={ref} type="button" {...elemProps}>
         {children}
       </ButtonContainer>
     );

package/button/lib/DeleteButton.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import {ButtonColors} from './types';
-import {BaseButton, getMinWidthStyles, getPaddingStyles} from './BaseButton';
+import {BaseButton, BaseButtonProps, getMinWidthStyles, getPaddingStyles} from './BaseButton';
 import {
   GrowthBehavior,
   useTheme,
@@ -9,10 +9,9 @@ import {
   createComponent,
 } from '@workday/canvas-kit-react/common';
 
-export interface DeleteButtonProps extends Themeable, GrowthBehavior {
+export interface DeleteButtonProps extends Themeable, GrowthBehavior, BaseButtonProps {
   /**
    * The size of the Button.
-   * @default 'medium'
    */
   size?: 'small' | 'medium' | 'large';
   children?: React.ReactNode;
@@ -42,6 +41,11 @@ const getDeleteButtonColors = ({
   },
 });
 
+/**
+ * Use sparingly for destructive actions that will result in data loss, can’t be undone, or will
+ * have significant consequences. They commonly appear in confirmation dialogs as the final
+ * confirmation before deleting.
+ */
 export const DeleteButton = createComponent('button')({
   displayName: 'DeleteButton',
   Component: (

package/button/lib/ExternalHyperlink.tsx

@@ -34,18 +34,17 @@ const StyledSystemIcon = styled(SystemIcon)<StyledType>({
   marginLeft: '2px',
 });
 
+/**
+ * `ExternalHyperlink`s also have an `inverse` variant. Use this variant when you need to place the
+ * link on a dark or colorful background such as `blueberry400`.
+ */
 export const ExternalHyperlink = createComponent('a')({
   displayName: 'ExternalHyperlink',
   Component: (
-    {
-      children,
-      variant,
-      iconLabel = 'Opens link in new window',
-      ...elemProps
-    }: ExternalHyperlinkProps,
+    {children, iconLabel = 'Opens link in new window', ...elemProps}: ExternalHyperlinkProps,
     ref
   ) => (
-    <Anchor ref={ref} target="_blank" rel="noreferrer" variant={variant} {...elemProps}>
+    <Anchor ref={ref} target="_blank" rel="noreferrer" {...elemProps}>
       <span>{children}</span>
       <StyledSystemIcon
         icon={extLinkIcon}

package/button/lib/Hyperlink.tsx

@@ -66,10 +66,14 @@ const Anchor = styled('a')<HyperlinkProps & StyledType>(
   anchorVariants
 );
 
+/**
+ * `Hyperlink`s should be used when you want to navigate away from the current page or to an anchor
+ * on the current page.
+ */
 export const Hyperlink = createComponent('a')({
   displayName: 'Hyperlink',
-  Component: ({variant, href, children, ...elemProps}: HyperlinkProps, ref, Element) => (
-    <Anchor ref={ref} as={Element} variant={variant} href={href} {...elemProps}>
+  Component: ({children, ...elemProps}: HyperlinkProps, ref, Element) => (
+    <Anchor ref={ref} as={Element} {...elemProps}>
       {children}
     </Anchor>
   ),

package/button/lib/PrimaryButton.tsx

@@ -11,7 +11,7 @@ import {
 import {colors} from '@workday/canvas-kit-react/tokens';
 import {CanvasSystemIcon} from '@workday/design-assets-types';
 import {ButtonSizes, IconPositions} from './types';
-import {BaseButton, getMinWidthStyles, getPaddingStyles} from './BaseButton';
+import {BaseButton, BaseButtonProps, getMinWidthStyles, getPaddingStyles} from './BaseButton';
 
 const getPrimaryButtonColors = (variant: 'inverse' | undefined, theme: EmotionCanvasTheme) => {
   const {
@@ -85,17 +85,14 @@ const getPrimaryButtonColors = (variant: 'inverse' | undefined, theme: EmotionCa
   }
 };
 
-export interface PrimaryButtonProps extends Themeable, GrowthBehavior {
+export interface PrimaryButtonProps extends Themeable, GrowthBehavior, BaseButtonProps {
   /**
    * The variant of the PrimaryButton.
-   * @default undefined
    */
   variant?: 'inverse';
   /**
    * There are four button sizes: `extraSmall`, `small`, `medium`, and `large`.
    * If no size is provided, it will default to `medium`.
-   *
-   * @default 'medium'
    */
   size?: ButtonSizes;
   /**
@@ -106,17 +103,24 @@ export interface PrimaryButtonProps extends Themeable, GrowthBehavior {
   /**
    * Button icon positions can either be `start` or `end`.
    * If no value is provided, it defaults to `start`.
-   * @default 'start'
    */
   iconPosition?: IconPositions;
   /**
    * If set to `true`, transform the icon's x-axis to mirror the graphic
-   * @default false
    */
   shouldMirrorIcon?: boolean;
   children?: React.ReactNode;
 }
 
+/**
+ * Primary Buttons are high emphasis. Use once per screen to draw attention to the highest priority
+ * action. Multiple primary buttons make it confusing for the user to understand what action they
+ * should take. Not all screens require a Primary Button.
+ *
+ * Primary Buttons have four sizes: `extraSmall`, `small`, `medium`, and `large`. Icons are
+ * supported for every size and can be positioned at the `start` or `end` with the `iconPosition`
+ * prop.
+ */
 export const PrimaryButton = createComponent('button')({
   displayName: 'PrimaryButton',
   Component: (

package/button/lib/SecondaryButton.tsx

@@ -11,9 +11,9 @@ import {
 } from '@workday/canvas-kit-react/common';
 import {CanvasSystemIcon} from '@workday/design-assets-types';
 import {ButtonColors, ButtonSizes, IconPositions} from './types';
-import {BaseButton, getMinWidthStyles, getPaddingStyles} from './BaseButton';
+import {BaseButton, BaseButtonProps, getMinWidthStyles, getPaddingStyles} from './BaseButton';
 
-export interface SecondaryButtonProps extends Themeable, GrowthBehavior {
+export interface SecondaryButtonProps extends Themeable, GrowthBehavior, BaseButtonProps {
   /**
    * The variant of the SecondaryButton.
    * @default undefined
@@ -45,6 +45,15 @@ export interface SecondaryButtonProps extends Themeable, GrowthBehavior {
   children?: React.ReactNode;
 }
 
+/**
+ * Secondary Buttons have a medium level of emphasis. Use them for non-critical actions. Secondary
+ * Buttons can be used on most pages without restrictions and work well for multiple actions of
+ * equal weight. They can be used in conjunction with a Primary Button or independently.
+ *
+ * Secondary Buttons have four sizes: `extraSmall`, `small`, `medium`, and `large`. Icons are
+ * supported for every size and can be positioned at the `start` or `end` with the `iconPosition`
+ * prop.
+ */
 export const SecondaryButton = createComponent('button')({
   displayName: 'SecondaryButton',
   Component: (

package/button/lib/TertiaryButton.tsx

@@ -11,25 +11,21 @@ import {
 import {borderRadius, colors, space} from '@workday/canvas-kit-react/tokens';
 import {CanvasSystemIcon} from '@workday/design-assets-types';
 import {ButtonColors, IconPositions, ButtonSizes} from './types';
-import {BaseButton} from './BaseButton';
+import {BaseButton, BaseButtonProps} from './BaseButton';
 
-export interface TertiaryButtonProps extends Themeable {
+export interface TertiaryButtonProps extends Themeable, BaseButtonProps {
   /**
    * The variant of the TertiaryButton.
-   * @default undefined
    */
   variant?: 'inverse' | undefined;
   /**
-   * There are three button sizes: `extraSmall`, `small`, and `medium`.
+   * There are four button sizes: `extraSmall`, `small`, `medium`, and `large`.
    * If no size is provided, it will default to `medium`.
-   *
-   * @default 'medium'
    */
   size?: ButtonSizes;
   /**
    * Button icon positions can either be `start` or `end`.
    * If no value is provided, it defaults to `start`.
-   * @default 'start'
    */
   iconPosition?: IconPositions;
   /**
@@ -41,17 +37,23 @@ export interface TertiaryButtonProps extends Themeable {
    */
   /**
    * If set to `true`, transform the icon's x-axis to mirror the graphic
-   * @default false
    */
   shouldMirrorIcon?: boolean;
+  /**
+   * If set to `true`, transform text to all letters uppercase
+   */
   allCaps?: boolean;
   children?: React.ReactNode;
+  /**
+   * If set to `true`, make icon button available to use theme colors instead of default
+   */
+  isThemeable?: boolean;
 }
 
 const getTertiaryButtonColors = (
   variant: 'inverse' | undefined,
   theme: EmotionCanvasTheme,
-  children: React.ReactNode
+  hasThemeStyles: boolean
 ): ButtonColors => {
   const {
     canvas: {
@@ -99,27 +101,27 @@ const getTertiaryButtonColors = (
   } else {
     return {
       default: {
-        icon: children ? themePrimary.main : colors.blackPepper400,
+        icon: hasThemeStyles ? themePrimary.main : colors.blackPepper400,
         label: themePrimary.main,
       },
       hover: {
         background: colors.soap200,
-        icon: children ? themePrimary.dark : colors.blackPepper500,
+        icon: hasThemeStyles ? themePrimary.dark : colors.blackPepper500,
         label: themePrimary.dark,
       },
       active: {
         background: colors.soap300,
-        icon: children ? themePrimary.dark : colors.blackPepper500,
+        icon: hasThemeStyles ? themePrimary.dark : colors.blackPepper500,
         label: themePrimary.dark,
       },
       focus: {
-        icon: children ? themePrimary.main : colors.blackPepper500,
+        icon: hasThemeStyles ? themePrimary.main : colors.blackPepper500,
         label: themePrimary.main,
         focusRing: focusRing({innerColor: colors.blueberry400}, theme),
       },
       disabled: {
         background: 'transparent',
-        icon: children ? themePrimary.main : colors.blackPepper400,
+        icon: hasThemeStyles ? themePrimary.main : colors.blackPepper400,
         label: themePrimary.main,
       },
     };
@@ -191,34 +193,44 @@ const getMinWidthStyles = (children: React.ReactNode, size: ButtonSizes): string
   return children ? 'auto' : minWidthNum;
 };
 
+/**
+ * Tertiary Buttons have the lowest emphasis. Use for less important actions that the user may not
+ * often be looking to do. Tertiary Buttons have lower prominence as its container is not visible
+ * until it is interacted with. Use Tertiary Buttons for supplemental actions such as “View More”,
+ * “Read More” or “Select a File”. Tertiary Buttons are frequently used on Cards.
+ *
+ * Tertiary Buttons have four sizes: `extraSmall`, `small`, `medium` and `large`. Icons are
+ * supported for every size and can be positioned at the `start` or `end` with the `iconPosition`
+ * prop.
+ */
 export const TertiaryButton = createComponent('button')({
   displayName: 'TertiaryButton',
   Component: (
     {
       size = 'medium',
       iconPosition = 'start',
+      isThemeable = false,
       variant,
       children,
       icon,
       shouldMirrorIcon = false,
-      allCaps,
       ...elemProps
     }: TertiaryButtonProps,
     ref,
     Element
   ) => {
     const theme = useTheme();
+    const hasThemeStyles = !!children || isThemeable;
 
     return (
       <StyledTertiaryButtonContainer
         ref={ref}
         as={Element}
-        allCaps={allCaps}
-        colors={getTertiaryButtonColors(variant, theme, children)}
+        colors={getTertiaryButtonColors(variant, theme, hasThemeStyles)}
         size={size}
         padding={getPaddingStyles(icon, iconPosition, children, size)}
         minWidth={getMinWidthStyles(children, size)}
-        style={{borderRadius: children ? borderRadius.m : borderRadius.circle}}
+        borderRadius={children ? borderRadius.m : borderRadius.circle}
         {...elemProps}
       >
         {icon && iconPosition === 'start' && (

package/button/lib/deprecated_Button.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import canvas, {borderRadius, type} from '@workday/canvas-kit-react/tokens';
+import {canvas, borderRadius, type} from '@workday/canvas-kit-react/tokens';
 import {
   focusRing,
   mouseFocusBehavior,

package/button/lib/parts/ButtonLabelIcon.tsx

@@ -1,22 +1,15 @@
 import React from 'react';
-import {CanvasSystemIcon} from '@workday/design-assets-types';
 import {ButtonSizes, IconPositions} from '../types';
 import {createComponent} from '@workday/canvas-kit-react/common';
-import {SystemIcon} from '@workday/canvas-kit-react/icon';
-import {BoxProps} from '@workday/canvas-kit-react/layout';
+import {SystemIcon, SystemIconProps} from '@workday/canvas-kit-react/icon';
 
-export interface ButtonLabelIconProps extends BoxProps {
+export interface ButtonLabelIconProps extends Partial<SystemIconProps> {
   /**
    * There are four button sizes: `extraSmall`, `small`, `medium`, and `large`.
    *
    * @default 'medium'
    */
   size?: ButtonSizes;
-  /**
-   * The icon of the Button.
-   * Note: not displayed at `small` size
-   */
-  icon?: CanvasSystemIcon;
   /**
    * Button icon positions can either be `left` or `right`.
    * If no value is provided, it defaults to `left`.

package/button/package.json

@@ -1,5 +1,6 @@
 {
   "main": "../dist/commonjs/button",
   "module": "../dist/es6/button",
-  "sideEffects": false
+  "sideEffects": false,
+  "types": "../dist/es6/button"
 }

package/card/lib/Card.tsx

@@ -14,6 +14,18 @@ export interface CardProps extends BoxProps {
   children?: React.ReactNode;
 }
 
+/**
+ * `Card` is a container component that holds a {@link CardBody Card.Body} and an optional
+ * {@link CardHeading Card.Heading}. `Card` wraps a non-semantic `div` element. The element can be
+ * replaced using the `as` prop, or a `role` or other `aria-*` attributes can be added to give
+ * `Card` semantic meaning.
+ *
+ * **Note**: Changing the `Card` container to certain semantic elements will put accessibility at
+ * risk. For example, using the `as` prop to change the cards to buttons will flatten the content in
+ * the card. Headings, calls to action, etc. will not function as expected for users with
+ * disabilities. Semantic container elements like `<section>`, or using `<li>` grouped together in a
+ * common `<ul>` can be a useful way to elevate the accessibility of your design.
+ */
 export const Card = createComponent('div')({
   displayName: 'Card',
   Component: ({children, ...elemProps}: CardProps, ref, Element) => {
@@ -33,7 +45,31 @@ export const Card = createComponent('div')({
     );
   },
   subComponents: {
+    /**
+     * `Card.Heading` is an optional subcomponent that is meant to describe the Card. Since `Card`
+     * is a non-semantic presentational component, `Card.Heading` does not automatically have any
+     * semantic meaning. If your use case requires the Heading to label the Card, you must do so
+     * manually.
+     *
+     * For example, {@link Modal} (which uses a `Card`) adds an `aria-labelledby` and a `role` to
+     * the `Card`, as well as an `id` to the `Card.Heading`.
+     *
+     * ```tsx
+     * <Card role="dialog" aria-labelledby="card-heading">
+     *   <Card.Heading id="card-heading">Card Title</Card.Heading>
+     *   <Card.Body>Card Contents</Card.Body>
+     * </Card>
+     * ```
+     *
+     * `Card.Heading` defaults to an `<h3>` element, but it can be changed using the `as` prop.
+     */
     Heading: CardHeading,
+    /**
+     * `Card.Body` is a non-semantic subcomponent that contains the body of the card. Attributes may
+     * be added to give `Card.Body` semantic meaning. If `Card.Body` is brief (like in a short
+     * dialog), it may be helpful to add an `aria-describedby` referencing the `id` of the
+     * `Card.Body` to the `Card` container.
+     */
     Body: CardBody,
   },
 });

package/card/lib/CardBody.tsx

@@ -1,18 +1,15 @@
 import * as React from 'react';
-import styled from '@emotion/styled';
 import {type} from '@workday/canvas-kit-react/tokens';
-import {StyledType, createComponent} from '@workday/canvas-kit-react/common';
+import {createComponent} from '@workday/canvas-kit-react/common';
 import {Box, BoxProps} from '@workday/canvas-kit-react/layout';
 
-const Body = styled(Box)<BoxProps & StyledType>(type.levels.subtext.large);
-
 export const CardBody = createComponent('div')({
   displayName: 'Card.Body',
   Component: ({children, ...elemProps}: BoxProps, ref, Element) => {
     return (
-      <Body ref={ref} as={Element} {...elemProps}>
+      <Box ref={ref} as={Element} {...type.levels.subtext.large} {...elemProps}>
         {children}
-      </Body>
+      </Box>
     );
   },
 });

package/card/lib/CardHeading.tsx

@@ -1,8 +1,7 @@
 import * as React from 'react';
-import styled from '@emotion/styled';
-import {type} from '@workday/canvas-kit-react/tokens';
-import {StyledType, createComponent} from '@workday/canvas-kit-react/common';
-import {Box, BoxProps} from '@workday/canvas-kit-react/layout';
+import {createComponent} from '@workday/canvas-kit-react/common';
+import {BoxProps} from '@workday/canvas-kit-react/layout';
+import {Text} from '@workday/canvas-kit-react/text';
 
 export interface CardHeadingProps extends BoxProps {
   /**
@@ -13,17 +12,21 @@ export interface CardHeadingProps extends BoxProps {
   children?: React.ReactNode;
 }
 
-const Heading = styled(Box.as('h3'))<StyledType>(type.levels.body.large, {
-  fontWeight: type.properties.fontWeights.bold,
-});
-
 export const CardHeading = createComponent('h3')({
   displayName: 'Card.Heading',
   Component: ({children, ...elemProps}: CardHeadingProps, ref, Element) => {
     return (
-      <Heading ref={ref} marginBottom="m" marginTop={0} as={Element} {...elemProps}>
+      <Text
+        ref={ref}
+        typeLevel="body.large"
+        fontWeight="bold"
+        marginBottom="m"
+        marginTop={0}
+        as={Element}
+        {...elemProps}
+      >
         {children}
-      </Heading>
+      </Text>
     );
   },
 });

package/card/package.json

@@ -1,5 +1,6 @@
 {
   "main": "../dist/commonjs/card",
   "module": "../dist/es6/card",
-  "sideEffects": false
+  "sideEffects": false,
+  "types": "../dist/es6/card"
 }

package/checkbox/index.ts

@@ -1,5 +1 @@
-import Checkbox from './lib/Checkbox';
-
-export default Checkbox;
-export {Checkbox};
 export * from './lib/Checkbox';

package/checkbox/lib/Checkbox.tsx

@@ -11,14 +11,10 @@ import {
   useTheme,
   Themeable,
 } from '@workday/canvas-kit-react/common';
-import canvas, {
-  borderRadius,
-  colors,
-  inputColors,
-  spaceNumbers,
-} from '@workday/canvas-kit-react/tokens';
+import {borderRadius, colors, inputColors, spaceNumbers} from '@workday/canvas-kit-react/tokens';
 import {SystemIcon} from '@workday/canvas-kit-react/icon';
 import {checkSmallIcon} from '@workday/canvas-system-icons-web';
+import {LabelText} from '@workday/canvas-kit-react/text';
 
 export interface CheckboxProps extends Themeable {
   /**
@@ -33,7 +29,7 @@ export interface CheckboxProps extends Themeable {
   disabled?: boolean;
   /**
    * The HTML `id` of the underlying checkbox input element. This is required if `label` is defined as a non-empty string.
-   * @default A uniquely generated id
+   * @default {useUniqueId}
    */
   id?: string;
   /**
@@ -307,21 +303,6 @@ const IndeterminateBox = styled('div')<CheckboxProps>(
   })
 );
 
-const CheckboxLabel = styled('label')<{disabled?: boolean; variant?: string}>(
-  {
-    ...canvas.type.levels.subtext.large,
-    paddingLeft: checkboxLabelDistance,
-  },
-  ({variant}) => (variant === 'inverse' ? {color: colors.frenchVanilla100} : undefined),
-  ({disabled, variant}) =>
-    disabled
-      ? {
-          color: variant === 'inverse' ? colors.frenchVanilla100 : inputColors.disabled.text,
-          opacity: variant === 'inverse' ? '.4' : '1',
-        }
-      : {cursor: 'pointer'}
-);
-
 export const Checkbox = createComponent('input')({
   displayName: 'Checkbox',
   Component: (
@@ -333,9 +314,6 @@ export const Checkbox = createComponent('input')({
       theme = useTheme(),
       id,
       disabled,
-      onChange,
-      value,
-      error,
       indeterminate,
       variant,
       ...elemProps
@@ -353,10 +331,7 @@ export const Checkbox = createComponent('input')({
             disabled={disabled}
             id={inputId}
             ref={ref}
-            onChange={onChange}
             type="checkbox"
-            value={value}
-            error={error}
             variant={variant}
             aria-checked={indeterminate ? 'mixed' : checked}
             {...elemProps}
@@ -380,9 +355,14 @@ export const Checkbox = createComponent('input')({
           </CheckboxBackground>
         </CheckboxInputWrapper>
         {label && (
-          <CheckboxLabel variant={variant} htmlFor={inputId} disabled={disabled}>
+          <LabelText
+            htmlFor={inputId}
+            disabled={disabled}
+            variant={variant}
+            paddingInlineStart={checkboxLabelDistance}
+          >
             {label}
-          </CheckboxLabel>
+          </LabelText>
         )}
       </CheckboxContainer>
     );
@@ -391,5 +371,3 @@ export const Checkbox = createComponent('input')({
     ErrorType,
   },
 });
-
-export default Checkbox;

package/checkbox/package.json

@@ -1,5 +1,6 @@
 {
   "main": "../dist/commonjs/checkbox",
   "module": "../dist/es6/checkbox",
-  "sideEffects": false
+  "sideEffects": false,
+  "types": "../dist/es6/checkbox"
 }

package/collection/index.ts

@@ -8,10 +8,16 @@ export * from './lib/useListRenderItem';
 export * from './lib/useListResetCursorOnBlur';
 export * from './lib/useListItemRovingFocus';
 export * from './lib/useListItemSelect';
+export * from './lib/useListKeyboardHandler';
+export * from './lib/useListLoader';
 export * from './lib/useListModel';
-export {ListBox} from './lib/ListBox';
+export * from './lib/useGridModel';
+export * from './lib/useListActiveDescendant';
+export * from './lib/useListItemAllowChildStrings';
+export {ListBox, ListBoxProps} from './lib/ListBox';
 export {
   singleSelectionManager,
   multiSelectionManager,
   isSelected,
 } from './lib/useSelectionListModel';
+export {wrappingNavigationManager, navigationManager} from './lib/useCursorListModel';