@workday/canvas-kit-react 7.0.0-alpha.0-next.5 → 7.0.0-alpha.100-next.25

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"
-}

package/tabs/lib/overflow/spec/useOverflowModel.spec.tsx

@@ -1,46 +0,0 @@
-import {getHiddenIds} from '../useOverflowModel';
-
-describe('useOverflowModel', () => {
-  describe('getHiddenIds', () => {
-    const itemWidthCache = {
-      first: 100,
-      second: 100,
-      third: 100,
-      fourth: 100,
-    };
-    const overflowTargetWidth = 100;
-
-    const io = [
-      {
-        containerWidth: 100,
-        selected: 'first',
-        hiddenIds: ['first', 'second', 'third', 'fourth'],
-      },
-      {
-        containerWidth: 199,
-        selected: 'first',
-        hiddenIds: ['first', 'second', 'third', 'fourth'],
-      },
-      {
-        containerWidth: 200,
-        selected: 'first',
-        hiddenIds: ['second', 'third', 'fourth'],
-      },
-      {containerWidth: 400, selected: 'first', hiddenIds: []},
-      {containerWidth: 399, selected: 'first', hiddenIds: ['third', 'fourth']},
-      {
-        containerWidth: 200,
-        selected: 'second',
-        hiddenIds: ['first', 'third', 'fourth'],
-      },
-    ].forEach(({containerWidth, hiddenIds, selected}) => {
-      it(`when containerWidth is ${containerWidth} and selected is '${selected}' should contain hiddenIds [${hiddenIds.join(
-        ', '
-      )}] `, () => {
-        expect(
-          getHiddenIds(containerWidth, overflowTargetWidth, itemWidthCache, [selected])
-        ).toEqual(hiddenIds);
-      });
-    });
-  });
-});

package/tabs/lib/overflow/useOverflowMeasureContainer.ts

@@ -1,20 +0,0 @@
-import * as React from 'react';
-
-import {createHook, useForkRef, useResizeObserver} from '@workday/canvas-kit-react/common';
-
-import {OverflowModel} from './useOverflowModel';
-
-export const useOverflowMeasureContainer = createHook(
-  (model: OverflowModel, ref?: React.Ref<HTMLElement>) => {
-    const localRef = React.useRef(null);
-    const {ref: resizeRef} = useResizeObserver({
-      ref: localRef,
-      onResize: model.events.setContainerWidth,
-    });
-    const elementRef = useForkRef(ref, resizeRef);
-
-    return {
-      ref: elementRef,
-    };
-  }
-);

package/tabs/lib/overflow/useOverflowMeasureItem.tsx

@@ -1,40 +0,0 @@
-import {createHook, useLocalRef, useMountLayout} from '@workday/canvas-kit-react/common';
-
-import {OverflowModel} from './useOverflowModel';
-
-const hiddenStyles = {
-  position: 'absolute',
-  left: -99999,
-} as const;
-
-export const useOverflowMeasureItem = createHook(
-  (model: OverflowModel, ref?: React.Ref<HTMLElement>, elemProps: {name?: string} = {}) => {
-    const {elementRef, localRef} = useLocalRef(ref);
-    const name = elemProps.name || '';
-
-    useMountLayout(() => {
-      if (localRef.current) {
-        const styles = getComputedStyle(localRef.current);
-        model.events.addItemWidth({
-          id: name,
-          width:
-            localRef.current.offsetWidth +
-            parseFloat(styles.marginLeft) +
-            parseFloat(styles.marginRight),
-        });
-      }
-
-      return () => {
-        model.events.removeItemWidth({id: name});
-      };
-    });
-
-    const hidden = model.state.hiddenIds.includes(name);
-
-    return {
-      ref: elementRef,
-      'aria-hidden': hidden || undefined,
-      style: hidden ? hiddenStyles : {},
-    };
-  }
-);

package/tabs/lib/overflow/useOverflowModel.tsx

@@ -1,207 +0,0 @@
-import React from 'react';
-
-import {createEventMap, ToModelConfig, useEventMap} from '@workday/canvas-kit-react/common';
-import {
-  SelectionState,
-  SelectionEvents,
-  BaseSelectionModelConfig,
-  useSelectionModel,
-  SelectionModelConfig,
-  selectionEventMap,
-  SelectionModel,
-} from '../selection';
-
-export type OverflowState<T = unknown> = SelectionState<T> & {
-  containerWidth: number;
-  overflowTargetWidth: number;
-  itemWidthCache: Record<string, number>;
-  hiddenIds: string[];
-};
-
-export type OverflowEvents<T = unknown> = SelectionEvents<T> & {
-  setContainerWidth(data: {width?: number}): void;
-  setOverflowTargetWidth(data: {width: number}): void;
-  addItemWidth(data: {id: string; width: number}): void;
-  removeItemWidth(data: {id: string}): void;
-  addHiddenKey(data: {id: string}): void;
-  removeHiddenKey(data: {id: string}): void;
-};
-
-export interface OverflowModel<T = unknown> extends SelectionModel<T> {
-  state: OverflowState<T>;
-  events: OverflowEvents<T>;
-}
-
-export const overflowEventMap = createEventMap<OverflowEvents>()({
-  guards: {
-    ...selectionEventMap.guards,
-    shouldSetContainerWidth: 'setContainerWidth',
-    shouldSetOverflowTargetWidth: 'setOverflowTargetWidth',
-    shouldAddItemWidth: 'addItemWidth',
-    shouldRemoveItemWidth: 'removeItemWidth',
-    shouldAddHiddenKey: 'addHiddenKey',
-    shouldRemoveHiddenKey: 'removeHiddenKey',
-  },
-  callbacks: {
-    ...selectionEventMap.callbacks,
-    onSetContainerWidth: 'setContainerWidth',
-    onSetOverflowTargetWidth: 'setOverflowTargetWidth',
-    onAddItemWidth: 'addItemWidth',
-    onRemoveItemWidth: 'removeItemWidth',
-    onAddHiddenKey: 'addHiddenKey',
-    onRemoveHiddenKey: 'removeHiddenKey',
-  },
-});
-
-export type BaseOverflowModelConfig<T> = BaseSelectionModelConfig<T> & {
-  initialHiddenIds?: string[];
-  containerWidth?: number;
-};
-
-export type OverflowModelConfig<T> = BaseOverflowModelConfig<T> &
-  Partial<ToModelConfig<OverflowState<T>, OverflowEvents<T>, typeof selectionEventMap>>;
-
-export function getHiddenIds(
-  containerWidth: number,
-  overflowTargetWidth: number,
-  itemWidthCache: Record<string, number>,
-  selectedIds: string[] | 'all'
-): string[] {
-  /** Allows us to prioritize showing the selected item */
-  let selectedKey: undefined | string;
-  /** Tally of combined item widths. We'll add items that fit until the container is full */
-  let itemWidth = 0;
-  /** Tally ids that won't fit inside the container. These will be used by components to hide
-   * elements that won't fit in the container */
-  const hiddenIds: string[] = [];
-
-  if (selectedIds !== 'all' && selectedIds.length) {
-    selectedKey = selectedIds[0];
-  }
-
-  if (
-    Object.keys(itemWidthCache).reduce((sum, key) => sum + itemWidthCache[key], 0) <= containerWidth
-  ) {
-    // All items fit, return empty array
-    return [];
-  } else if (selectedKey) {
-    if (itemWidthCache[selectedKey] + overflowTargetWidth > containerWidth) {
-      // If the selected item doesn't fit, only show overflow (all items hidden)
-      return Object.keys(itemWidthCache);
-    } else {
-      // at least the selected item and overflow target fit. Update our itemWidth with the sum
-      itemWidth += itemWidthCache[selectedKey] + overflowTargetWidth;
-    }
-  } else {
-    itemWidth += overflowTargetWidth;
-  }
-
-  for (const key in itemWidthCache) {
-    if (key !== selectedKey) {
-      itemWidth += itemWidthCache[key];
-      if (itemWidth > containerWidth) {
-        hiddenIds.push(key);
-      }
-    }
-  }
-
-  return hiddenIds;
-}
-
-export const useOverflowModel = <T extends unknown>(
-  config: OverflowModelConfig<T> = {}
-): OverflowModel<T> => {
-  const [hiddenIds, setHiddenIds] = React.useState(config.initialHiddenIds || []);
-  const [itemWidthCache, setItemWidthCache] = React.useState<Record<string, number>>({});
-  const [containerWidth, setContainerWidth] = React.useState(0);
-  const containerWidthRef = React.useRef(0);
-  const itemWidthCacheRef = React.useRef(itemWidthCache);
-  const [overflowTargetWidth, setOverflowTargetWidth] = React.useState(0);
-  const overflowTargetWidthRef = React.useRef(0);
-
-  // Cursors skip over disabled ids, but know nothing of hidden ids. We'll go ahead and disable
-  // hidden ids as well
-  const nonInteractiveIds = (config.nonInteractiveIds || []).concat(hiddenIds);
-
-  const model = useSelectionModel({...(config as SelectionModelConfig<T>), nonInteractiveIds});
-
-  const state = {
-    ...model.state,
-    hiddenIds,
-    itemWidthCache,
-    containerWidth,
-    overflowTargetWidth,
-  };
-
-  const events = useEventMap(overflowEventMap, state, config, {
-    ...model.events,
-    select(data) {
-      const {selectedIds} = model.selection.select(data.id, state as SelectionState<T>);
-      const ids = getHiddenIds(
-        containerWidthRef.current,
-        overflowTargetWidthRef.current,
-        itemWidthCacheRef.current,
-        selectedIds
-      );
-      model.events.select(data);
-
-      setHiddenIds(ids);
-    },
-    setContainerWidth({width}) {
-      containerWidthRef.current = width || 0;
-      setContainerWidth(width || 0);
-
-      const ids = getHiddenIds(
-        containerWidthRef.current,
-        overflowTargetWidthRef.current,
-        itemWidthCacheRef.current,
-        state.selectedIds
-      );
-
-      setHiddenIds(ids);
-    },
-    setOverflowTargetWidth({width}) {
-      overflowTargetWidthRef.current = width;
-      setOverflowTargetWidth(width);
-    },
-    addItemWidth({id, width}) {
-      itemWidthCacheRef.current = {...itemWidthCacheRef.current, [id]: width};
-
-      setItemWidthCache(itemWidthCacheRef.current);
-
-      const ids = getHiddenIds(
-        containerWidthRef.current,
-        overflowTargetWidthRef.current,
-        itemWidthCacheRef.current,
-        state.selectedIds
-      );
-
-      setHiddenIds(ids);
-    },
-    removeItemWidth({id}) {
-      const newCache = {...itemWidthCacheRef.current};
-      delete newCache[id];
-      itemWidthCacheRef.current = newCache;
-      setItemWidthCache(itemWidthCacheRef.current);
-
-      const ids = getHiddenIds(
-        containerWidthRef.current,
-        overflowTargetWidthRef.current,
-        itemWidthCacheRef.current,
-        state.selectedIds !== 'all'
-          ? state.selectedIds.filter(sId => id !== sId)
-          : state.selectedIds
-      );
-
-      setHiddenIds(ids);
-    },
-    addHiddenKey({id}) {
-      setHiddenIds(ids => ids.concat(id));
-    },
-    removeHiddenKey({id}) {
-      setHiddenIds(ids => ids.filter(key => key !== id));
-    },
-  } as OverflowEvents<T>);
-
-  return {state, events, selection: model.selection, getId: model.getId};
-};

package/tabs/lib/overflow/useOverflowTarget.tsx

@@ -1,42 +0,0 @@
-import React from 'react';
-
-import {createHook, useMountLayout, useLocalRef} from '@workday/canvas-kit-react/common';
-
-import {OverflowModel} from './useOverflowModel';
-
-// use a hidden style instead of `hidden` attribute for measurement purposes. `hidden` elements have no dimensions
-const hiddenStyle = {
-  position: 'absolute',
-  left: -99999,
-};
-
-export const useOverflowTarget = createHook(
-  (model: OverflowModel, ref?: React.Ref<HTMLButtonElement>) => {
-    const {elementRef, localRef} = useLocalRef(ref);
-    // track first render to force correct size calculations
-    const firstRender = React.useRef(true);
-
-    useMountLayout(() => {
-      firstRender.current = false;
-      if (localRef.current) {
-        const styles = getComputedStyle(localRef.current);
-
-        model.events.setOverflowTargetWidth({
-          width:
-            localRef.current.offsetWidth +
-            parseFloat(styles.marginLeft) +
-            parseFloat(styles.marginRight),
-        });
-      }
-    });
-
-    const isHidden = !model.state.hiddenIds.length;
-
-    return {
-      ref: elementRef,
-      'aria-hidden': isHidden,
-      tabIndex: isHidden ? -1 : 0,
-      style: isHidden ? hiddenStyle : {},
-    };
-  }
-);

package/tabs/lib/selection/index.ts

@@ -1,3 +0,0 @@
-export * from './useSelectionModel';
-export * from './useSelectionItem';
-export * from './useResetCursorOnBlur';

package/tabs/lib/selection/useResetCursorOnBlur.tsx

@@ -1,29 +0,0 @@
-import React from 'react';
-
-import {createHook} from '@workday/canvas-kit-react/common';
-import {orientationKeyMap} from '../cursor';
-
-import {SelectionModel} from './useSelectionModel';
-
-/**
- * Reset the cursor to the selected item when the list looses focus
- */
-export const useResetCursorOnBlur = createHook(({state, events}: SelectionModel) => {
-  const programmaticFocusRef = React.useRef(false);
-  return {
-    onKeyDown(event: React.KeyboardEvent) {
-      // Programmatic focus only on any focus change via keyboard
-      if (Object.keys(orientationKeyMap[state.orientation]).indexOf(event.key) !== -1) {
-        programmaticFocusRef.current = true;
-      }
-    },
-    onFocus() {
-      programmaticFocusRef.current = false;
-    },
-    onBlur() {
-      if (!programmaticFocusRef.current) {
-        events.goTo({id: state.selectedIds[0]});
-      }
-    },
-  };
-});

package/tabs/lib/selection/useSelectionItem.tsx

@@ -1,26 +0,0 @@
-import React from 'react';
-
-import {createHook} from '@workday/canvas-kit-react/common';
-
-import {SelectionModel} from './useSelectionModel';
-
-export const useSelectionItem = createHook(
-  (
-    {state, events}: SelectionModel,
-    _?: React.Ref<HTMLElement>,
-    elemProps: {name?: string} = {}
-  ) => {
-    const name = elemProps.name || '';
-    const onClick = (event: React.MouseEvent<HTMLElement>) => {
-      if (
-        state.nonInteractiveIds.includes(name) ||
-        event.currentTarget.hasAttribute('aria-disabled')
-      ) {
-        return;
-      }
-      events.select({id: name});
-    };
-
-    return {onClick};
-  }
-);

package/tabs/lib/selection/useSelectionModel.tsx

@@ -1,133 +0,0 @@
-import React from 'react';
-import {createEventMap, ToModelConfig, useEventMap} from '@workday/canvas-kit-react/common';
-import {
-  CursorState,
-  CursorEvents,
-  BaseCursorModelConfig,
-  useCursorModel,
-  CursorModelConfig,
-  cursorEventMap,
-  CursorModel,
-} from '../cursor/useCursorModel';
-
-export type Orientation = 'horizontal' | 'vertical';
-
-export type SelectionState<T = unknown> = CursorState<T> & {
-  selectedIds: 'all' | string[];
-  unselectedIds: string[];
-};
-
-export type SelectionEvents<T = unknown> = CursorEvents<T> & {
-  /** Select a specific item by its identifier. */
-  select(data: {id: string}): void;
-  /** Select all items. This will set `selectedIds` to `'all'` and remove all `unselectedIds`.
-   * This is especially useful for virtual lists where not all items are loaded in memory.
-   */
-  selectAll(): void;
-  unselectAll(): void;
-};
-
-export interface SelectionModel<T = unknown> extends CursorModel<T> {
-  state: SelectionState<T>;
-  events: SelectionEvents<T>;
-  selection: SelectionManager;
-}
-
-export const selectionEventMap = createEventMap<SelectionEvents>()({
-  guards: {
-    ...cursorEventMap.guards,
-    /** Should a cursor position be set? Use only in advance use-cases */
-    shouldSelect: 'select',
-  },
-  callbacks: {
-    ...cursorEventMap.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.
-     */
-    onSelect: 'select',
-  },
-});
-
-/**
- * A SelectionManager is used
- */
-export interface SelectionManager {
-  select(
-    id: string,
-    prevState: Pick<SelectionState, 'selectedIds' | 'unselectedIds'>
-  ): Pick<SelectionState, 'selectedIds' | 'unselectedIds'>;
-}
-
-export const isSelected = (
-  id: string,
-  {selectedIds, unselectedIds}: Pick<SelectionState, 'selectedIds' | 'unselectedIds'>
-) => {
-  if (selectedIds === 'all') {
-    return !unselectedIds.includes(id);
-  }
-  return selectedIds.includes(id);
-};
-
-export const singleSelectionManager: SelectionManager = {
-  select(id: string) {
-    return {selectedIds: [id], unselectedIds: []};
-  },
-};
-
-export const multiSelectionManager: SelectionManager = {
-  select(id: string, {selectedIds, unselectedIds}) {
-    if (selectedIds === 'all') {
-      // If we have all selected, start adding/removing from `unselectedIds`
-      const existingKey = unselectedIds.includes(id);
-      return {
-        selectedIds: 'all',
-        unselectedIds: existingKey
-          ? unselectedIds.filter(key => key !== id)
-          : unselectedIds.concat(id),
-      };
-    } else {
-      const existingKey = selectedIds.includes(id);
-      return {
-        selectedIds: existingKey ? selectedIds.filter(key => key !== id) : selectedIds.concat(id),
-        unselectedIds: [],
-      };
-    }
-  },
-};
-
-export type BaseSelectionModelConfig<T> = BaseCursorModelConfig<T> & {
-  initialSelectedIds?: string[];
-  initialUnselectedIds?: string[];
-  selection?: SelectionManager;
-};
-
-export type SelectionModelConfig<T> = BaseSelectionModelConfig<T> &
-  Partial<ToModelConfig<SelectionState<T>, SelectionEvents<T>, typeof selectionEventMap>>;
-
-export const useSelectionModel = <T extends unknown>(
-  config: SelectionModelConfig<T> = {}
-): SelectionModel<T> => {
-  const cursor = useCursorModel(config as CursorModelConfig<T>);
-  const [selectedIds, setSelectedIds] = React.useState<'all' | string[]>(
-    config.initialSelectedIds || []
-  );
-  const [unselectedIds, setUnselectedIds] = React.useState(config.initialUnselectedIds || []);
-
-  const selection = config.selection || singleSelectionManager;
-
-  const state = {...cursor.state, selectedIds, unselectedIds};
-
-  const events = useEventMap(selectionEventMap, state, config, {
-    ...cursor.events,
-    select(data) {
-      const {selectedIds, unselectedIds} = selection.select(data.id, state);
-      setSelectedIds(selectedIds);
-      setUnselectedIds(unselectedIds);
-      events.goTo({id: data.id});
-    },
-  } as SelectionEvents<T>);
-
-  return {state, events, selection, getId: cursor.getId};
-};