@festo-ui/react 7.3.0-dev.464 → 7.3.0-dev.468

package/node/lib/forms/select/Select.js

@@ -3,299 +3,113 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.Select = void 0;
-var _classnames = _interopRequireDefault(require("classnames"));
-var _react = _interopRequireWildcard(require("react"));
+exports.default = void 0;
+var _react = require("react");
 var _reactDom = _interopRequireDefault(require("react-dom"));
-var _reactPopper = require("react-popper");
 var _useControlled = _interopRequireDefault(require("../../helper/useControlled.js"));
+var _index = require("./internal/index.js");
 var _useForkRef = _interopRequireDefault(require("../../helper/useForkRef.js"));
-var _ListItem = _interopRequireDefault(require("./list-item/ListItem.js"));
-var _utils = _interopRequireDefault(require("./utils.js"));
+var _utils = _interopRequireDefault(require("./internal/utils.js"));
 var _jsxRuntime = require("react/jsx-runtime");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const Select = exports.Select = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+function SelectComponent(_ref, ref) {
   let {
     defaultValue = '',
-    value,
+    open,
+    defaultOpen = false,
+    value: controlled,
     label,
     options,
     onChange,
     required = false,
     config,
     disabled,
-    className,
     name,
     id,
     children,
     hint,
     error,
+    onOpenChange,
+    renderLabelContent,
     ...props
   } = _ref;
-  const [optionsWrapper, setOptionsWrapper] = (0, _react.useState)({
-    isFocused: false,
-    action: ''
+  const [value, setValue] = (0, _useControlled.default)({
+    controlled,
+    default: defaultValue,
+    onChange
   });
-  const [innerValue, setInnerValue] = (0, _useControlled.default)({
-    controlled: value,
-    default: defaultValue
+  const [focused, setFocused] = (0, _useControlled.default)({
+    controlled: open,
+    default: defaultOpen,
+    onChange: onOpenChange
   });
+  const buttonEl = (0, _react.useRef)(null);
+  const usedOptions = options ?? (0, _utils.default)(children).childrenList.map(child => child.props.option);
   const innerRef = (0, _react.useRef)(null);
   const combinedRef = (0, _useForkRef.default)(ref, innerRef);
-  const buttonEl = (0, _react.useRef)(null);
-  const childrenList = [];
-  const [popperElement, setPopperElement] = (0, _react.useState)(null);
-  const {
-    styles,
-    attributes
-  } = (0, _reactPopper.usePopper)(innerRef.current, popperElement, {
-    placement: 'bottom-start',
-    modifiers: [{
-      name: 'offset',
-      options: {
-        offset: [0, 3]
-      }
-    }, {
-      name: 'flip',
-      options: {
-        fallbackPlacements: ['bottom-start', 'top-start']
-      }
-    }]
-  });
-  _react.default.Children.forEach(children, element => {
-    if ( /*#__PURE__*/_react.default.isValidElement(element)) {
-      childrenList.push({
-        ...element,
-        props: {
-          ...element.props,
-          className: 'fwe-select-option-content'
-        }
-      });
-    }
-  });
-  const usedOptions = options ?? childrenList.map(child => child.props.option);
-  const listItemRef = (0, _react.useRef)(Array.from({
-    length: usedOptions.length
-  }, () => /*#__PURE__*/_react.default.createRef()));
-  const getSelectedOptionLabel = (0, _react.useCallback)(() => usedOptions.find(option => option.data === innerValue)?.label, [usedOptions, innerValue]);
-  const scroll = config?.scroll;
-  function handleButtonFocus(blur) {
-    if (buttonEl && buttonEl.current) {
-      if (blur) {
-        buttonEl.current.blur();
-      } else {
-        buttonEl.current.focus();
-      }
-    }
-  }
-  const focusNextElement = (0, _react.useCallback)(nextIndex => {
-    if (listItemRef && listItemRef.current) {
-      const nextItem = listItemRef.current[nextIndex].current;
-      if (nextItem !== null) {
-        nextItem.focus();
-      }
-    }
-  }, []);
-  const handleKeyAction = (0, _react.useCallback)(index => {
-    if (index >= 0) {
-      focusNextElement(index);
-    }
-  }, [focusNextElement]);
-  (0, _react.useEffect)(() => {
-    if (optionsWrapper.isFocused) {
-      if (optionsWrapper.action === 'key') {
-        const index = usedOptions.findIndex(option => option.label === getSelectedOptionLabel());
-        handleKeyAction(index);
-      } else if (optionsWrapper.action === 'click') {
-        handleButtonFocus(true);
-      }
-    }
-  }, [optionsWrapper, usedOptions, innerValue, getSelectedOptionLabel, handleKeyAction]);
-  const handleOptionChange = newOption => {
-    setInnerValue(newOption.data);
-    if (onChange) {
-      onChange(newOption.data);
-    }
-    setOptionsWrapper(prevOptionsWrapper => ({
-      ...prevOptionsWrapper,
-      isFocused: false
-    }));
-    if (buttonEl && buttonEl.current) {
-      buttonEl.current.focus();
-    }
+  const multiple = Array.isArray(value);
+  const refocusButton = () => {
+    setFocused(false);
+    buttonEl?.current?.focus();
   };
-  const handleListKeyDown = (e, option, index) => {
-    const arrowKeys = ['ArrowDown', 'ArrowUp'];
-    const validKeys = ['Enter', ' '];
-    if (arrowKeys.concat(validKeys).includes(e.key)) {
-      e.preventDefault();
-    }
-    if (e.key === 'ArrowDown') {
-      focusNextElement((index + 1) % usedOptions.length);
-    }
-    if (e.key === 'ArrowUp') {
-      const nextIndex = (index - 1 + usedOptions.length) % usedOptions.length;
-      focusNextElement(nextIndex);
-    }
-    if (validKeys.includes(e.key)) {
-      handleOptionChange(option);
-    }
-    if (e.key === 'Escape') {
-      setOptionsWrapper(prevOptionsWrapper => ({
-        ...prevOptionsWrapper,
-        isFocused: false
-      }));
-      handleButtonFocus();
-    }
-  };
-  const handleKeyPress = event => {
-    const validKeys = ['Enter', ' ', 'ArrowUp', 'ArrowDown'];
-    if (validKeys.includes(event.key)) {
-      event.preventDefault();
-      if (!disabled) {
-        setOptionsWrapper(prevOptionsWrapper => ({
-          action: 'key',
-          isFocused: !prevOptionsWrapper.isFocused
-        }));
-      }
+  const handleOptionChange = newOption => {
+    let newValue = newOption.data;
+    if (value instanceof Array) {
+      newValue = value.includes(newValue) ? value.filter(item => item !== newValue) : [...value, newValue];
     }
-  };
-  const handleClick = e => {
-    e.stopPropagation();
-    if (!disabled) {
-      setOptionsWrapper(prevOptionsWrapper => ({
-        action: '',
-        isFocused: !prevOptionsWrapper.isFocused
-      }));
+    setValue(newValue);
+    if (!multiple) {
+      refocusButton();
     }
   };
-  const handleChange = event => {
-    const child = usedOptions.find(childItem => childItem.data === event.target.value);
-    if (child === undefined) {
-      return;
-    }
-    setInnerValue(child.data);
-    if (onChange) {
-      onChange(child.data);
+  const removeChip = chipLabel => {
+    const chipOption = usedOptions.find(option => option.label === chipLabel);
+    if (chipOption) {
+      handleOptionChange(chipOption);
     }
   };
-  const selectedOptionLabel = getSelectedOptionLabel();
-  const selectClassName = (0, _classnames.default)('fwe-select', {
-    'fwe-focus': optionsWrapper.isFocused
-  }, {
-    'fwe-empty': selectedOptionLabel === undefined && !optionsWrapper.isFocused
-  }, {
-    'fwe-required': required
-  }, {
-    'fwe-disabled': disabled
-  }, {
-    'fwe-invalid': error
-  });
-  function getCssProperies() {
-    if (config?.contentWidth) {
-      return {
-        ...styles.popper,
-        minWidth: `${innerRef.current?.clientWidth}px`,
-        width: config?.contentWidth
-      };
-    }
-    return {
-      ...styles.popper,
-      minWidth: `${innerRef.current?.clientWidth}px`
-    };
-  }
-  function renderOptions() {
-    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-      children: [options && options.map((option, i) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItem.default, {
-        ref: listItemRef.current[i],
-        "aria-selected": option.label === selectedOptionLabel,
-        onClick: () => handleOptionChange(option),
-        empty: !option.label,
-        onKeyDown: e => handleListKeyDown(e, option, i),
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-          className: "fwe-select-option-content",
-          "data-testid": "fwe-select-option-content",
-          children: option.label
-        })
-      }, option.data)), childrenList.map((child, i) => {
-        const {
-          option,
-          ...propsWithoutOption
-        } = child.props;
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItem.default, {
-          ref: listItemRef.current[i],
-          "aria-selected": option.label === selectedOptionLabel,
-          onClick: () => handleOptionChange(option),
-          empty: !option.label,
-          onKeyDown: e => handleListKeyDown(e, option, i),
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-            ...propsWithoutOption
-          })
-        }, option.data);
-      })]
-    });
-  }
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+  const selectedLabel = multiple ? usedOptions.filter(option => value.includes(option.data))?.map(option => option.label) : usedOptions.find(option => option.data === value)?.label;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_index.Wrapper, {
+    disabled: disabled,
     ref: combinedRef,
-    className: (0, _classnames.default)('fwe-select-wrapper', {
-      'fwe-disabled': disabled
-    }, className),
     ...props,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
-      className: "fr-select-input",
-      "aria-hidden": true,
-      tabIndex: -1,
-      value: innerValue,
-      onChange: e => handleChange(e)
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      role: "button",
-      tabIndex: 0,
-      className: selectClassName,
-      onClick: e => handleClick(e),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.HiddenInput, {
+      onChange: handleOptionChange,
+      options: usedOptions,
+      value: value
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.SelectButton, {
       ref: buttonEl,
-      onKeyDown: handleKeyPress,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: "fwe-select-content",
-        children: selectedOptionLabel
-      })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
-      className: (0, _classnames.default)('fwe-select-label', {
-        'fwe-sr-only': config?.hideLabel
-      }),
-      htmlFor: id,
-      children: label || ''
+      onToggle: () => setFocused(prev => !prev),
+      error: error,
+      disabled: disabled,
+      focused: focused,
+      required: required,
+      onChipClick: removeChip,
+      label: selectedLabel,
+      renderLabelContent: renderLabelContent
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.SelectLabel, {
+      hideLabel: config?.hideLabel,
+      label: label,
+      id: id
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: "fwe-select-underline"
     }), hint && !error && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: "fwe-select-description",
       children: hint
-    }), error && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    }), error && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: "fwe-select-invalid",
-      children: [" ", error, " "]
-    }), optionsWrapper.isFocused ? /*#__PURE__*/_reactDom.default.createPortal( /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        "aria-hidden": true,
-        className: "fr-backdrop",
-        onClick: () => setOptionsWrapper({
-          action: '',
-          isFocused: false
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
-        ref: setPopperElement,
-        style: getCssProperies(),
-        ...attributes.popper,
-        className: "fwe-select-options-container",
-        children: scroll?.enabled ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: "fr-select-scroll",
-          style: {
-            height: (0, _utils.default)(config, usedOptions.length)
-          },
-          children: renderOptions()
-        }) : renderOptions()
-      })]
-    }), document.body) : null]
+      children: error
+    }), focused && /*#__PURE__*/_reactDom.default.createPortal( /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.OptionsContainer, {
+      multiple: multiple,
+      ref: innerRef,
+      config: config,
+      onClose: refocusButton,
+      onOptionChange: handleOptionChange,
+      options: options,
+      label: selectedLabel,
+      children: children
+    }), document.body)]
   });
-});
+}
+const Select = /*#__PURE__*/(0, _react.forwardRef)(SelectComponent);
 var _default = exports.default = Select;

package/node/lib/forms/select/internal/HiddenInput.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = HiddenInput;
+var _jsxRuntime = require("react/jsx-runtime");
+function HiddenInput(_ref) {
+  let {
+    value,
+    onChange,
+    options
+  } = _ref;
+  function handleChange(event) {
+    const child = options.find(_ref2 => {
+      let {
+        data
+      } = _ref2;
+      return data === event.target.value;
+    });
+    if (child !== undefined) {
+      onChange(child);
+    }
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+    className: "fr-select-input",
+    "aria-hidden": true,
+    tabIndex: -1,
+    value: value,
+    onChange: handleChange
+  });
+}

package/node/lib/forms/select/internal/ListItem.js

@@ -0,0 +1,87 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _SelectCheckbox = _interopRequireDefault(require("./SelectCheckbox.js"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function ListItemComponent(_ref, ref) {
+  let {
+    children,
+    className,
+    empty,
+    options,
+    onClose,
+    onOptionChange,
+    index,
+    selectedLabel,
+    item,
+    withCheckbox,
+    onFocusChange,
+    ...restProps
+  } = _ref;
+  const isChild = /*#__PURE__*/_react.default.isValidElement(item);
+  const option = isChild ? item.props.option : item;
+  const propsWithoutOption = isChild ? {
+    ...item.props,
+    option: undefined
+  } : {};
+  const checked = Array.isArray(selectedLabel) ? selectedLabel.includes(option.label) : selectedLabel === option.label;
+  function handleKeyDown(e) {
+    const arrowKeys = ['ArrowDown', 'ArrowUp'];
+    const validKeys = ['Enter', ' '];
+    if (arrowKeys.concat(validKeys).includes(e.key)) {
+      e.preventDefault();
+    }
+    if (e.key === 'ArrowDown') {
+      onFocusChange((index + 1) % options.length);
+    }
+    if (e.key === 'ArrowUp') {
+      const nextIndex = (index - 1 + options.length) % options.length;
+      onFocusChange(nextIndex);
+    }
+    if (['Enter', ' '].includes(e.key)) {
+      if (option.disabled) {
+        return;
+      }
+      onOptionChange(option);
+    }
+    if (e.key === 'Escape') {
+      onClose();
+    }
+  }
+  const itemRef = typeof ref !== 'function' ? ref?.current?.[index] : undefined;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
+    onClick: () => onOptionChange(option),
+    ref: itemRef,
+    role: "option",
+    onKeyDown: handleKeyDown,
+    "aria-selected": checked,
+    className: (0, _classnames.default)('fwe-select-option', {
+      'fwe-empty': !option.label
+    }, className),
+    tabIndex: 0,
+    ...restProps,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SelectCheckbox.default, {
+      disabled: option.disabled,
+      onClick: e => e.stopPropagation(),
+      checked: checked,
+      withCheckbox: withCheckbox,
+      children: isChild ? /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        ...propsWithoutOption
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: "fwe-select-option-content",
+        "data-testid": "fwe-select-option-content",
+        children: option.label
+      })
+    })
+  });
+}
+const ListItem = /*#__PURE__*/(0, _react.forwardRef)(ListItemComponent);
+var _default = exports.default = ListItem;

package/node/lib/forms/select/internal/SelectButton.js

@@ -0,0 +1,64 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _classnames = _interopRequireDefault(require("classnames"));
+var _react = require("react");
+var _SelectButtonContent = _interopRequireDefault(require("./SelectButtonContent.js"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const SelectButton = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    onToggle,
+    disabled,
+    label,
+    focused,
+    required,
+    error,
+    onChipClick,
+    renderLabelContent
+  } = _ref;
+  const empty = label === undefined && !focused;
+  function handleKeyDown(e) {
+    if (disabled) {
+      return;
+    }
+    const validKeys = ['Enter', ' ', 'ArrowUp', 'ArrowDown'];
+    if (validKeys.includes(e.key)) {
+      e.preventDefault();
+      onToggle();
+    }
+  }
+  function handleClick(e) {
+    if (disabled) {
+      return;
+    }
+    e.stopPropagation();
+    onToggle();
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    role: "button",
+    tabIndex: 0,
+    className: (0, _classnames.default)('fwe-select', {
+      'fwe-focus': focused,
+      'fwe-empty': empty,
+      'fwe-required': required,
+      'fwe-disabled': disabled,
+      'fwe-invalid': error
+    }),
+    onClick: handleClick,
+    ref: ref,
+    onKeyDown: handleKeyDown,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "fwe-select-content",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SelectButtonContent.default, {
+        onClick: onChipClick,
+        label: label,
+        renderLabelContent: renderLabelContent
+      })
+    })
+  });
+});
+var _default = exports.default = SelectButton;

package/node/lib/forms/select/internal/SelectButtonContent.js

@@ -0,0 +1,45 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = SelectButtonContent;
+var _closeSmall = _interopRequireDefault(require("../../../components/icons/close-small.js"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+
+function SelectButtonContent(_ref) {
+  let {
+    label,
+    renderLabelContent,
+    onClick
+  } = _ref;
+  const handleChipClick = chipLabel => e => {
+    e.stopPropagation();
+    onClick(chipLabel);
+  };
+  if (renderLabelContent) {
+    return renderLabelContent(label);
+  }
+  if (Array.isArray(label)) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "fwe-chip-container",
+      children: label.map(v => /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "fwe-chip chip-text-truncate fwe-pr-4",
+        title: v,
+        children: [v, /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: "chip-removable",
+          onClick: handleChipClick(v),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_closeSmall.default, {
+            size: 16
+          })
+        })]
+      }, v))
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: label
+  });
+}

package/node/lib/forms/select/internal/SelectCheckbox.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = SelectCheckbox;
+var _Checkbox = _interopRequireDefault(require("../../checkbox/Checkbox.js"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function SelectCheckbox(_ref) {
+  let {
+    children,
+    withCheckbox,
+    ...props
+  } = _ref;
+  if (withCheckbox) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Checkbox.default, {
+      tabIndex: -1,
+      ...props,
+      children: children
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: children
+  });
+}

package/node/lib/forms/select/internal/SelectLabel.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = SelectLabel;
+var _classnames = _interopRequireDefault(require("classnames"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function SelectLabel(_ref) {
+  let {
+    hideLabel,
+    label,
+    id
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+    className: (0, _classnames.default)('fwe-select-label', {
+      'fwe-sr-only': hideLabel
+    }),
+    htmlFor: id,
+    children: label || ''
+  });
+}