@festo-ui/react 5.0.1 → 5.1.0-dev.164

package/lib/components/snackbar/SnackbarProvider.js

@@ -1,4 +1,4 @@
-import { useMemo, useState } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 import classNames from 'classnames';
 import Snackbar from './Snackbar';
 import SnackbarContext from './SnackbarContext';
@@ -13,7 +13,7 @@ function SnackbarProvider(props) {
     className
   } = props;
   const [snacks, setSnacks] = useState([]);
-  function addSnackbar(snackData, onAction, onClose) {
+  const addSnackbar = useCallback((snackData, onAction, onClose) => {
     const key = snackData.key ?? new Date().getTime() + Math.random();
     setSnacks(prevSnacks => [{
       data: {
@@ -26,7 +26,7 @@ function SnackbarProvider(props) {
       first: prevSnacks.length === 0
     }, ...prevSnacks]);
     return key;
-  }
+  }, [config]);
   function closeSnackbar(key) {
     if (key !== undefined) {
       setSnacks(prevSnacks => prevSnacks.filter(snack => snack.key !== key));
@@ -41,7 +41,7 @@ function SnackbarProvider(props) {
   const contextValue = useMemo(() => ({
     addSnackbar,
     closeSnackbar
-  }), []);
+  }), [addSnackbar]);
   return /*#__PURE__*/_jsxs(SnackbarContext.Provider, {
     value: contextValue,
     children: [children, /*#__PURE__*/_jsx("div", {

package/lib/components/stepper-horizontal/StepperHorizontal.d.ts

@@ -3,5 +3,5 @@ interface StepperHorizontalProps extends Omit<ComponentPropsWithoutRef<'div'>, '
     stepIndex?: number;
     onChange?: (stepIndex: number) => void;
 }
-declare const StepperHorizontal: React.ForwardRefExoticComponent<StepperHorizontalProps & React.RefAttributes<HTMLDivElement>>;
+export declare const StepperHorizontal: (props: StepperHorizontalProps & React.RefAttributes<HTMLDivElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
 export default StepperHorizontal;

package/lib/components/stepper-horizontal/StepperHorizontal.js

@@ -3,7 +3,7 @@ import React, { forwardRef } from 'react';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
-const StepperHorizontal = /*#__PURE__*/forwardRef((_ref, ref) => {
+export const StepperHorizontal = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
     children,
     className,

package/lib/components/stepper-horizontal/step-horizontal/StepHorizontal.d.ts

@@ -3,5 +3,5 @@ import { ComponentPropsWithoutRef } from 'react';
 export interface StepHorizontalProps extends ComponentPropsWithoutRef<'div'> {
     isActive?: boolean;
 }
-declare const StepHorizontal: import("react").ForwardRefExoticComponent<StepHorizontalProps & import("react").RefAttributes<HTMLDivElement>>;
+declare const StepHorizontal: (props: StepHorizontalProps & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;
 export default StepHorizontal;

package/lib/components/stepper-vertical/StepperVertical.d.ts

@@ -3,5 +3,5 @@ interface StepperVerticalProps extends Omit<ComponentPropsWithoutRef<'div'>, 'on
     stepIndex?: number;
     onChange?: (stepIndex: number) => void;
 }
-declare const StepperVertical: React.ForwardRefExoticComponent<StepperVerticalProps & React.RefAttributes<HTMLDivElement>>;
+export declare const StepperVertical: (props: StepperVerticalProps & React.RefAttributes<HTMLDivElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
 export default StepperVertical;

package/lib/components/stepper-vertical/StepperVertical.js

@@ -1,7 +1,7 @@
 import cn from 'classnames';
 import React, { forwardRef } from 'react';
 import { jsx as _jsx } from "react/jsx-runtime";
-const StepperVertical = /*#__PURE__*/forwardRef((_ref, ref) => {
+export const StepperVertical = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
     children,
     className,

package/lib/components/stepper-vertical/step-vertical/StepVertical.d.ts

@@ -8,5 +8,5 @@ interface StepVerticalProps extends ComponentPropsWithoutRef<'div'> {
     title?: string;
     onStepClick?: () => void;
 }
-declare const StepVertical: import("react").ForwardRefExoticComponent<StepVerticalProps & import("react").RefAttributes<HTMLDivElement>>;
+declare const StepVertical: (props: StepVerticalProps & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;
 export default StepVertical;

package/lib/components/tab/Tabs.d.ts

@@ -19,5 +19,5 @@ interface TabsProps extends Omit<ComponentPropsWithoutRef<'div'>, 'onChange'> {
         current: string;
     }) => void;
 }
-declare const Tabs: React.ForwardRefExoticComponent<TabsProps & React.RefAttributes<HTMLDivElement>>;
+declare const Tabs: (props: TabsProps & React.RefAttributes<HTMLDivElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
 export default Tabs;

package/lib/components/tab/Tabs.js

@@ -2,6 +2,9 @@ import classNames from 'classnames';
 import React, { forwardRef, isValidElement, useEffect, useRef, useState } from 'react';
 import useForkRef from '../../helper/useForkRef';
 import useTabScroll from './useTabScroll';
+
+// legacy: recommended for desktop only applications
+// responsive: desktop, tablet, mobile with scrollable tabs
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";

package/lib/components/tab/useTabScroll.js

@@ -2,7 +2,6 @@ import { useState } from 'react';
 
 // provides details about the left and right edges of the tab element and the tab content element
 // these values are used to determine the visual position of the tab with respect of its parent container
-
 const useTabScroll = (tabLength, componentId, refs) => {
   const {
     elRef,

package/lib/components/table-header-cell/TableHeaderCell.d.ts

@@ -3,5 +3,5 @@ export interface TableHeaderCellProps extends React.ThHTMLAttributes<HTMLTableCe
     active?: boolean;
     ascending: boolean;
 }
-declare const TableHeaderCell: import("react").ForwardRefExoticComponent<TableHeaderCellProps & import("react").RefAttributes<HTMLTableHeaderCellElement>>;
+declare const TableHeaderCell: (props: TableHeaderCellProps & import("react").RefAttributes<HTMLTableCellElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;
 export default TableHeaderCell;

package/lib/components/table-header-cell/TableHeaderCell.js

@@ -1,7 +1,13 @@
 import classNames from 'classnames';
 import { forwardRef } from 'react';
 import { jsx as _jsx } from "react/jsx-runtime";
-const TableHeaderCell = /*#__PURE__*/forwardRef((props, ref) => {
+const TableHeaderCell = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    active,
+    ascending,
+    className,
+    ...props
+  } = _ref;
   function handleClick(event) {
     if (props.onClick) {
       props.onClick(event);
@@ -10,10 +16,10 @@ const TableHeaderCell = /*#__PURE__*/forwardRef((props, ref) => {
   return /*#__PURE__*/_jsx("th", {
     ...props,
     className: classNames('fwe-table-order', {
-      'fwe-active': props.active
+      'fwe-active': active
     }, {
-      'fwe-table-order-descending': !props.ascending
-    }, props.className),
+      'fwe-table-order-descending': !ascending
+    }, className),
     onClick: handleClick,
     ref: ref
   });

package/lib/forms/checkbox/Checkbox.d.ts

@@ -1,9 +1,10 @@
-import React from 'react';
 import './Checkbox.scss';
+import React from 'react';
 export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'> {
     id: string;
-    checked: boolean;
-    onChange: (value: boolean) => void;
+    checked?: boolean;
+    defaultChecked?: boolean;
+    onChange?: (value: boolean, e: React.ChangeEvent<HTMLInputElement>) => void;
     name?: string;
     large?: boolean;
     valid?: boolean;
@@ -12,5 +13,5 @@ export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputE
     disabled?: boolean;
     indeterminate?: boolean;
 }
-declare function Checkbox({ id, checked, onChange, name, large, valid, labelPosition, required, disabled, indeterminate, children, className, ...props }: CheckboxProps): JSX.Element;
+declare function Checkbox({ id, checked: checkedProp, defaultChecked, onChange, name, large, valid, labelPosition, required, disabled, indeterminate, children, className, ...props }: CheckboxProps): JSX.Element;
 export default Checkbox;

package/lib/forms/checkbox/Checkbox.js

@@ -1,11 +1,13 @@
-import React, { useState, useEffect } from 'react';
 import classNames from 'classnames';
+import React from 'react';
+import useControlled from '../../helper/useControlled';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 function Checkbox(_ref) {
   let {
     id,
-    checked,
+    checked: checkedProp,
+    defaultChecked,
     onChange,
     name,
     large = false,
@@ -18,19 +20,14 @@ function Checkbox(_ref) {
     className,
     ...props
   } = _ref;
-  const [isChecked, setChecked] = useState(checked);
-  const [isIndeterminate, setIndeterminate] = useState(indeterminate);
-  useEffect(() => {
-    setChecked(checked);
-    setIndeterminate(indeterminate);
-  }, [checked, indeterminate]);
-  const handleChange = () => {
+  const [isChecked, setChecked] = useControlled({
+    controlled: checkedProp,
+    default: defaultChecked
+  });
+  const handleChange = e => {
     const newChecked = !isChecked;
-    if (indeterminate) {
-      setIndeterminate(false);
-    }
     setChecked(newChecked);
-    onChange(newChecked);
+    onChange?.(newChecked, e);
   };
   const containerClasses = classNames('fwe-checkbox-container', {
     'fr-checkbox-large': large
@@ -45,7 +42,7 @@ function Checkbox(_ref) {
   }, {
     'fwe-label-before': labelPosition === 'before'
   }, {
-    'fr-checkbox-indeterminate': isIndeterminate
+    'fr-checkbox-indeterminate': indeterminate
   }, className);
   return /*#__PURE__*/_jsxs("label", {
     className: containerClasses,
@@ -55,13 +52,14 @@ function Checkbox(_ref) {
       type: "checkbox",
       id: id,
       disabled: disabled,
-      onChange: () => handleChange(),
-      ...props
+      onChange: e => handleChange(e),
+      ...props,
+      checked: isChecked
     }), /*#__PURE__*/_jsxs("div", {
       className: "fwe-checkbox-indicator-container",
       children: [/*#__PURE__*/_jsx("div", {
         className: "fwe-checkbox-indicator-background"
-      }), !isIndeterminate && isChecked && (large ? /*#__PURE__*/_jsx("svg", {
+      }), !indeterminate && isChecked && (large ? /*#__PURE__*/_jsx("svg", {
         width: "24px",
         height: "24px",
         children: /*#__PURE__*/_jsx("path", {
@@ -76,7 +74,7 @@ function Checkbox(_ref) {
           d: "M6 12L3 9l1.25-1.25L6 9.5l5.75-5.75L13 5l-7 7z",
           fill: "#fff"
         })
-      })), isIndeterminate && !isChecked && /*#__PURE__*/_jsx("div", {
+      })), indeterminate && /*#__PURE__*/_jsx("div", {
         className: "fwe-indeterminate-indicator"
       })]
     }), /*#__PURE__*/_jsx("div", {

package/lib/forms/radio/RadioGroup.js

@@ -22,7 +22,7 @@ function RadioGroup(_ref) {
     large,
     disabled,
     required
-  }), []);
+  }), [checked, disabled, labelPosition, large, name, required, value]);
   return /*#__PURE__*/_jsx(RadioGroupContext.Provider, {
     value: contextValue,
     children: /*#__PURE__*/_jsx("div", {

package/lib/forms/select/Select.d.ts

@@ -1,13 +1,7 @@
-import React, { ComponentPropsWithoutRef } from 'react';
 import './Select.scss';
+import React, { ComponentPropsWithoutRef } from 'react';
+import { SelectConfiguration } from '../../helper/types';
 import { SelectOptionType } from './select-option/SelectOption';
-interface Configuration {
-    hideLabel?: boolean;
-    scroll?: {
-        enabled?: boolean;
-        viewportSize?: number;
-    };
-}
 export interface SelectProps extends Omit<ComponentPropsWithoutRef<'div'>, 'onChange'> {
     defaultValue?: any;
     value?: any;
@@ -15,12 +9,12 @@ export interface SelectProps extends Omit<ComponentPropsWithoutRef<'div'>, 'onCh
     options?: SelectOptionType[];
     required?: boolean;
     onChange?: (value: any) => void;
-    config?: Configuration;
+    config?: SelectConfiguration;
     disabled?: boolean;
     name?: string;
     id?: string;
     hint?: string;
     error?: string;
 }
-declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLDivElement>>;
+declare const Select: (props: SelectProps & React.RefAttributes<HTMLDivElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
 export default Select;

package/lib/forms/select/Select.js

@@ -1,30 +1,16 @@
-import React, { useState, useEffect, useRef, useCallback, forwardRef } from 'react';
-import OutsideClickHandler from 'react-outside-click-handler';
 import classNames from 'classnames';
-import { SelectOption } from './select-option/SelectOption';
+import React, { forwardRef, useCallback, useEffect, useRef, useState } from 'react';
+import useControlled from '../../helper/useControlled';
+import useForkRef from '../../helper/useForkRef';
+import useOnClickOutside from '../../helper/useOnClickOutside';
+import ListItem from './list-item/ListItem';
+import calcVirtualScrollHeight from './utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-function calcVirtualScrollHeight(config, itemLength) {
-  const defaultHeight = 48;
-  let height = defaultHeight;
-  if (itemLength === 2) {
-    height = defaultHeight * 2;
-  } else if (itemLength >= 3) {
-    height = defaultHeight * 3;
-  }
-  if (config?.scroll?.viewportSize != null && config.scroll.viewportSize !== undefined) {
-    if (itemLength >= config.scroll.viewportSize) {
-      height = config.scroll.viewportSize * defaultHeight;
-    } else if (itemLength < config.scroll.viewportSize) {
-      height = itemLength * defaultHeight;
-    }
-  }
-  return height;
-}
 const Select = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
-    defaultValue,
+    defaultValue = '',
     value,
     label,
     options,
@@ -44,8 +30,12 @@ const Select = /*#__PURE__*/forwardRef((_ref, ref) => {
     isFocused: false,
     action: ''
   });
-  const controlled = value !== undefined;
-  const [innerValue, setInnerValue] = useState(controlled ? value : defaultValue);
+  const [innerValue, setInnerValue] = useControlled({
+    controlled: value,
+    default: defaultValue
+  });
+  const innerRef = useRef(null);
+  const combinedRef = useForkRef(ref, innerRef);
   const buttonEl = useRef(null);
   const childrenList = [];
   React.Children.forEach(children, element => {
@@ -63,17 +53,7 @@ const Select = /*#__PURE__*/forwardRef((_ref, ref) => {
   const listItemRef = useRef(Array.from({
     length: usedOptions.length
   }, () => /*#__PURE__*/React.createRef()));
-  useEffect(() => {
-    if (controlled) {
-      setInnerValue(value);
-    }
-  }, [value, controlled]);
-  const getSelectedOptionLabel = useCallback(() => {
-    if (innerValue !== undefined) {
-      return usedOptions.find(option => option.data === innerValue)?.label;
-    }
-    return undefined;
-  }, [usedOptions, innerValue]);
+  const getSelectedOptionLabel = useCallback(() => usedOptions.find(option => option.data === innerValue)?.label, [usedOptions, innerValue]);
   const scroll = config?.scroll;
   function handleButtonFocus(blur) {
     if (buttonEl && buttonEl.current) {
@@ -84,30 +64,31 @@ const Select = /*#__PURE__*/forwardRef((_ref, ref) => {
       }
     }
   }
-  const focusNextElement = nextIndex => {
+  const focusNextElement = useCallback(nextIndex => {
     if (listItemRef && listItemRef.current) {
       const nextItem = listItemRef.current[nextIndex].current;
       if (nextItem !== null) {
         nextItem.focus();
       }
     }
-  };
+  }, []);
+  const handleKeyAction = useCallback(index => {
+    if (index >= 0) {
+      focusNextElement(index);
+    }
+  }, [focusNextElement]);
   useEffect(() => {
     if (optionsWrapper.isFocused) {
       if (optionsWrapper.action === 'key') {
         const index = usedOptions.findIndex(option => option.label === getSelectedOptionLabel());
-        if (index >= 0) {
-          focusNextElement(index);
-        }
+        handleKeyAction(index);
       } else if (optionsWrapper.action === 'click') {
         handleButtonFocus(true);
       }
     }
-  }, [optionsWrapper, usedOptions, innerValue, getSelectedOptionLabel]);
+  }, [optionsWrapper, usedOptions, innerValue, getSelectedOptionLabel, handleKeyAction]);
   const handleOptionChange = newOption => {
-    if (!controlled) {
-      setInnerValue(newOption.data);
-    }
+    setInnerValue(newOption.data);
     if (onChange) {
       onChange(newOption.data);
     }
@@ -119,28 +100,23 @@ const Select = /*#__PURE__*/forwardRef((_ref, ref) => {
       buttonEl.current.focus();
     }
   };
-  const handleListKeyDown = (event, option, index) => {
+  const handleListKeyDown = (e, option, index) => {
     const arrowKeys = ['ArrowDown', 'ArrowUp'];
     const validKeys = ['Enter', ' '];
-    if (arrowKeys.concat(validKeys).includes(event.key)) {
-      event.preventDefault();
+    if (arrowKeys.concat(validKeys).includes(e.key)) {
+      e.preventDefault();
     }
-    if (event.key === 'ArrowDown') {
+    if (e.key === 'ArrowDown') {
       focusNextElement((index + 1) % usedOptions.length);
     }
-    if (event.key === 'ArrowUp') {
-      event.preventDefault();
-      let nextIndex = (index - 1) % usedOptions.length;
-      if (nextIndex < 0) {
-        nextIndex += usedOptions.length;
-      }
+    if (e.key === 'ArrowUp') {
+      const nextIndex = (index - 1 + usedOptions.length) % usedOptions.length;
       focusNextElement(nextIndex);
     }
-    if (validKeys.includes(event.key)) {
+    if (validKeys.includes(e.key)) {
       handleOptionChange(option);
-      event.preventDefault();
     }
-    if (event.key === 'Escape') {
+    if (e.key === 'Escape') {
       setOptionsWrapper(prevOptionsWrapper => ({
         ...prevOptionsWrapper,
         isFocused: false
@@ -169,6 +145,16 @@ const Select = /*#__PURE__*/forwardRef((_ref, ref) => {
       }));
     }
   };
+  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 selectedOptionLabel = getSelectedOptionLabel();
   const selectClassName = classNames('fwe-select', {
     'fwe-focus': optionsWrapper.isFocused
@@ -183,16 +169,12 @@ const Select = /*#__PURE__*/forwardRef((_ref, ref) => {
   });
   function renderOptions() {
     return /*#__PURE__*/_jsxs(_Fragment, {
-      children: [options && options.map((option, i) => /*#__PURE__*/_jsx("li", {
+      children: [options && options.map((option, i) => /*#__PURE__*/_jsx(ListItem, {
         ref: listItemRef.current[i],
-        role: "option",
         "aria-selected": option.label === selectedOptionLabel,
         onClick: () => handleOptionChange(option),
-        className: classNames('fwe-select-option', {
-          'fwe-empty': !option.label
-        }),
+        empty: !option.label,
         onKeyDown: e => handleListKeyDown(e, option, i),
-        tabIndex: 0,
         children: /*#__PURE__*/_jsx("span", {
           className: "fwe-select-option-content",
           children: option.label
@@ -202,80 +184,68 @@ const Select = /*#__PURE__*/forwardRef((_ref, ref) => {
           option,
           ...propsWithoutOption
         } = child.props;
-        return /*#__PURE__*/_jsx("li", {
+        return /*#__PURE__*/_jsx(ListItem, {
           ref: listItemRef.current[i],
-          role: "option",
           "aria-selected": option.label === selectedOptionLabel,
           onClick: () => handleOptionChange(option),
-          className: classNames('fwe-select-option', {
-            'fwe-empty': !option.label
-          }),
+          empty: !option.label,
           onKeyDown: e => handleListKeyDown(e, option, i),
-          tabIndex: 0,
-          children: /*#__PURE__*/_jsx(SelectOption, {
+          children: /*#__PURE__*/_jsx("span", {
             ...propsWithoutOption
           })
         }, option.data);
       })]
     });
   }
-  return /*#__PURE__*/_jsx(OutsideClickHandler, {
-    onOutsideClick: () => setOptionsWrapper({
-      action: '',
-      isFocused: false
-    }),
-    children: /*#__PURE__*/_jsxs("div", {
-      ref: ref,
-      className: classNames('fwe-select-wrapper', className),
-      ...props,
-      children: [/*#__PURE__*/_jsx("select", {
-        defaultValue: defaultValue,
-        value: innerValue,
-        name: name,
-        id: id,
-        "aria-label": label,
-        disabled: disabled,
-        required: required,
-        children: usedOptions.map(option => /*#__PURE__*/_jsx("option", {
-          value: option.data,
-          children: option.label
-        }, option.data))
-      }), /*#__PURE__*/_jsx("div", {
-        role: "button",
-        tabIndex: 0,
-        className: selectClassName,
-        onClick: e => handleClick(e),
-        ref: buttonEl,
-        onKeyDown: handleKeyPress,
-        children: /*#__PURE__*/_jsx("div", {
-          className: "fwe-select-content",
-          children: selectedOptionLabel
-        })
-      }), /*#__PURE__*/_jsx("label", {
-        className: classNames('fwe-select-label', {
-          'fwe-sr-only': config?.hideLabel
-        }),
-        htmlFor: id,
-        children: label || ''
-      }), /*#__PURE__*/_jsx("div", {
-        className: "fwe-select-underline"
-      }), hint && !error && /*#__PURE__*/_jsx("div", {
-        className: "fwe-select-description",
-        children: hint
-      }), error && /*#__PURE__*/_jsxs("div", {
-        className: "fwe-select-invalid",
-        children: [" ", error, " "]
-      }), /*#__PURE__*/_jsx("ul", {
-        className: `fwe-select-options-container${optionsWrapper.isFocused ? '' : ' fwe-d-none'}`,
-        children: scroll?.enabled ? /*#__PURE__*/_jsx("div", {
-          className: "fr-select-scroll",
-          style: {
-            height: calcVirtualScrollHeight(config, usedOptions.length)
-          },
-          children: renderOptions()
-        }) : renderOptions()
-      })]
-    })
+  useOnClickOutside(innerRef, () => setOptionsWrapper({
+    action: '',
+    isFocused: false
+  }));
+  return /*#__PURE__*/_jsxs("div", {
+    ref: combinedRef,
+    className: classNames('fwe-select-wrapper', className),
+    ...props,
+    children: [/*#__PURE__*/_jsx("input", {
+      className: "fr-select-input",
+      "aria-hidden": true,
+      tabIndex: -1,
+      value: innerValue,
+      onChange: e => handleChange(e)
+    }), /*#__PURE__*/_jsx("div", {
+      role: "button",
+      tabIndex: 0,
+      className: selectClassName,
+      onClick: e => handleClick(e),
+      ref: buttonEl,
+      onKeyDown: handleKeyPress,
+      children: /*#__PURE__*/_jsx("div", {
+        className: "fwe-select-content",
+        children: selectedOptionLabel
+      })
+    }), /*#__PURE__*/_jsx("label", {
+      className: classNames('fwe-select-label', {
+        'fwe-sr-only': config?.hideLabel
+      }),
+      htmlFor: id,
+      children: label || ''
+    }), /*#__PURE__*/_jsx("div", {
+      className: "fwe-select-underline"
+    }), hint && !error && /*#__PURE__*/_jsx("div", {
+      className: "fwe-select-description",
+      children: hint
+    }), error && /*#__PURE__*/_jsxs("div", {
+      className: "fwe-select-invalid",
+      children: [" ", error, " "]
+    }), /*#__PURE__*/_jsx("ul", {
+      className: `fwe-select-options-container${optionsWrapper.isFocused ? '' : ' fwe-d-none'}`,
+      children: scroll?.enabled ? /*#__PURE__*/_jsx("div", {
+        className: "fr-select-scroll",
+        style: {
+          height: calcVirtualScrollHeight(config, usedOptions.length)
+        },
+        children: renderOptions()
+      }) : renderOptions()
+    })]
   });
 });
 export default Select;

package/lib/forms/select/list-item/ListItem.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export interface ListItemProps extends React.ComponentPropsWithoutRef<'li'> {
+    empty?: boolean;
+}
+declare const ListItem: (props: ListItemProps & React.RefAttributes<HTMLLIElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
+export default ListItem;

package/lib/forms/select/list-item/ListItem.js

@@ -0,0 +1,24 @@
+import cn from 'classnames';
+import React, { forwardRef } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+const ListItem = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    children,
+    className,
+    "aria-selected": ariaSelected,
+    empty,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/_jsx("li", {
+    ref: ref,
+    role: "option",
+    "aria-selected": ariaSelected,
+    className: cn('fwe-select-option', {
+      'fwe-empty': empty
+    }, className),
+    tabIndex: 0,
+    ...props,
+    children: children
+  });
+});
+export default ListItem;