@festo-ui/react 9.0.0-dev.706 → 9.0.0-dev.709

package/lib/forms/radio/RadioButton.js

@@ -1,85 +0,0 @@
-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

@@ -1,13 +0,0 @@
-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

@@ -1,51 +0,0 @@
-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/lib/forms/radio/RadioGroupContext.js

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

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

@@ -1,14 +0,0 @@
-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

@@ -1,76 +0,0 @@
-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/lib/forms/segment/segment-control/SegmentControl.js

@@ -1,59 +0,0 @@
-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/lib/forms/select/Select.js

@@ -1,108 +0,0 @@
-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

@@ -1,8 +0,0 @@
-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

@@ -1,26 +0,0 @@
-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.js

@@ -1,84 +0,0 @@
-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/lib/forms/select/internal/SelectButton.js

@@ -1,57 +0,0 @@
-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.js

@@ -1,38 +0,0 @@
-/* eslint-disable jsx-a11y/no-static-element-interactions */
-/* eslint-disable jsx-a11y/click-events-have-key-events */
-
-import { IconCloseSmall } from "@festo-ui/react-icons";
-import { jsx as _jsx, jsxs as _jsxs, 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

@@ -1,4 +0,0 @@
-import { CheckboxProps } from "../../checkbox/Checkbox";
-export default function SelectCheckbox({ children, withCheckbox, ...props }: CheckboxProps & {
-    withCheckbox?: boolean;
-}): import("react/jsx-runtime").JSX.Element;

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

@@ -1,19 +0,0 @@
-import Checkbox from "../../checkbox/Checkbox.js";
-import { jsx as _jsx, 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.js

@@ -1,16 +0,0 @@
-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 || ""
-  });
-}