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

package/lib/forms/select/Select.js

@@ -1,294 +1,109 @@
-import classNames from 'classnames';
-import React, { forwardRef, useCallback, useEffect, useRef, useState } from 'react';
+import { forwardRef, useRef } from 'react';
 import ReactDOM from 'react-dom';
-import { usePopper } from 'react-popper';
 import useControlled from "../../helper/useControlled.js";
+import { Wrapper, HiddenInput, SelectButton, OptionsContainer, SelectLabel } from "./internal/index.js";
 import useForkRef from "../../helper/useForkRef.js";
-import ListItem from "./list-item/ListItem.js";
-import calcVirtualScrollHeight from "./utils.js";
+import getChildren from "./internal/utils.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-export const Select = /*#__PURE__*/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] = useState({
-    isFocused: false,
-    action: ''
+  const [value, setValue] = useControlled({
+    controlled,
+    default: defaultValue,
+    onChange
   });
-  const [innerValue, setInnerValue] = useControlled({
-    controlled: value,
-    default: defaultValue
+  const [focused, setFocused] = useControlled({
+    controlled: open,
+    default: defaultOpen,
+    onChange: onOpenChange
   });
+  const buttonEl = useRef(null);
+  const usedOptions = options ?? getChildren(children).childrenList.map(child => child.props.option);
   const innerRef = useRef(null);
   const combinedRef = useForkRef(ref, innerRef);
-  const buttonEl = useRef(null);
-  const childrenList = [];
-  const [popperElement, setPopperElement] = useState(null);
-  const {
-    styles,
-    attributes
-  } = usePopper(innerRef.current, popperElement, {
-    placement: 'bottom-start',
-    modifiers: [{
-      name: 'offset',
-      options: {
-        offset: [0, 3]
-      }
-    }, {
-      name: 'flip',
-      options: {
-        fallbackPlacements: ['bottom-start', 'top-start']
-      }
-    }]
-  });
-  React.Children.forEach(children, element => {
-    if ( /*#__PURE__*/React.isValidElement(element)) {
-      childrenList.push({
-        ...element,
-        props: {
-          ...element.props,
-          className: 'fwe-select-option-content'
-        }
-      });
-    }
-  });
-  const usedOptions = options ?? childrenList.map(child => child.props.option);
-  const listItemRef = useRef(Array.from({
-    length: usedOptions.length
-  }, () => /*#__PURE__*/React.createRef()));
-  const getSelectedOptionLabel = 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 = 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());
-        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 = classNames('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__*/_jsxs(_Fragment, {
-      children: [options && options.map((option, i) => /*#__PURE__*/_jsx(ListItem, {
-        ref: listItemRef.current[i],
-        "aria-selected": option.label === selectedOptionLabel,
-        onClick: () => handleOptionChange(option),
-        empty: !option.label,
-        onKeyDown: e => handleListKeyDown(e, option, i),
-        children: /*#__PURE__*/_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__*/_jsx(ListItem, {
-          ref: listItemRef.current[i],
-          "aria-selected": option.label === selectedOptionLabel,
-          onClick: () => handleOptionChange(option),
-          empty: !option.label,
-          onKeyDown: e => handleListKeyDown(e, option, i),
-          children: /*#__PURE__*/_jsx("span", {
-            ...propsWithoutOption
-          })
-        }, option.data);
-      })]
-    });
-  }
-  return /*#__PURE__*/_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__*/_jsxs(Wrapper, {
+    disabled: disabled,
     ref: combinedRef,
-    className: classNames('fwe-select-wrapper', {
-      'fwe-disabled': disabled
-    }, 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),
+    children: [/*#__PURE__*/_jsx(HiddenInput, {
+      onChange: handleOptionChange,
+      options: usedOptions,
+      value: value
+    }), /*#__PURE__*/_jsx(SelectButton, {
       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 || ''
+      onToggle: () => setFocused(prev => !prev),
+      error: error,
+      disabled: disabled,
+      focused: focused,
+      required: required,
+      onChipClick: removeChip,
+      label: selectedLabel,
+      renderLabelContent: renderLabelContent
+    }), /*#__PURE__*/_jsx(SelectLabel, {
+      hideLabel: config?.hideLabel,
+      label: label,
+      id: id
     }), /*#__PURE__*/_jsx("div", {
       className: "fwe-select-underline"
     }), hint && !error && /*#__PURE__*/_jsx("div", {
       className: "fwe-select-description",
       children: hint
-    }), error && /*#__PURE__*/_jsxs("div", {
+    }), error && /*#__PURE__*/_jsx("div", {
       className: "fwe-select-invalid",
-      children: [" ", error, " "]
-    }), optionsWrapper.isFocused ? /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/_jsxs(_Fragment, {
-      children: [/*#__PURE__*/_jsx("div", {
-        "aria-hidden": true,
-        className: "fr-backdrop",
-        onClick: () => setOptionsWrapper({
-          action: '',
-          isFocused: false
-        })
-      }), /*#__PURE__*/_jsx("ul", {
-        ref: setPopperElement,
-        style: getCssProperies(),
-        ...attributes.popper,
-        className: "fwe-select-options-container",
-        children: scroll?.enabled ? /*#__PURE__*/_jsx("div", {
-          className: "fr-select-scroll",
-          style: {
-            height: calcVirtualScrollHeight(config, usedOptions.length)
-          },
-          children: renderOptions()
-        }) : renderOptions()
-      })]
-    }), document.body) : null]
+      children: error
+    }), focused && /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/_jsx(OptionsContainer, {
+      multiple: multiple,
+      ref: innerRef,
+      config: config,
+      onClose: refocusButton,
+      onOptionChange: handleOptionChange,
+      options: options,
+      label: selectedLabel,
+      children: children
+    }), document.body)]
   });
-});
+}
+const Select = /*#__PURE__*/forwardRef(SelectComponent);
 export default Select;

package/lib/forms/select/internal/HiddenInput.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { SelectOptionType } from '../select-option/SelectOption';
+interface HiddenInputProps<T> {
+    value: any;
+    onChange: (value: SelectOptionType<T>) => void;
+    options: SelectOptionType<T>[];
+}
+export default function HiddenInput<T>({ value, onChange, options }: HiddenInputProps<T>): JSX.Element;
+export {};

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

@@ -0,0 +1,26 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export default 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__*/_jsx("input", {
+    className: "fr-select-input",
+    "aria-hidden": true,
+    tabIndex: -1,
+    value: value,
+    onChange: handleChange
+  });
+}

package/lib/forms/select/internal/ListItem.d.ts

@@ -0,0 +1,18 @@
+import React, { Ref, RefObject } from 'react';
+import { SelectOptionProps, SelectOptionType } from '../select-option/SelectOption';
+export interface ListItemProps<T> extends React.ComponentPropsWithoutRef<'li'> {
+    empty?: boolean;
+    item: SelectOptionType<T> | React.ReactElement<SelectOptionProps<T>>;
+    options: SelectOptionType<T>[];
+    index: number;
+    onOptionChange: (option: SelectOptionType<T>) => void;
+    onFocusChange: (index: number) => void;
+    onClose: () => void;
+    selectedLabel?: string | string[];
+    withCheckbox?: boolean;
+}
+declare function ListItemComponent<T>({ children, className, empty, options, onClose, onOptionChange, index, selectedLabel, item, withCheckbox, onFocusChange, ...restProps }: ListItemProps<T>, ref: Ref<RefObject<HTMLLIElement>[]>): JSX.Element;
+declare const ListItem: <T>(props: ListItemProps<T> & {
+    ref?: React.Ref<React.RefObject<HTMLLIElement>[]> | undefined;
+}) => ReturnType<typeof ListItemComponent>;
+export default ListItem;

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

@@ -0,0 +1,78 @@
+import React, { forwardRef } from 'react';
+import classNames from 'classnames';
+import SelectCheckbox from "./SelectCheckbox.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+function ListItemComponent(_ref, ref) {
+  let {
+    children,
+    className,
+    empty,
+    options,
+    onClose,
+    onOptionChange,
+    index,
+    selectedLabel,
+    item,
+    withCheckbox,
+    onFocusChange,
+    ...restProps
+  } = _ref;
+  const isChild = /*#__PURE__*/React.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__*/_jsx("li", {
+    onClick: () => onOptionChange(option),
+    ref: itemRef,
+    role: "option",
+    onKeyDown: handleKeyDown,
+    "aria-selected": checked,
+    className: classNames('fwe-select-option', {
+      'fwe-empty': !option.label
+    }, className),
+    tabIndex: 0,
+    ...restProps,
+    children: /*#__PURE__*/_jsx(SelectCheckbox, {
+      disabled: option.disabled,
+      onClick: e => e.stopPropagation(),
+      checked: checked,
+      withCheckbox: withCheckbox,
+      children: isChild ? /*#__PURE__*/_jsx("span", {
+        ...propsWithoutOption
+      }) : /*#__PURE__*/_jsx("span", {
+        className: "fwe-select-option-content",
+        "data-testid": "fwe-select-option-content",
+        children: option.label
+      })
+    })
+  });
+}
+const ListItem = /*#__PURE__*/forwardRef(ListItemComponent);
+export default ListItem;

package/lib/forms/select/internal/SelectButton.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+interface SelectButtonProps {
+    onToggle: () => void;
+    focused?: boolean;
+    required: boolean;
+    error?: string;
+    disabled?: boolean;
+    onChipClick: (label: string) => void;
+    label?: string | string[];
+    renderLabelContent?: (label?: string | string[]) => JSX.Element;
+}
+declare const SelectButton: (props: SelectButtonProps & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;
+export default SelectButton;

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

@@ -0,0 +1,57 @@
+import cn from 'classnames';
+import { forwardRef } from 'react';
+import SelectButtonContent from "./SelectButtonContent.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const SelectButton = /*#__PURE__*/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__*/_jsx("div", {
+    role: "button",
+    tabIndex: 0,
+    className: cn('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__*/_jsx("div", {
+      className: "fwe-select-content",
+      children: /*#__PURE__*/_jsx(SelectButtonContent, {
+        onClick: onChipClick,
+        label: label,
+        renderLabelContent: renderLabelContent
+      })
+    })
+  });
+});
+export default SelectButton;

package/lib/forms/select/internal/SelectButtonContent.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+interface SelectButtonContentProps {
+    label?: string | string[];
+    renderLabelContent?: (label?: string | string[]) => JSX.Element;
+    onClick: (label: string) => void;
+}
+export default function SelectButtonContent({ label, renderLabelContent, onClick, }: SelectButtonContentProps): JSX.Element;
+export {};

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

@@ -0,0 +1,39 @@
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+import IconCloseSmall from "../../../components/icons/close-small.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+export default 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__*/_jsx("div", {
+      className: "fwe-chip-container",
+      children: label.map(v => /*#__PURE__*/_jsxs("div", {
+        className: "fwe-chip chip-text-truncate fwe-pr-4",
+        title: v,
+        children: [v, /*#__PURE__*/_jsx("span", {
+          className: "chip-removable",
+          onClick: handleChipClick(v),
+          children: /*#__PURE__*/_jsx(IconCloseSmall, {
+            size: 16
+          })
+        })]
+      }, v))
+    });
+  }
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: label
+  });
+}

package/lib/forms/select/internal/SelectCheckbox.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { CheckboxProps } from '../../checkbox/Checkbox';
+export default function SelectCheckbox({ children, withCheckbox, ...props }: CheckboxProps & {
+    withCheckbox?: boolean;
+}): JSX.Element;

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

@@ -0,0 +1,20 @@
+import Checkbox from "../../checkbox/Checkbox.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+export default function SelectCheckbox(_ref) {
+  let {
+    children,
+    withCheckbox,
+    ...props
+  } = _ref;
+  if (withCheckbox) {
+    return /*#__PURE__*/_jsx(Checkbox, {
+      tabIndex: -1,
+      ...props,
+      children: children
+    });
+  }
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: children
+  });
+}

package/lib/forms/select/internal/SelectLabel.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+interface SelectLabelProps {
+    hideLabel?: boolean;
+    label?: string;
+    id?: string;
+}
+export default function SelectLabel({ hideLabel, label, id }: SelectLabelProps): JSX.Element;
+export {};

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

@@ -0,0 +1,16 @@
+import cn from 'classnames';
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function SelectLabel(_ref) {
+  let {
+    hideLabel,
+    label,
+    id
+  } = _ref;
+  return /*#__PURE__*/_jsx("label", {
+    className: cn('fwe-select-label', {
+      'fwe-sr-only': hideLabel
+    }),
+    htmlFor: id,
+    children: label || ''
+  });
+}