@elliemae/ds-form 2.2.0-alpha.1 → 2.2.0-alpha.2

package/esm/RequiredMark/RequiredMark.js

@@ -1,27 +1,23 @@
-import _jsx from '@babel/runtime/helpers/esm/jsx';
-import 'react';
-import { convertPropToCssClassName } from '@elliemae/ds-classnames';
-
-const {
-  cssClassName
-} = convertPropToCssClassName('form-required-mark');
-
-const RequiredMark = _ref => {
-  let {
-    required = false,
-    optional = false
-  } = _ref;
-  if (!required && !optional) return null;
-
+import * as React from "react";
+import React2 from "react";
+import { convertPropToCssClassName } from "@elliemae/ds-classnames";
+const { cssClassName } = convertPropToCssClassName("form-required-mark");
+const RequiredMark = ({ required = false, optional = false }) => {
+  if (!required && !optional)
+    return null;
   if (required) {
-    return /*#__PURE__*/_jsx("span", {
-      className: "".concat(cssClassName)
-    }, void 0, "\u25CF");
+    return /* @__PURE__ */ React2.createElement("span", {
+      className: `${cssClassName}`
+    }, "\u25CF");
   }
-
-  return /*#__PURE__*/_jsx("span", {
-    className: "".concat(cssClassName, " optional-mark")
-  }, void 0, "\u26AC");
+  return /* @__PURE__ */ React2.createElement("span", {
+    className: `${cssClassName} optional-mark`
+  }, "\u26AC");
 };
-
-export { RequiredMark as default };
+var RequiredMark_default = RequiredMark;
+export {
+  RequiredMark as DSRequiredMark,
+  RequiredMark,
+  RequiredMark_default as default
+};
+//# sourceMappingURL=RequiredMark.js.map

package/esm/RequiredMark/RequiredMark.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/RequiredMark/RequiredMark.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { convertPropToCssClassName } from '@elliemae/ds-classnames';\n\nconst { cssClassName } = convertPropToCssClassName('form-required-mark');\nconst RequiredMark = ({ required = false, optional = false }) => {\n  if (!required && !optional) return null;\n  if (required) {\n    return <span className={`${cssClassName}`}>&#9679;</span>;\n  }\n  return <span className={`${cssClassName} optional-mark`}>&#9900;</span>;\n};\n\nexport { RequiredMark, RequiredMark as DSRequiredMark };\nexport default RequiredMark;\n"],
+  "mappings": "AAAA;ACAA;AACA;AAEA,MAAM,EAAE,iBAAiB,0BAA0B;AACnD,MAAM,eAAe,CAAC,EAAE,WAAW,OAAO,WAAW,YAAY;AAC/D,MAAI,CAAC,YAAY,CAAC;AAAU,WAAO;AACnC,MAAI,UAAU;AACZ,WAAO,qCAAC,QAAD;AAAA,MAAM,WAAW,GAAG;AAAA,OAAgB;AAAA;AAE7C,SAAO,qCAAC,QAAD;AAAA,IAAM,WAAW,GAAG;AAAA,KAA8B;AAAA;AAI3D,IAAO,uBAAQ;",
+  "names": []
+}

package/esm/RequiredMark/index.js

@@ -1 +1,3 @@
-export { default } from './RequiredMark.js';
+import * as React from "react";
+export * from "./RequiredMark";
+//# sourceMappingURL=index.js.map

package/esm/RequiredMark/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/RequiredMark/index.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './RequiredMark';\n"],
+  "mappings": "AAAA;ACAA;",
+  "names": []
+}

package/esm/SearchBox/DSSearchBox.js

@@ -1,45 +1,35 @@
-import _jsx from '@babel/runtime/helpers/esm/jsx';
-import React from 'react';
-import { describe } from 'react-desc';
-import { CloseXsmall, Search } from '@elliemae/ds-icons';
-import { DSIconColors } from '@elliemae/ds-icon';
-import { SearchBoxTextBox } from './styled.js';
-import { SButton } from './SButton.js';
-import { useSearch } from './useSearch.js';
-import { searchBoxProps } from './props.js';
-import { defaultProps } from './defaultProps.js';
-
-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({
+import * as React from "react";
+import React2 from "react";
+import { describe } from "react-desc";
+import { Search, CloseXsmall } from "@elliemae/ds-icons";
+import { DSIconColors } from "@elliemae/ds-icon";
+import { SearchBoxTextBox } from "./styled";
+import { SButton } from "./SButton";
+import { useSearch } from "./useSearch";
+import { searchBoxProps } from "./props";
+import { defaultProps } from "./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 } = useSearch({
     onChange,
     onKeyUp,
     onSearch,
@@ -49,55 +39,63 @@ const DSSearchBox = _ref => {
     value,
     onClearButtonClick
   });
-  const shouldShowClearIcon = clearable && (searchValue === null || searchValue === void 0 ? void 0 : searchValue.length) > 0;
+  const shouldShowClearIcon = clearable && searchValue?.length > 0;
   const shouldShowSearchIcon = !shouldShowClearIcon && showIcon;
   const shouldShowAnyIcon = shouldShowClearIcon || shouldShowSearchIcon;
-  const PureSearchboxIcon = React.useMemo(() => {
-    let Icon = _Search || (_Search = /*#__PURE__*/_jsx(Search, {
+  const PureSearchboxIcon = React2.useMemo(() => {
+    let Icon = /* @__PURE__ */ React2.createElement(Search, {
       "aria-label": "Search"
-    }));
-
+    });
     let handleOnClick = () => handleSearch(true);
-
-    if (!shouldShowAnyIcon) return null;
-
+    if (!shouldShowAnyIcon)
+      return null;
     if (shouldShowClearIcon) {
-      Icon = /*#__PURE__*/_jsx(CloseXsmall, {
+      Icon = /* @__PURE__ */ React2.createElement(CloseXsmall, {
         color: DSIconColors.PRIMARY,
         "aria-label": "Clear input"
       });
       handleOnClick = handleClear;
     }
-
-    return /*#__PURE__*/_jsx(SButton, {
+    return /* @__PURE__ */ React2.createElement(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__*/_jsx("div", {
-    style: {
-      position: 'relative',
-      zIndex: 0
-    }
-  }, void 0, /*#__PURE__*/_jsx(SearchBoxTextBox, {
-    className: className,
-    containerProps: containerProps,
-    disabled: disabled,
-    innerRef: innerRef,
+  }, [
+    shouldShowClearIcon,
+    shouldShowSearchIcon,
+    shouldShowAnyIcon,
+    disabled,
+    disableButton,
+    handleSearch,
+    handleClear
+  ]);
+  return /* @__PURE__ */ React2.createElement("div", {
+    style: { position: "relative", zIndex: 0 }
+  }, /* @__PURE__ */ React2.createElement(SearchBoxTextBox, {
+    className,
+    containerProps,
+    disabled,
+    innerRef,
     onChange: handleChange,
     onKeyUp: handleKeyUp,
-    onBlur: onBlur,
-    placeholder: placeholder,
-    readOnly: readOnly,
-    style: style,
+    onBlur,
+    placeholder,
+    readOnly,
+    style,
     value: searchValue
   }), PureSearchboxIcon);
 };
-
+DSSearchBox.propTypes = searchBoxProps;
 DSSearchBox.defaultProps = defaultProps;
 const SearchBoxWithSchema = describe(DSSearchBox);
 SearchBoxWithSchema.propTypes = searchBoxProps;
-
-export { SearchBoxWithSchema, DSSearchBox as default };
+var DSSearchBox_default = DSSearchBox;
+export {
+  DSSearchBox,
+  DSSearchBox as SearchBox,
+  SearchBoxWithSchema,
+  DSSearchBox_default as default
+};
+//# sourceMappingURL=DSSearchBox.js.map

package/esm/SearchBox/DSSearchBox.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/SearchBox/DSSearchBox.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport React from 'react';\nimport { describe } from 'react-desc';\nimport { Search, CloseXsmall } from '@elliemae/ds-icons';\nimport { DSIconColors } from '@elliemae/ds-icon';\nimport { SearchBoxTextBox } from './styled';\nimport { SButton } from './SButton';\nimport { useSearch } from './useSearch';\nimport { searchBoxProps } from './props';\nimport { defaultProps } from './defaultProps';\n\nconst DSSearchBox = ({\n  className,\n  clearable,\n  containerProps,\n  disableButton,\n  disabled,\n  innerRef,\n  onBlur,\n  onChange,\n  onKeyUp,\n  onSearch,\n  onClearButtonClick,\n  placeholder,\n  property,\n  readOnly,\n  searchOnEnter,\n  onSearchButtonClick,\n  showIcon,\n  style,\n  value,\n}) => {\n  const { searchValue, handleChange, handleSearch, handleKeyUp, handleClear } = useSearch({\n    onChange,\n    onKeyUp,\n    onSearch,\n    onSearchButtonClick,\n    property,\n    searchOnEnter,\n    value,\n    onClearButtonClick,\n  });\n  const shouldShowClearIcon = clearable && searchValue?.length > 0;\n  const shouldShowSearchIcon = !shouldShowClearIcon && showIcon;\n  const shouldShowAnyIcon = shouldShowClearIcon || shouldShowSearchIcon;\n\n  const PureSearchboxIcon = React.useMemo(() => {\n    let Icon = <Search aria-label=\"Search\" />;\n    let handleOnClick = () => handleSearch(true);\n    if (!shouldShowAnyIcon) return null;\n    if (shouldShowClearIcon) {\n      Icon = <CloseXsmall color={DSIconColors.PRIMARY} aria-label=\"Clear input\" />;\n      handleOnClick = handleClear;\n    }\n\n    return (\n      <SButton\n        disabled={disabled || disableButton}\n        icon={Icon}\n        onClick={handleOnClick}\n        dataTestid={shouldShowClearIcon ? 'ds-searchbox-button-clear' : 'ds-searchbox-button'}\n      />\n    );\n  }, [\n    shouldShowClearIcon,\n    shouldShowSearchIcon,\n    shouldShowAnyIcon,\n    disabled,\n    disableButton,\n    handleSearch,\n    handleClear,\n  ]);\n\n  return (\n    <div style={{ position: 'relative', zIndex: 0 }}>\n      <SearchBoxTextBox\n        className={className}\n        containerProps={containerProps}\n        disabled={disabled}\n        innerRef={innerRef}\n        onChange={handleChange}\n        onKeyUp={handleKeyUp}\n        onBlur={onBlur}\n        placeholder={placeholder}\n        readOnly={readOnly}\n        style={style}\n        value={searchValue}\n      />\n      {PureSearchboxIcon}\n    </div>\n  );\n};\n\nDSSearchBox.propTypes = searchBoxProps;\nDSSearchBox.defaultProps = defaultProps;\n\nconst SearchBoxWithSchema = describe(DSSearchBox);\nSearchBoxWithSchema.propTypes = searchBoxProps;\n\nexport { SearchBoxWithSchema, DSSearchBox, DSSearchBox as SearchBox };\nexport default DSSearchBox;\n"],
+  "mappings": "AAAA;ACCA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA,MAAM,cAAc,CAAC;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,MACI;AACJ,QAAM,EAAE,aAAa,cAAc,cAAc,aAAa,gBAAgB,UAAU;AAAA,IACtF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAEF,QAAM,sBAAsB,aAAa,aAAa,SAAS;AAC/D,QAAM,uBAAuB,CAAC,uBAAuB;AACrD,QAAM,oBAAoB,uBAAuB;AAEjD,QAAM,oBAAoB,OAAM,QAAQ,MAAM;AAC5C,QAAI,OAAO,qCAAC,QAAD;AAAA,MAAQ,cAAW;AAAA;AAC9B,QAAI,gBAAgB,MAAM,aAAa;AACvC,QAAI,CAAC;AAAmB,aAAO;AAC/B,QAAI,qBAAqB;AACvB,aAAO,qCAAC,aAAD;AAAA,QAAa,OAAO,aAAa;AAAA,QAAS,cAAW;AAAA;AAC5D,sBAAgB;AAAA;AAGlB,WACE,qCAAC,SAAD;AAAA,MACE,UAAU,YAAY;AAAA,MACtB,MAAM;AAAA,MACN,SAAS;AAAA,MACT,YAAY,sBAAsB,8BAA8B;AAAA;AAAA,KAGnE;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAGF,SACE,qCAAC,OAAD;AAAA,IAAK,OAAO,EAAE,UAAU,YAAY,QAAQ;AAAA,KAC1C,qCAAC,kBAAD;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,MAER;AAAA;AAKP,YAAY,YAAY;AACxB,YAAY,eAAe;AAE3B,MAAM,sBAAsB,SAAS;AACrC,oBAAoB,YAAY;AAGhC,IAAO,sBAAQ;",
+  "names": []
+}

package/esm/SearchBox/NavSearchBox.js

@@ -1,119 +1,108 @@
-import _jsx from '@babel/runtime/helpers/esm/jsx';
-import 'react';
-import styled from 'styled-components';
-import { describe } from 'react-desc';
-import { ChevronDown, ChevronUp, CloseXsmall, Search } from '@elliemae/ds-icons';
-import DSButton from '@elliemae/ds-button';
-import DSTextBox from '../TextBox/DSTextBox.js';
-import { navSearchBoxProps } from './props.js';
-import { navSearchBoxDefaultProps } from './defaultProps.js';
-import { jsxs, Fragment } from 'react/jsx-runtime';
-
-var _StyledVerticalSepara, _VerticalSeparator;
-const StyledResultTracker = /*#__PURE__*/styled.div.withConfig({
-  componentId: "sc-sbwvud-0"
-})(["padding:0 8px;color:#a2a9b6;white-space:nowrap;word-spacing:2px;"]);
-const StyledVerticalSeparator = /*#__PURE__*/styled.div.withConfig({
-  componentId: "sc-sbwvud-1"
-})(["height:60%;border-right:1px solid #a2a9b6;"]);
-const StyledToolbarRightAddonsWrapper = /*#__PURE__*/styled.div.withConfig({
-  componentId: "sc-sbwvud-2"
-})(["display:flex;align-items:center;justify-content:flex-end;"]);
-const NavBtn = /*#__PURE__*/styled(DSButton).withConfig({
-  componentId: "sc-sbwvud-3"
-})(["height:calc(100% - 2px);border:none;border-radius:", ";"], _ref => {
-  let {
-    last
-  } = _ref;
-  return last ? '2px  2px 0px 0px' : '0px';
-});
-
-const RightButtonsGroup = props => {
-  const {
-    onNext,
-    onPrevious,
-    onClear,
-    hideNavs,
-    showClear
-  } = props;
-  return /*#__PURE__*/jsxs(Fragment, {
-    children: [!hideNavs && /*#__PURE__*/jsxs(Fragment, {
-      children: [/*#__PURE__*/_jsx(NavBtn, {
-        buttonType: "text",
-        containerProps: {
-          'data-testid': 'ds-navsearchbox-next'
-        },
-        icon: /*#__PURE__*/_jsx(ChevronDown, {
-          color: ['brand-primary', '800']
-        }),
-        onClick: onNext
-      }), /*#__PURE__*/_jsx(NavBtn, {
-        buttonType: "text",
-        containerProps: {
-          'data-testid': 'ds-navsearchbox-prev'
-        },
-        icon: /*#__PURE__*/_jsx(ChevronUp, {
-          color: ['brand-primary', '800']
-        }),
-        onClick: onPrevious
-      })]
-    }), showClear ? /*#__PURE__*/_jsx(NavBtn, {
-      containerProps: {
-        'data-testid': 'ds-navsearchbox-clear'
-      },
-      buttonType: "text",
-      icon: /*#__PURE__*/_jsx(CloseXsmall, {
-        color: ['brand-primary', '800']
-      }),
-      onClick: onClear,
-      last: true
-    }) : /*#__PURE__*/_jsx(NavBtn, {
-      containerProps: {
-        'data-testid': 'ds-navsearchbox-clear'
-      },
-      buttonType: "text",
-      icon: /*#__PURE__*/_jsx(Search, {
-        color: ['brand-primary', '800']
-      }),
-      last: true
-    })]
-  });
+import * as React from "react";
+import React2 from "react";
+import PropTypes from "prop-types";
+import styled from "styled-components";
+import { describe } from "react-desc";
+import { ChevronDown, Search, ChevronUp, CloseXsmall } from "@elliemae/ds-icons";
+import { DSButton } from "@elliemae/ds-button";
+import { DSTextBox } from "../TextBox";
+import { navSearchBoxProps } from "./props";
+import { navSearchBoxDefaultProps } from "./defaultProps";
+const StyledResultTracker = styled.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 = styled.div`
+  height: 60%;
+  border-right: 1px solid #a2a9b6; // this is color picked from the placeholder, specs doesn't specify
+`;
+const StyledToolbarRightAddonsWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+`;
+const NavBtn = styled(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__ */ React2.createElement(React2.Fragment, null, !hideNavs && /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(NavBtn, {
+    buttonType: "text",
+    containerProps: { "data-testid": "ds-navsearchbox-next" },
+    icon: /* @__PURE__ */ React2.createElement(ChevronDown, {
+      color: ["brand-primary", "800"]
+    }),
+    onClick: onNext
+  }), /* @__PURE__ */ React2.createElement(NavBtn, {
+    buttonType: "text",
+    containerProps: { "data-testid": "ds-navsearchbox-prev" },
+    icon: /* @__PURE__ */ React2.createElement(ChevronUp, {
+      color: ["brand-primary", "800"]
+    }),
+    onClick: onPrevious
+  })), showClear ? /* @__PURE__ */ React2.createElement(NavBtn, {
+    containerProps: { "data-testid": "ds-navsearchbox-clear" },
+    buttonType: "text",
+    icon: /* @__PURE__ */ React2.createElement(CloseXsmall, {
+      color: ["brand-primary", "800"]
+    }),
+    onClick: onClear,
+    last: true
+  }) : /* @__PURE__ */ React2.createElement(NavBtn, {
+    containerProps: { "data-testid": "ds-navsearchbox-clear" },
+    buttonType: "text",
+    icon: /* @__PURE__ */ React2.createElement(Search, {
+      color: ["brand-primary", "800"]
+    }),
+    last: true
+  }));
 };
-
-const ResultTracker = props => {
-  const {
+RightButtonsGroup.propTypes = {
+  onNext: PropTypes.func.isRequired,
+  onPrevious: PropTypes.func.isRequired,
+  onClear: PropTypes.func.isRequired,
+  hideNavs: PropTypes.bool,
+  showClear: PropTypes.bool
+};
+const ResultTracker = (props) => {
+  const { currentResultIndex, totalResults } = props;
+  if (currentResultIndex === -1 && !totalResults)
+    return null;
+  if (currentResultIndex === -1 && totalResults)
+    return /* @__PURE__ */ React2.createElement(StyledResultTracker, null, totalResults);
+  return /* @__PURE__ */ React2.createElement(StyledResultTracker, null, `${currentResultIndex + 1} / ${totalResults}`);
+};
+ResultTracker.propTypes = {
+  currentResultIndex: PropTypes.number.isRequired,
+  totalResults: PropTypes.number.isRequired
+};
+const VerticalSeparator = () => /* @__PURE__ */ React2.createElement(StyledVerticalSeparator, null);
+const ToolbarRightAddons = (props) => {
+  const { onNext, onPrevious, onClear, currentResultIndex, totalResults, showClear } = props;
+  return /* @__PURE__ */ React2.createElement(StyledToolbarRightAddonsWrapper, null, /* @__PURE__ */ React2.createElement(ResultTracker, {
     currentResultIndex,
     totalResults
-  } = props;
-  if (currentResultIndex === -1 && !totalResults) return null;
-  if (currentResultIndex === -1 && totalResults) return /*#__PURE__*/_jsx(StyledResultTracker, {}, void 0, totalResults);
-  return /*#__PURE__*/_jsx(StyledResultTracker, {}, void 0, "".concat(currentResultIndex + 1, " / ").concat(totalResults));
-};
-
-const VerticalSeparator = () => _StyledVerticalSepara || (_StyledVerticalSepara = /*#__PURE__*/_jsx(StyledVerticalSeparator, {}));
-
-const ToolbarRightAddons = props => {
-  const {
+  }), currentResultIndex !== -1 || totalResults ? /* @__PURE__ */ React2.createElement(VerticalSeparator, null) : null, /* @__PURE__ */ React2.createElement(RightButtonsGroup, {
     onNext,
-    onPrevious,
-    onClear,
-    currentResultIndex,
-    totalResults,
-    showClear
-  } = props;
-  return /*#__PURE__*/_jsx(StyledToolbarRightAddonsWrapper, {}, void 0, /*#__PURE__*/_jsx(ResultTracker, {
-    currentResultIndex: currentResultIndex,
-    totalResults: totalResults
-  }), currentResultIndex !== -1 || totalResults ? _VerticalSeparator || (_VerticalSeparator = /*#__PURE__*/_jsx(VerticalSeparator, {})) : null, /*#__PURE__*/_jsx(RightButtonsGroup, {
-    onNext: onNext,
     hideNavs: currentResultIndex === -1 && !totalResults,
-    onPrevious: onPrevious,
-    showClear: showClear,
-    onClear: onClear
+    onPrevious,
+    showClear,
+    onClear
   }));
 };
-
-const NavSearchBox = props => {
+ToolbarRightAddons.propTypes = {
+  onNext: PropTypes.func.isRequired,
+  onPrevious: PropTypes.func.isRequired,
+  onClear: PropTypes.func.isRequired,
+  currentResultIndex: PropTypes.number.isRequired,
+  totalResults: PropTypes.number.isRequired,
+  showClear: PropTypes.bool
+};
+const NavSearchBox = (props) => {
   const {
     currentResultIndex,
     onChange,
@@ -127,50 +116,46 @@ 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 => {
-    // SHIFT + ENTER
+  const handleKeyDown = (e) => {
     if (e.shiftKey) {
-      if (e.key === 'Enter' || e.keyCode === 13) {
+      if (e.key === "Enter" || e.keyCode === 13) {
         onPrevious();
       }
-    } // ESCAPE
-    else if (e.key === 'Escape' || e.keyCode === 27) {
+    } else if (e.key === "Escape" || e.keyCode === 27) {
       onClear();
-    } // ENTER
-    else if (e.key === 'Enter' || e.keyCode === 13) {
+    } else if (e.key === "Enter" || e.keyCode === 13) {
       onNext();
     }
   };
-
-  return /*#__PURE__*/_jsx(DSTextBox, {
+  return /* @__PURE__ */ React2.createElement(DSTextBox, {
     onChange: handleChange,
-    containerProps: {
-      'data-testid': 'ds-nav-searchbox-input'
-    },
-    onBlur: onBlur,
+    containerProps: { "data-testid": "ds-nav-searchbox-input" },
+    onBlur,
     onKeyDown: handleKeyDown,
-    placeholder: placeholder,
-    value: value,
-    autoFocus: autoFocus,
-    innerRef: innerRef,
-    rightComponent: /*#__PURE__*/_jsx(ToolbarRightAddons, {
+    placeholder,
+    value,
+    autoFocus,
+    innerRef,
+    rightComponent: /* @__PURE__ */ React2.createElement(ToolbarRightAddons, {
       showClear: !!value,
-      onNext: onNext,
-      onPrevious: onPrevious,
-      onClear: onClear,
-      currentResultIndex: currentResultIndex,
-      totalResults: totalResults
+      onNext,
+      onPrevious,
+      onClear,
+      currentResultIndex,
+      totalResults
     })
   });
 };
-
+NavSearchBox.propTypes = navSearchBoxProps;
 NavSearchBox.defaultProps = navSearchBoxDefaultProps;
 const DSNavSearchBoxWithSchema = describe(NavSearchBox);
 DSNavSearchBoxWithSchema.propTypes = navSearchBoxProps;
-
-export { DSNavSearchBoxWithSchema, NavSearchBox };
+export {
+  DSNavSearchBoxWithSchema,
+  NavSearchBox
+};
+//# sourceMappingURL=NavSearchBox.js.map

package/esm/SearchBox/NavSearchBox.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/SearchBox/NavSearchBox.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport { describe } from 'react-desc';\nimport { ChevronDown, Search, ChevronUp, CloseXsmall } from '@elliemae/ds-icons';\nimport { DSButton } from '@elliemae/ds-button';\nimport { DSTextBox } from '../TextBox';\nimport { navSearchBoxProps } from './props';\nimport { navSearchBoxDefaultProps } from './defaultProps';\n\nconst StyledResultTracker = styled.div`\n  padding: 0 8px;\n  color: #a2a9b6; // this is color picked from the placeholder, specs doesn't specify\n  white-space: nowrap;\n  word-spacing: 2px;\n`;\nconst StyledVerticalSeparator = styled.div`\n  height: 60%;\n  border-right: 1px solid #a2a9b6; // this is color picked from the placeholder, specs doesn't specify\n`;\nconst StyledToolbarRightAddonsWrapper = styled.div`\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n`;\n\nconst NavBtn = styled(DSButton)`\n  height: calc(100% - 2px);\n  border: none;\n  border-radius: ${({ last }) => (last ? '2px  2px 0px 0px' : '0px')};\n`;\n\nconst RightButtonsGroup = (props) => {\n  const { onNext, onPrevious, onClear, hideNavs, showClear } = props;\n\n  return (\n    <>\n      {!hideNavs && (\n        <>\n          <NavBtn\n            buttonType=\"text\"\n            containerProps={{ 'data-testid': 'ds-navsearchbox-next' }}\n            icon={<ChevronDown color={['brand-primary', '800']} />}\n            onClick={onNext}\n          />\n          <NavBtn\n            buttonType=\"text\"\n            containerProps={{ 'data-testid': 'ds-navsearchbox-prev' }}\n            icon={<ChevronUp color={['brand-primary', '800']} />}\n            onClick={onPrevious}\n          />\n        </>\n      )}\n      {showClear ? (\n        <NavBtn\n          containerProps={{ 'data-testid': 'ds-navsearchbox-clear' }}\n          buttonType=\"text\"\n          icon={<CloseXsmall color={['brand-primary', '800']} />}\n          onClick={onClear}\n          last\n        />\n      ) : (\n        <NavBtn\n          containerProps={{ 'data-testid': 'ds-navsearchbox-clear' }}\n          buttonType=\"text\"\n          icon={<Search color={['brand-primary', '800']} />}\n          last\n        />\n      )}\n    </>\n  );\n};\nRightButtonsGroup.propTypes = {\n  onNext: PropTypes.func.isRequired,\n  onPrevious: PropTypes.func.isRequired,\n  onClear: PropTypes.func.isRequired,\n  hideNavs: PropTypes.bool,\n  showClear: PropTypes.bool,\n};\n\nconst ResultTracker = (props) => {\n  const { currentResultIndex, totalResults } = props;\n\n  if (currentResultIndex === -1 && !totalResults) return null;\n\n  if (currentResultIndex === -1 && totalResults) return <StyledResultTracker>{totalResults}</StyledResultTracker>;\n\n  return <StyledResultTracker>{`${currentResultIndex + 1} / ${totalResults}`}</StyledResultTracker>;\n};\nResultTracker.propTypes = {\n  currentResultIndex: PropTypes.number.isRequired,\n  totalResults: PropTypes.number.isRequired,\n};\n\nconst VerticalSeparator = () => <StyledVerticalSeparator />;\n\nconst ToolbarRightAddons = (props) => {\n  const { onNext, onPrevious, onClear, currentResultIndex, totalResults, showClear } = props;\n\n  return (\n    <StyledToolbarRightAddonsWrapper>\n      <ResultTracker currentResultIndex={currentResultIndex} totalResults={totalResults} />\n      {currentResultIndex !== -1 || totalResults ? <VerticalSeparator /> : null}\n      <RightButtonsGroup\n        onNext={onNext}\n        hideNavs={currentResultIndex === -1 && !totalResults}\n        onPrevious={onPrevious}\n        showClear={showClear}\n        onClear={onClear}\n      />\n    </StyledToolbarRightAddonsWrapper>\n  );\n};\nToolbarRightAddons.propTypes = {\n  onNext: PropTypes.func.isRequired,\n  onPrevious: PropTypes.func.isRequired,\n  onClear: PropTypes.func.isRequired,\n  currentResultIndex: PropTypes.number.isRequired,\n  totalResults: PropTypes.number.isRequired,\n  showClear: PropTypes.bool,\n};\n\ninterface PropsT {\n  value: string;\n  onChange: (val: string) => void;\n  onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;\n  onNext: () => void;\n  onPrevious: () => void;\n  onClear: () => void;\n  currentResultIndex: number;\n  totalResults: number;\n  placeholder: {\n    defaultValue(arg: import('react-desc').ReactDescPossibleDefaultValues): {\n      deprecated: import('react-desc').PropTypesDescValidator;\n    };\n    isRequired: import('react-desc').PropTypesDescValue;\n  };\n  autoFocus: boolean;\n}\n\nconst NavSearchBox = (props: PropsT) => {\n  const {\n    currentResultIndex,\n    onChange,\n    onClear,\n    onNext,\n    onPrevious,\n    totalResults,\n    value,\n    onBlur,\n    placeholder,\n    autoFocus,\n    innerRef,\n  } = props;\n\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    if (onChange) onChange(e.target.value);\n  };\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n    // SHIFT + ENTER\n    if (e.shiftKey) {\n      if (e.key === 'Enter' || e.keyCode === 13) {\n        onPrevious();\n      }\n    } // ESCAPE\n    else if (e.key === 'Escape' || e.keyCode === 27) {\n      onClear();\n    } // ENTER\n    else if (e.key === 'Enter' || e.keyCode === 13) {\n      onNext();\n    }\n  };\n\n  return (\n    <DSTextBox\n      onChange={handleChange}\n      containerProps={{ 'data-testid': 'ds-nav-searchbox-input' }}\n      onBlur={onBlur}\n      onKeyDown={handleKeyDown}\n      placeholder={placeholder}\n      value={value}\n      autoFocus={autoFocus}\n      innerRef={innerRef}\n      rightComponent={\n        <ToolbarRightAddons\n          showClear={!!value}\n          onNext={onNext}\n          onPrevious={onPrevious}\n          onClear={onClear}\n          currentResultIndex={currentResultIndex}\n          totalResults={totalResults}\n        />\n      }\n    />\n  );\n};\n\nNavSearchBox.propTypes = navSearchBoxProps;\nNavSearchBox.defaultProps = navSearchBoxDefaultProps;\nconst DSNavSearchBoxWithSchema = describe(NavSearchBox);\nDSNavSearchBoxWithSchema.propTypes = navSearchBoxProps;\nexport { NavSearchBox, DSNavSearchBoxWithSchema };\n"],
+  "mappings": "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",
+  "names": []
+}