@workday/canvas-kit-react 16.0.0-alpha.0477-next.0 → 16.0.0-alpha.0479-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/breadcrumbs/lib/BreadcrumbsCurrentItem.tsx +2 -2
- package/breadcrumbs/lib/BreadcrumbsItem.tsx +1 -1
- package/breadcrumbs/lib/BreadcrumbsLink.tsx +12 -1
- package/breadcrumbs/lib/BreadcrumbsOverflowButton.tsx +6 -2
- package/button/lib/ExternalHyperlink.tsx +3 -3
- package/button/lib/Hyperlink.tsx +45 -28
- package/dist/commonjs/breadcrumbs/lib/BreadcrumbsCurrentItem.js +1 -1
- package/dist/commonjs/breadcrumbs/lib/BreadcrumbsItem.js +1 -1
- package/dist/commonjs/breadcrumbs/lib/BreadcrumbsLink.d.ts.map +1 -1
- package/dist/commonjs/breadcrumbs/lib/BreadcrumbsLink.js +2 -2
- package/dist/commonjs/breadcrumbs/lib/BreadcrumbsOverflowButton.d.ts.map +1 -1
- package/dist/commonjs/breadcrumbs/lib/BreadcrumbsOverflowButton.js +2 -2
- package/dist/commonjs/button/lib/ExternalHyperlink.d.ts +27 -29
- package/dist/commonjs/button/lib/ExternalHyperlink.d.ts.map +1 -1
- package/dist/commonjs/button/lib/ExternalHyperlink.js +2 -2
- package/dist/commonjs/button/lib/Hyperlink.d.ts +28 -20
- package/dist/commonjs/button/lib/Hyperlink.d.ts.map +1 -1
- package/dist/commonjs/button/lib/Hyperlink.js +9 -6
- package/dist/commonjs/menu/lib/MenuPopper.js +1 -1
- package/dist/commonjs/pagination/lib/Pagination/Controls.d.ts.map +1 -1
- package/dist/commonjs/pagination/lib/Pagination/Controls.js +5 -4
- package/dist/commonjs/pagination/lib/Pagination/GoTo/Form.d.ts.map +1 -1
- package/dist/commonjs/pagination/lib/Pagination/GoTo/Form.js +1 -1
- package/dist/commonjs/pagination/lib/Pagination/GoTo/Label.js +1 -1
- package/dist/commonjs/pagination/lib/Pagination/GoTo/TextInput.d.ts.map +1 -1
- package/dist/commonjs/pagination/lib/Pagination/GoTo/TextInput.js +1 -1
- package/dist/commonjs/pagination/lib/Pagination/PageButton.d.ts +11 -0
- package/dist/commonjs/pagination/lib/Pagination/PageButton.d.ts.map +1 -1
- package/dist/commonjs/pagination/lib/Pagination/PageButton.js +3 -3
- package/dist/commonjs/select/lib/SelectInput.d.ts.map +1 -1
- package/dist/commonjs/select/lib/SelectInput.js +5 -5
- package/dist/commonjs/text-input/lib/InputGroup.d.ts.map +1 -1
- package/dist/commonjs/text-input/lib/InputGroup.js +14 -10
- package/dist/commonjs/text-input/lib/TextInput.d.ts.map +1 -1
- package/dist/commonjs/text-input/lib/TextInput.js +2 -2
- package/dist/es6/breadcrumbs/lib/BreadcrumbsCurrentItem.js +1 -1
- package/dist/es6/breadcrumbs/lib/BreadcrumbsItem.js +1 -1
- package/dist/es6/breadcrumbs/lib/BreadcrumbsLink.d.ts.map +1 -1
- package/dist/es6/breadcrumbs/lib/BreadcrumbsLink.js +2 -2
- package/dist/es6/breadcrumbs/lib/BreadcrumbsOverflowButton.d.ts.map +1 -1
- package/dist/es6/breadcrumbs/lib/BreadcrumbsOverflowButton.js +2 -2
- package/dist/es6/button/lib/ExternalHyperlink.d.ts +27 -29
- package/dist/es6/button/lib/ExternalHyperlink.d.ts.map +1 -1
- package/dist/es6/button/lib/ExternalHyperlink.js +2 -2
- package/dist/es6/button/lib/Hyperlink.d.ts +28 -20
- package/dist/es6/button/lib/Hyperlink.d.ts.map +1 -1
- package/dist/es6/button/lib/Hyperlink.js +9 -6
- package/dist/es6/menu/lib/MenuPopper.js +1 -1
- package/dist/es6/pagination/lib/Pagination/Controls.d.ts.map +1 -1
- package/dist/es6/pagination/lib/Pagination/Controls.js +6 -5
- package/dist/es6/pagination/lib/Pagination/GoTo/Form.d.ts.map +1 -1
- package/dist/es6/pagination/lib/Pagination/GoTo/Form.js +1 -1
- package/dist/es6/pagination/lib/Pagination/GoTo/Label.js +1 -1
- package/dist/es6/pagination/lib/Pagination/GoTo/TextInput.d.ts.map +1 -1
- package/dist/es6/pagination/lib/Pagination/GoTo/TextInput.js +1 -1
- package/dist/es6/pagination/lib/Pagination/PageButton.d.ts +11 -0
- package/dist/es6/pagination/lib/Pagination/PageButton.d.ts.map +1 -1
- package/dist/es6/pagination/lib/Pagination/PageButton.js +4 -4
- package/dist/es6/select/lib/SelectInput.d.ts.map +1 -1
- package/dist/es6/select/lib/SelectInput.js +6 -6
- package/dist/es6/text-input/lib/InputGroup.d.ts.map +1 -1
- package/dist/es6/text-input/lib/InputGroup.js +15 -11
- package/dist/es6/text-input/lib/TextInput.d.ts.map +1 -1
- package/dist/es6/text-input/lib/TextInput.js +2 -2
- package/menu/lib/MenuPopper.tsx +1 -1
- package/package.json +5 -5
- package/pagination/lib/Pagination/Controls.tsx +6 -1
- package/pagination/lib/Pagination/GoTo/Form.tsx +1 -0
- package/pagination/lib/Pagination/GoTo/Label.tsx +1 -1
- package/pagination/lib/Pagination/GoTo/TextInput.tsx +1 -0
- package/pagination/lib/Pagination/PageButton.tsx +20 -5
- package/select/lib/SelectInput.tsx +10 -2
- package/text-input/lib/InputGroup.tsx +17 -2
- package/text-input/lib/TextInput.tsx +0 -1
|
@@ -31,7 +31,7 @@ const text_input_1 = require("@workday/canvas-kit-react/text-input");
|
|
|
31
31
|
const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
|
|
32
32
|
const useGoToForm_1 = require("./useGoToForm");
|
|
33
33
|
exports.paginationGoToTextInputStencil = (0, canvas_kit_styling_1.createStencil)({
|
|
34
|
-
base: { name: "
|
|
34
|
+
base: { name: "2gdb7p", styles: "box-sizing:border-box;min-width:3.4375rem;width:3.4375rem;text-align:center;" }
|
|
35
35
|
}, "pagination-go-to-text-input-c73671");
|
|
36
36
|
exports.GoToTextInput = (0, common_1.createComponent)('input')({
|
|
37
37
|
displayName: 'Pagination.GoToTextInput',
|
|
@@ -3,11 +3,22 @@ export declare const paginationPageButtonStencil: import("@workday/canvas-kit-st
|
|
|
3
3
|
toggled: {
|
|
4
4
|
true: {
|
|
5
5
|
[x: string]: "--cnvs-sys-font-weight-bold" | "--cnvs-sys-color-fg-inverse" | "var(--cnvs-sys-color-brand-accent-primary, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1)))" | {
|
|
6
|
+
outline: string;
|
|
7
|
+
outlineOffset: string;
|
|
8
|
+
} | {
|
|
6
9
|
[x: string]: "--cnvs-sys-color-fg-inverse" | "var(--cnvs-sys-color-brand-accent-primary, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1)))";
|
|
10
|
+
outline?: undefined;
|
|
11
|
+
outlineOffset?: undefined;
|
|
7
12
|
} | {
|
|
8
13
|
[x: string]: "--cnvs-sys-color-fg-disabled";
|
|
14
|
+
outline?: undefined;
|
|
15
|
+
outlineOffset?: undefined;
|
|
9
16
|
};
|
|
10
17
|
fontWeight: "--cnvs-sys-font-weight-bold";
|
|
18
|
+
'@media (prefers-contrast: more)': {
|
|
19
|
+
outline: string;
|
|
20
|
+
outlineOffset: string;
|
|
21
|
+
};
|
|
11
22
|
'&:hover, &.hover, &:active, &.active, &:focus-visible, &.focus': {
|
|
12
23
|
[x: string]: "--cnvs-sys-color-fg-inverse" | "var(--cnvs-sys-color-brand-accent-primary, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1)))";
|
|
13
24
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PageButton.d.ts","sourceRoot":"","sources":["../../../../../pagination/lib/Pagination/PageButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B,eAAO,MAAM,2BAA2B
|
|
1
|
+
{"version":3,"file":"PageButton.d.ts","sourceRoot":"","sources":["../../../../../pagination/lib/Pagination/PageButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B,eAAO,MAAM,2BAA2B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBAyDtC,CAAC;AAEH,MAAM,WAAW,eAAe;IAC9B,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,UAAU,wFAuBrB,CAAC"}
|
|
@@ -33,13 +33,13 @@ const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
|
|
|
33
33
|
const usePaginationModel_1 = require("./usePaginationModel");
|
|
34
34
|
exports.paginationPageButtonStencil = (0, canvas_kit_styling_1.createStencil)({
|
|
35
35
|
extends: button_1.buttonStencil,
|
|
36
|
-
base: { name: "
|
|
36
|
+
base: { name: "2hli9o", styles: "box-sizing:border-box;min-width:var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem));height:var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem));padding:0;font-weight:var(--cnvs-sys-font-weight-normal);--label-button-a19f67:var(--cnvs-sys-color-fg-default);&:focus-visible, &.focus{--background-button-a19f67:var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));--label-button-a19f67:var(--cnvs-sys-color-fg-strong);--boxShadowInner-button-a19f67:var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1)));--boxShadowOuter-button-a19f67:var(--cnvs-sys-color-brand-focus-primary, var(--cnvs-brand-common-focus-outline, oklch(0.6023 0.2032 255.68 / 1)));}&:hover, &.hover{--background-button-a19f67:var(--cnvs-sys-color-surface-overlay-hover-default, oklch(0.3343 0.0951 253.3 / 0.05));--label-button-a19f67:var(--cnvs-sys-color-fg-stronger);}&:active, &.active{--background-button-a19f67:var(--cnvs-sys-color-surface-overlay-pressed-default, oklch(0.3337 0.0688 250.79 / 0.09));--label-button-a19f67:var(--cnvs-sys-color-fg-stronger);}&:disabled, &.disabled{--background-button-a19f67:var(--cnvs-sys-color-fg-disabled);}" },
|
|
37
37
|
modifiers: {
|
|
38
38
|
toggled: {
|
|
39
|
-
true: { name: "
|
|
39
|
+
true: { name: "x6ndq", styles: "font-weight:var(--cnvs-sys-font-weight-bold);--background-button-a19f67:var(--cnvs-sys-color-brand-accent-primary, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1)));--label-button-a19f67:var(--cnvs-sys-color-fg-inverse);@media (prefers-contrast: more){outline:0.125rem solid transparent;outline-offset:-0.0625rem;}&:hover, &.hover, &:active, &.active, &:focus-visible, &.focus{--background-button-a19f67:var(--cnvs-sys-color-brand-accent-primary, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1)));--label-button-a19f67:var(--cnvs-sys-color-fg-inverse);}&:disabled, &.disabled{--background-button-a19f67:var(--cnvs-sys-color-fg-disabled);}" }
|
|
40
40
|
}
|
|
41
41
|
}
|
|
42
|
-
}, "pagination-page-button-
|
|
42
|
+
}, "pagination-page-button-c731af");
|
|
43
43
|
exports.PageButton = (0, common_1.createComponent)('button')({
|
|
44
44
|
displayName: 'Pagination.PageButton',
|
|
45
45
|
Component({ pageNumber, children, ...elemProps }) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectInput.d.ts","sourceRoot":"","sources":["../../../../select/lib/SelectInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,YAAY,EAAqB,MAAM,kCAAkC,CAAC;AAElF,OAAO,EAAa,SAAS,EAAC,MAAM,sCAAsC,CAAC;AAC3E,OAAO,EAAC,OAAO,EAAgB,MAAM,6BAA6B,CAAC;AACnE,OAAO,
|
|
1
|
+
{"version":3,"file":"SelectInput.d.ts","sourceRoot":"","sources":["../../../../select/lib/SelectInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,YAAY,EAAqB,MAAM,kCAAkC,CAAC;AAElF,OAAO,EAAa,SAAS,EAAC,MAAM,sCAAsC,CAAC;AAC3E,OAAO,EAAC,OAAO,EAAgB,MAAM,6BAA6B,CAAC;AACnE,OAAO,EACL,gBAAgB,EAGjB,MAAM,kCAAkC,CAAC;AAM1C,MAAM,WAAW,gBAAiB,SAAQ,YAAY,CAAC,OAAO,SAAS,EAAE,KAAK,CAAC,EAAE,OAAO;IACtF;;;;OAIG;IACH,cAAc,CAAC,EAAE,gBAAgB,CAAC;CACnC;AAED,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oBAuE7B,CAAC;AAEH,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8BtB,CAAC"}
|
|
@@ -20,17 +20,17 @@ exports.selectInputStencil = (0, canvas_kit_styling_1.createStencil)({
|
|
|
20
20
|
hiddenInput: 'select-hidden-input',
|
|
21
21
|
visualInput: 'select-visual-input',
|
|
22
22
|
},
|
|
23
|
-
base: { name: "
|
|
23
|
+
base: { name: "r1mii", styles: "box-sizing:border-box;[data-part=\"select-hidden-input\"]{position:absolute;top:0;bottom:0;left:0;right:0;opacity:var(--cnvs-sys-opacity-zero);cursor:default;pointer-events:none;min-width:100%;width:100%;}[data-part=\"select-start-icon\"], [data-part=\"select-end-icon\"], [data-part=\"select-caret-container\"], [data-part=\"select-start-icon-container\"]{position:absolute;pointer-events:none;}[data-part=\"select-visual-input\"]{caret-color:transparent;background-color:var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));color:var(--cnvs-sys-color-fg-default);cursor:default;&::placeholder{color:var(--cnvs-sys-color-fg-default);}&::selection{background-color:transparent;}}[data-part=\"select-caret-icon\"]{--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-default);}&:has(:disabled, .disabled){[data-part=\"select-caret-icon\"]{--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-disabled);}}" },
|
|
24
24
|
modifiers: {
|
|
25
25
|
error: {
|
|
26
|
-
error: { name: "
|
|
27
|
-
caution: { name: "
|
|
26
|
+
error: { name: "23y4gy", styles: "[data-part=\"select-visual-input\"]{background-color:var(--cnvs-sys-color-brand-surface-critical-default, oklch(0.6289 0.2567 29.11 / 0.04));}" },
|
|
27
|
+
caution: { name: "o7q5t", styles: "[data-part=\"select-visual-input\"]{background-color:var(--cnvs-sys-color-brand-surface-caution-default, oklch(0.7982 0.159 92.57 / 0.1));}" }
|
|
28
28
|
}
|
|
29
29
|
}
|
|
30
|
-
}, "select-input-
|
|
30
|
+
}, "select-input-3e661d");
|
|
31
31
|
exports.SelectInput = (0, common_1.createSubcomponent)(text_input_1.TextInput)({
|
|
32
32
|
modelHook: useSelectModel_1.useSelectModel,
|
|
33
33
|
elemPropsHook: useSelectInput_1.useSelectInput,
|
|
34
34
|
})(({ inputStartIcon, formInputProps, error, ...elemProps }, Element, model) => {
|
|
35
|
-
return ((0, jsx_runtime_1.jsxs)(text_input_1.InputGroup, { "data-width": "ck-formfield-width", ...(0, exports.selectInputStencil)({ error: error }), children: [inputStartIcon && model.state.selectedIds.length > 0 && ((0, jsx_runtime_1.jsx)(text_input_1.InputGroup.InnerStart, { ...exports.selectInputStencil.parts.startIconContainer, children: (0, jsx_runtime_1.jsx)(icon_1.SystemIcon, { ...exports.selectInputStencil.parts.startIcon, icon: inputStartIcon }) })), (0, jsx_runtime_1.jsx)(text_input_1.InputGroup.Input, { ...exports.selectInputStencil.parts.hiddenInput, ...formInputProps }), (0, jsx_runtime_1.jsx)(text_input_1.InputGroup.Input, { as: Element, placeholder: "Choose an option", error: error, ...exports.selectInputStencil.parts.visualInput, ...elemProps }), (0, jsx_runtime_1.jsx)(text_input_1.InputGroup.InnerEnd, { ...exports.selectInputStencil.parts.caretContainer, children: (0, jsx_runtime_1.jsx)(icon_1.SystemIcon, { ...exports.selectInputStencil.parts.caret, icon: canvas_system_icons_web_1.
|
|
35
|
+
return ((0, jsx_runtime_1.jsxs)(text_input_1.InputGroup, { "data-width": "ck-formfield-width", ...(0, exports.selectInputStencil)({ error: error }), children: [inputStartIcon && model.state.selectedIds.length > 0 && ((0, jsx_runtime_1.jsx)(text_input_1.InputGroup.InnerStart, { ...exports.selectInputStencil.parts.startIconContainer, children: (0, jsx_runtime_1.jsx)(icon_1.SystemIcon, { ...exports.selectInputStencil.parts.startIcon, icon: inputStartIcon }) })), (0, jsx_runtime_1.jsx)(text_input_1.InputGroup.Input, { ...exports.selectInputStencil.parts.hiddenInput, ...formInputProps }), (0, jsx_runtime_1.jsx)(text_input_1.InputGroup.Input, { as: Element, placeholder: "Choose an option", error: error, ...exports.selectInputStencil.parts.visualInput, ...elemProps }), (0, jsx_runtime_1.jsx)(text_input_1.InputGroup.InnerEnd, { ...exports.selectInputStencil.parts.caretContainer, children: (0, jsx_runtime_1.jsx)(icon_1.SystemIcon, { size: "md", ...exports.selectInputStencil.parts.caret, icon: model.state.visibility === 'visible' ? canvas_system_icons_web_1.chevronUpSmallIcon : canvas_system_icons_web_1.chevronDownSmallIcon }) })] }));
|
|
36
36
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InputGroup.d.ts","sourceRoot":"","sources":["../../../../text-input/lib/InputGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"InputGroup.d.ts","sourceRoot":"","sources":["../../../../text-input/lib/InputGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAe1B,OAAO,EAAC,gBAAgB,EAAa,MAAM,kCAAkC,CAAC;AAK9E,eAAO,MAAM,kBAAkB;;;;;;;;;;;;EAS7B,CAAC;AAEH,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;IAE/B;;;OAGG;;IAEH;;;OAGG;;;;IAIH;;OAEG;;gBAmBL,CAAC;AA4CH,eAAO,MAAM,kBAAkB;;;;;;;;EAO7B,CAAC;AAEH,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;;gBAiBjC,CAAC;AAsBH,eAAO,MAAM,cAAc;;;;;;;;;;kCAWJ,gBAAgB;;EAQrC,CAAC;AA0CH,eAAO,MAAM,iBAAiB,iJAiB5B,CAAC;AAEH;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,UAAU;;;;;;IAInB;;;;;OAKG;;;;;;;IAEH;;;OAGG;;;;;;;;;IAEH;;;;;OAKG;;;;;;;IAEH;;;OAGG;;;;;;;CAsDL,CAAC"}
|
|
@@ -8,6 +8,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
|
|
|
8
8
|
const react_1 = __importDefault(require("react"));
|
|
9
9
|
const button_1 = require("@workday/canvas-kit-react/button");
|
|
10
10
|
const common_1 = require("@workday/canvas-kit-react/common");
|
|
11
|
+
const icon_1 = require("@workday/canvas-kit-react/icon");
|
|
11
12
|
const layout_1 = require("@workday/canvas-kit-react/layout");
|
|
12
13
|
const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
|
|
13
14
|
const canvas_system_icons_web_1 = require("@workday/canvas-system-icons-web");
|
|
@@ -41,13 +42,13 @@ exports.inputGroupInnerStencil = (0, canvas_kit_styling_1.createStencil)({
|
|
|
41
42
|
*/
|
|
42
43
|
pointerEvents: '',
|
|
43
44
|
},
|
|
44
|
-
base: { name: "
|
|
45
|
+
base: { name: "3m5lrc", styles: "--insetInlineStart-input-group-inner-fddb83:initial;--insetInlineEnd-input-group-inner-fddb83:initial;--width-input-group-inner-fddb83:var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem));--height-input-group-inner-fddb83:var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem));box-sizing:border-box;display:flex;position:absolute;align-items:center;justify-content:center;width:var(--width-input-group-inner-fddb83);height:var(--height-input-group-inner-fddb83);inset-inline-start:var(--insetInlineStart-input-group-inner-fddb83);inset-inline-end:var(--insetInlineEnd-input-group-inner-fddb83);--size-svg-bca693:var(--cnvs-component-system-icon-size-xs);" },
|
|
45
46
|
modifiers: {
|
|
46
47
|
pointerEvents: {
|
|
47
|
-
_: { name: "
|
|
48
|
+
_: { name: "26ygsl", styles: "pointer-events:var(--pointerEvents-input-group-inner-fddb83);" }
|
|
48
49
|
}
|
|
49
50
|
}
|
|
50
|
-
}, "input-group-inner-
|
|
51
|
+
}, "input-group-inner-fddb83");
|
|
51
52
|
const InputGroupInnerStart = (0, common_1.createSubcomponent)('div')({
|
|
52
53
|
modelHook: exports.useInputGroupModel,
|
|
53
54
|
})(({ pointerEvents, insetInlineStart, insetInlineEnd, width, height, ...elemProps }, Element) => {
|
|
@@ -82,16 +83,16 @@ exports.inputGroupInputStencil = (0, canvas_kit_styling_1.createStencil)({
|
|
|
82
83
|
paddingInlineStart: '',
|
|
83
84
|
paddingInlineEnd: '',
|
|
84
85
|
},
|
|
85
|
-
base: { name: "
|
|
86
|
+
base: { name: "3czs8y", styles: "box-sizing:border-box;display:flex;width:100%;" },
|
|
86
87
|
modifiers: {
|
|
87
88
|
paddingInlineStart: {
|
|
88
|
-
_: { name: "
|
|
89
|
+
_: { name: "2h3jl8", styles: "padding-inline-start:var(--paddingInlineStart-input-group-input-b51031);" }
|
|
89
90
|
},
|
|
90
91
|
paddingInlineEnd: {
|
|
91
|
-
_: { name: "
|
|
92
|
+
_: { name: "4bzoag", styles: "padding-inline-end:var(--paddingInlineEnd-input-group-input-b51031);" }
|
|
92
93
|
}
|
|
93
94
|
}
|
|
94
|
-
}, "input-group-input-
|
|
95
|
+
}, "input-group-input-b51031");
|
|
95
96
|
const InputGroupInput = (0, common_1.createSubcomponent)(TextInput_1.TextInput)({
|
|
96
97
|
modelHook: exports.useInputGroupModel,
|
|
97
98
|
elemPropsHook: exports.useInputGroupInput,
|
|
@@ -121,6 +122,9 @@ exports.useClearButton = (0, common_1.createElemPropsHook)(exports.useInputGroup
|
|
|
121
122
|
},
|
|
122
123
|
};
|
|
123
124
|
});
|
|
125
|
+
const clearButtonStencil = (0, canvas_kit_styling_1.createStencil)({
|
|
126
|
+
base: { name: "4946g7", styles: "box-sizing:border-box;svg{--size-svg-bca693:var(--cnvs-component-system-icon-size-xs);}" }
|
|
127
|
+
}, "clear-button-49e5c1");
|
|
124
128
|
/**
|
|
125
129
|
* A clear input button. This can be a component later.
|
|
126
130
|
*/
|
|
@@ -128,7 +132,7 @@ const ClearButton = (0, common_1.createSubcomponent)(button_1.TertiaryButton)({
|
|
|
128
132
|
modelHook: exports.useInputGroupModel,
|
|
129
133
|
elemPropsHook: exports.useClearButton,
|
|
130
134
|
})((elemProps, Element) => {
|
|
131
|
-
return (0, jsx_runtime_1.jsx)(Element, { "data-part": "input-group-clear-button", ...(0, canvas_kit_styling_1.handleCsProp)(elemProps) });
|
|
135
|
+
return ((0, jsx_runtime_1.jsx)(Element, { "data-part": "input-group-clear-button", ...(0, canvas_kit_styling_1.handleCsProp)(elemProps, clearButtonStencil()) }));
|
|
132
136
|
});
|
|
133
137
|
// make sure we always use pixels if the input is a number - this is required for `calc`
|
|
134
138
|
const toPx = (input) => {
|
|
@@ -146,8 +150,8 @@ const wrapInCalc = (values) => {
|
|
|
146
150
|
return `calc(${values.map(toPx).join(' + ')})`;
|
|
147
151
|
};
|
|
148
152
|
exports.inputGroupStencil = (0, canvas_kit_styling_1.createStencil)({
|
|
149
|
-
base: { name: "
|
|
150
|
-
}, "input-group-
|
|
153
|
+
base: { name: "1mby7n", styles: "box-sizing:border-box;display:flex;position:relative;align-items:center;& :has([data-part=\"input-group-clear-button\"]){transition:opacity 300ms ease;}&:where(:has(input:placeholder-shown)) :has([data-part=\"input-group-clear-button\"]){opacity:0;pointer-events:none;}" }
|
|
154
|
+
}, "input-group-1aae89");
|
|
151
155
|
/**
|
|
152
156
|
* An `InputGroup` is a container around a {@link TextInput} with optional inner start and end
|
|
153
157
|
* elements. The inner start and end elements are usually icons or icon buttons visually represented
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../../../text-input/lib/TextInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,cAAc,EAGf,MAAM,kCAAkC,CAAC;AAE1C,OAAO,EAAC,OAAO,EAAgC,MAAM,6BAA6B,CAAC;AAGnF,MAAM,WAAW,cAAe,SAAQ,cAAc,EAAE,OAAO;IAC7D;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACzB;AAED,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../../../text-input/lib/TextInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,cAAc,EAGf,MAAM,kCAAkC,CAAC;AAE1C,OAAO,EAAC,OAAO,EAAgC,MAAM,6BAA6B,CAAC;AAGnF,MAAM,WAAW,cAAe,SAAQ,cAAc,EAAE,OAAO;IAC7D;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACzB;AAED,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBA0G3B,CAAC;AAEH,eAAO,MAAM,SAAS;;CAqBpB,CAAC"}
|
|
@@ -18,8 +18,8 @@ exports.textInputStencil = (0, canvas_kit_styling_1.createStencil)({
|
|
|
18
18
|
false: { name: "2f0cc6", styles: "width:initial;" }
|
|
19
19
|
},
|
|
20
20
|
error: {
|
|
21
|
-
error: { name: "
|
|
22
|
-
caution: { name: "
|
|
21
|
+
error: { name: "sif5x", styles: "border-color:var(--cnvs-sys-color-brand-border-critical, oklch(0.6495 0.2369 30.04 / 1));box-shadow:inset 0 0 0 0.125rem var(--cnvs-sys-color-brand-border-critical, oklch(0.6495 0.2369 30.04 / 1));&:is(:hover, .hover, :disabled, .disabled, :focus-visible:not([disabled]), .focus:not([disabled])){border-color:var(--cnvs-sys-color-brand-border-critical, oklch(0.6495 0.2369 30.04 / 1));}&:is(:focus-visible, .focus):not([disabled]){box-shadow:inset 0 0 0 0.125rem var(--cnvs-sys-color-brand-border-critical, oklch(0.6495 0.2369 30.04 / 1)),\n 0 0 0 2px var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1))),\n 0 0 0 4px var(--cnvs-sys-color-brand-border-primary, oklch(0.6023 0.2032 255.68 / 1));outline-offset:0.125rem;}@media (forced-colors: active){outline:solid 0.25rem ButtonBorder;}" },
|
|
22
|
+
caution: { name: "6plwv", styles: "border-color:var(--cnvs-sys-color-brand-border-caution, var(--cnvs-brand-alert-dark, oklch(0.6601 0.1537 60.7 / 1)));box-shadow:inset 0 0 0 0.125rem var(--cnvs-sys-color-brand-focus-caution-inner, var(--cnvs-brand-common-alert-inner, oklch(0.7909 0.1711 70.15 / 1)));&:is(:hover, .hover, :disabled, .disabled, :focus-visible:not([disabled]), .focus:not([disabled])){border-color:var(--cnvs-sys-color-brand-border-caution, var(--cnvs-brand-alert-dark, oklch(0.6601 0.1537 60.7 / 1)));}&:is(:focus-visible, .focus):not([disabled]){box-shadow:inset 0 0 0 0.125rem var(--cnvs-sys-color-brand-focus-caution-inner, var(--cnvs-brand-common-alert-inner, oklch(0.7909 0.1711 70.15 / 1))),\n 0 0 0 2px var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1))),\n 0 0 0 4px var(--cnvs-sys-color-brand-border-primary, oklch(0.6023 0.2032 255.68 / 1));}outline-offset:0.125rem;@media (forced-colors: active){outline:solid 0.25rem ButtonBorder;outline-offset:0;}" }
|
|
23
23
|
}
|
|
24
24
|
},
|
|
25
25
|
defaultModifiers: {
|
|
@@ -10,7 +10,7 @@ export const breadcrumbsCurrentItemStencil = createStencil({
|
|
|
10
10
|
vars: {
|
|
11
11
|
maxWidth: '',
|
|
12
12
|
},
|
|
13
|
-
base: { name: "
|
|
13
|
+
base: { name: "1o9jh", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default);font-size:var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large, 0.875rem));font-weight:var(--cnvs-sys-font-weight-normal);letter-spacing:var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-sys-type-letter-spacing-subtext-large));line-height:var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large, 1.25rem));color:var(--cnvs-sys-color-fg-muted-default);display:inline-block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;max-width:var(--maxWidth-breadcrumbs-current-item-29bc44);" }
|
|
14
14
|
}, "breadcrumbs-current-item-29bc44");
|
|
15
15
|
export const useBreadcrumbsItem = composeHooks(createElemPropsHook(useBreadcrumbsModel)((_model, ref) => {
|
|
16
16
|
const { localRef } = useLocalRef(useForkRef(ref));
|
|
@@ -12,7 +12,7 @@ export const breadcrumbsItemStencil = createStencil({
|
|
|
12
12
|
parts: {
|
|
13
13
|
chevronRightIcon: 'breadcrumbs-item-chevron-right-icon',
|
|
14
14
|
},
|
|
15
|
-
base: { name: "
|
|
15
|
+
base: { name: "150tjl", styles: "box-sizing:border-box;align-items:center;display:inline-flex;white-space:nowrap;--size-svg-bca693:var(--cnvs-component-system-icon-size-md, var(--cnvs-sys-space-x5, 1.25rem));--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-muted-default);[data-part=\"breadcrumbs-item-chevron-right-icon\"]{height:var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem));width:var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem));justify-content:center;align-items:center;display:inline-flex;:dir(rtl){transform:scaleX(-1);}}" }
|
|
16
16
|
}, "breadcrumbs-item-118728");
|
|
17
17
|
export const useBreadcrumbsItem = composeHooks(useOverflowListItemMeasure, useListItemRegister);
|
|
18
18
|
export const BreadcrumbsItem = createSubcomponent('li')({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BreadcrumbsLink.d.ts","sourceRoot":"","sources":["../../../../breadcrumbs/lib/BreadcrumbsLink.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,cAAc,EAAC,MAAM,kCAAkC,CAAC;AAE3E,OAAO,EAAkB,oBAAoB,EAAC,MAAM,mCAAmC,CAAC;AAIxF,MAAM,WAAW,oBAAqB,SAAQ,cAAc;IAC1D;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IACb;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3B,YAAY,CAAC,EAAE,oBAAoB,GAAG,EAAE,CAAC;CAC1C;AAED,eAAO,MAAM,sBAAsB;;;;
|
|
1
|
+
{"version":3,"file":"BreadcrumbsLink.d.ts","sourceRoot":"","sources":["../../../../breadcrumbs/lib/BreadcrumbsLink.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,cAAc,EAAC,MAAM,kCAAkC,CAAC;AAE3E,OAAO,EAAkB,oBAAoB,EAAC,MAAM,mCAAmC,CAAC;AAIxF,MAAM,WAAW,oBAAqB,SAAQ,cAAc;IAC1D;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IACb;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3B,YAAY,CAAC,EAAE,oBAAoB,GAAG,EAAE,CAAC;CAC1C;AAED,eAAO,MAAM,sBAAsB;;;;gBAyBjC,CAAC;AAEH,eAAO,MAAM,eAAe,wFA4B1B,CAAC"}
|
|
@@ -8,12 +8,12 @@ export const breadcrumbsLinkStencil = createStencil({
|
|
|
8
8
|
vars: {
|
|
9
9
|
maxWidth: '',
|
|
10
10
|
},
|
|
11
|
-
base: { name: "
|
|
11
|
+
base: { name: "348ih1", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default);font-size:var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large, 0.875rem));font-weight:var(--cnvs-sys-font-weight-normal);letter-spacing:var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-sys-type-letter-spacing-subtext-large));line-height:var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large, 1.25rem));color:var(--cnvs-sys-color-fg-default);text-overflow:ellipsis;overflow:hidden;white-space:nowrap;max-width:var(--maxWidth-breadcrumbs-link-6d0a52);&:hover, &.hover{color:var(--cnvs-sys-color-fg-strong);background-color:var(--cnvs-sys-color-surface-overlay-hover-default, oklch(0.3343 0.0951 253.3 / 0.05));text-decoration:underline;}&:active, &.active{color:var(--cnvs-sys-color-fg-strong);background-color:var(--cnvs-sys-color-surface-overlay-pressed-default, oklch(0.3337 0.0688 250.79 / 0.09));}" }
|
|
12
12
|
}, "breadcrumbs-link-6d0a52");
|
|
13
13
|
export const BreadcrumbsLink = createComponent('a')({
|
|
14
14
|
displayName: 'Breadcrumbs.Link',
|
|
15
15
|
Component: ({ maxWidth = 350, href, tooltipProps = {}, children, ...elemProps }, ref, Element) => {
|
|
16
|
-
return (_jsx(OverflowTooltip, { ...tooltipProps, children: _jsx(Hyperlink, { href: href, ref: ref, as: Element, role: "link", variant: "standalone", ...handleCsProp(elemProps, breadcrumbsLinkStencil({
|
|
16
|
+
return (_jsx(OverflowTooltip, { ...tooltipProps, children: _jsx(Hyperlink, { href: href, ref: ref, as: Element, role: "link", variant: "secondary", linkType: "standalone", ...handleCsProp(elemProps, breadcrumbsLinkStencil({
|
|
17
17
|
maxWidth: typeof maxWidth === 'number' ? px2rem(maxWidth) : maxWidth,
|
|
18
18
|
})), children: children }) }));
|
|
19
19
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BreadcrumbsOverflowButton.d.ts","sourceRoot":"","sources":["../../../../breadcrumbs/lib/BreadcrumbsOverflowButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,mBAAmB,EAAC,MAAM,kCAAkC,CAAC;AASrF,OAAO,EAAC,SAAS,EAAC,MAAM,kCAAkC,CAAC;AAQ3D,MAAM,WAAW,8BAA+B,SAAQ,IAAI,CAAC,mBAAmB,EAAE,OAAO,CAAC;IACxF,YAAY,EAAE,MAAM,CAAC;IACrB;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AAED,eAAO,MAAM,gCAAgC;;;;;;
|
|
1
|
+
{"version":3,"file":"BreadcrumbsOverflowButton.d.ts","sourceRoot":"","sources":["../../../../breadcrumbs/lib/BreadcrumbsOverflowButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,mBAAmB,EAAC,MAAM,kCAAkC,CAAC;AASrF,OAAO,EAAC,SAAS,EAAC,MAAM,kCAAkC,CAAC;AAQ3D,MAAM,WAAW,8BAA+B,SAAQ,IAAI,CAAC,mBAAmB,EAAE,OAAO,CAAC;IACxF,YAAY,EAAE,MAAM,CAAC;IACrB;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AAED,eAAO,MAAM,gCAAgC;;;;;;oBAwB3C,CAAC;AAEH,eAAO,MAAM,4BAA4B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;8aAOxC,CAAC;AAEF,eAAO,MAAM,yBAAyB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAqBpC,CAAC"}
|
|
@@ -13,7 +13,7 @@ export const breadcrumbsOverflowButtonStencil = createStencil({
|
|
|
13
13
|
overflowButton: 'breadcrumbs-overflow-button',
|
|
14
14
|
chevronRightIcon: 'breadcrumbs-overflow-button-chevron-right-icon',
|
|
15
15
|
},
|
|
16
|
-
base: { name: "
|
|
16
|
+
base: { name: "235btz", styles: "box-sizing:border-box;align-items:center;display:flex;--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-muted-default);--size-svg-bca693:var(--cnvs-component-system-icon-size-md, var(--cnvs-sys-space-x5, 1.25rem));[data-part=\"breadcrumbs-overflow-button\"]{--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-strong);}[data-part=\"breadcrumbs-overflow-button-chevron-right-icon\"]{height:var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem));width:var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem));justify-content:center;align-items:center;display:inline-flex;:dir(rtl){transform:scaleX(-1);}}" }
|
|
17
17
|
}, "breadcrumbs-overflow-button-16df19");
|
|
18
18
|
export const useBreadcrumbsOverflowButton = composeHooks(createElemPropsHook(useBreadcrumbsModel)(() => ({
|
|
19
19
|
'aria-haspopup': true,
|
|
@@ -24,5 +24,5 @@ export const BreadcrumbsOverflowButton = createSubcomponent('button')({
|
|
|
24
24
|
modelHook: useBreadcrumbsModel,
|
|
25
25
|
elemPropsHook: useBreadcrumbsOverflowButton,
|
|
26
26
|
})(({ style, ...elemProps }, Element) => {
|
|
27
|
-
return (_jsxs("li", { ...breadcrumbsOverflowButtonStencil(), ...style, children: [_jsx(TertiaryButton, { as: Element, icon: relatedActionsIcon, ...breadcrumbsOverflowButtonStencil.parts.overflowButton, ...handleCsProp(elemProps) }), _jsx(SystemIcon, { icon: chevronRightSmallIcon, ...breadcrumbsOverflowButtonStencil.parts.chevronRightIcon, "aria-hidden": true })] }));
|
|
27
|
+
return (_jsxs("li", { ...breadcrumbsOverflowButtonStencil(), ...style, children: [_jsx(TertiaryButton, { as: Element, icon: relatedActionsIcon, size: "extraSmall", ...breadcrumbsOverflowButtonStencil.parts.overflowButton, ...handleCsProp(elemProps) }), _jsx(SystemIcon, { icon: chevronRightSmallIcon, ...breadcrumbsOverflowButtonStencil.parts.chevronRightIcon, "aria-hidden": true })] }));
|
|
28
28
|
});
|
|
@@ -20,29 +20,28 @@ export declare const externalHyperlinkStencil: import("@workday/canvas-kit-styli
|
|
|
20
20
|
boxShadow: string;
|
|
21
21
|
};
|
|
22
22
|
'&:active, &.active': {
|
|
23
|
-
color: "
|
|
23
|
+
color: "--cnvs-sys-color-fg-link-hover";
|
|
24
24
|
background: "var(--cnvs-sys-color-surface-navigation, oklch(0.9692 0.0035 248.23 / 1))";
|
|
25
25
|
};
|
|
26
26
|
};
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
};
|
|
30
|
-
standaloneInverse: {
|
|
31
|
-
textDecoration: string;
|
|
32
|
-
color: "--cnvs-sys-color-fg-inverse";
|
|
27
|
+
secondary: {
|
|
28
|
+
color: "--cnvs-sys-color-fg-default";
|
|
33
29
|
'&:hover, &.hover': {
|
|
34
|
-
color: "--cnvs-sys-color-fg-
|
|
35
|
-
background:
|
|
36
|
-
};
|
|
37
|
-
'&:focus, &.focus, &:focus-visible': {
|
|
38
|
-
boxShadow: string;
|
|
30
|
+
color: "--cnvs-sys-color-fg-strong";
|
|
31
|
+
background: "var(--cnvs-sys-color-surface-overlay-hover-default, oklch(0.3343 0.0951 253.3 / 0.05))";
|
|
39
32
|
};
|
|
40
33
|
'&:active, &.active': {
|
|
41
|
-
color: "
|
|
42
|
-
background: "var(--cnvs-sys-color-surface-
|
|
34
|
+
color: "--cnvs-sys-color-fg-strong";
|
|
35
|
+
background: "var(--cnvs-sys-color-surface-overlay-pressed-default, oklch(0.3337 0.0688 250.79 / 0.09))";
|
|
43
36
|
};
|
|
44
37
|
};
|
|
45
38
|
};
|
|
39
|
+
linkType: {
|
|
40
|
+
inline: {};
|
|
41
|
+
standalone: {
|
|
42
|
+
textDecoration: string;
|
|
43
|
+
};
|
|
44
|
+
};
|
|
46
45
|
}, {}, {}, never, never>>, {
|
|
47
46
|
readonly externalHyperlinkIcon: "external-hyperlink-icon";
|
|
48
47
|
}, {}, import("@workday/canvas-kit-styling").Stencil<{
|
|
@@ -57,33 +56,32 @@ export declare const externalHyperlinkStencil: import("@workday/canvas-kit-styli
|
|
|
57
56
|
boxShadow: string;
|
|
58
57
|
};
|
|
59
58
|
'&:active, &.active': {
|
|
60
|
-
color: "
|
|
59
|
+
color: "--cnvs-sys-color-fg-link-hover";
|
|
61
60
|
background: "var(--cnvs-sys-color-surface-navigation, oklch(0.9692 0.0035 248.23 / 1))";
|
|
62
61
|
};
|
|
63
62
|
};
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
};
|
|
67
|
-
standaloneInverse: {
|
|
68
|
-
textDecoration: string;
|
|
69
|
-
color: "--cnvs-sys-color-fg-inverse";
|
|
63
|
+
secondary: {
|
|
64
|
+
color: "--cnvs-sys-color-fg-default";
|
|
70
65
|
'&:hover, &.hover': {
|
|
71
|
-
color: "--cnvs-sys-color-fg-
|
|
72
|
-
background:
|
|
73
|
-
};
|
|
74
|
-
'&:focus, &.focus, &:focus-visible': {
|
|
75
|
-
boxShadow: string;
|
|
66
|
+
color: "--cnvs-sys-color-fg-strong";
|
|
67
|
+
background: "var(--cnvs-sys-color-surface-overlay-hover-default, oklch(0.3343 0.0951 253.3 / 0.05))";
|
|
76
68
|
};
|
|
77
69
|
'&:active, &.active': {
|
|
78
|
-
color: "
|
|
79
|
-
background: "var(--cnvs-sys-color-surface-
|
|
70
|
+
color: "--cnvs-sys-color-fg-strong";
|
|
71
|
+
background: "var(--cnvs-sys-color-surface-overlay-pressed-default, oklch(0.3337 0.0688 250.79 / 0.09))";
|
|
80
72
|
};
|
|
81
73
|
};
|
|
82
74
|
};
|
|
75
|
+
linkType: {
|
|
76
|
+
inline: {};
|
|
77
|
+
standalone: {
|
|
78
|
+
textDecoration: string;
|
|
79
|
+
};
|
|
80
|
+
};
|
|
83
81
|
}, {}, {}, never, never>, never>;
|
|
84
82
|
/**
|
|
85
83
|
* `ExternalHyperlink`s also have an `inverse` variant. Use this variant when you need to place the
|
|
86
|
-
* link on a dark
|
|
84
|
+
* link on a dark background such as `system.color.accent.info`.
|
|
87
85
|
*/
|
|
88
86
|
export declare const ExternalHyperlink: import("@workday/canvas-kit-react/common").ElementComponent<"a", ExternalHyperlinkProps>;
|
|
89
87
|
//# sourceMappingURL=ExternalHyperlink.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ExternalHyperlink.d.ts","sourceRoot":"","sources":["../../../../button/lib/ExternalHyperlink.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAC,cAAc,EAAmB,MAAM,aAAa,CAAC;AAE7D,MAAM,WAAW,sBAAuB,SAAQ,cAAc;IAC5D;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,wBAAwB
|
|
1
|
+
{"version":3,"file":"ExternalHyperlink.d.ts","sourceRoot":"","sources":["../../../../button/lib/ExternalHyperlink.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAC,cAAc,EAAmB,MAAM,aAAa,CAAC;AAE7D,MAAM,WAAW,sBAAuB,SAAQ,cAAc;IAC5D;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,wBAAwB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gCAuBnC,CAAC;AAEH;;;GAGG;AACH,eAAO,MAAM,iBAAiB,0FAsB5B,CAAC"}
|
|
@@ -14,9 +14,9 @@ export const externalHyperlinkStencil = createStencil({
|
|
|
14
14
|
}, "external-hyperlink-5efdf6");
|
|
15
15
|
/**
|
|
16
16
|
* `ExternalHyperlink`s also have an `inverse` variant. Use this variant when you need to place the
|
|
17
|
-
* link on a dark
|
|
17
|
+
* link on a dark background such as `system.color.accent.info`.
|
|
18
18
|
*/
|
|
19
19
|
export const ExternalHyperlink = createComponent('a')({
|
|
20
20
|
displayName: 'ExternalHyperlink',
|
|
21
|
-
Component: ({ children, iconLabel, variant, ...elemProps }, ref, Element) => (_jsxs(Element, { ref: ref, target: "_blank", rel: "noreferrer", ...handleCsProp(elemProps, externalHyperlinkStencil({ variant })), children: [_jsx("span", { "data-part": "external-hyperlink-children", children: children }), _jsx(SystemIcon, { icon: externalLinkIcon, role: "img", "aria-label": iconLabel, ...externalHyperlinkStencil.parts.externalHyperlinkIcon })] })),
|
|
21
|
+
Component: ({ children, iconLabel, variant, linkType = 'inline', ...elemProps }, ref, Element) => (_jsxs(Element, { ref: ref, target: "_blank", rel: "noreferrer", ...handleCsProp(elemProps, externalHyperlinkStencil({ variant, linkType })), children: [_jsx("span", { "data-part": "external-hyperlink-children", children: children }), _jsx(SystemIcon, { icon: externalLinkIcon, role: "img", "aria-label": iconLabel, ...externalHyperlinkStencil.parts.externalHyperlinkIcon })] })),
|
|
22
22
|
});
|
|
@@ -2,14 +2,23 @@ import * as React from 'react';
|
|
|
2
2
|
import { CSProps } from '@workday/canvas-kit-styling';
|
|
3
3
|
export interface HyperlinkProps extends CSProps {
|
|
4
4
|
/**
|
|
5
|
-
*
|
|
6
|
-
* - `inverse`: sets the color to white and updates hover, focus, and active pseudo-classes
|
|
7
|
-
*
|
|
8
|
-
* - `
|
|
5
|
+
* Sets color styles for Hyperlink
|
|
6
|
+
* - `inverse`: sets the color to white and updates hover, focus, and active pseudo-classes. Use this
|
|
7
|
+
* variant on dark backgrounds.
|
|
8
|
+
* - `secondary`: sets the color to a dark gray (keeps the underline by default). Use this
|
|
9
|
+
* variant on colored backgrounds.
|
|
9
10
|
*/
|
|
10
|
-
variant?: 'inverse' | '
|
|
11
|
+
variant?: 'inverse' | 'secondary';
|
|
11
12
|
/**
|
|
12
|
-
*
|
|
13
|
+
* Sets underline behavior for Hyperlink
|
|
14
|
+
* - `inline` (default): keeps the underline. Use when the hyperlink appears in body text.
|
|
15
|
+
* - `standalone`: removes the underline. Use when a hyperlink is outside paragraph or body text.
|
|
16
|
+
*
|
|
17
|
+
* @default 'inline'
|
|
18
|
+
*/
|
|
19
|
+
linkType?: 'inline' | 'standalone';
|
|
20
|
+
/**
|
|
21
|
+
* Attribute for the hyperlink URL
|
|
13
22
|
*/
|
|
14
23
|
href?: string;
|
|
15
24
|
children?: React.ReactNode;
|
|
@@ -26,29 +35,28 @@ export declare const hyperlinkStencil: import("@workday/canvas-kit-styling").Ste
|
|
|
26
35
|
boxShadow: string;
|
|
27
36
|
};
|
|
28
37
|
'&:active, &.active': {
|
|
29
|
-
color: "
|
|
38
|
+
color: "--cnvs-sys-color-fg-link-hover";
|
|
30
39
|
background: "var(--cnvs-sys-color-surface-navigation, oklch(0.9692 0.0035 248.23 / 1))";
|
|
31
40
|
};
|
|
32
41
|
};
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
};
|
|
36
|
-
standaloneInverse: {
|
|
37
|
-
textDecoration: string;
|
|
38
|
-
color: "--cnvs-sys-color-fg-inverse";
|
|
42
|
+
secondary: {
|
|
43
|
+
color: "--cnvs-sys-color-fg-default";
|
|
39
44
|
'&:hover, &.hover': {
|
|
40
|
-
color: "--cnvs-sys-color-fg-
|
|
41
|
-
background:
|
|
42
|
-
};
|
|
43
|
-
'&:focus, &.focus, &:focus-visible': {
|
|
44
|
-
boxShadow: string;
|
|
45
|
+
color: "--cnvs-sys-color-fg-strong";
|
|
46
|
+
background: "var(--cnvs-sys-color-surface-overlay-hover-default, oklch(0.3343 0.0951 253.3 / 0.05))";
|
|
45
47
|
};
|
|
46
48
|
'&:active, &.active': {
|
|
47
|
-
color: "
|
|
48
|
-
background: "var(--cnvs-sys-color-surface-
|
|
49
|
+
color: "--cnvs-sys-color-fg-strong";
|
|
50
|
+
background: "var(--cnvs-sys-color-surface-overlay-pressed-default, oklch(0.3337 0.0688 250.79 / 0.09))";
|
|
49
51
|
};
|
|
50
52
|
};
|
|
51
53
|
};
|
|
54
|
+
linkType: {
|
|
55
|
+
inline: {};
|
|
56
|
+
standalone: {
|
|
57
|
+
textDecoration: string;
|
|
58
|
+
};
|
|
59
|
+
};
|
|
52
60
|
}, {}, {}, never, never>;
|
|
53
61
|
/**
|
|
54
62
|
* `Hyperlink`s should be used when you want to navigate away from the current page or to an anchor
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Hyperlink.d.ts","sourceRoot":"","sources":["../../../../button/lib/Hyperlink.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAC,OAAO,EAAsC,MAAM,6BAA6B,CAAC;AAGzF,MAAM,WAAW,cAAe,SAAQ,OAAO;IAC7C
|
|
1
|
+
{"version":3,"file":"Hyperlink.d.ts","sourceRoot":"","sources":["../../../../button/lib/Hyperlink.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAC,OAAO,EAAsC,MAAM,6BAA6B,CAAC;AAGzF,MAAM,WAAW,cAAe,SAAQ,OAAO;IAC7C;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,CAAC;IAClC;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,QAAQ,GAAG,YAAY,CAAC;IACnC;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBAgE3B,CAAC;AAEH;;;GAGG;AACH,eAAO,MAAM,SAAS,kFAWpB,CAAC"}
|
|
@@ -3,20 +3,23 @@ import { createComponent } from '@workday/canvas-kit-react/common';
|
|
|
3
3
|
import { createStencil, handleCsProp, px2rem } from '@workday/canvas-kit-styling';
|
|
4
4
|
import { system } from '@workday/canvas-tokens-web';
|
|
5
5
|
export const hyperlinkStencil = createStencil({
|
|
6
|
-
base: { name: "
|
|
6
|
+
base: { name: "2y3hxx", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default);text-decoration:underline;color:var(--cnvs-sys-color-fg-link-default);cursor:pointer;border-radius:0.125rem;padding:0 0.125rem;margin:0 -2px;transition:color 0.15s,background-color 0.15s;word-break:break-word;&:hover, &.hover{color:var(--cnvs-sys-color-fg-link-hover);background:var(--cnvs-sys-color-surface-overlay-hover-default, oklch(0.3343 0.0951 253.3 / 0.05));}&:focus, &.focus, &:focus-visible{box-shadow:0 0 0 0.125rem var(--cnvs-sys-color-brand-focus-primary, var(--cnvs-brand-common-focus-outline, oklch(0.6023 0.2032 255.68 / 1)));outline:none;@media (forced-colors: active){outline:solid 0.125rem ButtonBorder;}}&:active, &.active{color:var(--cnvs-sys-color-fg-link-hover);background:var(--cnvs-sys-color-surface-overlay-pressed-default, oklch(0.3337 0.0688 250.79 / 0.09));}" },
|
|
7
7
|
modifiers: {
|
|
8
8
|
variant: {
|
|
9
|
-
inverse: { name: "
|
|
10
|
-
|
|
11
|
-
|
|
9
|
+
inverse: { name: "26brux", styles: "color:var(--cnvs-sys-color-fg-inverse);&:hover, &.hover{color:var(--cnvs-sys-color-fg-inverse);background:rgba(255, 255, 255, 0.1);}&:focus, &.focus, &:focus-visible{box-shadow:0 0 0 0.125rem var(--cnvs-sys-color-fg-inverse);}&:active, &.active{color:var(--cnvs-sys-color-fg-link-hover);background:var(--cnvs-sys-color-surface-navigation, oklch(0.9692 0.0035 248.23 / 1));}" },
|
|
10
|
+
secondary: { name: "2y3z1z", styles: "color:var(--cnvs-sys-color-fg-default);&:hover, &.hover{color:var(--cnvs-sys-color-fg-strong);background:var(--cnvs-sys-color-surface-overlay-hover-default, oklch(0.3343 0.0951 253.3 / 0.05));}&:active, &.active{color:var(--cnvs-sys-color-fg-strong);background:var(--cnvs-sys-color-surface-overlay-pressed-default, oklch(0.3337 0.0688 250.79 / 0.09));}" }
|
|
11
|
+
},
|
|
12
|
+
linkType: {
|
|
13
|
+
inline: { name: "j66do", styles: "" },
|
|
14
|
+
standalone: { name: "1vn5nc", styles: "text-decoration:none;" }
|
|
12
15
|
}
|
|
13
16
|
}
|
|
14
|
-
}, "hyperlink-
|
|
17
|
+
}, "hyperlink-887109");
|
|
15
18
|
/**
|
|
16
19
|
* `Hyperlink`s should be used when you want to navigate away from the current page or to an anchor
|
|
17
20
|
* on the current page.
|
|
18
21
|
*/
|
|
19
22
|
export const Hyperlink = createComponent('a')({
|
|
20
23
|
displayName: 'Hyperlink',
|
|
21
|
-
Component: ({ children, variant, ...elemProps }, ref, Element) => (_jsx(Element, { ref: ref, ...handleCsProp(elemProps, hyperlinkStencil({ variant })), children: children })),
|
|
24
|
+
Component: ({ children, variant, linkType = 'inline', ...elemProps }, ref, Element) => (_jsx(Element, { ref: ref, ...handleCsProp(elemProps, hyperlinkStencil({ variant, linkType })), children: children })),
|
|
22
25
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Controls.d.ts","sourceRoot":"","sources":["../../../../../pagination/lib/Pagination/Controls.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,cAAc,EAAC,MAAM,kCAAkC,CAAC;AAChE,OAAO,EAAC,YAAY,EAAkB,MAAM,kCAAkC,CAAC;
|
|
1
|
+
{"version":3,"file":"Controls.d.ts","sourceRoot":"","sources":["../../../../../pagination/lib/Pagination/Controls.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,cAAc,EAAC,MAAM,kCAAkC,CAAC;AAChE,OAAO,EAAC,YAAY,EAAkB,MAAM,kCAAkC,CAAC;AAc/E,MAAM,WAAW,kBAAmB,SAAQ,YAAY,CAAC,OAAO,cAAc,EAAE,KAAK,CAAC;IACpF,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;CACtD;AAED,MAAM,WAAW,uBAAuB;CAAG;AAE3C,eAAO,MAAM,yBAAyB,iJAMpC,CAAC;AAgBH,eAAO,MAAM,kBAAkB,6FAK7B,CAAC;AAEH,eAAO,MAAM,iBAAiB,2FAyB5B,CAAC;AAEH,eAAO,MAAM,oBAAoB,2FAyB/B,CAAC;AAEH,eAAO,MAAM,gBAAgB,2FAyB3B,CAAC;AAEH,eAAO,MAAM,gBAAgB,2FAyB3B,CAAC"}
|
|
@@ -2,17 +2,18 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
|
2
2
|
import * as React from 'react';
|
|
3
3
|
import { TertiaryButton } from '@workday/canvas-kit-react/button';
|
|
4
4
|
import { createComponent } from '@workday/canvas-kit-react/common';
|
|
5
|
+
import { systemIconStencil } from '@workday/canvas-kit-react/icon';
|
|
5
6
|
import { mergeStyles } from '@workday/canvas-kit-react/layout';
|
|
6
7
|
import { createStencil } from '@workday/canvas-kit-styling';
|
|
7
8
|
import { chevron2xLeftSmallIcon, chevron2xRightSmallIcon, chevronLeftSmallIcon, chevronRightSmallIcon, } from '@workday/canvas-system-icons-web';
|
|
8
|
-
import { system } from '@workday/canvas-tokens-web';
|
|
9
|
+
import { component, system } from '@workday/canvas-tokens-web';
|
|
9
10
|
import { PaginationContext } from './usePaginationModel';
|
|
10
11
|
export const paginationControlsStencil = createStencil({
|
|
11
|
-
base: { name: "
|
|
12
|
-
}, "pagination-controls-
|
|
12
|
+
base: { name: "38bw3z", styles: "box-sizing:border-box;display:flex;gap:var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem));align-items:center;" }
|
|
13
|
+
}, "pagination-controls-87ac05");
|
|
13
14
|
const controlButtonStencil = createStencil({
|
|
14
|
-
base: { name: "
|
|
15
|
-
}, "control-button-
|
|
15
|
+
base: { name: "1x4ggd", styles: "box-sizing:border-box;& > span{--size-svg-bca693:var(--cnvs-component-system-icon-size-xs, var(--cnvs-sys-space-x4, 1rem));--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-strong);}&:dir(rtl){& .wd-icon{transform:scaleX(-1);}}" }
|
|
16
|
+
}, "control-button-3df642");
|
|
16
17
|
export const PaginationControls = createComponent('div')({
|
|
17
18
|
displayName: 'Pagination.Controls',
|
|
18
19
|
Component(elemProps, ref, Element) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Form.d.ts","sourceRoot":"","sources":["../../../../../../pagination/lib/Pagination/GoTo/Form.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAC,SAAS,EAAc,MAAM,kCAAkC,CAAC;AAOxE,MAAM,WAAW,aAAc,SAAQ,SAAS;IAC9C,QAAQ,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,eAAe,CAAC,CAAC;CACpD;AAED,eAAO,MAAM,yBAAyB,
|
|
1
|
+
{"version":3,"file":"Form.d.ts","sourceRoot":"","sources":["../../../../../../pagination/lib/Pagination/GoTo/Form.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAC,SAAS,EAAc,MAAM,kCAAkC,CAAC;AAOxE,MAAM,WAAW,aAAc,SAAQ,SAAS;IAC9C,QAAQ,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,eAAe,CAAC,CAAC;CACpD;AAED,eAAO,MAAM,yBAAyB,iJAUpC,CAAC;AAEH,eAAO,MAAM,QAAQ,oFAiBnB,CAAC"}
|
|
@@ -7,7 +7,7 @@ import { system } from '@workday/canvas-tokens-web';
|
|
|
7
7
|
import { PaginationContext } from '../usePaginationModel';
|
|
8
8
|
import { GoToContext, useGoToForm } from './useGoToForm';
|
|
9
9
|
export const paginationGoToFormStencil = createStencil({
|
|
10
|
-
base: { name: "
|
|
10
|
+
base: { name: "251r03", styles: "box-sizing:border-box;display:flex;align-items:center;gap:var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2, 0.5rem));margin-inline-start:var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem));:dir(rtl){padding-inline:var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));}" }
|
|
11
11
|
}, "pagination-go-to-form-0e353a");
|
|
12
12
|
export const GoToForm = createComponent('form')({
|
|
13
13
|
Component({ children, onSubmit, ...elemProps }, ref, Element) {
|
|
@@ -11,6 +11,6 @@ export const GoToLabel = createComponent('label')({
|
|
|
11
11
|
displayName: 'Pagination.GoToLabel',
|
|
12
12
|
Component({ children, ...elemProps }, ref, Element) {
|
|
13
13
|
const model = React.useContext(PaginationContext);
|
|
14
|
-
return (_jsx(Subtext, { ref: ref, as: Element, size: "
|
|
14
|
+
return (_jsx(Subtext, { ref: ref, as: Element, size: "large", variant: "hint", ...handleCsProp(elemProps, paginationGoToLabelStencil()), children: typeof children === 'function' ? children(model) : children }));
|
|
15
15
|
},
|
|
16
16
|
});
|