@festo-ui/react 11.0.0 → 11.1.0-dev.1008

package/dist/components/accordion/accordion-item/AccordionItem.css

@@ -30,11 +30,11 @@
   pointer-events: none;
   content: "";
   background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMiAzMiI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgzMnYzMkgweiIvPjxwYXRoIGZpbGw9IiMzMzMiIGQ9Im0xNiAyMi04LjcwNy04LjcwNyAxLjQxNC0xLjQxNEwxNiAxOS4xNzJsNy4yOTMtNy4yOTMgMS40MTQgMS40MTRMMTYgMjJ6IiAvPjwvc3ZnPg==);
-  width: 32px;
-  height: 32px;
+  width: 24px;
+  height: 24px;
   transition: transform .2s;
   position: absolute;
-  top: 21px;
+  top: 23px;
   right: 16px;
 }
 

package/dist/components/button/Button.js

@@ -8,9 +8,9 @@ const Button = /*#__PURE__*/ forwardRef(({ icon, type = 'button', disabled = fal
     }, {
         'fwe-disabled': disabled
     }, {
-        'fwe-btn-hero': primary && !tertiary
+        'fwe-btn-primary': primary && !tertiary
     }, {
-        'fwe-btn-link': tertiary && !primary
+        'fwe-btn-tertiary': tertiary && !primary
     }, {
         'fwe-btn-lg': large
     }, {

package/dist/components/modals/AlertModal.js

@@ -33,7 +33,7 @@ const AlertModal = /*#__PURE__*/ forwardRef(({ title, subtitle, alertType, stron
                     type: "button",
                     "aria-label": "Cancel",
                     className: classnames('fwe-btn fwe-btn-lg', {
-                        'fwe-btn-link': strong
+                        'fwe-btn-tertiary': strong
                     }),
                     onClick: onCancel,
                     children: cancel
@@ -42,7 +42,7 @@ const AlertModal = /*#__PURE__*/ forwardRef(({ title, subtitle, alertType, stron
                     type: "button",
                     "aria-label": "Ok",
                     className: classnames('fwe-btn fwe-btn-lg', {
-                        'fwe-btn-hero': !strong
+                        'fwe-btn-primary': !strong
                     }),
                     onClick: onOk,
                     children: ok

package/dist/components/modals/ConfirmModal.js

@@ -36,7 +36,7 @@ const ConfirmModal = /*#__PURE__*/ forwardRef(({ title, subtitle, cancel, ok, on
                 ok && /*#__PURE__*/ jsx("button", {
                     type: "button",
                     "aria-label": "Ok",
-                    className: "fwe-btn fwe-btn-hero fwe-btn-lg",
+                    className: "fwe-btn fwe-btn-primary fwe-btn-lg",
                     onClick: onOk,
                     children: ok
                 })

package/dist/components/modals/ModalBase.js

@@ -66,6 +66,7 @@ const ModalBase = /*#__PURE__*/ forwardRef(({ isOpen, isLoading, closeOnBackdrop
                 /*#__PURE__*/ jsx(CSSTransition, {
                     classNames: "fr-modal-backdrop",
                     in: isOpen,
+                    onExited: onCloseDone,
                     timeout: {
                         exit: 300
                     },
@@ -81,7 +82,6 @@ const ModalBase = /*#__PURE__*/ forwardRef(({ isOpen, isLoading, closeOnBackdrop
                 /*#__PURE__*/ jsx(CSSTransition, {
                     classNames: "fr-modal",
                     in: isOpen && !isLoading,
-                    onExited: onCloseDone,
                     timeout: {
                         exit: 300,
                         enter: 100

package/dist/components/modals/Prompt.js

@@ -49,7 +49,7 @@ const Prompt = /*#__PURE__*/ forwardRef(({ title, subtitle, hint, label, value,
                 ok && /*#__PURE__*/ jsx("button", {
                     type: "button",
                     "aria-label": "Ok",
-                    className: "fwe-btn fwe-btn-hero fwe-btn-lg",
+                    className: "fwe-btn fwe-btn-primary fwe-btn-lg",
                     onClick: ()=>onOk(innerValue),
                     children: ok
                 })

package/dist/components/pagination/Pagination.css

@@ -1,9 +1,9 @@
-.fwe-page-dot {
+.fwe-page-dot, .fwe-page-dot-lg {
   border: none;
   padding: 0;
 }
 
-.fwe-page-dot:focus {
+.fwe-page-dot:focus, .fwe-page-dot-lg:focus {
   background: var(--fwe-control-border-hover);
   outline: 0;
 }

package/dist/components/pagination/Pagination.d.ts

@@ -1,5 +1,5 @@
 import './Pagination.scss';
-export type PaginationType = 'SIMPLE' | 'NUMERIC' | 'DOTS';
+export type PaginationType = 'basic' | 'numeric' | 'dots' | 'dots-lg' | 'SIMPLE' | 'NUMERIC' | 'DOTS';
 export interface PaginationProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'onChange'> {
     readonly type?: PaginationType;
     readonly onChange?: (page: number, event: React.MouseEvent<HTMLButtonElement>) => void;

package/dist/components/pagination/Pagination.js

@@ -2,7 +2,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import "./Pagination.css";
 import classnames from "classnames";
 import { forwardRef, useEffect, useState } from "react";
-const Pagination = /*#__PURE__*/ forwardRef(({ pageMax, onChange, pageCurrent, defaultPageCurrent = 1, type = 'NUMERIC', className, ...props }, ref)=>{
+const Pagination = /*#__PURE__*/ forwardRef(({ pageMax, onChange, pageCurrent, defaultPageCurrent = 1, type = 'numeric', className, ...props }, ref)=>{
     const controlled = void 0 !== pageCurrent;
     const dotArray = Array.from(new Array(pageMax).keys());
     const [innerPageCurrent, setInnerPageCurrent] = useState(controlled ? pageCurrent : defaultPageCurrent);
@@ -32,66 +32,63 @@ const Pagination = /*#__PURE__*/ forwardRef(({ pageMax, onChange, pageCurrent, d
         const newPageCurrent = index + 1;
         handleChange(newPageCurrent, event);
     }
-    return /*#__PURE__*/ jsxs(Fragment, {
-        children: [
-            'DOTS' !== type && /*#__PURE__*/ jsxs("div", {
-                ...props,
-                className: classnames('fwe-pagination', {
-                    'fwe-d-none': pageMax < 2
-                }, className),
-                ref: ref,
-                children: [
-                    /*#__PURE__*/ jsx("button", {
-                        className: classnames('fwe-navigate-btn-down', {
-                            'fwe-disabled': innerPageCurrent <= 1
-                        }),
-                        onClick: onBtnDown,
+    return /*#__PURE__*/ jsx(Fragment, {
+        children: 'dots' === type || 'dots-lg' === type || 'DOTS' === type ? /*#__PURE__*/ jsx("div", {
+            ...props,
+            className: classnames({
+                'fwe-d-none': pageMax < 2
+            }, className),
+            ref: ref,
+            children: /*#__PURE__*/ jsx("div", {
+                className: "fwe-pagination",
+                children: dotArray.map((index)=>/*#__PURE__*/ jsx("button", {
                         type: "button",
-                        "aria-label": "navigate-btn-down"
-                    }),
-                    'NUMERIC' === type && /*#__PURE__*/ jsxs(Fragment, {
-                        children: [
-                            /*#__PURE__*/ jsx("span", {
-                                className: "fwe-page-current",
-                                children: innerPageCurrent
-                            }),
-                            /*#__PURE__*/ jsx("span", {
-                                className: "fwe-page-max",
-                                children: pageMax
-                            })
-                        ]
+                        className: classnames(`fwe-page-dot${'dots-lg' === type ? '-lg' : ''}`, {
+                            'fwe-selected': index + 1 === innerPageCurrent
+                        }),
+                        onClick: (e)=>onDotClick(index, e),
+                        "aria-label": `Go to page ${index + 1}`,
+                        "aria-current": index + 1 === innerPageCurrent ? 'page' : void 0
+                    }, index))
+            })
+        }) : /*#__PURE__*/ jsxs("div", {
+            ...props,
+            className: classnames('fwe-pagination', {
+                'fwe-d-none': pageMax < 2
+            }, className),
+            ref: ref,
+            children: [
+                /*#__PURE__*/ jsx("button", {
+                    className: classnames('fwe-navigate-btn-down', {
+                        'fwe-disabled': innerPageCurrent <= 1
                     }),
-                    /*#__PURE__*/ jsx("button", {
-                        className: classnames('fwe-navigate-btn-up', {
-                            'fwe-disabled': innerPageCurrent >= pageMax,
-                            'fwe-ml-4': 'SIMPLE' === type
+                    onClick: onBtnDown,
+                    type: "button",
+                    "aria-label": "navigate-btn-down"
+                }),
+                ('numeric' === type || 'NUMERIC' === type) && /*#__PURE__*/ jsxs(Fragment, {
+                    children: [
+                        /*#__PURE__*/ jsx("span", {
+                            className: "fwe-page-current",
+                            children: innerPageCurrent
                         }),
-                        onClick: onBtnUp,
-                        type: "button",
-                        "aria-label": "navigate-btn-up"
-                    })
-                ]
-            }),
-            'DOTS' === type && /*#__PURE__*/ jsx("div", {
-                ...props,
-                className: classnames({
-                    'fwe-d-none': pageMax < 2
-                }, className),
-                ref: ref,
-                children: /*#__PURE__*/ jsx("div", {
-                    className: "fwe-pagination",
-                    children: dotArray.map((index)=>/*#__PURE__*/ jsx("button", {
-                            type: "button",
-                            className: classnames('fwe-page-dot', {
-                                'fwe-selected': index + 1 === innerPageCurrent
-                            }),
-                            onClick: (e)=>onDotClick(index, e),
-                            "aria-label": `Go to page ${index + 1}`,
-                            "aria-current": index + 1 === innerPageCurrent ? 'page' : void 0
-                        }, index))
+                        /*#__PURE__*/ jsx("span", {
+                            className: "fwe-page-max",
+                            children: pageMax
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ jsx("button", {
+                    className: classnames('fwe-navigate-btn-up', {
+                        'fwe-disabled': innerPageCurrent >= pageMax,
+                        'fwe-ml-4': 'SIMPLE' === type
+                    }),
+                    onClick: onBtnUp,
+                    type: "button",
+                    "aria-label": "navigate-btn-up"
                 })
-            })
-        ]
+            ]
+        })
     });
 });
 Pagination.displayName = 'Pagination';

package/dist/components/popovers/popover/Popover.d.ts

@@ -13,6 +13,7 @@ export interface PopoverProps extends Omit<React.ComponentPropsWithoutRef<'div'>
     readonly onChange?: (isOpen: boolean) => void;
     readonly flip?: boolean;
     readonly showArrow?: boolean;
+    readonly keepMounted?: boolean;
     readonly onTriggerClick?: (event: MouseEvent) => void;
     readonly stopPropagation?: boolean;
 }

package/dist/components/popovers/popover/Popover.js

@@ -5,7 +5,7 @@ import classnames from "classnames";
 import { forwardRef, useRef } from "react";
 import { useControlled } from "../../../utils/useControlled.js";
 import { useForkRef } from "../../../utils/useForkRef.js";
-const Popover = /*#__PURE__*/ forwardRef(({ children, className, style, containerClassName, content, position, fallbackPositions, isOpen, openOnHover = false, openByDefault = false, onChange, flip: enableFlip = true, showArrow = true, onTriggerClick, stopPropagation = false, ...props }, ref)=>{
+const Popover = /*#__PURE__*/ forwardRef(({ children, className, style, containerClassName, content, position, fallbackPositions, isOpen, openOnHover = false, openByDefault = false, onChange, flip: enableFlip = true, showArrow = true, keepMounted = false, onTriggerClick, stopPropagation = false, ...props }, ref)=>{
     const [showPopover, setShowPopover] = useControlled({
         controlled: isOpen,
         default: openByDefault
@@ -50,6 +50,16 @@ const Popover = /*#__PURE__*/ forwardRef(({ children, className, style, containe
         click,
         hover
     ]);
+    function getPopoverProps() {
+        return {
+            onClick: (e)=>{
+                if (stopPropagation) {
+                    e.preventDefault();
+                    e.stopPropagation();
+                }
+            }
+        };
+    }
     return /*#__PURE__*/ jsxs(Fragment, {
         children: [
             /*#__PURE__*/ jsx("div", {
@@ -75,11 +85,14 @@ const Popover = /*#__PURE__*/ forwardRef(({ children, className, style, containe
                 }),
                 children: children
             }),
-            showPopover && /*#__PURE__*/ jsx(FloatingPortal, {
+            (showPopover || keepMounted) && /*#__PURE__*/ jsx(FloatingPortal, {
                 children: /*#__PURE__*/ jsxs("div", {
                     className: "fwe-popover-container",
                     ref: refs.setFloating,
-                    style: floatingStyles,
+                    style: {
+                        ...floatingStyles,
+                        display: showPopover ? void 0 : 'none'
+                    },
                     ...getFloatingProps(),
                     children: [
                         showArrow && /*#__PURE__*/ jsx(FloatingArrow, {
@@ -91,6 +104,7 @@ const Popover = /*#__PURE__*/ forwardRef(({ children, className, style, containe
                         }),
                         /*#__PURE__*/ jsx("div", {
                             className: classnames('fwe-popover', containerClassName),
+                            ...getPopoverProps(),
                             children: content
                         })
                     ]

package/dist/components/search-input/SearchInput.js

@@ -71,13 +71,13 @@ const SearchInput = /*#__PURE__*/ forwardRef(({ defaultValue, disabled, label, v
                 hasChildren && /*#__PURE__*/ jsx(ComboboxOptions, {
                     className: "fwe-search-suggestions",
                     as: "div",
-                    portal: false,
                     anchor: {
                         to: 'bottom start',
                         gap: 4
                     },
                     style: {
-                        minWidth: 'var(--input-width)'
+                        minWidth: 'var(--input-width)',
+                        zIndex: 1040
                     },
                     children: children
                 })

package/dist/components/snackbar/Snackbar.d.ts

@@ -1,7 +1,7 @@
 import './Snackbar.scss';
 export interface SnackbarConfig {
     type?: 'info' | 'warning' | 'error';
-    variant?: 'a' | 'b' | 'c';
+    variant?: 'light' | 'medium' | 'strong' | 'a' | 'b' | 'c';
     darkBackground?: boolean;
     showClose?: boolean;
     action?: string;

package/dist/components/snackbar/Snackbar.js

@@ -41,8 +41,8 @@ const Snackbar = /*#__PURE__*/ forwardRef(({ data, onAction, onClose, first = fa
             children: /*#__PURE__*/ jsxs("div", {
                 className: classnames({
                     'fwe-snackbar': true,
-                    'fwe-snackbar-b': data?.variant === 'b',
-                    'fwe-snackbar-c': data?.variant === 'c',
+                    'fwe-snackbar-light': data?.variant === 'light' || data?.variant === 'b',
+                    'fwe-snackbar-strong': data?.variant === 'strong' || data?.variant === 'c',
                     'fwe-snackbar-info': data?.type === 'info',
                     'fwe-snackbar-warning': data?.type === 'warning',
                     'fwe-snackbar-error': data?.type === 'error',

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

@@ -1,5 +1,5 @@
 import './ComboBox.scss';
-import { type Ref } from 'react';
+import { type ReactNode, type Ref } from 'react';
 export interface ComboBoxOption<T> {
     readonly label: string;
     readonly data: T;
@@ -11,7 +11,7 @@ export interface ComboBoxProps<T> extends Omit<React.ComponentPropsWithoutRef<'d
     readonly name?: string;
     readonly disabled?: boolean;
     readonly required?: boolean;
-    readonly label?: string;
+    readonly label?: ReactNode;
     readonly options?: ComboBoxOption<T>[];
     readonly hint?: string;
     readonly error?: string;

package/dist/forms/combobox/ComboBox.js

@@ -119,9 +119,9 @@ function ComboBoxComponent({ defaultValue = '', value: controlled, label, option
                 /*#__PURE__*/ jsxs(ComboboxOptions, {
                     className: "fwe-options-container",
                     as: "ul",
-                    portal: false,
                     style: {
-                        minWidth: 'var(--input-width)'
+                        minWidth: 'var(--input-width)',
+                        zIndex: 1040
                     },
                     anchor: {
                         to: 'bottom start',

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

@@ -1,10 +1,10 @@
-import type { Ref } from 'react';
+import type { ReactNode, 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 label?: ReactNode;
     readonly options?: SelectOption<T>[];
     readonly onChange?: (value: T[]) => void;
     readonly disabled?: boolean;

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

@@ -122,9 +122,9 @@ function MultiSelectComponent({ defaultValue = [], value: controlled, label, opt
                 /*#__PURE__*/ jsx(ListboxOptions, {
                     className: "fwe-options-container fwe-options-container--multi-select",
                     as: "ul",
-                    portal: false,
                     style: {
-                        minWidth: 'var(--button-width)'
+                        minWidth: 'var(--button-width)',
+                        zIndex: 1040
                     },
                     anchor: {
                         to: 'bottom start',

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

@@ -4,7 +4,7 @@ export interface SegmentConfiguration {
     readonly iconOnly?: boolean;
 }
 export interface SegmentProps extends PropsWithChildren, Omit<ComponentPropsWithoutRef<'fieldset'>, 'onChange' | 'defaultValue' | 'required' | 'disabled'> {
-    readonly legend: string;
+    readonly legend: React.ReactNode;
     readonly config?: SegmentConfiguration;
     readonly onChange?: (value: any, event: ChangeEvent<HTMLInputElement>) => void;
     readonly value?: any;

package/dist/forms/select/Select.css

@@ -0,0 +1,8 @@
+.fwe-select:focus:not(:disabled), .fwe-select[aria-expanded="true"]:not(:disabled) {
+  border-color: var(--fwe-hero);
+}
+
+:is(.fwe-select:focus.fwe-invalid, .fwe-select:focus:user-invalid, .fwe-select[aria-expanded="true"].fwe-invalid, .fwe-select[aria-expanded="true"]:user-invalid) {
+  border-color: var(--fwe-red);
+}
+

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

@@ -1,3 +1,4 @@
+import './Select.scss';
 import { type ReactNode, type Ref } from 'react';
 export interface SelectOption<T> {
     readonly data: T;
@@ -10,7 +11,7 @@ export interface SelectProps<T> extends Omit<React.ComponentPropsWithoutRef<'div
     readonly name?: string;
     readonly disabled?: boolean;
     readonly required?: boolean;
-    readonly label?: string;
+    readonly label?: ReactNode;
     readonly options?: SelectOption<T>[];
     readonly hint?: string;
     readonly error?: string;

package/dist/forms/select/Select.js

@@ -1,4 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
+import "./Select.css";
 import { Listbox, ListboxButton, ListboxOption, ListboxOptions } from "@headlessui/react";
 import classnames from "classnames";
 import { forwardRef, useMemo } from "react";
@@ -38,6 +39,15 @@ function SelectComponent({ defaultValue = '', value: controlled, label, options
                     id: id,
                     "aria-labelledby": label ? labelId : void 0,
                     disabled: disabled,
+                    onKeyDown: (event)=>{
+                        if ('Enter' === event.key) {
+                            event.preventDefault();
+                            event.currentTarget.dispatchEvent(new KeyboardEvent('keydown', {
+                                key: 'ArrowDown',
+                                bubbles: true
+                            }));
+                        }
+                    },
                     children: selectedOption ? selectedOption.label : placeholder ?? ''
                 }),
                 /*#__PURE__*/ jsx("label", {
@@ -49,9 +59,9 @@ function SelectComponent({ defaultValue = '', value: controlled, label, options
                 /*#__PURE__*/ jsx(ListboxOptions, {
                     className: "fwe-options-container",
                     as: "ul",
-                    portal: false,
                     style: {
-                        minWidth: 'var(--button-width)'
+                        minWidth: 'var(--button-width)',
+                        zIndex: 1040
                     },
                     anchor: {
                         to: 'bottom start',

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

@@ -1,12 +1,12 @@
 import './Slider.scss';
-import { type ComponentPropsWithoutRef } from 'react';
+import { type ComponentPropsWithoutRef, type ReactNode } from 'react';
 export interface SliderProps extends Omit<ComponentPropsWithoutRef<'input'>, 'type' | 'onChange' | 'value' | 'defaultValue' | 'min' | 'max' | 'step'> {
     readonly min: number;
     readonly max: number;
     readonly step?: number;
     readonly value: number;
     readonly onChangeCommitted?: (value: number) => void;
-    readonly label?: string;
+    readonly label?: ReactNode;
     readonly showValue?: boolean;
     readonly onChange?: (value: number, event: React.ChangeEvent<HTMLInputElement>) => void;
     readonly widthOffset?: number;

package/dist/forms/switch/Switch.d.ts

@@ -2,7 +2,7 @@ import { type ComponentPropsWithoutRef } from 'react';
 export interface SwitchProps extends Omit<ComponentPropsWithoutRef<'input'>, 'type' | 'onChange' | 'value' | 'defaultValue' | 'checked'> {
     readonly labelPosition?: 'before' | 'after' | 'below';
     readonly large?: boolean;
-    readonly title: string;
+    readonly title?: string;
     readonly value?: boolean;
     readonly defaultValue?: boolean;
     readonly onChange?: (value: boolean, event: React.ChangeEvent<HTMLInputElement>) => void;

package/dist/forms/switch/Switch.js

@@ -37,7 +37,7 @@ const Switch = /*#__PURE__*/ forwardRef(({ labelPosition = 'after', large = fals
             /*#__PURE__*/ jsx("div", {
                 className: "fwe-switch-track"
             }),
-            /*#__PURE__*/ jsx("div", {
+            !!title && /*#__PURE__*/ jsx("div", {
                 className: "fwe-switch-label-content",
                 children: title
             })

package/dist/forms/text-area/TextArea.d.ts

@@ -4,7 +4,7 @@ export interface TextAreaProps extends Omit<ComponentPropsWithoutRef<'textarea'>
     readonly value?: string;
     readonly defaultValue?: string;
     readonly onChange?: (value: string, event: React.ChangeEvent<HTMLTextAreaElement>) => void;
-    readonly label: string;
+    readonly label: React.ReactNode;
     readonly hint?: string;
     readonly error?: string;
     readonly rows?: number;

package/dist/forms/text-input/TextInput.d.ts

@@ -4,7 +4,7 @@ export interface TextInputProps extends Omit<ComponentPropsWithoutRef<'input'>,
     readonly?: boolean;
     value?: string;
     defaultValue?: string;
-    label?: string;
+    label?: ReactNode;
     hint?: string;
     error?: string;
     icon?: ReactNode;

package/dist/forms/text-input/TextInput.js

@@ -5,6 +5,7 @@ import { forwardRef, useEffect, useRef } from "react";
 import { useId } from "../../utils/useId.js";
 const SUPPORTED_INPUT_TYPES = [
     'text',
+    'email',
     'number',
     'password',
     'datetime-local'