@festo-ui/react 9.0.0-dev.711 → 9.0.0-dev.713

package/lib/forms/radio/RadioButton.js

@@ -0,0 +1,85 @@
+import { useContext } from "react";
+import classNames from "classnames";
+import RadioGroupContext from "./RadioGroupContext.js";
+import useId from "../../helper/useId.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function Radio(props) {
+  const {
+    id: idProps,
+    onChange,
+    value,
+    name,
+    defaultChecked: defaultCheckedProp,
+    checked,
+    labelPosition = "after",
+    large = false,
+    disabled = false,
+    required = false,
+    children,
+    className
+  } = props;
+  const {
+    disabled: groupDisabled,
+    labelPosition: groupLabelPosition,
+    large: groupLarge,
+    name: groupName,
+    value: groupValue,
+    required: groupRequired,
+    handleValueChange: onGroupValueChange,
+    isControlled
+  } = useContext(RadioGroupContext);
+  const innerLabelPosition = groupLabelPosition ?? labelPosition;
+  const classes = classNames("fwe-radio", {
+    "fwe-radio-label-below": innerLabelPosition === "below"
+  }, {
+    "fwe-radio-label-before": innerLabelPosition === "before"
+  }, {
+    "fwe-radio-lg": large || groupLarge
+  }, className);
+  const controlledChecked = checked !== undefined || isControlled && groupValue !== undefined ? Boolean(checked || groupValue === value) : undefined;
+  const getDefaultChecked = () => {
+    if (controlledChecked !== undefined) {
+      return undefined;
+    }
+    if (defaultCheckedProp !== undefined) {
+      return defaultCheckedProp;
+    }
+    if (!isControlled && groupValue !== undefined) {
+      return groupValue === value;
+    }
+    return undefined;
+  };
+  const defaultChecked = getDefaultChecked();
+  function handleChange(event) {
+    const newValue = event.target.value;
+    if (newValue) {
+      onGroupValueChange?.(newValue);
+    }
+    onChange?.(newValue);
+  }
+  const id = useId(idProps);
+  return /*#__PURE__*/_jsxs("label", {
+    className: classes,
+    htmlFor: id,
+    children: [/*#__PURE__*/_jsxs("div", {
+      className: "fwe-radio-check",
+      children: [/*#__PURE__*/_jsx("input", {
+        defaultChecked: defaultChecked,
+        checked: controlledChecked,
+        type: "radio",
+        id: id,
+        name: groupName || name,
+        value: value,
+        onChange: handleChange,
+        disabled: disabled || groupDisabled,
+        required: required || groupRequired
+      }), /*#__PURE__*/_jsx("div", {
+        className: "fwe-radio-checkmark"
+      }), " "]
+    }), /*#__PURE__*/_jsx("div", {
+      className: "fwe-radio-label-content",
+      children: children
+    })]
+  });
+}
+export default Radio;

package/lib/forms/radio/RadioGroup.d.ts

@@ -0,0 +1,13 @@
+import { ComponentPropsWithoutRef } from "react";
+export interface RadioGroupProps extends ComponentPropsWithoutRef<"div"> {
+    name?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    value?: string;
+    labelPosition?: "before" | "after" | "below";
+    large?: boolean;
+    disabled?: boolean;
+    required?: boolean;
+}
+declare const RadioGroup: (props: RadioGroupProps & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;
+export default RadioGroup;

package/lib/forms/radio/RadioGroup.js

@@ -0,0 +1,51 @@
+import classNames from "classnames";
+import { forwardRef, useCallback, useMemo } from "react";
+import useControlled from "../../helper/useControlled.js";
+import useId from "../../helper/useId.js";
+import RadioGroupContext from "./RadioGroupContext.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const RadioGroup = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    children,
+    className,
+    onValueChange,
+    value: controlledValue,
+    defaultValue,
+    name,
+    labelPosition,
+    large,
+    disabled,
+    required,
+    ...props
+  } = _ref;
+  const contextName = useId(name);
+  const [value, setValue] = useControlled({
+    controlled: controlledValue,
+    default: defaultValue
+  });
+  const handleValueChange = useCallback(newValue => {
+    onValueChange?.(newValue);
+    setValue(newValue);
+  }, [onValueChange, setValue]);
+  const contextValue = useMemo(() => ({
+    labelPosition,
+    large,
+    disabled,
+    required,
+    handleValueChange,
+    value,
+    isControlled: controlledValue !== undefined,
+    name: contextName
+  }), [controlledValue, handleValueChange, labelPosition, large, disabled, required, value, contextName]);
+  return /*#__PURE__*/_jsx(RadioGroupContext.Provider, {
+    value: contextValue,
+    children: /*#__PURE__*/_jsx("div", {
+      ref: ref,
+      className: classNames("fwe-radio-group", className),
+      role: "radiogroup",
+      ...props,
+      children: children
+    })
+  });
+});
+export default RadioGroup;

package/{dist → lib}/forms/radio/RadioGroupContext.d.ts

@@ -2,11 +2,11 @@ interface ContextProps {
     name: string;
     value: string;
     isControlled: boolean;
-    labelPosition: 'before' | 'after' | 'below';
+    labelPosition: "before" | "after" | "below";
     large: boolean;
     handleValueChange: (value: string) => void;
     disabled: boolean;
     required: boolean;
 }
-export declare const RadioGroupContext: import("react").Context<Partial<ContextProps>>;
-export {};
+declare const RadioGroupContext: import("react").Context<Partial<ContextProps>>;
+export default RadioGroupContext;

package/lib/forms/radio/RadioGroupContext.js

@@ -0,0 +1,3 @@
+import { createContext } from "react";
+const RadioGroupContext = /*#__PURE__*/createContext({});
+export default RadioGroupContext;

package/lib/forms/segment/Segment.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import { ClassNamePropsWithChildren } from "../../helper/types";
+export interface SegmentComponentConfiguration {
+    outline?: boolean;
+    iconOnly?: boolean;
+}
+interface SegmentProps extends ClassNamePropsWithChildren {
+    legend: string;
+    config?: SegmentComponentConfiguration;
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>, value: any) => void;
+    value?: any;
+}
+declare function Segment(props: SegmentProps): import("react/jsx-runtime").JSX.Element;
+export default Segment;

package/lib/forms/segment/Segment.js

@@ -0,0 +1,76 @@
+import classNames from "classnames";
+import React from "react";
+import useControlled from "../../helper/useControlled.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const defaultConfig = {
+  outline: true,
+  iconOnly: true
+};
+function Segment(props) {
+  const {
+    children,
+    legend,
+    config,
+    onChange,
+    className,
+    value: valueProps
+  } = props;
+  const innerConfig = {
+    ...defaultConfig,
+    ...config
+  };
+  let useIcon = false;
+  let useIconAndText = false;
+  let tmpValue = "";
+  React.Children.forEach(children, (child, index) => {
+    if (! /*#__PURE__*/React.isValidElement(child)) {
+      return null;
+    }
+    if (index === 0 && child.props.icon !== null) {
+      if (innerConfig.iconOnly) {
+        useIcon = true;
+      } else {
+        useIconAndText = true;
+      }
+    }
+    if (child.props.checked) {
+      tmpValue = child.props.value;
+    }
+    return null;
+  });
+  const [value, setValue] = useControlled({
+    controlled: valueProps,
+    default: tmpValue
+  });
+  const handleChange = (event, _value) => {
+    if (onChange) {
+      onChange(event, _value);
+    }
+    setValue(_value);
+  };
+  return /*#__PURE__*/_jsxs("fieldset", {
+    className: classNames("fwe-segment", {
+      "fwe-segment-outline": innerConfig.outline,
+      "fwe-segment-icon": useIcon,
+      "fwe-segment-icon-text": useIconAndText
+    }, className),
+    children: [/*#__PURE__*/_jsx("legend", {
+      className: "fwe-sr-only fwe-d-inline-block",
+      children: legend
+    }), /*#__PURE__*/_jsx("div", {
+      className: "fwe-segment-group",
+      children: React.Children.map(children, child => {
+        if (! /*#__PURE__*/React.isValidElement(child)) {
+          return null;
+        }
+        return /*#__PURE__*/React.cloneElement(child, {
+          ...child.props,
+          onChange: handleChange,
+          iconOnly: innerConfig.iconOnly,
+          checked: child.props.value === value
+        });
+      })
+    })]
+  });
+}
+export default Segment;

package/{dist → lib}/forms/segment/segment-control/SegmentControl.d.ts

@@ -1,5 +1,5 @@
-import type React from 'react';
-import type { ClassNameProps } from '../../../utils/types';
+import React from "react";
+import { ClassNameProps } from "../../../helper/types";
 export interface SegmentControlProps extends ClassNameProps {
     label: string;
     name: string;
@@ -11,4 +11,5 @@ export interface SegmentControlProps extends ClassNameProps {
     id?: string;
     iconOnly?: boolean;
 }
-export declare function SegmentControl(props: SegmentControlProps): import("react/jsx-runtime").JSX.Element;
+declare function SegmentControl(props: SegmentControlProps): import("react/jsx-runtime").JSX.Element;
+export default SegmentControl;

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

@@ -0,0 +1,59 @@
+import React, { useRef } from "react";
+import classNames from "classnames";
+import IconWrapper from "../../../components/icon-wrapper/IconWrapper.js";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+function SegmentControl(props) {
+  const {
+    label,
+    checked,
+    disabled,
+    name,
+    value,
+    icon,
+    onChange,
+    id,
+    className,
+    iconOnly
+  } = props;
+  const componentId = useRef(id ?? (Math.random() * Date.now()).toString().replace(".", "-"));
+  let viewMode = "text";
+  if (icon) {
+    viewMode = iconOnly ? "icon" : "icon-text";
+  }
+  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(IconWrapper, {
+          icon: icon
+        })]
+      }), viewMode === "text" && label, viewMode === "icon-text" && /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx(IconWrapper, {
+          icon: icon
+        }), /*#__PURE__*/_jsx("span", {
+          className: "fwe-ml-xxs",
+          children: label
+        })]
+      })]
+    })]
+  });
+}
+export default SegmentControl;

package/{dist → lib}/forms/select/Select.d.ts

@@ -1,8 +1,8 @@
-import './Select.scss';
-import { type ComponentPropsWithoutRef, type Ref } from 'react';
-import type { SelectConfiguration } from '../../utils/types';
-import type { SelectOptionType } from './select-option/SelectOption';
-export interface SelectProps<T> extends Omit<ComponentPropsWithoutRef<'div'>, 'onChange' | 'defaultValue'> {
+import "./Select.scss";
+import { ComponentPropsWithoutRef, Ref } from "react";
+import { SelectOptionType } from "./select-option/SelectOption";
+import { SelectConfiguration } from "../../helper/types";
+export interface SelectProps<T> extends Omit<ComponentPropsWithoutRef<"div">, "onChange" | "defaultValue"> {
     defaultValue?: T;
     defaultOpen?: boolean;
     open?: boolean;
@@ -20,7 +20,7 @@ export interface SelectProps<T> extends Omit<ComponentPropsWithoutRef<'div'>, 'o
     renderLabelContent?: (label?: string | string[]) => JSX.Element;
 }
 declare function SelectComponent<T>({ defaultValue, open, defaultOpen, value: controlled, label, options, onChange, required, config, disabled, name, id, children, hint, error, onOpenChange, renderLabelContent, ...props }: SelectProps<T>, ref: Ref<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
-export declare const Select: <T>(props: SelectProps<T> & {
-    ref?: Ref<HTMLDivElement>;
+declare const Select: <T>(props: SelectProps<T> & {
+    ref?: Ref<HTMLDivElement> | undefined;
 }) => ReturnType<typeof SelectComponent>;
-export {};
+export default Select;

package/lib/forms/select/Select.js

@@ -0,0 +1,108 @@
+import { forwardRef, useRef } from "react";
+import ReactDOM from "react-dom";
+import useControlled from "../../helper/useControlled.js";
+import { Wrapper, HiddenInput, SelectButton, OptionsContainer, SelectLabel } from "./internal/index.js";
+import useForkRef from "../../helper/useForkRef.js";
+import getChildren from "./internal/utils.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function SelectComponent(_ref, ref) {
+  let {
+    defaultValue = "",
+    open,
+    defaultOpen = false,
+    value: controlled,
+    label,
+    options,
+    onChange,
+    required = false,
+    config,
+    disabled,
+    name,
+    id,
+    children,
+    hint,
+    error,
+    onOpenChange,
+    renderLabelContent,
+    ...props
+  } = _ref;
+  const [value, setValue] = useControlled({
+    controlled,
+    default: defaultValue,
+    onChange
+  });
+  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 multiple = Array.isArray(value);
+  const refocusButton = () => {
+    setFocused(false);
+    buttonEl?.current?.focus();
+  };
+  const handleOptionChange = newOption => {
+    let newValue = newOption.data;
+    if (value instanceof Array) {
+      newValue = value.includes(newValue) ? value.filter(item => item !== newValue) : [...value, newValue];
+    }
+    setValue(newValue);
+    if (!multiple) {
+      refocusButton();
+    }
+  };
+  const removeChip = chipLabel => {
+    const chipOption = usedOptions.find(option => option.label === chipLabel);
+    if (chipOption) {
+      handleOptionChange(chipOption);
+    }
+  };
+  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,
+    ...props,
+    children: [/*#__PURE__*/_jsx(HiddenInput, {
+      onChange: handleOptionChange,
+      options: usedOptions,
+      value: value
+    }), /*#__PURE__*/_jsx(SelectButton, {
+      ref: buttonEl,
+      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__*/_jsx("div", {
+      className: "fwe-select-invalid",
+      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,8 @@
+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>): import("react/jsx-runtime").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/{dist → lib}/forms/select/internal/ListItem.d.ts

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

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

@@ -0,0 +1,84 @@
+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();
+    }
+  }
+  function handleClick() {
+    if (option.disabled) {
+      return;
+    }
+    onOptionChange(option);
+  }
+  const itemRef = typeof ref !== "function" ? ref?.current?.[index] : undefined;
+  return /*#__PURE__*/_jsx("li", {
+    onClick: handleClick,
+    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/{dist → lib}/forms/select/internal/SelectButton.d.ts

@@ -8,5 +8,5 @@ interface SelectButtonProps {
     label?: string | string[];
     renderLabelContent?: (label?: string | string[]) => JSX.Element;
 }
-export declare const SelectButton: (props: SelectButtonProps & import("react").RefAttributes<HTMLButtonElement>) => React.ReactElement | null;
-export {};
+declare const SelectButton: (props: SelectButtonProps & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;
+export default SelectButton;