@elliemae/ds-controlled-form 2.3.2-next.0 → 2.4.0-rc.0

package/types/autocomplete/parts/controls/useMaskedOnChange.d.ts

@@ -0,0 +1,2 @@
+declare const useMaskedOnChange: () => any;
+export { useMaskedOnChange };

package/types/autocomplete/react-desc-prop-types.d.ts

@@ -0,0 +1,54 @@
+import React from 'react';
+export declare function noop<T extends unknown[]>(..._args: T): void;
+export declare namespace DSAutocompleteT {
+    interface CommonItemOptions {
+        dsId: string;
+        disabled?: boolean;
+        render?: React.ComponentType<unknown>;
+    }
+    interface ItemSeparatorOptions extends CommonItemOptions {
+        type: 'separator';
+    }
+    interface ItemSectionOptions extends CommonItemOptions {
+        type: 'section';
+        label: string;
+    }
+    interface ItemOption extends CommonItemOptions {
+        value: string;
+        label: string;
+        type: 'option';
+    }
+    type OptionTypes = ItemOption | ItemSectionOptions | ItemSeparatorOptions;
+    type SelectedOptionsT = ItemOption[] | ItemOption | null;
+    interface PropsOptional {
+        placeholder?: string;
+        autoFocus?: boolean;
+        onFilter?: (value: string) => void;
+    }
+    interface RequiredProps {
+        options: OptionTypes[];
+        value: string;
+    }
+    interface DefaultProps {
+        startPlacementPreference: string;
+        placementOrderPreference: string[];
+        hasError: boolean;
+        withoutPortal: boolean;
+        zIndex: number;
+        disabled: boolean;
+        innerRef: React.RefObject<HTMLInputElement>;
+        inputProps: object;
+    }
+    interface Props extends Partial<DefaultProps>, RequiredProps, PropsOptional {
+    }
+    interface InternalProps extends DefaultProps, RequiredProps, PropsOptional {
+    }
+}
+export declare const propTypes: {
+    placeholder: import("@elliemae/ds-props-helpers/types/propTypes/types").ReactDescT;
+    options: import("@elliemae/ds-props-helpers/types/propTypes/types").ReactDescT;
+    value: import("@elliemae/ds-props-helpers/types/propTypes/types").ReactDescT;
+    autoFocus: import("@elliemae/ds-props-helpers/types/propTypes/types").ReactDescT;
+    hasError: import("@elliemae/ds-props-helpers/types/propTypes/types").ReactDescT;
+    onChange: import("@elliemae/ds-props-helpers/types/propTypes/types").ReactDescT;
+};

package/types/autocomplete/sharedTypes.d.ts

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+import { useVirtual } from 'react-virtual';
+import { DSAutocompleteT } from './react-desc-prop-types';
+export declare namespace DSAutoCompleteInternalsT {
+    interface AutocompleteContext {
+        props: DSAutocompleteT.InternalProps;
+        virtualListHelpers?: ReturnType<typeof useVirtual>;
+        showPopover: boolean;
+        setShowPopover: React.Dispatch<React.SetStateAction<boolean>>;
+        referenceElement: HTMLElement | null;
+        setReferenceElement: React.Dispatch<React.SetStateAction<HTMLElement | null>>;
+        scrollOptionIntoView: (dsId: string, opts?: any) => void;
+        inputRef: React.RefObject<HTMLInputElement>;
+        listRef: React.RefObject<HTMLDivElement>;
+        wrapperListRef: React.RefObject<HTMLDivElement>;
+        controlsWrapperRef: React.RefObject<HTMLDivElement>;
+        focusOptionIdx: string;
+        setCurrentOption: React.Dispatch<React.SetStateAction<string>>;
+    }
+}

package/types/combobox/parts/header-list/useHeaderListHandlers.d.ts

@@ -5,7 +5,7 @@ declare const useHeaderListHandlers: () => {
     handleFilterSelectionBtnOnTab: (e: React.KeyboardEvent) => void;
     handleOnMouseDown: (e: React.MouseEvent) => void;
     handleCheckAllOnTab: (e: React.KeyboardEvent) => void;
-    handleSelectAllCheckboxChange: () => void;
+    handleSelectAllCheckboxChange: (e: React.MouseEvent | React.KeyboardEvent) => void;
     checkboxStatus: boolean | "mixed";
 };
 export { useHeaderListHandlers };

package/types/combobox/parts/multi-selected-values-container/RemovableSelectedValuePill.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { DSComboboxT } from '../../react-desc-prop-types';
+export declare const RemovableSelectedValuePill: React.ComponentType<{
+    pill: DSComboboxT.ItemOption;
+}>;

package/types/combobox/react-desc-prop-types.d.ts

@@ -36,15 +36,14 @@ export declare namespace DSComboboxT {
         onMenuOpen?: () => void;
         onMenuClose?: () => void;
         onCancel?: () => void;
-        onSelectAll?: () => void;
-        onClearAll?: () => void;
         onBlur?: () => void;
-        onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>, value: ItemOption | undefined) => void;
+        onSelectAll?: (suggestedValue: OptionTypes[] | [], event: React.MouseEvent | React.KeyboardEvent) => null;
+        onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>, value: ItemOption) => void;
     }
     interface RequiredProps {
         options: OptionTypes[];
         selectedValues: SelectedOptionsT;
-        onChange: (value: ItemOption | null) => void;
+        onChange: (suggestedValue: ItemOption | OptionTypes[] | null, selectedOption: ItemOption, event: React.MouseEvent | React.KeyboardEvent) => void;
     }
     interface DefaultProps {
         startPlacementPreference: string;

package/types/combobox/sharedTypes.d.ts

@@ -28,3 +28,4 @@ export declare namespace DSComboboxInternalsT {
     }
 }
 export declare const isSeparator: (el: DSComboboxT.OptionTypes | undefined) => el is DSComboboxT.ItemSeparatorOptions;
+export declare const isOption: (el: DSComboboxT.OptionTypes | undefined) => el is DSComboboxT.ItemOption;

package/types/combobox/utils/listHelper.d.ts

@@ -5,3 +5,6 @@ export declare const isSelectedValueEmpty: (value: DSComboboxT.SelectedOptionsT)
 export declare const isSelectedValueMultiple: (value: DSComboboxT.SelectedOptionsT) => boolean;
 export declare const isSelected: (value: DSComboboxT.SelectedOptionsT, activeOption: DSComboboxT.ItemOption) => boolean;
 export declare const findInCircularList: (list: DSComboboxT.OptionTypes[], from: number, criteria: (item: DSComboboxT.OptionTypes) => boolean, step?: number) => number;
+export declare const getFirstOption: (options: DSComboboxT.OptionTypes[], selectedValues: DSComboboxT.SelectedOptionsT, inputValue: string) => string;
+export declare const getSuggestedValueOnChange: (selectedOption: DSComboboxT.ItemOption, selectedValues: DSComboboxT.SelectedOptionsT) => DSComboboxT.ItemOption | DSComboboxT.ItemOption[] | null;
+export declare const getLastValueSelected: (selectedValues: DSComboboxT.SelectedOptionsT) => DSComboboxT.ItemOption | null;

package/cjs/combobox/utils/hooks/useKeyboardNavigation.js

@@ -1,168 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-require('core-js/modules/esnext.async-iterator.find.js');
-require('core-js/modules/esnext.iterator.constructor.js');
-require('core-js/modules/esnext.iterator.find.js');
-var React = require('react');
-var ComboBoxCTX = require('../../ComboBoxCTX.js');
-var listHelper = require('../listHelper.js');
-var constants = require('../../constants.js');
-
-const isOptionFocuseable = opt => !['section', 'separator'].includes(opt.type) && !opt.disabled;
-
-const useKeyboardNavigation = () => {
-  const {
-    props: {
-      inline,
-      onSelectAll,
-      onCancel,
-      onKeyDown,
-      onChange,
-      onCreate,
-      options,
-      selectedValues,
-      onFilter,
-      withoutPortal
-    },
-    setShowPopover,
-    setInputValue,
-    inputValue,
-    showPopover,
-    focusOptionIdx,
-    setFocusOptionIdx,
-    selectAllCheckboxRef,
-    toggleSelectionButtonRef
-  } = React.useContext(ComboBoxCTX.ComboBoxContext);
-  const multiple = Array.isArray(selectedValues);
-  const selectableOptions = listHelper.getOptions(options);
-  const currentItemIndex = options.findIndex(opt => opt.dsId === focusOptionIdx);
-  const currentItem = options.find(item => item.dsId === focusOptionIdx);
-  const selectOption = React.useCallback(() => {
-    const selectedOption = options.find(item => item.dsId === focusOptionIdx);
-
-    if (!selectedOption.disabled) {
-      if (onFilter) onFilter('');
-      setInputValue('');
-      onChange(selectedOption);
-      if (!multiple) setShowPopover(false);
-    }
-  }, [multiple, options, setInputValue, focusOptionIdx, setShowPopover, onFilter, onChange]);
-  const onInputKeyDown = React.useCallback(e => {
-    // =============================================================================
-    // CUSTOM KEYS
-    // =============================================================================
-    if (onKeyDown) onKeyDown(e, currentItem);
-
-    if (!['Escape', 'Tab', 'ArrowLeft', 'ArrowRight'].includes(e.key)) {
-      setShowPopover(true);
-    } // =============================================================================
-    // ESCAPE
-    // =============================================================================
-
-
-    if (e.key === 'Escape') {
-      if (onCancel) onCancel();
-
-      if (inputValue) {
-        if (onFilter) onFilter('');
-        setInputValue('');
-      }
-
-      if (!inline) setShowPopover(false);
-    } // =============================================================================
-    // ENTER KEY TO CREATE ELEMENTS
-    // =============================================================================
-
-
-    if (e.key === 'Enter' && (currentItem === null || currentItem === void 0 ? void 0 : currentItem.type) === constants.INTERNAL_MENU_OPTION_TYPES.CREATABLE && onCreate) {
-      onCreate(inputValue);
-      if (onFilter) onFilter('');
-      setInputValue('');
-      return;
-    } // =============================================================================
-    // Enter and space on selection
-    // =============================================================================
-
-
-    if (e.key === 'Enter' || e.keyCode === 32 && e.altKey) {
-      e.preventDefault();
-      e.stopPropagation();
-
-      if (focusOptionIdx !== '' && showPopover) {
-        selectOption();
-      }
-    }
-
-    if (e.key === 'Enter' && e.altKey) {
-      setShowPopover(false);
-    }
-
-    if (e.key === 'a' && e.ctrlKey && multiple) {
-      if (onSelectAll) onSelectAll();
-    } // =============================================================================
-    // ARROWS UP AND DOWN: LOGIC TO CALCULATE NEXT OR PREV ITEM TO PSEUDOFOCUS FROM INPUT
-    // =============================================================================
-
-
-    if (e.key === 'ArrowDown') {
-      e.preventDefault();
-      e.stopPropagation();
-
-      if ((showPopover || inline) && selectableOptions.length) {
-        const nextItemIndex = listHelper.findInCircularList(options, currentItemIndex, isOptionFocuseable);
-        setFocusOptionIdx(options[nextItemIndex].dsId);
-      }
-    }
-
-    if (e.key === 'ArrowUp') {
-      e.preventDefault();
-      e.stopPropagation();
-      if (!selectableOptions.length) return;
-      const prevItemIndex = listHelper.findInCircularList(options, currentItemIndex, isOptionFocuseable, -1);
-
-      if (showPopover || inline) {
-        setFocusOptionIdx(options[prevItemIndex].dsId);
-      } else {
-        setShowPopover(true);
-        setTimeout(() => {
-          const nextItemIndex = listHelper.findInCircularList(options, 0, isOptionFocuseable, -1);
-          setFocusOptionIdx(options[nextItemIndex].dsId);
-        });
-      }
-    } // =============================================================================
-    // BACKSPACE
-    // =============================================================================
-
-
-    if (e.key === 'Backspace' && inputValue.length <= 0 && !inline) {
-      if (multiple && !inputValue) {
-        if (selectedValues.length > 0) onChange(selectedValues[selectedValues.length - 1]);
-      } else {
-        onChange(null);
-      }
-
-      if (onFilter) onFilter('');
-    }
-
-    if (e.key === 'Tab' && !inline && !withoutPortal) {
-      var _selectAllCheckboxRef;
-
-      const element = (_selectAllCheckboxRef = selectAllCheckboxRef.current) !== null && _selectAllCheckboxRef !== void 0 ? _selectAllCheckboxRef : toggleSelectionButtonRef.current;
-
-      if (element) {
-        e.preventDefault();
-        element.focus();
-      }
-    } // waiting for validation from ux
-    // if (e.key === 'Tab' && multiple) {
-    // }
-
-  }, [onKeyDown, currentItem, onCreate, multiple, inputValue, inline, withoutPortal, setShowPopover, onCancel, onFilter, setInputValue, focusOptionIdx, showPopover, selectOption, onSelectAll, selectableOptions.length, options, currentItemIndex, setFocusOptionIdx, selectedValues, onChange, selectAllCheckboxRef, toggleSelectionButtonRef]);
-  return {
-    onInputKeyDown
-  };
-};
-
-exports.useKeyboardNavigation = useKeyboardNavigation;

package/cjs/combobox/utils/hooks/useOnElementResize.js

@@ -1,37 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-require('core-js/modules/web.dom-collections.iterator.js');
-var React = require('react');
-
-// Taken and modified from https://stackoverflow.com/a/60218754
-
-const useOnElementResize = targetRef => {
-  var _targetRef$current, _targetRef$current2;
-
-  const [width, setWidth] = React.useState(targetRef.current ? (_targetRef$current = targetRef.current) === null || _targetRef$current === void 0 ? void 0 : _targetRef$current.offsetWidth : 0);
-  const [height, setHeight] = React.useState(targetRef.current ? (_targetRef$current2 = targetRef.current) === null || _targetRef$current2 === void 0 ? void 0 : _targetRef$current2.offsetWidth : 0);
-  const observer = React.useRef(null);
-  React.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 React.useMemo(() => ({
-    width,
-    height
-  }), [width, height]);
-};
-
-exports.useOnElementResize = useOnElementResize;

package/esm/combobox/utils/hooks/useKeyboardNavigation.js

@@ -1,164 +0,0 @@
-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';
-import { INTERNAL_MENU_OPTION_TYPES } from '../../constants.js';
-
-const isOptionFocuseable = opt => !['section', 'separator'].includes(opt.type) && !opt.disabled;
-
-const useKeyboardNavigation = () => {
-  const {
-    props: {
-      inline,
-      onSelectAll,
-      onCancel,
-      onKeyDown,
-      onChange,
-      onCreate,
-      options,
-      selectedValues,
-      onFilter,
-      withoutPortal
-    },
-    setShowPopover,
-    setInputValue,
-    inputValue,
-    showPopover,
-    focusOptionIdx,
-    setFocusOptionIdx,
-    selectAllCheckboxRef,
-    toggleSelectionButtonRef
-  } = 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(() => {
-    const selectedOption = options.find(item => item.dsId === focusOptionIdx);
-
-    if (!selectedOption.disabled) {
-      if (onFilter) onFilter('');
-      setInputValue('');
-      onChange(selectedOption);
-      if (!multiple) setShowPopover(false);
-    }
-  }, [multiple, options, setInputValue, focusOptionIdx, setShowPopover, onFilter, onChange]);
-  const onInputKeyDown = useCallback(e => {
-    // =============================================================================
-    // CUSTOM KEYS
-    // =============================================================================
-    if (onKeyDown) onKeyDown(e, currentItem);
-
-    if (!['Escape', 'Tab', 'ArrowLeft', 'ArrowRight'].includes(e.key)) {
-      setShowPopover(true);
-    } // =============================================================================
-    // ESCAPE
-    // =============================================================================
-
-
-    if (e.key === 'Escape') {
-      if (onCancel) onCancel();
-
-      if (inputValue) {
-        if (onFilter) onFilter('');
-        setInputValue('');
-      }
-
-      if (!inline) setShowPopover(false);
-    } // =============================================================================
-    // ENTER KEY TO CREATE ELEMENTS
-    // =============================================================================
-
-
-    if (e.key === 'Enter' && (currentItem === null || currentItem === void 0 ? void 0 : currentItem.type) === INTERNAL_MENU_OPTION_TYPES.CREATABLE && onCreate) {
-      onCreate(inputValue);
-      if (onFilter) onFilter('');
-      setInputValue('');
-      return;
-    } // =============================================================================
-    // Enter and space on selection
-    // =============================================================================
-
-
-    if (e.key === 'Enter' || e.keyCode === 32 && e.altKey) {
-      e.preventDefault();
-      e.stopPropagation();
-
-      if (focusOptionIdx !== '' && showPopover) {
-        selectOption();
-      }
-    }
-
-    if (e.key === 'Enter' && e.altKey) {
-      setShowPopover(false);
-    }
-
-    if (e.key === 'a' && e.ctrlKey && multiple) {
-      if (onSelectAll) onSelectAll();
-    } // =============================================================================
-    // ARROWS UP AND DOWN: LOGIC TO CALCULATE NEXT OR PREV ITEM TO PSEUDOFOCUS FROM INPUT
-    // =============================================================================
-
-
-    if (e.key === 'ArrowDown') {
-      e.preventDefault();
-      e.stopPropagation();
-
-      if ((showPopover || inline) && selectableOptions.length) {
-        const nextItemIndex = findInCircularList(options, currentItemIndex, isOptionFocuseable);
-        setFocusOptionIdx(options[nextItemIndex].dsId);
-      }
-    }
-
-    if (e.key === 'ArrowUp') {
-      e.preventDefault();
-      e.stopPropagation();
-      if (!selectableOptions.length) return;
-      const prevItemIndex = findInCircularList(options, currentItemIndex, isOptionFocuseable, -1);
-
-      if (showPopover || inline) {
-        setFocusOptionIdx(options[prevItemIndex].dsId);
-      } else {
-        setShowPopover(true);
-        setTimeout(() => {
-          const nextItemIndex = findInCircularList(options, 0, isOptionFocuseable, -1);
-          setFocusOptionIdx(options[nextItemIndex].dsId);
-        });
-      }
-    } // =============================================================================
-    // BACKSPACE
-    // =============================================================================
-
-
-    if (e.key === 'Backspace' && inputValue.length <= 0 && !inline) {
-      if (multiple && !inputValue) {
-        if (selectedValues.length > 0) onChange(selectedValues[selectedValues.length - 1]);
-      } else {
-        onChange(null);
-      }
-
-      if (onFilter) onFilter('');
-    }
-
-    if (e.key === 'Tab' && !inline && !withoutPortal) {
-      var _selectAllCheckboxRef;
-
-      const element = (_selectAllCheckboxRef = selectAllCheckboxRef.current) !== null && _selectAllCheckboxRef !== void 0 ? _selectAllCheckboxRef : toggleSelectionButtonRef.current;
-
-      if (element) {
-        e.preventDefault();
-        element.focus();
-      }
-    } // waiting for validation from ux
-    // if (e.key === 'Tab' && multiple) {
-    // }
-
-  }, [onKeyDown, currentItem, onCreate, multiple, inputValue, inline, withoutPortal, setShowPopover, onCancel, onFilter, setInputValue, focusOptionIdx, showPopover, selectOption, onSelectAll, selectableOptions.length, options, currentItemIndex, setFocusOptionIdx, selectedValues, onChange, selectAllCheckboxRef, toggleSelectionButtonRef]);
-  return {
-    onInputKeyDown
-  };
-};
-
-export { useKeyboardNavigation };

package/esm/combobox/utils/hooks/useOnElementResize.js

@@ -1,33 +0,0 @@
-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/types/combobox/utils/hooks/useKeyboardNavigation.d.ts

@@ -1,4 +0,0 @@
-/// <reference types="react" />
-export declare const useKeyboardNavigation: () => {
-    onInputKeyDown: import("react").KeyboardEventHandler<HTMLInputElement>;
-};

package/types/combobox/utils/hooks/useOnElementResize.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-declare const useOnElementResize: (targetRef: React.RefObject<HTMLDivElement>) => Record<'width' | 'height', number>;
-export { useOnElementResize };