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

package/lib/components/Select/SelectField.js

@@ -1,171 +1,102 @@
-'use strict';
-
-var React = require('react');
-var ReactSelect = require('react-select');
-var ReactSelectCreatable = require('react-select/creatable');
-var reactUid = require('react-uid');
-var useIsomorphicLayoutEffect = require('react-use/lib/useIsomorphicLayoutEffect');
-var cn = require('classnames');
-var components_Error = require('../Error.js');
-var components_FieldHeader = require('../FieldHeader.js');
-var components_Icon = require('../Icon.js');
-var components_Select_helpers = require('./helpers.js');
-var components_Select_Common = require('./Common.js');
-var hooks_useCloseOnResize = require('../../hooks/useCloseOnResize.js');
-var SelectField_module = require('./SelectField.module.scss.js');
-
-const SelectField = props => {
-  const {
-    'data-test': dataTest = 'select-field',
-    className,
-    disabled,
-    error,
-    errorClassName,
-    helperText,
-    isClearable = false,
-    isCreatable,
-    isSearchable = true,
-    label,
-    labelClassName,
-    showAriaLabel = false,
-    size = 'medium',
-    menuIsOpen,
-    menuPortalTarget = 'body',
-    menuPlacement = 'auto',
-    name,
-    onChange,
-    options,
-    placeholder,
-    required,
-    value,
-    formatGroupLabel,
-    formatOptionLabel,
-    renderMenuFooter,
-    singleValueTooltipVisible = true,
-    menuShouldScrollIntoView = false,
-    ...iconAndRest
-  } = props;
-  const id = reactUid.useUID();
-  const {
-    iconLeft,
-    iconLeftAriaLabel,
-    iconLeftClassName,
-    iconLeftContainerClassName,
-    ...rest
-  } = iconAndRest;
-  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]);
-  /**
-   * Three (3) cases here:
-   * 1. No option is selected
-   * 2. An existing option is selected
-   * 3. A created option is selected
-   */
-  const selectedOption = React.useMemo(() => {
-    var _a;
-    return value === null ? null : (_a = optionsMap[value]) !== null && _a !== void 0 ? _a : {
-      value: value,
-      label: value
+import React, { useCallback, useEffect, useMemo, useRef } from 'react';
+import ReactSelect from 'react-select';
+import ReactSelectCreatable from 'react-select/creatable';
+import { useUID } from 'react-uid';
+import useIsomorphicLayoutEffect from 'react-use/lib/useIsomorphicLayoutEffect';
+import cn from 'classnames';
+import { Error, errorId } from '../Error';
+import { FieldHeader } from '../FieldHeader';
+import { Icon } from '../Icon';
+import { getMenuContainer, getOptionsMap } from './helpers';
+import { components } from './Common';
+import { components as rsComponents } from 'react-select';
+import { useCloseOnResize } from '../../hooks/useCloseOnResize';
+import styles from './SelectField.module.scss';
+export const SelectField = (props) => {
+    const { 'data-test': dataTest = 'select-field', className, disabled, error, errorClassName, helperText, isClearable = false, isCreatable, isSearchable = true, label, labelClassName, showAriaLabel = false, size = 'medium', menuIsOpen, menuPortalTarget = 'body', menuPlacement = 'auto', name, onChange, options, placeholder, required, value, formatGroupLabel, formatOptionLabel, renderMenuFooter, singleValueTooltipVisible = true, menuShouldScrollIntoView = false, ...iconAndRest } = props;
+    const id = useUID();
+    const { iconLeft, iconLeftAriaLabel, iconLeftClassName, iconLeftContainerClassName, ...rest } = iconAndRest;
+    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]);
+    /**
+     * Three (3) cases here:
+     * 1. No option is selected
+     * 2. An existing option is selected
+     * 3. A created option is selected
+     */
+    const selectedOption = useMemo(() => { var _a; return (value === null ? null : ((_a = optionsMap[value]) !== null && _a !== void 0 ? _a : { value: value, label: value })); }, [optionsMap, value]);
+    const onChangeWrapped = useCallback((option) => {
+        var _a;
+        onChange((_a = option === null || option === void 0 ? void 0 : option.value) !== null && _a !== void 0 ? _a : null);
+    }, [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]);
+    const innerComponents = useMemo(() => singleValueTooltipVisible
+        ? components
+        : {
+            ...components,
+            SingleValue: rsComponents.SingleValue,
+        }, [singleValueTooltipVisible]);
+    useCloseOnResize(selectRef);
+    const selectProps = {
+        inputId: id,
+        className: 'hz-select-field',
+        classNamePrefix: 'hz-select-field',
+        'aria-label': showAriaLabel ? label : 'select',
+        // 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,
+        'aria-required': required,
+        isClearable,
+        isSearchable,
+        isDisabled: disabled,
+        name: name,
+        value: selectedOption,
+        options,
+        onChange: onChangeWrapped,
+        placeholder,
+        menuIsOpen,
+        menuPlacement,
+        menuPortalTarget: getMenuContainer(menuPortalTarget),
+        components: innerComponents,
+        formatGroupLabel,
+        formatOptionLabel,
+        // @ts-ignore
+        renderMenuFooter,
+        menuShouldScrollIntoView,
+        ...rest,
     };
-  }, [optionsMap, value]);
-  const onChangeWrapped = React.useCallback(option => {
-    var _a;
-    onChange((_a = option === null || option === void 0 ? void 0 : option.value) !== null && _a !== void 0 ? _a : null);
-  }, [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]);
-  const innerComponents = React.useMemo(() => singleValueTooltipVisible ? components_Select_Common.components : {
-    ...components_Select_Common.components,
-    SingleValue: ReactSelect.components.SingleValue
-  }, [singleValueTooltipVisible]);
-  hooks_useCloseOnResize.useCloseOnResize(selectRef);
-  const selectProps = {
-    inputId: id,
-    className: 'hz-select-field',
-    classNamePrefix: 'hz-select-field',
-    'aria-label': showAriaLabel ? label : 'select',
-    // 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,
-    'aria-required': required,
-    isClearable,
-    isSearchable,
-    isDisabled: disabled,
-    name: name,
-    value: selectedOption,
-    options,
-    onChange: onChangeWrapped,
-    placeholder,
-    menuIsOpen,
-    menuPlacement,
-    menuPortalTarget: components_Select_helpers.getMenuContainer(menuPortalTarget),
-    components: innerComponents,
-    formatGroupLabel,
-    formatOptionLabel,
-    // @ts-ignore
-    renderMenuFooter,
-    menuShouldScrollIntoView,
-    ...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.hasIcon]: !!iconLeft,
-      [SelectField_module.default.small]: size === 'small',
-      [SelectField_module.default.withError]: 'error' in props
-    }, 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: SelectField_module.default.selectBlock
-  }, iconLeft && iconLeftAriaLabel && (/*#__PURE__*/React.createElement(components_Icon.Icon, {
-    containerClassName: cn(SelectField_module.default.iconLeftContainer, iconLeftContainerClassName),
-    icon: iconLeft,
-    size: size,
-    ariaLabel: iconLeftAriaLabel,
-    "data-test": `${dataTest}-icon-left`,
-    className: cn(SelectField_module.default.iconLeft, iconLeftClassName)
-  })), 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.hasIcon]: !!iconLeft,
+            [styles.small]: size === 'small',
+            [styles.withError]: 'error' in props,
+        }, 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 },
+            iconLeft && iconLeftAriaLabel && (React.createElement(Icon, { containerClassName: cn(styles.iconLeftContainer, iconLeftContainerClassName), icon: iconLeft, size: size, ariaLabel: iconLeftAriaLabel, "data-test": `${dataTest}-icon-left`, className: cn(styles.iconLeft, iconLeftClassName) })),
+            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.SelectField = SelectField;
-//# sourceMappingURL=SelectField.js.map
+//# sourceMappingURL=SelectField.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"SelectField.js","sources":["../../../src/components/Select/SelectField.tsx"],"sourcesContent":[null],"names":["SelectField","props","dataTest","className","disabled","error","errorClassName","helperText","isClearable","isCreatable","isSearchable","label","labelClassName","showAriaLabel","size","menuIsOpen","menuPortalTarget","menuPlacement","name","onChange","options","placeholder","required","value","formatGroupLabel","formatOptionLabel","renderMenuFooter","singleValueTooltipVisible","menuShouldScrollIntoView","iconAndRest","id","useUID","iconLeft","iconLeftAriaLabel","iconLeftClassName","iconLeftContainerClassName","rest","useIsomorphicLayoutEffect","menuContainer","getMenuContainer","includes","styles","optionsMap","useMemo","getOptionsMap","selectedOption","_a","onChangeWrapped","useCallback","option","selectRef","useRef","useEffect","current","onMenuOpen","onMenuClose","innerComponents","components","SingleValue","rsComponents","useCloseOnResize","selectProps","inputId","classNamePrefix","errorId","isDisabled","React","createElement","cn","container","hasError","empty","hasIcon","small","withError","FieldHeader","selectBlock","Icon","containerClassName","iconLeftContainer","icon","ariaLabel","ReactSelectCreatable","ref","ReactSelect","Error","truncated","errorContainer"],"mappings":"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"}
+{"version":3,"file":"SelectField.js","sourceRoot":"","sources":["../../../src/components/Select/SelectField.tsx"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,194 @@
+@use '../../../styles/constants' as c;
+@use '../../../styles/helpers' as h;
+
+$selectHorizontalPadding: c.$grid * 3;
+$menuMargin: c.$grid * 3;
+$selectContainer: ':global .hz-select-field';
+$selectControl: ':global .hz-select-field__control';
+$selectValueContainer: ':global .hz-select-field__value-container';
+$selectMenuPortal: ':global .hz-select-field__menu-portal';
+$selectMenu: ':global .hz-select-field__menu';
+$selectMenuList: ':global .hz-select-field__menu-list';
+$selectMenuNotice: ':global .hz-select-field__menu-notice';
+$selectOption: ':global .hz-select-field__option';
+$selectGroup: ':global .hz-select-field__group';
+$selectGroupHeading: ':global .hz-select-field__group-heading';
+
+.container {
+  .label {
+    display: block;
+    margin-bottom: c.$grid;
+
+    &.small {
+      @include c.typographyBodySmall;
+    }
+  }
+
+  .helperText {
+    margin-left: c.$grid * 1.5;
+    display: block;
+  }
+
+  #{$selectContainer} {
+    flex: 1 1 auto;
+    max-width: 100%;
+
+    @include c.typographyBodySmall;
+  }
+
+  #{$selectValueContainer} {
+    padding: c.$grid * 1.375 0;
+  }
+
+  #{$selectControl} {
+    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.$colorOverlayBackground;
+    transition: none;
+  }
+
+  &.small {
+    #{$selectValueContainer} {
+      padding: 0;
+    }
+
+    #{$selectControl} {
+      min-height: c.$inputHeightSmall;
+    }
+  }
+
+  &.disabled {
+    #{$selectControl} {
+      color: c.$colorTextSecondary;
+      background-color: c.$colorNeutral;
+      border-color: c.$colorNeutralLight;
+    }
+  }
+
+  &.hasError {
+    #{$selectControl} {
+      border-color: c.$colorError;
+    }
+
+    label {
+      color: c.$colorError;
+    }
+  }
+
+  // We target select control specifically to avoid applying hover styles when hovering helper icon
+  #{$selectControl}:hover,
+  &.hover #{$selectControl} {
+    border-color: c.$colorPrimary;
+    transition: none;
+  }
+
+  &.focus #{$selectControl},
+  #{$selectControl}.hz-select-field__control--is-focused {
+    @include h.outlineFormField;
+  }
+
+  .selectBlock {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    position: relative;
+
+    .iconLeftContainer {
+      .iconLeft {
+        position: absolute;
+        left: 0;
+        top: 0;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 100%;
+        z-index: c.$zIndex100;
+        padding: 0 c.$grid * 2 0 c.$grid * 3;
+      }
+    }
+  }
+
+  &.hasIcon {
+    #{$selectControl} {
+      padding-left: c.$grid * 10;
+    }
+
+    &.small {
+      #{$selectControl} {
+        padding-left: c.$grid * 8;
+      }
+    }
+  }
+}
+
+.menuContainer {
+  #{$selectMenuPortal} {
+    z-index: c.$zIndex2000;
+  }
+
+  #{$selectMenu} {
+    margin-top: $menuMargin;
+    margin-bottom: $menuMargin;
+    border: c.$borderWidth solid c.$colorNeutralLight;
+    border-radius: c.$borderRadius;
+    background-color: c.$colorOverlayBackground;
+    overflow: hidden;
+    box-shadow: 0 c.$selectMenuShadowSize c.$selectMenuShadowBlur 0 c.$colorShadow;
+    z-index: c.$zIndex1000;
+
+    @include c.typographyBodySmall;
+  }
+
+  #{$selectMenuList} {
+    padding: 0;
+    color: c.$colorTextSecondary;
+  }
+
+  #{$selectOption},
+  #{$selectMenuNotice} {
+    min-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;
+  }
+
+  #{$selectOption}--is-focused {
+    @include h.outlineSimple;
+
+    color: c.$colorText;
+    background-color: c.$colorNeutral;
+  }
+
+  #{$selectOption}--is-selected {
+    color: c.$colorPrimary;
+  }
+
+  #{$selectGroup} {
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+
+  #{$selectGroupHeading} {
+    margin-bottom: 0;
+    padding-top: 2 * c.$grid;
+    padding-bottom: 2 * c.$grid;
+    background-color: c.$colorNeutralWhite;
+    color: c.$colorTextSecondary;
+    font-size: c.$fontSizeBodySmaller;
+    font-weight: c.$fontWeightTextBold;
+    text-transform: inherit;
+  }
+}
+
+@include h.withError;

package/lib/components/Select/SelectFieldFormik.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"SelectFieldFormik.js","sources":["../../../src/components/Select/SelectFieldFormik.tsx"],"sourcesContent":[null],"names":["SelectFieldFormik","name","validate","onChange","props","field","meta","setValue","setTouched","useField","setFormikValue","useMemo","formikTouchAndUpdate","handleChange","useCallback","value","React","createElement","SelectField","onBlur","error","getFieldError"],"mappings":";;;;;;;AAaO,MAAMA,iBAAiB,GAAGA,CAAwD;EACvFC,IAAI;EACJC,QAAQ;EACRC,QAAQ;EACR,GAAGC;AAAK,CACsB,KAAkB;AAChD,EAAA,MAAM,CAACC,KAAK,EAAEC,IAAI,EAAE;IAAEC,QAAQ;AAAEC,IAAAA;GAAY,CAAC,GAAGC,eAAQ,CAAY;IAClER,IAAI;AACJC,IAAAA;AACD,GAAA,CAAC;AAEF,EAAA,MAAMQ,cAAc,GAAGC,aAAO,CAAC,MAAMC,iCAAoB,CAAYL,QAAQ,EAAEC,UAAU,CAAC,EAAE,CAACD,QAAQ,EAAEC,UAAU,CAAC,CAAC;AACnH,EAAA,MAAMK,YAAY,GAAGC,iBAAW,CAC7BC,KAAgB,IAAI;AACnB,IAAA,IAAIZ,QAAQ,EAAE;MACZA,QAAQ,CAACY,KAAK,CAAC;AACjB,IAAA;IAEAL,cAAc,CAACK,KAAK,CAAC;AACvB,EAAA,CAAC,EACD,CAACL,cAAc,EAAEP,QAAQ,CAAC,CAC3B;AAED,EAAA,oBACEa,KAAA,CAAAC,aAAA,CAACC,yCAAW,EAAA;AAAA,IAAA,GAASd,KAAK;AAAEH,IAAAA,IAAI,EAAEA,IAAI;IAAEc,KAAK,EAAEV,KAAK,CAACU,KAAK;AAAEZ,IAAAA,QAAQ,EAAEU,YAAY;IAAEM,MAAM,EAAEd,KAAK,CAACc,MAAM;IAAEC,KAAK,EAAEC,0BAAa,CAACf,IAAI;AAAC,GAAA,CAAI;AAE5I;;;;"}
+{"version":3,"file":"SelectFieldFormik.js","sourceRoot":"","sources":["../../../src/components/Select/SelectFieldFormik.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,EAAE,WAAW,EAAyB,MAAM,eAAe,CAAA;AAClE,OAAO,EAAyB,oBAAoB,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAA;AAS/F,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAwD,EACvF,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,GAAG,KAAK,EACsB,EAAgB,EAAE;IAChD,MAAM,CAAC,KAAK,EAAE,IAAI,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,CAAC,GAAG,QAAQ,CAAY;QAClE,IAAI;QACJ,QAAQ;KACT,CAAC,CAAA;IAEF,MAAM,cAAc,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,oBAAoB,CAAY,QAAQ,EAAE,UAAU,CAAC,EAAE,CAAC,QAAQ,EAAE,UAAU,CAAC,CAAC,CAAA;IACnH,MAAM,YAAY,GAAG,WAAW,CAC9B,CAAC,KAAgB,EAAE,EAAE;QACnB,IAAI,QAAQ,EAAE,CAAC;YACb,QAAQ,CAAC,KAAK,CAAC,CAAA;QACjB,CAAC;QAED,cAAc,CAAC,KAAK,CAAC,CAAA;IACvB,CAAC,EACD,CAAC,cAAc,EAAE,QAAQ,CAAC,CAC3B,CAAA;IAED,OAAO,CACL,oBAAC,WAAW,OAAS,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,EAAE,KAAK,CAAC,MAAM,EAAE,KAAK,EAAE,aAAa,CAAC,IAAI,CAAC,GAAI,CACzI,CAAA;AACH,CAAC,CAAA"}

package/lib/components/Select/helpers.js

@@ -1,34 +1,29 @@
-'use strict';
-
-var utils_ssr = require('../../utils/ssr.js');
-
-const isSimpleOption = option => !!option.value;
-const getOptionsMap = options =>
+import { canUseDOM } from '../../utils/ssr';
+const isSimpleOption = (option) => !!option.value;
+export const getOptionsMap = (options) => 
 // need this type assertion because of the TS issue https://github.com/microsoft/TypeScript/issues/7294
 options.reduce((acc, optionOrGroup) => {
-  // if it's a simple non-group option
-  if (isSimpleOption(optionOrGroup)) {
-    acc[optionOrGroup.value] = optionOrGroup;
-    // else it's a group option
-  } else {
-    optionOrGroup.options.reduce((innerAcc, option) => {
-      innerAcc[option.value] = option;
-      return innerAcc;
-    }, acc);
-  }
-  return acc;
+    // if it's a simple non-group option
+    if (isSimpleOption(optionOrGroup)) {
+        acc[optionOrGroup.value] = optionOrGroup;
+        // else it's a group option
+    }
+    else {
+        optionOrGroup.options.reduce((innerAcc, option) => {
+            innerAcc[option.value] = option;
+            return innerAcc;
+        }, acc);
+    }
+    return acc;
 }, {});
-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;
+export 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;
 };
-
-exports.getMenuContainer = getMenuContainer;
-exports.getOptionsMap = getOptionsMap;
-//# sourceMappingURL=helpers.js.map
+//# sourceMappingURL=helpers.js.map