@festo-ui/react 9.0.0-dev.707 → 9.0.0-dev.710

package/lib/components/tab/Tabs.js

@@ -1,229 +0,0 @@
-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
-// responsive: desktop, tablet, mobile with scrollable tabs
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-let nextId = 0;
-const Tabs = /*#__PURE__*/forwardRef((_ref, ref) => {
-  let {
-    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
-      });
-    }
-    return undefined;
-  });
-  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 (id === undefined || id === null) {
-      return;
-    }
-    if (onChange) {
-      onChange({
-        previous: currentId,
-        current: id
-      });
-    }
-    setId(id);
-  };
-  function handleClick(e, index, id) {
-    handleTabScroll(e, index);
-    if (id !== undefined) {
-      showTabPane(id);
-    }
-  }
-  return (
-    /*#__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: [/*#__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 && innerChildren.map((child, i) => {
-            const {
-              active,
-              icon,
-              name,
-              id,
-              tabId
-            } = child.props;
-            return (
-              /*#__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
-                }),
-                onClick: () => showTabPane(id),
-                children: icon ?
-                /*#__PURE__*/
-                // 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
-                  }),
-                  role: "tab",
-                  "aria-controls": id,
-                  "aria-selected": active,
-                  children: [/*#__PURE__*/_jsx(IconWrapper, {
-                    icon: icon
-                  }), /*#__PURE__*/_jsx("span", {
-                    children: name
-                  })]
-                }) :
-                /*#__PURE__*/
-                // eslint-disable-next-line jsx-a11y/anchor-is-valid
-                _jsx("a", {
-                  id: tabId,
-                  className: "fwe-legacy-tab-link",
-                  role: "tab",
-                  "aria-controls": id,
-                  "aria-selected": active,
-                  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 && 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: i === 0 ? 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 default Tabs;

package/lib/components/tab/interfaces.js

@@ -1 +0,0 @@
-export {};

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

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

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

@@ -1,23 +0,0 @@
-import classNames from "classnames";
-import { jsx as _jsx } from "react/jsx-runtime";
-function TabPane(_ref) {
-  let {
-    isVisible = false,
-    children,
-    className,
-    tabId,
-    id
-  } = _ref;
-  const tabPaneClasses = classNames({
-    "fr-show": isVisible
-  }, {
-    "fr-hide": !isVisible
-  }, className);
-  return /*#__PURE__*/_jsx("div", {
-    id: id,
-    "aria-labelledby": tabId,
-    className: tabPaneClasses,
-    children: children
-  });
-}
-export default TabPane;

package/lib/components/tab/useTabScroll.js

@@ -1,233 +0,0 @@
-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
-
-const useTabScroll = (tabLength, componentId, refs) => {
-  const {
-    elRef,
-    scrollContent,
-    scrollArea
-  } = refs;
-  const [style, setStyle] = useState({});
-  const [classes, setClasses] = useState("");
-  function getScrollContentStyleValue(propName) {
-    return scrollContent.current ? window.getComputedStyle(scrollContent.current).getPropertyValue(propName) : "";
-  }
-  function calculateCurrentTranslateX() {
-    const transformValue = getScrollContentStyleValue("transform");
-    if (transformValue === "none") {
-      return 0;
-    }
-
-    // the transform value is in form of 'matrix(a, b, c, d, tx, ty)'
-    // get all the parenthesized values
-    const match = /\((.+?)\)/.exec(transformValue);
-    if (!match) {
-      return 0;
-    }
-    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(",");
-    return parseFloat(tx);
-  }
-  function getScrollPosition() {
-    const currentTranslateX = calculateCurrentTranslateX();
-    const scrollLeft = scrollArea.current?.scrollLeft ?? 0;
-    return scrollLeft - currentTranslateX;
-  }
-  function calculateScrollEdges() {
-    const scrollContentWidth = scrollContent.current?.offsetWidth ?? 0;
-    const scrollAreaWidth = scrollArea.current?.offsetWidth ?? 0;
-    return {
-      left: 0,
-      right: scrollContentWidth - scrollAreaWidth
-    };
-  }
-  function clampScrollValue(scrollX) {
-    const edges = calculateScrollEdges();
-    return Math.min(Math.max(edges.left, scrollX), edges.right);
-  }
-  function getIncrementScrollOperation(scrollX) {
-    const currentScrollX = getScrollPosition();
-    const targetScrollX = scrollX + currentScrollX;
-    const safeScrollX = clampScrollValue(targetScrollX);
-    const scrollDelta = safeScrollX - currentScrollX;
-    return {
-      finalScrollPosition: safeScrollX,
-      scrollDelta
-    };
-  }
-  function getAnimatingScrollPosition() {
-    const currentTranslateX = calculateCurrentTranslateX();
-    const scrollLeft = scrollArea.current?.scrollLeft ?? 0;
-    return scrollLeft - currentTranslateX;
-  }
-  function stopScrollAnimation() {
-    const currentScrollPosition = getAnimatingScrollPosition();
-    setClasses("");
-    setStyle({
-      transform: "translateX(0px)"
-    });
-    if (scrollArea.current) {
-      scrollArea.current.scrollLeft = currentScrollPosition;
-    }
-  }
-  function animate(animation) {
-    // no animation needed
-    if (animation.scrollDelta === 0) {
-      return;
-    }
-    stopScrollAnimation();
-
-    // this animation uses the flip approach
-    // https://aerotwist.com/blog/flip-your-animations/
-    // https://css-tricks.com/animating-layouts-with-the-flip-technique/
-    if (scrollArea.current) {
-      scrollArea.current.scrollLeft = animation.finalScrollPosition;
-    }
-    setStyle({
-      transform: `translateX(${animation.scrollDelta}px)`
-    });
-    // force repaint
-    if (scrollArea.current) {
-      scrollArea.current.getBoundingClientRect();
-    }
-    requestAnimationFrame(() => {
-      setClasses("fr-tab-scroller--animating");
-      setStyle({
-        transform: "none"
-      });
-    });
-  }
-  function incrementScroll(scrollXIncrement) {
-    // no scroll needed
-    if (scrollXIncrement === 0) {
-      return;
-    }
-    const scrollOperation = getIncrementScrollOperation(scrollXIncrement);
-    animate(scrollOperation);
-  }
-  function computeDimensions(tab) {
-    const rootWidth = tab.offsetWidth;
-    const rootLeft = tab.offsetLeft;
-    const tabContent = tab.querySelector(".fr-tab-content");
-    const contentWidth = tabContent?.offsetWidth ?? 0;
-    const contentLeft = tabContent?.offsetLeft ?? 0;
-    return {
-      contentLeft: rootLeft + contentLeft,
-      contentRight: rootLeft + contentLeft + contentWidth,
-      rootLeft,
-      rootRight: rootLeft + rootWidth
-    };
-  }
-  function calculateScrollIncrement(index, nextIndex, scrollPosition, barWidth) {
-    const nextTab = elRef.current?.querySelector(`#${componentId}-tab-${nextIndex}`);
-    if (nextTab === null || nextTab === undefined) {
-      return 0;
-    }
-    const nextTabDimensions = computeDimensions(nextTab);
-    const relativeContentLeft = nextTabDimensions.contentLeft - scrollPosition - barWidth;
-    const relativeContentRight = nextTabDimensions.contentRight - scrollPosition;
-    const leftIncrement = relativeContentRight - 48;
-    const rightIncrement = relativeContentLeft + 48;
-    if (nextIndex < index) {
-      return Math.min(leftIncrement, 0);
-    }
-    return Math.max(rightIncrement, 0);
-  }
-  function findAdjacentTabIndexClosestToEdge(index, tabDimensions, scrollPosition, barWidth) {
-    /**
-     * tabs are laid out in the tab scroller like this:
-     *
-     *    scroll position
-     *    +---+
-     *    |   |   bar width
-     *    |   +-----------------------------------+
-     *    |   |                                   |
-     *    |   v                                   v
-     *    |   +-----------------------------------+
-     *    v   |             tab scroller          |
-     *    +------------+--------------+-------------------+
-     *    |    tab     |      tab     |        tab        |
-     *    +------------+--------------+-------------------+
-     *        |                                   |
-     *        +-----------------------------------+
-     *
-     * to determine the next adjacent index, we look at the tab root left and
-     * tab root right, both relative to the scroll position. if the tab root
-     * left is less than 0, then we know it's out of view to the left. if the
-     * tab root right minus the bar width is greater than 0, we know the tab is
-     * out of view to the right. from there, we either increment or decrement
-     * the index.
-     */
-    const relativeRootLeft = tabDimensions.rootLeft - scrollPosition;
-    const relativeRootRight = tabDimensions.rootRight - scrollPosition - barWidth;
-    const relativeRootDelta = relativeRootLeft + relativeRootRight;
-    const leftEdgeIsCloser = relativeRootLeft < 0 || relativeRootDelta < 0;
-    const rightEdgeIsCloser = relativeRootRight > 0 || relativeRootDelta > 0;
-    if (leftEdgeIsCloser) {
-      return index - 1;
-    }
-    if (rightEdgeIsCloser) {
-      return index + 1;
-    }
-    return -1;
-  }
-  function indexIsInRange(index) {
-    return index >= 0 && index < tabLength;
-  }
-  function scrollIntoView(index, tab) {
-    const scrollPosition = getScrollPosition();
-    const barWidth = scrollArea.current?.offsetWidth ?? 0;
-    const tabDimensions = computeDimensions(tab);
-    const nextIndex = findAdjacentTabIndexClosestToEdge(index, tabDimensions, scrollPosition, barWidth);
-    if (!indexIsInRange(nextIndex)) {
-      return;
-    }
-    const scrollIncrement = calculateScrollIncrement(index, nextIndex, scrollPosition, barWidth);
-    incrementScroll(scrollIncrement);
-  }
-  function scrollTo(scrollX) {
-    const currentScrollX = getScrollPosition();
-    const safeScrollX = clampScrollValue(scrollX);
-    const scrollDelta = safeScrollX - currentScrollX;
-    animate({
-      finalScrollPosition: safeScrollX,
-      scrollDelta
-    });
-  }
-  function handleTabScroll(e, index) {
-    const scrollContentWidth = scrollContent.current?.offsetWidth ?? 0;
-    const scrollAreaWidth = scrollArea.current?.offsetWidth ?? 0;
-
-    // check if no scroll is needed
-    if (scrollAreaWidth > scrollContentWidth) {
-      return;
-    }
-
-    // check index
-    if (!indexIsInRange(index)) {
-      return;
-    }
-
-    // always scroll to 0 if scrolling to the first tab
-    if (index === 0) {
-      scrollTo(0);
-      return;
-    }
-
-    // always scroll to the max value if scrolling to the last tab
-    if (index === tabLength - 1 && scrollContent.current) {
-      scrollTo(scrollContent.current.offsetWidth);
-      return;
-    }
-    if (e.currentTarget instanceof HTMLElement) {
-      const currentTab = e.currentTarget;
-      scrollIntoView(index, currentTab);
-    }
-  }
-  return [handleTabScroll, classes, style];
-};
-export default useTabScroll;

package/lib/components/table-header-cell/TableHeaderCell.d.ts

@@ -1,6 +0,0 @@
-export interface TableHeaderCellProps extends React.ThHTMLAttributes<HTMLTableCellElement> {
-    active?: boolean;
-    ascending: boolean;
-}
-declare const TableHeaderCell: (props: TableHeaderCellProps & import("react").RefAttributes<HTMLTableCellElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;
-export default TableHeaderCell;

package/lib/components/table-header-cell/TableHeaderCell.js

@@ -1,29 +0,0 @@
-import classNames from "classnames";
-import { forwardRef } from "react";
-import { jsx as _jsx } from "react/jsx-runtime";
-const TableHeaderCell = /*#__PURE__*/forwardRef((_ref, ref) => {
-  let {
-    active,
-    ascending,
-    className,
-    ...props
-  } = _ref;
-  function handleClick(event) {
-    if (props.onClick) {
-      props.onClick(event);
-    }
-  }
-  return /*#__PURE__*/_jsx("th", {
-    ...props,
-    className: classNames("fwe-table-order", {
-      "fwe-active": active
-    }, {
-      "fwe-table-order-ascending": active && ascending
-    }, {
-      "fwe-table-order-descending": active && !ascending
-    }, className),
-    onClick: handleClick,
-    ref: ref
-  });
-});
-export default TableHeaderCell;

package/lib/forms/checkbox/Checkbox.d.ts

@@ -1,17 +0,0 @@
-import "./Checkbox.scss";
-import React from "react";
-export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange"> {
-    id?: string;
-    checked?: boolean;
-    defaultChecked?: boolean;
-    onChange?: (value: boolean, e: React.ChangeEvent<HTMLInputElement>) => void;
-    name?: string;
-    large?: boolean;
-    valid?: boolean;
-    labelPosition?: "before" | "after" | "below";
-    required?: boolean;
-    disabled?: boolean;
-    indeterminate?: boolean;
-}
-declare function Checkbox({ id, checked: checkedProp, defaultChecked, onChange, name, large, valid, labelPosition, required, disabled, indeterminate, children, className, ...props }: CheckboxProps): import("react/jsx-runtime").JSX.Element;
-export default Checkbox;

package/lib/forms/checkbox/Checkbox.js

@@ -1,86 +0,0 @@
-import classNames from "classnames";
-import React from "react";
-import useControlled from "../../helper/useControlled.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-function Checkbox(_ref) {
-  let {
-    id,
-    checked: checkedProp,
-    defaultChecked,
-    onChange,
-    name,
-    large = false,
-    valid = true,
-    labelPosition = "after",
-    required,
-    disabled = false,
-    indeterminate = false,
-    children,
-    className,
-    ...props
-  } = _ref;
-  const [isChecked, setChecked] = useControlled({
-    controlled: checkedProp,
-    default: defaultChecked
-  });
-  const handleChange = e => {
-    const newChecked = !isChecked;
-    setChecked(newChecked);
-    onChange?.(newChecked, e);
-  };
-  const containerClasses = classNames("fwe-checkbox-container", {
-    "fr-checkbox-large": large
-  }, {
-    "fr-checkbox-invalid": !valid || required
-  }, {
-    "fwe-disabled": disabled
-  }, {
-    "fwe-checked": isChecked
-  }, {
-    "fwe-label-below": labelPosition === "below"
-  }, {
-    "fwe-label-before": labelPosition === "before"
-  }, {
-    "fr-checkbox-indeterminate": indeterminate
-  }, className);
-  return /*#__PURE__*/_jsxs("label", {
-    className: containerClasses,
-    htmlFor: id,
-    children: [/*#__PURE__*/_jsx("input", {
-      name: name,
-      type: "checkbox",
-      id: id,
-      disabled: disabled,
-      required: required,
-      onChange: e => handleChange(e),
-      ...props,
-      checked: isChecked
-    }), /*#__PURE__*/_jsxs("div", {
-      className: "fwe-checkbox-indicator-container",
-      children: [/*#__PURE__*/_jsx("div", {
-        className: "fwe-checkbox-indicator-background"
-      }), !indeterminate && isChecked && (large ? /*#__PURE__*/_jsx("svg", {
-        width: "24px",
-        height: "24px",
-        children: /*#__PURE__*/_jsx("path", {
-          d: "M17.5 7L10 14.5 7.501 12l-1.5 1.501L10 17.5l9-9z",
-          fill: "#fff"
-        })
-      }) : /*#__PURE__*/_jsx("svg", {
-        xmlns: "http://www.w3.org/2000/svg",
-        width: "16",
-        height: "16",
-        children: /*#__PURE__*/_jsx("path", {
-          d: "M6 12L3 9l1.25-1.25L6 9.5l5.75-5.75L13 5l-7 7z",
-          fill: "#fff"
-        })
-      })), indeterminate && /*#__PURE__*/_jsx("div", {
-        className: "fwe-indeterminate-indicator"
-      })]
-    }), /*#__PURE__*/_jsx("div", {
-      className: "fwe-checkbox-title",
-      children: children
-    })]
-  });
-}
-export default Checkbox;