@elliemae/ds-form 2.2.0-alpha.4 → 3.0.0-next.2

package/cjs/SearchBox/DSSearchBox.js

@@ -1,69 +1,54 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __reExport = (target, module2, copyDefault, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
-  }
-  return target;
-};
-var __toESM = (module2, isNodeMode) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
-var __toCommonJS = /* @__PURE__ */ ((cache) => {
-  return (module2, temp) => {
-    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
-  };
-})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
-var DSSearchBox_exports = {};
-__export(DSSearchBox_exports, {
-  DSSearchBox: () => DSSearchBox,
-  SearchBox: () => DSSearchBox,
-  SearchBoxWithSchema: () => SearchBoxWithSchema,
-  default: () => DSSearchBox_default
-});
-var React = __toESM(require("react"));
-var import_react = __toESM(require("react"));
-var import_react_desc = require("react-desc");
-var import_ds_icons = require("@elliemae/ds-icons");
-var import_ds_icon = require("@elliemae/ds-icon");
-var import_styled = require("./styled");
-var import_SButton = require("./SButton");
-var import_useSearch = require("./useSearch");
-var import_props = require("./props");
-var import_defaultProps = require("./defaultProps");
-const DSSearchBox = ({
-  className,
-  clearable,
-  containerProps,
-  disableButton,
-  disabled,
-  innerRef,
-  onBlur,
-  onChange,
-  onKeyUp,
-  onSearch,
-  onClearButtonClick,
-  placeholder,
-  property,
-  readOnly,
-  searchOnEnter,
-  onSearchButtonClick,
-  showIcon,
-  style,
-  value
-}) => {
-  const { searchValue, handleChange, handleSearch, handleKeyUp, handleClear } = (0, import_useSearch.useSearch)({
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+var React = require('react');
+var reactDesc = require('react-desc');
+var dsIcons = require('@elliemae/ds-icons');
+var dsIcon = require('@elliemae/ds-icon');
+var styled = require('./styled.js');
+var SButton = require('./SButton.js');
+var useSearch = require('./useSearch.js');
+var props = require('./props.js');
+var defaultProps = require('./defaultProps.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var _Search;
+
+const DSSearchBox = _ref => {
+  let {
+    className,
+    clearable,
+    containerProps,
+    disableButton,
+    disabled,
+    innerRef,
+    onBlur,
+    onChange,
+    onKeyUp,
+    onSearch,
+    onClearButtonClick,
+    placeholder,
+    property,
+    readOnly,
+    searchOnEnter,
+    onSearchButtonClick,
+    showIcon,
+    style,
+    value
+  } = _ref;
+  const {
+    searchValue,
+    handleChange,
+    handleSearch,
+    handleKeyUp,
+    handleClear
+  } = useSearch.useSearch({
     onChange,
     onKeyUp,
     onSearch,
@@ -73,58 +58,56 @@ const DSSearchBox = ({
     value,
     onClearButtonClick
   });
-  const shouldShowClearIcon = clearable && searchValue?.length > 0;
+  const shouldShowClearIcon = clearable && (searchValue === null || searchValue === void 0 ? void 0 : searchValue.length) > 0;
   const shouldShowSearchIcon = !shouldShowClearIcon && showIcon;
   const shouldShowAnyIcon = shouldShowClearIcon || shouldShowSearchIcon;
-  const PureSearchboxIcon = import_react.default.useMemo(() => {
-    let Icon = /* @__PURE__ */ import_react.default.createElement(import_ds_icons.Search, {
+  const PureSearchboxIcon = React__default["default"].useMemo(() => {
+    let Icon = _Search || (_Search = /*#__PURE__*/_jsx__default["default"](dsIcons.Search, {
       "aria-label": "Search"
-    });
+    }));
+
     let handleOnClick = () => handleSearch(true);
-    if (!shouldShowAnyIcon)
-      return null;
+
+    if (!shouldShowAnyIcon) return null;
+
     if (shouldShowClearIcon) {
-      Icon = /* @__PURE__ */ import_react.default.createElement(import_ds_icons.CloseXsmall, {
-        color: import_ds_icon.DSIconColors.PRIMARY,
+      Icon = /*#__PURE__*/_jsx__default["default"](dsIcons.CloseXsmall, {
+        color: dsIcon.DSIconColors.PRIMARY,
         "aria-label": "Clear input"
       });
       handleOnClick = handleClear;
     }
-    return /* @__PURE__ */ import_react.default.createElement(import_SButton.SButton, {
+
+    return /*#__PURE__*/_jsx__default["default"](SButton.SButton, {
       disabled: disabled || disableButton,
       icon: Icon,
       onClick: handleOnClick,
-      dataTestid: shouldShowClearIcon ? "ds-searchbox-button-clear" : "ds-searchbox-button"
+      dataTestid: shouldShowClearIcon ? 'ds-searchbox-button-clear' : 'ds-searchbox-button'
     });
-  }, [
-    shouldShowClearIcon,
-    shouldShowSearchIcon,
-    shouldShowAnyIcon,
-    disabled,
-    disableButton,
-    handleSearch,
-    handleClear
-  ]);
-  return /* @__PURE__ */ import_react.default.createElement("div", {
-    style: { position: "relative", zIndex: 0 }
-  }, /* @__PURE__ */ import_react.default.createElement(import_styled.SearchBoxTextBox, {
-    className,
-    containerProps,
-    disabled,
-    innerRef,
+  }, [shouldShowClearIcon, shouldShowSearchIcon, shouldShowAnyIcon, disabled, disableButton, handleSearch, handleClear]);
+  return /*#__PURE__*/_jsx__default["default"]("div", {
+    style: {
+      position: 'relative',
+      zIndex: 0
+    }
+  }, void 0, /*#__PURE__*/_jsx__default["default"](styled.SearchBoxTextBox, {
+    className: className,
+    containerProps: containerProps,
+    disabled: disabled,
+    innerRef: innerRef,
     onChange: handleChange,
     onKeyUp: handleKeyUp,
-    onBlur,
-    placeholder,
-    readOnly,
-    style,
+    onBlur: onBlur,
+    placeholder: placeholder,
+    readOnly: readOnly,
+    style: style,
     value: searchValue
   }), PureSearchboxIcon);
 };
-DSSearchBox.propTypes = import_props.searchBoxProps;
-DSSearchBox.defaultProps = import_defaultProps.defaultProps;
-const SearchBoxWithSchema = (0, import_react_desc.describe)(DSSearchBox);
-SearchBoxWithSchema.propTypes = import_props.searchBoxProps;
-var DSSearchBox_default = DSSearchBox;
-module.exports = __toCommonJS(DSSearchBox_exports);
-//# sourceMappingURL=DSSearchBox.js.map
+
+DSSearchBox.defaultProps = defaultProps.defaultProps;
+const SearchBoxWithSchema = reactDesc.describe(DSSearchBox);
+SearchBoxWithSchema.propTypes = props.searchBoxProps;
+
+exports.SearchBoxWithSchema = SearchBoxWithSchema;
+exports["default"] = DSSearchBox;

package/cjs/SearchBox/NavSearchBox.js

@@ -1,140 +1,129 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __reExport = (target, module2, copyDefault, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
-  }
-  return target;
-};
-var __toESM = (module2, isNodeMode) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
-var __toCommonJS = /* @__PURE__ */ ((cache) => {
-  return (module2, temp) => {
-    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
-  };
-})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
-var NavSearchBox_exports = {};
-__export(NavSearchBox_exports, {
-  DSNavSearchBoxWithSchema: () => DSNavSearchBoxWithSchema,
-  NavSearchBox: () => NavSearchBox
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+require('react');
+var styled = require('styled-components');
+var reactDesc = require('react-desc');
+var dsIcons = require('@elliemae/ds-icons');
+var DSButton = require('@elliemae/ds-button');
+var DSTextBox = require('../TextBox/DSTextBox.js');
+var props = require('./props.js');
+var defaultProps = require('./defaultProps.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+var DSButton__default = /*#__PURE__*/_interopDefaultLegacy(DSButton);
+
+var _StyledVerticalSepara, _VerticalSeparator;
+const StyledResultTracker = /*#__PURE__*/styled__default["default"].div.withConfig({
+  componentId: "sc-sbwvud-0"
+})(["padding:0 8px;color:#a2a9b6;white-space:nowrap;word-spacing:2px;"]);
+const StyledVerticalSeparator = /*#__PURE__*/styled__default["default"].div.withConfig({
+  componentId: "sc-sbwvud-1"
+})(["height:60%;border-right:1px solid #a2a9b6;"]);
+const StyledToolbarRightAddonsWrapper = /*#__PURE__*/styled__default["default"].div.withConfig({
+  componentId: "sc-sbwvud-2"
+})(["display:flex;align-items:center;justify-content:flex-end;"]);
+const NavBtn = /*#__PURE__*/styled__default["default"](DSButton__default["default"]).withConfig({
+  componentId: "sc-sbwvud-3"
+})(["height:calc(100% - 2px);border:none;border-radius:", ";"], _ref => {
+  let {
+    last
+  } = _ref;
+  return last ? '2px  2px 0px 0px' : '0px';
 });
-var React = __toESM(require("react"));
-var import_react = __toESM(require("react"));
-var import_prop_types = __toESM(require("prop-types"));
-var import_styled_components = __toESM(require("styled-components"));
-var import_react_desc = require("react-desc");
-var import_ds_icons = require("@elliemae/ds-icons");
-var import_ds_button = require("@elliemae/ds-button");
-var import_TextBox = require("../TextBox");
-var import_props = require("./props");
-var import_defaultProps = require("./defaultProps");
-const StyledResultTracker = import_styled_components.default.div`
-  padding: 0 8px;
-  color: #a2a9b6; // this is color picked from the placeholder, specs doesn't specify
-  white-space: nowrap;
-  word-spacing: 2px;
-`;
-const StyledVerticalSeparator = import_styled_components.default.div`
-  height: 60%;
-  border-right: 1px solid #a2a9b6; // this is color picked from the placeholder, specs doesn't specify
-`;
-const StyledToolbarRightAddonsWrapper = import_styled_components.default.div`
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-`;
-const NavBtn = (0, import_styled_components.default)(import_ds_button.DSButton)`
-  height: calc(100% - 2px);
-  border: none;
-  border-radius: ${({ last }) => last ? "2px  2px 0px 0px" : "0px"};
-`;
-const RightButtonsGroup = (props) => {
-  const { onNext, onPrevious, onClear, hideNavs, showClear } = props;
-  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, !hideNavs && /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(NavBtn, {
-    buttonType: "text",
-    containerProps: { "data-testid": "ds-navsearchbox-next" },
-    icon: /* @__PURE__ */ import_react.default.createElement(import_ds_icons.ChevronDown, {
-      color: ["brand-primary", "800"]
-    }),
-    onClick: onNext
-  }), /* @__PURE__ */ import_react.default.createElement(NavBtn, {
-    buttonType: "text",
-    containerProps: { "data-testid": "ds-navsearchbox-prev" },
-    icon: /* @__PURE__ */ import_react.default.createElement(import_ds_icons.ChevronUp, {
-      color: ["brand-primary", "800"]
-    }),
-    onClick: onPrevious
-  })), showClear ? /* @__PURE__ */ import_react.default.createElement(NavBtn, {
-    containerProps: { "data-testid": "ds-navsearchbox-clear" },
-    buttonType: "text",
-    icon: /* @__PURE__ */ import_react.default.createElement(import_ds_icons.CloseXsmall, {
-      color: ["brand-primary", "800"]
-    }),
-    onClick: onClear,
-    last: true
-  }) : /* @__PURE__ */ import_react.default.createElement(NavBtn, {
-    containerProps: { "data-testid": "ds-navsearchbox-clear" },
-    buttonType: "text",
-    icon: /* @__PURE__ */ import_react.default.createElement(import_ds_icons.Search, {
-      color: ["brand-primary", "800"]
-    }),
-    last: true
-  }));
-};
-RightButtonsGroup.propTypes = {
-  onNext: import_prop_types.default.func.isRequired,
-  onPrevious: import_prop_types.default.func.isRequired,
-  onClear: import_prop_types.default.func.isRequired,
-  hideNavs: import_prop_types.default.bool,
-  showClear: import_prop_types.default.bool
-};
-const ResultTracker = (props) => {
-  const { currentResultIndex, totalResults } = props;
-  if (currentResultIndex === -1 && !totalResults)
-    return null;
-  if (currentResultIndex === -1 && totalResults)
-    return /* @__PURE__ */ import_react.default.createElement(StyledResultTracker, null, totalResults);
-  return /* @__PURE__ */ import_react.default.createElement(StyledResultTracker, null, `${currentResultIndex + 1} / ${totalResults}`);
-};
-ResultTracker.propTypes = {
-  currentResultIndex: import_prop_types.default.number.isRequired,
-  totalResults: import_prop_types.default.number.isRequired
+
+const RightButtonsGroup = props => {
+  const {
+    onNext,
+    onPrevious,
+    onClear,
+    hideNavs,
+    showClear
+  } = props;
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [!hideNavs && /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/_jsx__default["default"](NavBtn, {
+        buttonType: "text",
+        containerProps: {
+          'data-testid': 'ds-navsearchbox-next'
+        },
+        icon: /*#__PURE__*/_jsx__default["default"](dsIcons.ChevronDown, {
+          color: ['brand-primary', '800']
+        }),
+        onClick: onNext
+      }), /*#__PURE__*/_jsx__default["default"](NavBtn, {
+        buttonType: "text",
+        containerProps: {
+          'data-testid': 'ds-navsearchbox-prev'
+        },
+        icon: /*#__PURE__*/_jsx__default["default"](dsIcons.ChevronUp, {
+          color: ['brand-primary', '800']
+        }),
+        onClick: onPrevious
+      })]
+    }), showClear ? /*#__PURE__*/_jsx__default["default"](NavBtn, {
+      containerProps: {
+        'data-testid': 'ds-navsearchbox-clear'
+      },
+      buttonType: "text",
+      icon: /*#__PURE__*/_jsx__default["default"](dsIcons.CloseXsmall, {
+        color: ['brand-primary', '800']
+      }),
+      onClick: onClear,
+      last: true
+    }) : /*#__PURE__*/_jsx__default["default"](NavBtn, {
+      containerProps: {
+        'data-testid': 'ds-navsearchbox-clear'
+      },
+      buttonType: "text",
+      icon: /*#__PURE__*/_jsx__default["default"](dsIcons.Search, {
+        color: ['brand-primary', '800']
+      }),
+      last: true
+    })]
+  });
 };
-const VerticalSeparator = () => /* @__PURE__ */ import_react.default.createElement(StyledVerticalSeparator, null);
-const ToolbarRightAddons = (props) => {
-  const { onNext, onPrevious, onClear, currentResultIndex, totalResults, showClear } = props;
-  return /* @__PURE__ */ import_react.default.createElement(StyledToolbarRightAddonsWrapper, null, /* @__PURE__ */ import_react.default.createElement(ResultTracker, {
+
+const ResultTracker = props => {
+  const {
     currentResultIndex,
     totalResults
-  }), currentResultIndex !== -1 || totalResults ? /* @__PURE__ */ import_react.default.createElement(VerticalSeparator, null) : null, /* @__PURE__ */ import_react.default.createElement(RightButtonsGroup, {
+  } = props;
+  if (currentResultIndex === -1 && !totalResults) return null;
+  if (currentResultIndex === -1 && totalResults) return /*#__PURE__*/_jsx__default["default"](StyledResultTracker, {}, void 0, totalResults);
+  return /*#__PURE__*/_jsx__default["default"](StyledResultTracker, {}, void 0, "".concat(currentResultIndex + 1, " / ").concat(totalResults));
+};
+
+const VerticalSeparator = () => _StyledVerticalSepara || (_StyledVerticalSepara = /*#__PURE__*/_jsx__default["default"](StyledVerticalSeparator, {}));
+
+const ToolbarRightAddons = props => {
+  const {
     onNext,
-    hideNavs: currentResultIndex === -1 && !totalResults,
     onPrevious,
-    showClear,
-    onClear
+    onClear,
+    currentResultIndex,
+    totalResults,
+    showClear
+  } = props;
+  return /*#__PURE__*/_jsx__default["default"](StyledToolbarRightAddonsWrapper, {}, void 0, /*#__PURE__*/_jsx__default["default"](ResultTracker, {
+    currentResultIndex: currentResultIndex,
+    totalResults: totalResults
+  }), currentResultIndex !== -1 || totalResults ? _VerticalSeparator || (_VerticalSeparator = /*#__PURE__*/_jsx__default["default"](VerticalSeparator, {})) : null, /*#__PURE__*/_jsx__default["default"](RightButtonsGroup, {
+    onNext: onNext,
+    hideNavs: currentResultIndex === -1 && !totalResults,
+    onPrevious: onPrevious,
+    showClear: showClear,
+    onClear: onClear
   }));
 };
-ToolbarRightAddons.propTypes = {
-  onNext: import_prop_types.default.func.isRequired,
-  onPrevious: import_prop_types.default.func.isRequired,
-  onClear: import_prop_types.default.func.isRequired,
-  currentResultIndex: import_prop_types.default.number.isRequired,
-  totalResults: import_prop_types.default.number.isRequired,
-  showClear: import_prop_types.default.bool
-};
-const NavSearchBox = (props) => {
+
+const NavSearchBox = props => {
   const {
     currentResultIndex,
     onChange,
@@ -148,43 +137,51 @@ const NavSearchBox = (props) => {
     autoFocus,
     innerRef
   } = props;
-  const handleChange = (e) => {
-    if (onChange)
-      onChange(e.target.value);
+
+  const handleChange = e => {
+    if (onChange) onChange(e.target.value);
   };
-  const handleKeyDown = (e) => {
+
+  const handleKeyDown = e => {
+    // SHIFT + ENTER
     if (e.shiftKey) {
-      if (e.key === "Enter" || e.keyCode === 13) {
+      if (e.key === 'Enter' || e.keyCode === 13) {
         onPrevious();
       }
-    } else if (e.key === "Escape" || e.keyCode === 27) {
+    } // ESCAPE
+    else if (e.key === 'Escape' || e.keyCode === 27) {
       onClear();
-    } else if (e.key === "Enter" || e.keyCode === 13) {
+    } // ENTER
+    else if (e.key === 'Enter' || e.keyCode === 13) {
       onNext();
     }
   };
-  return /* @__PURE__ */ import_react.default.createElement(import_TextBox.DSTextBox, {
+
+  return /*#__PURE__*/_jsx__default["default"](DSTextBox["default"], {
     onChange: handleChange,
-    containerProps: { "data-testid": "ds-nav-searchbox-input" },
-    onBlur,
+    containerProps: {
+      'data-testid': 'ds-nav-searchbox-input'
+    },
+    onBlur: onBlur,
     onKeyDown: handleKeyDown,
-    placeholder,
-    value,
-    autoFocus,
-    innerRef,
-    rightComponent: /* @__PURE__ */ import_react.default.createElement(ToolbarRightAddons, {
+    placeholder: placeholder,
+    value: value,
+    autoFocus: autoFocus,
+    innerRef: innerRef,
+    rightComponent: /*#__PURE__*/_jsx__default["default"](ToolbarRightAddons, {
       showClear: !!value,
-      onNext,
-      onPrevious,
-      onClear,
-      currentResultIndex,
-      totalResults
+      onNext: onNext,
+      onPrevious: onPrevious,
+      onClear: onClear,
+      currentResultIndex: currentResultIndex,
+      totalResults: totalResults
     })
   });
 };
-NavSearchBox.propTypes = import_props.navSearchBoxProps;
-NavSearchBox.defaultProps = import_defaultProps.navSearchBoxDefaultProps;
-const DSNavSearchBoxWithSchema = (0, import_react_desc.describe)(NavSearchBox);
-DSNavSearchBoxWithSchema.propTypes = import_props.navSearchBoxProps;
-module.exports = __toCommonJS(NavSearchBox_exports);
-//# sourceMappingURL=NavSearchBox.js.map
+
+NavSearchBox.defaultProps = defaultProps.navSearchBoxDefaultProps;
+const DSNavSearchBoxWithSchema = reactDesc.describe(NavSearchBox);
+DSNavSearchBoxWithSchema.propTypes = props.navSearchBoxProps;
+
+exports.DSNavSearchBoxWithSchema = DSNavSearchBoxWithSchema;
+exports.NavSearchBox = NavSearchBox;