@workday/canvas-kit-react 5.3.0 → 5.3.4

package/tabs/lib/TabsList.tsx

@@ -1,67 +0,0 @@
-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}`}
-        marginX="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

@@ -1,27 +0,0 @@
-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

@@ -1,58 +0,0 @@
-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/TabsPanels.tsx

@@ -1,28 +0,0 @@
-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/useRovingFocus.tsx

@@ -1,94 +0,0 @@
-import React from 'react';
-import {useIsRTL, createHook} from '@workday/canvas-kit-react/common';
-
-import {CursorModel, useCursorNavigation} from './useCursorModel';
-
-export const orientationKeyMap = {
-  horizontal: {
-    ArrowLeft: 'previous',
-    Left: 'previous',
-    ArrowRight: 'next',
-    Right: 'next',
-    Home: 'first',
-    End: 'last',
-  },
-  vertical: {
-    ArrowUp: 'previous',
-    Up: 'previous',
-    ArrowDown: 'next',
-    Down: 'next',
-    Home: 'first',
-    End: 'last',
-  },
-} as const;
-
-const rightToLeftMap = {
-  ArrowLeft: 'ArrowRight',
-  Left: 'Right',
-  ArrowRight: 'ArrowLeft',
-  Right: 'Left',
-  Home: 'End',
-  End: 'Home',
-} as const;
-
-/**
- * Handles the roving focus behavior of a Cursor model. It should be added to the element
- * representing a list item.
- *
- * @see https://www.w3.org/TR/wai-aria-practices/#kbd_roving_tabindex
- */
-export const useRovingFocus = createHook(
-  ({state, events, getId}: CursorModel, ref, elemProps: {name?: string} = {}) => {
-    // Tracks when this element has focus. If this item is removed while still focused, we have to
-    // inform the model to move the cursor to the next item.
-    const focusRef = React.useRef(false);
-    const getIdRef = React.useRef(getId);
-
-    // 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(state);
-    stateRef.current = state;
-
-    const keyDownRef = React.useRef(false);
-    const isRTL = useIsRTL();
-
-    const navigation = useCursorNavigation(state, getId);
-
-    React.useEffect(() => {
-      if (keyDownRef.current) {
-        const item = navigation.getItem(state.cursorId);
-        document.querySelector<HTMLElement>(`#${state.id}-${getIdRef.current(item)}`)?.focus();
-
-        keyDownRef.current = false;
-      }
-    }, [state.cursorId, state.id, navigation]);
-
-    return {
-      onKeyDown(event: React.KeyboardEvent) {
-        (Object.keys(
-          orientationKeyMap[state.orientation]
-        ) as (keyof typeof orientationKeyMap[typeof state.orientation])[]).forEach(key => {
-          if (isRTL ? event.key === rightToLeftMap[key] : event.key === key) {
-            const event = orientationKeyMap[state.orientation][key];
-            keyDownRef.current = true;
-            events[event]?.();
-          }
-        });
-      },
-      onFocus() {
-        focusRef.current = true;
-      },
-      onBlur() {
-        focusRef.current = false;
-      },
-      id: `${state.id}-${elemProps.name}`,
-      tabIndex: !state.cursorId
-        ? 0 // cursor isn't known yet, be safe and mark this as focusable
-        : !!elemProps.name && state.cursorId === elemProps.name
-        ? 0 // A name is known and cursor is here
-        : -1, // A name is known an cursor is somewhere else
-      ref,
-    };
-  }
-);

package/tabs/lib/list/renderItem.tsx

@@ -1,19 +0,0 @@
-import React from 'react';
-
-import {ListModel} from './useListModel';
-
-export function useRenderItems<T>(
-  model: ListModel<T>,
-  children: ((item: T) => React.ReactNode) | React.ReactNode
-) {
-  const items = React.useMemo(() => {
-    return typeof children === 'function'
-      ? model.state.items.map(item => React.cloneElement(children(item), {key: model.getId(item)}))
-      : null;
-    // If we added `children` as a dependency, this memo would be useless. If the user wants the
-    // item to rerender, the item and items array needs to be updated.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [model.state.items]);
-
-  return items || children;
-}

package/tabs/lib/list/useListRegisterItem.tsx

@@ -1,53 +0,0 @@
-import React from 'react';
-
-import {useMountLayout, createHook} from '@workday/canvas-kit-react/common';
-
-import {ListModel} from './useListModel';
-
-/**
- * Registers an item with a list. It will return elemProps with a `name` which can be used by other
- * hooks to identify the item in the list.
- */
-export const useListRegisterItem = createHook(
-  (
-    {state, events, getId}: ListModel,
-    _?: React.Ref<HTMLElement>,
-    elemProps: {name?: string; index?: number; disabled?: boolean} = {}
-  ) => {
-    const [localId, setLocalId] = React.useState(elemProps.name || '');
-    const firstRender = React.useRef(true);
-
-    React.useLayoutEffect(() => {
-      if (elemProps.index !== undefined && !firstRender.current) {
-        events.updateItemPosition({id: localId, index: elemProps.index});
-      }
-      // we only care about the index changing
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [elemProps.index]);
-
-    useMountLayout(() => {
-      const defaultId = state.indexRef.current;
-      const itemId = elemProps.name || String(defaultId);
-      // bail early if item already exists. This happens if items were already provided.
-      if (state.items.find(item => getId(item) === elemProps.name)) {
-        return;
-      }
-      events.registerItem({
-        item: {id: itemId},
-        index: elemProps.index,
-      });
-      setLocalId(itemId);
-      firstRender.current = false;
-
-      return () => {
-        events.unregisterItem({id: itemId});
-      };
-    });
-
-    return {
-      'data-name': localId,
-      name: localId,
-      disabled: elemProps.disabled || state.nonInteractiveIds.includes(localId) ? true : undefined,
-    };
-  }
-);

package/tabs/lib/menu/Menu.tsx

@@ -1,95 +0,0 @@
-import React from 'react';
-
-import {createComponent, useDefaultModel} from '@workday/canvas-kit-react/common';
-
-import {MenuModel, MenuModelConfig, useMenuModel} from './useMenuModel';
-import {MenuPopper} from './MenuPopper';
-import {MenuTarget} from './MenuTarget';
-import {MenuItem} from './MenuItem';
-import {MenuCard} from './MenuCard';
-import {MenuList} from './MenuList';
-
-export const MenuModelContext = React.createContext<MenuModel>({} as any);
-
-export interface MenuProps<T> extends MenuModelConfig<T> {
-  /**
-   * The contents of the Menu. Can be `Menu` children or any valid elements.
-   */
-  children: React.ReactNode;
-  /**
-   * Optionally pass a model directly to this component. Default is to create a model out of model
-   * config passed to this component.
-   * @default useMenuModel(config)
-   */
-  model?: MenuModel<T>;
-}
-
-/**
- * An accessible dropdown menu component. A dropdown menu usually contains a target element that
- * opens to a menu.
- * @example
- * <Menu>
- *   <Menu.Target>Open</Menu.Target>
- *   <Menu.Popper>
- *     <Menu.Card>
- *       <Menu.List>
- *         <Menu.Item name="first">First Item</Menu.Item>
- *         <Menu.Item name="second">Second Item</Menu.Item>
- *       </Menu.List>
- *     </Menu.Card>
- *   </Menu.Popper>
- * </Menu>
- */
-export const Menu = createComponent()({
-  displayName: 'Menu',
-  Component: ({children, model, ...config}: MenuProps<any>) => {
-    const value = useDefaultModel(model, config, useMenuModel);
-
-    return <MenuModelContext.Provider value={value}>{children}</MenuModelContext.Provider>;
-  },
-  subComponents: {
-    /**
-     * The menu card is a non-semantic element used to give the dropdown menu its distinct visual
-     * cue that the dropdown menu is floating above other content. A menu card usually contains a
-     * menu list, but can also contain other elements like a header or footer.
-     */
-    Card: MenuCard,
-    /**
-     * The menu list follows the Collections API. A list can either contain static items
-     * or a render prop and `items` to the model.
-     *
-     * @example
-     * const MyComponent = () => {
-     *   const model = useMenuModel({
-     *     items: [
-     *       { id: 'first',  text: 'First Item' },
-     *       { id: 'second', text: 'Second Item' },
-     *     ]
-     *   })
-     *
-     *   return (
-     *     <Menu model={model}>
-     *       <Menu.List>
-     *         {(item) => <Menu.Item name={item.id}>{item.text}</Menu.Item>}
-     *       </Menu.List>
-     *     </Menu>
-     *   )
-     * }
-     */
-    List: MenuList,
-    /**
-     * A menu item has an optional `name` prop that identifies the item in the menu list and will be
-     * passed to the optional `onSelect` callback of the menu model. A menu item can contain any
-     * HTML. If more complex HTML is provided, consider
-     */
-    Item: MenuItem,
-    Target: MenuTarget,
-    /**
-     * The "Popper" of a menu. The popper will appear around the `Menu.Target`. It renders a `div`
-     * element that is portalled to the `document.body` which is controlled by the `PopupStack. The
-     * `PopupStack` is not part of React. This means no extra props given to this component will be
-     * forwarded to the `div` element, but the `ref` will be forwarded.
-     */
-    Popper: MenuPopper,
-  },
-});

package/tabs/lib/menu/MenuCard.tsx

@@ -1,96 +0,0 @@
-import * as React from 'react';
-import {keyframes} from '@emotion/core';
-
-import {Card} from '@workday/canvas-kit-react/card';
-import {space, type} from '@workday/canvas-kit-react/tokens';
-import {
-  styled,
-  TransformOrigin,
-  getTranslateFromOrigin,
-  createComponent,
-  StyledType,
-  useModelContext,
-  ExtractProps,
-  createHook,
-} from '@workday/canvas-kit-react/common';
-import {getTransformFromPlacement} from '@workday/canvas-kit-react/popup';
-
-import {MenuModel} from './useMenuModel';
-import {MenuModelContext} from './Menu';
-
-export interface MenuCardProps<T = unknown> extends ExtractProps<typeof Card, never> {
-  /**
-   * 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?: MenuModel<T>;
-  children?: React.ReactNode;
-}
-
-const popupAnimation = (transformOrigin: TransformOrigin) => {
-  const translate = getTranslateFromOrigin(transformOrigin, space.xxs);
-
-  return keyframes`
-    0% {
-      opacity: 0;
-      transform: translate(${translate.x}px, ${translate.y}px);
-    }
-    100% {
-      opacity: 1;
-      transform: translate(0);
-    }
-  `;
-};
-
-const StyledCard = styled(Card)<
-  StyledType & {width?: number | string; transformOrigin?: TransformOrigin}
->(
-  type.levels.subtext.large,
-  {
-    position: 'relative',
-    display: 'flex',
-    flexDirection: 'column',
-  },
-  ({transformOrigin}) => {
-    if (transformOrigin == null) {
-      return {};
-    }
-    return {
-      animation: popupAnimation(transformOrigin),
-      animationDuration: '150ms',
-      animationTimingFunction: 'ease-out',
-      transformOrigin: `${transformOrigin.vertical} ${transformOrigin.horizontal}`,
-      // Allow overriding of animation in special cases
-      '.wd-no-animation &': {
-        animation: 'none',
-      },
-    };
-  }
-);
-
-export const MenuCard = createComponent('div')({
-  displayName: 'Menu.Card',
-  Component: ({children, model, padding = 'zero', ...elemProps}: MenuCardProps, ref, Element) => {
-    const localModel = useModelContext(MenuModelContext, model);
-    const props = useMenuCard(localModel, elemProps, ref);
-    const transformOrigin = React.useMemo(() => {
-      return getTransformFromPlacement(localModel.state.placement || 'bottom');
-    }, [localModel.state.placement]);
-
-    return (
-      <StyledCard
-        maxWidth={`calc(100vw - ${space.l})`}
-        as={Element}
-        transformOrigin={transformOrigin}
-        padding={padding}
-        {...props}
-      >
-        {children}
-      </StyledCard>
-    );
-  },
-});
-
-export const useMenuCard = createHook((_: MenuModel) => {
-  return {};
-});