@workday/canvas-kit-react 12.0.0-alpha.906-next.0 → 12.0.0-alpha.908-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 (208) hide show
  1. package/collection/index.ts +1 -0
  2. package/collection/lib/useListItemActiveDescendant.ts +26 -0
  3. package/combobox/lib/ComboboxMenu.tsx +1 -2
  4. package/combobox/lib/ComboboxMenuItem.tsx +3 -91
  5. package/dist/commonjs/action-bar/lib/ActionBar.d.ts +82 -10
  6. package/dist/commonjs/action-bar/lib/ActionBar.d.ts.map +1 -1
  7. package/dist/commonjs/avatar/lib/Avatar.js +21 -21
  8. package/dist/commonjs/badge/lib/CountBadge.js +3 -3
  9. package/dist/commonjs/breadcrumbs/lib/Breadcrumbs.d.ts +1 -1
  10. package/dist/commonjs/breadcrumbs/lib/BreadcrumbsMenu.d.ts +2 -2
  11. package/dist/commonjs/button/lib/BaseButton.js +21 -21
  12. package/dist/commonjs/button/lib/DeleteButton.js +1 -1
  13. package/dist/commonjs/button/lib/PrimaryButton.js +2 -2
  14. package/dist/commonjs/button/lib/SecondaryButton.js +2 -2
  15. package/dist/commonjs/button/lib/TertiaryButton.js +18 -18
  16. package/dist/commonjs/card/lib/Card.js +1 -1
  17. package/dist/commonjs/card/lib/CardBody.js +1 -1
  18. package/dist/commonjs/card/lib/CardHeading.js +1 -1
  19. package/dist/commonjs/checkbox/lib/CheckBackground.js +3 -3
  20. package/dist/commonjs/checkbox/lib/CheckboxCheck.js +5 -5
  21. package/dist/commonjs/checkbox/lib/CheckboxContainer.js +1 -1
  22. package/dist/commonjs/checkbox/lib/CheckboxInput.js +5 -5
  23. package/dist/commonjs/checkbox/lib/CheckboxRipple.js +1 -1
  24. package/dist/commonjs/collection/index.d.ts +1 -0
  25. package/dist/commonjs/collection/index.d.ts.map +1 -1
  26. package/dist/commonjs/collection/index.js +1 -0
  27. package/dist/commonjs/collection/lib/ListBox.js +4 -4
  28. package/dist/commonjs/collection/lib/useListItemActiveDescendant.d.ts +69 -0
  29. package/dist/commonjs/collection/lib/useListItemActiveDescendant.d.ts.map +1 -0
  30. package/dist/commonjs/collection/lib/useListItemActiveDescendant.js +25 -0
  31. package/dist/commonjs/combobox/lib/Combobox.d.ts +5 -83
  32. package/dist/commonjs/combobox/lib/Combobox.d.ts.map +1 -1
  33. package/dist/commonjs/combobox/lib/ComboboxMenu.d.ts +5 -83
  34. package/dist/commonjs/combobox/lib/ComboboxMenu.d.ts.map +1 -1
  35. package/dist/commonjs/combobox/lib/ComboboxMenu.js +1 -2
  36. package/dist/commonjs/combobox/lib/ComboboxMenuItem.d.ts +18 -260
  37. package/dist/commonjs/combobox/lib/ComboboxMenuItem.d.ts.map +1 -1
  38. package/dist/commonjs/combobox/lib/ComboboxMenuItem.js +3 -59
  39. package/dist/commonjs/combobox/lib/ComboboxMenuList.js +1 -1
  40. package/dist/commonjs/common/lib/AccessibleHide.js +1 -1
  41. package/dist/commonjs/common/lib/CanvasProvider.js +1 -1
  42. package/dist/commonjs/form-field/lib/FormFieldContainer.js +1 -1
  43. package/dist/commonjs/form-field/lib/FormFieldField.js +1 -1
  44. package/dist/commonjs/form-field/lib/FormFieldGroupLabel.js +5 -5
  45. package/dist/commonjs/form-field/lib/FormFieldGroupList.js +3 -3
  46. package/dist/commonjs/form-field/lib/FormFieldHint.js +3 -3
  47. package/dist/commonjs/form-field/lib/FormFieldLabel.js +5 -5
  48. package/dist/commonjs/form-field/lib/formFieldStencil.js +8 -8
  49. package/dist/commonjs/icon/lib/AccentIcon.js +2 -2
  50. package/dist/commonjs/icon/lib/AppletIcon.js +1 -1
  51. package/dist/commonjs/icon/lib/Graphic.js +2 -2
  52. package/dist/commonjs/icon/lib/Svg.js +2 -2
  53. package/dist/commonjs/icon/lib/SystemIcon.js +1 -1
  54. package/dist/commonjs/icon/lib/SystemIconCircle.js +1 -1
  55. package/dist/commonjs/loading-dots/lib/LoadingDots.js +3 -3
  56. package/dist/commonjs/menu/index.d.ts +2 -1
  57. package/dist/commonjs/menu/index.d.ts.map +1 -1
  58. package/dist/commonjs/menu/index.js +5 -1
  59. package/dist/commonjs/menu/lib/Menu.d.ts +89 -9
  60. package/dist/commonjs/menu/lib/Menu.d.ts.map +1 -1
  61. package/dist/commonjs/menu/lib/Menu.js +10 -0
  62. package/dist/commonjs/menu/lib/MenuCard.js +1 -1
  63. package/dist/commonjs/menu/lib/MenuItem.d.ts +12 -19
  64. package/dist/commonjs/menu/lib/MenuItem.d.ts.map +1 -1
  65. package/dist/commonjs/menu/lib/MenuItem.js +20 -91
  66. package/dist/commonjs/menu/lib/MenuList.js +3 -3
  67. package/dist/commonjs/menu/lib/MenuOption.d.ts +192 -0
  68. package/dist/commonjs/menu/lib/MenuOption.d.ts.map +1 -0
  69. package/dist/commonjs/menu/lib/MenuOption.js +89 -0
  70. package/dist/commonjs/modal/lib/ModalBody.js +1 -1
  71. package/dist/commonjs/modal/lib/ModalCard.js +1 -1
  72. package/dist/commonjs/modal/lib/ModalHeading.js +1 -1
  73. package/dist/commonjs/modal/lib/ModalOverflowOverlay.js +1 -1
  74. package/dist/commonjs/modal/lib/ModalOverlay.js +2 -2
  75. package/dist/commonjs/popup/lib/PopupBody.js +1 -1
  76. package/dist/commonjs/popup/lib/PopupCard.js +2 -2
  77. package/dist/commonjs/popup/lib/PopupCloseIcon.js +1 -1
  78. package/dist/commonjs/popup/lib/PopupHeading.js +1 -1
  79. package/dist/commonjs/select/lib/Select.d.ts +59 -962
  80. package/dist/commonjs/select/lib/Select.d.ts.map +1 -1
  81. package/dist/commonjs/select/lib/Select.js +5 -5
  82. package/dist/commonjs/switch/lib/Switch.js +7 -7
  83. package/dist/commonjs/table/lib/Table.js +1 -1
  84. package/dist/commonjs/table/lib/TableBody.js +1 -1
  85. package/dist/commonjs/table/lib/TableCaption.js +1 -1
  86. package/dist/commonjs/table/lib/TableCell.js +1 -1
  87. package/dist/commonjs/table/lib/TableFooter.js +1 -1
  88. package/dist/commonjs/table/lib/TableHead.js +1 -1
  89. package/dist/commonjs/table/lib/TableHeader.js +1 -1
  90. package/dist/commonjs/table/lib/TableRow.js +1 -1
  91. package/dist/commonjs/tabs/lib/Tabs.d.ts +82 -10
  92. package/dist/commonjs/tabs/lib/Tabs.d.ts.map +1 -1
  93. package/dist/commonjs/text/lib/LabelText.js +6 -6
  94. package/dist/commonjs/text/lib/Text.js +16 -16
  95. package/dist/commonjs/text/lib/TypeLevelComponents.js +4 -4
  96. package/dist/commonjs/text-area/lib/TextArea.js +5 -5
  97. package/dist/commonjs/text-input/lib/InputGroup.js +6 -6
  98. package/dist/commonjs/text-input/lib/TextInput.js +5 -5
  99. package/dist/commonjs/toast/lib/Toast.js +1 -1
  100. package/dist/commonjs/toast/lib/ToastBody.js +1 -1
  101. package/dist/commonjs/toast/lib/ToastCloseIcon.js +1 -1
  102. package/dist/commonjs/toast/lib/ToastIcon.js +1 -1
  103. package/dist/commonjs/toast/lib/ToastMessage.js +1 -1
  104. package/dist/es6/action-bar/lib/ActionBar.d.ts +82 -10
  105. package/dist/es6/action-bar/lib/ActionBar.d.ts.map +1 -1
  106. package/dist/es6/avatar/lib/Avatar.js +21 -21
  107. package/dist/es6/badge/lib/CountBadge.js +3 -3
  108. package/dist/es6/breadcrumbs/lib/Breadcrumbs.d.ts +1 -1
  109. package/dist/es6/breadcrumbs/lib/BreadcrumbsMenu.d.ts +2 -2
  110. package/dist/es6/button/lib/BaseButton.js +21 -21
  111. package/dist/es6/button/lib/DeleteButton.js +1 -1
  112. package/dist/es6/button/lib/PrimaryButton.js +2 -2
  113. package/dist/es6/button/lib/SecondaryButton.js +2 -2
  114. package/dist/es6/button/lib/TertiaryButton.js +18 -18
  115. package/dist/es6/card/lib/Card.js +1 -1
  116. package/dist/es6/card/lib/CardBody.js +1 -1
  117. package/dist/es6/card/lib/CardHeading.js +1 -1
  118. package/dist/es6/checkbox/lib/CheckBackground.js +3 -3
  119. package/dist/es6/checkbox/lib/CheckboxCheck.js +5 -5
  120. package/dist/es6/checkbox/lib/CheckboxContainer.js +1 -1
  121. package/dist/es6/checkbox/lib/CheckboxInput.js +5 -5
  122. package/dist/es6/checkbox/lib/CheckboxRipple.js +1 -1
  123. package/dist/es6/collection/index.d.ts +1 -0
  124. package/dist/es6/collection/index.d.ts.map +1 -1
  125. package/dist/es6/collection/index.js +1 -0
  126. package/dist/es6/collection/lib/ListBox.js +4 -4
  127. package/dist/es6/collection/lib/useListItemActiveDescendant.d.ts +69 -0
  128. package/dist/es6/collection/lib/useListItemActiveDescendant.d.ts.map +1 -0
  129. package/dist/es6/collection/lib/useListItemActiveDescendant.js +22 -0
  130. package/dist/es6/combobox/lib/Combobox.d.ts +5 -83
  131. package/dist/es6/combobox/lib/Combobox.d.ts.map +1 -1
  132. package/dist/es6/combobox/lib/ComboboxMenu.d.ts +5 -83
  133. package/dist/es6/combobox/lib/ComboboxMenu.d.ts.map +1 -1
  134. package/dist/es6/combobox/lib/ComboboxMenu.js +1 -2
  135. package/dist/es6/combobox/lib/ComboboxMenuItem.d.ts +18 -260
  136. package/dist/es6/combobox/lib/ComboboxMenuItem.d.ts.map +1 -1
  137. package/dist/es6/combobox/lib/ComboboxMenuItem.js +3 -56
  138. package/dist/es6/combobox/lib/ComboboxMenuList.js +1 -1
  139. package/dist/es6/common/lib/AccessibleHide.js +1 -1
  140. package/dist/es6/common/lib/CanvasProvider.js +1 -1
  141. package/dist/es6/form-field/lib/FormFieldContainer.js +1 -1
  142. package/dist/es6/form-field/lib/FormFieldField.js +1 -1
  143. package/dist/es6/form-field/lib/FormFieldGroupLabel.js +5 -5
  144. package/dist/es6/form-field/lib/FormFieldGroupList.js +3 -3
  145. package/dist/es6/form-field/lib/FormFieldHint.js +3 -3
  146. package/dist/es6/form-field/lib/FormFieldLabel.js +5 -5
  147. package/dist/es6/form-field/lib/formFieldStencil.js +8 -8
  148. package/dist/es6/icon/lib/AccentIcon.js +2 -2
  149. package/dist/es6/icon/lib/AppletIcon.js +1 -1
  150. package/dist/es6/icon/lib/Graphic.js +2 -2
  151. package/dist/es6/icon/lib/Svg.js +2 -2
  152. package/dist/es6/icon/lib/SystemIcon.js +1 -1
  153. package/dist/es6/icon/lib/SystemIconCircle.js +1 -1
  154. package/dist/es6/loading-dots/lib/LoadingDots.js +3 -3
  155. package/dist/es6/menu/index.d.ts +2 -1
  156. package/dist/es6/menu/index.d.ts.map +1 -1
  157. package/dist/es6/menu/index.js +2 -1
  158. package/dist/es6/menu/lib/Menu.d.ts +89 -9
  159. package/dist/es6/menu/lib/Menu.d.ts.map +1 -1
  160. package/dist/es6/menu/lib/Menu.js +10 -0
  161. package/dist/es6/menu/lib/MenuCard.js +1 -1
  162. package/dist/es6/menu/lib/MenuItem.d.ts +12 -19
  163. package/dist/es6/menu/lib/MenuItem.d.ts.map +1 -1
  164. package/dist/es6/menu/lib/MenuItem.js +22 -93
  165. package/dist/es6/menu/lib/MenuList.js +3 -3
  166. package/dist/es6/menu/lib/MenuOption.d.ts +192 -0
  167. package/dist/es6/menu/lib/MenuOption.d.ts.map +1 -0
  168. package/dist/es6/menu/lib/MenuOption.js +63 -0
  169. package/dist/es6/modal/lib/ModalBody.js +1 -1
  170. package/dist/es6/modal/lib/ModalCard.js +1 -1
  171. package/dist/es6/modal/lib/ModalHeading.js +1 -1
  172. package/dist/es6/modal/lib/ModalOverflowOverlay.js +1 -1
  173. package/dist/es6/modal/lib/ModalOverlay.js +2 -2
  174. package/dist/es6/popup/lib/PopupBody.js +1 -1
  175. package/dist/es6/popup/lib/PopupCard.js +2 -2
  176. package/dist/es6/popup/lib/PopupCloseIcon.js +1 -1
  177. package/dist/es6/popup/lib/PopupHeading.js +1 -1
  178. package/dist/es6/select/lib/Select.d.ts +59 -962
  179. package/dist/es6/select/lib/Select.d.ts.map +1 -1
  180. package/dist/es6/select/lib/Select.js +5 -5
  181. package/dist/es6/switch/lib/Switch.js +7 -7
  182. package/dist/es6/table/lib/Table.js +1 -1
  183. package/dist/es6/table/lib/TableBody.js +1 -1
  184. package/dist/es6/table/lib/TableCaption.js +1 -1
  185. package/dist/es6/table/lib/TableCell.js +1 -1
  186. package/dist/es6/table/lib/TableFooter.js +1 -1
  187. package/dist/es6/table/lib/TableHead.js +1 -1
  188. package/dist/es6/table/lib/TableHeader.js +1 -1
  189. package/dist/es6/table/lib/TableRow.js +1 -1
  190. package/dist/es6/tabs/lib/Tabs.d.ts +82 -10
  191. package/dist/es6/tabs/lib/Tabs.d.ts.map +1 -1
  192. package/dist/es6/text/lib/LabelText.js +6 -6
  193. package/dist/es6/text/lib/Text.js +16 -16
  194. package/dist/es6/text/lib/TypeLevelComponents.js +4 -4
  195. package/dist/es6/text-area/lib/TextArea.js +5 -5
  196. package/dist/es6/text-input/lib/InputGroup.js +6 -6
  197. package/dist/es6/text-input/lib/TextInput.js +5 -5
  198. package/dist/es6/toast/lib/Toast.js +1 -1
  199. package/dist/es6/toast/lib/ToastBody.js +1 -1
  200. package/dist/es6/toast/lib/ToastCloseIcon.js +1 -1
  201. package/dist/es6/toast/lib/ToastIcon.js +1 -1
  202. package/dist/es6/toast/lib/ToastMessage.js +1 -1
  203. package/menu/index.ts +2 -1
  204. package/menu/lib/Menu.tsx +10 -0
  205. package/menu/lib/MenuItem.tsx +107 -99
  206. package/menu/lib/MenuOption.tsx +138 -0
  207. package/package.json +4 -4
  208. package/select/lib/Select.tsx +1 -1
@@ -6,21 +6,21 @@ import { SystemIcon, systemIconStencil } from '@workday/canvas-kit-react/icon';
6
6
  import { checkSmallIcon } from '@workday/canvas-system-icons-web';
7
7
  import { CheckBackground } from './CheckBackground';
8
8
  const checkboxCheckStencil = createStencil({
9
- base: { name: "n4fo3k", styles: "box-sizing:border-box;display:flex;flex-direction:column;max-width:100%;pointer-events:none;transition:transform 200ms ease, opacity 200ms ease;span{margin-inline-start:calc(0.375rem * -1);transition:margin 200ms ease;}opacity:var(--cnvs-sys-opacity-zero);transform:scale(0.5);" },
9
+ base: { name: "xgsx3m", styles: "box-sizing:border-box;display:flex;flex-direction:column;max-width:100%;pointer-events:none;transition:transform 200ms ease, opacity 200ms ease;span{margin-inline-start:calc(0.375rem * -1);transition:margin 200ms ease;}opacity:var(--cnvs-sys-opacity-zero);transform:scale(0.5);" },
10
10
  modifiers: {
11
11
  checked: {
12
- true: { name: "n4fo3l", styles: "--color-system-icon-583fae:var(--cnvs-brand-primary-accent);opacity:var(--cnvs-sys-opacity-full);transform:scale(1);" }
12
+ true: { name: "xgsx3n", styles: "--color-system-icon-583fae:var(--cnvs-brand-primary-accent);opacity:var(--cnvs-sys-opacity-full);transform:scale(1);" }
13
13
  },
14
14
  indeterminate: {
15
- true: { name: "n4fo3m", styles: "opacity:var(--cnvs-sys-opacity-full);transform:scale(1);" }
15
+ true: { name: "xgsx3o", styles: "opacity:var(--cnvs-sys-opacity-full);transform:scale(1);" }
16
16
  },
17
17
  variant: {
18
- inverse: { name: "n4fo3n", styles: "--color-system-icon-583fae:var(--cnvs-brand-primary-base);& > div{background-color:var(--cnvs-brand-primary-base);}" }
18
+ inverse: { name: "xgsx3p", styles: "--color-system-icon-583fae:var(--cnvs-brand-primary-base);& > div{background-color:var(--cnvs-brand-primary-base);}" }
19
19
  }
20
20
  }
21
21
  }, "checkbox-check-1e6620");
22
22
  const indeterminateBoxStencil = createStencil({
23
- base: { name: "n4fo3o", styles: "box-sizing:border-box;width:0.625rem;height:calc(var(--cnvs-sys-space-x1) / 2);background-color:var(--cnvs-brand-primary-accent);" }
23
+ base: { name: "xgsx3q", styles: "box-sizing:border-box;width:0.625rem;height:calc(var(--cnvs-sys-space-x1) / 2);background-color:var(--cnvs-brand-primary-accent);" }
24
24
  }, "indeterminate-box-c4442f");
25
25
  export const CheckboxCheck = createComponent('div')({
26
26
  displayName: 'CheckboxCheck',
@@ -4,7 +4,7 @@ import { calc, createStencil, px2rem } from '@workday/canvas-kit-styling';
4
4
  import { system } from '@workday/canvas-tokens-web';
5
5
  import { LabelText } from '@workday/canvas-kit-react/text';
6
6
  const checkboxContainerStencil = createStencil({
7
- base: { name: "n4fo3g", styles: "box-sizing:border-box;display:flex;align-items:center;min-height:var(--cnvs-sys-space-x6);position:relative;&>div{display:flex;height:calc(var(--cnvs-sys-space-x4) + 0.125rem);min-width:calc(var(--cnvs-sys-space-x4) + 0.125rem);margin-top:0.1875rem;align-self:flex-start;}& > label{padding-inline-start:var(--cnvs-sys-space-x3);}" }
7
+ base: { name: "xgsx3i", styles: "box-sizing:border-box;display:flex;align-items:center;min-height:var(--cnvs-sys-space-x6);position:relative;&>div{display:flex;height:calc(var(--cnvs-sys-space-x4) + 0.125rem);min-width:calc(var(--cnvs-sys-space-x4) + 0.125rem);margin-top:0.1875rem;align-self:flex-start;}& > label{padding-inline-start:var(--cnvs-sys-space-x3);}" }
8
8
  }, "checkbox-container-a7381d");
9
9
  export const CheckboxContainer = createComponent('div')({
10
10
  displayName: 'CheckboxContainer',
@@ -4,22 +4,22 @@ import { calc, createStencil, handleCsProp, px2rem } from '@workday/canvas-kit-s
4
4
  import { brand, system } from '@workday/canvas-tokens-web';
5
5
  import { checkboxBackgroundStencil } from './CheckBackground';
6
6
  const checkboxInputStencil = createStencil({
7
- base: { name: "n4fo3p", styles: "box-sizing:border-box;border-radius:var(--cnvs-sys-shape-half);width:var(--cnvs-sys-space-x6);height:var(--cnvs-sys-space-x6);margin:var(--cnvs-sys-space-zero);margin-top:calc(0.1875rem * -1);margin-inline-start:calc(0.1875rem * -1);position:absolute;opacity:var(--cnvs-sys-opacity-zero);&:not(:disabled){cursor:pointer;}&:where(:hover,.hover) ~ span:first-of-type{box-shadow:0 0 0 0.4375rem var(--cnvs-sys-color-bg-alt-soft);}&:not(:where(:checked, :indeterminate, :disabled, :focus-visible, .focus)):where(:hover, .hover, :active, .active) ~ div:first-of-type{border-color:var(--cnvs-sys-color-border-input-strong);}&:where(:checked, :indeterminate) ~ div:first-of-type{border-color:var(--cnvs-brand-primary-base);background-color:var(--cnvs-brand-primary-base);}&:disabled ~ div:first-of-type{border-color:var(--cnvs-sys-color-border-input-disabled);background-color:var(--cnvs-sys-color-bg-alt-softer);opacity:var(--cnvs-sys-opacity-full);}&:disabled:where(:checked, :indeterminate) ~ div:first-of-type{border-color:var(--cnvs-brand-primary-light);background-color:var(--cnvs-brand-primary-light);}&:where(:focus-visible, :active, .focus, .active){outline:none;}&:where(:focus-visible, .focus) ~ div:first-of-type{border-color:var(--cnvs-brand-primary-base);border-width:0.125rem;box-shadow:0 0 0 0px var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1)), 0 0 0 0px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));}&:checked:focus-visible, &:indeterminate:focus-visible, &:checked.focus, &:indeterminate.focus{& ~ div:first-of-type{box-shadow:0 0 0 2px var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1)), 0 0 0 4px var(--cnvs-brand-common-focus-outline);border-color:var(--cnvs-brand-primary-base);border-width:0.125rem;span{margin-inline-start:calc(0.4375rem * -1);}}}" },
7
+ base: { name: "xgsx3r", styles: "box-sizing:border-box;border-radius:var(--cnvs-sys-shape-half);width:var(--cnvs-sys-space-x6);height:var(--cnvs-sys-space-x6);margin:var(--cnvs-sys-space-zero);margin-top:calc(0.1875rem * -1);margin-inline-start:calc(0.1875rem * -1);position:absolute;opacity:var(--cnvs-sys-opacity-zero);&:not(:disabled){cursor:pointer;}&:where(:hover,.hover) ~ span:first-of-type{box-shadow:0 0 0 0.4375rem var(--cnvs-sys-color-bg-alt-soft);}&:not(:where(:checked, :indeterminate, :disabled, :focus-visible, .focus)):where(:hover, .hover, :active, .active) ~ div:first-of-type{border-color:var(--cnvs-sys-color-border-input-strong);}&:where(:checked, :indeterminate) ~ div:first-of-type{border-color:var(--cnvs-brand-primary-base);background-color:var(--cnvs-brand-primary-base);}&:disabled ~ div:first-of-type{border-color:var(--cnvs-sys-color-border-input-disabled);background-color:var(--cnvs-sys-color-bg-alt-softer);opacity:var(--cnvs-sys-opacity-full);}&:disabled:where(:checked, :indeterminate) ~ div:first-of-type{border-color:var(--cnvs-brand-primary-light);background-color:var(--cnvs-brand-primary-light);}&:where(:focus-visible, :active, .focus, .active){outline:none;}&:where(:focus-visible, .focus) ~ div:first-of-type{border-color:var(--cnvs-brand-primary-base);border-width:0.125rem;box-shadow:0 0 0 0px var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1)), 0 0 0 0px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));}&:checked:focus-visible, &:indeterminate:focus-visible, &:checked.focus, &:indeterminate.focus{& ~ div:first-of-type{box-shadow:0 0 0 2px var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1)), 0 0 0 4px var(--cnvs-brand-common-focus-outline);border-color:var(--cnvs-brand-primary-base);border-width:0.125rem;span{margin-inline-start:calc(0.4375rem * -1);}}}" },
8
8
  modifiers: {
9
9
  variant: {
10
- inverse: { name: "n4fo3q", styles: "& ~ span:first-of-type{opacity:var(--cnvs-sys-opacity-disabled);}& ~ div:first-of-type{border-color:var(--cnvs-sys-color-border-input-inverse);}&:not(:where(:checked, :indeterminate, :disabled, :focus-visible, .focus)):where(:hover, .hover, :active, .active) ~ div:first-of-type{border-color:var(--cnvs-sys-color-border-input-inverse);}&:where(:checked, :indeterminate) ~ div:first-of-type{border-color:var(--cnvs-sys-color-border-input-inverse);background-color:var(--cnvs-sys-color-bg-default);}&:disabled ~ div:first-of-type{background-color:var(--cnvs-sys-color-bg-alt-default);opacity:var(--cnvs-sys-opacity-disabled);}&:disabled:where(:checked, :indeterminate) ~ div:first-of-type{border-color:var(--cnvs-sys-color-border-input-inverse);background-color:var(--cnvs-sys-color-bg-default);}&:where(:focus-visible, .focus) ~ div:first-of-type{border-color:var(--cnvs-sys-color-border-contrast-default);box-shadow:0 0 0 0px var(--cnvs-sys-color-border-contrast-default), 0 0 0 2px var(--cnvs-sys-color-border-inverse);}&:checked:focus-visible, &:checked.focus, &:indeterminate:focus-visible, &:indeterminate.focus{& ~ div:first-of-type{box-shadow:0 0 0 2px var(--cnvs-sys-color-border-contrast-default), 0 0 0 4px var(--cnvs-sys-color-border-inverse);border-color:var(--cnvs-sys-color-border-inverse);}}" }
10
+ inverse: { name: "xgsx3s", styles: "& ~ span:first-of-type{opacity:var(--cnvs-sys-opacity-disabled);}& ~ div:first-of-type{border-color:var(--cnvs-sys-color-border-input-inverse);}&:not(:where(:checked, :indeterminate, :disabled, :focus-visible, .focus)):where(:hover, .hover, :active, .active) ~ div:first-of-type{border-color:var(--cnvs-sys-color-border-input-inverse);}&:where(:checked, :indeterminate) ~ div:first-of-type{border-color:var(--cnvs-sys-color-border-input-inverse);background-color:var(--cnvs-sys-color-bg-default);}&:disabled ~ div:first-of-type{background-color:var(--cnvs-sys-color-bg-alt-default);opacity:var(--cnvs-sys-opacity-disabled);}&:disabled:where(:checked, :indeterminate) ~ div:first-of-type{border-color:var(--cnvs-sys-color-border-input-inverse);background-color:var(--cnvs-sys-color-bg-default);}&:where(:focus-visible, .focus) ~ div:first-of-type{border-color:var(--cnvs-sys-color-border-contrast-default);box-shadow:0 0 0 0px var(--cnvs-sys-color-border-contrast-default), 0 0 0 2px var(--cnvs-sys-color-border-inverse);}&:checked:focus-visible, &:checked.focus, &:indeterminate:focus-visible, &:indeterminate.focus{& ~ div:first-of-type{box-shadow:0 0 0 2px var(--cnvs-sys-color-border-contrast-default), 0 0 0 4px var(--cnvs-sys-color-border-inverse);border-color:var(--cnvs-sys-color-border-inverse);}}" }
11
11
  },
12
12
  disabled: {
13
- true: { name: "n4fo3r", styles: "&:where(:hover, .hover) ~ span:first-of-type{box-shadow:none;}" }
13
+ true: { name: "xgsx3t", styles: "&:where(:hover, .hover) ~ span:first-of-type{box-shadow:none;}" }
14
14
  },
15
15
  error: {
16
- true: { name: "n4fo3s", styles: "&:not(:where(:focus-visible, .focus)) ~ div:first-of-type{border-color:var(--errorRingColorInner-checkbox-background-8c450a);box-shadow:\n 0 0 0 0.0625rem var(--errorRingColorInner-checkbox-background-8c450a),\n 0 0 0 0.125rem var(--errorRingColorOuter-checkbox-background-8c450a);}&:where(:checked, :indeterminate) ~ div:first-of-type{border-color:transparent;box-shadow:\n 0 0 0 0.125rem var(--cnvs-sys-color-border-inverse),\n 0 0 0 0.25rem var(--errorRingColorInner-checkbox-background-8c450a),\n 0 0 0 0.3125rem var(--errorRingColorOuter-checkbox-background-8c450a);}&:not(:where(:checked, :indeterminate, :disabled, :focus-visible, .focus)):where(:hover, .hover, :active, .active) ~ div:first-of-type{border-color:var(--errorRingColorInner-checkbox-background-8c450a);}" }
16
+ true: { name: "xgsx3u", styles: "&:not(:where(:focus-visible, .focus)) ~ div:first-of-type{border-color:var(--errorRingColorInner-checkbox-background-8c450a);box-shadow:\n 0 0 0 0.0625rem var(--errorRingColorInner-checkbox-background-8c450a),\n 0 0 0 0.125rem var(--errorRingColorOuter-checkbox-background-8c450a);}&:where(:checked, :indeterminate) ~ div:first-of-type{border-color:transparent;box-shadow:\n 0 0 0 0.125rem var(--cnvs-sys-color-border-inverse),\n 0 0 0 0.25rem var(--errorRingColorInner-checkbox-background-8c450a),\n 0 0 0 0.3125rem var(--errorRingColorOuter-checkbox-background-8c450a);}&:not(:where(:checked, :indeterminate, :disabled, :focus-visible, .focus)):where(:hover, .hover, :active, .active) ~ div:first-of-type{border-color:var(--errorRingColorInner-checkbox-background-8c450a);}" }
17
17
  }
18
18
  },
19
19
  compound: [
20
20
  {
21
21
  modifiers: { variant: 'inverse', error: true },
22
- styles: { name: "n4fo3t", styles: "&:not(:where(:focus-visible, .focus)) ~ div:first-of-type{border:0.0625rem solid var(--cnvs-sys-color-border-input-inverse);}&:not(where(:checked, :indeterminate, :disabled, :focus-visible, .focus)):where(:hover, .hover, :active, .active) ~ div:first-of-type{border-color:var(--cnvs-sys-color-border-input-inverse);}&:where(:checked, :indeterminate) ~ div:first-of-type{border-color:var(--cnvs-sys-color-border-input-inverse);}" }
22
+ styles: { name: "xgsx3v", styles: "&:not(:where(:focus-visible, .focus)) ~ div:first-of-type{border:0.0625rem solid var(--cnvs-sys-color-border-input-inverse);}&:not(where(:checked, :indeterminate, :disabled, :focus-visible, .focus)):where(:hover, .hover, :active, .active) ~ div:first-of-type{border-color:var(--cnvs-sys-color-border-input-inverse);}&:where(:checked, :indeterminate) ~ div:first-of-type{border-color:var(--cnvs-sys-color-border-input-inverse);}" }
23
23
  }
24
24
  ]
25
25
  }, "checkbox-input-d394e3");
@@ -3,7 +3,7 @@ import { createComponent } from '@workday/canvas-kit-react/common';
3
3
  import { calc, createStencil, px2rem } from '@workday/canvas-kit-styling';
4
4
  import { system } from '@workday/canvas-tokens-web';
5
5
  const checkboxRippleStencil = createStencil({
6
- base: { name: "n4fo3f", styles: "box-sizing:border-box;border-radius:var(--cnvs-sys-shape-round);box-shadow:none;height:calc(var(--cnvs-sys-space-x4) + 0.125rem);width:calc(var(--cnvs-sys-space-x4) + 0.125rem);transition:box-shadow 150ms ease-out;position:absolute;pointer-events:none;" }
6
+ base: { name: "xgsx3h", styles: "box-sizing:border-box;border-radius:var(--cnvs-sys-shape-round);box-shadow:none;height:calc(var(--cnvs-sys-space-x4) + 0.125rem);width:calc(var(--cnvs-sys-space-x4) + 0.125rem);transition:box-shadow 150ms ease-out;position:absolute;pointer-events:none;" }
7
7
  }, "checkbox-ripple-27671c");
8
8
  export const CheckboxRipple = createComponent('span')({
9
9
  displayName: 'CheckboxRipple',
@@ -13,6 +13,7 @@ export * from './lib/useListLoader';
13
13
  export * from './lib/useListModel';
14
14
  export * from './lib/useGridModel';
15
15
  export * from './lib/useListActiveDescendant';
16
+ export * from './lib/useListItemActiveDescendant';
16
17
  export * from './lib/useListItemAllowChildStrings';
17
18
  export { ListBox, ListBoxProps } from './lib/ListBox';
18
19
  export { keyboardEventToCursorEvents } from './lib/keyUtils';
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../collection/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,YAAY,EAAE,IAAI,EAAC,MAAM,wBAAwB,CAAC;AAC1D,cAAc,2BAA2B,CAAC;AAC1C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,kCAAkC,CAAC;AACjD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,yBAAyB,CAAC;AACxC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,yBAAyB,CAAC;AACxC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,oCAAoC,CAAC;AACnD,OAAO,EAAC,OAAO,EAAE,YAAY,EAAC,MAAM,eAAe,CAAC;AACpD,OAAO,EAAC,2BAA2B,EAAC,MAAM,gBAAgB,CAAC;AAC3D,OAAO,EACL,sBAAsB,EACtB,qBAAqB,EACrB,UAAU,GACX,MAAM,6BAA6B,CAAC;AACrC,OAAO,EAAC,yBAAyB,EAAE,iBAAiB,EAAC,MAAM,0BAA0B,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../collection/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,YAAY,EAAE,IAAI,EAAC,MAAM,wBAAwB,CAAC;AAC1D,cAAc,2BAA2B,CAAC;AAC1C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,kCAAkC,CAAC;AACjD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,yBAAyB,CAAC;AACxC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,yBAAyB,CAAC;AACxC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,mCAAmC,CAAC;AAClD,cAAc,oCAAoC,CAAC;AACnD,OAAO,EAAC,OAAO,EAAE,YAAY,EAAC,MAAM,eAAe,CAAC;AACpD,OAAO,EAAC,2BAA2B,EAAC,MAAM,gBAAgB,CAAC;AAC3D,OAAO,EACL,sBAAsB,EACtB,qBAAqB,EACrB,UAAU,GACX,MAAM,6BAA6B,CAAC;AACrC,OAAO,EAAC,yBAAyB,EAAE,iBAAiB,EAAC,MAAM,0BAA0B,CAAC"}
@@ -13,6 +13,7 @@ export * from './lib/useListLoader';
13
13
  export * from './lib/useListModel';
14
14
  export * from './lib/useGridModel';
15
15
  export * from './lib/useListActiveDescendant';
16
+ export * from './lib/useListItemActiveDescendant';
16
17
  export * from './lib/useListItemAllowChildStrings';
17
18
  export { ListBox } from './lib/ListBox';
18
19
  export { keyboardEventToCursorEvents } from './lib/keyUtils';
@@ -22,16 +22,16 @@ export const useListBox = createElemPropsHook(useListModel)(model => {
22
22
  };
23
23
  });
24
24
  const listBoxContainerStencil = createStencil({
25
- base: { name: "n4fo2j", styles: "box-sizing:border-box;" },
25
+ base: { name: "xgsx2j", styles: "box-sizing:border-box;" },
26
26
  modifiers: {
27
27
  orientation: {
28
- vertical: { name: "n4fo2k", styles: "overflow-y:auto;" },
29
- horizontal: { name: "n4fo2l", styles: "overflow-y:undefined;" }
28
+ vertical: { name: "xgsx2k", styles: "overflow-y:auto;" },
29
+ horizontal: { name: "xgsx2l", styles: "overflow-y:undefined;" }
30
30
  }
31
31
  }
32
32
  }, "list-box-container-625603");
33
33
  const listBoxStencil = createStencil({
34
- base: { name: "n4fo2m", styles: "box-sizing:border-box;display:flex;flex-direction:column;margin-top:var(--cnvs-sys-space-zero);margin-bottom:var(--cnvs-sys-space-zero);" }
34
+ base: { name: "xgsx2m", styles: "box-sizing:border-box;display:flex;flex-direction:column;margin-top:var(--cnvs-sys-space-zero);margin-bottom:var(--cnvs-sys-space-zero);" }
35
35
  }, "list-box-9c3639");
36
36
  /**
37
37
  * The `ListBox` component that offers vertical rendering of a collection in the form of a
@@ -0,0 +1,69 @@
1
+ /**
2
+ * This elemProps hook is used for cursor navigation by using [Active
3
+ * Descendant](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_focus_activedescendant).
4
+ * This hook should be applied to List Items, not the list (use {@link useListActiveDescendant} for the list).
5
+ * This hook adds the focus class so that lists using `aria-activedescendant` get the correct
6
+ * visual cue for visual users.
7
+ *
8
+ * ```ts
9
+ * const useMyItem = composeHooks(
10
+ * useListItemActiveDescendant, // adds `aria-activedescendant` support
11
+ * useListItemRegister
12
+ * );
13
+ ```
14
+ */
15
+ export declare const useListItemActiveDescendant: import("@workday/canvas-kit-react/common").BehaviorHook<{
16
+ state: {
17
+ cursorId: string;
18
+ columnCount: number;
19
+ pageSizeRef: import("react").MutableRefObject<number>;
20
+ cursorIndexRef: {
21
+ readonly current: number;
22
+ };
23
+ UNSTABLE_virtual: {
24
+ virtualItems: import("./react-virtual").VirtualItem[];
25
+ totalSize: number;
26
+ scrollToOffset: (index: number, options?: import("./react-virtual").ScrollToOffsetOptions | undefined) => void;
27
+ scrollToIndex: (index: number, options?: import("./react-virtual").ScrollToIndexOptions | undefined) => void;
28
+ measure: () => void;
29
+ };
30
+ UNSTABLE_defaultItemHeight: number;
31
+ containerRef: import("react").RefObject<HTMLDivElement>;
32
+ id: string;
33
+ orientation: "horizontal" | "vertical";
34
+ indexRef: import("react").MutableRefObject<number>;
35
+ nonInteractiveIds: string[];
36
+ isVirtualized: boolean;
37
+ items: import("./useBaseListModel").Item<any>[];
38
+ };
39
+ events: {
40
+ goTo(data: {
41
+ id: string;
42
+ }): void;
43
+ goToNext(): void;
44
+ goToPrevious(): void;
45
+ goToPreviousRow(): void;
46
+ goToNextRow(): void;
47
+ goToFirst(): void;
48
+ goToLast(): void;
49
+ goToFirstOfRow(): void;
50
+ goToLastOfRow(): void;
51
+ goToNextPage(): void;
52
+ goToPreviousPage(): void;
53
+ registerItem(data: {
54
+ item: any;
55
+ textValue: string;
56
+ }): void;
57
+ unregisterItem(data: {
58
+ id: string;
59
+ }): void;
60
+ updateItemHeight(data: {
61
+ value: number;
62
+ }): void;
63
+ };
64
+ navigation: import("./useCursorListModel").NavigationManager;
65
+ getId: (item: any) => string;
66
+ }, {
67
+ className: string;
68
+ }>;
69
+ //# sourceMappingURL=useListItemActiveDescendant.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useListItemActiveDescendant.d.ts","sourceRoot":"","sources":["../../../../collection/lib/useListItemActiveDescendant.ts"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,2BAA2B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAOvC,CAAC"}
@@ -0,0 +1,22 @@
1
+ import { createElemPropsHook } from '@workday/canvas-kit-react/common';
2
+ import { useCursorListModel } from './useCursorListModel';
3
+ /**
4
+ * This elemProps hook is used for cursor navigation by using [Active
5
+ * Descendant](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_focus_activedescendant).
6
+ * This hook should be applied to List Items, not the list (use {@link useListActiveDescendant} for the list).
7
+ * This hook adds the focus class so that lists using `aria-activedescendant` get the correct
8
+ * visual cue for visual users.
9
+ *
10
+ * ```ts
11
+ * const useMyItem = composeHooks(
12
+ * useListItemActiveDescendant, // adds `aria-activedescendant` support
13
+ * useListItemRegister
14
+ * );
15
+ ```
16
+ */
17
+ export const useListItemActiveDescendant = createElemPropsHook(useCursorListModel)((model, _ref, elemProps = {}) => {
18
+ const id = elemProps['data-id'] || '';
19
+ return {
20
+ className: model.state.cursorId && model.state.cursorId === id ? 'focus' : '',
21
+ };
22
+ });
@@ -1915,7 +1915,7 @@ export declare const Combobox: import("@workday/canvas-kit-react/common").Compon
1915
1915
  navigation: import("../../collection/lib/useCursorListModel").NavigationManager;
1916
1916
  getId: (item: any) => string;
1917
1917
  }>;
1918
- Item: import("@workday/canvas-kit-react/common").ElementComponentM<"li", import("./ComboboxMenuItem").ComboboxMenuItemProps, {
1918
+ Item: import("@workday/canvas-kit-react/common").ElementComponentM<"li", import("../../menu/lib/MenuOption").MenuOptionProps, {
1919
1919
  state: {
1920
1920
  stackRef: React.RefObject<HTMLDivElement>;
1921
1921
  targetRef: React.RefObject<HTMLButtonElement>;
@@ -1947,12 +1947,8 @@ export declare const Combobox: import("@workday/canvas-kit-react/common").Compon
1947
1947
  isVirtualized: boolean;
1948
1948
  items: import("../..").Item<any>[];
1949
1949
  mode: "multiple" | "single";
1950
- value: string | undefined;
1951
- inputRef: React.RefObject<HTMLInputElement>;
1952
- width: number;
1953
1950
  };
1954
1951
  events: {
1955
- setWidth(width: number): void;
1956
1952
  updatePlacement(data: {
1957
1953
  placement: import("@popperjs/core").Placement;
1958
1954
  }): void;
@@ -1987,88 +1983,14 @@ export declare const Combobox: import("@workday/canvas-kit-react/common").Compon
1987
1983
  value: number;
1988
1984
  }): void;
1989
1985
  };
1990
- onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
1991
1986
  selection: import("../../collection/lib/useSelectionListModel").SelectionManager;
1992
1987
  navigation: import("../../collection/lib/useCursorListModel").NavigationManager;
1993
1988
  getId: (item: any) => string;
1994
1989
  }> & {
1995
- Icon: import("@workday/canvas-kit-react/common").ElementComponentM<"span", import("../..").SystemIconProps & React.HTMLAttributes<HTMLSpanElement>, {
1996
- state: {
1997
- stackRef: React.RefObject<HTMLDivElement>;
1998
- targetRef: React.RefObject<HTMLButtonElement>;
1999
- initialFocusRef: React.RefObject<any> | undefined;
2000
- returnFocusRef: React.RefObject<any> | undefined;
2001
- placement: import("@popperjs/core").Placement;
2002
- id: string;
2003
- visibility: "hidden" | "visible";
2004
- selectedIds: string[] | "all";
2005
- unselectedIds: string[];
2006
- cursorId: string;
2007
- columnCount: number;
2008
- pageSizeRef: React.MutableRefObject<number>;
2009
- cursorIndexRef: {
2010
- readonly current: number;
2011
- };
2012
- UNSTABLE_virtual: {
2013
- virtualItems: import("../../collection/lib/react-virtual").VirtualItem[];
2014
- totalSize: number;
2015
- scrollToOffset: (index: number, options?: import("../../collection/lib/react-virtual").ScrollToOffsetOptions | undefined) => void;
2016
- scrollToIndex: (index: number, options?: import("../../collection/lib/react-virtual").ScrollToIndexOptions | undefined) => void;
2017
- measure: () => void;
2018
- };
2019
- UNSTABLE_defaultItemHeight: number;
2020
- containerRef: React.RefObject<HTMLDivElement>;
2021
- orientation: "horizontal" | "vertical";
2022
- indexRef: React.MutableRefObject<number>;
2023
- nonInteractiveIds: string[];
2024
- isVirtualized: boolean;
2025
- items: import("../..").Item<any>[];
2026
- mode: "multiple" | "single";
2027
- value: string | undefined;
2028
- inputRef: React.RefObject<HTMLInputElement>;
2029
- width: number;
2030
- };
2031
- events: {
2032
- setWidth(width: number): void;
2033
- updatePlacement(data: {
2034
- placement: import("@popperjs/core").Placement;
2035
- }): void;
2036
- show(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
2037
- hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
2038
- select(data: {
2039
- id: string;
2040
- }): void;
2041
- selectAll(): void;
2042
- unselectAll(): void;
2043
- goTo(data: {
2044
- id: string;
2045
- }): void;
2046
- goToNext(): void;
2047
- goToPrevious(): void;
2048
- goToPreviousRow(): void;
2049
- goToNextRow(): void;
2050
- goToFirst(): void;
2051
- goToLast(): void;
2052
- goToFirstOfRow(): void;
2053
- goToLastOfRow(): void;
2054
- goToNextPage(): void;
2055
- goToPreviousPage(): void;
2056
- registerItem(data: {
2057
- item: any;
2058
- textValue: string;
2059
- }): void;
2060
- unregisterItem(data: {
2061
- id: string;
2062
- }): void;
2063
- updateItemHeight(data: {
2064
- value: number;
2065
- }): void;
2066
- };
2067
- onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
2068
- selection: import("../../collection/lib/useSelectionListModel").SelectionManager;
2069
- navigation: import("../../collection/lib/useCursorListModel").NavigationManager;
2070
- getId: (item: any) => string;
2071
- }>;
1990
+ Icon: (elemProps: import("../..").SystemIconProps) => React.JSX.Element;
1991
+ Text: ({ children }: {
1992
+ children?: React.ReactNode;
1993
+ }) => React.JSX.Element;
2072
1994
  };
2073
1995
  Card: import("@workday/canvas-kit-react/common").ElementComponentM<"div", import("./ComboboxCard").ComboboxCardProps, {
2074
1996
  state: {
@@ -1 +1 @@
1
- {"version":3,"file":"Combobox.d.ts","sourceRoot":"","sources":["../../../../combobox/lib/Combobox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,MAAM,WAAW,aAAa;IAC5B;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAIjB;;;OAGG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAEH;;;OAGG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAKL,CAAC"}
1
+ {"version":3,"file":"Combobox.d.ts","sourceRoot":"","sources":["../../../../combobox/lib/Combobox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,MAAM,WAAW,aAAa;IAC5B;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAIjB;;;OAGG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAEH;;;OAGG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAKL,CAAC"}
@@ -264,7 +264,7 @@ export declare const ComboboxMenu: import("@workday/canvas-kit-react/common").El
264
264
  * `Combobox.Menu.List` and will be passed to the optional `onSelect` callback of the
265
265
  * `ComboboxModel`. `Combobox.Menu.Item` can contain any HTML.
266
266
  */
267
- Item: import("@workday/canvas-kit-react/common").ElementComponentM<"li", import("./ComboboxMenuItem").ComboboxMenuItemProps, {
267
+ Item: import("@workday/canvas-kit-react/common").ElementComponentM<"li", import("../../menu/lib/MenuOption").MenuOptionProps, {
268
268
  state: {
269
269
  stackRef: React.RefObject<HTMLDivElement>;
270
270
  targetRef: React.RefObject<HTMLButtonElement>;
@@ -296,12 +296,8 @@ export declare const ComboboxMenu: import("@workday/canvas-kit-react/common").El
296
296
  isVirtualized: boolean;
297
297
  items: import("../..").Item<any>[];
298
298
  mode: "multiple" | "single";
299
- value: string | undefined;
300
- inputRef: React.RefObject<HTMLInputElement>;
301
- width: number;
302
299
  };
303
300
  events: {
304
- setWidth(width: number): void;
305
301
  updatePlacement(data: {
306
302
  placement: import("@popperjs/core").Placement;
307
303
  }): void;
@@ -336,88 +332,14 @@ export declare const ComboboxMenu: import("@workday/canvas-kit-react/common").El
336
332
  value: number;
337
333
  }): void;
338
334
  };
339
- onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
340
335
  selection: import("../../collection/lib/useSelectionListModel").SelectionManager;
341
336
  navigation: import("../../collection/lib/useCursorListModel").NavigationManager;
342
337
  getId: (item: any) => string;
343
338
  }> & {
344
- Icon: import("@workday/canvas-kit-react/common").ElementComponentM<"span", import("../..").SystemIconProps & React.HTMLAttributes<HTMLSpanElement>, {
345
- state: {
346
- stackRef: React.RefObject<HTMLDivElement>;
347
- targetRef: React.RefObject<HTMLButtonElement>;
348
- initialFocusRef: React.RefObject<any> | undefined;
349
- returnFocusRef: React.RefObject<any> | undefined;
350
- placement: import("@popperjs/core").Placement;
351
- id: string;
352
- visibility: "hidden" | "visible";
353
- selectedIds: string[] | "all";
354
- unselectedIds: string[];
355
- cursorId: string;
356
- columnCount: number;
357
- pageSizeRef: React.MutableRefObject<number>;
358
- cursorIndexRef: {
359
- readonly current: number;
360
- };
361
- UNSTABLE_virtual: {
362
- virtualItems: import("../../collection/lib/react-virtual").VirtualItem[];
363
- totalSize: number;
364
- scrollToOffset: (index: number, options?: import("../../collection/lib/react-virtual").ScrollToOffsetOptions | undefined) => void;
365
- scrollToIndex: (index: number, options?: import("../../collection/lib/react-virtual").ScrollToIndexOptions | undefined) => void;
366
- measure: () => void;
367
- };
368
- UNSTABLE_defaultItemHeight: number;
369
- containerRef: React.RefObject<HTMLDivElement>;
370
- orientation: "horizontal" | "vertical";
371
- indexRef: React.MutableRefObject<number>;
372
- nonInteractiveIds: string[];
373
- isVirtualized: boolean;
374
- items: import("../..").Item<any>[];
375
- mode: "multiple" | "single";
376
- value: string | undefined;
377
- inputRef: React.RefObject<HTMLInputElement>;
378
- width: number;
379
- };
380
- events: {
381
- setWidth(width: number): void;
382
- updatePlacement(data: {
383
- placement: import("@popperjs/core").Placement;
384
- }): void;
385
- show(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
386
- hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
387
- select(data: {
388
- id: string;
389
- }): void;
390
- selectAll(): void;
391
- unselectAll(): void;
392
- goTo(data: {
393
- id: string;
394
- }): void;
395
- goToNext(): void;
396
- goToPrevious(): void;
397
- goToPreviousRow(): void;
398
- goToNextRow(): void;
399
- goToFirst(): void;
400
- goToLast(): void;
401
- goToFirstOfRow(): void;
402
- goToLastOfRow(): void;
403
- goToNextPage(): void;
404
- goToPreviousPage(): void;
405
- registerItem(data: {
406
- item: any;
407
- textValue: string;
408
- }): void;
409
- unregisterItem(data: {
410
- id: string;
411
- }): void;
412
- updateItemHeight(data: {
413
- value: number;
414
- }): void;
415
- };
416
- onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
417
- selection: import("../../collection/lib/useSelectionListModel").SelectionManager;
418
- navigation: import("../../collection/lib/useCursorListModel").NavigationManager;
419
- getId: (item: any) => string;
420
- }>;
339
+ Icon: (elemProps: import("../..").SystemIconProps) => React.JSX.Element;
340
+ Text: ({ children }: {
341
+ children?: React.ReactNode;
342
+ }) => React.JSX.Element;
421
343
  };
422
344
  /**
423
345
  * `Combobox.Menu.Card` is a non-semantic element used to give the dropdown menu its distinct visual
@@ -1 +1 @@
1
- {"version":3,"file":"ComboboxMenu.d.ts","sourceRoot":"","sources":["../../../../combobox/lib/ComboboxMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAW1B,MAAM,WAAW,iBAAiB;IAChC;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAGrB;;;;;;OAMG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAEH;;;;;;;;;;;;;;;;;;;;OAoBG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAEH;;;;OAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAEH;;;;OAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAML,CAAC"}
1
+ {"version":3,"file":"ComboboxMenu.d.ts","sourceRoot":"","sources":["../../../../combobox/lib/ComboboxMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAU1B,MAAM,WAAW,iBAAiB;IAChC;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAGrB;;;;;;OAMG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAEH;;;;;;;;;;;;;;;;;;;;OAoBG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAEH;;;;OAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAEH;;;;OAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAML,CAAC"}
@@ -3,7 +3,6 @@ import { createSubcomponent } from '@workday/canvas-kit-react/common';
3
3
  import { Menu } from '@workday/canvas-kit-react/menu';
4
4
  import { useComboboxModel } from './hooks/useComboboxModel';
5
5
  import { ComboboxMenuList } from './ComboboxMenuList';
6
- import { ComboboxMenuItem } from './ComboboxMenuItem';
7
6
  import { ComboboxCard } from './ComboboxCard';
8
7
  import { ComboboxMenuPopper } from './ComboboxPopper';
9
8
  export const ComboboxMenu = createSubcomponent()({
@@ -44,7 +43,7 @@ export const ComboboxMenu = createSubcomponent()({
44
43
  * `Combobox.Menu.List` and will be passed to the optional `onSelect` callback of the
45
44
  * `ComboboxModel`. `Combobox.Menu.Item` can contain any HTML.
46
45
  */
47
- Item: ComboboxMenuItem,
46
+ Item: Menu.Option,
48
47
  /**
49
48
  * `Combobox.Menu.Card` is a non-semantic element used to give the dropdown menu its distinct visual
50
49
  * cue that the dropdown menu is floating above other content. `Combobox.Menu.Card` usually contains a