@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.
- package/collection/index.ts +1 -0
- package/collection/lib/useListItemActiveDescendant.ts +26 -0
- package/combobox/lib/ComboboxMenu.tsx +1 -2
- package/combobox/lib/ComboboxMenuItem.tsx +3 -91
- package/dist/commonjs/action-bar/lib/ActionBar.d.ts +82 -10
- package/dist/commonjs/action-bar/lib/ActionBar.d.ts.map +1 -1
- package/dist/commonjs/avatar/lib/Avatar.js +21 -21
- package/dist/commonjs/badge/lib/CountBadge.js +3 -3
- package/dist/commonjs/breadcrumbs/lib/Breadcrumbs.d.ts +1 -1
- package/dist/commonjs/breadcrumbs/lib/BreadcrumbsMenu.d.ts +2 -2
- package/dist/commonjs/button/lib/BaseButton.js +21 -21
- package/dist/commonjs/button/lib/DeleteButton.js +1 -1
- package/dist/commonjs/button/lib/PrimaryButton.js +2 -2
- package/dist/commonjs/button/lib/SecondaryButton.js +2 -2
- package/dist/commonjs/button/lib/TertiaryButton.js +18 -18
- package/dist/commonjs/card/lib/Card.js +1 -1
- package/dist/commonjs/card/lib/CardBody.js +1 -1
- package/dist/commonjs/card/lib/CardHeading.js +1 -1
- package/dist/commonjs/checkbox/lib/CheckBackground.js +3 -3
- package/dist/commonjs/checkbox/lib/CheckboxCheck.js +5 -5
- package/dist/commonjs/checkbox/lib/CheckboxContainer.js +1 -1
- package/dist/commonjs/checkbox/lib/CheckboxInput.js +5 -5
- package/dist/commonjs/checkbox/lib/CheckboxRipple.js +1 -1
- package/dist/commonjs/collection/index.d.ts +1 -0
- package/dist/commonjs/collection/index.d.ts.map +1 -1
- package/dist/commonjs/collection/index.js +1 -0
- package/dist/commonjs/collection/lib/ListBox.js +4 -4
- package/dist/commonjs/collection/lib/useListItemActiveDescendant.d.ts +69 -0
- package/dist/commonjs/collection/lib/useListItemActiveDescendant.d.ts.map +1 -0
- package/dist/commonjs/collection/lib/useListItemActiveDescendant.js +25 -0
- package/dist/commonjs/combobox/lib/Combobox.d.ts +5 -83
- package/dist/commonjs/combobox/lib/Combobox.d.ts.map +1 -1
- package/dist/commonjs/combobox/lib/ComboboxMenu.d.ts +5 -83
- package/dist/commonjs/combobox/lib/ComboboxMenu.d.ts.map +1 -1
- package/dist/commonjs/combobox/lib/ComboboxMenu.js +1 -2
- package/dist/commonjs/combobox/lib/ComboboxMenuItem.d.ts +18 -260
- package/dist/commonjs/combobox/lib/ComboboxMenuItem.d.ts.map +1 -1
- package/dist/commonjs/combobox/lib/ComboboxMenuItem.js +3 -59
- package/dist/commonjs/combobox/lib/ComboboxMenuList.js +1 -1
- package/dist/commonjs/common/lib/AccessibleHide.js +1 -1
- package/dist/commonjs/common/lib/CanvasProvider.js +1 -1
- package/dist/commonjs/form-field/lib/FormFieldContainer.js +1 -1
- package/dist/commonjs/form-field/lib/FormFieldField.js +1 -1
- package/dist/commonjs/form-field/lib/FormFieldGroupLabel.js +5 -5
- package/dist/commonjs/form-field/lib/FormFieldGroupList.js +3 -3
- package/dist/commonjs/form-field/lib/FormFieldHint.js +3 -3
- package/dist/commonjs/form-field/lib/FormFieldLabel.js +5 -5
- package/dist/commonjs/form-field/lib/formFieldStencil.js +8 -8
- package/dist/commonjs/icon/lib/AccentIcon.js +2 -2
- package/dist/commonjs/icon/lib/AppletIcon.js +1 -1
- package/dist/commonjs/icon/lib/Graphic.js +2 -2
- package/dist/commonjs/icon/lib/Svg.js +2 -2
- package/dist/commonjs/icon/lib/SystemIcon.js +1 -1
- package/dist/commonjs/icon/lib/SystemIconCircle.js +1 -1
- package/dist/commonjs/loading-dots/lib/LoadingDots.js +3 -3
- package/dist/commonjs/menu/index.d.ts +2 -1
- package/dist/commonjs/menu/index.d.ts.map +1 -1
- package/dist/commonjs/menu/index.js +5 -1
- package/dist/commonjs/menu/lib/Menu.d.ts +89 -9
- package/dist/commonjs/menu/lib/Menu.d.ts.map +1 -1
- package/dist/commonjs/menu/lib/Menu.js +10 -0
- package/dist/commonjs/menu/lib/MenuCard.js +1 -1
- package/dist/commonjs/menu/lib/MenuItem.d.ts +12 -19
- package/dist/commonjs/menu/lib/MenuItem.d.ts.map +1 -1
- package/dist/commonjs/menu/lib/MenuItem.js +20 -91
- package/dist/commonjs/menu/lib/MenuList.js +3 -3
- package/dist/commonjs/menu/lib/MenuOption.d.ts +192 -0
- package/dist/commonjs/menu/lib/MenuOption.d.ts.map +1 -0
- package/dist/commonjs/menu/lib/MenuOption.js +89 -0
- package/dist/commonjs/modal/lib/ModalBody.js +1 -1
- package/dist/commonjs/modal/lib/ModalCard.js +1 -1
- package/dist/commonjs/modal/lib/ModalHeading.js +1 -1
- package/dist/commonjs/modal/lib/ModalOverflowOverlay.js +1 -1
- package/dist/commonjs/modal/lib/ModalOverlay.js +2 -2
- package/dist/commonjs/popup/lib/PopupBody.js +1 -1
- package/dist/commonjs/popup/lib/PopupCard.js +2 -2
- package/dist/commonjs/popup/lib/PopupCloseIcon.js +1 -1
- package/dist/commonjs/popup/lib/PopupHeading.js +1 -1
- package/dist/commonjs/select/lib/Select.d.ts +59 -962
- package/dist/commonjs/select/lib/Select.d.ts.map +1 -1
- package/dist/commonjs/select/lib/Select.js +5 -5
- package/dist/commonjs/switch/lib/Switch.js +7 -7
- package/dist/commonjs/table/lib/Table.js +1 -1
- package/dist/commonjs/table/lib/TableBody.js +1 -1
- package/dist/commonjs/table/lib/TableCaption.js +1 -1
- package/dist/commonjs/table/lib/TableCell.js +1 -1
- package/dist/commonjs/table/lib/TableFooter.js +1 -1
- package/dist/commonjs/table/lib/TableHead.js +1 -1
- package/dist/commonjs/table/lib/TableHeader.js +1 -1
- package/dist/commonjs/table/lib/TableRow.js +1 -1
- package/dist/commonjs/tabs/lib/Tabs.d.ts +82 -10
- package/dist/commonjs/tabs/lib/Tabs.d.ts.map +1 -1
- package/dist/commonjs/text/lib/LabelText.js +6 -6
- package/dist/commonjs/text/lib/Text.js +16 -16
- package/dist/commonjs/text/lib/TypeLevelComponents.js +4 -4
- package/dist/commonjs/text-area/lib/TextArea.js +5 -5
- package/dist/commonjs/text-input/lib/InputGroup.js +6 -6
- package/dist/commonjs/text-input/lib/TextInput.js +5 -5
- package/dist/commonjs/toast/lib/Toast.js +1 -1
- package/dist/commonjs/toast/lib/ToastBody.js +1 -1
- package/dist/commonjs/toast/lib/ToastCloseIcon.js +1 -1
- package/dist/commonjs/toast/lib/ToastIcon.js +1 -1
- package/dist/commonjs/toast/lib/ToastMessage.js +1 -1
- package/dist/es6/action-bar/lib/ActionBar.d.ts +82 -10
- package/dist/es6/action-bar/lib/ActionBar.d.ts.map +1 -1
- package/dist/es6/avatar/lib/Avatar.js +21 -21
- package/dist/es6/badge/lib/CountBadge.js +3 -3
- package/dist/es6/breadcrumbs/lib/Breadcrumbs.d.ts +1 -1
- package/dist/es6/breadcrumbs/lib/BreadcrumbsMenu.d.ts +2 -2
- package/dist/es6/button/lib/BaseButton.js +21 -21
- package/dist/es6/button/lib/DeleteButton.js +1 -1
- package/dist/es6/button/lib/PrimaryButton.js +2 -2
- package/dist/es6/button/lib/SecondaryButton.js +2 -2
- package/dist/es6/button/lib/TertiaryButton.js +18 -18
- package/dist/es6/card/lib/Card.js +1 -1
- package/dist/es6/card/lib/CardBody.js +1 -1
- package/dist/es6/card/lib/CardHeading.js +1 -1
- package/dist/es6/checkbox/lib/CheckBackground.js +3 -3
- package/dist/es6/checkbox/lib/CheckboxCheck.js +5 -5
- package/dist/es6/checkbox/lib/CheckboxContainer.js +1 -1
- package/dist/es6/checkbox/lib/CheckboxInput.js +5 -5
- package/dist/es6/checkbox/lib/CheckboxRipple.js +1 -1
- package/dist/es6/collection/index.d.ts +1 -0
- package/dist/es6/collection/index.d.ts.map +1 -1
- package/dist/es6/collection/index.js +1 -0
- package/dist/es6/collection/lib/ListBox.js +4 -4
- package/dist/es6/collection/lib/useListItemActiveDescendant.d.ts +69 -0
- package/dist/es6/collection/lib/useListItemActiveDescendant.d.ts.map +1 -0
- package/dist/es6/collection/lib/useListItemActiveDescendant.js +22 -0
- package/dist/es6/combobox/lib/Combobox.d.ts +5 -83
- package/dist/es6/combobox/lib/Combobox.d.ts.map +1 -1
- package/dist/es6/combobox/lib/ComboboxMenu.d.ts +5 -83
- package/dist/es6/combobox/lib/ComboboxMenu.d.ts.map +1 -1
- package/dist/es6/combobox/lib/ComboboxMenu.js +1 -2
- package/dist/es6/combobox/lib/ComboboxMenuItem.d.ts +18 -260
- package/dist/es6/combobox/lib/ComboboxMenuItem.d.ts.map +1 -1
- package/dist/es6/combobox/lib/ComboboxMenuItem.js +3 -56
- package/dist/es6/combobox/lib/ComboboxMenuList.js +1 -1
- package/dist/es6/common/lib/AccessibleHide.js +1 -1
- package/dist/es6/common/lib/CanvasProvider.js +1 -1
- package/dist/es6/form-field/lib/FormFieldContainer.js +1 -1
- package/dist/es6/form-field/lib/FormFieldField.js +1 -1
- package/dist/es6/form-field/lib/FormFieldGroupLabel.js +5 -5
- package/dist/es6/form-field/lib/FormFieldGroupList.js +3 -3
- package/dist/es6/form-field/lib/FormFieldHint.js +3 -3
- package/dist/es6/form-field/lib/FormFieldLabel.js +5 -5
- package/dist/es6/form-field/lib/formFieldStencil.js +8 -8
- package/dist/es6/icon/lib/AccentIcon.js +2 -2
- package/dist/es6/icon/lib/AppletIcon.js +1 -1
- package/dist/es6/icon/lib/Graphic.js +2 -2
- package/dist/es6/icon/lib/Svg.js +2 -2
- package/dist/es6/icon/lib/SystemIcon.js +1 -1
- package/dist/es6/icon/lib/SystemIconCircle.js +1 -1
- package/dist/es6/loading-dots/lib/LoadingDots.js +3 -3
- package/dist/es6/menu/index.d.ts +2 -1
- package/dist/es6/menu/index.d.ts.map +1 -1
- package/dist/es6/menu/index.js +2 -1
- package/dist/es6/menu/lib/Menu.d.ts +89 -9
- package/dist/es6/menu/lib/Menu.d.ts.map +1 -1
- package/dist/es6/menu/lib/Menu.js +10 -0
- package/dist/es6/menu/lib/MenuCard.js +1 -1
- package/dist/es6/menu/lib/MenuItem.d.ts +12 -19
- package/dist/es6/menu/lib/MenuItem.d.ts.map +1 -1
- package/dist/es6/menu/lib/MenuItem.js +22 -93
- package/dist/es6/menu/lib/MenuList.js +3 -3
- package/dist/es6/menu/lib/MenuOption.d.ts +192 -0
- package/dist/es6/menu/lib/MenuOption.d.ts.map +1 -0
- package/dist/es6/menu/lib/MenuOption.js +63 -0
- package/dist/es6/modal/lib/ModalBody.js +1 -1
- package/dist/es6/modal/lib/ModalCard.js +1 -1
- package/dist/es6/modal/lib/ModalHeading.js +1 -1
- package/dist/es6/modal/lib/ModalOverflowOverlay.js +1 -1
- package/dist/es6/modal/lib/ModalOverlay.js +2 -2
- package/dist/es6/popup/lib/PopupBody.js +1 -1
- package/dist/es6/popup/lib/PopupCard.js +2 -2
- package/dist/es6/popup/lib/PopupCloseIcon.js +1 -1
- package/dist/es6/popup/lib/PopupHeading.js +1 -1
- package/dist/es6/select/lib/Select.d.ts +59 -962
- package/dist/es6/select/lib/Select.d.ts.map +1 -1
- package/dist/es6/select/lib/Select.js +5 -5
- package/dist/es6/switch/lib/Switch.js +7 -7
- package/dist/es6/table/lib/Table.js +1 -1
- package/dist/es6/table/lib/TableBody.js +1 -1
- package/dist/es6/table/lib/TableCaption.js +1 -1
- package/dist/es6/table/lib/TableCell.js +1 -1
- package/dist/es6/table/lib/TableFooter.js +1 -1
- package/dist/es6/table/lib/TableHead.js +1 -1
- package/dist/es6/table/lib/TableHeader.js +1 -1
- package/dist/es6/table/lib/TableRow.js +1 -1
- package/dist/es6/tabs/lib/Tabs.d.ts +82 -10
- package/dist/es6/tabs/lib/Tabs.d.ts.map +1 -1
- package/dist/es6/text/lib/LabelText.js +6 -6
- package/dist/es6/text/lib/Text.js +16 -16
- package/dist/es6/text/lib/TypeLevelComponents.js +4 -4
- package/dist/es6/text-area/lib/TextArea.js +5 -5
- package/dist/es6/text-input/lib/InputGroup.js +6 -6
- package/dist/es6/text-input/lib/TextInput.js +5 -5
- package/dist/es6/toast/lib/Toast.js +1 -1
- package/dist/es6/toast/lib/ToastBody.js +1 -1
- package/dist/es6/toast/lib/ToastCloseIcon.js +1 -1
- package/dist/es6/toast/lib/ToastIcon.js +1 -1
- package/dist/es6/toast/lib/ToastMessage.js +1 -1
- package/menu/index.ts +2 -1
- package/menu/lib/Menu.tsx +10 -0
- package/menu/lib/MenuItem.tsx +107 -99
- package/menu/lib/MenuOption.tsx +138 -0
- package/package.json +4 -4
- package/select/lib/Select.tsx +1 -1
|
@@ -34,71 +34,71 @@ const icon_1 = require("@workday/canvas-kit-react/icon");
|
|
|
34
34
|
const tertiaryButtonStencil = (0, canvas_kit_styling_1.createStencil)({
|
|
35
35
|
extends: BaseButton_1.buttonStencil,
|
|
36
36
|
// Base Styles
|
|
37
|
-
base: { name: "
|
|
37
|
+
base: { name: "e3031t", styles: "box-sizing:border-box;padding-inline:var(--cnvs-sys-space-x2);min-width:auto;text-decoration:underline;border:var(--cnvs-sys-space-zero);--background-button-65cb05:transparent;--borderRadius-button-65cb05:var(--cnvs-sys-shape-x1);--label-button-65cb05:var(--cnvs-brand-primary-base);--color-system-icon-583fae:var(--icon-b5fb58, var(--cnvs-brand-primary-base));&:focus-visible, &.focus{--background-button-65cb05:transparent;--label-button-65cb05:var(--cnvs-brand-primary-base);--boxShadowInner-button-65cb05:var(--cnvs-brand-common-focus-outline);--boxShadowOuter-button-65cb05:var(--cnvs-brand-common-focus-outline);--color-system-icon-583fae:var(--icon-2ae7b1, var(--cnvs-brand-primary-base));box-shadow:0 0 0 0px var(--cnvs-sys-color-border-inverse), 0 0 0 2px var(--cnvs-brand-common-focus-outline);}&:hover, &.hover{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-default);--label-button-65cb05:var(--cnvs-brand-primary-dark);--color-system-icon-583fae:var(--icon-c4b8f8, var(--cnvs-brand-primary-dark));}&:active, &.active{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-strong);--label-button-65cb05:var(--cnvs-brand-primary-darkest);--color-system-icon-583fae:var(--icon-93b1ce, var(--cnvs-brand-primary-darkest));}&:disabled, &.disabled{--background-button-65cb05:transparent;--label-button-65cb05:var(--cnvs-brand-primary-base);--opacity-button-65cb05:var(--cnvs-sys-opacity-disabled);--color-system-icon-583fae:var(--icon-93b1ce, var(--cnvs-brand-primary-base));}" },
|
|
38
38
|
modifiers: {
|
|
39
39
|
// IconPosition Styles
|
|
40
40
|
iconPosition: {
|
|
41
|
-
only: { name: "
|
|
42
|
-
start: { name: "
|
|
43
|
-
end: { name: "
|
|
41
|
+
only: { name: "e3031u", styles: "padding:0;border-radius:var(--cnvs-sys-shape-round);--color-system-icon-583fae:var(--icon-b5fb58, var(--cnvs-sys-color-fg-strong));&:focus-visible, &.focus{--color-system-icon-583fae:var(--icon-2ae7b1, var(--cnvs-sys-color-fg-strong));}&:hover, &.hover{--color-system-icon-583fae:var(--icon-c4b8f8, var(--cnvs-sys-color-fg-strong));}&:active, &.active{--color-system-icon-583fae:var(--icon-93b1ce, var(--cnvs-sys-color-fg-strong));}&:disabled, &.disabled{--color-system-icon-583fae:var(--icon-c34400, var(--cnvs-sys-color-fg-strong));}" },
|
|
42
|
+
start: { name: "e3031v", styles: "" },
|
|
43
|
+
end: { name: "e3031w", styles: "" }
|
|
44
44
|
},
|
|
45
45
|
isThemeable: {
|
|
46
|
-
true: { name: "
|
|
46
|
+
true: { name: "e3031x", styles: "--color-system-icon-583fae:var(--icon-b5fb58, var(--cnvs-brand-primary-base));&:focus-visible, &.focus{--color-system-icon-583fae:var(--icon-2ae7b1, var(--cnvs-brand-primary-base));}&:hover, &.hover{--color-system-icon-583fae:var(--icon-c4b8f8, var(--cnvs-brand-primary-dark));}&:active, &.active{--color-system-icon-583fae:var(--icon-93b1ce, var(--cnvs-brand-primary-darkest));}&:disabled, &.disabled{--color-system-icon-583fae:var(--icon-c34400, var(--cnvs-brand-primary-base));}" }
|
|
47
47
|
},
|
|
48
48
|
variant: {
|
|
49
49
|
// Inverse Styles
|
|
50
|
-
inverse: { name: "
|
|
50
|
+
inverse: { name: "e3031y", styles: "--background-button-65cb05:transparent;--label-button-65cb05:var(--cnvs-sys-color-fg-inverse);--color-system-icon-583fae:var(--icon-b5fb58, var(--cnvs-sys-color-fg-inverse));&:focus-visible, &.focus{--background-button-65cb05:var(--cnvs-sys-color-bg-default);--label-button-65cb05:var(--cnvs-sys-color-fg-strong);--color-system-icon-583fae:var(--icon-2ae7b1, var(--cnvs-sys-color-fg-strong));box-shadow:inset 0 0 0 2px var(--cnvs-sys-color-border-contrast-default), 0 0 0 2px var(--cnvs-sys-color-border-inverse);}&:hover, &.hover{--background-button-65cb05:var(--cnvs-sys-color-bg-default);--label-button-65cb05:var(--cnvs-sys-color-fg-strong);--color-system-icon-583fae:var(--icon-c4b8f8, var(--cnvs-sys-color-fg-strong));}&:active, &.active{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-soft);--label-button-65cb05:var(--cnvs-sys-color-fg-strong);--color-system-icon-583fae:var(--icon-93b1ce, var(--cnvs-sys-color-fg-strong));}&:disabled, &.disabled{--background-button-65cb05:transparent;--label-button-65cb05:var(--cnvs-sys-color-fg-inverse);--color-system-icon-583fae:var(--icon-c34400, var(--cnvs-sys-color-fg-inverse));}" }
|
|
51
51
|
}
|
|
52
52
|
},
|
|
53
53
|
// Compound Modifier Styles
|
|
54
54
|
compound: [
|
|
55
55
|
{
|
|
56
56
|
modifiers: { size: 'large', iconPosition: 'only' },
|
|
57
|
-
styles: { name: "
|
|
57
|
+
styles: { name: "e3031z", styles: "min-width:calc(var(--cnvs-sys-space-x4) * 3);" }
|
|
58
58
|
},
|
|
59
59
|
{
|
|
60
60
|
modifiers: { size: 'large', iconPosition: 'start' },
|
|
61
|
-
styles: { name: "
|
|
61
|
+
styles: { name: "e30320", styles: "padding-inline-start:var(--cnvs-sys-space-x2);padding-inline-end:var(--cnvs-sys-space-x3);" }
|
|
62
62
|
},
|
|
63
63
|
{
|
|
64
64
|
modifiers: { size: 'large', iconPosition: 'end' },
|
|
65
|
-
styles: { name: "
|
|
65
|
+
styles: { name: "e30321", styles: "padding-inline-start:var(--cnvs-sys-space-x3);padding-inline-end:var(--cnvs-sys-space-x2);" }
|
|
66
66
|
},
|
|
67
67
|
{
|
|
68
68
|
modifiers: { size: 'medium', iconPosition: 'only' },
|
|
69
|
-
styles: { name: "
|
|
69
|
+
styles: { name: "e30322", styles: "min-width:var(--cnvs-sys-space-x10);" }
|
|
70
70
|
},
|
|
71
71
|
{
|
|
72
72
|
modifiers: { size: 'medium', iconPosition: 'start' },
|
|
73
|
-
styles: { name: "
|
|
73
|
+
styles: { name: "e30323", styles: "padding-inline-start:var(--cnvs-sys-space-x2);padding-inline-end:var(--cnvs-sys-space-x3);" }
|
|
74
74
|
},
|
|
75
75
|
{
|
|
76
76
|
modifiers: { size: 'medium', iconPosition: 'end' },
|
|
77
|
-
styles: { name: "
|
|
77
|
+
styles: { name: "e30324", styles: "padding-inline-start:var(--cnvs-sys-space-x3);padding-inline-end:var(--cnvs-sys-space-x2);" }
|
|
78
78
|
},
|
|
79
79
|
{
|
|
80
80
|
modifiers: { size: 'small', iconPosition: 'only' },
|
|
81
|
-
styles: { name: "
|
|
81
|
+
styles: { name: "e30325", styles: "min-width:var(--cnvs-sys-space-x8);" }
|
|
82
82
|
},
|
|
83
83
|
{
|
|
84
84
|
modifiers: { size: 'small', iconPosition: 'start' },
|
|
85
|
-
styles: { name: "
|
|
85
|
+
styles: { name: "e30326", styles: "padding-inline-start:var(--cnvs-sys-space-x2);padding-inline-end:var(--cnvs-sys-space-x3);" }
|
|
86
86
|
},
|
|
87
87
|
{
|
|
88
88
|
modifiers: { size: 'small', iconPosition: 'end' },
|
|
89
|
-
styles: { name: "
|
|
89
|
+
styles: { name: "e30327", styles: "padding-inline-start:var(--cnvs-sys-space-x3);padding-inline-end:var(--cnvs-sys-space-x2);" }
|
|
90
90
|
},
|
|
91
91
|
{
|
|
92
92
|
modifiers: { size: 'extraSmall', iconPosition: 'only' },
|
|
93
|
-
styles: { name: "
|
|
93
|
+
styles: { name: "e30328", styles: "min-width:var(--cnvs-sys-space-x6);" }
|
|
94
94
|
},
|
|
95
95
|
{
|
|
96
96
|
modifiers: { size: 'extraSmall', iconPosition: 'start' },
|
|
97
|
-
styles: { name: "
|
|
97
|
+
styles: { name: "e30329", styles: "padding-inline-start:var(--cnvs-sys-space-x1);padding-inline-end:var(--cnvs-sys-space-x2);" }
|
|
98
98
|
},
|
|
99
99
|
{
|
|
100
100
|
modifiers: { size: 'extraSmall', iconPosition: 'end' },
|
|
101
|
-
styles: { name: "
|
|
101
|
+
styles: { name: "e3032a", styles: "padding-inline-start:var(--cnvs-sys-space-x2);padding-inline-end:var(--cnvs-sys-space-x1);" }
|
|
102
102
|
}
|
|
103
103
|
]
|
|
104
104
|
}, "tertiary-button-4896ac");
|
|
@@ -33,7 +33,7 @@ const CardHeading_1 = require("./CardHeading");
|
|
|
33
33
|
const CardBody_1 = require("./CardBody");
|
|
34
34
|
// .cnvs-card
|
|
35
35
|
exports.cardStencil = (0, canvas_kit_styling_1.createStencil)({
|
|
36
|
-
base: { name: "
|
|
36
|
+
base: { name: "e303w", styles: "box-sizing:border-box;box-shadow:var(--cnvs-sys-depth-1);padding:var(--cnvs-sys-space-x8);background-color:var(--cnvs-sys-color-bg-default);border:0.0625rem solid var(--cnvs-sys-color-border-container);border-radius:var(--cnvs-sys-shape-x2);" }
|
|
37
37
|
}, "card-f60e02");
|
|
38
38
|
/**
|
|
39
39
|
* `Card` is a container component that holds a {@link CardBody Card.Body} and an optional
|
|
@@ -32,7 +32,7 @@ const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
|
|
|
32
32
|
// .cnvs-card-body
|
|
33
33
|
exports.cardBodyStencil = (0, canvas_kit_styling_1.createStencil)({
|
|
34
34
|
extends: text_1.textStencil,
|
|
35
|
-
base: { name: "
|
|
35
|
+
base: { name: "e303v", styles: "box-sizing:border-box;" },
|
|
36
36
|
defaultModifiers: { typeLevel: 'subtext.large' }
|
|
37
37
|
}, "card-body-18c24e");
|
|
38
38
|
exports.CardBody = (0, common_1.createComponent)('div')({
|
|
@@ -33,7 +33,7 @@ const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
|
|
|
33
33
|
// .cnvs-card-heading
|
|
34
34
|
exports.cardHeadingStencil = (0, canvas_kit_styling_1.createStencil)({
|
|
35
35
|
extends: text_1.textStencil,
|
|
36
|
-
base: { name: "
|
|
36
|
+
base: { name: "e303u", styles: "box-sizing:border-box;color:var(--cnvs-sys-color-text-strong);font-weight:var(--cnvs-sys-font-weight-bold);margin-bottom:var(--cnvs-sys-space-x6);margin-top:var(--cnvs-sys-space-zero);" },
|
|
37
37
|
defaultModifiers: { typeLevel: 'body.large' }
|
|
38
38
|
}, "card-heading-a7538d");
|
|
39
39
|
exports.CardHeading = (0, common_1.createComponent)('h3')({
|
|
@@ -33,11 +33,11 @@ exports.checkboxBackgroundStencil = (0, canvas_kit_styling_1.createStencil)({
|
|
|
33
33
|
errorRingColorInner: '',
|
|
34
34
|
errorRingColorOuter: '',
|
|
35
35
|
},
|
|
36
|
-
base: { name: "
|
|
36
|
+
base: { name: "e3033j", styles: "box-sizing:border-box;align-items:center;background-color:var(--cnvs-sys-color-bg-default);border-radius:var(--cnvs-sys-shape-half);display:flex;height:calc(var(--cnvs-sys-space-x4) + 0.125rem);justify-content:center;padding:var(--cnvs-sys-space-zero) calc(var(--cnvs-sys-space-x1) / 2);pointer-events:none;position:absolute;transition:border 200ms ease, background 200ms;width:calc(var(--cnvs-sys-space-x4) + 0.125rem);border:0.0625rem solid var(--cnvs-sys-color-border-input-default);" },
|
|
37
37
|
modifiers: {
|
|
38
38
|
error: {
|
|
39
|
-
error: { name: "
|
|
40
|
-
alert: { name: "
|
|
39
|
+
error: { name: "e3033k", styles: "--errorRingColorInner-checkbox-background-8c450a:var(--cnvs-brand-error-base);--errorRingColorOuter-checkbox-background-8c450a:transparent;" },
|
|
40
|
+
alert: { name: "e3033l", styles: "--errorRingColorInner-checkbox-background-8c450a:var(--cnvs-brand-alert-base);--errorRingColorOuter-checkbox-background-8c450a:var(--cnvs-brand-alert-darkest);" }
|
|
41
41
|
}
|
|
42
42
|
}
|
|
43
43
|
}, "checkbox-background-8c450a");
|
|
@@ -32,21 +32,21 @@ const icon_1 = require("@workday/canvas-kit-react/icon");
|
|
|
32
32
|
const canvas_system_icons_web_1 = require("@workday/canvas-system-icons-web");
|
|
33
33
|
const CheckBackground_1 = require("./CheckBackground");
|
|
34
34
|
const checkboxCheckStencil = (0, canvas_kit_styling_1.createStencil)({
|
|
35
|
-
base: { name: "
|
|
35
|
+
base: { name: "e3033m", 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);" },
|
|
36
36
|
modifiers: {
|
|
37
37
|
checked: {
|
|
38
|
-
true: { name: "
|
|
38
|
+
true: { name: "e3033n", styles: "--color-system-icon-583fae:var(--cnvs-brand-primary-accent);opacity:var(--cnvs-sys-opacity-full);transform:scale(1);" }
|
|
39
39
|
},
|
|
40
40
|
indeterminate: {
|
|
41
|
-
true: { name: "
|
|
41
|
+
true: { name: "e3033o", styles: "opacity:var(--cnvs-sys-opacity-full);transform:scale(1);" }
|
|
42
42
|
},
|
|
43
43
|
variant: {
|
|
44
|
-
inverse: { name: "
|
|
44
|
+
inverse: { name: "e3033p", styles: "--color-system-icon-583fae:var(--cnvs-brand-primary-base);& > div{background-color:var(--cnvs-brand-primary-base);}" }
|
|
45
45
|
}
|
|
46
46
|
}
|
|
47
47
|
}, "checkbox-check-1e6620");
|
|
48
48
|
const indeterminateBoxStencil = (0, canvas_kit_styling_1.createStencil)({
|
|
49
|
-
base: { name: "
|
|
49
|
+
base: { name: "e3033q", styles: "box-sizing:border-box;width:0.625rem;height:calc(var(--cnvs-sys-space-x1) / 2);background-color:var(--cnvs-brand-primary-accent);" }
|
|
50
50
|
}, "indeterminate-box-c4442f");
|
|
51
51
|
exports.CheckboxCheck = (0, common_1.createComponent)('div')({
|
|
52
52
|
displayName: 'CheckboxCheck',
|
|
@@ -30,7 +30,7 @@ const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
|
|
|
30
30
|
const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
|
|
31
31
|
const text_1 = require("@workday/canvas-kit-react/text");
|
|
32
32
|
const checkboxContainerStencil = (0, canvas_kit_styling_1.createStencil)({
|
|
33
|
-
base: { name: "
|
|
33
|
+
base: { name: "e3033i", 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);}" }
|
|
34
34
|
}, "checkbox-container-a7381d");
|
|
35
35
|
exports.CheckboxContainer = (0, common_1.createComponent)('div')({
|
|
36
36
|
displayName: 'CheckboxContainer',
|
|
@@ -30,22 +30,22 @@ const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
|
|
|
30
30
|
const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
|
|
31
31
|
const CheckBackground_1 = require("./CheckBackground");
|
|
32
32
|
const checkboxInputStencil = (0, canvas_kit_styling_1.createStencil)({
|
|
33
|
-
base: { name: "
|
|
33
|
+
base: { name: "e3033r", 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);}}}" },
|
|
34
34
|
modifiers: {
|
|
35
35
|
variant: {
|
|
36
|
-
inverse: { name: "
|
|
36
|
+
inverse: { name: "e3033s", 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);}}" }
|
|
37
37
|
},
|
|
38
38
|
disabled: {
|
|
39
|
-
true: { name: "
|
|
39
|
+
true: { name: "e3033t", styles: "&:where(:hover, .hover) ~ span:first-of-type{box-shadow:none;}" }
|
|
40
40
|
},
|
|
41
41
|
error: {
|
|
42
|
-
true: { name: "
|
|
42
|
+
true: { name: "e3033u", 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);}" }
|
|
43
43
|
}
|
|
44
44
|
},
|
|
45
45
|
compound: [
|
|
46
46
|
{
|
|
47
47
|
modifiers: { variant: 'inverse', error: true },
|
|
48
|
-
styles: { name: "
|
|
48
|
+
styles: { name: "e3033v", 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);}" }
|
|
49
49
|
}
|
|
50
50
|
]
|
|
51
51
|
}, "checkbox-input-d394e3");
|
|
@@ -29,7 +29,7 @@ const common_1 = require("@workday/canvas-kit-react/common");
|
|
|
29
29
|
const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
|
|
30
30
|
const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
|
|
31
31
|
const checkboxRippleStencil = (0, canvas_kit_styling_1.createStencil)({
|
|
32
|
-
base: { name: "
|
|
32
|
+
base: { name: "e3033h", 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;" }
|
|
33
33
|
}, "checkbox-ripple-27671c");
|
|
34
34
|
exports.CheckboxRipple = (0, common_1.createComponent)('span')({
|
|
35
35
|
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"}
|
|
@@ -31,6 +31,7 @@ __exportStar(require("./lib/useListLoader"), exports);
|
|
|
31
31
|
__exportStar(require("./lib/useListModel"), exports);
|
|
32
32
|
__exportStar(require("./lib/useGridModel"), exports);
|
|
33
33
|
__exportStar(require("./lib/useListActiveDescendant"), exports);
|
|
34
|
+
__exportStar(require("./lib/useListItemActiveDescendant"), exports);
|
|
34
35
|
__exportStar(require("./lib/useListItemAllowChildStrings"), exports);
|
|
35
36
|
var ListBox_1 = require("./lib/ListBox");
|
|
36
37
|
Object.defineProperty(exports, "ListBox", { enumerable: true, get: function () { return ListBox_1.ListBox; } });
|
|
@@ -28,16 +28,16 @@ exports.useListBox = (0, common_1.createElemPropsHook)(useListModel_1.useListMod
|
|
|
28
28
|
};
|
|
29
29
|
});
|
|
30
30
|
const listBoxContainerStencil = (0, canvas_kit_styling_1.createStencil)({
|
|
31
|
-
base: { name: "
|
|
31
|
+
base: { name: "e3032j", styles: "box-sizing:border-box;" },
|
|
32
32
|
modifiers: {
|
|
33
33
|
orientation: {
|
|
34
|
-
vertical: { name: "
|
|
35
|
-
horizontal: { name: "
|
|
34
|
+
vertical: { name: "e3032k", styles: "overflow-y:auto;" },
|
|
35
|
+
horizontal: { name: "e3032l", styles: "overflow-y:undefined;" }
|
|
36
36
|
}
|
|
37
37
|
}
|
|
38
38
|
}, "list-box-container-625603");
|
|
39
39
|
const listBoxStencil = (0, canvas_kit_styling_1.createStencil)({
|
|
40
|
-
base: { name: "
|
|
40
|
+
base: { name: "e3032m", styles: "box-sizing:border-box;display:flex;flex-direction:column;margin-top:var(--cnvs-sys-space-zero);margin-bottom:var(--cnvs-sys-space-zero);" }
|
|
41
41
|
}, "list-box-9c3639");
|
|
42
42
|
/**
|
|
43
43
|
* 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,25 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.useListItemActiveDescendant = void 0;
|
|
4
|
+
const common_1 = require("@workday/canvas-kit-react/common");
|
|
5
|
+
const useCursorListModel_1 = require("./useCursorListModel");
|
|
6
|
+
/**
|
|
7
|
+
* This elemProps hook is used for cursor navigation by using [Active
|
|
8
|
+
* Descendant](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_focus_activedescendant).
|
|
9
|
+
* This hook should be applied to List Items, not the list (use {@link useListActiveDescendant} for the list).
|
|
10
|
+
* This hook adds the focus class so that lists using `aria-activedescendant` get the correct
|
|
11
|
+
* visual cue for visual users.
|
|
12
|
+
*
|
|
13
|
+
* ```ts
|
|
14
|
+
* const useMyItem = composeHooks(
|
|
15
|
+
* useListItemActiveDescendant, // adds `aria-activedescendant` support
|
|
16
|
+
* useListItemRegister
|
|
17
|
+
* );
|
|
18
|
+
```
|
|
19
|
+
*/
|
|
20
|
+
exports.useListItemActiveDescendant = (0, common_1.createElemPropsHook)(useCursorListModel_1.useCursorListModel)((model, _ref, elemProps = {}) => {
|
|
21
|
+
const id = elemProps['data-id'] || '';
|
|
22
|
+
return {
|
|
23
|
+
className: model.state.cursorId && model.state.cursorId === id ? 'focus' : '',
|
|
24
|
+
};
|
|
25
|
+
});
|
|
@@ -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("
|
|
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:
|
|
1996
|
-
|
|
1997
|
-
|
|
1998
|
-
|
|
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
|
|
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"}
|