@festo-ui/react 10.0.1-dev.848 → 10.0.1-dev.849

package/dist/components/tab/Tabs.css

@@ -1,285 +0,0 @@
-.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

@@ -1,22 +0,0 @@
-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;

package/dist/components/tab/Tabs.js

@@ -1,194 +0,0 @@
-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 || 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: classnames('fr-tab-bar', className),
-            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
-                })
-            ]
-        })
-    });
-});
-Tabs.displayName = 'Tabs';
-export { Tabs };

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

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

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

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

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

@@ -1,8 +0,0 @@
-import './TabPane.scss';
-import type React from 'react';
-import type { Tab } from '../interfaces';
-export interface TabPaneProps extends React.ComponentPropsWithoutRef<'div'>, Tab {
-    readonly isVisible?: boolean;
-    readonly tabId?: string;
-}
-export declare const TabPane: (props: TabPaneProps & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null;

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

@@ -1,22 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import "./TabPane.css";
-import classnames from "classnames";
-import { forwardRef } from "react";
-const TabPane = /*#__PURE__*/ forwardRef(({ isVisible = false, children, className, tabId, id, active: _active, name: _name, icon: _icon, ...props }, ref)=>{
-    const tabPaneClasses = classnames({
-        'fr-show': isVisible
-    }, {
-        'fr-hide': !isVisible
-    }, className);
-    return /*#__PURE__*/ jsx("div", {
-        id: id,
-        role: "tabpanel",
-        "aria-labelledby": tabId,
-        className: tabPaneClasses,
-        ref: ref,
-        ...props,
-        children: children
-    });
-});
-TabPane.displayName = 'TabPane';
-export { TabPane };

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

@@ -1,25 +0,0 @@
-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.RefObject<HTMLDivElement | null>;
-    scrollContent: React.RefObject<HTMLDivElement | null>;
-    scrollArea: React.RefObject<HTMLDivElement | null>;
-}
-type TypeUseTabScroll = (tabLength: number, componentId: string, refs: Refs) => [TypeHandleTabScroll, string, CSSProperties];
-export declare const useTabScroll: TypeUseTabScroll;
-export {};