@elliemae/ds-form 2.2.0-alpha.3 → 3.0.0-next.0

package/esm/SearchBox/defaultProps.js

@@ -1,32 +1,28 @@
-import * as React from "react";
 const defaultProps = {
-  className: "",
+  className: '',
   clearable: false,
   clearOnSearch: false,
   containerProps: {},
   disableButton: false,
   disabled: false,
-  innerRef: void 0,
+  innerRef: undefined,
   onBlur: () => null,
   onChange: () => null,
   onKeyUp: () => null,
   onSearch: () => null,
   onSearchButtonClick: () => null,
   onClearButtonClick: () => null,
-  placeholder: "Search all",
-  property: "all",
+  placeholder: 'Search all',
+  property: 'all',
   readOnly: false,
   searchOnEnter: true,
   showIcon: true,
   style: {},
-  value: void 0
+  value: undefined
 };
 const navSearchBoxDefaultProps = {
-  placeholder: "Search...",
+  placeholder: 'Search...',
   currentResultIndex: -1
 };
-export {
-  defaultProps,
-  navSearchBoxDefaultProps
-};
-//# sourceMappingURL=defaultProps.js.map
+
+export { defaultProps, navSearchBoxDefaultProps };

package/esm/SearchBox/index.js

@@ -1,14 +1,3 @@
-import * as React from "react";
-import { default as default2 } from "./SearchBoxToggle";
-import { default as default3, default as default4, SearchBox, SearchBoxWithSchema } from "./DSSearchBox";
-import { NavSearchBox, DSNavSearchBoxWithSchema } from "./NavSearchBox";
-export {
-  NavSearchBox as DSNavSearchBox,
-  DSNavSearchBoxWithSchema,
-  default4 as DSSearchBox,
-  SearchBox,
-  default2 as SearchBoxToggle,
-  SearchBoxWithSchema,
-  default3 as default
-};
-//# sourceMappingURL=index.js.map
+export { default as SearchBoxToggle } from './SearchBoxToggle.js';
+export { SearchBoxWithSchema, default } from './DSSearchBox.js';
+export { NavSearchBox as DSNavSearchBox, DSNavSearchBoxWithSchema } from './NavSearchBox.js';

package/esm/SearchBox/props.js

@@ -1,40 +1,93 @@
-import * as React from "react";
-import { PropTypes } from "react-desc";
+import { PropTypes } from 'react-desc';
+
 const searchBoxProps = {
-  containerProps: PropTypes.object.description("Set of Properties attached to the main container"),
-  className: PropTypes.string.description("html class attribute"),
-  innerRef: PropTypes.object.description("ref to the components container"),
-  style: PropTypes.object.description("Set style to the search box"),
-  property: PropTypes.string.description("search property"),
-  placeholder: PropTypes.string.description("Placeholder for the search box"),
-  searchOnEnter: PropTypes.bool.description("Whether to trigger the search once the enter is pressed"),
-  clearOnSearch: PropTypes.bool.description("Whether to clear the input on search"),
-  onClearButtonClick: PropTypes.func.description("function triggered once in the clear button is clicked"),
-  onKeyUp: PropTypes.func.description("function triggered once in the search box a keyboard key is released"),
-  onSearch: PropTypes.func.description("unction triggered once the search action begins (search icon click/ enter keypress)"),
-  onSearchButtonClick: PropTypes.func.description("function triggered once the search icon is clicked"),
-  onChange: PropTypes.func.description("function that is triggered on change"),
-  onBlur: PropTypes.func.description("Function that is triggered on blur"),
-  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.object]).description("searchbox input value"),
-  showIcon: PropTypes.bool.description("Whether to show an icon or not"),
-  disabled: PropTypes.bool.description("Disables the search input and button"),
-  disableButton: PropTypes.bool.description("Disables the search button"),
-  readOnly: PropTypes.bool.description("whether the input is read only or not"),
-  clearable: PropTypes.bool.description("Show clearable button")
+  /** Set of Properties attached to the main container */
+  containerProps: PropTypes.object.description('Set of Properties attached to the main container'),
+
+  /** html class attribute */
+  className: PropTypes.string.description('html class attribute'),
+
+  /** ref to the components container */
+  innerRef: PropTypes.object.description('ref to the components container'),
+
+  /** Set style to the search box */
+  style: PropTypes.object.description('Set style to the search box'),
+
+  /** search property */
+  property: PropTypes.string.description('search property'),
+
+  /** Placeholder for the search box */
+  placeholder: PropTypes.string.description('Placeholder for the search box'),
+
+  /** Whether to trigger the search once the enter is pressed */
+  searchOnEnter: PropTypes.bool.description('Whether to trigger the search once the enter is pressed'),
+
+  /** Whether to clear the input on search */
+  clearOnSearch: PropTypes.bool.description('Whether to clear the input on search'),
+
+  /** function triggered once in the clear button is clicked */
+  onClearButtonClick: PropTypes.func.description('function triggered once in the clear button is clicked'),
+
+  /** function triggered once in the search box a keyboard key is released */
+  onKeyUp: PropTypes.func.description('function triggered once in the search box a keyboard key is released'),
+
+  /** function triggered once the search action begins (search icon click/ enter keypress) */
+  onSearch: PropTypes.func.description('unction triggered once the search action begins (search icon click/ enter keypress)'),
+
+  /** function triggered once the search icon is clicked */
+  onSearchButtonClick: PropTypes.func.description('function triggered once the search icon is clicked'),
+
+  /** function that is triggered on change */
+  onChange: PropTypes.func.description('function that is triggered on change'),
+
+  /** Function that is triggered on blur */
+  onBlur: PropTypes.func.description('Function that is triggered on blur'),
+
+  /** searchbox input value */
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.object]).description('searchbox input value'),
+
+  /** Whether to show an icon or not */
+  showIcon: PropTypes.bool.description('Whether to show an icon or not'),
+
+  /** Disables the search input and button */
+  disabled: PropTypes.bool.description('Disables the search input and button'),
+
+  /** Disables the search button */
+  disableButton: PropTypes.bool.description('Disables the search button'),
+
+  /** whether the input is read only or not */
+  readOnly: PropTypes.bool.description('whether the input is read only or not'),
+
+  /** Show clearable button */
+  clearable: PropTypes.bool.description('Show clearable button')
 };
 const navSearchBoxProps = {
-  value: PropTypes.string.isRequired.description("searchbox input value"),
-  onChange: PropTypes.func.isRequired.description("function that is triggered on change"),
-  onBlur: PropTypes.func.description("Function that is triggered on blur"),
-  onNext: PropTypes.func.isRequired.description("triggered on next chevron click"),
-  onPrevious: PropTypes.func.isRequired.description("triggered on prev chevron click"),
-  onClear: PropTypes.func.isRequired.description("function that is triggered on clear button press"),
-  currentResultIndex: PropTypes.number.isRequired.description("zero based index to show on search box, -1 hides navigation"),
-  totalResults: PropTypes.number.isRequired.description("total items to navigate"),
-  placeholder: PropTypes.string.description("Placeholder for the search box")
+  /** searchbox input value */
+  value: PropTypes.string.isRequired.description('searchbox input value'),
+
+  /** function that is triggered on change */
+  onChange: PropTypes.func.isRequired.description('function that is triggered on change'),
+
+  /** Function that is triggered on blur */
+  onBlur: PropTypes.func.description('Function that is triggered on blur'),
+
+  /** triggered on next chevron click */
+  onNext: PropTypes.func.isRequired.description('triggered on next chevron click'),
+
+  /** triggered on prev chevron click */
+  onPrevious: PropTypes.func.isRequired.description('triggered on prev chevron click'),
+
+  /** function that is triggered on clear button press */
+  onClear: PropTypes.func.isRequired.description('function that is triggered on clear button press'),
+
+  /** zero based index to show on search box, -1 hides navigation */
+  currentResultIndex: PropTypes.number.isRequired.description('zero based index to show on search box, -1 hides navigation'),
+
+  /** total items to navigate */
+  totalResults: PropTypes.number.isRequired.description('total items to navigate'),
+
+  /** Placeholder for the search box */
+  placeholder: PropTypes.string.description('Placeholder for the search box')
 };
-export {
-  navSearchBoxProps,
-  searchBoxProps
-};
-//# sourceMappingURL=props.js.map
+
+export { navSearchBoxProps, searchBoxProps };

package/esm/SearchBox/styled.js

@@ -1,10 +1,8 @@
-import * as React from "react";
-import styled from "styled-components";
-import { DSTextBox } from "../TextBox";
-const SearchBoxTextBox = styled(DSTextBox)`
-  padding-right: 33px;
-`;
-export {
-  SearchBoxTextBox
-};
-//# sourceMappingURL=styled.js.map
+import styled from 'styled-components';
+import DSTextBox from '../TextBox/DSTextBox.js';
+
+const SearchBoxTextBox = /*#__PURE__*/styled(DSTextBox).withConfig({
+  componentId: "sc-44ofm-0"
+})(["padding-right:33px;"]);
+
+export { SearchBoxTextBox };

package/esm/SearchBox/useSearch.js

@@ -1,21 +1,25 @@
-import * as React from "react";
-import { useState, useEffect, useCallback } from "react";
-import { debounce } from "@elliemae/ds-utilities";
+import 'core-js/modules/web.dom-collections.iterator.js';
+import { useState, useCallback, useEffect } from 'react';
+import { debounce } from '@elliemae/ds-utilities';
+
 function handleSearch(clearOnSearch, setValue, searchOnEnter, value, onSearch, property, clickTrigger, onSearchButtonClick) {
   if (clickTrigger) {
     onSearchButtonClick();
   }
-  if (clearOnSearch)
-    setValue("");
-  if (searchOnEnter && !value)
-    return;
+
+  if (clearOnSearch) setValue('');
+  if (searchOnEnter && !value) return;
   onSearch({
-    query: { [property]: value },
+    query: {
+      [property]: value
+    },
     property,
     value
   });
 }
-function useSearch(params = {}) {
+
+function useSearch() {
+  let params = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   const {
     onKeyUp,
     onSearch,
@@ -27,42 +31,63 @@ function useSearch(params = {}) {
     onClearButtonClick
   } = params;
   const [value, setValue] = useState(params.value);
-  const debouncedSearch = useCallback(debounce(handleSearch, 200), []);
+  const debouncedSearch = useCallback(debounce(handleSearch, 200), []); // update state if prop changes
+
   useEffect(() => {
     if (value !== params.value) {
       setValue(params.value);
     }
   }, [params.value]);
-  const searchWithParams = (clickedSearchButton = false) => handleSearch(clearOnSearch, setValue, searchOnEnter, value, onSearch, property, clickedSearchButton, onSearchButtonClick);
-  const handleChange = ({ target }) => {
+
+  const searchWithParams = function () {
+    let clickedSearchButton = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+    return handleSearch(clearOnSearch, setValue, searchOnEnter, value, onSearch, property, clickedSearchButton, onSearchButtonClick);
+  };
+
+  const handleChange = _ref => {
+    let {
+      target
+    } = _ref;
     onChange(target.value);
     setValue(target.value);
+
     if (!searchOnEnter) {
-      setValue((prevValue) => {
+      // Functional update to get latest value state, similar to this.setState callback
+      setValue(prevValue => {
         debouncedSearch(clearOnSearch, setValue, searchOnEnter, prevValue, onSearch, property);
         return prevValue;
       });
     }
   };
+
   const handleClear = () => {
     onClearButtonClick();
-    onChange("");
-    setValue("");
+    onChange('');
+    setValue('');
+
     if (!searchOnEnter) {
-      setValue((prevValue) => {
+      // Functional update to get latest value state, similar to this.setState callback
+      setValue(prevValue => {
         debouncedSearch(clearOnSearch, setValue, searchOnEnter, prevValue, onSearch, property);
         return prevValue;
       });
     }
+
     debouncedSearch(clearOnSearch, setValue, searchOnEnter, value, onSearch, property);
   };
-  const handleKeyUp = (e) => {
-    const { key } = e;
-    if (searchOnEnter && key === "Enter") {
+
+  const handleKeyUp = e => {
+    const {
+      key
+    } = e;
+
+    if (searchOnEnter && key === 'Enter') {
       searchWithParams();
     }
+
     onKeyUp(e);
   };
+
   return {
     searchValue: value,
     handleChange,
@@ -71,7 +96,5 @@ function useSearch(params = {}) {
     handleClear
   };
 }
-export {
-  useSearch
-};
-//# sourceMappingURL=useSearch.js.map
+
+export { useSearch };

package/esm/SearchBox/withSearchable.js

@@ -1,8 +1,21 @@
-import * as React from "react";
-import React2, { Component } from "react";
-import PropTypes from "prop-types";
-import { debounce } from "@elliemae/ds-utilities";
-const withSearchable = (WrappedComponent) => {
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
+import React, { Component } from 'react';
+import { debounce } from '@elliemae/ds-utilities';
+import { jsx } from 'react/jsx-runtime';
+
+const _excluded = ["containerProps"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+const withSearchable = WrappedComponent => {
   class Searchable extends Component {
     constructor(props) {
       super(props);
@@ -13,84 +26,118 @@ const withSearchable = (WrappedComponent) => {
       this.handleSearch = this.handleSearch.bind(this);
       this.handleKeyUp = this.handleKeyUp.bind(this);
       this.handleChange = this.handleChange.bind(this);
-      this.buttonRef = React2.createRef();
+      this.buttonRef = /*#__PURE__*/React.createRef();
+      this.handleChange = this.handleChange.bind(this);
+      this.handleKeyUp = this.handleKeyUp.bind(this);
+      this.handleSearch = this.handleSearch.bind(this);
     }
-    static getDerivedStateFromProps(nextProps, { prevPropValue }) {
+
+    static getDerivedStateFromProps(nextProps, _ref) {
+      let {
+        prevPropValue
+      } = _ref;
+
       if (nextProps.value !== prevPropValue) {
         return {
           value: nextProps.value,
           prevPropValue: nextProps.value
         };
       }
+
       return null;
     }
+
     handleKeyUp(e) {
-      const { onKeyUp, searchOnEnter } = this.props;
-      const { key } = e;
-      if (searchOnEnter && key === "Enter") {
+      const {
+        onKeyUp,
+        searchOnEnter
+      } = this.props;
+      const {
+        key
+      } = e;
+
+      if (searchOnEnter && key === 'Enter') {
         this.handleSearch();
       }
+
       onKeyUp(e);
     }
+
     handleSearch() {
-      const { onSearch, property, clearOnSearch, searchOnEnter } = this.props;
-      const { value } = this.state;
-      if (clearOnSearch)
-        this.setState({ value: "" });
-      if (searchOnEnter && !value)
-        return;
+      const {
+        onSearch,
+        property,
+        clearOnSearch,
+        searchOnEnter
+      } = this.props;
+      const {
+        value
+      } = this.state;
+      if (clearOnSearch) this.setState({
+        value: ''
+      });
+      if (searchOnEnter && !value) return;
       onSearch({
-        query: { [property]: value },
+        query: {
+          [property]: value
+        },
         property,
         value
       });
     }
-    handleChange({ target }) {
-      const { value } = target;
-      const { searchOnEnter, onChange } = this.props;
+
+    handleChange(_ref2) {
+      let {
+        target
+      } = _ref2;
+      const {
+        value
+      } = target;
+      const {
+        searchOnEnter,
+        onChange
+      } = this.props;
       onChange(value);
-      this.setState({ value }, () => {
-        if (!searchOnEnter)
-          this.debouncedSearch();
+      this.setState({
+        value
+      }, () => {
+        if (!searchOnEnter) this.debouncedSearch();
       });
     }
+
     render() {
-      const { value } = this.state;
-      const { containerProps, ...rest } = this.props;
-      return /* @__PURE__ */ React2.createElement(WrappedComponent, {
-        ...rest,
+      const {
+        value
+      } = this.state;
+
+      const _this$props = this.props,
+            {
+        containerProps
+      } = _this$props,
+            rest = _objectWithoutProperties(_this$props, _excluded);
+
+      return /*#__PURE__*/jsx(WrappedComponent, _objectSpread(_objectSpread({}, rest), {}, {
         buttonRef: this.buttonRef,
-        containerProps,
+        containerProps: containerProps,
         onChange: this.handleChange,
         onKeyUp: this.handleKeyUp,
         onSearch: this.handleSearch,
-        value
-      });
+        value: value
+      }));
     }
+
   }
+
   Searchable.defaultProps = {
     onChange: () => null,
     onSearch: () => null,
     onKeyUp: () => null,
-    property: "all",
+    property: 'all',
     searchOnEnter: true,
     clearOnSearch: false,
     containerProps: {}
   };
-  Searchable.propTypes = {
-    containerProps: PropTypes.shape({}),
-    onChange: PropTypes.func,
-    onSearch: PropTypes.func,
-    onKeyUp: PropTypes.func,
-    property: PropTypes.string,
-    searchOnEnter: PropTypes.bool,
-    clearOnSearch: PropTypes.bool,
-    value: PropTypes.string
-  };
   return Searchable;
 };
-var withSearchable_default = withSearchable;
-export {
-  withSearchable_default as default
-};
-//# sourceMappingURL=withSearchable.js.map
+
+export { withSearchable as default };