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

package/{dist → lib}/components/search-input/useSearchInput.d.ts

@@ -1,6 +1,6 @@
-import type React from 'react';
-import type { SearchSuggestion } from './SearchSuggestion';
-export declare function useSearchInput(inputRef: React.MutableRefObject<HTMLInputElement | null>, cappedSuggestions: SearchSuggestion[], value?: string, defaultValue?: string, onChange?: (value: string) => void, onSearch?: (value: string) => void, onKeyboardNavigate?: (value: string) => void): {
+import React from "react";
+import SearchSuggestion from "./SearchSuggestion";
+export default function useSearchInput(inputRef: React.MutableRefObject<HTMLInputElement | null>, cappedSuggestions: SearchSuggestion[], value?: string, defaultValue?: string, onChange?: (value: string) => void, onSearch?: (value: string) => void, onKeyboardNavigate?: (value: string) => void): {
     innerValue: string | undefined;
     hideSuggestionList: boolean;
     selectedSuggestionIndex: number;

package/lib/components/search-input/useSearchInput.js

@@ -0,0 +1,94 @@
+import { useState } from "react";
+import useControlled from "../../helper/useControlled.js";
+export default function useSearchInput(inputRef, cappedSuggestions, value) {
+  let defaultValue = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : "";
+  let onChange = arguments.length > 4 ? arguments[4] : undefined;
+  let onSearch = arguments.length > 5 ? arguments[5] : undefined;
+  let onKeyboardNavigate = arguments.length > 6 ? arguments[6] : undefined;
+  const [innerValue, setValue] = useControlled({
+    controlled: value,
+    default: defaultValue
+  });
+  const [hideSuggestionList, setHideSuggestionList] = useState(false);
+  const [selectedSuggestionIndex, setSelectedSuggestionIndex] = useState(-1);
+  function blurInput() {
+    if (inputRef.current) {
+      inputRef.current.blur();
+    }
+  }
+  function reset() {
+    setSelectedSuggestionIndex(-1);
+    setHideSuggestionList(true);
+    blurInput();
+  }
+  function handleSearch() {
+    reset();
+    if (innerValue !== undefined) {
+      onSearch?.(innerValue);
+    }
+  }
+  function updateValue(newValue) {
+    setValue(newValue);
+    onChange?.(newValue);
+    onSearch?.(newValue);
+  }
+  function handleClearQuery() {
+    reset();
+    updateValue("");
+  }
+  function handleArrowKey(newSuggestionIndex) {
+    if (!cappedSuggestions || !cappedSuggestions.length) {
+      return;
+    }
+    const selectedSuggestion = cappedSuggestions[newSuggestionIndex];
+    setSelectedSuggestionIndex(newSuggestionIndex);
+    setValue(selectedSuggestion.value);
+    onKeyboardNavigate?.(selectedSuggestion.value);
+  }
+  function handleUpArrowKey() {
+    handleArrowKey(selectedSuggestionIndex > 0 ? selectedSuggestionIndex - 1 : cappedSuggestions.length - 1);
+  }
+  function handleDownArrowKey() {
+    handleArrowKey(selectedSuggestionIndex >= cappedSuggestions.length - 1 ? 0 : selectedSuggestionIndex + 1);
+  }
+  function handleKeyDown(event) {
+    switch (event.key) {
+      case "Enter":
+        handleSearch();
+        break;
+      case "Escape":
+        handleClearQuery();
+        break;
+      case "ArrowUp":
+        handleUpArrowKey();
+        break;
+      case "ArrowDown":
+        handleDownArrowKey();
+        break;
+      default:
+        break;
+    }
+  }
+  const handleFocus = () => setHideSuggestionList(false);
+  const handleOutsideClick = () => setHideSuggestionList(true);
+  function handleSuggestionClick(suggestion) {
+    reset();
+    updateValue(suggestion.value);
+  }
+  function handleInput(event) {
+    setSelectedSuggestionIndex(-1);
+    setValue(event.target.value);
+    onChange?.(event.target.value);
+  }
+  return {
+    innerValue,
+    hideSuggestionList,
+    selectedSuggestionIndex,
+    handleClearQuery,
+    handleFocus,
+    handleInput,
+    handleSuggestionClick,
+    handleOutsideClick,
+    handleKeyDown
+  };
+}

package/{dist → lib}/components/snackbar/Snackbar.d.ts

@@ -1,8 +1,8 @@
-import type { ClassNameProps } from '../../utils/types';
-import './Snackbar.scss';
+import { ClassNameProps } from "../../helper/types";
+import "./Snackbar.scss";
 export interface SnackbarConfig extends ClassNameProps {
-    type?: 'info' | 'warning' | 'error';
-    variant?: 'a' | 'b' | 'c';
+    type?: "info" | "warning" | "error";
+    variant?: "a" | "b" | "c";
     darkBackground?: boolean;
     showClose?: boolean;
     action?: string;
@@ -18,4 +18,5 @@ export interface SnackbarProps {
     onClose?: () => void;
     first?: boolean;
 }
-export declare function Snackbar(props: SnackbarProps): import("react/jsx-runtime").JSX.Element;
+declare function Snackbar(props: SnackbarProps): import("react/jsx-runtime").JSX.Element;
+export default Snackbar;

package/lib/components/snackbar/Snackbar.js

@@ -0,0 +1,78 @@
+import { useEffect, useRef, useState } from "react";
+import classNames from "classnames";
+import { CSSTransition } from "react-transition-group";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function Snackbar(props) {
+  const {
+    data,
+    onAction,
+    onClose,
+    first = false
+  } = props;
+  const [show, setShow] = useState(true);
+  const nodeRef = useRef(null);
+  useEffect(() => {
+    let disappearAfter = 5000;
+    if (data?.disappearAfter !== null) {
+      if (data?.disappearAfter && data?.disappearAfter > 0) {
+        disappearAfter = data?.disappearAfter;
+      }
+      const timer = setTimeout(() => setShow(false), disappearAfter);
+      return () => {
+        clearTimeout(timer);
+      };
+    }
+    return undefined;
+  }, [data]);
+  function handleClose() {
+    setShow(false);
+  }
+  const classes = first ? "fr-snackbar-wrapper--first" : "fr-snackbar-wrapper";
+  return /*#__PURE__*/_jsx(CSSTransition, {
+    nodeRef: nodeRef,
+    onExited: () => onClose ? onClose() : undefined,
+    unmountOnExit: true,
+    timeout: {
+      exit: 600
+    },
+    in: show,
+    classNames: classes,
+    appear: true,
+    children: /*#__PURE__*/_jsx("div", {
+      ref: nodeRef,
+      className: classes,
+      children: /*#__PURE__*/_jsxs("div", {
+        className: classNames({
+          "fwe-snackbar": true,
+          "fwe-snackbar-b": data?.variant === "b",
+          "fwe-snackbar-c": data?.variant === "c",
+          "fwe-snackbar-info": data?.type === "info",
+          "fwe-snackbar-warning": data?.type === "warning",
+          "fwe-snackbar-error": data?.type === "error",
+          "fwe-snackbar-shadow": data?.darkBackground
+        }, data?.className),
+        children: [/*#__PURE__*/_jsx("span", {
+          children: data?.text
+        }), data?.action && /*#__PURE__*/_jsx("button", {
+          "aria-label": "UserAction",
+          type: "button",
+          className: "fwe-snackbar-link-btn",
+          onClick: () => onAction ? onAction() : undefined,
+          children: data?.action
+        }), data?.action && data?.showClose && /*#__PURE__*/_jsx("div", {
+          className: "fwe-snackbar-separator"
+        }), data?.showClose && /*#__PURE__*/_jsx("button", {
+          "aria-label": "Close",
+          type: "button",
+          className: "fwe-snackbar-close-btn",
+          onClick: handleClose,
+          children: /*#__PURE__*/_jsx("span", {
+            className: "fwe-sr-only",
+            children: "Close"
+          })
+        })]
+      })
+    })
+  });
+}
+export default Snackbar;

package/{dist → lib}/components/snackbar/SnackbarContext.d.ts

@@ -1,7 +1,8 @@
-import React from 'react';
-import type { SnackbarData } from './Snackbar';
+import React from "react";
+import { SnackbarData } from "./Snackbar";
 export interface ProviderContext {
     addSnackbar: (data: SnackbarData, onAction?: () => void, onClose?: () => void) => void;
     closeSnackbar: (key: number | string) => void;
 }
-export declare const SnackbarContext: React.Context<ProviderContext>;
+declare const _default: React.Context<ProviderContext>;
+export default _default;

package/lib/components/snackbar/SnackbarContext.js

@@ -0,0 +1,2 @@
+import React from "react";
+export default /*#__PURE__*/React.createContext(null);

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

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

package/lib/components/snackbar/SnackbarProvider.js

@@ -0,0 +1,65 @@
+import { useCallback, useMemo, useState } from "react";
+import classNames from "classnames";
+import Snackbar from "./Snackbar.js";
+import SnackbarContext from "./SnackbarContext.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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 ?? new Date().getTime() + Math.random();
+    setSnacks(prevSnacks => [{
+      data: {
+        ...config,
+        ...snackData
+      },
+      onAction,
+      onClose,
+      key,
+      first: prevSnacks.length === 0
+    }, ...prevSnacks]);
+    return key;
+  }, [config]);
+  addSnackbarFunction = addSnackbar;
+  function closeSnackbar(key) {
+    if (key !== undefined) {
+      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]);
+  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() : undefined,
+        onClose: () => handleClose(snack),
+        first: snack.first
+      }, snack.key))
+    })]
+  });
+}
+export default SnackbarProvider;
+export const addSnackbar = (snackData, onAction, onClose) => {
+  if (!addSnackbarFunction) {
+    throw new Error("SnackbarProvider is not mounted.");
+  }
+  return addSnackbarFunction(snackData, onAction, onClose);
+};

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

@@ -0,0 +1,3 @@
+import { ProviderContext } from "./SnackbarContext";
+declare const _default: () => ProviderContext;
+export default _default;

package/lib/components/snackbar/useSnackbar.js

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

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

@@ -0,0 +1,7 @@
+import React, { ComponentPropsWithoutRef } from "react";
+interface StepperHorizontalProps extends Omit<ComponentPropsWithoutRef<"div">, "onChange"> {
+    stepIndex?: number;
+    onChange?: (stepIndex: number) => void;
+}
+declare const StepperHorizontal: (props: StepperHorizontalProps & React.RefAttributes<HTMLDivElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
+export default StepperHorizontal;

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

@@ -0,0 +1,60 @@
+import cn from "classnames";
+import React, { forwardRef } from "react";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const StepperHorizontal = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    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);
+    }
+  }
+  const handleKeyDown = i => event => {
+    if (event.key === "Enter") {
+      handleStepClick(i);
+    }
+  };
+  const handleKeyUp = i => event => {
+    if (event.key === " ") {
+      handleStepClick(i);
+    }
+  };
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx("div", {
+      className: "fwe-stepper-horizontal",
+      children: stepComponents && stepComponents.map((step, i) => /*#__PURE__*/_jsx("div", {
+        tabIndex: 0,
+        role: "button",
+        ref: ref,
+        onKeyDown: handleKeyDown(i),
+        onKeyUp: handleKeyUp(i),
+        className: cn("fwe-step-container", {
+          "fwe-step-done": stepIndex > i,
+          "fwe-step-active": i === stepIndex
+        }),
+        onClick: () => handleStepClick(i),
+        ...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 default StepperHorizontal;

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

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

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

@@ -0,0 +1,23 @@
+import cn from "classnames";
+import { forwardRef } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+const StepHorizontal = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    children,
+    className,
+    isActive,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/_jsx("div", {
+    ref: ref,
+    className: cn("overflow-hidden", {
+      hidden: !isActive
+    }),
+    ...props,
+    children: /*#__PURE__*/_jsx("div", {
+      className: "fr-moving-container",
+      children: children
+    })
+  });
+});
+export default StepHorizontal;

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

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

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

@@ -0,0 +1,37 @@
+import cn from "classnames";
+import React, { forwardRef } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+const StepperVertical = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    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, {
+        ...child.props,
+        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: cn("fwe-stepper-vertical", className),
+    ...props,
+    children: stepComponents
+  });
+});
+export default StepperVertical;

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

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

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

@@ -0,0 +1,76 @@
+import cn from "classnames";
+import { forwardRef, useEffect, useRef } from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const StepVertical = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    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();
+    }
+  }
+  const handleKeyDown = event => {
+    if (event.key === "Enter") {
+      handleClick();
+    }
+  };
+  const handleKeyUp = event => {
+    if (event.key === " ") {
+      handleClick();
+    }
+  };
+  return /*#__PURE__*/_jsxs("div", {
+    ref: ref,
+    className: cn("fwe-step-container", {
+      "fwe-last-element": isLastElement,
+      "fwe-step-active": isActive,
+      "fwe-step-done": isDone
+    }),
+    ...props,
+    children: [/*#__PURE__*/_jsxs("div", {
+      tabIndex: 0,
+      role: "button",
+      className: "fwe-step",
+      onClick: handleClick,
+      onKeyDown: handleKeyDown,
+      onKeyUp: handleKeyUp,
+      children: [index !== undefined && /*#__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 default StepVertical;

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

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