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

package/cjs/text-input/DSInputText.js

@@ -0,0 +1,89 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
+var _jsx = require('@babel/runtime/helpers/jsx');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+require('react');
+var dsIcons = require('@elliemae/ds-icons');
+var dsIcon = require('@elliemae/ds-icon');
+var dsPropsHelpers = require('@elliemae/ds-props-helpers');
+var useInputText = require('./config/useInputText.js');
+var dataTestIds = require('./exported-related/data-test-ids.js');
+var reactDescPropTypes = require('./react-desc-prop-types.js');
+var components = require('./styled/components.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
+
+const _excluded = ["className"];
+
+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__default["default"](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 DSInputText = props => {
+  const _useInputText = useInputText.useInputText(props),
+        {
+    globalAttributes: {
+      className
+    },
+    hasFocus,
+    handlers,
+    propsWithDefault,
+    xstyledProps
+  } = _useInputText,
+        otherGlobalAttributes = _objectWithoutProperties__default["default"](_useInputText.globalAttributes, _excluded);
+
+  const {
+    clearable,
+    disabled,
+    hasError,
+    innerRef,
+    placeholder,
+    readOnly,
+    inputSize,
+    onClear,
+    value
+  } = propsWithDefault;
+  const shouldDisplayClearButton = clearable && value !== '';
+  return /*#__PURE__*/jsxRuntime.jsxs(components.StyledInputWrapper, _objectSpread(_objectSpread({
+    className: className,
+    cols: shouldDisplayClearButton ? ['auto', 'min-content'] : ['auto'],
+    isDisabled: disabled,
+    isReadOnly: readOnly,
+    hasError: hasError,
+    hasFocus: hasFocus,
+    inputSize: inputSize
+  }, xstyledProps), {}, {
+    children: [/*#__PURE__*/jsxRuntime.jsx(components.StyledInput, _objectSpread(_objectSpread({
+      "data-testid": dataTestIds.DSInputTextDataTestIds.INPUT,
+      disabled: disabled,
+      placeholder: placeholder,
+      readOnly: readOnly,
+      ref: innerRef,
+      value: value
+    }, handlers), otherGlobalAttributes)), shouldDisplayClearButton && /*#__PURE__*/_jsx__default["default"](components.StyledClearButton, {
+      "aria-label": "Clear input value",
+      buttonType: "icon",
+      "data-testid": dataTestIds.DSInputTextDataTestIds.CLEAR_BUTTON,
+      onClick: onClear
+    }, void 0, /*#__PURE__*/_jsx__default["default"](dsIcons.CloseMedium, {
+      color: dsIcon.DSIconColors.PRIMARY
+    }))]
+  }));
+};
+const DSInputTextWithSchema = dsPropsHelpers.describe(DSInputText);
+DSInputTextWithSchema.propTypes = reactDescPropTypes.DSInputTextPropTypes;
+
+exports.DSInputText = DSInputText;
+exports.DSInputTextWithSchema = DSInputTextWithSchema;

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

@@ -0,0 +1,54 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('core-js/modules/web.dom-collections.iterator.js');
+var dsPropsHelpers = require('@elliemae/ds-props-helpers');
+var React = require('react');
+var reactDescPropTypes = require('../react-desc-prop-types.js');
+
+const useInputText = props => {
+  const propsWithDefault = dsPropsHelpers.useMemoMergePropsWithDefault(props, reactDescPropTypes.defaultProps);
+  dsPropsHelpers.useValidateTypescriptPropTypes(props, reactDescPropTypes.DSInputTextPropTypes);
+  const {
+    onValueChange
+  } = propsWithDefault; // =============================================================================
+  // INTERNAL STATE
+  // =============================================================================
+
+  const [hasFocus, setHasFocus] = React.useState(false); // ===========================================================================
+  // INTERNAL HANDLERS
+  // ===========================================================================
+
+  const handleOnChange = React.useCallback(e => {
+    onValueChange(e.target.value, e);
+  }, [onValueChange]);
+  const handleOnFocus = React.useCallback(() => {
+    setHasFocus(true);
+  }, []);
+  const handleOnBlur = React.useCallback(() => {
+    setHasFocus(false);
+  }, []); // =============================================================================
+  // GLOBAL ATTRIBUTES & XSTYLED PROPS
+  // =============================================================================
+
+  const globalAttributes = dsPropsHelpers.useGetGlobalAttributes(propsWithDefault, {
+    onChange: handleOnChange,
+    onFocus: handleOnFocus,
+    onBlur: handleOnBlur
+  });
+  const xstyledProps = dsPropsHelpers.useGetXstyledProps(propsWithDefault);
+  return React.useMemo(() => ({
+    globalAttributes,
+    hasFocus,
+    handlers: {
+      onChange: handleOnChange,
+      onFocus: handleOnFocus,
+      onBlur: handleOnBlur
+    },
+    propsWithDefault,
+    xstyledProps
+  }), [globalAttributes, handleOnBlur, handleOnChange, handleOnFocus, hasFocus, propsWithDefault, xstyledProps]);
+};
+
+exports.useInputText = useInputText;

package/cjs/text-input/exported-related/data-test-ids.js

@@ -0,0 +1,10 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const DSInputTextDataTestIds = {
+  INPUT: 'ds-input-text-input',
+  CLEAR_BUTTON: 'ds-input-text-clear-button'
+};
+
+exports.DSInputTextDataTestIds = DSInputTextDataTestIds;

package/cjs/text-input/exported-related/index.js

@@ -0,0 +1,12 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var dataTestIds = require('./data-test-ids.js');
+var theming = require('./theming.js');
+
+
+
+exports.DSInputTextDataTestIds = dataTestIds.DSInputTextDataTestIds;
+exports.DSInputTextName = theming.DSInputTextName;
+exports.DSInputTextSlots = theming.DSInputTextSlots;

package/cjs/text-input/exported-related/name.js

@@ -0,0 +1,7 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const DSInputTextName = 'ds-input-text';
+
+exports.DSInputTextName = DSInputTextName;

package/cjs/text-input/exported-related/slots.js

@@ -0,0 +1,11 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const DSInputTextSlots = {
+  INPUT: 'input',
+  INPUT_WRAPPER: 'input-wrapper',
+  CLEAR_BUTTON: 'input-clear-button'
+};
+
+exports.DSInputTextSlots = DSInputTextSlots;

package/cjs/text-input/exported-related/theming.js

@@ -0,0 +1,13 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const DSInputTextName = 'ds-input-text';
+const DSInputTextSlots = {
+  INPUT_WRAPPER: 'root',
+  INPUT: 'input',
+  CLEAR_BUTTON: 'input-clear-button'
+};
+
+exports.DSInputTextName = DSInputTextName;
+exports.DSInputTextSlots = DSInputTextSlots;

package/cjs/text-input/index.js

@@ -0,0 +1,15 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var DSInputText = require('./DSInputText.js');
+var dataTestIds = require('./exported-related/data-test-ids.js');
+var theming = require('./exported-related/theming.js');
+
+
+
+exports.DSInputText = DSInputText.DSInputText;
+exports.DSInputTextWithSchema = DSInputText.DSInputTextWithSchema;
+exports.DSInputTextDataTestIds = dataTestIds.DSInputTextDataTestIds;
+exports.DSInputTextName = theming.DSInputTextName;
+exports.DSInputTextSlots = theming.DSInputTextSlots;

package/cjs/text-input/react-desc-prop-types.js

@@ -0,0 +1,45 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var dsPropsHelpers = require('@elliemae/ds-props-helpers');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+
+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__default["default"](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 defaultProps = {
+  value: '',
+  onValueChange: () => null,
+  onClear: () => null,
+  placeholder: 'Hint Text',
+  disabled: false,
+  readOnly: false,
+  hasError: false,
+  innerRef: () => null,
+  inputSize: 'm',
+  clearable: false
+};
+const DSInputTextPropTypes = _objectSpread(_objectSpread(_objectSpread({}, dsPropsHelpers.globalAttributesPropTypes), dsPropsHelpers.xstyledPropTypes), {}, {
+  value: dsPropsHelpers.PropTypes.oneOfType([dsPropsHelpers.PropTypes.string, dsPropsHelpers.PropTypes.number, dsPropsHelpers.PropTypes.arrayOf(dsPropsHelpers.PropTypes.string)]).description('Value of the input').defaultValue(''),
+  onChange: dsPropsHelpers.PropTypes.func.description('onChange event handler').defaultValue(() => null),
+  placeholder: dsPropsHelpers.PropTypes.string.description('Value of the placeholder').defaultValue(''),
+  innerRef: dsPropsHelpers.PropTypes.oneOfType([dsPropsHelpers.PropTypes.object, dsPropsHelpers.PropTypes.func]).description('Reference to the input').defaultValue(null),
+  disabled: dsPropsHelpers.PropTypes.bool.description('Whether the input is disabled').defaultValue(false),
+  readOnly: dsPropsHelpers.PropTypes.bool.description('Whether the input is readonly').defaultValue(false),
+  hasError: dsPropsHelpers.PropTypes.bool.description('Whether the input has error').defaultValue(false),
+  inputSize: dsPropsHelpers.PropTypes.oneOf(['s', 'm']).description('Size of the input').defaultValue('m'),
+  clearable: dsPropsHelpers.PropTypes.bool.description('Whether the input is clearable').defaultValue(false)
+});
+
+exports.DSInputTextPropTypes = DSInputTextPropTypes;
+exports.defaultProps = defaultProps;

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

@@ -0,0 +1,33 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
+var dsSystem = require('@elliemae/ds-system');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefaultLegacy(_taggedTemplateLiteral);
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+const commonBorderCss = dsSystem.css(_templateObject || (_templateObject = _taggedTemplateLiteral__default["default"](["\n  border: 1px solid ", ";\n"])), dsSystem.th.color('neutral-400'));
+const readOnlyBorderCss = dsSystem.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default["default"](["\n  border: 1px solid transparent;\n  border-top-color: ", ";\n"])), dsSystem.th.color('neutral-400'));
+const disabledBorderCss = commonBorderCss;
+const hasErrorBorderCss = dsSystem.css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral__default["default"](["\n  border: 1px solid ", ";\n"])), dsSystem.th.color('danger-900'));
+const hoverBorderCss = dsSystem.css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral__default["default"](["\n  border: 1px solid ", ";\n"])), dsSystem.th.color('brand-700'));
+const focusBorderCss = dsSystem.css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral__default["default"](["\n  border: 1px solid transparent;\n  outline: 2px solid ", ";\n  outline-offset: -1px;\n"])), dsSystem.th.color('brand-700'));
+const getBorderCss = props => {
+  if (props.isDisabled) return disabledBorderCss;
+  if (props.hasFocus) return focusBorderCss;
+  if (props.hasError) return hasErrorBorderCss;
+  if (props.isReadOnly) return readOnlyBorderCss;
+  return commonBorderCss;
+};
+const getHoverBorderCss = props => {
+  if (props.isDisabled) return disabledBorderCss;
+  if (props.hasFocus) return focusBorderCss;
+  return hoverBorderCss;
+};
+
+exports.getBorderCss = getBorderCss;
+exports.getHoverBorderCss = getHoverBorderCss;

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

@@ -0,0 +1,38 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
+var DSButton = require('@elliemae/ds-button');
+var dsGrid = require('@elliemae/ds-grid');
+var dsSystem = require('@elliemae/ds-system');
+var styledComponents = require('@xstyled/styled-components');
+var theming = require('../exported-related/theming.js');
+var borders = require('./borders.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefaultLegacy(_taggedTemplateLiteral);
+
+var _templateObject, _templateObject2, _templateObject3;
+const StyledInputWrapper = dsSystem.styled(dsGrid.Grid, {
+  name: theming.DSInputTextName,
+  slot: theming.DSInputTextSlots.INPUT_WRAPPER
+})(_templateObject || (_templateObject = _taggedTemplateLiteral__default["default"](["\n  height: ", ";\n\n  ", "\n  border-radius: 2px;\n\n  :hover {\n    ", "\n  }\n\n  ", "\n  ", "\n  ", "\n"])), _ref => {
+  let {
+    inputSize
+  } = _ref;
+  return inputSize === 'm' ? '28px' : '24px';
+}, borders.getBorderCss, borders.getHoverBorderCss, styledComponents.layout, styledComponents.space, styledComponents.sizing);
+const StyledInput = dsSystem.styled('input', {
+  name: theming.DSInputTextName,
+  slot: theming.DSInputTextSlots.INPUT
+})(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default["default"](["\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"])), dsSystem.th.space('xxs'), dsSystem.th.fontWeight('regular'), dsSystem.th.color('neutral-500'), dsSystem.th.color('neutral-080'));
+const StyledClearButton = dsSystem.styled(DSButton.DSButtonV2, {
+  name: theming.DSInputTextName,
+  slot: theming.DSInputTextSlots.CLEAR_BUTTON
+})(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral__default["default"](["\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"])));
+
+exports.StyledClearButton = StyledClearButton;
+exports.StyledInput = StyledInput;
+exports.StyledInputWrapper = StyledInputWrapper;

package/cjs/{controlled-toggle → toggle}/styles.js

@@ -10,7 +10,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
 const StyledContainer = /*#__PURE__*/styled__default["default"].div.withConfig({
-  componentId: "sc-v733m4-0"
+  componentId: "sc-yhh3ee-0"
 })(["display:inline-flex;width:fit-content;justify-content:center;align-items:center;height:", ";border-radius:", ";outline:none;position:relative;border:2px solid transparent;&:hover,&:focus-within{border:2px solid ", ";&:after{content:'';height:calc(100% + 4px);width:calc(100% + 4px);border:1px solid ", ";border-radius:20px;position:absolute;}}"], _ref => {
   let {
     size
@@ -33,7 +33,7 @@ const StyledContainer = /*#__PURE__*/styled__default["default"].div.withConfig({
   return theme.colors.brand[600];
 });
 const StyledLabel = /*#__PURE__*/styled__default["default"].div.withConfig({
-  componentId: "sc-v733m4-1"
+  componentId: "sc-yhh3ee-1"
 })(["width:", ";height:", ";z-index:2;outline:none;border-radius:", ";"], _ref5 => {
   let {
     width,
@@ -52,7 +52,7 @@ const StyledLabel = /*#__PURE__*/styled__default["default"].div.withConfig({
   return styleHelpers.labelHeight[size];
 });
 const StyledVisibleContent = /*#__PURE__*/styled__default["default"].label.withConfig({
-  componentId: "sc-v733m4-2"
+  componentId: "sc-yhh3ee-2"
 })(["display:flex;margin:0;padding:0;align-items:center;height:100%;flex-direction:", ";border-radius:", ";border:", ";transition:background-color 0.2s;background-color:", ";&:hover{cursor:", ";}"], _ref8 => {
   let {
     checked
@@ -90,7 +90,7 @@ const StyledVisibleContent = /*#__PURE__*/styled__default["default"].label.withC
   return styleHelpers.handleCursors(disabled, readOnly);
 });
 const StyledCircle = /*#__PURE__*/styled__default["default"].div.withConfig({
-  componentId: "sc-v733m4-3"
+  componentId: "sc-yhh3ee-3"
 })(["height:", ";width:", ";border-radius:50%;background-color:", ";"], _ref13 => {
   let {
     size
@@ -109,7 +109,7 @@ const StyledCircle = /*#__PURE__*/styled__default["default"].div.withConfig({
   return readOnly ? theme.colors.neutral[100] : theme.colors.neutral['000'];
 });
 const StyledText = /*#__PURE__*/styled__default["default"].div.withConfig({
-  componentId: "sc-v733m4-4"
+  componentId: "sc-yhh3ee-4"
 })(["display:flex;flex-grow:1;line-height:1;margin-bottom:-0.12rem;align-items:center;justify-content:", ";font-size:", ";font-weight:", ";color:", ";", " ", ""], _ref16 => {
   let {
     isLongerTextRendering
@@ -146,10 +146,10 @@ const StyledText = /*#__PURE__*/styled__default["default"].div.withConfig({
   return isLongerTextRendering && !checked ? "margin-left: 4px;" : undefined;
 });
 const StyledInput = /*#__PURE__*/styled__default["default"].input.withConfig({
-  componentId: "sc-v733m4-5"
+  componentId: "sc-yhh3ee-5"
 })(["position:absolute;opacity:0;z-index:20;height:100%;width:100%;cursor:pointer;"]);
 const SetLabelWidth = /*#__PURE__*/styled__default["default"].div.withConfig({
-  componentId: "sc-v733m4-6"
+  componentId: "sc-yhh3ee-6"
 })(["font-size:", ";font-weight:", ";width:auto;position:absolute;white-space:nowrap;visibility:hidden;"], _ref22 => {
   let {
     theme,

package/esm/{controlled-autocomplete → autocomplete}/parts/a11y-messages/styled.js

@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 
 const StyledA11ySelectedValues = /*#__PURE__*/styled.span.withConfig({
-  componentId: "sc-1yqq7du-0"
+  componentId: "sc-cm1aqq-0"
 })(["width:1px;height:1px;position:absolute;clip:rect(1px,1px,1px,1px);"]);
 
 export { StyledA11ySelectedValues };

package/esm/{controlled-autocomplete → autocomplete}/parts/container/styled.js

@@ -1,13 +1,13 @@
 import styled from 'styled-components';
 
 const StyledContainerWithPopper = /*#__PURE__*/styled.div.withConfig({
-  componentId: "sc-1xmjot4-0"
+  componentId: "sc-xupfk9-0"
 })(["width:100%;height:28px;position:relative;"]);
 const StyledContainerInline = /*#__PURE__*/styled.div.withConfig({
-  componentId: "sc-1xmjot4-1"
+  componentId: "sc-xupfk9-1"
 })(["width:100%;position:relative;"]);
 const StyledPopperWrapper = /*#__PURE__*/styled.div.withConfig({
-  componentId: "sc-1xmjot4-2"
+  componentId: "sc-xupfk9-2"
 })(["background:#fff;overflow:auto;position:relative;"]);
 
 export { StyledContainerInline, StyledContainerWithPopper, StyledPopperWrapper };

package/esm/{controlled-autocomplete → autocomplete}/parts/controls/styled.js

@@ -12,7 +12,7 @@ const focusBorder = css(_templateObject2 || (_templateObject2 = _taggedTemplateL
   return theme.colors.brand[700];
 });
 const StyledControlsWrapper = /*#__PURE__*/styled(Grid).withConfig({
-  componentId: "sc-xlhlqm-0"
+  componentId: "sc-vp36gr-0"
 })(["background:transparent;position:relative;border-radius:2px;min-width:", ";align-items:center;align-content:center;height:28px;padding-left:8px;::after{display:block;content:' ';position:absolute;top:0;left:0;right:0;bottom:0;border-radius:2px;", " pointer-events:none;z-index:7;}:focus-within{::after{", "}}"], _ref2 => {
   let {
     minWidth
@@ -20,13 +20,13 @@ const StyledControlsWrapper = /*#__PURE__*/styled(Grid).withConfig({
   return "".concat(minWidth, "px");
 }, normalBorder, focusBorder);
 const StyledInput = /*#__PURE__*/styled.input.withConfig({
-  componentId: "sc-xlhlqm-1"
+  componentId: "sc-vp36gr-1"
 })(["::placeholder{font-style:italic;color:", ";}font-size:13px;line-height:13px;border:none;padding:0;outline:none;width:100%;color:", ";&:focus{outline:none;}"], props => props.theme.colors.neutral[500], props => props.theme.colors.neutral[700]);
 const StyledInputPlaceHolder = /*#__PURE__*/styled.div.withConfig({
-  componentId: "sc-xlhlqm-2"
+  componentId: "sc-vp36gr-2"
 })(["font-style:italic;color:", ";position:absolute;display:flex;align-items:center;width:100%;user-select:none;height:28px;"], props => props.theme.colors.neutral[500]);
 const StyledInputWrapper = /*#__PURE__*/styled.div.withConfig({
-  componentId: "sc-xlhlqm-3"
+  componentId: "sc-vp36gr-3"
 })(["position:relative;flex:1;margin-right:5px;display:flex;align-items:center;"]);
 
 export { StyledControlsWrapper, StyledInput, StyledInputPlaceHolder, StyledInputWrapper };

package/esm/autocomplete/parts/controls/useKeyboardNavigation.js

@@ -0,0 +1,89 @@
+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 { AutocompleteContext } from '../../AutocompleteCTX.js';
+import { findInCircularList } from '../../utils/listHelper.js';
+
+const isOptionFocuseable = opt => !['section', 'separator'].includes(opt.type);
+
+const useKeyboardNavigation = () => {
+  const {
+    props: {
+      onValueChange,
+      options
+    },
+    setShowPopover,
+    showPopover,
+    focusOptionIdx,
+    setCurrentOption,
+    scrollOptionIntoView
+  } = useContext(AutocompleteContext);
+  const currentItemIndex = options.findIndex(opt => opt.dsId === focusOptionIdx);
+  const currentItem = options.find(item => item.type === 'option' && item.dsId === focusOptionIdx);
+  const selectOption = useCallback(e => {
+    if (onValueChange) onValueChange(currentItem.label, e);
+    setShowPopover(false);
+  }, [currentItem, setShowPopover, onValueChange]);
+  const onInputKeyDown = useCallback(e => {
+    const targetElement = e.target;
+
+    if (['ArrowDown', 'ArrowUp', 'Enter'].includes(e.key) || e.keyCode >= 48 && e.keyCode <= 90) {
+      setShowPopover(true);
+    } // =============================================================================
+    // ENTER AND SPACE KEY SELECT OPTIONS AND OPEN CLOSE THE POPOVER
+    // =============================================================================
+
+
+    if (e.keyCode === 32 && targetElement.value === '' || e.key === 'Enter') {
+      if (showPopover) {
+        e.preventDefault();
+        selectOption(e);
+      }
+    } // =============================================================================
+    // ARROWS UP AND DOWN
+    // =============================================================================
+
+
+    if (e.key === 'ArrowDown') {
+      e.preventDefault();
+
+      if (showPopover) {
+        const nextItemIndex = findInCircularList(options, currentItemIndex, isOptionFocuseable);
+        setCurrentOption(options[nextItemIndex].dsId);
+        scrollOptionIntoView(options[nextItemIndex].dsId);
+      } else {
+        setShowPopover(true);
+      }
+    }
+
+    if (e.key === 'ArrowUp') {
+      e.preventDefault();
+
+      if (showPopover) {
+        const nextItemIndex = findInCircularList(options, currentItemIndex, isOptionFocuseable, -1);
+        setCurrentOption(options[nextItemIndex].dsId);
+        scrollOptionIntoView(options[nextItemIndex].dsId);
+      } else {
+        setShowPopover(true);
+        setTimeout(() => {
+          const nextItemIndex = findInCircularList(options, 0, isOptionFocuseable, -1);
+          setCurrentOption(options[nextItemIndex].dsId);
+          scrollOptionIntoView(options[nextItemIndex].dsId);
+        });
+      }
+    } // =============================================================================
+    // ESCAPE
+    // =============================================================================
+
+
+    if (e.key === 'Escape') {
+      setShowPopover(false);
+    }
+  }, [scrollOptionIntoView, currentItemIndex, options, showPopover, setCurrentOption, setShowPopover, selectOption]);
+  return {
+    onInputKeyDown
+  };
+};
+
+export { useKeyboardNavigation };

package/esm/autocomplete/parts/controls/useMaskedOnChange.js

@@ -0,0 +1,24 @@
+import { useContext, useCallback } from 'react';
+import { AutocompleteContext } from '../../AutocompleteCTX.js';
+
+const useMaskedOnChange = () => {
+  const {
+    props: {
+      useMask,
+      onChange
+    },
+    setShowPopover
+  } = useContext(AutocompleteContext); // default onchange when no mask provided
+
+  const handleOnChange = useCallback(e => {
+    setShowPopover(true);
+    onChange(e.target.value);
+  }, [onChange, setShowPopover]);
+  const onChangeMask = useMask({
+    valueSetter: setInputValue,
+    onChange: handleOnChange
+  });
+  return (onChangeMask === null || onChangeMask === void 0 ? void 0 : onChangeMask.onChange) || handleOnChange;
+};
+
+export { useMaskedOnChange };