@workday/canvas-kit-react 10.0.3 → 10.0.4
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/combobox/lib/Combobox.tsx +1 -1
- package/combobox/lib/ComboboxCard.tsx +1 -1
- package/combobox/lib/ComboboxInput.tsx +2 -1
- package/combobox/lib/ComboboxMenu.tsx +1 -1
- package/combobox/lib/ComboboxMenuItem.tsx +1 -1
- package/combobox/lib/ComboboxMenuList.tsx +1 -1
- package/combobox/lib/hooks/useComboboxInput.ts +4 -6
- package/combobox/lib/hooks/useComboboxListKeyboardHandler.ts +1 -1
- package/dist/commonjs/button/lib/BaseButton.js +17 -17
- 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 +15 -15
- package/dist/commonjs/combobox/lib/Combobox.js +2 -2
- package/dist/commonjs/combobox/lib/ComboboxCard.js +3 -3
- package/dist/commonjs/combobox/lib/ComboboxInput.d.ts.map +1 -1
- package/dist/commonjs/combobox/lib/ComboboxInput.js +4 -3
- package/dist/commonjs/combobox/lib/ComboboxMenu.js +2 -2
- package/dist/commonjs/combobox/lib/ComboboxMenuItem.js +2 -2
- package/dist/commonjs/combobox/lib/ComboboxMenuList.js +2 -2
- package/dist/commonjs/combobox/lib/hooks/useComboboxInput.d.ts.map +1 -1
- package/dist/commonjs/combobox/lib/hooks/useComboboxInput.js +6 -3
- package/dist/commonjs/combobox/lib/hooks/useComboboxListKeyboardHandler.js +2 -2
- package/dist/commonjs/select/lib/Select.d.ts +14 -1
- package/dist/commonjs/select/lib/Select.d.ts.map +1 -1
- package/dist/commonjs/select/lib/Select.js +7 -6
- package/dist/es6/button/lib/BaseButton.js +17 -17
- 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 +15 -15
- package/dist/es6/combobox/lib/Combobox.js +1 -1
- package/dist/es6/combobox/lib/ComboboxCard.js +1 -1
- package/dist/es6/combobox/lib/ComboboxInput.d.ts.map +1 -1
- package/dist/es6/combobox/lib/ComboboxInput.js +2 -1
- package/dist/es6/combobox/lib/ComboboxMenu.js +1 -1
- package/dist/es6/combobox/lib/ComboboxMenuItem.js +1 -1
- package/dist/es6/combobox/lib/ComboboxMenuList.js +1 -1
- package/dist/es6/combobox/lib/hooks/useComboboxInput.d.ts.map +1 -1
- package/dist/es6/combobox/lib/hooks/useComboboxInput.js +4 -1
- package/dist/es6/combobox/lib/hooks/useComboboxListKeyboardHandler.js +1 -1
- package/dist/es6/select/lib/Select.d.ts +14 -1
- package/dist/es6/select/lib/Select.d.ts.map +1 -1
- package/dist/es6/select/lib/Select.js +2 -1
- package/package.json +4 -4
- package/select/lib/Select.tsx +2 -1
|
@@ -2,7 +2,7 @@ import React from 'react';
|
|
|
2
2
|
|
|
3
3
|
import {createContainer} from '@workday/canvas-kit-react/common';
|
|
4
4
|
|
|
5
|
-
import {useComboboxModel} from './hooks';
|
|
5
|
+
import {useComboboxModel} from './hooks/useComboboxModel';
|
|
6
6
|
import {ComboboxInput} from './ComboboxInput';
|
|
7
7
|
import {ComboboxMenu} from './ComboboxMenu';
|
|
8
8
|
export interface ComboboxProps {
|
|
@@ -7,7 +7,7 @@ import {
|
|
|
7
7
|
} from '@workday/canvas-kit-react/common';
|
|
8
8
|
import {Menu} from '@workday/canvas-kit-react/menu';
|
|
9
9
|
|
|
10
|
-
import {useComboboxModel} from './hooks';
|
|
10
|
+
import {useComboboxModel} from './hooks/useComboboxModel';
|
|
11
11
|
|
|
12
12
|
export interface ComboboxCardProps extends ExtractProps<typeof Menu.Card> {}
|
|
13
13
|
|
|
@@ -3,7 +3,8 @@ import React from 'react';
|
|
|
3
3
|
import {createSubcomponent, ExtractProps} from '@workday/canvas-kit-react/common';
|
|
4
4
|
import {TextInput} from '@workday/canvas-kit-react/text-input';
|
|
5
5
|
|
|
6
|
-
import {useComboboxModel
|
|
6
|
+
import {useComboboxModel} from './hooks/useComboboxModel';
|
|
7
|
+
import {useComboboxInput} from './hooks/useComboboxInput';
|
|
7
8
|
|
|
8
9
|
export const ComboboxInput = createSubcomponent(TextInput)({
|
|
9
10
|
modelHook: useComboboxModel,
|
|
@@ -3,7 +3,7 @@ import React from 'react';
|
|
|
3
3
|
import {createSubcomponent} from '@workday/canvas-kit-react/common';
|
|
4
4
|
import {Menu} from '@workday/canvas-kit-react/menu';
|
|
5
5
|
|
|
6
|
-
import {useComboboxModel} from './hooks';
|
|
6
|
+
import {useComboboxModel} from './hooks/useComboboxModel';
|
|
7
7
|
import {ComboboxMenuList} from './ComboboxMenuList';
|
|
8
8
|
import {ComboboxMenuItem} from './ComboboxMenuItem';
|
|
9
9
|
import {ComboboxCard} from './ComboboxCard';
|
|
@@ -14,7 +14,7 @@ import {
|
|
|
14
14
|
} from '@workday/canvas-kit-react/collection';
|
|
15
15
|
import {OverflowTooltip} from '@workday/canvas-kit-react/tooltip';
|
|
16
16
|
|
|
17
|
-
import {useComboboxModel} from './hooks';
|
|
17
|
+
import {useComboboxModel} from './hooks/useComboboxModel';
|
|
18
18
|
|
|
19
19
|
export interface ComboboxMenuItemProps {
|
|
20
20
|
children: React.ReactNode;
|
|
@@ -5,7 +5,7 @@ import {createElemPropsHook, createSubcomponent} from '@workday/canvas-kit-react
|
|
|
5
5
|
import {useMenuModel} from '@workday/canvas-kit-react/menu';
|
|
6
6
|
import {ListBox, ListBoxProps} from '@workday/canvas-kit-react/collection';
|
|
7
7
|
|
|
8
|
-
import {useComboboxModel} from './hooks';
|
|
8
|
+
import {useComboboxModel} from './hooks/useComboboxModel';
|
|
9
9
|
|
|
10
10
|
export interface ComboboxMenuListProps<T = any> extends ListBoxProps<T> {}
|
|
11
11
|
|
|
@@ -5,12 +5,10 @@ import {usePopupTarget} from '@workday/canvas-kit-react/popup';
|
|
|
5
5
|
|
|
6
6
|
import {useListActiveDescendant} from '@workday/canvas-kit-react/collection';
|
|
7
7
|
|
|
8
|
-
import {
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
useComboboxListKeyboardHandler,
|
|
13
|
-
} from './index';
|
|
8
|
+
import {useComboboxModel} from './useComboboxModel';
|
|
9
|
+
import {useComboboxInputOpenWithArrowKeys} from './useComboboxInputOpenWithArrowKeys';
|
|
10
|
+
import {useSetPopupWidth} from './useSetPopupWidth';
|
|
11
|
+
import {useComboboxListKeyboardHandler} from './useComboboxListKeyboardHandler';
|
|
14
12
|
|
|
15
13
|
/**
|
|
16
14
|
* `useComboboxInput` Adds all attributes necessary to start with a {@link ComboboxInput Combobox.Input}. It opens the
|
|
@@ -2,7 +2,7 @@ import React from 'react';
|
|
|
2
2
|
import {createElemPropsHook, useIsRTL} from '@workday/canvas-kit-react/common';
|
|
3
3
|
import {keyboardEventToCursorEvents} from '@workday/canvas-kit-react/collection';
|
|
4
4
|
|
|
5
|
-
import {useComboboxModel} from './
|
|
5
|
+
import {useComboboxModel} from './useComboboxModel';
|
|
6
6
|
|
|
7
7
|
/**
|
|
8
8
|
* `useComboboxListKeyboardHandler` handle calling keyboard events like ArrowUp and ArrowDown only when the menu is visible.
|
|
@@ -40,7 +40,7 @@ exports.buttonVars = {
|
|
|
40
40
|
/**
|
|
41
41
|
* Base styles for Buttons.
|
|
42
42
|
*/
|
|
43
|
-
const baseButtonStyles = canvas_kit_styling_1.createStyles({ name: "
|
|
43
|
+
const baseButtonStyles = canvas_kit_styling_1.createStyles({ name: "r32s0", styles: "font-family:\"Roboto\", \"Helvetica Neue\", \"Helvetica\", Arial, sans-serif;font-size:0.875rem;line-height:normal;letter-spacing:0.015rem;font-weight:bold;background-color:var(--css-button-vars-default-background, transparent);color:var(--css-button-vars-default-label, var(--cnvs-base-palette-black-pepper-400, #333333));border-width:1px;border-style:solid;gap:var(--cnvs-sys-space-x2, 0.5rem);border-color:var(--css-button-vars-default-border, transparent);cursor:pointer;display:inline-flex;box-shadow:none;align-items:center;justify-content:center;box-sizing:border-box;outline:2px transparent;white-space:nowrap;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;border-radius:var(--css-button-vars-default-borderRadius, var(--cnvs-sys-shape-round, 62.5rem));position:relative;vertical-align:middle;overflow:hidden;transition:box-shadow 120ms linear, border 120ms linear, background-color 120ms linear, color 120ms linear;&:disabled, &:disabled:active{cursor:default;box-shadow:none;opacity:var(--css-button-vars-disabled-opacity, 1);}& span .wd-icon-fill{transition-duration:40ms;fill:var(--css-button-vars-default-icon, var(--cnvs-base-palette-black-pepper-400, #333333));}.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2{fill:var(--css-button-vars-default-icon, var(--cnvs-base-palette-black-pepper-400, #333333));}&:focus-visible, &.focus{background-color:var(--css-button-vars-focus-background, transparent);border-color:var(--css-button-vars-focus-border, transparent);color:var(--css-button-vars-focus-label, var(--cnvs-base-palette-black-pepper-400, #333333));& span .wd-icon-fill{fill:var(--css-button-vars-focus-icon, var(--cnvs-base-palette-black-pepper-400, #333333));}.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2{fill:var(--css-button-vars-focus-icon, var(--cnvs-base-palette-black-pepper-400, #333333));}box-shadow:0 0 0 2px var(--css-button-vars-focus-boxShadowInner, var(--cnvs-base-palette-french-vanilla-100, #fff)), 0 0 0 calc(2px + 2px) var(--css-button-vars-focus-boxShadowOuter, var(--cnvs-brand-primary-base, rgba(0,92,184,1)));}&:hover, &.hover{background-color:var(--css-button-vars-hover-background, var(--cnvs-base-palette-black-pepper-500, #1e1e1e));border-color:var(--css-button-vars-hover-border, transparent);color:var(--css-button-vars-hover-label, var(--cnvs-base-palette-black-pepper-500, #1e1e1e));& span .wd-icon-fill{fill:var(--css-button-vars-hover-icon, var(--cnvs-base-palette-black-pepper-500, #1e1e1e));}.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2{fill:var(--css-button-vars-hover-icon, var(--cnvs-base-palette-black-pepper-500, #1e1e1e));}}&:hover:active{transition-duration:40ms;}&:active, &.active{background-color:var(--css-button-vars-active-background, transparent);border-color:var(--css-button-vars-active-border, transparent);color:var(--css-button-vars-active-label, var(--cnvs-base-palette-black-pepper-400, #333333));& span .wd-icon-fill{fill:var(--css-button-vars-active-icon, var(--cnvs-base-palette-black-pepper-400, #333333));}.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2{fill:var(--css-button-vars-active-icon);}}&:disabled{background-color:var(--css-button-vars-disabled-background, transparent);border-color:var(--css-button-vars-disabled-border, transparent);color:var(--css-button-vars-disabled-label, var(--cnvs-base-palette-black-pepper-400, #333333));& span .wd-icon-fill{fill:var(--css-button-vars-disabled-icon, var(--cnvs-base-palette-black-pepper-400, #333333));}.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2{fill:var(--css-button-vars-disabled-icon, var(--cnvs-base-palette-black-pepper-400, #333333));}}" });
|
|
44
44
|
/**
|
|
45
45
|
* Button modifiers that will overwrite the base styles of Buttons.
|
|
46
46
|
* - `Size`: These modifiers will dictate a size of a Button and has a set of styles to associated with it.
|
|
@@ -49,24 +49,24 @@ const baseButtonStyles = canvas_kit_styling_1.createStyles({ name: "g58h0", styl
|
|
|
49
49
|
*/
|
|
50
50
|
exports.buttonModifiers = canvas_kit_styling_1.createModifiers({
|
|
51
51
|
size: {
|
|
52
|
-
large: canvas_kit_styling_1.createStyles({ name: "
|
|
53
|
-
medium: canvas_kit_styling_1.createStyles({ name: "
|
|
54
|
-
small: canvas_kit_styling_1.createStyles({ name: "
|
|
55
|
-
extraSmall: canvas_kit_styling_1.createStyles({ name: "
|
|
52
|
+
large: canvas_kit_styling_1.createStyles({ name: "r32s1", styles: "font-size:var(--cnvs-sys-space-x4, 1rem);line-height:var(--cnvs-sys-space-x6, 1.5rem);letter-spacing:0.01rem;height:48px;padding-inline:var(--cnvs-sys-space-x8, 2rem);min-width:112px;" }),
|
|
53
|
+
medium: canvas_kit_styling_1.createStyles({ name: "r32s2", styles: "font-size:0.875rem;letter-spacing:0.015rem;min-width:96px;padding-inline:var(--cnvs-sys-space-x6, 1.5rem);height:var(--cnvs-sys-space-x10, 2.5rem);" }),
|
|
54
|
+
small: canvas_kit_styling_1.createStyles({ name: "r32s3", styles: "font-size:0.875rem;letter-spacing:0.015rem;height:var(--cnvs-sys-space-x8, 2rem);min-width:var(--cnvs-sys-space-x20, 5rem);padding-inline:var(--cnvs-sys-space-x4, 1rem);gap:var(--cnvs-sys-space-x1, 0.25rem);" }),
|
|
55
|
+
extraSmall: canvas_kit_styling_1.createStyles({ name: "r32s4", styles: "font-size:0.75rem;line-height:var(--cnvs-sys-space-x4, 1rem);letter-spacing:0.02rem;height:var(--cnvs-sys-space-x6, 1.5rem);min-width:auto;padding-inline:var(--cnvs-sys-space-x3, 0.75rem);gap:var(--cnvs-sys-space-x1, 0.25rem);" }),
|
|
56
56
|
},
|
|
57
57
|
iconPosition: {
|
|
58
|
-
largeOnly: canvas_kit_styling_1.createStyles({ name: "
|
|
59
|
-
largeStart: canvas_kit_styling_1.createStyles({ name: "
|
|
60
|
-
largeEnd: canvas_kit_styling_1.createStyles({ name: "
|
|
61
|
-
mediumOnly: canvas_kit_styling_1.createStyles({ name: "
|
|
62
|
-
mediumStart: canvas_kit_styling_1.createStyles({ name: "
|
|
63
|
-
mediumEnd: canvas_kit_styling_1.createStyles({ name: "
|
|
64
|
-
smallOnly: canvas_kit_styling_1.createStyles({ name: "
|
|
65
|
-
smallStart: canvas_kit_styling_1.createStyles({ name: "
|
|
66
|
-
smallEnd: canvas_kit_styling_1.createStyles({ name: "
|
|
67
|
-
extraSmallOnly: canvas_kit_styling_1.createStyles({ name: "
|
|
68
|
-
extraSmallStart: canvas_kit_styling_1.createStyles({ name: "
|
|
69
|
-
extraSmallEnd: canvas_kit_styling_1.createStyles({ name: "
|
|
58
|
+
largeOnly: canvas_kit_styling_1.createStyles({ name: "r32s5", styles: "padding:0;min-width:calc(var(--cnvs-sys-space-x4, 1rem) * 3);" }),
|
|
59
|
+
largeStart: canvas_kit_styling_1.createStyles({ name: "r32s6", styles: "padding-inline-start:var(--cnvs-sys-space-x6, 1.5rem);padding-inline-end:var(--cnvs-sys-space-x8, 2rem);" }),
|
|
60
|
+
largeEnd: canvas_kit_styling_1.createStyles({ name: "r32s7", styles: "padding-inline-start:var(--cnvs-sys-space-x8, 2rem);padding-inline-end:var(--cnvs-sys-space-x6, 1.5rem);" }),
|
|
61
|
+
mediumOnly: canvas_kit_styling_1.createStyles({ name: "r32s8", styles: "padding:0;min-width:var(--cnvs-sys-space-x10, 2.5rem);" }),
|
|
62
|
+
mediumStart: canvas_kit_styling_1.createStyles({ name: "r32s9", styles: "padding-inline-start:calc(var(--cnvs-sys-space-x1, 0.25rem) * 5);padding-inline-end:var(--cnvs-sys-space-x6, 1.5rem);" }),
|
|
63
|
+
mediumEnd: canvas_kit_styling_1.createStyles({ name: "r32sa", styles: "padding-inline-start:var(--cnvs-sys-space-x6, 1.5rem);padding-inline-end:calc(var(--cnvs-sys-space-x1, 0.25rem) * 5);" }),
|
|
64
|
+
smallOnly: canvas_kit_styling_1.createStyles({ name: "r32sb", styles: "padding:0;min-width:var(--cnvs-sys-space-x8, 2rem);" }),
|
|
65
|
+
smallStart: canvas_kit_styling_1.createStyles({ name: "r32sc", styles: "padding-inline-start:var(--cnvs-sys-space-x3, 0.75rem);padding-inline-end:var(--cnvs-sys-space-x4, 1rem);" }),
|
|
66
|
+
smallEnd: canvas_kit_styling_1.createStyles({ name: "r32sd", styles: "padding-inline-start:var(--cnvs-sys-space-x4, 1rem);padding-inline-end:var(--cnvs-sys-space-x3, 0.75rem);" }),
|
|
67
|
+
extraSmallOnly: canvas_kit_styling_1.createStyles({ name: "r32se", styles: "padding:0;min-width:var(--cnvs-sys-space-x6, 1.5rem);" }),
|
|
68
|
+
extraSmallStart: canvas_kit_styling_1.createStyles({ name: "r32sf", styles: "padding-inline-start:var(--cnvs-sys-space-x2, 0.5rem);padding-inline-end:var(--cnvs-sys-space-x3, 0.75rem);" }),
|
|
69
|
+
extraSmallEnd: canvas_kit_styling_1.createStyles({ name: "r32sg", styles: "padding-inline-start:var(--cnvs-sys-space-x3, 0.75rem);padding-inline-end:var(--cnvs-sys-space-x2, 0.5rem);" }),
|
|
70
70
|
},
|
|
71
71
|
});
|
|
72
72
|
function capitalize(string = '') {
|
|
@@ -26,7 +26,7 @@ const common_1 = require("@workday/canvas-kit-react/common");
|
|
|
26
26
|
const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
|
|
27
27
|
const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
|
|
28
28
|
const Button_1 = require("./Button");
|
|
29
|
-
const deleteStyles = canvas_kit_styling_1.createStyles({ name: "
|
|
29
|
+
const deleteStyles = canvas_kit_styling_1.createStyles({ name: "r32s10", styles: "--css-button-vars-default-background:var(--cnvs-brand-error-base, #de2e21);--css-button-vars-default-border:transparent;--css-button-vars-default-borderRadius:var(--cnvs-sys-shape-round, 62.5rem);--css-button-vars-default-label:var(--cnvs-brand-error-accent, #ffffff);&:hover, &.hover{--css-button-vars-hover-background:var(--cnvs-brand-error-dark, #a31b12);--css-button-vars-hover-border:transparent;--css-button-vars-hover-label:var(--cnvs-brand-error-accent, #ffffff);}&:focus-visible, &.focus{--css-button-vars-focus-background:var(--cnvs-brand-error-base, #de2e21);--css-button-vars-focus-border:transparent;--css-button-vars-focus-label:var(--cnvs-brand-error-accent, #ffffff);--css-button-vars-focus-boxShadowInner:var(--cnvs-base-palette-french-vanilla-100, #ffffff);--css-button-vars-focus-boxShadowOuter:var(--cnvs-brand-common-focus-outline, #0875e1);}&:active, &.active{--css-button-vars-active-background:var(--cnvs-brand-error-darkest, rgba(128,22,14,1));--css-button-vars-active-border:transparent;--css-button-vars-active-label:var(--cnvs-brand-error-accent, #ffffff);}&:disabled, &:active:disabled, &:focus:disabled, &:hover:disabled{--css-button-vars-disabled-background:var(--cnvs-brand-error-light, #fcc9c5);--css-button-vars-disabled-label:var(--cnvs-brand-error-accent, #ffffff);opacity:1px;}" });
|
|
30
30
|
/**
|
|
31
31
|
* Use sparingly for destructive actions that will result in data loss, can’t be undone, or will
|
|
32
32
|
* have significant consequences. They commonly appear in confirmation dialogs as the final
|
|
@@ -26,10 +26,10 @@ const common_1 = require("@workday/canvas-kit-react/common");
|
|
|
26
26
|
const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
|
|
27
27
|
const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
|
|
28
28
|
const Button_1 = require("./Button");
|
|
29
|
-
const primaryStyles = canvas_kit_styling_1.createStyles({ name: "
|
|
29
|
+
const primaryStyles = canvas_kit_styling_1.createStyles({ name: "r32sw", styles: "--css-button-vars-default-background:var(--cnvs-brand-primary-base, var(--cnvs-base-palette-blueberry-400, #0875e1));--css-button-vars-default-border:transparent;--css-button-vars-default-borderRadius:var(--cnvs-sys-shape-round, 62.5rem);--css-button-vars-default-label:var(--cnvs-brand-primary-accent, #ffffff);--css-button-vars-default-icon:var(--cnvs-brand-primary-accent, #ffffff);--css-button-vars-hover-background:var(--cnvs-brand-primary-dark, rgba(0,92,184,1));--css-button-vars-hover-border:transparent;--css-button-vars-hover-label:var(--cnvs-brand-primary-accent, #ffffff);--css-button-vars-hover-icon:var(--cnvs-brand-primary-accent, #ffffff);--css-button-vars-focus-background:var(--cnvs-brand-primary-base, rgba(8,117,226,1));--css-button-vars-focus-border:transparent;--css-button-vars-focus-label:var(--cnvs-brand-primary-accent, #ffffff);--css-button-vars-focus-icon:var(--cnvs-brand-primary-accent, #ffffff);--css-button-vars-focus-boxShadowInner:var(--cnvs-base-palette-french-vanilla-100, #ffffff);--css-button-vars-focus-boxShadowOuter:var(--cnvs-brand-common-focus-outline, rgba(8,117,226,1));--css-button-vars-active-background:var(--cnvs-brand-primary-darkest, rgba(0,66,133,1));--css-button-vars-active-border:transparent;--css-button-vars-active-label:var(--cnvs-brand-primary-accent, #ffffff);--css-button-vars-active-icon:var(--cnvs-brand-primary-accent, #ffffff);--css-button-vars-disabled-background:var(--cnvs-brand-primary-base, rgba(8,117,226,1));--css-button-vars-disabled-border:transparent;--css-button-vars-disabled-label:var(--cnvs-brand-primary-accent, #ffffff);--css-button-vars-disabled-opacity:0.4;--css-button-vars-disabled-icon:var(--cnvs-brand-primary-accent, #ffffff);" });
|
|
30
30
|
exports.primaryButtonModifiers = canvas_kit_styling_1.createModifiers({
|
|
31
31
|
variant: {
|
|
32
|
-
inverse: canvas_kit_styling_1.createStyles({ name: "
|
|
32
|
+
inverse: canvas_kit_styling_1.createStyles({ name: "r32sx", styles: "--css-button-vars-default-background:var(--cnvs-base-palette-french-vanilla-100, #ffffff);--css-button-vars-default-borderRadius:var(--cnvs-sys-shape-round, 62.5rem);--css-button-vars-default-label:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-vars-default-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-vars-hover-background:var(--cnvs-base-palette-soap-300, rgba(232,235,237,1));--css-button-vars-hover-label:var(--cnvs-base-palette-black-pepper-500, rgba(31,31,31,1));--css-button-vars-hover-icon:var(--cnvs-base-palette-black-pepper-500, rgba(31,31,31,1));--css-button-vars-focus-background:var(--cnvs-base-palette-french-vanilla-100, #ffffff);--css-button-vars-focus-label:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-vars-focus-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-vars-focus-boxShadowInner:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-vars-focus-boxShadowOuter:var(--cnvs-base-palette-french-vanilla-100, #ffffff);--css-button-vars-active-background:var(--cnvs-base-palette-soap-400, rgba(224,227,230,1));--css-button-vars-active-label:var(--cnvs-base-palette-black-pepper-500, rgba(31,31,31,1));--css-button-vars-active-icon:var(--cnvs-base-palette-black-pepper-500, rgba(31,31,31,1));--css-button-vars-disabled-background:var(--cnvs-base-palette-french-vanilla-100, #ffffff);--css-button-vars-disabled-label:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-vars-disabled-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));" }),
|
|
33
33
|
},
|
|
34
34
|
});
|
|
35
35
|
exports.PrimaryButton = common_1.createComponent('button')({
|
|
@@ -26,10 +26,10 @@ const common_1 = require("@workday/canvas-kit-react/common");
|
|
|
26
26
|
const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
|
|
27
27
|
const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
|
|
28
28
|
const Button_1 = require("./Button");
|
|
29
|
-
const secondaryStyles = canvas_kit_styling_1.createStyles({ name: "
|
|
29
|
+
const secondaryStyles = canvas_kit_styling_1.createStyles({ name: "r32sy", styles: "--css-button-vars-default-background:transparent;--css-button-vars-default-border:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-vars-default-borderRadius:var(--cnvs-sys-shape-round, 62.5rem);--css-button-vars-default-label:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-vars-default-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-vars-hover-background:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-vars-hover-border:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-vars-hover-label:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--css-button-vars-hover-icon:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--css-button-vars-focus-background:transparent;--css-button-vars-focus-border:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-vars-focus-label:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-vars-focus-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-vars-focus-boxShadowInner:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-vars-focus-boxShadowOuter:var(--cnvs-brand-common-focus-outline, rgba(8,117,226,1));--css-button-vars-active-background:var(--cnvs-base-palette-black-pepper-500, rgba(31,31,31,1));--css-button-vars-active-border:var(--cnvs-base-palette-black-pepper-500, rgba(31,31,31,1));--css-button-vars-active-label:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--css-button-vars-active-icon:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--css-button-vars-disabled-background:transparent;--css-button-vars-disabled-border:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-vars-disabled-label:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-vars-disabled-opacity:0.4;--css-button-vars-disabled-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));" });
|
|
30
30
|
exports.secondaryButtonModifiers = canvas_kit_styling_1.createModifiers({
|
|
31
31
|
variant: {
|
|
32
|
-
inverse: canvas_kit_styling_1.createStyles({ name: "
|
|
32
|
+
inverse: canvas_kit_styling_1.createStyles({ name: "r32sz", styles: "--css-button-vars-default-background:transparent;--css-button-vars-default-border:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-vars-default-label:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-vars-default-icon:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-vars-hover-background:var(--cnvs-base-palette-soap-300, rgba(232,235,237,1));--css-button-vars-hover-border:var(--cnvs-base-palette-soap-300, rgba(232,235,237,1));--css-button-vars-hover-label:var(--cnvs-base-palette-black-pepper-500, rgba(31,31,31,1));--css-button-vars-hover-icon:var(--cnvs-base-palette-black-pepper-500, rgba(31,31,31,1));--css-button-vars-focus-background:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-vars-focus-border:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-vars-focus-label:var(--cnvs-base-palette-black-pepper-500, rgba(31,31,31,1));--css-button-vars-focus-icon:var(--cnvs-base-palette-black-pepper-500, rgba(31,31,31,1));--css-button-vars-focus-boxShadowInner:var(--cnvs-base-palette-black-pepper-500, rgba(31,31,31,1));--css-button-vars-focus-boxShadowOuter:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-vars-active-background:var(--cnvs-base-palette-soap-400, rgba(224,227,230,1));--css-button-vars-active-border:var(--cnvs-base-palette-soap-400, rgba(224,227,230,1));--css-button-vars-active-label:var(--cnvs-base-palette-black-pepper-500, rgba(31,31,31,1));--css-button-vars-active-icon:var(--cnvs-base-palette-black-pepper-500, rgba(31,31,31,1));--css-button-vars-disabled-background:transparent;--css-button-vars-disabled-border:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-vars-disabled-label:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-vars-disabled-icon:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));" }),
|
|
33
33
|
},
|
|
34
34
|
});
|
|
35
35
|
exports.SecondaryButton = common_1.createComponent('button')({
|
|
@@ -27,27 +27,27 @@ const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
|
|
|
27
27
|
const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
|
|
28
28
|
const tokens_1 = require("@workday/canvas-kit-react/tokens");
|
|
29
29
|
const Button_1 = require("./Button");
|
|
30
|
-
const tertiaryStyles = canvas_kit_styling_1.createStyles({ name: "
|
|
30
|
+
const tertiaryStyles = canvas_kit_styling_1.createStyles({ name: "r32sh", styles: "padding-inline:var(--cnvs-sys-space-x2, 0.5rem);min-width:auto;text-decoration:underline;border:0px;--css-button-vars-default-background:transparent;--css-button-vars-default-border:transparent;--css-button-vars-default-borderRadius:var(--cnvs-sys-shape-x1, 0.25rem);--css-button-vars-default-label:var(--cnvs-brand-primary-base, rgba(8,117,226,1));--css-button-vars-default-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51, 51, 51, 1));--css-button-vars-hover-background:var(--cnvs-base-palette-soap-200, rgba(241, 242, 243, 1));--css-button-vars-hover-border:transparent;--css-button-vars-hover-label:var(--cnvs-brand-primary-dark, rgba(0,92,184,1));--css-button-vars-hover-icon:var(--cnvs-base-palette-black-pepper-500, rgba(31,31,31,1));--css-button-vars-focus-background:transparent;--css-button-vars-focus-border:transparent;--css-button-vars-focus-label:var(--cnvs-brand-primary-base, rgba(8,117,226,1));--css-button-vars-focus-icon:var(--cnvs-base-palette-black-pepper-500, rgba(31,31,31,1));--css-button-vars-focus-boxShadowInner:var(--cnvs-brand-common-focus-outline, rgba(8,117,226,1));--css-button-vars-focus-boxShadowOuter:var(--cnvs-brand-common-focus-outline, rgba(8,117,226,1));--css-button-vars-active-background:var(--cnvs-base-palette-soap-300, rgba(232,235,237,1));--css-button-vars-active-border:transparent;--css-button-vars-active-label:var(--cnvs-brand-primary-dark, rgba(0,92,184,1));--css-button-vars-active-icon:var(--cnvs-base-palette-black-pepper-500, rgba(31,31,31,1));--css-button-vars-disabled-background:transparent;--css-button-vars-disabled-border:var(--cnvs-base-palette-french-vanilla-100, #fff);--css-button-vars-disabled-label:var(--cnvs-brand-primary-base, rgba(8,117,226,1));--css-button-vars-disabled-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51, 51, 51, 1));--css-button-vars-disabled-opacity:0.4;&:focus-visible, &.focus{box-shadow:0 0 0 0px var(--cnvs-base-palette-french-vanilla-100, var(--css-button-vars-focus-boxShadowInner)), 0 0 0 calc(2px + 0px) var(--cnvs-brand-common-focus-outline, var(--css-button-vars-focus-boxShadowOuter));}" });
|
|
31
31
|
exports.tertiaryButtonModifiers = canvas_kit_styling_1.createModifiers({
|
|
32
32
|
isThemeable: {
|
|
33
|
-
true: canvas_kit_styling_1.createStyles({ name: "
|
|
33
|
+
true: canvas_kit_styling_1.createStyles({ name: "r32si", styles: "--css-button-vars-default-icon:var(--cnvs-brand-primary-base, rgba(8,117,226,1));--css-button-vars-hover-icon:var(--cnvs-brand-primary-dark, rgba(0,92,184,1));--css-button-vars-focus-icon:var(--cnvs-brand-primary-base, rgba(8,117,226,1));--css-button-vars-active-icon:var(--cnvs-brand-primary-dark, rgba(0,92,184,1));--css-button-vars-disabled-icon:var(--cnvs-brand-primary-base, rgba(8,117,226,1));" }),
|
|
34
34
|
},
|
|
35
35
|
variant: {
|
|
36
|
-
inverse: canvas_kit_styling_1.createStyles({ name: "
|
|
36
|
+
inverse: canvas_kit_styling_1.createStyles({ name: "r32sj", styles: "--css-button-vars-default-background:transparent;--css-button-vars-default-border:transparent;--css-button-vars-default-label:var(--cnvs-base-palette-french-vanilla-100, #fff);--css-button-vars-default-icon:var(--cnvs-base-palette-french-vanilla-100, #fff);--css-button-vars-hover-background:var(--cnvs-base-palette-french-vanilla-100, #fff);--css-button-vars-hover-border:transparent;--css-button-vars-hover-label:var(--cnvs-base-palette-black-pepper-400, rgba(51, 51, 51, 1));--css-button-vars-hover-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51, 51, 51, 1));--css-button-vars-focus-background:var(--cnvs-base-palette-french-vanilla-100, #fff);--css-button-vars-focus-border:transparent;--css-button-vars-focus-label:var(--cnvs-base-palette-black-pepper-400, rgba(51, 51, 51, 1));--css-button-vars-focus-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51, 51, 51, 1));--css-button-vars-active-background:var(--cnvs-base-palette-soap-200, rgba(241, 242, 243, 1));--css-button-vars-active-border:transparent;--css-button-vars-active-label:var(--cnvs-base-palette-black-pepper-400, rgba(51, 51, 51, 1));--css-button-vars-active-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51, 51, 51, 1));--css-button-vars-disabled-background:transparent;--css-button-vars-disabled-border:var(--cnvs-base-palette-french-vanilla-100, #fff);--css-button-vars-disabled-label:var(--cnvs-base-palette-french-vanilla-100, #fff);--css-button-vars-disabled-icon:var(--cnvs-base-palette-french-vanilla-100, #fff);&:focus-visible, &.focus{box-shadow:inset 0 0 0 2px var(--cnvs-base-palette-black-pepper-400, var(--css-button-vars-focus-boxShadowInner)), 0 0 0 2px var(--cnvs-base-palette-french-vanilla-100, var(--css-button-vars-focus-boxShadowOuter));}" }),
|
|
37
37
|
},
|
|
38
38
|
iconPosition: {
|
|
39
|
-
largeOnly: canvas_kit_styling_1.createStyles({ name: "
|
|
40
|
-
largeStart: canvas_kit_styling_1.createStyles({ name: "
|
|
41
|
-
largeEnd: canvas_kit_styling_1.createStyles({ name: "
|
|
42
|
-
mediumOnly: canvas_kit_styling_1.createStyles({ name: "
|
|
43
|
-
mediumStart: canvas_kit_styling_1.createStyles({ name: "
|
|
44
|
-
mediumEnd: canvas_kit_styling_1.createStyles({ name: "
|
|
45
|
-
smallOnly: canvas_kit_styling_1.createStyles({ name: "
|
|
46
|
-
smallStart: canvas_kit_styling_1.createStyles({ name: "
|
|
47
|
-
smallEnd: canvas_kit_styling_1.createStyles({ name: "
|
|
48
|
-
extraSmallOnly: canvas_kit_styling_1.createStyles({ name: "
|
|
49
|
-
extraSmallStart: canvas_kit_styling_1.createStyles({ name: "
|
|
50
|
-
extraSmallEnd: canvas_kit_styling_1.createStyles({ name: "
|
|
39
|
+
largeOnly: canvas_kit_styling_1.createStyles({ name: "r32sk", styles: "border-radius:999px;padding:0;min-width:calc(var(--cnvs-sys-space-x4, 1rem) * 3);" }),
|
|
40
|
+
largeStart: canvas_kit_styling_1.createStyles({ name: "r32sl", styles: "padding-inline-start:0.5rem;padding-inline-end:0.75rem;" }),
|
|
41
|
+
largeEnd: canvas_kit_styling_1.createStyles({ name: "r32sm", styles: "padding-inline-start:0.75rem;padding-inline-end:0.5rem;" }),
|
|
42
|
+
mediumOnly: canvas_kit_styling_1.createStyles({ name: "r32sn", styles: "padding:0;min-width:2.5rem;border-radius:999px;" }),
|
|
43
|
+
mediumStart: canvas_kit_styling_1.createStyles({ name: "r32so", styles: "padding-inline-start:0.5rem;padding-inline-end:0.75rem;" }),
|
|
44
|
+
mediumEnd: canvas_kit_styling_1.createStyles({ name: "r32sp", styles: "padding-inline-start:0.75rem;padding-inline-end:0.5rem;" }),
|
|
45
|
+
smallOnly: canvas_kit_styling_1.createStyles({ name: "r32sq", styles: "padding:0;min-width:2rem;border-radius:999px;" }),
|
|
46
|
+
smallStart: canvas_kit_styling_1.createStyles({ name: "r32sr", styles: "padding-inline-start:0.5rem;padding-inline-end:0.75rem;" }),
|
|
47
|
+
smallEnd: canvas_kit_styling_1.createStyles({ name: "r32ss", styles: "padding-inline-start:0.75rem;padding-inline-end:0.5rem;" }),
|
|
48
|
+
extraSmallOnly: canvas_kit_styling_1.createStyles({ name: "r32st", styles: "padding:0;min-width:1.5rem;border-radius:999px;" }),
|
|
49
|
+
extraSmallStart: canvas_kit_styling_1.createStyles({ name: "r32su", styles: "padding-inline-start:0.25rem;padding-inline-end:0.5rem;" }),
|
|
50
|
+
extraSmallEnd: canvas_kit_styling_1.createStyles({ name: "r32sv", styles: "padding-inline-start:0.5rem;padding-inline-end:0.25rem;" }),
|
|
51
51
|
},
|
|
52
52
|
});
|
|
53
53
|
exports.TertiaryButton = common_1.createComponent('button')({
|
|
@@ -6,12 +6,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
6
6
|
exports.Combobox = void 0;
|
|
7
7
|
const react_1 = __importDefault(require("react"));
|
|
8
8
|
const common_1 = require("@workday/canvas-kit-react/common");
|
|
9
|
-
const
|
|
9
|
+
const useComboboxModel_1 = require("./hooks/useComboboxModel");
|
|
10
10
|
const ComboboxInput_1 = require("./ComboboxInput");
|
|
11
11
|
const ComboboxMenu_1 = require("./ComboboxMenu");
|
|
12
12
|
exports.Combobox = common_1.createContainer()({
|
|
13
13
|
displayName: 'Combobox',
|
|
14
|
-
modelHook:
|
|
14
|
+
modelHook: useComboboxModel_1.useComboboxModel,
|
|
15
15
|
subComponents: {
|
|
16
16
|
/**
|
|
17
17
|
* The input of the `Combobox`. This element will have `role="combobox"` applied, along with
|
|
@@ -7,18 +7,18 @@ exports.ComboboxCard = exports.useComboboxCard = void 0;
|
|
|
7
7
|
const react_1 = __importDefault(require("react"));
|
|
8
8
|
const common_1 = require("@workday/canvas-kit-react/common");
|
|
9
9
|
const menu_1 = require("@workday/canvas-kit-react/menu");
|
|
10
|
-
const
|
|
10
|
+
const useComboboxModel_1 = require("./hooks/useComboboxModel");
|
|
11
11
|
/**
|
|
12
12
|
* This hook sets the `minWidth` style attribute to match the width of the
|
|
13
13
|
* {@link ComboboxInput Combobox.Input} component.
|
|
14
14
|
*/
|
|
15
|
-
exports.useComboboxCard = common_1.createElemPropsHook(
|
|
15
|
+
exports.useComboboxCard = common_1.createElemPropsHook(useComboboxModel_1.useComboboxModel)(model => {
|
|
16
16
|
return {
|
|
17
17
|
minWidth: model.state.width,
|
|
18
18
|
};
|
|
19
19
|
});
|
|
20
20
|
exports.ComboboxCard = common_1.createSubcomponent('div')({
|
|
21
|
-
modelHook:
|
|
21
|
+
modelHook: useComboboxModel_1.useComboboxModel,
|
|
22
22
|
elemPropsHook: exports.useComboboxCard,
|
|
23
23
|
})(({ children, ...elemProps }, Element) => {
|
|
24
24
|
return (react_1.default.createElement(menu_1.Menu.Card, Object.assign({ as: Element }, elemProps), children));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ComboboxInput.d.ts","sourceRoot":"","sources":["../../../../combobox/lib/ComboboxInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"ComboboxInput.d.ts","sourceRoot":"","sources":["../../../../combobox/lib/ComboboxInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAKxB,CAAC"}
|
|
@@ -7,10 +7,11 @@ exports.ComboboxInput = void 0;
|
|
|
7
7
|
const react_1 = __importDefault(require("react"));
|
|
8
8
|
const common_1 = require("@workday/canvas-kit-react/common");
|
|
9
9
|
const text_input_1 = require("@workday/canvas-kit-react/text-input");
|
|
10
|
-
const
|
|
10
|
+
const useComboboxModel_1 = require("./hooks/useComboboxModel");
|
|
11
|
+
const useComboboxInput_1 = require("./hooks/useComboboxInput");
|
|
11
12
|
exports.ComboboxInput = common_1.createSubcomponent(text_input_1.TextInput)({
|
|
12
|
-
modelHook:
|
|
13
|
-
elemPropsHook:
|
|
13
|
+
modelHook: useComboboxModel_1.useComboboxModel,
|
|
14
|
+
elemPropsHook: useComboboxInput_1.useComboboxInput,
|
|
14
15
|
})(({ children, ...elemProps }, Element) => {
|
|
15
16
|
return react_1.default.createElement(Element, Object.assign({}, elemProps), children);
|
|
16
17
|
});
|
|
@@ -7,13 +7,13 @@ exports.ComboboxMenu = void 0;
|
|
|
7
7
|
const react_1 = __importDefault(require("react"));
|
|
8
8
|
const common_1 = require("@workday/canvas-kit-react/common");
|
|
9
9
|
const menu_1 = require("@workday/canvas-kit-react/menu");
|
|
10
|
-
const
|
|
10
|
+
const useComboboxModel_1 = require("./hooks/useComboboxModel");
|
|
11
11
|
const ComboboxMenuList_1 = require("./ComboboxMenuList");
|
|
12
12
|
const ComboboxMenuItem_1 = require("./ComboboxMenuItem");
|
|
13
13
|
const ComboboxCard_1 = require("./ComboboxCard");
|
|
14
14
|
const ComboboxPopper_1 = require("./ComboboxPopper");
|
|
15
15
|
exports.ComboboxMenu = common_1.createSubcomponent()({
|
|
16
|
-
modelHook:
|
|
16
|
+
modelHook: useComboboxModel_1.useComboboxModel,
|
|
17
17
|
subComponents: {
|
|
18
18
|
/**
|
|
19
19
|
* The "Popper" of a {@link ComboboxMenu Combobox.Menu}. The popper will appear around the
|
|
@@ -10,7 +10,7 @@ const menu_1 = require("@workday/canvas-kit-react/menu");
|
|
|
10
10
|
const icon_1 = require("@workday/canvas-kit-react/icon");
|
|
11
11
|
const collection_1 = require("@workday/canvas-kit-react/collection");
|
|
12
12
|
const tooltip_1 = require("@workday/canvas-kit-react/tooltip");
|
|
13
|
-
const
|
|
13
|
+
const useComboboxModel_1 = require("./hooks/useComboboxModel");
|
|
14
14
|
/**
|
|
15
15
|
* This hook sets up accessibility and behavior of a {@link ComboboxMenuItem Combobox.Menu.Item}
|
|
16
16
|
* component. It prevents focus when clicking so the focus stays on the
|
|
@@ -39,7 +39,7 @@ exports.useComboboxMenuItem = common_1.composeHooks(common_1.createElemPropsHook
|
|
|
39
39
|
};
|
|
40
40
|
}), collection_1.useListItemRegister, collection_1.useListItemAllowChildStrings);
|
|
41
41
|
exports.ComboboxMenuItem = common_1.createSubcomponent('li')({
|
|
42
|
-
modelHook:
|
|
42
|
+
modelHook: useComboboxModel_1.useComboboxModel,
|
|
43
43
|
elemPropsHook: exports.useComboboxMenuItem,
|
|
44
44
|
subComponents: {
|
|
45
45
|
Icon: common_1.styled(icon_1.SystemIcon)({ alignSelf: 'start' }),
|
|
@@ -9,7 +9,7 @@ const tokens_1 = require("@workday/canvas-kit-react/tokens");
|
|
|
9
9
|
const common_1 = require("@workday/canvas-kit-react/common");
|
|
10
10
|
const menu_1 = require("@workday/canvas-kit-react/menu");
|
|
11
11
|
const collection_1 = require("@workday/canvas-kit-react/collection");
|
|
12
|
-
const
|
|
12
|
+
const useComboboxModel_1 = require("./hooks/useComboboxModel");
|
|
13
13
|
/**
|
|
14
14
|
* The `listbox` uses `aria-labelledby` pointing to the {@link ComboboxInput Combobox.Input}. This
|
|
15
15
|
* input should be labelled by a form field label for proper accessibility. Use {@link FormField} to
|
|
@@ -24,7 +24,7 @@ exports.useComboboxMenuList = common_1.createElemPropsHook(menu_1.useMenuModel)(
|
|
|
24
24
|
};
|
|
25
25
|
});
|
|
26
26
|
exports.ComboboxMenuList = common_1.createSubcomponent('ul')({
|
|
27
|
-
modelHook:
|
|
27
|
+
modelHook: useComboboxModel_1.useComboboxModel,
|
|
28
28
|
elemPropsHook: exports.useComboboxMenuList,
|
|
29
29
|
})(({ children, ...elemProps }, Element, model) => {
|
|
30
30
|
return (react_1.default.createElement(collection_1.ListBox, Object.assign({ as: Element, model: model, background: tokens_1.commonColors.background, borderRadius: "zero", padding: "zero", marginY: "xxs", gap: "zero", overflowY: "auto" }, elemProps), children));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useComboboxInput.d.ts","sourceRoot":"","sources":["../../../../../combobox/lib/hooks/useComboboxInput.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"useComboboxInput.d.ts","sourceRoot":"","sources":["../../../../../combobox/lib/hooks/useComboboxInput.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAY1B;;;;;GAKG;AACH,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gCA6BN,mBAAmB;6BActB,gBAAgB;;8BAIf,gBAAgB;;;;;;;;;;;;;;;;;;EAoBpC,CAAC"}
|
|
@@ -8,14 +8,17 @@ const react_1 = __importDefault(require("react"));
|
|
|
8
8
|
const common_1 = require("@workday/canvas-kit-react/common");
|
|
9
9
|
const popup_1 = require("@workday/canvas-kit-react/popup");
|
|
10
10
|
const collection_1 = require("@workday/canvas-kit-react/collection");
|
|
11
|
-
const
|
|
11
|
+
const useComboboxModel_1 = require("./useComboboxModel");
|
|
12
|
+
const useComboboxInputOpenWithArrowKeys_1 = require("./useComboboxInputOpenWithArrowKeys");
|
|
13
|
+
const useSetPopupWidth_1 = require("./useSetPopupWidth");
|
|
14
|
+
const useComboboxListKeyboardHandler_1 = require("./useComboboxListKeyboardHandler");
|
|
12
15
|
/**
|
|
13
16
|
* `useComboboxInput` Adds all attributes necessary to start with a {@link ComboboxInput Combobox.Input}. It opens the
|
|
14
17
|
* menu with arrow keys, uses {@link useListActiveDescendant}, and handles keyboard arrows to
|
|
15
18
|
* navigate items of the menu. You may also compose this hook to add more specific behaviors for
|
|
16
19
|
* your {@link ComboboxInput Combobox.Input}.
|
|
17
20
|
*/
|
|
18
|
-
exports.useComboboxInput = common_1.composeHooks(common_1.createElemPropsHook(
|
|
21
|
+
exports.useComboboxInput = common_1.composeHooks(common_1.createElemPropsHook(useComboboxModel_1.useComboboxModel)((model, ref) => {
|
|
19
22
|
const elementRef = common_1.useForkRef(ref, model.state.inputRef);
|
|
20
23
|
react_1.default.useEffect(() => {
|
|
21
24
|
var _a;
|
|
@@ -71,4 +74,4 @@ exports.useComboboxInput = common_1.composeHooks(common_1.createElemPropsHook(in
|
|
|
71
74
|
id: model.state.id,
|
|
72
75
|
ref: elementRef,
|
|
73
76
|
};
|
|
74
|
-
}),
|
|
77
|
+
}), useSetPopupWidth_1.useSetPopupWidth, useComboboxInputOpenWithArrowKeys_1.useComboboxInputOpenWithArrowKeys, collection_1.useListActiveDescendant, useComboboxListKeyboardHandler_1.useComboboxListKeyboardHandler, popup_1.usePopupTarget);
|
|
@@ -3,11 +3,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
3
3
|
exports.useComboboxListKeyboardHandler = void 0;
|
|
4
4
|
const common_1 = require("@workday/canvas-kit-react/common");
|
|
5
5
|
const collection_1 = require("@workday/canvas-kit-react/collection");
|
|
6
|
-
const
|
|
6
|
+
const useComboboxModel_1 = require("./useComboboxModel");
|
|
7
7
|
/**
|
|
8
8
|
* `useComboboxListKeyboardHandler` handle calling keyboard events like ArrowUp and ArrowDown only when the menu is visible.
|
|
9
9
|
*/
|
|
10
|
-
exports.useComboboxListKeyboardHandler = common_1.createElemPropsHook(
|
|
10
|
+
exports.useComboboxListKeyboardHandler = common_1.createElemPropsHook(useComboboxModel_1.useComboboxModel)(model => {
|
|
11
11
|
const isRTL = common_1.useIsRTL();
|
|
12
12
|
return {
|
|
13
13
|
onKeyDown(event) {
|
|
@@ -442,7 +442,20 @@ export declare const Select: import("@workday/canvas-kit-react/common").Componen
|
|
|
442
442
|
getTextValue: (item: any) => string;
|
|
443
443
|
nonInteractiveIds: string[];
|
|
444
444
|
orientation: import("../../collection/lib/useBaseListModel").Orientation;
|
|
445
|
-
defaultItemHeight: number;
|
|
445
|
+
defaultItemHeight: number; /**
|
|
446
|
+
* `Select.Popper` renders a {@link ComboboxPopper Combobox.Menu.Popper}. You have access to all `Popper` props.
|
|
447
|
+
*
|
|
448
|
+
* ```tsx
|
|
449
|
+
* <Select item={options}>
|
|
450
|
+
* <FormField label="Your Label">
|
|
451
|
+
* <Select.Input onChange={(event) => handleChange(event)}>
|
|
452
|
+
* <Select.Popper>
|
|
453
|
+
* ...
|
|
454
|
+
* </Select.Popper>
|
|
455
|
+
* </FormField>
|
|
456
|
+
* </Select>
|
|
457
|
+
* ```
|
|
458
|
+
*/
|
|
446
459
|
items: any[];
|
|
447
460
|
value: string | undefined;
|
|
448
461
|
onChange(event: React.ChangeEvent<HTMLInputElement>): void;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../../select/lib/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAEL,YAAY,EAEZ,SAAS,EACV,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,QAAQ,EAAC,MAAM,oCAAoC,CAAC;AAE5D,OAAO,EAAa,SAAS,EAAC,MAAM,sCAAsC,CAAC;
|
|
1
|
+
{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../../select/lib/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAEL,YAAY,EAEZ,SAAS,EACV,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,QAAQ,EAAC,MAAM,oCAAoC,CAAC;AAE5D,OAAO,EAAa,SAAS,EAAC,MAAM,sCAAsC,CAAC;AAM3E,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAE9D,MAAM,WAAW,gBAAiB,SAAQ,YAAY,CAAC,OAAO,SAAS,CAAC;IACtE;;;;OAIG;IACH,cAAc,CAAC,EAAE,gBAAgB,CAAC;CACnC;AACD,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAwBvB,CAAC;AAEF,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAWrB,CAAC;AAEH,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EASrB,CAAC;AAEH,MAAM,WAAW,WAAY,SAAQ,SAAS,EAAE,YAAY,CAAC,OAAO,QAAQ,CAAC;CAAG;AAChF;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;+BAkBf;;;;;;;;;;;;;OAaG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA3BH;;;;;;;;;;;;OAYG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAEH;;;;;;;;;;;;;OAaG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAEH;;;;;;;;;;;;;;;;;OAiBG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAEH;;;;;;;;;;;;;;;;;OAiBG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAEH;;;;;;;;;;;;;;;;;OAiBG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CASL,CAAC"}
|
|
@@ -10,10 +10,11 @@ const combobox_1 = require("@workday/canvas-kit-react/combobox");
|
|
|
10
10
|
const text_input_1 = require("@workday/canvas-kit-react/text-input");
|
|
11
11
|
const icon_1 = require("@workday/canvas-kit-react/icon");
|
|
12
12
|
const canvas_system_icons_web_1 = require("@workday/canvas-system-icons-web");
|
|
13
|
-
const
|
|
13
|
+
const useSelectModel_1 = require("./hooks/useSelectModel");
|
|
14
|
+
const useSelectCard_1 = require("./hooks/useSelectCard");
|
|
14
15
|
const useSelectInput_1 = require("./hooks/useSelectInput");
|
|
15
16
|
exports.SelectInput = common_1.createSubcomponent(text_input_1.TextInput)({
|
|
16
|
-
modelHook:
|
|
17
|
+
modelHook: useSelectModel_1.useSelectModel,
|
|
17
18
|
elemPropsHook: useSelectInput_1.useSelectInput,
|
|
18
19
|
})(({ placeholder = 'Choose an option', inputStartIcon, ...elemProps }, Element, model) => {
|
|
19
20
|
return (react_1.default.createElement(text_input_1.InputGroup, null,
|
|
@@ -24,7 +25,7 @@ exports.SelectInput = common_1.createSubcomponent(text_input_1.TextInput)({
|
|
|
24
25
|
react_1.default.createElement(icon_1.SystemIcon, { icon: canvas_system_icons_web_1.caretDownSmallIcon }))));
|
|
25
26
|
});
|
|
26
27
|
exports.SelectItem = common_1.createSubcomponent('li')({
|
|
27
|
-
modelHook:
|
|
28
|
+
modelHook: useSelectModel_1.useSelectModel,
|
|
28
29
|
subComponents: {
|
|
29
30
|
Icon: combobox_1.Combobox.Menu.Item.Icon,
|
|
30
31
|
},
|
|
@@ -32,8 +33,8 @@ exports.SelectItem = common_1.createSubcomponent('li')({
|
|
|
32
33
|
return (react_1.default.createElement(combobox_1.Combobox.Menu.Item, Object.assign({ role: "option", as: Element }, elemProps), children));
|
|
33
34
|
});
|
|
34
35
|
exports.SelectCard = common_1.createSubcomponent('div')({
|
|
35
|
-
modelHook:
|
|
36
|
-
elemPropsHook:
|
|
36
|
+
modelHook: useSelectModel_1.useSelectModel,
|
|
37
|
+
elemPropsHook: useSelectCard_1.useSelectCard,
|
|
37
38
|
})(({ children, ...elemProps }, Element) => {
|
|
38
39
|
return (react_1.default.createElement(combobox_1.Combobox.Menu.Card, Object.assign({ maxHeight: 300, as: Element }, elemProps), children));
|
|
39
40
|
});
|
|
@@ -59,7 +60,7 @@ exports.SelectCard = common_1.createSubcomponent('div')({
|
|
|
59
60
|
*/
|
|
60
61
|
exports.Select = common_1.createContainer()({
|
|
61
62
|
displayName: 'Select',
|
|
62
|
-
modelHook:
|
|
63
|
+
modelHook: useSelectModel_1.useSelectModel,
|
|
63
64
|
subComponents: {
|
|
64
65
|
/**
|
|
65
66
|
* `Select.Input` renders a {@link ComboboxMenu Combobox.Input} that handles keyboard navigation and interaction defined by [WAI](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/).
|
|
@@ -18,7 +18,7 @@ export const buttonVars = {
|
|
|
18
18
|
/**
|
|
19
19
|
* Base styles for Buttons.
|
|
20
20
|
*/
|
|
21
|
-
const baseButtonStyles = createStyles({ name: "
|
|
21
|
+
const baseButtonStyles = createStyles({ name: "b9y40", styles: "font-family:\"Roboto\", \"Helvetica Neue\", \"Helvetica\", Arial, sans-serif;font-size:0.875rem;line-height:normal;letter-spacing:0.015rem;font-weight:bold;background-color:var(--css-button-vars-default-background, transparent);color:var(--css-button-vars-default-label, var(--cnvs-base-palette-black-pepper-400, #333333));border-width:1px;border-style:solid;gap:var(--cnvs-sys-space-x2, 0.5rem);border-color:var(--css-button-vars-default-border, transparent);cursor:pointer;display:inline-flex;box-shadow:none;align-items:center;justify-content:center;box-sizing:border-box;outline:2px transparent;white-space:nowrap;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;border-radius:var(--css-button-vars-default-borderRadius, var(--cnvs-sys-shape-round, 62.5rem));position:relative;vertical-align:middle;overflow:hidden;transition:box-shadow 120ms linear, border 120ms linear, background-color 120ms linear, color 120ms linear;&:disabled, &:disabled:active{cursor:default;box-shadow:none;opacity:var(--css-button-vars-disabled-opacity, 1);}& span .wd-icon-fill{transition-duration:40ms;fill:var(--css-button-vars-default-icon, var(--cnvs-base-palette-black-pepper-400, #333333));}.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2{fill:var(--css-button-vars-default-icon, var(--cnvs-base-palette-black-pepper-400, #333333));}&:focus-visible, &.focus{background-color:var(--css-button-vars-focus-background, transparent);border-color:var(--css-button-vars-focus-border, transparent);color:var(--css-button-vars-focus-label, var(--cnvs-base-palette-black-pepper-400, #333333));& span .wd-icon-fill{fill:var(--css-button-vars-focus-icon, var(--cnvs-base-palette-black-pepper-400, #333333));}.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2{fill:var(--css-button-vars-focus-icon, var(--cnvs-base-palette-black-pepper-400, #333333));}box-shadow:0 0 0 2px var(--css-button-vars-focus-boxShadowInner, var(--cnvs-base-palette-french-vanilla-100, #fff)), 0 0 0 calc(2px + 2px) var(--css-button-vars-focus-boxShadowOuter, var(--cnvs-brand-primary-base, rgba(0,92,184,1)));}&:hover, &.hover{background-color:var(--css-button-vars-hover-background, var(--cnvs-base-palette-black-pepper-500, #1e1e1e));border-color:var(--css-button-vars-hover-border, transparent);color:var(--css-button-vars-hover-label, var(--cnvs-base-palette-black-pepper-500, #1e1e1e));& span .wd-icon-fill{fill:var(--css-button-vars-hover-icon, var(--cnvs-base-palette-black-pepper-500, #1e1e1e));}.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2{fill:var(--css-button-vars-hover-icon, var(--cnvs-base-palette-black-pepper-500, #1e1e1e));}}&:hover:active{transition-duration:40ms;}&:active, &.active{background-color:var(--css-button-vars-active-background, transparent);border-color:var(--css-button-vars-active-border, transparent);color:var(--css-button-vars-active-label, var(--cnvs-base-palette-black-pepper-400, #333333));& span .wd-icon-fill{fill:var(--css-button-vars-active-icon, var(--cnvs-base-palette-black-pepper-400, #333333));}.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2{fill:var(--css-button-vars-active-icon);}}&:disabled{background-color:var(--css-button-vars-disabled-background, transparent);border-color:var(--css-button-vars-disabled-border, transparent);color:var(--css-button-vars-disabled-label, var(--cnvs-base-palette-black-pepper-400, #333333));& span .wd-icon-fill{fill:var(--css-button-vars-disabled-icon, var(--cnvs-base-palette-black-pepper-400, #333333));}.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2{fill:var(--css-button-vars-disabled-icon, var(--cnvs-base-palette-black-pepper-400, #333333));}}" });
|
|
22
22
|
/**
|
|
23
23
|
* Button modifiers that will overwrite the base styles of Buttons.
|
|
24
24
|
* - `Size`: These modifiers will dictate a size of a Button and has a set of styles to associated with it.
|
|
@@ -27,24 +27,24 @@ const baseButtonStyles = createStyles({ name: "oimz0", styles: "font-family:\"Ro
|
|
|
27
27
|
*/
|
|
28
28
|
export const buttonModifiers = createModifiers({
|
|
29
29
|
size: {
|
|
30
|
-
large: createStyles({ name: "
|
|
31
|
-
medium: createStyles({ name: "
|
|
32
|
-
small: createStyles({ name: "
|
|
33
|
-
extraSmall: createStyles({ name: "
|
|
30
|
+
large: createStyles({ name: "b9y41", styles: "font-size:var(--cnvs-sys-space-x4, 1rem);line-height:var(--cnvs-sys-space-x6, 1.5rem);letter-spacing:0.01rem;height:48px;padding-inline:var(--cnvs-sys-space-x8, 2rem);min-width:112px;" }),
|
|
31
|
+
medium: createStyles({ name: "b9y42", styles: "font-size:0.875rem;letter-spacing:0.015rem;min-width:96px;padding-inline:var(--cnvs-sys-space-x6, 1.5rem);height:var(--cnvs-sys-space-x10, 2.5rem);" }),
|
|
32
|
+
small: createStyles({ name: "b9y43", styles: "font-size:0.875rem;letter-spacing:0.015rem;height:var(--cnvs-sys-space-x8, 2rem);min-width:var(--cnvs-sys-space-x20, 5rem);padding-inline:var(--cnvs-sys-space-x4, 1rem);gap:var(--cnvs-sys-space-x1, 0.25rem);" }),
|
|
33
|
+
extraSmall: createStyles({ name: "b9y44", styles: "font-size:0.75rem;line-height:var(--cnvs-sys-space-x4, 1rem);letter-spacing:0.02rem;height:var(--cnvs-sys-space-x6, 1.5rem);min-width:auto;padding-inline:var(--cnvs-sys-space-x3, 0.75rem);gap:var(--cnvs-sys-space-x1, 0.25rem);" }),
|
|
34
34
|
},
|
|
35
35
|
iconPosition: {
|
|
36
|
-
largeOnly: createStyles({ name: "
|
|
37
|
-
largeStart: createStyles({ name: "
|
|
38
|
-
largeEnd: createStyles({ name: "
|
|
39
|
-
mediumOnly: createStyles({ name: "
|
|
40
|
-
mediumStart: createStyles({ name: "
|
|
41
|
-
mediumEnd: createStyles({ name: "
|
|
42
|
-
smallOnly: createStyles({ name: "
|
|
43
|
-
smallStart: createStyles({ name: "
|
|
44
|
-
smallEnd: createStyles({ name: "
|
|
45
|
-
extraSmallOnly: createStyles({ name: "
|
|
46
|
-
extraSmallStart: createStyles({ name: "
|
|
47
|
-
extraSmallEnd: createStyles({ name: "
|
|
36
|
+
largeOnly: createStyles({ name: "b9y45", styles: "padding:0;min-width:calc(var(--cnvs-sys-space-x4, 1rem) * 3);" }),
|
|
37
|
+
largeStart: createStyles({ name: "b9y46", styles: "padding-inline-start:var(--cnvs-sys-space-x6, 1.5rem);padding-inline-end:var(--cnvs-sys-space-x8, 2rem);" }),
|
|
38
|
+
largeEnd: createStyles({ name: "b9y47", styles: "padding-inline-start:var(--cnvs-sys-space-x8, 2rem);padding-inline-end:var(--cnvs-sys-space-x6, 1.5rem);" }),
|
|
39
|
+
mediumOnly: createStyles({ name: "b9y48", styles: "padding:0;min-width:var(--cnvs-sys-space-x10, 2.5rem);" }),
|
|
40
|
+
mediumStart: createStyles({ name: "b9y49", styles: "padding-inline-start:calc(var(--cnvs-sys-space-x1, 0.25rem) * 5);padding-inline-end:var(--cnvs-sys-space-x6, 1.5rem);" }),
|
|
41
|
+
mediumEnd: createStyles({ name: "b9y4a", styles: "padding-inline-start:var(--cnvs-sys-space-x6, 1.5rem);padding-inline-end:calc(var(--cnvs-sys-space-x1, 0.25rem) * 5);" }),
|
|
42
|
+
smallOnly: createStyles({ name: "b9y4b", styles: "padding:0;min-width:var(--cnvs-sys-space-x8, 2rem);" }),
|
|
43
|
+
smallStart: createStyles({ name: "b9y4c", styles: "padding-inline-start:var(--cnvs-sys-space-x3, 0.75rem);padding-inline-end:var(--cnvs-sys-space-x4, 1rem);" }),
|
|
44
|
+
smallEnd: createStyles({ name: "b9y4d", styles: "padding-inline-start:var(--cnvs-sys-space-x4, 1rem);padding-inline-end:var(--cnvs-sys-space-x3, 0.75rem);" }),
|
|
45
|
+
extraSmallOnly: createStyles({ name: "b9y4e", styles: "padding:0;min-width:var(--cnvs-sys-space-x6, 1.5rem);" }),
|
|
46
|
+
extraSmallStart: createStyles({ name: "b9y4f", styles: "padding-inline-start:var(--cnvs-sys-space-x2, 0.5rem);padding-inline-end:var(--cnvs-sys-space-x3, 0.75rem);" }),
|
|
47
|
+
extraSmallEnd: createStyles({ name: "b9y4g", styles: "padding-inline-start:var(--cnvs-sys-space-x3, 0.75rem);padding-inline-end:var(--cnvs-sys-space-x2, 0.5rem);" }),
|
|
48
48
|
},
|
|
49
49
|
});
|
|
50
50
|
export function capitalize(string = '') {
|
|
@@ -4,7 +4,7 @@ import { createComponent } from '@workday/canvas-kit-react/common';
|
|
|
4
4
|
import { createStyles, cssVar } from '@workday/canvas-kit-styling';
|
|
5
5
|
import { base, brand, system } from '@workday/canvas-tokens-web';
|
|
6
6
|
import { Button } from './Button';
|
|
7
|
-
const deleteStyles = createStyles({ name: "
|
|
7
|
+
const deleteStyles = createStyles({ name: "b9y410", styles: "--css-button-vars-default-background:var(--cnvs-brand-error-base, #de2e21);--css-button-vars-default-border:transparent;--css-button-vars-default-borderRadius:var(--cnvs-sys-shape-round, 62.5rem);--css-button-vars-default-label:var(--cnvs-brand-error-accent, #ffffff);&:hover, &.hover{--css-button-vars-hover-background:var(--cnvs-brand-error-dark, #a31b12);--css-button-vars-hover-border:transparent;--css-button-vars-hover-label:var(--cnvs-brand-error-accent, #ffffff);}&:focus-visible, &.focus{--css-button-vars-focus-background:var(--cnvs-brand-error-base, #de2e21);--css-button-vars-focus-border:transparent;--css-button-vars-focus-label:var(--cnvs-brand-error-accent, #ffffff);--css-button-vars-focus-boxShadowInner:var(--cnvs-base-palette-french-vanilla-100, #ffffff);--css-button-vars-focus-boxShadowOuter:var(--cnvs-brand-common-focus-outline, #0875e1);}&:active, &.active{--css-button-vars-active-background:var(--cnvs-brand-error-darkest, rgba(128,22,14,1));--css-button-vars-active-border:transparent;--css-button-vars-active-label:var(--cnvs-brand-error-accent, #ffffff);}&:disabled, &:active:disabled, &:focus:disabled, &:hover:disabled{--css-button-vars-disabled-background:var(--cnvs-brand-error-light, #fcc9c5);--css-button-vars-disabled-label:var(--cnvs-brand-error-accent, #ffffff);opacity:1px;}" });
|
|
8
8
|
/**
|
|
9
9
|
* Use sparingly for destructive actions that will result in data loss, can’t be undone, or will
|
|
10
10
|
* have significant consequences. They commonly appear in confirmation dialogs as the final
|
|
@@ -4,10 +4,10 @@ import { createComponent } from '@workday/canvas-kit-react/common';
|
|
|
4
4
|
import { createStyles, cssVar, createModifiers } from '@workday/canvas-kit-styling';
|
|
5
5
|
import { base, brand, system } from '@workday/canvas-tokens-web';
|
|
6
6
|
import { Button } from './Button';
|
|
7
|
-
const primaryStyles = createStyles({ name: "
|
|
7
|
+
const primaryStyles = createStyles({ name: "b9y4w", styles: "--css-button-vars-default-background:var(--cnvs-brand-primary-base, var(--cnvs-base-palette-blueberry-400, #0875e1));--css-button-vars-default-border:transparent;--css-button-vars-default-borderRadius:var(--cnvs-sys-shape-round, 62.5rem);--css-button-vars-default-label:var(--cnvs-brand-primary-accent, #ffffff);--css-button-vars-default-icon:var(--cnvs-brand-primary-accent, #ffffff);--css-button-vars-hover-background:var(--cnvs-brand-primary-dark, rgba(0,92,184,1));--css-button-vars-hover-border:transparent;--css-button-vars-hover-label:var(--cnvs-brand-primary-accent, #ffffff);--css-button-vars-hover-icon:var(--cnvs-brand-primary-accent, #ffffff);--css-button-vars-focus-background:var(--cnvs-brand-primary-base, rgba(8,117,226,1));--css-button-vars-focus-border:transparent;--css-button-vars-focus-label:var(--cnvs-brand-primary-accent, #ffffff);--css-button-vars-focus-icon:var(--cnvs-brand-primary-accent, #ffffff);--css-button-vars-focus-boxShadowInner:var(--cnvs-base-palette-french-vanilla-100, #ffffff);--css-button-vars-focus-boxShadowOuter:var(--cnvs-brand-common-focus-outline, rgba(8,117,226,1));--css-button-vars-active-background:var(--cnvs-brand-primary-darkest, rgba(0,66,133,1));--css-button-vars-active-border:transparent;--css-button-vars-active-label:var(--cnvs-brand-primary-accent, #ffffff);--css-button-vars-active-icon:var(--cnvs-brand-primary-accent, #ffffff);--css-button-vars-disabled-background:var(--cnvs-brand-primary-base, rgba(8,117,226,1));--css-button-vars-disabled-border:transparent;--css-button-vars-disabled-label:var(--cnvs-brand-primary-accent, #ffffff);--css-button-vars-disabled-opacity:0.4;--css-button-vars-disabled-icon:var(--cnvs-brand-primary-accent, #ffffff);" });
|
|
8
8
|
export const primaryButtonModifiers = createModifiers({
|
|
9
9
|
variant: {
|
|
10
|
-
inverse: createStyles({ name: "
|
|
10
|
+
inverse: createStyles({ name: "b9y4x", styles: "--css-button-vars-default-background:var(--cnvs-base-palette-french-vanilla-100, #ffffff);--css-button-vars-default-borderRadius:var(--cnvs-sys-shape-round, 62.5rem);--css-button-vars-default-label:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-vars-default-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-vars-hover-background:var(--cnvs-base-palette-soap-300, rgba(232,235,237,1));--css-button-vars-hover-label:var(--cnvs-base-palette-black-pepper-500, rgba(31,31,31,1));--css-button-vars-hover-icon:var(--cnvs-base-palette-black-pepper-500, rgba(31,31,31,1));--css-button-vars-focus-background:var(--cnvs-base-palette-french-vanilla-100, #ffffff);--css-button-vars-focus-label:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-vars-focus-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-vars-focus-boxShadowInner:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-vars-focus-boxShadowOuter:var(--cnvs-base-palette-french-vanilla-100, #ffffff);--css-button-vars-active-background:var(--cnvs-base-palette-soap-400, rgba(224,227,230,1));--css-button-vars-active-label:var(--cnvs-base-palette-black-pepper-500, rgba(31,31,31,1));--css-button-vars-active-icon:var(--cnvs-base-palette-black-pepper-500, rgba(31,31,31,1));--css-button-vars-disabled-background:var(--cnvs-base-palette-french-vanilla-100, #ffffff);--css-button-vars-disabled-label:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-vars-disabled-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));" }),
|
|
11
11
|
},
|
|
12
12
|
});
|
|
13
13
|
export const PrimaryButton = createComponent('button')({
|
|
@@ -4,10 +4,10 @@ import { createComponent } from '@workday/canvas-kit-react/common';
|
|
|
4
4
|
import { createStyles, cssVar, createModifiers } from '@workday/canvas-kit-styling';
|
|
5
5
|
import { base, brand, system } from '@workday/canvas-tokens-web';
|
|
6
6
|
import { Button } from './Button';
|
|
7
|
-
const secondaryStyles = createStyles({ name: "
|
|
7
|
+
const secondaryStyles = createStyles({ name: "b9y4y", styles: "--css-button-vars-default-background:transparent;--css-button-vars-default-border:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-vars-default-borderRadius:var(--cnvs-sys-shape-round, 62.5rem);--css-button-vars-default-label:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-vars-default-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-vars-hover-background:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-vars-hover-border:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-vars-hover-label:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--css-button-vars-hover-icon:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--css-button-vars-focus-background:transparent;--css-button-vars-focus-border:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-vars-focus-label:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-vars-focus-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-vars-focus-boxShadowInner:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-vars-focus-boxShadowOuter:var(--cnvs-brand-common-focus-outline, rgba(8,117,226,1));--css-button-vars-active-background:var(--cnvs-base-palette-black-pepper-500, rgba(31,31,31,1));--css-button-vars-active-border:var(--cnvs-base-palette-black-pepper-500, rgba(31,31,31,1));--css-button-vars-active-label:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--css-button-vars-active-icon:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--css-button-vars-disabled-background:transparent;--css-button-vars-disabled-border:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-vars-disabled-label:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-vars-disabled-opacity:0.4;--css-button-vars-disabled-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));" });
|
|
8
8
|
export const secondaryButtonModifiers = createModifiers({
|
|
9
9
|
variant: {
|
|
10
|
-
inverse: createStyles({ name: "
|
|
10
|
+
inverse: createStyles({ name: "b9y4z", styles: "--css-button-vars-default-background:transparent;--css-button-vars-default-border:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-vars-default-label:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-vars-default-icon:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-vars-hover-background:var(--cnvs-base-palette-soap-300, rgba(232,235,237,1));--css-button-vars-hover-border:var(--cnvs-base-palette-soap-300, rgba(232,235,237,1));--css-button-vars-hover-label:var(--cnvs-base-palette-black-pepper-500, rgba(31,31,31,1));--css-button-vars-hover-icon:var(--cnvs-base-palette-black-pepper-500, rgba(31,31,31,1));--css-button-vars-focus-background:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-vars-focus-border:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-vars-focus-label:var(--cnvs-base-palette-black-pepper-500, rgba(31,31,31,1));--css-button-vars-focus-icon:var(--cnvs-base-palette-black-pepper-500, rgba(31,31,31,1));--css-button-vars-focus-boxShadowInner:var(--cnvs-base-palette-black-pepper-500, rgba(31,31,31,1));--css-button-vars-focus-boxShadowOuter:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-vars-active-background:var(--cnvs-base-palette-soap-400, rgba(224,227,230,1));--css-button-vars-active-border:var(--cnvs-base-palette-soap-400, rgba(224,227,230,1));--css-button-vars-active-label:var(--cnvs-base-palette-black-pepper-500, rgba(31,31,31,1));--css-button-vars-active-icon:var(--cnvs-base-palette-black-pepper-500, rgba(31,31,31,1));--css-button-vars-disabled-background:transparent;--css-button-vars-disabled-border:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-vars-disabled-label:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-vars-disabled-icon:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));" }),
|
|
11
11
|
},
|
|
12
12
|
});
|
|
13
13
|
export const SecondaryButton = createComponent('button')({
|
|
@@ -5,27 +5,27 @@ import { createStyles, cssVar, createModifiers } from '@workday/canvas-kit-styli
|
|
|
5
5
|
import { system, brand, base } from '@workday/canvas-tokens-web';
|
|
6
6
|
import { borderRadius, space } from '@workday/canvas-kit-react/tokens';
|
|
7
7
|
import { Button } from './Button';
|
|
8
|
-
const tertiaryStyles = createStyles({ name: "
|
|
8
|
+
const tertiaryStyles = createStyles({ name: "b9y4h", styles: "padding-inline:var(--cnvs-sys-space-x2, 0.5rem);min-width:auto;text-decoration:underline;border:0px;--css-button-vars-default-background:transparent;--css-button-vars-default-border:transparent;--css-button-vars-default-borderRadius:var(--cnvs-sys-shape-x1, 0.25rem);--css-button-vars-default-label:var(--cnvs-brand-primary-base, rgba(8,117,226,1));--css-button-vars-default-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51, 51, 51, 1));--css-button-vars-hover-background:var(--cnvs-base-palette-soap-200, rgba(241, 242, 243, 1));--css-button-vars-hover-border:transparent;--css-button-vars-hover-label:var(--cnvs-brand-primary-dark, rgba(0,92,184,1));--css-button-vars-hover-icon:var(--cnvs-base-palette-black-pepper-500, rgba(31,31,31,1));--css-button-vars-focus-background:transparent;--css-button-vars-focus-border:transparent;--css-button-vars-focus-label:var(--cnvs-brand-primary-base, rgba(8,117,226,1));--css-button-vars-focus-icon:var(--cnvs-base-palette-black-pepper-500, rgba(31,31,31,1));--css-button-vars-focus-boxShadowInner:var(--cnvs-brand-common-focus-outline, rgba(8,117,226,1));--css-button-vars-focus-boxShadowOuter:var(--cnvs-brand-common-focus-outline, rgba(8,117,226,1));--css-button-vars-active-background:var(--cnvs-base-palette-soap-300, rgba(232,235,237,1));--css-button-vars-active-border:transparent;--css-button-vars-active-label:var(--cnvs-brand-primary-dark, rgba(0,92,184,1));--css-button-vars-active-icon:var(--cnvs-base-palette-black-pepper-500, rgba(31,31,31,1));--css-button-vars-disabled-background:transparent;--css-button-vars-disabled-border:var(--cnvs-base-palette-french-vanilla-100, #fff);--css-button-vars-disabled-label:var(--cnvs-brand-primary-base, rgba(8,117,226,1));--css-button-vars-disabled-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51, 51, 51, 1));--css-button-vars-disabled-opacity:0.4;&:focus-visible, &.focus{box-shadow:0 0 0 0px var(--cnvs-base-palette-french-vanilla-100, var(--css-button-vars-focus-boxShadowInner)), 0 0 0 calc(2px + 0px) var(--cnvs-brand-common-focus-outline, var(--css-button-vars-focus-boxShadowOuter));}" });
|
|
9
9
|
export const tertiaryButtonModifiers = createModifiers({
|
|
10
10
|
isThemeable: {
|
|
11
|
-
true: createStyles({ name: "
|
|
11
|
+
true: createStyles({ name: "b9y4i", styles: "--css-button-vars-default-icon:var(--cnvs-brand-primary-base, rgba(8,117,226,1));--css-button-vars-hover-icon:var(--cnvs-brand-primary-dark, rgba(0,92,184,1));--css-button-vars-focus-icon:var(--cnvs-brand-primary-base, rgba(8,117,226,1));--css-button-vars-active-icon:var(--cnvs-brand-primary-dark, rgba(0,92,184,1));--css-button-vars-disabled-icon:var(--cnvs-brand-primary-base, rgba(8,117,226,1));" }),
|
|
12
12
|
},
|
|
13
13
|
variant: {
|
|
14
|
-
inverse: createStyles({ name: "
|
|
14
|
+
inverse: createStyles({ name: "b9y4j", styles: "--css-button-vars-default-background:transparent;--css-button-vars-default-border:transparent;--css-button-vars-default-label:var(--cnvs-base-palette-french-vanilla-100, #fff);--css-button-vars-default-icon:var(--cnvs-base-palette-french-vanilla-100, #fff);--css-button-vars-hover-background:var(--cnvs-base-palette-french-vanilla-100, #fff);--css-button-vars-hover-border:transparent;--css-button-vars-hover-label:var(--cnvs-base-palette-black-pepper-400, rgba(51, 51, 51, 1));--css-button-vars-hover-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51, 51, 51, 1));--css-button-vars-focus-background:var(--cnvs-base-palette-french-vanilla-100, #fff);--css-button-vars-focus-border:transparent;--css-button-vars-focus-label:var(--cnvs-base-palette-black-pepper-400, rgba(51, 51, 51, 1));--css-button-vars-focus-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51, 51, 51, 1));--css-button-vars-active-background:var(--cnvs-base-palette-soap-200, rgba(241, 242, 243, 1));--css-button-vars-active-border:transparent;--css-button-vars-active-label:var(--cnvs-base-palette-black-pepper-400, rgba(51, 51, 51, 1));--css-button-vars-active-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51, 51, 51, 1));--css-button-vars-disabled-background:transparent;--css-button-vars-disabled-border:var(--cnvs-base-palette-french-vanilla-100, #fff);--css-button-vars-disabled-label:var(--cnvs-base-palette-french-vanilla-100, #fff);--css-button-vars-disabled-icon:var(--cnvs-base-palette-french-vanilla-100, #fff);&:focus-visible, &.focus{box-shadow:inset 0 0 0 2px var(--cnvs-base-palette-black-pepper-400, var(--css-button-vars-focus-boxShadowInner)), 0 0 0 2px var(--cnvs-base-palette-french-vanilla-100, var(--css-button-vars-focus-boxShadowOuter));}" }),
|
|
15
15
|
},
|
|
16
16
|
iconPosition: {
|
|
17
|
-
largeOnly: createStyles({ name: "
|
|
18
|
-
largeStart: createStyles({ name: "
|
|
19
|
-
largeEnd: createStyles({ name: "
|
|
20
|
-
mediumOnly: createStyles({ name: "
|
|
21
|
-
mediumStart: createStyles({ name: "
|
|
22
|
-
mediumEnd: createStyles({ name: "
|
|
23
|
-
smallOnly: createStyles({ name: "
|
|
24
|
-
smallStart: createStyles({ name: "
|
|
25
|
-
smallEnd: createStyles({ name: "
|
|
26
|
-
extraSmallOnly: createStyles({ name: "
|
|
27
|
-
extraSmallStart: createStyles({ name: "
|
|
28
|
-
extraSmallEnd: createStyles({ name: "
|
|
17
|
+
largeOnly: createStyles({ name: "b9y4k", styles: "border-radius:999px;padding:0;min-width:calc(var(--cnvs-sys-space-x4, 1rem) * 3);" }),
|
|
18
|
+
largeStart: createStyles({ name: "b9y4l", styles: "padding-inline-start:0.5rem;padding-inline-end:0.75rem;" }),
|
|
19
|
+
largeEnd: createStyles({ name: "b9y4m", styles: "padding-inline-start:0.75rem;padding-inline-end:0.5rem;" }),
|
|
20
|
+
mediumOnly: createStyles({ name: "b9y4n", styles: "padding:0;min-width:2.5rem;border-radius:999px;" }),
|
|
21
|
+
mediumStart: createStyles({ name: "b9y4o", styles: "padding-inline-start:0.5rem;padding-inline-end:0.75rem;" }),
|
|
22
|
+
mediumEnd: createStyles({ name: "b9y4p", styles: "padding-inline-start:0.75rem;padding-inline-end:0.5rem;" }),
|
|
23
|
+
smallOnly: createStyles({ name: "b9y4q", styles: "padding:0;min-width:2rem;border-radius:999px;" }),
|
|
24
|
+
smallStart: createStyles({ name: "b9y4r", styles: "padding-inline-start:0.5rem;padding-inline-end:0.75rem;" }),
|
|
25
|
+
smallEnd: createStyles({ name: "b9y4s", styles: "padding-inline-start:0.75rem;padding-inline-end:0.5rem;" }),
|
|
26
|
+
extraSmallOnly: createStyles({ name: "b9y4t", styles: "padding:0;min-width:1.5rem;border-radius:999px;" }),
|
|
27
|
+
extraSmallStart: createStyles({ name: "b9y4u", styles: "padding-inline-start:0.25rem;padding-inline-end:0.5rem;" }),
|
|
28
|
+
extraSmallEnd: createStyles({ name: "b9y4v", styles: "padding-inline-start:0.5rem;padding-inline-end:0.25rem;" }),
|
|
29
29
|
},
|
|
30
30
|
});
|
|
31
31
|
export const TertiaryButton = createComponent('button')({
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { createContainer } from '@workday/canvas-kit-react/common';
|
|
3
|
-
import { useComboboxModel } from './hooks';
|
|
3
|
+
import { useComboboxModel } from './hooks/useComboboxModel';
|
|
4
4
|
import { ComboboxInput } from './ComboboxInput';
|
|
5
5
|
import { ComboboxMenu } from './ComboboxMenu';
|
|
6
6
|
export const Combobox = createContainer()({
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { createElemPropsHook, createSubcomponent, } from '@workday/canvas-kit-react/common';
|
|
3
3
|
import { Menu } from '@workday/canvas-kit-react/menu';
|
|
4
|
-
import { useComboboxModel } from './hooks';
|
|
4
|
+
import { useComboboxModel } from './hooks/useComboboxModel';
|
|
5
5
|
/**
|
|
6
6
|
* This hook sets the `minWidth` style attribute to match the width of the
|
|
7
7
|
* {@link ComboboxInput Combobox.Input} component.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ComboboxInput.d.ts","sourceRoot":"","sources":["../../../../combobox/lib/ComboboxInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"ComboboxInput.d.ts","sourceRoot":"","sources":["../../../../combobox/lib/ComboboxInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAKxB,CAAC"}
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { createSubcomponent } from '@workday/canvas-kit-react/common';
|
|
3
3
|
import { TextInput } from '@workday/canvas-kit-react/text-input';
|
|
4
|
-
import { useComboboxModel
|
|
4
|
+
import { useComboboxModel } from './hooks/useComboboxModel';
|
|
5
|
+
import { useComboboxInput } from './hooks/useComboboxInput';
|
|
5
6
|
export const ComboboxInput = createSubcomponent(TextInput)({
|
|
6
7
|
modelHook: useComboboxModel,
|
|
7
8
|
elemPropsHook: useComboboxInput,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { createSubcomponent } from '@workday/canvas-kit-react/common';
|
|
3
3
|
import { Menu } from '@workday/canvas-kit-react/menu';
|
|
4
|
-
import { useComboboxModel } from './hooks';
|
|
4
|
+
import { useComboboxModel } from './hooks/useComboboxModel';
|
|
5
5
|
import { ComboboxMenuList } from './ComboboxMenuList';
|
|
6
6
|
import { ComboboxMenuItem } from './ComboboxMenuItem';
|
|
7
7
|
import { ComboboxCard } from './ComboboxCard';
|
|
@@ -4,7 +4,7 @@ import { StyledMenuItem, useMenuModel } from '@workday/canvas-kit-react/menu';
|
|
|
4
4
|
import { SystemIcon } from '@workday/canvas-kit-react/icon';
|
|
5
5
|
import { useListItemAllowChildStrings, useListItemRegister, } from '@workday/canvas-kit-react/collection';
|
|
6
6
|
import { OverflowTooltip } from '@workday/canvas-kit-react/tooltip';
|
|
7
|
-
import { useComboboxModel } from './hooks';
|
|
7
|
+
import { useComboboxModel } from './hooks/useComboboxModel';
|
|
8
8
|
/**
|
|
9
9
|
* This hook sets up accessibility and behavior of a {@link ComboboxMenuItem Combobox.Menu.Item}
|
|
10
10
|
* component. It prevents focus when clicking so the focus stays on the
|
|
@@ -3,7 +3,7 @@ import { commonColors } from '@workday/canvas-kit-react/tokens';
|
|
|
3
3
|
import { createElemPropsHook, createSubcomponent } from '@workday/canvas-kit-react/common';
|
|
4
4
|
import { useMenuModel } from '@workday/canvas-kit-react/menu';
|
|
5
5
|
import { ListBox } from '@workday/canvas-kit-react/collection';
|
|
6
|
-
import { useComboboxModel } from './hooks';
|
|
6
|
+
import { useComboboxModel } from './hooks/useComboboxModel';
|
|
7
7
|
/**
|
|
8
8
|
* The `listbox` uses `aria-labelledby` pointing to the {@link ComboboxInput Combobox.Input}. This
|
|
9
9
|
* input should be labelled by a form field label for proper accessibility. Use {@link FormField} to
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useComboboxInput.d.ts","sourceRoot":"","sources":["../../../../../combobox/lib/hooks/useComboboxInput.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"useComboboxInput.d.ts","sourceRoot":"","sources":["../../../../../combobox/lib/hooks/useComboboxInput.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAY1B;;;;;GAKG;AACH,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gCA6BN,mBAAmB;6BActB,gBAAgB;;8BAIf,gBAAgB;;;;;;;;;;;;;;;;;;EAoBpC,CAAC"}
|
|
@@ -2,7 +2,10 @@ import React from 'react';
|
|
|
2
2
|
import { composeHooks, createElemPropsHook, useForkRef } from '@workday/canvas-kit-react/common';
|
|
3
3
|
import { usePopupTarget } from '@workday/canvas-kit-react/popup';
|
|
4
4
|
import { useListActiveDescendant } from '@workday/canvas-kit-react/collection';
|
|
5
|
-
import { useComboboxModel
|
|
5
|
+
import { useComboboxModel } from './useComboboxModel';
|
|
6
|
+
import { useComboboxInputOpenWithArrowKeys } from './useComboboxInputOpenWithArrowKeys';
|
|
7
|
+
import { useSetPopupWidth } from './useSetPopupWidth';
|
|
8
|
+
import { useComboboxListKeyboardHandler } from './useComboboxListKeyboardHandler';
|
|
6
9
|
/**
|
|
7
10
|
* `useComboboxInput` Adds all attributes necessary to start with a {@link ComboboxInput Combobox.Input}. It opens the
|
|
8
11
|
* menu with arrow keys, uses {@link useListActiveDescendant}, and handles keyboard arrows to
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { createElemPropsHook, useIsRTL } from '@workday/canvas-kit-react/common';
|
|
2
2
|
import { keyboardEventToCursorEvents } from '@workday/canvas-kit-react/collection';
|
|
3
|
-
import { useComboboxModel } from './
|
|
3
|
+
import { useComboboxModel } from './useComboboxModel';
|
|
4
4
|
/**
|
|
5
5
|
* `useComboboxListKeyboardHandler` handle calling keyboard events like ArrowUp and ArrowDown only when the menu is visible.
|
|
6
6
|
*/
|
|
@@ -442,7 +442,20 @@ export declare const Select: import("@workday/canvas-kit-react/common").Componen
|
|
|
442
442
|
getTextValue: (item: any) => string;
|
|
443
443
|
nonInteractiveIds: string[];
|
|
444
444
|
orientation: import("../../collection/lib/useBaseListModel").Orientation;
|
|
445
|
-
defaultItemHeight: number;
|
|
445
|
+
defaultItemHeight: number; /**
|
|
446
|
+
* `Select.Popper` renders a {@link ComboboxPopper Combobox.Menu.Popper}. You have access to all `Popper` props.
|
|
447
|
+
*
|
|
448
|
+
* ```tsx
|
|
449
|
+
* <Select item={options}>
|
|
450
|
+
* <FormField label="Your Label">
|
|
451
|
+
* <Select.Input onChange={(event) => handleChange(event)}>
|
|
452
|
+
* <Select.Popper>
|
|
453
|
+
* ...
|
|
454
|
+
* </Select.Popper>
|
|
455
|
+
* </FormField>
|
|
456
|
+
* </Select>
|
|
457
|
+
* ```
|
|
458
|
+
*/
|
|
446
459
|
items: any[];
|
|
447
460
|
value: string | undefined;
|
|
448
461
|
onChange(event: React.ChangeEvent<HTMLInputElement>): void;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../../select/lib/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAEL,YAAY,EAEZ,SAAS,EACV,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,QAAQ,EAAC,MAAM,oCAAoC,CAAC;AAE5D,OAAO,EAAa,SAAS,EAAC,MAAM,sCAAsC,CAAC;
|
|
1
|
+
{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../../select/lib/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAEL,YAAY,EAEZ,SAAS,EACV,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,QAAQ,EAAC,MAAM,oCAAoC,CAAC;AAE5D,OAAO,EAAa,SAAS,EAAC,MAAM,sCAAsC,CAAC;AAM3E,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAE9D,MAAM,WAAW,gBAAiB,SAAQ,YAAY,CAAC,OAAO,SAAS,CAAC;IACtE;;;;OAIG;IACH,cAAc,CAAC,EAAE,gBAAgB,CAAC;CACnC;AACD,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAwBvB,CAAC;AAEF,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAWrB,CAAC;AAEH,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EASrB,CAAC;AAEH,MAAM,WAAW,WAAY,SAAQ,SAAS,EAAE,YAAY,CAAC,OAAO,QAAQ,CAAC;CAAG;AAChF;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;+BAkBf;;;;;;;;;;;;;OAaG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA3BH;;;;;;;;;;;;OAYG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAEH;;;;;;;;;;;;;OAaG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAEH;;;;;;;;;;;;;;;;;OAiBG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAEH;;;;;;;;;;;;;;;;;OAiBG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAEH;;;;;;;;;;;;;;;;;OAiBG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CASL,CAAC"}
|
|
@@ -4,7 +4,8 @@ import { Combobox } from '@workday/canvas-kit-react/combobox';
|
|
|
4
4
|
import { InputGroup, TextInput } from '@workday/canvas-kit-react/text-input';
|
|
5
5
|
import { SystemIcon } from '@workday/canvas-kit-react/icon';
|
|
6
6
|
import { caretDownSmallIcon } from '@workday/canvas-system-icons-web';
|
|
7
|
-
import { useSelectModel
|
|
7
|
+
import { useSelectModel } from './hooks/useSelectModel';
|
|
8
|
+
import { useSelectCard } from './hooks/useSelectCard';
|
|
8
9
|
import { useSelectInput } from './hooks/useSelectInput';
|
|
9
10
|
export const SelectInput = createSubcomponent(TextInput)({
|
|
10
11
|
modelHook: useSelectModel,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@workday/canvas-kit-react",
|
|
3
|
-
"version": "10.0.
|
|
3
|
+
"version": "10.0.4",
|
|
4
4
|
"description": "The parent module that contains all Workday Canvas Kit React components",
|
|
5
5
|
"author": "Workday, Inc. (https://www.workday.com)",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -49,8 +49,8 @@
|
|
|
49
49
|
"@emotion/styled": "^11.6.0",
|
|
50
50
|
"@popperjs/core": "^2.5.4",
|
|
51
51
|
"@workday/canvas-colors-web": "^2.0.0",
|
|
52
|
-
"@workday/canvas-kit-popup-stack": "^10.0.
|
|
53
|
-
"@workday/canvas-kit-styling": "^10.0.
|
|
52
|
+
"@workday/canvas-kit-popup-stack": "^10.0.4",
|
|
53
|
+
"@workday/canvas-kit-styling": "^10.0.4",
|
|
54
54
|
"@workday/canvas-system-icons-web": "^3.0.0",
|
|
55
55
|
"@workday/canvas-tokens-web": "^1.0.0",
|
|
56
56
|
"@workday/design-assets-types": "^0.2.8",
|
|
@@ -68,5 +68,5 @@
|
|
|
68
68
|
"@workday/canvas-accent-icons-web": "^3.0.0",
|
|
69
69
|
"@workday/canvas-applet-icons-web": "^2.0.0"
|
|
70
70
|
},
|
|
71
|
-
"gitHead": "
|
|
71
|
+
"gitHead": "ac56802ecc426d7fdd6a552a7cb883d8a86a9121"
|
|
72
72
|
}
|
package/select/lib/Select.tsx
CHANGED
|
@@ -10,7 +10,8 @@ import {Combobox} from '@workday/canvas-kit-react/combobox';
|
|
|
10
10
|
import {InputGroup, TextInput} from '@workday/canvas-kit-react/text-input';
|
|
11
11
|
import {SystemIcon} from '@workday/canvas-kit-react/icon';
|
|
12
12
|
import {caretDownSmallIcon} from '@workday/canvas-system-icons-web';
|
|
13
|
-
import {useSelectModel
|
|
13
|
+
import {useSelectModel} from './hooks/useSelectModel';
|
|
14
|
+
import {useSelectCard} from './hooks/useSelectCard';
|
|
14
15
|
import {useSelectInput} from './hooks/useSelectInput';
|
|
15
16
|
import {CanvasSystemIcon} from '@workday/design-assets-types';
|
|
16
17
|
|