@elliemae/ds-form 2.0.0-next.7 → 2.0.0-rc.10

package/esm/ComboBox/v3/propTypes.js

@@ -0,0 +1,21 @@
+import { PropTypes } from 'react-desc';
+
+const propTypes = {
+  placeholder: PropTypes.string.description('input s placeholder value').defaultValue(''),
+  options: PropTypes.oneOfType([PropTypes.array, PropTypes.object]).description('List of options').defaultValue([]),
+  selectedValues: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object]).description('Array of option or single option selected'),
+  autoFocus: PropTypes.bool.description('Whether the combo box uses auto focus or not').defaultValue('false'),
+  hasError: PropTypes.bool.description('Whether the combo box has error or not').defaultValue('false'),
+  onChange: PropTypes.func.description('function triggered when an option is selected it will send the options selected').defaultValue(''),
+  onSelectAll: PropTypes.func.description('function triggered when ALL button is selected from the header menu list').defaultValue(''),
+  onFilter: PropTypes.func.description('function triggered when user type in the combobox input').defaultValue(''),
+  onCreate: PropTypes.func.description('function triggered when user select "create" a new item whenever is not a match in the all option list').defaultValue(''),
+  onClearAll: PropTypes.func.description('function triggered when user select CLEAR button from the header menu list').defaultValue(''),
+  onMenuOpen: PropTypes.func.description('function triggered when user open the menu list').defaultValue(''),
+  inputMinWidth: PropTypes.any.description('Minimum width for the combo box input controller').defaultValue(undefined),
+  menuMinWidth: PropTypes.any.description('Minimum width for the dropdown menu').defaultValue(undefined),
+  menuMaxHeight: PropTypes.any.description('Maximum height for the dropdown menu').defaultValue(undefined),
+  withToggle: PropTypes.bool.description('POC purpose this prop will not remain').defaultValue('false')
+};
+
+export { propTypes };

package/esm/ComboBox/v3/utils/hooks/useKeyboardNavigation.js

@@ -0,0 +1,148 @@
+import 'core-js/modules/esnext.async-iterator.find.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.find.js';
+import { useContext, useCallback } from 'react';
+import { ComboBoxContext } from '../../ComboBoxCTX.js';
+import { getOptions, findInCircularList } from '../listHelper.js';
+
+const isOptionFocuseable = opt => !['section', 'separator'].includes(opt.type);
+
+const useKeyboardNavigation = () => {
+  const {
+    props: {
+      inline,
+      onSelectAll,
+      onKeyDown,
+      onChange,
+      onCreate,
+      options,
+      selectedValues,
+      onFilter
+    },
+    setShowPopover,
+    showPopover,
+    setShowSelectedValue,
+    focusOptionIdx,
+    inputRef,
+    setCurrentOption,
+    scrollOptionIntoView
+  } = useContext(ComboBoxContext);
+  const multiple = Array.isArray(selectedValues);
+  const selectableOptions = getOptions(options);
+  const currentItemIndex = options.findIndex(opt => opt.dsId === focusOptionIdx);
+  const currentItem = options.find(item => item.dsId === focusOptionIdx);
+  const selectOption = useCallback(() => {
+    if (multiple) {
+      if (inputRef.current) onFilter(inputRef.current.value);
+    } else {
+      onFilter('');
+      if (inputRef.current) inputRef.current.value = '';
+      setShowSelectedValue(true);
+    }
+
+    onChange(options.find(item => item.dsId === focusOptionIdx));
+    setShowPopover(multiple ? true : !showPopover);
+  }, [multiple, options, focusOptionIdx, setShowPopover, showPopover, onFilter, inputRef, setShowSelectedValue, onChange]);
+  const onInputKeyDown = useCallback(e => {
+    const targetElement = e.target; // =============================================================================
+    // CUSTOM KEYS
+    // =============================================================================
+
+    onKeyDown(e, currentItem); // =============================================================================
+    // ENTER KEY TO CREATE ELEMENTS
+    // ======================================================      =================
+
+    if (e.key === 'Enter' && onCreate && !selectableOptions.length) {
+      onCreate(targetElement.value);
+      onFilter('');
+      if (inputRef.current) inputRef.current.value = '';
+      return;
+    } // =============================================================================
+    // ENTER AND SPACE KEY SELECT OPTIONS AND OPEN CLOSE THE POPOVER
+    // =============================================================================
+
+
+    if (e.keyCode === 32 && targetElement.value === '' || e.key === 'Enter') {
+      e.preventDefault();
+
+      if (!showPopover && !inline) {
+        setShowPopover(true);
+      } else {
+        selectOption();
+      }
+    } // =============================================================================
+    // CTRL + ENTER + MULTIPLE: SELECT AND CLOSE MENU
+    // =============================================================================
+
+
+    if (e.key === 'Enter' && e.ctrlKey && multiple) {
+      setShowPopover(false);
+    }
+
+    if (e.key === 'a' && e.ctrlKey && multiple) {
+      onSelectAll();
+    } // =============================================================================
+    // ARROWS UP AND DOWN
+    // =============================================================================
+
+
+    if (e.key === 'ArrowDown') {
+      e.preventDefault();
+
+      if (showPopover || inline) {
+        const nextItemIndex = findInCircularList(options, currentItemIndex, isOptionFocuseable);
+        setCurrentOption(options[nextItemIndex].dsId);
+        scrollOptionIntoView(options[nextItemIndex].dsId);
+      } else {
+        setShowPopover(true);
+      }
+    }
+
+    if (e.key === 'ArrowUp') {
+      e.preventDefault();
+
+      if (showPopover || inline) {
+        const nextItemIndex = findInCircularList(options, currentItemIndex, isOptionFocuseable, -1);
+        setCurrentOption(options[nextItemIndex].dsId);
+        scrollOptionIntoView(options[nextItemIndex].dsId);
+      } else {
+        setShowPopover(true);
+        setTimeout(() => {
+          const nextItemIndex = findInCircularList(options, 0, isOptionFocuseable, -1);
+          setCurrentOption(options[nextItemIndex].dsId);
+          scrollOptionIntoView(options[nextItemIndex].dsId);
+        });
+      }
+    } // =============================================================================
+    // ESCAPE
+    // =============================================================================
+
+
+    if (e.key === 'Escape' && !inline) {
+      setShowPopover(false); // TODO confirm funcionality
+      // onFilter('');
+      // inputRef.current.value = '';
+    } // =============================================================================
+    // BACKSPACE
+    // =============================================================================
+
+
+    if (e.key === 'Backspace' && targetElement.value.length <= 0 && !inline) {
+      if (multiple && !targetElement.value) {
+        if (selectedValues.length > 0) onChange(selectedValues[selectedValues.length - 1]);
+      } else {
+        onChange(null);
+      }
+
+      onFilter('');
+      setShowSelectedValue(true);
+    }
+
+    if (e.key === 'Tab' && inline) ;
+  }, [scrollOptionIntoView, currentItemIndex, options, currentItem, selectableOptions, inputRef, multiple, showPopover, selectedValues, inline, onKeyDown, onSelectAll, onChange, onCreate, onFilter, setCurrentOption, setShowPopover, setShowSelectedValue, selectOption]);
+  return {
+    onInputKeyDown
+  };
+};
+
+export { useKeyboardNavigation };

package/esm/ComboBox/v3/utils/hooks/useOnElementResize.js

@@ -0,0 +1,33 @@
+import 'core-js/modules/web.dom-collections.iterator.js';
+import { useState, useRef, useEffect, useMemo } from 'react';
+
+// Taken and modified from https://stackoverflow.com/a/60218754
+
+const useOnElementResize = targetRef => {
+  var _targetRef$current, _targetRef$current2;
+
+  const [width, setWidth] = useState(targetRef.current ? (_targetRef$current = targetRef.current) === null || _targetRef$current === void 0 ? void 0 : _targetRef$current.offsetWidth : 0);
+  const [height, setHeight] = useState(targetRef.current ? (_targetRef$current2 = targetRef.current) === null || _targetRef$current2 === void 0 ? void 0 : _targetRef$current2.offsetWidth : 0);
+  const observer = useRef(null);
+  useEffect(() => {
+    function outputsize() {
+      if (targetRef.current) {
+        setWidth(targetRef.current.offsetWidth);
+        setHeight(targetRef.current.offsetHeight);
+      }
+    }
+
+    observer.current = new ResizeObserver(outputsize).observe(targetRef.current);
+    return () => {
+      var _observer$current;
+
+      (_observer$current = observer.current) === null || _observer$current === void 0 ? void 0 : _observer$current.disconnect();
+    };
+  }, [targetRef]);
+  return useMemo(() => ({
+    width,
+    height
+  }), [width, height]);
+};
+
+export { useOnElementResize };

package/esm/ComboBox/v3/utils/listHelper.js

@@ -0,0 +1,30 @@
+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.some.js';
+import 'core-js/modules/esnext.iterator.some.js';
+
+const getSelectableOptions = options => options ? options.filter(option => option.type === 'option' && !option.disabled) : [];
+const getOptions = options => options ? options.filter(option => option.type === 'option') : [];
+const isSelectedValueEmpty = value => Array.isArray(value) ? value.length === 0 : !value;
+const isSelectedValueMultiple = value => Array.isArray(value);
+const isSelected = (value, activeOption) => {
+  if (isSelectedValueMultiple(value)) {
+    const multiValue = value;
+    return multiValue.some(item => (item === null || item === void 0 ? void 0 : item.value) === (activeOption === null || activeOption === void 0 ? void 0 : activeOption.value));
+  }
+
+  const singleValue = value;
+  return (singleValue === null || singleValue === void 0 ? void 0 : singleValue.value) === activeOption.value;
+};
+const findInCircularList = function (list, from, criteria) {
+  let step = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 1;
+
+  for (let i = (from + step + list.length) % list.length; i !== from; i = (i + step + list.length) % list.length) {
+    if (criteria(list[i])) return i;
+  }
+
+  return from; // return same item
+};
+
+export { findInCircularList, getOptions, getSelectableOptions, isSelected, isSelectedValueEmpty, isSelectedValueMultiple };

package/esm/ComboBoxFreeSolo/ComboBoxFreeSolo.js

@@ -1,9 +1,15 @@
+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 _jsx from '@babel/runtime/helpers/esm/jsx';
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import 'react';
 import { noop } from 'lodash';
 import '../ComboBox/v1/DSComboBox.js';
 import { DSComboBox2 } from '../ComboBox/v2/Combobox.js';
+import '../ComboBox/v3/ComboBox.js';
 import { MultiValueLabel } from './components/MultiValueLabel.js';
 import { MultiValueRemove } from './components/MultiValueRemove.js';
 import { SingleValue } from './components/SingleValue.js';
@@ -35,22 +41,23 @@ const customStyles = {
   })
 };
 
-function ComboBoxFreeSolo({
-  isMulti = false,
-  options = {},
-  value = [],
-  onChange = noop,
-  onChangeV2 = noop,
-  onInputChange = noop,
-  onFocus = noop,
-  onBlur = noop,
-  containerProps = {},
-  disabled = false,
-  menuIsOpen = false,
-  placeholder = 'Select values',
-  formatCreateLabel = val => "Create ".concat(val),
-  maxOptions = undefined
-}) {
+function ComboBoxFreeSolo(_ref) {
+  let {
+    isMulti = false,
+    options = {},
+    value = [],
+    onChange = noop,
+    onChangeV2 = noop,
+    onInputChange = noop,
+    onFocus = noop,
+    onBlur = noop,
+    containerProps = {},
+    disabled = false,
+    menuIsOpen = false,
+    placeholder = 'Select values',
+    formatCreateLabel = val => "Create ".concat(val),
+    maxOptions = undefined
+  } = _ref;
   return /*#__PURE__*/_jsx(DSComboBox2, {
     isFreeSolo: true,
     clearable: true,

package/esm/ComboBoxFreeSolo/components/MultiValueLabel.js

@@ -10,21 +10,27 @@ const PillLabel = /*#__PURE__*/styled.span.withConfig({
   componentId: "sc-1qoa267-1"
 })(["margin:0 4px;color:", ";white-space:nowrap;text-overflow:ellipsis;overflow:hidden;"], props => props.theme.colors.neutral[800]);
 
-const RemovablePill = ({
-  label,
-  clear
-}) => /*#__PURE__*/jsxs(Fragment, {
-  children: [/*#__PURE__*/_jsx(RemovablePillWrapper, {
-    "data-testid": "pill-wrapper"
-  }, void 0, /*#__PURE__*/_jsx(PillLabel, {}, void 0, label)), clear]
-});
+const RemovablePill = _ref => {
+  let {
+    label,
+    clear
+  } = _ref;
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/_jsx(RemovablePillWrapper, {
+      "data-testid": "pill-wrapper"
+    }, void 0, /*#__PURE__*/_jsx(PillLabel, {}, void 0, label)), clear]
+  });
+};
 
-const MultiValueLabel = ({
-  children,
-  clear
-}) => /*#__PURE__*/_jsx(RemovablePill, {
-  label: children,
-  clear: clear
-});
+const MultiValueLabel = _ref2 => {
+  let {
+    children,
+    clear
+  } = _ref2;
+  return /*#__PURE__*/_jsx(RemovablePill, {
+    label: children,
+    clear: clear
+  });
+};
 
 export { MultiValueLabel };

package/esm/ComboBoxFreeSolo/components/MultiValueRemove.js

@@ -1,9 +1,14 @@
+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 _jsx from '@babel/runtime/helpers/esm/jsx';
 import 'react';
 import styled from 'styled-components';
 import { components } from 'react-select';
-import CloseXsmall from '@elliemae/ds-icons/CloseXsmall';
+import { CloseXsmall } from '@elliemae/ds-icons';
 import { jsx } from 'react/jsx-runtime';
 
 var _PillCloseAddon;

package/esm/ComboBoxFreeSolo/components/SingleValue.js

@@ -1,3 +1,8 @@
+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 _jsx from '@babel/runtime/helpers/esm/jsx';
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import 'react';

package/esm/ComboBoxFreeSolo/components/SingleValueRemove.js

@@ -1,9 +1,14 @@
+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 _jsx from '@babel/runtime/helpers/esm/jsx';
 import 'react';
 import { components } from 'react-select';
 import styled from 'styled-components';
-import CloseXsmall from '@elliemae/ds-icons/CloseXsmall';
+import { CloseXsmall } from '@elliemae/ds-icons';
 import DSButton from '@elliemae/ds-button';
 import { jsx } from 'react/jsx-runtime';
 

package/esm/DateInput/DSDateInput.js

@@ -1,10 +1,15 @@
+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 _jsx from '@babel/runtime/helpers/esm/jsx';
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
 import 'core-js/modules/web.dom-collections.iterator.js';
 import { useState, useEffect, useCallback } from 'react';
 import { describe } from 'react-desc';
-import { runAll } from '@elliemae/ds-utilities/utils';
+import { runAll } from '@elliemae/ds-utilities';
 import DSInput from '../Input/DSInput.js';
 import DateInputImpl from './components/DateInputImpl.js';
 export { default as DateInputImpl } from './components/DateInputImpl.js';
@@ -18,26 +23,27 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
-const DSDateInput = ({
-  innerRef,
-  className,
-  style,
-  onFocus,
-  onBlur,
-  onClear,
-  onChange,
-  onKeyDown,
-  onError,
-  format,
-  value,
-  clearable,
-  disabled,
-  yearMaxRange,
-  yearMinRange,
-  containerProps,
-  // TODO remove and keep `true` behavior ( PUI-4141 )
-  INTERNAL_V2_NO_MUTATION
-}) => {
+const DSDateInput = _ref => {
+  let {
+    innerRef,
+    className,
+    style,
+    onFocus,
+    onBlur,
+    onClear,
+    onChange,
+    onKeyDown,
+    onError,
+    format,
+    value,
+    clearable,
+    disabled,
+    yearMaxRange,
+    yearMinRange,
+    containerProps,
+    // TODO remove and keep `true` behavior ( PUI-4141 )
+    INTERNAL_V2_NO_MUTATION
+  } = _ref;
   const [valueDate, setValueDate] = useState(value);
   useEffect(() => {
     if (value) {
@@ -46,7 +52,7 @@ const DSDateInput = ({
   }, [value]);
   const handleOnClear = useCallback(() => {
     runAll(onClear, setValueDate(''));
-  }, []);
+  }, [onClear]);
   const handleKeyDown = useCallback((e, date, inputOnKeyDown) => {
     inputOnKeyDown(e, date);
   }, []);
@@ -58,12 +64,12 @@ const DSDateInput = ({
     className: "".concat(className, " input-date-input "),
     clearable: clearable,
     containerProps: containerProps,
-    customInputType: _ref => {
+    customInputType: _ref2 => {
       let {
         onChange: inputOnChange,
         onKeyDown: inputOnKeyDown
-      } = _ref,
-          restInputProps = _objectWithoutProperties(_ref, _excluded);
+      } = _ref2,
+          restInputProps = _objectWithoutProperties(_ref2, _excluded);
 
       return /*#__PURE__*/jsx(DateInputImpl, _objectSpread(_objectSpread({
         INTERNAL_V2_NO_MUTATION: INTERNAL_V2_NO_MUTATION,

package/esm/DateInput/components/DateInputImpl.js

@@ -1,3 +1,8 @@
+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 _jsx from '@babel/runtime/helpers/esm/jsx';
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import { useRef, useMemo } from 'react';
@@ -17,22 +22,23 @@ const getVisibleTimeByFormat = format => ({
   showYear: format.indexOf('YYYY') > -1
 });
 
-const DateInputImpl = ({
-  format,
-  innerRef,
-  onBlur,
-  onChange,
-  onKeyDown,
-  onError,
-  className,
-  value,
-  disabled,
-  yearMaxRange,
-  yearMinRange,
-  onFocus,
-  // eslint-disable-next-line react/prop-types
-  INTERNAL_V2_NO_MUTATION
-}) => {
+const DateInputImpl = _ref => {
+  let {
+    format,
+    innerRef,
+    onBlur,
+    onChange,
+    onKeyDown,
+    onError,
+    className,
+    value,
+    disabled,
+    yearMaxRange,
+    yearMinRange,
+    onFocus,
+    // eslint-disable-next-line react/prop-types
+    INTERNAL_V2_NO_MUTATION
+  } = _ref;
   const inputContainerRef = useRef();
 
   const handleFocus = e => {
@@ -43,7 +49,7 @@ const DateInputImpl = ({
     }
   };
 
-  const visibleInputs = useMemo(() => getVisibleTimeByFormat(format));
+  const visibleInputs = useMemo(() => getVisibleTimeByFormat(format), [format]);
   return /*#__PURE__*/_jsx(DateInputContainer, {
     className: className,
     disabled: disabled,