@workday/canvas-kit-preview-react 16.0.0-alpha.0474-next.0 → 16.0.0-alpha.0476-next.0

package/tabs/lib/TabsList.tsx

@@ -0,0 +1,181 @@
+import * as React from 'react';
+
+import {
+  useListRenderItems,
+  useListResetCursorOnBlur,
+  useOverflowListMeasure,
+} from '@workday/canvas-kit-react/collection';
+import {
+  ExtractProps,
+  composeHooks,
+  createElemPropsHook,
+  createSubcomponent,
+  useLocalRef,
+  useModalityType,
+} from '@workday/canvas-kit-react/common';
+import {Flex, mergeStyles} from '@workday/canvas-kit-react/layout';
+import {createStencil} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+import {useTabsModel} from './useTabsModel';
+
+export interface TabListProps<T = any> extends Omit<ExtractProps<typeof Flex, never>, 'children'> {
+  /**
+   * 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>{item.text}</Tabs.Item>}
+   * </Tabs.List>
+   */
+  children: ((item: T) => React.ReactNode) | React.ReactNode;
+  overflowButton?: React.ReactNode;
+}
+
+function getScrollPercentage(elem: HTMLDivElement, direction: 'vertical' | 'horizontal'): number {
+  if (direction === 'vertical') {
+    if (elem.scrollHeight > elem.clientHeight) {
+      const percentage = elem.scrollTop / (elem.scrollHeight - elem.clientHeight);
+      return percentage;
+    } else {
+      return -1;
+    }
+  }
+  if (elem.scrollWidth > elem.clientWidth) {
+    const percentage = elem.scrollLeft / (elem.scrollWidth - elem.clientWidth);
+    return percentage;
+  } else {
+    return -1;
+  }
+}
+
+function getScrollPosition(
+  elem: HTMLDivElement,
+  direction: 'vertical' | 'horizontal'
+): 'start' | 'middle' | 'end' | undefined {
+  const percentage = getScrollPercentage(elem, direction);
+  return percentage <= -1
+    ? undefined
+    : percentage > 0.99
+      ? 'end'
+      : percentage > 0.01
+        ? 'middle'
+        : 'start';
+}
+
+function setScrollPosition(elem: HTMLDivElement, scrollPosition?: 'start' | 'middle' | 'end') {
+  if (scrollPosition) {
+    elem.setAttribute('data-scroll-position', scrollPosition);
+  } else {
+    elem.removeAttribute('data-scroll-position');
+  }
+}
+
+export const useTabOverflowScroll = createElemPropsHook(useTabsModel)((
+  _model,
+  ref,
+  elemProps: {
+    'aria-orientation'?: 'vertical' | 'horizontal';
+  } = {}
+) => {
+  const direction = elemProps['aria-orientation'] || 'vertical';
+
+  const {localRef, elementRef} = useLocalRef<HTMLDivElement>(ref as React.Ref<HTMLDivElement>);
+
+  React.useLayoutEffect(() => {
+    if (!localRef.current) {
+      return;
+    }
+
+    setScrollPosition(localRef.current, getScrollPosition(localRef.current, direction));
+  }, [localRef, direction]);
+
+  return {
+    ref: elementRef,
+    onScroll: (event: React.UIEvent<HTMLDivElement>) => {
+      const elem = event.currentTarget;
+      setScrollPosition(elem, getScrollPosition(elem, direction));
+    },
+  };
+});
+
+export const useTabsList = composeHooks(
+  useTabOverflowScroll,
+  createElemPropsHook(useTabsModel)(model => {
+    return {
+      role: 'tablist',
+      'aria-orientation': model.state.orientation,
+    } as const;
+  }),
+  useOverflowListMeasure,
+  useListResetCursorOnBlur
+);
+
+export const tabsListStencil = createStencil({
+  base: {
+    display: 'flex',
+    position: 'relative',
+    gap: system.legacy.gap.sm,
+
+    '@media screen and (max-width: 768px)': {
+      paddingInline: system.legacy.padding.md,
+    },
+  },
+  modifiers: {
+    modality: {
+      touch: {
+        overflowX: 'auto',
+        paddingInline: 0,
+        // data attributes are needed until scroll-driven animations are supported. Once they are,
+        // we can use a CSS-only solution:
+        // https://www.bram.us/2023/09/16/solved-by-css-scroll-driven-animations-detect-if-an-element-can-scroll-or-not/
+        '&[data-scroll-position="start"]': {
+          maskImage: 'linear-gradient(to right, white 80%, transparent)',
+        },
+        '&[data-scroll-position="middle"]': {
+          maskImage:
+            'linear-gradient(to left, white 80%, transparent), linear-gradient(to right, white 80%, transparent)',
+          maskComposite: 'intersect',
+        },
+        '&[data-scroll-position="end"]': {
+          maskImage: 'linear-gradient(to left, white 80%, transparent)',
+        },
+      },
+      mouse: {},
+      pen: {},
+    },
+    isDragging: {
+      true: {},
+      false: {},
+    },
+    direction: {
+      left: {},
+      right: {},
+    },
+  },
+});
+
+export const TabsList = createSubcomponent('div')({
+  displayName: 'Tabs.List',
+  modelHook: useTabsModel,
+  elemPropsHook: useTabsList,
+})<TabListProps & {maskImage?: string}>(
+  ({children, overflowButton, ...elemProps}, Element, model) => {
+    const modality = useModalityType();
+
+    return (
+      <Element
+        {...mergeStyles(
+          elemProps,
+          tabsListStencil({
+            modality: modality,
+          })
+        )}
+      >
+        {useListRenderItems(model, children)}
+        {overflowButton}
+      </Element>
+    );
+  }
+);

package/tabs/lib/TabsOverflowButton.tsx

@@ -0,0 +1,61 @@
+import * as React from 'react';
+
+import {useOverflowListTarget} from '@workday/canvas-kit-react/collection';
+import {
+  composeHooks,
+  createElemPropsHook,
+  createSubModelElemPropsHook,
+  createSubcomponent,
+} from '@workday/canvas-kit-react/common';
+import {SystemIcon} from '@workday/canvas-kit-react/icon';
+import {mergeStyles} from '@workday/canvas-kit-react/layout';
+import {useMenuTarget} from '@workday/canvas-kit-react/menu';
+import {createStencil} from '@workday/canvas-kit-styling';
+import {chevronDownSmallIcon} from '@workday/canvas-system-icons-web';
+
+import {StyledTabItem} from './TabsItem';
+import {useTabsModel} from './useTabsModel';
+
+export interface OverflowButtonProps {
+  /**
+   * The label text of the Tab.
+   */
+  children: React.ReactNode;
+}
+
+const tabsOverflowButtonStencil = createStencil({
+  base: {
+    '&:has([data-part="tabs-overflow-button-icon"])': {
+      display: 'flex',
+      gap: 0,
+    },
+  },
+});
+
+export const useTabsOverflowButton = composeHooks(
+  createElemPropsHook(useTabsModel)(() => {
+    return {
+      'aria-haspopup': true,
+    } as const;
+  }),
+  useOverflowListTarget,
+  createSubModelElemPropsHook(useTabsModel)(m => m.menu, useMenuTarget)
+);
+
+export const TabsOverflowButton = createSubcomponent('button')({
+  displayName: 'Tabs.OverflowButton',
+  modelHook: useTabsModel,
+  elemPropsHook: useTabsOverflowButton,
+})<OverflowButtonProps>(({children, ...elemProps}, Element, model) => {
+  return (
+    <StyledTabItem
+      type="button"
+      as={Element}
+      variant={model.state.variant}
+      {...mergeStyles(elemProps, tabsOverflowButtonStencil())}
+    >
+      <span>{children}</span>
+      <SystemIcon data-part="tabs-overflow-button-icon" icon={chevronDownSmallIcon} />
+    </StyledTabItem>
+  );
+});

package/tabs/lib/TabsPanel.tsx

@@ -0,0 +1,77 @@
+import React from 'react';
+
+import {ListRenderItemContext} from '@workday/canvas-kit-react/collection';
+import {
+  ExtractProps,
+  createElemPropsHook,
+  createSubcomponent,
+  slugify,
+  useMountLayout,
+} from '@workday/canvas-kit-react/common';
+import {Box} from '@workday/canvas-kit-react/layout';
+
+import {useTabsModel} from './useTabsModel';
+
+export interface TabPanelProps extends ExtractProps<typeof Box, never> {
+  /**
+   * The contents of the TabPanel.
+   */
+  children: React.ReactNode;
+  /**
+   * 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 zero-based index of the Tab when it was
+   * initialized.
+   */
+  '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
+   * top of the tab panel content area, you may set `tabIndex` to `undefined` to prevent the tab
+   * panel element from receiving focus. Only do this if a child of the tab panel can receive focus.
+   */
+  tabIndex?: number;
+}
+
+export const useTabsPanel = createElemPropsHook(useTabsModel)((
+  {state, events},
+  _,
+  elemProps: {'data-id'?: string} = {}
+) => {
+  const {item} = React.useContext(ListRenderItemContext);
+  const [localId, setLocalId] = React.useState(elemProps['data-id'] || item?.id || '');
+
+  useMountLayout(() => {
+    if (item) {
+      return;
+    }
+    const defaultId = state.panelIndexRef.current;
+    const itemId = localId || String(defaultId);
+    events.registerPanel({id: itemId, textValue: ''});
+    setLocalId(itemId);
+
+    return () => {
+      events.unregisterPanel({id: itemId});
+    };
+  });
+
+  return {
+    role: 'tabpanel' as const,
+    'aria-labelledby': slugify(`${state.id}-${localId}`),
+    hidden: !!localId && localId !== state.selectedIds[0],
+    id: slugify(`tabpanel-${state.id}-${localId}`),
+    tabIndex: 0 as const,
+  };
+});
+
+export const TabsPanel = createSubcomponent('div')({
+  displayName: 'Tabs.Panel',
+  modelHook: useTabsModel,
+  elemPropsHook: useTabsPanel,
+})<TabPanelProps>(({children, ...elemProps}, Element) => {
+  return (
+    <Box as={Element} {...elemProps}>
+      {children}
+    </Box>
+  );
+});

package/tabs/lib/TabsPanels.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+
+import {useListRenderItems} from '@workday/canvas-kit-react/collection';
+import {createSubcomponent} from '@workday/canvas-kit-react/common';
+
+import {useTabsModel} from './useTabsModel';
+
+export interface TabsPanelsProps<T = any> {
+  /**
+   *
+   */
+  children: ((item: T) => React.ReactNode) | React.ReactNode;
+}
+
+export const TabsPanels = createSubcomponent()({
+  displayName: 'Tabs.Panels',
+  modelHook: useTabsModel,
+})<TabsPanelsProps>(({children}, _, model) => {
+  return <>{useListRenderItems(model, children)}</>;
+});

package/tabs/lib/useTabsModel.tsx

@@ -0,0 +1,141 @@
+import React from 'react';
+
+import {
+  defaultGetId,
+  useListModel,
+  useOverflowListModel,
+} from '@workday/canvas-kit-react/collection';
+import {createModelHook, useModalityType} from '@workday/canvas-kit-react/common';
+import {useMenuModel} from '@workday/canvas-kit-react/menu';
+
+/**
+ * The TabsModel extends the [Collection
+ * System](/get-started/for-developers/guides/collection-api/). Tabs have tab items and
+ * panels. Tabs can be overflowed if there isn't enough room to render and will overflow to a
+ * {@link MenuModel} sub-model.
+ *
+ * ```tsx
+ * const model = useTabsModel({
+ *   onSelect(data) {
+ *     console.log('Selected Tab', data)
+ *   }
+ * })
+ *
+ * <Tabs model={model}>{Tabs child components}</Tabs>
+ * ```
+ */
+export const useTabsModel = createModelHook({
+  defaultConfig: {
+    ...useOverflowListModel.defaultConfig,
+    /**
+     * Optional id for the whole `Tabs` group. The `aria-controls` of the `Tab.Item` and `id` of the
+     * `Tab.Panel` will automatically be derived from this id. If not provided, a unique id will be
+     * created.
+     * @default useUniqueId()
+     */
+    id: '',
+    /**
+     * An initially selected tab. This value must match the `name` of the `Tab.Item` component. If
+     * not provided, the first tab will be selected.
+     */
+    initialTab: '',
+    /**
+     * The default Tabs sub-components only handle rendering of tabs in a horizontal orientation, but
+     * the sub-components could be replaced to handle vertical orientations.
+     * @default 'horizontal'
+     */
+    orientation: 'horizontal' as typeof useOverflowListModel.defaultConfig.orientation,
+    /**
+     * The variant of the Tabs.
+     * @default 'filled'
+     */
+    variant: 'filled' as 'filled' | 'outlined',
+    menuConfig: {} as typeof useMenuModel.TConfig,
+  },
+  requiredConfig: useOverflowListModel.requiredConfig,
+  contextOverride: useOverflowListModel.Context,
+})(config => {
+  const initialSelectedRef = React.useRef(config.initialTab);
+  const getId = config.getId || defaultGetId;
+  const modality = useModalityType();
+
+  const model = useOverflowListModel(
+    useOverflowListModel.mergeConfig(config, {
+      shouldCalculateOverflow: modality !== 'touch',
+      orientation: config.orientation || 'horizontal',
+      onRegisterItem(data) {
+        if (!initialSelectedRef.current) {
+          initialSelectedRef.current = data.id;
+          events.select({id: initialSelectedRef.current});
+        }
+      },
+      initialSelectedIds: config.initialTab
+        ? [config.initialTab]
+        : config.items?.length
+          ? [getId(config.items![0])]
+          : [],
+      shouldVirtualize: false,
+    })
+  );
+
+  const panels = useListModel();
+
+  const state = {
+    ...model.state,
+    getId,
+    orientation: config.orientation || 'horizontal',
+    /**
+     * A list of panels. Uses `ListModel`
+     */
+    panels: panels.state.items,
+    /**
+     * A React.Ref of the current item index. A ref is used to allow for updating outside the normal
+     * React state cycle to ensure accurate index tracking as items are registered within the same
+     * state setting phase.
+     */
+    panelIndexRef: panels.state.indexRef,
+    variant: config.variant || 'filled',
+  };
+
+  const overflowItems = React.useMemo(
+    () =>
+      config.items ? config.items.filter(item => state.hiddenIds.includes(getId(item))) : undefined,
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [state.hiddenIds, config.items]
+  );
+
+  const events = {
+    ...model.events,
+    /**
+     * This event registers panels with state.panels. Called when a panel is mounted.
+     */
+    registerPanel: panels.events.registerItem,
+    /**
+     * This event unregisters panels with state.panels. Called when a panel is unmounted.
+     */
+    unregisterPanel: panels.events.unregisterItem,
+  };
+
+  const menu = useMenuModel(
+    useMenuModel.mergeConfig(config.menuConfig, {
+      id: `menu-${model.state.id}`,
+      items: overflowItems,
+      nonInteractiveIds: state.nonInteractiveIds.filter(key => !state.hiddenIds.includes(key)),
+      onSelect(data) {
+        menu.events.hide();
+        events.select(data);
+      },
+      onShow() {
+        // Always select the first item when the menu is opened
+        menu.events.goToFirst();
+      },
+    })
+  );
+
+  return {
+    ...model,
+    state,
+    events,
+    menu,
+  };
+});

package/tabs/package.json

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