@workday/canvas-kit-preview-react 16.0.0-alpha.0474-next.0 → 16.0.0-alpha.0476-next.0

package/dist/es6/tabs/lib/useTabsModel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTabsModel.d.ts","sourceRoot":"","sources":["../../../../tabs/lib/useTabsModel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAU1B;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,YAAY;IAGrB;;;;;OAKG;;IAEH;;;OAGG;;IAEH;;;;OAIG;;IAEH;;;OAGG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAoCH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;Q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"}

package/dist/es6/tabs/lib/useTabsModel.js

@@ -0,0 +1,122 @@
+import React from 'react';
+import { defaultGetId, useListModel, useOverflowListModel, } from '@workday/canvas-kit-react/collection';
+import { createModelHook, useModalityType } from '@workday/canvas-kit-react/common';
+import { useMenuModel } from '@workday/canvas-kit-react/menu';
+/**
+ * The TabsModel extends the [Collection
+ * System](/get-started/for-developers/guides/collection-api/). Tabs have tab items and
+ * panels. Tabs can be overflowed if there isn't enough room to render and will overflow to a
+ * {@link MenuModel} sub-model.
+ *
+ * ```tsx
+ * const model = useTabsModel({
+ *   onSelect(data) {
+ *     console.log('Selected Tab', data)
+ *   }
+ * })
+ *
+ * <Tabs model={model}>{Tabs child components}</Tabs>
+ * ```
+ */
+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 be 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',
+        /**
+         * The variant of the Tabs.
+         * @default 'filled'
+         */
+        variant: 'filled',
+        menuConfig: {},
+    },
+    requiredConfig: useOverflowListModel.requiredConfig,
+    contextOverride: useOverflowListModel.Context,
+})(config => {
+    var _a;
+    const initialSelectedRef = React.useRef(config.initialTab);
+    const getId = config.getId || defaultGetId;
+    const modality = useModalityType();
+    const model = useOverflowListModel(useOverflowListModel.mergeConfig(config, {
+        shouldCalculateOverflow: modality !== 'touch',
+        orientation: config.orientation || 'horizontal',
+        onRegisterItem(data) {
+            if (!initialSelectedRef.current) {
+                initialSelectedRef.current = data.id;
+                events.select({ id: initialSelectedRef.current });
+            }
+        },
+        initialSelectedIds: config.initialTab
+            ? [config.initialTab]
+            : ((_a = config.items) === null || _a === void 0 ? void 0 : _a.length)
+                ? [getId(config.items[0])]
+                : [],
+        shouldVirtualize: false,
+    }));
+    const panels = useListModel();
+    const state = {
+        ...model.state,
+        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,
+        variant: config.variant || 'filled',
+    };
+    const overflowItems = React.useMemo(() => config.items ? config.items.filter(item => state.hiddenIds.includes(getId(item))) : undefined, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [state.hiddenIds, config.items]);
+    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,
+    };
+    const menu = useMenuModel(useMenuModel.mergeConfig(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,
+    };
+});

package/index.ts

@@ -7,4 +7,5 @@ export * from './radio';
 export * from './side-panel';
 export * from './status-indicator';
 export * from './switch';
+export * from './tabs';
 export * from './version';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-preview-react",
-  "version": "16.0.0-alpha.0474-next.0",
+  "version": "16.0.0-alpha.0476-next.0",
   "description": "Canvas Kit Preview is made up of components that have the full design and a11y review, are part of the DS ecosystem and are approved for use in product. The API's could be subject to change, but not without strong communication and migration strategies.",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -48,8 +48,8 @@
   "dependencies": {
     "@emotion/react": "^11.7.1",
     "@emotion/styled": "^11.6.0",
-    "@workday/canvas-kit-react": "^16.0.0-alpha.0474-next.0",
-    "@workday/canvas-kit-styling": "^16.0.0-alpha.0474-next.0",
+    "@workday/canvas-kit-react": "^16.0.0-alpha.0476-next.0",
+    "@workday/canvas-kit-styling": "^16.0.0-alpha.0476-next.0",
     "@workday/canvas-system-icons-web": "4.0.4",
     "@workday/canvas-tokens-web": "4.4.0-beta.6",
     "@workday/design-assets-types": "^0.3.0"
@@ -60,5 +60,5 @@
     "react-hook-form": "7.36.1",
     "yup": "^0.32.11"
   },
-  "gitHead": "8039cd1e581d4b813b3d331828942c461d30fa87"
+  "gitHead": "2d96fab9d2a9a47e06b99ae59e5f939799efa76d"
 }

package/tabs/index.ts

@@ -0,0 +1,7 @@
+export * from './lib/Tabs';
+export * from './lib/useTabsModel';
+
+export * from './lib/TabsItem';
+export * from './lib/TabsList';
+export * from './lib/TabsOverflowButton';
+export * from './lib/TabsPanel';

package/tabs/lib/Tabs.tsx

@@ -0,0 +1,135 @@
+import React from 'react';
+
+import {createContainer} from '@workday/canvas-kit-react/common';
+import {Menu} from '@workday/canvas-kit-react/menu';
+
+import {TabsItem} from './TabsItem';
+import {TabsList} from './TabsList';
+import {TabsOverflowButton} from './TabsOverflowButton';
+import {TabsPanel} from './TabsPanel';
+import {TabsPanels} from './TabsPanels';
+import {useTabsModel} from './useTabsModel';
+
+// use `T = any` here because there's no way to pass generics to a compound component...
+export interface TabsProps {
+  /**
+   * The contents of the Tabs. Can be `Tabs` children or any valid elements.
+   */
+  children: React.ReactNode;
+}
+
+/**
+ * `Tabs` is a container component that is responsible for creating a {@link TabsModel} and sharing
+ * it with its subcomponents using React context. It does not represent a real element.
+ *
+ * ```tsx
+ * <Tabs onSelect={data => console.log('Selected tab', data.id)}>
+ *   {child components}
+ * </Tabs>
+ * ```
+ *
+ * Alternatively, you may pass in a model using the hoisted model pattern.
+ *
+ * ```tsx
+ * const model = useTabsModel({
+ *   onSelect(data) {
+ *     console.log('Activated Tab', data.id);
+ *   },
+ * });
+ *
+ * <Tabs model={model}>{child components}</Tabs>
+ * ```
+ *
+ * See [Configuring a
+ * Model](/get-started/for-developers/documentation/compound-components/#configuring-a-model) for
+ * more information on model configuration.
+ */
+export const Tabs = createContainer()({
+  displayName: 'Tabs',
+  modelHook: useTabsModel,
+  subComponents: {
+    /**
+     * `Tabs.List` is a `<div role="tablist">` element. It is a container for {@link TabsItem Tabs.Item}
+     * subcomponents.
+     *
+     * ```tsx
+     * <Tabs.List>{Tabs.Items}</Tabs.List>
+     * ```
+     */
+    List: TabsList,
+    /**
+     * `Tabs.Item` is a `<button role="tab">` element. Each `Tabs.Item` is associated with a
+     * `Tabs.Panel` either by a `data-id` attribute or by the position in the list. If a `data-id`
+     * is provided, it must match the `data-id` passed to the corresponding `Tabs.Panel` component.
+     *
+     * ```tsx
+     * <Tabs.Item data-id="first">First Tab</Tabs.Item>
+     * ```
+     */
+    Item: TabsItem,
+    /**
+     * `Tabs.Panel` is a `<div role="tabpanel">` element. It is focusable by default. Each
+     * `Tabs.Panel` is controlled by a `Tabs.Item` either by a `data-id` attribute or by the
+     * position in the list. If a `data-id` is provided, it must match the `data-id` passed to the
+     * corresponding `Tabs.Item` component.
+     *
+     * ```tsx
+     * <Tabs.Panel data-id="first">
+     *   {contents of tab panel}
+     * </Tabs.Panel>
+     * ```
+     */
+    Panel: TabsPanel,
+    /**
+     * Optional subcomponent of tabs that makes dealing with dynamic tabs easier. `Tabs.Panels` only
+     * works if the model is given an array of items.
+     *
+     * ```tsx
+     * const items = [{ id: '1', name: 'first' }]
+     * <Tabs items={items}>
+     *   {tab list}
+     *   <Tabs.Panels>
+     *     {item => <Tabs.Panel>Contents of {item.name}</Tabs.Panel>}
+     *   </Tabs.Panels>
+     * </Tabs>
+     * ```
+     */
+    Panels: TabsPanels,
+    /**
+     * The overflow button of a `Tabs.List`. When a tab list overflows, this overflow button is
+     * rendered. Overflow only works when the model is given an array of `items`.
+     *
+     * ```tsx
+     * <Tabs items={items}>
+     *   <Tabs.List overflowButton={
+     *     <Tabs.OverflowButton>More</Tabs.OverflowButton>
+     *   }>
+     *     {dynamic tab items}
+     *   </Tabs.List>
+     * </Tabs>
+     * ```
+     */
+    OverflowButton: TabsOverflowButton,
+    /**
+     * The overflow menu of the Tabs component. If there isn't enough room to render all the tab
+     * items, the extra tabs that don't fit will be overflowed into this menu.
+     *
+     * ```tsx
+     * <Tabs.Menu.Popper>
+     *   <Tabs.Menu.Card>
+     *     <Tabs.Menu.List>
+     *       {(item: MyTabItem) => <Tabs.Menu.Item data-id={item.id}>
+     *         {item.text}
+     *       </Tabs.Menu.Item>}
+     *     </Tabs.Menu.List>
+     *   </Tabs.Menu.Card>
+     * </Tabs.Menu.Popper>
+     * ```
+     */
+    // We don't use shorthand here for documentation. The shorthand will give the `Tabs.Menu` the
+    // JSDoc of `Menu` instead of `Tabs.Menu`
+    Menu: Menu,
+  },
+})<TabsProps>(({children}, _, model) => {
+  return <Menu model={model.menu}>{children}</Menu>;
+});

package/tabs/lib/TabsItem.tsx

@@ -0,0 +1,274 @@
+import * as React from 'react';
+
+import {
+  isSelected,
+  useListItemRegister,
+  useListItemRovingFocus,
+  useListItemSelect,
+  useOverflowListItemMeasure,
+} from '@workday/canvas-kit-react/collection';
+import {
+  EllipsisText,
+  ExtractProps,
+  composeHooks,
+  cornerShapeStencil,
+  createComponent,
+  createElemPropsHook,
+  createSubcomponent,
+  focusRing,
+  slugify,
+  useModalityType,
+} from '@workday/canvas-kit-react/common';
+import {SystemIcon, systemIconStencil} from '@workday/canvas-kit-react/icon';
+import {Box, FlexProps, mergeStyles} from '@workday/canvas-kit-react/layout';
+import {OverflowTooltip} from '@workday/canvas-kit-react/tooltip';
+import {createStencil, px2rem} from '@workday/canvas-kit-styling';
+import {base, component, system} from '@workday/canvas-tokens-web';
+
+import {useTabsModel} from './useTabsModel';
+
+export interface TabsItemProps
+  extends ExtractProps<typeof Box, never>,
+    Partial<Pick<FlexProps, 'gap'>> {
+  /**
+   * 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>
+   *   <Tabs.Icon icon={canvasIcon} />
+   *   <Tabs.Text>Second Tab</Tabs.Text>
+   * </Tabs.Item>
+   * ```
+   */
+  children: React.ReactNode;
+  /**
+   * The identifier of the tab. This identifier will be used in change events and for `initialTab`.
+   * Must match the `data-id` 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.
+   */
+  'data-id'?: string;
+  /**
+   * 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;
+  /**
+   * The variant of the TabsItem.
+   * @default 'filled'
+   */
+  variant?: 'filled' | 'outlined';
+}
+
+const tabItemStencil = createStencil({
+  extends: cornerShapeStencil,
+  base: {
+    [cornerShapeStencil.vars.shape]: system.legacy.shape.lg,
+    ...system.legacy.type.subtext.lg,
+    fontWeight: system.fontWeight.medium,
+    backgroundColor: system.legacy.color.surface.transparent,
+    flex: '0 0 auto',
+    minWidth: 0,
+    alignItems: 'center',
+    padding: `0 ${system.legacy.padding.md}`,
+    height: system.legacy.size.md,
+    cursor: 'pointer',
+    color: system.color.fg.default,
+    position: 'relative',
+    transition: 'background 150ms ease, color 150ms ease',
+    whiteSpace: 'nowrap',
+    textOverflow: 'ellipsis',
+    overflow: 'hidden',
+    [systemIconStencil.vars.color]: 'currentColor',
+    [systemIconStencil.vars.size]: component.legacy.systemIcon.size.md,
+
+    '&:has(span)': {
+      display: 'flex',
+      gap: base.legacy.size75,
+    },
+
+    '&:hover, &.hover': {
+      color: system.color.fg.strong,
+      [systemIconStencil.vars.color]: system.color.fg.strong,
+    },
+
+    '&:focus-visible, &.focus': {
+      // focus outline for Windows high contrast theme
+      outline: `${px2rem(2)} solid transparent`,
+      backgroundColor: system.legacy.color.surface.transparent,
+      color: system.color.fg.strong,
+      [systemIconStencil.vars.color]: system.color.fg.strong,
+    },
+
+    // Using opacity token applied to container to achieve disabled state instead of 'disabled" color tokens for
+    // icon and text colors
+    '&:disabled, &.disabled, &[aria-disabled]': {
+      opacity: system.opacity.disabled,
+      '&:hover': {
+        cursor: 'auto',
+        backgroundColor: system.legacy.color.surface.transparent,
+        [systemIconStencil.vars.color]: system.color.fg.default,
+      },
+    },
+
+    '&[aria-selected=true]': {
+      color: system.color.fg.default,
+      [systemIconStencil.vars.color]: system.color.fg.default,
+      '&:hover, &.hover, &:focus-visible, &.focus': {
+        color: system.color.fg.default,
+        [systemIconStencil.vars.color]: system.color.fg.default,
+      },
+    },
+  },
+  modifiers: {
+    variant: {
+      filled: {
+        border: `${px2rem(1)} solid transparent`,
+
+        '&:hover, &.hover': {
+          backgroundColor: system.legacy.color.surface.overlay.hover.default,
+        },
+
+        '&:focus-visible, &.focus': {
+          ...focusRing({
+            width: 2,
+            separation: 2,
+            innerColor: system.legacy.color.focus.inverse,
+            outerColor: system.legacy.color.brand.focus.primary,
+          }),
+        },
+
+        '&[aria-selected=true]': {
+          backgroundColor: system.legacy.color.surface.overlay.pressed.default,
+          borderColor: system.color.border.input.default,
+          '&:hover, &.hover, &:focus-visible, &.focus': {
+            backgroundColor: system.legacy.color.surface.overlay.pressed.default,
+          },
+
+          '&:focus-visible, &.focus': {
+            borderWidth: px2rem(2),
+            marginInline: px2rem(-1),
+          },
+
+          // Non-color outline indicator for Windows high contrast theme
+          '@media (forced-colors: active)': {
+            outline: `${px2rem(2)} solid ButtonBorder`,
+          },
+        },
+      },
+      outlined: {
+        border: `${px2rem(1)} solid ${system.legacy.color.border.default}`,
+        // adding extra margin to the left and right of the tab item to avoid visual glitch when the tab is selected
+        marginInline: px2rem(1),
+
+        '&:hover, &.hover': {
+          borderColor: system.legacy.color.border.strong,
+        },
+
+        '&:focus-visible, &.focus': {
+          marginInline: px2rem(0),
+          border: `${px2rem(2)} solid ${system.legacy.color.brand.focus.primary}`,
+        },
+
+        '&[aria-selected=true]': {
+          marginInline: px2rem(0),
+          border: `${px2rem(2)} solid ${system.color.border.contrast.default}`,
+          '&:hover, &.hover, &:focus-visible, &.focus': {
+            border: `${px2rem(2)} solid ${system.color.border.contrast.default}`,
+          },
+
+          '&:focus-visible, &.focus': {
+            ...focusRing({
+              width: 2,
+              separation: 2,
+              innerColor: system.legacy.color.focus.inverse,
+              outerColor: system.legacy.color.brand.focus.primary,
+            }),
+          },
+        },
+      },
+    },
+  },
+});
+
+export const StyledTabItem = createComponent('button')<TabsItemProps>({
+  displayName: 'StyledTabItem',
+  Component: ({children, variant, ...elemProps}, ref, Element) => {
+    return (
+      <Element ref={ref} {...mergeStyles(elemProps, tabItemStencil({variant}))}>
+        {children}
+      </Element>
+    );
+  },
+});
+
+export const useTabsItem = composeHooks(
+  createElemPropsHook(useTabsModel)(({state}, _, elemProps: {'data-id'?: string} = {}) => {
+    const name = elemProps['data-id'] || '';
+
+    const selected = !!elemProps['data-id'] && isSelected(name, state);
+
+    return {
+      type: 'button' as const,
+      role: 'tab' as const,
+      'aria-selected': selected,
+      'aria-controls': slugify(`tabpanel-${state.id}-${name}`),
+    };
+  }),
+  useListItemSelect,
+  useOverflowListItemMeasure,
+  useListItemRovingFocus,
+  useListItemRegister
+);
+
+export const TabsItem = createSubcomponent('button')({
+  displayName: 'Tabs.Item',
+  modelHook: useTabsModel,
+  elemPropsHook: useTabsItem,
+  subComponents: {
+    Icon: SystemIcon,
+    Text: EllipsisText,
+  },
+})<TabsItemProps>(({children, ...elemProps}, Element, model) => {
+  const modality = useModalityType();
+
+  return (
+    <OverflowTooltip>
+      <StyledTabItem
+        as={Element}
+        maxWidth={modality === 'touch' ? undefined : 280}
+        {...elemProps}
+        variant={model.state.variant}
+      >
+        {children}
+      </StyledTabItem>
+    </OverflowTooltip>
+  );
+});