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

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

@@ -1 +1 @@
-{"version":3,"file":"Common.js","sources":["../../../src/components/Select/Common.tsx"],"sourcesContent":[null],"names":["DropdownIndicator","selectProps","React","createElement","Icon","icon","ChevronDown","ariaHidden","size","className","cn","styles","chevron","open","menuIsOpen","disabled","isDisabled","ClearIndicator","innerProps","IconButton","X","kind","clear","tabIndex","Input","props","autoComplete","rsComponents","isRenderMenuFooterFunction","fn","MenuList","renderMenuFooter","Fragment","ValueContainer","valueContainer","TruncatedText","text","children","trailingNote","classNamePrefix","_a","data","Option","label","IndicatorSeparator","SingleValue","components"],"mappings":"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"}
+{"version":3,"file":"Common.js","sourceRoot":"","sources":["../../../src/components/Select/Common.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAA;AACxC,OAAO,EAAE,WAAW,EAAE,CAAC,EAAE,MAAM,eAAe,CAAA;AAC9C,OAAO,EAAE,UAAU,IAAI,YAAY,EAAE,MAAM,cAAc,CAAA;AACzD,OAAO,EAAE,MAAM,YAAY,CAAA;AAE3B,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAA;AAGhD,OAAO,MAAM,MAAM,sBAAsB,CAAA;AAEzC,MAAM,iBAAiB,GAA0C,CAAC,EAAE,WAAW,EAAE,EAAE,EAAE,CAAC,CACpF,oBAAC,IAAI,IACH,IAAI,EAAE,WAAW,EACjB,UAAU,QACV,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,OAAO,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,WAAW,CAAC,UAAU,EAAE,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,WAAW,CAAC,UAAU,EAAE,CAAC,GACnH,CACH,CAAA;AAED,gCAAgC;AAChC,MAAM,cAAc,GAAuC,CAAC,EAAE,UAAU,EAAE,EAAE,EAAE,CAAC;AAC7E,mJAAmJ;AAEnJ,aAAa;AACb,oBAAC,UAAU,OAAK,UAAU,EAAE,IAAI,EAAE,CAAC,EAAE,UAAU,QAAC,IAAI,EAAC,SAAS,EAAC,IAAI,EAAC,QAAQ,EAAC,SAAS,EAAE,MAAM,CAAC,KAAK,EAAE,QAAQ,EAAE,CAAC,CAAC,GAAI,CACvH,CAAA;AAED,MAAM,KAAK,GAA8B,CAAC,UAAU,EAAE,EAAE;IACtD,mFAAmF;IACnF,kEAAkE;IAClE,MAAM,KAAK,GAAG;QACZ,GAAG,UAAU;QACb,YAAY,EAAE,YAAY;KAC3B,CAAA;IACD,OAAO,oBAAC,YAAY,CAAC,KAAK,OAAK,KAAK,GAAI,CAAA;AAC1C,CAAC,CAAA;AAID,MAAM,0BAA0B,GAAG,CAAC,EAAU,EAAkC,EAAE,CAAC,OAAO,EAAE,KAAK,UAAU,CAAA;AAE3G,MAAM,QAAQ,GAAiC,CAAC,KAAK,EAAE,EAAE;IACvD,aAAa;IACb,MAAM,EAAE,gBAAgB,EAAE,GAAG,KAAK,CAAC,WAAW,CAAA;IAC9C,OAAO,CACL;QACE,oBAAC,YAAY,CAAC,QAAQ,OAAK,KAAK,GAAI;QAEnC,0BAA0B,CAAC,gBAAgB,CAAC,IAAI,gBAAgB,EAAE,CAClE,CACJ,CAAA;AACH,CAAC,CAAA;AAED,MAAM,cAAc,GAAuC,CAAC,KAAK,EAAE,EAAE;;IAAC,OAAA,CACpE,6BAAK,SAAS,EAAE,EAAE,CAAC,KAAK,CAAC,SAAS,EAAE,MAAM,CAAC,cAAc,CAAC;QACxD,oBAAC,aAAa,IAAC,IAAI,EAAE,KAAK,CAAC,QAAkB,GAAI;QACjD,8BAAM,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,YAAY,EAAE,GAAG,KAAK,CAAC,WAAW,CAAC,eAAe,IAAI,EAAE,iBAAiB,CAAC,IAClG,MAAC,KAAwD,CAAC,IAAI,0CAAE,YAAY,CACxE,CACH,CACP,CAAA;CAAA,CAAA;AAED,MAAM,MAAM,GAA+B,CAAC,KAAK,EAAE,EAAE,CAAC,CACpD,oBAAC,YAAY,CAAC,MAAM,OAAK,KAAK;IAC5B,oBAAC,cAAc,OAAK,KAAK,EAAE,SAAS,EAAE,GAAG,KAAK,CAAC,WAAW,CAAC,eAAe,IAAI,EAAE,mBAAmB,IAChG,KAAK,CAAC,KAAK,CACG,CACG,CACvB,CAAA;AAED,aAAa;AACb,MAAM,kBAAkB,GAA2C,GAAG,EAAE,CAAC,IAAI,CAAA;AAE7E,MAAM,WAAW,GAAoC,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE,CAAC,CAC/E,oBAAC,YAAY,CAAC,WAAW,OAAK,KAAK;IACjC,oBAAC,cAAc,OAAK,KAAK,IAAG,QAAQ,CAAkB,CAC7B,CAC5B,CAAA;AAED,MAAM,UAAU,GAAiC;IAC/C,iBAAiB;IACjB,cAAc;IACd,KAAK;IACL,QAAQ;IACR,kBAAkB;IAClB,MAAM;IACN,WAAW;CACZ,CAAA;AAED,OAAO,EAAE,UAAU,EAAE,CAAA"}

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

@@ -0,0 +1,69 @@
+@use '../../../styles/constants' as c;
+@use '../../../styles/helpers' as h;
+
+$selectHorizontalPadding: c.$grid * 3;
+
+.chevron {
+  color: c.$colorPrimary;
+  margin-left: $selectHorizontalPadding;
+  transition: 0s;
+
+  &.open {
+    transform: rotate(180deg);
+  }
+
+  &.disabled {
+    transition: 0s;
+    color: c.$colorTextSecondary;
+  }
+}
+
+.clear {
+  margin-left: $selectHorizontalPadding;
+}
+
+.option {
+  height: c.$inputHeight;
+  line-height: c.$inputHeight;
+  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;
+  cursor: pointer;
+
+  @include c.typographyBodySmall;
+
+  &.small {
+    height: c.$inputHeightSmall;
+    line-height: c.$inputHeightSmall;
+  }
+
+  &.focused {
+    @include h.outlineSimple;
+
+    color: c.$colorText;
+    background-color: c.$colorNeutral;
+  }
+
+  &.selected {
+    color: red;
+
+    // color: c.$colorPrimary;
+  }
+}
+
+[class].valueContainer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+
+  .trailingNote {
+    flex-shrink: 0;
+    color: c.$colorTextSecondary;
+    margin-left: c.$grid * 2;
+  }
+}

package/lib/components/Select/MultiSelectField.js

@@ -1,193 +1,113 @@
-'use strict';
-
-var React = require('react');
-var ReactSelect = require('react-select');
-var ReactSelectCreatable = require('react-select/creatable');
-var reactUid = require('react-uid');
-var reactFeather = require('react-feather');
-var useIsomorphicLayoutEffect = require('react-use/lib/useIsomorphicLayoutEffect');
-var cn = require('classnames');
-var components_Error = require('../Error.js');
-var components_Icon = require('../Icon.js');
-var components_Select_helpers = require('./helpers.js');
-var components_Select_Common = require('./Common.js');
-var components_FieldHeader = require('../FieldHeader.js');
-var hooks_useCloseOnResize = require('../../hooks/useCloseOnResize.js');
-var SelectField_module = require('./SelectField.module.scss.js');
-var MultiSelectField_module = require('./MultiSelectField.module.scss.js');
-
+import React, { useCallback, useEffect, useMemo, useRef } from 'react';
+import ReactSelect, { components as rsComponents, } from 'react-select';
+import ReactSelectCreatable from 'react-select/creatable';
+import { useUID } from 'react-uid';
+import { X } from 'react-feather';
+import useIsomorphicLayoutEffect from 'react-use/lib/useIsomorphicLayoutEffect';
+import cn from 'classnames';
+import { Error, errorId } from '../Error';
+import { Icon } from '../Icon';
+import { getMenuContainer, getOptionsMap } from './helpers';
+import { components } from './Common';
+import { FieldHeader } from '../FieldHeader';
+import { useCloseOnResize } from '../../hooks/useCloseOnResize';
+import styles from './SelectField.module.scss';
+import multiStyles from './MultiSelectField.module.scss';
 // Self-styled version of the MultiValue/Label
-const MultiValueLabel = ({
-  children
-}) => /*#__PURE__*/React.createElement("div", {
-  className: MultiSelectField_module.default.multiValueLabel
-}, children);
+const MultiValueLabel = ({ children }) => React.createElement("div", { className: multiStyles.multiValueLabel }, children);
 // Self-styled version of the MultiValue/Remove button
-const MultiValueRemove = props => {
-  // We have to pass down the onClick
-  const onClick = props.innerProps.onClick;
-  const handleMouseDown = event => {
-    // prevent opening the dropdown
-    event.preventDefault();
-    event.stopPropagation();
-  };
-  const handleClick = event => {
-    if (event.button === 0 && onClick) {
-      onClick(event);
-    }
-  };
-  return /*#__PURE__*/React.createElement("div", {
-    className: cn(MultiSelectField_module.default.multiValueRemove, {
-      [MultiSelectField_module.default.disabled]: true
-    }),
-    onClick: handleClick,
-    onMouseDown: handleMouseDown,
-    role: "button",
-    tabIndex: -1,
-    "aria-label": "Remove"
-  }, /*#__PURE__*/React.createElement(components_Icon.Icon, {
-    icon: reactFeather.X,
-    size: "small",
-    ariaHidden: true
-  }));
+const MultiValueRemove = (props) => {
+    // We have to pass down the onClick
+    const onClick = props.innerProps.onClick;
+    const handleMouseDown = (event) => {
+        // prevent opening the dropdown
+        event.preventDefault();
+        event.stopPropagation();
+    };
+    const handleClick = (event) => {
+        if (event.button === 0 && onClick) {
+            onClick(event);
+        }
+    };
+    return (React.createElement("div", { className: cn(multiStyles.multiValueRemove, { [multiStyles.disabled]: true }), onClick: handleClick, onMouseDown: handleMouseDown, role: "button", tabIndex: -1, "aria-label": "Remove" },
+        React.createElement(Icon, { icon: X, size: "small", ariaHidden: true })));
 };
 // We simply inject `.multiValueIsFocused`.
-const MultiValue = props => (/*#__PURE__*/React.createElement(ReactSelect.components.MultiValue, {
-  ...props,
-  className: cn(MultiSelectField_module.default.multiValue, {
-    [MultiSelectField_module.default.multiValueIsFocused]: props.isFocused,
-    [MultiSelectField_module.default.disabled]: props.isDisabled
-  })
-}));
-const MultiSelectField = props => {
-  const {
-    'data-test': dataTest = 'multi-select-field',
-    className,
-    disabled,
-    error,
-    errorClassName,
-    helperText,
-    isCreatable,
-    isSearchable = true,
-    label,
-    labelClassName,
-    showAriaLabel = false,
-    menuIsOpen,
-    menuPortalTarget = 'body',
-    menuPlacement = 'auto',
-    name,
-    onChange,
-    options,
-    placeholder,
-    value,
-    formatGroupLabel,
-    formatOptionLabel,
-    renderMenuFooter,
-    components: customComponents,
-    ...rest
-  } = props;
-  const id = reactUid.useUID();
-  useIsomorphicLayoutEffect(() => {
-    const menuContainer = components_Select_helpers.getMenuContainer(menuPortalTarget);
-    if (menuContainer && !menuContainer.className.includes(SelectField_module.default.menuContainer)) {
-      menuContainer.className = `${menuContainer.className} ${SelectField_module.default.menuContainer}`;
-    }
-  }, [menuPortalTarget]);
-  const optionsMap = React.useMemo(() => components_Select_helpers.getOptionsMap(options), [options]);
-  const selectedOptions = React.useMemo(() => value.map(val => {
-    var _a;
-    return (_a = optionsMap[val]) !== null && _a !== void 0 ? _a : {
-      value: val,
-      label: val
+const MultiValue = (props) => (React.createElement(rsComponents.MultiValue, { ...props, className: cn(multiStyles.multiValue, { [multiStyles.multiValueIsFocused]: props.isFocused, [multiStyles.disabled]: props.isDisabled }) }));
+export const MultiSelectField = (props) => {
+    const { 'data-test': dataTest = 'multi-select-field', className, disabled, error, errorClassName, helperText, isCreatable, isSearchable = true, label, labelClassName, showAriaLabel = false, menuIsOpen, menuPortalTarget = 'body', menuPlacement = 'auto', name, onChange, options, placeholder, value, formatGroupLabel, formatOptionLabel, renderMenuFooter, components: customComponents, ...rest } = props;
+    const id = useUID();
+    useIsomorphicLayoutEffect(() => {
+        const menuContainer = getMenuContainer(menuPortalTarget);
+        if (menuContainer && !menuContainer.className.includes(styles.menuContainer)) {
+            menuContainer.className = `${menuContainer.className} ${styles.menuContainer}`;
+        }
+    }, [menuPortalTarget]);
+    const optionsMap = useMemo(() => getOptionsMap(options), [options]);
+    const selectedOptions = useMemo(() => value.map((val) => { var _a; return (_a = optionsMap[val]) !== null && _a !== void 0 ? _a : { value: val, label: val }; }), [optionsMap, value]);
+    const onChangeWrapped = useCallback((selectedOptions) => {
+        onChange(selectedOptions.map(({ value }) => value));
+    }, [onChange]);
+    /** Recipe: https://react-select.com/advanced#controlled-props */
+    const selectRef = useRef(null);
+    useEffect(() => {
+        if (selectRef.current) {
+            if (menuIsOpen) {
+                selectRef.current.onMenuOpen();
+            }
+            else {
+                selectRef.current.onMenuClose();
+            }
+        }
+    }, [menuIsOpen]);
+    useCloseOnResize(selectRef);
+    const selectProps = {
+        inputId: id,
+        className: 'hz-select-field',
+        classNamePrefix: 'hz-select-field',
+        'aria-label': showAriaLabel ? label : undefined,
+        // 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,
+        isDisabled: disabled,
+        isSearchable: isSearchable,
+        isClearable: true,
+        isMulti: true,
+        name: name,
+        value: selectedOptions,
+        options,
+        onChange: onChangeWrapped,
+        placeholder,
+        menuIsOpen,
+        menuPlacement,
+        menuPortalTarget: getMenuContainer(menuPortalTarget),
+        components: {
+            MultiValueLabel,
+            MultiValueRemove,
+            MultiValue,
+            ...components,
+            ...customComponents,
+        },
+        formatGroupLabel,
+        formatOptionLabel,
+        // @ts-ignore
+        renderMenuFooter,
+        ...rest,
     };
-  }), [optionsMap, value]);
-  const onChangeWrapped = React.useCallback(selectedOptions => {
-    onChange(selectedOptions.map(({
-      value
-    }) => value));
-  }, [onChange]);
-  /** Recipe: https://react-select.com/advanced#controlled-props */
-  const selectRef = React.useRef(null);
-  React.useEffect(() => {
-    if (selectRef.current) {
-      if (menuIsOpen) {
-        selectRef.current.onMenuOpen();
-      } else {
-        selectRef.current.onMenuClose();
-      }
-    }
-  }, [menuIsOpen]);
-  hooks_useCloseOnResize.useCloseOnResize(selectRef);
-  const selectProps = {
-    inputId: id,
-    className: 'hz-select-field',
-    classNamePrefix: 'hz-select-field',
-    'aria-label': showAriaLabel ? label : undefined,
-    // 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,
-    isDisabled: disabled,
-    isSearchable: isSearchable,
-    isClearable: true,
-    isMulti: true,
-    name: name,
-    value: selectedOptions,
-    options,
-    onChange: onChangeWrapped,
-    placeholder,
-    menuIsOpen,
-    menuPlacement,
-    menuPortalTarget: components_Select_helpers.getMenuContainer(menuPortalTarget),
-    components: {
-      MultiValueLabel,
-      MultiValueRemove,
-      MultiValue,
-      ...components_Select_Common.components,
-      ...customComponents
-    },
-    formatGroupLabel,
-    formatOptionLabel,
-    // @ts-ignore
-    renderMenuFooter,
-    ...rest
-  };
-  return /*#__PURE__*/React.createElement("div", {
-    "data-test": dataTest,
-    className: cn(SelectField_module.default.container,
-    // 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.
-    SelectField_module.default.menuContainer, {
-      [SelectField_module.default.disabled]: disabled,
-      [SelectField_module.default.hasError]: error,
-      [SelectField_module.default.empty]: !value,
-      [SelectField_module.default.withError]: 'error' in props,
-      [SelectField_module.default.small]: rest.size === 'small',
-      [MultiSelectField_module.default.small]: rest.size === 'small'
-    }, MultiSelectField_module.default.multiContainer, className)
-  }, /*#__PURE__*/React.createElement(components_FieldHeader.FieldHeader, {
-    id: id,
-    label: label,
-    size: rest.size,
-    helperText: helperText,
-    showAriaLabel: showAriaLabel,
-    labelClassName: labelClassName
-  }), /*#__PURE__*/React.createElement("div", {
-    className: SelectField_module.default.selectBlock
-  }, isCreatable ? (/*#__PURE__*/React.createElement(ReactSelectCreatable, {
-    ref: selectRef,
-    ...selectProps
-  })) : (/*#__PURE__*/React.createElement(ReactSelect, {
-    ref: selectRef,
-    ...selectProps
-  }))), /*#__PURE__*/React.createElement(components_Error.Error, {
-    "data-test": `${dataTest}-error`,
-    truncated: true,
-    error: error,
-    className: cn(SelectField_module.default.errorContainer, errorClassName),
-    inputId: id
-  }));
+    return (React.createElement("div", { "data-test": dataTest, className: cn(styles.container, 
+        // 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, {
+            [styles.disabled]: disabled,
+            [styles.hasError]: error,
+            [styles.empty]: !value,
+            [styles.withError]: 'error' in props,
+            [styles.small]: rest.size === 'small',
+            [multiStyles.small]: rest.size === 'small',
+        }, multiStyles.multiContainer, className) },
+        React.createElement(FieldHeader, { id: id, label: label, size: rest.size, helperText: helperText, showAriaLabel: showAriaLabel, labelClassName: labelClassName }),
+        React.createElement("div", { className: styles.selectBlock }, isCreatable ? (React.createElement(ReactSelectCreatable, { ref: selectRef, ...selectProps })) : (React.createElement(ReactSelect, { ref: selectRef, ...selectProps }))),
+        React.createElement(Error, { "data-test": `${dataTest}-error`, truncated: true, error: error, className: cn(styles.errorContainer, errorClassName), inputId: id })));
 };
-
-exports.MultiSelectField = MultiSelectField;
-//# sourceMappingURL=MultiSelectField.js.map
+//# sourceMappingURL=MultiSelectField.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"MultiSelectField.js","sources":["../../../src/components/Select/MultiSelectField.tsx"],"sourcesContent":[null],"names":["MultiValueLabel","children","React","createElement","className","multiStyles","multiValueLabel","MultiValueRemove","props","onClick","innerProps","handleMouseDown","event","preventDefault","stopPropagation","handleClick","button","cn","multiValueRemove","disabled","onMouseDown","role","tabIndex","Icon","icon","X","size","ariaHidden","MultiValue","rsComponents","multiValue","multiValueIsFocused","isFocused","isDisabled","MultiSelectField","dataTest","error","errorClassName","helperText","isCreatable","isSearchable","label","labelClassName","showAriaLabel","menuIsOpen","menuPortalTarget","menuPlacement","name","onChange","options","placeholder","value","formatGroupLabel","formatOptionLabel","renderMenuFooter","components","customComponents","rest","id","useUID","useIsomorphicLayoutEffect","menuContainer","getMenuContainer","includes","styles","optionsMap","useMemo","getOptionsMap","selectedOptions","map","val","_a","onChangeWrapped","useCallback","selectRef","useRef","useEffect","current","onMenuOpen","onMenuClose","useCloseOnResize","selectProps","inputId","classNamePrefix","undefined","errorId","isClearable","isMulti","container","hasError","empty","withError","small","multiContainer","FieldHeader","selectBlock","ReactSelectCreatable","ref","ReactSelect","Error","truncated","errorContainer"],"mappings":"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"}
+{"version":3,"file":"MultiSelectField.js","sourceRoot":"","sources":["../../../src/components/Select/MultiSelectField.tsx"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,72 @@
+@use '../../../styles/constants' as c;
+@use '../../../styles/helpers' as h;
+
+$selectContainer: ':global .hz-select-field';
+$selectValueContainer: ':global .hz-select-field__value-container';
+$selectIndicators: ':global .hz-select-field__indicators';
+$selectMultiValue: ':global .hz-select-field__multi-value';
+
+.multiContainer {
+  #{$selectValueContainer}--has-value {
+    margin-left: -1.5 * c.$grid; // padding is narrower in .multiContainer (when it has any values selected)
+  }
+
+  #{$selectIndicators} {
+    align-items: flex-start;
+    margin-top: c.$grid * 1.5;
+  }
+
+  .multiValue {
+    background-color: c.$colorNeutralWhite;
+    border: c.$borderWidth solid c.$colorNeutralLight;
+    border-radius: c.$borderRadius;
+    height: c.$grid * 5.5; // makes 22px; design is 21px.
+    overflow: hidden;
+
+    &.disabled {
+      background-color: c.$colorNeutral;
+      color: c.$colorTextSecondary;
+    }
+  }
+
+  // Styles for MultiValue chips - focused state.
+  // We inject `.multiValueIsFocused` from js (it does not have an actual :focused state).
+  .multiValueIsFocused {
+    @include h.outlineFormField;
+
+    // override our outlineFormField inset shadow, for fixing
+    // the glitch case on an hovered remove button.
+    box-shadow: 0 0 0 (c.$outlineWidth - c.$borderWidth) c.$colorAccessibilityOutline;
+  }
+
+  .multiValueLabel {
+    @include c.typographyBodySmall;
+    @include h.overflowEllipsis;
+
+    color: c.$colorText;
+    padding: 0 c.$grid;
+  }
+
+  .multiValueRemove {
+    display: flex;
+    align-items: center;
+    color: c.$colorPrimary;
+
+    &:hover {
+      background-color: c.$colorNeutral;
+      border-color: c.$colorNeutralLight;
+    }
+
+    &.disabled {
+      color: c.$colorTextSecondary;
+    }
+  }
+
+  &.small {
+    #{$selectIndicators} {
+      margin-top: c.$grid * 0.5;
+    }
+  }
+}
+
+@include h.withError;

package/lib/components/Select/MultiSelectFieldFormik.js

@@ -1,42 +1,19 @@
-'use strict';
-
-var React = require('react');
-var formik = require('formik');
-var components_Select_MultiSelectField = require('./MultiSelectField.js');
-var utils_formik = require('../../utils/formik.js');
-
-const MultiSelectFieldFormik = ({
-  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_MultiSelectField.MultiSelectField, {
-    ...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 { MultiSelectField } from './MultiSelectField';
+import { formikTouchAndUpdate, getFieldError } from '../../utils/formik';
+export const MultiSelectFieldFormik = ({ 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(MultiSelectField, { ...props, name: name, value: value, onChange: handleChange, onBlur: onBlur, error: getFieldError(meta) });
 };
-
-exports.MultiSelectFieldFormik = MultiSelectFieldFormik;
-//# sourceMappingURL=MultiSelectFieldFormik.js.map
+//# sourceMappingURL=MultiSelectFieldFormik.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"MultiSelectFieldFormik.js","sources":["../../../src/components/Select/MultiSelectFieldFormik.tsx"],"sourcesContent":[null],"names":["MultiSelectFieldFormik","name","validate","onChange","props","value","onBlur","meta","setValue","setTouched","useField","setFormikValue","useMemo","formikTouchAndUpdate","handleChange","useCallback","newValue","React","createElement","MultiSelectField","error","getFieldError"],"mappings":";;;;;;;AAcO,MAAMA,sBAAsB,GAAGA,CAAwD;EAC5FC,IAAI;EACJC,QAAQ;EACRC,QAAQ;EACR,GAAGC;AAAK,CAC2B,KAAkB;AACrD,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,oBAAOc,KAAA,CAAAC,aAAA,CAACC,mDAAgB,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;AAC1I;;;;"}
+{"version":3,"file":"MultiSelectFieldFormik.js","sourceRoot":"","sources":["../../../src/components/Select/MultiSelectFieldFormik.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAgB,WAAW,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAA;AAGjC,OAAO,EAAE,gBAAgB,EAA8B,MAAM,oBAAoB,CAAA;AACjF,OAAO,EAAyB,oBAAoB,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAA;AAS/F,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAwD,EAC5F,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,GAAG,KAAK,EAC2B,EAAgB,EAAE;IACrD,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,oBAAC,gBAAgB,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,CAAA;AAC1I,CAAC,CAAA"}