@workday/canvas-kit-react 7.0.0-alpha.89-next.16 → 7.0.0-alpha.92-next.19

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

@@ -1,96 +0,0 @@
-import * as React from 'react';
-import {keyframes} from '@emotion/react';
-
-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 {};
-});

package/tabs/lib/menu/MenuList.tsx

@@ -1,58 +0,0 @@
-import * as React from 'react';
-
-import {commonColors} from '@workday/canvas-kit-react/tokens';
-import {
-  createComponent,
-  useModelContext,
-  createHook,
-  ExtractProps,
-} from '@workday/canvas-kit-react/common';
-import {Stack} from '@workday/canvas-kit-react/layout';
-
-import {MenuModel} from './useMenuModel';
-import {MenuModelContext} from './Menu';
-import {useRenderItems} from '../list';
-
-export interface MenuListProps<T = unknown> extends Partial<ExtractProps<typeof Stack, never>> {
-  /**
-   * The label text of the MenuList.
-   */
-  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?: MenuModel<T>;
-}
-
-export const MenuList = createComponent('div')({
-  displayName: 'Menu.List',
-  Component: ({model, children, ...elemProps}: MenuListProps, ref, Element) => {
-    const localModel = useModelContext(MenuModelContext, model);
-
-    const props = useMenuList(localModel, elemProps, ref);
-
-    return (
-      <Stack
-        as={Element}
-        background={commonColors.background}
-        borderRadius="zero"
-        padding="zero"
-        marginY="xxs"
-        spacing="zero"
-        overflowY="auto"
-        flexDirection={localModel.state.orientation === 'vertical' ? 'column' : 'row'}
-        {...props}
-      >
-        {useRenderItems(localModel, children)}
-      </Stack>
-    );
-  },
-});
-
-export const useMenuList = createHook((model: MenuModel) => {
-  return {
-    role: 'menu',
-    'aria-labelledby': model.state.id,
-  };
-});

package/tabs/lib/menu/MenuPopper.tsx

@@ -1,31 +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 {MenuModel} from './useMenuModel';
-import {MenuModelContext} from './Menu';
-
-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?: MenuModel<T>;
-}
-
-export const MenuPopper = createComponent('div')({
-  displayName: 'Menu.Popper',
-  Component: ({children, model, ...elemProps}: MenuPopperProps, ref) => {
-    const localModel = useModelContext(MenuModelContext, model);
-
-    const props = useMenuPopper(localModel, elemProps, ref);
-    return (
-      <Popper placement="bottom-start" {...props}>
-        {children}
-      </Popper>
-    );
-  },
-});
-
-export const useMenuPopper = usePopupPopper;

package/tabs/lib/menu/MenuTarget.tsx

@@ -1,52 +0,0 @@
-import * as React from 'react';
-
-import {
-  composeHooks,
-  createComponent,
-  createHook,
-  useModelContext,
-} from '@workday/canvas-kit-react/common';
-import {SecondaryButton} from '@workday/canvas-kit-react/button';
-import {usePopupTarget} from '@workday/canvas-kit-react/popup';
-
-import {MenuModel} from './useMenuModel';
-import {MenuModelContext} from './Menu';
-
-export interface MenuTargetProps<T = unknown> {
-  /**
-   * 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;
-}
-
-export const MenuTarget = createComponent(SecondaryButton)({
-  displayName: 'Menu.Target',
-  Component: ({children, model, ...elemProps}: MenuTargetProps, ref, Element) => {
-    const localModel = useModelContext(MenuModelContext, model);
-
-    const props = useMenuTarget(localModel, elemProps, ref);
-
-    return <Element {...props}>{children}</Element>;
-  },
-});
-
-export const useMenuTarget = composeHooks(
-  createHook((model: MenuModel) => {
-    return {
-      id: model.state.id,
-      onKeyDown(event: React.KeyboardEvent) {
-        // eslint-disable-next-line default-case
-        switch (event.key) {
-          case 'Down':
-          case 'ArrowDown': // IE11
-          case 'Up':
-          case 'ArrowUp': // IE11
-            model.events.show({event});
-        }
-      },
-    };
-  }),
-  usePopupTarget
-);

package/tabs/lib/menu/index.ts

@@ -1,8 +0,0 @@
-export * from './useMenuModel';
-export {Menu} from './Menu';
-
-export {useMenuCard} from './MenuCard';
-export {useMenuItem} from './MenuItem';
-export {useMenuList} from './MenuList';
-export {useMenuPopper} from './MenuPopper';
-export {useMenuTarget} from './MenuTarget';

package/tabs/lib/menu/useMenuModel.tsx

@@ -1,67 +0,0 @@
-import {createEventMap, Model, ToModelConfig, useEventMap} from '@workday/canvas-kit-react/common';
-import {
-  BasePopupModelConfig,
-  popupEventMap,
-  PopupEvents,
-  PopupModelConfig,
-  PopupState,
-  useAlwaysCloseOnOutsideClick,
-  useCloseOnEscape,
-  useFocusRedirect,
-  useInitialFocus,
-  usePopupModel,
-  useReturnFocus,
-} from '@workday/canvas-kit-react/popup';
-import {ListModel} from '../list';
-import {
-  SelectionState,
-  SelectionEvents,
-  selectionEventMap,
-  SelectionModelConfig,
-  useSelectionModel,
-  BaseSelectionModelConfig,
-} from '../selection';
-
-export type MenuState<T = unknown> = SelectionState<T> & PopupState & {};
-
-export type MenuEvents<T = unknown> = SelectionEvents<T> & PopupEvents & {};
-
-export interface MenuModel<T = unknown> extends Model<MenuState<T>, MenuEvents<T>> {
-  getId: ListModel<T>['getId'];
-}
-
-export const menuEventMap = createEventMap<MenuEvents>()({
-  guards: {
-    ...selectionEventMap.guards,
-    ...popupEventMap.guards,
-  },
-  callbacks: {
-    ...selectionEventMap.callbacks,
-    ...popupEventMap.callbacks,
-  },
-});
-
-export type BaseMenuModelConfig<T> = BaseSelectionModelConfig<T> & BasePopupModelConfig & {};
-
-export type MenuModelConfig<T> = BaseMenuModelConfig<T> &
-  Partial<ToModelConfig<MenuState<T>, MenuEvents<T>, typeof menuEventMap>>;
-
-export const useMenuModel = <T extends unknown>(config: MenuModelConfig<T> = {}): MenuModel<T> => {
-  const popup = usePopupModel(config as PopupModelConfig);
-  const selection = useSelectionModel(config as SelectionModelConfig<T>);
-
-  useAlwaysCloseOnOutsideClick(popup);
-  useCloseOnEscape(popup);
-  useInitialFocus(popup);
-  useReturnFocus(popup);
-  useFocusRedirect(popup);
-
-  const state = {...selection.state, ...popup.state};
-
-  const events = useEventMap(menuEventMap, state, config, {
-    ...selection.events,
-    ...popup.events,
-  } as MenuEvents<T>);
-
-  return {state, events, getId: selection.getId};
-};

package/tabs/lib/overflow/index.ts

@@ -1,4 +0,0 @@
-export * from './useOverflowModel';
-export * from './useOverflowMeasureItem';
-export * from './useOverflowMeasureContainer';
-export * from './useOverflowTarget';

package/tabs/lib/overflow/spec/tsconfig.json

@@ -1,3 +0,0 @@
-{
-  "extends": "../../../../../tsconfig.spec.json"
-}