@elliemae/ds-controlled-form 2.2.0-next.7 → 2.2.0-next.8

package/cjs/controlled-checkbox/propTypes.js

@@ -15,7 +15,7 @@ const propTypes = {
   disabled: reactDesc.PropTypes.bool.description('Whether the checkbox is disabled or not.'),
   ariaControls: reactDesc.PropTypes.string.description('This string is required when you use a mixed checkbox. It contains all the ids that this checkbox is controlling.'),
   ariaLabel: reactDesc.PropTypes.string.description('Checkbox aria-label property. This property is going to be required if there is no label property added.'),
-  innerRef: reactDesc.PropTypes.func.description('Checkbox input ref.'),
+  innerRef: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.func, reactDesc.PropTypes.object]).description('Checkbox input ref.'),
   autoFocus: reactDesc.PropTypes.bool.description('Whether you want the checkbox to be autofocused on render')
 };
 

package/cjs/controlled-combobox/ComboBoxCTX.js

@@ -19,6 +19,8 @@ const defaultProps = {
   onSelectAll: lodash.noop,
   onCreate: lodash.noop,
   withToggle: false,
+  withoutPortal: true,
+  zIndex: 10,
   onChange: lodash.noop,
   onKeyDown: lodash.noop,
   onFilter: lodash.noop,
@@ -39,6 +41,8 @@ const defaultContext = {
   wrapperListRef: /*#__PURE__*/React.createRef(),
   controlsWrapperRef: /*#__PURE__*/React.createRef(),
   selectedOptionsRef: /*#__PURE__*/React.createRef(),
+  selectAllCheckboxRef: /*#__PURE__*/React.createRef(),
+  toggleSelectionButtonRef: /*#__PURE__*/React.createRef(),
   showSelectedValue: false,
   setShowSelectedValue: lodash.noop,
   focusOptionIdx: '',

package/cjs/controlled-combobox/config/useComboBox.js

@@ -36,6 +36,8 @@ const useComboBox = props => {
   const wrapperListRef = React.useRef(null);
   const selectedOptionsRef = React.useRef(null);
   const controlsWrapperRef = React.useRef(null);
+  const selectAllCheckboxRef = React.useRef(null);
+  const toggleSelectionButtonRef = React.useRef(null);
   const pillGroupRef = React.useRef(null);
   const propsWithDefaults = useGetPropsWithDefault.useGetComboBoxWithDefaultsProps(props);
   const {
@@ -125,6 +127,8 @@ const useComboBox = props => {
     focusOptionIdx,
     selectedOptionsRef,
     controlsWrapperRef,
+    selectAllCheckboxRef,
+    toggleSelectionButtonRef,
     hasFocus,
     pillGroupRef,
     showSelectedOptions,
@@ -136,7 +140,7 @@ const useComboBox = props => {
     setShowSelectedValue,
     setReferenceElement,
     setShowPopover
-  }), [scrollOptionIntoView, correctOptions, propsWithDefaults, virtualListHelpers, focusOptionIdx, showSelectedValue, wrapperListRef, showSelectedOptions, showPopover, pillGroupRef, referenceElement, inputRef, selectedOptionsRef, controlsWrapperRef, hasFocus, listRef]);
+  }), [scrollOptionIntoView, correctOptions, propsWithDefaults, virtualListHelpers, focusOptionIdx, showSelectedValue, wrapperListRef, showSelectedOptions, showPopover, pillGroupRef, referenceElement, inputRef, selectedOptionsRef, controlsWrapperRef, selectAllCheckboxRef, toggleSelectionButtonRef, hasFocus, listRef]);
   return ctx;
 };
 

package/cjs/controlled-combobox/parts/container/Container.js

@@ -22,7 +22,9 @@ const Container = () => {
     props: {
       inline,
       startPlacementPreference,
-      placementOrderPreference
+      placementOrderPreference,
+      withoutPortal,
+      zIndex
     },
     showPopover,
     inputRef,
@@ -53,10 +55,10 @@ const Container = () => {
       showPopover: showPopover,
       startPlacementPreference: startPlacementPreference,
       placementOrderPreference: placementOrderPreference,
-      withoutPortal: true,
+      withoutPortal: withoutPortal,
       withoutArrow: true,
       withoutAnimation: true,
-      zIndex: 10
+      zIndex: zIndex
     }, void 0, /*#__PURE__*/_jsx__default["default"](styled.StyledPopperWrapper, {
       tabIndex: -1,
       onMouseDown: handleMouseDown

package/cjs/controlled-combobox/parts/header-list/HeaderList.js

@@ -27,7 +27,9 @@ const HeaderList = () => {
       selectedValues
     },
     showSelectedOptions,
-    inputRef
+    inputRef,
+    selectAllCheckboxRef,
+    toggleSelectionButtonRef
   } = React.useContext(ComboBoxCTX.ComboBoxContext);
   const isSelectAllSupplied = onSelectAll !== lodash.noop;
   const isClearAllSupplied = onClearAll !== lodash.noop;
@@ -58,7 +60,8 @@ const HeaderList = () => {
           return (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
         });
       }
-    }
+    },
+    innerRef: selectAllCheckboxRef
   })), /*#__PURE__*/_jsx__default["default"](styled.StyledSelectedItems, {}, void 0, multiSelectedValues.length > 0 ? /*#__PURE__*/_jsx__default["default"](styled.StyledButtonSelection, {
     onBlur: () => {
       setTimeout(() => {
@@ -71,7 +74,8 @@ const HeaderList = () => {
     onClick: handleToggle,
     labelText: !showSelectedOptions ? "SHOW SELECTED [".concat(multiSelectedValues.length, "]") : 'SHOW ALL',
     size: "s",
-    "data-testid": ComboboxDataTestids.ComboboxDataTestid.SHOW_SELECTED_OPTIONS_TOGGLE
+    "data-testid": ComboboxDataTestids.ComboboxDataTestid.SHOW_SELECTED_OPTIONS_TOGGLE,
+    innerRef: toggleSelectionButtonRef
   }) : _StyledNoOptionsSelec || (_StyledNoOptionsSelec = /*#__PURE__*/_jsx__default["default"](styled.StyledNoOptionsSelected, {}, void 0, "0 SELECTED"))));
 };
 

package/cjs/controlled-combobox/propTypes.js

@@ -20,7 +20,9 @@ const propTypes = {
   inputMinWidth: reactDesc.PropTypes.any.description('Minimum width for the combo box input controller').defaultValue(undefined),
   menuMinWidth: reactDesc.PropTypes.any.description('Minimum width for the dropdown menu').defaultValue(undefined),
   menuMaxHeight: reactDesc.PropTypes.any.description('Maximum height for the dropdown menu').defaultValue(undefined),
-  withToggle: reactDesc.PropTypes.bool.description('POC purpose this prop will not remain').defaultValue('false')
+  withToggle: reactDesc.PropTypes.bool.description('POC purpose this prop will not remain').defaultValue('false'),
+  withoutPortal: reactDesc.PropTypes.bool.description('Whether the combobox menu is rendered in a portal or not').defaultValue(false),
+  zIndex: reactDesc.PropTypes.number.description('The z-index of the combobox menu').defaultValue(10)
 };
 
 exports.propTypes = propTypes;

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

@@ -22,7 +22,8 @@ const useKeyboardNavigation = () => {
       onCreate,
       options,
       selectedValues,
-      onFilter
+      onFilter,
+      withoutPortal
     },
     setShowPopover,
     showPopover,
@@ -30,7 +31,9 @@ const useKeyboardNavigation = () => {
     focusOptionIdx,
     inputRef,
     setCurrentOption,
-    scrollOptionIntoView
+    scrollOptionIntoView,
+    selectAllCheckboxRef,
+    toggleSelectionButtonRef
   } = React.useContext(ComboBoxCTX.ComboBoxContext);
   const multiple = Array.isArray(selectedValues);
   const currentItemIndex = options.findIndex(opt => opt.dsId === focusOptionIdx);
@@ -146,8 +149,19 @@ const useKeyboardNavigation = () => {
       setShowSelectedValue(true);
     }
 
+    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();
+      }
+    }
+
     if (e.key === 'Tab' && inline) ;
-  }, [currentItemIndex, options, currentItem, inputRef, multiple, showPopover, selectedValues, inline, scrollOptionIntoView, onKeyDown, onSelectAll, onChange, onCreate, onFilter, setCurrentOption, setShowPopover, setShowSelectedValue, selectOption, onCancel]);
+  }, [currentItemIndex, options, currentItem, inputRef, multiple, showPopover, selectedValues, inline, scrollOptionIntoView, onKeyDown, onSelectAll, onChange, onCreate, onFilter, setCurrentOption, setShowPopover, setShowSelectedValue, selectOption, onCancel, selectAllCheckboxRef, toggleSelectionButtonRef, withoutPortal]);
   return {
     onInputKeyDown
   };

package/esm/controlled-checkbox/propTypes.js

@@ -11,7 +11,7 @@ const propTypes = {
   disabled: PropTypes.bool.description('Whether the checkbox is disabled or not.'),
   ariaControls: PropTypes.string.description('This string is required when you use a mixed checkbox. It contains all the ids that this checkbox is controlling.'),
   ariaLabel: PropTypes.string.description('Checkbox aria-label property. This property is going to be required if there is no label property added.'),
-  innerRef: PropTypes.func.description('Checkbox input ref.'),
+  innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).description('Checkbox input ref.'),
   autoFocus: PropTypes.bool.description('Whether you want the checkbox to be autofocused on render')
 };
 

package/esm/controlled-combobox/ComboBoxCTX.js

@@ -15,6 +15,8 @@ const defaultProps = {
   onSelectAll: noop,
   onCreate: noop,
   withToggle: false,
+  withoutPortal: true,
+  zIndex: 10,
   onChange: noop,
   onKeyDown: noop,
   onFilter: noop,
@@ -35,6 +37,8 @@ const defaultContext = {
   wrapperListRef: /*#__PURE__*/createRef(),
   controlsWrapperRef: /*#__PURE__*/createRef(),
   selectedOptionsRef: /*#__PURE__*/createRef(),
+  selectAllCheckboxRef: /*#__PURE__*/createRef(),
+  toggleSelectionButtonRef: /*#__PURE__*/createRef(),
   showSelectedValue: false,
   setShowSelectedValue: noop,
   focusOptionIdx: '',

package/esm/controlled-combobox/config/useComboBox.js

@@ -28,6 +28,8 @@ const useComboBox = props => {
   const wrapperListRef = useRef(null);
   const selectedOptionsRef = useRef(null);
   const controlsWrapperRef = useRef(null);
+  const selectAllCheckboxRef = useRef(null);
+  const toggleSelectionButtonRef = useRef(null);
   const pillGroupRef = useRef(null);
   const propsWithDefaults = useGetComboBoxWithDefaultsProps(props);
   const {
@@ -117,6 +119,8 @@ const useComboBox = props => {
     focusOptionIdx,
     selectedOptionsRef,
     controlsWrapperRef,
+    selectAllCheckboxRef,
+    toggleSelectionButtonRef,
     hasFocus,
     pillGroupRef,
     showSelectedOptions,
@@ -128,7 +132,7 @@ const useComboBox = props => {
     setShowSelectedValue,
     setReferenceElement,
     setShowPopover
-  }), [scrollOptionIntoView, correctOptions, propsWithDefaults, virtualListHelpers, focusOptionIdx, showSelectedValue, wrapperListRef, showSelectedOptions, showPopover, pillGroupRef, referenceElement, inputRef, selectedOptionsRef, controlsWrapperRef, hasFocus, listRef]);
+  }), [scrollOptionIntoView, correctOptions, propsWithDefaults, virtualListHelpers, focusOptionIdx, showSelectedValue, wrapperListRef, showSelectedOptions, showPopover, pillGroupRef, referenceElement, inputRef, selectedOptionsRef, controlsWrapperRef, selectAllCheckboxRef, toggleSelectionButtonRef, hasFocus, listRef]);
   return ctx;
 };
 

package/esm/controlled-combobox/parts/container/Container.js

@@ -14,7 +14,9 @@ const Container = () => {
     props: {
       inline,
       startPlacementPreference,
-      placementOrderPreference
+      placementOrderPreference,
+      withoutPortal,
+      zIndex
     },
     showPopover,
     inputRef,
@@ -45,10 +47,10 @@ const Container = () => {
       showPopover: showPopover,
       startPlacementPreference: startPlacementPreference,
       placementOrderPreference: placementOrderPreference,
-      withoutPortal: true,
+      withoutPortal: withoutPortal,
       withoutArrow: true,
       withoutAnimation: true,
-      zIndex: 10
+      zIndex: zIndex
     }, void 0, /*#__PURE__*/_jsx(StyledPopperWrapper, {
       tabIndex: -1,
       onMouseDown: handleMouseDown

package/esm/controlled-combobox/parts/header-list/HeaderList.js

@@ -19,7 +19,9 @@ const HeaderList = () => {
       selectedValues
     },
     showSelectedOptions,
-    inputRef
+    inputRef,
+    selectAllCheckboxRef,
+    toggleSelectionButtonRef
   } = useContext(ComboBoxContext);
   const isSelectAllSupplied = onSelectAll !== noop;
   const isClearAllSupplied = onClearAll !== noop;
@@ -50,7 +52,8 @@ const HeaderList = () => {
           return (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
         });
       }
-    }
+    },
+    innerRef: selectAllCheckboxRef
   })), /*#__PURE__*/_jsx(StyledSelectedItems, {}, void 0, multiSelectedValues.length > 0 ? /*#__PURE__*/_jsx(StyledButtonSelection, {
     onBlur: () => {
       setTimeout(() => {
@@ -63,7 +66,8 @@ const HeaderList = () => {
     onClick: handleToggle,
     labelText: !showSelectedOptions ? "SHOW SELECTED [".concat(multiSelectedValues.length, "]") : 'SHOW ALL',
     size: "s",
-    "data-testid": ComboboxDataTestid.SHOW_SELECTED_OPTIONS_TOGGLE
+    "data-testid": ComboboxDataTestid.SHOW_SELECTED_OPTIONS_TOGGLE,
+    innerRef: toggleSelectionButtonRef
   }) : _StyledNoOptionsSelec || (_StyledNoOptionsSelec = /*#__PURE__*/_jsx(StyledNoOptionsSelected, {}, void 0, "0 SELECTED"))));
 };
 

package/esm/controlled-combobox/propTypes.js

@@ -16,7 +16,9 @@ const propTypes = {
   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')
+  withToggle: PropTypes.bool.description('POC purpose this prop will not remain').defaultValue('false'),
+  withoutPortal: PropTypes.bool.description('Whether the combobox menu is rendered in a portal or not').defaultValue(false),
+  zIndex: PropTypes.number.description('The z-index of the combobox menu').defaultValue(10)
 };
 
 export { propTypes };

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

@@ -18,7 +18,8 @@ const useKeyboardNavigation = () => {
       onCreate,
       options,
       selectedValues,
-      onFilter
+      onFilter,
+      withoutPortal
     },
     setShowPopover,
     showPopover,
@@ -26,7 +27,9 @@ const useKeyboardNavigation = () => {
     focusOptionIdx,
     inputRef,
     setCurrentOption,
-    scrollOptionIntoView
+    scrollOptionIntoView,
+    selectAllCheckboxRef,
+    toggleSelectionButtonRef
   } = useContext(ComboBoxContext);
   const multiple = Array.isArray(selectedValues);
   const currentItemIndex = options.findIndex(opt => opt.dsId === focusOptionIdx);
@@ -142,8 +145,19 @@ const useKeyboardNavigation = () => {
       setShowSelectedValue(true);
     }
 
+    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();
+      }
+    }
+
     if (e.key === 'Tab' && inline) ;
-  }, [currentItemIndex, options, currentItem, inputRef, multiple, showPopover, selectedValues, inline, scrollOptionIntoView, onKeyDown, onSelectAll, onChange, onCreate, onFilter, setCurrentOption, setShowPopover, setShowSelectedValue, selectOption, onCancel]);
+  }, [currentItemIndex, options, currentItem, inputRef, multiple, showPopover, selectedValues, inline, scrollOptionIntoView, onKeyDown, onSelectAll, onChange, onCreate, onFilter, setCurrentOption, setShowPopover, setShowSelectedValue, selectOption, onCancel, selectAllCheckboxRef, toggleSelectionButtonRef, withoutPortal]);
   return {
     onInputKeyDown
   };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-controlled-form",
-  "version": "2.2.0-next.7",
+  "version": "2.2.0-next.8",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Controlled Form Controllers",
   "module": "./esm/index.js",
@@ -744,15 +744,15 @@
     "build": "node ../../scripts/build/build.js"
   },
   "dependencies": {
-    "@elliemae/ds-button": "2.2.0-next.7",
-    "@elliemae/ds-form-layout-blocks": "2.2.0-next.7",
-    "@elliemae/ds-grid": "2.2.0-next.7",
-    "@elliemae/ds-icon": "2.2.0-next.7",
-    "@elliemae/ds-icons": "2.2.0-next.7",
-    "@elliemae/ds-props-helpers": "2.2.0-next.7",
-    "@elliemae/ds-system": "2.2.0-next.7",
-    "@elliemae/ds-tooltip": "2.2.0-next.7",
-    "@elliemae/ds-truncated-tooltip-text": "2.2.0-next.7",
+    "@elliemae/ds-button": "2.2.0-next.8",
+    "@elliemae/ds-form-layout-blocks": "2.2.0-next.8",
+    "@elliemae/ds-grid": "2.2.0-next.8",
+    "@elliemae/ds-icon": "2.2.0-next.8",
+    "@elliemae/ds-icons": "2.2.0-next.8",
+    "@elliemae/ds-props-helpers": "2.2.0-next.8",
+    "@elliemae/ds-system": "2.2.0-next.8",
+    "@elliemae/ds-tooltip": "2.2.0-next.8",
+    "@elliemae/ds-truncated-tooltip-text": "2.2.0-next.8",
     "prop-types": "~15.7.2",
     "react-desc": "~4.1.3",
     "react-popper": "~2.2.5",

package/types/controlled-autocomplete/Autocomplete.d.ts

@@ -55,7 +55,7 @@ declare const DSAutocomplete: {
     };
 };
 declare const DSAutocompleteWithSchema: {
-    (props?: AutocompletePropsT | undefined): JSX.Element;
+    (props?: unknown): JSX.Element;
     propTypes: unknown;
     toTypescript: () => import("react-desc").TypescriptSchema;
 };

package/types/controlled-checkbox/ControlledCheckbox.d.ts

@@ -64,7 +64,7 @@ declare const DSControlledCheckbox: {
     };
 };
 declare const DSControlledCheckboxWithSchema: {
-    (props?: DSControlledCheckboxPropsT | undefined): JSX.Element;
+    (props?: unknown): JSX.Element;
     propTypes: unknown;
     toTypescript: () => import("react-desc").TypescriptSchema;
 };

package/types/controlled-combobox/ComboBox.d.ts

@@ -55,10 +55,16 @@ declare const DSComboBox: {
         withToggle: {
             deprecated: import("react-desc").PropTypesDescValidator;
         };
+        withoutPortal: {
+            deprecated: import("react-desc").PropTypesDescValidator;
+        };
+        zIndex: {
+            deprecated: import("react-desc").PropTypesDescValidator;
+        };
     };
 };
 declare const DSComboBoxWithSchema: {
-    (props?: ComboBoxPropsT | undefined): JSX.Element;
+    (props?: unknown): JSX.Element;
     propTypes: unknown;
     toTypescript: () => import("react-desc").TypescriptSchema;
 };

package/types/controlled-combobox/propTypes.d.ts

@@ -51,4 +51,10 @@ export declare const propTypes: {
     withToggle: {
         deprecated: import("react-desc").PropTypesDescValidator;
     };
+    withoutPortal: {
+        deprecated: import("react-desc").PropTypesDescValidator;
+    };
+    zIndex: {
+        deprecated: import("react-desc").PropTypesDescValidator;
+    };
 };

package/types/controlled-date-range-picker/ControlledDateRangePicker.d.ts

@@ -13,7 +13,7 @@ declare const DSControlledDateRangePicker: {
     };
 };
 declare const DSControlledDateRangePickerWithSchema: {
-    (props?: DateRangePickerPropsT | undefined): JSX.Element;
+    (props?: unknown): JSX.Element;
     propTypes: unknown;
     toTypescript: () => import("react-desc").TypescriptSchema;
 };

package/types/controlled-date-time-picker/ControlledDateTimePicker.d.ts

@@ -85,7 +85,7 @@ declare const DSControlledDateTimePicker: {
     };
 };
 declare const DSControlledDateTimePickerWithSchema: {
-    (props?: DateTimePickerPropsT | undefined): JSX.Element;
+    (props?: unknown): JSX.Element;
     propTypes: unknown;
     toTypescript: () => import("react-desc").TypescriptSchema;
 };

package/types/controlled-toggle/ControlledToggle.d.ts

@@ -91,7 +91,7 @@ declare const DSControlledToggle: {
     };
 };
 declare const DSControlledToggleWithSchema: {
-    (props?: DSControlledTogglePropsT | undefined): JSX.Element;
+    (props?: unknown): JSX.Element;
     propTypes: unknown;
     toTypescript: () => import("react-desc").TypescriptSchema;
 };