@workday/canvas-kit-react 11.0.0-alpha.671-next.0 → 11.0.0-alpha.693-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/checkbox/lib/CheckBackground.tsx +48 -0
- package/checkbox/lib/Checkbox.tsx +18 -355
- package/checkbox/lib/CheckboxCheck.tsx +81 -0
- package/checkbox/lib/CheckboxContainer.tsx +58 -0
- package/checkbox/lib/CheckboxInput.tsx +279 -0
- package/checkbox/lib/CheckboxRipple.tsx +21 -0
- package/collection/lib/useCursorListModel.tsx +86 -90
- package/collection/lib/useListItemAllowChildStrings.ts +3 -3
- package/collection/lib/useListRenderItem.tsx +1 -1
- package/combobox/lib/hooks/useComboboxInput.ts +1 -0
- package/combobox/lib/hooks/useComboboxKeyboardTypeAhead.ts +3 -3
- package/combobox/lib/hooks/useComboboxModel.tsx +1 -2
- package/common/README.md +32 -14
- package/common/lib/styles/errorRing.ts +2 -2
- package/common/lib/styles/focusRing.ts +4 -17
- package/dist/commonjs/avatar/lib/Avatar.js +1 -1
- package/dist/commonjs/badge/lib/CountBadge.js +8 -8
- package/dist/commonjs/banner/lib/Banner.js +1 -1
- package/dist/commonjs/button/lib/BaseButton.js +22 -22
- 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/button/lib/ToolbarDropdownButton.js +6 -1
- package/dist/commonjs/button/lib/ToolbarIconButton.js +6 -1
- package/dist/commonjs/button/lib/deprecated_Button.js +2 -2
- package/dist/commonjs/card/lib/Card.js +1 -1
- package/dist/commonjs/card/lib/CardHeading.js +1 -1
- package/dist/commonjs/checkbox/lib/CheckBackground.d.ts +10 -0
- package/dist/commonjs/checkbox/lib/CheckBackground.d.ts.map +1 -0
- package/dist/commonjs/checkbox/lib/CheckBackground.js +42 -0
- package/dist/commonjs/checkbox/lib/Checkbox.d.ts +3 -45
- package/dist/commonjs/checkbox/lib/Checkbox.d.ts.map +1 -1
- package/dist/commonjs/checkbox/lib/Checkbox.js +10 -204
- package/dist/commonjs/checkbox/lib/CheckboxCheck.d.ts +10 -0
- package/dist/commonjs/checkbox/lib/CheckboxCheck.d.ts.map +1 -0
- package/dist/commonjs/checkbox/lib/CheckboxCheck.js +51 -0
- package/dist/commonjs/checkbox/lib/CheckboxContainer.d.ts +13 -0
- package/dist/commonjs/checkbox/lib/CheckboxContainer.d.ts.map +1 -0
- package/dist/commonjs/checkbox/lib/CheckboxContainer.js +37 -0
- package/dist/commonjs/checkbox/lib/CheckboxInput.d.ts +48 -0
- package/dist/commonjs/checkbox/lib/CheckboxInput.d.ts.map +1 -0
- package/dist/commonjs/checkbox/lib/CheckboxInput.js +59 -0
- package/dist/commonjs/checkbox/lib/CheckboxRipple.d.ts +2 -0
- package/dist/commonjs/checkbox/lib/CheckboxRipple.d.ts.map +1 -0
- package/dist/commonjs/checkbox/lib/CheckboxRipple.js +33 -0
- package/dist/commonjs/collection/lib/useCursorListModel.d.ts.map +1 -1
- package/dist/commonjs/collection/lib/useListItemAllowChildStrings.d.ts +2 -1
- package/dist/commonjs/collection/lib/useListItemAllowChildStrings.d.ts.map +1 -1
- package/dist/commonjs/collection/lib/useListItemAllowChildStrings.js +1 -1
- package/dist/commonjs/collection/lib/useListRenderItem.js +1 -1
- package/dist/commonjs/combobox/lib/hooks/useComboboxInput.d.ts +1 -0
- package/dist/commonjs/combobox/lib/hooks/useComboboxInput.d.ts.map +1 -1
- package/dist/commonjs/combobox/lib/hooks/useComboboxInput.js +1 -0
- package/dist/commonjs/combobox/lib/hooks/useComboboxKeyboardTypeAhead.js +2 -3
- package/dist/commonjs/combobox/lib/hooks/useComboboxModel.d.ts.map +1 -1
- package/dist/commonjs/combobox/lib/hooks/useComboboxModel.js +1 -2
- package/dist/commonjs/common/lib/AccessibleHide.js +1 -1
- package/dist/commonjs/common/lib/CanvasProvider.js +1 -1
- package/dist/commonjs/common/lib/styles/errorRing.js +2 -2
- package/dist/commonjs/common/lib/styles/focusRing.d.ts.map +1 -1
- package/dist/commonjs/common/lib/styles/focusRing.js +5 -16
- package/dist/commonjs/form-field/lib/Label.js +3 -7
- package/dist/commonjs/loading-dots/lib/LoadingDots.js +3 -3
- package/dist/commonjs/radio/lib/Radio.js +17 -3
- package/dist/commonjs/select/lib/Select.d.ts +2 -1
- package/dist/commonjs/select/lib/Select.d.ts.map +1 -1
- package/dist/commonjs/select/lib/Select.js +5 -3
- package/dist/commonjs/select/lib/hooks/useSelectInput.d.ts +7 -1
- package/dist/commonjs/select/lib/hooks/useSelectInput.d.ts.map +1 -1
- package/dist/commonjs/select/lib/hooks/useSelectInput.js +45 -4
- package/dist/commonjs/select/lib/hooks/useSelectModel.d.ts.map +1 -1
- package/dist/commonjs/select/lib/hooks/useSelectModel.js +1 -2
- package/dist/commonjs/switch/lib/Switch.js +2 -2
- package/dist/commonjs/tabs/lib/TabsItem.js +1 -1
- package/dist/commonjs/text/lib/LabelText.js +24 -24
- package/dist/commonjs/text/lib/Text.js +15 -15
- package/dist/commonjs/text-input/lib/TextInput.js +3 -3
- package/dist/commonjs/tooltip/lib/OverflowTooltip.d.ts.map +1 -1
- package/dist/commonjs/tooltip/lib/OverflowTooltip.js +3 -2
- package/dist/es6/avatar/lib/Avatar.js +1 -1
- package/dist/es6/badge/lib/CountBadge.js +7 -7
- package/dist/es6/banner/lib/Banner.js +1 -1
- package/dist/es6/button/lib/BaseButton.js +22 -22
- 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/button/lib/ToolbarDropdownButton.js +6 -1
- package/dist/es6/button/lib/ToolbarIconButton.js +6 -1
- package/dist/es6/button/lib/deprecated_Button.js +2 -2
- package/dist/es6/card/lib/Card.js +1 -1
- package/dist/es6/card/lib/CardHeading.js +1 -1
- package/dist/es6/checkbox/lib/CheckBackground.d.ts +10 -0
- package/dist/es6/checkbox/lib/CheckBackground.d.ts.map +1 -0
- package/dist/es6/checkbox/lib/CheckBackground.js +20 -0
- package/dist/es6/checkbox/lib/Checkbox.d.ts +3 -45
- package/dist/es6/checkbox/lib/Checkbox.d.ts.map +1 -1
- package/dist/es6/checkbox/lib/Checkbox.js +11 -205
- package/dist/es6/checkbox/lib/CheckboxCheck.d.ts +10 -0
- package/dist/es6/checkbox/lib/CheckboxCheck.d.ts.map +1 -0
- package/dist/es6/checkbox/lib/CheckboxCheck.js +29 -0
- package/dist/es6/checkbox/lib/CheckboxContainer.d.ts +13 -0
- package/dist/es6/checkbox/lib/CheckboxContainer.d.ts.map +1 -0
- package/dist/es6/checkbox/lib/CheckboxContainer.js +15 -0
- package/dist/es6/checkbox/lib/CheckboxInput.d.ts +48 -0
- package/dist/es6/checkbox/lib/CheckboxInput.d.ts.map +1 -0
- package/dist/es6/checkbox/lib/CheckboxInput.js +37 -0
- package/dist/es6/checkbox/lib/CheckboxRipple.d.ts +2 -0
- package/dist/es6/checkbox/lib/CheckboxRipple.d.ts.map +1 -0
- package/dist/es6/checkbox/lib/CheckboxRipple.js +11 -0
- package/dist/es6/collection/lib/useCursorListModel.d.ts.map +1 -1
- package/dist/es6/collection/lib/useListItemAllowChildStrings.d.ts +2 -1
- package/dist/es6/collection/lib/useListItemAllowChildStrings.d.ts.map +1 -1
- package/dist/es6/collection/lib/useListItemAllowChildStrings.js +1 -1
- package/dist/es6/collection/lib/useListRenderItem.js +1 -1
- package/dist/es6/combobox/lib/hooks/useComboboxInput.d.ts +1 -0
- package/dist/es6/combobox/lib/hooks/useComboboxInput.d.ts.map +1 -1
- package/dist/es6/combobox/lib/hooks/useComboboxInput.js +1 -0
- package/dist/es6/combobox/lib/hooks/useComboboxKeyboardTypeAhead.js +2 -3
- package/dist/es6/combobox/lib/hooks/useComboboxModel.d.ts.map +1 -1
- package/dist/es6/combobox/lib/hooks/useComboboxModel.js +1 -2
- package/dist/es6/common/lib/AccessibleHide.js +1 -1
- package/dist/es6/common/lib/CanvasProvider.js +1 -1
- package/dist/es6/common/lib/styles/errorRing.js +2 -2
- package/dist/es6/common/lib/styles/focusRing.d.ts.map +1 -1
- package/dist/es6/common/lib/styles/focusRing.js +5 -16
- package/dist/es6/form-field/lib/Label.js +3 -7
- package/dist/es6/loading-dots/lib/LoadingDots.js +2 -2
- package/dist/es6/radio/lib/Radio.js +17 -3
- package/dist/es6/select/lib/Select.d.ts +2 -1
- package/dist/es6/select/lib/Select.d.ts.map +1 -1
- package/dist/es6/select/lib/Select.js +5 -3
- package/dist/es6/select/lib/hooks/useSelectInput.d.ts +7 -1
- package/dist/es6/select/lib/hooks/useSelectInput.d.ts.map +1 -1
- package/dist/es6/select/lib/hooks/useSelectInput.js +43 -5
- package/dist/es6/select/lib/hooks/useSelectModel.d.ts.map +1 -1
- package/dist/es6/select/lib/hooks/useSelectModel.js +1 -2
- package/dist/es6/switch/lib/Switch.js +2 -2
- package/dist/es6/tabs/lib/TabsItem.js +1 -1
- package/dist/es6/text/lib/LabelText.js +24 -24
- package/dist/es6/text/lib/Text.js +15 -15
- package/dist/es6/text-input/lib/TextInput.js +3 -3
- package/dist/es6/tooltip/lib/OverflowTooltip.d.ts.map +1 -1
- package/dist/es6/tooltip/lib/OverflowTooltip.js +3 -2
- package/form-field/lib/Label.tsx +10 -10
- package/package.json +4 -4
- package/select/lib/Select.tsx +51 -4
- package/select/lib/hooks/useSelectInput.ts +86 -44
- package/select/lib/hooks/useSelectModel.tsx +1 -2
- package/text-input/lib/TextInput.tsx +3 -3
- package/tooltip/lib/OverflowTooltip.tsx +3 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useComboboxModel.d.ts","sourceRoot":"","sources":["../../../../../combobox/lib/hooks/useComboboxModel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B;;;;;;GAMG;AACH,eAAO,MAAM,aAAa;;oBAIN,MAAM,WAAW,CAAC,gBAAgB,CAAC;;sBAAnC,MAAM,WAAW,CAAC,gBAAgB,CAAC;;;;;;;;oBAAnC,MAAM,WAAW,CAAC,gBAAgB,CAAC;;;;;sBAAnC,MAAM,WAAW,CAAC,gBAAgB,CAAC;;;;;;EAYrD,CAAC;AAEH;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;oBA1BT,MAAM,WAAW,CAAC,gBAAgB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"useComboboxModel.d.ts","sourceRoot":"","sources":["../../../../../combobox/lib/hooks/useComboboxModel.tsx"],"names":[],"mappings":"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"}
|
|
@@ -55,8 +55,7 @@ exports.useComboboxModel = common_1.createModelHook({
|
|
|
55
55
|
const input = exports.useInputModel(config);
|
|
56
56
|
const menu = menu_1.useMenuModel(menu_1.useMenuModel.mergeConfig(config, {
|
|
57
57
|
onSelect({ id }) {
|
|
58
|
-
|
|
59
|
-
common_1.dispatchInputEvent(menu.state.targetRef.current, textValue);
|
|
58
|
+
common_1.dispatchInputEvent(menu.state.targetRef.current, id);
|
|
60
59
|
},
|
|
61
60
|
}));
|
|
62
61
|
const [width, setWidth] = react_1.default.useState(0);
|
|
@@ -39,7 +39,7 @@ exports.accessibleHide = {
|
|
|
39
39
|
padding: 0,
|
|
40
40
|
border: 0,
|
|
41
41
|
};
|
|
42
|
-
const accessibleHideStyles = canvas_kit_styling_1.createStyles({ name: "
|
|
42
|
+
const accessibleHideStyles = canvas_kit_styling_1.createStyles({ name: "1jqqftm", styles: "clip:rect(1px, 1px, 1px, 1px);clip-path:polygon(0px 0px, 0px 0px, 0px 0px, 0px 0px);position:absolute;overflow:hidden;white-space:nowrap;height:1px;width:1px;margin:-1px;padding:0px;border:0px;" });
|
|
43
43
|
/**
|
|
44
44
|
* A convenient component wrapper to visually hide content, while still making it accessible to screen readers
|
|
45
45
|
*/
|
|
@@ -28,7 +28,7 @@ const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
|
|
|
28
28
|
const css_1 = require("@emotion/css");
|
|
29
29
|
const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
|
|
30
30
|
// copied from brand/_variables.css
|
|
31
|
-
const defaultBranding = canvas_kit_styling_1.createStyles({ name: "
|
|
31
|
+
const defaultBranding = canvas_kit_styling_1.createStyles({ name: "192nfdp", styles: "--cnvs-brand-error-darkest:rgba(128,22,14,1);--cnvs-brand-common-alert-inner:var(--cnvs-base-palette-cantaloupe-400);--cnvs-brand-common-error-inner:var(--cnvs-base-palette-cinnamon-500);--cnvs-brand-common-focus-outline:var(--cnvs-base-palette-blueberry-400);--cnvs-brand-neutral-accent:var(--cnvs-base-palette-french-vanilla-100);--cnvs-brand-neutral-darkest:var(--cnvs-base-palette-licorice-400);--cnvs-brand-neutral-dark:var(--cnvs-base-palette-licorice-300);--cnvs-brand-neutral-base:var(--cnvs-base-palette-soap-600);--cnvs-brand-neutral-light:var(--cnvs-base-palette-soap-300);--cnvs-brand-neutral-lightest:var(--cnvs-base-palette-soap-200);--cnvs-brand-success-accent:var(--cnvs-base-palette-french-vanilla-100);--cnvs-brand-success-darkest:var(--cnvs-base-palette-green-apple-600);--cnvs-brand-success-dark:var(--cnvs-base-palette-green-apple-500);--cnvs-brand-success-base:var(--cnvs-base-palette-green-apple-400);--cnvs-brand-success-light:var(--cnvs-base-palette-green-apple-300);--cnvs-brand-success-lightest:var(--cnvs-base-palette-green-apple-100);--cnvs-brand-error-accent:var(--cnvs-base-palette-french-vanilla-100);--cnvs-brand-error-dark:var(--cnvs-base-palette-cinnamon-600);--cnvs-brand-error-base:var(--cnvs-base-palette-cinnamon-500);--cnvs-brand-error-light:var(--cnvs-base-palette-cinnamon-200);--cnvs-brand-error-lightest:var(--cnvs-base-palette-cinnamon-100);--cnvs-brand-alert-accent:var(--cnvs-base-palette-french-vanilla-100);--cnvs-brand-alert-darkest:var(--cnvs-base-palette-cantaloupe-600);--cnvs-brand-alert-dark:var(--cnvs-base-palette-cantaloupe-500);--cnvs-brand-alert-base:var(--cnvs-base-palette-cantaloupe-400);--cnvs-brand-alert-light:var(--cnvs-base-palette-cantaloupe-200);--cnvs-brand-alert-lightest:var(--cnvs-base-palette-cantaloupe-100);--cnvs-brand-primary-accent:var(--cnvs-base-palette-french-vanilla-100);--cnvs-brand-primary-darkest:var(--cnvs-base-palette-blueberry-600);--cnvs-brand-primary-dark:var(--cnvs-base-palette-blueberry-500);--cnvs-brand-primary-base:var(--cnvs-base-palette-blueberry-400);--cnvs-brand-primary-light:var(--cnvs-base-palette-blueberry-200);--cnvs-brand-primary-lightest:var(--cnvs-base-palette-blueberry-100);--cnvs-brand-gradient-primary:linear-gradient(90deg, var(--cnvs-brand-primary-base) 0%, var(--cnvs-brand-primary-dark) 100%);" });
|
|
32
32
|
const mappedKeys = {
|
|
33
33
|
lightest: 'lightest',
|
|
34
34
|
light: 'light',
|
|
@@ -56,10 +56,10 @@ function errorRing(error, theme) {
|
|
|
56
56
|
borderColor: errorColors.outer,
|
|
57
57
|
transition: '100ms box-shadow',
|
|
58
58
|
boxShadow: errorBoxShadow,
|
|
59
|
-
'&:hover, &:disabled': {
|
|
59
|
+
'&:hover, &:disabled, &.hover, &.disabled': {
|
|
60
60
|
borderColor: errorColors.outer,
|
|
61
61
|
},
|
|
62
|
-
'&:focus:not([disabled])': {
|
|
62
|
+
'&:focus-visible:not([disabled]), &.focus:not([disabled])': {
|
|
63
63
|
borderColor: errorColors.outer,
|
|
64
64
|
boxShadow: `${errorBoxShadow},
|
|
65
65
|
0 0 0 2px ${tokens_1.colors.frenchVanilla100},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"focusRing.d.ts","sourceRoot":"","sources":["../../../../../common/lib/styles/focusRing.ts"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"focusRing.d.ts","sourceRoot":"","sources":["../../../../../common/lib/styles/focusRing.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,KAAK,EAAE,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAIhD,UAAU,gBAAgB;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;;OAKG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;IAC1B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AA2CD;;;;;;;;;;;;;;GAcG;AAEH;;;;;;GAMG;AACH,wBAAgB,SAAS,CAAC,OAAO,GAAE,gBAAqB,EAAE,KAAK,CAAC,EAAE,KAAK,GAAG,SAAS,CAoBlF"}
|
|
@@ -1,19 +1,17 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.focusRing = void 0;
|
|
4
|
-
const react_1 = require("@emotion/react");
|
|
5
|
-
const tokens_1 = require("@workday/canvas-kit-react/tokens");
|
|
6
4
|
const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
|
|
7
|
-
const
|
|
8
|
-
function calculateFocusRing({ width, separation,
|
|
5
|
+
const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
|
|
6
|
+
function calculateFocusRing({ width, separation, inset, innerColor, outerColor, }) {
|
|
9
7
|
let boxShadow, innerWidth, outerWidth;
|
|
10
8
|
if (innerColor && innerColor.startsWith('--')) {
|
|
11
9
|
// eslint-disable-next-line no-param-reassign
|
|
12
|
-
innerColor = innerColor;
|
|
10
|
+
innerColor = canvas_kit_styling_1.cssVar(innerColor);
|
|
13
11
|
}
|
|
14
12
|
if (outerColor && outerColor.startsWith('--')) {
|
|
15
13
|
// eslint-disable-next-line no-param-reassign
|
|
16
|
-
outerColor = outerColor;
|
|
14
|
+
outerColor = canvas_kit_styling_1.cssVar(outerColor);
|
|
17
15
|
}
|
|
18
16
|
switch (inset) {
|
|
19
17
|
case 'outer':
|
|
@@ -32,13 +30,6 @@ function calculateFocusRing({ width, separation, animate, inset, innerColor, out
|
|
|
32
30
|
boxShadow = `0 0 0 ${innerWidth}px ${innerColor}, 0 0 0 ${outerWidth}px ${outerColor}`;
|
|
33
31
|
break;
|
|
34
32
|
}
|
|
35
|
-
if (animate) {
|
|
36
|
-
const fadeIn = react_1.keyframes({
|
|
37
|
-
'0%': { boxShadow },
|
|
38
|
-
'100%': { boxShadow },
|
|
39
|
-
});
|
|
40
|
-
return { animation: `${fadeIn} 100ms`, boxShadow };
|
|
41
|
-
}
|
|
42
33
|
return { boxShadow };
|
|
43
34
|
}
|
|
44
35
|
/**
|
|
@@ -64,9 +55,7 @@ function calculateFocusRing({ width, separation, animate, inset, innerColor, out
|
|
|
64
55
|
* @returns {CSSObject} the css object for the focus ring style
|
|
65
56
|
*/
|
|
66
57
|
function focusRing(options = {}, theme) {
|
|
67
|
-
const { width = 2, separation = 0, animate = true, innerColor =
|
|
68
|
-
? theme.canvas.palette.common.focusOutline
|
|
69
|
-
: index_1.defaultCanvasTheme.palette.common.focusOutline, inset, } = options;
|
|
58
|
+
const { width = 2, separation = 0, animate = true, innerColor = canvas_tokens_web_1.base.frenchVanilla100, outerColor = canvas_tokens_web_1.brand.common.focusOutline, inset, } = options;
|
|
70
59
|
const args = {
|
|
71
60
|
width: width,
|
|
72
61
|
separation: separation,
|
|
@@ -77,13 +77,9 @@ const LabelComponent = common_1.styled('label')(...labelStyles);
|
|
|
77
77
|
class Label extends React.Component {
|
|
78
78
|
render() {
|
|
79
79
|
const { labelPosition = Label.Position.Top, isLegend = false, required, ...elemProps } = this.props;
|
|
80
|
-
const children = !required
|
|
81
|
-
|
|
82
|
-
:
|
|
83
|
-
React.createElement("span", null,
|
|
84
|
-
this.props.children,
|
|
85
|
-
React.createElement(RequiredAsterisk, { key: '0', "aria-hidden": true }, "*")),
|
|
86
|
-
];
|
|
80
|
+
const children = !required ? (this.props.children) : (React.createElement("span", null,
|
|
81
|
+
this.props.children,
|
|
82
|
+
React.createElement(RequiredAsterisk, { key: '0', "aria-hidden": true }, "*")));
|
|
87
83
|
return (React.createElement(React.Fragment, null, isLegend ? (React.createElement(LegendComponent, Object.assign({ labelPosition: labelPosition, isLegend: isLegend }, elemProps, { children: children }))) : (React.createElement(LabelComponent, Object.assign({ labelPosition: labelPosition }, elemProps, { children: children })))));
|
|
88
84
|
}
|
|
89
85
|
}
|
|
@@ -31,8 +31,8 @@ const ANIMATION_DURATION_MS = '1400';
|
|
|
31
31
|
/**
|
|
32
32
|
* Keyframe for the dots loading animation.
|
|
33
33
|
*/
|
|
34
|
-
const keyframesLoading = keyframes({ name: "zl77bl", styles: "0%, 80%, 100%{transform:scale(0);}40%{transform:scale(1);}" });
|
|
35
|
-
const loadingDotStyles = canvas_kit_styling_1.createStyles({ name: "
|
|
34
|
+
const keyframesLoading = canvas_kit_styling_1.keyframes({ name: "zl77bl", styles: "0%, 80%, 100%{transform:scale(0);}40%{transform:scale(1);}" });
|
|
35
|
+
const loadingDotStyles = canvas_kit_styling_1.createStyles({ name: "1f3yrdb", styles: "background-color:var(--cnvs-base-palette-soap-400, rgba(223,226,230,1));width:var(--cnvs-sys-space-x4, calc(0.25rem * 4));height:var(--cnvs-sys-space-x4, calc(0.25rem * 4));font-size:var(--cnvs-sys-space-zero, 0);border-radius:var(--cnvs-sys-shape-round, calc(0.25rem * 250));transform:scale(0);display:inline-block;animation-name:animation-zl77bl;animation-duration:1400ms;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-fill-mode:both;&:nth-child(1){animation-delay:0ms;}&:nth-child(2){animation-delay:calc(1400ms * (4/35));}&:nth-child(3){animation-delay:calc(1400ms * (8/35));}" });
|
|
36
36
|
/**
|
|
37
37
|
* The actual loading dot div.
|
|
38
38
|
*/
|
|
@@ -40,7 +40,7 @@ const LoadingAnimationDot = () => React.createElement("div", { className: `${loa
|
|
|
40
40
|
/**
|
|
41
41
|
* A simple container for the loading dots.
|
|
42
42
|
*/
|
|
43
|
-
const containerStyles = canvas_kit_styling_1.createStyles({ name: "
|
|
43
|
+
const containerStyles = canvas_kit_styling_1.createStyles({ name: "14lwp8w", styles: "display:inline-flex;gap:var(--cnvs-sys-space-x2, calc(0.25rem * 2));" });
|
|
44
44
|
/**
|
|
45
45
|
* A simple component that displays three horizontal dots, to be used when some data is loading.
|
|
46
46
|
*/
|
|
@@ -107,17 +107,31 @@ const RadioInput = common_1.styled('input')({
|
|
|
107
107
|
borderWidth: '2px',
|
|
108
108
|
borderColor: variant === 'inverse' ? tokens_1.colors.blackPepper400 : themeFocusOutline,
|
|
109
109
|
boxShadow: 'none',
|
|
110
|
-
...
|
|
110
|
+
...common_1.focusRing({
|
|
111
|
+
width: variant === 'inverse' ? 2 : 0,
|
|
112
|
+
separation: 0,
|
|
113
|
+
animate: false,
|
|
114
|
+
innerColor: variant === 'inverse' ? tokens_1.colors.blackPepper400 : undefined,
|
|
115
|
+
outerColor: variant === 'inverse' ? tokens_1.colors.frenchVanilla100 : undefined,
|
|
116
|
+
}),
|
|
111
117
|
},
|
|
112
118
|
},
|
|
113
119
|
'&:checked:focus ~ div:first-of-type': {
|
|
114
|
-
...
|
|
120
|
+
...common_1.focusRing({
|
|
121
|
+
separation: 2,
|
|
122
|
+
width: 2,
|
|
123
|
+
innerColor: variant === 'inverse' ? tokens_1.colors.blackPepper400 : undefined,
|
|
124
|
+
outerColor: variant === 'inverse' ? tokens_1.colors.frenchVanilla100 : themeFocusOutline,
|
|
125
|
+
}),
|
|
115
126
|
borderColor: variant === 'inverse' ? tokens_1.colors.frenchVanilla100 : themePrimary.main,
|
|
116
127
|
borderWidth: '2px',
|
|
117
128
|
},
|
|
118
129
|
...common_1.mouseFocusBehavior({
|
|
119
130
|
'&:focus ~ div:first-of-type': {
|
|
120
|
-
...
|
|
131
|
+
...common_1.focusRing({
|
|
132
|
+
width: 0,
|
|
133
|
+
outerColor: variant === 'inverse' ? tokens_1.colors.frenchVanilla100 : themeFocusOutline,
|
|
134
|
+
}),
|
|
121
135
|
borderWidth: '1px',
|
|
122
136
|
borderColor: checked
|
|
123
137
|
? variant === 'inverse'
|
|
@@ -3,7 +3,8 @@ import { ExtractProps, Themeable } from '@workday/canvas-kit-react/common';
|
|
|
3
3
|
import { Combobox } from '@workday/canvas-kit-react/combobox';
|
|
4
4
|
import { TextInput } from '@workday/canvas-kit-react/text-input';
|
|
5
5
|
import { CanvasSystemIcon } from '@workday/design-assets-types';
|
|
6
|
-
|
|
6
|
+
import { CSProps } from '@workday/canvas-kit-styling';
|
|
7
|
+
export interface SelectInputProps extends ExtractProps<typeof TextInput>, CSProps {
|
|
7
8
|
/**
|
|
8
9
|
* The Icon to render at the start of the `input`. Use this prop if your options
|
|
9
10
|
* include icons that you would like to render in the `input` when selected.
|
|
@@ -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;AAO3E,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,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;AAO3E,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAC9D,OAAO,EAAe,OAAO,EAAC,MAAM,6BAA6B,CAAC;AAElE,MAAM,WAAW,gBAAiB,SAAQ,YAAY,CAAC,OAAO,SAAS,CAAC,EAAE,OAAO;IAC/E;;;;OAIG;IACH,cAAc,CAAC,EAAE,gBAAgB,CAAC;CACnC;AAqBD,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2DvB,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAIf;;;;;;;;;;;;OAYG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAEH;;;;;;;;;;;;;OAaG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAEH;;;;;;;;;;;;;;;;;OAiBG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAEH;;;;;;;;;;;;;;;;;OAiBG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAEH;;;;;;;;;;;;;;;;;OAiBG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CASL,CAAC"}
|
|
@@ -15,15 +15,17 @@ const useSelectModel_1 = require("./hooks/useSelectModel");
|
|
|
15
15
|
const useSelectCard_1 = require("./hooks/useSelectCard");
|
|
16
16
|
const useSelectInput_1 = require("./hooks/useSelectInput");
|
|
17
17
|
const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
|
|
18
|
-
const selectInputStyles = canvas_kit_styling_1.createStyles({ name: "
|
|
18
|
+
const selectInputStyles = canvas_kit_styling_1.createStyles({ name: "1gpclr4", styles: "caret-color:transparent;cursor:default;&::selection{background-color:transparent;}" });
|
|
19
|
+
const hiddenSelectStyles = canvas_kit_styling_1.createStyles({ name: "1uxiz6e", styles: "position:absolute;top:0px;bottom:0px;left:0px;right:0px;opacity:0px;cursor:default;pointer-events:none;" });
|
|
19
20
|
exports.SelectInput = common_1.createSubcomponent(text_input_1.TextInput)({
|
|
20
21
|
modelHook: useSelectModel_1.useSelectModel,
|
|
21
22
|
elemPropsHook: useSelectInput_1.useSelectInput,
|
|
22
|
-
})(({ placeholder = 'Choose an option', inputStartIcon, width, ...elemProps }, Element, model) => {
|
|
23
|
+
})(({ placeholder = 'Choose an option', inputStartIcon, error, textInputProps, disabled, width, ref, onChange, onInput, onFocus, value, name, ...elemProps }, Element, model) => {
|
|
23
24
|
return (react_1.default.createElement(text_input_1.InputGroup, { width: width, "data-width": "ck-formfield-width" },
|
|
24
25
|
inputStartIcon && model.state.selectedIds.length > 0 && (react_1.default.createElement(text_input_1.InputGroup.InnerStart, { pointerEvents: "none" },
|
|
25
26
|
react_1.default.createElement(icon_1.SystemIcon, { icon: inputStartIcon }))),
|
|
26
|
-
react_1.default.createElement(text_input_1.InputGroup.Input,
|
|
27
|
+
react_1.default.createElement(text_input_1.InputGroup.Input, { error: error, disabled: disabled, className: hiddenSelectStyles, tabIndex: -1, "aria-hidden": true, onChange: onChange, onInput: onInput, value: value, onFocus: onFocus, name: name, ref: ref }),
|
|
28
|
+
react_1.default.createElement(text_input_1.InputGroup.Input, Object.assign({ as: Element, disabled: disabled, placeholder: placeholder, error: error }, textInputProps, layout_1.mergeStyles(elemProps, [selectInputStyles]))),
|
|
27
29
|
react_1.default.createElement(text_input_1.InputGroup.InnerEnd, { position: "absolute", pointerEvents: "none" },
|
|
28
30
|
react_1.default.createElement(icon_1.SystemIcon, { icon: canvas_system_icons_web_1.caretDownSmallIcon }))));
|
|
29
31
|
});
|
|
@@ -80,8 +80,13 @@ export declare const useSelectInput: import("@workday/canvas-kit-react/common").
|
|
|
80
80
|
getId: (item: any) => string;
|
|
81
81
|
}, {
|
|
82
82
|
readonly onKeyDown: (event: React.KeyboardEvent) => void;
|
|
83
|
-
readonly
|
|
83
|
+
readonly onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
|
|
84
84
|
readonly autoComplete: "off";
|
|
85
|
+
readonly onFocus: () => void;
|
|
86
|
+
readonly textInputProps: {
|
|
87
|
+
readonly ref: React.RefObject<HTMLInputElement>;
|
|
88
|
+
};
|
|
89
|
+
readonly ref: (instance: HTMLInputElement | null) => void;
|
|
85
90
|
readonly defaultValue: string | undefined;
|
|
86
91
|
} & {
|
|
87
92
|
onKeyDown(event: React.KeyboardEvent<Element>): void;
|
|
@@ -97,6 +102,7 @@ export declare const useSelectInput: import("@workday/canvas-kit-react/common").
|
|
|
97
102
|
readonly 'aria-expanded': boolean;
|
|
98
103
|
readonly 'aria-autocomplete': "list";
|
|
99
104
|
readonly 'aria-controls': `${string}-list`;
|
|
105
|
+
readonly 'aria-activedescendant': null | undefined;
|
|
100
106
|
readonly id: string;
|
|
101
107
|
readonly ref: (instance: unknown) => void;
|
|
102
108
|
} & {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useSelectInput.d.ts","sourceRoot":"","sources":["../../../../../select/lib/hooks/useSelectInput.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAgB1B;;GAEG;AACH,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"useSelectInput.d.ts","sourceRoot":"","sources":["../../../../../select/lib/hooks/useSelectInput.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAgB1B;;GAEG;AACH,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gCA8CF,mBAAmB;+BAvCP,MAAM,WAAW,CAAC,gBAAgB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA0FvE,CAAC"}
|
|
@@ -1,6 +1,10 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
2
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
6
|
exports.useSelectInput = void 0;
|
|
7
|
+
const react_1 = __importDefault(require("react"));
|
|
4
8
|
const common_1 = require("@workday/canvas-kit-react/common");
|
|
5
9
|
const combobox_1 = require("@workday/canvas-kit-react/combobox");
|
|
6
10
|
const useSelectModel_1 = require("./useSelectModel");
|
|
@@ -8,9 +12,19 @@ const useSelectModel_1 = require("./useSelectModel");
|
|
|
8
12
|
* `useSelectInput` extends {@link useComboboxInput useComboboxInput} and {@link useComboboxKeyboardTypeAhead useComboboxKeyboardTypeAhead} and adds type ahead functionality and Select-specific [keyboard support](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/).
|
|
9
13
|
*/
|
|
10
14
|
exports.useSelectInput = common_1.composeHooks(common_1.createElemPropsHook(useSelectModel_1.useSelectModel)((model, ref, elemProps = {}) => {
|
|
11
|
-
const {
|
|
15
|
+
const { elementRef } = common_1.useLocalRef(ref);
|
|
16
|
+
const textInputRef = react_1.default.useRef(null);
|
|
17
|
+
// Update the text value of the input
|
|
18
|
+
const handleOnChange = (event) => {
|
|
19
|
+
var _a;
|
|
20
|
+
const value = (_a = model.navigation.getItem(event.target.value, model)) === null || _a === void 0 ? void 0 : _a.textValue;
|
|
21
|
+
const nativeInputValue = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(textInputRef.current), 'value');
|
|
22
|
+
if (nativeInputValue && nativeInputValue.set) {
|
|
23
|
+
nativeInputValue.set.call(textInputRef.current, value);
|
|
24
|
+
}
|
|
25
|
+
};
|
|
12
26
|
common_1.useResizeObserver({
|
|
13
|
-
ref:
|
|
27
|
+
ref: textInputRef,
|
|
14
28
|
onResize: data => {
|
|
15
29
|
if (model.state.visibility === 'visible') {
|
|
16
30
|
// Width of the Input + 2px border + 8px padding
|
|
@@ -19,6 +33,20 @@ exports.useSelectInput = common_1.composeHooks(common_1.createElemPropsHook(useS
|
|
|
19
33
|
}
|
|
20
34
|
},
|
|
21
35
|
});
|
|
36
|
+
// The intent is if items are loaded after the component is rendered, it will update the input with the value.
|
|
37
|
+
// **Note: We might need to watch for other things or how often we should do this**
|
|
38
|
+
react_1.default.useEffect(() => {
|
|
39
|
+
if (model.state.inputRef.current &&
|
|
40
|
+
model.state.items.length > 0 &&
|
|
41
|
+
model.state.selectedIds[0]) {
|
|
42
|
+
const value = model.navigation.getItem(model.state.selectedIds[0], model).id;
|
|
43
|
+
if (model.state.inputRef.current.value !== value) {
|
|
44
|
+
// Programmatically dispatch an onChange once items are loaded. This account for when a consumer wants an initial selected item and they're loading them from a server.
|
|
45
|
+
common_1.dispatchInputEvent(model.state.inputRef.current, value);
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
49
|
+
}, [model.state.inputRef, model.state.items.length]);
|
|
22
50
|
return {
|
|
23
51
|
onKeyDown(event) {
|
|
24
52
|
// Prevent the keys from being enter in the input
|
|
@@ -42,8 +70,21 @@ exports.useSelectInput = common_1.composeHooks(common_1.createElemPropsHook(useS
|
|
|
42
70
|
}
|
|
43
71
|
}
|
|
44
72
|
},
|
|
45
|
-
|
|
73
|
+
onChange: handleOnChange,
|
|
46
74
|
autoComplete: 'off',
|
|
47
|
-
|
|
75
|
+
// When the hidden input is focused, we want to show the focus/hover states of the input that sits below it.
|
|
76
|
+
onFocus() {
|
|
77
|
+
var _a;
|
|
78
|
+
(_a = textInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
79
|
+
},
|
|
80
|
+
textInputProps: {
|
|
81
|
+
ref: textInputRef,
|
|
82
|
+
},
|
|
83
|
+
ref: elementRef,
|
|
84
|
+
// Account for the case where an initial item is selected when the Select first renders
|
|
85
|
+
defaultValue: model.state.selectedIds.length > 0 && model.state.items.length > 0
|
|
86
|
+
? model.navigation.getItem(model.state.selectedIds[0], model).textValue ||
|
|
87
|
+
model.state.value
|
|
88
|
+
: undefined,
|
|
48
89
|
};
|
|
49
90
|
}), combobox_1.useComboboxKeyboardTypeAhead, combobox_1.useComboboxResetCursorToSelected, combobox_1.useComboboxMoveCursorToSelected, combobox_1.useComboboxInput);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useSelectModel.d.ts","sourceRoot":"","sources":["../../../../../select/lib/hooks/useSelectModel.tsx"],"names":[],"mappings":"AAGA;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"useSelectModel.d.ts","sourceRoot":"","sources":["../../../../../select/lib/hooks/useSelectModel.tsx"],"names":[],"mappings":"AAGA;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAWzB,CAAC"}
|
|
@@ -53,7 +53,7 @@ const SwitchInput = common_1.styled('input')({
|
|
|
53
53
|
'&:focus': {
|
|
54
54
|
outline: 'none',
|
|
55
55
|
'& ~ div:first-of-type': {
|
|
56
|
-
...{
|
|
56
|
+
...common_1.focusRing({ separation: 2, animate: false }, theme),
|
|
57
57
|
},
|
|
58
58
|
},
|
|
59
59
|
'& ~ div:first-of-type': {
|
|
@@ -63,7 +63,7 @@ const SwitchInput = common_1.styled('input')({
|
|
|
63
63
|
0 0 0 5px ${errorColors.outer}`,
|
|
64
64
|
},
|
|
65
65
|
'&:focus ~ div:first-of-type': {
|
|
66
|
-
...{
|
|
66
|
+
...common_1.focusRing({ separation: 2, animate: false }, theme),
|
|
67
67
|
},
|
|
68
68
|
};
|
|
69
69
|
return {
|
|
@@ -53,7 +53,7 @@ exports.StyledTabItem = common_1.styled(layout_1.Box.as('button'))(({ theme }) =
|
|
|
53
53
|
},
|
|
54
54
|
'&:focus': {
|
|
55
55
|
outline: `none`,
|
|
56
|
-
...{
|
|
56
|
+
...common_1.focusRing({ inset: 'outer', width: 0, separation: 2 }, theme),
|
|
57
57
|
},
|
|
58
58
|
'&:disabled, &[aria-disabled]': {
|
|
59
59
|
color: tokens_1.colors.licorice100,
|
|
@@ -26,41 +26,41 @@ const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
|
|
|
26
26
|
const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
|
|
27
27
|
const layout_1 = require("@workday/canvas-kit-react/layout");
|
|
28
28
|
const labelTextStencil = canvas_kit_styling_1.createStencil({
|
|
29
|
-
base: { name: "
|
|
29
|
+
base: { name: "1r9z3st", styles: "font-family:var(--cnvs-base-font-family-50, \"Roboto\");font-weight:var(--cnvs-base-font-weight-400, 400);line-height:var(--cnvs-base-line-height-100, 1.25rem);font-size:var(--cnvs-base-font-size-75, 0.875rem);letter-spacing:var(--cnvs-base-letter-spacing-150, 0.015rem);color:var(--cnvs-base-palette-black-pepper-300, rgba(73,73,73,1));" },
|
|
30
30
|
modifiers: {
|
|
31
|
-
|
|
31
|
+
modifiers: {
|
|
32
32
|
// Title level styles
|
|
33
|
-
'title.large': { name: "
|
|
34
|
-
'title.medium': { name: "
|
|
35
|
-
'title.small': { name: "
|
|
33
|
+
'title.large': { name: "cslru0", styles: "font-family:var(--cnvs-base-font-family-50, \"Roboto\");font-weight:var(--cnvs-base-font-weight-700, 700);line-height:var(--cnvs-base-line-height-600, 4rem);font-size:var(--cnvs-base-font-size-600, 3.5rem);color:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));" },
|
|
34
|
+
'title.medium': { name: "12cz0zr", styles: "font-family:var(--cnvs-base-font-family-50, \"Roboto\");font-weight:var(--cnvs-base-font-weight-700, 700);line-height:var(--cnvs-base-line-height-500, 3.5rem);font-size:var(--cnvs-base-font-size-500, 3rem);color:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));" },
|
|
35
|
+
'title.small': { name: "5xyzrh", styles: "font-family:var(--cnvs-base-font-family-50, \"Roboto\");font-weight:var(--cnvs-base-font-weight-700, 700);line-height:var(--cnvs-base-line-height-400, 3rem);font-size:var(--cnvs-base-font-size-400, 2.5rem);color:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));" },
|
|
36
36
|
// Heading level styles
|
|
37
|
-
'heading.large': { name: "
|
|
38
|
-
'heading.medium': { name: "
|
|
39
|
-
'heading.small': { name: "
|
|
37
|
+
'heading.large': { name: "h1czu", styles: "font-family:var(--cnvs-base-font-family-50, \"Roboto\");font-weight:var(--cnvs-base-font-weight-700, 700);line-height:var(--cnvs-base-line-height-350, 2.5rem);font-size:var(--cnvs-base-font-size-300, 2rem);color:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));" },
|
|
38
|
+
'heading.medium': { name: "4wfm80", styles: "font-family:var(--cnvs-base-font-family-50, \"Roboto\");font-weight:var(--cnvs-base-font-weight-700, 700);line-height:var(--cnvs-base-line-height-300, 2.25rem);font-size:var(--cnvs-base-font-size-250, 1.75rem);color:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));" },
|
|
39
|
+
'heading.small': { name: "z7qa7k", styles: "font-family:var(--cnvs-base-font-family-50, \"Roboto\");font-weight:var(--cnvs-base-font-weight-700, 700);line-height:var(--cnvs-base-line-height-250, 2rem);font-size:var(--cnvs-base-font-size-200, 1.5rem);color:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));" },
|
|
40
40
|
// Body level styles
|
|
41
|
-
'body.large': { name: "
|
|
42
|
-
'body.medium': { name: "
|
|
43
|
-
'body.small': { name: "
|
|
41
|
+
'body.large': { name: "1kihtuy", styles: "font-family:var(--cnvs-base-font-family-50, \"Roboto\");font-weight:var(--cnvs-base-font-weight-400, 400);line-height:var(--cnvs-base-line-height-200, 1.75rem);font-size:var(--cnvs-base-font-size-150, 1.25rem);color:var(--cnvs-base-palette-black-pepper-300, rgba(73,73,73,1));" },
|
|
42
|
+
'body.medium': { name: "unyea3", styles: "font-family:var(--cnvs-base-font-family-50, \"Roboto\");font-weight:var(--cnvs-base-font-weight-400, 400);line-height:var(--cnvs-base-line-height-200, 1.75rem);font-size:var(--cnvs-base-font-size-125, 1.125rem);color:var(--cnvs-base-palette-black-pepper-300, rgba(73,73,73,1));" },
|
|
43
|
+
'body.small': { name: "1fs92hs", styles: "font-family:var(--cnvs-base-font-family-50, \"Roboto\");font-weight:var(--cnvs-base-font-weight-400, 400);line-height:var(--cnvs-base-line-height-150, 1.5rem);font-size:var(--cnvs-base-font-size-100, 1rem);letter-spacing:var(--cnvs-base-letter-spacing-200, 0.01rem);color:var(--cnvs-base-palette-black-pepper-300, rgba(73,73,73,1));" },
|
|
44
44
|
// Subtext level styles
|
|
45
|
-
'subtext.large': { name: "
|
|
46
|
-
'subtext.medium': { name: "
|
|
47
|
-
'subtext.small': { name: "
|
|
45
|
+
'subtext.large': { name: "1r9z3st", styles: "font-family:var(--cnvs-base-font-family-50, \"Roboto\");font-weight:var(--cnvs-base-font-weight-400, 400);line-height:var(--cnvs-base-line-height-100, 1.25rem);font-size:var(--cnvs-base-font-size-75, 0.875rem);letter-spacing:var(--cnvs-base-letter-spacing-150, 0.015rem);color:var(--cnvs-base-palette-black-pepper-300, rgba(73,73,73,1));" },
|
|
46
|
+
'subtext.medium': { name: "rqolil", styles: "font-family:var(--cnvs-base-font-family-50, \"Roboto\");font-weight:var(--cnvs-base-font-weight-400, 400);line-height:var(--cnvs-base-line-height-50, 1rem);font-size:var(--cnvs-base-font-size-50, 0.75rem);letter-spacing:var(--cnvs-base-letter-spacing-100, 0.02rem);color:var(--cnvs-base-palette-black-pepper-300, rgba(73,73,73,1));" },
|
|
47
|
+
'subtext.small': { name: "89gq7n", styles: "font-family:var(--cnvs-base-font-family-50, \"Roboto\");font-weight:var(--cnvs-base-font-weight-400, 400);line-height:var(--cnvs-base-line-height-50, 1rem);font-size:var(--cnvs-base-font-size-25, 0.625rem);letter-spacing:var(--cnvs-base-letter-spacing-50, 0.025rem);color:var(--cnvs-base-palette-black-pepper-300, rgba(73,73,73,1));" }
|
|
48
48
|
},
|
|
49
|
-
|
|
50
|
-
error: { name: "
|
|
51
|
-
hint: { name: "
|
|
52
|
-
inverse: { name: "
|
|
53
|
-
},
|
|
54
|
-
disabled: {
|
|
55
|
-
true: { name: "ydm4x", styles: "cursor:default;color:var(--cnvs-base-palette-licorice-100, rgba(161,170,179,1));" },
|
|
49
|
+
modifiers: {
|
|
50
|
+
error: { name: "11i11uz", styles: "color:var(--cnvs-base-palette-cinnamon-500, rgba(222,46,33,1));" },
|
|
51
|
+
hint: { name: "1g2oxii", styles: "color:var(--cnvs-base-palette-licorice-300, rgba(94,106,117,1));" },
|
|
52
|
+
inverse: { name: "1j116kj", styles: "color:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));" }
|
|
56
53
|
},
|
|
54
|
+
modifiers: {
|
|
55
|
+
true: { name: "1c1k6kz", styles: "cursor:default;color:var(--cnvs-base-palette-licorice-100, rgba(161,170,179,1));" }
|
|
56
|
+
}
|
|
57
57
|
},
|
|
58
58
|
compound: [
|
|
59
59
|
{
|
|
60
60
|
modifiers: { variant: 'inverse', disabled: true },
|
|
61
|
-
styles: { name: "
|
|
62
|
-
}
|
|
63
|
-
]
|
|
61
|
+
styles: { name: "rrp7fc", styles: "opacity:var(--cnvs-sys-opacity-disabled, 0.4);color:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));" }
|
|
62
|
+
}
|
|
63
|
+
]
|
|
64
64
|
}, "label-text");
|
|
65
65
|
/**
|
|
66
66
|
* This component is intended to be used for labeling input fields.
|
|
@@ -28,26 +28,26 @@ const layout_1 = require("@workday/canvas-kit-react/layout");
|
|
|
28
28
|
const textModifiers = canvas_kit_styling_1.createModifiers({
|
|
29
29
|
typeLevel: {
|
|
30
30
|
// Title level styles
|
|
31
|
-
'title.large': canvas_kit_styling_1.createStyles({ name: "
|
|
32
|
-
'title.medium': canvas_kit_styling_1.createStyles({ name: "
|
|
33
|
-
'title.small': canvas_kit_styling_1.createStyles({ name: "
|
|
31
|
+
'title.large': canvas_kit_styling_1.createStyles({ name: "cslru0", styles: "font-family:var(--cnvs-base-font-family-50, \"Roboto\");font-weight:var(--cnvs-base-font-weight-700, 700);line-height:var(--cnvs-base-line-height-600, 4rem);font-size:var(--cnvs-base-font-size-600, 3.5rem);color:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));" }),
|
|
32
|
+
'title.medium': canvas_kit_styling_1.createStyles({ name: "12cz0zr", styles: "font-family:var(--cnvs-base-font-family-50, \"Roboto\");font-weight:var(--cnvs-base-font-weight-700, 700);line-height:var(--cnvs-base-line-height-500, 3.5rem);font-size:var(--cnvs-base-font-size-500, 3rem);color:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));" }),
|
|
33
|
+
'title.small': canvas_kit_styling_1.createStyles({ name: "5xyzrh", styles: "font-family:var(--cnvs-base-font-family-50, \"Roboto\");font-weight:var(--cnvs-base-font-weight-700, 700);line-height:var(--cnvs-base-line-height-400, 3rem);font-size:var(--cnvs-base-font-size-400, 2.5rem);color:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));" }),
|
|
34
34
|
// Heading level styles
|
|
35
|
-
'heading.large': canvas_kit_styling_1.createStyles({ name: "
|
|
36
|
-
'heading.medium': canvas_kit_styling_1.createStyles({ name: "
|
|
37
|
-
'heading.small': canvas_kit_styling_1.createStyles({ name: "
|
|
35
|
+
'heading.large': canvas_kit_styling_1.createStyles({ name: "h1czu", styles: "font-family:var(--cnvs-base-font-family-50, \"Roboto\");font-weight:var(--cnvs-base-font-weight-700, 700);line-height:var(--cnvs-base-line-height-350, 2.5rem);font-size:var(--cnvs-base-font-size-300, 2rem);color:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));" }),
|
|
36
|
+
'heading.medium': canvas_kit_styling_1.createStyles({ name: "4wfm80", styles: "font-family:var(--cnvs-base-font-family-50, \"Roboto\");font-weight:var(--cnvs-base-font-weight-700, 700);line-height:var(--cnvs-base-line-height-300, 2.25rem);font-size:var(--cnvs-base-font-size-250, 1.75rem);color:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));" }),
|
|
37
|
+
'heading.small': canvas_kit_styling_1.createStyles({ name: "z7qa7k", styles: "font-family:var(--cnvs-base-font-family-50, \"Roboto\");font-weight:var(--cnvs-base-font-weight-700, 700);line-height:var(--cnvs-base-line-height-250, 2rem);font-size:var(--cnvs-base-font-size-200, 1.5rem);color:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));" }),
|
|
38
38
|
// Body level styles
|
|
39
|
-
'body.large': canvas_kit_styling_1.createStyles({ name: "
|
|
40
|
-
'body.medium': canvas_kit_styling_1.createStyles({ name: "
|
|
41
|
-
'body.small': canvas_kit_styling_1.createStyles({ name: "
|
|
39
|
+
'body.large': canvas_kit_styling_1.createStyles({ name: "1kihtuy", styles: "font-family:var(--cnvs-base-font-family-50, \"Roboto\");font-weight:var(--cnvs-base-font-weight-400, 400);line-height:var(--cnvs-base-line-height-200, 1.75rem);font-size:var(--cnvs-base-font-size-150, 1.25rem);color:var(--cnvs-base-palette-black-pepper-300, rgba(73,73,73,1));" }),
|
|
40
|
+
'body.medium': canvas_kit_styling_1.createStyles({ name: "unyea3", styles: "font-family:var(--cnvs-base-font-family-50, \"Roboto\");font-weight:var(--cnvs-base-font-weight-400, 400);line-height:var(--cnvs-base-line-height-200, 1.75rem);font-size:var(--cnvs-base-font-size-125, 1.125rem);color:var(--cnvs-base-palette-black-pepper-300, rgba(73,73,73,1));" }),
|
|
41
|
+
'body.small': canvas_kit_styling_1.createStyles({ name: "1fs92hs", styles: "font-family:var(--cnvs-base-font-family-50, \"Roboto\");font-weight:var(--cnvs-base-font-weight-400, 400);line-height:var(--cnvs-base-line-height-150, 1.5rem);font-size:var(--cnvs-base-font-size-100, 1rem);letter-spacing:var(--cnvs-base-letter-spacing-200, 0.01rem);color:var(--cnvs-base-palette-black-pepper-300, rgba(73,73,73,1));" }),
|
|
42
42
|
// Subtext level styles
|
|
43
|
-
'subtext.large': canvas_kit_styling_1.createStyles({ name: "
|
|
44
|
-
'subtext.medium': canvas_kit_styling_1.createStyles({ name: "
|
|
45
|
-
'subtext.small': canvas_kit_styling_1.createStyles({ name: "
|
|
43
|
+
'subtext.large': canvas_kit_styling_1.createStyles({ name: "1r9z3st", styles: "font-family:var(--cnvs-base-font-family-50, \"Roboto\");font-weight:var(--cnvs-base-font-weight-400, 400);line-height:var(--cnvs-base-line-height-100, 1.25rem);font-size:var(--cnvs-base-font-size-75, 0.875rem);letter-spacing:var(--cnvs-base-letter-spacing-150, 0.015rem);color:var(--cnvs-base-palette-black-pepper-300, rgba(73,73,73,1));" }),
|
|
44
|
+
'subtext.medium': canvas_kit_styling_1.createStyles({ name: "rqolil", styles: "font-family:var(--cnvs-base-font-family-50, \"Roboto\");font-weight:var(--cnvs-base-font-weight-400, 400);line-height:var(--cnvs-base-line-height-50, 1rem);font-size:var(--cnvs-base-font-size-50, 0.75rem);letter-spacing:var(--cnvs-base-letter-spacing-100, 0.02rem);color:var(--cnvs-base-palette-black-pepper-300, rgba(73,73,73,1));" }),
|
|
45
|
+
'subtext.small': canvas_kit_styling_1.createStyles({ name: "89gq7n", styles: "font-family:var(--cnvs-base-font-family-50, \"Roboto\");font-weight:var(--cnvs-base-font-weight-400, 400);line-height:var(--cnvs-base-line-height-50, 1rem);font-size:var(--cnvs-base-font-size-25, 0.625rem);letter-spacing:var(--cnvs-base-letter-spacing-50, 0.025rem);color:var(--cnvs-base-palette-black-pepper-300, rgba(73,73,73,1));" }),
|
|
46
46
|
},
|
|
47
47
|
variant: {
|
|
48
|
-
error: canvas_kit_styling_1.createStyles({ name: "
|
|
49
|
-
hint: canvas_kit_styling_1.createStyles({ name: "
|
|
50
|
-
inverse: canvas_kit_styling_1.createStyles({ name: "
|
|
48
|
+
error: canvas_kit_styling_1.createStyles({ name: "11i11uz", styles: "color:var(--cnvs-base-palette-cinnamon-500, rgba(222,46,33,1));" }),
|
|
49
|
+
hint: canvas_kit_styling_1.createStyles({ name: "1g2oxii", styles: "color:var(--cnvs-base-palette-licorice-300, rgba(94,106,117,1));" }),
|
|
50
|
+
inverse: canvas_kit_styling_1.createStyles({ name: "1j116kj", styles: "color:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));" }),
|
|
51
51
|
},
|
|
52
52
|
});
|
|
53
53
|
/**
|
|
@@ -37,10 +37,10 @@ const StyledTextInput = common_1.styled('input')({
|
|
|
37
37
|
'&::placeholder': {
|
|
38
38
|
color: tokens_1.inputColors.placeholder,
|
|
39
39
|
},
|
|
40
|
-
'&:hover': {
|
|
40
|
+
'&:hover, &.hover': {
|
|
41
41
|
borderColor: tokens_1.inputColors.hoverBorder,
|
|
42
42
|
},
|
|
43
|
-
'&:focus:not([disabled])': {
|
|
43
|
+
'&:focus-visible:not([disabled]), &.focus:not([disabled]), &:focus:not([disabled])': {
|
|
44
44
|
borderColor: tokens_1.inputColors.focusBorder,
|
|
45
45
|
boxShadow: `inset 0 0 0 1px ${tokens_1.inputColors.focusBorder}`,
|
|
46
46
|
outline: 'none',
|
|
@@ -63,7 +63,7 @@ const StyledTextInput = common_1.styled('input')({
|
|
|
63
63
|
width: '100%',
|
|
64
64
|
}, ({ theme, error }) => {
|
|
65
65
|
return {
|
|
66
|
-
'&:focus:not([disabled])': {
|
|
66
|
+
'&:focus-visible:not([disabled]), &.focus:not([disabled])': {
|
|
67
67
|
borderColor: theme.canvas.palette.common.focusOutline,
|
|
68
68
|
boxShadow: `inset 0 0 0 1px ${theme.canvas.palette.common.focusOutline}`,
|
|
69
69
|
outline: 'none',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"OverflowTooltip.d.ts","sourceRoot":"","sources":["../../../../tooltip/lib/OverflowTooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAEL,SAAS,EAGV,MAAM,iCAAiC,CAAC;AAMzC;;;GAGG;AACH,eAAO,MAAM,mBAAmB,YAAa,OAAO,KAAG,OAAO,GAAG,IAmBhE,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,mBAAmB,YAAa,OAAO,KAAG,OAAO,GAAG,IAahE,CAAC;
|
|
1
|
+
{"version":3,"file":"OverflowTooltip.d.ts","sourceRoot":"","sources":["../../../../tooltip/lib/OverflowTooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAEL,SAAS,EAGV,MAAM,iCAAiC,CAAC;AAMzC;;;GAGG;AACH,eAAO,MAAM,mBAAmB,YAAa,OAAO,KAAG,OAAO,GAAG,IAmBhE,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,mBAAmB,YAAa,OAAO,KAAG,OAAO,GAAG,IAahE,CAAC;AAeF,MAAM,WAAW,oBAAqB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IAC/F;;;;;;;OAOG;IACH,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC;IAClC;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;;;OAKG;IACH,kBAAkB,CAAC,EAAE,SAAS,EAAE,CAAC;CAClC;AAiBD,eAAO,MAAM,eAAe,8DAKzB,oBAAoB,gBAwCtB,CAAC"}
|