@festo-ui/react 9.0.0-dev.715 → 9.0.0-dev.716

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

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

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

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

@@ -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.d.ts

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

@@ -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.d.ts

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

@@ -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.d.ts

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

@@ -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.d.ts

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

@@ -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.d.ts

@@ -1,17 +0,0 @@
-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 {};