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

package/lib/components/Select/CheckableSelectField.js

@@ -1,181 +1,77 @@
-'use strict';
-
-var React = require('react');
-var reactFeather = require('react-feather');
-var reactUid = require('react-uid');
-var cn = require('classnames');
-var components_Popover = require('../Popover.js');
-var components_Link = require('../Link.js');
-var components_TextField = require('../TextField.js');
-var components_TruncatedText = require('../TruncatedText.js');
-var CheckableSelectField_module = require('./CheckableSelectField.module.scss.js');
-var hooks_useOpenCloseState = require('../../hooks/useOpenCloseState.js');
-
-const Checkmark = ({
-  checked
-}) => {
-  const classNames = cn(CheckableSelectField_module.default.checkmark, {
-    [CheckableSelectField_module.default.checked]: checked
-  });
-  return checked ? /*#__PURE__*/React.createElement(reactFeather.Check, {
-    className: classNames
-  }) : /*#__PURE__*/React.createElement(reactFeather.Minus, {
-    className: classNames
-  });
+import React, { useCallback, useMemo, useState } from 'react';
+import { Check, ChevronDown, ChevronUp, Minus } from 'react-feather';
+import { useUID } from 'react-uid';
+import cls from 'classnames';
+import { Popover } from '../Popover';
+import { Link } from '../Link';
+import { TextField } from '../TextField';
+import { useOpenCloseState } from '../../hooks';
+import { TruncatedText } from '../TruncatedText';
+import styles from './CheckableSelectField.module.scss';
+const Checkmark = ({ checked }) => {
+    const classNames = cls(styles.checkmark, { [styles.checked]: checked });
+    return checked ? React.createElement(Check, { className: classNames }) : React.createElement(Minus, { className: classNames });
 };
-const CheckableSelectField = props => {
-  const {
-    options,
-    onChange,
-    value,
-    size = 'small',
-    placeholder = 'Search',
-    placeholderMode = 'normal',
-    label,
-    showAriaLabel,
-    disabled,
-    helperText,
-    className,
-    error,
-    onBlur,
-    name,
-    required,
-    defaultOpen = false,
-    'data-test': dataTest,
-    allSelectedLabel = 'All selected',
-    noneSelectedLabel = 'None selected',
-    noOptionsMessage = 'No options',
-    id: rootId,
-    filterOptions,
-    searchInputProps = {},
-    labelClassName,
-    errorClassName
-  } = props;
-  const id = reactUid.useUID();
-  const {
-    isOpen,
-    toggle,
-    close
-  } = hooks_useOpenCloseState.useOpenCloseState(defaultOpen);
-  const [searchValue, setSearchValue] = React.useState('');
-  const [anchorElement, setAnchorElement] = React.useState(null);
-  const handleKeyDown = React.useCallback(e => {
-    if (e.key === 'Enter') {
-      toggle();
-    }
-  }, [toggle]);
-  const valueSet = React.useMemo(() => new Set(value), [value]);
-  const filteredOptions = React.useMemo(() => {
-    const value = searchValue.toLowerCase();
-    return options.filter(option => {
-      if (filterOptions) {
-        return filterOptions(option, value);
-      }
-      return option.label.toLowerCase().includes(value);
-    });
-  }, [options, searchValue, filterOptions]);
-  const getValueLabel = () => {
-    if (placeholderMode === 'permanent') {
-      return placeholder;
-    }
-    if (value.length === 0) {
-      return noneSelectedLabel;
-    }
-    if (value.length === options.length) {
-      return allSelectedLabel;
-    }
-    return `${value.length} selected`;
-  };
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(components_TextField.TextField, {
-    size: size,
-    name: name,
-    id: rootId || id,
-    onClick: toggle,
-    onKeyDown: handleKeyDown,
-    containerRef: setAnchorElement,
-    onChange: () => null,
-    label: label || '',
-    labelClassName: labelClassName,
-    disabled: disabled,
-    showAriaLabel: showAriaLabel,
-    helperText: helperText,
-    className: cn(className, CheckableSelectField_module.default.opener, {
-      [CheckableSelectField_module.default.withPermanentPlaceholder]: placeholderMode === 'permanent'
-    }),
-    error: error,
-    errorClassName: errorClassName,
-    onBlur: onBlur,
-    readOnly: true,
-    required: required,
-    "data-test": `${dataTest}-opener`,
-    value: getValueLabel(),
-    inputTrailingIconLabel: isOpen ? 'Close' : 'Open',
-    inputTrailingIcon: isOpen ? reactFeather.ChevronUp : reactFeather.ChevronDown
-  }), /*#__PURE__*/React.createElement(components_Popover.Popover, {
-    matchReferenceSize: true,
-    anchorElement: anchorElement,
-    open: isOpen,
-    onClose: close,
-    className: CheckableSelectField_module.default.panel
-  }, /*#__PURE__*/React.createElement("div", {
-    className: CheckableSelectField_module.default.dropdown,
-    "data-test": `${dataTest}-dropdown`
-  }, /*#__PURE__*/React.createElement("div", {
-    className: CheckableSelectField_module.default.search
-  }, searchInputProps.startAdornment, /*#__PURE__*/React.createElement(components_TextField.TextField, {
-    size: size,
-    iconSize: "medium",
-    className: CheckableSelectField_module.default.searchField,
-    name: "checkable-select-search",
-    "data-test": `${dataTest}-search`,
-    onChange: e => setSearchValue(e.target.value),
-    value: searchValue,
-    label: "",
-    disabled: disabled,
-    placeholder: placeholder
-  }), searchInputProps.endAdornment), /*#__PURE__*/React.createElement("div", {
-    className: CheckableSelectField_module.default.options
-  }, filteredOptions.length > 0 ? filteredOptions.map(option => {
-    const isChecked = valueSet.has(option.value);
-    return /*#__PURE__*/React.createElement("button", {
-      type: "button",
-      key: option.value,
-      name: option.label,
-      "data-test": `${dataTest}-option`,
-      className: cn(CheckableSelectField_module.default.option, {
-        [CheckableSelectField_module.default.optionChecked]: isChecked
-      }),
-      onClick: () => {
-        if (isChecked) {
-          onChange(value.filter(item => item !== option.value));
-        } else {
-          onChange([...value, option.value]);
+export const CheckableSelectField = (props) => {
+    const { options, onChange, value, size = 'small', placeholder = 'Search', placeholderMode = 'normal', label, showAriaLabel, disabled, helperText, className, error, onBlur, name, required, defaultOpen = false, 'data-test': dataTest, allSelectedLabel = 'All selected', noneSelectedLabel = 'None selected', noOptionsMessage = 'No options', id: rootId, filterOptions, searchInputProps = {}, labelClassName, errorClassName, } = props;
+    const id = useUID();
+    const { isOpen, toggle, close } = useOpenCloseState(defaultOpen);
+    const [searchValue, setSearchValue] = useState('');
+    const [anchorElement, setAnchorElement] = useState(null);
+    const handleKeyDown = useCallback((e) => {
+        if (e.key === 'Enter') {
+            toggle();
         }
-      }
-    }, /*#__PURE__*/React.createElement(Checkmark, {
-      checked: isChecked
-    }), /*#__PURE__*/React.createElement(components_TruncatedText.TruncatedText, {
-      text: option.label
-    }));
-  }) : (/*#__PURE__*/React.createElement("span", {
-    className: CheckableSelectField_module.default.noOptionsMessage,
-    "data-test": `${dataTest}-no-options-message`
-  }, noOptionsMessage))), /*#__PURE__*/React.createElement("div", {
-    className: CheckableSelectField_module.default.bottom
-  }, /*#__PURE__*/React.createElement(components_Link.Link, {
-    component: "button",
-    "data-test": `${dataTest}-select-all`,
-    onClick: () => {
-      onChange(filteredOptions.map(({
-        value
-      }) => value));
-    }
-  }, "Select all"), /*#__PURE__*/React.createElement(components_Link.Link, {
-    component: "button",
-    "data-test": `${dataTest}-select-none`,
-    onClick: () => onChange([])
-  }, "Select none")))));
+    }, [toggle]);
+    const valueSet = useMemo(() => new Set(value), [value]);
+    const filteredOptions = useMemo(() => {
+        const value = searchValue.toLowerCase();
+        return options.filter((option) => {
+            if (filterOptions) {
+                return filterOptions(option, value);
+            }
+            return option.label.toLowerCase().includes(value);
+        });
+    }, [options, searchValue, filterOptions]);
+    const getValueLabel = () => {
+        if (placeholderMode === 'permanent') {
+            return placeholder;
+        }
+        if (value.length === 0) {
+            return noneSelectedLabel;
+        }
+        if (value.length === options.length) {
+            return allSelectedLabel;
+        }
+        return `${value.length} selected`;
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement(TextField, { size: size, name: name, id: rootId || id, onClick: toggle, onKeyDown: handleKeyDown, containerRef: setAnchorElement, onChange: () => null, label: label || '', labelClassName: labelClassName, disabled: disabled, showAriaLabel: showAriaLabel, helperText: helperText, className: cls(className, styles.opener, {
+                [styles.withPermanentPlaceholder]: placeholderMode === 'permanent',
+            }), error: error, errorClassName: errorClassName, onBlur: onBlur, readOnly: true, required: required, "data-test": `${dataTest}-opener`, value: getValueLabel(), inputTrailingIconLabel: isOpen ? 'Close' : 'Open', inputTrailingIcon: isOpen ? ChevronUp : ChevronDown }),
+        React.createElement(Popover, { matchReferenceSize: true, anchorElement: anchorElement, open: isOpen, onClose: close, className: styles.panel },
+            React.createElement("div", { className: styles.dropdown, "data-test": `${dataTest}-dropdown` },
+                React.createElement("div", { className: styles.search },
+                    searchInputProps.startAdornment,
+                    React.createElement(TextField, { size: size, iconSize: "medium", className: styles.searchField, name: "checkable-select-search", "data-test": `${dataTest}-search`, onChange: (e) => setSearchValue(e.target.value), value: searchValue, label: "", disabled: disabled, placeholder: placeholder }),
+                    searchInputProps.endAdornment),
+                React.createElement("div", { className: styles.options }, filteredOptions.length > 0 ? (filteredOptions.map((option) => {
+                    const isChecked = valueSet.has(option.value);
+                    return (React.createElement("button", { type: "button", key: option.value, name: option.label, "data-test": `${dataTest}-option`, className: cls(styles.option, { [styles.optionChecked]: isChecked }), onClick: () => {
+                            if (isChecked) {
+                                onChange(value.filter((item) => item !== option.value));
+                            }
+                            else {
+                                onChange([...value, option.value]);
+                            }
+                        } },
+                        React.createElement(Checkmark, { checked: isChecked }),
+                        React.createElement(TruncatedText, { text: option.label })));
+                })) : (React.createElement("span", { className: styles.noOptionsMessage, "data-test": `${dataTest}-no-options-message` }, noOptionsMessage))),
+                React.createElement("div", { className: styles.bottom },
+                    React.createElement(Link, { component: "button", "data-test": `${dataTest}-select-all`, onClick: () => {
+                            onChange(filteredOptions.map(({ value }) => value));
+                        } }, "Select all"),
+                    React.createElement(Link, { component: "button", "data-test": `${dataTest}-select-none`, onClick: () => onChange([]) }, "Select none"))))));
 };
-
-exports.CheckableSelectField = CheckableSelectField;
-//# sourceMappingURL=CheckableSelectField.js.map
+//# sourceMappingURL=CheckableSelectField.js.map

package/lib/components/Select/CheckableSelectField.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckableSelectField.js","sources":["../../../src/components/Select/CheckableSelectField.tsx"],"sourcesContent":[null],"names":["Checkmark","checked","classNames","cls","styles","checkmark","React","Check","className","createElement","Minus","CheckableSelectField","props","options","onChange","value","size","placeholder","placeholderMode","label","showAriaLabel","disabled","helperText","error","onBlur","name","required","defaultOpen","dataTest","allSelectedLabel","noneSelectedLabel","noOptionsMessage","id","rootId","filterOptions","searchInputProps","labelClassName","errorClassName","useUID","isOpen","toggle","close","useOpenCloseState","searchValue","setSearchValue","useState","anchorElement","setAnchorElement","handleKeyDown","useCallback","e","key","valueSet","useMemo","Set","filteredOptions","toLowerCase","filter","option","includes","getValueLabel","length","Fragment","TextField","onClick","onKeyDown","containerRef","opener","withPermanentPlaceholder","readOnly","inputTrailingIconLabel","inputTrailingIcon","ChevronUp","ChevronDown","Popover","matchReferenceSize","open","onClose","panel","dropdown","search","startAdornment","iconSize","searchField","target","endAdornment","map","isChecked","has","type","optionChecked","item","TruncatedText","text","bottom","Link","component"],"mappings":";;;;;;;;;;;;;AAuDA,MAAMA,SAAS,GAAGA,CAAC;AAAEC,EAAAA;AAAO,CAAkB,KAAI;AAChD,EAAA,MAAMC,UAAU,GAAGC,EAAG,CAACC,mCAAM,CAACC,SAAS,EAAE;IAAE,CAACD,mCAAM,CAACH,OAAO,GAAGA;AAAO,GAAE,CAAC;AAEvE,EAAA,OAAOA,OAAO,gBAAGK,oBAACC,kBAAK,EAAA;AAACC,IAAAA,SAAS,EAAEN;IAAc,gBAAGI,KAAA,CAAAG,aAAA,CAACC,kBAAK;AAACF,IAAAA,SAAS,EAAEN;AAAU,GAAA,CAAI;AACtF,CAAC;AAEM,MAAMS,oBAAoB,GAAwCC,KAA8B,IAAI;EACzG,MAAM;IACJC,OAAO;IACPC,QAAQ;IACRC,KAAK;AACLC,IAAAA,IAAI,GAAG,OAAO;AACdC,IAAAA,WAAW,GAAG,QAAQ;AACtBC,IAAAA,eAAe,GAAG,QAAQ;IAC1BC,KAAK;IACLC,aAAa;IACbC,QAAQ;IACRC,UAAU;IACVd,SAAS;IACTe,KAAK;IACLC,MAAM;IACNC,IAAI;IACJC,QAAQ;AACRC,IAAAA,WAAW,GAAG,KAAK;AACnB,IAAA,WAAW,EAAEC,QAAQ;AACrBC,IAAAA,gBAAgB,GAAG,cAAc;AACjCC,IAAAA,iBAAiB,GAAG,eAAe;AACnCC,IAAAA,gBAAgB,GAAG,YAAY;AAC/BC,IAAAA,EAAE,EAAEC,MAAM;IACVC,aAAa;IACbC,gBAAgB,GAAG,EAAE;IACrBC,cAAc;AACdC,IAAAA;AAAc,GACf,GAAGzB,KAAK;AACT,EAAA,MAAMoB,EAAE,GAAGM,eAAM,EAAE;EACnB,MAAM;IAAEC,MAAM;IAAEC,MAAM;AAAEC,IAAAA;AAAK,GAAE,GAAGC,yCAAiB,CAACf,WAAW,CAAC;EAChE,MAAM,CAACgB,WAAW,EAAEC,cAAc,CAAC,GAAGC,cAAQ,CAAC,EAAE,CAAC;EAClD,MAAM,CAACC,aAAa,EAAEC,gBAAgB,CAAC,GAAGF,cAAQ,CAAqB,IAAI,CAAC;AAE5E,EAAA,MAAMG,aAAa,GAAGC,iBAAW,CAC9BC,CAAkC,IAAI;AACrC,IAAA,IAAIA,CAAC,CAACC,GAAG,KAAK,OAAO,EAAE;AACrBX,MAAAA,MAAM,EAAE;AACV,IAAA;AACF,EAAA,CAAC,EACD,CAACA,MAAM,CAAC,CACT;AAED,EAAA,MAAMY,QAAQ,GAAGC,aAAO,CAAC,MAAM,IAAIC,GAAG,CAACvC,KAAK,CAAC,EAAE,CAACA,KAAK,CAAC,CAAC;AACvD,EAAA,MAAMwC,eAAe,GAAGF,aAAO,CAAC,MAAK;AACnC,IAAA,MAAMtC,KAAK,GAAG4B,WAAW,CAACa,WAAW,EAAE;AAEvC,IAAA,OAAO3C,OAAO,CAAC4C,MAAM,CAAEC,MAAM,IAAI;AAC/B,MAAA,IAAIxB,aAAa,EAAE;AACjB,QAAA,OAAOA,aAAa,CAACwB,MAAM,EAAE3C,KAAK,CAAC;AACrC,MAAA;MAEA,OAAO2C,MAAM,CAACvC,KAAK,CAACqC,WAAW,EAAE,CAACG,QAAQ,CAAC5C,KAAK,CAAC;AACnD,IAAA,CAAC,CAAC;EACJ,CAAC,EAAE,CAACF,OAAO,EAAE8B,WAAW,EAAET,aAAa,CAAC,CAAC;EAEzC,MAAM0B,aAAa,GAAGA,MAAK;IACzB,IAAI1C,eAAe,KAAK,WAAW,EAAE;AACnC,MAAA,OAAOD,WAAW;AACpB,IAAA;AACA,IAAA,IAAIF,KAAK,CAAC8C,MAAM,KAAK,CAAC,EAAE;AACtB,MAAA,OAAO/B,iBAAiB;AAC1B,IAAA;AACA,IAAA,IAAIf,KAAK,CAAC8C,MAAM,KAAKhD,OAAO,CAACgD,MAAM,EAAE;AACnC,MAAA,OAAOhC,gBAAgB;AACzB,IAAA;AAEA,IAAA,OAAO,CAAA,EAAGd,KAAK,CAAC8C,MAAM,CAAA,SAAA,CAAW;EACnC,CAAC;AAED,EAAA,oBACEvD,KAAA,CAAAG,aAAA,CAAAH,KAAA,CAAAwD,QAAA,EAAA,IAAA,eACExD,KAAA,CAAAG,aAAA,CAACsD,8BAAS,EAAA;AACR/C,IAAAA,IAAI,EAAEA,IAAI;AACVS,IAAAA,IAAI,EAAEA,IAAI;IACVO,EAAE,EAAEC,MAAM,IAAID,EAAE;AAChBgC,IAAAA,OAAO,EAAExB,MAAM;AACfyB,IAAAA,SAAS,EAAEjB,aAAa;AACxBkB,IAAAA,YAAY,EAAEnB,gBAAgB;IAC9BjC,QAAQ,EAAEA,MAAM,IAAI;IACpBK,KAAK,EAAGA,KAAgB,IAAI,EAAE;AAC9BiB,IAAAA,cAAc,EAAEA,cAAc;AAC9Bf,IAAAA,QAAQ,EAAEA,QAAQ;AAClBD,IAAAA,aAAa,EAAEA,aAAa;AAC5BE,IAAAA,UAAU,EAAEA,UAAU;IACtBd,SAAS,EAAEL,EAAG,CAACK,SAAS,EAAEJ,mCAAM,CAAC+D,MAAM,EAAE;AACvC,MAAA,CAAC/D,mCAAM,CAACgE,wBAAwB,GAAGlD,eAAe,KAAK;KACxD,CAAC;AACFK,IAAAA,KAAK,EAAEA,KAAK;AACZc,IAAAA,cAAc,EAAEA,cAAc;AAC9Bb,IAAAA,MAAM,EAAEA,MAAM;AACd6C,IAAAA,QAAQ,EAAA,IAAA;AACR3C,IAAAA,QAAQ,EAAEA,QAAQ;iBACP,CAAA,EAAGE,QAAQ,CAAA,OAAA,CAAS;IAC/Bb,KAAK,EAAE6C,aAAa,EAAE;AACtBU,IAAAA,sBAAsB,EAAE/B,MAAM,GAAG,OAAO,GAAG,MAAM;AACjDgC,IAAAA,iBAAiB,EAAEhC,MAAM,GAAGiC,sBAAS,GAAGC;AAAW,GAAA,CACnD,eAEFnE,KAAA,CAAAG,aAAA,CAACiE,0BAAO;AACNC,IAAAA,kBAAkB,EAAA,IAAA;AAClB7B,IAAAA,aAAa,EAAEA,aAAa;AAC5B8B,IAAAA,IAAI,EAAErC,MAAM;AACZsC,IAAAA,OAAO,EAAEpC,KAAK;IACdjC,SAAS,EAAEJ,mCAAM,CAAC0E;AAAK,GAAA,eAGvBxE,KAAA,CAAAG,aAAA,CAAA,KAAA,EAAA;IAAKD,SAAS,EAAEJ,mCAAM,CAAC2E,QAAQ;IAAA,WAAA,EAAa,GAAGnD,QAAQ,CAAA,SAAA;AAAW,GAAA,eAChEtB,KAAA,CAAAG,aAAA,CAAA,KAAA,EAAA;IAAKD,SAAS,EAAEJ,mCAAM,CAAC4E;GAAM,EAC1B7C,gBAAgB,CAAC8C,cAAc,eAChC3E,KAAA,CAAAG,aAAA,CAACsD,8BAAS,EAAA;AACR/C,IAAAA,IAAI,EAAEA,IAAI;AACVkE,IAAAA,QAAQ,EAAC,QAAQ;IACjB1E,SAAS,EAAEJ,mCAAM,CAAC+E,WAAW;AAC7B1D,IAAAA,IAAI,EAAC,yBAAyB;IAAA,WAAA,EACnB,CAAA,EAAGG,QAAQ,CAAA,OAAA,CAAS;IAC/Bd,QAAQ,EAAGoC,CAAC,IAAKN,cAAc,CAACM,CAAC,CAACkC,MAAM,CAACrE,KAAK,CAAC;AAC/CA,IAAAA,KAAK,EAAE4B,WAAW;AAClBxB,IAAAA,KAAK,EAAC,EAAE;AACRE,IAAAA,QAAQ,EAAEA,QAAQ;AAClBJ,IAAAA,WAAW,EAAEA;AAAW,GAAA,CACxB,EACDkB,gBAAgB,CAACkD,YAAY,CAC1B,eACN/E,KAAA,CAAAG,aAAA,CAAA,KAAA,EAAA;IAAKD,SAAS,EAAEJ,mCAAM,CAACS;AAAO,GAAA,EAC3B0C,eAAe,CAACM,MAAM,GAAG,CAAC,GACzBN,eAAe,CAAC+B,GAAG,CAAE5B,MAAM,IAAI;IAC7B,MAAM6B,SAAS,GAAGnC,QAAQ,CAACoC,GAAG,CAAC9B,MAAM,CAAC3C,KAAK,CAAC;AAE5C,IAAA,oBACET;AACEmF,MAAAA,IAAI,EAAC,QAAQ;MACbtC,GAAG,EAAEO,MAAM,CAAC3C,KAAK;MACjBU,IAAI,EAAEiC,MAAM,CAACvC,KAAK;MAAA,WAAA,EACP,CAAA,EAAGS,QAAQ,CAAA,OAAA,CAAS;AAC/BpB,MAAAA,SAAS,EAAEL,EAAG,CAACC,mCAAM,CAACsD,MAAM,EAAE;QAAE,CAACtD,mCAAM,CAACsF,aAAa,GAAGH;AAAS,OAAE,CAAC;MACpEvB,OAAO,EAAEA,MAAK;AACZ,QAAA,IAAIuB,SAAS,EAAE;AACbzE,UAAAA,QAAQ,CAACC,KAAK,CAAC0C,MAAM,CAAEkC,IAAI,IAAKA,IAAI,KAAKjC,MAAM,CAAC3C,KAAK,CAAC,CAAC;AACzD,QAAA,CAAC,MAAM;UACLD,QAAQ,CAAC,CAAC,GAAGC,KAAK,EAAE2C,MAAM,CAAC3C,KAAK,CAAC,CAAC;AACpC,QAAA;AACF,MAAA;AAAC,KAAA,eAEDT,KAAA,CAAAG,aAAA,CAACT,SAAS,EAAA;AAACC,MAAAA,OAAO,EAAEsF;AAAS,KAAA,CAAI,eACjCjF,KAAA,CAAAG,aAAA,CAACmF,sCAAa,EAAA;MAACC,IAAI,EAAEnC,MAAM,CAACvC;AAAK,KAAA,CAAI,CAC9B;AAEb,EAAA,CAAC,CAAC,iBAEFb,KAAA,CAAAG,aAAA,CAAA,MAAA,EAAA;IAAMD,SAAS,EAAEJ,mCAAM,CAAC2B,gBAAgB;IAAA,WAAA,EAAa,GAAGH,QAAQ,CAAA,mBAAA;KAC7DG,gBAAgB,CACZ,CACR,CACG,eACNzB,KAAA,CAAAG,aAAA,CAAA,KAAA,EAAA;IAAKD,SAAS,EAAEJ,mCAAM,CAAC0F;AAAM,GAAA,eAC3BxF,KAAA,CAAAG,aAAA,CAACsF,oBAAI,EAAA;AACHC,IAAAA,SAAS,EAAC,QAAQ;IAAA,WAAA,EACP,CAAA,EAAGpE,QAAQ,CAAA,WAAA,CAAa;IACnCoC,OAAO,EAAEA,MAAK;AACZlD,MAAAA,QAAQ,CAACyC,eAAe,CAAC+B,GAAG,CAAC,CAAC;AAAEvE,QAAAA;OAAO,KAAKA,KAAK,CAAC,CAAC;AACrD,IAAA;GAAC,EAAA,YAAA,CAGI,eACPT,KAAA,CAAAG,aAAA,CAACsF,oBAAI,EAAA;AAACC,IAAAA,SAAS,EAAC,QAAQ;iBAAY,CAAA,EAAGpE,QAAQ,CAAA,YAAA,CAAc;AAAEoC,IAAAA,OAAO,EAAEA,MAAMlD,QAAQ,CAAC,EAAE;AAAC,GAAA,EAAA,aAAA,CAEnF,CACH,CACF,CACE,CACT;AAEP;;;;"}
+{"version":3,"file":"CheckableSelectField.js","sourceRoot":"","sources":["../../../src/components/Select/CheckableSelectField.tsx"],"names":[],"mappings":"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"}

package/lib/components/Select/CheckableSelectField.module.scss

@@ -0,0 +1,100 @@
+@use '../../../styles/constants' as c;
+@use '../../../styles/helpers' as h;
+
+.panel {
+  z-index: c.$zIndex2000;
+}
+
+.opener {
+  input {
+    cursor: pointer;
+  }
+
+  &.withPermanentPlaceholder {
+    input {
+      color: c.$colorTextSecondary;
+    }
+  }
+}
+
+.dropdown {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  padding: c.$grid * 5;
+  box-shadow: 0 c.$cardShadowSize c.$cardShadowBlur 0 c.$colorShadow;
+  border-radius: c.$borderRadius;
+  background: c.$colorNeutralWhite;
+}
+
+.options {
+  display: flex;
+  overflow: auto;
+  max-height: 300px;
+  flex-direction: column;
+}
+
+.search {
+  display: flex;
+  align-items: center;
+  gap: c.$grid * 2;
+  margin-bottom: c.$grid * 2;
+
+  &Field {
+    flex-grow: 1;
+  }
+}
+
+.option {
+  background: transparent;
+  border: none;
+  display: inline-flex;
+  align-items: center;
+  text-align: left;
+  flex-shrink: 0;
+  font-size: c.$fontSizeBodySmall;
+  color: c.$colorTextSecondary;
+  outline: c.$outlineWidth solid transparent;
+  margin-bottom: c.$grid * 2.5;
+  overflow: hidden;
+
+  &:focus-visible {
+    @include h.outlineFormField;
+  }
+}
+
+.optionChecked {
+  color: c.$colorText;
+}
+
+.bottom {
+  display: flex;
+  padding: c.$grid * 2.5 c.$grid * 2.5 0 c.$grid * 2.5;
+  margin: 0 (-(c.$grid * 5));
+  justify-content: space-between;
+  border-top: 1px solid c.$colorNeutral;
+}
+
+.checkmark {
+  width: c.$iconSizeSmall;
+  height: c.$iconSizeSmall;
+  border: c.$borderWidth solid c.$colorNeutralLight;
+  border-radius: c.$grid;
+  color: transparent;
+  margin-right: c.$grid * 2;
+  background-color: transparent;
+  flex-shrink: 0;
+
+  &.checked {
+    color: c.$colorNeutralWhite;
+    background-color: c.$colorSuccess;
+    border-color: c.$colorSuccess;
+  }
+}
+
+.noOptionsMessage {
+  display: inline-flex;
+  min-height: c.$grid * 10;
+  line-height: c.$grid * 10;
+  color: c.$colorNeutralLight;
+}

package/lib/components/Select/CheckableSelectFieldFormik.js

@@ -1,42 +1,19 @@
-'use strict';
-
-var React = require('react');
-var formik = require('formik');
-var components_Select_CheckableSelectField = require('./CheckableSelectField.js');
-var utils_formik = require('../../utils/formik.js');
-
-const CheckableSelectFieldFormik = ({
-  name,
-  validate,
-  onChange,
-  ...props
-}) => {
-  const [{
-    value,
-    onBlur
-  }, meta, {
-    setValue,
-    setTouched
-  }] = formik.useField({
-    name,
-    validate
-  });
-  const setFormikValue = React.useMemo(() => utils_formik.formikTouchAndUpdate(setValue, setTouched), [setValue, setTouched]);
-  const handleChange = React.useCallback(newValue => {
-    if (onChange) {
-      onChange(newValue);
-    }
-    setFormikValue(newValue);
-  }, [setFormikValue, onChange]);
-  return /*#__PURE__*/React.createElement(components_Select_CheckableSelectField.CheckableSelectField, {
-    ...props,
-    name: name,
-    value: value,
-    onChange: handleChange,
-    onBlur: onBlur,
-    error: utils_formik.getFieldError(meta)
-  });
+import React, { useCallback, useMemo } from 'react';
+import { useField } from 'formik';
+import { CheckableSelectField } from './CheckableSelectField';
+import { formikTouchAndUpdate, getFieldError } from '../../utils/formik';
+export const CheckableSelectFieldFormik = ({ name, validate, onChange, ...props }) => {
+    const [{ value, onBlur }, meta, { setValue, setTouched }] = useField({
+        name,
+        validate,
+    });
+    const setFormikValue = useMemo(() => formikTouchAndUpdate(setValue, setTouched), [setValue, setTouched]);
+    const handleChange = useCallback((newValue) => {
+        if (onChange) {
+            onChange(newValue);
+        }
+        setFormikValue(newValue);
+    }, [setFormikValue, onChange]);
+    return (React.createElement(CheckableSelectField, { ...props, name: name, value: value, onChange: handleChange, onBlur: onBlur, error: getFieldError(meta) }));
 };
-
-exports.CheckableSelectFieldFormik = CheckableSelectFieldFormik;
-//# sourceMappingURL=CheckableSelectFieldFormik.js.map
+//# sourceMappingURL=CheckableSelectFieldFormik.js.map

package/lib/components/Select/CheckableSelectFieldFormik.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckableSelectFieldFormik.js","sources":["../../../src/components/Select/CheckableSelectFieldFormik.tsx"],"sourcesContent":[null],"names":["CheckableSelectFieldFormik","name","validate","onChange","props","value","onBlur","meta","setValue","setTouched","useField","setFormikValue","useMemo","formikTouchAndUpdate","handleChange","useCallback","newValue","React","createElement","CheckableSelectField","error","getFieldError"],"mappings":";;;;;;;AAaO,MAAMA,0BAA0B,GAAGA,CAAwD;EAChGC,IAAI;EACJC,QAAQ;EACRC,QAAQ;EACR,GAAGC;AAAK,CAC+B,KAAkB;AACzD,EAAA,MAAM,CAAC;IAAEC,KAAK;AAAEC,IAAAA;GAAQ,EAAEC,IAAI,EAAE;IAAEC,QAAQ;AAAEC,IAAAA;GAAY,CAAC,GAAGC,eAAQ,CAAO;IACzET,IAAI;AACJC,IAAAA;AACD,GAAA,CAAC;AAEF,EAAA,MAAMS,cAAc,GAAGC,aAAO,CAAC,MAAMC,iCAAoB,CAAOL,QAAQ,EAAEC,UAAU,CAAC,EAAE,CAACD,QAAQ,EAAEC,UAAU,CAAC,CAAC;AAC9G,EAAA,MAAMK,YAAY,GAAGC,iBAAW,CAC7BC,QAAc,IAAI;AACjB,IAAA,IAAIb,QAAQ,EAAE;MACZA,QAAQ,CAACa,QAAQ,CAAC;AACpB,IAAA;IAEAL,cAAc,CAACK,QAAQ,CAAC;AAC1B,EAAA,CAAC,EACD,CAACL,cAAc,EAAER,QAAQ,CAAC,CAC3B;AAED,EAAA,oBACEc,KAAA,CAAAC,aAAA,CAACC,2DAAoB,EAAA;AAAA,IAAA,GAASf,KAAK;AAAEH,IAAAA,IAAI,EAAEA,IAAI;AAAEI,IAAAA,KAAK,EAAEA,KAAK;AAAEF,IAAAA,QAAQ,EAAEW,YAAY;AAAER,IAAAA,MAAM,EAAEA,MAAM;IAAEc,KAAK,EAAEC,0BAAa,CAACd,IAAI;AAAC,GAAA,CAAI;AAEzI;;;;"}
+{"version":3,"file":"CheckableSelectFieldFormik.js","sourceRoot":"","sources":["../../../src/components/Select/CheckableSelectFieldFormik.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAgB,WAAW,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAA;AAEjC,OAAO,EAAkC,oBAAoB,EAAE,MAAM,wBAAwB,CAAA;AAC7F,OAAO,EAAyB,oBAAoB,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAA;AAS/F,MAAM,CAAC,MAAM,0BAA0B,GAAG,CAAwD,EAChG,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,GAAG,KAAK,EAC+B,EAAgB,EAAE;IACzD,MAAM,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,IAAI,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,CAAC,GAAG,QAAQ,CAAO;QACzE,IAAI;QACJ,QAAQ;KACT,CAAC,CAAA;IAEF,MAAM,cAAc,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,oBAAoB,CAAO,QAAQ,EAAE,UAAU,CAAC,EAAE,CAAC,QAAQ,EAAE,UAAU,CAAC,CAAC,CAAA;IAC9G,MAAM,YAAY,GAAG,WAAW,CAC9B,CAAC,QAAc,EAAE,EAAE;QACjB,IAAI,QAAQ,EAAE,CAAC;YACb,QAAQ,CAAC,QAAQ,CAAC,CAAA;QACpB,CAAC;QAED,cAAc,CAAC,QAAQ,CAAC,CAAA;IAC1B,CAAC,EACD,CAAC,cAAc,EAAE,QAAQ,CAAC,CAC3B,CAAA;IAED,OAAO,CACL,oBAAC,oBAAoB,OAAS,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,aAAa,CAAC,IAAI,CAAC,GAAI,CACtI,CAAA;AACH,CAAC,CAAA"}

package/lib/components/Select/Common.js

@@ -1,97 +1,54 @@
-'use strict';
-
-var React = require('react');
-var reactFeather = require('react-feather');
-var ReactSelect = require('react-select');
-var cn = require('classnames');
-var components_Icon = require('../Icon.js');
-var components_IconButton = require('../IconButton.js');
-var components_TruncatedText = require('../TruncatedText.js');
-var Common_module = require('./Common.module.scss.js');
-
-const DropdownIndicator = ({
-  selectProps
-}) => (/*#__PURE__*/React.createElement(components_Icon.Icon, {
-  icon: reactFeather.ChevronDown,
-  ariaHidden: true,
-  size: "medium",
-  className: cn(Common_module.default.chevron, {
-    [Common_module.default.open]: selectProps.menuIsOpen,
-    [Common_module.default.disabled]: selectProps.isDisabled
-  })
-}));
+import React from 'react';
+import { ChevronDown, X } from 'react-feather';
+import { components as rsComponents } from 'react-select';
+import cn from 'classnames';
+import { Icon } from '../Icon';
+import { IconButton } from '../IconButton';
+import { TruncatedText } from '../TruncatedText';
+import styles from './Common.module.scss';
+const DropdownIndicator = ({ selectProps }) => (React.createElement(Icon, { icon: ChevronDown, ariaHidden: true, size: "medium", className: cn(styles.chevron, { [styles.open]: selectProps.menuIsOpen, [styles.disabled]: selectProps.isDisabled }) }));
 // innerProps set event handling
-const ClearIndicator = ({
-  innerProps
-}) => (
-/*#__PURE__*/
+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
-React.createElement(components_IconButton.IconButton, {
-  ...innerProps,
-  icon: reactFeather.X,
-  ariaHidden: true,
-  kind: "primary",
-  size: "medium",
-  className: Common_module.default.clear,
-  tabIndex: -1
-}));
-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
-  });
+React.createElement(IconButton, { ...innerProps, icon: X, ariaHidden: true, kind: "primary", size: "medium", className: styles.clear, tabIndex: -1 }));
+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(rsComponents.Input, { ...props });
 };
-const isRenderMenuFooterFunction = fn => typeof fn === 'function';
-const MenuList = props => {
-  // @ts-ignore
-  const {
-    renderMenuFooter
-  } = props.selectProps;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ReactSelect.components.MenuList, {
-    ...props
-  }), isRenderMenuFooterFunction(renderMenuFooter) && renderMenuFooter());
+const isRenderMenuFooterFunction = (fn) => typeof fn === 'function';
+const MenuList = (props) => {
+    // @ts-ignore
+    const { renderMenuFooter } = props.selectProps;
+    return (React.createElement(React.Fragment, null,
+        React.createElement(rsComponents.MenuList, { ...props }),
+        isRenderMenuFooterFunction(renderMenuFooter) && renderMenuFooter()));
 };
-const ValueContainer = props => {
-  var _a;
-  return /*#__PURE__*/React.createElement("div", {
-    className: cn(props.className, Common_module.default.valueContainer)
-  }, /*#__PURE__*/React.createElement(components_TruncatedText.TruncatedText, {
-    text: props.children
-  }), /*#__PURE__*/React.createElement("span", {
-    className: cn(Common_module.default.trailingNote, `${props.selectProps.classNamePrefix || ''}__trailing-note`)
-  }, (_a = props.data) === null || _a === void 0 ? void 0 : _a.trailingNote));
+const ValueContainer = (props) => {
+    var _a;
+    return (React.createElement("div", { className: cn(props.className, styles.valueContainer) },
+        React.createElement(TruncatedText, { text: props.children }),
+        React.createElement("span", { className: cn(styles.trailingNote, `${props.selectProps.classNamePrefix || ''}__trailing-note`) }, (_a = props.data) === null || _a === void 0 ? void 0 : _a.trailingNote)));
 };
-const Option = props => (/*#__PURE__*/React.createElement(ReactSelect.components.Option, {
-  ...props
-}, /*#__PURE__*/React.createElement(ValueContainer, {
-  ...props,
-  className: `${props.selectProps.classNamePrefix || ''}__value-container`
-}, props.label)));
+const Option = (props) => (React.createElement(rsComponents.Option, { ...props },
+    React.createElement(ValueContainer, { ...props, className: `${props.selectProps.classNamePrefix || ''}__value-container` }, props.label)));
 // @ts-ignore
 const IndicatorSeparator = () => null;
-const SingleValue = ({
-  children,
-  ...props
-}) => (/*#__PURE__*/React.createElement(ReactSelect.components.SingleValue, {
-  ...props
-}, /*#__PURE__*/React.createElement(ValueContainer, {
-  ...props
-}, children)));
+const SingleValue = ({ children, ...props }) => (React.createElement(rsComponents.SingleValue, { ...props },
+    React.createElement(ValueContainer, { ...props }, children)));
 const components = {
-  DropdownIndicator,
-  ClearIndicator,
-  Input,
-  MenuList,
-  IndicatorSeparator,
-  Option,
-  SingleValue
+    DropdownIndicator,
+    ClearIndicator,
+    Input,
+    MenuList,
+    IndicatorSeparator,
+    Option,
+    SingleValue,
 };
-
-exports.components = components;
-//# sourceMappingURL=Common.js.map
+export { components };
+//# sourceMappingURL=Common.js.map