@elliemae/ds-controlled-form 2.2.0-alpha.4 → 3.0.0-next.2

package/esm/controlled-checkbox/propTypes.js

@@ -1,20 +1,18 @@
-import * as React from "react";
-import { PropTypes } from "react-desc";
+import { PropTypes } from 'react-desc';
+
 const propTypes = {
-  checked: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(["mixed"])]).isRequired.description("Whether the checkbox is invalid or not."),
-  value: PropTypes.string.description("Checkbox value property."),
-  name: PropTypes.string.isRequired.description("Checkbox name property."),
-  label: PropTypes.string.description("Checkbox Label property. This label is also going to be used as an aria-label for screen readers."),
-  id: PropTypes.string.isRequired.description("Checkbox unique id property, this property is required for accesibility purposes."),
-  readOnly: PropTypes.bool.description("Checkbox readOnly property."),
-  hasError: PropTypes.bool.description("Whether the checkbox has error or not."),
-  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."),
-  autoFocus: PropTypes.bool.description("Whether you want the checkbox to be autofocused on render")
+  checked: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['mixed'])]).isRequired.description('Whether the checkbox is invalid or not.'),
+  value: PropTypes.string.description('Checkbox value property.'),
+  name: PropTypes.string.isRequired.description('Checkbox name property.'),
+  label: PropTypes.string.description('Checkbox Label property. This label is also going to be used as an aria-label for screen readers.'),
+  id: PropTypes.string.isRequired.description('Checkbox unique id property, this property is required for accesibility purposes.'),
+  readOnly: PropTypes.bool.description('Checkbox readOnly property.'),
+  hasError: PropTypes.bool.description('Whether the checkbox has error or not.'),
+  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.'),
+  autoFocus: PropTypes.bool.description('Whether you want the checkbox to be autofocused on render')
 };
-export {
-  propTypes
-};
-//# sourceMappingURL=propTypes.js.map
+
+export { propTypes };

package/esm/controlled-checkbox/styles.js

@@ -1,59 +1,97 @@
-import * as React from "react";
-import styled from "styled-components";
-import { handleBackgroundColor, handleCheckmark } from "./utils/styleHelpers";
-const StyledContainer = styled.div`
-  display: inline-grid;
-  grid-template-rows: min-content;
-  grid-template-columns: ${({ theme }) => theme.space.xs} auto;
-  align-items: center;
-`;
-const StyledCheckBox = styled.span`
-  width: ${({ theme }) => theme.space.xs};
-  height: ${({ theme }) => theme.space.xs};
-  border: 1px solid ${({ theme, hasError }) => hasError ? theme.colors.danger[900] : theme.colors.neutral[400]};
-  border-radius: 2px;
-  position: relative;
-  background: ${({ theme, disabled }) => handleBackgroundColor(theme, disabled)};
-  ${({ theme, checked, disabled, readOnly, hasError }) => handleCheckmark(theme, checked, disabled, readOnly, hasError)}
-  &:focus-within {
-    ${({ theme, hasError, disabled }) => !disabled && !hasError ? `border: 1px solid ${theme.colors.brand[600]} ` : void 0};
-    &:hover {
-      ${({ theme, checked, disabled, readOnly, hasError }) => handleCheckmark(theme, checked, disabled, readOnly, hasError, true)}
-    }
-  }
-  &:hover {
-    background: ${({ theme, checked, disabled }) => !disabled && (checked === "mixed" || checked) ? theme.colors.brand[200] : void 0};
-    ${({ theme, hasError, disabled, readOnly }) => !hasError && !disabled && !readOnly ? ` border: 1px solid  ${theme.colors.brand[600]}` : void 0};
-  }
-`;
-const StyledInput = styled.input`
-  &:hover {
-    cursor: pointer;
-  }
+import styled from 'styled-components';
+import { handleBackgroundColor, handleCheckmark } from './utils/styleHelpers.js';
 
-  &:disabled {
-    cursor: not-allowed;
-  }
-  height: 100%;
-  position: absolute;
-  top: 0;
-  left: 0;
-  opacity: 0;
-`;
-const StyledLabel = styled.label`
-  &:hover {
-    cursor: pointer;
-  }
-  padding-left: ${({ theme }) => theme.space.xxs};
-  color: ${({ theme, disabled, readOnly, checked }) => disabled && checked !== true || readOnly ? theme.colors.neutral[500] : theme.colors.neutral[800]};
-  font-size: 13px;
-  line-height: 13px;
-  display: inherit;
-`;
-export {
-  StyledCheckBox,
-  StyledContainer,
-  StyledInput,
-  StyledLabel
-};
-//# sourceMappingURL=styles.js.map
+const StyledContainer = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-349ih4-0"
+})(["display:inline-grid;grid-template-rows:min-content;grid-template-columns:", " auto;align-items:center;"], _ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.space.xs;
+});
+const StyledCheckBox = /*#__PURE__*/styled.span.withConfig({
+  componentId: "sc-349ih4-1"
+})(["width:", ";height:", ";border:1px solid ", ";border-radius:2px;position:relative;background:", ";", " &:focus-within{", ";&:hover{", "}}&:hover{background:", ";", ";}"], _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme.space.xs;
+}, _ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return theme.space.xs;
+}, _ref4 => {
+  let {
+    theme,
+    hasError
+  } = _ref4;
+  return hasError ? theme.colors.danger[900] : theme.colors.neutral[400];
+}, _ref5 => {
+  let {
+    theme,
+    disabled
+  } = _ref5;
+  return handleBackgroundColor(theme, disabled);
+}, _ref6 => {
+  let {
+    theme,
+    checked,
+    disabled,
+    readOnly,
+    hasError
+  } = _ref6;
+  return handleCheckmark(theme, checked, disabled, readOnly, hasError);
+}, _ref7 => {
+  let {
+    theme,
+    hasError,
+    disabled
+  } = _ref7;
+  return !disabled && !hasError ? "border: 1px solid ".concat(theme.colors.brand[600], " ") : undefined;
+}, _ref8 => {
+  let {
+    theme,
+    checked,
+    disabled,
+    readOnly,
+    hasError
+  } = _ref8;
+  return handleCheckmark(theme, checked, disabled, readOnly, hasError, true);
+}, _ref9 => {
+  let {
+    theme,
+    checked,
+    disabled
+  } = _ref9;
+  return !disabled && (checked === 'mixed' || checked) ? theme.colors.brand[200] : undefined;
+}, _ref10 => {
+  let {
+    theme,
+    hasError,
+    disabled,
+    readOnly
+  } = _ref10;
+  return !hasError && !disabled && !readOnly ? " border: 1px solid  ".concat(theme.colors.brand[600]) : undefined;
+});
+const StyledInput = /*#__PURE__*/styled.input.withConfig({
+  componentId: "sc-349ih4-2"
+})(["&:hover{cursor:pointer;}&:disabled{cursor:not-allowed;}height:100%;position:absolute;top:0;left:0;opacity:0;"]);
+const StyledLabel = /*#__PURE__*/styled.label.withConfig({
+  componentId: "sc-349ih4-3"
+})(["&:hover{cursor:pointer;}padding-left:", ";color:", ";font-size:13px;line-height:13px;display:inherit;"], _ref11 => {
+  let {
+    theme
+  } = _ref11;
+  return theme.space.xxs;
+}, _ref12 => {
+  let {
+    theme,
+    disabled,
+    readOnly,
+    checked
+  } = _ref12;
+  return disabled && checked !== true || readOnly ? theme.colors.neutral[500] : theme.colors.neutral[800];
+});
+
+export { StyledCheckBox, StyledContainer, StyledInput, StyledLabel };

package/esm/controlled-checkbox/utils/setMultipleRefs.js

@@ -1,8 +1,11 @@
-import * as React from "react";
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+
 function setMultipleRefs(refs) {
-  return (value) => {
-    refs.forEach((ref) => {
-      if (typeof ref === "function") {
+  return value => {
+    refs.forEach(ref => {
+      if (typeof ref === 'function') {
         ref(value);
       } else if (ref != null) {
         ref.current = value;
@@ -10,7 +13,5 @@ function setMultipleRefs(refs) {
     });
   };
 }
-export {
-  setMultipleRefs
-};
-//# sourceMappingURL=setMultipleRefs.js.map
+
+export { setMultipleRefs };

package/esm/controlled-checkbox/utils/styleHelpers.js

@@ -1,52 +1,46 @@
-import * as React from "react";
-const handleCheckMarkColor = ({ colors }, disabled, readOnly, hasError, checked, isHovering) => {
+/* eslint-disable max-params */
+const handleCheckMarkColor = (_ref, disabled, readOnly, hasError, checked, isHovering) => {
+  let {
+    colors
+  } = _ref;
+
   if (hasError) {
     return colors.danger[900];
   }
+
   if (disabled || readOnly) {
     return colors.neutral[500];
   }
+
   if (isHovering && checked !== false) {
     return colors.brand[800];
   }
+
   return colors.brand[500];
 };
-const handleCheckmark = (theme, checked, disabled, readOnly, hasError, isHovering = false) => {
-  if (checked === "mixed") {
-    return `&:before {
-      position: absolute;
-    content: '';
-    top: 6px;
-    left: 3px;
-    background: ${handleCheckMarkColor(theme, disabled, readOnly, hasError, checked, isHovering)};
-    width: ${theme.space.xxs};
-    height: 2px;
-    }`;
+const handleCheckmark = function (theme, checked, disabled, readOnly, hasError) {
+  let isHovering = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : false;
+
+  if (checked === 'mixed') {
+    return "&:before {\n      position: absolute;\n    content: '';\n    top: 6px;\n    left: 3px;\n    background: ".concat(handleCheckMarkColor(theme, disabled, readOnly, hasError, checked, isHovering), ";\n    width: ").concat(theme.space.xxs, ";\n    height: 2px;\n    }");
   }
+
   if (checked) {
-    return `&:before {
-      position: absolute;
-      content: '';
-          top: 3px;
-          left: 2px;
-          border-left: 2px solid ${handleCheckMarkColor(theme, disabled, readOnly, hasError, checked, isHovering)};
-          border-bottom: 2px solid ${handleCheckMarkColor(theme, disabled, readOnly, hasError, checked, isHovering)};
-          height: 5px;
-          width: 10px;
-          transform: rotate(-45deg);
-    }`;
+    return "&:before {\n      position: absolute;\n      content: '';\n          top: 3px;\n          left: 2px;\n          border-left: 2px solid ".concat(handleCheckMarkColor(theme, disabled, readOnly, hasError, checked, isHovering), ";\n          border-bottom: 2px solid ").concat(handleCheckMarkColor(theme, disabled, readOnly, hasError, checked, isHovering), ";\n          height: 5px;\n          width: 10px;\n          transform: rotate(-45deg);\n    }");
   }
-  return void 0;
+
+  return undefined;
 };
-const handleBackgroundColor = ({ colors }, disabled) => {
+const handleBackgroundColor = (_ref2, disabled) => {
+  let {
+    colors
+  } = _ref2;
+
   if (disabled) {
-    return colors.neutral["080"];
+    return colors.neutral['080'];
   }
-  return colors.neutral["000"];
+
+  return colors.neutral['000'];
 };
-export {
-  handleBackgroundColor,
-  handleCheckMarkColor,
-  handleCheckmark
-};
-//# sourceMappingURL=styleHelpers.js.map
+
+export { handleBackgroundColor, handleCheckMarkColor, handleCheckmark };

package/esm/controlled-combobox/ComboBox.js

@@ -1,25 +1,24 @@
-import * as React from "react";
-import React2 from "react";
-import { describe } from "react-desc";
-import { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from "@elliemae/ds-props-helpers";
-import { useComboBox } from "./config/useComboBox";
-import { Container } from "./parts/container";
-import { propTypes } from "./propTypes";
-import { ComboBoxContext, defaultProps } from "./ComboBoxCTX";
-const DSComboBox = (props) => {
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'react';
+import { describe } from 'react-desc';
+import { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';
+import { useComboBox } from './config/useComboBox.js';
+import { Container } from './parts/container/Container.js';
+import { propTypes } from './propTypes.js';
+import { defaultProps, ComboBoxContext } from './ComboBoxCTX.js';
+
+var _Container;
+
+const DSComboBox = props => {
   const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);
   useValidateTypescriptPropTypes(propsWithDefault, propTypes);
   const ctx = useComboBox(props);
-  return /* @__PURE__ */ React2.createElement(ComboBoxContext.Provider, {
+  return /*#__PURE__*/_jsx(ComboBoxContext.Provider, {
     value: ctx
-  }, /* @__PURE__ */ React2.createElement(Container, null));
+  }, void 0, _Container || (_Container = /*#__PURE__*/_jsx(Container, {})));
 };
-DSComboBox.propTypes = propTypes;
+
 const DSComboBoxWithSchema = describe(DSComboBox);
 DSComboBoxWithSchema.propTypes = propTypes;
-export {
-  DSComboBox,
-  DSComboBox as DSComboBoxV3,
-  DSComboBoxWithSchema
-};
-//# sourceMappingURL=ComboBox.js.map
+
+export { DSComboBox, DSComboBoxWithSchema };

package/esm/controlled-combobox/ComboBoxCTX.js

@@ -1,15 +1,16 @@
-import * as React from "react";
-import { createContext, createRef } from "react";
-import { noop } from "lodash";
+import { createContext, createRef } from 'react';
+import { noop } from 'lodash';
+
+// eslint-disable-next-line @typescript-eslint/no-empty-function
 const defaultProps = {
-  placeholder: "",
+  placeholder: '',
   options: [],
   selectedValues: null,
   hasError: false,
   inline: false,
   autoFocus: false,
-  startPlacementPreference: "bottom-start",
-  placementOrderPreference: ["bottom-start", "bottom-end"],
+  startPlacementPreference: 'bottom-start',
+  placementOrderPreference: ['bottom-start', 'bottom-end'],
   onClearAll: noop,
   onSelectAll: noop,
   onCreate: noop,
@@ -27,25 +28,22 @@ const defaultContext = {
   referenceElement: null,
   hasFocus: false,
   setHasFocus: noop,
-  pillGroupRef: createRef(),
+  pillGroupRef: /*#__PURE__*/createRef(),
   setReferenceElement: noop,
-  inputRef: createRef(),
-  listRef: createRef(),
-  wrapperListRef: createRef(),
-  controlsWrapperRef: createRef(),
-  selectedOptionsRef: createRef(),
+  inputRef: /*#__PURE__*/createRef(),
+  listRef: /*#__PURE__*/createRef(),
+  wrapperListRef: /*#__PURE__*/createRef(),
+  controlsWrapperRef: /*#__PURE__*/createRef(),
+  selectedOptionsRef: /*#__PURE__*/createRef(),
   showSelectedValue: false,
   setShowSelectedValue: noop,
-  focusOptionIdx: "",
+  focusOptionIdx: '',
   setCurrentOption: noop,
   showSelectedOptions: false,
   setShowSelectedOptions: noop
 };
-const ComboBoxContext = createContext(defaultContext);
-var ComboBoxCTX_default = ComboBoxContext;
-export {
-  ComboBoxContext,
-  ComboBoxCTX_default as default,
-  defaultProps
-};
-//# sourceMappingURL=ComboBoxCTX.js.map
+/** Context for cross component communication */
+
+const ComboBoxContext = /*#__PURE__*/createContext(defaultContext);
+
+export { ComboBoxContext, ComboBoxContext as default, defaultProps };

package/esm/controlled-combobox/ComboboxDataTestids.js

@@ -1,16 +1,13 @@
-import * as React from "react";
 const ComboboxDataTestid = {
-  INPUT: "combobox-input",
-  LIST: "combobox-menu-list",
-  SELECTED_VALUES: "combobox-selected-values",
-  SELECT_ALL_BUTTON: "combobox-all-btn",
-  CLEAR_ALL_BUTTON: "combobox-clear-btn",
-  DROPDOWN: "combobox-dropdown-btn",
-  OPTION: "combobox-option",
-  SELECT_ALL_CHECKBOX: "combobox-select-all-checkbox",
-  SHOW_SELECTED_OPTIONS_TOGGLE: "combobox-selected-options-toggle"
+  INPUT: 'combobox-input',
+  LIST: 'combobox-menu-list',
+  SELECTED_VALUES: 'combobox-selected-values',
+  SELECT_ALL_BUTTON: 'combobox-all-btn',
+  CLEAR_ALL_BUTTON: 'combobox-clear-btn',
+  DROPDOWN: 'combobox-dropdown-btn',
+  OPTION: 'combobox-option',
+  SELECT_ALL_CHECKBOX: 'combobox-select-all-checkbox',
+  SHOW_SELECTED_OPTIONS_TOGGLE: 'combobox-selected-options-toggle'
 };
-export {
-  ComboboxDataTestid
-};
-//# sourceMappingURL=ComboboxDataTestids.js.map
+
+export { ComboboxDataTestid };

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

@@ -1,13 +1,10 @@
-import * as React from "react";
 const DATA_TESTID = {
-  COMBOBOX_MENU_LIST: "combobox-menu-list",
-  COMBOBOX_CLEAR_BTN: "combobox-clear-btn",
-  COMBOBOX_ALL_BTN: "combobox-all-btn",
-  COMBOBOX_DROPDOWN_BTN: "combobox-dropdown-btn",
-  COMBOBOX_OPTION: "combobox-option",
-  COMBOBOX: "combobox"
+  COMBOBOX_MENU_LIST: 'combobox-menu-list',
+  COMBOBOX_CLEAR_BTN: 'combobox-clear-btn',
+  COMBOBOX_ALL_BTN: 'combobox-all-btn',
+  COMBOBOX_DROPDOWN_BTN: 'combobox-dropdown-btn',
+  COMBOBOX_OPTION: 'combobox-option',
+  COMBOBOX: 'combobox'
 };
-export {
-  DATA_TESTID
-};
-//# sourceMappingURL=constants.js.map
+
+export { DATA_TESTID };

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

@@ -1,16 +1,28 @@
-import * as React from "react";
-import { useMemo, useState, useRef, useCallback } from "react";
-import { noop } from "lodash";
-import { v4 as uuidv4 } from "uuid";
-import { useVirtual } from "react-virtual";
-import { useGetComboBoxWithDefaultsProps } from "./useGetPropsWithDefault";
-const useComboBox = (props) => {
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import 'core-js/modules/esnext.async-iterator.find.js';
+import 'core-js/modules/esnext.iterator.find.js';
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import { useState, useRef, useCallback, useMemo } from 'react';
+import { noop } from 'lodash';
+import { v4 } from 'uuid';
+import { useVirtual } from 'react-virtual';
+import { useGetComboBoxWithDefaultsProps } from './useGetPropsWithDefault.js';
+
+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 useComboBox = props => {
   const [showPopover, setShowPopover] = useState(false);
   const [referenceElement, setReferenceElement] = useState(null);
   const [showSelectedValue, setShowSelectedValue] = useState(false);
   const [showSelectedOptions, setShowSelectedOptions] = useState(false);
   const [hasFocus, setHasFocus] = useState(false);
-  const [focusOptionIdx, setCurrentOption] = useState("");
+  const [focusOptionIdx, setCurrentOption] = useState('');
   const inputRef = useRef(null);
   const listRef = useRef(null);
   const wrapperListRef = useRef(null);
@@ -18,54 +30,84 @@ const useComboBox = (props) => {
   const controlsWrapperRef = useRef(null);
   const pillGroupRef = useRef(null);
   const propsWithDefaults = useGetComboBoxWithDefaultsProps(props);
-  const { options, selectedValues, onCreate } = propsWithDefaults;
+  const {
+    options,
+    selectedValues,
+    onCreate
+  } = propsWithDefaults; // ---------------------------------------------------------------------------
+  // Menu Options with/out selected filter
+  // ---------------------------------------------------------------------------
+
   const selectedValuesWithSections = useCallback(() => {
+    var _items2;
+
     const multiSelectedValue = selectedValues;
     const items = [];
-    options.forEach((option) => {
-      const isSelectedValue = multiSelectedValue.find((item) => item.dsId === option.dsId);
+    options.forEach(option => {
+      const isSelectedValue = multiSelectedValue.find(item => item.dsId === option.dsId);
+
       if (isSelectedValue) {
         items.push(option);
       }
-      if (option.type === "section") {
-        if (items[items.length - 1]?.type === "section") {
+
+      if (option.type === 'section') {
+        var _items;
+
+        if (((_items = items[items.length - 1]) === null || _items === void 0 ? void 0 : _items.type) === 'section') {
           items[items.length - 1] = option;
         } else {
           items.push(option);
         }
       }
     });
-    if (items[items.length - 1]?.type === "section") {
+
+    if (((_items2 = items[items.length - 1]) === null || _items2 === void 0 ? void 0 : _items2.type) === 'section') {
       items.pop();
     }
+
     return items;
   }, [options, selectedValues]);
   const correctOptions = useMemo(() => {
     if (showSelectedOptions && Array.isArray(selectedValues) && selectedValues.length > 0) {
       return selectedValuesWithSections();
     }
-    if (onCreate !== noop && inputRef.current && inputRef.current.value !== "") {
-      const creatableUuid = uuidv4();
+
+    if (onCreate !== noop && inputRef.current && inputRef.current.value !== '') {
+      var _inputRef$current;
+
+      const creatableUuid = v4();
       const creatableItem = {
-        dsId: `creatable-${creatableUuid}`,
-        label: inputRef.current?.value,
-        type: "creatable"
+        dsId: "creatable-".concat(creatableUuid),
+        label: (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.value,
+        type: 'creatable'
       };
       return [creatableItem, ...options];
     }
+
     return options;
-  }, [options, onCreate, selectedValuesWithSections, selectedValues, showSelectedOptions]);
+  }, [options, onCreate, selectedValuesWithSections, selectedValues, showSelectedOptions]); // ===========================================================================
+  // Virtualization setup
+  // ===========================================================================
+
   const virtualListHelpers = useVirtual({
     size: correctOptions.length,
     parentRef: listRef,
     overscan: 15,
     paddingStart: 0
-  });
-  const scrollOptionIntoView = useCallback((dsId, opts = { align: "center" }) => {
-    virtualListHelpers.scrollToIndex(correctOptions.findIndex((opt) => opt.dsId === dsId), opts);
+  }); // ===========================================================================
+  // Scroll into view function
+  // ===========================================================================
+
+  const scrollOptionIntoView = useCallback(function (dsId) {
+    let opts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
+      align: 'center'
+    };
+    virtualListHelpers.scrollToIndex(correctOptions.findIndex(opt => opt.dsId === dsId), opts);
   }, [correctOptions, virtualListHelpers]);
   const ctx = useMemo(() => ({
-    props: { ...propsWithDefaults, options: correctOptions },
+    props: _objectSpread(_objectSpread({}, propsWithDefaults), {}, {
+      options: correctOptions
+    }),
     virtualListHelpers,
     showPopover,
     referenceElement,
@@ -86,27 +128,8 @@ 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, hasFocus, listRef]);
   return ctx;
 };
-export {
-  useComboBox
-};
-//# sourceMappingURL=useComboBox.js.map
+
+export { useComboBox };

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

@@ -1,8 +1,7 @@
-import * as React from "react";
-import { useMemoMergePropsWithDefault } from "@elliemae/ds-props-helpers";
-import { defaultProps } from "../ComboBoxCTX";
-const useGetComboBoxWithDefaultsProps = (props) => useMemoMergePropsWithDefault(props, defaultProps);
-export {
-  useGetComboBoxWithDefaultsProps
-};
-//# sourceMappingURL=useGetPropsWithDefault.js.map
+import { useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';
+import { defaultProps } from '../ComboBoxCTX.js';
+
+// we have to merge the "default" nested default values with what the user gives us...
+const useGetComboBoxWithDefaultsProps = props => useMemoMergePropsWithDefault(props, defaultProps);
+
+export { useGetComboBoxWithDefaultsProps };

package/esm/controlled-combobox/index.d.js

@@ -1,2 +1 @@
-import * as React from "react";
-//# sourceMappingURL=index.d.js.map
+

package/esm/controlled-combobox/index.js

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