@workday/canvas-kit-react 5.3.17 → 5.4.0-next.1

package/tabs/lib/TabsItem.tsx

@@ -0,0 +1,250 @@
+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,
+  composeHooks,
+  ExtractProps,
+  ellipsisStyles,
+  EllipsisText,
+  useLocalRef,
+  useMount,
+} from '@workday/canvas-kit-react/common';
+import {Box} from '@workday/canvas-kit-labs-react/common';
+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 {StackProps} from '@workday/canvas-kit-labs-react/layout';
+export interface TabsItemProps
+  extends ExtractProps<typeof Box, never>,
+    Partial<Pick<StackProps, 'spacing'>> {
+  /**
+   * Optionally pass index to tab item. This should be done if `Tabs.Item` components were created
+   * via a `Array::map` function. This index will ensure keyboard navigation works even if items are
+   * inserted out of order.
+   */
+  index?: number;
+  /**
+   * The contents of the tab item. This will be the accessible name of the tab for screen readers.
+   * Often, this is text. Icons are also supported. Using `Tabs.Icon` will render an icon that is
+   * not visible to screen readers and therefore the icon should not be necessary to understand the
+   * tab. In most circumstances, `aria-label` should not be used.
+   *
+   * ```tsx
+   * <Tabs.Item>First Tab</Tabs.Item>
+   * <Tabs.Item hasIcon>
+   *   <Tabs.Icon icon={canvasIcon} />
+   *   <Tabs.Text>Second Tab</Tabs.Text>
+   * </Tabs.Item>
+   * ```
+   */
+  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
+   */
+  model?: TabsModel;
+  /**
+   * 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.
+   */
+  id?: string;
+  /**
+   * Part of the ARIA specification for tabs. This attributes links a `role=tab` to a
+   * `role=tabpanel`. This value must be the same as the associated `id` attribute of the tab panel.
+   * This is automatically set by the component and should only be used in advanced cases.
+   */
+  'aria-controls'?: string;
+  /**
+   * Part of the ARIA specification for tabs. Lets screen readers know which tab is active. This
+   * should either be `true` or `undefined` and never `false`. This is automatically set by the
+   * component and should only be used in advanced cases.
+   */
+  'aria-selected'?: boolean;
+  /**
+   * Part of the ARIA specification for tabs. The currently active tab should not have a `tabIndex`
+   * 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'>
+>(
+  ({theme, spacing}) => ({
+    ...type.levels.subtext.large,
+    '& > *:not(style) ~ *:not(style)': {
+      marginLeft: spacing || space.xxs,
+    },
+    fontWeight: type.properties.fontWeights.medium,
+    border: 'none',
+    backgroundColor: 'transparent',
+    flex: '0 0 auto',
+    alignItems: 'center',
+    maxWidth: '280px',
+    padding: `${space.xs} ${space.s}`,
+    height: 52,
+    boxSizing: 'border-box',
+    cursor: 'pointer',
+    color: colors.licorice300,
+    position: 'relative',
+    borderRadius: `${borderRadius.m} ${borderRadius.m} 0px 0px`,
+    transition: 'background 150ms ease, color 150ms ease',
+
+    ...hideMouseFocus,
+
+    '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
+      fill: iconColors.active,
+    },
+
+    '&:hover, &:focus': {
+      backgroundColor: colors.soap200,
+      color: colors.blackPepper400,
+      '.wd-icon-fill, .wd-icon-accent, .wd-icon-accent2': {
+        fill: iconColors.hover,
+      },
+      '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
+        fill: iconColors.active,
+      },
+    },
+
+    '&:focus': {
+      outline: `none`,
+      ...focusRing({inset: 'outer', width: 0, separation: 2}, theme),
+    },
+
+    '&:disabled, &[aria-disabled]': {
+      color: colors.licorice100,
+      '.wd-icon-fill, .wd-icon-accent, .wd-icon-accent2': {
+        fill: iconColors.disabled,
+      },
+      '&:hover': {
+        cursor: 'auto',
+        backgroundColor: `transparent`,
+        '.wd-icon-fill, .wd-icon-accent, .wd-icon-accent2': {
+          fill: iconColors.disabled,
+        },
+      },
+    },
+
+    '&[aria-selected=true]': {
+      color: theme.canvas.palette.primary.main,
+      cursor: 'default',
+      '.wd-icon-fill, .wd-icon-accent, .wd-icon-accent2': {
+        fill: theme.canvas.palette.primary.main,
+      },
+      '&:after': {
+        position: 'absolute',
+        height: space.xxxs,
+        borderRadius: `${borderRadius.m} ${borderRadius.m} 0px 0px`,
+        backgroundColor: theme.canvas.palette.primary.main,
+        bottom: 0,
+        content: `''`,
+        left: 0,
+        marginTop: '-2px',
+        width: '100%',
+      },
+      '&:hover, &:focus': {
+        backgroundColor: `transparent`,
+        color: theme.canvas.palette.primary.main,
+      },
+    },
+  }),
+  ({hasIcon}) => {
+    if (hasIcon) {
+      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 || '';
+
+      const selected = !!elemProps.name && isSelected(name, state);
+
+      return {
+        type: 'button' as 'button', // keep Typescript happy
+        role: 'tab',
+        'aria-selected': selected,
+        'aria-controls': `tabpanel-${state.id}-${name}`,
+      };
+    }
+  ),
+  useSelectionItem,
+  useOverflowMeasureItem,
+  useRovingFocus,
+  useListRegisterItem
+);

package/tabs/lib/TabsList.tsx

@@ -0,0 +1,67 @@
+import * as React from 'react';
+
+import {commonColors} from '@workday/canvas-kit-react/tokens';
+import {
+  composeHooks,
+  createComponent,
+  createHook,
+  ExtractProps,
+  useModelContext,
+} from '@workday/canvas-kit-react/common';
+import {Stack} from '@workday/canvas-kit-labs-react/layout';
+import {useOverflowMeasureContainer} from './overflow';
+import {useRenderItems} from './list';
+import {useResetCursorOnBlur} from './selection';
+
+import {TabsModelContext} from './Tabs';
+import {TabsModel} from './useTabsModel';
+
+// Use `Partial` here to make `spacing` optional
+export interface TabListProps<T = unknown> extends Partial<ExtractProps<typeof Stack, never>> {
+  /**
+   * If items are passed to a `TabsModel`, the child of `Tabs.List` should be a render prop. The
+   * List will determine how and when the item will be rendered.
+   *
+   * @example
+   * <Tabs.List>
+   *   {(item) => <Tabs.Item key={item.id} name={item.name}>{item.text}</Tabs.Item>}
+   * </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) => {
+    return {role: 'tablist'};
+  }),
+  useOverflowMeasureContainer,
+  useResetCursorOnBlur
+);

package/tabs/lib/TabsMenuPopper.tsx

@@ -0,0 +1,27 @@
+import * as React from 'react';
+
+import {createComponent, ExtractProps, useModelContext} from '@workday/canvas-kit-react/common';
+import {usePopupPopper, Popper} from '@workday/canvas-kit-react/popup';
+
+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 TabsMenuPopper = createComponent('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>;
+  },
+});
+
+export const useTabsMenuPopper = usePopupPopper;

package/tabs/lib/TabsOverflowButton.tsx

@@ -0,0 +1,58 @@
+import * as React from 'react';
+
+import {chevronDownSmallIcon} from '@workday/canvas-system-icons-web';
+import {
+  createComponent,
+  useModelContext,
+  createHook,
+  composeHooks,
+  subModelHook,
+} 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 {TabsModelContext} from './Tabs';
+import {TabsModel} from './useTabsModel';
+import {StyledTabItem} from './TabsItem';
+
+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} = {}) => {
+      return {
+        'aria-haspopup': true,
+      };
+    }
+  ),
+  useOverflowTarget,
+  subModelHook((m: TabsModel) => m.menu, useMenuTarget)
+);

package/tabs/lib/{TabPanel.tsx → TabsPanel.tsx}

@@ -1,19 +1,21 @@
-/** @jsx jsx */
 import React from 'react';
-import {jsx, css} from '@emotion/core';
+import styled from '@emotion/styled';
 
 import {
   createComponent,
-  mouseFocusBehavior,
-  useLocalRef,
   useModelContext,
   useMountLayout,
+  createHook,
+  ExtractProps,
+  hideMouseFocus,
+  StyledType,
 } from '@workday/canvas-kit-react/common';
+import {Box} from '@workday/canvas-kit-labs-react/common';
 
 import {TabsModelContext} from './Tabs';
 import {TabsModel} from './useTabsModel';
 
-export interface TabPanelProps {
+export interface TabPanelProps<T = unknown> extends ExtractProps<typeof Box, never> {
   /**
    * The contents of the TabPanel.
    */
@@ -35,28 +37,20 @@ export interface TabPanelProps {
    * 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;
+  model?: TabsModel<T>;
 }
 
-const styles = css(
-  mouseFocusBehavior({
-    '&:focus': {
-      outline: 'none',
-    },
-  })
-);
+const StyledTabsPanel = styled(Box)<StyledType>(hideMouseFocus);
 
-export const TabPanel = createComponent('div')({
-  displayName: 'Tabs.Panel',
-  Component: ({children, name = '', model, ...elemProps}: TabPanelProps, ref, Element) => {
-    const {state, events} = useModelContext(TabsModelContext, model);
-    const [tabName, setTabName] = React.useState(name);
-    const {localRef, elementRef} = useLocalRef(ref);
+export const useTabsPanel = createHook(
+  ({state, events}: TabsModel, _?: React.Ref<HTMLElement>, elemProps: {name?: string} = {}) => {
+    const name = elemProps.name;
+    const [tabName, setTabName] = React.useState(elemProps.name || '');
 
     useMountLayout(() => {
       const index = state.panelIndexRef.current;
       const tabName = name || String(index);
-      events.registerPanel({item: {id: tabName, ref: localRef}});
+      events.registerPanel({item: {id: tabName}});
       setTabName(tabName);
 
       return () => {
@@ -64,19 +58,27 @@ export const TabPanel = createComponent('div')({
       };
     });
 
+    return {
+      role: 'tabpanel',
+      'aria-labelledby': `${state.id}-${tabName}`,
+      hidden: !!tabName && tabName !== state.selectedIds[0],
+      id: `tabpanel-${state.id}-${tabName}`,
+      tabIndex: 0,
+    };
+  }
+);
+
+export const TabsPanel = createComponent('div')({
+  displayName: 'Tabs.Panel',
+  Component: ({children, model, ...elemProps}: TabPanelProps, ref, Element) => {
+    const localModel = useModelContext(TabsModelContext, model);
+
+    const props = useTabsPanel(localModel, elemProps, ref);
+
     return (
-      <Element
-        ref={elementRef}
-        role="tabpanel"
-        css={styles}
-        aria-labelledby={`tab-${state.id}-${tabName}`}
-        hidden={!!tabName && tabName !== state.activeTab}
-        id={`tabpanel-${state.id}-${tabName}`}
-        tabIndex={0}
-        {...elemProps}
-      >
+      <StyledTabsPanel as={Element} {...props}>
         {children}
-      </Element>
+      </StyledTabsPanel>
     );
   },
 });

package/tabs/lib/TabsPanels.tsx

@@ -0,0 +1,28 @@
+import * as React from 'react';
+
+import {createComponent, useModelContext} from '@workday/canvas-kit-react/common';
+
+import {TabsModelContext} from './Tabs';
+import {TabsModel} from './useTabsModel';
+import {useRenderItems} from './list';
+
+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()({
+  displayName: 'Tabs.Panels',
+  Component: ({children, model}: TabsPanelsProps) => {
+    const localModel = useModelContext(TabsModelContext, model);
+
+    return <>{useRenderItems(localModel, children)}</>;
+  },
+});

package/tabs/lib/cursor/index.ts

@@ -1,2 +1,2 @@
-export * from './hooks';
+export * from './useRovingFocus';
 export * from './useCursorModel';