@hazelcast/ui 3.0.1-canary.0 → 3.0.1-canary.2

package/lib/components/AutocompleteField.js

@@ -1,241 +1,166 @@
-'use strict';
-
-var React = require('react');
-var ReactSelect = require('react-select');
-var reactUid = require('react-uid');
-var cn = require('classnames');
-var reactFeather = require('react-feather');
-var useIsomorphicLayoutEffect = require('react-use/lib/useIsomorphicLayoutEffect');
-var AutocompleteField_module = require('./AutocompleteField.module.scss.js');
-var components_Error = require('./Error.js');
-var utils_ssr = require('../utils/ssr.js');
-var components_IconButton = require('./IconButton.js');
-var components_FieldHeader = require('./FieldHeader.js');
-
+import React, { useMemo, useState } from 'react';
+import ReactSelect, { components } from 'react-select';
+import { useUID } from 'react-uid';
+import cn from 'classnames';
+import { Search, X } from 'react-feather';
+import useIsomorphicLayoutEffect from 'react-use/lib/useIsomorphicLayoutEffect';
+import styles from './AutocompleteField.module.scss';
+import { Error, errorId } from './Error';
+import { canUseDOM } from '../utils/ssr';
+import { IconButton } from './IconButton';
+import { FieldHeader } from './FieldHeader';
 /**
  * Transforms the value passed to the Autocomplete component so that it's in a format as underlying react-select expects
  * @param value - single value or an array of values
  * @param optionsMap - an object where option values are mapped to react-select expected objects
  */
-function getSelectedOptionFromValue({
-  value,
-  optionsMap
-}) {
-  var _a;
-  let option = null;
-  if (value) {
-    option = (_a = optionsMap[value]) !== null && _a !== void 0 ? _a : {
-      value: value,
-      label: value
-    };
-  }
-  return option;
+export function getSelectedOptionFromValue({ value, optionsMap }) {
+    var _a;
+    let option = null;
+    if (value) {
+        option = (_a = optionsMap[value]) !== null && _a !== void 0 ? _a : { value: value, label: value };
+    }
+    return option;
 }
-const Input = innerProps => {
-  // autoComplete='off' is hard-coded inside SelectField, but doesn't work in Chrome.
-  // Having an invalid value hard-coded disabled it in all browsers.
-  const props = {
-    ...innerProps,
-    autoComplete: 'chrome-off'
-  };
-  return /*#__PURE__*/React.createElement(ReactSelect.components.Input, {
-    ...props
-  });
+const Input = (innerProps) => {
+    // autoComplete='off' is hard-coded inside SelectField, but doesn't work in Chrome.
+    // Having an invalid value hard-coded disabled it in all browsers.
+    const props = {
+        ...innerProps,
+        autoComplete: 'chrome-off',
+    };
+    return React.createElement(components.Input, { ...props });
 };
-const DropdownIndicator = props => {
-  return /*#__PURE__*/React.createElement(ReactSelect.components.DropdownIndicator, {
-    ...props
-  }, /*#__PURE__*/React.createElement(reactFeather.Search, {
-    size: 20
-  }));
+const DropdownIndicator = (props) => {
+    return (React.createElement(components.DropdownIndicator, { ...props },
+        React.createElement(Search, { size: 20 })));
 };
 // innerProps set event handling
-const ClearIndicator = ({
-  innerProps
-}) => {
-  // Visually impaired people will use the keyboard (backspace) to remove the value. We do not want to confuse them by allowing to focus this button.
-  // @ts-ignore
-  return /*#__PURE__*/React.createElement(components_IconButton.IconButton, {
-    ...innerProps,
-    icon: reactFeather.X,
-    ariaHidden: true,
-    kind: "primary",
-    size: "medium",
-    className: AutocompleteField_module.default.clear,
-    tabIndex: -1
-  });
+const ClearIndicator = ({ innerProps }) => {
+    // Visually impaired people will use the keyboard (backspace) to remove the value. We do not want to confuse them by allowing to focus this button.
+    // @ts-ignore
+    return React.createElement(IconButton, { ...innerProps, icon: X, ariaHidden: true, kind: "primary", size: "medium", className: styles.clear, tabIndex: -1 });
 };
-const highlightOptionText = (labelText, inputValue) => {
-  const separator = '<%>';
-  const query = inputValue || '';
-  return query ? labelText.replace(new RegExp(query, 'ig'), `${separator}$&${separator}`).split(separator).filter(val => val).map((val, i) => (/*#__PURE__*/React.createElement("span", {
-    className: cn({
-      'hz-autocomplete-field__matched-option-text': val.toLowerCase() === query.toLowerCase()
-    }),
-    key: val + `${i}`
-  }, val))) : labelText;
+export const highlightOptionText = (labelText, inputValue) => {
+    const separator = '<%>';
+    const query = inputValue || '';
+    return query
+        ? labelText
+            .replace(new RegExp(query, 'ig'), `${separator}$&${separator}`)
+            .split(separator)
+            .filter((val) => val)
+            .map((val, i) => (React.createElement("span", { className: cn({
+                'hz-autocomplete-field__matched-option-text': val.toLowerCase() === query.toLowerCase(),
+            }), key: val + `${i}` }, val)))
+        : labelText;
 };
-const AutocompleteField = ({
-  'data-test': dataTest = 'autocomplete-field',
-  className,
-  disabled,
-  error,
-  errorClassName,
-  isClearable,
-  label,
-  labelClassName,
-  helperText,
-  size = 'medium',
-  menuPortalTarget = 'body',
-  name,
-  onChange,
-  onFocus,
-  onBlur,
-  onInputChange,
-  options,
-  required,
-  value,
-  placeholder = 'Search...',
-  showAriaLabel = false,
-  renderOption,
-  openMenuOnClick = true,
-  ...rest
-}) => {
-  // when the user clicks on an input with the value, the value should disappear,
-  // but then it should appear after the user selects something or blurs the input
-  const [isValueHidden, setValueHidden] = React.useState(false);
-  const id = reactUid.useUID();
-  useIsomorphicLayoutEffect(() => {
-    const menuContainer = getMenuContainer(menuPortalTarget);
-    if (menuContainer && !menuContainer.className.includes(AutocompleteField_module.default.menuContainer)) {
-      menuContainer.className = `${menuContainer.className} ${AutocompleteField_module.default.menuContainer}`;
-    }
-  }, [menuPortalTarget]);
-  const optionsMap = React.useMemo(() => options.reduce((acc, option) => {
-    acc[`${option.value}`] = option;
-    return acc;
-  }, {}), [options]);
-  const selectedOption = React.useMemo(() => getSelectedOptionFromValue({
-    value,
-    optionsMap
-  }), [optionsMap, value]);
-  const onChangeFn = React.useCallback(option => {
-    setValueHidden(false);
-    onChange(option === null ? null : option.value);
-  }, [onChange]);
-  const onFocusFn = React.useCallback(e => {
-    if (onFocus) {
-      onFocus(e);
-    }
-    if (!openMenuOnClick) {
-      setValueHidden(true);
-    }
-  }, [onFocus, openMenuOnClick]);
-  const onBlurFn = React.useCallback(e => {
-    if (onBlur) {
-      onBlur(e);
-    }
-    setValueHidden(false);
-  }, [onBlur]);
-  const formatOptionLabelFn = React.useCallback((option, labelMeta) => {
-    const {
-      inputValue
-    } = labelMeta;
-    let optionText = option.label;
-    if (inputValue) {
-      optionText = highlightOptionText(option.label, inputValue);
-    }
-    return renderOption ? renderOption(optionText, option, labelMeta) : optionText;
-  }, [renderOption]);
-  const getMenuContainer = menuPortalTarget => {
-    if (menuPortalTarget == 'body') {
-      // There is no document is SSR environment
-      return utils_ssr.canUseDOM ? document.body : undefined;
-    }
-    if (menuPortalTarget == 'self') {
-      return undefined;
-    }
-    return menuPortalTarget;
-  };
-  const props = {
-    inputId: id,
-    className: 'hz-autocomplete-field',
-    classNamePrefix: 'hz-autocomplete-field',
-    // https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-invalid_attribute
-    'aria-errormessage': error && components_Error.errorId(id),
-    'aria-invalid': !!error,
-    // @ts-ignore
-    'aria-required': required,
-    error,
-    isClearable: isClearable !== null && isClearable !== void 0 ? isClearable : false,
-    isDisabled: disabled,
-    isSearchable: true,
-    isMulti: false,
-    name: name,
-    value: selectedOption,
-    placeholder,
-    options,
-    onChange: onChangeFn,
-    onFocus: onFocusFn,
-    onBlur: onBlurFn,
-    menuPortalTarget: getMenuContainer(menuPortalTarget),
-    components: {
-      DropdownIndicator,
-      ClearIndicator,
-      Input
-    },
-    openMenuOnClick,
-    ...rest
-  };
-  return /*#__PURE__*/React.createElement("div", {
-    "data-test": dataTest,
-    className: cn(AutocompleteField_module.default.container, {
-      [AutocompleteField_module.default.withError]: 'error' in props,
-      [AutocompleteField_module.default.disabled]: disabled,
-      [AutocompleteField_module.default.hasError]: error,
-      [AutocompleteField_module.default.small]: size === 'small',
-      [AutocompleteField_module.default.empty]: !value
-    },
-    // Menu container is either this select itself or any other element
-    // We can always add this class to the select itself because even if the menu container is any parent it won't break it
-    // However, if it is the select itself, it will properly add necessary specificity level to the menu styles.
-    AutocompleteField_module.default.menuContainer, className)
-  }, /*#__PURE__*/React.createElement(components_FieldHeader.FieldHeader, {
-    label: label,
-    id: id,
-    size: size,
-    "data-test": dataTest,
-    helperText: helperText,
-    showAriaLabel: showAriaLabel,
-    labelClassName: labelClassName
-  }), /*#__PURE__*/React.createElement("div", {
-    className: AutocompleteField_module.default.selectBlock
-  }, /*#__PURE__*/React.createElement(ReactSelect, {
-    onInputChange: onInputChange,
-    formatOptionLabel: formatOptionLabelFn,
-    styles: {
-      ...props.styles,
-      // @ts-ignore
-      singleValue: base => {
-        var _a;
-        return {
-          ...base,
-          ...((_a = props.styles) === null || _a === void 0 ? void 0 : _a.singleValue),
-          visibility: isValueHidden ? 'hidden' : 'visible'
-        };
-      }
-    },
-    ...props
-  })), /*#__PURE__*/React.createElement(components_Error.Error, {
-    "data-test": `${dataTest}-error`,
-    truncated: true,
-    error: error,
-    className: cn(AutocompleteField_module.default.errorContainer, errorClassName),
-    inputId: id
-  }));
+export const AutocompleteField = ({ 'data-test': dataTest = 'autocomplete-field', className, disabled, error, errorClassName, isClearable, label, labelClassName, helperText, size = 'medium', menuPortalTarget = 'body', name, onChange, onFocus, onBlur, onInputChange, options, required, value, placeholder = 'Search...', showAriaLabel = false, renderOption, openMenuOnClick = true, ...rest }) => {
+    // when the user clicks on an input with the value, the value should disappear,
+    // but then it should appear after the user selects something or blurs the input
+    const [isValueHidden, setValueHidden] = useState(false);
+    const id = useUID();
+    useIsomorphicLayoutEffect(() => {
+        const menuContainer = getMenuContainer(menuPortalTarget);
+        if (menuContainer && !menuContainer.className.includes(styles.menuContainer)) {
+            menuContainer.className = `${menuContainer.className} ${styles.menuContainer}`;
+        }
+    }, [menuPortalTarget]);
+    const optionsMap = React.useMemo(() => options.reduce((acc, option) => {
+        acc[`${option.value}`] = option;
+        return acc;
+    }, {}), [options]);
+    const selectedOption = useMemo(() => getSelectedOptionFromValue({ value, optionsMap }), [optionsMap, value]);
+    const onChangeFn = React.useCallback((option) => {
+        setValueHidden(false);
+        onChange(option === null ? null : option.value);
+    }, [onChange]);
+    const onFocusFn = React.useCallback((e) => {
+        if (onFocus) {
+            onFocus(e);
+        }
+        if (!openMenuOnClick) {
+            setValueHidden(true);
+        }
+    }, [onFocus, openMenuOnClick]);
+    const onBlurFn = React.useCallback((e) => {
+        if (onBlur) {
+            onBlur(e);
+        }
+        setValueHidden(false);
+    }, [onBlur]);
+    const formatOptionLabelFn = React.useCallback((option, labelMeta) => {
+        const { inputValue } = labelMeta;
+        let optionText = option.label;
+        if (inputValue) {
+            optionText = highlightOptionText(option.label, inputValue);
+        }
+        return renderOption ? renderOption(optionText, option, labelMeta) : optionText;
+    }, [renderOption]);
+    const getMenuContainer = (menuPortalTarget) => {
+        if (menuPortalTarget == 'body') {
+            // There is no document is SSR environment
+            return canUseDOM ? document.body : undefined;
+        }
+        if (menuPortalTarget == 'self') {
+            return undefined;
+        }
+        return menuPortalTarget;
+    };
+    const props = {
+        inputId: id,
+        className: 'hz-autocomplete-field',
+        classNamePrefix: 'hz-autocomplete-field',
+        // https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-invalid_attribute
+        'aria-errormessage': error && errorId(id),
+        'aria-invalid': !!error,
+        // @ts-ignore
+        'aria-required': required,
+        error,
+        isClearable: isClearable !== null && isClearable !== void 0 ? isClearable : false,
+        isDisabled: disabled,
+        isSearchable: true,
+        isMulti: false,
+        name: name,
+        value: selectedOption,
+        placeholder,
+        options,
+        onChange: onChangeFn,
+        onFocus: onFocusFn,
+        onBlur: onBlurFn,
+        menuPortalTarget: getMenuContainer(menuPortalTarget),
+        components: {
+            DropdownIndicator,
+            ClearIndicator,
+            Input,
+        },
+        openMenuOnClick,
+        ...rest,
+    };
+    return (React.createElement("div", { "data-test": dataTest, className: cn(styles.container, {
+            [styles.withError]: 'error' in props,
+            [styles.disabled]: disabled,
+            [styles.hasError]: error,
+            [styles.small]: size === 'small',
+            [styles.empty]: !value,
+        }, 
+        // Menu container is either this select itself or any other element
+        // We can always add this class to the select itself because even if the menu container is any parent it won't break it
+        // However, if it is the select itself, it will properly add necessary specificity level to the menu styles.
+        styles.menuContainer, className) },
+        React.createElement(FieldHeader, { label: label, id: id, size: size, "data-test": dataTest, helperText: helperText, showAriaLabel: showAriaLabel, labelClassName: labelClassName }),
+        React.createElement("div", { className: styles.selectBlock },
+            React.createElement(ReactSelect, { onInputChange: onInputChange, formatOptionLabel: formatOptionLabelFn, styles: {
+                    ...props.styles,
+                    // @ts-ignore
+                    singleValue: (base) => {
+                        var _a;
+                        return ({
+                            ...base,
+                            ...(_a = props.styles) === null || _a === void 0 ? void 0 : _a.singleValue,
+                            visibility: isValueHidden ? 'hidden' : 'visible',
+                        });
+                    },
+                }, ...props })),
+        React.createElement(Error, { "data-test": `${dataTest}-error`, truncated: true, error: error, className: cn(styles.errorContainer, errorClassName), inputId: id })));
 };
-
-exports.AutocompleteField = AutocompleteField;
-exports.getSelectedOptionFromValue = getSelectedOptionFromValue;
-exports.highlightOptionText = highlightOptionText;
-//# sourceMappingURL=AutocompleteField.js.map
+//# sourceMappingURL=AutocompleteField.js.map

package/lib/components/AutocompleteField.js.map

@@ -1 +1 @@
-{"version":3,"file":"AutocompleteField.js","sources":["../../src/components/AutocompleteField.tsx"],"sourcesContent":[null],"names":["getSelectedOptionFromValue","value","optionsMap","option","_a","label","Input","innerProps","props","autoComplete","React","components","DropdownIndicator","createElement","Search","size","ClearIndicator","IconButton","icon","X","ariaHidden","kind","className","styles","clear","tabIndex","highlightOptionText","labelText","inputValue","separator","query","replace","RegExp","split","filter","val","map","i","cn","toLowerCase","key","AutocompleteField","dataTest","disabled","error","errorClassName","isClearable","labelClassName","helperText","menuPortalTarget","name","onChange","onFocus","onBlur","onInputChange","options","required","placeholder","showAriaLabel","renderOption","openMenuOnClick","rest","isValueHidden","setValueHidden","useState","id","useUID","useIsomorphicLayoutEffect","menuContainer","getMenuContainer","includes","useMemo","reduce","acc","selectedOption","onChangeFn","useCallback","onFocusFn","e","onBlurFn","formatOptionLabelFn","labelMeta","optionText","canUseDOM","document","body","undefined","inputId","classNamePrefix","errorId","isDisabled","isSearchable","isMulti","container","withError","hasError","small","empty","FieldHeader","selectBlock","ReactSelect","formatOptionLabel","singleValue","base","visibility","Error","truncated","errorContainer"],"mappings":";;;;;;;;;;;;;;AAuDA;;;;AAIG;SACaA,0BAA0BA,CAAC;EAAEC,KAAK;AAAEC,EAAAA;AAAU,CAAmC,EAAA;;EAC/F,IAAIC,MAAM,GAAG,IAAI;AACjB,EAAA,IAAIF,KAAK,EAAE;AACTE,IAAAA,MAAM,GAAG,CAAAC,EAAA,GAAAF,UAAU,CAACD,KAAK,CAAC,MAAA,IAAA,IAAAG,EAAA,KAAA,MAAA,GAAAA,EAAA,GAAI;AAAEH,MAAAA,KAAK,EAAEA,KAAK;AAAEI,MAAAA,KAAK,EAAEJ;KAAO;AAC9D,EAAA;AACA,EAAA,OAAOE,MAAM;AACf;AAEA,MAAMG,KAAK,GAA6BC,UAAU,IAAI;AACpD;AACA;AACA,EAAA,MAAMC,KAAK,GAAG;AACZ,IAAA,GAAGD,UAAU;AACbE,IAAAA,YAAY,EAAE;GACf;AACD,EAAA,oBAAOC,oBAACC,sBAAU,CAACL,KAAK,EAAA;IAAA,GAAKE;IAAS;AACxC,CAAC;AAED,MAAMI,iBAAiB,GAAyCJ,KAAK,IAAI;AACvE,EAAA,oBACEE,KAAA,CAAAG,aAAA,CAACF,sBAAU,CAACC,iBAAiB;OAAKJ;AAAK,GAAA,eACrCE,KAAA,CAAAG,aAAA,CAACC,mBAAM;AAACC,IAAAA,IAAI,EAAE;AAAE,GAAA,CAAI,CACS;AAEnC,CAAC;AAED;AACA,MAAMC,cAAc,GAAqCA,CAAC;AAAET,EAAAA;AAAU,CAAE,KAAI;AAC1E;AAEA;AACA,EAAA,oBAAOG,KAAA,CAAAG,aAAA,CAACI,gCAAU,EAAA;AAAA,IAAA,GAAKV,UAAU;AAAEW,IAAAA,IAAI,EAAEC,cAAC;AAAEC,IAAAA,UAAU,EAAA,IAAA;AAACC,IAAAA,IAAI,EAAC,SAAS;AAACN,IAAAA,IAAI,EAAC,QAAQ;IAACO,SAAS,EAAEC,gCAAM,CAACC,KAAK;AAAEC,IAAAA,QAAQ,EAAE;IAAM;AAC/H,CAAC;MAEYC,mBAAmB,GAAGA,CAACC,SAAiB,EAAEC,UAA8B,KAAe;EAClG,MAAMC,SAAS,GAAG,KAAK;AACvB,EAAA,MAAMC,KAAK,GAAGF,UAAU,IAAI,EAAE;EAC9B,OAAOE,KAAK,GACRH,SAAS,CACNI,OAAO,CAAC,IAAIC,MAAM,CAACF,KAAK,EAAE,IAAI,CAAC,EAAE,CAAA,EAAGD,SAAS,KAAKA,SAAS,CAAA,CAAE,CAAC,CAC9DI,KAAK,CAACJ,SAAS,CAAC,CAChBK,MAAM,CAAEC,GAAG,IAAKA,GAAG,CAAC,CACpBC,GAAG,CAAC,CAACD,GAAW,EAAEE,CAAS,mBAC1B3B,KAAA,CAAAG,aAAA,CAAA,MAAA,EAAA;IACES,SAAS,EAAEgB,EAAE,CAAC;MACZ,4CAA4C,EAAEH,GAAG,CAACI,WAAW,EAAE,KAAKT,KAAK,CAACS,WAAW;AACtF,KAAA,CAAC;AACFC,IAAAA,GAAG,EAAEL,GAAG,GAAG,CAAA,EAAGE,CAAC,CAAA;AAAE,GAAA,EAEhBF,GAAG,CACC,CACR,CAAC,GACJR,SAAS;AACf;AAEO,MAAMc,iBAAiB,GAAqCA,CAAC;EAClE,WAAW,EAAEC,QAAQ,GAAG,oBAAoB;EAC5CpB,SAAS;EACTqB,QAAQ;EACRC,KAAK;EACLC,cAAc;EACdC,WAAW;EACXzC,KAAK;EACL0C,cAAc;EACdC,UAAU;AACVjC,EAAAA,IAAI,GAAG,QAAQ;AACfkC,EAAAA,gBAAgB,GAAG,MAAM;EACzBC,IAAI;EACJC,QAAQ;EACRC,OAAO;EACPC,MAAM;EACNC,aAAa;EACbC,OAAO;EACPC,QAAQ;EACRvD,KAAK;AACLwD,EAAAA,WAAW,GAAG,WAAW;AACzBC,EAAAA,aAAa,GAAG,KAAK;EACrBC,YAAY;AACZC,EAAAA,eAAe,GAAG,IAAI;EACtB,GAAGC;AAAI,CACR,KAAI;AACH;AACA;EACA,MAAM,CAACC,aAAa,EAAEC,cAAc,CAAC,GAAGC,cAAQ,CAAC,KAAK,CAAC;AACvD,EAAA,MAAMC,EAAE,GAAGC,eAAM,EAAE;AAEnBC,EAAAA,yBAAyB,CAAC,MAAK;AAC7B,IAAA,MAAMC,aAAa,GAAGC,gBAAgB,CAACpB,gBAAgB,CAAC;AAExD,IAAA,IAAImB,aAAa,IAAI,CAACA,aAAa,CAAC9C,SAAS,CAACgD,QAAQ,CAAC/C,gCAAM,CAAC6C,aAAa,CAAC,EAAE;MAC5EA,aAAa,CAAC9C,SAAS,GAAG,CAAA,EAAG8C,aAAa,CAAC9C,SAAS,CAAA,CAAA,EAAIC,gCAAM,CAAC6C,aAAa,CAAA,CAAE;AAChF,IAAA;AACF,EAAA,CAAC,EAAE,CAACnB,gBAAgB,CAAC,CAAC;AAEtB,EAAA,MAAM/C,UAAU,GAAGQ,KAAK,CAAC6D,OAAO,CAC9B,MACEhB,OAAO,CAACiB,MAAM,CACZ,CAACC,GAAG,EAAEtE,MAAM,KAAI;IACdsE,GAAG,CAAC,GAAGtE,MAAM,CAACF,KAAK,CAAA,CAAE,CAAC,GAAGE,MAAM;AAC/B,IAAA,OAAOsE,GAAG;EACZ,CAAC,EACD,EAAgD,CACjD,EACH,CAAClB,OAAO,CAAC,CACV;AAED,EAAA,MAAMmB,cAAc,GAAGH,aAAO,CAAC,MAAMvE,0BAA0B,CAAC;IAAEC,KAAK;AAAEC,IAAAA;AAAU,GAAE,CAAC,EAAE,CAACA,UAAU,EAAED,KAAK,CAAC,CAAC;AAE5G,EAAA,MAAM0E,UAAU,GAAGjE,KAAK,CAACkE,WAAW,CACjCzE,MAAsC,IAAI;IACzC4D,cAAc,CAAC,KAAK,CAAC;IACnBZ,QAA8C,CAAChD,MAAM,KAAK,IAAI,GAAG,IAAI,GAAGA,MAAM,CAACF,KAAK,CAAC;AACzF,EAAA,CAAC,EACD,CAACkD,QAAQ,CAAC,CACX;AAED,EAAA,MAAM0B,SAAS,GAAGnE,KAAK,CAACkE,WAAW,CAChCE,CAA0B,IAAI;AAC7B,IAAA,IAAI1B,OAAO,EAAE;MACXA,OAAO,CAAC0B,CAAC,CAAC;AACZ,IAAA;IACA,IAAI,CAAClB,eAAe,EAAE;MACpBG,cAAc,CAAC,IAAI,CAAC;AACtB,IAAA;AACF,EAAA,CAAC,EACD,CAACX,OAAO,EAAEQ,eAAe,CAAC,CAC3B;AAED,EAAA,MAAMmB,QAAQ,GAAGrE,KAAK,CAACkE,WAAW,CAC/BE,CAA0B,IAAI;AAC7B,IAAA,IAAIzB,MAAM,EAAE;MACVA,MAAM,CAACyB,CAAC,CAAC;AACX,IAAA;IACAf,cAAc,CAAC,KAAK,CAAC;AACvB,EAAA,CAAC,EACD,CAACV,MAAM,CAAC,CACT;EAED,MAAM2B,mBAAmB,GAAGtE,KAAK,CAACkE,WAAW,CAC3C,CAACzE,MAA+B,EAAE8E,SAAyD,KAAI;IAC7F,MAAM;AAAErD,MAAAA;AAAU,KAAE,GAAGqD,SAAS;AAChC,IAAA,IAAIC,UAAU,GAAc/E,MAAM,CAACE,KAAK;AACxC,IAAA,IAAIuB,UAAU,EAAE;MACdsD,UAAU,GAAGxD,mBAAmB,CAACvB,MAAM,CAACE,KAAK,EAAEuB,UAAU,CAAC;AAC5D,IAAA;IACA,OAAO+B,YAAY,GAAGA,YAAY,CAACuB,UAAU,EAAE/E,MAAM,EAAE8E,SAAS,CAAC,GAAGC,UAAU;AAChF,EAAA,CAAC,EACD,CAACvB,YAAY,CAAC,CACf;EAED,MAAMU,gBAAgB,GAAIpB,gBAAsD,IAAoC;IAClH,IAAIA,gBAAgB,IAAI,MAAM,EAAE;AAC9B;AACA,MAAA,OAAOkC,mBAAS,GAAGC,QAAQ,CAACC,IAAI,GAAGC,SAAS;AAC9C,IAAA;IACA,IAAIrC,gBAAgB,IAAI,MAAM,EAAE;AAC9B,MAAA,OAAOqC,SAAS;AAClB,IAAA;AACA,IAAA,OAAOrC,gBAAgB;EACzB,CAAC;AAED,EAAA,MAAMzC,KAAK,GAAqD;AAC9D+E,IAAAA,OAAO,EAAEtB,EAAE;AACX3C,IAAAA,SAAS,EAAE,uBAAuB;AAClCkE,IAAAA,eAAe,EAAE,uBAAuB;AACxC;AACA,IAAA,mBAAmB,EAAE5C,KAAK,IAAI6C,wBAAO,CAACxB,EAAE,CAAC;IACzC,cAAc,EAAE,CAAC,CAACrB,KAAK;AAEvB;AACA,IAAA,eAAe,EAAEY,QAAQ;IACzBZ,KAAK;AACLE,IAAAA,WAAW,EAAEA,WAAW,KAAA,IAAA,IAAXA,WAAW,KAAA,MAAA,GAAXA,WAAW,GAAI,KAAK;AACjC4C,IAAAA,UAAU,EAAE/C,QAAQ;AACpBgD,IAAAA,YAAY,EAAE,IAAI;AAClBC,IAAAA,OAAO,EAAE,KAAK;AACd1C,IAAAA,IAAI,EAAEA,IAAI;AACVjD,IAAAA,KAAK,EAAEyE,cAAc;IACrBjB,WAAW;IACXF,OAAO;AACPJ,IAAAA,QAAQ,EAAEwB,UAAyH;AACnIvB,IAAAA,OAAO,EAAEyB,SAAS;AAClBxB,IAAAA,MAAM,EAAE0B,QAAQ;AAChB9B,IAAAA,gBAAgB,EAAEoB,gBAAgB,CAACpB,gBAAgB,CAAC;AACpDtC,IAAAA,UAAU,EAAE;MACVC,iBAAiB;MACjBI,cAAc;AACdV,MAAAA;KACD;IACDsD,eAAe;IACf,GAAGC;GACJ;AAED,EAAA,oBACEnD,KAAA,CAAAG,aAAA,CAAA,KAAA,EAAA;AAAA,IAAA,WAAA,EACa6B,QAAQ;AACnBpB,IAAAA,SAAS,EAAEgB,EAAE,CACXf,gCAAM,CAACsE,SAAS,EAChB;AACE,MAAA,CAACtE,gCAAM,CAACuE,SAAS,GAAG,OAAO,IAAItF,KAAK;AACpC,MAAA,CAACe,gCAAM,CAACoB,QAAQ,GAAGA,QAAQ;AAC3B,MAAA,CAACpB,gCAAM,CAACwE,QAAQ,GAAGnD,KAAK;AACxB,MAAA,CAACrB,gCAAM,CAACyE,KAAK,GAAGjF,IAAI,KAAK,OAAO;AAChC,MAAA,CAACQ,gCAAM,CAAC0E,KAAK,GAAG,CAAChG;KAClB;AACD;AACA;AACA;IACAsB,gCAAM,CAAC6C,aAAa,EACpB9C,SAAS;AACV,GAAA,eAEDZ,KAAA,CAAAG,aAAA,CAACqF,kCAAW,EAAA;AACV7F,IAAAA,KAAK,EAAEA,KAAK;AACZ4D,IAAAA,EAAE,EAAEA,EAAE;AACNlD,IAAAA,IAAI,EAAEA,IAAI;AAAA,IAAA,WAAA,EACC2B,QAAQ;AACnBM,IAAAA,UAAU,EAAEA,UAAU;AACtBU,IAAAA,aAAa,EAAEA,aAAa;AAC5BX,IAAAA,cAAc,EAAEA;AAAc,GAAA,CAC9B,eACFrC,KAAA,CAAAG,aAAA,CAAA,KAAA,EAAA;IAAKS,SAAS,EAAEC,gCAAM,CAAC4E;AAAW,GAAA,eAChCzF,KAAA,CAAAG,aAAA,CAACuF,WAAW,EAAA;AACV9C,IAAAA,aAAa,EAAEA,aAAa;AAC5B+C,IAAAA,iBAAiB,EAAErB,mBAAmB;AACtCzD,IAAAA,MAAM,EAAE;MACN,GAAGf,KAAK,CAACe,MAAM;AAEf;MACA+E,WAAW,EAAGC,IAAmB,IAAI;;QAAC,OAAC;AACrC,UAAA,GAAGA,IAAI;AACP,UAAA,IAAG,CAAAnG,EAAA,GAAAI,KAAK,CAACe,MAAM,0CAAE+E,WAAW,CAAA;AAC5BE,UAAAA,UAAU,EAAE1C,aAAa,GAAG,QAAQ,GAAG;SACxC;AAAC,MAAA;KACH;IAAA,GACGtD;IACJ,CACE,eACNE,KAAA,CAAAG,aAAA,CAAC4F,sBAAK,EAAA;IAAA,WAAA,EAAY,CAAA,EAAG/D,QAAQ,CAAA,MAAA,CAAQ;AAAEgE,IAAAA,SAAS,EAAA,IAAA;AAAC9D,IAAAA,KAAK,EAAEA,KAAK;IAAEtB,SAAS,EAAEgB,EAAE,CAACf,gCAAM,CAACoF,cAAc,EAAE9D,cAAc,CAAC;AAAE0C,IAAAA,OAAO,EAAEtB;AAAE,GAAA,CAAI,CAChI;AAEV;;;;;;"}
+{"version":3,"file":"AutocompleteField.js","sourceRoot":"","sources":["../../src/components/AutocompleteField.tsx"],"names":[],"mappings":"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"}

package/lib/components/AutocompleteField.module.scss

@@ -0,0 +1,164 @@
+@use '../../styles/constants' as c;
+@use '../../styles/helpers' as h;
+
+$selectHorizontalPadding: c.$grid * 3;
+$menuMargin: c.$grid * 3;
+$select: ':global .hz-autocomplete-field__control';
+$selectValueContainer: ':global .hz-autocomplete-field__value-container';
+
+.container {
+  .label {
+    display: block;
+    margin-bottom: c.$grid;
+
+    &.small {
+      @include c.typographyBodySmall;
+    }
+  }
+
+  &.small {
+    #{$selectValueContainer} {
+      padding: 0;
+    }
+
+    #{$select} {
+      min-height: c.$inputHeightSmall;
+    }
+  }
+
+  .helperText {
+    margin-left: c.$grid * 1.5;
+    display: block;
+  }
+
+  .clear {
+    margin-left: $selectHorizontalPadding;
+  }
+
+  :global .hz-autocomplete-field {
+    flex: 1 1 auto;
+
+    @include c.typographyBodySmall;
+  }
+
+  :global .hz-autocomplete-field__value-container {
+    padding: 0;
+  }
+
+  :global .hz-autocomplete-field__single-value {
+    color: c.$colorText;
+  }
+
+  :global .hz-autocomplete-field__indicator-separator {
+    display: none;
+  }
+
+  #{$select} {
+    cursor: pointer;
+    color: c.$colorText;
+    min-height: c.$inputHeight;
+    padding-left: c.$grid * 3;
+    padding-right: c.$grid * 2;
+    box-sizing: border-box;
+    border: c.$borderWidth solid c.$colorNeutralLight;
+    border-radius: c.$borderRadius;
+    background-color: c.$colorNeutralWhite;
+    transition: none;
+
+    &.hz-autocomplete-field__control--menu-is-open {
+      border-radius: c.$borderRadius c.$borderRadius 0 0;
+    }
+
+    .hz-autocomplete-field__dropdown-indicator {
+      color: c.$colorNeutralLight;
+      padding: 0 c.$grid * 0.5;
+    }
+  }
+
+  &.disabled {
+    #{$select} {
+      color: c.$colorTextSecondary;
+      background-color: c.$colorNeutral;
+      border-color: c.$colorNeutralLight;
+    }
+  }
+
+  &.hasError {
+    #{$select} {
+      border-color: c.$colorError;
+    }
+  }
+
+  // We target specifically #{$select} not to apply hover styles to the select when a helper icon is hovered
+  #{$select}:hover,
+  &.hover #{$select} {
+    border-color: c.$colorPrimary;
+    transition: none;
+  }
+
+  &.focus #{$select},
+  #{$select}.hz-autocomplete-field__control--is-focused {
+    @include h.outlineFormField;
+  }
+
+  .selectBlock {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    position: relative;
+  }
+}
+
+.menuContainer {
+  :global .hz-autocomplete-field__menu-portal {
+    z-index: c.$zIndex2000;
+  }
+
+  :global .hz-autocomplete-field__matched-option-text {
+    font-weight: bolder;
+    color: c.$colorText;
+  }
+
+  :global .hz-autocomplete-field__menu {
+    margin-top: 0;
+    margin-bottom: $menuMargin;
+    border: c.$borderWidth solid c.$colorNeutralLight;
+    border-radius: 0 0 c.$borderRadius c.$borderRadius;
+    background-color: c.$colorNeutralWhite;
+    overflow: hidden;
+    box-shadow: 0 c.$selectMenuShadowSize c.$selectMenuShadowBlur 0 c.$colorShadow;
+    z-index: c.$zIndex1000;
+
+    @include c.typographyBodySmall;
+
+    :global .hz-autocomplete-field__menu-list {
+      padding: 0;
+      color: c.$colorTextSecondary;
+    }
+
+    :global .hz-autocomplete-field__option,
+    :global .hz-autocomplete-field__menu-notice {
+      height: c.$grid * 8;
+      line-height: c.$grid * 8;
+      padding: 0 $selectHorizontalPadding;
+      background-color: transparent;
+
+      // Do not remove outline for high-contrast modes
+      // https://stackoverflow.com/a/52616313
+      outline: c.$outlineWidth solid transparent;
+      text-align: left;
+      white-space: pre;
+
+      &:global.hz-autocomplete-field__option--is-focused {
+        @include h.outlineSimple;
+      }
+
+      &:global.hz-autocomplete-field__option--is-selected {
+        color: c.$colorTextSecondary;
+        text-decoration: underline;
+      }
+    }
+  }
+}
+
+@include h.withError;