@festo-ui/react 9.0.1 → 10.0.0-dev.827

package/dist/components/popovers/popover-menu-item/PopoverMenuItem.js

@@ -1,29 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useContext } from "react";
-import { IconWrapper } from "../../icon-wrapper/IconWrapper.js";
-import { PopoverMenuContext } from "../popover-menu/PopoverMenuContext.js";
-function PopoverMenuItem({ item }) {
-    const { setShowPopper } = useContext(PopoverMenuContext);
-    function handleClick(e) {
-        e?.stopPropagation();
-        e?.preventDefault();
-        if (setShowPopper) setShowPopper(false);
-        if (item.action) item.action(item.data);
-    }
-    if (!item) return null;
-    return /*#__PURE__*/ jsxs("button", {
-        type: "button",
-        className: "fwe-btn-unstyled fr-popover-item",
-        onClick: (e)=>handleClick(e),
-        children: [
-            /*#__PURE__*/ jsx(IconWrapper, {
-                icon: item.icon
-            }),
-            /*#__PURE__*/ jsx("span", {
-                className: "fwe-mr-xxs",
-                children: item.text
-            })
-        ]
-    });
-}
-export { PopoverMenuItem };

package/dist/forms/select/Select.css

@@ -1,160 +0,0 @@
-.fwe-select-wrapper {
-  width: inherit;
-  min-width: 48px;
-  display: flex;
-}
-
-.fwe-select-wrapper .fr-select-input {
-  opacity: 0;
-  pointer-events: none;
-  box-sizing: border-box;
-  width: 100%;
-  position: absolute;
-  bottom: 0;
-  left: 0;
-}
-
-.fwe-select-wrapper.fwe-disabled:before {
-  color: var(--fwe-text-disabled);
-}
-
-.fwe-select-wrapper .fwe-select {
-  text-align: left;
-  cursor: pointer;
-  height: unset;
-  background: none;
-  min-height: 33px;
-  padding: 0;
-}
-
-.fwe-select-wrapper .fwe-select .fwe-select-content {
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  padding-right: 24px;
-  line-height: 1.5rem;
-  overflow: hidden;
-}
-
-.fwe-select-wrapper .fwe-select.fwe-required:not(.fwe-disabled) ~ .fwe-select-label:after {
-  content: "*";
-  display: inline-block;
-  position: relative;
-  left: 3px;
-}
-
-.fwe-select-wrapper .fwe-select.fwe-required:not(.fwe-disabled):not(.fwe-invalid) ~ .fwe-select-valid {
-  display: block;
-}
-
-.fwe-select-wrapper .fwe-select:focus:not(:disabled) {
-  color: var(--fwe-hero);
-}
-
-.fwe-select-wrapper .fwe-select:focus:not(:disabled) option {
-  color: var(--fwe-text);
-}
-
-.fwe-select-wrapper .fwe-select:focus:not(:disabled) {
-  border-color: var(--fwe-hero);
-}
-
-.fwe-select-wrapper .fwe-select:focus:invalid {
-  border-color: var(--fwe-red);
-}
-
-.fwe-select-wrapper .fwe-select.fwe-disabled {
-  cursor: default;
-  border-color: var(--fwe-control-disabled) !important;
-}
-
-.fwe-select-wrapper .fwe-select.fwe-disabled ~ .fwe-select-label, .fwe-select-wrapper .fwe-select.fwe-disabled .fwe-select-content {
-  color: var(--fwe-text-disabled);
-}
-
-.fwe-select-wrapper .fwe-select.fwe-disabled .fwe-chip {
-  color: var(--fwe-text-disabled);
-  border: 1px solid var(--fwe-control-disabled);
-  pointer-events: none;
-}
-
-.fwe-select-wrapper .fwe-select.fwe-invalid.fwe-select:hover, .fwe-select-wrapper .fwe-select.fwe-invalid.fwe-select:focus {
-  border-color: var(--fwe-red);
-}
-
-.fwe-select-wrapper .fwe-select.fwe-invalid ~ .fwe-select-invalid {
-  display: block;
-}
-
-.fwe-select-wrapper .fwe-select.fwe-invalid ~ .fwe-select-description {
-  display: none;
-}
-
-.fr-select-scroll {
-  overflow-y: scroll;
-}
-
-.fwe-select-options-container {
-  z-index: var(--fwe-z-index-popover);
-  max-width: 100vw;
-  font-size: var(--fwe-font-size-base);
-  background-color: var(--fwe-white);
-  border: 1px solid var(--fwe-gray-200);
-  border-radius: 4px;
-  margin: 0;
-  padding: 8px;
-  list-style: none;
-  box-shadow: 0 1px 4px #00000029;
-}
-
-.fwe-select-options-container .fwe-select-option {
-  cursor: pointer;
-  min-height: 24px;
-  padding: 12px 8px;
-  line-height: 24px;
-  position: relative;
-}
-
-.fwe-select-options-container .fwe-select-option:hover, .fwe-select-options-container .fwe-select-option:focus {
-  background-color: var(--fwe-gray-100);
-  outline: none;
-}
-
-.fwe-select-options-container .fwe-select-option:last-child {
-  border-bottom: none;
-}
-
-.fwe-select-options-container .fwe-select-option .fwe-select-option-content {
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  min-height: 24px;
-  line-height: 24px;
-  display: block;
-  overflow: hidden;
-}
-
-.fr-backdrop {
-  z-index: var(--fwe-z-index-modal);
-  position: fixed;
-  inset: 0;
-}
-
-.chip-text-truncate {
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  display: inline-block;
-  overflow: hidden;
-}
-
-.chip-removable {
-  cursor: pointer;
-  border: none;
-  padding: 0;
-}
-
-.fwe-chip .chip-removable svg {
-  margin: 0;
-  position: absolute;
-  top: 4px;
-  right: 5px;
-}
-

package/dist/forms/select/internal/HiddenInput.d.ts

@@ -1,8 +0,0 @@
-import type { SelectOptionType } from '../select-option/SelectOption';
-interface HiddenInputProps<T> {
-    value: any;
-    onChange: (value: SelectOptionType<T>) => void;
-    options: SelectOptionType<T>[];
-}
-export declare function HiddenInput<T>({ value, onChange, options, }: HiddenInputProps<T>): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/forms/select/internal/HiddenInput.js

@@ -1,15 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-function HiddenInput({ value, onChange, options }) {
-    function handleChange(event) {
-        const child = options.find(({ data })=>data === event.target.value);
-        if (void 0 !== child) onChange(child);
-    }
-    return /*#__PURE__*/ jsx("input", {
-        className: "fr-select-input",
-        "aria-hidden": true,
-        tabIndex: -1,
-        value: value,
-        onChange: handleChange
-    });
-}
-export { HiddenInput };

package/dist/forms/select/internal/ListItem.d.ts

@@ -1,18 +0,0 @@
-import React, { type Ref, type RefObject } from 'react';
-import type { SelectOptionProps, SelectOptionType } from '../select-option/SelectOption';
-export interface ListItemProps<T> extends React.ComponentPropsWithoutRef<'li'> {
-    empty?: boolean;
-    item: SelectOptionType<T> | React.ReactElement<SelectOptionProps<T>>;
-    options: SelectOptionType<T>[];
-    index: number;
-    onOptionChange: (option: SelectOptionType<T>) => void;
-    onFocusChange: (index: number) => void;
-    onClose: () => void;
-    selectedLabel?: string | string[];
-    withCheckbox?: boolean;
-}
-declare function ListItemComponent<T>({ children, className, empty, options, onClose, onOptionChange, index, selectedLabel, item, withCheckbox, onFocusChange, ...restProps }: ListItemProps<T>, ref: Ref<RefObject<HTMLLIElement>[]>): import("react/jsx-runtime").JSX.Element;
-export declare const ListItem: <T>(props: ListItemProps<T> & {
-    ref?: Ref<RefObject<HTMLLIElement>[]>;
-}) => ReturnType<typeof ListItemComponent>;
-export {};

package/dist/forms/select/internal/ListItem.js

@@ -1,69 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import classnames from "classnames";
-import react, { forwardRef } from "react";
-import { SelectCheckbox } from "./SelectCheckbox.js";
-function ListItemComponent({ children, className, empty, options, onClose, onOptionChange, index, selectedLabel, item, withCheckbox, onFocusChange, ...restProps }, ref) {
-    const isChild = /*#__PURE__*/ react.isValidElement(item);
-    const option = isChild ? item.props.option : item;
-    const propsWithoutOption = isChild ? {
-        ...item.props,
-        option: void 0
-    } : {};
-    const checked = Array.isArray(selectedLabel) ? selectedLabel.includes(option.label) : selectedLabel === option.label;
-    function handleKeyDown(e) {
-        const arrowKeys = [
-            'ArrowDown',
-            'ArrowUp'
-        ];
-        const validKeys = [
-            'Enter',
-            ' '
-        ];
-        if (arrowKeys.concat(validKeys).includes(e.key)) e.preventDefault();
-        if ('ArrowDown' === e.key) onFocusChange((index + 1) % options.length);
-        if ('ArrowUp' === e.key) {
-            const nextIndex = (index - 1 + options.length) % options.length;
-            onFocusChange(nextIndex);
-        }
-        if ([
-            'Enter',
-            ' '
-        ].includes(e.key)) {
-            if (option.disabled) return;
-            onOptionChange(option);
-        }
-        if ('Escape' === e.key) onClose();
-    }
-    function handleClick() {
-        if (option.disabled) return;
-        onOptionChange(option);
-    }
-    const itemRef = 'function' != typeof ref ? ref?.current?.[index] : void 0;
-    return /*#__PURE__*/ jsx("li", {
-        onClick: handleClick,
-        ref: itemRef,
-        role: "option",
-        onKeyDown: handleKeyDown,
-        "aria-selected": checked,
-        className: classnames('fwe-select-option', {
-            'fwe-empty': !option.label
-        }, className),
-        tabIndex: 0,
-        ...restProps,
-        children: /*#__PURE__*/ jsx(SelectCheckbox, {
-            disabled: option.disabled,
-            onClick: (e)=>e.stopPropagation(),
-            checked: checked,
-            withCheckbox: withCheckbox,
-            children: isChild ? /*#__PURE__*/ jsx("span", {
-                ...propsWithoutOption
-            }) : /*#__PURE__*/ jsx("span", {
-                className: "fwe-select-option-content",
-                "data-testid": "fwe-select-option-content",
-                children: option.label
-            })
-        })
-    });
-}
-const ListItem = /*#__PURE__*/ forwardRef(ListItemComponent);
-export { ListItem };

package/dist/forms/select/internal/SelectCheckbox.d.ts

@@ -1,4 +0,0 @@
-import { type CheckboxProps } from '../../checkbox/Checkbox';
-export declare function SelectCheckbox({ children, withCheckbox, ...props }: CheckboxProps & {
-    withCheckbox?: boolean;
-}): import("react/jsx-runtime").JSX.Element;

package/dist/forms/select/internal/SelectCheckbox.js

@@ -1,13 +0,0 @@
-import { Fragment, jsx } from "react/jsx-runtime";
-import { Checkbox } from "../../checkbox/Checkbox.js";
-function SelectCheckbox({ children, withCheckbox, ...props }) {
-    if (withCheckbox) return /*#__PURE__*/ jsx(Checkbox, {
-        tabIndex: -1,
-        ...props,
-        children: children
-    });
-    return /*#__PURE__*/ jsx(Fragment, {
-        children: children
-    });
-}
-export { SelectCheckbox };

package/dist/forms/select/internal/SelectLabel.d.ts

@@ -1,7 +0,0 @@
-interface SelectLabelProps {
-    hideLabel?: boolean;
-    label?: string;
-    id?: string;
-}
-export declare function SelectLabel({ hideLabel, label, id }: SelectLabelProps): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/forms/select/internal/SelectLabel.js

@@ -1,12 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import classnames from "classnames";
-function SelectLabel({ hideLabel, label, id }) {
-    return /*#__PURE__*/ jsx("label", {
-        className: classnames('fwe-select-label', {
-            'fwe-sr-only': hideLabel
-        }),
-        htmlFor: id,
-        children: label || ''
-    });
-}
-export { SelectLabel };

package/dist/forms/select/internal/SelectScrollContainer.d.ts

@@ -1,8 +0,0 @@
-import type { SelectConfiguration } from '../../../utils/types';
-interface SelectScrollContainerProps {
-    readonly config?: SelectConfiguration;
-    readonly children: React.ReactNode;
-    readonly length: number;
-}
-export declare function SelectScrollContainer({ config, children, length, }: SelectScrollContainerProps): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/forms/select/internal/SelectScrollContainer.js

@@ -1,15 +0,0 @@
-import { Fragment, jsx } from "react/jsx-runtime";
-import { calcVirtualScrollHeight } from "../utils.js";
-function SelectScrollContainer({ config, children, length }) {
-    if (config?.scroll?.enabled) return /*#__PURE__*/ jsx("div", {
-        className: "fr-select-scroll",
-        style: {
-            height: calcVirtualScrollHeight(config, length)
-        },
-        children: children
-    });
-    return /*#__PURE__*/ jsx(Fragment, {
-        children: children
-    });
-}
-export { SelectScrollContainer };

package/dist/forms/select/internal/SelectWrapper.d.ts

@@ -1,6 +0,0 @@
-import { type ComponentPropsWithoutRef } from 'react';
-interface SelectWrapperProps extends ComponentPropsWithoutRef<'div'> {
-    disabled?: boolean;
-}
-export declare const SelectWrapper: (props: SelectWrapperProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;
-export {};

package/dist/forms/select/internal/SelectWrapper.js

@@ -1,12 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import classnames from "classnames";
-import { forwardRef } from "react";
-const SelectWrapper = /*#__PURE__*/ forwardRef(({ children, disabled, className, ...props }, ref)=>/*#__PURE__*/ jsx("div", {
-        ...props,
-        ref: ref,
-        className: classnames('fwe-select-wrapper', {
-            'fwe-disabled': disabled
-        }, className),
-        children: children
-    }));
-export { SelectWrapper };

package/dist/forms/select/internal/index.d.ts

@@ -1,6 +0,0 @@
-export { HiddenInput } from './HiddenInput';
-export { ListItem } from './ListItem';
-export { SelectButton } from './SelectButton';
-export { SelectLabel } from './SelectLabel';
-export { SelectOptionsContainer } from './SelectOptionsContainer';
-export { SelectWrapper } from './SelectWrapper';

package/dist/forms/select/internal/index.js

@@ -1,7 +0,0 @@
-import { HiddenInput } from "./HiddenInput.js";
-import { ListItem } from "./ListItem.js";
-import { SelectButton } from "./SelectButton.js";
-import { SelectLabel } from "./SelectLabel.js";
-import { SelectOptionsContainer } from "./SelectOptionsContainer.js";
-import { SelectWrapper } from "./SelectWrapper.js";
-export { HiddenInput, ListItem, SelectButton, SelectLabel, SelectOptionsContainer, SelectWrapper };

package/dist/forms/select/internal/utils.d.ts

@@ -1,7 +0,0 @@
-import React from 'react';
-import type { SelectOptionProps } from '../select-option/SelectOption';
-export declare function getChildren<T>(children: React.ReactNode): {
-    childrenList: React.ReactElement<SelectOptionProps<T>, string | React.JSXElementConstructor<any>>[];
-    after: React.ReactElement<any, string | React.JSXElementConstructor<any>>[];
-    before: React.ReactElement<any, string | React.JSXElementConstructor<any>>[];
-};

package/dist/forms/select/internal/utils.js

@@ -1,30 +0,0 @@
-import classnames from "classnames";
-import react from "react";
-import { SelectOption } from "../select-option/SelectOption.js";
-function getChildren(children) {
-    const before = [];
-    const childrenList = [];
-    const after = [];
-    let foundFirstOption = false;
-    react.Children.forEach(children, (element)=>{
-        if (react.isValidElement(element)) if (react.isValidElement(element) && element.type === SelectOption) {
-            foundFirstOption = true;
-            const className = classnames('fwe-select-option-content', element.props.className);
-            const { props } = element;
-            childrenList.push({
-                ...element,
-                props: {
-                    ...props,
-                    className
-                }
-            });
-        } else if (foundFirstOption) after.push(element);
-        else before.push(element);
-    });
-    return {
-        childrenList,
-        after,
-        before
-    };
-}
-export { getChildren };

package/dist/forms/select/select-option/SelectOption.d.ts

@@ -1,14 +0,0 @@
-import { type ComponentPropsWithoutRef, type Ref } from 'react';
-export interface SelectOptionType<T> {
-    readonly label: string;
-    readonly data: T;
-    readonly disabled?: boolean;
-}
-export interface SelectOptionProps<T> extends ComponentPropsWithoutRef<'span'> {
-    option: SelectOptionType<T>;
-}
-declare function SelectOptionComponent<T>({ children, className, ...props }: SelectOptionProps<T>, ref: Ref<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
-export declare const SelectOption: <T>(props: SelectOptionProps<T> & {
-    ref?: Ref<HTMLDivElement>;
-}) => ReturnType<typeof SelectOptionComponent>;
-export {};

package/dist/forms/select/select-option/SelectOption.js

@@ -1,12 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
-function SelectOptionComponent({ children, className, ...props }, ref) {
-    return /*#__PURE__*/ jsx("span", {
-        ref: ref,
-        className: className,
-        ...props,
-        children: children
-    });
-}
-const SelectOption = /*#__PURE__*/ forwardRef(SelectOptionComponent);
-export { SelectOption };

package/dist/forms/select/utils.d.ts

@@ -1,2 +0,0 @@
-import type { SelectConfiguration } from '../../utils/types';
-export declare function calcVirtualScrollHeight(config: SelectConfiguration | undefined, itemLength: number): number;

package/dist/forms/select/utils.js

@@ -1,12 +0,0 @@
-function calcVirtualScrollHeight(config, itemLength) {
-    const defaultHeight = 48;
-    let height = defaultHeight;
-    if (2 === itemLength) height = 2 * defaultHeight;
-    else if (itemLength >= 3) height = 3 * defaultHeight;
-    if (config?.scroll?.viewportSize != null && void 0 !== config.scroll.viewportSize) {
-        if (itemLength >= config.scroll.viewportSize) height = config.scroll.viewportSize * defaultHeight;
-        else if (itemLength < config.scroll.viewportSize) height = itemLength * defaultHeight;
-    }
-    return height;
-}
-export { calcVirtualScrollHeight };