@festo-ui/react 8.2.0-dev.582 → 8.2.0-dev.584

package/lib/components/progress/Progress.js

@@ -1,21 +1,21 @@
-import classNames from 'classnames';
+import classNames from "classnames";
 import { jsx as _jsx } from "react/jsx-runtime";
 function Progress(_ref) {
   let {
-    background = 'white',
+    background = "white",
     error = false,
     progress,
     className
   } = _ref;
-  const classes = classNames('fwe-progress-bar', {
-    'fwe-bg-red': error
+  const classes = classNames("fwe-progress-bar", {
+    "fwe-bg-red": error
   }, {
-    'fwe-progress-bar-black': background === 'black'
+    "fwe-progress-bar-black": background === "black"
   }, {
-    'fwe-progress-bar-background': background === 'background'
+    "fwe-progress-bar-background": background === "background"
   });
   return /*#__PURE__*/_jsx("div", {
-    className: classNames('fwe-progress', className),
+    className: classNames("fwe-progress", className),
     children: /*#__PURE__*/_jsx("div", {
       className: classes,
       role: "progressbar",

package/lib/components/scroll-area/ScrollArea.d.ts

@@ -1,4 +1,4 @@
-interface ScrollAreaProps extends React.ComponentPropsWithoutRef<'div'> {
+interface ScrollAreaProps extends React.ComponentPropsWithoutRef<"div"> {
     scrollbarMinSize?: number;
 }
 export default function ScrollArea({ children, scrollbarMinSize, ...props }: ScrollAreaProps): import("react/jsx-runtime").JSX.Element;

package/lib/components/scroll-area/ScrollArea.js

@@ -1,4 +1,4 @@
-import SimpleBar from 'simplebar-react';
+import SimpleBar from "simplebar-react";
 import { jsx as _jsx } from "react/jsx-runtime";
 export default function ScrollArea(_ref) {
   let {

package/lib/components/search-input/ClearButton.d.ts

@@ -1,2 +1,2 @@
-import { ComponentPropsWithoutRef } from 'react';
-export default function ClearButton(props: ComponentPropsWithoutRef<'div'>): import("react/jsx-runtime").JSX.Element;
+import { ComponentPropsWithoutRef } from "react";
+export default function ClearButton(props: ComponentPropsWithoutRef<"div">): import("react/jsx-runtime").JSX.Element;

package/lib/components/search-input/SearchInput.d.ts

@@ -1,5 +1,5 @@
-import './SearchInput.scss';
-import SearchSuggestion from './SearchSuggestion';
+import "./SearchInput.scss";
+import SearchSuggestion from "./SearchSuggestion";
 interface SearchInputProps {
     disabled?: boolean;
     label?: string;

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

@@ -1,4 +1,4 @@
-import { useRef } from 'react';
+import { useRef } from "react";
 import useSearchInput from "./useSearchInput.js";
 import useOnClickOutside from "../../helper/useOnClickOutside.js";
 import ClearButton from "./ClearButton.js";
@@ -58,7 +58,7 @@ function SearchInput(_ref) {
         "aria-label": suggestion.value,
         "aria-selected": selectedSuggestionIndex === i,
         onClick: () => handleSuggestionClick(suggestion),
-        className: `fwe-search-suggestion ${selectedSuggestionIndex === i ? 'fwe-selected' : ''}`,
+        className: `fwe-search-suggestion ${selectedSuggestionIndex === i ? "fwe-selected" : ""}`,
         children: /*#__PURE__*/_jsx("div", {
           // eslint-disable-next-line react/no-danger
           dangerouslySetInnerHTML: {

package/lib/components/search-input/useSearchInput.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-import SearchSuggestion from './SearchSuggestion';
+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;

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

@@ -1,7 +1,7 @@
-import { useState } from 'react';
+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 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;
@@ -34,7 +34,7 @@ export default function useSearchInput(inputRef, cappedSuggestions, value) {
   }
   function handleClearQuery() {
     reset();
-    updateValue('');
+    updateValue("");
   }
   function handleArrowKey(newSuggestionIndex) {
     if (!cappedSuggestions || !cappedSuggestions.length) {
@@ -53,16 +53,16 @@ export default function useSearchInput(inputRef, cappedSuggestions, value) {
   }
   function handleKeyDown(event) {
     switch (event.key) {
-      case 'Enter':
+      case "Enter":
         handleSearch();
         break;
-      case 'Escape':
+      case "Escape":
         handleClearQuery();
         break;
-      case 'ArrowUp':
+      case "ArrowUp":
         handleUpArrowKey();
         break;
-      case 'ArrowDown':
+      case "ArrowDown":
         handleDownArrowKey();
         break;
       default:

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

@@ -1,8 +1,8 @@
-import { ClassNameProps } from '../../helper/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;

package/lib/components/snackbar/Snackbar.js

@@ -1,6 +1,6 @@
-import { useEffect, useRef, useState } from 'react';
-import classNames from 'classnames';
-import { CSSTransition } from 'react-transition-group';
+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 {
@@ -27,7 +27,7 @@ function Snackbar(props) {
   function handleClose() {
     setShow(false);
   }
-  const classes = first ? 'fr-snackbar-wrapper--first' : 'fr-snackbar-wrapper';
+  const classes = first ? "fr-snackbar-wrapper--first" : "fr-snackbar-wrapper";
   return /*#__PURE__*/_jsx(CSSTransition, {
     nodeRef: nodeRef,
     onExited: () => onClose ? onClose() : undefined,
@@ -43,13 +43,13 @@ function Snackbar(props) {
       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
+          "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

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

@@ -1,5 +1,5 @@
-import React from 'react';
-import { 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;

package/lib/components/snackbar/SnackbarContext.js

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

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

@@ -1,5 +1,5 @@
-import { ClassNamePropsWithChildren } from '../../helper/types';
-import { SnackbarConfig } from './Snackbar';
+import { ClassNamePropsWithChildren } from "../../helper/types";
+import { SnackbarConfig } from "./Snackbar";
 interface SnackbarProviderProps extends ClassNamePropsWithChildren {
     config?: SnackbarConfig;
 }

package/lib/components/snackbar/SnackbarProvider.js

@@ -1,5 +1,5 @@
-import { useCallback, useMemo, useState } from 'react';
-import classNames from 'classnames';
+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";
@@ -44,7 +44,7 @@ function SnackbarProvider(props) {
   return /*#__PURE__*/_jsxs(SnackbarContext.Provider, {
     value: contextValue,
     children: [children, /*#__PURE__*/_jsx("div", {
-      className: classNames('fwe-snackbar-container', className),
+      className: classNames("fwe-snackbar-container", className),
       children: snacks.map(snack => /*#__PURE__*/_jsx(Snackbar, {
         data: snack.data,
         onAction: () => snack.onAction ? snack.onAction() : undefined,

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

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

package/lib/components/snackbar/useSnackbar.js

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

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

@@ -1,5 +1,5 @@
-import React, { ComponentPropsWithoutRef } from 'react';
-interface StepperHorizontalProps extends Omit<ComponentPropsWithoutRef<'div'>, 'onChange'> {
+import React, { ComponentPropsWithoutRef } from "react";
+interface StepperHorizontalProps extends Omit<ComponentPropsWithoutRef<"div">, "onChange"> {
     stepIndex?: number;
     onChange?: (stepIndex: number) => void;
 }

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

@@ -1,5 +1,5 @@
-import cn from 'classnames';
-import React, { forwardRef } from 'react';
+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 {
@@ -19,12 +19,12 @@ const StepperHorizontal = /*#__PURE__*/forwardRef((_ref, ref) => {
     }
   }
   const handleKeyDown = i => event => {
-    if (event.key === 'Enter') {
+    if (event.key === "Enter") {
       handleStepClick(i);
     }
   };
   const handleKeyUp = i => event => {
-    if (event.key === ' ') {
+    if (event.key === " ") {
       handleStepClick(i);
     }
   };
@@ -37,9 +37,9 @@ const StepperHorizontal = /*#__PURE__*/forwardRef((_ref, ref) => {
         ref: ref,
         onKeyDown: handleKeyDown(i),
         onKeyUp: handleKeyUp(i),
-        className: cn('fwe-step-container', {
-          'fwe-step-done': stepIndex > i,
-          'fwe-step-active': i === stepIndex
+        className: cn("fwe-step-container", {
+          "fwe-step-done": stepIndex > i,
+          "fwe-step-active": i === stepIndex
         }),
         onClick: () => handleStepClick(i),
         ...props,

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

@@ -1,6 +1,6 @@
-import './StepHorizontal.scss';
-import { ComponentPropsWithoutRef } from 'react';
-export interface StepHorizontalProps extends ComponentPropsWithoutRef<'div'> {
+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;

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

@@ -1,5 +1,5 @@
-import cn from 'classnames';
-import { forwardRef } from 'react';
+import cn from "classnames";
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
 const StepHorizontal = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
@@ -10,7 +10,7 @@ const StepHorizontal = /*#__PURE__*/forwardRef((_ref, ref) => {
   } = _ref;
   return /*#__PURE__*/_jsx("div", {
     ref: ref,
-    className: cn('overflow-hidden', {
+    className: cn("overflow-hidden", {
       hidden: !isActive
     }),
     ...props,

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

@@ -1,5 +1,5 @@
-import React, { ComponentPropsWithoutRef } from 'react';
-interface StepperVerticalProps extends Omit<ComponentPropsWithoutRef<'div'>, 'onChange'> {
+import React, { ComponentPropsWithoutRef } from "react";
+interface StepperVerticalProps extends Omit<ComponentPropsWithoutRef<"div">, "onChange"> {
     stepIndex?: number;
     onChange?: (stepIndex: number) => void;
 }

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

@@ -1,5 +1,5 @@
-import cn from 'classnames';
-import React, { forwardRef } from 'react';
+import cn from "classnames";
+import React, { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
 const StepperVertical = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
@@ -29,7 +29,7 @@ const StepperVertical = /*#__PURE__*/forwardRef((_ref, ref) => {
   });
   return /*#__PURE__*/_jsx("div", {
     ref: ref,
-    className: cn('fwe-stepper-vertical', className),
+    className: cn("fwe-stepper-vertical", className),
     ...props,
     children: stepComponents
   });

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

@@ -1,6 +1,6 @@
-import './StepVertical.scss';
-import { ComponentPropsWithoutRef } from 'react';
-interface StepVerticalProps extends ComponentPropsWithoutRef<'div'> {
+import "./StepVertical.scss";
+import { ComponentPropsWithoutRef } from "react";
+interface StepVerticalProps extends ComponentPropsWithoutRef<"div"> {
     isActive?: boolean;
     isLastElement?: boolean;
     isDone?: boolean;

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

@@ -1,5 +1,5 @@
-import cn from 'classnames';
-import { forwardRef, useEffect, useRef } from 'react';
+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 {
@@ -21,7 +21,7 @@ const StepVertical = /*#__PURE__*/forwardRef((_ref, ref) => {
         const itemHeight = contentRef.current?.offsetHeight;
         containerRef.current.style.height = `${itemHeight}px`;
       } else {
-        containerRef.current.style.height = '20px';
+        containerRef.current.style.height = "20px";
       }
     }
   }, [isActive]);
@@ -31,21 +31,21 @@ const StepVertical = /*#__PURE__*/forwardRef((_ref, ref) => {
     }
   }
   const handleKeyDown = event => {
-    if (event.key === 'Enter') {
+    if (event.key === "Enter") {
       handleClick();
     }
   };
   const handleKeyUp = event => {
-    if (event.key === ' ') {
+    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
+    className: cn("fwe-step-container", {
+      "fwe-last-element": isLastElement,
+      "fwe-step-active": isActive,
+      "fwe-step-done": isDone
     }),
     ...props,
     children: [/*#__PURE__*/_jsxs("div", {

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

@@ -1,7 +1,7 @@
-import './Tabs.scss';
-import React, { ComponentPropsWithoutRef } from 'react';
-type TabItemAppearance = 'fill' | 'equal' | 'default';
-export type TabViewType = 'legacy' | 'responsive';
+import "./Tabs.scss";
+import React, { ComponentPropsWithoutRef } from "react";
+type TabItemAppearance = "fill" | "equal" | "default";
+export type TabViewType = "legacy" | "responsive";
 export interface TabsConfiguration {
     tabBar?: {
         fullWidth?: boolean;
@@ -10,7 +10,7 @@ export interface TabsConfiguration {
         appearance: TabItemAppearance;
     };
 }
-interface TabsProps extends Omit<ComponentPropsWithoutRef<'div'>, 'onChange'> {
+interface TabsProps extends Omit<ComponentPropsWithoutRef<"div">, "onChange"> {
     config?: TabsConfiguration;
     viewType?: TabViewType;
     showDivider?: boolean;

package/lib/components/tab/Tabs.js

@@ -1,5 +1,5 @@
-import classNames from 'classnames';
-import React, { forwardRef, isValidElement, useEffect, useRef, useState } from 'react';
+import classNames from "classnames";
+import React, { forwardRef, isValidElement, useEffect, useRef, useState } from "react";
 import useForkRef from "../../helper/useForkRef.js";
 import useTabScroll from "./useTabScroll.js";
 import IconWrapper from "../icon-wrapper/IconWrapper.js"; // legacy: recommended for desktop only applications
@@ -12,7 +12,7 @@ const Tabs = /*#__PURE__*/forwardRef((_ref, ref) => {
     children,
     className,
     onChange,
-    viewType = 'responsive',
+    viewType = "responsive",
     showDivider = false,
     ...props
   } = _ref;
@@ -23,10 +23,10 @@ const Tabs = /*#__PURE__*/forwardRef((_ref, ref) => {
   const scrollContent = useRef(null);
   const scrollArea = useRef(null);
   const observer = useRef(null);
-  let activeId = '';
+  let activeId = "";
   React.Children.forEach(children, (element, i) => {
     if (/*#__PURE__*/React.isValidElement(element)) {
-      if (activeId === '') {
+      if (activeId === "") {
         activeId = `${componentId.current}-tab-panel-${i}`;
       } else if (element.props.active) {
         activeId = `${componentId.current}-tab-panel-${i}`;
@@ -101,16 +101,16 @@ const Tabs = /*#__PURE__*/forwardRef((_ref, ref) => {
     /*#__PURE__*/
     // eslint-disable-next-line react/jsx-no-useless-fragment
     _jsx(_Fragment, {
-      children: viewType === 'legacy' ? /*#__PURE__*/_jsxs("div", {
-        className: classNames('fwe-legacy-tabs', className),
+      children: viewType === "legacy" ? /*#__PURE__*/_jsxs("div", {
+        className: classNames("fwe-legacy-tabs", className),
         children: [/*#__PURE__*/_jsx("ul", {
           role: "tablist",
-          className: classNames('fwe-legacy-tab-bar', {
-            'fwe-legacy-tab-bar-full-width': config?.tabBar?.fullWidth
+          className: classNames("fwe-legacy-tab-bar", {
+            "fwe-legacy-tab-bar-full-width": config?.tabBar?.fullWidth
           }, {
-            'fwe-legacy-tab-items-equal-width': config?.tabItems?.appearance === 'equal'
+            "fwe-legacy-tab-items-equal-width": config?.tabItems?.appearance === "equal"
           }, {
-            'fwe-legacy-tab-items-fill': config?.tabItems?.appearance === 'fill'
+            "fwe-legacy-tab-items-fill": config?.tabItems?.appearance === "fill"
           }),
           children: innerChildren && innerChildren.map((child, i) => {
             const {
@@ -124,8 +124,8 @@ const Tabs = /*#__PURE__*/forwardRef((_ref, ref) => {
               /*#__PURE__*/
               // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions
               _jsx("li", {
-                className: classNames('fwe-legacy-tab-item', {
-                  'fwe-active': active
+                className: classNames("fwe-legacy-tab-item", {
+                  "fwe-active": active
                 }),
                 onClick: () => showTabPane(id),
                 children: icon ?
@@ -133,8 +133,8 @@ const Tabs = /*#__PURE__*/forwardRef((_ref, ref) => {
                 // eslint-disable-next-line jsx-a11y/anchor-is-valid
                 _jsxs("a", {
                   id: tabId,
-                  className: classNames('fwe-legacy-tab-link', {
-                    'fwe-can-swap-icon': innerChildren.length === 2 && i === 1
+                  className: classNames("fwe-legacy-tab-link", {
+                    "fwe-can-swap-icon": innerChildren.length === 2 && i === 1
                   }),
                   role: "tab",
                   "aria-controls": id,
@@ -168,15 +168,15 @@ const Tabs = /*#__PURE__*/forwardRef((_ref, ref) => {
         ref: combinedRef,
         ...props,
         children: [/*#__PURE__*/_jsx("div", {
-          className: classNames('fr-tab-scroller', classes),
+          className: classNames("fr-tab-scroller", classes),
           children: /*#__PURE__*/_jsx("div", {
-            className: classNames('fr-tab-scroller-scroll-area fr-tab-scroller-scroll-area--scroll', {
-              'fr-tab-scroller-scroll-area--compact': useCompactDensity
+            className: classNames("fr-tab-scroller-scroll-area fr-tab-scroller-scroll-area--scroll", {
+              "fr-tab-scroller-scroll-area--compact": useCompactDensity
             }),
             ref: scrollArea,
             children: /*#__PURE__*/_jsxs("div", {
-              className: classNames('fr-tab-scroller-scroll-content', {
-                'fr-tab-scroller-scroll-content--with-divider': showDivider
+              className: classNames("fr-tab-scroller-scroll-content", {
+                "fr-tab-scroller-scroll-content--with-divider": showDivider
               }),
               ref: scrollContent,
               style: style,
@@ -190,8 +190,8 @@ const Tabs = /*#__PURE__*/forwardRef((_ref, ref) => {
                 return /*#__PURE__*/_jsxs("button", {
                   type: "button",
                   role: "tab",
-                  className: classNames('fr-tab', {
-                    'fr-tab--active': active
+                  className: classNames("fr-tab", {
+                    "fr-tab--active": active
                   }),
                   id: tabId,
                   "aria-controls": id,
@@ -205,8 +205,8 @@ const Tabs = /*#__PURE__*/forwardRef((_ref, ref) => {
                       children: name
                     })
                   }), /*#__PURE__*/_jsx("span", {
-                    className: classNames('fr-tab-indicator', {
-                      'fr-tab-indicator--active': active
+                    className: classNames("fr-tab-indicator", {
+                      "fr-tab-indicator--active": active
                     }),
                     children: /*#__PURE__*/_jsx("span", {
                       className: "fr-tab-indicator-content fr-tab-indicator-content--underline"

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

@@ -1,6 +1,6 @@
-import { ClassNamePropsWithChildren } from '../../../helper/types';
-import { Tab } from '../interfaces';
-import './TabPane.scss';
+import { ClassNamePropsWithChildren } from "../../../helper/types";
+import { Tab } from "../interfaces";
+import "./TabPane.scss";
 export interface TabPaneProps extends ClassNamePropsWithChildren, Tab {
     id?: string;
     isVisible?: boolean;

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

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from "classnames";
 import { jsx as _jsx } from "react/jsx-runtime";
 function TabPane(_ref) {
   let {
@@ -9,9 +9,9 @@ function TabPane(_ref) {
     id
   } = _ref;
   const tabPaneClasses = classNames({
-    'fr-show': isVisible
+    "fr-show": isVisible
   }, {
-    'fr-hide': !isVisible
+    "fr-hide": !isVisible
   }, className);
   return /*#__PURE__*/_jsx("div", {
     id: id,

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

@@ -1,4 +1,4 @@
-import React, { CSSProperties } from 'react';
+import React, { CSSProperties } from "react";
 export interface TabDimensions {
     rootLeft: number;
     rootRight: number;

package/lib/components/tab/useTabScroll.js

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useState } from "react";
 
 // provides details about the left and right edges of the tab element and the tab content element
 // these values are used to determine the visual position of the tab with respect of its parent container
@@ -10,13 +10,13 @@ const useTabScroll = (tabLength, componentId, refs) => {
     scrollArea
   } = refs;
   const [style, setStyle] = useState({});
-  const [classes, setClasses] = useState('');
+  const [classes, setClasses] = useState("");
   function getScrollContentStyleValue(propName) {
-    return scrollContent.current ? window.getComputedStyle(scrollContent.current).getPropertyValue(propName) : '';
+    return scrollContent.current ? window.getComputedStyle(scrollContent.current).getPropertyValue(propName) : "";
   }
   function calculateCurrentTranslateX() {
-    const transformValue = getScrollContentStyleValue('transform');
-    if (transformValue === 'none') {
+    const transformValue = getScrollContentStyleValue("transform");
+    if (transformValue === "none") {
       return 0;
     }
 
@@ -29,7 +29,7 @@ const useTabScroll = (tabLength, componentId, refs) => {
     const matrixParams = match[1];
     // we need value of tx -> translateX
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const [a, b, c, d, tx, ty] = matrixParams.split(',');
+    const [a, b, c, d, tx, ty] = matrixParams.split(",");
     return parseFloat(tx);
   }
   function getScrollPosition() {
@@ -66,9 +66,9 @@ const useTabScroll = (tabLength, componentId, refs) => {
   }
   function stopScrollAnimation() {
     const currentScrollPosition = getAnimatingScrollPosition();
-    setClasses('');
+    setClasses("");
     setStyle({
-      transform: 'translateX(0px)'
+      transform: "translateX(0px)"
     });
     if (scrollArea.current) {
       scrollArea.current.scrollLeft = currentScrollPosition;
@@ -95,9 +95,9 @@ const useTabScroll = (tabLength, componentId, refs) => {
       scrollArea.current.getBoundingClientRect();
     }
     requestAnimationFrame(() => {
-      setClasses('fr-tab-scroller--animating');
+      setClasses("fr-tab-scroller--animating");
       setStyle({
-        transform: 'none'
+        transform: "none"
       });
     });
   }
@@ -112,7 +112,7 @@ const useTabScroll = (tabLength, componentId, refs) => {
   function computeDimensions(tab) {
     const rootWidth = tab.offsetWidth;
     const rootLeft = tab.offsetLeft;
-    const tabContent = tab.querySelector('.fr-tab-content');
+    const tabContent = tab.querySelector(".fr-tab-content");
     const contentWidth = tabContent?.offsetWidth ?? 0;
     const contentLeft = tabContent?.offsetLeft ?? 0;
     return {