@workday/canvas-kit-react 5.3.0 → 5.3.4

package/dist/es6/tabs/lib/overflow/useOverflowModel.js

@@ -1,111 +0,0 @@
-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);
-};
-import React from 'react';
-import { createEventMap, useEventMap } from '@workday/canvas-kit-react/common';
-import { useSelectionModel, selectionEventMap, } from '../selection';
-export var overflowEventMap = createEventMap()({
-    guards: __assign(__assign({}, selectionEventMap.guards), { shouldSetContainerWidth: 'setContainerWidth', shouldSetOverflowTargetWidth: 'setOverflowTargetWidth', shouldAddItemWidth: 'addItemWidth', shouldRemoveItemWidth: 'removeItemWidth', shouldAddHiddenKey: 'addHiddenKey', shouldRemoveHiddenKey: 'removeHiddenKey' }),
-    callbacks: __assign(__assign({}, selectionEventMap.callbacks), { onSetContainerWidth: 'setContainerWidth', onSetOverflowTargetWidth: 'setOverflowTargetWidth', onAddItemWidth: 'addItemWidth', onRemoveItemWidth: 'removeItemWidth', onAddHiddenKey: 'addHiddenKey', onRemoveHiddenKey: 'removeHiddenKey' }),
-});
-export function getHiddenIds(containerWidth, overflowTargetWidth, itemWidthCache, selectedIds) {
-    /** Allows us to prioritize showing the selected item */
-    var selectedKey;
-    /** Tally of combined item widths. We'll add items that fit until the container is full */
-    var 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 */
-    var hiddenIds = [];
-    if (selectedIds !== 'all' && selectedIds.length) {
-        selectedKey = selectedIds[0];
-    }
-    if (Object.keys(itemWidthCache).reduce(function (sum, key) { return 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;
-        }
-    }
-    for (var key in itemWidthCache) {
-        if (key !== selectedKey) {
-            itemWidth += itemWidthCache[key];
-            if (itemWidth > containerWidth) {
-                hiddenIds.push(key);
-            }
-        }
-    }
-    return hiddenIds;
-}
-export var useOverflowModel = function (config) {
-    if (config === void 0) { config = {}; }
-    var _a = React.useState(config.initialHiddenIds || []), hiddenIds = _a[0], setHiddenIds = _a[1];
-    var _b = React.useState({}), itemWidthCache = _b[0], setItemWidthCache = _b[1];
-    var _c = React.useState(0), containerWidth = _c[0], setContainerWidth = _c[1];
-    var containerWidthRef = React.useRef(0);
-    var itemWidthCacheRef = React.useRef(itemWidthCache);
-    var _d = React.useState(0), overflowTargetWidth = _d[0], setOverflowTargetWidth = _d[1];
-    var 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
-    var nonInteractiveIds = (config.nonInteractiveIds || []).concat(hiddenIds);
-    var model = useSelectionModel(__assign(__assign({}, config), { nonInteractiveIds: nonInteractiveIds }));
-    var state = __assign(__assign({}, model.state), { hiddenIds: hiddenIds,
-        itemWidthCache: itemWidthCache,
-        containerWidth: containerWidth,
-        overflowTargetWidth: overflowTargetWidth });
-    var events = useEventMap(overflowEventMap, state, config, __assign(__assign({}, model.events), { select: function (data) {
-            var selectedIds = model.selection.select(data.id, state).selectedIds;
-            var ids = getHiddenIds(containerWidthRef.current, overflowTargetWidthRef.current, itemWidthCacheRef.current, selectedIds);
-            model.events.select(data);
-            setHiddenIds(ids);
-        },
-        setContainerWidth: function (_a) {
-            var width = _a.width;
-            containerWidthRef.current = width || 0;
-            setContainerWidth(width || 0);
-            var ids = getHiddenIds(containerWidthRef.current, overflowTargetWidthRef.current, itemWidthCacheRef.current, state.selectedIds);
-            setHiddenIds(ids);
-        },
-        setOverflowTargetWidth: function (_a) {
-            var width = _a.width;
-            overflowTargetWidthRef.current = width;
-            setOverflowTargetWidth(width);
-        },
-        addItemWidth: function (_a) {
-            var _b;
-            var id = _a.id, width = _a.width;
-            itemWidthCacheRef.current = __assign(__assign({}, itemWidthCacheRef.current), (_b = {}, _b[id] = width, _b));
-            setItemWidthCache(itemWidthCacheRef.current);
-        },
-        removeItemWidth: function (_a) {
-            var id = _a.id;
-            var newCache = __assign({}, itemWidthCacheRef.current);
-            delete newCache[id];
-            itemWidthCacheRef.current = newCache;
-            setItemWidthCache(itemWidthCacheRef.current);
-        },
-        addHiddenKey: function (_a) {
-            var id = _a.id;
-            setHiddenIds(function (ids) { return ids.concat(id); });
-        },
-        removeHiddenKey: function (_a) {
-            var id = _a.id;
-            setHiddenIds(function (ids) { return ids.filter(function (key) { return key !== id; }); });
-        } }));
-    return { state: state, events: events, selection: model.selection, getId: model.getId };
-};

package/dist/es6/tabs/lib/overflow/useOverflowTarget.d.ts

@@ -1,11 +0,0 @@
-import React from 'react';
-import { OverflowModel } from './useOverflowModel';
-export declare const useOverflowTarget: <P extends {}, R>(model: OverflowModel<unknown>, elemProps?: P | undefined, ref?: ((instance: R | null) => void) | React.RefObject<R> | null | undefined) => {
-    ref: (instance: HTMLButtonElement | null) => void;
-    'aria-hidden': boolean;
-    tabIndex: number;
-    style: {};
-} & P & (R extends HTMLOrSVGElement ? {
-    ref: React.Ref<R>;
-} : {});
-//# sourceMappingURL=useOverflowTarget.d.ts.map

package/dist/es6/tabs/lib/overflow/useOverflowTarget.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useOverflowTarget.d.ts","sourceRoot":"","sources":["../../../../../tabs/lib/overflow/useOverflowTarget.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAC,aAAa,EAAC,MAAM,oBAAoB,CAAC;AAQjD,eAAO,MAAM,iBAAiB;;;;;;;OA6B7B,CAAC"}

package/dist/es6/tabs/lib/overflow/useOverflowTarget.js

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

package/dist/es6/tabs/lib/selection/index.d.ts

@@ -1,4 +0,0 @@
-export * from './useSelectionModel';
-export * from './useSelectionItem';
-export * from './useResetCursorOnBlur';
-//# sourceMappingURL=index.d.ts.map

package/dist/es6/tabs/lib/selection/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../tabs/lib/selection/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,wBAAwB,CAAC"}

package/dist/es6/tabs/lib/selection/index.js

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

package/dist/es6/tabs/lib/selection/useResetCursorOnBlur.d.ts

@@ -1,13 +0,0 @@
-import React from 'react';
-import { SelectionModel } from './useSelectionModel';
-/**
- * Reset the cursor to the selected item when the list looses focus
- */
-export declare const useResetCursorOnBlur: <P extends {}, R>(model: SelectionModel<unknown>, elemProps?: P | undefined, ref?: ((instance: R | null) => void) | React.RefObject<R> | null | undefined) => {
-    onKeyDown(event: React.KeyboardEvent<Element>): void;
-    onFocus(): void;
-    onBlur(): void;
-} & P & (R extends HTMLOrSVGElement ? {
-    ref: React.Ref<R>;
-} : {});
-//# sourceMappingURL=useResetCursorOnBlur.d.ts.map

package/dist/es6/tabs/lib/selection/useResetCursorOnBlur.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useResetCursorOnBlur.d.ts","sourceRoot":"","sources":["../../../../../tabs/lib/selection/useResetCursorOnBlur.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,EAAC,cAAc,EAAC,MAAM,qBAAqB,CAAC;AAEnD;;GAEG;AACH,eAAO,MAAM,oBAAoB;;;;;;OAkB/B,CAAC"}

package/dist/es6/tabs/lib/selection/useSelectionItem.d.ts

@@ -1,8 +0,0 @@
-import React from 'react';
-import { SelectionModel } from './useSelectionModel';
-export declare const useSelectionItem: <P extends {}, R>(model: SelectionModel<unknown>, elemProps?: P | undefined, ref?: ((instance: R | null) => void) | React.RefObject<R> | null | undefined) => {
-    onClick: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
-} & P & (R extends HTMLOrSVGElement ? {
-    ref: React.Ref<R>;
-} : {});
-//# sourceMappingURL=useSelectionItem.d.ts.map

package/dist/es6/tabs/lib/selection/useSelectionItem.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useSelectionItem.d.ts","sourceRoot":"","sources":["../../../../../tabs/lib/selection/useSelectionItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAC,cAAc,EAAC,MAAM,qBAAqB,CAAC;AAEnD,eAAO,MAAM,gBAAgB;;;;OAmB5B,CAAC"}

package/dist/es6/tabs/lib/selection/useSelectionItem.js

@@ -1,14 +0,0 @@
-import { createHook } from '@workday/canvas-kit-react/common';
-export var useSelectionItem = createHook(function (_a, _, elemProps) {
-    var state = _a.state, events = _a.events;
-    if (elemProps === void 0) { elemProps = {}; }
-    var name = elemProps.name || '';
-    var onClick = function (event) {
-        if (state.nonInteractiveIds.includes(name) ||
-            event.currentTarget.hasAttribute('aria-disabled')) {
-            return;
-        }
-        events.select({ id: name });
-    };
-    return { onClick: onClick };
-});

package/dist/es6/tabs/lib/selection/useSelectionModel.d.ts

@@ -1,62 +0,0 @@
-import { ToModelConfig } from '@workday/canvas-kit-react/common';
-import { CursorState, CursorEvents, BaseCursorModelConfig, CursorModel } from '../cursor/useCursorModel';
-export declare type Orientation = 'horizontal' | 'vertical';
-export declare type SelectionState<T = unknown> = CursorState<T> & {
-    selectedIds: 'all' | string[];
-    unselectedIds: string[];
-};
-export declare 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 declare const selectionEventMap: {
-    guards: {
-        /** Should a cursor position be set? Use only in advance use-cases */
-        shouldSelect: "select";
-        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.
-         */
-        onSelect: "select";
-        onGoTo: "goTo";
-        onRegisterItem: "registerItem";
-        onUnregisterItem: "unregisterItem";
-        onUpdateItemPosition: "updateItemPosition";
-    };
-};
-/**
- * A SelectionManager is used
- */
-export interface SelectionManager {
-    select(id: string, prevState: Pick<SelectionState, 'selectedIds' | 'unselectedIds'>): Pick<SelectionState, 'selectedIds' | 'unselectedIds'>;
-}
-export declare const isSelected: (id: string, { selectedIds, unselectedIds }: Pick<SelectionState<unknown>, "selectedIds" | "unselectedIds">) => boolean;
-export declare const singleSelectionManager: SelectionManager;
-export declare const multiSelectionManager: SelectionManager;
-export declare type BaseSelectionModelConfig<T> = BaseCursorModelConfig<T> & {
-    initialSelectedIds?: string[];
-    initialUnselectedIds?: string[];
-    selection?: SelectionManager;
-};
-export declare type SelectionModelConfig<T> = BaseSelectionModelConfig<T> & Partial<ToModelConfig<SelectionState<T>, SelectionEvents<T>, typeof selectionEventMap>>;
-export declare const useSelectionModel: <T extends unknown>(config?: SelectionModelConfig<T>) => SelectionModel<T>;
-//# sourceMappingURL=useSelectionModel.d.ts.map

package/dist/es6/tabs/lib/selection/useSelectionModel.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useSelectionModel.d.ts","sourceRoot":"","sources":["../../../../../tabs/lib/selection/useSelectionModel.tsx"],"names":[],"mappings":"AACA,OAAO,EAAiB,aAAa,EAAc,MAAM,kCAAkC,CAAC;AAC5F,OAAO,EACL,WAAW,EACX,YAAY,EACZ,qBAAqB,EAIrB,WAAW,EACZ,MAAM,0BAA0B,CAAC;AAElC,oBAAY,WAAW,GAAG,YAAY,GAAG,UAAU,CAAC;AAEpD,oBAAY,cAAc,CAAC,CAAC,GAAG,OAAO,IAAI,WAAW,CAAC,CAAC,CAAC,GAAG;IACzD,WAAW,EAAE,KAAK,GAAG,MAAM,EAAE,CAAC;IAC9B,aAAa,EAAE,MAAM,EAAE,CAAC;CACzB,CAAC;AAEF,oBAAY,eAAe,CAAC,CAAC,GAAG,OAAO,IAAI,YAAY,CAAC,CAAC,CAAC,GAAG;IAC3D,gDAAgD;IAChD,MAAM,CAAC,IAAI,EAAE;QAAC,EAAE,EAAE,MAAM,CAAA;KAAC,GAAG,IAAI,CAAC;IACjC;;OAEG;IACH,SAAS,IAAI,IAAI,CAAC;IAClB,WAAW,IAAI,IAAI,CAAC;CACrB,CAAC;AAEF,MAAM,WAAW,cAAc,CAAC,CAAC,GAAG,OAAO,CAAE,SAAQ,WAAW,CAAC,CAAC,CAAC;IACjE,KAAK,EAAE,cAAc,CAAC,CAAC,CAAC,CAAC;IACzB,MAAM,EAAE,eAAe,CAAC,CAAC,CAAC,CAAC;IAC3B,SAAS,EAAE,gBAAgB,CAAC;CAC7B;AAED,eAAO,MAAM,iBAAiB;;QAG1B,qEAAqE;;;;;;;;QAKrE;;;;WAIG;;;;;;;CAGL,CAAC;AAEH;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B,MAAM,CACJ,EAAE,EAAE,MAAM,EACV,SAAS,EAAE,IAAI,CAAC,cAAc,EAAE,aAAa,GAAG,eAAe,CAAC,GAC/D,IAAI,CAAC,cAAc,EAAE,aAAa,GAAG,eAAe,CAAC,CAAC;CAC1D;AAED,eAAO,MAAM,UAAU,yHAQtB,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,gBAIpC,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAE,gBAmBnC,CAAC;AAEF,oBAAY,wBAAwB,CAAC,CAAC,IAAI,qBAAqB,CAAC,CAAC,CAAC,GAAG;IACnE,kBAAkB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC9B,oBAAoB,CAAC,EAAE,MAAM,EAAE,CAAC;IAChC,SAAS,CAAC,EAAE,gBAAgB,CAAC;CAC9B,CAAC;AAEF,oBAAY,oBAAoB,CAAC,CAAC,IAAI,wBAAwB,CAAC,CAAC,CAAC,GAC/D,OAAO,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,OAAO,iBAAiB,CAAC,CAAC,CAAC;AAE1F,eAAO,MAAM,iBAAiB,4EAwB7B,CAAC"}

package/dist/es6/tabs/lib/selection/useSelectionModel.js

@@ -1,75 +0,0 @@
-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);
-};
-import React from 'react';
-import { createEventMap, useEventMap } from '@workday/canvas-kit-react/common';
-import { useCursorModel, cursorEventMap, } from '../cursor/useCursorModel';
-export var selectionEventMap = createEventMap()({
-    guards: __assign(__assign({}, cursorEventMap.guards), { 
-        /** Should a cursor position be set? Use only in advance use-cases */
-        shouldSelect: 'select' }),
-    callbacks: __assign(__assign({}, 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' }),
-});
-export var isSelected = function (id, _a) {
-    var selectedIds = _a.selectedIds, unselectedIds = _a.unselectedIds;
-    if (selectedIds === 'all') {
-        return !unselectedIds.includes(id);
-    }
-    return selectedIds.includes(id);
-};
-export var singleSelectionManager = {
-    select: function (id) {
-        return { selectedIds: [id], unselectedIds: [] };
-    },
-};
-export var multiSelectionManager = {
-    select: function (id, _a) {
-        var selectedIds = _a.selectedIds, unselectedIds = _a.unselectedIds;
-        if (selectedIds === 'all') {
-            // If we have all selected, start adding/removing from `unselectedIds`
-            var existingKey = unselectedIds.includes(id);
-            return {
-                selectedIds: 'all',
-                unselectedIds: existingKey
-                    ? unselectedIds.filter(function (key) { return key !== id; })
-                    : unselectedIds.concat(id),
-            };
-        }
-        else {
-            var existingKey = selectedIds.includes(id);
-            return {
-                selectedIds: existingKey ? selectedIds.filter(function (key) { return key !== id; }) : selectedIds.concat(id),
-                unselectedIds: [],
-            };
-        }
-    },
-};
-export var useSelectionModel = function (config) {
-    if (config === void 0) { config = {}; }
-    var cursor = useCursorModel(config);
-    var _a = React.useState(config.initialSelectedIds || []), selectedIds = _a[0], setSelectedIds = _a[1];
-    var _b = React.useState(config.initialUnselectedIds || []), unselectedIds = _b[0], setUnselectedIds = _b[1];
-    var selection = config.selection || singleSelectionManager;
-    var state = __assign(__assign({}, cursor.state), { selectedIds: selectedIds, unselectedIds: unselectedIds });
-    var events = useEventMap(selectionEventMap, state, config, __assign(__assign({}, cursor.events), { select: function (data) {
-            var _a = selection.select(data.id, state), selectedIds = _a.selectedIds, unselectedIds = _a.unselectedIds;
-            setSelectedIds(selectedIds);
-            setUnselectedIds(unselectedIds);
-            events.goTo({ id: data.id });
-        } }));
-    return { state: state, events: events, selection: selection, getId: cursor.getId };
-};

package/tabs/lib/TabsItem.tsx

@@ -1,250 +0,0 @@
-import * as React from 'react';
-
-import {colors, space, type, borderRadius, iconColors} from '@workday/canvas-kit-react/tokens';
-import {
-  createComponent,
-  focusRing,
-  hideMouseFocus,
-  styled,
-  StyledType,
-  useModelContext,
-  createHook,
-  composeHooks,
-  ExtractProps,
-  ellipsisStyles,
-  EllipsisText,
-  useLocalRef,
-  useMount,
-} from '@workday/canvas-kit-react/common';
-import {Box} from '@workday/canvas-kit-labs-react/common';
-import {OverflowTooltip} from '@workday/canvas-kit-react/tooltip';
-import {SystemIcon} from '@workday/canvas-kit-react/icon';
-import {useListRegisterItem} from './list';
-import {useRovingFocus} from './cursor';
-import {isSelected, useSelectionItem} from './selection';
-import {useOverflowMeasureItem} from './overflow';
-
-import {TabsModelContext} from './Tabs';
-import {TabsModel} from './useTabsModel';
-import {StackProps} from '@workday/canvas-kit-labs-react/layout';
-export interface TabsItemProps
-  extends ExtractProps<typeof Box, never>,
-    Partial<Pick<StackProps, 'spacing'>> {
-  /**
-   * 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 contents of the tab item. This will be the accessible name of the tab for screen readers.
-   * Often, this is text. Icons are also supported. Using `Tabs.Icon` will render an icon that is
-   * not visible to screen readers and therefore the icon should not be necessary to understand the
-   * tab. In most circumstances, `aria-label` should not be used.
-   *
-   * ```tsx
-   * <Tabs.Item>First Tab</Tabs.Item>
-   * <Tabs.Item hasIcon>
-   *   <Tabs.Icon icon={canvasIcon} />
-   *   <Tabs.Text>Second Tab</Tabs.Text>
-   * </Tabs.Item>
-   * ```
-   */
-  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;
-  /**
-   * Use `hasIcon={true}` when the Tab item contains an icon. This instructs the tab item to render
-   * children as a flex container to accommodate icons. You will have to use `Tabs.Item.Text` as a
-   * child element if this is set to true.
-   *
-   * @example
-   * <Tabs.Item hasIcon>
-   *   <Tabs.Item.Icon icon={someIcon} />
-   *   <Tabs.Item.Text>Tab Text</Tabs.Item.Text>
-   * </Tabs.Item>
-   */
-  hasIcon?: boolean;
-}
-
-export const StyledTabItem = styled(Box.as('button'))<
-  StyledType & {hasIcon?: boolean} & Pick<TabsItemProps, 'spacing'>
->(
-  ({theme, spacing}) => ({
-    ...type.levels.subtext.large,
-    '& > *:not(style) ~ *:not(style)': {
-      marginLeft: spacing || space.xxs,
-    },
-    fontWeight: type.properties.fontWeights.medium,
-    border: 'none',
-    backgroundColor: 'transparent',
-    flex: '0 0 auto',
-    alignItems: 'center',
-    maxWidth: '280px',
-    padding: `${space.xs} ${space.s}`,
-    height: 52,
-    boxSizing: 'border-box',
-    cursor: 'pointer',
-    color: colors.licorice300,
-    position: 'relative',
-    borderRadius: `${borderRadius.m} ${borderRadius.m} 0px 0px`,
-    transition: 'background 150ms ease, color 150ms ease',
-
-    ...hideMouseFocus,
-
-    '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
-      fill: iconColors.active,
-    },
-
-    '&:hover, &:focus': {
-      backgroundColor: colors.soap200,
-      color: colors.blackPepper400,
-      '.wd-icon-fill, .wd-icon-accent, .wd-icon-accent2': {
-        fill: iconColors.hover,
-      },
-      '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
-        fill: iconColors.active,
-      },
-    },
-
-    '&:focus': {
-      outline: `none`,
-      ...focusRing({inset: 'outer', width: 0, separation: 2}, theme),
-    },
-
-    '&:disabled, &[aria-disabled]': {
-      color: colors.licorice100,
-      '.wd-icon-fill, .wd-icon-accent, .wd-icon-accent2': {
-        fill: iconColors.disabled,
-      },
-      '&:hover': {
-        cursor: 'auto',
-        backgroundColor: `transparent`,
-        '.wd-icon-fill, .wd-icon-accent, .wd-icon-accent2': {
-          fill: iconColors.disabled,
-        },
-      },
-    },
-
-    '&[aria-selected=true]': {
-      color: theme.canvas.palette.primary.main,
-      cursor: 'default',
-      '.wd-icon-fill, .wd-icon-accent, .wd-icon-accent2': {
-        fill: theme.canvas.palette.primary.main,
-      },
-      '&:after': {
-        position: 'absolute',
-        height: space.xxxs,
-        borderRadius: `${borderRadius.m} ${borderRadius.m} 0px 0px`,
-        backgroundColor: theme.canvas.palette.primary.main,
-        bottom: 0,
-        content: `''`,
-        left: 0,
-        marginTop: '-2px',
-        width: '100%',
-      },
-      '&:hover, &:focus': {
-        backgroundColor: `transparent`,
-        color: theme.canvas.palette.primary.main,
-      },
-    },
-  }),
-  ({hasIcon}) => {
-    if (hasIcon) {
-      return {
-        display: 'flex',
-      };
-    } else {
-      return ellipsisStyles;
-    }
-  }
-);
-
-export const TabsItem = createComponent('button')({
-  displayName: 'Tabs.Item',
-  Component: ({model, children, ...elemProps}: TabsItemProps, ref, Element) => {
-    const localModel = useModelContext(TabsModelContext, model);
-
-    const props = useTabsItem(localModel, elemProps, ref);
-
-    if ('production' !== process.env.NODE_ENV) {
-      // ensure `hasIcon` is used when a child has an icon
-      // eslint-disable-next-line react-hooks/rules-of-hooks
-      const {elementRef, localRef} = useLocalRef(props.ref);
-      props.ref = elementRef;
-      // eslint-disable-next-line react-hooks/rules-of-hooks
-      useMount(() => {
-        if (localRef.current.querySelector('svg') && !props.hasIcon) {
-          console.warn(
-            `A Tabs.Item with an icon should have the 'hasIcon' prop set to true. This ensures correct rendering`
-          );
-        }
-      });
-    }
-
-    return (
-      <OverflowTooltip>
-        <StyledTabItem as={Element} {...props}>
-          {children}
-        </StyledTabItem>
-      </OverflowTooltip>
-    );
-  },
-  subComponents: {
-    Icon: SystemIcon,
-    Text: EllipsisText,
-  },
-});
-
-export const useTabsItem = composeHooks(
-  createHook(
-    (model: TabsModel, _?: React.Ref<HTMLButtonElement>, elemProps: {name?: string} = {}) => {
-      const {state} = model;
-      const name = elemProps.name || '';
-
-      const selected = !!elemProps.name && isSelected(name, state);
-
-      return {
-        type: 'button' as 'button', // keep Typescript happy
-        role: 'tab',
-        'aria-selected': selected,
-        'aria-controls': `tabpanel-${state.id}-${name}`,
-      };
-    }
-  ),
-  useSelectionItem,
-  useOverflowMeasureItem,
-  useRovingFocus,
-  useListRegisterItem
-);