@workday/canvas-kit-react 7.0.0-alpha.89-next.16 → 7.0.0-alpha.90-next.17

package/tabs/lib/TabsItem.tsx

@@ -2,30 +2,29 @@ import * as React from 'react';
 
 import {colors, space, type, borderRadius, iconColors} from '@workday/canvas-kit-react/tokens';
 import {
-  createComponent,
   focusRing,
   hideMouseFocus,
   styled,
   StyledType,
-  useModelContext,
-  createHook,
+  createElemPropsHook,
   composeHooks,
   ExtractProps,
   ellipsisStyles,
   EllipsisText,
-  useLocalRef,
-  useMount,
+  createSubcomponent,
 } from '@workday/canvas-kit-react/common';
 import {Box, StackProps} from '@workday/canvas-kit-react/layout';
 import {OverflowTooltip} from '@workday/canvas-kit-react/tooltip';
 import {SystemIcon} from '@workday/canvas-kit-react/icon';
-import {useListRegisterItem} from './list';
-import {useRovingFocus} from './cursor';
-import {isSelected, useSelectionItem} from './selection';
-import {useOverflowMeasureItem} from './overflow';
-
-import {TabsModelContext} from './Tabs';
-import {TabsModel} from './useTabsModel';
+import {
+  useListItemRegister,
+  useListItemRovingFocus,
+  isSelected,
+  useListItemSelect,
+  useOverflowListItemMeasure,
+} from '@workday/canvas-kit-react/collection';
+
+import {useTabsModel} from './useTabsModel';
 export interface TabsItemProps
   extends ExtractProps<typeof Box, never>,
     Partial<Pick<StackProps, 'spacing'>> {
@@ -43,7 +42,7 @@ export interface TabsItemProps
    *
    * ```tsx
    * <Tabs.Item>First Tab</Tabs.Item>
-   * <Tabs.Item hasIcon>
+   * <Tabs.Item>
    *   <Tabs.Icon icon={canvasIcon} />
    *   <Tabs.Text>Second Tab</Tabs.Text>
    * </Tabs.Item>
@@ -51,16 +50,12 @@ export interface TabsItemProps
    */
   children: React.ReactNode;
   /**
-   * The name of the tab. This name will be used in change events and for `initialTab`. Must match
-   * the `name` of the associated tab panel. If this property is not provided, it will default to a
-   * string representation of the the zero-based index of the Tab when it was initialized.
-   */
-  name?: string;
-  /**
-   * Optionally pass a model directly to this component. Default is to implicitly use the same
-   * model as the container component which uses React context. Only use this for advanced use-cases
+   * The identifier of the tab. This identifier will be used in change events and for `initialTab`.
+   * Must match the `data-id` of the associated tab panel. If this property is not provided, it will
+   * default to a string representation of the the zero-based index of the Tab when it was
+   * initialized.
    */
-  model?: TabsModel;
+  'data-id'?: string;
   /**
    * Optional id. If not set, it will inherit the ID passed to the `Tabs` component and append the
    * index at the end. Only set this for advanced cases.
@@ -83,23 +78,9 @@ export interface TabsItemProps
    * set while all inactive tabs should have a `tabIndex={-1}`
    */
   tabIndex?: number;
-  /**
-   * Use `hasIcon={true}` when the Tab item contains an icon. This instructs the tab item to render
-   * children as a flex container to accommodate icons. You will have to use `Tabs.Item.Text` as a
-   * child element if this is set to true.
-   *
-   * @example
-   * <Tabs.Item hasIcon>
-   *   <Tabs.Item.Icon icon={someIcon} />
-   *   <Tabs.Item.Text>Tab Text</Tabs.Item.Text>
-   * </Tabs.Item>
-   */
-  hasIcon?: boolean;
 }
 
-export const StyledTabItem = styled(Box.as('button'))<
-  StyledType & {hasIcon?: boolean} & Pick<TabsItemProps, 'spacing'>
->(
+export const StyledTabItem = styled(Box.as('button'))<StyledType & Pick<TabsItemProps, 'spacing'>>(
   ({theme, spacing}) => ({
     ...type.levels.subtext.large,
     '& > *:not(style) ~ *:not(style)': {
@@ -179,71 +160,52 @@ export const StyledTabItem = styled(Box.as('button'))<
       },
     },
   }),
-  ({hasIcon}) => {
-    if (hasIcon) {
+  ({children}) => {
+    if (typeof children === 'string') {
+      return ellipsisStyles;
+    } else {
       return {
         display: 'flex',
       };
-    } else {
-      return ellipsisStyles;
     }
   }
 );
 
-export const TabsItem = createComponent('button')({
-  displayName: 'Tabs.Item',
-  Component: ({model, children, ...elemProps}: TabsItemProps, ref, Element) => {
-    const localModel = useModelContext(TabsModelContext, model);
-
-    const props = useTabsItem(localModel, elemProps, ref);
-
-    if ('production' !== process.env.NODE_ENV) {
-      // ensure `hasIcon` is used when a child has an icon
-      // eslint-disable-next-line react-hooks/rules-of-hooks
-      const {elementRef, localRef} = useLocalRef(props.ref);
-      props.ref = elementRef;
-      // eslint-disable-next-line react-hooks/rules-of-hooks
-      useMount(() => {
-        if (localRef?.current?.querySelector('svg') && !props.hasIcon) {
-          console.warn(
-            `A Tabs.Item with an icon should have the 'hasIcon' prop set to true. This ensures correct rendering`
-          );
-        }
-      });
-    }
-
-    return (
-      <OverflowTooltip>
-        <StyledTabItem as={Element} {...props}>
-          {children}
-        </StyledTabItem>
-      </OverflowTooltip>
-    );
-  },
-  subComponents: {
-    Icon: SystemIcon,
-    Text: EllipsisText,
-  },
-});
-
 export const useTabsItem = composeHooks(
-  createHook(
-    (model: TabsModel, _?: React.Ref<HTMLButtonElement>, elemProps: {name?: string} = {}) => {
-      const {state} = model;
-      const name = elemProps.name || '';
+  createElemPropsHook(useTabsModel)(
+    ({state}, _?: React.Ref<HTMLButtonElement>, elemProps: {'data-id'?: string} = {}) => {
+      const name = elemProps['data-id'] || '';
 
-      const selected = !!elemProps.name && isSelected(name, state);
+      const selected = !!elemProps['data-id'] && isSelected(name, state);
 
       return {
-        type: 'button' as 'button', // keep Typescript happy
+        type: 'button',
         role: 'tab',
         'aria-selected': selected,
         'aria-controls': `tabpanel-${state.id}-${name}`,
       };
     }
   ),
-  useSelectionItem,
-  useOverflowMeasureItem,
-  useRovingFocus,
-  useListRegisterItem
+  useListItemSelect,
+  useOverflowListItemMeasure,
+  useListItemRovingFocus,
+  useListItemRegister
 );
+
+export const TabsItem = createSubcomponent('button')({
+  displayName: 'Tabs.Item',
+  modelHook: useTabsModel,
+  elemPropsHook: useTabsItem,
+  subComponents: {
+    Icon: SystemIcon,
+    Text: EllipsisText,
+  },
+})<TabsItemProps>(({children, ...elemProps}, Element, model) => {
+  return (
+    <OverflowTooltip>
+      <StyledTabItem as={Element} {...elemProps}>
+        {children}
+      </StyledTabItem>
+    </OverflowTooltip>
+  );
+});

package/tabs/lib/TabsList.tsx

@@ -3,18 +3,18 @@ import * as React from 'react';
 import {commonColors} from '@workday/canvas-kit-react/tokens';
 import {
   composeHooks,
-  createComponent,
-  createHook,
+  createSubcomponent,
+  createElemPropsHook,
   ExtractProps,
-  useModelContext,
 } from '@workday/canvas-kit-react/common';
 import {Stack} from '@workday/canvas-kit-react/layout';
-import {useOverflowMeasureContainer} from './overflow';
-import {useRenderItems} from './list';
-import {useResetCursorOnBlur} from './selection';
+import {
+  useOverflowListMeasure,
+  useListRenderItems,
+  useListResetCursorOnBlur,
+} from '@workday/canvas-kit-react/collection';
 
-import {TabsModelContext} from './Tabs';
-import {TabsModel} from './useTabsModel';
+import {useTabsModel} from './useTabsModel';
 
 // Use `Partial` here to make `spacing` optional
 export interface TabListProps<T = unknown> extends Partial<ExtractProps<typeof Stack, never>> {
@@ -28,40 +28,33 @@ export interface TabListProps<T = unknown> extends Partial<ExtractProps<typeof S
    * </Tabs.List>
    */
   children: ((item: T) => React.ReactNode) | React.ReactNode;
-  /**
-   * Optionally pass a model directly to this component. Default is to implicitly use the same
-   * model as the container component which uses React context. Only use this for advanced use-cases.
-   */
-  model?: TabsModel<T>;
   overflowButton?: React.ReactNode;
 }
 
-export const TabsList = createComponent('div')({
-  displayName: 'Tabs.List',
-  Component: ({children, model, overflowButton, ...elemProps}: TabListProps, ref, Element) => {
-    const localModel = useModelContext(TabsModelContext, model);
-    const props = useTabsList(localModel, elemProps, ref);
-
-    return (
-      <Stack
-        as={Element}
-        position="relative"
-        borderBottom={`1px solid ${commonColors.divider}`}
-        paddingX="m"
-        spacing="xxxs"
-        {...props}
-      >
-        {useRenderItems(localModel, children)}
-        {overflowButton}
-      </Stack>
-    );
-  },
-});
-
 export const useTabsList = composeHooks(
-  createHook((_: TabsModel) => {
+  createElemPropsHook(useTabsModel)(() => {
     return {role: 'tablist'};
   }),
-  useOverflowMeasureContainer,
-  useResetCursorOnBlur
+  useOverflowListMeasure,
+  useListResetCursorOnBlur
 );
+
+export const TabsList = createSubcomponent('div')({
+  displayName: 'Tabs.List',
+  modelHook: useTabsModel,
+  elemPropsHook: useTabsList,
+})<TabListProps>(({children, overflowButton, ...elemProps}, Element, model) => {
+  return (
+    <Stack
+      as={Element}
+      position="relative"
+      borderBottom={`1px solid ${commonColors.divider}`}
+      paddingX="m"
+      spacing="xxxs"
+      {...elemProps}
+    >
+      {useListRenderItems(model, children)}
+      {overflowButton}
+    </Stack>
+  );
+});

package/tabs/lib/TabsMenuPopper.tsx

@@ -1,27 +1,16 @@
 import * as React from 'react';
 
-import {createComponent, ExtractProps, useModelContext} from '@workday/canvas-kit-react/common';
+import {createSubcomponent, ExtractProps} from '@workday/canvas-kit-react/common';
 import {usePopupPopper, Popper} from '@workday/canvas-kit-react/popup';
+import {useMenuModel} from '@workday/canvas-kit-react/menu';
+export interface MenuPopperProps extends ExtractProps<typeof Popper> {}
 
-import {TabsModelContext} from './Tabs';
-import {TabsModel} from './useTabsModel';
-
-export interface MenuPopperProps<T = unknown> extends ExtractProps<typeof Popper> {
-  /**
-   * Optionally pass a model directly to this component. Default is to implicitly use the same
-   * model as the container component which uses React context. Only use this for advanced use-cases
-   */
-  model?: TabsModel<T>;
-}
+export const useTabsMenuPopper = usePopupPopper;
 
-export const TabsMenuPopper = createComponent('div')({
+export const TabsMenuPopper = createSubcomponent('div')({
   displayName: 'Tabs.MenuPopper',
-  Component: ({children, model, ...elemProps}: MenuPopperProps, ref) => {
-    const localModel = useModelContext(TabsModelContext, model);
-
-    const props = useTabsMenuPopper(localModel.menu, elemProps, ref);
-    return <Popper {...props}>{children}</Popper>;
-  },
+  modelHook: useMenuModel,
+  elemPropsHook: useTabsMenuPopper,
+})<MenuPopperProps>(({children, ...elemProps}) => {
+  return <Popper {...elemProps}>{children}</Popper>;
 });
-
-export const useTabsMenuPopper = usePopupPopper;

package/tabs/lib/TabsOverflowButton.tsx

@@ -2,19 +2,16 @@ import * as React from 'react';
 
 import {chevronDownSmallIcon} from '@workday/canvas-system-icons-web';
 import {
-  createComponent,
-  useModelContext,
-  createHook,
+  createElemPropsHook,
   composeHooks,
   subModelHook,
+  createSubcomponent,
 } from '@workday/canvas-kit-react/common';
 import {SystemIcon} from '@workday/canvas-kit-react/icon';
-import {space} from '@workday/canvas-kit-react/tokens';
-import {useOverflowTarget} from './overflow';
-import {useMenuTarget} from './menu';
+import {useOverflowListTarget} from '@workday/canvas-kit-react/collection';
 
-import {TabsModelContext} from './Tabs';
-import {TabsModel} from './useTabsModel';
+import {useMenuTarget} from '@workday/canvas-kit-react/menu';
+import {useTabsModel} from './useTabsModel';
 import {StyledTabItem} from './TabsItem';
 
 export interface OverflowButtonProps {
@@ -22,37 +19,29 @@ export interface OverflowButtonProps {
    * The label text of the Tab.
    */
   children: React.ReactNode;
-  /**
-   * Optionally pass a model directly to this component. Default is to implicitly use the same
-   * model as the container component which uses React context. Only use this for advanced use-cases
-   */
-  model?: TabsModel;
 }
 
-export const TabsOverflowButton = createComponent('button')({
-  displayName: 'Tabs.OverflowButton',
-  Component: ({model, children, ...elemProps}: OverflowButtonProps, ref, Element) => {
-    const localModel = useModelContext(TabsModelContext, model);
-
-    const props = useTabsOverflowButton(localModel, elemProps, ref);
-
-    return (
-      <StyledTabItem hasIcon={true} spacing={space.xxxs} type="button" as={Element} {...props}>
-        <span>{children}</span>
-        <SystemIcon icon={chevronDownSmallIcon} />
-      </StyledTabItem>
-    );
-  },
-});
-
 export const useTabsOverflowButton = composeHooks(
-  createHook(
-    (model: TabsModel, _?: React.Ref<HTMLButtonElement>, elemProps: {name?: string} = {}) => {
+  createElemPropsHook(useTabsModel)(
+    (model, _?: React.Ref<HTMLButtonElement>, elemProps: {name?: string} = {}) => {
       return {
         'aria-haspopup': true,
       };
     }
   ),
-  useOverflowTarget,
-  subModelHook((m: TabsModel) => m.menu, useMenuTarget)
+  useOverflowListTarget,
+  subModelHook((m: ReturnType<typeof useTabsModel>) => m.menu, useMenuTarget)
 );
+
+export const TabsOverflowButton = createSubcomponent('button')({
+  displayName: 'Tabs.OverflowButton',
+  modelHook: useTabsModel,
+  elemPropsHook: useTabsOverflowButton,
+})<OverflowButtonProps>(({children, ...elemProps}, Element) => {
+  return (
+    <StyledTabItem type="button" spacing="xxxs" as={Element} {...elemProps}>
+      <span>{children}</span>
+      <SystemIcon icon={chevronDownSmallIcon} />
+    </StyledTabItem>
+  );
+});

package/tabs/lib/TabsPanel.tsx

@@ -2,18 +2,16 @@ import React from 'react';
 import styled from '@emotion/styled';
 
 import {
-  createComponent,
-  useModelContext,
+  createSubcomponent,
   useMountLayout,
-  createHook,
+  createElemPropsHook,
   ExtractProps,
   hideMouseFocus,
   StyledType,
 } from '@workday/canvas-kit-react/common';
 import {Box} from '@workday/canvas-kit-react/layout';
 
-import {TabsModelContext} from './Tabs';
-import {TabsModel} from './useTabsModel';
+import {useTabsModel} from './useTabsModel';
 
 export interface TabPanelProps<T = unknown> extends ExtractProps<typeof Box, never> {
   /**
@@ -21,11 +19,12 @@ export interface TabPanelProps<T = unknown> extends ExtractProps<typeof Box, nev
    */
   children: React.ReactNode;
   /**
-   * The name of the tab. This name will be used in change events and for `initialTab`. Must match
-   * the `name` of the associated tab item. If this property is not provided, it will default to a
-   * string representation of the the zero-based index of the Tab when it was initialized.
+   * The identifier of the tab. This identifier will be used in change events and for `initialTab`.
+   * Must match the `data-id` of the associated tab item. If this property is not provided, it will
+   * default to a string representation of the the zero-based index of the Tab when it was
+   * initialized.
    */
-  name?: string;
+  'data-id'?: string;
   /**
    * Part of the ARIA specification for tabs. By default, all `tabpanel` elements have a `tabIndex`
    * of `0` which makes the whole content area receive focus. If you have a focusable item near the
@@ -33,24 +32,19 @@ export interface TabPanelProps<T = unknown> extends ExtractProps<typeof Box, nev
    * panel element from receiving focus. Only do this is a child of the tab panel can receive focus.
    */
   tabIndex?: number;
-  /**
-   * Optionally pass a model directly to this component. Default is to implicitly use the same
-   * model as the container component which uses React context. Only use this for advanced use-cases
-   */
-  model?: TabsModel<T>;
 }
 
 const StyledTabsPanel = styled(Box)<StyledType>(hideMouseFocus);
 
-export const useTabsPanel = createHook(
-  ({state, events}: TabsModel, _?: React.Ref<HTMLElement>, elemProps: {name?: string} = {}) => {
-    const name = elemProps.name;
-    const [tabName, setTabName] = React.useState(elemProps.name || '');
+export const useTabsPanel = createElemPropsHook(useTabsModel)(
+  ({state, events}, _?: React.Ref<HTMLElement>, elemProps: {'data-id'?: string} = {}) => {
+    const name = elemProps['data-id'];
+    const [tabName, setTabName] = React.useState(elemProps['data-id'] || '');
 
     useMountLayout(() => {
       const index = state.panelIndexRef.current;
       const tabName = name || String(index);
-      events.registerPanel({item: {id: tabName}});
+      events.registerPanel({item: {id: tabName}, textValue: ''});
       setTabName(tabName);
 
       return () => {
@@ -68,17 +62,14 @@ export const useTabsPanel = createHook(
   }
 );
 
-export const TabsPanel = createComponent('div')({
+export const TabsPanel = createSubcomponent('div')({
   displayName: 'Tabs.Panel',
-  Component: ({children, model, ...elemProps}: TabPanelProps, ref, Element) => {
-    const localModel = useModelContext(TabsModelContext, model);
-
-    const props = useTabsPanel(localModel, elemProps, ref);
-
-    return (
-      <StyledTabsPanel as={Element} {...props}>
-        {children}
-      </StyledTabsPanel>
-    );
-  },
+  modelHook: useTabsModel,
+  elemPropsHook: useTabsPanel,
+})<TabPanelProps>(({children, ...elemProps}, Element) => {
+  return (
+    <StyledTabsPanel as={Element} {...elemProps}>
+      {children}
+    </StyledTabsPanel>
+  );
 });

package/tabs/lib/TabsPanels.tsx

@@ -1,28 +1,20 @@
 import * as React from 'react';
 
-import {createComponent, useModelContext} from '@workday/canvas-kit-react/common';
+import {createSubcomponent} from '@workday/canvas-kit-react/common';
+import {useListRenderItems} from '@workday/canvas-kit-react/collection';
 
-import {TabsModelContext} from './Tabs';
-import {TabsModel} from './useTabsModel';
-import {useRenderItems} from './list';
+import {useTabsModel} from './useTabsModel';
 
 export interface TabsPanelsProps<T = unknown> {
   /**
    *
    */
   children: ((item: T) => React.ReactNode) | React.ReactNode;
-  /**
-   * Optionally pass a model directly to this component. Default is to implicitly use the same
-   * model as the container component which uses React context. Only use this for advanced use-cases.
-   */
-  model?: TabsModel<T>;
 }
 
-export const TabsPanels = createComponent()({
+export const TabsPanels = createSubcomponent()({
   displayName: 'Tabs.Panels',
-  Component: ({children, model}: TabsPanelsProps) => {
-    const localModel = useModelContext(TabsModelContext, model);
-
-    return <>{useRenderItems(localModel, children)}</>;
-  },
+  modelHook: useTabsModel,
+})<TabsPanelsProps>(({children}, _, model) => {
+  return <>{useListRenderItems(model, children)}</>;
 });