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

package/dist/components/table-header-cell/TableHeaderCell.js

@@ -1,21 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import classnames from "classnames";
-import { forwardRef } from "react";
-const TableHeaderCell = /*#__PURE__*/ forwardRef(({ active, ascending, className, ...props }, ref)=>{
-    function handleClick(event) {
-        if (props.onClick) props.onClick(event);
-    }
-    return /*#__PURE__*/ jsx("th", {
-        ...props,
-        className: classnames('fwe-table-order', {
-            'fwe-active': active
-        }, {
-            'fwe-table-order-ascending': active && ascending
-        }, {
-            'fwe-table-order-descending': active && !ascending
-        }, className),
-        onClick: handleClick,
-        ref: ref
-    });
-});
-export { TableHeaderCell };

package/dist/forms/checkbox/Checkbox.css

@@ -1,134 +0,0 @@
-.fwe-checkbox-container {
-  font-family: var(--fwe-font-family-sans-serif);
-  user-select: none;
-  cursor: pointer;
-  flex-direction: row;
-  align-items: center;
-  display: flex;
-}
-
-.fwe-checkbox-container.fwe-label-below {
-  flex-direction: column;
-}
-
-.fwe-checkbox-container.fwe-label-below .fwe-checkbox-title {
-  margin: 8px 0 0;
-}
-
-.fwe-checkbox-container.fwe-label-before {
-  flex-direction: row-reverse;
-  justify-content: flex-end;
-}
-
-.fwe-checkbox-container.fwe-label-before .fwe-checkbox-title {
-  margin: 0 8px 0 0;
-}
-
-.fwe-checkbox-container .fwe-checkbox-indicator-container {
-  position: relative;
-}
-
-.fwe-checkbox-container input {
-  opacity: 0;
-  cursor: pointer;
-  width: 0;
-  height: 0;
-}
-
-.fwe-checkbox-container .fwe-checkbox-title {
-  color: var(--fwe-text);
-  user-select: none;
-  margin-left: 8px;
-  line-height: 24px;
-}
-
-.fwe-checkbox-container .fwe-checkbox-indicator-background {
-  box-sizing: border-box;
-  background: var(--fwe-white);
-  border: 1px solid var(--fwe-text-light);
-  border-radius: 2px;
-  width: 16px;
-  height: 16px;
-  transition: border-width .2s ease-out;
-}
-
-.fwe-checkbox-container .fwe-indeterminate-indicator {
-  background: #fff;
-  width: 10px;
-  height: 2px;
-  position: absolute;
-  top: 7px;
-  left: 3px;
-}
-
-.fwe-checkbox-container .fwe-checkbox-indicator-background + svg {
-  display: block;
-  position: absolute;
-  top: 0;
-  left: 0;
-}
-
-.fwe-checkbox-container.fr-checkbox-large .fwe-checkbox-indicator-background {
-  border-radius: 4px;
-  width: 24px;
-  height: 24px;
-}
-
-.fwe-checkbox-container.fr-checkbox-large .fwe-indeterminate-indicator {
-  width: 14px;
-  top: 11px;
-  left: 5px;
-}
-
-.fwe-checkbox-container.fr-checkbox-large.fwe-checked .fwe-checkbox-indicator-background, .fwe-checkbox-container.fr-checkbox-large.fr-checkbox-indeterminate .fwe-checkbox-indicator-background {
-  border: 12px solid var(--fwe-hero);
-}
-
-.fwe-checkbox-container:hover .fwe-checkbox-indicator-background {
-  background-color: var(--fwe-control);
-}
-
-.fwe-checkbox-container:active .fwe-checkbox-indicator-background {
-  background-color: var(--fwe-control-hover);
-}
-
-.fwe-checkbox-container.fwe-checked .fwe-checkbox-indicator-background, .fwe-checkbox-container.fr-checkbox-indeterminate .fwe-checkbox-indicator-background {
-  border: 8px solid var(--fwe-hero);
-}
-
-.fwe-checkbox-container.fwe-checked:hover .fwe-checkbox-indicator-background, .fwe-checkbox-container.fr-checkbox-indeterminate:hover .fwe-checkbox-indicator-background {
-  border-color: var(--fwe-hero-hover);
-}
-
-.fwe-checkbox-container.fwe-checked:active .fwe-checkbox-indicator-background, .fwe-checkbox-container.fr-checkbox-indeterminate:active .fwe-checkbox-indicator-background {
-  border-color: var(--fwe-hero-active);
-}
-
-.fwe-checkbox-container.fr-checkbox-invalid .fwe-checkbox-indicator-background {
-  border: 1px solid var(--fwe-red);
-  background: var(--fwe-white);
-}
-
-.fwe-checkbox-container.fwe-disabled {
-  cursor: default;
-}
-
-.fwe-checkbox-container.fwe-disabled .fwe-checkbox-indicator-background {
-  background-color: var(--fwe-white);
-  border: 1px solid var(--fwe-control);
-}
-
-.fwe-checkbox-container.fwe-disabled.fwe-checked .fwe-checkbox-indicator-background, .fwe-checkbox-container.fwe-disabled.fr-checkbox-indeterminate .fwe-checkbox-indicator-background {
-  background-color: var(--fwe-control);
-  border: 1px solid var(--fwe-control);
-}
-
-.fwe-checkbox-container.fwe-disabled.fr-checkbox-invalid .fwe-checkbox-indicator-background {
-  background-color: var(--fwe-white);
-  border: 1px solid var(--fwe-control);
-}
-
-.fwe-checkbox-container.fwe-disabled .fwe-checkbox-title {
-  color: var(--fwe-text-disabled);
-}
-

package/dist/forms/checkbox/Checkbox.d.ts

@@ -1,15 +0,0 @@
-import './Checkbox.scss';
-export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'> {
-    readonly id?: string;
-    readonly checked?: boolean;
-    readonly defaultChecked?: boolean;
-    readonly onChange?: (value: boolean, e: React.ChangeEvent<HTMLInputElement>) => void;
-    readonly name?: string;
-    readonly large?: boolean;
-    readonly valid?: boolean;
-    readonly labelPosition?: 'before' | 'after' | 'below';
-    readonly required?: boolean;
-    readonly disabled?: boolean;
-    readonly indeterminate?: boolean;
-}
-export declare function Checkbox({ id, checked: checkedProp, defaultChecked, onChange, name, large, valid, labelPosition, required, disabled, indeterminate, children, className, ...props }: CheckboxProps): import("react/jsx-runtime").JSX.Element;

package/dist/forms/checkbox/Checkbox.js

@@ -1,80 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import "./Checkbox.css";
-import classnames from "classnames";
-import { useControlled } from "../../utils/useControlled.js";
-function Checkbox({ id, checked: checkedProp, defaultChecked, onChange, name, large = false, valid = true, labelPosition = 'after', required, disabled = false, indeterminate = false, children, className, ...props }) {
-    const [isChecked, setChecked] = useControlled({
-        controlled: checkedProp,
-        default: defaultChecked
-    });
-    const handleChange = (e)=>{
-        const newChecked = !isChecked;
-        setChecked(newChecked);
-        onChange?.(newChecked, e);
-    };
-    const containerClasses = classnames('fwe-checkbox-container', {
-        'fr-checkbox-large': large
-    }, {
-        'fr-checkbox-invalid': !valid || required
-    }, {
-        'fwe-disabled': disabled
-    }, {
-        'fwe-checked': isChecked
-    }, {
-        'fwe-label-below': 'below' === labelPosition
-    }, {
-        'fwe-label-before': 'before' === labelPosition
-    }, {
-        'fr-checkbox-indeterminate': indeterminate
-    }, className);
-    return /*#__PURE__*/ jsxs("label", {
-        className: containerClasses,
-        htmlFor: id,
-        children: [
-            /*#__PURE__*/ jsx("input", {
-                name: name,
-                type: "checkbox",
-                id: id,
-                disabled: disabled,
-                required: required,
-                onChange: (e)=>handleChange(e),
-                ...props,
-                checked: isChecked
-            }),
-            /*#__PURE__*/ jsxs("div", {
-                className: "fwe-checkbox-indicator-container",
-                children: [
-                    /*#__PURE__*/ jsx("div", {
-                        className: "fwe-checkbox-indicator-background"
-                    }),
-                    !indeterminate && isChecked && (large ? /*#__PURE__*/ jsx("svg", {
-                        width: "24px",
-                        height: "24px",
-                        "aria-hidden": "true",
-                        children: /*#__PURE__*/ jsx("path", {
-                            d: "M17.5 7L10 14.5 7.501 12l-1.5 1.501L10 17.5l9-9z",
-                            fill: "#fff"
-                        })
-                    }) : /*#__PURE__*/ jsx("svg", {
-                        xmlns: "http://www.w3.org/2000/svg",
-                        width: "16",
-                        height: "16",
-                        "aria-hidden": "true",
-                        children: /*#__PURE__*/ jsx("path", {
-                            d: "M6 12L3 9l1.25-1.25L6 9.5l5.75-5.75L13 5l-7 7z",
-                            fill: "#fff"
-                        })
-                    })),
-                    indeterminate && /*#__PURE__*/ jsx("div", {
-                        className: "fwe-indeterminate-indicator"
-                    })
-                ]
-            }),
-            /*#__PURE__*/ jsx("div", {
-                className: "fwe-checkbox-title",
-                children: children
-            })
-        ]
-    });
-}
-export { Checkbox };

package/dist/forms/radio/RadioButton.js

@@ -1,61 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import classnames from "classnames";
-import { useContext } from "react";
-import { useId } from "../../utils/useId.js";
-import { RadioGroupContext } from "./RadioGroupContext.js";
-function RadioButton(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': 'below' === innerLabelPosition
-    }, {
-        'fwe-radio-label-before': 'before' === innerLabelPosition
-    }, {
-        'fwe-radio-lg': large || groupLarge
-    }, className);
-    const controlledChecked = void 0 !== checked || isControlled && void 0 !== groupValue ? Boolean(checked || groupValue === value) : void 0;
-    const getDefaultChecked = ()=>{
-        if (void 0 !== controlledChecked) return;
-        if (void 0 !== defaultCheckedProp) return defaultCheckedProp;
-        if (!isControlled && void 0 !== groupValue) return groupValue === value;
-    };
-    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 { RadioButton };

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

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

package/dist/forms/radio/RadioGroup.js

@@ -1,50 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import classnames from "classnames";
-import { forwardRef, useCallback, useMemo } from "react";
-import { useControlled } from "../../utils/useControlled.js";
-import { useId } from "../../utils/useId.js";
-import { RadioGroupContext } from "./RadioGroupContext.js";
-const RadioGroup = /*#__PURE__*/ forwardRef(({ 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: void 0 !== controlledValue,
-            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 { RadioGroup };

package/dist/forms/radio/RadioGroupContext.js

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

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

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

package/dist/forms/segment/Segment.js

@@ -1,59 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import classnames from "classnames";
-import react from "react";
-import { useControlled } from "../../utils/useControlled.js";
-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 (0 === index && null !== child.props.icon) 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 { Segment };

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;
-}
-