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

package/dist/components/tab/useTabScroll.js

@@ -1,151 +0,0 @@
-import { useState } from "react";
-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 ('none' === transformValue) return 0;
-        const match = /\(([^)]+)\)/.exec(transformValue);
-        if (!match) return 0;
-        const matrixParams = match[1];
-        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) {
-        if (0 === animation.scrollDelta) return;
-        stopScrollAnimation();
-        if (scrollArea.current) scrollArea.current.scrollLeft = animation.finalScrollPosition;
-        setStyle({
-            transform: `translateX(${animation.scrollDelta}px)`
-        });
-        if (scrollArea.current) scrollArea.current.getBoundingClientRect();
-        requestAnimationFrame(()=>{
-            setClasses('fr-tab-scroller--animating');
-            setStyle({
-                transform: 'none'
-            });
-        });
-    }
-    function incrementScroll(scrollXIncrement) {
-        if (0 === scrollXIncrement) 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 (null == nextTab) 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) {
-        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;
-        if (scrollAreaWidth > scrollContentWidth) return;
-        if (!indexIsInRange(index)) return;
-        if (0 === index) return void scrollTo(0);
-        if (index === tabLength - 1 && scrollContent.current) return void scrollTo(scrollContent.current.offsetWidth);
-        if (e.currentTarget instanceof HTMLElement) {
-            const currentTab = e.currentTarget;
-            scrollIntoView(index, currentTab);
-        }
-    }
-    return [
-        handleTabScroll,
-        classes,
-        style
-    ];
-};
-export { useTabScroll };

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

@@ -1,6 +0,0 @@
-import { type ComponentPropsWithoutRef } from 'react';
-export interface TableHeaderCellProps extends ComponentPropsWithoutRef<'th'> {
-    readonly active?: boolean;
-    readonly ascending: boolean;
-}
-export declare const TableHeaderCell: (props: TableHeaderCellProps & import("react").RefAttributes<HTMLTableCellElement>) => React.ReactElement | null;

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

@@ -1,22 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import classnames from "classnames";
-import { forwardRef } from "react";
-const TableHeaderCell = /*#__PURE__*/ forwardRef(({ 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
-    });
-});
-TableHeaderCell.displayName = 'TableHeaderCell';
-export { TableHeaderCell };

package/dist/forms/checkbox/Checkbox.css

@@ -1,134 +0,0 @@
-.fwe-checkbox-container {
-  font-family: var(--fwe-font-family-sans-serif);
-  user-select: none;
-  cursor: pointer;
-  flex-direction: row;
-  align-items: center;
-  display: flex;
-}
-
-.fwe-checkbox-container.fwe-label-below {
-  flex-direction: column;
-}
-
-.fwe-checkbox-container.fwe-label-below .fwe-checkbox-title {
-  margin: 8px 0 0;
-}
-
-.fwe-checkbox-container.fwe-label-before {
-  flex-direction: row-reverse;
-  justify-content: flex-end;
-}
-
-.fwe-checkbox-container.fwe-label-before .fwe-checkbox-title {
-  margin: 0 8px 0 0;
-}
-
-.fwe-checkbox-container .fwe-checkbox-indicator-container {
-  position: relative;
-}
-
-.fwe-checkbox-container input {
-  opacity: 0;
-  cursor: pointer;
-  width: 0;
-  height: 0;
-}
-
-.fwe-checkbox-container .fwe-checkbox-title {
-  color: var(--fwe-text);
-  user-select: none;
-  margin-left: 8px;
-  line-height: 24px;
-}
-
-.fwe-checkbox-container .fwe-checkbox-indicator-background {
-  box-sizing: border-box;
-  background: var(--fwe-white);
-  border: 1px solid var(--fwe-text-light);
-  border-radius: 2px;
-  width: 16px;
-  height: 16px;
-  transition: border-width .2s ease-out;
-}
-
-.fwe-checkbox-container .fwe-indeterminate-indicator {
-  background: #fff;
-  width: 10px;
-  height: 2px;
-  position: absolute;
-  top: 7px;
-  left: 3px;
-}
-
-.fwe-checkbox-container .fwe-checkbox-indicator-background + svg {
-  display: block;
-  position: absolute;
-  top: 0;
-  left: 0;
-}
-
-.fwe-checkbox-container.fr-checkbox-large .fwe-checkbox-indicator-background {
-  border-radius: 4px;
-  width: 24px;
-  height: 24px;
-}
-
-.fwe-checkbox-container.fr-checkbox-large .fwe-indeterminate-indicator {
-  width: 14px;
-  top: 11px;
-  left: 5px;
-}
-
-.fwe-checkbox-container.fr-checkbox-large.fwe-checked .fwe-checkbox-indicator-background, .fwe-checkbox-container.fr-checkbox-large.fr-checkbox-indeterminate .fwe-checkbox-indicator-background {
-  border: 12px solid var(--fwe-hero);
-}
-
-.fwe-checkbox-container:hover .fwe-checkbox-indicator-background {
-  background-color: var(--fwe-control);
-}
-
-.fwe-checkbox-container:active .fwe-checkbox-indicator-background {
-  background-color: var(--fwe-control-hover);
-}
-
-.fwe-checkbox-container.fwe-checked .fwe-checkbox-indicator-background, .fwe-checkbox-container.fr-checkbox-indeterminate .fwe-checkbox-indicator-background {
-  border: 8px solid var(--fwe-hero);
-}
-
-.fwe-checkbox-container.fwe-checked:hover .fwe-checkbox-indicator-background, .fwe-checkbox-container.fr-checkbox-indeterminate:hover .fwe-checkbox-indicator-background {
-  border-color: var(--fwe-hero-hover);
-}
-
-.fwe-checkbox-container.fwe-checked:active .fwe-checkbox-indicator-background, .fwe-checkbox-container.fr-checkbox-indeterminate:active .fwe-checkbox-indicator-background {
-  border-color: var(--fwe-hero-active);
-}
-
-.fwe-checkbox-container.fr-checkbox-invalid .fwe-checkbox-indicator-background {
-  border: 1px solid var(--fwe-red);
-  background: var(--fwe-white);
-}
-
-.fwe-checkbox-container.fwe-disabled {
-  cursor: default;
-}
-
-.fwe-checkbox-container.fwe-disabled .fwe-checkbox-indicator-background {
-  background-color: var(--fwe-white);
-  border: 1px solid var(--fwe-control);
-}
-
-.fwe-checkbox-container.fwe-disabled.fwe-checked .fwe-checkbox-indicator-background, .fwe-checkbox-container.fwe-disabled.fr-checkbox-indeterminate .fwe-checkbox-indicator-background {
-  background-color: var(--fwe-control);
-  border: 1px solid var(--fwe-control);
-}
-
-.fwe-checkbox-container.fwe-disabled.fr-checkbox-invalid .fwe-checkbox-indicator-background {
-  background-color: var(--fwe-white);
-  border: 1px solid var(--fwe-control);
-}
-
-.fwe-checkbox-container.fwe-disabled .fwe-checkbox-title {
-  color: var(--fwe-text-disabled);
-}
-

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

@@ -1,12 +0,0 @@
-import './Checkbox.scss';
-import { type ComponentPropsWithoutRef } from 'react';
-export interface CheckboxProps extends Omit<ComponentPropsWithoutRef<'input'>, 'type' | 'onChange' | 'checked' | 'defaultChecked'> {
-    readonly checked?: boolean;
-    readonly defaultChecked?: boolean;
-    readonly onChange?: (value: boolean, e: React.ChangeEvent<HTMLInputElement>) => void;
-    readonly large?: boolean;
-    readonly valid?: boolean;
-    readonly labelPosition?: 'before' | 'after' | 'below';
-    readonly indeterminate?: boolean;
-}
-export declare const Checkbox: (props: CheckboxProps & import("react").RefAttributes<HTMLLabelElement>) => React.ReactElement | null;

package/dist/forms/checkbox/Checkbox.js

@@ -1,83 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import "./Checkbox.css";
-import classnames from "classnames";
-import { forwardRef } from "react";
-import { useControlled } from "../../utils/useControlled.js";
-const Checkbox = /*#__PURE__*/ forwardRef(({ 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 ?? false
-    });
-    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': 'below' === labelPosition
-    }, {
-        'fwe-label-before': 'before' === labelPosition
-    }, {
-        'fr-checkbox-indeterminate': indeterminate
-    }, className);
-    return /*#__PURE__*/ jsxs("label", {
-        className: containerClasses,
-        htmlFor: id,
-        ref: ref,
-        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",
-                        "aria-hidden": "true",
-                        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",
-                        "aria-hidden": "true",
-                        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
-            })
-        ]
-    });
-});
-Checkbox.displayName = 'Checkbox';
-export { Checkbox };

package/dist/forms/combobox/ComboBox.css

@@ -1,124 +0,0 @@
-.fr-combobox-wrapper {
-  width: inherit;
-  min-width: 64px;
-  font-size: var(--fwe-font-size-base);
-  flex-direction: column;
-  padding-bottom: 18px;
-  display: flex;
-  position: relative;
-}
-
-.fr-combobox-label {
-  height: 18px;
-  color: var(--fwe-text);
-  font-size: var(--fwe-font-size-small);
-  line-height: var(--fwe-line-height-base);
-  font-weight: var(--fwe-font-weight-bold);
-  order: 1;
-}
-
-.fr-combobox-control {
-  order: 2;
-  position: relative;
-}
-
-.fr-combobox-input {
-  width: 100%;
-  height: 33px;
-  font-size: var(--fwe-font-size-base);
-  appearance: none;
-  border: none;
-  border-bottom: 1px solid var(--fwe-control-border);
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  cursor: pointer;
-  background: none;
-  outline: 0;
-  padding: 4px 24px 4px 0;
-  display: block;
-  overflow: hidden;
-}
-
-.fr-combobox-input:hover:not(:disabled), .fr-combobox-input:focus:not(:disabled) {
-  color: var(--fwe-hero);
-  border-color: var(--fwe-hero);
-}
-
-.fr-combobox-button {
-  cursor: pointer;
-  background-color: var(--fwe-text);
-  border: none;
-  width: 24px;
-  height: 24px;
-  padding: 0;
-  position: absolute;
-  top: 50%;
-  right: 0;
-  transform: translateY(-50%);
-  mask: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgyNHYyNEgweiIgZGF0YS1uYW1lPSJ3aGl0ZSBiYWNrZ3JvdW5kIi8+PHBhdGggZmlsbD0iIzMzMyIgZD0iTTUuNjM2IDkuMTcyIDEyIDE1LjUzNmw2LjM2NC02LjM2NC0uNzA3LS43MDhMMTIgMTQuMTIxIDYuMzQzIDguNDY0bC0uNzA3LjcwOHoiIGRhdGEtbmFtZT0iY29udGVudCIvPjwvc3ZnPg==) center / 24px 24px no-repeat;
-}
-
-.fr-combobox-button[aria-expanded="true"] {
-  transform: translateY(-50%)rotate(180deg);
-}
-
-.fr-combobox-description, .fr-combobox-invalid {
-  width: 100%;
-  font-size: var(--fwe-font-size-small);
-  line-height: var(--fwe-line-height-base);
-  position: absolute;
-  bottom: 0;
-}
-
-.fr-combobox-description {
-  color: var(--fwe-text-disabled);
-}
-
-.fr-combobox-invalid {
-  color: var(--fwe-red);
-  display: none;
-}
-
-.fr-combobox-wrapper.fr-disabled .fr-combobox-input {
-  cursor: default;
-  color: var(--fwe-text-disabled);
-  border-color: var(--fwe-control-disabled);
-}
-
-.fr-combobox-wrapper.fr-disabled .fr-combobox-label {
-  color: var(--fwe-text-disabled);
-}
-
-.fr-combobox-wrapper.fr-disabled .fr-combobox-button {
-  background-color: var(--fwe-text-disabled);
-  cursor: default;
-}
-
-.fr-combobox-wrapper.fr-invalid .fr-combobox-input {
-  border-color: var(--fwe-red);
-}
-
-.fr-combobox-wrapper.fr-invalid .fr-combobox-invalid {
-  display: block;
-}
-
-.fr-combobox-wrapper.fr-invalid .fr-combobox-description {
-  display: none;
-}
-
-.fwe-combobox-option-content {
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  display: block;
-  overflow: hidden;
-}
-
-.fwe-combobox-highlight {
-  color: var(--fwe-hero);
-}
-
-.fwe-combobox-empty {
-  cursor: default;
-  color: var(--fwe-text-disabled);
-}
-

package/dist/forms/combobox/ComboBox.d.ts

@@ -1,27 +0,0 @@
-import './ComboBox.scss';
-import { type Ref } from 'react';
-export interface ComboBoxOption<T> {
-    readonly label: string;
-    readonly data: T;
-    readonly disabled?: boolean;
-}
-export interface ComboBoxProps<T> extends Omit<React.ComponentPropsWithoutRef<'div'>, 'onChange' | 'value' | 'defaultValue'> {
-    readonly value?: T;
-    readonly defaultValue?: T;
-    readonly name?: string;
-    readonly disabled?: boolean;
-    readonly required?: boolean;
-    readonly label?: string;
-    readonly options?: ComboBoxOption<T>[];
-    readonly hint?: string;
-    readonly error?: string;
-    readonly placeholder?: string;
-    readonly onChange?: (value: T) => void;
-    readonly onInputChange?: (value: string) => void;
-    readonly emptyMessage?: string;
-}
-declare function ComboBoxComponent<T>({ defaultValue, value: controlled, label, options, onChange, required, disabled, name, id: idProp, hint, error, placeholder, onInputChange, emptyMessage, className, ...props }: ComboBoxProps<T>, ref: Ref<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
-export declare const ComboBox: <T>(props: ComboBoxProps<T> & {
-    ref?: Ref<HTMLDivElement>;
-}) => ReturnType<typeof ComboBoxComponent>;
-export {};