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

package/dist/forms/select/Select.js

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

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

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

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

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

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

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

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

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

@@ -1,103 +0,0 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { createRef, forwardRef, isValidElement, useEffect, useRef, useState } from "react";
-import { usePopper } from "react-popper";
-import { ListItem } from "./ListItem.js";
-import { SelectScrollContainer } from "./SelectScrollContainer.js";
-import { getChildren } from "./utils.js";
-function SelectOptionsContainerComponent({ options, config, onClose, label, onOptionChange, multiple, children }, ref) {
-    const [popperElement, setPopperElement] = useState(null);
-    const refObject = 'function' != typeof ref ? ref?.current : null;
-    const { styles, attributes } = usePopper(refObject, popperElement, {
-        placement: 'bottom-start',
-        modifiers: [
-            {
-                name: 'offset',
-                options: {
-                    offset: [
-                        0,
-                        3
-                    ]
-                }
-            },
-            {
-                name: 'flip',
-                options: {
-                    fallbackPlacements: [
-                        'bottom-start',
-                        'top-start'
-                    ]
-                }
-            }
-        ]
-    });
-    function getCssProperies() {
-        if (config?.contentWidth) return {
-            ...styles.popper,
-            minWidth: `${refObject?.clientWidth}px`,
-            width: config?.contentWidth
-        };
-        return {
-            ...styles.popper,
-            minWidth: `${refObject?.clientWidth}px`
-        };
-    }
-    const allChildren = getChildren(children);
-    const childrenList = allChildren.childrenList;
-    const usedOptions = options ?? childrenList.map((child)=>child.props.option);
-    const { length } = usedOptions;
-    const listItemRef = useRef(Array.from({
-        length
-    }, ()=>/*#__PURE__*/ createRef()));
-    const selectedIndex = Array.isArray(label) ? usedOptions.findIndex((option)=>option.label === label.at(-1)) : usedOptions.findIndex((option)=>option.label === label);
-    const [init, setInit] = useState(false);
-    useEffect(()=>{
-        if (!init) requestAnimationFrame(()=>{
-            setInit(true);
-            const index = -1 === selectedIndex ? 0 : selectedIndex;
-            listItemRef.current?.[index].current?.focus();
-        });
-    }, [
-        selectedIndex,
-        init
-    ]);
-    return /*#__PURE__*/ jsxs(Fragment, {
-        children: [
-            /*#__PURE__*/ jsx("div", {
-                "aria-hidden": true,
-                className: "fr-backdrop",
-                onClick: onClose
-            }),
-            /*#__PURE__*/ jsxs("ul", {
-                ref: setPopperElement,
-                style: getCssProperies(),
-                ...attributes.popper,
-                className: "fwe-select-options-container",
-                role: "listbox",
-                children: [
-                    allChildren.before,
-                    /*#__PURE__*/ jsx(SelectScrollContainer, {
-                        length: length,
-                        config: config,
-                        children: [
-                            ...options || [],
-                            ...childrenList
-                        ].map((item, i)=>/*#__PURE__*/ jsx(ListItem, {
-                                withCheckbox: multiple,
-                                item: item,
-                                selectedLabel: label,
-                                onClose: onClose,
-                                onFocusChange: (index)=>listItemRef.current[index].current?.focus(),
-                                onOptionChange: onOptionChange,
-                                ref: listItemRef,
-                                index: i,
-                                options: usedOptions
-                            }, /*#__PURE__*/ (isValidElement(item) ? item.props.option : item).data))
-                    }),
-                    allChildren.after
-                ]
-            })
-        ]
-    });
-}
-const SelectOptionsContainer = /*#__PURE__*/ forwardRef(SelectOptionsContainerComponent);
-export { SelectOptionsContainer };

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

@@ -1,15 +0,0 @@
-import { Fragment, jsx } from "react/jsx-runtime";
-import { calcVirtualScrollHeight } from "../utils.js";
-function SelectScrollContainer({ config, children, length }) {
-    if (config?.scroll?.enabled) return /*#__PURE__*/ jsx("div", {
-        className: "fr-select-scroll",
-        style: {
-            height: calcVirtualScrollHeight(config, length)
-        },
-        children: children
-    });
-    return /*#__PURE__*/ jsx(Fragment, {
-        children: children
-    });
-}
-export { SelectScrollContainer };

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

@@ -1,6 +0,0 @@
-import { type ComponentPropsWithoutRef } from 'react';
-interface SelectWrapperProps extends ComponentPropsWithoutRef<'div'> {
-    disabled?: boolean;
-}
-export declare const SelectWrapper: (props: SelectWrapperProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;
-export {};

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

@@ -1,12 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import classnames from "classnames";
-import { forwardRef } from "react";
-const SelectWrapper = /*#__PURE__*/ forwardRef(({ children, disabled, className, ...props }, ref)=>/*#__PURE__*/ jsx("div", {
-        ...props,
-        ref: ref,
-        className: classnames('fwe-select-wrapper', {
-            'fwe-disabled': disabled
-        }, className),
-        children: children
-    }));
-export { SelectWrapper };

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

@@ -1,6 +0,0 @@
-export { HiddenInput } from './HiddenInput';
-export { ListItem } from './ListItem';
-export { SelectButton } from './SelectButton';
-export { SelectLabel } from './SelectLabel';
-export { SelectOptionsContainer } from './SelectOptionsContainer';
-export { SelectWrapper } from './SelectWrapper';

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

@@ -1,7 +0,0 @@
-import { HiddenInput } from "./HiddenInput.js";
-import { ListItem } from "./ListItem.js";
-import { SelectButton } from "./SelectButton.js";
-import { SelectLabel } from "./SelectLabel.js";
-import { SelectOptionsContainer } from "./SelectOptionsContainer.js";
-import { SelectWrapper } from "./SelectWrapper.js";
-export { HiddenInput, ListItem, SelectButton, SelectLabel, SelectOptionsContainer, SelectWrapper };

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

@@ -1,30 +0,0 @@
-import classnames from "classnames";
-import react from "react";
-import { SelectOption } from "../select-option/SelectOption.js";
-function getChildren(children) {
-    const before = [];
-    const childrenList = [];
-    const after = [];
-    let foundFirstOption = false;
-    react.Children.forEach(children, (element)=>{
-        if (react.isValidElement(element)) if (react.isValidElement(element) && element.type === SelectOption) {
-            foundFirstOption = true;
-            const className = classnames('fwe-select-option-content', element.props.className);
-            const { props } = element;
-            childrenList.push({
-                ...element,
-                props: {
-                    ...props,
-                    className
-                }
-            });
-        } else if (foundFirstOption) after.push(element);
-        else before.push(element);
-    });
-    return {
-        childrenList,
-        after,
-        before
-    };
-}
-export { getChildren };

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

@@ -1,12 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
-function SelectOptionComponent({ children, className, ...props }, ref) {
-    return /*#__PURE__*/ jsx("span", {
-        ref: ref,
-        className: className,
-        ...props,
-        children: children
-    });
-}
-const SelectOption = /*#__PURE__*/ forwardRef(SelectOptionComponent);
-export { SelectOption };

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

@@ -1,2 +0,0 @@
-import type { SelectConfiguration } from '../../utils/types';
-export declare function calcVirtualScrollHeight(config: SelectConfiguration | undefined, itemLength: number): number;

package/dist/forms/select/utils.js

@@ -1,12 +0,0 @@
-function calcVirtualScrollHeight(config, itemLength) {
-    const defaultHeight = 48;
-    let height = defaultHeight;
-    if (2 === itemLength) height = 2 * defaultHeight;
-    else if (itemLength >= 3) height = 3 * defaultHeight;
-    if (config?.scroll?.viewportSize != null && void 0 !== config.scroll.viewportSize) {
-        if (itemLength >= config.scroll.viewportSize) height = config.scroll.viewportSize * defaultHeight;
-        else if (itemLength < config.scroll.viewportSize) height = itemLength * defaultHeight;
-    }
-    return height;
-}
-export { calcVirtualScrollHeight };

package/dist/forms/slider/Slider.css

@@ -1,50 +0,0 @@
-label.fwe-slider {
-  display: block;
-  position: relative;
-}
-
-label.fwe-slider .fr-slider-indicator {
-  background: var(--fwe-hero);
-  height: 2px;
-  position: absolute;
-  bottom: 22px;
-  left: 0;
-}
-
-label.fwe-slider .fr-slider-indicator.disabled {
-  background: var(--fwe-border);
-}
-
-label.fwe-slider.fr-slider-value {
-  height: 56px;
-}
-
-label.fwe-slider.fr-slider-value .fr-slider-indicator {
-  bottom: 38px;
-}
-
-label.fwe-slider.fr-slider-label {
-  height: 67px;
-}
-
-label.fwe-slider.fr-slider-label .fr-slider-indicator {
-  bottom: 22px;
-}
-
-label.fwe-slider.fr-slider-value-label {
-  height: 83px;
-}
-
-label.fwe-slider.fr-slider-value-label .fr-slider-indicator {
-  bottom: 38px;
-}
-
-label.fwe-slider .fr-slider-value {
-  color: var(--fwe-text);
-  font-size: var(--fwe-font-size-base);
-  user-select: none;
-  margin-bottom: 0;
-  position: absolute;
-  bottom: 0;
-}
-

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

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