@festo-ui/react 9.0.0-dev.717 → 9.0.0-dev.719

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

package/dist/components/tab/Tabs.js

@@ -0,0 +1,194 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import "./Tabs.css";
+import classnames from "classnames";
+import react, { forwardRef, isValidElement, useEffect, useRef, useState } from "react";
+import { useForkRef } from "../../utils/useForkRef.js";
+import { IconWrapper } from "../icon-wrapper/IconWrapper.js";
+import { useTabScroll } from "./useTabScroll.js";
+let nextId = 0;
+const Tabs = /*#__PURE__*/ forwardRef(({ config, children, className, onChange, viewType = 'responsive', showDivider = false, ...props }, ref)=>{
+    const [useCompactDensity, setCompactDensity] = useState(true);
+    const componentId = useRef(`tabs-${++nextId}`);
+    const elRef = useRef(null);
+    const combinedRef = useForkRef(ref, elRef);
+    const scrollContent = useRef(null);
+    const scrollArea = useRef(null);
+    const observer = useRef(null);
+    let activeId = '';
+    react.Children.forEach(children, (element, i)=>{
+        if (/*#__PURE__*/ react.isValidElement(element)) {
+            if ('' === activeId) activeId = `${componentId.current}-tab-panel-${i}`;
+            else if (element.props.active) activeId = `${componentId.current}-tab-panel-${i}`;
+        }
+    });
+    const [currentId, setId] = useState(activeId);
+    const innerChildren = react.Children.map(children, (element, i)=>{
+        if (/*#__PURE__*/ isValidElement(element)) {
+            const newId = `${componentId.current}-tab-panel-${i}`;
+            return /*#__PURE__*/ react.cloneElement(element, {
+                isVisible: newId === currentId,
+                active: newId === currentId,
+                id: newId,
+                tabId: `${componentId.current}-tab-${i}`,
+                ...element.props
+            });
+        }
+    });
+    const [handleTabScroll, classes, style] = useTabScroll(innerChildren?.length ?? 0, componentId.current, {
+        elRef,
+        scrollContent,
+        scrollArea
+    });
+    useEffect(()=>{
+        const { current } = scrollArea;
+        if (current) {
+            const initialWidth = current.offsetWidth;
+            if (initialWidth > 768) setCompactDensity(false);
+            observer.current = new ResizeObserver(()=>{
+                const width = current.offsetWidth;
+                if (width > 768 && useCompactDensity) setCompactDensity(false);
+                else if (width <= 768 && !useCompactDensity) setCompactDensity(true);
+            });
+            if (current) observer.current.observe(current);
+        }
+        return ()=>{
+            if (current && observer && observer.current) observer.current.unobserve(current);
+        };
+    }, [
+        useCompactDensity
+    ]);
+    const showTabPane = (id)=>{
+        if (null == id) return;
+        if (onChange) onChange({
+            previous: currentId,
+            current: id
+        });
+        setId(id);
+    };
+    function handleClick(e, index, id) {
+        handleTabScroll(e, index);
+        if (void 0 !== id) showTabPane(id);
+    }
+    return /*#__PURE__*/ jsx(Fragment, {
+        children: 'legacy' === viewType ? /*#__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
+                    }, {
+                        'fwe-legacy-tab-items-equal-width': config?.tabItems?.appearance === 'equal'
+                    }, {
+                        'fwe-legacy-tab-items-fill': config?.tabItems?.appearance === 'fill'
+                    }),
+                    children: innerChildren?.map((child, i)=>{
+                        const { active, icon, name, id, tabId } = child.props;
+                        return /*#__PURE__*/ jsx("li", {
+                            className: classnames('fwe-legacy-tab-item', {
+                                'fwe-active': active
+                            }),
+                            children: icon ? /*#__PURE__*/ jsxs("button", {
+                                type: "button",
+                                id: tabId,
+                                className: classnames('fwe-legacy-tab-link', {
+                                    'fwe-can-swap-icon': 2 === innerChildren.length && 1 === i
+                                }),
+                                role: "tab",
+                                "aria-controls": id,
+                                "aria-selected": active,
+                                onClick: ()=>showTabPane(id),
+                                children: [
+                                    /*#__PURE__*/ jsx(IconWrapper, {
+                                        icon: icon
+                                    }),
+                                    /*#__PURE__*/ jsx("span", {
+                                        children: name
+                                    })
+                                ]
+                            }) : /*#__PURE__*/ jsx("button", {
+                                type: "button",
+                                id: tabId,
+                                className: "fwe-legacy-tab-link",
+                                role: "tab",
+                                "aria-controls": id,
+                                "aria-selected": active,
+                                onClick: ()=>showTabPane(id),
+                                children: name
+                            })
+                        }, tabId);
+                    })
+                }),
+                /*#__PURE__*/ jsx("div", {
+                    className: "fwe-legacy-tab-panel-content",
+                    children: innerChildren
+                })
+            ]
+        }) : /*#__PURE__*/ jsxs("div", {
+            className: "fr-tab-bar",
+            role: "tablist",
+            ref: combinedRef,
+            ...props,
+            children: [
+                /*#__PURE__*/ jsx("div", {
+                    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
+                        }),
+                        ref: scrollArea,
+                        children: /*#__PURE__*/ jsxs("div", {
+                            className: classnames('fr-tab-scroller-scroll-content', {
+                                'fr-tab-scroller-scroll-content--with-divider': showDivider
+                            }),
+                            ref: scrollContent,
+                            style: style,
+                            children: [
+                                innerChildren?.map((child, i)=>{
+                                    const { active, name, id, tabId } = child.props;
+                                    return /*#__PURE__*/ jsxs("button", {
+                                        type: "button",
+                                        role: "tab",
+                                        className: classnames('fr-tab', {
+                                            'fr-tab--active': active
+                                        }),
+                                        id: tabId,
+                                        "aria-controls": id,
+                                        "aria-selected": active,
+                                        tabIndex: 0 === i ? 0 : 1,
+                                        onClick: (e)=>handleClick(e, i, id),
+                                        children: [
+                                            /*#__PURE__*/ jsx("span", {
+                                                className: "fr-tab-content",
+                                                children: /*#__PURE__*/ jsx("span", {
+                                                    className: "fr-tab-text-label",
+                                                    children: name
+                                                })
+                                            }),
+                                            /*#__PURE__*/ jsx("span", {
+                                                className: classnames('fr-tab-indicator', {
+                                                    'fr-tab-indicator--active': active
+                                                }),
+                                                children: /*#__PURE__*/ jsx("span", {
+                                                    className: "fr-tab-indicator-content fr-tab-indicator-content--underline"
+                                                })
+                                            })
+                                        ]
+                                    }, tabId);
+                                }),
+                                /*#__PURE__*/ jsx("div", {
+                                    className: "fr-tab-scroller-divider-line"
+                                })
+                            ]
+                        })
+                    })
+                }),
+                /*#__PURE__*/ jsx("div", {
+                    className: "fr-tab-panel-content",
+                    children: innerChildren
+                })
+            ]
+        })
+    });
+});
+export { Tabs };

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

@@ -0,0 +1,5 @@
+export type Tab = {
+    icon?: React.ReactNode;
+    active?: boolean;
+    name: string;
+};

package/dist/components/tab/tab-pane/TabPane.css

@@ -0,0 +1,8 @@
+.fr-show {
+  display: block;
+}
+
+.fr-hide {
+  display: none;
+}
+

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

@@ -0,0 +1,9 @@
+import './TabPane.scss';
+import type { ClassNamePropsWithChildren } from '../../../utils/types';
+import type { Tab } from '../interfaces';
+export interface TabPaneProps extends ClassNamePropsWithChildren, Tab {
+    readonly id?: string;
+    readonly isVisible?: boolean;
+    readonly tabId?: string;
+}
+export declare function TabPane({ isVisible, children, className, tabId, id, }: TabPaneProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,18 @@
+import { jsx } from "react/jsx-runtime";
+import "./TabPane.css";
+import classnames from "classnames";
+function TabPane({ isVisible = false, children, className, tabId, id }) {
+    const tabPaneClasses = classnames({
+        'fr-show': isVisible
+    }, {
+        'fr-hide': !isVisible
+    }, className);
+    return /*#__PURE__*/ jsx("div", {
+        id: id,
+        role: "tabpanel",
+        "aria-labelledby": tabId,
+        className: tabPaneClasses,
+        children: children
+    });
+}
+export { TabPane };

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

@@ -0,0 +1,25 @@
+import type React from 'react';
+import { type CSSProperties } from 'react';
+export interface TabDimensions {
+    rootLeft: number;
+    rootRight: number;
+    contentLeft: number;
+    contentRight: number;
+}
+export interface TabScrollAnimation {
+    finalScrollPosition: number;
+    scrollDelta: number;
+}
+export interface TabScrollHorizontalEdges {
+    left: number;
+    right: number;
+}
+type TypeHandleTabScroll = (e: React.MouseEvent<HTMLButtonElement>, index: number) => void;
+interface Refs {
+    elRef: React.MutableRefObject<HTMLDivElement | null>;
+    scrollContent: React.MutableRefObject<HTMLDivElement | null>;
+    scrollArea: React.MutableRefObject<HTMLDivElement | null>;
+}
+type TypeUseTabScroll = (tabLength: number, componentId: string, refs: Refs) => [TypeHandleTabScroll, string, CSSProperties];
+export declare const useTabScroll: TypeUseTabScroll;
+export {};