@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.
Files changed (55) hide show
  1. package/combobox/README.md +1 -1
  2. package/combobox/lib/Combobox.tsx +7 -11
  3. package/dist/commonjs/combobox/lib/Combobox.d.ts +3 -4
  4. package/dist/commonjs/combobox/lib/Combobox.d.ts.map +1 -1
  5. package/dist/commonjs/combobox/lib/Combobox.js +4 -7
  6. package/dist/commonjs/drawer/lib/DrawerHeader.js +2 -2
  7. package/dist/commonjs/search-form/lib/SearchForm.d.ts +7 -2
  8. package/dist/commonjs/search-form/lib/SearchForm.d.ts.map +1 -1
  9. package/dist/commonjs/search-form/lib/SearchForm.js +16 -22
  10. package/dist/es6/combobox/lib/Combobox.d.ts +3 -4
  11. package/dist/es6/combobox/lib/Combobox.d.ts.map +1 -1
  12. package/dist/es6/combobox/lib/Combobox.js +5 -8
  13. package/dist/es6/drawer/lib/DrawerHeader.js +3 -3
  14. package/dist/es6/search-form/lib/SearchForm.d.ts +7 -2
  15. package/dist/es6/search-form/lib/SearchForm.d.ts.map +1 -1
  16. package/dist/es6/search-form/lib/SearchForm.js +17 -23
  17. package/drawer/lib/DrawerHeader.tsx +3 -3
  18. package/package.json +8 -17
  19. package/search-form/lib/SearchForm.tsx +25 -37
  20. package/ts3.5/dist/commonjs/combobox/index.d.ts +0 -5
  21. package/ts3.5/dist/commonjs/combobox/lib/AutocompleteList.d.ts +0 -32
  22. package/ts3.5/dist/commonjs/combobox/lib/Combobox.d.ts +0 -64
  23. package/ts3.5/dist/commonjs/combobox/lib/Status.d.ts +0 -11
  24. package/ts3.5/dist/commonjs/common/index.d.ts +0 -4
  25. package/ts3.5/dist/commonjs/common/lib/storybook-utils/ComponentStatesTable.d.ts +0 -26
  26. package/ts3.5/dist/commonjs/common/lib/storybook-utils/permutateProps.d.ts +0 -5
  27. package/ts3.5/dist/commonjs/common/lib/storybook-utils/propTypes.d.ts +0 -15
  28. package/ts3.5/dist/commonjs/common/lib/theming/index.d.ts +0 -3
  29. package/ts3.5/dist/commonjs/common/lib/theming/useThemeRTL.d.ts +0 -36
  30. package/ts3.5/dist/commonjs/common/lib/theming/useThemedRing.d.ts +0 -11
  31. package/ts3.5/dist/commonjs/drawer/index.d.ts +0 -6
  32. package/ts3.5/dist/commonjs/drawer/lib/Drawer.d.ts +0 -49
  33. package/ts3.5/dist/commonjs/drawer/lib/DrawerHeader.d.ts +0 -38
  34. package/ts3.5/dist/commonjs/index.d.ts +0 -5
  35. package/ts3.5/dist/commonjs/search-form/index.d.ts +0 -3
  36. package/ts3.5/dist/commonjs/search-form/lib/SearchForm.d.ts +0 -103
  37. package/ts3.5/dist/commonjs/search-form/lib/themes.d.ts +0 -21
  38. package/ts3.5/dist/es6/combobox/index.d.ts +0 -5
  39. package/ts3.5/dist/es6/combobox/lib/AutocompleteList.d.ts +0 -32
  40. package/ts3.5/dist/es6/combobox/lib/Combobox.d.ts +0 -64
  41. package/ts3.5/dist/es6/combobox/lib/Status.d.ts +0 -11
  42. package/ts3.5/dist/es6/common/index.d.ts +0 -4
  43. package/ts3.5/dist/es6/common/lib/storybook-utils/ComponentStatesTable.d.ts +0 -26
  44. package/ts3.5/dist/es6/common/lib/storybook-utils/permutateProps.d.ts +0 -5
  45. package/ts3.5/dist/es6/common/lib/storybook-utils/propTypes.d.ts +0 -15
  46. package/ts3.5/dist/es6/common/lib/theming/index.d.ts +0 -3
  47. package/ts3.5/dist/es6/common/lib/theming/useThemeRTL.d.ts +0 -36
  48. package/ts3.5/dist/es6/common/lib/theming/useThemedRing.d.ts +0 -11
  49. package/ts3.5/dist/es6/drawer/index.d.ts +0 -6
  50. package/ts3.5/dist/es6/drawer/lib/Drawer.d.ts +0 -49
  51. package/ts3.5/dist/es6/drawer/lib/DrawerHeader.d.ts +0 -38
  52. package/ts3.5/dist/es6/index.d.ts +0 -5
  53. package/ts3.5/dist/es6/search-form/index.d.ts +0 -3
  54. package/ts3.5/dist/es6/search-form/lib/SearchForm.d.ts +0 -103
  55. package/ts3.5/dist/es6/search-form/lib/themes.d.ts +0 -21
@@ -68,7 +68,7 @@ const autocompleteCallback = event => console.log('Adjust menu items here')
68
68
 
69
69
  ---
70
70
 
71
- #### `clearButtonVariant: IconButtonProps['variant']`
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 {IconButton, IconButtonProps} from '@workday/canvas-kit-react/button';
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?: IconButtonProps['variant'];
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(IconButton)<{shouldShow: boolean}>(
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 = 'plain',
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={1}>
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 { IconButtonProps } from '@workday/canvas-kit-react/button';
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?: IconButtonProps['variant'];
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,EAAa,eAAe,EAAC,MAAM,kCAAkC,CAAC;AAE7E,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;;;OAGG;IACH,kBAAkB,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC,CAAC;IAChD;;;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;AA6DD,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"}
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.IconButton)({
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 ? 'plain' : _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"]);
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, toggled: undefined, onClick: resetSearchInput, onBlur: handleBlur, type: "button" })),
370
- showingAutocomplete && autocompleteItems && (react_1.default.createElement(MenuContainer, { padding: tokens_1.space.zero, depth: 1 },
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.IconButton)({
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' : 'plain', onClick: onClose, "aria-label": closeIconAriaLabel, icon: canvas_system_icons_web_1.xIcon }))));
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 { IconButtonProps } from '@workday/canvas-kit-react/button';
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: () => IconButtonProps['variant'];
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,EAAa,eAAe,EAAC,MAAM,kCAAkC,CAAC;AAK7E,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;CACjB;AAED,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAE,OAAO,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,OAAO,CAAC;CACpB;AAuMD,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,eAAe,CAAC,SAAS,CAAC,CAOhD;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"}
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.IconButton)(function (_a) {
134
+ var SearchIcon = common_1.styled(button_1.TertiaryButton)(function (_a) {
135
135
  var isCollapsed = _a.isCollapsed, isHidden = _a.isHidden;
136
- var collapsedSize = 40;
137
- var size = 32;
138
- var collapseStyles = isCollapsed
139
- ? {
140
- minWidth: collapsedSize,
141
- width: collapsedSize,
142
- minHeight: collapsedSize,
143
- height: collapsedSize,
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.IconButton)(function (_a) {
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' : 'plain';
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, variant: "plain", showForm: this.state.showForm, onClick: this.closeCollapsedSearch, type: "button" }))));
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 { IconButtonProps } from '@workday/canvas-kit-react/button';
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?: IconButtonProps['variant'];
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,EAAa,eAAe,EAAC,MAAM,kCAAkC,CAAC;AAE7E,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;;;OAGG;IACH,kBAAkB,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC,CAAC;IAChD;;;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;AA6DD,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"}
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 { IconButton } from '@workday/canvas-kit-react/button';
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(IconButton)({
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 ? 'plain' : _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"]);
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, toggled: undefined, onClick: resetSearchInput, onBlur: handleBlur, type: "button" })),
343
- showingAutocomplete && autocompleteItems && (React.createElement(MenuContainer, { padding: space.zero, depth: 1 },
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 { IconButton } from '@workday/canvas-kit-react/button';
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(IconButton)({
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' : 'plain', onClick: onClose, "aria-label": closeIconAriaLabel, icon: xIcon }))));
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 { IconButtonProps } from '@workday/canvas-kit-react/button';
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: () => IconButtonProps['variant'];
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,EAAa,eAAe,EAAC,MAAM,kCAAkC,CAAC;AAK7E,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;CACjB;AAED,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAE,OAAO,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,OAAO,CAAC;CACpB;AAuMD,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,eAAe,CAAC,SAAS,CAAC,CAOhD;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"}
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 { IconButton } from '@workday/canvas-kit-react/button';
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(IconButton)(function (_a) {
109
+ var SearchIcon = styled(TertiaryButton)(function (_a) {
110
110
  var isCollapsed = _a.isCollapsed, isHidden = _a.isHidden;
111
- var collapsedSize = 40;
112
- var size = 32;
113
- var collapseStyles = isCollapsed
114
- ? {
115
- minWidth: collapsedSize,
116
- width: collapsedSize,
117
- minHeight: collapsedSize,
118
- height: collapsedSize,
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(IconButton)(function (_a) {
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' : 'plain';
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, variant: "plain", showForm: this.state.showForm, onClick: this.closeCollapsedSearch, type: "button" }))));
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 {IconButton} from '@workday/canvas-kit-react/button';
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(IconButton)({
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' : 'plain'}
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.0-next.7+23568685",
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 ts3.5 && rimraf .build-info && mkdirp dist && mkdirp ts3.5/dist",
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:downlevel-dts": "yarn run downlevel-dts dist ts3.5/dist",
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.0-next.7+23568685",
58
- "@workday/canvas-kit-react": "^7.0.0-alpha.0-next.7+23568685",
59
- "@workday/canvas-system-icons-web": "1.0.41",
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": "23568685fec785046d37cb320289d8ab9e74e283"
58
+ "gitHead": "a618e6a972dc1d5d577833b94d71e4e3be761f11"
68
59
  }