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

package/dist/components/modals/AlertModal.js

@@ -1,9 +1,9 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import classnames from "classnames";
+import { forwardRef } from "react";
 import { Modal } from "./Modal.js";
 import { ModalFooter } from "./ModalFooter.js";
-function AlertModal({ title, subtitle, alertType, strong, cancel, ok, onCancel, onOk, className, body, ...props }) {
-    return /*#__PURE__*/ jsx(Modal, {
+const AlertModal = /*#__PURE__*/ forwardRef(({ title, subtitle, alertType, strong, cancel, ok, onCancel, onOk, className, body, ...props }, ref)=>/*#__PURE__*/ jsx(Modal, {
         className: classnames({
             'fwe-modal--with-indicator-bar': strong,
             'fwe-modal--warning': 'warning' === alertType,
@@ -25,6 +25,7 @@ function AlertModal({ title, subtitle, alertType, strong, cancel, ok, onCancel,
         body: 'string' == typeof body ? /*#__PURE__*/ jsx("p", {
             children: body
         }) : body,
+        ref: ref,
         ...props,
         children: (cancel || ok) && /*#__PURE__*/ jsxs(ModalFooter, {
             children: [
@@ -48,6 +49,6 @@ function AlertModal({ title, subtitle, alertType, strong, cancel, ok, onCancel,
                 })
             ]
         })
-    });
-}
+    }));
+AlertModal.displayName = 'AlertModal';
 export { AlertModal };

package/dist/components/modals/ConfirmModal.d.ts

@@ -8,4 +8,4 @@ export interface ConfirmModalProps extends Omit<ModalProps, 'head' | 'children'>
     readonly onOk?: () => void;
     readonly large?: boolean;
 }
-export declare function ConfirmModal({ title, subtitle, cancel, ok, onCancel, onOk, large, body, className, ...props }: ConfirmModalProps): import("react/jsx-runtime").JSX.Element;
+export declare const ConfirmModal: (props: ConfirmModalProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;

package/dist/components/modals/ConfirmModal.js

@@ -1,9 +1,9 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import classnames from "classnames";
+import { forwardRef } from "react";
 import { Modal } from "./Modal.js";
 import { ModalFooter } from "./ModalFooter.js";
-function ConfirmModal({ title, subtitle, cancel, ok, onCancel, onOk, large, body, className, ...props }) {
-    return /*#__PURE__*/ jsx(Modal, {
+const ConfirmModal = /*#__PURE__*/ forwardRef(({ title, subtitle, cancel, ok, onCancel, onOk, large, body, className, ...props }, ref)=>/*#__PURE__*/ jsx(Modal, {
         className: classnames({
             'fwe-modal--large': large
         }, className),
@@ -22,6 +22,7 @@ function ConfirmModal({ title, subtitle, cancel, ok, onCancel, onOk, large, body
         body: 'string' == typeof body ? /*#__PURE__*/ jsx("p", {
             children: body
         }) : body,
+        ref: ref,
         ...props,
         children: (cancel || ok) && /*#__PURE__*/ jsxs(ModalFooter, {
             children: [
@@ -41,6 +42,6 @@ function ConfirmModal({ title, subtitle, cancel, ok, onCancel, onOk, large, body
                 })
             ]
         })
-    });
-}
+    }));
+ConfirmModal.displayName = 'ConfirmModal';
 export { ConfirmModal };

package/dist/components/modals/CustomModal.js

@@ -35,4 +35,5 @@ const CustomModal = /*#__PURE__*/ forwardRef(({ large, title, subtitle, classNam
             children
         ]
     }));
+CustomModal.displayName = 'CustomModal';
 export { CustomModal };

package/dist/components/modals/Modal.js

@@ -28,4 +28,5 @@ const Modal = /*#__PURE__*/ forwardRef(({ head, body, className, children, ...pr
             children
         ]
     }));
+Modal.displayName = 'Modal';
 export { Modal };

package/dist/components/modals/ModalBase.js

@@ -121,4 +121,5 @@ const ModalBase = /*#__PURE__*/ forwardRef(({ isOpen, isLoading, onClose, onClos
         }), container.body)
     });
 });
+ModalBase.displayName = 'ModalBase';
 export { ModalBase };

package/dist/components/modals/ModalFooter.d.ts

@@ -1,2 +1,2 @@
-import type { ClassNamePropsWithChildren } from '../../utils/types';
-export declare const ModalFooter: (props: ClassNamePropsWithChildren & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;
+import type React from 'react';
+export declare const ModalFooter: (props: Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null;

package/dist/components/modals/ModalFooter.js

@@ -1,12 +1,14 @@
 import { jsx } from "react/jsx-runtime";
 import classnames from "classnames";
 import { forwardRef } from "react";
-const ModalFooter = /*#__PURE__*/ forwardRef(({ children, className }, ref)=>/*#__PURE__*/ jsx("div", {
+const ModalFooter = /*#__PURE__*/ forwardRef(({ children, className, ...props }, ref)=>/*#__PURE__*/ jsx("div", {
         ref: ref,
         className: classnames('fwe-modal-footer', className),
+        ...props,
         children: /*#__PURE__*/ jsx("div", {
             className: classnames('fwe-modal-buttons'),
             children: children
         })
     }));
+ModalFooter.displayName = 'ModalFooter';
 export { ModalFooter };

package/dist/components/modals/Prompt.d.ts

@@ -1,15 +1,15 @@
 import type React from 'react';
 import { type ModalProps } from './Modal';
-export interface PromptProps extends Omit<ModalProps, 'head' | 'body' | 'children'> {
+export interface PromptProps extends Omit<ModalProps, 'head' | 'body' | 'children' | 'onChange'> {
     readonly title: string;
     readonly subtitle?: string;
     readonly hint?: string;
     readonly label?: string;
     readonly value?: string;
-    readonly onChange: (event: React.FormEvent<HTMLInputElement>) => void;
+    readonly onChange?: (value: string, event: React.ChangeEvent<HTMLInputElement>) => void;
     readonly cancel?: string;
     readonly ok?: string;
     readonly onCancel?: () => void;
     readonly onOk: (value: string | undefined) => void;
 }
-export declare function Prompt({ title, subtitle, hint, label, value, onChange, onOk, onCancel, cancel, ok, ...props }: PromptProps): JSX.Element;
+export declare const Prompt: (props: PromptProps & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null;

package/dist/components/modals/Prompt.js

@@ -1,20 +1,21 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from "react";
+import { forwardRef, useEffect, useState } from "react";
 import { TextInput } from "../../forms/text-input/TextInput.js";
 import { Modal } from "./Modal.js";
 import { ModalFooter } from "./ModalFooter.js";
-function Prompt({ title, subtitle, hint, label, value, onChange, onOk, onCancel, cancel, ok, ...props }) {
+const Prompt = /*#__PURE__*/ forwardRef(({ title, subtitle, hint, label, value, onChange, onOk, onCancel, cancel, ok, className, ...props }, ref)=>{
     const [innerValue, setInnerValue] = useState(value);
     useEffect(()=>{
         setInnerValue(value);
     }, [
         value
     ]);
-    function handleChange(e) {
-        setInnerValue(e.target.value);
-        if (onChange) onChange(e);
+    function handleChange(newValue, e) {
+        setInnerValue(newValue);
+        if (onChange) onChange(newValue, e);
     }
     return /*#__PURE__*/ jsx(Modal, {
+        className: className,
         head: /*#__PURE__*/ jsxs(Fragment, {
             children: [
                 subtitle && /*#__PURE__*/ jsx("h2", {
@@ -34,6 +35,7 @@ function Prompt({ title, subtitle, hint, label, value, onChange, onOk, onCancel,
             value: innerValue,
             autoFocus: true
         }),
+        ref: ref,
         ...props,
         children: (cancel || ok) && /*#__PURE__*/ jsxs(ModalFooter, {
             children: [
@@ -54,5 +56,6 @@ function Prompt({ title, subtitle, hint, label, value, onChange, onOk, onCancel,
             ]
         })
     });
-}
+});
+Prompt.displayName = 'Prompt';
 export { Prompt };

package/dist/components/modals/image-gallery/ImageGallery.css

@@ -110,12 +110,30 @@
     & > .swiper-wrapper {
       scroll-snap-type: x mandatory;
     }
+
+    & > .swiper-wrapper > .swiper-slide:first-child {
+      margin-inline-start: var(--swiper-slides-offset-before);
+      scroll-margin-inline-start: var(--swiper-slides-offset-before);
+    }
+
+    & > .swiper-wrapper > .swiper-slide:last-child {
+      margin-inline-end: var(--swiper-slides-offset-after);
+    }
   }
 
   &.swiper-vertical {
     & > .swiper-wrapper {
       scroll-snap-type: y mandatory;
     }
+
+    & > .swiper-wrapper > .swiper-slide:first-child {
+      margin-block-start: var(--swiper-slides-offset-before);
+      scroll-margin-block-start: var(--swiper-slides-offset-before);
+    }
+
+    & > .swiper-wrapper > .swiper-slide:last-child {
+      margin-block-end: var(--swiper-slides-offset-after);
+    }
   }
 
   &.swiper-free-mode {
@@ -298,7 +316,7 @@
     display: none !important;
   }
 
-  & svg {
+  & ::slotted(svg), & svg {
     object-fit: contain;
     transform-origin: center;
     fill: currentColor;
@@ -321,7 +339,7 @@
   left: var(--swiper-navigation-sides-offset, 4px);
   right: auto;
 
-  & .swiper-navigation-icon {
+  & ::slotted(.swiper-navigation-icon), & .swiper-navigation-icon {
     transform: rotate(180deg);
   }
 }
@@ -349,13 +367,13 @@
   }
 
   & .swiper-button-prev, & ~ .swiper-button-prev, &.swiper-rtl .swiper-button-next, &.swiper-rtl ~ .swiper-button-next {
-    & .swiper-navigation-icon {
+    & ::slotted(.swiper-navigation-icon), & .swiper-navigation-icon {
       transform: rotate(180deg);
     }
   }
 
   &.swiper-rtl .swiper-button-prev, &.swiper-rtl ~ .swiper-button-prev {
-    & .swiper-navigation-icon {
+    & ::slotted(.swiper-navigation-icon), & .swiper-navigation-icon {
       transform: rotate(0);
     }
   }
@@ -373,7 +391,7 @@
     top: var(--swiper-navigation-sides-offset, 4px);
     bottom: auto;
 
-    & .swiper-navigation-icon {
+    & ::slotted(.swiper-navigation-icon), & .swiper-navigation-icon {
       transform: rotate(-90deg);
     }
   }
@@ -382,7 +400,7 @@
     bottom: var(--swiper-navigation-sides-offset, 4px);
     top: auto;
 
-    & .swiper-navigation-icon {
+    & ::slotted(.swiper-navigation-icon), & .swiper-navigation-icon {
       transform: rotate(90deg);
     }
   }

package/dist/components/modals/image-gallery/ImageGallery.d.ts

@@ -18,4 +18,4 @@ export interface ImageGalleryProps extends ComponentPropsWithoutRef<'div'>, Moda
     descriptiveContent?: boolean | ((index: number) => React.ReactNode);
     onSlideChanged?: (index: number) => void;
 }
-export declare const ImageGallery: (props: ImageGalleryProps & import("react").RefAttributes<HTMLImageElement>) => React.ReactElement | null;
+export declare const ImageGallery: (props: ImageGalleryProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;

package/dist/components/modals/image-gallery/ImageGallery.js

@@ -100,4 +100,5 @@ const ImageGallery = /*#__PURE__*/ forwardRef(({ isOpen, startIndex, images, thu
         ]
     });
 });
+ImageGallery.displayName = 'ImageGallery';
 export { ImageGallery };

package/dist/components/modals/image-gallery/ImageGallerySwiper.js

@@ -36,5 +36,5 @@ function ImageGallerySwiper({ images, onSlideChanged, thumbsSwiper, startIndex }
             }, image.src))
     });
 }
-ImageGallerySwiper.displayName = 'Swiper';
+ImageGallerySwiper.displayName = 'ImageGallerySwiper';
 export { ImageGallerySwiper };

package/dist/components/modals/image-gallery/internal/ImageGalleryContainer.d.ts

@@ -2,4 +2,4 @@ export interface ImageGalleryContainerProps {
     children: React.ReactNode;
     descriptiveContent?: boolean;
 }
-export declare function ImageGalleryContainer({ children, descriptiveContent, }: ImageGalleryContainerProps): string | number | boolean | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
+export declare function ImageGalleryContainer({ children, descriptiveContent, }: ImageGalleryContainerProps): string | number | bigint | boolean | Iterable<import("react").ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element | null | undefined;

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

@@ -1,15 +1,14 @@
 import './Pagination.scss';
-import type { ClassNameProps } from '../../utils/types';
 export declare enum PaginationType {
     Simple = "SIMPLE",
     Numeric = "NUMERIC",
     Dots = "DOTS"
 }
-export interface PaginationProps extends ClassNameProps {
+export interface PaginationProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'onChange'> {
     readonly type?: PaginationType;
-    readonly onChange?: (page: number) => void;
+    readonly onChange?: (page: number, event: React.MouseEvent<HTMLButtonElement>) => void;
     readonly pageCurrent?: number;
     readonly defaultPageCurrent?: number;
     readonly pageMax: number;
 }
-export declare function Pagination(props: PaginationProps): import("react/jsx-runtime").JSX.Element;
+export declare const Pagination: (props: PaginationProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;

package/dist/components/pagination/Pagination.js

@@ -1,15 +1,14 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import "./Pagination.css";
 import classnames from "classnames";
-import { useEffect, useState } from "react";
+import { forwardRef, useEffect, useState } from "react";
 var Pagination_PaginationType = /*#__PURE__*/ function(PaginationType) {
     PaginationType["Simple"] = "SIMPLE";
     PaginationType["Numeric"] = "NUMERIC";
     PaginationType["Dots"] = "DOTS";
     return PaginationType;
 }({});
-function Pagination(props) {
-    const { pageMax, onChange, pageCurrent, defaultPageCurrent = 1, type = "NUMERIC", className } = props;
+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);
@@ -19,32 +18,34 @@ function Pagination(props) {
         pageCurrent,
         controlled
     ]);
-    function handleChange(newPage) {
+    function handleChange(newPage, event) {
         if (!controlled) setInnerPageCurrent(newPage);
-        if (onChange) onChange(newPage);
+        if (onChange) onChange(newPage, event);
     }
-    function onBtnDown() {
+    function onBtnDown(event) {
         if (innerPageCurrent > 1) {
             const newPageCurrent = innerPageCurrent - 1;
-            handleChange(newPageCurrent);
+            handleChange(newPageCurrent, event);
         }
     }
-    function onBtnUp() {
+    function onBtnUp(event) {
         if (innerPageCurrent < pageMax) {
             const newPageCurrent = innerPageCurrent + 1;
-            handleChange(newPageCurrent);
+            handleChange(newPageCurrent, event);
         }
     }
-    function onDotClick(index) {
+    function onDotClick(index, event) {
         const newPageCurrent = index + 1;
-        handleChange(newPageCurrent);
+        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', {
@@ -78,9 +79,11 @@ function Pagination(props) {
                 ]
             }),
             "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", {
@@ -88,7 +91,7 @@ function Pagination(props) {
                             className: classnames('fwe-page-dot', {
                                 'fwe-selected': index + 1 === innerPageCurrent
                             }),
-                            onClick: ()=>onDotClick(index),
+                            onClick: (e)=>onDotClick(index, e),
                             "aria-label": `Go to page ${index + 1}`,
                             "aria-current": index + 1 === innerPageCurrent ? 'page' : void 0
                         }, index))
@@ -96,5 +99,6 @@ function Pagination(props) {
             })
         ]
     });
-}
+});
+Pagination.displayName = 'Pagination';
 export { Pagination, Pagination_PaginationType as PaginationType };

package/dist/components/popovers/legend/Legend.d.ts

@@ -1,9 +1,11 @@
 import { type PopoverProps } from '../popover/Popover';
-export interface PopoverLegendItem {
+export interface LegendItem {
     readonly name: string;
     readonly text: string;
 }
-export interface LegendProps extends Omit<PopoverProps, 'popoverContent'> {
-    readonly items: PopoverLegendItem[];
+export interface LegendProps extends Omit<PopoverProps, 'content'> {
+    readonly items: LegendItem[];
 }
-export declare function Legend({ items, ...props }: LegendProps): import("react/jsx-runtime").JSX.Element;
+export declare const Legend: (props: LegendProps & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;

package/dist/components/popovers/legend/Legend.js

@@ -1,6 +1,8 @@
 import { jsx, jsxs } from "react/jsx-runtime";
+import classnames from "classnames";
+import { forwardRef } from "react";
 import { Popover } from "../popover/Popover.js";
-function Legend({ items, ...props }) {
+const Legend = /*#__PURE__*/ forwardRef(({ items, containerClassName, ...props }, ref)=>{
     const content = items.map((item)=>/*#__PURE__*/ jsxs("dl", {
             className: "fwe-popover-legend-content",
             children: [
@@ -13,9 +15,11 @@ function Legend({ items, ...props }) {
             ]
         }, item.name));
     return /*#__PURE__*/ jsx(Popover, {
-        popoverContent: content,
-        popoverClassName: "fwe-popover--legend",
+        content: content,
+        containerClassName: classnames('fwe-popover--legend', containerClassName),
+        ref: ref,
         ...props
     });
-}
+});
+Legend.displayName = 'Legend';
 export { Legend };

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

@@ -1,56 +1,9 @@
-#arrow, #arrow:after {
-  width: 12px;
-  height: 12px;
-  position: absolute;
-  transform: rotate(45deg);
+.fwe-popover-container {
+  z-index: var(--fwe-z-index-popover);
+  filter: drop-shadow(0 1px 3px #3336);
 }
 
-#arrow {
-  width: 17px;
-  height: 17px;
-  overflow: hidden;
-}
-
-#arrow:after {
-  content: "";
-  z-index: -1;
-  background: #fff;
-  box-shadow: 0 1px 4px #3333;
-}
-
-.fwe-popover-container[data-popper-placement^="top"] > #arrow {
-  top: 100%;
-}
-
-.fwe-popover-container[data-popper-placement^="top"] > #arrow:after {
-  top: -6px;
-  left: 3px;
-}
-
-.fwe-popover-container[data-popper-placement^="bottom"] > #arrow {
-  top: -17px;
-}
-
-.fwe-popover-container[data-popper-placement^="bottom"] > #arrow:after {
-  top: 11px;
-  left: 3px;
-}
-
-.fwe-popover-container[data-popper-placement^="left"] > #arrow {
-  left: 100%;
-}
-
-.fwe-popover-container[data-popper-placement^="left"] > #arrow:after {
-  top: 2px;
-  left: -6px;
-}
-
-.fwe-popover-container[data-popper-placement^="right"] > #arrow {
-  left: -17px;
-}
-
-.fwe-popover-container[data-popper-placement^="right"] > #arrow:after {
-  top: 2px;
-  left: 11px;
+.fwe-popover-container .fwe-popover {
+  box-shadow: none;
 }
 

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

@@ -1,21 +1,19 @@
 import './Popover.scss';
-import type { Placement } from '@popperjs/core';
-import type React from 'react';
-import type { ClassNamePropsWithChildren } from '../../../utils/types';
-export interface PopoverProps extends ClassNamePropsWithChildren {
-    readonly popoverContent: React.ReactNode;
+import { type Placement } from '@floating-ui/react';
+import { type MouseEvent, type ReactNode } from 'react';
+export interface PopoverProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'content' | 'onChange'> {
+    readonly 'data-testid'?: string;
+    readonly containerClassName?: string;
+    readonly content: ReactNode;
     readonly position?: Placement;
     readonly fallbackPositions?: Placement[];
+    readonly isOpen?: boolean;
     readonly openOnHover?: boolean;
-    readonly defaultOpen?: boolean;
-    readonly open?: boolean;
-    readonly onStatusChange?: (status: boolean) => void;
-    readonly wrapper?: (children: React.ReactNode) => React.ReactNode;
+    readonly openByDefault?: boolean;
+    readonly onChange?: (isOpen: boolean) => void;
     readonly flip?: boolean;
-    readonly containerClassName?: string;
-    readonly popoverClassName?: string;
+    readonly showArrow?: boolean;
+    readonly onTriggerClick?: (event: MouseEvent) => void;
     readonly stopPropagation?: boolean;
-    readonly arrow?: boolean;
-    readonly onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
 }
-export declare function Popover({ popoverContent, children, position, fallbackPositions, openOnHover, defaultOpen, open, onStatusChange, wrapper, className, flip, containerClassName, popoverClassName, stopPropagation, arrow, onClick, }: PopoverProps): import("react/jsx-runtime").JSX.Element;
+export declare const Popover: (props: PopoverProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;