@workday/canvas-kit-labs-react 7.0.0-alpha.0-next.7 → 7.0.0-alpha.102-next.27
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/README.md +1 -1
- package/combobox/lib/Combobox.tsx +7 -11
- package/dist/commonjs/combobox/lib/Combobox.d.ts +3 -4
- package/dist/commonjs/combobox/lib/Combobox.d.ts.map +1 -1
- package/dist/commonjs/combobox/lib/Combobox.js +4 -7
- package/dist/commonjs/drawer/lib/DrawerHeader.js +2 -2
- package/dist/commonjs/search-form/lib/SearchForm.d.ts +7 -2
- package/dist/commonjs/search-form/lib/SearchForm.d.ts.map +1 -1
- package/dist/commonjs/search-form/lib/SearchForm.js +16 -22
- package/dist/es6/combobox/lib/Combobox.d.ts +3 -4
- package/dist/es6/combobox/lib/Combobox.d.ts.map +1 -1
- package/dist/es6/combobox/lib/Combobox.js +5 -8
- package/dist/es6/drawer/lib/DrawerHeader.js +3 -3
- package/dist/es6/search-form/lib/SearchForm.d.ts +7 -2
- package/dist/es6/search-form/lib/SearchForm.d.ts.map +1 -1
- package/dist/es6/search-form/lib/SearchForm.js +17 -23
- package/drawer/lib/DrawerHeader.tsx +3 -3
- package/package.json +8 -17
- package/search-form/lib/SearchForm.tsx +25 -37
- package/ts3.5/dist/commonjs/combobox/index.d.ts +0 -5
- package/ts3.5/dist/commonjs/combobox/lib/AutocompleteList.d.ts +0 -32
- package/ts3.5/dist/commonjs/combobox/lib/Combobox.d.ts +0 -64
- package/ts3.5/dist/commonjs/combobox/lib/Status.d.ts +0 -11
- package/ts3.5/dist/commonjs/common/index.d.ts +0 -4
- package/ts3.5/dist/commonjs/common/lib/storybook-utils/ComponentStatesTable.d.ts +0 -26
- package/ts3.5/dist/commonjs/common/lib/storybook-utils/permutateProps.d.ts +0 -5
- package/ts3.5/dist/commonjs/common/lib/storybook-utils/propTypes.d.ts +0 -15
- package/ts3.5/dist/commonjs/common/lib/theming/index.d.ts +0 -3
- package/ts3.5/dist/commonjs/common/lib/theming/useThemeRTL.d.ts +0 -36
- package/ts3.5/dist/commonjs/common/lib/theming/useThemedRing.d.ts +0 -11
- package/ts3.5/dist/commonjs/drawer/index.d.ts +0 -6
- package/ts3.5/dist/commonjs/drawer/lib/Drawer.d.ts +0 -49
- package/ts3.5/dist/commonjs/drawer/lib/DrawerHeader.d.ts +0 -38
- package/ts3.5/dist/commonjs/index.d.ts +0 -5
- package/ts3.5/dist/commonjs/search-form/index.d.ts +0 -3
- package/ts3.5/dist/commonjs/search-form/lib/SearchForm.d.ts +0 -103
- package/ts3.5/dist/commonjs/search-form/lib/themes.d.ts +0 -21
- package/ts3.5/dist/es6/combobox/index.d.ts +0 -5
- package/ts3.5/dist/es6/combobox/lib/AutocompleteList.d.ts +0 -32
- package/ts3.5/dist/es6/combobox/lib/Combobox.d.ts +0 -64
- package/ts3.5/dist/es6/combobox/lib/Status.d.ts +0 -11
- package/ts3.5/dist/es6/common/index.d.ts +0 -4
- package/ts3.5/dist/es6/common/lib/storybook-utils/ComponentStatesTable.d.ts +0 -26
- package/ts3.5/dist/es6/common/lib/storybook-utils/permutateProps.d.ts +0 -5
- package/ts3.5/dist/es6/common/lib/storybook-utils/propTypes.d.ts +0 -15
- package/ts3.5/dist/es6/common/lib/theming/index.d.ts +0 -3
- package/ts3.5/dist/es6/common/lib/theming/useThemeRTL.d.ts +0 -36
- package/ts3.5/dist/es6/common/lib/theming/useThemedRing.d.ts +0 -11
- package/ts3.5/dist/es6/drawer/index.d.ts +0 -6
- package/ts3.5/dist/es6/drawer/lib/Drawer.d.ts +0 -49
- package/ts3.5/dist/es6/drawer/lib/DrawerHeader.d.ts +0 -38
- package/ts3.5/dist/es6/index.d.ts +0 -5
- package/ts3.5/dist/es6/search-form/index.d.ts +0 -3
- package/ts3.5/dist/es6/search-form/lib/SearchForm.d.ts +0 -103
- package/ts3.5/dist/es6/search-form/lib/themes.d.ts +0 -21
package/combobox/README.md
CHANGED
|
@@ -68,7 +68,7 @@ const autocompleteCallback = event => console.log('Adjust menu items here')
|
|
|
68
68
|
|
|
69
69
|
---
|
|
70
70
|
|
|
71
|
-
#### `clearButtonVariant:
|
|
71
|
+
#### `clearButtonVariant: TertiaryButtonProps['variant']`
|
|
72
72
|
|
|
73
73
|
> The type of icon button to use for clearing input.
|
|
74
74
|
|
|
@@ -10,7 +10,7 @@ import {
|
|
|
10
10
|
import {space, commonColors, borderRadius} from '@workday/canvas-kit-react/tokens';
|
|
11
11
|
import {MenuItemProps} from '@workday/canvas-kit-preview-react/menu';
|
|
12
12
|
import {Card} from '@workday/canvas-kit-react/card';
|
|
13
|
-
import {
|
|
13
|
+
import {TertiaryButton, TertiaryButtonProps} from '@workday/canvas-kit-react/button';
|
|
14
14
|
import {xSmallIcon} from '@workday/canvas-system-icons-web';
|
|
15
15
|
import {TextInputProps} from '@workday/canvas-kit-react/text-input';
|
|
16
16
|
import flatten from 'lodash.flatten';
|
|
@@ -34,10 +34,9 @@ export interface ComboboxProps extends GrowthBehavior, React.HTMLAttributes<HTML
|
|
|
34
34
|
*/
|
|
35
35
|
initialValue?: string;
|
|
36
36
|
/**
|
|
37
|
-
* The variant of the Combobox clear button.
|
|
38
|
-
* @default IconButton.Variant.Plain
|
|
37
|
+
* The variant of the Combobox clear button. The default is a TertiaryButton
|
|
39
38
|
*/
|
|
40
|
-
clearButtonVariant?:
|
|
39
|
+
clearButtonVariant?: TertiaryButtonProps['variant'];
|
|
41
40
|
/**
|
|
42
41
|
* If true, render the Combobox with a button to clear the text input.
|
|
43
42
|
* @default false
|
|
@@ -113,11 +112,8 @@ const MenuContainer = styled(Card)({
|
|
|
113
112
|
maxHeight: 200,
|
|
114
113
|
});
|
|
115
114
|
|
|
116
|
-
const ResetButton = styled(
|
|
115
|
+
const ResetButton = styled(TertiaryButton)<{shouldShow: boolean}>(
|
|
117
116
|
{
|
|
118
|
-
width: space.l,
|
|
119
|
-
minWidth: space.l,
|
|
120
|
-
height: space.l,
|
|
121
117
|
position: 'absolute',
|
|
122
118
|
margin: `auto ${space.xxxs}`,
|
|
123
119
|
top: 0,
|
|
@@ -173,7 +169,7 @@ const Combobox = ({
|
|
|
173
169
|
onFocus,
|
|
174
170
|
onBlur,
|
|
175
171
|
showClearButton,
|
|
176
|
-
clearButtonVariant =
|
|
172
|
+
clearButtonVariant = undefined,
|
|
177
173
|
clearButtonAriaLabel = `Reset Search Input`,
|
|
178
174
|
labelId,
|
|
179
175
|
getStatusText = buildStatusString,
|
|
@@ -469,14 +465,14 @@ const Combobox = ({
|
|
|
469
465
|
aria-label={clearButtonAriaLabel}
|
|
470
466
|
icon={xSmallIcon}
|
|
471
467
|
variant={clearButtonVariant}
|
|
472
|
-
toggled={undefined}
|
|
473
468
|
onClick={resetSearchInput}
|
|
474
469
|
onBlur={handleBlur}
|
|
470
|
+
size="small"
|
|
475
471
|
type="button"
|
|
476
472
|
/>
|
|
477
473
|
)}
|
|
478
474
|
{showingAutocomplete && autocompleteItems && (
|
|
479
|
-
<MenuContainer padding={space.zero} depth={
|
|
475
|
+
<MenuContainer padding={space.zero} depth={3}>
|
|
480
476
|
<Card.Body>
|
|
481
477
|
<AutocompleteList
|
|
482
478
|
comboboxId={componentId}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { GrowthBehavior } from '@workday/canvas-kit-react/common';
|
|
3
3
|
import { MenuItemProps } from '@workday/canvas-kit-preview-react/menu';
|
|
4
|
-
import {
|
|
4
|
+
import { TertiaryButtonProps } from '@workday/canvas-kit-react/button';
|
|
5
5
|
import { TextInputProps } from '@workday/canvas-kit-react/text-input';
|
|
6
6
|
export interface ComboBoxMenuItemGroup {
|
|
7
7
|
header: React.ReactElement<MenuItemProps>;
|
|
@@ -17,10 +17,9 @@ export interface ComboboxProps extends GrowthBehavior, React.HTMLAttributes<HTML
|
|
|
17
17
|
*/
|
|
18
18
|
initialValue?: string;
|
|
19
19
|
/**
|
|
20
|
-
* The variant of the Combobox clear button.
|
|
21
|
-
* @default IconButton.Variant.Plain
|
|
20
|
+
* The variant of the Combobox clear button. The default is a TertiaryButton
|
|
22
21
|
*/
|
|
23
|
-
clearButtonVariant?:
|
|
22
|
+
clearButtonVariant?: TertiaryButtonProps['variant'];
|
|
24
23
|
/**
|
|
25
24
|
* If true, render the Combobox with a button to clear the text input.
|
|
26
25
|
* @default false
|
|
@@ -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,EAKf,MAAM,kCAAkC,CAAC;AAE1C,OAAO,EAAC,aAAa,EAAC,MAAM,wCAAwC,CAAC;AAErE,OAAO,
|
|
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,EAKf,MAAM,kCAAkC,CAAC;AAE1C,OAAO,EAAC,aAAa,EAAC,MAAM,wCAAwC,CAAC;AAErE,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,aAAa,CAAC,CAAC;IAE1C,KAAK,EAAE,KAAK,CAAC,YAAY,CAAC,aAAa,CAAC,EAAE,CAAC;CAC5C;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,aAAa,CAAC,EAAE,GAAG,qBAAqB,EAAE,CAAC;IAClF;;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;AA0DD,eAAO,MAAM,aAAa,YAAY,CAAC;AAEvC,eAAO,MAAM,WAAW,qEACc,CAAC;AAEvC,eAAO,MAAM,kBAAkB,cAAe,MAAM,SAAS,WAc5D,CAAC;AAYF,QAAA,MAAM,QAAQ,wLAeX,aAAa,gBA0Tf,CAAC;AAEF,eAAe,QAAQ,CAAC"}
|
|
@@ -90,10 +90,7 @@ var MenuContainer = common_1.styled(card_1.Card)({
|
|
|
90
90
|
animation: fadeInKeyframes + " 200ms ease-out",
|
|
91
91
|
maxHeight: 200,
|
|
92
92
|
});
|
|
93
|
-
var ResetButton = common_1.styled(button_1.
|
|
94
|
-
width: tokens_1.space.l,
|
|
95
|
-
minWidth: tokens_1.space.l,
|
|
96
|
-
height: tokens_1.space.l,
|
|
93
|
+
var ResetButton = common_1.styled(button_1.TertiaryButton)({
|
|
97
94
|
position: 'absolute',
|
|
98
95
|
margin: "auto " + tokens_1.space.xxxs,
|
|
99
96
|
top: 0,
|
|
@@ -141,7 +138,7 @@ var isValidSingleChild = function (child) {
|
|
|
141
138
|
return react_1.default.isValidElement(child) && react_1.default.Children.only(child);
|
|
142
139
|
};
|
|
143
140
|
var Combobox = function (_a) {
|
|
144
|
-
var autocompleteItems = _a.autocompleteItems, children = _a.children, grow = _a.grow, initialValue = _a.initialValue, onChange = _a.onChange, onFocus = _a.onFocus, onBlur = _a.onBlur, showClearButton = _a.showClearButton, _b = _a.clearButtonVariant, clearButtonVariant = _b === void 0 ?
|
|
141
|
+
var autocompleteItems = _a.autocompleteItems, children = _a.children, grow = _a.grow, initialValue = _a.initialValue, onChange = _a.onChange, onFocus = _a.onFocus, onBlur = _a.onBlur, showClearButton = _a.showClearButton, _b = _a.clearButtonVariant, clearButtonVariant = _b === void 0 ? undefined : _b, _c = _a.clearButtonAriaLabel, clearButtonAriaLabel = _c === void 0 ? "Reset Search Input" : _c, labelId = _a.labelId, _d = _a.getStatusText, getStatusText = _d === void 0 ? buildStatusString : _d, id = _a.id, elemProps = __rest(_a, ["autocompleteItems", "children", "grow", "initialValue", "onChange", "onFocus", "onBlur", "showClearButton", "clearButtonVariant", "clearButtonAriaLabel", "labelId", "getStatusText", "id"]);
|
|
145
142
|
var _e = react_1.useState(false), isOpened = _e[0], setIsOpened = _e[1];
|
|
146
143
|
var _f = react_1.useState(''), value = _f[0], _setValue = _f[1]; // Don't call _setValue directly instead call setInputValue to make sure onChange fires correctly
|
|
147
144
|
var _g = react_1.useState(false), showingAutocomplete = _g[0], setShowingAutocomplete = _g[1];
|
|
@@ -366,8 +363,8 @@ var Combobox = function (_a) {
|
|
|
366
363
|
return (react_1.default.createElement(Container, __assign({ grow: grow }, elemProps),
|
|
367
364
|
react_1.default.createElement(InputContainer, { ref: comboboxRef },
|
|
368
365
|
isValidSingleChild(children) && react_1.default.Children.map(children, renderChildren),
|
|
369
|
-
showClearButton && (react_1.default.createElement(ResetButton, { shouldShow: !!value, "aria-label": clearButtonAriaLabel, icon: canvas_system_icons_web_1.xSmallIcon, variant: clearButtonVariant,
|
|
370
|
-
showingAutocomplete && autocompleteItems && (react_1.default.createElement(MenuContainer, { padding: tokens_1.space.zero, depth:
|
|
366
|
+
showClearButton && (react_1.default.createElement(ResetButton, { shouldShow: !!value, "aria-label": clearButtonAriaLabel, icon: canvas_system_icons_web_1.xSmallIcon, variant: clearButtonVariant, onClick: resetSearchInput, onBlur: handleBlur, size: "small", type: "button" })),
|
|
367
|
+
showingAutocomplete && autocompleteItems && (react_1.default.createElement(MenuContainer, { padding: tokens_1.space.zero, depth: 3 },
|
|
371
368
|
react_1.default.createElement(card_1.Card.Body, null,
|
|
372
369
|
react_1.default.createElement(AutocompleteList_1.default, { comboboxId: componentId, autocompleteItems: autocompleteItems, selectedIndex: selectedAutocompleteIndex, handleAutocompleteClick: handleAutocompleteClick, labelId: formLabelId, showGroupText: showGroupText }))))),
|
|
373
370
|
react_1.default.createElement(Status_1.default, { announcementText: announcementText })));
|
|
@@ -86,7 +86,7 @@ var HeaderTitle = styled_1.default('h4')(__assign(__assign({}, tokens_1.type.lev
|
|
|
86
86
|
color: inverse ? tokens_1.colors.frenchVanilla100 : tokens_1.typeColors.heading,
|
|
87
87
|
});
|
|
88
88
|
});
|
|
89
|
-
var CloseButton = styled_1.default(button_1.
|
|
89
|
+
var CloseButton = styled_1.default(button_1.TertiaryButton)({
|
|
90
90
|
margin: '-8px',
|
|
91
91
|
});
|
|
92
92
|
var DrawerHeader = /** @class */ (function (_super) {
|
|
@@ -98,7 +98,7 @@ var DrawerHeader = /** @class */ (function (_super) {
|
|
|
98
98
|
var _a = this.props, _b = _a.closeIconAriaLabel, closeIconAriaLabel = _b === void 0 ? 'Close' : _b, _c = _a.headerColor, headerColor = _c === void 0 ? tokens_1.colors.soap100 : _c, _d = _a.borderColor, borderColor = _d === void 0 ? tokens_1.colors.soap500 : _d, _e = _a.inverse, inverse = _e === void 0 ? false : _e, onClose = _a.onClose, title = _a.title, id = _a.id, elemProps = __rest(_a, ["closeIconAriaLabel", "headerColor", "borderColor", "inverse", "onClose", "title", "id"]);
|
|
99
99
|
return (React.createElement(HeaderContainer, __assign({ borderColor: borderColor }, elemProps, { headerColor: headerColor }),
|
|
100
100
|
React.createElement(HeaderTitle, { id: id, inverse: inverse, title: title }, title),
|
|
101
|
-
onClose && closeIconAriaLabel && (React.createElement(CloseButton, { variant: inverse ? 'inverse' :
|
|
101
|
+
onClose && closeIconAriaLabel && (React.createElement(CloseButton, { variant: inverse ? 'inverse' : undefined, onClick: onClose, "aria-label": closeIconAriaLabel, icon: canvas_system_icons_web_1.xIcon }))));
|
|
102
102
|
};
|
|
103
103
|
return DrawerHeader;
|
|
104
104
|
}(React.Component));
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { GrowthBehavior } from '@workday/canvas-kit-react/common';
|
|
3
|
-
import {
|
|
3
|
+
import { TertiaryButtonProps } from '@workday/canvas-kit-react/button';
|
|
4
4
|
import { MenuItemProps } from '@workday/canvas-kit-preview-react/menu';
|
|
5
5
|
import { SearchTheme, SearchThemeAttributes } from './themes';
|
|
6
6
|
export interface SearchFormProps extends GrowthBehavior, React.FormHTMLAttributes<HTMLFormElement> {
|
|
@@ -74,6 +74,11 @@ export interface SearchFormProps extends GrowthBehavior, React.FormHTMLAttribute
|
|
|
74
74
|
* @default 40
|
|
75
75
|
*/
|
|
76
76
|
height?: number;
|
|
77
|
+
/**
|
|
78
|
+
* If true, allow onSubmit being called when input value is empty.
|
|
79
|
+
* @default false
|
|
80
|
+
*/
|
|
81
|
+
allowEmptyStringSearch?: boolean;
|
|
77
82
|
}
|
|
78
83
|
export interface SearchFormState {
|
|
79
84
|
showForm: boolean;
|
|
@@ -88,7 +93,7 @@ export declare class SearchForm extends React.Component<SearchFormProps, SearchF
|
|
|
88
93
|
state: Readonly<SearchFormState>;
|
|
89
94
|
private getTheme;
|
|
90
95
|
private getThemeColors;
|
|
91
|
-
getIconButtonType: () =>
|
|
96
|
+
getIconButtonType: () => TertiaryButtonProps['variant'];
|
|
92
97
|
handleSubmit: (event: React.FormEvent<HTMLFormElement>) => void;
|
|
93
98
|
openCollapsedSearch: () => void;
|
|
94
99
|
closeCollapsedSearch: () => void;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SearchForm.d.ts","sourceRoot":"","sources":["../../../../search-form/lib/SearchForm.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAC,cAAc,EAA2B,MAAM,kCAAkC,CAAC;AAC1F,OAAO,
|
|
1
|
+
{"version":3,"file":"SearchForm.d.ts","sourceRoot":"","sources":["../../../../search-form/lib/SearchForm.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAC,cAAc,EAA2B,MAAM,kCAAkC,CAAC;AAC1F,OAAO,EAAiB,mBAAmB,EAAC,MAAM,kCAAkC,CAAC;AAKrF,OAAO,EAAC,aAAa,EAAC,MAAM,wCAAwC,CAAC;AACrE,OAAO,EAAe,WAAW,EAAE,qBAAqB,EAAC,MAAM,UAAU,CAAC;AAG1E,MAAM,WAAW,eAAgB,SAAQ,cAAc,EAAE,KAAK,CAAC,kBAAkB,CAAC,eAAe,CAAC;IAChG;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,gBAAgB,CAAC,eAAe,CAAC,CAAC;IAClD;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,kBAAkB,CAAC,gBAAgB,CAAC,CAAC;IAC3D;;OAEG;IACH,iBAAiB,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,aAAa,CAAC,EAAE,CAAC;IACxD;;OAEG;IACH,WAAW,CAAC,EAAE,WAAW,GAAG,qBAAqB,CAAC;IAClD;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B;;;OAGG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B;;;OAGG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAC;CAClC;AAED,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAE,OAAO,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,OAAO,CAAC;CACpB;AAsLD,qBAAa,UAAW,SAAQ,KAAK,CAAC,SAAS,CAAC,eAAe,EAAE,eAAe,CAAC;IAC/E,MAAM,CAAC,KAAK,qBAAe;IAE3B,OAAO,CAAC,QAAQ,CAAuC;IACvD,OAAO,CAAC,OAAO,CAAwC;IACvD,OAAO,CAAC,OAAO,CAAsB;IAErC,KAAK,EAAE,QAAQ,CAAC,eAAe,CAAC,CAI9B;IAEF,OAAO,CAAC,QAAQ,CAUd;IAEF,OAAO,CAAC,cAAc,CAMpB;IAEF,iBAAiB,QAAO,mBAAmB,CAAC,SAAS,CAAC,CAOpD;IAEF,YAAY,UAAW,MAAM,SAAS,CAAC,eAAe,CAAC,KAAG,IAAI,CAO5D;IAEF,mBAAmB,QAAO,IAAI,CAI5B;IAEF,oBAAoB,QAAO,IAAI,CAI7B;IAEF,kBAAkB,CAAC,SAAS,EAAE,eAAe,EAAE,SAAS,EAAE,eAAe;IAWzE,UAAU,QAAO,IAAI,CAInB;IAEF,SAAS,QAAO,IAAI,CAIlB;IAEF,WAAW,QAAO,IAAI,CAEpB;IAEF,UAAU,QAAO,IAAI,CAEnB;IAEF,uBAAuB,UAAW,MAAM,WAAW,CAAC,gBAAgB,CAAC,KAAG,IAAI,CAM1E;IAEF,MAAM;CAmGP"}
|
|
@@ -131,26 +131,20 @@ var SearchContainer = common_1.styled('div')({
|
|
|
131
131
|
var SearchCombobox = common_1.styled(combobox_1.Combobox)({
|
|
132
132
|
width: "100%",
|
|
133
133
|
});
|
|
134
|
-
var SearchIcon = common_1.styled(button_1.
|
|
134
|
+
var SearchIcon = common_1.styled(button_1.TertiaryButton)(function (_a) {
|
|
135
135
|
var isCollapsed = _a.isCollapsed, isHidden = _a.isHidden;
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
minWidth: size,
|
|
147
|
-
width: size,
|
|
148
|
-
minHeight: size,
|
|
149
|
-
height: size,
|
|
150
|
-
};
|
|
151
|
-
return __assign({ position: "absolute", margin: isCollapsed ? "auto " + tokens_1.space.xxs : "auto " + tokens_1.space.xxxs, top: 0, bottom: 0, left: 0, padding: 0, zIndex: 3, display: isHidden ? 'none' : 'flex' }, collapseStyles);
|
|
136
|
+
return {
|
|
137
|
+
position: "absolute",
|
|
138
|
+
margin: isCollapsed ? "auto " + tokens_1.space.xxs : "auto " + tokens_1.space.xxxs,
|
|
139
|
+
top: 0,
|
|
140
|
+
bottom: 0,
|
|
141
|
+
left: 0,
|
|
142
|
+
padding: 0,
|
|
143
|
+
zIndex: 3,
|
|
144
|
+
display: isHidden ? 'none' : 'flex',
|
|
145
|
+
};
|
|
152
146
|
});
|
|
153
|
-
var CloseButton = common_1.styled(button_1.
|
|
147
|
+
var CloseButton = common_1.styled(button_1.TertiaryButton)(function (_a) {
|
|
154
148
|
var isCollapsed = _a.isCollapsed, showForm = _a.showForm;
|
|
155
149
|
var collapseStyles = isCollapsed && showForm
|
|
156
150
|
? {
|
|
@@ -246,11 +240,11 @@ var SearchForm = /** @class */ (function (_super) {
|
|
|
246
240
|
background = formCollapsedBackground;
|
|
247
241
|
}
|
|
248
242
|
var isDarkBackground = chroma_js_1.default(background).get('lab.l') < 70;
|
|
249
|
-
return isDarkBackground ? 'inverse' :
|
|
243
|
+
return isDarkBackground ? 'inverse' : undefined;
|
|
250
244
|
};
|
|
251
245
|
_this.handleSubmit = function (event) {
|
|
252
246
|
event.preventDefault();
|
|
253
|
-
if (_this.state.searchQuery.trim()) {
|
|
247
|
+
if (_this.props.allowEmptyStringSearch || _this.state.searchQuery.trim()) {
|
|
254
248
|
_this.props.onSubmit(event);
|
|
255
249
|
}
|
|
256
250
|
else {
|
|
@@ -304,7 +298,7 @@ var SearchForm = /** @class */ (function (_super) {
|
|
|
304
298
|
}
|
|
305
299
|
};
|
|
306
300
|
SearchForm.prototype.render = function () {
|
|
307
|
-
var _a = this.props, _b = _a.clearButtonAriaLabel, clearButtonAriaLabel = _b === void 0 ? 'Reset Search Form' : _b, _c = _a.placeholder, placeholder = _c === void 0 ? 'Search' : _c, _d = _a.inputLabel, inputLabel = _d === void 0 ? 'Search' : _d, _e = _a.submitAriaLabel, submitAriaLabel = _e === void 0 ? 'Search' : _e, _f = _a.openButtonAriaLabel, openButtonAriaLabel = _f === void 0 ? 'Open Search' : _f, _g = _a.closeButtonAriaLabel, closeButtonAriaLabel = _g === void 0 ? 'Cancel' : _g, _h = _a.showClearButton, showClearButton = _h === void 0 ? true : _h, _j = _a.height, height = _j === void 0 ? 40 : _j, grow = _a.grow, onSubmit = _a.onSubmit, isCollapsed = _a.isCollapsed, onInputChange = _a.onInputChange, autocompleteItems = _a.autocompleteItems, initialValue = _a.initialValue, searchTheme = _a.searchTheme, rightAlign = _a.rightAlign, elemProps = __rest(_a, ["clearButtonAriaLabel", "placeholder", "inputLabel", "submitAriaLabel", "openButtonAriaLabel", "closeButtonAriaLabel", "showClearButton", "height", "grow", "onSubmit", "isCollapsed", "onInputChange", "autocompleteItems", "initialValue", "searchTheme", "rightAlign"]);
|
|
301
|
+
var _a = this.props, _b = _a.clearButtonAriaLabel, clearButtonAriaLabel = _b === void 0 ? 'Reset Search Form' : _b, _c = _a.placeholder, placeholder = _c === void 0 ? 'Search' : _c, _d = _a.inputLabel, inputLabel = _d === void 0 ? 'Search' : _d, _e = _a.submitAriaLabel, submitAriaLabel = _e === void 0 ? 'Search' : _e, _f = _a.openButtonAriaLabel, openButtonAriaLabel = _f === void 0 ? 'Open Search' : _f, _g = _a.closeButtonAriaLabel, closeButtonAriaLabel = _g === void 0 ? 'Cancel' : _g, _h = _a.showClearButton, showClearButton = _h === void 0 ? true : _h, _j = _a.height, height = _j === void 0 ? 40 : _j, grow = _a.grow, onSubmit = _a.onSubmit, isCollapsed = _a.isCollapsed, onInputChange = _a.onInputChange, autocompleteItems = _a.autocompleteItems, initialValue = _a.initialValue, searchTheme = _a.searchTheme, rightAlign = _a.rightAlign, _k = _a.allowEmptyStringSearch, allowEmptyStringSearch = _k === void 0 ? false : _k, elemProps = __rest(_a, ["clearButtonAriaLabel", "placeholder", "inputLabel", "submitAriaLabel", "openButtonAriaLabel", "closeButtonAriaLabel", "showClearButton", "height", "grow", "onSubmit", "isCollapsed", "onInputChange", "autocompleteItems", "initialValue", "searchTheme", "rightAlign", "allowEmptyStringSearch"]);
|
|
308
302
|
return (React.createElement(StyledSearchForm, __assign({ role: "search", action: ".", rightAlign: rightAlign, grow: grow, "aria-labelledby": this.labelId, isCollapsed: isCollapsed, onSubmit: this.handleSubmit, showForm: this.state.showForm }, elemProps),
|
|
309
303
|
React.createElement(SearchContainer, { height: height },
|
|
310
304
|
React.createElement(SearchIcon, { "aria-label": submitAriaLabel, icon: canvas_system_icons_web_1.searchIcon, isCollapsed: isCollapsed, variant: this.getIconButtonType(), type: "submit", isHidden: !!isCollapsed && !this.state.showForm }),
|
|
@@ -312,7 +306,7 @@ var SearchForm = /** @class */ (function (_super) {
|
|
|
312
306
|
React.createElement(SearchField, { grow: grow, id: this.labelId, inputId: "input-" + this.labelId, label: inputLabel, labelPosition: form_field_1.FormFieldLabelPosition.Hidden, useFieldset: false, isCollapsed: isCollapsed, showForm: this.state.showForm, height: height },
|
|
313
307
|
React.createElement(SearchCombobox, { initialValue: initialValue, clearButtonVariant: this.getIconButtonType(), autocompleteItems: autocompleteItems, onChange: this.handleSearchInputChange, onFocus: this.handleFocus, onBlur: this.handleBlur, showClearButton: !isCollapsed && showClearButton, clearButtonAriaLabel: clearButtonAriaLabel, labelId: this.labelId },
|
|
314
308
|
React.createElement(SearchInput, { ref: this.inputRef, value: this.state.searchQuery, placeholder: placeholder, isCollapsed: isCollapsed, inputColors: this.getThemeColors(), height: height, name: "search", autoComplete: "off" }))),
|
|
315
|
-
React.createElement(CloseButton, { "aria-label": closeButtonAriaLabel, icon: canvas_system_icons_web_1.xIcon, isCollapsed: isCollapsed,
|
|
309
|
+
React.createElement(CloseButton, { "aria-label": closeButtonAriaLabel, icon: canvas_system_icons_web_1.xIcon, isCollapsed: isCollapsed, showForm: this.state.showForm, onClick: this.closeCollapsedSearch, type: "button" }))));
|
|
316
310
|
};
|
|
317
311
|
SearchForm.Theme = themes_1.SearchTheme;
|
|
318
312
|
return SearchForm;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { GrowthBehavior } from '@workday/canvas-kit-react/common';
|
|
3
3
|
import { MenuItemProps } from '@workday/canvas-kit-preview-react/menu';
|
|
4
|
-
import {
|
|
4
|
+
import { TertiaryButtonProps } from '@workday/canvas-kit-react/button';
|
|
5
5
|
import { TextInputProps } from '@workday/canvas-kit-react/text-input';
|
|
6
6
|
export interface ComboBoxMenuItemGroup {
|
|
7
7
|
header: React.ReactElement<MenuItemProps>;
|
|
@@ -17,10 +17,9 @@ export interface ComboboxProps extends GrowthBehavior, React.HTMLAttributes<HTML
|
|
|
17
17
|
*/
|
|
18
18
|
initialValue?: string;
|
|
19
19
|
/**
|
|
20
|
-
* The variant of the Combobox clear button.
|
|
21
|
-
* @default IconButton.Variant.Plain
|
|
20
|
+
* The variant of the Combobox clear button. The default is a TertiaryButton
|
|
22
21
|
*/
|
|
23
|
-
clearButtonVariant?:
|
|
22
|
+
clearButtonVariant?: TertiaryButtonProps['variant'];
|
|
24
23
|
/**
|
|
25
24
|
* If true, render the Combobox with a button to clear the text input.
|
|
26
25
|
* @default false
|
|
@@ -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,EAKf,MAAM,kCAAkC,CAAC;AAE1C,OAAO,EAAC,aAAa,EAAC,MAAM,wCAAwC,CAAC;AAErE,OAAO,
|
|
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,EAKf,MAAM,kCAAkC,CAAC;AAE1C,OAAO,EAAC,aAAa,EAAC,MAAM,wCAAwC,CAAC;AAErE,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,aAAa,CAAC,CAAC;IAE1C,KAAK,EAAE,KAAK,CAAC,YAAY,CAAC,aAAa,CAAC,EAAE,CAAC;CAC5C;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,aAAa,CAAC,EAAE,GAAG,qBAAqB,EAAE,CAAC;IAClF;;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;AA0DD,eAAO,MAAM,aAAa,YAAY,CAAC;AAEvC,eAAO,MAAM,WAAW,qEACc,CAAC;AAEvC,eAAO,MAAM,kBAAkB,cAAe,MAAM,SAAS,WAc5D,CAAC;AAYF,QAAA,MAAM,QAAQ,wLAeX,aAAa,gBA0Tf,CAAC;AAEF,eAAe,QAAQ,CAAC"}
|
|
@@ -25,7 +25,7 @@ import { jsx, keyframes } from '@emotion/react';
|
|
|
25
25
|
import { useForkRef, styled, useIsRTL, useUniqueId, } from '@workday/canvas-kit-react/common';
|
|
26
26
|
import { space, commonColors, borderRadius } from '@workday/canvas-kit-react/tokens';
|
|
27
27
|
import { Card } from '@workday/canvas-kit-react/card';
|
|
28
|
-
import {
|
|
28
|
+
import { TertiaryButton } from '@workday/canvas-kit-react/button';
|
|
29
29
|
import { xSmallIcon } from '@workday/canvas-system-icons-web';
|
|
30
30
|
import flatten from 'lodash.flatten';
|
|
31
31
|
import AutocompleteList from './AutocompleteList';
|
|
@@ -65,10 +65,7 @@ var MenuContainer = styled(Card)({
|
|
|
65
65
|
animation: fadeInKeyframes + " 200ms ease-out",
|
|
66
66
|
maxHeight: 200,
|
|
67
67
|
});
|
|
68
|
-
var ResetButton = styled(
|
|
69
|
-
width: space.l,
|
|
70
|
-
minWidth: space.l,
|
|
71
|
-
height: space.l,
|
|
68
|
+
var ResetButton = styled(TertiaryButton)({
|
|
72
69
|
position: 'absolute',
|
|
73
70
|
margin: "auto " + space.xxxs,
|
|
74
71
|
top: 0,
|
|
@@ -114,7 +111,7 @@ var isValidSingleChild = function (child) {
|
|
|
114
111
|
return React.isValidElement(child) && React.Children.only(child);
|
|
115
112
|
};
|
|
116
113
|
var Combobox = function (_a) {
|
|
117
|
-
var autocompleteItems = _a.autocompleteItems, children = _a.children, grow = _a.grow, initialValue = _a.initialValue, onChange = _a.onChange, onFocus = _a.onFocus, onBlur = _a.onBlur, showClearButton = _a.showClearButton, _b = _a.clearButtonVariant, clearButtonVariant = _b === void 0 ?
|
|
114
|
+
var autocompleteItems = _a.autocompleteItems, children = _a.children, grow = _a.grow, initialValue = _a.initialValue, onChange = _a.onChange, onFocus = _a.onFocus, onBlur = _a.onBlur, showClearButton = _a.showClearButton, _b = _a.clearButtonVariant, clearButtonVariant = _b === void 0 ? undefined : _b, _c = _a.clearButtonAriaLabel, clearButtonAriaLabel = _c === void 0 ? "Reset Search Input" : _c, labelId = _a.labelId, _d = _a.getStatusText, getStatusText = _d === void 0 ? buildStatusString : _d, id = _a.id, elemProps = __rest(_a, ["autocompleteItems", "children", "grow", "initialValue", "onChange", "onFocus", "onBlur", "showClearButton", "clearButtonVariant", "clearButtonAriaLabel", "labelId", "getStatusText", "id"]);
|
|
118
115
|
var _e = useState(false), isOpened = _e[0], setIsOpened = _e[1];
|
|
119
116
|
var _f = useState(''), value = _f[0], _setValue = _f[1]; // Don't call _setValue directly instead call setInputValue to make sure onChange fires correctly
|
|
120
117
|
var _g = useState(false), showingAutocomplete = _g[0], setShowingAutocomplete = _g[1];
|
|
@@ -339,8 +336,8 @@ var Combobox = function (_a) {
|
|
|
339
336
|
return (React.createElement(Container, __assign({ grow: grow }, elemProps),
|
|
340
337
|
React.createElement(InputContainer, { ref: comboboxRef },
|
|
341
338
|
isValidSingleChild(children) && React.Children.map(children, renderChildren),
|
|
342
|
-
showClearButton && (React.createElement(ResetButton, { shouldShow: !!value, "aria-label": clearButtonAriaLabel, icon: xSmallIcon, variant: clearButtonVariant,
|
|
343
|
-
showingAutocomplete && autocompleteItems && (React.createElement(MenuContainer, { padding: space.zero, depth:
|
|
339
|
+
showClearButton && (React.createElement(ResetButton, { shouldShow: !!value, "aria-label": clearButtonAriaLabel, icon: xSmallIcon, variant: clearButtonVariant, onClick: resetSearchInput, onBlur: handleBlur, size: "small", type: "button" })),
|
|
340
|
+
showingAutocomplete && autocompleteItems && (React.createElement(MenuContainer, { padding: space.zero, depth: 3 },
|
|
344
341
|
React.createElement(Card.Body, null,
|
|
345
342
|
React.createElement(AutocompleteList, { comboboxId: componentId, autocompleteItems: autocompleteItems, selectedIndex: selectedAutocompleteIndex, handleAutocompleteClick: handleAutocompleteClick, labelId: formLabelId, showGroupText: showGroupText }))))),
|
|
346
343
|
React.createElement(Status, { announcementText: announcementText })));
|
|
@@ -36,7 +36,7 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
36
36
|
import * as React from 'react';
|
|
37
37
|
import styled from '@emotion/styled';
|
|
38
38
|
import { colors, space, type, typeColors } from '@workday/canvas-kit-react/tokens';
|
|
39
|
-
import {
|
|
39
|
+
import { TertiaryButton } from '@workday/canvas-kit-react/button';
|
|
40
40
|
import { xIcon } from '@workday/canvas-system-icons-web';
|
|
41
41
|
var headerHeight = 56;
|
|
42
42
|
var HeaderContainer = styled('div')({
|
|
@@ -62,7 +62,7 @@ var HeaderTitle = styled('h4')(__assign(__assign({}, type.levels.body.small), {
|
|
|
62
62
|
color: inverse ? colors.frenchVanilla100 : typeColors.heading,
|
|
63
63
|
});
|
|
64
64
|
});
|
|
65
|
-
var CloseButton = styled(
|
|
65
|
+
var CloseButton = styled(TertiaryButton)({
|
|
66
66
|
margin: '-8px',
|
|
67
67
|
});
|
|
68
68
|
var DrawerHeader = /** @class */ (function (_super) {
|
|
@@ -74,7 +74,7 @@ var DrawerHeader = /** @class */ (function (_super) {
|
|
|
74
74
|
var _a = this.props, _b = _a.closeIconAriaLabel, closeIconAriaLabel = _b === void 0 ? 'Close' : _b, _c = _a.headerColor, headerColor = _c === void 0 ? colors.soap100 : _c, _d = _a.borderColor, borderColor = _d === void 0 ? colors.soap500 : _d, _e = _a.inverse, inverse = _e === void 0 ? false : _e, onClose = _a.onClose, title = _a.title, id = _a.id, elemProps = __rest(_a, ["closeIconAriaLabel", "headerColor", "borderColor", "inverse", "onClose", "title", "id"]);
|
|
75
75
|
return (React.createElement(HeaderContainer, __assign({ borderColor: borderColor }, elemProps, { headerColor: headerColor }),
|
|
76
76
|
React.createElement(HeaderTitle, { id: id, inverse: inverse, title: title }, title),
|
|
77
|
-
onClose && closeIconAriaLabel && (React.createElement(CloseButton, { variant: inverse ? 'inverse' :
|
|
77
|
+
onClose && closeIconAriaLabel && (React.createElement(CloseButton, { variant: inverse ? 'inverse' : undefined, onClick: onClose, "aria-label": closeIconAriaLabel, icon: xIcon }))));
|
|
78
78
|
};
|
|
79
79
|
return DrawerHeader;
|
|
80
80
|
}(React.Component));
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { GrowthBehavior } from '@workday/canvas-kit-react/common';
|
|
3
|
-
import {
|
|
3
|
+
import { TertiaryButtonProps } from '@workday/canvas-kit-react/button';
|
|
4
4
|
import { MenuItemProps } from '@workday/canvas-kit-preview-react/menu';
|
|
5
5
|
import { SearchTheme, SearchThemeAttributes } from './themes';
|
|
6
6
|
export interface SearchFormProps extends GrowthBehavior, React.FormHTMLAttributes<HTMLFormElement> {
|
|
@@ -74,6 +74,11 @@ export interface SearchFormProps extends GrowthBehavior, React.FormHTMLAttribute
|
|
|
74
74
|
* @default 40
|
|
75
75
|
*/
|
|
76
76
|
height?: number;
|
|
77
|
+
/**
|
|
78
|
+
* If true, allow onSubmit being called when input value is empty.
|
|
79
|
+
* @default false
|
|
80
|
+
*/
|
|
81
|
+
allowEmptyStringSearch?: boolean;
|
|
77
82
|
}
|
|
78
83
|
export interface SearchFormState {
|
|
79
84
|
showForm: boolean;
|
|
@@ -88,7 +93,7 @@ export declare class SearchForm extends React.Component<SearchFormProps, SearchF
|
|
|
88
93
|
state: Readonly<SearchFormState>;
|
|
89
94
|
private getTheme;
|
|
90
95
|
private getThemeColors;
|
|
91
|
-
getIconButtonType: () =>
|
|
96
|
+
getIconButtonType: () => TertiaryButtonProps['variant'];
|
|
92
97
|
handleSubmit: (event: React.FormEvent<HTMLFormElement>) => void;
|
|
93
98
|
openCollapsedSearch: () => void;
|
|
94
99
|
closeCollapsedSearch: () => void;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SearchForm.d.ts","sourceRoot":"","sources":["../../../../search-form/lib/SearchForm.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAC,cAAc,EAA2B,MAAM,kCAAkC,CAAC;AAC1F,OAAO,
|
|
1
|
+
{"version":3,"file":"SearchForm.d.ts","sourceRoot":"","sources":["../../../../search-form/lib/SearchForm.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAC,cAAc,EAA2B,MAAM,kCAAkC,CAAC;AAC1F,OAAO,EAAiB,mBAAmB,EAAC,MAAM,kCAAkC,CAAC;AAKrF,OAAO,EAAC,aAAa,EAAC,MAAM,wCAAwC,CAAC;AACrE,OAAO,EAAe,WAAW,EAAE,qBAAqB,EAAC,MAAM,UAAU,CAAC;AAG1E,MAAM,WAAW,eAAgB,SAAQ,cAAc,EAAE,KAAK,CAAC,kBAAkB,CAAC,eAAe,CAAC;IAChG;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,gBAAgB,CAAC,eAAe,CAAC,CAAC;IAClD;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,kBAAkB,CAAC,gBAAgB,CAAC,CAAC;IAC3D;;OAEG;IACH,iBAAiB,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,aAAa,CAAC,EAAE,CAAC;IACxD;;OAEG;IACH,WAAW,CAAC,EAAE,WAAW,GAAG,qBAAqB,CAAC;IAClD;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B;;;OAGG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B;;;OAGG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAC;CAClC;AAED,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAE,OAAO,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,OAAO,CAAC;CACpB;AAsLD,qBAAa,UAAW,SAAQ,KAAK,CAAC,SAAS,CAAC,eAAe,EAAE,eAAe,CAAC;IAC/E,MAAM,CAAC,KAAK,qBAAe;IAE3B,OAAO,CAAC,QAAQ,CAAuC;IACvD,OAAO,CAAC,OAAO,CAAwC;IACvD,OAAO,CAAC,OAAO,CAAsB;IAErC,KAAK,EAAE,QAAQ,CAAC,eAAe,CAAC,CAI9B;IAEF,OAAO,CAAC,QAAQ,CAUd;IAEF,OAAO,CAAC,cAAc,CAMpB;IAEF,iBAAiB,QAAO,mBAAmB,CAAC,SAAS,CAAC,CAOpD;IAEF,YAAY,UAAW,MAAM,SAAS,CAAC,eAAe,CAAC,KAAG,IAAI,CAO5D;IAEF,mBAAmB,QAAO,IAAI,CAI5B;IAEF,oBAAoB,QAAO,IAAI,CAI7B;IAEF,kBAAkB,CAAC,SAAS,EAAE,eAAe,EAAE,SAAS,EAAE,eAAe;IAWzE,UAAU,QAAO,IAAI,CAInB;IAEF,SAAS,QAAO,IAAI,CAIlB;IAEF,WAAW,QAAO,IAAI,CAEpB;IAEF,UAAU,QAAO,IAAI,CAEnB;IAEF,uBAAuB,UAAW,MAAM,WAAW,CAAC,gBAAgB,CAAC,KAAG,IAAI,CAM1E;IAEF,MAAM;CAmGP"}
|
|
@@ -36,7 +36,7 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
36
36
|
import * as React from 'react';
|
|
37
37
|
import { colors, space, spaceNumbers } from '@workday/canvas-kit-react/tokens';
|
|
38
38
|
import { styled, generateUniqueId } from '@workday/canvas-kit-react/common';
|
|
39
|
-
import {
|
|
39
|
+
import { TertiaryButton } from '@workday/canvas-kit-react/button';
|
|
40
40
|
import { searchIcon, xIcon } from '@workday/canvas-system-icons-web';
|
|
41
41
|
import { FormField, FormFieldLabelPosition } from '@workday/canvas-kit-react/form-field';
|
|
42
42
|
import { Combobox } from '@workday/canvas-kit-labs-react/combobox';
|
|
@@ -106,26 +106,20 @@ var SearchContainer = styled('div')({
|
|
|
106
106
|
var SearchCombobox = styled(Combobox)({
|
|
107
107
|
width: "100%",
|
|
108
108
|
});
|
|
109
|
-
var SearchIcon = styled(
|
|
109
|
+
var SearchIcon = styled(TertiaryButton)(function (_a) {
|
|
110
110
|
var isCollapsed = _a.isCollapsed, isHidden = _a.isHidden;
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
minWidth: size,
|
|
122
|
-
width: size,
|
|
123
|
-
minHeight: size,
|
|
124
|
-
height: size,
|
|
125
|
-
};
|
|
126
|
-
return __assign({ position: "absolute", margin: isCollapsed ? "auto " + space.xxs : "auto " + space.xxxs, top: 0, bottom: 0, left: 0, padding: 0, zIndex: 3, display: isHidden ? 'none' : 'flex' }, collapseStyles);
|
|
111
|
+
return {
|
|
112
|
+
position: "absolute",
|
|
113
|
+
margin: isCollapsed ? "auto " + space.xxs : "auto " + space.xxxs,
|
|
114
|
+
top: 0,
|
|
115
|
+
bottom: 0,
|
|
116
|
+
left: 0,
|
|
117
|
+
padding: 0,
|
|
118
|
+
zIndex: 3,
|
|
119
|
+
display: isHidden ? 'none' : 'flex',
|
|
120
|
+
};
|
|
127
121
|
});
|
|
128
|
-
var CloseButton = styled(
|
|
122
|
+
var CloseButton = styled(TertiaryButton)(function (_a) {
|
|
129
123
|
var isCollapsed = _a.isCollapsed, showForm = _a.showForm;
|
|
130
124
|
var collapseStyles = isCollapsed && showForm
|
|
131
125
|
? {
|
|
@@ -221,11 +215,11 @@ var SearchForm = /** @class */ (function (_super) {
|
|
|
221
215
|
background = formCollapsedBackground;
|
|
222
216
|
}
|
|
223
217
|
var isDarkBackground = chroma(background).get('lab.l') < 70;
|
|
224
|
-
return isDarkBackground ? 'inverse' :
|
|
218
|
+
return isDarkBackground ? 'inverse' : undefined;
|
|
225
219
|
};
|
|
226
220
|
_this.handleSubmit = function (event) {
|
|
227
221
|
event.preventDefault();
|
|
228
|
-
if (_this.state.searchQuery.trim()) {
|
|
222
|
+
if (_this.props.allowEmptyStringSearch || _this.state.searchQuery.trim()) {
|
|
229
223
|
_this.props.onSubmit(event);
|
|
230
224
|
}
|
|
231
225
|
else {
|
|
@@ -279,7 +273,7 @@ var SearchForm = /** @class */ (function (_super) {
|
|
|
279
273
|
}
|
|
280
274
|
};
|
|
281
275
|
SearchForm.prototype.render = function () {
|
|
282
|
-
var _a = this.props, _b = _a.clearButtonAriaLabel, clearButtonAriaLabel = _b === void 0 ? 'Reset Search Form' : _b, _c = _a.placeholder, placeholder = _c === void 0 ? 'Search' : _c, _d = _a.inputLabel, inputLabel = _d === void 0 ? 'Search' : _d, _e = _a.submitAriaLabel, submitAriaLabel = _e === void 0 ? 'Search' : _e, _f = _a.openButtonAriaLabel, openButtonAriaLabel = _f === void 0 ? 'Open Search' : _f, _g = _a.closeButtonAriaLabel, closeButtonAriaLabel = _g === void 0 ? 'Cancel' : _g, _h = _a.showClearButton, showClearButton = _h === void 0 ? true : _h, _j = _a.height, height = _j === void 0 ? 40 : _j, grow = _a.grow, onSubmit = _a.onSubmit, isCollapsed = _a.isCollapsed, onInputChange = _a.onInputChange, autocompleteItems = _a.autocompleteItems, initialValue = _a.initialValue, searchTheme = _a.searchTheme, rightAlign = _a.rightAlign, elemProps = __rest(_a, ["clearButtonAriaLabel", "placeholder", "inputLabel", "submitAriaLabel", "openButtonAriaLabel", "closeButtonAriaLabel", "showClearButton", "height", "grow", "onSubmit", "isCollapsed", "onInputChange", "autocompleteItems", "initialValue", "searchTheme", "rightAlign"]);
|
|
276
|
+
var _a = this.props, _b = _a.clearButtonAriaLabel, clearButtonAriaLabel = _b === void 0 ? 'Reset Search Form' : _b, _c = _a.placeholder, placeholder = _c === void 0 ? 'Search' : _c, _d = _a.inputLabel, inputLabel = _d === void 0 ? 'Search' : _d, _e = _a.submitAriaLabel, submitAriaLabel = _e === void 0 ? 'Search' : _e, _f = _a.openButtonAriaLabel, openButtonAriaLabel = _f === void 0 ? 'Open Search' : _f, _g = _a.closeButtonAriaLabel, closeButtonAriaLabel = _g === void 0 ? 'Cancel' : _g, _h = _a.showClearButton, showClearButton = _h === void 0 ? true : _h, _j = _a.height, height = _j === void 0 ? 40 : _j, grow = _a.grow, onSubmit = _a.onSubmit, isCollapsed = _a.isCollapsed, onInputChange = _a.onInputChange, autocompleteItems = _a.autocompleteItems, initialValue = _a.initialValue, searchTheme = _a.searchTheme, rightAlign = _a.rightAlign, _k = _a.allowEmptyStringSearch, allowEmptyStringSearch = _k === void 0 ? false : _k, elemProps = __rest(_a, ["clearButtonAriaLabel", "placeholder", "inputLabel", "submitAriaLabel", "openButtonAriaLabel", "closeButtonAriaLabel", "showClearButton", "height", "grow", "onSubmit", "isCollapsed", "onInputChange", "autocompleteItems", "initialValue", "searchTheme", "rightAlign", "allowEmptyStringSearch"]);
|
|
283
277
|
return (React.createElement(StyledSearchForm, __assign({ role: "search", action: ".", rightAlign: rightAlign, grow: grow, "aria-labelledby": this.labelId, isCollapsed: isCollapsed, onSubmit: this.handleSubmit, showForm: this.state.showForm }, elemProps),
|
|
284
278
|
React.createElement(SearchContainer, { height: height },
|
|
285
279
|
React.createElement(SearchIcon, { "aria-label": submitAriaLabel, icon: searchIcon, isCollapsed: isCollapsed, variant: this.getIconButtonType(), type: "submit", isHidden: !!isCollapsed && !this.state.showForm }),
|
|
@@ -287,7 +281,7 @@ var SearchForm = /** @class */ (function (_super) {
|
|
|
287
281
|
React.createElement(SearchField, { grow: grow, id: this.labelId, inputId: "input-" + this.labelId, label: inputLabel, labelPosition: FormFieldLabelPosition.Hidden, useFieldset: false, isCollapsed: isCollapsed, showForm: this.state.showForm, height: height },
|
|
288
282
|
React.createElement(SearchCombobox, { initialValue: initialValue, clearButtonVariant: this.getIconButtonType(), autocompleteItems: autocompleteItems, onChange: this.handleSearchInputChange, onFocus: this.handleFocus, onBlur: this.handleBlur, showClearButton: !isCollapsed && showClearButton, clearButtonAriaLabel: clearButtonAriaLabel, labelId: this.labelId },
|
|
289
283
|
React.createElement(SearchInput, { ref: this.inputRef, value: this.state.searchQuery, placeholder: placeholder, isCollapsed: isCollapsed, inputColors: this.getThemeColors(), height: height, name: "search", autoComplete: "off" }))),
|
|
290
|
-
React.createElement(CloseButton, { "aria-label": closeButtonAriaLabel, icon: xIcon, isCollapsed: isCollapsed,
|
|
284
|
+
React.createElement(CloseButton, { "aria-label": closeButtonAriaLabel, icon: xIcon, isCollapsed: isCollapsed, showForm: this.state.showForm, onClick: this.closeCollapsedSearch, type: "button" }))));
|
|
291
285
|
};
|
|
292
286
|
SearchForm.Theme = SearchTheme;
|
|
293
287
|
return SearchForm;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import styled from '@emotion/styled';
|
|
3
3
|
import {colors, space, type, CanvasColor, typeColors} from '@workday/canvas-kit-react/tokens';
|
|
4
|
-
import {
|
|
4
|
+
import {TertiaryButton} from '@workday/canvas-kit-react/button';
|
|
5
5
|
import {xIcon} from '@workday/canvas-system-icons-web';
|
|
6
6
|
|
|
7
7
|
export interface DrawerHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
@@ -69,7 +69,7 @@ const HeaderTitle = styled('h4')<Pick<DrawerHeaderProps, 'inverse'>>(
|
|
|
69
69
|
})
|
|
70
70
|
);
|
|
71
71
|
|
|
72
|
-
const CloseButton = styled(
|
|
72
|
+
const CloseButton = styled(TertiaryButton)({
|
|
73
73
|
margin: '-8px', // for inverse and plain button, we always want this margin
|
|
74
74
|
});
|
|
75
75
|
|
|
@@ -93,7 +93,7 @@ export default class DrawerHeader extends React.Component<DrawerHeaderProps, {}>
|
|
|
93
93
|
</HeaderTitle>
|
|
94
94
|
{onClose && closeIconAriaLabel && (
|
|
95
95
|
<CloseButton
|
|
96
|
-
variant={inverse ? 'inverse' :
|
|
96
|
+
variant={inverse ? 'inverse' : undefined}
|
|
97
97
|
onClick={onClose}
|
|
98
98
|
aria-label={closeIconAriaLabel}
|
|
99
99
|
icon={xIcon}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@workday/canvas-kit-labs-react",
|
|
3
|
-
"version": "7.0.0-alpha.
|
|
3
|
+
"version": "7.0.0-alpha.102-next.27+a618e6a9",
|
|
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",
|
|
@@ -17,25 +17,16 @@
|
|
|
17
17
|
"*/lib/*",
|
|
18
18
|
"*/index.ts",
|
|
19
19
|
"dist/",
|
|
20
|
-
"index.ts"
|
|
21
|
-
"ts3.5/**/*"
|
|
20
|
+
"index.ts"
|
|
22
21
|
],
|
|
23
|
-
"typesVersions": {
|
|
24
|
-
"<=3.5": {
|
|
25
|
-
"*": [
|
|
26
|
-
"ts3.5/*"
|
|
27
|
-
]
|
|
28
|
-
}
|
|
29
|
-
},
|
|
30
22
|
"scripts": {
|
|
31
23
|
"watch": "yarn build:es6 -w",
|
|
32
24
|
"test": "echo \"Error: no test specified\" && exit 1",
|
|
33
|
-
"clean": "rimraf dist && rimraf
|
|
25
|
+
"clean": "rimraf dist && rimraf .build-info && mkdirp dist",
|
|
34
26
|
"build:cjs": "tsc -p tsconfig.cjs.json",
|
|
35
27
|
"build:es6": "tsc -p tsconfig.es6.json",
|
|
36
28
|
"build:rebuild": "npm-run-all clean build",
|
|
37
|
-
"build
|
|
38
|
-
"build": "npm-run-all --parallel build:cjs build:es6 --sequential build:downlevel-dts",
|
|
29
|
+
"build": "npm-run-all --parallel build:cjs build:es6",
|
|
39
30
|
"prepack": "node ../../utils/publish.js pre labs-react",
|
|
40
31
|
"postpack": "node ../../utils/publish.js post labs-react",
|
|
41
32
|
"depcheck": "node ../../utils/check-dependencies-exist.js",
|
|
@@ -54,9 +45,9 @@
|
|
|
54
45
|
"dependencies": {
|
|
55
46
|
"@emotion/react": "^11.7.1",
|
|
56
47
|
"@emotion/styled": "^11.6.0",
|
|
57
|
-
"@workday/canvas-kit-preview-react": "^7.0.0-alpha.
|
|
58
|
-
"@workday/canvas-kit-react": "^7.0.0-alpha.
|
|
59
|
-
"@workday/canvas-system-icons-web": "
|
|
48
|
+
"@workday/canvas-kit-preview-react": "^7.0.0-alpha.102-next.27+a618e6a9",
|
|
49
|
+
"@workday/canvas-kit-react": "^7.0.0-alpha.102-next.27+a618e6a9",
|
|
50
|
+
"@workday/canvas-system-icons-web": "^3.0.0",
|
|
60
51
|
"chroma-js": "^2.1.0",
|
|
61
52
|
"lodash.flatten": "^4.4.0",
|
|
62
53
|
"rtl-css-js": "^1.14.1"
|
|
@@ -64,5 +55,5 @@
|
|
|
64
55
|
"devDependencies": {
|
|
65
56
|
"@types/lodash.flatten": "^4.4.6"
|
|
66
57
|
},
|
|
67
|
-
"gitHead": "
|
|
58
|
+
"gitHead": "a618e6a972dc1d5d577833b94d71e4e3be761f11"
|
|
68
59
|
}
|