@festo-ui/react 9.0.1 → 10.0.0-dev.826

package/dist/components/stepper-horizontal/step-horizontal/StepHorizontal.js

@@ -6,11 +6,12 @@ const StepHorizontal = /*#__PURE__*/ forwardRef(({ children, className, isActive
         ref: ref,
         className: classnames('overflow-hidden', {
             hidden: !isActive
-        }),
+        }, className),
         ...props,
         children: /*#__PURE__*/ jsx("div", {
             className: "fr-moving-container",
             children: children
         })
     }));
+StepHorizontal.displayName = 'StepHorizontal';
 export { StepHorizontal };

package/dist/components/stepper-vertical/StepperVertical.js

@@ -7,7 +7,6 @@ const StepperVertical = /*#__PURE__*/ forwardRef(({ children, className, stepInd
     }
     const stepComponents = react.Children.map(children, (child, i)=>{
         if (/*#__PURE__*/ react.isValidElement(child)) return /*#__PURE__*/ react.cloneElement(child, {
-            ...child.props,
             isActive: i === stepIndex,
             index: i,
             isDone: i < stepIndex,
@@ -23,4 +22,5 @@ const StepperVertical = /*#__PURE__*/ forwardRef(({ children, className, stepInd
         children: stepComponents
     });
 });
+StepperVertical.displayName = 'StepperVertical';
 export { StepperVertical };

package/dist/components/stepper-vertical/step-vertical/StepVertical.js

@@ -55,4 +55,5 @@ const StepVertical = /*#__PURE__*/ forwardRef(({ children, className, isActive,
         ]
     });
 });
+StepVertical.displayName = 'StepVertical';
 export { StepVertical };

package/dist/components/tab/Tabs.js

@@ -17,8 +17,7 @@ const Tabs = /*#__PURE__*/ forwardRef(({ config, children, className, onChange,
     let activeId = '';
     react.Children.forEach(children, (element, i)=>{
         if (/*#__PURE__*/ react.isValidElement(element)) {
-            if ('' === activeId) activeId = `${componentId.current}-tab-panel-${i}`;
-            else if (element.props.active) activeId = `${componentId.current}-tab-panel-${i}`;
+            if ('' === activeId || element.props.active) activeId = `${componentId.current}-tab-panel-${i}`;
         }
     });
     const [currentId, setId] = useState(activeId);
@@ -125,7 +124,7 @@ const Tabs = /*#__PURE__*/ forwardRef(({ config, children, className, onChange,
                 })
             ]
         }) : /*#__PURE__*/ jsxs("div", {
-            className: "fr-tab-bar",
+            className: classnames('fr-tab-bar', className),
             role: "tablist",
             ref: combinedRef,
             ...props,
@@ -191,4 +190,5 @@ const Tabs = /*#__PURE__*/ forwardRef(({ config, children, className, onChange,
         })
     });
 });
+Tabs.displayName = 'Tabs';
 export { Tabs };

package/dist/components/tab/tab-pane/TabPane.d.ts

@@ -1,9 +1,8 @@
 import './TabPane.scss';
-import type { ClassNamePropsWithChildren } from '../../../utils/types';
+import type React from 'react';
 import type { Tab } from '../interfaces';
-export interface TabPaneProps extends ClassNamePropsWithChildren, Tab {
-    readonly id?: string;
+export interface TabPaneProps extends React.ComponentPropsWithoutRef<'div'>, Tab {
     readonly isVisible?: boolean;
     readonly tabId?: string;
 }
-export declare function TabPane({ isVisible, children, className, tabId, id, }: TabPaneProps): import("react/jsx-runtime").JSX.Element;
+export declare const TabPane: (props: TabPaneProps & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null;

package/dist/components/tab/tab-pane/TabPane.js

@@ -1,7 +1,8 @@
 import { jsx } from "react/jsx-runtime";
 import "./TabPane.css";
 import classnames from "classnames";
-function TabPane({ isVisible = false, children, className, tabId, id }) {
+import { forwardRef } from "react";
+const TabPane = /*#__PURE__*/ forwardRef(({ isVisible = false, children, className, tabId, id, ...props }, ref)=>{
     const tabPaneClasses = classnames({
         'fr-show': isVisible
     }, {
@@ -12,7 +13,10 @@ function TabPane({ isVisible = false, children, className, tabId, id }) {
         role: "tabpanel",
         "aria-labelledby": tabId,
         className: tabPaneClasses,
+        ref: ref,
+        ...props,
         children: children
     });
-}
+});
+TabPane.displayName = 'TabPane';
 export { TabPane };

package/dist/components/table-header-cell/TableHeaderCell.d.ts

@@ -1,4 +1,5 @@
-export interface TableHeaderCellProps extends React.ThHTMLAttributes<HTMLTableCellElement> {
+import { type ComponentPropsWithoutRef } from 'react';
+export interface TableHeaderCellProps extends ComponentPropsWithoutRef<'th'> {
     readonly active?: boolean;
     readonly ascending: boolean;
 }

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

@@ -18,4 +18,5 @@ const TableHeaderCell = /*#__PURE__*/ forwardRef(({ active, ascending, className
         ref: ref
     });
 });
+TableHeaderCell.displayName = 'TableHeaderCell';
 export { TableHeaderCell };

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

@@ -1,15 +1,12 @@
 import './Checkbox.scss';
-export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'> {
-    readonly id?: string;
+import { type ComponentPropsWithoutRef } from 'react';
+export interface CheckboxProps extends Omit<ComponentPropsWithoutRef<'input'>, 'type' | 'onChange' | 'checked' | 'defaultChecked'> {
     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;
+export declare const Checkbox: (props: CheckboxProps & import("react").RefAttributes<HTMLLabelElement>) => React.ReactElement | null;

package/dist/forms/checkbox/Checkbox.js

@@ -1,8 +1,9 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import "./Checkbox.css";
 import classnames from "classnames";
+import { forwardRef } from "react";
 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 Checkbox = /*#__PURE__*/ forwardRef(({ id, checked: checkedProp, defaultChecked, onChange, name, large = false, valid = true, labelPosition = 'after', required, disabled = false, indeterminate = false, children, className, ...props }, ref)=>{
     const [isChecked, setChecked] = useControlled({
         controlled: checkedProp,
         default: defaultChecked ?? false
@@ -30,6 +31,7 @@ function Checkbox({ id, checked: checkedProp, defaultChecked, onChange, name, la
     return /*#__PURE__*/ jsxs("label", {
         className: containerClasses,
         htmlFor: id,
+        ref: ref,
         children: [
             /*#__PURE__*/ jsx("input", {
                 name: name,
@@ -76,5 +78,6 @@ function Checkbox({ id, checked: checkedProp, defaultChecked, onChange, name, la
             })
         ]
     });
-}
+});
+Checkbox.displayName = 'Checkbox';
 export { Checkbox };

package/dist/forms/combobox/ComboBox.css

@@ -0,0 +1,124 @@
+.fr-combobox-wrapper {
+  width: inherit;
+  min-width: 64px;
+  font-size: var(--fwe-font-size-base);
+  flex-direction: column;
+  padding-bottom: 18px;
+  display: flex;
+  position: relative;
+}
+
+.fr-combobox-label {
+  height: 18px;
+  color: var(--fwe-text);
+  font-size: var(--fwe-font-size-small);
+  line-height: var(--fwe-line-height-base);
+  font-weight: var(--fwe-font-weight-bold);
+  order: 1;
+}
+
+.fr-combobox-control {
+  order: 2;
+  position: relative;
+}
+
+.fr-combobox-input {
+  width: 100%;
+  height: 33px;
+  font-size: var(--fwe-font-size-base);
+  appearance: none;
+  border: none;
+  border-bottom: 1px solid var(--fwe-control-border);
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  cursor: pointer;
+  background: none;
+  outline: 0;
+  padding: 4px 24px 4px 0;
+  display: block;
+  overflow: hidden;
+}
+
+.fr-combobox-input:hover:not(:disabled), .fr-combobox-input:focus:not(:disabled) {
+  color: var(--fwe-hero);
+  border-color: var(--fwe-hero);
+}
+
+.fr-combobox-button {
+  cursor: pointer;
+  background-color: var(--fwe-text);
+  border: none;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  position: absolute;
+  top: 50%;
+  right: 0;
+  transform: translateY(-50%);
+  mask: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgyNHYyNEgweiIgZGF0YS1uYW1lPSJ3aGl0ZSBiYWNrZ3JvdW5kIi8+PHBhdGggZmlsbD0iIzMzMyIgZD0iTTUuNjM2IDkuMTcyIDEyIDE1LjUzNmw2LjM2NC02LjM2NC0uNzA3LS43MDhMMTIgMTQuMTIxIDYuMzQzIDguNDY0bC0uNzA3LjcwOHoiIGRhdGEtbmFtZT0iY29udGVudCIvPjwvc3ZnPg==) center / 24px 24px no-repeat;
+}
+
+.fr-combobox-button[aria-expanded="true"] {
+  transform: translateY(-50%)rotate(180deg);
+}
+
+.fr-combobox-description, .fr-combobox-invalid {
+  width: 100%;
+  font-size: var(--fwe-font-size-small);
+  line-height: var(--fwe-line-height-base);
+  position: absolute;
+  bottom: 0;
+}
+
+.fr-combobox-description {
+  color: var(--fwe-text-disabled);
+}
+
+.fr-combobox-invalid {
+  color: var(--fwe-red);
+  display: none;
+}
+
+.fr-combobox-wrapper.fr-disabled .fr-combobox-input {
+  cursor: default;
+  color: var(--fwe-text-disabled);
+  border-color: var(--fwe-control-disabled);
+}
+
+.fr-combobox-wrapper.fr-disabled .fr-combobox-label {
+  color: var(--fwe-text-disabled);
+}
+
+.fr-combobox-wrapper.fr-disabled .fr-combobox-button {
+  background-color: var(--fwe-text-disabled);
+  cursor: default;
+}
+
+.fr-combobox-wrapper.fr-invalid .fr-combobox-input {
+  border-color: var(--fwe-red);
+}
+
+.fr-combobox-wrapper.fr-invalid .fr-combobox-invalid {
+  display: block;
+}
+
+.fr-combobox-wrapper.fr-invalid .fr-combobox-description {
+  display: none;
+}
+
+.fwe-combobox-option-content {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  display: block;
+  overflow: hidden;
+}
+
+.fwe-combobox-highlight {
+  color: var(--fwe-hero);
+}
+
+.fwe-combobox-empty {
+  cursor: default;
+  color: var(--fwe-text-disabled);
+}
+

package/dist/forms/combobox/ComboBox.d.ts

@@ -0,0 +1,27 @@
+import './ComboBox.scss';
+import { type Ref } from 'react';
+export interface ComboBoxOption<T> {
+    readonly label: string;
+    readonly data: T;
+    readonly disabled?: boolean;
+}
+export interface ComboBoxProps<T> extends Omit<React.ComponentPropsWithoutRef<'div'>, 'onChange' | 'value' | 'defaultValue'> {
+    readonly value?: T;
+    readonly defaultValue?: T;
+    readonly name?: string;
+    readonly disabled?: boolean;
+    readonly required?: boolean;
+    readonly label?: string;
+    readonly options?: ComboBoxOption<T>[];
+    readonly hint?: string;
+    readonly error?: string;
+    readonly placeholder?: string;
+    readonly onChange?: (value: T) => void;
+    readonly onInputChange?: (value: string) => void;
+    readonly emptyMessage?: string;
+}
+declare function ComboBoxComponent<T>({ defaultValue, value: controlled, label, options, onChange, required, disabled, name, id: idProp, hint, error, placeholder, onInputChange, emptyMessage, className, ...props }: ComboBoxProps<T>, ref: Ref<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+export declare const ComboBox: <T>(props: ComboBoxProps<T> & {
+    ref?: Ref<HTMLDivElement>;
+}) => ReturnType<typeof ComboBoxComponent>;
+export {};

package/dist/forms/combobox/ComboBox.js

@@ -0,0 +1,174 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import "./ComboBox.css";
+import { Combobox, ComboboxButton, ComboboxInput, ComboboxOption, ComboboxOptions } from "@headlessui/react";
+import classnames from "classnames";
+import { forwardRef, useMemo, useState } from "react";
+import { useControlled } from "../../utils/useControlled.js";
+import { useId } from "../../utils/useId.js";
+function getHighlightedLabel(label, query) {
+    if (!query) return [
+        {
+            text: label,
+            highlighted: false
+        }
+    ];
+    const parts = [];
+    const lowerLabel = label.toLowerCase();
+    const lowerQuery = query.toLowerCase();
+    let currentIndex = 0;
+    while(currentIndex < label.length){
+        const matchIndex = lowerLabel.indexOf(lowerQuery, currentIndex);
+        if (-1 === matchIndex) {
+            parts.push({
+                text: label.slice(currentIndex),
+                highlighted: false
+            });
+            break;
+        }
+        if (matchIndex > currentIndex) parts.push({
+            text: label.slice(currentIndex, matchIndex),
+            highlighted: false
+        });
+        parts.push({
+            text: label.slice(matchIndex, matchIndex + query.length),
+            highlighted: true
+        });
+        currentIndex = matchIndex + query.length;
+    }
+    return parts;
+}
+function ComboBoxComponent({ defaultValue = '', value: controlled, label, options = [], onChange, required = false, disabled, name, id: idProp, hint, error, placeholder, onInputChange, emptyMessage = 'No results found', className, ...props }, ref) {
+    const id = useId(idProp);
+    const [value, setValue] = useControlled({
+        controlled,
+        default: defaultValue,
+        onChange
+    });
+    const [query, setQuery] = useState('');
+    const selectedOption = useMemo(()=>options.find((option)=>option.data === value && !option.disabled), [
+        options,
+        value
+    ]);
+    const filteredOptions = useMemo(()=>{
+        if (!query) return options;
+        const normalizedQuery = query.toLowerCase();
+        return options.filter((option)=>option.label.toLowerCase().includes(normalizedQuery));
+    }, [
+        options,
+        query
+    ]);
+    function handleChange(option) {
+        if (!option || option.disabled) return;
+        setValue(option.data);
+        setQuery('');
+    }
+    function handleInputChange(inputValue) {
+        setQuery(inputValue);
+        onInputChange?.(inputValue);
+    }
+    const inputClasses = classnames('fr-combobox-input', {
+        'fr-required': required,
+        'fr-disabled': disabled,
+        'fr-invalid': error,
+        'fr-empty': !query && !selectedOption
+    });
+    return /*#__PURE__*/ jsx(Combobox, {
+        value: selectedOption ?? null,
+        onChange: handleChange,
+        disabled: disabled,
+        immediate: true,
+        children: /*#__PURE__*/ jsxs("div", {
+            className: classnames(className, 'fr-combobox-wrapper', {
+                'fr-disabled': disabled,
+                'fr-invalid': error,
+                'fr-required': required
+            }),
+            ref: ref,
+            ...props,
+            children: [
+                /*#__PURE__*/ jsx("label", {
+                    className: "fr-combobox-label",
+                    htmlFor: id,
+                    children: label || ''
+                }),
+                /*#__PURE__*/ jsxs("div", {
+                    className: "fr-combobox-control",
+                    children: [
+                        /*#__PURE__*/ jsx(ComboboxInput, {
+                            className: inputClasses,
+                            id: id,
+                            required: required,
+                            disabled: disabled,
+                            placeholder: placeholder,
+                            autoComplete: "off",
+                            displayValue: (option)=>option?.label ?? '',
+                            onChange: (event)=>handleInputChange(event.target.value)
+                        }),
+                        /*#__PURE__*/ jsx(ComboboxButton, {
+                            className: "fr-combobox-button",
+                            disabled: disabled
+                        })
+                    ]
+                }),
+                name && /*#__PURE__*/ jsx("input", {
+                    type: "hidden",
+                    name: name,
+                    value: String(value ?? ''),
+                    disabled: disabled
+                }),
+                /*#__PURE__*/ jsxs(ComboboxOptions, {
+                    className: "fwe-options-container",
+                    as: "ul",
+                    portal: false,
+                    style: {
+                        minWidth: 'var(--input-width)'
+                    },
+                    anchor: {
+                        to: 'bottom start',
+                        gap: 12,
+                        padding: 8
+                    },
+                    children: [
+                        0 === filteredOptions.length && /*#__PURE__*/ jsx("li", {
+                            className: "fwe-combobox-option fwe-combobox-empty",
+                            children: /*#__PURE__*/ jsx("span", {
+                                className: "fwe-combobox-option-content",
+                                children: emptyMessage
+                            })
+                        }),
+                        filteredOptions.map((option)=>/*#__PURE__*/ jsx(ComboboxOption, {
+                                value: option,
+                                disabled: option.disabled,
+                                as: "li",
+                                className: ({ focus, selected, disabled: isDisabled })=>classnames('fwe-combobox-option', {
+                                        'fwe-selected': selected,
+                                        'fwe-focus': focus,
+                                        'fwe-disabled': isDisabled
+                                    }),
+                                children: /*#__PURE__*/ jsx("span", {
+                                    className: "fwe-combobox-option-content",
+                                    children: getHighlightedLabel(option.label, query).map((part, index)=>/*#__PURE__*/ jsx("span", {
+                                            className: classnames({
+                                                'fwe-combobox-highlight': part.highlighted
+                                            }),
+                                            children: part.text
+                                        }, `${part.text}-${index}`))
+                                })
+                            }, String(option.data)))
+                    ]
+                }),
+                hint && !error && /*#__PURE__*/ jsx("div", {
+                    className: "fr-combobox-description",
+                    children: hint
+                }),
+                error && /*#__PURE__*/ jsx("div", {
+                    className: "fr-combobox-invalid",
+                    children: error
+                })
+            ]
+        })
+    });
+}
+const ComboBox = /*#__PURE__*/ forwardRef(ComboBoxComponent);
+ComboBox.displayName = 'ComboBox';
+export { ComboBox };

package/dist/forms/multi-select/MultiSelect.css

@@ -0,0 +1,13 @@
+.fr-multiselect-chip-container {
+  flex-wrap: nowrap;
+  gap: 8px;
+  display: flex;
+  overflow: hidden;
+}
+
+.fr-multiselect-chip-ellipsis {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+

package/dist/forms/multi-select/MultiSelect.d.ts

@@ -0,0 +1,20 @@
+import type { Ref } from 'react';
+import type { SelectOption } from '../select/Select';
+import './MultiSelect.scss';
+export interface MultiSelectProps<T> extends Omit<React.ComponentPropsWithoutRef<'div'>, 'onChange' | 'value' | 'defaultValue'> {
+    readonly defaultValue?: T[];
+    readonly value?: T[];
+    readonly label?: string;
+    readonly options?: SelectOption<T>[];
+    readonly onChange?: (value: T[]) => void;
+    readonly disabled?: boolean;
+    readonly name?: string;
+    readonly hint?: string;
+    readonly error?: string;
+    readonly placeholder?: string;
+}
+declare function MultiSelectComponent<T>({ defaultValue, value: controlled, label, options, onChange, disabled, name, id: idProp, hint, error, placeholder, className, ...props }: MultiSelectProps<T>, ref: Ref<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+export declare const MultiSelect: <T>(props: MultiSelectProps<T> & {
+    ref?: Ref<HTMLDivElement>;
+}) => ReturnType<typeof MultiSelectComponent>;
+export {};