@festo-ui/react 9.0.1-dev.782 → 9.0.1-dev.784

package/dist/components/snackbar/SnackbarContext.js

@@ -0,0 +1,3 @@
+import react from "react";
+const SnackbarContext = react.createContext(null);
+export { SnackbarContext };

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

@@ -0,0 +1,7 @@
+import type { ClassNamePropsWithChildren } from '../../utils/types';
+import { type SnackbarConfig, type SnackbarData } from './Snackbar';
+export interface SnackbarProviderProps extends ClassNamePropsWithChildren {
+    readonly config?: SnackbarConfig;
+}
+export declare function SnackbarProvider(props: SnackbarProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare const addSnackbar: (snackData: SnackbarData, onAction?: () => void, onClose?: () => void) => string | number;

package/dist/components/snackbar/SnackbarProvider.js

@@ -0,0 +1,66 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import classnames from "classnames";
+import { useCallback, useMemo, useState } from "react";
+import { Snackbar } from "./Snackbar.js";
+import { SnackbarContext } from "./SnackbarContext.js";
+let addSnackbarFunction;
+function SnackbarProvider(props) {
+    const { config = {
+        darkBackground: true
+    }, children, className } = props;
+    const [snacks, setSnacks] = useState([]);
+    const addSnackbar = useCallback((snackData, onAction, onClose)=>{
+        const key = snackData.key ?? Date.now() + Math.random();
+        setSnacks((prevSnacks)=>[
+                {
+                    data: {
+                        ...config,
+                        ...snackData
+                    },
+                    onAction,
+                    onClose,
+                    key,
+                    first: 0 === prevSnacks.length
+                },
+                ...prevSnacks
+            ]);
+        return key;
+    }, [
+        config
+    ]);
+    addSnackbarFunction = addSnackbar;
+    const closeSnackbar = useCallback((key)=>{
+        if (void 0 !== key) setSnacks((prevSnacks)=>prevSnacks.filter((snack)=>snack.key !== key));
+    }, []);
+    function handleClose(snack) {
+        closeSnackbar(snack.key);
+        if (snack.onClose) snack.onClose();
+    }
+    const contextValue = useMemo(()=>({
+            addSnackbar,
+            closeSnackbar
+        }), [
+        addSnackbar,
+        closeSnackbar
+    ]);
+    return /*#__PURE__*/ jsxs(SnackbarContext.Provider, {
+        value: contextValue,
+        children: [
+            children,
+            /*#__PURE__*/ jsx("div", {
+                className: classnames('fwe-snackbar-container', className),
+                children: snacks.map((snack)=>/*#__PURE__*/ jsx(Snackbar, {
+                        data: snack.data,
+                        onAction: ()=>snack.onAction ? snack.onAction() : void 0,
+                        onClose: ()=>handleClose(snack),
+                        first: snack.first
+                    }, snack.key))
+            })
+        ]
+    });
+}
+const SnackbarProvider_addSnackbar = (snackData, onAction, onClose)=>{
+    if (!addSnackbarFunction) throw new Error('SnackbarProvider is not mounted.');
+    return addSnackbarFunction(snackData, onAction, onClose);
+};
+export { SnackbarProvider, SnackbarProvider_addSnackbar as addSnackbar };

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

@@ -0,0 +1,2 @@
+import { type ProviderContext } from './SnackbarContext';
+export declare const useSnackbar: () => ProviderContext;

package/dist/components/snackbar/useSnackbar.js

@@ -0,0 +1,4 @@
+import { useContext } from "react";
+import { SnackbarContext } from "./SnackbarContext.js";
+const useSnackbar = ()=>useContext(SnackbarContext);
+export { useSnackbar };

package/dist/components/stepper-horizontal/StepperHorizontal.css

@@ -0,0 +1,6 @@
+.fr-step-container {
+  background: none;
+  border: none;
+  padding: 0;
+}
+

package/dist/components/stepper-horizontal/StepperHorizontal.d.ts

@@ -0,0 +1,7 @@
+import './StepperHorizontal.scss';
+import React, { type ComponentPropsWithoutRef } from 'react';
+export interface StepperHorizontalProps extends Omit<ComponentPropsWithoutRef<'button'>, 'onChange'> {
+    stepIndex?: number;
+    onChange?: (stepIndex: number) => void;
+}
+export declare const StepperHorizontal: (props: StepperHorizontalProps & React.RefAttributes<HTMLButtonElement>) => React.ReactElement | null;

package/dist/components/stepper-horizontal/StepperHorizontal.js

@@ -0,0 +1,48 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import "./StepperHorizontal.css";
+import classnames from "classnames";
+import react, { forwardRef } from "react";
+const StepperHorizontal = /*#__PURE__*/ forwardRef(({ children, className, stepIndex = 0, onChange, ...props }, ref)=>{
+    const stepComponents = react.Children.map(children, (child, i)=>/*#__PURE__*/ react.isValidElement(child) ? /*#__PURE__*/ react.cloneElement(child, {
+            ...child.props,
+            isActive: i === stepIndex
+        }) : null);
+    function handleStepClick(index) {
+        if (stepIndex > index && onChange) onChange(index);
+    }
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsx("div", {
+                className: classnames('fwe-stepper-horizontal', className),
+                children: stepComponents?.map((step, i)=>/*#__PURE__*/ jsx("button", {
+                        type: "button",
+                        ref: ref,
+                        className: classnames('fwe-step-container fr-step-container', {
+                            'fwe-step-done': stepIndex > i,
+                            'fwe-step-active': i === stepIndex
+                        }),
+                        onClick: ()=>handleStepClick(i),
+                        disabled: stepIndex <= i,
+                        "aria-label": `Step ${i + 1}: ${step.props.title}`,
+                        "aria-current": i === stepIndex ? 'step' : void 0,
+                        ...props,
+                        children: /*#__PURE__*/ jsxs("div", {
+                            className: "fwe-step",
+                            children: [
+                                /*#__PURE__*/ jsx("div", {
+                                    className: "fwe-step-no",
+                                    children: i + 1
+                                }),
+                                /*#__PURE__*/ jsx("div", {
+                                    className: "fwe-step-name",
+                                    children: step.props.title
+                                })
+                            ]
+                        })
+                    }, step.props.title))
+            }),
+            stepComponents
+        ]
+    });
+});
+export { StepperHorizontal };

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

@@ -0,0 +1,24 @@
+.overflow-hidden {
+  overflow: hidden;
+}
+
+@keyframes stepperAnimation {
+  from {
+    transform: translateX(100%);
+  }
+
+  to {
+    transform: translateX(0%);
+  }
+}
+
+.fr-moving-container {
+  animation-name: stepperAnimation;
+  animation-duration: .3s;
+  animation-timing-function: ease;
+}
+
+.hidden {
+  display: none;
+}
+

package/dist/components/stepper-horizontal/step-horizontal/StepHorizontal.d.ts

@@ -0,0 +1,6 @@
+import './StepHorizontal.scss';
+import { type ComponentPropsWithoutRef } from 'react';
+export interface StepHorizontalProps extends ComponentPropsWithoutRef<'div'> {
+    readonly isActive?: boolean;
+}
+export declare const StepHorizontal: (props: StepHorizontalProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;

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

@@ -0,0 +1,16 @@
+import { jsx } from "react/jsx-runtime";
+import "./StepHorizontal.css";
+import classnames from "classnames";
+import { forwardRef } from "react";
+const StepHorizontal = /*#__PURE__*/ forwardRef(({ children, className, isActive, ...props }, ref)=>/*#__PURE__*/ jsx("div", {
+        ref: ref,
+        className: classnames('overflow-hidden', {
+            hidden: !isActive
+        }),
+        ...props,
+        children: /*#__PURE__*/ jsx("div", {
+            className: "fr-moving-container",
+            children: children
+        })
+    }));
+export { StepHorizontal };

package/dist/components/stepper-vertical/StepperVertical.d.ts

@@ -0,0 +1,6 @@
+import React, { type ComponentPropsWithoutRef } from 'react';
+export interface StepperVerticalProps extends Omit<ComponentPropsWithoutRef<'div'>, 'onChange'> {
+    readonly stepIndex?: number;
+    readonly onChange?: (stepIndex: number) => void;
+}
+export declare const StepperVertical: (props: StepperVerticalProps & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null;

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

@@ -0,0 +1,25 @@
+import { jsx } from "react/jsx-runtime";
+import classnames from "classnames";
+import react, { forwardRef } from "react";
+const StepperVertical = /*#__PURE__*/ forwardRef(({ children, className, stepIndex = 0, onChange, ...props }, ref)=>{
+    function handleStepClick(index) {
+        if (stepIndex > index && onChange) onChange(index);
+    }
+    const stepComponents = react.Children.map(children, (child, i)=>{
+        if (/*#__PURE__*/ react.isValidElement(child)) return /*#__PURE__*/ react.cloneElement(child, {
+            isActive: i === stepIndex,
+            index: i,
+            isDone: i < stepIndex,
+            isLastElement: i === react.Children.count(children) - 1,
+            onStepClick: ()=>handleStepClick(i)
+        });
+        return null;
+    });
+    return /*#__PURE__*/ jsx("div", {
+        ref: ref,
+        className: classnames('fwe-stepper-vertical', className),
+        ...props,
+        children: stepComponents
+    });
+});
+export { StepperVertical };

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

@@ -0,0 +1,10 @@
+.fwe-stepper-vertical .fwe-step-container.fwe-step-active .fwe-step-content-container {
+  height: 20px;
+}
+
+.fr-stepper-vertical-step {
+  background: none;
+  border: none;
+  padding: 0;
+}
+

package/dist/components/stepper-vertical/step-vertical/StepVertical.d.ts

@@ -0,0 +1,11 @@
+import './StepVertical.scss';
+import { type ComponentPropsWithoutRef } from 'react';
+export interface StepVerticalProps extends ComponentPropsWithoutRef<'div'> {
+    readonly isActive?: boolean;
+    readonly isLastElement?: boolean;
+    readonly isDone?: boolean;
+    readonly index?: number;
+    readonly title?: string;
+    readonly onStepClick?: () => void;
+}
+export declare const StepVertical: (props: StepVerticalProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;

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

@@ -0,0 +1,58 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import "./StepVertical.css";
+import classnames from "classnames";
+import { forwardRef, useEffect, useRef } from "react";
+const StepVertical = /*#__PURE__*/ forwardRef(({ children, className, isActive, isLastElement, isDone, index, title, onStepClick, ...props }, ref)=>{
+    const containerRef = useRef(null);
+    const contentRef = useRef(null);
+    useEffect(()=>{
+        if (containerRef.current) if (isActive) {
+            const itemHeight = contentRef.current?.offsetHeight;
+            containerRef.current.style.height = `${itemHeight}px`;
+        } else containerRef.current.style.height = '20px';
+    }, [
+        isActive
+    ]);
+    function handleClick() {
+        if (onStepClick) onStepClick();
+    }
+    return /*#__PURE__*/ jsxs("div", {
+        ref: ref,
+        className: classnames('fwe-step-container', {
+            'fwe-last-element': isLastElement,
+            'fwe-step-active': isActive,
+            'fwe-step-done': isDone
+        }),
+        ...props,
+        children: [
+            /*#__PURE__*/ jsxs("button", {
+                type: "button",
+                className: "fwe-step fr-stepper-vertical-step",
+                onClick: handleClick,
+                "aria-label": `Step ${(index ?? 0) + 1}: ${title}`,
+                "aria-current": isActive ? 'step' : void 0,
+                disabled: !isDone && !isActive,
+                children: [
+                    void 0 !== index && /*#__PURE__*/ jsx("div", {
+                        className: "fwe-step-no",
+                        children: index + 1
+                    }),
+                    /*#__PURE__*/ jsx("div", {
+                        className: "fwe-step-name",
+                        children: title
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsx("div", {
+                ref: containerRef,
+                className: "fwe-step-content-container",
+                children: /*#__PURE__*/ jsx("div", {
+                    ref: contentRef,
+                    className: "fwe-step-content",
+                    children: children
+                })
+            })
+        ]
+    });
+});
+export { StepVertical };

package/dist/components/tab/Tabs.css

@@ -0,0 +1,285 @@
+.fwe-legacy-tabs {
+  width: 100%;
+  height: 100%;
+  margin: 48px 0;
+}
+
+.fwe-legacy-tab-bar {
+  width: 75%;
+  font-size: var(--fwe-font-size-base);
+  flex-wrap: nowrap;
+  margin-top: 0;
+  margin-bottom: 0;
+  padding-left: 0;
+  list-style: none;
+  display: flex;
+}
+
+.fwe-legacy-tab-bar.fwe-legacy-tab-bar-full-width {
+  width: 100%;
+}
+
+.fwe-legacy-tab-bar.fwe-legacy-tab-items-fill .fwe-legacy-tab-item {
+  flex: auto;
+}
+
+.fwe-legacy-tab-bar.fwe-legacy-tab-items-equal-width .fwe-legacy-tab-item {
+  flex: 1 1 0;
+}
+
+.fwe-legacy-tab-item {
+  background-color: var(--fwe-gray-300);
+  border-right: 2px solid var(--fwe-gray-100);
+  text-align: center;
+  height: 48px;
+  max-height: 48px;
+}
+
+.fwe-legacy-tab-item:last-child {
+  border-right: none;
+}
+
+.fwe-legacy-tab-item.fwe-active {
+  background-color: var(--fwe-white);
+}
+
+.fwe-legacy-tab-item.fwe-active .fwe-legacy-tab-link {
+  color: var(--fwe-caerul);
+}
+
+.fwe-legacy-tab-item:not(.fwe-active) {
+  border-bottom: 2px solid var(--fwe-gray-100);
+}
+
+.fwe-legacy-tab-item:not(.fwe-active) .fwe-legacy-tab-link {
+  padding: 11px 16px;
+}
+
+.fwe-legacy-tab-link {
+  cursor: pointer;
+  width: 100%;
+  height: 48px;
+  color: var(--fwe-black);
+  white-space: nowrap;
+  background: none;
+  border: none;
+  padding: 11px 16px 13px;
+  line-height: 24px;
+  display: inline-block;
+}
+
+.fwe-legacy-tab-link .fwe-svg-icon {
+  margin-right: 8px;
+  line-height: 0;
+}
+
+.fwe-legacy-tab-link i.fwe-icon {
+  vertical-align: initial;
+  padding-right: 8px;
+}
+
+.fwe-legacy-tab-link i.fwe-icon.fwe-icon-lg {
+  position: relative;
+  top: 3px;
+}
+
+.fwe-legacy-tab-link:hover {
+  color: var(--fwe-caerul);
+}
+
+.fwe-legacy-tab-link:active {
+  background-color: var(--fwe-white);
+  color: var(--fwe-caerul);
+}
+
+.fwe-legacy-tab-panel-content {
+  background-color: var(--fwe-white);
+  height: 100%;
+  padding: 48px 24px;
+  overflow: auto;
+}
+
+@media (width <= 375px) {
+  .fwe-legacy-tab-bar {
+    background-color: var(--fwe-white);
+    justify-content: space-between;
+    width: 100%;
+  }
+
+  .fwe-legacy-tab-item {
+    background-color: var(--fwe-white);
+    border-right: 2px solid var(--fwe-white);
+  }
+
+  .fwe-legacy-tab-item:not(.fwe-active) {
+    border-bottom: 2px solid var(--fwe-white);
+  }
+
+  .fwe-legacy-tab-item:not(.fwe-active) .fwe-legacy-tab-link, .fwe-legacy-tab-item:not(.fwe-active) .fwe-legacy-tab-link i.fwe-icon {
+    color: var(--fwe-hero-gray);
+  }
+
+  .fwe-legacy-tab-link.fwe-can-swap-icon {
+    direction: rtl;
+  }
+
+  .fwe-legacy-tab-link.fwe-can-swap-icon i.fwe-icon {
+    padding-left: 8px;
+    padding-right: 0;
+  }
+}
+
+.fr-tab-panel-content {
+  background-color: var(--fwe-white);
+  height: 100%;
+  padding: 48px 24px;
+  overflow: auto;
+}
+
+.fr-tab-bar {
+  width: 100%;
+}
+
+.fr-tab-scroller {
+  overflow-y: hidden;
+}
+
+.fr-tab-scroller-scroll-area {
+  display: flex;
+  position: relative;
+  overflow-x: hidden;
+}
+
+.fr-tab-scroller-scroll-area::-webkit-scrollbar {
+  display: none;
+}
+
+.fr-tab-scroller-scroll-area--scroll {
+  overflow-x: scroll;
+}
+
+.fr-tab-scroller-scroll-content {
+  will-change: transform;
+  flex: 1 0 auto;
+  padding: 0 17px 0 16px;
+  display: flex;
+  position: relative;
+  transform: none;
+}
+
+.fr-tab-scroller-scroll-content--with-divider .fr-tab-scroller-divider-line {
+  display: block;
+}
+
+.fr-tab-scroller--animating .fr-tab-scroller-scroll-content {
+  transition: transform .25s cubic-bezier(.4, 0, .2, 1);
+}
+
+.fr-tab-scroller-divider-line {
+  border-bottom: 1px solid var(--fwe-control);
+  display: none;
+  position: absolute;
+  inset: 0;
+}
+
+.fr-tab-indicator {
+  pointer-events: none;
+  z-index: 1;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.fr-tab-indicator-content {
+  transform-origin: 0;
+  opacity: 0;
+}
+
+.fr-tab-indicator-content--underline {
+  box-sizing: border-box;
+  border-top-style: solid;
+  align-self: flex-end;
+  width: 100%;
+}
+
+.fr-tab-indicator .fr-tab-indicator-content {
+  transition: transform .25s cubic-bezier(.4, 0, .2, 1);
+}
+
+.fr-tab-indicator .fr-tab-indicator-content--underline {
+  border-top: 4px solid var(--fwe-caerul);
+}
+
+.fr-tab-indicator--active .fr-tab-indicator-content {
+  opacity: 1;
+}
+
+.fr-tab {
+  text-align: center;
+  white-space: nowrap;
+  cursor: pointer;
+  -webkit-appearance: none;
+  z-index: 1;
+  background: none;
+  border: none;
+  outline: none;
+  flex: 1 0 auto;
+  justify-content: center;
+  height: 36px;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  position: relative;
+}
+
+.fr-tab:not(:last-child) {
+  margin-right: 32px;
+}
+
+.fr-tab::-moz-focus-inner {
+  border: 0;
+  padding: 0;
+}
+
+.fr-tab .fr-tab-text-label {
+  color: var(--fwe-text);
+}
+
+.fr-tab--active .fr-tab-text-label {
+  color: var(--fwe-caerul);
+}
+
+.fr-tab-content {
+  height: inherit;
+  pointer-events: none;
+  justify-content: center;
+  align-items: flex-start;
+  display: flex;
+  position: relative;
+}
+
+.fr-tab-text-label {
+  z-index: 2;
+  display: inline-block;
+}
+
+.fr-tab-scroller-scroll-area:not(.fr-tab-scroller-scroll-area--compact) .fr-tab {
+  flex: none;
+}
+
+.fr-tab-scroller-scroll-area:not(.fr-tab-scroller-scroll-area--compact) .fr-tab:not(:last-child) {
+  margin-right: 64px;
+}
+
+.fr-tab-scroller-scroll-area:not(.fr-tab-scroller-scroll-area--compact) .fr-tab-scroller-scroll-content {
+  padding: 0 32px;
+}
+
+.fr-tab-scroller-scroll-area:not(.fr-tab-scroller-scroll-area--compact) .fr-tab-scroller-divider-line {
+  padding-right: 64px;
+}
+

package/dist/components/tab/Tabs.d.ts

@@ -0,0 +1,22 @@
+import './Tabs.scss';
+import React, { type ComponentPropsWithoutRef } from 'react';
+export type TabItemAppearance = 'fill' | 'equal' | 'default';
+export type TabViewType = 'legacy' | 'responsive';
+export interface TabsConfiguration {
+    readonly tabBar?: {
+        fullWidth?: boolean;
+    };
+    readonly tabItems?: {
+        appearance: TabItemAppearance;
+    };
+}
+export interface TabsProps extends Omit<ComponentPropsWithoutRef<'div'>, 'onChange'> {
+    readonly config?: TabsConfiguration;
+    readonly viewType?: TabViewType;
+    readonly showDivider?: boolean;
+    readonly onChange?: (value: {
+        previous: string;
+        current: string;
+    }) => void;
+}
+export declare const Tabs: (props: TabsProps & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null;