@workday/canvas-kit-labs-react 14.0.0-alpha.1206-next.0 → 14.0.0-alpha.1210-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/combobox/lib/AutocompleteList.tsx +5 -4
- package/combobox/lib/Combobox.tsx +18 -0
- package/combobox/lib/Status.tsx +6 -0
- package/dist/commonjs/ai-assistant-ingress-button/lib/AIAssistantIngressButton.js +5 -5
- package/dist/commonjs/combobox/lib/AutocompleteList.d.ts +3 -0
- package/dist/commonjs/combobox/lib/AutocompleteList.d.ts.map +1 -1
- package/dist/commonjs/combobox/lib/AutocompleteList.js +3 -0
- package/dist/commonjs/combobox/lib/Combobox.d.ts +18 -0
- package/dist/commonjs/combobox/lib/Combobox.d.ts.map +1 -1
- package/dist/commonjs/combobox/lib/Combobox.js +12 -0
- package/dist/commonjs/combobox/lib/Status.d.ts +6 -0
- package/dist/commonjs/combobox/lib/Status.d.ts.map +1 -1
- package/dist/commonjs/combobox/lib/Status.js +3 -0
- package/dist/commonjs/search-form/lib/SearchForm.js +14 -14
- package/dist/es6/ai-assistant-ingress-button/lib/AIAssistantIngressButton.js +5 -5
- package/dist/es6/combobox/lib/AutocompleteList.d.ts +3 -0
- package/dist/es6/combobox/lib/AutocompleteList.d.ts.map +1 -1
- package/dist/es6/combobox/lib/AutocompleteList.js +3 -0
- package/dist/es6/combobox/lib/Combobox.d.ts +18 -0
- package/dist/es6/combobox/lib/Combobox.d.ts.map +1 -1
- package/dist/es6/combobox/lib/Combobox.js +12 -0
- package/dist/es6/combobox/lib/Status.d.ts +6 -0
- package/dist/es6/combobox/lib/Status.d.ts.map +1 -1
- package/dist/es6/combobox/lib/Status.js +3 -0
- package/dist/es6/search-form/lib/SearchForm.js +14 -14
- package/package.json +4 -4
|
@@ -45,6 +45,9 @@ interface AutocompleteListProps {
|
|
|
45
45
|
showGroupText: boolean;
|
|
46
46
|
}
|
|
47
47
|
|
|
48
|
+
/**
|
|
49
|
+
* @deprecated ⚠️ `AutocompleteList` in Labs has been deprecated and will be removed in a future major version. Please use [`Combobox` in Main](https://workday.github.io/canvas-kit/?path=/docs/features-combobox--docs) instead.
|
|
50
|
+
*/
|
|
48
51
|
export const AutocompleteList = ({
|
|
49
52
|
autocompleteItems,
|
|
50
53
|
comboboxId,
|
|
@@ -125,10 +128,8 @@ export const AutocompleteList = ({
|
|
|
125
128
|
} else {
|
|
126
129
|
return (
|
|
127
130
|
<Autocomplete {...listBoxProps}>
|
|
128
|
-
{(autocompleteItems as React.ReactElement<
|
|
129
|
-
|
|
130
|
-
>[]).map((listboxItem: React.ReactElement, index: number) =>
|
|
131
|
-
createListItem(listboxItem, index)
|
|
131
|
+
{(autocompleteItems as React.ReactElement<any>[]).map(
|
|
132
|
+
(listboxItem: React.ReactElement, index: number) => createListItem(listboxItem, index)
|
|
132
133
|
)}
|
|
133
134
|
</Autocomplete>
|
|
134
135
|
);
|
|
@@ -17,6 +17,9 @@ import flatten from 'lodash.flatten';
|
|
|
17
17
|
import {AutocompleteList} from './AutocompleteList';
|
|
18
18
|
import {Status} from './Status';
|
|
19
19
|
|
|
20
|
+
/**
|
|
21
|
+
* @deprecated ⚠️ `ComboBoxMenuItemGroup` in Labs has been deprecated and will be removed in a future major version. Please use [`Combobox` in Main](https://workday.github.io/canvas-kit/?path=/docs/features-combobox--docs) instead.
|
|
22
|
+
*/
|
|
20
23
|
export interface ComboBoxMenuItemGroup {
|
|
21
24
|
// A non intractable header that logically separates autocomplete items
|
|
22
25
|
header: React.ReactElement<any>;
|
|
@@ -24,6 +27,9 @@ export interface ComboBoxMenuItemGroup {
|
|
|
24
27
|
items: React.ReactElement<any>[];
|
|
25
28
|
}
|
|
26
29
|
|
|
30
|
+
/**
|
|
31
|
+
* @deprecated ⚠️ `ComboboxProps` in Labs has been deprecated and will be removed in a future major version. Please use [`Combobox` in Main](https://workday.github.io/canvas-kit/?path=/docs/features-combobox--docs) instead.
|
|
32
|
+
*/
|
|
27
33
|
export interface ComboboxProps extends GrowthBehavior, React.HTMLAttributes<HTMLElement> {
|
|
28
34
|
/**
|
|
29
35
|
* The TextInput child of the Combobox.
|
|
@@ -132,11 +138,20 @@ const ResetButton = styled(TertiaryButton, {
|
|
|
132
138
|
})
|
|
133
139
|
);
|
|
134
140
|
|
|
141
|
+
/**
|
|
142
|
+
* @deprecated ⚠️ `listBoxIdPart` in Labs has been deprecated and will be removed in a future major version. Please use [`Combobox` in Main](https://workday.github.io/canvas-kit/?path=/docs/features-combobox--docs) instead.
|
|
143
|
+
*/
|
|
135
144
|
export const listBoxIdPart = `listbox`;
|
|
136
145
|
const optionIdPart = `option`;
|
|
146
|
+
/**
|
|
147
|
+
* @deprecated ⚠️ `getOptionId` in Labs has been deprecated and will be removed in a future major version. Please use [`Combobox` in Main](https://workday.github.io/canvas-kit/?path=/docs/features-combobox--docs) instead.
|
|
148
|
+
*/
|
|
137
149
|
export const getOptionId = (baseId?: string, index?: number) =>
|
|
138
150
|
`${baseId}-${optionIdPart}-${index}`;
|
|
139
151
|
|
|
152
|
+
/**
|
|
153
|
+
* @deprecated ⚠️ `getTextFromElement` in Labs has been deprecated and will be removed in a future major version. Please use [`Combobox` in Main](https://workday.github.io/canvas-kit/?path=/docs/features-combobox--docs) instead.
|
|
154
|
+
*/
|
|
140
155
|
export const getTextFromElement = (children?: React.ReactNode) => {
|
|
141
156
|
let text = '';
|
|
142
157
|
React.Children.map(children, child => {
|
|
@@ -163,6 +178,9 @@ const isValidSingleChild = (child: React.ReactNode) => {
|
|
|
163
178
|
return React.isValidElement(child) && React.Children.only(child);
|
|
164
179
|
};
|
|
165
180
|
|
|
181
|
+
/**
|
|
182
|
+
* @deprecated ⚠️ `Combobox` in Labs has been deprecated and will be removed in a future major version. Please use [`Combobox` in Main](https://workday.github.io/canvas-kit/?path=/docs/features-combobox--docs) instead.
|
|
183
|
+
*/
|
|
166
184
|
export const Combobox = ({
|
|
167
185
|
autocompleteItems,
|
|
168
186
|
children,
|
package/combobox/lib/Status.tsx
CHANGED
|
@@ -2,6 +2,9 @@ import {useState, useEffect} from 'react';
|
|
|
2
2
|
import styled from '@emotion/styled';
|
|
3
3
|
import {accessibleHide} from '@workday/canvas-kit-react/common';
|
|
4
4
|
|
|
5
|
+
/**
|
|
6
|
+
* @deprecated ⚠️ `StatusProps` in Labs has been deprecated and will be removed in a future major version. Please use [`Combobox` in Main](https://workday.github.io/canvas-kit/?path=/docs/features-combobox--docs) instead.
|
|
7
|
+
*/
|
|
5
8
|
export interface StatusProps {
|
|
6
9
|
ariaLive?: 'polite' | 'assertive' | 'off';
|
|
7
10
|
role?: 'log' | 'status' | 'alert' | 'progressbar' | 'marquee' | 'timer';
|
|
@@ -13,6 +16,9 @@ export interface StatusProps {
|
|
|
13
16
|
|
|
14
17
|
const Container = styled('div')(accessibleHide);
|
|
15
18
|
|
|
19
|
+
/**
|
|
20
|
+
* @deprecated ⚠️ `Status` in Labs has been deprecated and will be removed in a future major version. Please use [`Combobox` in Main](https://workday.github.io/canvas-kit/?path=/docs/features-combobox--docs) instead.
|
|
21
|
+
*/
|
|
16
22
|
export const Status = ({
|
|
17
23
|
ariaLive = 'polite',
|
|
18
24
|
role = 'status',
|
|
@@ -26,20 +26,20 @@ const glowHappyHour = canvas_tokens_web_1.base.orange400; //'#FD7E00';
|
|
|
26
26
|
const glowThumbtack = canvas_tokens_web_1.base.coral500; //'#FC5B05';
|
|
27
27
|
exports.AIAssistantIngressButtonStencil = (0, canvas_kit_styling_1.createStencil)({
|
|
28
28
|
extends: button_1.buttonStencil,
|
|
29
|
-
base: { name: "
|
|
29
|
+
base: { name: "18pjyo", styles: "box-sizing:border-box;--background-button-65cb05:var(--cnvs-sys-color-bg-ai-strongest);border-radius:var(--cnvs-sys-shape-round);height:calc(var(--cnvs-sys-space-x10) + var(--cnvs-sys-space-x1));width:calc(var(--cnvs-sys-space-x10) + var(--cnvs-sys-space-x1));transition:box-shadow 300ms ease-out, background 300ms ease-out;.wd-icon-ai-assistant-ingress-button{.wd-icon-fill{transition:fill 300ms ease-out;}> linearGradient > stop{transition:300ms ease-out;stop-color:var(--cnvs-sys-color-fg-inverse);}}&:is(:hover, .hover):not(:disabled, .disabled){.wd-icon-ai-assistant-ingress-button{linearGradient > stop:first-child{stop-color:var(--cnvs-base-palette-red-200);}linearGradient > stop:nth-child(2){stop-color:var(--cnvs-base-palette-orange-200);}linearGradient > stop:nth-child(3){stop-color:var(--cnvs-base-palette-orange-200);}linearGradient > stop:nth-child(4){stop-color:var(--cnvs-base-palette-amber-200);}linearGradient > stop:nth-child(5){stop-color:var(--cnvs-base-palette-amber-300);}}}&:disabled, &:disabled:active, &.disabled{opacity:var(--cnvs-sys-opacity-disabled);}&:is(:focus-visible, .focus):not(:disabled, .disabled){box-shadow:0 0 0 0px var(--cnvs-sys-color-border-inverse, rgba(255,255,255,1)), 0 0 0 2px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));}" },
|
|
30
30
|
modifiers: {
|
|
31
31
|
variant: {
|
|
32
|
-
inverse: { name: "
|
|
32
|
+
inverse: { name: "2pfa2e", styles: "--background-button-65cb05:var(--cnvs-sys-color-bg-default);.wd-icon-ai-assistant-ingress-button{.wd-icon-fill{transition:fill 300ms ease-out;}> linearGradient > stop{transition:300ms ease-out;stop-color:var(--cnvs-sys-color-fg-ai);}}&:is(:hover, .hover):not(:disabled, .disabled){.wd-icon-ai-assistant-ingress-button{linearGradient > stop:first-child{stop-color:var(--cnvs-base-palette-red-200);}linearGradient > stop:nth-child(2){stop-color:var(--cnvs-base-palette-orange-200);}linearGradient > stop:nth-child(3){stop-color:var(--cnvs-base-palette-orange-200);}linearGradient > stop:nth-child(4){stop-color:var(--cnvs-base-palette-amber-200);}linearGradient > stop:nth-child(5){stop-color:var(--cnvs-base-palette-amber-300);}}}&:is(:focus-visible, .focus):not(:disabled, .disabled){box-shadow:0 0 0 0px var(--cnvs-sys-color-border-inverse, rgba(255,255,255,1)), 0 0 0 2px var(--cnvs-sys-color-fg-inverse);border:2px solid var(--cnvs-sys-color-border-ai) ;}" }
|
|
33
33
|
},
|
|
34
34
|
toggled: {
|
|
35
|
-
true: { name: "
|
|
36
|
-
false: { name: "
|
|
35
|
+
true: { name: "3s1rc", styles: "--background-button-65cb05:var(--cnvs-sys-color-bg-default);transition:box-shadow 300ms ease-out, background 300ms ease-out;box-shadow:0px 0px 4.9px 0px var(--cnvs-base-palette-magenta-200), 0px 0px 0.98px 0px var(--cnvs-base-palette-amber-100), 0px 0px 1.96px 0px var(--cnvs-base-palette-amber-300), 0px 0px 2.94px 0px var(--cnvs-base-palette-amber-300), 0px 0px 4.9px 0px var(--cnvs-base-palette-orange-400), 0px 0px 7.36px 0px var(--cnvs-base-palette-coral-500), 0px 0px 9.81px 0px var(--cnvs-base-palette-magenta-200), 0px 0px 12.26px 0px rgba(255, 194, 253, 0.50);.wd-icon-ai-assistant-ingress-button{.wd-icon-fill{transition:fill 300ms ease-out;}> linearGradient > stop{transition:300ms ease-out;stop-color:var(--cnvs-sys-color-fg-ai);}}> linearGradient > stop{transition:300ms ease-out;stop-color:var(--cnvs-sys-color-fg-ai);}&:is(:focus-visible, .focus):not(:disabled, .disabled){box-shadow:0 0 0 2px var(--cnvs-sys-color-border-inverse, rgba(255,255,255,1)), 0 0 0 4px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));border:1px solid var(--cnvs-sys-color-border-container) ;}" },
|
|
36
|
+
false: { name: "22893x", styles: "transition:box-shadow 300ms ease-out, background 300ms ease-out;" }
|
|
37
37
|
}
|
|
38
38
|
},
|
|
39
39
|
compound: [
|
|
40
40
|
{
|
|
41
41
|
modifiers: { toggled: true, variant: 'inverse' },
|
|
42
|
-
styles: { name: "
|
|
42
|
+
styles: { name: "1ibu72", styles: "--background-button-65cb05:var(--cnvs-sys-color-bg-ai-strongest);.wd-icon-ai-assistant-ingress-button{.wd-icon-fill{transition:fill 300ms ease-out;}> linearGradient > stop{transition:300ms ease-out;stop-color:var(--cnvs-sys-color-fg-inverse);}}&:is(:focus-visible, .focus):not(:disabled, .disabled){box-shadow:0 0 0 0px var(--cnvs-sys-color-border-inverse, rgba(255,255,255,1)), 0 0 0 2px var(--cnvs-sys-color-fg-inverse);border:none;}" }
|
|
43
43
|
}
|
|
44
44
|
]
|
|
45
45
|
}, "a-i-assistant-ingress-button-9a9b1c");
|
|
@@ -26,6 +26,9 @@ interface AutocompleteListProps {
|
|
|
26
26
|
*/
|
|
27
27
|
showGroupText: boolean;
|
|
28
28
|
}
|
|
29
|
+
/**
|
|
30
|
+
* @deprecated ⚠️ `AutocompleteList` in Labs has been deprecated and will be removed in a future major version. Please use [`Combobox` in Main](https://workday.github.io/canvas-kit/?path=/docs/features-combobox--docs) instead.
|
|
31
|
+
*/
|
|
29
32
|
export declare const AutocompleteList: ({ autocompleteItems, comboboxId, selectedIndex, handleAutocompleteClick, labelId, showGroupText, }: AutocompleteListProps) => import("react/jsx-runtime").JSX.Element | null;
|
|
30
33
|
export {};
|
|
31
34
|
//# sourceMappingURL=AutocompleteList.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AutocompleteList.d.ts","sourceRoot":"","sources":["../../../../combobox/lib/AutocompleteList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAIhD,OAAO,EAAC,qBAAqB,EAAiD,MAAM,YAAY,CAAC;AAYjG,UAAU,qBAAqB;IAC7B;;OAEG;IACH,iBAAiB,EAAE,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,EAAE,GAAG,qBAAqB,EAAE,CAAC;IACvE;;OAEG;IACH,aAAa,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B;;OAEG;IACH,uBAAuB,EAAE,CACvB,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,EAAE,KAAK,CAAC,EAC3C,aAAa,EAAE,GAAG,KACf,IAAI,CAAC;IACV;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,UAAU,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,aAAa,EAAE,OAAO,CAAC;CACxB;AAED,eAAO,MAAM,gBAAgB,uGAO1B,qBAAqB,
|
|
1
|
+
{"version":3,"file":"AutocompleteList.d.ts","sourceRoot":"","sources":["../../../../combobox/lib/AutocompleteList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAIhD,OAAO,EAAC,qBAAqB,EAAiD,MAAM,YAAY,CAAC;AAYjG,UAAU,qBAAqB;IAC7B;;OAEG;IACH,iBAAiB,EAAE,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,EAAE,GAAG,qBAAqB,EAAE,CAAC;IACvE;;OAEG;IACH,aAAa,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B;;OAEG;IACH,uBAAuB,EAAE,CACvB,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,EAAE,KAAK,CAAC,EAC3C,aAAa,EAAE,GAAG,KACf,IAAI,CAAC;IACV;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,UAAU,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,aAAa,EAAE,OAAO,CAAC;CACxB;AAED;;GAEG;AACH,eAAO,MAAM,gBAAgB,uGAO1B,qBAAqB,mDA+EvB,CAAC"}
|
|
@@ -41,6 +41,9 @@ const Autocomplete = (0, styled_1.default)('ul')({
|
|
|
41
41
|
padding: `${tokens_1.space.xxs} 0`,
|
|
42
42
|
});
|
|
43
43
|
const AccessibleHide = (0, styled_1.default)('span')(common_1.accessibleHide);
|
|
44
|
+
/**
|
|
45
|
+
* @deprecated ⚠️ `AutocompleteList` in Labs has been deprecated and will be removed in a future major version. Please use [`Combobox` in Main](https://workday.github.io/canvas-kit/?path=/docs/features-combobox--docs) instead.
|
|
46
|
+
*/
|
|
44
47
|
const AutocompleteList = ({ autocompleteItems, comboboxId, selectedIndex, handleAutocompleteClick, labelId, showGroupText, }) => {
|
|
45
48
|
const [randomComponentId] = (0, react_1.useState)(common_1.generateUniqueId); // https://codesandbox.io/s/p2ndq
|
|
46
49
|
const componentId = comboboxId || randomComponentId;
|
|
@@ -2,10 +2,16 @@ import React from 'react';
|
|
|
2
2
|
import { GrowthBehavior } from '@workday/canvas-kit-react/common';
|
|
3
3
|
import { TertiaryButtonProps } from '@workday/canvas-kit-react/button';
|
|
4
4
|
import { TextInputProps } from '@workday/canvas-kit-react/text-input';
|
|
5
|
+
/**
|
|
6
|
+
* @deprecated ⚠️ `ComboBoxMenuItemGroup` in Labs has been deprecated and will be removed in a future major version. Please use [`Combobox` in Main](https://workday.github.io/canvas-kit/?path=/docs/features-combobox--docs) instead.
|
|
7
|
+
*/
|
|
5
8
|
export interface ComboBoxMenuItemGroup {
|
|
6
9
|
header: React.ReactElement<any>;
|
|
7
10
|
items: React.ReactElement<any>[];
|
|
8
11
|
}
|
|
12
|
+
/**
|
|
13
|
+
* @deprecated ⚠️ `ComboboxProps` in Labs has been deprecated and will be removed in a future major version. Please use [`Combobox` in Main](https://workday.github.io/canvas-kit/?path=/docs/features-combobox--docs) instead.
|
|
14
|
+
*/
|
|
9
15
|
export interface ComboboxProps extends GrowthBehavior, React.HTMLAttributes<HTMLElement> {
|
|
10
16
|
/**
|
|
11
17
|
* The TextInput child of the Combobox.
|
|
@@ -54,8 +60,20 @@ export interface ComboboxProps extends GrowthBehavior, React.HTMLAttributes<HTML
|
|
|
54
60
|
*/
|
|
55
61
|
getStatusText?: (listCount: number) => string;
|
|
56
62
|
}
|
|
63
|
+
/**
|
|
64
|
+
* @deprecated ⚠️ `listBoxIdPart` in Labs has been deprecated and will be removed in a future major version. Please use [`Combobox` in Main](https://workday.github.io/canvas-kit/?path=/docs/features-combobox--docs) instead.
|
|
65
|
+
*/
|
|
57
66
|
export declare const listBoxIdPart = "listbox";
|
|
67
|
+
/**
|
|
68
|
+
* @deprecated ⚠️ `getOptionId` in Labs has been deprecated and will be removed in a future major version. Please use [`Combobox` in Main](https://workday.github.io/canvas-kit/?path=/docs/features-combobox--docs) instead.
|
|
69
|
+
*/
|
|
58
70
|
export declare const getOptionId: (baseId?: string, index?: number) => string;
|
|
71
|
+
/**
|
|
72
|
+
* @deprecated ⚠️ `getTextFromElement` in Labs has been deprecated and will be removed in a future major version. Please use [`Combobox` in Main](https://workday.github.io/canvas-kit/?path=/docs/features-combobox--docs) instead.
|
|
73
|
+
*/
|
|
59
74
|
export declare const getTextFromElement: (children?: React.ReactNode) => string;
|
|
75
|
+
/**
|
|
76
|
+
* @deprecated ⚠️ `Combobox` in Labs has been deprecated and will be removed in a future major version. Please use [`Combobox` in Main](https://workday.github.io/canvas-kit/?path=/docs/features-combobox--docs) instead.
|
|
77
|
+
*/
|
|
60
78
|
export declare const Combobox: ({ autocompleteItems, children, grow, initialValue, onChange, onFocus, onBlur, showClearButton, clearButtonVariant, clearButtonAriaLabel, labelId, getStatusText, id, ...elemProps }: ComboboxProps) => import("react/jsx-runtime").JSX.Element;
|
|
61
79
|
//# sourceMappingURL=Combobox.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Combobox.d.ts","sourceRoot":"","sources":["../../../../combobox/lib/Combobox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkE,MAAM,OAAO,CAAC;AAEvF,OAAO,EACL,cAAc,EAMf,MAAM,kCAAkC,CAAC;AAG1C,OAAO,EAAiB,mBAAmB,EAAC,MAAM,kCAAkC,CAAC;AAErF,OAAO,EAAC,cAAc,EAAC,MAAM,sCAAsC,CAAC;AAKpE,MAAM,WAAW,qBAAqB;IAEpC,MAAM,EAAE,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC;IAEhC,KAAK,EAAE,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,EAAE,CAAC;CAClC;AAED,MAAM,WAAW,aAAc,SAAQ,cAAc,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IACtF;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,cAAc,CAAC,CAAC;IAC7C;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,kBAAkB,CAAC,EAAE,mBAAmB,CAAC,SAAS,CAAC,CAAC;IACpD;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;OAGG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B;;OAEG;IACH,iBAAiB,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,EAAE,GAAG,qBAAqB,EAAE,CAAC;IACxE;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC5D;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAClC;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IACjC;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,MAAM,CAAC;CAC/C;AA6DD,eAAO,MAAM,aAAa,YAAY,CAAC;AAEvC,eAAO,MAAM,WAAW,YAAa,MAAM,UAAU,MAAM,WACrB,CAAC;AAEvC,eAAO,MAAM,kBAAkB,cAAe,MAAM,SAAS,WAc5D,CAAC;AAYF,eAAO,MAAM,QAAQ,wLAelB,aAAa,4CAuTf,CAAC"}
|
|
1
|
+
{"version":3,"file":"Combobox.d.ts","sourceRoot":"","sources":["../../../../combobox/lib/Combobox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkE,MAAM,OAAO,CAAC;AAEvF,OAAO,EACL,cAAc,EAMf,MAAM,kCAAkC,CAAC;AAG1C,OAAO,EAAiB,mBAAmB,EAAC,MAAM,kCAAkC,CAAC;AAErF,OAAO,EAAC,cAAc,EAAC,MAAM,sCAAsC,CAAC;AAKpE;;GAEG;AACH,MAAM,WAAW,qBAAqB;IAEpC,MAAM,EAAE,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC;IAEhC,KAAK,EAAE,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,EAAE,CAAC;CAClC;AAED;;GAEG;AACH,MAAM,WAAW,aAAc,SAAQ,cAAc,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IACtF;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,cAAc,CAAC,CAAC;IAC7C;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,kBAAkB,CAAC,EAAE,mBAAmB,CAAC,SAAS,CAAC,CAAC;IACpD;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;OAGG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B;;OAEG;IACH,iBAAiB,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,EAAE,GAAG,qBAAqB,EAAE,CAAC;IACxE;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC5D;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAClC;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IACjC;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,MAAM,CAAC;CAC/C;AA6DD;;GAEG;AACH,eAAO,MAAM,aAAa,YAAY,CAAC;AAEvC;;GAEG;AACH,eAAO,MAAM,WAAW,YAAa,MAAM,UAAU,MAAM,WACrB,CAAC;AAEvC;;GAEG;AACH,eAAO,MAAM,kBAAkB,cAAe,MAAM,SAAS,WAc5D,CAAC;AAYF;;GAEG;AACH,eAAO,MAAM,QAAQ,wLAelB,aAAa,4CAuTf,CAAC"}
|
|
@@ -86,10 +86,19 @@ const ResetButton = (0, common_1.styled)(button_1.TertiaryButton, {
|
|
|
86
86
|
visibility: shouldShow ? 'visible' : 'hidden',
|
|
87
87
|
opacity: shouldShow ? 1 : 0,
|
|
88
88
|
}));
|
|
89
|
+
/**
|
|
90
|
+
* @deprecated ⚠️ `listBoxIdPart` in Labs has been deprecated and will be removed in a future major version. Please use [`Combobox` in Main](https://workday.github.io/canvas-kit/?path=/docs/features-combobox--docs) instead.
|
|
91
|
+
*/
|
|
89
92
|
exports.listBoxIdPart = `listbox`;
|
|
90
93
|
const optionIdPart = `option`;
|
|
94
|
+
/**
|
|
95
|
+
* @deprecated ⚠️ `getOptionId` in Labs has been deprecated and will be removed in a future major version. Please use [`Combobox` in Main](https://workday.github.io/canvas-kit/?path=/docs/features-combobox--docs) instead.
|
|
96
|
+
*/
|
|
91
97
|
const getOptionId = (baseId, index) => `${baseId}-${optionIdPart}-${index}`;
|
|
92
98
|
exports.getOptionId = getOptionId;
|
|
99
|
+
/**
|
|
100
|
+
* @deprecated ⚠️ `getTextFromElement` in Labs has been deprecated and will be removed in a future major version. Please use [`Combobox` in Main](https://workday.github.io/canvas-kit/?path=/docs/features-combobox--docs) instead.
|
|
101
|
+
*/
|
|
93
102
|
const getTextFromElement = (children) => {
|
|
94
103
|
let text = '';
|
|
95
104
|
react_1.default.Children.map(children, child => {
|
|
@@ -115,6 +124,9 @@ const buildStatusString = (listCount) => {
|
|
|
115
124
|
const isValidSingleChild = (child) => {
|
|
116
125
|
return react_1.default.isValidElement(child) && react_1.default.Children.only(child);
|
|
117
126
|
};
|
|
127
|
+
/**
|
|
128
|
+
* @deprecated ⚠️ `Combobox` in Labs has been deprecated and will be removed in a future major version. Please use [`Combobox` in Main](https://workday.github.io/canvas-kit/?path=/docs/features-combobox--docs) instead.
|
|
129
|
+
*/
|
|
118
130
|
const Combobox = ({ autocompleteItems, children, grow, initialValue, onChange, onFocus, onBlur, showClearButton, clearButtonVariant = undefined, clearButtonAriaLabel = `Reset Search Input`, labelId, getStatusText = buildStatusString, id, ...elemProps }) => {
|
|
119
131
|
const [isOpened, setIsOpened] = (0, react_1.useState)(false);
|
|
120
132
|
const [value, _setValue] = (0, react_1.useState)(''); // Don't call _setValue directly instead call setInputValue to make sure onChange fires correctly
|
|
@@ -1,3 +1,6 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @deprecated ⚠️ `StatusProps` in Labs has been deprecated and will be removed in a future major version. Please use [`Combobox` in Main](https://workday.github.io/canvas-kit/?path=/docs/features-combobox--docs) instead.
|
|
3
|
+
*/
|
|
1
4
|
export interface StatusProps {
|
|
2
5
|
ariaLive?: 'polite' | 'assertive' | 'off';
|
|
3
6
|
role?: 'log' | 'status' | 'alert' | 'progressbar' | 'marquee' | 'timer';
|
|
@@ -6,5 +9,8 @@ export interface StatusProps {
|
|
|
6
9
|
expireMilliseconds?: number;
|
|
7
10
|
announcementText?: string;
|
|
8
11
|
}
|
|
12
|
+
/**
|
|
13
|
+
* @deprecated ⚠️ `Status` in Labs has been deprecated and will be removed in a future major version. Please use [`Combobox` in Main](https://workday.github.io/canvas-kit/?path=/docs/features-combobox--docs) instead.
|
|
14
|
+
*/
|
|
9
15
|
export declare const Status: ({ ariaLive, role, ariaRelevant, expireMilliseconds, announcementText, ariaAtomic, }: StatusProps) => import("react/jsx-runtime").JSX.Element;
|
|
10
16
|
//# sourceMappingURL=Status.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Status.d.ts","sourceRoot":"","sources":["../../../../combobox/lib/Status.tsx"],"names":[],"mappings":"AAIA,MAAM,WAAW,WAAW;IAC1B,QAAQ,CAAC,EAAE,QAAQ,GAAG,WAAW,GAAG,KAAK,CAAC;IAC1C,IAAI,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,OAAO,GAAG,aAAa,GAAG,SAAS,GAAG,OAAO,CAAC;IACxE,YAAY,CAAC,EAAE,WAAW,GAAG,gBAAgB,GAAG,KAAK,GAAG,UAAU,GAAG,MAAM,CAAC;IAC5E,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAID,eAAO,MAAM,MAAM,wFAOhB,WAAW,4CAuBb,CAAC"}
|
|
1
|
+
{"version":3,"file":"Status.d.ts","sourceRoot":"","sources":["../../../../combobox/lib/Status.tsx"],"names":[],"mappings":"AAIA;;GAEG;AACH,MAAM,WAAW,WAAW;IAC1B,QAAQ,CAAC,EAAE,QAAQ,GAAG,WAAW,GAAG,KAAK,CAAC;IAC1C,IAAI,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,OAAO,GAAG,aAAa,GAAG,SAAS,GAAG,OAAO,CAAC;IACxE,YAAY,CAAC,EAAE,WAAW,GAAG,gBAAgB,GAAG,KAAK,GAAG,UAAU,GAAG,MAAM,CAAC;IAC5E,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAID;;GAEG;AACH,eAAO,MAAM,MAAM,wFAOhB,WAAW,4CAuBb,CAAC"}
|
|
@@ -9,6 +9,9 @@ const react_1 = require("react");
|
|
|
9
9
|
const styled_1 = __importDefault(require("@emotion/styled"));
|
|
10
10
|
const common_1 = require("@workday/canvas-kit-react/common");
|
|
11
11
|
const Container = (0, styled_1.default)('div')(common_1.accessibleHide);
|
|
12
|
+
/**
|
|
13
|
+
* @deprecated ⚠️ `Status` in Labs has been deprecated and will be removed in a future major version. Please use [`Combobox` in Main](https://workday.github.io/canvas-kit/?path=/docs/features-combobox--docs) instead.
|
|
14
|
+
*/
|
|
12
15
|
const Status = ({ ariaLive = 'polite', role = 'status', ariaRelevant = 'additions', expireMilliseconds = 500, announcementText = '', ariaAtomic, }) => {
|
|
13
16
|
const [displayText, setDisplayText] = (0, react_1.useState)(announcementText);
|
|
14
17
|
(0, react_1.useEffect)(() => {
|
|
@@ -77,45 +77,45 @@ exports.searchFormStencil = (0, canvas_kit_styling_1.createStencil)({
|
|
|
77
77
|
searchInput: 'search-form-input',
|
|
78
78
|
closeButtonPart: 'search-form-close-button',
|
|
79
79
|
},
|
|
80
|
-
base: { name: "
|
|
80
|
+
base: { name: "41dqpj", styles: "box-sizing:border-box;position:relative;flex-grow:1;display:flex;align-items:center;margin-inline-start:var(--cnvs-sys-space-x6);min-width:var(--minWidth-search-form-150181, 7.5rem);max-width:var(--maxWidth-search-form-150181, 30rem);[data-part=\"search-form-container\"]{position:relative;display:flex;align-items:center;width:100%;text-align:left;min-height:var(--height-search-form-150181, var(--cnvs-sys-space-x10));}[data-part=\"search-form-combobox\"]{width:100%;}[data-part=\"search-form-close-button\"]{position:absolute;top:0;bottom:0;right:0;margin:auto var(--cnvs-sys-space-x2);z-index:3;display:none;}[data-part=\"search-form-field\"]{width:100%;height:var(--height-search-form-150181, var(--cnvs-sys-space-x10));max-width:var(--maxWidth-search-form-150181, 30rem);margin-bottom:0;display:inline-block;> div{display:block;}}[data-part=\"search-form-submit-search-icon\"], [data-part=\"search-form-open-search-icon\"]{position:absolute;margin:auto var(--cnvs-sys-space-x2);top:0;bottom:0;left:0;padding:0;z-index:3;:dir(rtl){right:0;left:auto;}}[data-part=\"search-form-input\"]{max-width:var(--maxWidth-search-form-150181);min-width:var(--minWidth-search-form-150181);padding-inline-start:calc(var(--cnvs-sys-space-x10) + var(--cnvs-sys-space-x2));padding-inline-end:var(--cnvs-sys-space-x10);background-color:var(--background-search-form-150181, var(--cnvs-sys-color-bg-alt-soft));height:var(--height-search-form-150181, var(--cnvs-sys-space-x10));font-size:var(--cnvs-sys-font-size-subtext-large);box-shadow:var(--boxShadow-search-form-150181);color:var(--color-search-form-150181, var(--cnvs-sys-color-text-default));border:none;-webkit-appearance:none;transition:background-color 120ms, color 120ms, box-shadow 200ms, border-color 200ms;z-index:2;width:100%;&::-webkit-search-cancel-button{display:none;}&::placeholder{color:var(--placeholderColor-search-form-150181, var(--cnvs-sys-color-text-hint));}&:placeholder-shown{text-overflow:ellipsis;}&:hover{background-color:var(--backgroundHover-search-form-150181, var(--background-search-form-150181, var(--cnvs-sys-color-bg-alt-default)));}&:is(:focus-visible, .focus):where(:not([disabled])){background:var(--backgroundFocus-search-form-150181, var(--cnvs-sys-color-bg-alt-soft));color:var(--colorFocus-search-form-150181);border-color:var(--cnvs-brand-common-focus-outline);outline:0.125rem solid transparent;box-shadow:var(--boxShadowFocus-search-form-150181, 0 0 0 0px var(--cnvs-sys-color-bg-default), 0 0 0 2px var(--cnvs-brand-common-focus-outline));::placeholder{color:var(--placeholderColorFocus-search-form-150181);}}}" },
|
|
81
81
|
modifiers: {
|
|
82
82
|
isHiddenSubmitSearchIcon: {
|
|
83
|
-
true: { name: "
|
|
83
|
+
true: { name: "17mryy", styles: "[data-part=\"search-form-submit-search-icon\"]{display:none;}" }
|
|
84
84
|
},
|
|
85
85
|
isHiddenOpenSeachIcon: {
|
|
86
|
-
true: { name: "
|
|
86
|
+
true: { name: "2vd453", styles: "[data-part=\"search-form-open-search-icon\"]{display:none;}" }
|
|
87
87
|
},
|
|
88
88
|
isCollapsed: {
|
|
89
|
-
true: { name: "
|
|
90
|
-
false: { name: "
|
|
89
|
+
true: { name: "12wwma", styles: "top:0;right:0;left:0;bottom:0;margin:0;position:relative;background-color:var(--cnvs-sys-color-bg-transparent-default);transition:background-color 120ms;max-width:calc(var(--cnvs-sys-space-x10) + var(--cnvs-sys-space-x2));min-width:calc(var(--cnvs-sys-space-x10) + var(--cnvs-sys-space-x3));overflow:hidden;z-index:1;[data-part=\"search-form-field\"]{display:none;max-width:100%;}[data-part=\"search-form-submit-search-icon\"], [data-part=\"search-form-open-search-icon\"]{margin:auto var(--cnvs-sys-space-x2);}[data-part=\"search-form-input\"]{font-size:20px;padding-inline-start:calc(var(--cnvs-sys-space-x10) + var(--cnvs-sys-space-x4));padding-inline-end:calc(var(--cnvs-sys-space-x10) + var(--cnvs-sys-space-x4));max-width:none;min-width:0;background-color:var(--cnvs-sys-color-bg-transparent-default);height:var(--height-search-form-150181, var(--cnvs-sys-space-x10));}" },
|
|
90
|
+
false: { name: "3okmtm", styles: "[data-part=\"search-form-field\"]{display:inline-block;}" }
|
|
91
91
|
},
|
|
92
92
|
rightAlign: {
|
|
93
|
-
true: { name: "
|
|
93
|
+
true: { name: "2mb405", styles: "text-align:right;" }
|
|
94
94
|
},
|
|
95
95
|
showForm: {
|
|
96
|
-
true: { name: "
|
|
97
|
-
false: { name: "
|
|
96
|
+
true: { name: "3vjysi", styles: "" },
|
|
97
|
+
false: { name: "1htcmu", styles: "" }
|
|
98
98
|
},
|
|
99
99
|
grow: {
|
|
100
|
-
true: { name: "
|
|
100
|
+
true: { name: "3bt3jv", styles: "max-width:100%;[data-part=\"search-form-field\"], [data-part=\"search-form-input\"]{max-width:100%;}" }
|
|
101
101
|
},
|
|
102
102
|
searchTheme: {
|
|
103
103
|
// Light theme
|
|
104
|
-
light: { name: "
|
|
104
|
+
light: { name: "374yag", styles: "[data-part=\"search-form-input\"]{background:var(--cnvs-sys-color-bg-alt-soft);color:var(--cnvs-sys-color-text-default);::placeholder{color:var(--cnvs-sys-color-text-hint);}&:hover{background:var(--cnvs-sys-color-bg-alt-default);}&:is(:focus-visible, &.focus):where(:not([disabled])){background:var(--cnvs-sys-color-bg-alt-soft);box-shadow:0 0 0 0px var(--cnvs-sys-color-border-inverse), 0 0 0 2px var(--cnvs-brand-common-focus-outline);}}" },
|
|
105
105
|
// Dark theme
|
|
106
|
-
dark: { name: "
|
|
106
|
+
dark: { name: "4b5iko", styles: "[data-part=\"search-form-input\"]{background-color:rgba(0, 0, 0, 0.2);color:var(--cnvs-sys-color-text-inverse);box-shadow:none;::placeholder{color:var(--cnvs-sys-color-text-inverse);}:hover{background:rgba(0, 0, 0, 0.2);}&:is(:focus-visible, &.focus):where(:not([disabled])){background:var(--cnvs-sys-color-bg-default);color:var(--cnvs-sys-color-text-default);::placeholder{color:var(--cnvs-sys-color-text-hint);}box-shadow:none;}}" },
|
|
107
107
|
//Transparent theme
|
|
108
|
-
transparent: { name: "
|
|
108
|
+
transparent: { name: "187x13", styles: "[data-part=\"search-form-input\"]{background:var(--cnvs-sys-color-bg-transparent-default);background-focus:var(--cnvs-sys-color-bg-transparent-default);color:var(--cnvs-sys-color-text-default);color-focus:var(--cnvs-sys-color-text-default);placeholder-color:var(--cnvs-sys-color-text-hint);placeholder-color-focus:var(--cnvs-sys-color-text-hint);box-shadow:none;box-shadow-focus:none;}" }
|
|
109
109
|
}
|
|
110
110
|
},
|
|
111
111
|
compound: [
|
|
112
112
|
{
|
|
113
113
|
modifiers: { showForm: 'true', isCollapsed: 'true' },
|
|
114
|
-
styles: { name: "
|
|
114
|
+
styles: { name: "16wk9u", styles: "position:absolute;background-color:var(--cnvs-sys-color-bg-default);max-width:none;overflow:visible;& [data-part=\"search-form-close-button\"]{display:inline-block;}& [data-part=\"search-form-field\"]{display:inline-block;}& [data-part=\"search-form-input\"]{box-shadow:none;background:var(--cnvs-sys-color-bg-transparent-default);:hover{background:var(--cnvs-sys-color-bg-transparent-default);}&:is(:focus-visible, &.focus):where(:not([disabled])){background:var(--cnvs-sys-color-bg-transparent-default);box-shadow:none;}}" }
|
|
115
115
|
},
|
|
116
116
|
{
|
|
117
117
|
modifiers: { isCollapsed: 'true', showForm: 'true' },
|
|
118
|
-
styles: { name: "
|
|
118
|
+
styles: { name: "2joyej", styles: "& [data-part=\"search-form-field\"]{display:inline-block;}" }
|
|
119
119
|
}
|
|
120
120
|
]
|
|
121
121
|
}, "search-form-150181");
|
|
@@ -23,20 +23,20 @@ const glowHappyHour = base.orange400; //'#FD7E00';
|
|
|
23
23
|
const glowThumbtack = base.coral500; //'#FC5B05';
|
|
24
24
|
export const AIAssistantIngressButtonStencil = createStencil({
|
|
25
25
|
extends: buttonStencil,
|
|
26
|
-
base: { name: "
|
|
26
|
+
base: { name: "18pjyo", styles: "box-sizing:border-box;--background-button-65cb05:var(--cnvs-sys-color-bg-ai-strongest);border-radius:var(--cnvs-sys-shape-round);height:calc(var(--cnvs-sys-space-x10) + var(--cnvs-sys-space-x1));width:calc(var(--cnvs-sys-space-x10) + var(--cnvs-sys-space-x1));transition:box-shadow 300ms ease-out, background 300ms ease-out;.wd-icon-ai-assistant-ingress-button{.wd-icon-fill{transition:fill 300ms ease-out;}> linearGradient > stop{transition:300ms ease-out;stop-color:var(--cnvs-sys-color-fg-inverse);}}&:is(:hover, .hover):not(:disabled, .disabled){.wd-icon-ai-assistant-ingress-button{linearGradient > stop:first-child{stop-color:var(--cnvs-base-palette-red-200);}linearGradient > stop:nth-child(2){stop-color:var(--cnvs-base-palette-orange-200);}linearGradient > stop:nth-child(3){stop-color:var(--cnvs-base-palette-orange-200);}linearGradient > stop:nth-child(4){stop-color:var(--cnvs-base-palette-amber-200);}linearGradient > stop:nth-child(5){stop-color:var(--cnvs-base-palette-amber-300);}}}&:disabled, &:disabled:active, &.disabled{opacity:var(--cnvs-sys-opacity-disabled);}&:is(:focus-visible, .focus):not(:disabled, .disabled){box-shadow:0 0 0 0px var(--cnvs-sys-color-border-inverse, rgba(255,255,255,1)), 0 0 0 2px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));}" },
|
|
27
27
|
modifiers: {
|
|
28
28
|
variant: {
|
|
29
|
-
inverse: { name: "
|
|
29
|
+
inverse: { name: "2pfa2e", styles: "--background-button-65cb05:var(--cnvs-sys-color-bg-default);.wd-icon-ai-assistant-ingress-button{.wd-icon-fill{transition:fill 300ms ease-out;}> linearGradient > stop{transition:300ms ease-out;stop-color:var(--cnvs-sys-color-fg-ai);}}&:is(:hover, .hover):not(:disabled, .disabled){.wd-icon-ai-assistant-ingress-button{linearGradient > stop:first-child{stop-color:var(--cnvs-base-palette-red-200);}linearGradient > stop:nth-child(2){stop-color:var(--cnvs-base-palette-orange-200);}linearGradient > stop:nth-child(3){stop-color:var(--cnvs-base-palette-orange-200);}linearGradient > stop:nth-child(4){stop-color:var(--cnvs-base-palette-amber-200);}linearGradient > stop:nth-child(5){stop-color:var(--cnvs-base-palette-amber-300);}}}&:is(:focus-visible, .focus):not(:disabled, .disabled){box-shadow:0 0 0 0px var(--cnvs-sys-color-border-inverse, rgba(255,255,255,1)), 0 0 0 2px var(--cnvs-sys-color-fg-inverse);border:2px solid var(--cnvs-sys-color-border-ai) ;}" }
|
|
30
30
|
},
|
|
31
31
|
toggled: {
|
|
32
|
-
true: { name: "
|
|
33
|
-
false: { name: "
|
|
32
|
+
true: { name: "3s1rc", styles: "--background-button-65cb05:var(--cnvs-sys-color-bg-default);transition:box-shadow 300ms ease-out, background 300ms ease-out;box-shadow:0px 0px 4.9px 0px var(--cnvs-base-palette-magenta-200), 0px 0px 0.98px 0px var(--cnvs-base-palette-amber-100), 0px 0px 1.96px 0px var(--cnvs-base-palette-amber-300), 0px 0px 2.94px 0px var(--cnvs-base-palette-amber-300), 0px 0px 4.9px 0px var(--cnvs-base-palette-orange-400), 0px 0px 7.36px 0px var(--cnvs-base-palette-coral-500), 0px 0px 9.81px 0px var(--cnvs-base-palette-magenta-200), 0px 0px 12.26px 0px rgba(255, 194, 253, 0.50);.wd-icon-ai-assistant-ingress-button{.wd-icon-fill{transition:fill 300ms ease-out;}> linearGradient > stop{transition:300ms ease-out;stop-color:var(--cnvs-sys-color-fg-ai);}}> linearGradient > stop{transition:300ms ease-out;stop-color:var(--cnvs-sys-color-fg-ai);}&:is(:focus-visible, .focus):not(:disabled, .disabled){box-shadow:0 0 0 2px var(--cnvs-sys-color-border-inverse, rgba(255,255,255,1)), 0 0 0 4px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));border:1px solid var(--cnvs-sys-color-border-container) ;}" },
|
|
33
|
+
false: { name: "22893x", styles: "transition:box-shadow 300ms ease-out, background 300ms ease-out;" }
|
|
34
34
|
}
|
|
35
35
|
},
|
|
36
36
|
compound: [
|
|
37
37
|
{
|
|
38
38
|
modifiers: { toggled: true, variant: 'inverse' },
|
|
39
|
-
styles: { name: "
|
|
39
|
+
styles: { name: "1ibu72", styles: "--background-button-65cb05:var(--cnvs-sys-color-bg-ai-strongest);.wd-icon-ai-assistant-ingress-button{.wd-icon-fill{transition:fill 300ms ease-out;}> linearGradient > stop{transition:300ms ease-out;stop-color:var(--cnvs-sys-color-fg-inverse);}}&:is(:focus-visible, .focus):not(:disabled, .disabled){box-shadow:0 0 0 0px var(--cnvs-sys-color-border-inverse, rgba(255,255,255,1)), 0 0 0 2px var(--cnvs-sys-color-fg-inverse);border:none;}" }
|
|
40
40
|
}
|
|
41
41
|
]
|
|
42
42
|
}, "a-i-assistant-ingress-button-9a9b1c");
|
|
@@ -26,6 +26,9 @@ interface AutocompleteListProps {
|
|
|
26
26
|
*/
|
|
27
27
|
showGroupText: boolean;
|
|
28
28
|
}
|
|
29
|
+
/**
|
|
30
|
+
* @deprecated ⚠️ `AutocompleteList` in Labs has been deprecated and will be removed in a future major version. Please use [`Combobox` in Main](https://workday.github.io/canvas-kit/?path=/docs/features-combobox--docs) instead.
|
|
31
|
+
*/
|
|
29
32
|
export declare const AutocompleteList: ({ autocompleteItems, comboboxId, selectedIndex, handleAutocompleteClick, labelId, showGroupText, }: AutocompleteListProps) => import("react/jsx-runtime").JSX.Element | null;
|
|
30
33
|
export {};
|
|
31
34
|
//# sourceMappingURL=AutocompleteList.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AutocompleteList.d.ts","sourceRoot":"","sources":["../../../../combobox/lib/AutocompleteList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAIhD,OAAO,EAAC,qBAAqB,EAAiD,MAAM,YAAY,CAAC;AAYjG,UAAU,qBAAqB;IAC7B;;OAEG;IACH,iBAAiB,EAAE,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,EAAE,GAAG,qBAAqB,EAAE,CAAC;IACvE;;OAEG;IACH,aAAa,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B;;OAEG;IACH,uBAAuB,EAAE,CACvB,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,EAAE,KAAK,CAAC,EAC3C,aAAa,EAAE,GAAG,KACf,IAAI,CAAC;IACV;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,UAAU,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,aAAa,EAAE,OAAO,CAAC;CACxB;AAED,eAAO,MAAM,gBAAgB,uGAO1B,qBAAqB,
|
|
1
|
+
{"version":3,"file":"AutocompleteList.d.ts","sourceRoot":"","sources":["../../../../combobox/lib/AutocompleteList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAIhD,OAAO,EAAC,qBAAqB,EAAiD,MAAM,YAAY,CAAC;AAYjG,UAAU,qBAAqB;IAC7B;;OAEG;IACH,iBAAiB,EAAE,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,EAAE,GAAG,qBAAqB,EAAE,CAAC;IACvE;;OAEG;IACH,aAAa,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B;;OAEG;IACH,uBAAuB,EAAE,CACvB,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,EAAE,KAAK,CAAC,EAC3C,aAAa,EAAE,GAAG,KACf,IAAI,CAAC;IACV;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,UAAU,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,aAAa,EAAE,OAAO,CAAC;CACxB;AAED;;GAEG;AACH,eAAO,MAAM,gBAAgB,uGAO1B,qBAAqB,mDA+EvB,CAAC"}
|
|
@@ -12,6 +12,9 @@ const Autocomplete = styled('ul')({
|
|
|
12
12
|
padding: `${space.xxs} 0`,
|
|
13
13
|
});
|
|
14
14
|
const AccessibleHide = styled('span')(accessibleHide);
|
|
15
|
+
/**
|
|
16
|
+
* @deprecated ⚠️ `AutocompleteList` in Labs has been deprecated and will be removed in a future major version. Please use [`Combobox` in Main](https://workday.github.io/canvas-kit/?path=/docs/features-combobox--docs) instead.
|
|
17
|
+
*/
|
|
15
18
|
export const AutocompleteList = ({ autocompleteItems, comboboxId, selectedIndex, handleAutocompleteClick, labelId, showGroupText, }) => {
|
|
16
19
|
const [randomComponentId] = useState(generateUniqueId); // https://codesandbox.io/s/p2ndq
|
|
17
20
|
const componentId = comboboxId || randomComponentId;
|
|
@@ -2,10 +2,16 @@ import React from 'react';
|
|
|
2
2
|
import { GrowthBehavior } from '@workday/canvas-kit-react/common';
|
|
3
3
|
import { TertiaryButtonProps } from '@workday/canvas-kit-react/button';
|
|
4
4
|
import { TextInputProps } from '@workday/canvas-kit-react/text-input';
|
|
5
|
+
/**
|
|
6
|
+
* @deprecated ⚠️ `ComboBoxMenuItemGroup` in Labs has been deprecated and will be removed in a future major version. Please use [`Combobox` in Main](https://workday.github.io/canvas-kit/?path=/docs/features-combobox--docs) instead.
|
|
7
|
+
*/
|
|
5
8
|
export interface ComboBoxMenuItemGroup {
|
|
6
9
|
header: React.ReactElement<any>;
|
|
7
10
|
items: React.ReactElement<any>[];
|
|
8
11
|
}
|
|
12
|
+
/**
|
|
13
|
+
* @deprecated ⚠️ `ComboboxProps` in Labs has been deprecated and will be removed in a future major version. Please use [`Combobox` in Main](https://workday.github.io/canvas-kit/?path=/docs/features-combobox--docs) instead.
|
|
14
|
+
*/
|
|
9
15
|
export interface ComboboxProps extends GrowthBehavior, React.HTMLAttributes<HTMLElement> {
|
|
10
16
|
/**
|
|
11
17
|
* The TextInput child of the Combobox.
|
|
@@ -54,8 +60,20 @@ export interface ComboboxProps extends GrowthBehavior, React.HTMLAttributes<HTML
|
|
|
54
60
|
*/
|
|
55
61
|
getStatusText?: (listCount: number) => string;
|
|
56
62
|
}
|
|
63
|
+
/**
|
|
64
|
+
* @deprecated ⚠️ `listBoxIdPart` in Labs has been deprecated and will be removed in a future major version. Please use [`Combobox` in Main](https://workday.github.io/canvas-kit/?path=/docs/features-combobox--docs) instead.
|
|
65
|
+
*/
|
|
57
66
|
export declare const listBoxIdPart = "listbox";
|
|
67
|
+
/**
|
|
68
|
+
* @deprecated ⚠️ `getOptionId` in Labs has been deprecated and will be removed in a future major version. Please use [`Combobox` in Main](https://workday.github.io/canvas-kit/?path=/docs/features-combobox--docs) instead.
|
|
69
|
+
*/
|
|
58
70
|
export declare const getOptionId: (baseId?: string, index?: number) => string;
|
|
71
|
+
/**
|
|
72
|
+
* @deprecated ⚠️ `getTextFromElement` in Labs has been deprecated and will be removed in a future major version. Please use [`Combobox` in Main](https://workday.github.io/canvas-kit/?path=/docs/features-combobox--docs) instead.
|
|
73
|
+
*/
|
|
59
74
|
export declare const getTextFromElement: (children?: React.ReactNode) => string;
|
|
75
|
+
/**
|
|
76
|
+
* @deprecated ⚠️ `Combobox` in Labs has been deprecated and will be removed in a future major version. Please use [`Combobox` in Main](https://workday.github.io/canvas-kit/?path=/docs/features-combobox--docs) instead.
|
|
77
|
+
*/
|
|
60
78
|
export declare const Combobox: ({ autocompleteItems, children, grow, initialValue, onChange, onFocus, onBlur, showClearButton, clearButtonVariant, clearButtonAriaLabel, labelId, getStatusText, id, ...elemProps }: ComboboxProps) => import("react/jsx-runtime").JSX.Element;
|
|
61
79
|
//# sourceMappingURL=Combobox.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Combobox.d.ts","sourceRoot":"","sources":["../../../../combobox/lib/Combobox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkE,MAAM,OAAO,CAAC;AAEvF,OAAO,EACL,cAAc,EAMf,MAAM,kCAAkC,CAAC;AAG1C,OAAO,EAAiB,mBAAmB,EAAC,MAAM,kCAAkC,CAAC;AAErF,OAAO,EAAC,cAAc,EAAC,MAAM,sCAAsC,CAAC;AAKpE,MAAM,WAAW,qBAAqB;IAEpC,MAAM,EAAE,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC;IAEhC,KAAK,EAAE,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,EAAE,CAAC;CAClC;AAED,MAAM,WAAW,aAAc,SAAQ,cAAc,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IACtF;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,cAAc,CAAC,CAAC;IAC7C;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,kBAAkB,CAAC,EAAE,mBAAmB,CAAC,SAAS,CAAC,CAAC;IACpD;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;OAGG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B;;OAEG;IACH,iBAAiB,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,EAAE,GAAG,qBAAqB,EAAE,CAAC;IACxE;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC5D;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAClC;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IACjC;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,MAAM,CAAC;CAC/C;AA6DD,eAAO,MAAM,aAAa,YAAY,CAAC;AAEvC,eAAO,MAAM,WAAW,YAAa,MAAM,UAAU,MAAM,WACrB,CAAC;AAEvC,eAAO,MAAM,kBAAkB,cAAe,MAAM,SAAS,WAc5D,CAAC;AAYF,eAAO,MAAM,QAAQ,wLAelB,aAAa,4CAuTf,CAAC"}
|
|
1
|
+
{"version":3,"file":"Combobox.d.ts","sourceRoot":"","sources":["../../../../combobox/lib/Combobox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkE,MAAM,OAAO,CAAC;AAEvF,OAAO,EACL,cAAc,EAMf,MAAM,kCAAkC,CAAC;AAG1C,OAAO,EAAiB,mBAAmB,EAAC,MAAM,kCAAkC,CAAC;AAErF,OAAO,EAAC,cAAc,EAAC,MAAM,sCAAsC,CAAC;AAKpE;;GAEG;AACH,MAAM,WAAW,qBAAqB;IAEpC,MAAM,EAAE,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC;IAEhC,KAAK,EAAE,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,EAAE,CAAC;CAClC;AAED;;GAEG;AACH,MAAM,WAAW,aAAc,SAAQ,cAAc,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IACtF;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,cAAc,CAAC,CAAC;IAC7C;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,kBAAkB,CAAC,EAAE,mBAAmB,CAAC,SAAS,CAAC,CAAC;IACpD;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;OAGG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B;;OAEG;IACH,iBAAiB,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,EAAE,GAAG,qBAAqB,EAAE,CAAC;IACxE;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC5D;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAClC;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IACjC;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,MAAM,CAAC;CAC/C;AA6DD;;GAEG;AACH,eAAO,MAAM,aAAa,YAAY,CAAC;AAEvC;;GAEG;AACH,eAAO,MAAM,WAAW,YAAa,MAAM,UAAU,MAAM,WACrB,CAAC;AAEvC;;GAEG;AACH,eAAO,MAAM,kBAAkB,cAAe,MAAM,SAAS,WAc5D,CAAC;AAYF;;GAEG;AACH,eAAO,MAAM,QAAQ,wLAelB,aAAa,4CAuTf,CAAC"}
|
|
@@ -57,9 +57,18 @@ const ResetButton = styled(TertiaryButton, {
|
|
|
57
57
|
visibility: shouldShow ? 'visible' : 'hidden',
|
|
58
58
|
opacity: shouldShow ? 1 : 0,
|
|
59
59
|
}));
|
|
60
|
+
/**
|
|
61
|
+
* @deprecated ⚠️ `listBoxIdPart` in Labs has been deprecated and will be removed in a future major version. Please use [`Combobox` in Main](https://workday.github.io/canvas-kit/?path=/docs/features-combobox--docs) instead.
|
|
62
|
+
*/
|
|
60
63
|
export const listBoxIdPart = `listbox`;
|
|
61
64
|
const optionIdPart = `option`;
|
|
65
|
+
/**
|
|
66
|
+
* @deprecated ⚠️ `getOptionId` in Labs has been deprecated and will be removed in a future major version. Please use [`Combobox` in Main](https://workday.github.io/canvas-kit/?path=/docs/features-combobox--docs) instead.
|
|
67
|
+
*/
|
|
62
68
|
export const getOptionId = (baseId, index) => `${baseId}-${optionIdPart}-${index}`;
|
|
69
|
+
/**
|
|
70
|
+
* @deprecated ⚠️ `getTextFromElement` in Labs has been deprecated and will be removed in a future major version. Please use [`Combobox` in Main](https://workday.github.io/canvas-kit/?path=/docs/features-combobox--docs) instead.
|
|
71
|
+
*/
|
|
63
72
|
export const getTextFromElement = (children) => {
|
|
64
73
|
let text = '';
|
|
65
74
|
React.Children.map(children, child => {
|
|
@@ -84,6 +93,9 @@ const buildStatusString = (listCount) => {
|
|
|
84
93
|
const isValidSingleChild = (child) => {
|
|
85
94
|
return React.isValidElement(child) && React.Children.only(child);
|
|
86
95
|
};
|
|
96
|
+
/**
|
|
97
|
+
* @deprecated ⚠️ `Combobox` in Labs has been deprecated and will be removed in a future major version. Please use [`Combobox` in Main](https://workday.github.io/canvas-kit/?path=/docs/features-combobox--docs) instead.
|
|
98
|
+
*/
|
|
87
99
|
export const Combobox = ({ autocompleteItems, children, grow, initialValue, onChange, onFocus, onBlur, showClearButton, clearButtonVariant = undefined, clearButtonAriaLabel = `Reset Search Input`, labelId, getStatusText = buildStatusString, id, ...elemProps }) => {
|
|
88
100
|
const [isOpened, setIsOpened] = useState(false);
|
|
89
101
|
const [value, _setValue] = useState(''); // Don't call _setValue directly instead call setInputValue to make sure onChange fires correctly
|
|
@@ -1,3 +1,6 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @deprecated ⚠️ `StatusProps` in Labs has been deprecated and will be removed in a future major version. Please use [`Combobox` in Main](https://workday.github.io/canvas-kit/?path=/docs/features-combobox--docs) instead.
|
|
3
|
+
*/
|
|
1
4
|
export interface StatusProps {
|
|
2
5
|
ariaLive?: 'polite' | 'assertive' | 'off';
|
|
3
6
|
role?: 'log' | 'status' | 'alert' | 'progressbar' | 'marquee' | 'timer';
|
|
@@ -6,5 +9,8 @@ export interface StatusProps {
|
|
|
6
9
|
expireMilliseconds?: number;
|
|
7
10
|
announcementText?: string;
|
|
8
11
|
}
|
|
12
|
+
/**
|
|
13
|
+
* @deprecated ⚠️ `Status` in Labs has been deprecated and will be removed in a future major version. Please use [`Combobox` in Main](https://workday.github.io/canvas-kit/?path=/docs/features-combobox--docs) instead.
|
|
14
|
+
*/
|
|
9
15
|
export declare const Status: ({ ariaLive, role, ariaRelevant, expireMilliseconds, announcementText, ariaAtomic, }: StatusProps) => import("react/jsx-runtime").JSX.Element;
|
|
10
16
|
//# sourceMappingURL=Status.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Status.d.ts","sourceRoot":"","sources":["../../../../combobox/lib/Status.tsx"],"names":[],"mappings":"AAIA,MAAM,WAAW,WAAW;IAC1B,QAAQ,CAAC,EAAE,QAAQ,GAAG,WAAW,GAAG,KAAK,CAAC;IAC1C,IAAI,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,OAAO,GAAG,aAAa,GAAG,SAAS,GAAG,OAAO,CAAC;IACxE,YAAY,CAAC,EAAE,WAAW,GAAG,gBAAgB,GAAG,KAAK,GAAG,UAAU,GAAG,MAAM,CAAC;IAC5E,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAID,eAAO,MAAM,MAAM,wFAOhB,WAAW,4CAuBb,CAAC"}
|
|
1
|
+
{"version":3,"file":"Status.d.ts","sourceRoot":"","sources":["../../../../combobox/lib/Status.tsx"],"names":[],"mappings":"AAIA;;GAEG;AACH,MAAM,WAAW,WAAW;IAC1B,QAAQ,CAAC,EAAE,QAAQ,GAAG,WAAW,GAAG,KAAK,CAAC;IAC1C,IAAI,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,OAAO,GAAG,aAAa,GAAG,SAAS,GAAG,OAAO,CAAC;IACxE,YAAY,CAAC,EAAE,WAAW,GAAG,gBAAgB,GAAG,KAAK,GAAG,UAAU,GAAG,MAAM,CAAC;IAC5E,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAID;;GAEG;AACH,eAAO,MAAM,MAAM,wFAOhB,WAAW,4CAuBb,CAAC"}
|
|
@@ -3,6 +3,9 @@ import { useState, useEffect } from 'react';
|
|
|
3
3
|
import styled from '@emotion/styled';
|
|
4
4
|
import { accessibleHide } from '@workday/canvas-kit-react/common';
|
|
5
5
|
const Container = styled('div')(accessibleHide);
|
|
6
|
+
/**
|
|
7
|
+
* @deprecated ⚠️ `Status` in Labs has been deprecated and will be removed in a future major version. Please use [`Combobox` in Main](https://workday.github.io/canvas-kit/?path=/docs/features-combobox--docs) instead.
|
|
8
|
+
*/
|
|
6
9
|
export const Status = ({ ariaLive = 'polite', role = 'status', ariaRelevant = 'additions', expireMilliseconds = 500, announcementText = '', ariaAtomic, }) => {
|
|
7
10
|
const [displayText, setDisplayText] = useState(announcementText);
|
|
8
11
|
useEffect(() => {
|
|
@@ -48,45 +48,45 @@ export const searchFormStencil = createStencil({
|
|
|
48
48
|
searchInput: 'search-form-input',
|
|
49
49
|
closeButtonPart: 'search-form-close-button',
|
|
50
50
|
},
|
|
51
|
-
base: { name: "
|
|
51
|
+
base: { name: "41dqpj", styles: "box-sizing:border-box;position:relative;flex-grow:1;display:flex;align-items:center;margin-inline-start:var(--cnvs-sys-space-x6);min-width:var(--minWidth-search-form-150181, 7.5rem);max-width:var(--maxWidth-search-form-150181, 30rem);[data-part=\"search-form-container\"]{position:relative;display:flex;align-items:center;width:100%;text-align:left;min-height:var(--height-search-form-150181, var(--cnvs-sys-space-x10));}[data-part=\"search-form-combobox\"]{width:100%;}[data-part=\"search-form-close-button\"]{position:absolute;top:0;bottom:0;right:0;margin:auto var(--cnvs-sys-space-x2);z-index:3;display:none;}[data-part=\"search-form-field\"]{width:100%;height:var(--height-search-form-150181, var(--cnvs-sys-space-x10));max-width:var(--maxWidth-search-form-150181, 30rem);margin-bottom:0;display:inline-block;> div{display:block;}}[data-part=\"search-form-submit-search-icon\"], [data-part=\"search-form-open-search-icon\"]{position:absolute;margin:auto var(--cnvs-sys-space-x2);top:0;bottom:0;left:0;padding:0;z-index:3;:dir(rtl){right:0;left:auto;}}[data-part=\"search-form-input\"]{max-width:var(--maxWidth-search-form-150181);min-width:var(--minWidth-search-form-150181);padding-inline-start:calc(var(--cnvs-sys-space-x10) + var(--cnvs-sys-space-x2));padding-inline-end:var(--cnvs-sys-space-x10);background-color:var(--background-search-form-150181, var(--cnvs-sys-color-bg-alt-soft));height:var(--height-search-form-150181, var(--cnvs-sys-space-x10));font-size:var(--cnvs-sys-font-size-subtext-large);box-shadow:var(--boxShadow-search-form-150181);color:var(--color-search-form-150181, var(--cnvs-sys-color-text-default));border:none;-webkit-appearance:none;transition:background-color 120ms, color 120ms, box-shadow 200ms, border-color 200ms;z-index:2;width:100%;&::-webkit-search-cancel-button{display:none;}&::placeholder{color:var(--placeholderColor-search-form-150181, var(--cnvs-sys-color-text-hint));}&:placeholder-shown{text-overflow:ellipsis;}&:hover{background-color:var(--backgroundHover-search-form-150181, var(--background-search-form-150181, var(--cnvs-sys-color-bg-alt-default)));}&:is(:focus-visible, .focus):where(:not([disabled])){background:var(--backgroundFocus-search-form-150181, var(--cnvs-sys-color-bg-alt-soft));color:var(--colorFocus-search-form-150181);border-color:var(--cnvs-brand-common-focus-outline);outline:0.125rem solid transparent;box-shadow:var(--boxShadowFocus-search-form-150181, 0 0 0 0px var(--cnvs-sys-color-bg-default), 0 0 0 2px var(--cnvs-brand-common-focus-outline));::placeholder{color:var(--placeholderColorFocus-search-form-150181);}}}" },
|
|
52
52
|
modifiers: {
|
|
53
53
|
isHiddenSubmitSearchIcon: {
|
|
54
|
-
true: { name: "
|
|
54
|
+
true: { name: "17mryy", styles: "[data-part=\"search-form-submit-search-icon\"]{display:none;}" }
|
|
55
55
|
},
|
|
56
56
|
isHiddenOpenSeachIcon: {
|
|
57
|
-
true: { name: "
|
|
57
|
+
true: { name: "2vd453", styles: "[data-part=\"search-form-open-search-icon\"]{display:none;}" }
|
|
58
58
|
},
|
|
59
59
|
isCollapsed: {
|
|
60
|
-
true: { name: "
|
|
61
|
-
false: { name: "
|
|
60
|
+
true: { name: "12wwma", styles: "top:0;right:0;left:0;bottom:0;margin:0;position:relative;background-color:var(--cnvs-sys-color-bg-transparent-default);transition:background-color 120ms;max-width:calc(var(--cnvs-sys-space-x10) + var(--cnvs-sys-space-x2));min-width:calc(var(--cnvs-sys-space-x10) + var(--cnvs-sys-space-x3));overflow:hidden;z-index:1;[data-part=\"search-form-field\"]{display:none;max-width:100%;}[data-part=\"search-form-submit-search-icon\"], [data-part=\"search-form-open-search-icon\"]{margin:auto var(--cnvs-sys-space-x2);}[data-part=\"search-form-input\"]{font-size:20px;padding-inline-start:calc(var(--cnvs-sys-space-x10) + var(--cnvs-sys-space-x4));padding-inline-end:calc(var(--cnvs-sys-space-x10) + var(--cnvs-sys-space-x4));max-width:none;min-width:0;background-color:var(--cnvs-sys-color-bg-transparent-default);height:var(--height-search-form-150181, var(--cnvs-sys-space-x10));}" },
|
|
61
|
+
false: { name: "3okmtm", styles: "[data-part=\"search-form-field\"]{display:inline-block;}" }
|
|
62
62
|
},
|
|
63
63
|
rightAlign: {
|
|
64
|
-
true: { name: "
|
|
64
|
+
true: { name: "2mb405", styles: "text-align:right;" }
|
|
65
65
|
},
|
|
66
66
|
showForm: {
|
|
67
|
-
true: { name: "
|
|
68
|
-
false: { name: "
|
|
67
|
+
true: { name: "3vjysi", styles: "" },
|
|
68
|
+
false: { name: "1htcmu", styles: "" }
|
|
69
69
|
},
|
|
70
70
|
grow: {
|
|
71
|
-
true: { name: "
|
|
71
|
+
true: { name: "3bt3jv", styles: "max-width:100%;[data-part=\"search-form-field\"], [data-part=\"search-form-input\"]{max-width:100%;}" }
|
|
72
72
|
},
|
|
73
73
|
searchTheme: {
|
|
74
74
|
// Light theme
|
|
75
|
-
light: { name: "
|
|
75
|
+
light: { name: "374yag", styles: "[data-part=\"search-form-input\"]{background:var(--cnvs-sys-color-bg-alt-soft);color:var(--cnvs-sys-color-text-default);::placeholder{color:var(--cnvs-sys-color-text-hint);}&:hover{background:var(--cnvs-sys-color-bg-alt-default);}&:is(:focus-visible, &.focus):where(:not([disabled])){background:var(--cnvs-sys-color-bg-alt-soft);box-shadow:0 0 0 0px var(--cnvs-sys-color-border-inverse), 0 0 0 2px var(--cnvs-brand-common-focus-outline);}}" },
|
|
76
76
|
// Dark theme
|
|
77
|
-
dark: { name: "
|
|
77
|
+
dark: { name: "4b5iko", styles: "[data-part=\"search-form-input\"]{background-color:rgba(0, 0, 0, 0.2);color:var(--cnvs-sys-color-text-inverse);box-shadow:none;::placeholder{color:var(--cnvs-sys-color-text-inverse);}:hover{background:rgba(0, 0, 0, 0.2);}&:is(:focus-visible, &.focus):where(:not([disabled])){background:var(--cnvs-sys-color-bg-default);color:var(--cnvs-sys-color-text-default);::placeholder{color:var(--cnvs-sys-color-text-hint);}box-shadow:none;}}" },
|
|
78
78
|
//Transparent theme
|
|
79
|
-
transparent: { name: "
|
|
79
|
+
transparent: { name: "187x13", styles: "[data-part=\"search-form-input\"]{background:var(--cnvs-sys-color-bg-transparent-default);background-focus:var(--cnvs-sys-color-bg-transparent-default);color:var(--cnvs-sys-color-text-default);color-focus:var(--cnvs-sys-color-text-default);placeholder-color:var(--cnvs-sys-color-text-hint);placeholder-color-focus:var(--cnvs-sys-color-text-hint);box-shadow:none;box-shadow-focus:none;}" }
|
|
80
80
|
}
|
|
81
81
|
},
|
|
82
82
|
compound: [
|
|
83
83
|
{
|
|
84
84
|
modifiers: { showForm: 'true', isCollapsed: 'true' },
|
|
85
|
-
styles: { name: "
|
|
85
|
+
styles: { name: "16wk9u", styles: "position:absolute;background-color:var(--cnvs-sys-color-bg-default);max-width:none;overflow:visible;& [data-part=\"search-form-close-button\"]{display:inline-block;}& [data-part=\"search-form-field\"]{display:inline-block;}& [data-part=\"search-form-input\"]{box-shadow:none;background:var(--cnvs-sys-color-bg-transparent-default);:hover{background:var(--cnvs-sys-color-bg-transparent-default);}&:is(:focus-visible, &.focus):where(:not([disabled])){background:var(--cnvs-sys-color-bg-transparent-default);box-shadow:none;}}" }
|
|
86
86
|
},
|
|
87
87
|
{
|
|
88
88
|
modifiers: { isCollapsed: 'true', showForm: 'true' },
|
|
89
|
-
styles: { name: "
|
|
89
|
+
styles: { name: "2joyej", styles: "& [data-part=\"search-form-field\"]{display:inline-block;}" }
|
|
90
90
|
}
|
|
91
91
|
]
|
|
92
92
|
}, "search-form-150181");
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@workday/canvas-kit-labs-react",
|
|
3
|
-
"version": "14.0.0-alpha.
|
|
3
|
+
"version": "14.0.0-alpha.1210-next.0",
|
|
4
4
|
"description": "Canvas Kit Labs is an incubator for new and experimental components. Since we have a rather rigorous process for getting components in at a production level, it can be valuable to make them available earlier while we continuously iterate on the API/functionality. The Labs modules allow us to do that as needed.",
|
|
5
5
|
"author": "Workday, Inc. (https://www.workday.com)",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -46,8 +46,8 @@
|
|
|
46
46
|
"dependencies": {
|
|
47
47
|
"@emotion/react": "^11.7.1",
|
|
48
48
|
"@emotion/styled": "^11.6.0",
|
|
49
|
-
"@workday/canvas-kit-react": "^14.0.0-alpha.
|
|
50
|
-
"@workday/canvas-kit-styling": "^14.0.0-alpha.
|
|
49
|
+
"@workday/canvas-kit-react": "^14.0.0-alpha.1210-next.0",
|
|
50
|
+
"@workday/canvas-kit-styling": "^14.0.0-alpha.1210-next.0",
|
|
51
51
|
"@workday/canvas-system-icons-web": "^3.0.35",
|
|
52
52
|
"@workday/canvas-tokens-web": "3.0.0-alpha.12",
|
|
53
53
|
"@workday/design-assets-types": "^0.2.10",
|
|
@@ -58,5 +58,5 @@
|
|
|
58
58
|
"devDependencies": {
|
|
59
59
|
"@types/lodash.flatten": "^4.4.6"
|
|
60
60
|
},
|
|
61
|
-
"gitHead": "
|
|
61
|
+
"gitHead": "8ef8c7a0b7515a9341550c564b84bed91598e9f7"
|
|
62
62
|
}
|