@workday/canvas-kit-react 6.8.9 → 6.9.0-next.2

package/tabs/lib/cursor/useCursorModel.tsx

@@ -1,171 +0,0 @@
-import React from 'react';
-import {createEventMap, ToModelConfig, useEventMap, assert} from '@workday/canvas-kit-react/common';
-
-import {
-  ListState,
-  ListEvents,
-  BaseListModelConfig,
-  listEventMap,
-  useListModel,
-  ListModelConfig,
-  ListModel,
-} from '../list/useListModel';
-
-export type Orientation = 'horizontal' | 'vertical';
-
-export type CursorState<T = unknown> = ListState<T> & {
-  /** Orientation of the list. This property determines what "next" and "previous" mean. This should
-   * be set to match the layout of UI components */
-  orientation: Orientation;
-  /** The id of the list item the cursor is pointing to */
-  cursorId: string;
-};
-
-export type CursorEvents<T = unknown> = ListEvents<T> & {
-  /** Directly sets the cursor to the list item by its identifier.  */
-  goTo(data: {id: string}): void;
-  /** Set the cursor to the "next" item in the list. If the end of the list is detected, it will
-   * wrap to the first item */
-  next(): void;
-  /** Set the cursor to the "previous" item in the list. If the beginning of the list is detected,
-   * it will wrap to the last item */
-  previous(): void;
-  /** Set the cursor to the first item in the list */
-  first(): void;
-  /** Set the cursor to the last item in the list */
-  last(): void;
-};
-
-export interface CursorModel<T = unknown> extends ListModel<T> {
-  state: CursorState<T>;
-  events: CursorEvents<T>;
-}
-
-export const cursorEventMap = createEventMap<CursorEvents>()({
-  guards: {
-    ...listEventMap.guards,
-    /** Should a cursor position be set? Use only in advance use-cases */
-    shouldGoTo: 'goTo',
-  },
-  callbacks: {
-    ...listEventMap.callbacks,
-    /**
-     * Called when a cursor position has been changed. Useful to set state or perform side effects.
-     * This is called during state change batching, so calling state setters will not invoke extra
-     * renders.
-     */
-    onGoTo: 'goTo',
-  },
-});
-
-export type BaseCursorModelConfig<T> = BaseListModelConfig<T> & {
-  /**
-   * The orientation of a list of items. Values are either `vertical` or `horizontal`. This value will
-   * effect which ids activate progression through a list. For example, `horizontal` will activate with
-   * left and right arrows while `vertical` will activate with up and down arrows.
-   * @default 'vertical'
-   */
-  orientation?: Orientation;
-  /**
-   * Initial cursor position. If not provided, the cursor will point to the first item in the list
-   */
-  initialCursorId?: string;
-};
-
-export type CursorModelConfig<T> = BaseCursorModelConfig<T> &
-  Partial<ToModelConfig<CursorState<T>, CursorEvents<T>, typeof cursorEventMap>>;
-
-export const useCursorNavigation = <T extends unknown>(
-  state: CursorState<T>,
-  getId: ListModel<T>['getId']
-) => {
-  // refs for performance so that new functions aren't created every render
-  const getIdRef = React.useRef(getId);
-  const itemsRef = React.useRef(state.items);
-  const nonInteractiveIdsRef = React.useRef(state.nonInteractiveIds);
-
-  itemsRef.current = state.items;
-  nonInteractiveIdsRef.current = state.nonInteractiveIds;
-
-  // return a memoized function to prevent recreation of functions every render
-  return React.useMemo(() => {
-    const getFirst = () => itemsRef.current[0];
-    const getLast = () => itemsRef.current[itemsRef.current.length - 1];
-
-    const getItem = (id: string): T => {
-      const item = id ? itemsRef.current.find(item => getIdRef.current(item) === id) : getFirst(); // no id, return first item
-      assert(item, `Item not found: ${id}`);
-      return item;
-    };
-
-    const getOffsetItem = (offset: number) => (id: string, tries = itemsRef.current.length): T => {
-      const items = itemsRef.current;
-      const item = getItem(id);
-
-      const getId = getIdRef.current;
-      const currentIndex = items.findIndex(i => getId(item) === getId(i));
-      let nextIndex = currentIndex + offset;
-      if (nextIndex < 0) {
-        nextIndex = items.length - 1;
-      } else if (nextIndex >= items.length) {
-        nextIndex = 0;
-      }
-
-      if (nonInteractiveIdsRef.current.includes(getId(items[nextIndex])) && tries > 0) {
-        // The next item is disabled, try again, but only if we haven't already tried everything.
-        // Avoid an infinite loop with `tries`
-        return getOffsetItem(offset)(getId(items[nextIndex]), tries - 1);
-      }
-
-      return items[nextIndex];
-    };
-
-    const getNext = getOffsetItem(1);
-    const getPrevious = getOffsetItem(-1);
-
-    return {getFirst, getLast, getItem, getNext, getPrevious};
-  }, []);
-};
-
-export const useCursorModel = <T extends unknown>(
-  config: CursorModelConfig<T> = {}
-): CursorModel<T> => {
-  const [orientation] = React.useState(config.orientation || 'vertical');
-  const [cursorId, setCursorId] = React.useState('');
-  const list = useListModel(config as ListModelConfig<T>);
-  const initialCurrentRef = React.useRef(
-    config.initialCursorId || config.items?.length ? list.getId(config.items![0]) : ''
-  );
-
-  const state = {...list.state, orientation, cursorId};
-  const navigation = useCursorNavigation(state, list.getId);
-
-  const events = useEventMap(cursorEventMap, state, config, {
-    ...list.events,
-    registerItem(data) {
-      // point the cursor at the first item
-      if (!initialCurrentRef.current) {
-        initialCurrentRef.current = list.getId(data.item);
-        setCursorId(initialCurrentRef.current);
-      }
-      list.events.registerItem(data);
-    },
-    goTo({id}) {
-      setCursorId(id);
-    },
-    next() {
-      setCursorId(list.getId(navigation.getNext(state.cursorId)));
-    },
-    previous() {
-      setCursorId(list.getId(navigation.getPrevious(state.cursorId)));
-    },
-    first() {
-      setCursorId(list.getId(navigation.getFirst()));
-    },
-    last() {
-      setCursorId(list.getId(navigation.getLast()));
-    },
-  } as CursorEvents<T>);
-
-  return {state, events, getId: list.getId};
-};

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/index.ts

@@ -1,3 +0,0 @@
-export * from './useListRegisterItem';
-export * from './useListModel';
-export * from './renderItem';

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/useListModel.tsx

@@ -1,150 +0,0 @@
-import React from 'react';
-import {
-  createEventMap,
-  Model,
-  ToModelConfig,
-  useEventMap,
-  useUniqueId,
-  assert,
-} from '@workday/canvas-kit-react/common';
-
-export type ListState<T = unknown> = {
-  /** IDREF of the list. Children ids can be derived from this id */
-  id: string;
-  /** Used as an auto-incrementing ID for accessibility */
-  indexRef: React.RefObject<number>;
-  items: T[];
-  /**
-   * An array of ids of non-interactive elements. Non-interactive elements usually have `disabled`
-   * applied to them and thus are not focusable by the browser. Lists need to know about these so
-   * that keyboard navigation properly skips over these items. Interactive elements that are
-   * disabled should use `[aria-disabled]` instead and should still receive focus.
-   * @see https://www.w3.org/TR/wai-aria-practices-1.1/#kbd_disabled_controls
-   */
-  nonInteractiveIds: string[];
-};
-
-export type ListEvents<T = unknown> = {
-  /** Register an item to the list. Takes in an identifier, a React.Ref and an optional index. This should be called on
-   * component mount */
-  registerItem(data: {item: T; index?: number}): void;
-  /** Unregister an item by its identifier. This should be called when the component is unmounted */
-  unregisterItem(data: {id: string}): void;
-  /** Updates the position of a tab within the list. This should be called when a tab's index is updated */
-  updateItemPosition(data: {id: string; index: number}): void;
-};
-
-export interface ListModel<T = unknown> extends Model<ListState<T>, ListEvents<T>> {
-  getId: (item: T) => string;
-}
-
-// We don't have a way of knowing what the generic could be, so we leave it as `unknown`. It will
-// probably need to be cast to the generic in use inside extending models. This will not effect the
-// use of the model in an application, only in models composing this model.
-export const listEventMap = createEventMap<ListEvents>()({
-  guards: {
-    /**
-     * Should a list item be registered? This will prevent a DOM-based list item from being
-     * registered as an item in the list. Use this only for advanced cases.
-     * */
-    shouldRegisterItem: 'registerItem',
-    /**
-     * Should a list item be unregistered? Use this only for advanced cases. Lists can get into an
-     * unspecified state if not managed properly.
-     */
-    shouldUnregisterItem: 'unregisterItem',
-    /**
-     * Should a list item position be updated? Use this only for advanced cases. Lists can get into an
-     * unspecified state if not managed properly.
-     */
-    shouldUpdateItemPosition: 'updateItemPosition',
-  },
-  callbacks: {
-    /**
-     * Called once an item has been registered to the list. This is useful to do any `setState` or
-     * side effects. This method is called synchronously during a `setState` batch. Calling state
-     * setters will not cause extra renders. Item registration should be called during the
-     * mount/unmount cycles of rendering.
-     */
-    onRegisterItem: 'registerItem',
-    /**
-     * Called once an item has been unregistered from the list. This is useful to do any `setState`
-     * or side effects. This method is called synchronously during a `setState` batch. Calling state
-     * setters will not cause extra renders. Item registration should be called during the
-     * mount/unmount cycles of rendering.
-     */
-    onUnregisterItem: 'unregisterItem',
-    /**
-     * Called once an item's position has been updated in the list. This is useful to do any `setState`
-     * or side effects. This method is called synchronously during a `setState` batch. Calling state
-     * setters will not cause extra renders. Item registration should be called during the
-     * mount/unmount cycles of rendering.
-     */
-    onUpdateItemPosition: 'updateItemPosition',
-  },
-});
-
-export type BaseListModelConfig<T = unknown> = {
-  /** IDREF of the list. Children ids can be derived from this id */
-  id?: string;
-  items?: T[];
-  getId?: (item: T) => string;
-  /**
-   * Array of all ids which are currently disabled
-   */
-  nonInteractiveIds?: string[];
-};
-
-export type ListModelConfig<T> = BaseListModelConfig<T> &
-  Partial<ToModelConfig<ListState<T>, ListEvents<T>, typeof listEventMap>>;
-
-export const defaultGetId = (item: any): string => {
-  assert(item.id, 'A list item must have an `id` field or a `getId` function defined');
-  return item.id;
-};
-
-export const useListModel = <T extends unknown>(config: ListModelConfig<T> = {}): ListModel<T> => {
-  const id = useUniqueId(config.id);
-  const indexRef = React.useRef(0);
-  const [items, setItems] = React.useState(config.items || []);
-  const getId = config.getId || defaultGetId;
-
-  const state = {
-    id,
-    items: config.items || items,
-    indexRef,
-    nonInteractiveIds: config.nonInteractiveIds || [],
-  };
-
-  const events = useEventMap(listEventMap, state, config, {
-    registerItem({item, index}) {
-      indexRef.current++;
-      setItems(items => {
-        if (index !== undefined) {
-          const copy = [...items];
-          copy.splice(index, 0, item);
-          return copy;
-        }
-        return items.concat(item);
-      });
-    },
-    unregisterItem({id}) {
-      setItems(items => {
-        if (items.find(item => getId(item) === id)) {
-          return items.filter(item => getId(item) !== id);
-        } else {
-          return items;
-        }
-      });
-    },
-    updateItemPosition({id, index}) {
-      setItems(items => {
-        const copy = items.filter(item => getId(item) !== id);
-        copy.splice(index, 0, items.find(item => getId(item) === id)!);
-        return copy;
-      });
-    },
-  } as ListEvents<T>);
-
-  return {state, events, getId};
-};

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 {};
-});