@workday/canvas-kit-preview-react 17.0.0-alpha.0631-next.0 → 17.0.0-alpha.0639-next.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (72) hide show
  1. package/dist/commonjs/color-picker/lib/ColorPicker.js +1 -1
  2. package/dist/commonjs/color-picker/lib/parts/ColorReset.js +1 -1
  3. package/dist/commonjs/color-picker/lib/parts/SwatchBook.js +1 -1
  4. package/dist/commonjs/divider/lib/Divider.js +3 -3
  5. package/dist/commonjs/loading-sparkles/lib/LoadingSparkles.js +2 -2
  6. package/dist/commonjs/multi-select/lib/MultiSelectInput.js +3 -3
  7. package/dist/commonjs/radio/lib/RadioGroup.js +3 -3
  8. package/dist/commonjs/radio/lib/RadioLabel.js +1 -1
  9. package/dist/commonjs/radio/lib/RadioText.js +3 -3
  10. package/dist/commonjs/radio/lib/StyledRadioButton.js +5 -5
  11. package/dist/commonjs/side-panel/lib/SidePanel.js +7 -7
  12. package/dist/commonjs/side-panel/lib/SidePanelToggleButton.js +11 -11
  13. package/dist/commonjs/status-indicator/lib/StatusIndicator.js +14 -14
  14. package/dist/commonjs/status-indicator/lib/StatusIndicatorLabel.js +1 -1
  15. package/dist/commonjs/switch/lib/SwitchBackground.js +1 -1
  16. package/dist/commonjs/switch/lib/SwitchCircle.js +2 -2
  17. package/dist/commonjs/switch/lib/SwitchContainer.js +1 -1
  18. package/dist/commonjs/switch/lib/SwitchIcon.js +2 -2
  19. package/dist/commonjs/switch/lib/SwitchInput.js +3 -3
  20. package/dist/commonjs/tabs/lib/TabsItem.d.ts +3 -1
  21. package/dist/commonjs/tabs/lib/TabsItem.d.ts.map +1 -1
  22. package/dist/commonjs/tabs/lib/TabsItem.js +60 -5
  23. package/dist/commonjs/tabs/lib/TabsList.d.ts +330 -2
  24. package/dist/commonjs/tabs/lib/TabsList.d.ts.map +1 -1
  25. package/dist/commonjs/tabs/lib/TabsList.js +65 -12
  26. package/dist/commonjs/tabs/lib/TabsOverflowButton.d.ts +24 -215
  27. package/dist/commonjs/tabs/lib/TabsOverflowButton.d.ts.map +1 -1
  28. package/dist/commonjs/tabs/lib/TabsOverflowButton.js +71 -6
  29. package/dist/commonjs/tabs/lib/TabsPanels.js +2 -2
  30. package/dist/commonjs/tabs/lib/useTabsModel.d.ts +17 -12
  31. package/dist/commonjs/tabs/lib/useTabsModel.d.ts.map +1 -1
  32. package/dist/commonjs/tabs/lib/useTabsModel.js +144 -5
  33. package/dist/commonjs/version/lib/version.js +1 -1
  34. package/dist/es6/color-picker/lib/ColorPicker.js +1 -1
  35. package/dist/es6/color-picker/lib/parts/ColorReset.js +1 -1
  36. package/dist/es6/color-picker/lib/parts/SwatchBook.js +1 -1
  37. package/dist/es6/divider/lib/Divider.js +3 -3
  38. package/dist/es6/loading-sparkles/lib/LoadingSparkles.js +2 -2
  39. package/dist/es6/multi-select/lib/MultiSelectInput.js +3 -3
  40. package/dist/es6/radio/lib/RadioGroup.js +3 -3
  41. package/dist/es6/radio/lib/RadioLabel.js +1 -1
  42. package/dist/es6/radio/lib/RadioText.js +3 -3
  43. package/dist/es6/radio/lib/StyledRadioButton.js +5 -5
  44. package/dist/es6/side-panel/lib/SidePanel.js +7 -7
  45. package/dist/es6/side-panel/lib/SidePanelToggleButton.js +11 -11
  46. package/dist/es6/status-indicator/lib/StatusIndicator.js +14 -14
  47. package/dist/es6/status-indicator/lib/StatusIndicatorLabel.js +1 -1
  48. package/dist/es6/switch/lib/SwitchBackground.js +1 -1
  49. package/dist/es6/switch/lib/SwitchCircle.js +2 -2
  50. package/dist/es6/switch/lib/SwitchContainer.js +1 -1
  51. package/dist/es6/switch/lib/SwitchIcon.js +2 -2
  52. package/dist/es6/switch/lib/SwitchInput.js +3 -3
  53. package/dist/es6/tabs/lib/TabsItem.d.ts +3 -1
  54. package/dist/es6/tabs/lib/TabsItem.d.ts.map +1 -1
  55. package/dist/es6/tabs/lib/TabsItem.js +38 -6
  56. package/dist/es6/tabs/lib/TabsList.d.ts +330 -2
  57. package/dist/es6/tabs/lib/TabsList.d.ts.map +1 -1
  58. package/dist/es6/tabs/lib/TabsList.js +67 -15
  59. package/dist/es6/tabs/lib/TabsOverflowButton.d.ts +24 -215
  60. package/dist/es6/tabs/lib/TabsOverflowButton.d.ts.map +1 -1
  61. package/dist/es6/tabs/lib/TabsOverflowButton.js +72 -8
  62. package/dist/es6/tabs/lib/TabsPanels.js +2 -2
  63. package/dist/es6/tabs/lib/useTabsModel.d.ts +17 -12
  64. package/dist/es6/tabs/lib/useTabsModel.d.ts.map +1 -1
  65. package/dist/es6/tabs/lib/useTabsModel.js +144 -5
  66. package/dist/es6/version/lib/version.js +1 -1
  67. package/package.json +4 -4
  68. package/tabs/lib/TabsItem.tsx +39 -0
  69. package/tabs/lib/TabsList.tsx +83 -5
  70. package/tabs/lib/TabsOverflowButton.tsx +77 -5
  71. package/tabs/lib/TabsPanels.tsx +2 -2
  72. package/tabs/lib/useTabsModel.tsx +161 -3
@@ -3,10 +3,10 @@ import { createComponent } from '@workday/canvas-kit-react/common';
3
3
  import { createStencil, handleCsProp, px2rem } from '@workday/canvas-kit-styling';
4
4
  import { system } from '@workday/canvas-tokens-web';
5
5
  export const switchCircleStencil = createStencil({
6
- base: { name: "1vnre0", styles: "box-sizing:border-box;width:var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4, 1rem));height:var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4, 1rem));border-radius:var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));border:0.0625rem solid transparent;box-shadow:var(--cnvs-sys-depth-1);transition:transform 150ms ease;pointer-events:none;background-color:var(--cnvs-sys-color-fg-inverse);transform:translateX(0);" },
6
+ base: { name: "11ysjb", styles: "box-sizing:border-box;width:var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4, 1rem));height:var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4, 1rem));border-radius:var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));border:0.0625rem solid transparent;box-shadow:var(--cnvs-sys-depth-1);transition:transform 150ms ease;pointer-events:none;background-color:var(--cnvs-sys-color-fg-inverse);transform:translateX(0);" },
7
7
  modifiers: {
8
8
  checked: {
9
- true: { name: "1p8y14", styles: "transform:translateX(0.875rem);:dir(rtl){transform:translateX(-0.875rem);}" }
9
+ true: { name: "1r5h1a", styles: "transform:translateX(0.875rem);:dir(rtl){transform:translateX(-0.875rem);}" }
10
10
  }
11
11
  }
12
12
  }, "switch-circle-f808e0");
@@ -3,7 +3,7 @@ import { createComponent } from '@workday/canvas-kit-react/common';
3
3
  import { createStencil, handleCsProp, px2rem } from '@workday/canvas-kit-styling';
4
4
  import { system } from '@workday/canvas-tokens-web';
5
5
  export const switchContainerStencil = createStencil({
6
- base: { name: "5z0mr", styles: "box-sizing:border-box;position:relative;margin-block-start:var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem));height:var(--cnvs-sys-size-xxs, var(--cnvs-sys-space-x5, 1.25rem));width:2.125rem;" }
6
+ base: { name: "1fqmas", styles: "box-sizing:border-box;position:relative;margin-block-start:var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem));height:var(--cnvs-sys-size-xxs, var(--cnvs-sys-space-x5, 1.25rem));width:2.125rem;" }
7
7
  }, "switch-container-f03251");
8
8
  export const SwitchContainer = createComponent('div')({
9
9
  displayName: 'SwitchContainer',
@@ -5,10 +5,10 @@ import { createStencil, handleCsProp, px2rem } from '@workday/canvas-kit-styling
5
5
  import { checkSmallIcon, xSmallIcon } from '@workday/canvas-system-icons-web';
6
6
  import { component, system } from '@workday/canvas-tokens-web';
7
7
  export const switchIconStencil = createStencil({
8
- base: { name: "2bmkdt", styles: "box-sizing:border-box;--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-inverse);--size-svg-bca693:var(--cnvs-component-system-icon-size-sm, 1.125rem);position:absolute;transition:transform 0ms;pointer-events:none;transform:translateX(0.875rem);:dir(rtl){transform:translateX(-0.875rem);}" },
8
+ base: { name: "1six9p", styles: "box-sizing:border-box;--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-inverse);--size-svg-bca693:var(--cnvs-component-system-icon-size-sm, 1.125rem);position:absolute;transition:transform 0ms;pointer-events:none;transform:translateX(0.875rem);:dir(rtl){transform:translateX(-0.875rem);}" },
9
9
  modifiers: {
10
10
  checked: {
11
- true: { name: "49bxjd", styles: "transform:translateX(-0.125rem);:dir(rtl){transform:translateX(0.125rem);}" }
11
+ true: { name: "3593mr", styles: "transform:translateX(-0.125rem);:dir(rtl){transform:translateX(0.125rem);}" }
12
12
  }
13
13
  }
14
14
  }, "switch-icon-8fcbbf");
@@ -3,11 +3,11 @@ import { createComponent, focusRing } from '@workday/canvas-kit-react/common';
3
3
  import { createStencil, handleCsProp, px2rem } from '@workday/canvas-kit-styling';
4
4
  import { base, system } from '@workday/canvas-tokens-web';
5
5
  export const switchInputStencil = createStencil({
6
- base: { name: "6etlj", styles: "box-sizing:border-box;display:flex;position:absolute;margin:0;height:var(--cnvs-sys-size-xs, var(--cnvs-sys-space-x6, 1.5rem));width:2.125rem;border-radius:var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));opacity:0;cursor:pointer;& ~ div:first-of-type{outline-offset:0.125rem;}&:checked, &.checked{& ~ div:first-of-type{background-color:var(--cnvs-sys-color-brand-accent-positive, var(--cnvs-brand-success-base, oklch(0.5069 0.1569 145.56 / 1)));}&:disabled, &.disabled{& ~ div:first-of-type{opacity:var(--cnvs-sys-opacity-disabled);}}}&:disabled, &.disabled{cursor:not-allowed;& ~ div:first-of-type{opacity:var(--cnvs-sys-opacity-disabled);}}&:focus-visible, &:focus, &.focus{outline:none;& ~ div:first-of-type{outline:0.0625rem solid transparent;box-shadow:0 0 0 2px var(--cnvs-sys-color-border-inverse-default, var(--cnvs-base-palette-neutral-0)), 0 0 0 4px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));}}" },
6
+ base: { name: "3t7nn4", styles: "box-sizing:border-box;display:flex;position:absolute;margin:0;height:var(--cnvs-sys-size-xs, var(--cnvs-sys-space-x6, 1.5rem));width:2.125rem;border-radius:var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));opacity:0;cursor:pointer;& ~ div:first-of-type{outline-offset:0.125rem;}&:checked, &.checked{& ~ div:first-of-type{background-color:var(--cnvs-sys-color-brand-accent-positive, var(--cnvs-brand-success-base, oklch(0.5069 0.1569 145.56 / 1)));}&:disabled, &.disabled{& ~ div:first-of-type{opacity:var(--cnvs-sys-opacity-disabled);}}}&:disabled, &.disabled{cursor:not-allowed;& ~ div:first-of-type{opacity:var(--cnvs-sys-opacity-disabled);}}&:focus-visible, &:focus, &.focus{outline:none;& ~ div:first-of-type{outline:0.0625rem solid transparent;box-shadow:0 0 0 2px var(--cnvs-sys-color-border-inverse-default, var(--cnvs-base-palette-neutral-0)), 0 0 0 4px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));}}" },
7
7
  modifiers: {
8
8
  error: {
9
- error: { name: "362fdc", styles: "& ~ div:first-of-type{box-shadow:\n 0 0 0 var(--cnvs-base-size-25, 0.125rem) var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1))),\n 0 0 0 var(--cnvs-base-size-50, 0.25rem) var(--cnvs-sys-color-brand-focus-critical, var(--cnvs-brand-common-error-inner, oklch(0.6495 0.2369 30.04 / 1))),\n 0 0 0 0.3125rem transparent;}" },
10
- caution: { name: "10t8qt", styles: "& ~ div:first-of-type{box-shadow:\n 0 0 0 var(--cnvs-base-size-25, 0.125rem) var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1))),\n 0 0 0 var(--cnvs-base-size-50, 0.25rem) var(--cnvs-sys-color-brand-focus-caution-inner, var(--cnvs-brand-common-alert-inner, oklch(0.7909 0.1711 70.15 / 1))),\n 0 0 0 0.3125rem var(--cnvs-sys-color-brand-border-caution, var(--cnvs-brand-alert-dark, oklch(0.6601 0.1537 60.7 / 1)));}" }
9
+ error: { name: "3jn64x", styles: "& ~ div:first-of-type{box-shadow:\n 0 0 0 var(--cnvs-base-size-25, 0.125rem) var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1))),\n 0 0 0 var(--cnvs-base-size-50, 0.25rem) var(--cnvs-sys-color-brand-focus-critical, var(--cnvs-brand-common-error-inner, oklch(0.6495 0.2369 30.04 / 1))),\n 0 0 0 0.3125rem transparent;}" },
10
+ caution: { name: "4ektvq", styles: "& ~ div:first-of-type{box-shadow:\n 0 0 0 var(--cnvs-base-size-25, 0.125rem) var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1))),\n 0 0 0 var(--cnvs-base-size-50, 0.25rem) var(--cnvs-sys-color-brand-focus-caution-inner, var(--cnvs-brand-common-alert-inner, oklch(0.7909 0.1711 70.15 / 1))),\n 0 0 0 0.3125rem var(--cnvs-sys-color-brand-border-caution, var(--cnvs-brand-alert-dark, oklch(0.6601 0.1537 60.7 / 1)));}" }
11
11
  }
12
12
  }
13
13
  }, "switch-input-cce660");
@@ -382,6 +382,8 @@ export declare const useTabsItem: import("@workday/canvas-kit-react/common").Beh
382
382
  readonly 'aria-hidden': true | undefined;
383
383
  readonly style: {};
384
384
  readonly inert: boolean | "" | undefined;
385
+ }, import("@workday/canvas-kit-react/common").MergeProps<{
386
+ readonly onKeyDown: (event: React.KeyboardEvent<HTMLElement>) => null | undefined;
385
387
  }, import("@workday/canvas-kit-react/common").MergeProps<{
386
388
  readonly onKeyDown: (event: React.KeyboardEvent<HTMLElement>) => void;
387
389
  readonly onClick: () => void;
@@ -396,7 +398,7 @@ export declare const useTabsItem: import("@workday/canvas-kit-react/common").Beh
396
398
  readonly 'data-index': number | undefined;
397
399
  readonly style: React.CSSProperties;
398
400
  readonly id: string;
399
- }, import("@workday/canvas-kit-react/common").MergeProps<{}, {}>>>>>>>>;
401
+ }, {}>>>>>>>>;
400
402
  export declare const TabsItem: import("@workday/canvas-kit-react/common").ElementComponentM<"button", TabsItemProps, {
401
403
  state: {
402
404
  getId: (item: any) => string;
@@ -1 +1 @@
1
- {"version":3,"file":"TabsItem.d.ts","sourceRoot":"","sources":["../../../../tabs/lib/TabsItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B,OAAO,EAEL,YAAY,EASb,MAAM,kCAAkC,CAAC;AAE1C,OAAO,EAAC,GAAG,EAAE,SAAS,EAAc,MAAM,kCAAkC,CAAC;AAO7E,MAAM,WAAW,aACf,SAAQ,YAAY,CAAC,OAAO,GAAG,EAAE,KAAK,CAAC,EACrC,OAAO,CAAC,IAAI,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC;IACjC;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;;;;;;;;;OAaG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;;;OAKG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;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;;;OAGG;IACH,OAAO,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAC;CACjC;AAqID,eAAO,MAAM,aAAa,sFASxB,CAAC;AAEH,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uEAiBvB,CAAC;AAEF,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuBnB,CAAC"}
1
+ {"version":3,"file":"TabsItem.d.ts","sourceRoot":"","sources":["../../../../tabs/lib/TabsItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAU/B,OAAO,EAEL,YAAY,EASb,MAAM,kCAAkC,CAAC;AAE1C,OAAO,EAAC,GAAG,EAAE,SAAS,EAAc,MAAM,kCAAkC,CAAC;AAO7E,MAAM,WAAW,aACf,SAAQ,YAAY,CAAC,OAAO,GAAG,EAAE,KAAK,CAAC,EACrC,OAAO,CAAC,IAAI,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC;IACjC;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;;;;;;;;;OAaG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;;;OAKG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;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;;;OAGG;IACH,OAAO,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAC;CACjC;AAqID,eAAO,MAAM,aAAa,sFASxB,CAAC;AAuCH,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gCAhBH,mBAAmB,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;aAkCpD,CAAC;AAEF,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuBnB,CAAC"}
@@ -1,5 +1,6 @@
1
1
  import { jsx as _jsx } from "react/jsx-runtime";
2
- import { isSelected, useListItemRegister, useListItemRovingFocus, useListItemSelect, useOverflowListItemMeasure, } from '@workday/canvas-kit-react/collection';
2
+ import * as React from 'react';
3
+ import { ListRenderItemContext, isSelected, useListItemRegister, useListItemRovingFocus, useListItemSelect, useOverflowListItemMeasure, } from '@workday/canvas-kit-react/collection';
3
4
  import { EllipsisText, composeHooks, cornerShapeStencil, createComponent, createElemPropsHook, createSubcomponent, focusRing, slugify, useModalityType, } from '@workday/canvas-kit-react/common';
4
5
  import { SystemIcon, systemIconStencil } from '@workday/canvas-kit-react/icon';
5
6
  import { mergeStyles } from '@workday/canvas-kit-react/layout';
@@ -9,20 +10,51 @@ import { base, component, system } from '@workday/canvas-tokens-web';
9
10
  import { useTabsModel } from './useTabsModel';
10
11
  const tabItemStencil = createStencil({
11
12
  extends: cornerShapeStencil,
12
- base: { name: "1gms67", styles: "box-sizing:border-box;--shape-corner-shape-ccab68:var(--cnvs-sys-shape-lg, 0.75rem);font-family:var(--cnvs-sys-font-family-default, \"Roboto\");font-weight:var(--cnvs-sys-font-weight-medium);line-height:var(--cnvs-sys-line-height-subtext-lg, 1.25rem);font-size:var(--cnvs-sys-font-size-subtext-lg, 0.875rem);letter-spacing:var(--cnvs-sys-letter-spacing-subtext-lg, 0.015rem);background-color:var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));flex:0 0 auto;min-width:0;align-items:center;padding:0 var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4, 1rem));height:var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem));cursor:pointer;color:var(--cnvs-sys-color-fg-default);position:relative;transition:background 150ms ease, color 150ms ease;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;--color-system-icon-c9acc3:currentColor;--size-svg-bca693:var(--cnvs-component-system-icon-size-md, var(--cnvs-sys-space-x5, 1.25rem));&:has(span){display:flex;gap:var(--cnvs-base-size-75, 0.375rem);}&:hover, &.hover{color:var(--cnvs-sys-color-fg-strong);--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-strong);}&:focus-visible, &.focus{outline:0.125rem solid transparent;background-color:var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));color:var(--cnvs-sys-color-fg-strong);--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-strong);}&:disabled, &.disabled, &[aria-disabled]{opacity:var(--cnvs-sys-opacity-disabled);&:hover{cursor:auto;background-color:var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-default);}}&[aria-selected=true]{color:var(--cnvs-sys-color-fg-default);--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-default);&:hover, &.hover, &:focus-visible, &.focus{color:var(--cnvs-sys-color-fg-default);--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-default);}}" },
13
+ base: { name: "3ltuqx", styles: "box-sizing:border-box;--shape-corner-shape-ccab68:var(--cnvs-sys-shape-lg, 0.75rem);font-family:var(--cnvs-sys-font-family-default, \"Roboto\");font-weight:var(--cnvs-sys-font-weight-medium);line-height:var(--cnvs-sys-line-height-subtext-lg, 1.25rem);font-size:var(--cnvs-sys-font-size-subtext-lg, 0.875rem);letter-spacing:var(--cnvs-sys-letter-spacing-subtext-lg, 0.015rem);background-color:var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));flex:0 0 auto;min-width:0;align-items:center;padding:0 var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4, 1rem));height:var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem));cursor:pointer;color:var(--cnvs-sys-color-fg-default);position:relative;transition:background 150ms ease, color 150ms ease;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;--color-system-icon-c9acc3:currentColor;--size-svg-bca693:var(--cnvs-component-system-icon-size-md, var(--cnvs-sys-space-x5, 1.25rem));&:has(span){display:flex;gap:var(--cnvs-base-size-75, 0.375rem);}&:hover, &.hover{color:var(--cnvs-sys-color-fg-strong);--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-strong);}&:focus-visible, &.focus{outline:0.125rem solid transparent;background-color:var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));color:var(--cnvs-sys-color-fg-strong);--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-strong);}&:disabled, &.disabled, &[aria-disabled]{opacity:var(--cnvs-sys-opacity-disabled);&:hover{cursor:auto;background-color:var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-default);}}&[aria-selected=true]{color:var(--cnvs-sys-color-fg-default);--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-default);&:hover, &.hover, &:focus-visible, &.focus{color:var(--cnvs-sys-color-fg-default);--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-default);}}" },
13
14
  modifiers: {
14
15
  variant: {
15
- filled: { name: "2q70v4", styles: "border:0.0625rem solid transparent;&:hover, &.hover{background-color:var(--cnvs-sys-color-surface-overlay-hover-default, oklch(0.3343 0.0951 253.3 / 0.05));}&:focus-visible, &.focus{box-shadow:0 0 0 2px var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1))), 0 0 0 4px var(--cnvs-sys-color-brand-focus-primary, var(--cnvs-brand-common-focus-outline, oklch(0.6023 0.2032 255.68 / 1)));}&[aria-selected=true]{background-color:var(--cnvs-sys-color-surface-overlay-pressed-default, oklch(0.3337 0.0688 250.79 / 0.09));border-color:var(--cnvs-sys-color-border-input-default);&:hover, &.hover, &:focus-visible, &.focus{background-color:var(--cnvs-sys-color-surface-overlay-pressed-default, oklch(0.3337 0.0688 250.79 / 0.09));}&:focus-visible, &.focus{border-width:0.125rem;margin-inline:-0.0625rem;}@media (forced-colors: active){outline:0.125rem solid ButtonBorder;}}" },
16
- outlined: { name: "mer0y", styles: "border:0.0625rem solid var(--cnvs-sys-color-border-default, var(--cnvs-sys-color-border-divider, oklch(0.3057 0.079 256.22 / 0.13)));margin-inline:0.0625rem;&:hover, &.hover{border-color:var(--cnvs-sys-color-border-strong, var(--cnvs-sys-color-border-container, oklch(0.2442 0.0693 257.66 / 0.21)));}&:focus-visible, &.focus{margin-inline:0rem;border:0.125rem solid var(--cnvs-sys-color-brand-focus-primary, var(--cnvs-brand-common-focus-outline, oklch(0.6023 0.2032 255.68 / 1)));}&[aria-selected=true]{margin-inline:0rem;border:0.125rem solid var(--cnvs-sys-color-border-contrast-default);&:hover, &.hover, &:focus-visible, &.focus{border:0.125rem solid var(--cnvs-sys-color-border-contrast-default);}&:focus-visible, &.focus{box-shadow:0 0 0 2px var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1))), 0 0 0 4px var(--cnvs-sys-color-brand-focus-primary, var(--cnvs-brand-common-focus-outline, oklch(0.6023 0.2032 255.68 / 1)));}}" }
16
+ filled: { name: "436ihx", styles: "border:0.0625rem solid transparent;&:hover, &.hover{background-color:var(--cnvs-sys-color-surface-overlay-hover-default, oklch(0.3343 0.0951 253.3 / 0.05));}&:focus-visible, &.focus{box-shadow:0 0 0 2px var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1))), 0 0 0 4px var(--cnvs-sys-color-brand-focus-primary, var(--cnvs-brand-common-focus-outline, oklch(0.6023 0.2032 255.68 / 1)));}&[aria-selected=true]{background-color:var(--cnvs-sys-color-surface-overlay-pressed-default, oklch(0.3337 0.0688 250.79 / 0.09));border-color:var(--cnvs-sys-color-border-input-default);&:hover, &.hover, &:focus-visible, &.focus{background-color:var(--cnvs-sys-color-surface-overlay-pressed-default, oklch(0.3337 0.0688 250.79 / 0.09));}&:focus-visible, &.focus{border-width:0.125rem;margin-inline:-0.0625rem;}@media (forced-colors: active){outline:0.125rem solid ButtonBorder;}}" },
17
+ outlined: { name: "1qy9us", styles: "border:0.0625rem solid var(--cnvs-sys-color-border-default, var(--cnvs-sys-color-border-divider, oklch(0.3057 0.079 256.22 / 0.13)));margin-inline:0.0625rem;&:hover, &.hover{border-color:var(--cnvs-sys-color-border-strong, var(--cnvs-sys-color-border-container, oklch(0.2442 0.0693 257.66 / 0.21)));}&:focus-visible, &.focus{margin-inline:0rem;border:0.125rem solid var(--cnvs-sys-color-brand-focus-primary, var(--cnvs-brand-common-focus-outline, oklch(0.6023 0.2032 255.68 / 1)));}&[aria-selected=true]{margin-inline:0rem;border:0.125rem solid var(--cnvs-sys-color-border-contrast-default);&:hover, &.hover, &:focus-visible, &.focus{border:0.125rem solid var(--cnvs-sys-color-border-contrast-default);}&:focus-visible, &.focus{box-shadow:0 0 0 2px var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1))), 0 0 0 4px var(--cnvs-sys-color-brand-focus-primary, var(--cnvs-brand-common-focus-outline, oklch(0.6023 0.2032 255.68 / 1)));}}" }
17
18
  }
18
19
  }
19
- }, "tab-item-be6a86");
20
+ }, "tab-item-a5f594");
20
21
  export const StyledTabItem = createComponent('button')({
21
22
  displayName: 'StyledTabItem',
22
23
  Component: ({ children, variant, ...elemProps }, ref, Element) => {
23
24
  return (_jsx(Element, { ref: ref, ...mergeStyles(elemProps, tabItemStencil({ variant })), children: children }));
24
25
  },
25
26
  });
27
+ /**
28
+ * When the selected tab receives ArrowDown, move focus to its tab panel.
29
+ * Returning `null` is the mergeCallback sentinel that stops later-merged
30
+ * `onKeyDown` handlers (including roving focus) from also handling this key.
31
+ * This hook must be composed before `useListItemRovingFocus` so it runs after
32
+ * that hook and its return value can skip the roving handler.
33
+ * Tabs.OverflowButton does not use this hook.
34
+ *
35
+ * ArrowDown is only intercepted in horizontal orientation. In a vertical tablist,
36
+ * ArrowDown is the roving-navigation key and must reach `useListItemRovingFocus`.
37
+ */
38
+ const useTabsItemFocusPanelOnArrowDown = createElemPropsHook(useTabsModel)(({ state }, _, elemProps = {}) => {
39
+ const { item } = React.useContext(ListRenderItemContext);
40
+ const name = elemProps['data-id'] || (item === null || item === void 0 ? void 0 : item.id) || '';
41
+ const selected = !!name && isSelected(name, state);
42
+ return {
43
+ onKeyDown(event) {
44
+ if (!selected || state.orientation !== 'horizontal' || event.key !== 'ArrowDown') {
45
+ return;
46
+ }
47
+ event.preventDefault();
48
+ const panelId = slugify(`tabpanel-${state.id}-${name}`);
49
+ const panel = document.getElementById(panelId);
50
+ if (panel) {
51
+ panel.focus();
52
+ }
53
+ // mergeCallback: `null` prevents the roving-focus onKeyDown from running.
54
+ return null;
55
+ },
56
+ };
57
+ });
26
58
  export const useTabsItem = composeHooks(createElemPropsHook(useTabsModel)(({ state }, _, elemProps = {}) => {
27
59
  const name = elemProps['data-id'] || '';
28
60
  const selected = !!elemProps['data-id'] && isSelected(name, state);
@@ -32,7 +64,7 @@ export const useTabsItem = composeHooks(createElemPropsHook(useTabsModel)(({ sta
32
64
  'aria-selected': selected,
33
65
  'aria-controls': slugify(`tabpanel-${state.id}-${name}`),
34
66
  };
35
- }), useListItemSelect, useOverflowListItemMeasure, useListItemRovingFocus, useListItemRegister);
67
+ }), useListItemSelect, useOverflowListItemMeasure, useTabsItemFocusPanelOnArrowDown, useListItemRovingFocus, useListItemRegister);
36
68
  export const TabsItem = createSubcomponent('button')({
37
69
  displayName: 'Tabs.Item',
38
70
  modelHook: useTabsModel,
@@ -1,6 +1,7 @@
1
1
  import * as React from 'react';
2
- import { ExtractProps } from '@workday/canvas-kit-react/common';
2
+ import { ExtractProps, Generic } from '@workday/canvas-kit-react/common';
3
3
  import { Flex } from '@workday/canvas-kit-react/layout';
4
+ import { useTabsModel } from './useTabsModel';
4
5
  export interface TabListProps<T = any> extends Omit<ExtractProps<typeof Flex, never>, 'children'> {
5
6
  /**
6
7
  * If items are passed to a `TabsModel`, the child of `Tabs.List` should be a render prop. The
@@ -329,6 +330,327 @@ export declare const useTabOverflowScroll: import("@workday/canvas-kit-react/com
329
330
  readonly ref: (instance: HTMLDivElement | null) => void;
330
331
  readonly onScroll: (event: React.UIEvent<HTMLDivElement>) => void;
331
332
  }>;
333
+ /**
334
+ * Resets the tablist cursor on blur to the selected tab when visible, or to the first visible
335
+ * item (e.g. the overflow button) when the selected tab is hidden. This ensures the roving
336
+ * tabindex always lands on a focusable element when only the "More" button is visible.
337
+ */
338
+ export declare const useTabsListResetCursorOnBlur: import("@workday/canvas-kit-react/common").BehaviorHook<{
339
+ state: {
340
+ getId: (item: any) => string;
341
+ orientation: import("@workday/canvas-kit-react/collection").Orientation;
342
+ panels: import("@workday/canvas-kit-react/collection").Item<any>[];
343
+ panelIndexRef: React.MutableRefObject<number>;
344
+ variant: "filled" | "outlined";
345
+ hiddenIds: string[];
346
+ itemSizeCache: Record<string, number>;
347
+ itemWidthCache: Record<string, number>;
348
+ containerSize: number;
349
+ containerWidth: number;
350
+ containerGap: number;
351
+ overflowTargetWidth: number;
352
+ selectedIds: string[] | "all";
353
+ unselectedIds: string[];
354
+ cursorId: string | string[];
355
+ columnCount: number;
356
+ pageSizeRef: React.MutableRefObject<number>;
357
+ cursorIndexRef: {
358
+ readonly current: number;
359
+ };
360
+ UNSTABLE_virtual: import("@tanstack/virtual-core").Virtualizer<HTMLDivElement, Element>;
361
+ UNSTABLE_defaultItemHeight: number;
362
+ containerRef: React.RefObject<HTMLDivElement>;
363
+ id: string;
364
+ indexRef: React.MutableRefObject<number>;
365
+ nonInteractiveIds: string[];
366
+ isVirtualized: boolean;
367
+ items: import("@workday/canvas-kit-react/collection").Item<any>[];
368
+ };
369
+ events: {
370
+ registerPanel: (data: {
371
+ id: string;
372
+ textValue: string;
373
+ }) => void;
374
+ unregisterPanel: (data: {
375
+ id: string;
376
+ }) => void;
377
+ select(data: {
378
+ id: string;
379
+ }): void;
380
+ setContainerSize(data: {
381
+ width?: number | undefined;
382
+ height?: number | undefined;
383
+ }): void;
384
+ setContainerWidth(data: {
385
+ width?: number | undefined;
386
+ }): void;
387
+ setContainerGap(data: {
388
+ size: number;
389
+ }): void;
390
+ setOverflowTargetSize(data: {
391
+ width: number;
392
+ height: number;
393
+ }): void;
394
+ setOverflowTargetWidth(data: {
395
+ width: number;
396
+ }): void;
397
+ addItemWidth(data: {
398
+ id: string;
399
+ width: number;
400
+ }): void;
401
+ addItemSize(data: {
402
+ id: string;
403
+ width: number;
404
+ height: number;
405
+ }): void;
406
+ removeItemSize(data: {
407
+ id: string;
408
+ }): void;
409
+ removeItemWidth(data: {
410
+ id: string;
411
+ }): void;
412
+ addHiddenKey(data: {
413
+ id: string;
414
+ }): void;
415
+ removeHiddenKey(data: {
416
+ id: string;
417
+ }): void;
418
+ selectAll(): void;
419
+ unselectAll(): void;
420
+ setSelectedIds(ids: string[] | "all"): void;
421
+ remove(data: {
422
+ id: string;
423
+ nextId?: string | undefined;
424
+ event?: Event | React.SyntheticEvent<Element, Event> | undefined;
425
+ }): void;
426
+ goTo(data: {
427
+ id: string;
428
+ }): void;
429
+ goToNext(): void;
430
+ goToPrevious(): void;
431
+ goToPreviousRow(): void;
432
+ goToNextRow(): void;
433
+ goToFirst(): void;
434
+ goToLast(): void;
435
+ goToFirstOfRow(): void;
436
+ goToLastOfRow(): void;
437
+ goToNextPage(): void;
438
+ goToPreviousPage(): void;
439
+ registerItem(data: {
440
+ id: string;
441
+ textValue: string;
442
+ }): void;
443
+ unregisterItem(data: {
444
+ id: string;
445
+ }): void;
446
+ updateItemHeight(data: {
447
+ value: number;
448
+ }): void;
449
+ };
450
+ menu: {
451
+ state: {
452
+ stackRef: React.RefObject<HTMLDivElement>;
453
+ targetRef: React.RefObject<HTMLButtonElement>;
454
+ initialFocusRef: React.RefObject<any> | undefined;
455
+ returnFocusRef: React.RefObject<any> | undefined;
456
+ placement: import("@popperjs/core").Placement;
457
+ id: string;
458
+ visibility: "hidden" | "visible";
459
+ selectedIds: string[] | "all";
460
+ unselectedIds: string[];
461
+ cursorId: string | string[];
462
+ columnCount: number;
463
+ pageSizeRef: React.MutableRefObject<number>;
464
+ cursorIndexRef: {
465
+ readonly current: number;
466
+ };
467
+ UNSTABLE_virtual: import("@tanstack/virtual-core").Virtualizer<HTMLDivElement, Element>;
468
+ UNSTABLE_defaultItemHeight: number;
469
+ containerRef: React.RefObject<HTMLDivElement>;
470
+ orientation: "horizontal" | "vertical";
471
+ indexRef: React.MutableRefObject<number>;
472
+ nonInteractiveIds: string[];
473
+ isVirtualized: boolean;
474
+ items: import("@workday/canvas-kit-react/collection").Item<any>[];
475
+ mode: "multiple" | "single";
476
+ };
477
+ events: {
478
+ updatePlacement(data: {
479
+ placement: import("@popperjs/core").Placement;
480
+ }): void;
481
+ show(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
482
+ hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
483
+ select(data: {
484
+ id: string;
485
+ }): void;
486
+ selectAll(): void;
487
+ unselectAll(): void;
488
+ setSelectedIds(ids: string[] | "all"): void;
489
+ remove(data: {
490
+ id: string;
491
+ nextId?: string | undefined;
492
+ event?: Event | React.SyntheticEvent<Element, Event> | undefined;
493
+ }): void;
494
+ goTo(data: {
495
+ id: string;
496
+ }): void;
497
+ goToNext(): void;
498
+ goToPrevious(): void;
499
+ goToPreviousRow(): void;
500
+ goToNextRow(): void;
501
+ goToFirst(): void;
502
+ goToLast(): void;
503
+ goToFirstOfRow(): void;
504
+ goToLastOfRow(): void;
505
+ goToNextPage(): void;
506
+ goToPreviousPage(): void;
507
+ registerItem(data: {
508
+ id: string;
509
+ textValue: string;
510
+ }): void;
511
+ unregisterItem(data: {
512
+ id: string;
513
+ }): void;
514
+ updateItemHeight(data: {
515
+ value: number;
516
+ }): void;
517
+ };
518
+ UNSTABLE_parentModel: {
519
+ state: {
520
+ selectedIds: string[] | "all";
521
+ unselectedIds: string[];
522
+ cursorId: string | string[];
523
+ columnCount: number;
524
+ pageSizeRef: React.MutableRefObject<number>;
525
+ cursorIndexRef: {
526
+ readonly current: number;
527
+ };
528
+ UNSTABLE_virtual: import("@tanstack/virtual-core").Virtualizer<HTMLDivElement, Element>;
529
+ UNSTABLE_defaultItemHeight: number;
530
+ containerRef: React.RefObject<HTMLDivElement>;
531
+ id: string;
532
+ orientation: "horizontal" | "vertical";
533
+ indexRef: React.MutableRefObject<number>;
534
+ nonInteractiveIds: string[];
535
+ isVirtualized: boolean;
536
+ items: import("@workday/canvas-kit-react/collection").Item<any>[];
537
+ };
538
+ events: {
539
+ select(data: {
540
+ id: string;
541
+ }): void;
542
+ selectAll(): void;
543
+ unselectAll(): void;
544
+ setSelectedIds(ids: string[] | "all"): void;
545
+ remove(data: {
546
+ id: string;
547
+ nextId?: string | undefined;
548
+ event?: Event | React.SyntheticEvent<Element, Event> | undefined;
549
+ }): void;
550
+ goTo(data: {
551
+ id: string;
552
+ }): void;
553
+ goToNext(): void;
554
+ goToPrevious(): void;
555
+ goToPreviousRow(): void;
556
+ goToNextRow(): void;
557
+ goToFirst(): void;
558
+ goToLast(): void;
559
+ goToFirstOfRow(): void;
560
+ goToLastOfRow(): void;
561
+ goToNextPage(): void;
562
+ goToPreviousPage(): void;
563
+ registerItem(data: {
564
+ id: string;
565
+ textValue: string;
566
+ }): void;
567
+ unregisterItem(data: {
568
+ id: string;
569
+ }): void;
570
+ updateItemHeight(data: {
571
+ value: number;
572
+ }): void;
573
+ };
574
+ selection: import("@workday/canvas-kit-react/collection").SelectionManager;
575
+ navigation: import("@workday/canvas-kit-react/collection").NavigationManager;
576
+ getId: (item: any) => string;
577
+ getTextValue: (item: any) => string;
578
+ UNSTABLE_parentModel: {
579
+ state: {
580
+ selectedIds: string[] | "all";
581
+ unselectedIds: string[];
582
+ cursorId: string | string[];
583
+ columnCount: number;
584
+ pageSizeRef: React.MutableRefObject<number>;
585
+ cursorIndexRef: {
586
+ readonly current: number;
587
+ };
588
+ UNSTABLE_virtual: import("@tanstack/virtual-core").Virtualizer<HTMLDivElement, Element>;
589
+ UNSTABLE_defaultItemHeight: number;
590
+ containerRef: React.RefObject<HTMLDivElement>;
591
+ id: string;
592
+ orientation: "horizontal" | "vertical";
593
+ indexRef: React.MutableRefObject<number>;
594
+ nonInteractiveIds: string[];
595
+ isVirtualized: boolean;
596
+ items: import("@workday/canvas-kit-react/collection").Item<any>[];
597
+ };
598
+ events: {
599
+ select(data: {
600
+ id: string;
601
+ }): void;
602
+ selectAll(): void;
603
+ unselectAll(): void;
604
+ setSelectedIds(ids: string[] | "all"): void;
605
+ remove(data: {
606
+ id: string;
607
+ nextId?: string | undefined;
608
+ event?: Event | React.SyntheticEvent<Element, Event> | undefined;
609
+ }): void;
610
+ goTo(data: {
611
+ id: string;
612
+ }): void;
613
+ goToNext(): void;
614
+ goToPrevious(): void;
615
+ goToPreviousRow(): void;
616
+ goToNextRow(): void;
617
+ goToFirst(): void;
618
+ goToLast(): void;
619
+ goToFirstOfRow(): void;
620
+ goToLastOfRow(): void;
621
+ goToNextPage(): void;
622
+ goToPreviousPage(): void;
623
+ registerItem(data: {
624
+ id: string;
625
+ textValue: string;
626
+ }): void;
627
+ unregisterItem(data: {
628
+ id: string;
629
+ }): void;
630
+ updateItemHeight(data: {
631
+ value: number;
632
+ }): void;
633
+ };
634
+ selection: import("@workday/canvas-kit-react/collection").SelectionManager;
635
+ navigation: import("@workday/canvas-kit-react/collection").NavigationManager;
636
+ getId: (item: any) => string;
637
+ getTextValue: (item: any) => string;
638
+ } | undefined;
639
+ };
640
+ selection: import("@workday/canvas-kit-react/collection").SelectionManager;
641
+ navigation: import("@workday/canvas-kit-react/collection").NavigationManager;
642
+ getId: (item: any) => string;
643
+ getTextValue: (item: any) => string;
644
+ };
645
+ selection: import("@workday/canvas-kit-react/collection").SelectionManager;
646
+ navigation: import("@workday/canvas-kit-react/collection").NavigationManager;
647
+ getId: (item: any) => string;
648
+ getTextValue: (item: any) => string;
649
+ }, {
650
+ readonly onKeyDown: (event: React.KeyboardEvent) => void;
651
+ readonly onFocus: () => void;
652
+ readonly onBlur: () => void;
653
+ }>;
332
654
  export declare const useTabsList: import("@workday/canvas-kit-react/common").BehaviorHook<{
333
655
  state: {
334
656
  getId: (item: any) => string;
@@ -649,7 +971,7 @@ export declare const useTabsList: import("@workday/canvas-kit-react/common").Beh
649
971
  }, import("@workday/canvas-kit-react/common").MergeProps<{
650
972
  readonly ref: (instance: HTMLElement | null) => void;
651
973
  }, import("@workday/canvas-kit-react/common").MergeProps<{
652
- readonly onKeyDown: (event: React.KeyboardEvent<Element>) => void;
974
+ readonly onKeyDown: (event: React.KeyboardEvent) => void;
653
975
  readonly onFocus: () => void;
654
976
  readonly onBlur: () => void;
655
977
  }, import("@workday/canvas-kit-react/common").MergeProps<{}, import("@workday/canvas-kit-react/common").MergeProps<{}, {}>>>>>>>>;
@@ -681,6 +1003,12 @@ export declare const tabsListStencil: import("@workday/canvas-kit-styling").Sten
681
1003
  right: {};
682
1004
  };
683
1005
  }, {}, {}, never, never>;
1006
+ /**
1007
+ * Custom render function for tabs that filters out the synthetic overflow button item.
1008
+ * This is needed because the overflow button is included in the model's items array
1009
+ * for navigation purposes, but should not be rendered by the list or panel render function.
1010
+ */
1011
+ export declare function useTabsCollectionRenderItems(model: ReturnType<typeof useTabsModel>, children: ((item: Generic, index: number) => React.ReactNode) | React.ReactNode): React.ReactNode;
684
1012
  export declare const TabsList: import("@workday/canvas-kit-react/common").ElementComponentM<"div", TabListProps<any> & {
685
1013
  maskImage?: string | undefined;
686
1014
  }, {
@@ -1 +1 @@
1
- {"version":3,"file":"TabsList.d.ts","sourceRoot":"","sources":["../../../../tabs/lib/TabsList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,EACL,YAAY,EAMb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,IAAI,EAAc,MAAM,kCAAkC,CAAC;AAMnE,MAAM,WAAW,YAAY,CAAC,CAAC,GAAG,GAAG,CAAE,SAAQ,IAAI,CAAC,YAAY,CAAC,OAAO,IAAI,EAAE,KAAK,CAAC,EAAE,UAAU,CAAC;IAC/F;;;;;;;;OAQG;IACH,QAAQ,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC,SAAS,CAAC;IAC3D,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAClC;AAyCD,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+BAqBX,aAAa,CAAC,cAAc,CAAC;EAKjD,CAAC;AAEH,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+BAPF,aAAa,CAAC,cAAc,CAAC;;;;;;;;;;iIAiBlD,CAAC;AAEF,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;wBA0C1B,CAAC;AAEH,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAsBpB,CAAC"}
1
+ {"version":3,"file":"TabsList.d.ts","sourceRoot":"","sources":["../../../../tabs/lib/TabsList.tsx"],"names":[],"mappings":"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"}