@festo-ui/react 9.0.0-dev.718 → 9.0.0-dev.720

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

@@ -0,0 +1,57 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import classnames from "classnames";
+import { useRef } from "react";
+import { IconWrapper } from "../../../components/icon-wrapper/IconWrapper.js";
+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: [
+                    'icon' === viewMode && /*#__PURE__*/ jsxs(Fragment, {
+                        children: [
+                            /*#__PURE__*/ jsx("span", {
+                                className: "fwe-sr-only",
+                                children: label
+                            }),
+                            /*#__PURE__*/ jsx(IconWrapper, {
+                                icon: icon
+                            })
+                        ]
+                    }),
+                    'text' === viewMode && label,
+                    'icon-text' === viewMode && /*#__PURE__*/ jsxs(Fragment, {
+                        children: [
+                            /*#__PURE__*/ jsx(IconWrapper, {
+                                icon: icon
+                            }),
+                            /*#__PURE__*/ jsx("span", {
+                                className: "fwe-ml-xxs",
+                                children: label
+                            })
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+}
+export { SegmentControl };

package/dist/forms/select/Select.css

@@ -0,0 +1,160 @@
+.fwe-select-wrapper {
+  width: inherit;
+  min-width: 48px;
+  display: flex;
+}
+
+.fwe-select-wrapper .fr-select-input {
+  opacity: 0;
+  pointer-events: none;
+  box-sizing: border-box;
+  width: 100%;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+}
+
+.fwe-select-wrapper.fwe-disabled:before {
+  color: var(--fwe-text-disabled);
+}
+
+.fwe-select-wrapper .fwe-select {
+  text-align: left;
+  cursor: pointer;
+  height: unset;
+  background: none;
+  min-height: 33px;
+  padding: 0;
+}
+
+.fwe-select-wrapper .fwe-select .fwe-select-content {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  padding-right: 24px;
+  line-height: 1.5rem;
+  overflow: hidden;
+}
+
+.fwe-select-wrapper .fwe-select.fwe-required:not(.fwe-disabled) ~ .fwe-select-label:after {
+  content: "*";
+  display: inline-block;
+  position: relative;
+  left: 3px;
+}
+
+.fwe-select-wrapper .fwe-select.fwe-required:not(.fwe-disabled):not(.fwe-invalid) ~ .fwe-select-valid {
+  display: block;
+}
+
+.fwe-select-wrapper .fwe-select:focus:not(:disabled) {
+  color: var(--fwe-hero);
+}
+
+.fwe-select-wrapper .fwe-select:focus:not(:disabled) option {
+  color: var(--fwe-text);
+}
+
+.fwe-select-wrapper .fwe-select:focus:not(:disabled) {
+  border-color: var(--fwe-hero);
+}
+
+.fwe-select-wrapper .fwe-select:focus:invalid {
+  border-color: var(--fwe-red);
+}
+
+.fwe-select-wrapper .fwe-select.fwe-disabled {
+  cursor: default;
+  border-color: var(--fwe-control-disabled) !important;
+}
+
+.fwe-select-wrapper .fwe-select.fwe-disabled ~ .fwe-select-label, .fwe-select-wrapper .fwe-select.fwe-disabled .fwe-select-content {
+  color: var(--fwe-text-disabled);
+}
+
+.fwe-select-wrapper .fwe-select.fwe-disabled .fwe-chip {
+  color: var(--fwe-text-disabled);
+  border: 1px solid var(--fwe-control-disabled);
+  pointer-events: none;
+}
+
+.fwe-select-wrapper .fwe-select.fwe-invalid.fwe-select:hover, .fwe-select-wrapper .fwe-select.fwe-invalid.fwe-select:focus {
+  border-color: var(--fwe-red);
+}
+
+.fwe-select-wrapper .fwe-select.fwe-invalid ~ .fwe-select-invalid {
+  display: block;
+}
+
+.fwe-select-wrapper .fwe-select.fwe-invalid ~ .fwe-select-description {
+  display: none;
+}
+
+.fr-select-scroll {
+  overflow-y: scroll;
+}
+
+.fwe-select-options-container {
+  z-index: var(--fwe-z-index-popover);
+  max-width: 100vw;
+  font-size: var(--fwe-font-size-base);
+  background-color: var(--fwe-white);
+  border: 1px solid var(--fwe-gray-200);
+  border-radius: 4px;
+  margin: 0;
+  padding: 8px;
+  list-style: none;
+  box-shadow: 0 1px 4px #00000029;
+}
+
+.fwe-select-options-container .fwe-select-option {
+  cursor: pointer;
+  min-height: 24px;
+  padding: 12px 8px;
+  line-height: 24px;
+  position: relative;
+}
+
+.fwe-select-options-container .fwe-select-option:hover, .fwe-select-options-container .fwe-select-option:focus {
+  background-color: var(--fwe-gray-100);
+  outline: none;
+}
+
+.fwe-select-options-container .fwe-select-option:last-child {
+  border-bottom: none;
+}
+
+.fwe-select-options-container .fwe-select-option .fwe-select-option-content {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  min-height: 24px;
+  line-height: 24px;
+  display: block;
+  overflow: hidden;
+}
+
+.fr-backdrop {
+  z-index: var(--fwe-z-index-modal);
+  position: fixed;
+  inset: 0;
+}
+
+.chip-text-truncate {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  display: inline-block;
+  overflow: hidden;
+}
+
+.chip-removable {
+  cursor: pointer;
+  border: none;
+  padding: 0;
+}
+
+.fwe-chip .chip-removable svg {
+  margin: 0;
+  position: absolute;
+  top: 4px;
+  right: 5px;
+}
+

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

@@ -0,0 +1,26 @@
+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'> {
+    defaultValue?: T;
+    defaultOpen?: boolean;
+    open?: boolean;
+    value?: T;
+    label?: string;
+    options?: SelectOptionType<T>[];
+    required?: boolean;
+    onChange?: (value: T) => void;
+    config?: SelectConfiguration;
+    disabled?: boolean;
+    name?: string;
+    hint?: string;
+    error?: string;
+    onOpenChange?: (value: boolean) => void;
+    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>;
+}) => ReturnType<typeof SelectComponent>;
+export {};

package/dist/forms/select/Select.js

@@ -0,0 +1,95 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import "./Select.css";
+import { forwardRef, useRef } from "react";
+import react_dom from "react-dom";
+import { useControlled } from "../../utils/useControlled.js";
+import { useForkRef } from "../../utils/useForkRef.js";
+import { SelectButton, SelectLabel, SelectOptionsContainer, SelectWrapper } from "./internal/index.js";
+import { HiddenInput } from "./internal/HiddenInput.js";
+import { getChildren } from "./internal/utils.js";
+function SelectComponent({ 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 (Array.isArray(value)) 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(SelectWrapper, {
+        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__*/ react_dom.createPortal(/*#__PURE__*/ jsx(SelectOptionsContainer, {
+                multiple: multiple,
+                ref: innerRef,
+                config: config,
+                onClose: refocusButton,
+                onOptionChange: handleOptionChange,
+                options: options,
+                label: selectedLabel,
+                children: children
+            }), document.body)
+        ]
+    });
+}
+const Select = /*#__PURE__*/ forwardRef(SelectComponent);
+export { Select };

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

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

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

@@ -0,0 +1,15 @@
+import { jsx } from "react/jsx-runtime";
+function HiddenInput({ value, onChange, options }) {
+    function handleChange(event) {
+        const child = options.find(({ data })=>data === event.target.value);
+        if (void 0 !== child) onChange(child);
+    }
+    return /*#__PURE__*/ jsx("input", {
+        className: "fr-select-input",
+        "aria-hidden": true,
+        tabIndex: -1,
+        value: value,
+        onChange: handleChange
+    });
+}
+export { HiddenInput };

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

@@ -0,0 +1,18 @@
+import React, { type Ref, type RefObject } from 'react';
+import type { 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>[]>): import("react/jsx-runtime").JSX.Element;
+export declare const ListItem: <T>(props: ListItemProps<T> & {
+    ref?: Ref<RefObject<HTMLLIElement>[]>;
+}) => ReturnType<typeof ListItemComponent>;
+export {};

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

@@ -0,0 +1,69 @@
+import { jsx } from "react/jsx-runtime";
+import classnames from "classnames";
+import react, { forwardRef } from "react";
+import { SelectCheckbox } from "./SelectCheckbox.js";
+function ListItemComponent({ 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: void 0
+    } : {};
+    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 ('ArrowDown' === e.key) onFocusChange((index + 1) % options.length);
+        if ('ArrowUp' === e.key) {
+            const nextIndex = (index - 1 + options.length) % options.length;
+            onFocusChange(nextIndex);
+        }
+        if ([
+            'Enter',
+            ' '
+        ].includes(e.key)) {
+            if (option.disabled) return;
+            onOptionChange(option);
+        }
+        if ('Escape' === e.key) onClose();
+    }
+    function handleClick() {
+        if (option.disabled) return;
+        onOptionChange(option);
+    }
+    const itemRef = 'function' != typeof ref ? ref?.current?.[index] : void 0;
+    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 { ListItem };

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

@@ -0,0 +1,12 @@
+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;
+}
+export declare const SelectButton: (props: SelectButtonProps & import("react").RefAttributes<HTMLButtonElement>) => React.ReactElement | null;
+export {};

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

@@ -0,0 +1,49 @@
+import { jsx } from "react/jsx-runtime";
+import classnames from "classnames";
+import { forwardRef } from "react";
+import { SelectButtonContent } from "./SelectButtonContent.js";
+const SelectButton = /*#__PURE__*/ forwardRef(({ onToggle, disabled, label, focused, required, error, onChipClick, renderLabelContent }, ref)=>{
+    const empty = void 0 === label && !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("button", {
+        type: "button",
+        tabIndex: 0,
+        className: classnames('fwe-select', {
+            'fwe-focus': focused,
+            'fwe-empty': empty,
+            'fwe-required': required,
+            'fwe-disabled': disabled,
+            'fwe-invalid': error
+        }),
+        onClick: handleClick,
+        ref: ref,
+        onKeyDown: handleKeyDown,
+        disabled: disabled,
+        children: /*#__PURE__*/ jsx("div", {
+            className: "fwe-select-content",
+            children: /*#__PURE__*/ jsx(SelectButtonContent, {
+                onClick: onChipClick,
+                label: label,
+                renderLabelContent: renderLabelContent
+            })
+        })
+    });
+});
+export { SelectButton };

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

@@ -0,0 +1,7 @@
+interface SelectButtonContentProps {
+    label?: string | string[];
+    renderLabelContent?: (label?: string | string[]) => JSX.Element;
+    onClick: (label: string) => void;
+}
+export declare function SelectButtonContent({ label, renderLabelContent, onClick, }: SelectButtonContentProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,31 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { IconCloseSmall } from "@festo-ui/react-icons";
+function SelectButtonContent({ label, renderLabelContent, onClick }) {
+    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("button", {
+                        type: "button",
+                        className: "chip-removable",
+                        onClick: handleChipClick(v),
+                        children: /*#__PURE__*/ jsx(IconCloseSmall, {
+                            size: 16
+                        })
+                    })
+                ]
+            }, v))
+    });
+    return /*#__PURE__*/ jsx(Fragment, {
+        children: label
+    });
+}
+export { SelectButtonContent };

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

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

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

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

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

@@ -0,0 +1,7 @@
+interface SelectLabelProps {
+    hideLabel?: boolean;
+    label?: string;
+    id?: string;
+}
+export declare function SelectLabel({ hideLabel, label, id }: SelectLabelProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

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

package/dist/forms/select/internal/SelectOptionsContainer.d.ts

@@ -0,0 +1,17 @@
+import { type Key, type Ref } from 'react';
+import type { SelectConfiguration } from '../../../utils/types';
+import type { SelectOptionType } from '../select-option/SelectOption';
+interface SelectOptionsContainerProps<T> {
+    options?: SelectOptionType<T>[];
+    config?: SelectConfiguration;
+    onClose: () => void;
+    label?: string | string[];
+    onOptionChange: (option: SelectOptionType<T>) => void;
+    multiple?: boolean;
+    children: React.ReactNode;
+}
+declare function SelectOptionsContainerComponent<T extends Key | null | undefined>({ options, config, onClose, label, onOptionChange, multiple, children, }: SelectOptionsContainerProps<T>, ref: Ref<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+export declare const SelectOptionsContainer: <T>(props: SelectOptionsContainerProps<T> & {
+    ref?: Ref<HTMLDivElement>;
+}) => ReturnType<typeof SelectOptionsContainerComponent>;
+export {};