@festo-ui/react 4.0.3-pre-20221213.1 → 5.0.0-dev.46

package/lib/forms/segment/segment-control/SegmentControl.js

@@ -0,0 +1,64 @@
+import React, { useRef } from 'react';
+import classNames from 'classnames';
+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 SegmentControl(props) {
+  const {
+    label,
+    checked,
+    disabled,
+    name,
+    value,
+    icon,
+    onChange,
+    iconOnly,
+    id,
+    className
+  } = props;
+  const componentId = useRef(id ?? (Math.random() * Date.now()).toString().replace('.', '-'));
+  let viewMode = 'text';
+  if (icon) {
+    viewMode = iconOnly ? 'icon' : 'icon-text';
+  }
+  const prefix = 'fwe-icon-';
+  let innerIcon = icon;
+  if (icon && icon.indexOf(prefix) === -1) {
+    innerIcon = prefix + icon;
+  }
+  const handleChange = event => {
+    if (onChange) {
+      onChange(event, value);
+    }
+  };
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx("input", {
+      className: "fwe-segment-input",
+      type: "radio",
+      id: componentId.current,
+      name: name,
+      value: value,
+      checked: checked,
+      disabled: disabled,
+      onChange: e => handleChange(e)
+    }), /*#__PURE__*/_jsxs("label", {
+      className: classNames('fwe-segment-label', className),
+      htmlFor: componentId.current,
+      children: [viewMode === 'icon' && /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx("span", {
+          className: "fwe-sr-only",
+          children: label
+        }), /*#__PURE__*/_jsx("i", {
+          "aria-hidden": "true",
+          className: classNames('fwe-icon', innerIcon)
+        })]
+      }), viewMode === 'text' && label, viewMode === 'icon-text' && /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx("i", {
+          "aria-hidden": "true",
+          className: classNames('fwe-icon', innerIcon)
+        }), label]
+      })]
+    })]
+  });
+}
+export default SegmentControl;

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

@@ -1,26 +1,26 @@
-import React, { ComponentPropsWithoutRef } from 'react';
-import './Select.scss';
-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;
-    label?: string;
-    options?: SelectOptionType[];
-    required?: boolean;
-    onChange?: (value: any) => void;
-    config?: Configuration;
-    disabled?: boolean;
-    name?: string;
-    id?: string;
-    hint?: string;
-    error?: string;
-}
-export declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLDivElement>>;
-export default Select;
+import React, { ComponentPropsWithoutRef } from 'react';
+import './Select.scss';
+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;
+    label?: string;
+    options?: SelectOptionType[];
+    required?: boolean;
+    onChange?: (value: any) => void;
+    config?: Configuration;
+    disabled?: boolean;
+    name?: string;
+    id?: string;
+    hint?: string;
+    error?: string;
+}
+declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLDivElement>>;
+export default Select;

package/lib/forms/select/Select.js

@@ -0,0 +1,281 @@
+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 { 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,
+    value,
+    label,
+    options,
+    onChange,
+    required = false,
+    config,
+    disabled,
+    className,
+    name,
+    id,
+    children,
+    hint,
+    error,
+    ...props
+  } = _ref;
+  const [optionsWrapper, setOptionsWrapper] = useState({
+    isFocused: false,
+    action: ''
+  });
+  const controlled = value !== undefined;
+  const [innerValue, setInnerValue] = useState(controlled ? value : defaultValue);
+  const buttonEl = useRef(null);
+  const childrenList = [];
+  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()));
+  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 scroll = config?.scroll;
+  function handleButtonFocus(blur) {
+    if (buttonEl && buttonEl.current) {
+      if (blur) {
+        buttonEl.current.blur();
+      } else {
+        buttonEl.current.focus();
+      }
+    }
+  }
+  const focusNextElement = nextIndex => {
+    if (listItemRef && listItemRef.current) {
+      const nextItem = listItemRef.current[nextIndex].current;
+      if (nextItem !== null) {
+        nextItem.focus();
+      }
+    }
+  };
+  useEffect(() => {
+    if (optionsWrapper.isFocused) {
+      if (optionsWrapper.action === 'key') {
+        const index = usedOptions.findIndex(option => option.label === getSelectedOptionLabel());
+        if (index >= 0) {
+          focusNextElement(index);
+        }
+      } else if (optionsWrapper.action === 'click') {
+        handleButtonFocus(true);
+      }
+    }
+  }, [optionsWrapper, usedOptions, innerValue, getSelectedOptionLabel]);
+  const handleOptionChange = newOption => {
+    if (!controlled) {
+      setInnerValue(newOption.data);
+    }
+    if (onChange) {
+      onChange(newOption.data);
+    }
+    setOptionsWrapper(prevOptionsWrapper => ({
+      ...prevOptionsWrapper,
+      isFocused: false
+    }));
+    if (buttonEl && buttonEl.current) {
+      buttonEl.current.focus();
+    }
+  };
+  const handleListKeyDown = (event, option, index) => {
+    const arrowKeys = ['ArrowDown', 'ArrowUp'];
+    const validKeys = ['Enter', ' '];
+    if (arrowKeys.concat(validKeys).includes(event.key)) {
+      event.preventDefault();
+    }
+    if (event.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;
+      }
+      focusNextElement(nextIndex);
+    }
+    if (validKeys.includes(event.key)) {
+      handleOptionChange(option);
+      event.preventDefault();
+    }
+    if (event.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 handleClick = e => {
+    e.stopPropagation();
+    if (!disabled) {
+      setOptionsWrapper(prevOptionsWrapper => ({
+        action: '',
+        isFocused: !prevOptionsWrapper.isFocused
+      }));
+    }
+  };
+  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 renderOptions() {
+    return /*#__PURE__*/_jsxs(_Fragment, {
+      children: [options && options.map((option, i) => /*#__PURE__*/_jsx("li", {
+        ref: listItemRef.current[i],
+        role: "option",
+        "aria-selected": option.label === selectedOptionLabel,
+        onClick: () => handleOptionChange(option),
+        className: classNames('fwe-select-option', {
+          'fwe-empty': !option.label
+        }),
+        onKeyDown: e => handleListKeyDown(e, option, i),
+        tabIndex: 0,
+        children: /*#__PURE__*/_jsx("span", {
+          className: "fwe-select-option-content",
+          children: option.label
+        })
+      }, option.data)), childrenList.map((child, i) => {
+        const {
+          option,
+          ...propsWithoutOption
+        } = child.props;
+        return /*#__PURE__*/_jsx("li", {
+          ref: listItemRef.current[i],
+          role: "option",
+          "aria-selected": option.label === selectedOptionLabel,
+          onClick: () => handleOptionChange(option),
+          className: classNames('fwe-select-option', {
+            'fwe-empty': !option.label
+          }),
+          onKeyDown: e => handleListKeyDown(e, option, i),
+          tabIndex: 0,
+          children: /*#__PURE__*/_jsx(SelectOption, {
+            ...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()
+      })]
+    })
+  });
+});
+export default Select;

package/lib/forms/select/select-option/SelectOption.d.ts

@@ -1,10 +1,10 @@
-import React from 'react';
-export interface SelectOptionType {
-    label: string;
-    data: any;
-}
-interface SelectOptionProps extends React.ComponentPropsWithoutRef<'span'> {
-    option: SelectOptionType;
-}
-export declare const SelectOption: React.ForwardRefExoticComponent<SelectOptionProps & React.RefAttributes<HTMLDivElement>>;
-export default SelectOption;
+import React from 'react';
+export interface SelectOptionType {
+    label: string;
+    data: any;
+}
+interface SelectOptionProps extends React.ComponentPropsWithoutRef<'span'> {
+    option: SelectOptionType;
+}
+export declare const SelectOption: React.ForwardRefExoticComponent<SelectOptionProps & React.RefAttributes<HTMLDivElement>>;
+export default SelectOption;

package/lib/forms/select/select-option/SelectOption.js

@@ -0,0 +1,16 @@
+import React, { forwardRef } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const SelectOption = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    children,
+    className,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/_jsx("span", {
+    ref: ref,
+    className: className,
+    ...props,
+    children: children
+  });
+});
+export default SelectOption;

package/lib/forms/slider/Slider.d.ts

@@ -1,17 +1,18 @@
-import React from 'react';
-import { ClassNameProps } from '../../helper/types';
-import './Slider.scss';
-interface SliderProps extends ClassNameProps {
-    disabled?: boolean;
-    min: number;
-    max: number;
-    step?: number;
-    value: number;
-    onChangeCommitted?: (value: number) => void;
-    label?: string;
-    large?: boolean;
-    showValue?: boolean;
-    onChange?: (event: React.ChangeEvent<HTMLInputElement>, value: number) => void;
-}
-declare function Slider({ disabled, label, large, max, min, onChange, onChangeCommitted, step, value, showValue, className }: SliderProps): JSX.Element;
-export default Slider;
+import React from 'react';
+import { ClassNameProps } from '../../helper/types';
+import './Slider.scss';
+interface SliderProps extends ClassNameProps {
+    disabled?: boolean;
+    min: number;
+    max: number;
+    step?: number;
+    value: number;
+    onChangeCommitted?: (value: number) => void;
+    label?: string;
+    large?: boolean;
+    showValue?: boolean;
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>, value: number) => void;
+    id?: string;
+}
+declare function Slider({ disabled, label, large, max, min, onChange, onChangeCommitted, step, value, showValue, className, id: idProps, }: SliderProps): JSX.Element;
+export default Slider;

package/lib/forms/slider/Slider.js

@@ -0,0 +1,92 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import classNames from 'classnames';
+import useId from '../../helper/useId';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+function Slider(_ref) {
+  let {
+    disabled = false,
+    label,
+    large = false,
+    max,
+    min,
+    onChange,
+    onChangeCommitted,
+    step,
+    value,
+    showValue = true,
+    className,
+    id: idProps
+  } = _ref;
+  const id = useId(idProps);
+  const [innerValue, setInnerValue] = useState(value);
+  const [left, setLeft] = useState(null);
+  const labelEl = useRef(null);
+  const classes = classNames('fwe-slider', {
+    'fwe-slider-lg': large
+  }, {
+    'fr-slider-label': label !== null && showValue
+  }, className);
+  useEffect(() => {
+    setInnerValue(value);
+  }, [value]);
+  const updateValuePosition = useCallback(() => {
+    if (labelEl.current) {
+      const {
+        width
+      } = labelEl.current.getBoundingClientRect();
+      const diff = max - min;
+      setLeft((innerValue - min) / diff * (width - 16));
+    }
+  }, [innerValue, max, min]);
+  const handleAfterChange = () => {
+    if (onChangeCommitted) {
+      onChangeCommitted(innerValue);
+    }
+  };
+  const handleChange = e => {
+    const newValue = Number.parseFloat(e.target.value);
+    setInnerValue(newValue);
+    if (onChange) {
+      onChange(e, newValue);
+    }
+  };
+  useEffect(() => {
+    function handleResize() {
+      updateValuePosition();
+    }
+    window.addEventListener('resize', handleResize);
+    handleResize();
+
+    // Remove event listener on cleanup
+    return () => window.removeEventListener('resize', handleResize);
+  }, [updateValuePosition]);
+  return /*#__PURE__*/_jsxs("label", {
+    ref: labelEl,
+    className: classes,
+    htmlFor: id,
+    children: [label && /*#__PURE__*/_jsx("span", {
+      children: label
+    }), /*#__PURE__*/_jsx("input", {
+      id: id,
+      className: "fwe-slider-input",
+      type: "range",
+      disabled: disabled,
+      min: min,
+      max: max,
+      step: step,
+      onChange: handleChange,
+      value: innerValue,
+      onKeyUp: handleAfterChange,
+      onMouseUp: handleAfterChange,
+      onTouchEnd: handleAfterChange
+    }), showValue && left !== null && /*#__PURE__*/_jsx("span", {
+      className: "fr-slider-value",
+      style: {
+        left: `${left}px`
+      },
+      children: innerValue
+    })]
+  });
+}
+export default Slider;

package/lib/forms/switch/Switch.d.ts

@@ -1,12 +1,13 @@
-/// <reference types="react" />
-import { ClassNameProps } from '../../helper/types';
-export interface SwitchProps extends ClassNameProps {
-    labelPosition?: 'before' | 'after' | 'below';
-    large?: boolean;
-    title: string;
-    value: boolean;
-    disabled?: boolean;
-    onChange?: (value: boolean) => void;
-}
-declare function Switch({ labelPosition, large, title, value, disabled, onChange, className }: SwitchProps): JSX.Element;
-export default Switch;
+/// <reference types="react" />
+import { ClassNameProps } from '../../helper/types';
+export interface SwitchProps extends ClassNameProps {
+    labelPosition?: 'before' | 'after' | 'below';
+    large?: boolean;
+    title: string;
+    value: boolean;
+    disabled?: boolean;
+    onChange?: (value: boolean) => void;
+    id?: string;
+}
+declare function Switch({ labelPosition, large, title, value, disabled, onChange, className, id: idProps, }: SwitchProps): JSX.Element;
+export default Switch;

package/lib/forms/switch/Switch.js

@@ -0,0 +1,51 @@
+import { useState, useEffect } from 'react';
+import classNames from 'classnames';
+import useId from '../../helper/useId';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+function Switch(_ref) {
+  let {
+    labelPosition = 'before',
+    large = false,
+    title,
+    value,
+    disabled = false,
+    onChange,
+    className,
+    id: idProps
+  } = _ref;
+  const id = useId(idProps);
+  const labelClassName = classNames('fwe-switch', {
+    [`fwe-switch-label-${labelPosition}`]: true
+  }, {
+    'fwe-switch-lg': large
+  }, className);
+  const [currentValue, setCurrentValue] = useState(value);
+  useEffect(() => {
+    setCurrentValue(value);
+  }, [value]);
+  const handleChange = () => {
+    const newValue = !currentValue;
+    setCurrentValue(newValue);
+    if (onChange) {
+      onChange(newValue);
+    }
+  };
+  return /*#__PURE__*/_jsxs("label", {
+    className: labelClassName,
+    htmlFor: id,
+    children: [/*#__PURE__*/_jsx("input", {
+      type: "checkbox",
+      disabled: disabled,
+      checked: currentValue,
+      onChange: () => handleChange(),
+      id: id
+    }), /*#__PURE__*/_jsx("div", {
+      className: "fwe-switch-track"
+    }), /*#__PURE__*/_jsx("div", {
+      className: "fwe-switch-label-content",
+      children: title
+    })]
+  });
+}
+export default Switch;

package/lib/forms/text-area/TextArea.d.ts

@@ -1,21 +1,22 @@
-import React from 'react';
-import { ClassNameProps } from '../../helper/types';
-import './TextArea.scss';
-interface TextAreaProps extends ClassNameProps {
-    disabled?: boolean;
-    required?: boolean;
-    readonly?: boolean;
-    onChange?: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;
-    onFocus?: (event: React.FocusEvent<HTMLTextAreaElement>) => void;
-    onInput?: (event: React.FormEvent<HTMLTextAreaElement>) => void;
-    onBlur?: (event: React.FocusEvent<HTMLTextAreaElement>) => void;
-    label: string;
-    hint?: string;
-    error?: string;
-    value?: string;
-    defaultValue?: string;
-    rows?: number;
-    maxLength: number;
-}
-declare function TextArea({ disabled, onBlur, onChange, onFocus, onInput, readonly, required, label, error, hint, value, rows, maxLength, className, defaultValue }: TextAreaProps): JSX.Element;
-export default TextArea;
+import React from 'react';
+import { ClassNameProps } from '../../helper/types';
+import './TextArea.scss';
+interface TextAreaProps extends ClassNameProps {
+    disabled?: boolean;
+    required?: boolean;
+    readonly?: boolean;
+    onChange?: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;
+    onFocus?: (event: React.FocusEvent<HTMLTextAreaElement>) => void;
+    onInput?: (event: React.FormEvent<HTMLTextAreaElement>) => void;
+    onBlur?: (event: React.FocusEvent<HTMLTextAreaElement>) => void;
+    label: string;
+    hint?: string;
+    error?: string;
+    value?: string;
+    defaultValue?: string;
+    rows?: number;
+    maxLength: number;
+    id?: string;
+}
+declare function TextArea({ disabled, onBlur, onChange, onFocus, onInput, readonly, required, label, error, hint, value, rows, maxLength, className, id: idProps, defaultValue, }: TextAreaProps): JSX.Element;
+export default TextArea;