@workday/canvas-kit-react 7.0.0-alpha.89-next.16 → 7.0.0-alpha.90-next.17

package/tabs/lib/useTabsModel.tsx

@@ -1,125 +1,77 @@
 import React from 'react';
+import {createModelHook} from '@workday/canvas-kit-react/common';
 import {
-  createEventMap,
-  ToModelConfig,
-  useEventMap,
-  useUniqueId,
-} from '@workday/canvas-kit-react/common';
-import {Orientation} from './cursor';
-import {defaultGetId, ListEvents, ListState, useListModel} from './list';
-import {MenuModel, MenuModelConfig, useMenuModel} from './menu';
-import {
-  overflowEventMap,
-  OverflowEvents,
-  OverflowState,
-  OverflowModelConfig,
-  BaseOverflowModelConfig,
-  useOverflowModel,
-  OverflowModel,
-} from './overflow';
-
-export type TabsState<T> = OverflowState<T> & {
-  /** IDREF of the list. Children ids can be derived from this id */
-  id: string;
-  /**
-   * A list of panels. Uses `ListModel`
-   */
-  panels: T[];
-  /**
-   * A React.Ref of the current item index. A ref is used to allow for updating outside the normal
-   * React state cycle to ensure accurate index tracking as items are registered within the same
-   * state setting phase.
-   */
-  panelIndexRef: ListState<T>['indexRef'];
-  orientation: Orientation;
-  getId: (item: T) => string;
-};
+  defaultGetId,
+  useListModel,
+  useOverflowListModel,
+} from '@workday/canvas-kit-react/collection';
 
-export type TabsEvents<T = unknown> = OverflowEvents<T> & {
-  /**
-   * This event registers panels with state.panels. Called when a panel is mounted.
-   */
-  registerPanel: ListEvents<T>['registerItem'];
-  /**
-   * This event unregisters panels with state.panels. Called when a panel is unmounted.
-   */
-  unregisterPanel: ListEvents<T>['unregisterItem'];
-};
+import {useMenuModel} from '@workday/canvas-kit-react/menu';
 
-export interface TabsModel<T = unknown> extends OverflowModel<T> {
-  state: TabsState<T>;
-  events: TabsEvents<T>;
-  menu: MenuModel<T>;
-}
-
-export const tabEventMap = createEventMap<TabsEvents>()({
-  guards: {
-    ...overflowEventMap.guards,
-  },
-  callbacks: {
-    ...overflowEventMap.callbacks,
+export const useTabsModel = createModelHook({
+  defaultConfig: {
+    ...useOverflowListModel.defaultConfig,
+    /**
+     * Optional id for the whole `Tabs` group. The `aria-controls` of the `Tab.Item` and `id` of the
+     * `Tab.Panel` will automatically derived from this id. If not provided, a unique id will be
+     * created.
+     * @default useUniqueId()
+     */
+    id: '',
+    /**
+     * An initially selected tab. This value must match the `name` of the `Tab.Item` component. If
+     * not provided, the first tab will be selected.
+     */
+    initialTab: '',
+    /**
+     * The default Tabs sub-components only handle rendering of tabs in a horizontal orientation, but
+     * the sub-components could be replaced to handle vertical orientations.
+     * @default 'horizontal'
+     */
+    orientation: 'horizontal' as typeof useOverflowListModel.defaultConfig.orientation,
+    menuConfig: {} as Partial<typeof useMenuModel.defaultConfig>,
   },
-});
-
-export type BaseTabsModelConfig<T> = Omit<BaseOverflowModelConfig<T>, 'orientation'> & {
-  /**
-   * Optional id for the whole `Tabs` group. The `aria-controls` of the `Tab.Item` and `id` of the
-   * `Tab.Panel` will automatically derived from this id. If not provided, a unique id will be
-   * created.
-   * @default useUniqueId()
-   */
-  id?: string;
-  /**
-   * An initially selected tab. This value must match the `name` of the `Tab.Item` component. If
-   * not provided, the first tab will be selected.
-   */
-  initialTab?: string;
-  /**
-   * The default Tabs sub-components only handle rendering of tabs in a horizontal orientation, but
-   * the sub-components could be replaced to handle vertical orientations.
-   * @default 'horizontal'
-   */
-  orientation?: Orientation;
-  menuConfig?: MenuModelConfig<T>;
-};
-
-export type TabsModelConfig<T> = BaseTabsModelConfig<T> &
-  Partial<ToModelConfig<TabsState<T>, TabsEvents<T>, typeof tabEventMap>>;
-
-export const useTabsModel = <T extends unknown>(config: TabsModelConfig<T> = {}): TabsModel<T> => {
-  const id = useUniqueId(config.id);
+  requiredConfig: useOverflowListModel.requiredConfig,
+})(config => {
   const initialSelectedRef = React.useRef(config.initialTab);
   const getId = config.getId || defaultGetId;
 
-  const items = config.items; // || (emptyItems as T[]);
+  const items = config.items;
 
-  const model = useOverflowModel<T>({
-    ...(config as OverflowModelConfig<T>),
-    id: `${id}-tabs`,
-    orientation: config.orientation || 'horizontal',
-    items,
-    onRegisterItem({data, prevState}) {
-      config?.onRegisterItem?.({data, prevState: prevState as TabsState<T>});
-      if (!initialSelectedRef.current) {
-        initialSelectedRef.current = getId(data.item);
-        events.select({id: initialSelectedRef.current});
-      }
-    },
-    initialSelectedIds: config.initialTab
-      ? [config.initialTab]
-      : config.items?.length
-      ? [getId(config.items![0])]
-      : [],
-  });
+  const model = useOverflowListModel(
+    useOverflowListModel.mergeConfig(config, {
+      orientation: config.orientation || 'horizontal',
+      items,
+      onRegisterItem(data) {
+        if (!initialSelectedRef.current) {
+          initialSelectedRef.current = getId(data.item);
+          events.select({id: initialSelectedRef.current});
+        }
+      },
+      initialSelectedIds: config.initialTab
+        ? [config.initialTab]
+        : config.items?.length
+        ? [getId(config.items![0])]
+        : [],
+      shouldVirtualize: false,
+    })
+  );
 
-  const panels = useListModel<T>();
+  const panels = useListModel();
 
-  const state: TabsState<T> = {
+  const state = {
     ...model.state,
-    id,
     getId,
     orientation: config.orientation || 'horizontal',
+    /**
+     * A list of panels. Uses `ListModel`
+     */
     panels: panels.state.items,
+    /**
+     * A React.Ref of the current item index. A ref is used to allow for updating outside the normal
+     * React state cycle to ensure accurate index tracking as items are registered within the same
+     * state setting phase.
+     */
     panelIndexRef: panels.state.indexRef,
   };
 
@@ -129,33 +81,38 @@ export const useTabsModel = <T extends unknown>(config: TabsModelConfig<T> = {})
     [state.hiddenIds, items]
   );
 
-  const events = useEventMap(tabEventMap, state, config, {
+  const events = {
     ...model.events,
+    /**
+     * This event registers panels with state.panels. Called when a panel is mounted.
+     */
     registerPanel: panels.events.registerItem,
+    /**
+     * This event unregisters panels with state.panels. Called when a panel is unmounted.
+     */
     unregisterPanel: panels.events.unregisterItem,
-  } as TabsEvents<T>);
+  };
 
-  const menu = useMenuModel({
-    id: `${id}-menu`,
-    items: overflowItems,
-    nonInteractiveIds: state.nonInteractiveIds.filter(key => !state.hiddenIds.includes(key)),
-    onSelect({data, prevState}) {
-      menu.events.hide();
-      events.select(data);
-      config.menuConfig?.onSelect?.({data, prevState});
-    },
-    onShow({data, prevState}) {
-      // Always select the first item when the menu is opened
-      menu.events.first();
-      config.menuConfig?.onShow?.({data, prevState});
-    },
-  });
+  const menu = useMenuModel(
+    useMenuModel.mergeConfig(config.menuConfig as Required<typeof config.menuConfig>, {
+      id: `menu-${model.state.id}`,
+      items: overflowItems,
+      nonInteractiveIds: state.nonInteractiveIds.filter(key => !state.hiddenIds.includes(key)),
+      onSelect(data) {
+        menu.events.hide();
+        events.select(data);
+      },
+      onShow() {
+        // Always select the first item when the menu is opened
+        menu.events.goToFirst();
+      },
+    })
+  );
 
   return {
+    ...model,
     state,
     events,
     menu,
-    getId: model.getId,
-    selection: model.selection,
   };
-};
+});

package/dist/commonjs/tabs/lib/cursor/index.d.ts

@@ -1,3 +0,0 @@
-export * from './useRovingFocus';
-export * from './useCursorModel';
-//# sourceMappingURL=index.d.ts.map

package/dist/commonjs/tabs/lib/cursor/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../tabs/lib/cursor/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC"}

package/dist/commonjs/tabs/lib/cursor/index.js

@@ -1,14 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./useRovingFocus"), exports);
-__exportStar(require("./useCursorModel"), exports);

package/dist/commonjs/tabs/lib/cursor/useCursorModel.d.ts

@@ -1,73 +0,0 @@
-import { ToModelConfig } from '@workday/canvas-kit-react/common';
-import { ListState, ListEvents, BaseListModelConfig, ListModel } from '../list/useListModel';
-export declare type Orientation = 'horizontal' | 'vertical';
-export declare 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 declare 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 declare const cursorEventMap: {
-    guards: {
-        /** Should a cursor position be set? Use only in advance use-cases */
-        shouldGoTo: "goTo";
-        shouldRegisterItem: "registerItem";
-        shouldUnregisterItem: "unregisterItem";
-        shouldUpdateItemPosition: "updateItemPosition";
-    };
-    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";
-        onRegisterItem: "registerItem";
-        onUnregisterItem: "unregisterItem";
-        onUpdateItemPosition: "updateItemPosition";
-    };
-};
-export declare 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 declare type CursorModelConfig<T> = BaseCursorModelConfig<T> & Partial<ToModelConfig<CursorState<T>, CursorEvents<T>, typeof cursorEventMap>>;
-export declare const useCursorNavigation: <T extends unknown>(state: CursorState<T>, getId: (item: T) => string) => {
-    getFirst: () => T;
-    getLast: () => T;
-    getItem: (id: string) => T;
-    getNext: (id: string, tries?: number) => T;
-    getPrevious: (id: string, tries?: number) => T;
-};
-export declare const useCursorModel: <T extends unknown>(config?: CursorModelConfig<T>) => CursorModel<T>;
-//# sourceMappingURL=useCursorModel.d.ts.map

package/dist/commonjs/tabs/lib/cursor/useCursorModel.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useCursorModel.d.ts","sourceRoot":"","sources":["../../../../../tabs/lib/cursor/useCursorModel.tsx"],"names":[],"mappings":"AACA,OAAO,EAAiB,aAAa,EAAsB,MAAM,kCAAkC,CAAC;AAEpG,OAAO,EACL,SAAS,EACT,UAAU,EACV,mBAAmB,EAInB,SAAS,EACV,MAAM,sBAAsB,CAAC;AAE9B,oBAAY,WAAW,GAAG,YAAY,GAAG,UAAU,CAAC;AAEpD,oBAAY,WAAW,CAAC,CAAC,GAAG,OAAO,IAAI,SAAS,CAAC,CAAC,CAAC,GAAG;IACpD;qDACiD;IACjD,WAAW,EAAE,WAAW,CAAC;IACzB,wDAAwD;IACxD,QAAQ,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,oBAAY,YAAY,CAAC,CAAC,GAAG,OAAO,IAAI,UAAU,CAAC,CAAC,CAAC,GAAG;IACtD,oEAAoE;IACpE,IAAI,CAAC,IAAI,EAAE;QAAC,EAAE,EAAE,MAAM,CAAA;KAAC,GAAG,IAAI,CAAC;IAC/B;gCAC4B;IAC5B,IAAI,IAAI,IAAI,CAAC;IACb;uCACmC;IACnC,QAAQ,IAAI,IAAI,CAAC;IACjB,mDAAmD;IACnD,KAAK,IAAI,IAAI,CAAC;IACd,kDAAkD;IAClD,IAAI,IAAI,IAAI,CAAC;CACd,CAAC;AAEF,MAAM,WAAW,WAAW,CAAC,CAAC,GAAG,OAAO,CAAE,SAAQ,SAAS,CAAC,CAAC,CAAC;IAC5D,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC;IACtB,MAAM,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC;CACzB;AAED,eAAO,MAAM,cAAc;;QAGvB,qEAAqE;;;;;;;QAKrE;;;;WAIG;;;;;;CAGL,CAAC;AAEH,oBAAY,qBAAqB,CAAC,CAAC,IAAI,mBAAmB,CAAC,CAAC,CAAC,GAAG;IAC9D;;;;;OAKG;IACH,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B,CAAC;AAEF,oBAAY,iBAAiB,CAAC,CAAC,IAAI,qBAAqB,CAAC,CAAC,CAAC,GACzD,OAAO,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,YAAY,CAAC,CAAC,CAAC,EAAE,OAAO,cAAc,CAAC,CAAC,CAAC;AAEjF,eAAO,MAAM,mBAAmB;;;kBAiBP,MAAM;kBAMoB,MAAM;sBAAN,MAAM;CA2BxD,CAAC;AAEF,eAAO,MAAM,cAAc,sEAyC1B,CAAC"}

package/dist/commonjs/tabs/lib/cursor/useCursorModel.js

@@ -1,110 +0,0 @@
-"use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useCursorModel = exports.useCursorNavigation = exports.cursorEventMap = void 0;
-var react_1 = __importDefault(require("react"));
-var common_1 = require("@workday/canvas-kit-react/common");
-var useListModel_1 = require("../list/useListModel");
-exports.cursorEventMap = common_1.createEventMap()({
-    guards: __assign(__assign({}, useListModel_1.listEventMap.guards), { 
-        /** Should a cursor position be set? Use only in advance use-cases */
-        shouldGoTo: 'goTo' }),
-    callbacks: __assign(__assign({}, useListModel_1.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' }),
-});
-var useCursorNavigation = function (state, getId) {
-    // refs for performance so that new functions aren't created every render
-    var getIdRef = react_1.default.useRef(getId);
-    var itemsRef = react_1.default.useRef(state.items);
-    var nonInteractiveIdsRef = react_1.default.useRef(state.nonInteractiveIds);
-    itemsRef.current = state.items;
-    nonInteractiveIdsRef.current = state.nonInteractiveIds;
-    // return a memoized function to prevent recreation of functions every render
-    return react_1.default.useMemo(function () {
-        var getFirst = function () { return itemsRef.current[0]; };
-        var getLast = function () { return itemsRef.current[itemsRef.current.length - 1]; };
-        var getItem = function (id) {
-            var item = id ? itemsRef.current.find(function (item) { return getIdRef.current(item) === id; }) : getFirst(); // no id, return first item
-            common_1.assert(item, "Item not found: " + id);
-            return item;
-        };
-        var getOffsetItem = function (offset) { return function (id, tries) {
-            if (tries === void 0) { tries = itemsRef.current.length; }
-            var items = itemsRef.current;
-            var item = getItem(id);
-            var getId = getIdRef.current;
-            var currentIndex = items.findIndex(function (i) { return getId(item) === getId(i); });
-            var 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];
-        }; };
-        var getNext = getOffsetItem(1);
-        var getPrevious = getOffsetItem(-1);
-        return { getFirst: getFirst, getLast: getLast, getItem: getItem, getNext: getNext, getPrevious: getPrevious };
-    }, []);
-};
-exports.useCursorNavigation = useCursorNavigation;
-var useCursorModel = function (config) {
-    var _a;
-    if (config === void 0) { config = {}; }
-    var orientation = react_1.default.useState(config.orientation || 'vertical')[0];
-    var _b = react_1.default.useState(''), cursorId = _b[0], setCursorId = _b[1];
-    var list = useListModel_1.useListModel(config);
-    var initialCurrentRef = react_1.default.useRef(config.initialCursorId || ((_a = config.items) === null || _a === void 0 ? void 0 : _a.length) ? list.getId(config.items[0]) : '');
-    var state = __assign(__assign({}, list.state), { orientation: orientation, cursorId: cursorId });
-    var navigation = exports.useCursorNavigation(state, list.getId);
-    var events = common_1.useEventMap(exports.cursorEventMap, state, config, __assign(__assign({}, list.events), { registerItem: function (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: function (_a) {
-            var id = _a.id;
-            setCursorId(id);
-        },
-        next: function () {
-            setCursorId(list.getId(navigation.getNext(state.cursorId)));
-        },
-        previous: function () {
-            setCursorId(list.getId(navigation.getPrevious(state.cursorId)));
-        },
-        first: function () {
-            setCursorId(list.getId(navigation.getFirst()));
-        },
-        last: function () {
-            setCursorId(list.getId(navigation.getLast()));
-        } }));
-    return { state: state, events: events, getId: list.getId };
-};
-exports.useCursorModel = useCursorModel;

package/dist/commonjs/tabs/lib/cursor/useRovingFocus.d.ts

@@ -1,37 +0,0 @@
-import React from 'react';
-import { CursorModel } from './useCursorModel';
-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 a list item.
- *
- * @see https://www.w3.org/TR/wai-aria-practices/#kbd_roving_tabindex
- */
-export declare const useRovingFocus: <P extends {}, R>(model: CursorModel<unknown>, elemProps?: P | undefined, ref?: ((instance: R | null) => void) | React.RefObject<R> | null | undefined) => {
-    onKeyDown(event: React.KeyboardEvent): void;
-    onFocus(): void;
-    onBlur(): void;
-    id: string;
-    tabIndex: number;
-    ref: ((instance: any) => void) | React.RefObject<any> | null | undefined;
-} & P & (R extends HTMLOrSVGElement ? {
-    ref: React.Ref<R>;
-} : {});
-//# sourceMappingURL=useRovingFocus.d.ts.map

package/dist/commonjs/tabs/lib/cursor/useRovingFocus.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useRovingFocus.d.ts","sourceRoot":"","sources":["../../../../../tabs/lib/cursor/useRovingFocus.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAC,WAAW,EAAsB,MAAM,kBAAkB,CAAC;AAElE,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;CAiBpB,CAAC;AAWX;;;;;GAKG;AACH,eAAO,MAAM,cAAc;qBA4BJ,mBAAmB;;;;;;;;OA0BzC,CAAC"}

package/dist/commonjs/tabs/lib/cursor/useRovingFocus.js

@@ -1,90 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useRovingFocus = exports.orientationKeyMap = void 0;
-var react_1 = __importDefault(require("react"));
-var common_1 = require("@workday/canvas-kit-react/common");
-var useCursorModel_1 = require("./useCursorModel");
-exports.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',
-    },
-};
-var rightToLeftMap = {
-    ArrowLeft: 'ArrowRight',
-    Left: 'Right',
-    ArrowRight: 'ArrowLeft',
-    Right: 'Left',
-    Home: 'End',
-    End: 'Home',
-};
-/**
- * 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
- */
-exports.useRovingFocus = common_1.createHook(function (_a, ref, elemProps) {
-    var state = _a.state, events = _a.events, getId = _a.getId;
-    if (elemProps === void 0) { 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.
-    var focusRef = react_1.default.useRef(false);
-    var getIdRef = react_1.default.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
-    var stateRef = react_1.default.useRef(state);
-    stateRef.current = state;
-    var keyDownRef = react_1.default.useRef(false);
-    var isRTL = common_1.useIsRTL();
-    var navigation = useCursorModel_1.useCursorNavigation(state, getId);
-    react_1.default.useEffect(function () {
-        var _a;
-        if (keyDownRef.current) {
-            var item = navigation.getItem(state.cursorId);
-            (_a = document.querySelector("#" + state.id + "-" + getIdRef.current(item))) === null || _a === void 0 ? void 0 : _a.focus();
-            keyDownRef.current = false;
-        }
-    }, [state.cursorId, state.id, navigation]);
-    return {
-        onKeyDown: function (event) {
-            Object.keys(exports.orientationKeyMap[state.orientation]).forEach(function (key) {
-                var _a;
-                if (isRTL ? event.key === rightToLeftMap[key] : event.key === key) {
-                    var event_1 = exports.orientationKeyMap[state.orientation][key];
-                    keyDownRef.current = true;
-                    (_a = events[event_1]) === null || _a === void 0 ? void 0 : _a.call(events);
-                }
-            });
-        },
-        onFocus: function () {
-            focusRef.current = true;
-        },
-        onBlur: function () {
-            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,
-        ref: ref,
-    };
-});

package/dist/commonjs/tabs/lib/list/index.d.ts

@@ -1,4 +0,0 @@
-export * from './useListRegisterItem';
-export * from './useListModel';
-export * from './renderItem';
-//# sourceMappingURL=index.d.ts.map

package/dist/commonjs/tabs/lib/list/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../tabs/lib/list/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC"}

package/dist/commonjs/tabs/lib/list/index.js

@@ -1,15 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./useListRegisterItem"), exports);
-__exportStar(require("./useListModel"), exports);
-__exportStar(require("./renderItem"), exports);

package/dist/commonjs/tabs/lib/list/renderItem.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-import { ListModel } from './useListModel';
-export declare function useRenderItems<T>(model: ListModel<T>, children: ((item: T) => React.ReactNode) | React.ReactNode): {} | null | undefined;
-//# sourceMappingURL=renderItem.d.ts.map

package/dist/commonjs/tabs/lib/list/renderItem.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"renderItem.d.ts","sourceRoot":"","sources":["../../../../../tabs/lib/list/renderItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAEzC,wBAAgB,cAAc,CAAC,CAAC,EAC9B,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,EACnB,QAAQ,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC,SAAS,yBAY3D"}

package/dist/commonjs/tabs/lib/list/renderItem.js

@@ -1,19 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useRenderItems = void 0;
-var react_1 = __importDefault(require("react"));
-function useRenderItems(model, children) {
-    var items = react_1.default.useMemo(function () {
-        return typeof children === 'function'
-            ? model.state.items.map(function (item) { return react_1.default.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;
-}
-exports.useRenderItems = useRenderItems;