@workday/canvas-kit-react 6.0.0-beta.0-next.13 → 6.0.0

package/tabs/lib/Tab.tsx

@@ -1,176 +0,0 @@
-import * as React from 'react';
-
-import {colors, space, type, borderRadius} from '@workday/canvas-kit-react/tokens';
-import {
-  createComponent,
-  focusRing,
-  hideMouseFocus,
-  mergeProps,
-  styled,
-  StyledType,
-  useLocalRef,
-  useModelContext,
-} from '@workday/canvas-kit-react/common';
-
-import {TabsModelContext} from './Tabs';
-import {TabsModel} from './useTabsModel';
-import {useRegisterItem} from './list';
-import {useRovingFocusItem} from './cursor';
-
-export interface TabProps {
-  /**
-   * Optionally pass index to tab item. This should be done if `Tabs.Item` components were created
-   * via a `Array::map` function. This index will ensure keyboard navigation works even if items are
-   * inserted out of order.
-   */
-  index?: number;
-  /**
-   * The label text of the Tab.
-   */
-  children: React.ReactNode;
-  /**
-   * The name of the tab. This name will be used in change events and for `initialTab`. Must match
-   * the `name` of the associated tab panel. If this property is not provided, it will default to a
-   * string representation of the the zero-based index of the Tab when it was initialized.
-   */
-  name?: string;
-  /**
-   * 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;
-  /**
-   * Optional id. If not set, it will inherit the ID passed to the `Tabs` component and append the
-   * index at the end. Only set this for advanced cases.
-   */
-  id?: string;
-  /**
-   * Part of the ARIA specification for tabs. This attributes links a `role=tab` to a
-   * `role=tabpanel`. This value must be the same as the associated `id` attribute of the tab panel.
-   * This is automatically set by the component and should only be used in advanced cases.
-   */
-  'aria-controls'?: string;
-  /**
-   * Part of the ARIA specification for tabs. Lets screen readers know which tab is active. This
-   * should either be `true` or `undefined` and never `false`. This is automatically set by the
-   * component and should only be used in advanced cases.
-   */
-  'aria-selected'?: boolean;
-  /**
-   * Part of the ARIA specification for tabs. The currently active tab should not have a `tabIndex` set while
-   * all inactive tabs should have a `tabIndex={-1}`
-   */
-  tabIndex?: number;
-}
-
-const StyledButton = styled('button')<{isSelected: boolean} & StyledType>(
-  {
-    ...type.levels.subtext.large,
-    fontWeight: type.properties.fontWeights.medium,
-    border: 'none',
-    backgroundColor: 'transparent',
-    flex: '0 0 auto',
-    maxWidth: '280px',
-    padding: space.s,
-    boxSizing: 'border-box',
-    cursor: 'pointer',
-    color: colors.licorice300,
-    position: 'relative',
-    marginLeft: `${space.xxxs}`,
-    borderRadius: `${borderRadius.m} ${borderRadius.m} 0px 0px`,
-    transition: 'background 150ms ease, color 150ms ease',
-
-    '&:first-of-type': {
-      marginLeft: 0,
-    },
-
-    ...hideMouseFocus,
-
-    '&:hover, &:focus': {
-      backgroundColor: colors.soap200,
-      color: colors.blackPepper400,
-    },
-
-    '&:focus': {
-      outline: `none`,
-      ...focusRing({inset: 'outer', width: 0, separation: 2}),
-    },
-
-    '&:disabled': {
-      color: colors.licorice100,
-      '&:hover': {
-        cursor: 'auto',
-        backgroundColor: `transparent`,
-      },
-    },
-  },
-  ({isSelected}) => {
-    if (isSelected) {
-      return {
-        color: colors.blueberry400,
-        cursor: 'default',
-        '&:after': {
-          position: 'absolute',
-          height: space.xxxs,
-          borderRadius: `${borderRadius.m} ${borderRadius.m} 0px 0px`,
-          backgroundColor: colors.blueberry400,
-          bottom: 0,
-          content: `''`,
-          left: 0,
-          marginTop: '-2px',
-          width: '100%',
-        },
-        '&:hover, &:focus': {
-          backgroundColor: `transparent`,
-          color: colors.blueberry400,
-        },
-      };
-    }
-    return {};
-  }
-);
-
-const useTab = (
-  model: TabsModel,
-  elemProps: {index?: number; name?: string} = {},
-  ref: React.Ref<HTMLButtonElement>
-) => {
-  const {localRef, elementRef} = useLocalRef(ref);
-
-  const name = useRegisterItem(model, localRef, elemProps.name, elemProps.index);
-  const {state, events} = model;
-
-  const onSelect = () => {
-    events.activate({tab: name});
-  };
-
-  const isSelected = !!name && state.activeTab === name;
-
-  return mergeProps(
-    {
-      id: `tab-${state.id}-${name}`,
-      tabIndex: !!name && state.cursorId === name ? undefined : -1,
-      'aria-selected': isSelected,
-      'aria-controls': `tabpanel-${state.id}-${name}`,
-      onClick: onSelect,
-      isSelected: isSelected,
-      ref: elementRef,
-    },
-    useRovingFocusItem(model, elemProps)
-  );
-};
-
-export const Tab = createComponent('button')({
-  displayName: 'Tabs.Item',
-  Component: ({model, children, ...elemProps}: TabProps, ref, Element) => {
-    const localModel = useModelContext(TabsModelContext, model);
-
-    const props = useTab(localModel, elemProps, ref);
-
-    return (
-      <StyledButton type="button" role="tab" as={Element} {...props}>
-        {children}
-      </StyledButton>
-    );
-  },
-});

package/tabs/lib/TabList.tsx

@@ -1,59 +0,0 @@
-import * as React from 'react';
-
-import {space, commonColors} from '@workday/canvas-kit-react/tokens';
-import {
-  composeHooks,
-  createComponent,
-  styled,
-  StyledType,
-  useModelContext,
-} from '@workday/canvas-kit-react/common';
-
-import {useRovingFocusList} from './cursor';
-import {TabsModelContext} from './Tabs';
-import {useResetCursorOnBlur} from './hooks';
-import {TabsModel} from './useTabsModel';
-
-export interface TabListProps {
-  /**
-   *
-   */
-  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;
-}
-
-const TabsListContainer = styled('div')({
-  display: 'inline-block',
-  position: 'relative',
-  width: `100%`,
-  borderBottom: `1px solid ${commonColors.divider}`,
-});
-
-const TabsListInnerContainer = styled('div')<StyledType>({
-  display: `flex`,
-  margin: `0 ${space.m}`,
-});
-
-export const TabList = createComponent('div')({
-  displayName: 'Tabs.List',
-  Component: ({children, model, ...elemProps}: TabListProps, ref, Element) => {
-    const localModel = useModelContext(TabsModelContext, model);
-    const props = composeHooks(useRovingFocusList, useResetCursorOnBlur)(
-      localModel,
-      elemProps,
-      ref
-    );
-
-    return (
-      <TabsListContainer>
-        <TabsListInnerContainer as={Element} ref={ref} role="tablist" {...props}>
-          {children}
-        </TabsListInnerContainer>
-      </TabsListContainer>
-    );
-  },
-});

package/tabs/lib/cursor/hooks.tsx

@@ -1,122 +0,0 @@
-import React from 'react';
-import {mergeProps, useIsRTL, useMount} from '@workday/canvas-kit-react/common';
-
-import {CursorModel, getItem, getNext} 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 the list. It does not handle the tabIndex.
- *
- * @see https://www.w3.org/TR/wai-aria-practices/#kbd_roving_tabindex
- */
-export const useRovingFocusList = (model: CursorModel, elemProps = {}) => {
-  const {state, events} = model;
-  const stateRef = React.useRef(state);
-  stateRef.current = state;
-  // keep track of intentional focus changes. Without this state tracking, all changes to
-  // `state.cursorId` or `state.items` would result in focus changes. That is definitely not what
-  // we want.
-  const keyDownRef = React.useRef(false);
-  const isRTL = useIsRTL();
-
-  React.useEffect(() => {
-    if (keyDownRef.current) {
-      const item = getItem(state.cursorId, state.items);
-      item.ref.current?.focus();
-
-      keyDownRef.current = false;
-    }
-  }, [state.cursorId, state.items]);
-
-  return mergeProps(
-    {
-      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]?.();
-          }
-        });
-      },
-    },
-    elemProps
-  );
-};
-
-/**
- * Handles the roving focus behavior of a Cursor model. It should be added to the element
- * representing a list item. It does not handle the tabIndex.
- *
- * @see https://www.w3.org/TR/wai-aria-practices/#kbd_roving_tabindex
- */
-export const useRovingFocusItem = ({state}: CursorModel, elemProps = {}) => {
-  // 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);
-
-  // 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;
-
-  useMount(() => {
-    return () => {
-      if (focusRef.current && stateRef.current.items.length) {
-        // Unmount is called before state updates are flushed and we'll never get the last state
-        // update, so use `getNext` instead of `getItem`
-        const item = getNext(stateRef.current.cursorId, stateRef.current.items);
-
-        // If we call `focus` right away, there seems to be a timing issue where the focus handler
-        // never gets called. Waiting until just before a frame is rendered seems to ensure the
-        // focus handler is called correctly. Removing will make deleting multiple items fail.
-        requestAnimationFrame(() => {
-          item.ref.current?.focus();
-        });
-      }
-    };
-  });
-
-  return mergeProps(
-    {
-      onFocus(event: React.FocusEvent) {
-        focusRef.current = true;
-      },
-      onBlur(event: React.FocusEvent) {
-        focusRef.current = false;
-      },
-    },
-    elemProps
-  );
-};

package/tabs/lib/hooks.tsx

@@ -1,31 +0,0 @@
-import React from 'react';
-import {mergeProps} from '@workday/canvas-kit-react/common';
-
-import {orientationKeyMap} from './cursor/hooks';
-import {TabsModel} from './useTabsModel';
-
-/**
- * Reset the cursor to the active tab when the tab list looses focus
- */
-export const useResetCursorOnBlur = ({state, events}: TabsModel, elemProps = {}) => {
-  const programmaticFocusRef = React.useRef(false);
-  return mergeProps(
-    {
-      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.activeTab});
-        }
-      },
-    },
-    elemProps
-  );
-};

package/tabs/lib/list/hooks.tsx

@@ -1,45 +0,0 @@
-import React from 'react';
-
-import {useMountLayout} from '@workday/canvas-kit-react/common';
-
-import {ListModel} from './useListModel';
-
-/**
- * Handle list registration. Returns an identifier used to identify this item in the list
- * @param model A ListModel
- * @param localRef A RefObject that will be used to register an item
- * @param id Desired identifier for the List Model. If not provided, it will fall back to the index
- * in the list
- * @param index (Optional) Specify the position of the item if the order is expected to change
- */
-export const useRegisterItem = (
-  {state, events}: ListModel,
-  localRef: React.RefObject<any>,
-  id = '',
-  index?: number
-): string => {
-  const [localId, setLocalId] = React.useState(id);
-  const firstRender = React.useRef(true);
-
-  React.useLayoutEffect(() => {
-    if (index !== undefined && !firstRender.current) {
-      events.updateItemPosition({id: localId, index});
-    }
-    // we only care about the index changing
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [index]);
-
-  useMountLayout(() => {
-    const defaultId = state.indexRef.current;
-    const itemId = id || String(defaultId);
-    events.registerItem({item: {id: itemId, ref: localRef}, index});
-    setLocalId(itemId);
-    firstRender.current = false;
-
-    return () => {
-      events.unregisterItem({id: itemId});
-    };
-  });
-
-  return localId;
-};

package/ts3.5/dist/commonjs/tabs/lib/Tab.d.ts

@@ -1,49 +0,0 @@
-import * as React from 'react';
-import { TabsModel } from './useTabsModel';
-export interface TabProps {
-    /**
-     * Optionally pass index to tab item. This should be done if `Tabs.Item` components were created
-     * via a `Array::map` function. This index will ensure keyboard navigation works even if items are
-     * inserted out of order.
-     */
-    index?: number;
-    /**
-     * The label text of the Tab.
-     */
-    children: React.ReactNode;
-    /**
-     * The name of the tab. This name will be used in change events and for `initialTab`. Must match
-     * the `name` of the associated tab panel. If this property is not provided, it will default to a
-     * string representation of the the zero-based index of the Tab when it was initialized.
-     */
-    name?: string;
-    /**
-     * 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;
-    /**
-     * Optional id. If not set, it will inherit the ID passed to the `Tabs` component and append the
-     * index at the end. Only set this for advanced cases.
-     */
-    id?: string;
-    /**
-     * Part of the ARIA specification for tabs. This attributes links a `role=tab` to a
-     * `role=tabpanel`. This value must be the same as the associated `id` attribute of the tab panel.
-     * This is automatically set by the component and should only be used in advanced cases.
-     */
-    'aria-controls'?: string;
-    /**
-     * Part of the ARIA specification for tabs. Lets screen readers know which tab is active. This
-     * should either be `true` or `undefined` and never `false`. This is automatically set by the
-     * component and should only be used in advanced cases.
-     */
-    'aria-selected'?: boolean;
-    /**
-     * Part of the ARIA specification for tabs. The currently active tab should not have a `tabIndex` set while
-     * all inactive tabs should have a `tabIndex={-1}`
-     */
-    tabIndex?: number;
-}
-export declare const Tab: import("../../common").ElementComponent<"button", TabProps>;
-//# sourceMappingURL=Tab.d.ts.map

package/ts3.5/dist/commonjs/tabs/lib/cursor/hooks.d.ts

@@ -1,39 +0,0 @@
-import React from 'react';
-export declare const orientationKeyMap: {
-    readonly horizontal: {
-        readonly ArrowLeft: "previous";
-        readonly Left: "previous";
-        readonly ArrowRight: "next";
-        readonly Right: "next";
-        readonly Home: "first";
-        readonly End: "last";
-    };
-    readonly vertical: {
-        readonly ArrowUp: "previous";
-        readonly Up: "previous";
-        readonly ArrowDown: "next";
-        readonly Down: "next";
-        readonly Home: "first";
-        readonly End: "last";
-    };
-};
-/**
- * Handles the roving focus behavior of a Cursor model. It should be added to the element
- * representing the list. It does not handle the tabIndex.
- *
- * @see https://www.w3.org/TR/wai-aria-practices/#kbd_roving_tabindex
- */
-export declare const useRovingFocusList: (model: import("../../../common").Model<import("./useCursorModel").CursorState, import("./useCursorModel").CursorEvents>, elemProps?: {}) => {
-    onKeyDown(event: React.KeyboardEvent<Element>): void;
-};
-/**
- * Handles the roving focus behavior of a Cursor model. It should be added to the element
- * representing a list item. It does not handle the tabIndex.
- *
- * @see https://www.w3.org/TR/wai-aria-practices/#kbd_roving_tabindex
- */
-export declare const useRovingFocusItem: ({ state }: import("../../../common").Model<import("./useCursorModel").CursorState, import("./useCursorModel").CursorEvents>, elemProps?: {}) => {
-    onFocus(event: React.FocusEvent<Element>): void;
-    onBlur(event: React.FocusEvent<Element>): void;
-};
-//# sourceMappingURL=hooks.d.ts.map

package/ts3.5/dist/commonjs/tabs/lib/hooks.d.ts

@@ -1,10 +0,0 @@
-import React from 'react';
-/**
- * Reset the cursor to the active tab when the tab list looses focus
- */
-export declare const useResetCursorOnBlur: ({ state, events }: import("../../common").Model<import("./useTabsModel").TabsState, import("./useTabsModel").TabsEvents>, elemProps?: {}) => {
-    onKeyDown(event: React.KeyboardEvent<Element>): void;
-    onFocus(): void;
-    onBlur(): void;
-};
-//# sourceMappingURL=hooks.d.ts.map

package/ts3.5/dist/commonjs/tabs/lib/list/hooks.d.ts

@@ -1,11 +0,0 @@
-import React from 'react';
-/**
- * Handle list registration. Returns an identifier used to identify this item in the list
- * @param model A ListModel
- * @param localRef A RefObject that will be used to register an item
- * @param id Desired identifier for the List Model. If not provided, it will fall back to the index
- * in the list
- * @param index (Optional) Specify the position of the item if the order is expected to change
- */
-export declare const useRegisterItem: ({ state, events }: import("../../../common").Model<import("./useListModel").ListState, import("./useListModel").ListEvents>, localRef: React.RefObject<any>, id?: string, index?: number | undefined) => string;
-//# sourceMappingURL=hooks.d.ts.map

package/ts3.5/dist/es6/tabs/lib/Tab.d.ts

@@ -1,49 +0,0 @@
-import * as React from 'react';
-import { TabsModel } from './useTabsModel';
-export interface TabProps {
-    /**
-     * Optionally pass index to tab item. This should be done if `Tabs.Item` components were created
-     * via a `Array::map` function. This index will ensure keyboard navigation works even if items are
-     * inserted out of order.
-     */
-    index?: number;
-    /**
-     * The label text of the Tab.
-     */
-    children: React.ReactNode;
-    /**
-     * The name of the tab. This name will be used in change events and for `initialTab`. Must match
-     * the `name` of the associated tab panel. If this property is not provided, it will default to a
-     * string representation of the the zero-based index of the Tab when it was initialized.
-     */
-    name?: string;
-    /**
-     * 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;
-    /**
-     * Optional id. If not set, it will inherit the ID passed to the `Tabs` component and append the
-     * index at the end. Only set this for advanced cases.
-     */
-    id?: string;
-    /**
-     * Part of the ARIA specification for tabs. This attributes links a `role=tab` to a
-     * `role=tabpanel`. This value must be the same as the associated `id` attribute of the tab panel.
-     * This is automatically set by the component and should only be used in advanced cases.
-     */
-    'aria-controls'?: string;
-    /**
-     * Part of the ARIA specification for tabs. Lets screen readers know which tab is active. This
-     * should either be `true` or `undefined` and never `false`. This is automatically set by the
-     * component and should only be used in advanced cases.
-     */
-    'aria-selected'?: boolean;
-    /**
-     * Part of the ARIA specification for tabs. The currently active tab should not have a `tabIndex` set while
-     * all inactive tabs should have a `tabIndex={-1}`
-     */
-    tabIndex?: number;
-}
-export declare const Tab: import("../../common").ElementComponent<"button", TabProps>;
-//# sourceMappingURL=Tab.d.ts.map

package/ts3.5/dist/es6/tabs/lib/cursor/hooks.d.ts

@@ -1,39 +0,0 @@
-import React from 'react';
-export declare const orientationKeyMap: {
-    readonly horizontal: {
-        readonly ArrowLeft: "previous";
-        readonly Left: "previous";
-        readonly ArrowRight: "next";
-        readonly Right: "next";
-        readonly Home: "first";
-        readonly End: "last";
-    };
-    readonly vertical: {
-        readonly ArrowUp: "previous";
-        readonly Up: "previous";
-        readonly ArrowDown: "next";
-        readonly Down: "next";
-        readonly Home: "first";
-        readonly End: "last";
-    };
-};
-/**
- * Handles the roving focus behavior of a Cursor model. It should be added to the element
- * representing the list. It does not handle the tabIndex.
- *
- * @see https://www.w3.org/TR/wai-aria-practices/#kbd_roving_tabindex
- */
-export declare const useRovingFocusList: (model: import("../../../common").Model<import("./useCursorModel").CursorState, import("./useCursorModel").CursorEvents>, elemProps?: {}) => {
-    onKeyDown(event: React.KeyboardEvent<Element>): void;
-};
-/**
- * Handles the roving focus behavior of a Cursor model. It should be added to the element
- * representing a list item. It does not handle the tabIndex.
- *
- * @see https://www.w3.org/TR/wai-aria-practices/#kbd_roving_tabindex
- */
-export declare const useRovingFocusItem: ({ state }: import("../../../common").Model<import("./useCursorModel").CursorState, import("./useCursorModel").CursorEvents>, elemProps?: {}) => {
-    onFocus(event: React.FocusEvent<Element>): void;
-    onBlur(event: React.FocusEvent<Element>): void;
-};
-//# sourceMappingURL=hooks.d.ts.map

package/ts3.5/dist/es6/tabs/lib/hooks.d.ts

@@ -1,10 +0,0 @@
-import React from 'react';
-/**
- * Reset the cursor to the active tab when the tab list looses focus
- */
-export declare const useResetCursorOnBlur: ({ state, events }: import("../../common").Model<import("./useTabsModel").TabsState, import("./useTabsModel").TabsEvents>, elemProps?: {}) => {
-    onKeyDown(event: React.KeyboardEvent<Element>): void;
-    onFocus(): void;
-    onBlur(): void;
-};
-//# sourceMappingURL=hooks.d.ts.map

package/ts3.5/dist/es6/tabs/lib/list/hooks.d.ts

@@ -1,11 +0,0 @@
-import React from 'react';
-/**
- * Handle list registration. Returns an identifier used to identify this item in the list
- * @param model A ListModel
- * @param localRef A RefObject that will be used to register an item
- * @param id Desired identifier for the List Model. If not provided, it will fall back to the index
- * in the list
- * @param index (Optional) Specify the position of the item if the order is expected to change
- */
-export declare const useRegisterItem: ({ state, events }: import("../../../common").Model<import("./useListModel").ListState, import("./useListModel").ListEvents>, localRef: React.RefObject<any>, id?: string, index?: number | undefined) => string;
-//# sourceMappingURL=hooks.d.ts.map