@workday/canvas-kit-react 5.3.0 → 5.3.1

package/ts3.5/dist/es6/tokens/lib/depth.d.ts

@@ -1,110 +1,4 @@
-export declare type CanvasDepth = {
-    /**
-     * ### Depth Inset
-     * 	Used for inset containers
-     *
-     * @example
-     * ```ts
-     * import { depth } from '@workday/canvas-kit-react/tokens';
-     *
-     * const insetCardStyles = {
-     *   ...depth.inset,
-     * };
-     * ```
-     */
-    inset: {
-        boxShadow: 'inset 0px 0px 8px 0 rgba(82, 97, 115, 0.09)';
-    };
-    /**
-     * ### Depth 1
-     * Used for minimal offset
-     *
-     * @example
-     * ```ts
-     * import { depth } from '@workday/canvas-kit-react/tokens';
-     *
-     * const cardStyles = {
-     *   ...depth[1],
-     * };
-     * ```
-     */
-    1: {
-        boxShadow: '0px 2px 4px 0 rgba(0, 0, 0, 0.08)';
-    };
-    /**
-     * ### Depth 2
-     * Used for Cards, Popups, and Menus — our most common depth
-     *
-     * @example
-     * ```ts
-     * import { depth } from '@workday/canvas-kit-react/tokens';
-     *
-     * const cardStyles = {
-     *   ...depth[2],
-     * };
-     * ```
-     */
-    2: {
-        boxShadow: '0px 4px 8px 0 rgba(0, 0, 0, 0.1)';
-    };
-    /**
-     * ### Depth 3
-     * Used for interactive Cards on hover
-     *
-     * @example
-     * ```ts
-     * import { depth } from '@workday/canvas-kit-react/tokens';
-     *
-     * const cardStyles = {
-     *   ...depth[3],
-     * };
-     * ```
-     */
-    3: {
-        boxShadow: '0px 8px 16px 0 rgba(0, 0, 0, 0.12)';
-    };
-    /**
-     * ### Depth 4
-     * Used for Cards on white backgrounds — adds border styles for more contrast
-     *
-     * @example
-     * ```ts
-     * import { depth } from '@workday/canvas-kit-react/tokens';
-     *
-     * const cardStyles = {
-     *   ...depth[4],
-     * };
-     * ```
-     */
-    4: {
-        border: '1px solid rgba(218, 226, 230, 1)';
-        boxShadow: '0px 8px 16px 0 rgba(0, 0, 0, 0.12)';
-    };
-};
-declare type ValueOf<T> = T[keyof T];
-export declare type CanvasDepthValues = ValueOf<CanvasDepth>;
-/**
- * ### Depth Tokens
- *
- * Depth is the relative distance between surfaces in the z-axis.
- * It provides delineation, focus, and priority with shadows and layering.
- * There are five depth levels, `inset`, `1`, `2`, `3`, and `4`.
- * Most levels only apply box-shadow styles, but `depth[4]` also applies border styles.
- *
- * @example
- * ```tsx
- * import { depth } from '@workday/canvas-kit-react/tokens';
- *
- * const CustomCard = () => {
- *   return (
- *     <div css={depth[2]}>
- *       A standard-depth card
- *     </div>
- *   );
- * }
- * ```
- *
- */
-export declare const depth: CanvasDepth;
-export {};
+import depth, { CanvasDepth, CanvasDepthValue } from '@workday/canvas-depth-web';
+export { CanvasDepth, CanvasDepthValue };
+export default depth;
 //# sourceMappingURL=depth.d.ts.map

package/ts3.5/dist/es6/tooltip/lib/useTooltip.d.ts

@@ -33,7 +33,7 @@ export declare function useTooltip<T extends Element = Element>({ type, titleTex
         onMouseEnter: (event: React.SyntheticEvent<Element, Event>) => void;
         onMouseLeave: () => void;
         onMouseDown: (event: React.MouseEvent<Element, MouseEvent>) => void;
-        onFocus: (event: React.FocusEvent<Element, Element>) => void;
+        onFocus: (event: React.FocusEvent<Element>) => void;
         onBlur: () => void;
     };
     /** Mix these properties into the `Popper` component */

package/common/lib/EllipsisText.tsx

@@ -1,11 +0,0 @@
-import styled, {CSSObject} from '@emotion/styled';
-import {ElementComponent} from '..';
-
-export const ellipsisStyles: CSSObject = {
-  whiteSpace: 'nowrap',
-  textOverflow: 'ellipsis',
-  overflow: 'hidden',
-};
-
-// Recast as an `ElementComponent` due to better type support for `as` and `ref`
-export const EllipsisText = (styled('span')(ellipsisStyles) as any) as ElementComponent<'span', {}>;

package/common/lib/utils/useConstant.ts

@@ -1,18 +0,0 @@
-import {useRef} from 'react';
-
-/**
- * Get a constant value in React, only running the callback function once.  `React.useMemo` does not
- * guarantee that a function will only be run once.
- *
- * @example
- * const value = useConstant(generateUniqueId)
- */
-export function useConstant<T>(fn: () => T): T {
-  const ref = useRef<T>();
-
-  if (!ref.current) {
-    ref.current = fn();
-  }
-
-  return ref.current;
-}

package/common/lib/utils/useResizeObserver.ts

@@ -1,29 +0,0 @@
-import React from 'react';
-
-import useResizeObserverOriginal from 'use-resize-observer';
-import ResizeObserver from 'resize-observer-polyfill';
-
-if (typeof window !== 'undefined' && !(window as any).ResizeObserver) {
-  (window as any).ResizeObserver = ResizeObserver;
-}
-
-// `useResizeObserver` contains this fix in 8.0.0:
-// https://github.com/ZeeCoder/use-resize-observer/commit/bd0f3c8597bac0d853b88cf585256aac1bd4f554
-// v8.0.0 requires TS4.2. So we'll manually patch until we're ready for TS4.2+
-export const useResizeObserver: typeof useResizeObserverOriginal = (params = {}) => {
-  const widthRef = React.useRef<number | undefined>();
-  const heightRef = React.useRef<number | undefined>();
-  const onResize = params.onResize
-    ? (data: {width: number | undefined; height: number | undefined}) => {
-        if (widthRef.current !== data.width || heightRef.current !== data.height) {
-          widthRef.current = data.width;
-          heightRef.current = data.height;
-          params.onResize!(data);
-        }
-      }
-    : undefined;
-  return useResizeObserverOriginal({...params, onResize});
-};
-
-// When the dependency is moved up to v8.0.0, remove the above function and export below instead
-// export {useResizeObserver};

package/dist/commonjs/common/lib/EllipsisText.d.ts

@@ -1,5 +0,0 @@
-import { CSSObject } from '@emotion/styled';
-import { ElementComponent } from '..';
-export declare const ellipsisStyles: CSSObject;
-export declare const EllipsisText: ElementComponent<"span", {}>;
-//# sourceMappingURL=EllipsisText.d.ts.map

package/dist/commonjs/common/lib/EllipsisText.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"EllipsisText.d.ts","sourceRoot":"","sources":["../../../../common/lib/EllipsisText.tsx"],"names":[],"mappings":"AAAA,OAAe,EAAC,SAAS,EAAC,MAAM,iBAAiB,CAAC;AAClD,OAAO,EAAC,gBAAgB,EAAC,MAAM,IAAI,CAAC;AAEpC,eAAO,MAAM,cAAc,EAAE,SAI5B,CAAC;AAGF,eAAO,MAAM,YAAY,8BAA0E,CAAC"}

package/dist/commonjs/common/lib/EllipsisText.js

@@ -1,13 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var styled_1 = __importDefault(require("@emotion/styled"));
-exports.ellipsisStyles = {
-    whiteSpace: 'nowrap',
-    textOverflow: 'ellipsis',
-    overflow: 'hidden',
-};
-// Recast as an `ElementComponent` due to better type support for `as` and `ref`
-exports.EllipsisText = styled_1.default('span')(exports.ellipsisStyles);

package/dist/commonjs/common/lib/utils/useConstant.d.ts

@@ -1,9 +0,0 @@
-/**
- * Get a constant value in React, only running the callback function once.  `React.useMemo` does not
- * guarantee that a function will only be run once.
- *
- * @example
- * const value = useConstant(generateUniqueId)
- */
-export declare function useConstant<T>(fn: () => T): T;
-//# sourceMappingURL=useConstant.d.ts.map

package/dist/commonjs/common/lib/utils/useConstant.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useConstant.d.ts","sourceRoot":"","sources":["../../../../../common/lib/utils/useConstant.ts"],"names":[],"mappings":"AAEA;;;;;;GAMG;AACH,wBAAgB,WAAW,CAAC,CAAC,EAAE,EAAE,EAAE,MAAM,CAAC,GAAG,CAAC,CAQ7C"}

package/dist/commonjs/common/lib/utils/useConstant.js

@@ -1,18 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = require("react");
-/**
- * Get a constant value in React, only running the callback function once.  `React.useMemo` does not
- * guarantee that a function will only be run once.
- *
- * @example
- * const value = useConstant(generateUniqueId)
- */
-function useConstant(fn) {
-    var ref = react_1.useRef();
-    if (!ref.current) {
-        ref.current = fn();
-    }
-    return ref.current;
-}
-exports.useConstant = useConstant;

package/dist/commonjs/common/lib/utils/useResizeObserver.d.ts

@@ -1,3 +0,0 @@
-import useResizeObserverOriginal from 'use-resize-observer';
-export declare const useResizeObserver: typeof useResizeObserverOriginal;
-//# sourceMappingURL=useResizeObserver.d.ts.map

package/dist/commonjs/common/lib/utils/useResizeObserver.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useResizeObserver.d.ts","sourceRoot":"","sources":["../../../../../common/lib/utils/useResizeObserver.ts"],"names":[],"mappings":"AAEA,OAAO,yBAAyB,MAAM,qBAAqB,CAAC;AAU5D,eAAO,MAAM,iBAAiB,EAAE,OAAO,yBAatC,CAAC"}

package/dist/commonjs/common/lib/utils/useResizeObserver.js

@@ -1,42 +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 });
-var react_1 = __importDefault(require("react"));
-var use_resize_observer_1 = __importDefault(require("use-resize-observer"));
-var resize_observer_polyfill_1 = __importDefault(require("resize-observer-polyfill"));
-if (typeof window !== 'undefined' && !window.ResizeObserver) {
-    window.ResizeObserver = resize_observer_polyfill_1.default;
-}
-// `useResizeObserver` contains this fix in 8.0.0:
-// https://github.com/ZeeCoder/use-resize-observer/commit/bd0f3c8597bac0d853b88cf585256aac1bd4f554
-// v8.0.0 requires TS4.2. So we'll manually patch until we're ready for TS4.2+
-exports.useResizeObserver = function (params) {
-    if (params === void 0) { params = {}; }
-    var widthRef = react_1.default.useRef();
-    var heightRef = react_1.default.useRef();
-    var onResize = params.onResize
-        ? function (data) {
-            if (widthRef.current !== data.width || heightRef.current !== data.height) {
-                widthRef.current = data.width;
-                heightRef.current = data.height;
-                params.onResize(data);
-            }
-        }
-        : undefined;
-    return use_resize_observer_1.default(__assign(__assign({}, params), { onResize: onResize }));
-};
-// When the dependency is moved up to v8.0.0, remove the above function and export below instead
-// export {useResizeObserver};

package/dist/commonjs/tabs/lib/TabsItem.d.ts

@@ -1,107 +0,0 @@
-import * as React from 'react';
-import { StyledType, ExtractProps } from '@workday/canvas-kit-react/common';
-import { Box } from '@workday/canvas-kit-labs-react/common';
-import { SystemIcon } from '@workday/canvas-kit-react/icon';
-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 declare const StyledTabItem: import("@emotion/styled-base").StyledComponent<import("../../common").PropsWithAs<import("@workday/canvas-kit-labs-react/common/lib/utils/border").BorderShorthandStyleProps & import("@workday/canvas-kit-labs-react/common/lib/utils/border").BorderColorStyleProps & import("@workday/canvas-kit-labs-react/common/lib/utils/border").BorderRadiusStyleProps & import("@workday/canvas-kit-labs-react/common/lib/utils/border").BorderLineStyleProps & import("@workday/canvas-kit-labs-react/common/lib/utils/border").BorderWidthStyleProps & import("@workday/canvas-kit-labs-react/common/lib/utils/border").BorderLogicalStyleProps & import("@workday/canvas-kit-labs-react/common").ColorStyleProps & import("@workday/canvas-kit-labs-react/common").DepthStyleProps & import("@workday/canvas-kit-labs-react/common").FlexItemStyleProps & import("@workday/canvas-kit-labs-react/common").LayoutStyleProps & import("@workday/canvas-kit-labs-react/common/lib/utils/position").PositionStandardProps & import("@workday/canvas-kit-labs-react/common/lib/utils/position").PositionLogicalProps & import("@workday/canvas-kit-labs-react/common/lib/utils/space").SpaceStandardProps & import("@workday/canvas-kit-labs-react/common/lib/utils/space").SpaceLogicalProps, "button">, StyledType & {
-    hasIcon?: boolean | undefined;
-} & Pick<TabsItemProps, "spacing">, import("../../common").EmotionCanvasTheme>;
-export declare const TabsItem: import("../../common").ElementComponent<"button", TabsItemProps> & {
-    Icon: typeof SystemIcon;
-    Text: import("../../common").ElementComponent<"span", {}>;
-};
-export declare const useTabsItem: <P extends {}, R>(model: import("./list").ListModel<unknown>, elemProps?: P | undefined, ref?: ((instance: R | null) => void) | React.RefObject<R> | null | undefined) => {
-    type: "button";
-    role: string;
-    'aria-selected': boolean;
-    'aria-controls': string;
-} & {
-    onClick: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
-} & {
-    ref: (instance: HTMLElement | null) => void;
-    'aria-hidden': true | undefined;
-    style: {};
-} & {
-    onKeyDown(event: React.KeyboardEvent<Element>): void;
-    onFocus(): void;
-    onBlur(): void;
-    id: string;
-    tabIndex: number;
-    ref: ((instance: any) => void) | React.RefObject<any> | null | undefined;
-} & {
-    'data-name': string;
-    name: string;
-    disabled: boolean | undefined;
-} & P & (R extends HTMLOrSVGElement ? {
-    ref: React.Ref<R>;
-} : {});
-//# sourceMappingURL=TabsItem.d.ts.map

package/dist/commonjs/tabs/lib/TabsItem.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"TabsItem.d.ts","sourceRoot":"","sources":["../../../../tabs/lib/TabsItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAKL,UAAU,EAIV,YAAY,EAKb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,GAAG,EAAC,MAAM,uCAAuC,CAAC;AAE1D,OAAO,EAAC,UAAU,EAAC,MAAM,gCAAgC,CAAC;AAO1D,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AACzC,OAAO,EAAC,UAAU,EAAC,MAAM,uCAAuC,CAAC;AACjE,MAAM,WAAW,aACf,SAAQ,YAAY,CAAC,OAAO,GAAG,EAAE,KAAK,CAAC,EACrC,OAAO,CAAC,IAAI,CAAC,UAAU,EAAE,SAAS,CAAC,CAAC;IACtC;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;;;;;;;;;OAaG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;;;OAIG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;;;;;;;OAUG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,aAAa;;8EA2FzB,CAAC;AAEF,eAAO,MAAM,QAAQ;;;CAkCnB,CAAC;AAEH,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;OAoBvB,CAAC"}

package/dist/commonjs/tabs/lib/TabsItem.js

@@ -1,140 +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 __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
-    result["default"] = mod;
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var React = __importStar(require("react"));
-var tokens_1 = require("@workday/canvas-kit-react/tokens");
-var common_1 = require("@workday/canvas-kit-react/common");
-var common_2 = require("@workday/canvas-kit-labs-react/common");
-var tooltip_1 = require("@workday/canvas-kit-react/tooltip");
-var icon_1 = require("@workday/canvas-kit-react/icon");
-var list_1 = require("./list");
-var cursor_1 = require("./cursor");
-var selection_1 = require("./selection");
-var overflow_1 = require("./overflow");
-var Tabs_1 = require("./Tabs");
-exports.StyledTabItem = common_1.styled(common_2.Box.as('button'))(function (_a) {
-    var theme = _a.theme, spacing = _a.spacing;
-    return (__assign(__assign(__assign(__assign({}, tokens_1.type.levels.subtext.large), { '& > *:not(style) ~ *:not(style)': {
-            marginLeft: spacing || tokens_1.space.xxs,
-        }, fontWeight: tokens_1.type.properties.fontWeights.medium, border: 'none', backgroundColor: 'transparent', flex: '0 0 auto', alignItems: 'center', maxWidth: '280px', padding: tokens_1.space.xs + " " + tokens_1.space.s, height: 52, boxSizing: 'border-box', cursor: 'pointer', color: tokens_1.colors.licorice300, position: 'relative', borderRadius: tokens_1.borderRadius.m + " " + tokens_1.borderRadius.m + " 0px 0px", transition: 'background 150ms ease, color 150ms ease' }), common_1.hideMouseFocus), { '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
-            fill: tokens_1.iconColors.active,
-        }, '&:hover, &:focus': {
-            backgroundColor: tokens_1.colors.soap200,
-            color: tokens_1.colors.blackPepper400,
-            '.wd-icon-fill, .wd-icon-accent, .wd-icon-accent2': {
-                fill: tokens_1.iconColors.hover,
-            },
-            '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
-                fill: tokens_1.iconColors.active,
-            },
-        }, '&:focus': __assign({ outline: "none" }, common_1.focusRing({ inset: 'outer', width: 0, separation: 2 }, theme)), '&:disabled, &[aria-disabled]': {
-            color: tokens_1.colors.licorice100,
-            '.wd-icon-fill, .wd-icon-accent, .wd-icon-accent2': {
-                fill: tokens_1.iconColors.disabled,
-            },
-            '&:hover': {
-                cursor: 'auto',
-                backgroundColor: "transparent",
-                '.wd-icon-fill, .wd-icon-accent, .wd-icon-accent2': {
-                    fill: tokens_1.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: tokens_1.space.xxxs,
-                borderRadius: tokens_1.borderRadius.m + " " + tokens_1.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,
-            },
-        } }));
-}, function (_a) {
-    var hasIcon = _a.hasIcon;
-    if (hasIcon) {
-        return {
-            display: 'flex',
-        };
-    }
-    else {
-        return common_1.ellipsisStyles;
-    }
-});
-exports.TabsItem = common_1.createComponent('button')({
-    displayName: 'Tabs.Item',
-    Component: function (_a, ref, Element) {
-        var model = _a.model, children = _a.children, elemProps = __rest(_a, ["model", "children"]);
-        var localModel = common_1.useModelContext(Tabs_1.TabsModelContext, model);
-        var props = exports.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
-            var _b = common_1.useLocalRef(props.ref), elementRef = _b.elementRef, localRef_1 = _b.localRef;
-            props.ref = elementRef;
-            // eslint-disable-next-line react-hooks/rules-of-hooks
-            common_1.useMount(function () {
-                if (localRef_1.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 (React.createElement(tooltip_1.OverflowTooltip, null,
-            React.createElement(exports.StyledTabItem, __assign({ as: Element }, props), children)));
-    },
-    subComponents: {
-        Icon: icon_1.SystemIcon,
-        Text: common_1.EllipsisText,
-    },
-});
-exports.useTabsItem = common_1.composeHooks(common_1.createHook(function (model, _, elemProps) {
-    if (elemProps === void 0) { elemProps = {}; }
-    var state = model.state;
-    var name = elemProps.name || '';
-    var selected = !!elemProps.name && selection_1.isSelected(name, state);
-    return {
-        type: 'button',
-        role: 'tab',
-        'aria-selected': selected,
-        'aria-controls': "tabpanel-" + state.id + "-" + name,
-    };
-}), selection_1.useSelectionItem, overflow_1.useOverflowMeasureItem, cursor_1.useRovingFocus, list_1.useListRegisterItem);

package/dist/commonjs/tabs/lib/TabsList.d.ts

@@ -1,43 +0,0 @@
-import * as React from 'react';
-import { ExtractProps } from '@workday/canvas-kit-react/common';
-import { Stack } from '@workday/canvas-kit-labs-react/layout';
-import { TabsModel } from './useTabsModel';
-export interface TabListProps<T = unknown> extends Partial<ExtractProps<typeof Stack, never>> {
-    /**
-     * If items are passed to a `TabsModel`, the child of `Tabs.List` should be a render prop. The
-     * List will determine how and when the item will be rendered.
-     *
-     * @example
-     * <Tabs.List>
-     *   {(item) => <Tabs.Item key={item.id} name={item.name}>{item.text}</Tabs.Item>}
-     * </Tabs.List>
-     */
-    children: ((item: T) => React.ReactNode) | 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<T>;
-    overflowButton?: React.ReactNode;
-}
-export declare const TabsList: import("../../common").ElementComponent<"div", TabListProps<unknown>>;
-export declare const useTabsList: <P extends {}, R>(model: import("./selection").SelectionModel<unknown>, elemProps?: P | undefined, ref?: ((instance: R | null) => void) | React.RefObject<R> | null | undefined) => {
-    role: string;
-} & {
-    ref: (instance: HTMLElement | null) => void;
-} & {
-    onKeyDown(event: React.KeyboardEvent<Element>): void; /**
-     * If items are passed to a `TabsModel`, the child of `Tabs.List` should be a render prop. The
-     * List will determine how and when the item will be rendered.
-     *
-     * @example
-     * <Tabs.List>
-     *   {(item) => <Tabs.Item key={item.id} name={item.name}>{item.text}</Tabs.Item>}
-     * </Tabs.List>
-     */
-    onFocus(): void;
-    onBlur(): void;
-} & P & (R extends HTMLOrSVGElement ? {
-    ref: React.Ref<R>;
-} : {});
-//# sourceMappingURL=TabsList.d.ts.map

package/dist/commonjs/tabs/lib/TabsList.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"TabsList.d.ts","sourceRoot":"","sources":["../../../../tabs/lib/TabsList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAIL,YAAY,EAEb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,KAAK,EAAC,MAAM,uCAAuC,CAAC;AAM5D,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAGzC,MAAM,WAAW,YAAY,CAAC,CAAC,GAAG,OAAO,CAAE,SAAQ,OAAO,CAAC,YAAY,CAAC,OAAO,KAAK,EAAE,KAAK,CAAC,CAAC;IAC3F;;;;;;;;OAQG;IACH,QAAQ,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC,SAAS,CAAC;IAC3D;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC;IACrB,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAClC;AAED,eAAO,MAAM,QAAQ,uEAoBnB,CAAC;AAEH,eAAO,MAAM,WAAW;;;;;0DAxCtB;;;;;;;;OAQG;;;;;OAsCJ,CAAC"}

package/dist/commonjs/tabs/lib/TabsList.js

@@ -1,53 +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 __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
-    result["default"] = mod;
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var React = __importStar(require("react"));
-var tokens_1 = require("@workday/canvas-kit-react/tokens");
-var common_1 = require("@workday/canvas-kit-react/common");
-var layout_1 = require("@workday/canvas-kit-labs-react/layout");
-var overflow_1 = require("./overflow");
-var list_1 = require("./list");
-var selection_1 = require("./selection");
-var Tabs_1 = require("./Tabs");
-exports.TabsList = common_1.createComponent('div')({
-    displayName: 'Tabs.List',
-    Component: function (_a, ref, Element) {
-        var children = _a.children, model = _a.model, overflowButton = _a.overflowButton, elemProps = __rest(_a, ["children", "model", "overflowButton"]);
-        var localModel = common_1.useModelContext(Tabs_1.TabsModelContext, model);
-        var props = exports.useTabsList(localModel, elemProps, ref);
-        return (React.createElement(layout_1.Stack, __assign({ as: Element, position: "relative", borderBottom: "1px solid " + tokens_1.commonColors.divider, marginX: "m", spacing: "xxxs" }, props),
-            list_1.useRenderItems(localModel, children),
-            overflowButton));
-    },
-});
-exports.useTabsList = common_1.composeHooks(common_1.createHook(function (_) {
-    return { role: 'tablist' };
-}), overflow_1.useOverflowMeasureContainer, selection_1.useResetCursorOnBlur);