@workday/canvas-kit-labs-react 6.4.6 → 6.5.1

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 (15) hide show
  1. package/common/lib/Box.tsx +21 -4
  2. package/dist/commonjs/common/lib/Box.d.ts.map +1 -1
  3. package/dist/commonjs/common/lib/Box.js +10 -2
  4. package/dist/commonjs/search-form/lib/SearchForm.d.ts +5 -0
  5. package/dist/commonjs/search-form/lib/SearchForm.d.ts.map +1 -1
  6. package/dist/commonjs/search-form/lib/SearchForm.js +2 -2
  7. package/dist/es6/common/lib/Box.d.ts.map +1 -1
  8. package/dist/es6/common/lib/Box.js +11 -3
  9. package/dist/es6/search-form/lib/SearchForm.d.ts +5 -0
  10. package/dist/es6/search-form/lib/SearchForm.d.ts.map +1 -1
  11. package/dist/es6/search-form/lib/SearchForm.js +2 -2
  12. package/package.json +4 -4
  13. package/search-form/lib/SearchForm.tsx +7 -1
  14. package/ts3.5/dist/commonjs/search-form/lib/SearchForm.d.ts +5 -0
  15. package/ts3.5/dist/es6/search-form/lib/SearchForm.d.ts +5 -0
package/common/lib/Box.tsx CHANGED
@@ -1,7 +1,7 @@
1
1
  import * as React from 'react';
2
2
  import styled from '@emotion/styled';
3
3
  import isPropValid from '@emotion/is-prop-valid';
4
- import {createComponent, StyledType} from '@workday/canvas-kit-react/common';
4
+ import {createComponent, StyledType, useConstant} from '@workday/canvas-kit-react/common';
5
5
 
6
6
  // style props
7
7
  import {border, BorderStyleProps} from './utils/border';
@@ -28,7 +28,8 @@ const shouldForwardProp = (prop: string) => {
28
28
  return isPropValid(prop) && !omittedProps.includes(prop);
29
29
  };
30
30
 
31
- const StyledBox = styled('div', {shouldForwardProp})<StyledType & BoxProps>(
31
+ // Meant to be used with elements. The `shouldForwardProps` will remove all style props
32
+ const StyledBoxElement = styled('div', {shouldForwardProp})<StyledType & BoxProps>(
32
33
  {
33
34
  boxSizing: 'border-box',
34
35
  },
@@ -41,6 +42,19 @@ const StyledBox = styled('div', {shouldForwardProp})<StyledType & BoxProps>(
41
42
  space
42
43
  );
43
44
 
45
+ // Meant to be used with components. There is no `shouldForwardProps` - all props will be forwarded to the component
46
+ const StyledBoxComponent = styled('div')<StyledType & BoxProps>(
47
+ {
48
+ boxSizing: 'border-box',
49
+ },
50
+ border,
51
+ color,
52
+ depth,
53
+ flexItem,
54
+ layout,
55
+ position,
56
+ space
57
+ );
44
58
  /**
45
59
  * `Box` is a primitive component that provides a common, ergonomic API around Canvas design tokens.
46
60
  * It is highly flexible, and its primary purpose is to build other components.
@@ -61,10 +75,13 @@ const StyledBox = styled('div', {shouldForwardProp})<StyledType & BoxProps>(
61
75
  export const Box = createComponent('div')({
62
76
  displayName: 'Box',
63
77
  Component: ({children, ...elemProps}: BoxProps, ref, Element) => {
78
+ const BoxComponent = useConstant(() =>
79
+ typeof Element === 'string' ? StyledBoxElement : StyledBoxComponent
80
+ );
64
81
  return (
65
- <StyledBox as={Element} ref={ref} {...elemProps}>
82
+ <BoxComponent as={Element} ref={ref} {...elemProps}>
66
83
  {children}
67
- </StyledBox>
84
+ </BoxComponent>
68
85
  );
69
86
  },
70
87
  });
package/dist/commonjs/common/lib/Box.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Box.d.ts","sourceRoot":"","sources":["../../../../common/lib/Box.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,EAAS,gBAAgB,EAAC,MAAM,gBAAgB,CAAC;AACxD,OAAO,EAAQ,eAAe,EAAC,MAAM,eAAe,CAAC;AACrD,OAAO,EAAQ,eAAe,EAAC,MAAM,eAAe,CAAC;AACrD,OAAO,EAAW,kBAAkB,EAAC,MAAM,kBAAkB,CAAC;AAC9D,OAAO,EAAS,gBAAgB,EAAC,MAAM,gBAAgB,CAAC;AACxD,OAAO,EAAW,kBAAkB,EAAC,MAAM,kBAAkB,CAAC;AAC9D,OAAO,EAAQ,eAAe,EAAC,MAAM,eAAe,CAAC;AAErD,oBAAY,QAAQ,GAAG,gBAAgB,GACrC,eAAe,GACf,eAAe,GACf,kBAAkB,GAClB,gBAAgB,GAChB,kBAAkB,GAClB,eAAe,GAAG;IAChB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAqBJ;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,GAAG,ynBASd,CAAC"}
1
+ {"version":3,"file":"Box.d.ts","sourceRoot":"","sources":["../../../../common/lib/Box.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,EAAS,gBAAgB,EAAC,MAAM,gBAAgB,CAAC;AACxD,OAAO,EAAQ,eAAe,EAAC,MAAM,eAAe,CAAC;AACrD,OAAO,EAAQ,eAAe,EAAC,MAAM,eAAe,CAAC;AACrD,OAAO,EAAW,kBAAkB,EAAC,MAAM,kBAAkB,CAAC;AAC9D,OAAO,EAAS,gBAAgB,EAAC,MAAM,gBAAgB,CAAC;AACxD,OAAO,EAAW,kBAAkB,EAAC,MAAM,kBAAkB,CAAC;AAC9D,OAAO,EAAQ,eAAe,EAAC,MAAM,eAAe,CAAC;AAErD,oBAAY,QAAQ,GAAG,gBAAgB,GACrC,eAAe,GACf,eAAe,GACf,kBAAkB,GAClB,gBAAgB,GAChB,kBAAkB,GAClB,eAAe,GAAG;IAChB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAmCJ;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,GAAG,ynBAYd,CAAC"}
package/dist/commonjs/common/lib/Box.js CHANGED
@@ -48,7 +48,12 @@ var omittedProps = ['display', 'color', 'height', 'overflow', 'width', 'border',
48
48
  var shouldForwardProp = function (prop) {
49
49
  return is_prop_valid_1.default(prop) && !omittedProps.includes(prop);
50
50
  };
51
- var StyledBox = styled_1.default('div', { shouldForwardProp: shouldForwardProp })({
51
+ // Meant to be used with elements. The `shouldForwardProps` will remove all style props
52
+ var StyledBoxElement = styled_1.default('div', { shouldForwardProp: shouldForwardProp })({
53
+ boxSizing: 'border-box',
54
+ }, border_1.border, color_1.color, depth_1.depth, flexItem_1.flexItem, layout_1.layout, position_1.position, space_1.space);
55
+ // Meant to be used with components. There is no `shouldForwardProps` - all props will be forwarded to the component
56
+ var StyledBoxComponent = styled_1.default('div')({
52
57
  boxSizing: 'border-box',
53
58
  }, border_1.border, color_1.color, depth_1.depth, flexItem_1.flexItem, layout_1.layout, position_1.position, space_1.space);
54
59
  /**
@@ -72,6 +77,9 @@ exports.Box = common_1.createComponent('div')({
72
77
  displayName: 'Box',
73
78
  Component: function (_a, ref, Element) {
74
79
  var children = _a.children, elemProps = __rest(_a, ["children"]);
75
- return (React.createElement(StyledBox, __assign({ as: Element, ref: ref }, elemProps), children));
80
+ var BoxComponent = common_1.useConstant(function () {
81
+ return typeof Element === 'string' ? StyledBoxElement : StyledBoxComponent;
82
+ });
83
+ return (React.createElement(BoxComponent, __assign({ as: Element, ref: ref }, elemProps), children));
76
84
  },
77
85
  });
package/dist/commonjs/search-form/lib/SearchForm.d.ts CHANGED
@@ -73,6 +73,11 @@ export interface SearchFormProps extends GrowthBehavior, React.FormHTMLAttribute
73
73
  * @default 40
74
74
  */
75
75
  height?: number;
76
+ /**
77
+ * If true, allow onSubmit being called when input value is empty.
78
+ * @default false
79
+ */
80
+ allowEmptyStringSearch?: boolean;
76
81
  }
77
82
  export interface SearchFormState {
78
83
  showForm: boolean;
package/dist/commonjs/search-form/lib/SearchForm.d.ts.map CHANGED
@@ -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;AAM1F,OAAO,EAAC,aAAa,EAAC,MAAM,wCAAwC,CAAC;AACrE,OAAO,EAAC,qBAAqB,EAAgB,WAAW,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,kHAOf;IAEF,YAAY,oDAOV;IAEF,mBAAmB,aAIjB;IAEF,oBAAoB,aAIlB;IAEF,kBAAkB,CAAC,SAAS,EAAE,eAAe,EAAE,SAAS,EAAE,eAAe;IAWzE,UAAU,aAIR;IAEF,SAAS,aAIP;IAEF,WAAW,aAET;IAEF,UAAU,aAER;IAEF,uBAAuB,uDAMrB;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;AAM1F,OAAO,EAAC,aAAa,EAAC,MAAM,wCAAwC,CAAC;AACrE,OAAO,EAAC,qBAAqB,EAAgB,WAAW,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;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,kHAOf;IAEF,YAAY,oDAOV;IAEF,mBAAmB,aAIjB;IAEF,oBAAoB,aAIlB;IAEF,kBAAkB,CAAC,SAAS,EAAE,eAAe,EAAE,SAAS,EAAE,eAAe;IAWzE,UAAU,aAIR;IAEF,SAAS,aAIP;IAEF,WAAW,aAET;IAEF,UAAU,aAER;IAEF,uBAAuB,uDAMrB;IAEF,MAAM;CAoGP"}
package/dist/commonjs/search-form/lib/SearchForm.js CHANGED
@@ -237,7 +237,7 @@ var SearchForm = /** @class */ (function (_super) {
237
237
  };
238
238
  _this.handleSubmit = function (event) {
239
239
  event.preventDefault();
240
- if (_this.state.searchQuery.trim()) {
240
+ if (_this.props.allowEmptyStringSearch || _this.state.searchQuery.trim()) {
241
241
  _this.props.onSubmit(event);
242
242
  }
243
243
  else {
@@ -291,7 +291,7 @@ var SearchForm = /** @class */ (function (_super) {
291
291
  }
292
292
  };
293
293
  SearchForm.prototype.render = function () {
294
- 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"]);
294
+ 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"]);
295
295
  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),
296
296
  React.createElement(SearchContainer, { height: height },
297
297
  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 }),
package/dist/es6/common/lib/Box.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Box.d.ts","sourceRoot":"","sources":["../../../../common/lib/Box.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,EAAS,gBAAgB,EAAC,MAAM,gBAAgB,CAAC;AACxD,OAAO,EAAQ,eAAe,EAAC,MAAM,eAAe,CAAC;AACrD,OAAO,EAAQ,eAAe,EAAC,MAAM,eAAe,CAAC;AACrD,OAAO,EAAW,kBAAkB,EAAC,MAAM,kBAAkB,CAAC;AAC9D,OAAO,EAAS,gBAAgB,EAAC,MAAM,gBAAgB,CAAC;AACxD,OAAO,EAAW,kBAAkB,EAAC,MAAM,kBAAkB,CAAC;AAC9D,OAAO,EAAQ,eAAe,EAAC,MAAM,eAAe,CAAC;AAErD,oBAAY,QAAQ,GAAG,gBAAgB,GACrC,eAAe,GACf,eAAe,GACf,kBAAkB,GAClB,gBAAgB,GAChB,kBAAkB,GAClB,eAAe,GAAG;IAChB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAqBJ;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,GAAG,ynBASd,CAAC"}
1
+ {"version":3,"file":"Box.d.ts","sourceRoot":"","sources":["../../../../common/lib/Box.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,EAAS,gBAAgB,EAAC,MAAM,gBAAgB,CAAC;AACxD,OAAO,EAAQ,eAAe,EAAC,MAAM,eAAe,CAAC;AACrD,OAAO,EAAQ,eAAe,EAAC,MAAM,eAAe,CAAC;AACrD,OAAO,EAAW,kBAAkB,EAAC,MAAM,kBAAkB,CAAC;AAC9D,OAAO,EAAS,gBAAgB,EAAC,MAAM,gBAAgB,CAAC;AACxD,OAAO,EAAW,kBAAkB,EAAC,MAAM,kBAAkB,CAAC;AAC9D,OAAO,EAAQ,eAAe,EAAC,MAAM,eAAe,CAAC;AAErD,oBAAY,QAAQ,GAAG,gBAAgB,GACrC,eAAe,GACf,eAAe,GACf,kBAAkB,GAClB,gBAAgB,GAChB,kBAAkB,GAClB,eAAe,GAAG;IAChB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAmCJ;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,GAAG,ynBAYd,CAAC"}
package/dist/es6/common/lib/Box.js CHANGED
@@ -23,7 +23,7 @@ var __rest = (this && this.__rest) || function (s, e) {
23
23
  import * as React from 'react';
24
24
  import styled from '@emotion/styled';
25
25
  import isPropValid from '@emotion/is-prop-valid';
26
- import { createComponent } from '@workday/canvas-kit-react/common';
26
+ import { createComponent, useConstant } from '@workday/canvas-kit-react/common';
27
27
  // style props
28
28
  import { border } from './utils/border';
29
29
  import { color } from './utils/color';
@@ -36,7 +36,12 @@ var omittedProps = ['display', 'color', 'height', 'overflow', 'width', 'border',
36
36
  var shouldForwardProp = function (prop) {
37
37
  return isPropValid(prop) && !omittedProps.includes(prop);
38
38
  };
39
- var StyledBox = styled('div', { shouldForwardProp: shouldForwardProp })({
39
+ // Meant to be used with elements. The `shouldForwardProps` will remove all style props
40
+ var StyledBoxElement = styled('div', { shouldForwardProp: shouldForwardProp })({
41
+ boxSizing: 'border-box',
42
+ }, border, color, depth, flexItem, layout, position, space);
43
+ // Meant to be used with components. There is no `shouldForwardProps` - all props will be forwarded to the component
44
+ var StyledBoxComponent = styled('div')({
40
45
  boxSizing: 'border-box',
41
46
  }, border, color, depth, flexItem, layout, position, space);
42
47
  /**
@@ -60,6 +65,9 @@ export var Box = createComponent('div')({
60
65
  displayName: 'Box',
61
66
  Component: function (_a, ref, Element) {
62
67
  var children = _a.children, elemProps = __rest(_a, ["children"]);
63
- return (React.createElement(StyledBox, __assign({ as: Element, ref: ref }, elemProps), children));
68
+ var BoxComponent = useConstant(function () {
69
+ return typeof Element === 'string' ? StyledBoxElement : StyledBoxComponent;
70
+ });
71
+ return (React.createElement(BoxComponent, __assign({ as: Element, ref: ref }, elemProps), children));
64
72
  },
65
73
  });
package/dist/es6/search-form/lib/SearchForm.d.ts CHANGED
@@ -73,6 +73,11 @@ export interface SearchFormProps extends GrowthBehavior, React.FormHTMLAttribute
73
73
  * @default 40
74
74
  */
75
75
  height?: number;
76
+ /**
77
+ * If true, allow onSubmit being called when input value is empty.
78
+ * @default false
79
+ */
80
+ allowEmptyStringSearch?: boolean;
76
81
  }
77
82
  export interface SearchFormState {
78
83
  showForm: boolean;
package/dist/es6/search-form/lib/SearchForm.d.ts.map CHANGED
@@ -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;AAM1F,OAAO,EAAC,aAAa,EAAC,MAAM,wCAAwC,CAAC;AACrE,OAAO,EAAC,qBAAqB,EAAgB,WAAW,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,kHAOf;IAEF,YAAY,oDAOV;IAEF,mBAAmB,aAIjB;IAEF,oBAAoB,aAIlB;IAEF,kBAAkB,CAAC,SAAS,EAAE,eAAe,EAAE,SAAS,EAAE,eAAe;IAWzE,UAAU,aAIR;IAEF,SAAS,aAIP;IAEF,WAAW,aAET;IAEF,UAAU,aAER;IAEF,uBAAuB,uDAMrB;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;AAM1F,OAAO,EAAC,aAAa,EAAC,MAAM,wCAAwC,CAAC;AACrE,OAAO,EAAC,qBAAqB,EAAgB,WAAW,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;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,kHAOf;IAEF,YAAY,oDAOV;IAEF,mBAAmB,aAIjB;IAEF,oBAAoB,aAIlB;IAEF,kBAAkB,CAAC,SAAS,EAAE,eAAe,EAAE,SAAS,EAAE,eAAe;IAWzE,UAAU,aAIR;IAEF,SAAS,aAIP;IAEF,WAAW,aAET;IAEF,UAAU,aAER;IAEF,uBAAuB,uDAMrB;IAEF,MAAM;CAoGP"}
package/dist/es6/search-form/lib/SearchForm.js CHANGED
@@ -225,7 +225,7 @@ var SearchForm = /** @class */ (function (_super) {
225
225
  };
226
226
  _this.handleSubmit = function (event) {
227
227
  event.preventDefault();
228
- if (_this.state.searchQuery.trim()) {
228
+ if (_this.props.allowEmptyStringSearch || _this.state.searchQuery.trim()) {
229
229
  _this.props.onSubmit(event);
230
230
  }
231
231
  else {
@@ -279,7 +279,7 @@ var SearchForm = /** @class */ (function (_super) {
279
279
  }
280
280
  };
281
281
  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"]);
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, _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
283
  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
284
  React.createElement(SearchContainer, { height: height },
285
285
  React.createElement(SearchIcon, { "aria-label": submitAriaLabel, icon: searchIcon, isCollapsed: isCollapsed, variant: this.getIconButtonType(), type: "submit", isHidden: !!isCollapsed && !this.state.showForm }),
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@workday/canvas-kit-labs-react",
3
- "version": "6.4.6",
3
+ "version": "6.5.1",
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",
@@ -55,8 +55,8 @@
55
55
  "@emotion/core": "^10.0.28",
56
56
  "@emotion/is-prop-valid": "^0.8.2",
57
57
  "@emotion/styled": "^10.0.27",
58
- "@workday/canvas-kit-preview-react": "^6.4.6",
59
- "@workday/canvas-kit-react": "^6.4.6",
58
+ "@workday/canvas-kit-preview-react": "^6.5.1",
59
+ "@workday/canvas-kit-react": "^6.5.1",
60
60
  "@workday/canvas-system-icons-web": "1.0.41",
61
61
  "chroma-js": "^2.1.0",
62
62
  "csstype": "^2.6.17",
@@ -66,5 +66,5 @@
66
66
  "devDependencies": {
67
67
  "@types/lodash.flatten": "^4.4.6"
68
68
  },
69
- "gitHead": "0deba5cec0e0af9a0db4bc3d2d0f61edd0369e2c"
69
+ "gitHead": "8addffe34535e828e552e42e9c1530056a84a980"
70
70
  }
package/search-form/lib/SearchForm.tsx CHANGED
@@ -82,6 +82,11 @@ export interface SearchFormProps extends GrowthBehavior, React.FormHTMLAttribute
82
82
  * @default 40
83
83
  */
84
84
  height?: number;
85
+ /**
86
+ * If true, allow onSubmit being called when input value is empty.
87
+ * @default false
88
+ */
89
+ allowEmptyStringSearch?: boolean;
85
90
  }
86
91
 
87
92
  export interface SearchFormState {
@@ -331,7 +336,7 @@ export class SearchForm extends React.Component<SearchFormProps, SearchFormState
331
336
 
332
337
  handleSubmit = (event: React.FormEvent<HTMLFormElement>): void => {
333
338
  event.preventDefault();
334
- if (this.state.searchQuery.trim()) {
339
+ if (this.props.allowEmptyStringSearch || this.state.searchQuery.trim()) {
335
340
  this.props.onSubmit(event);
336
341
  } else {
337
342
  this.focusInput();
@@ -407,6 +412,7 @@ export class SearchForm extends React.Component<SearchFormProps, SearchFormState
407
412
  initialValue,
408
413
  searchTheme,
409
414
  rightAlign,
415
+ allowEmptyStringSearch = false,
410
416
  ...elemProps
411
417
  } = this.props;
412
418
 
package/ts3.5/dist/commonjs/search-form/lib/SearchForm.d.ts CHANGED
@@ -73,6 +73,11 @@ export interface SearchFormProps extends GrowthBehavior, React.FormHTMLAttribute
73
73
  * @default 40
74
74
  */
75
75
  height?: number;
76
+ /**
77
+ * If true, allow onSubmit being called when input value is empty.
78
+ * @default false
79
+ */
80
+ allowEmptyStringSearch?: boolean;
76
81
  }
77
82
  export interface SearchFormState {
78
83
  showForm: boolean;
package/ts3.5/dist/es6/search-form/lib/SearchForm.d.ts CHANGED
@@ -73,6 +73,11 @@ export interface SearchFormProps extends GrowthBehavior, React.FormHTMLAttribute
73
73
  * @default 40
74
74
  */
75
75
  height?: number;
76
+ /**
77
+ * If true, allow onSubmit being called when input value is empty.
78
+ * @default false
79
+ */
80
+ allowEmptyStringSearch?: boolean;
76
81
  }
77
82
  export interface SearchFormState {
78
83
  showForm: boolean;