@elliemae/ds-controlled-form 2.4.2-rc.3 → 2.4.3-rc.0

package/esm/mask-hook/hooks/usePhoneMask.js

@@ -2,7 +2,6 @@ import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutPr
 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/web.dom-collections.iterator.js';
 import { useRef, useState, useCallback } from 'react';
 import { describe, useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';
 import { useCallbackAfterRender } from '@elliemae/ds-utilities';
@@ -64,9 +63,7 @@ const usePhoneMask = props => {
     if (userOnKeyDown) userOnKeyDown(e);
   }, [userOnKeyDown]);
   const onChange = useCallback(e => {
-    var _e$target$selectionEn;
-
-    const [mask, cursorPos] = conformValue(e.target.value, (_e$target$selectionEn = e.target.selectionEnd) !== null && _e$target$selectionEn !== void 0 ? _e$target$selectionEn : 0, lastKeyCode.current, opts);
+    const [mask, cursorPos] = conformValue(e.target.value, e.target.selectionEnd ?? 0, lastKeyCode.current, opts);
     valueSetter(prevMask => {
       // Here we need to update the key
       if (mask === prevMask) setKey(key => key + 1);

package/esm/mask-hook/hooks/useRegExpMask.js

@@ -1,4 +1,3 @@
-import 'core-js/modules/web.dom-collections.iterator.js';
 import { useRef, useState, useCallback } from 'react';
 import { describe, useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';
 import { useCallbackAfterRender } from '@elliemae/ds-utilities';
@@ -11,6 +10,8 @@ import 'core-js/modules/esnext.iterator.filter.js';
 import { flatStringArray } from '../utils/flatStringArray.js';
 import { DSMaskRegExpHookPropsTypes, DSMaskRegExpHookDefaultProps } from '../react-desc-prop-types.js';
 
+/* eslint-disable max-depth */
+
 const isRegExp = item => typeof item === 'object';
 
 const conformValue = (rawValue, cursorPos, lastKeyCode, regExp, filledMask) => {
@@ -29,9 +30,7 @@ const conformValue = (rawValue, cursorPos, lastKeyCode, regExp, filledMask) => {
       fullRegExpMatched = false;
 
       for (let j = charsFound + offSet; j < rawValueArray.length; j += 1) {
-        var _rawValueArray$j;
-
-        const match = (_rawValueArray$j = rawValueArray[j]) === null || _rawValueArray$j === void 0 ? void 0 : _rawValueArray$j.match(flatRegExp[i]);
+        const match = rawValueArray[j]?.match(flatRegExp[i]);
 
         if (match) {
           maskedValue.push(match[0]);
@@ -83,9 +82,7 @@ const useRegExpMask = props => {
     if (userOnKeyDown) userOnKeyDown(e);
   }, [userOnKeyDown]);
   const onChange = useCallback(e => {
-    var _e$target$selectionEn;
-
-    const [mask, cursorPos] = conformValue(e.target.value, (_e$target$selectionEn = e.target.selectionEnd) !== null && _e$target$selectionEn !== void 0 ? _e$target$selectionEn : 0, lastKeyCode.current, regExp, filledMask);
+    const [mask, cursorPos] = conformValue(e.target.value, e.target.selectionEnd ?? 0, lastKeyCode.current, regExp, filledMask);
     valueSetter(prevMask => {
       // Here we need to update the key
       if (mask === prevMask) setKey(key => key + 1);

package/esm/mask-hook/hooks/useSSNMask.js

@@ -1,7 +1,6 @@
 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/web.dom-collections.iterator.js';
 import { useRef, useState, useCallback } from 'react';
 import { describe, useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';
 import { useCallbackAfterRender } from '@elliemae/ds-utilities';
@@ -47,9 +46,7 @@ const useSSNMask = props => {
     if (userOnKeyDown) userOnKeyDown(e);
   }, [userOnKeyDown]);
   const onChange = useCallback(e => {
-    var _e$target$selectionEn;
-
-    const [mask, cursorPos] = conformValue(e.target.value, (_e$target$selectionEn = e.target.selectionEnd) !== null && _e$target$selectionEn !== void 0 ? _e$target$selectionEn : 0, lastKeyCode.current);
+    const [mask, cursorPos] = conformValue(e.target.value, e.target.selectionEnd ?? 0, lastKeyCode.current);
     valueSetter(prevMask => {
       // Here we need to update the key
       if (mask === prevMask) setKey(key => key + 1);

package/esm/mask-hook/hooks/useZipCodeMask.js

@@ -1,7 +1,6 @@
 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/web.dom-collections.iterator.js';
 import { useRef, useState, useCallback } from 'react';
 import { describe, useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';
 import { useCallbackAfterRender } from '@elliemae/ds-utilities';
@@ -44,9 +43,7 @@ const useZipCodeMask = props => {
     if (userOnKeyDown) userOnKeyDown(e);
   }, [userOnKeyDown]);
   const onChange = useCallback(e => {
-    var _e$target$selectionEn;
-
-    const [mask, cursorPos] = conformValue(e.target.value, (_e$target$selectionEn = e.target.selectionEnd) !== null && _e$target$selectionEn !== void 0 ? _e$target$selectionEn : 0, lastKeyCode.current);
+    const [mask, cursorPos] = conformValue(e.target.value, e.target.selectionEnd ?? 0, lastKeyCode.current);
     valueSetter(prevMask => {
       // Here we need to update the key
       if (mask === prevMask) setKey(key => key + 1);

package/esm/mask-hook/utils/addSpecialCharacters.js

@@ -1,7 +1,6 @@
 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/web.dom-collections.iterator.js';
 
 /* eslint-disable max-params */
 

package/esm/mask-hook/utils/flatStringArray.js

@@ -1,7 +1,6 @@
 import 'core-js/modules/esnext.async-iterator.reduce.js';
 import 'core-js/modules/esnext.iterator.constructor.js';
 import 'core-js/modules/esnext.iterator.reduce.js';
-import 'core-js/modules/web.dom-collections.iterator.js';
 
 const flatStringArray = stringArray => stringArray.reduce((acc, curr) => {
   if (typeof curr === 'string') {

package/esm/text-input/config/useInputText.js

@@ -1,4 +1,3 @@
-import 'core-js/modules/web.dom-collections.iterator.js';
 import { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes, useGetGlobalAttributes, useGetXstyledProps } from '@elliemae/ds-props-helpers';
 import { useState, useCallback, useMemo } from 'react';
 import { defaultProps, DSInputTextPropTypes } from '../react-desc-prop-types.js';

package/esm/text-input/styled/borders.js

@@ -1,13 +1,24 @@
-import _taggedTemplateLiteral from '@babel/runtime/helpers/esm/taggedTemplateLiteral';
 import { css, th } from '@elliemae/ds-system';
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
-const commonBorderCss = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  border: 1px solid ", ";\n"])), th.color('neutral-400'));
-const readOnlyBorderCss = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  border: 1px solid transparent;\n  border-top-color: ", ";\n"])), th.color('neutral-400'));
+const commonBorderCss = css`
+  border: 1px solid ${th.color('neutral-400')};
+`;
+const readOnlyBorderCss = css`
+  border: 1px solid transparent;
+  border-top-color: ${th.color('neutral-400')};
+`;
 const disabledBorderCss = commonBorderCss;
-const hasErrorBorderCss = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  border: 1px solid ", ";\n"])), th.color('danger-900'));
-const hoverBorderCss = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  border: 1px solid ", ";\n"])), th.color('brand-700'));
-const focusBorderCss = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  border: 1px solid transparent;\n  outline: 2px solid ", ";\n  outline-offset: -2px;\n"])), th.color('brand-700'));
+const hasErrorBorderCss = css`
+  border: 1px solid ${th.color('danger-900')};
+`;
+const hoverBorderCss = css`
+  border: 1px solid ${th.color('brand-700')};
+`;
+const focusBorderCss = css`
+  border: 1px solid transparent;
+  outline: 2px solid ${th.color('brand-700')};
+  outline-offset: -2px;
+`;
 const getBorderCss = props => {
   if (props.isDisabled) return disabledBorderCss;
   if (props.hasFocus) return focusBorderCss;

package/esm/text-input/styled/components.js

@@ -1,4 +1,3 @@
-import _taggedTemplateLiteral from '@babel/runtime/helpers/esm/taggedTemplateLiteral';
 import { DSButtonV2 } from '@elliemae/ds-button';
 import { Grid } from '@elliemae/ds-grid';
 import { styled, th } from '@elliemae/ds-system';
@@ -6,23 +5,67 @@ import { layout, space, sizing } from '@xstyled/styled-components';
 import { DSInputTextName, DSInputTextSlots } from '../exported-related/theming.js';
 import { getBorderCss, getHoverBorderCss } from './borders.js';
 
-var _templateObject, _templateObject2, _templateObject3;
 const StyledInputWrapper = styled(Grid, {
   name: DSInputTextName,
   slot: DSInputTextSlots.INPUT_WRAPPER
-})(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  height: ", ";\n\n  ", "\n  border-radius: 2px;\n\n  :hover {\n    ", "\n  }\n\n  ", "\n  ", "\n  ", "\n"])), _ref => {
+})`
+  height: ${_ref => {
   let {
     inputSize
   } = _ref;
   return inputSize === 'm' ? '28px' : '24px';
-}, getBorderCss, getHoverBorderCss, layout, space, sizing);
+}};
+
+  ${getBorderCss}
+  border-radius: 2px;
+
+  :hover {
+    ${getHoverBorderCss}
+  }
+
+  ${layout}
+  ${space}
+  ${sizing}
+`;
 const StyledInput = styled('input', {
   name: DSInputTextName,
   slot: DSInputTextSlots.INPUT
-})(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  padding: 0 ", ";\n  border: none;\n  outline: none;\n  border-radius: 2px;\n\n  width: 100%;\n  height: 100%;\n  font-size: 13px;\n\n  ::placeholder {\n    font-weight: ", ";\n    font-style: italic;\n    color: ", ";\n  }\n\n  :disabled {\n    background-color: ", ";\n    color: #616b7f;\n    cursor: not-allowed;\n  }\n"])), th.space('xxs'), th.fontWeight('regular'), th.color('neutral-500'), th.color('neutral-080'));
+})`
+  padding: 0 ${th.space('xxs')};
+  border: none;
+  outline: none;
+  border-radius: 2px;
+
+  width: 100%;
+  height: 100%;
+  font-size: 13px;
+
+  ::placeholder {
+    font-weight: ${th.fontWeight('regular')};
+    font-style: italic;
+    color: ${th.color('neutral-500')};
+  }
+
+  :disabled {
+    background-color: ${th.color('neutral-080')};
+    color: #616b7f;
+    cursor: not-allowed;
+  }
+`;
 const StyledClearButton = styled(DSButtonV2, {
   name: DSInputTextName,
   slot: DSInputTextSlots.CLEAR_BUTTON
-})(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  height: 100%;\n  min-width: 20px;\n  width: 20px;\n  &:after {\n    border-top-left-radius: 0px !important;\n    border-bottom-left-radius: 0px !important;\n  }\n  :focus {\n    border-width: 0px;\n  }\n"])));
+})`
+  height: 100%;
+  min-width: 20px;
+  width: 20px;
+  &:after {
+    border-top-left-radius: 0px !important;
+    border-bottom-left-radius: 0px !important;
+  }
+  :focus {
+    border-width: 0px;
+  }
+`;
 
 export { StyledClearButton, StyledInput, StyledInputWrapper };

package/esm/toggle/ControlledToggle.js

@@ -1,11 +1,10 @@
-import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
-import _jsx from '@babel/runtime/helpers/esm/jsx';
-import 'core-js/modules/web.dom-collections.iterator.js';
 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 { useState, useRef, useMemo, useEffect, useCallback } from 'react';
 import { uid } from 'uid';
 import { describe } from 'react-desc';

package/esm/toggle/styles.js

@@ -31,7 +31,7 @@ const StyledLabel = /*#__PURE__*/styled.div.withConfig({
     width,
     size
   } = _ref5;
-  return "calc(".concat(width, "px + ").concat(margin[size], ")");
+  return `calc(${width}px + ${margin[size]})`;
 }, _ref6 => {
   let {
     size
@@ -54,7 +54,7 @@ const StyledVisibleContent = /*#__PURE__*/styled.label.withConfig({
   let {
     size
   } = _ref9;
-  return "calc(".concat(labelHeight[size], " - 4px)");
+  return `calc(${labelHeight[size]} - 4px)`;
 }, _ref10 => {
   let {
     theme,
@@ -64,7 +64,9 @@ const StyledVisibleContent = /*#__PURE__*/styled.label.withConfig({
     readOnly,
     active
   } = _ref10;
-  return size === 's' ? "1px solid ".concat(handleBorderColor(checked, disabled, readOnly, active, theme)) : "\n    2px solid ".concat(handleBorderColor(checked, disabled, readOnly, active, theme), "\n    ");
+  return size === 's' ? `1px solid ${handleBorderColor(checked, disabled, readOnly, active, theme)}` : `
+    2px solid ${handleBorderColor(checked, disabled, readOnly, active, theme)}
+    `;
 }, _ref11 => {
   let {
     theme,
@@ -129,13 +131,13 @@ const StyledText = /*#__PURE__*/styled.div.withConfig({
     isLongerTextRendering,
     checked
   } = _ref20;
-  return isLongerTextRendering && checked ? "margin-left: 6px;" : undefined;
+  return isLongerTextRendering && checked ? `margin-left: 6px;` : undefined;
 }, _ref21 => {
   let {
     isLongerTextRendering,
     checked
   } = _ref21;
-  return isLongerTextRendering && !checked ? "margin-left: 4px;" : undefined;
+  return isLongerTextRendering && !checked ? `margin-left: 4px;` : undefined;
 });
 const StyledInput = /*#__PURE__*/styled.input.withConfig({
   componentId: "sc-yhh3ee-5"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-controlled-form",
-  "version": "2.4.2-rc.3",
+  "version": "2.4.3-rc.0",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Controlled Form Controllers",
   "module": "./esm/index.js",
@@ -179,6 +179,18 @@
       "import": "./esm/input-group/index.js",
       "require": "./cjs/input-group/index.js"
     },
+    "./input-group/exported-related/theming": {
+      "import": "./esm/input-group/exported-related/theming.js",
+      "require": "./cjs/input-group/exported-related/theming.js"
+    },
+    "./input-group/exported-related": {
+      "import": "./esm/input-group/exported-related/index.js",
+      "require": "./cjs/input-group/exported-related/index.js"
+    },
+    "./input-group/exported-related/data-test-ids": {
+      "import": "./esm/input-group/exported-related/data-test-ids.js",
+      "require": "./cjs/input-group/exported-related/data-test-ids.js"
+    },
     "./date-time-picker/utils/typeGuards": {
       "import": "./esm/date-time-picker/utils/typeGuards.js",
       "require": "./cjs/date-time-picker/utils/typeGuards.js"
@@ -803,6 +815,10 @@
       "import": "./esm/autocomplete/react-desc-prop-types.js",
       "require": "./cjs/autocomplete/react-desc-prop-types.js"
     },
+    "./autocomplete/parts/styled": {
+      "import": "./esm/autocomplete/parts/styled.js",
+      "require": "./cjs/autocomplete/parts/styled.js"
+    },
     "./autocomplete/parts/menu-list/useItemRenderer": {
       "import": "./esm/autocomplete/parts/menu-list/useItemRenderer.js",
       "require": "./cjs/autocomplete/parts/menu-list/useItemRenderer.js"
@@ -835,6 +851,10 @@
       "import": "./esm/autocomplete/parts/container/Container.js",
       "require": "./cjs/autocomplete/parts/container/Container.js"
     },
+    "./autocomplete/parts/A11yFocusedOption": {
+      "import": "./esm/autocomplete/parts/A11yFocusedOption.js",
+      "require": "./cjs/autocomplete/parts/A11yFocusedOption.js"
+    },
     "./autocomplete": {
       "import": "./esm/autocomplete/index.js",
       "require": "./cjs/autocomplete/index.js"
@@ -876,20 +896,20 @@
     "build": "node ../../scripts/build/build.js"
   },
   "dependencies": {
-    "@elliemae/ds-button": "2.4.2-rc.3",
-    "@elliemae/ds-circular-progress-indicator": "2.4.2-rc.3",
-    "@elliemae/ds-controlled-form": "2.4.2-rc.3",
-    "@elliemae/ds-form": "2.4.2-rc.3",
-    "@elliemae/ds-form-layout-blocks": "2.4.2-rc.3",
-    "@elliemae/ds-grid": "2.4.2-rc.3",
-    "@elliemae/ds-icon": "2.4.2-rc.3",
-    "@elliemae/ds-icons": "2.4.2-rc.3",
-    "@elliemae/ds-pills": "2.4.2-rc.3",
-    "@elliemae/ds-popperjs": "2.4.2-rc.3",
-    "@elliemae/ds-props-helpers": "2.4.2-rc.3",
-    "@elliemae/ds-system": "2.4.2-rc.3",
-    "@elliemae/ds-tooltip": "2.4.2-rc.3",
-    "@elliemae/ds-truncated-tooltip-text": "2.4.2-rc.3",
+    "@elliemae/ds-button": "2.4.3-rc.0",
+    "@elliemae/ds-circular-progress-indicator": "2.4.3-rc.0",
+    "@elliemae/ds-controlled-form": "2.4.3-rc.0",
+    "@elliemae/ds-form": "2.4.3-rc.0",
+    "@elliemae/ds-form-layout-blocks": "2.4.3-rc.0",
+    "@elliemae/ds-grid": "2.4.3-rc.0",
+    "@elliemae/ds-icon": "2.4.3-rc.0",
+    "@elliemae/ds-icons": "2.4.3-rc.0",
+    "@elliemae/ds-pills": "2.4.3-rc.0",
+    "@elliemae/ds-popperjs": "2.4.3-rc.0",
+    "@elliemae/ds-props-helpers": "2.4.3-rc.0",
+    "@elliemae/ds-system": "2.4.3-rc.0",
+    "@elliemae/ds-tooltip": "2.4.3-rc.0",
+    "@elliemae/ds-truncated-tooltip-text": "2.4.3-rc.0",
     "prop-types": "~15.7.2",
     "react-desc": "~4.1.3",
     "react-popper": "~2.2.5",

package/types/autocomplete/parts/A11yFocusedOption.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { DSAutocompleteT } from '../react-desc-prop-types';
+export declare const isSeparator: (el: DSAutocompleteT.OptionTypes | undefined) => el is DSAutocompleteT.ItemSeparatorOptions;
+export declare const StyledA11ySelectedValues: any;
+export declare const A11yFocusedOption: React.ComponentType;

package/types/autocomplete/parts/container/styled.d.ts

@@ -1,2 +1,2 @@
-export declare const StyledContainerWithPopper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledPopperWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;

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

@@ -1,7 +1,7 @@
 import { DSAutocompleteT } from '../react-desc-prop-types';
-export declare const getSelectableOptions: (options: Array<CBOptionT>) => Array<CBOptionT>;
-export declare const getOptions: (options: Array<CBOptionT>) => Array<CBOptionT>;
-export declare const isSelectedValueEmpty: (value: CBOptionT | Array<CBOptionT>) => boolean;
-export declare const isSelectedValueMultiple: (value: CBOptionT | Array<CBOptionT>) => boolean;
-export declare const findInCircularList: <T extends unknown>(list: T[], from: number, criteria: (item: T) => boolean, step?: number) => number;
+export declare const getSelectableOptions: (options: Array<DSAutocompleteT.OptionTypes>) => Array<DSAutocompleteT.OptionTypes>;
+export declare const getOptions: (options: Array<DSAutocompleteT.OptionTypes>) => Array<DSAutocompleteT.OptionTypes>;
+export declare const isSelectedValueEmpty: (value: DSAutocompleteT.OptionTypes | Array<DSAutocompleteT.OptionTypes>) => boolean;
+export declare const isSelectedValueMultiple: (value: DSAutocompleteT.OptionTypes | Array<DSAutocompleteT.OptionTypes>) => boolean;
+export declare const findInCircularList: (list: DSAutocompleteT.OptionTypes[], from: number, criteria: (item: DSAutocompleteT.OptionTypes) => boolean, step?: number) => number;
 export declare const getFirstOption: (options: DSAutocompleteT.OptionTypes[]) => string;

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

@@ -5,7 +5,6 @@ export declare namespace DSControlledCheckboxT {
         checked: boolean | 'mixed';
         tabIndex?: number;
         hasError?: boolean;
-        'data-testid'?: string;
         wrapLabel: boolean;
     }
     interface OptionalProps {
@@ -35,6 +34,7 @@ export declare const propTypes: {
     label: import("@elliemae/ds-props-helpers/types/propTypes/types").ReactDescT;
     hasError: import("@elliemae/ds-props-helpers/types/propTypes/types").ReactDescT;
     innerRef: import("@elliemae/ds-props-helpers/types/propTypes/types").ReactDescT;
+    wrapLabel: import("@elliemae/ds-props-helpers/types/propTypes/types").ReactDescT;
     'aria-*': import("@elliemae/ds-props-helpers/types/propTypes/types").ReactDescT;
     'on-*': import("@elliemae/ds-props-helpers/types/propTypes/types").ReactDescT;
     'data-*': import("@elliemae/ds-props-helpers/types/propTypes/types").ReactDescT;

package/types/checkbox/styles.d.ts

@@ -3,3 +3,4 @@ export declare const StyledCheckBox: any;
 export declare const StyledInput: any;
 export declare const StyledInputMixed: any;
 export declare const StyledLabel: any;
+export declare const StyledWrapLabel: any;

package/types/combobox/parts/menu-list/styled.d.ts

@@ -2,4 +2,5 @@ export declare const StyledListWrapper: any;
 export declare const StyledList: any;
 export declare const StyledVirtualListWrapper: any;
 export declare const StyledCreatableLabel: any;
+export declare const StyledCreatableValue: any;
 export declare const StyledNoResultsWrapper: any;

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

@@ -31,11 +31,10 @@ export declare namespace DSComboboxT {
         menuMaxHeight?: number;
         placeholder?: string;
         autoFocus?: boolean;
-        filteredOptions: OptionTypes[];
+        isMenuOpen?: boolean;
+        onMenuChange?: (state: boolean, reason: string, e: Event) => void;
         onCreate?: (label: string) => void;
-        onFilter?: (newOptions: OptionTypes[], inputValue: string) => void;
-        onMenuOpen?: () => void;
-        onMenuClose?: () => void;
+        onFilter?: (newOptions: OptionTypes[], inputValue?: string) => void;
         onCancel?: () => void;
         onBlur?: () => void;
         onSelectAll?: (suggestedValue: OptionTypes[] | [], event: React.MouseEvent | React.KeyboardEvent) => null;
@@ -49,11 +48,13 @@ export declare namespace DSComboboxT {
     interface DefaultProps {
         startPlacementPreference: string;
         placementOrderPreference: string[];
+        filteredOptions: OptionTypes[];
         hasError: boolean;
         inline: boolean;
         withoutPortal: boolean;
         zIndex: number;
         disabled: boolean;
+        noOptionsMessage: string;
         innerRef: React.RefObject<HTMLInputElement>;
         useMask: DSMaskT.Hook | typeof noop;
     }
@@ -70,12 +71,13 @@ export declare const ComboboxPropTypes: {
     disabled: 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;
+    noOptionsMessage: import("@elliemae/ds-props-helpers/types/propTypes/types").ReactDescT;
+    closeMenuOnScroll: import("@elliemae/ds-props-helpers/types/propTypes/types").ReactDescT;
     onChange: import("@elliemae/ds-props-helpers/types/propTypes/types").ReactDescT;
     onFilter: import("@elliemae/ds-props-helpers/types/propTypes/types").ReactDescT;
     onCreate: import("@elliemae/ds-props-helpers/types/propTypes/types").ReactDescT;
     onCancel: import("@elliemae/ds-props-helpers/types/propTypes/types").ReactDescT;
-    onMenuOpen: import("@elliemae/ds-props-helpers/types/propTypes/types").ReactDescT;
-    onMenuClose: import("@elliemae/ds-props-helpers/types/propTypes/types").ReactDescT;
+    onMenuChange: import("@elliemae/ds-props-helpers/types/propTypes/types").ReactDescT;
     inputMinWidth: import("@elliemae/ds-props-helpers/types/propTypes/types").ReactDescT;
     menuMinWidth: import("@elliemae/ds-props-helpers/types/propTypes/types").ReactDescT;
     menuMaxHeight: import("@elliemae/ds-props-helpers/types/propTypes/types").ReactDescT;

package/types/combobox/sharedTypes.d.ts

@@ -1,11 +1,11 @@
-/// <reference types="react" />
+import React from 'react';
 import { useVirtual } from 'react-virtual';
 import { DSComboboxT } from './react-desc-prop-types';
 export declare namespace DSComboboxInternalsT {
     interface ComboBoxContextT {
         props: DSComboboxT.InternalProps;
         virtualListHelpers?: ReturnType<typeof useVirtual>;
-        showPopover: boolean;
+        menuState: boolean;
         setShowPopover: React.Dispatch<React.SetStateAction<boolean>>;
         referenceElement: HTMLElement | null;
         setReferenceElement: React.Dispatch<React.SetStateAction<HTMLElement | null>>;
@@ -25,6 +25,7 @@ export declare namespace DSComboboxInternalsT {
         setFocusOptionIdx: React.Dispatch<React.SetStateAction<string>>;
         showSelectedOptions: boolean;
         setShowSelectedOptions: React.Dispatch<React.SetStateAction<boolean>>;
+        setMenuState: (newState: boolean, reason?: string, e?: React.KeyboardEvent | React.MouseEvent | React.ChangeEvent<HTMLInputElement>) => void;
     }
 }
 export declare const isSeparator: (el: DSComboboxT.OptionTypes | undefined) => el is DSComboboxT.ItemSeparatorOptions;

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

@@ -11,3 +11,4 @@ export declare const getSuggestedValueOnChange: (selectedOption: DSComboboxT.Ite
 export declare const filterOptions: (inputValue: string, options: DSComboboxT.OptionTypes[]) => DSComboboxT.OptionTypes[];
 export declare const selectedValuesWithSections: (optionsToParse: DSComboboxT.OptionTypes[], multiSelectedValue: DSComboboxT.ItemOption[]) => DSComboboxT.OptionTypes[];
 export declare const getFilteredOptionsSelected: (filteredOption: DSComboboxT.OptionTypes[], selectedValues: DSComboboxT.ItemOption[]) => DSComboboxT.OptionTypes[];
+export declare const scrollIfNeeded: (elem: HTMLElement, options?: ScrollIntoViewOptions | undefined) => void;

package/types/input-group/exported-related/data-test-ids.d.ts

@@ -0,0 +1,6 @@
+export declare const InputGroupDataTestIds: {
+    CONTAINER: string;
+    LEFTADDON: string;
+    RIGHTADDON: string;
+    INPUTCONTAINER: string;
+};

package/types/input-group/exported-related/index.d.ts

@@ -0,0 +1,2 @@
+export * from './data-test-ids';
+export * from './theming';

package/types/input-group/exported-related/theming.d.ts

@@ -0,0 +1,6 @@
+export declare const DSInputGroupName = "ds-input-group";
+export declare const DSInputGroupSlots: {
+    CONTAINER: string;
+    LEFT_ADDON: string;
+    RIGHT_ADDON: string;
+};

package/types/input-group/styled.d.ts

@@ -1,7 +1,4 @@
-/// <reference types="react" />
-export declare const StyledContainer: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/types/react-desc-prop-types").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>, import("styled-components").DefaultTheme, {
-    cols: string[];
-}, never>;
-export declare const StyledLeftAddon: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledRightAddon: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledInput: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledContainer: any;
+export declare const StyledLeftAddon: any;
+export declare const StyledRightAddon: any;
+export declare const StyledInput: any;

package/types/text-input/config/useInputText.d.ts

@@ -53,7 +53,7 @@ export declare const useInputText: (props: DSInputTextT.Props) => {
         tabIndex: number;
         translate: "yes" | "no";
         radioGroup: string;
-        role: "separator" | "option" | (string & {}) | "article" | "button" | "dialog" | "figure" | "form" | "img" | "link" | "main" | "menu" | "menuitem" | "table" | "switch" | "search" | "alert" | "alertdialog" | "application" | "banner" | "cell" | "checkbox" | "columnheader" | "combobox" | "complementary" | "contentinfo" | "definition" | "directory" | "document" | "feed" | "grid" | "gridcell" | "group" | "heading" | "list" | "listbox" | "listitem" | "log" | "marquee" | "math" | "menubar" | "menuitemcheckbox" | "menuitemradio" | "navigation" | "none" | "note" | "presentation" | "progressbar" | "radio" | "radiogroup" | "region" | "row" | "rowgroup" | "rowheader" | "scrollbar" | "searchbox" | "slider" | "spinbutton" | "status" | "tab" | "tablist" | "tabpanel" | "term" | "textbox" | "timer" | "toolbar" | "tooltip" | "tree" | "treegrid" | "treeitem";
+        role: "separator" | "option" | (string & {}) | "article" | "button" | "dialog" | "figure" | "form" | "img" | "link" | "main" | "menu" | "menuitem" | "table" | "switch" | "alert" | "alertdialog" | "application" | "banner" | "cell" | "checkbox" | "columnheader" | "combobox" | "complementary" | "contentinfo" | "definition" | "directory" | "document" | "feed" | "grid" | "gridcell" | "group" | "heading" | "list" | "listbox" | "listitem" | "log" | "marquee" | "math" | "menubar" | "menuitemcheckbox" | "menuitemradio" | "navigation" | "none" | "note" | "presentation" | "progressbar" | "radio" | "radiogroup" | "region" | "row" | "rowgroup" | "rowheader" | "scrollbar" | "search" | "searchbox" | "slider" | "spinbutton" | "status" | "tab" | "tablist" | "tabpanel" | "term" | "textbox" | "timer" | "toolbar" | "tooltip" | "tree" | "treegrid" | "treeitem";
         about: string;
         datatype: string;
         inlist: any;
@@ -74,7 +74,7 @@ export declare const useInputText: (props: DSInputTextT.Props) => {
         results: number;
         security: string;
         unselectable: "on" | "off";
-        inputMode: "text" | "search" | "none" | "tel" | "url" | "email" | "numeric" | "decimal";
+        inputMode: "text" | "none" | "search" | "tel" | "url" | "email" | "numeric" | "decimal";
         is: string;
         'aria-activedescendant': string;
         'aria-atomic': boolean | "true" | "false";
@@ -101,7 +101,7 @@ export declare const useInputText: (props: DSInputTextT.Props) => {
         'aria-label': string;
         'aria-labelledby': string;
         'aria-level': number;
-        'aria-live': "off" | "assertive" | "polite";
+        'aria-live': "off" | "polite" | "assertive";
         'aria-modal': boolean | "true" | "false";
         'aria-multiline': boolean | "true" | "false";
         'aria-multiselectable': boolean | "true" | "false";
@@ -420,7 +420,7 @@ export declare const useInputText: (props: DSInputTextT.Props) => {
         overflow: (string & {}) | "hidden" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "auto" | "scroll" | "-moz-hidden-unscrollable" | "clip" | "visible" | import("@xstyled/system").ThemeProp<import("csstype").Property.Overflow, import("@xstyled/system").Theme>;
         overflowX: "hidden" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "auto" | "scroll" | "-moz-hidden-unscrollable" | "clip" | "visible" | import("@xstyled/system").ThemeProp<import("csstype").Property.OverflowX, import("@xstyled/system").Theme>;
         overflowY: "hidden" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "auto" | "scroll" | "-moz-hidden-unscrollable" | "clip" | "visible" | import("@xstyled/system").ThemeProp<import("csstype").Property.OverflowY, import("@xstyled/system").Theme>;
-        position: "fixed" | "inherit" | "absolute" | "-moz-initial" | "initial" | "revert" | "unset" | "-webkit-sticky" | "relative" | "static" | "sticky" | import("@xstyled/system").ThemeProp<import("csstype").Property.Position, import("@xstyled/system").Theme>;
+        position: "inherit" | "absolute" | "-moz-initial" | "initial" | "revert" | "unset" | "fixed" | "-webkit-sticky" | "relative" | "static" | "sticky" | import("@xstyled/system").ThemeProp<import("csstype").Property.Position, import("@xstyled/system").Theme>;
         zIndex: string | (string & {}) | (number & {}) | import("@xstyled/system").ThemeProp<string | (string & {}) | (number & {}), import("@xstyled/system").Theme>;
         top: string | 0 | (string & {}) | import("@xstyled/system").ThemeProp<string | 0 | (string & {}), import("@xstyled/system").Theme>;
         right: string | 0 | (string & {}) | import("@xstyled/system").ThemeProp<string | 0 | (string & {}), import("@xstyled/system").Theme>;