@festo-ui/react 10.1.0-dev.860 → 10.1.0-dev.862

package/dist/forms/segment/segment-control/SegmentControl.js

@@ -1,59 +0,0 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import classnames from "classnames";
-import { forwardRef, useRef } from "react";
-import { IconWrapper } from "../../../components/icon-wrapper/IconWrapper.js";
-const SegmentControl = /*#__PURE__*/ forwardRef(({ label, checked, disabled, name, value, icon, onChange, id, className, iconOnly, ...props }, ref)=>{
-    const componentId = useRef(id ?? (Math.random() * Date.now()).toString().replace('.', '-'));
-    let viewMode = 'text';
-    if (icon) viewMode = iconOnly ? 'icon' : 'icon-text';
-    const handleChange = (event)=>{
-        if (onChange) onChange(value, event);
-    };
-    return /*#__PURE__*/ jsxs(Fragment, {
-        children: [
-            /*#__PURE__*/ jsx("input", {
-                className: "fwe-segment-input",
-                type: "radio",
-                id: componentId.current,
-                name: name,
-                value: value,
-                checked: checked,
-                disabled: disabled,
-                onChange: (e)=>handleChange(e),
-                ...props
-            }),
-            /*#__PURE__*/ jsxs("label", {
-                className: classnames('fwe-segment-label', className),
-                htmlFor: componentId.current,
-                ref: ref,
-                children: [
-                    'icon' === viewMode && /*#__PURE__*/ jsxs(Fragment, {
-                        children: [
-                            /*#__PURE__*/ jsx("span", {
-                                className: "fwe-sr-only",
-                                children: label
-                            }),
-                            /*#__PURE__*/ jsx(IconWrapper, {
-                                icon: icon
-                            })
-                        ]
-                    }),
-                    'text' === viewMode && label,
-                    'icon-text' === viewMode && /*#__PURE__*/ jsxs(Fragment, {
-                        children: [
-                            /*#__PURE__*/ jsx(IconWrapper, {
-                                icon: icon
-                            }),
-                            /*#__PURE__*/ jsx("span", {
-                                className: "fwe-ml-xxs",
-                                children: label
-                            })
-                        ]
-                    })
-                ]
-            })
-        ]
-    });
-});
-SegmentControl.displayName = 'SegmentControl';
-export { SegmentControl };

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

@@ -1,25 +0,0 @@
-import type { ReactNode } from 'react';
-import { type Ref } from 'react';
-export interface SelectOption<T> {
-    readonly data: T;
-    readonly label: ReactNode;
-    readonly disabled?: boolean;
-}
-export interface SelectProps<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?: SelectOption<T>[];
-    readonly hint?: string;
-    readonly error?: string;
-    readonly placeholder?: string;
-    readonly onChange?: (value: T) => void;
-}
-declare function SelectComponent<T>({ defaultValue, value: controlled, label, options, onChange, disabled, name, id: idProp, hint, error, placeholder, className, ...props }: SelectProps<T>, ref: Ref<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
-export declare const Select: <T>(props: SelectProps<T> & {
-    ref?: Ref<HTMLDivElement>;
-}) => ReturnType<typeof SelectComponent>;
-export {};

package/dist/forms/select/Select.js

@@ -1,93 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { Listbox, ListboxButton, ListboxOption, ListboxOptions } from "@headlessui/react";
-import classnames from "classnames";
-import { forwardRef, useMemo } from "react";
-import { useControlled } from "../../utils/useControlled.js";
-import { useId } from "../../utils/useId.js";
-function SelectComponent({ defaultValue = '', value: controlled, label, options = [], onChange, disabled, name, id: idProp, hint, error, placeholder, className, ...props }, ref) {
-    const id = useId(idProp);
-    const labelId = `${id}-label`;
-    const [value, setValue] = useControlled({
-        controlled,
-        default: defaultValue,
-        onChange
-    });
-    const selectedOption = useMemo(()=>options.find((option)=>option.data === value && !option.disabled), [
-        options,
-        value
-    ]);
-    function handleChange(option) {
-        if (!option || option.disabled) return;
-        setValue(option.data);
-    }
-    return /*#__PURE__*/ jsx(Listbox, {
-        value: selectedOption ?? null,
-        onChange: handleChange,
-        disabled: disabled,
-        children: /*#__PURE__*/ jsxs("div", {
-            className: classnames(className, 'fwe-select-wrapper', {
-                'fwe-disabled': disabled
-            }),
-            ref: ref,
-            ...props,
-            children: [
-                /*#__PURE__*/ jsx(ListboxButton, {
-                    className: classnames('fwe-select', {
-                        'fwe-invalid': error
-                    }),
-                    id: id,
-                    "aria-labelledby": label ? labelId : void 0,
-                    disabled: disabled,
-                    children: selectedOption ? selectedOption.label : placeholder ?? ''
-                }),
-                /*#__PURE__*/ jsx("label", {
-                    className: "fwe-select-label",
-                    id: labelId,
-                    htmlFor: id,
-                    children: label || ''
-                }),
-                /*#__PURE__*/ jsx(ListboxOptions, {
-                    className: "fwe-options-container",
-                    as: "ul",
-                    portal: false,
-                    style: {
-                        minWidth: 'var(--button-width)'
-                    },
-                    anchor: {
-                        to: 'bottom start',
-                        gap: 12,
-                        padding: 8
-                    },
-                    children: options.map((option)=>/*#__PURE__*/ jsx(ListboxOption, {
-                            value: option,
-                            disabled: option.disabled,
-                            as: "li",
-                            className: ({ focus, selected, disabled: isDisabled })=>classnames('fwe-combobox-option', {
-                                    'fwe-selected': selected,
-                                    'fwe-focus': focus,
-                                    'fwe-disabled': isDisabled
-                                }),
-                            children: option.label
-                        }, String(option.data)))
-                }),
-                name && /*#__PURE__*/ jsx("input", {
-                    type: "hidden",
-                    name: name,
-                    value: String(value ?? ''),
-                    disabled: disabled
-                }),
-                hint && !error && /*#__PURE__*/ jsx("div", {
-                    className: "fwe-select-description",
-                    children: hint
-                }),
-                error && /*#__PURE__*/ jsx("div", {
-                    className: "fwe-select-invalid",
-                    children: error
-                })
-            ]
-        })
-    });
-}
-const Select = /*#__PURE__*/ forwardRef(SelectComponent);
-Select.displayName = 'Select';
-export { Select };

package/dist/forms/slider/Slider.css

@@ -1,50 +0,0 @@
-label.fwe-slider {
-  display: block;
-  position: relative;
-}
-
-label.fwe-slider .fr-slider-indicator {
-  background: var(--fwe-hero);
-  height: 2px;
-  position: absolute;
-  bottom: 22px;
-  left: 0;
-}
-
-label.fwe-slider .fr-slider-indicator.disabled {
-  background: var(--fwe-border);
-}
-
-label.fwe-slider.fr-slider-value {
-  height: 56px;
-}
-
-label.fwe-slider.fr-slider-value .fr-slider-indicator {
-  bottom: 38px;
-}
-
-label.fwe-slider.fr-slider-label {
-  height: 67px;
-}
-
-label.fwe-slider.fr-slider-label .fr-slider-indicator {
-  bottom: 22px;
-}
-
-label.fwe-slider.fr-slider-value-label {
-  height: 83px;
-}
-
-label.fwe-slider.fr-slider-value-label .fr-slider-indicator {
-  bottom: 38px;
-}
-
-label.fwe-slider .fr-slider-value {
-  color: var(--fwe-text);
-  font-size: var(--fwe-font-size-base);
-  user-select: none;
-  margin-bottom: 0;
-  position: absolute;
-  bottom: 0;
-}
-

package/dist/forms/slider/Slider.d.ts

@@ -1,14 +0,0 @@
-import './Slider.scss';
-import { type ComponentPropsWithoutRef } from 'react';
-export interface SliderProps extends Omit<ComponentPropsWithoutRef<'input'>, 'type' | 'onChange' | 'value' | 'defaultValue' | 'min' | 'max' | 'step'> {
-    readonly min: number;
-    readonly max: number;
-    readonly step?: number;
-    readonly value: number;
-    readonly onChangeCommitted?: (value: number) => void;
-    readonly label?: string;
-    readonly showValue?: boolean;
-    readonly onChange?: (value: number, event: React.ChangeEvent<HTMLInputElement>) => void;
-    readonly widthOffset?: number;
-}
-export declare const Slider: (props: SliderProps & import("react").RefAttributes<HTMLLabelElement>) => React.ReactElement | null;

package/dist/forms/slider/Slider.js

@@ -1,98 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import "./Slider.css";
-import classnames from "classnames";
-import { forwardRef, useCallback, useEffect, useRef, useState } from "react";
-import { useForkRef } from "../../utils/useForkRef.js";
-import { useId } from "../../utils/useId.js";
-const Slider = /*#__PURE__*/ forwardRef(({ disabled = false, label, name, max, min, onChange, onChangeCommitted, step, value, showValue = true, className, id: idProps, widthOffset = 8, ...props }, ref)=>{
-    const id = useId(idProps);
-    const [innerValue, setInnerValue] = useState(value);
-    const [left, setLeft] = useState(null);
-    const [numberOffset, setNumberOffset] = useState(0);
-    const labelEl = useRef(null);
-    const handleRef = useForkRef(ref, labelEl);
-    const classes = classnames('fwe-slider', {
-        'fr-slider-value': !label && showValue
-    }, {
-        'fr-slider-label': label && !showValue
-    }, {
-        'fr-slider-value-label': label && showValue
-    }, className);
-    useEffect(()=>{
-        setInnerValue(value);
-    }, [
-        value
-    ]);
-    const updateValuePosition = useCallback(()=>{
-        if (labelEl.current) {
-            const { width } = labelEl.current.getBoundingClientRect();
-            const diff = max - min;
-            setLeft((innerValue - min) / diff * (width - widthOffset));
-            setNumberOffset(8 - 6 * innerValue.toString().length);
-        }
-    }, [
-        innerValue,
-        max,
-        min,
-        widthOffset
-    ]);
-    const handleAfterChange = ()=>{
-        if (onChangeCommitted) onChangeCommitted(innerValue);
-    };
-    const handleChange = (e)=>{
-        const newValue = Number.parseFloat(e.target.value);
-        setInnerValue(newValue);
-        if (onChange) onChange(newValue, e);
-    };
-    useEffect(()=>{
-        function handleResize() {
-            updateValuePosition();
-        }
-        window.addEventListener('resize', handleResize);
-        handleResize();
-        return ()=>window.removeEventListener('resize', handleResize);
-    }, [
-        updateValuePosition
-    ]);
-    return /*#__PURE__*/ jsxs("label", {
-        ref: handleRef,
-        className: classes,
-        htmlFor: id,
-        children: [
-            label && /*#__PURE__*/ jsx("span", {
-                children: label
-            }),
-            /*#__PURE__*/ jsx("input", {
-                id: id,
-                className: "fwe-slider-input",
-                type: "range",
-                name: name,
-                disabled: disabled,
-                min: min,
-                max: max,
-                step: step,
-                onChange: handleChange,
-                value: innerValue,
-                onKeyUp: handleAfterChange,
-                onMouseUp: handleAfterChange,
-                onTouchEnd: handleAfterChange,
-                ...props
-            }),
-            showValue && null !== left && /*#__PURE__*/ jsx("span", {
-                className: "fr-slider-value",
-                style: {
-                    left: `${left + numberOffset}px`
-                },
-                children: innerValue
-            }),
-            /*#__PURE__*/ jsx("div", {
-                className: `fr-slider-indicator${disabled ? ' disabled' : ''}`,
-                style: {
-                    width: `${left}px`
-                }
-            })
-        ]
-    });
-});
-Slider.displayName = 'Slider';
-export { Slider };

package/dist/forms/switch/Switch.d.ts

@@ -1,10 +0,0 @@
-import { type ComponentPropsWithoutRef } from 'react';
-export interface SwitchProps extends Omit<ComponentPropsWithoutRef<'input'>, 'type' | 'onChange' | 'value' | 'defaultValue' | 'checked'> {
-    readonly labelPosition?: 'before' | 'after' | 'below';
-    readonly large?: boolean;
-    readonly title: string;
-    readonly value?: boolean;
-    readonly defaultValue?: boolean;
-    readonly onChange?: (value: boolean, event: React.ChangeEvent<HTMLInputElement>) => void;
-}
-export declare const Switch: (props: SwitchProps & import("react").RefAttributes<HTMLLabelElement>) => React.ReactElement | null;

package/dist/forms/switch/Switch.js

@@ -1,48 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import classnames from "classnames";
-import { forwardRef } from "react";
-import { useControlled } from "../../utils/useControlled.js";
-import { useId } from "../../utils/useId.js";
-const Switch = /*#__PURE__*/ forwardRef(({ labelPosition = 'after', large = false, title, name, required = false, value, defaultValue, disabled = false, onChange, className, id: idProps, ...props }, ref)=>{
-    const id = useId(idProps);
-    const labelClassName = classnames('fwe-switch', {
-        [`fwe-switch-label-${labelPosition}`]: true
-    }, {
-        'fwe-switch-lg': large
-    }, className);
-    const [currentValue, setCurrentValue] = useControlled({
-        controlled: value,
-        default: defaultValue
-    });
-    const handleChange = (event)=>{
-        const newValue = !currentValue;
-        setCurrentValue(newValue);
-        if (onChange) onChange(newValue, event);
-    };
-    return /*#__PURE__*/ jsxs("label", {
-        className: labelClassName,
-        htmlFor: id,
-        ref: ref,
-        children: [
-            /*#__PURE__*/ jsx("input", {
-                type: "checkbox",
-                name: name,
-                required: required,
-                disabled: disabled,
-                checked: currentValue,
-                onChange: handleChange,
-                id: id,
-                ...props
-            }),
-            /*#__PURE__*/ jsx("div", {
-                className: "fwe-switch-track"
-            }),
-            /*#__PURE__*/ jsx("div", {
-                className: "fwe-switch-label-content",
-                children: title
-            })
-        ]
-    });
-});
-Switch.displayName = 'Switch';
-export { Switch };

package/dist/forms/text-area/TextArea.css

@@ -1,14 +0,0 @@
-label.fwe-input-text .fwe-input-text-count {
-  line-height: var(--fwe-line-height-base);
-  color: var(--fwe-text-disabled);
-  font-size: var(--fwe-font-size-small);
-  display: block;
-  position: absolute;
-  bottom: 0;
-  right: 0;
-}
-
-label.fwe-input-text .fr-textarea {
-  overflow: visible;
-}
-

package/dist/forms/text-area/TextArea.d.ts

@@ -1,13 +0,0 @@
-import './TextArea.scss';
-import React, { type ComponentPropsWithoutRef } from 'react';
-export interface TextAreaProps extends Omit<ComponentPropsWithoutRef<'textarea'>, 'onChange' | 'value' | 'defaultValue'> {
-    readonly value?: string;
-    readonly defaultValue?: string;
-    readonly onChange?: (value: string, event: React.ChangeEvent<HTMLTextAreaElement>) => void;
-    readonly label: string;
-    readonly hint?: string;
-    readonly error?: string;
-    readonly rows?: number;
-    readonly id?: string;
-}
-export declare const TextArea: (props: TextAreaProps & React.RefAttributes<HTMLLabelElement>) => React.ReactElement | null;

package/dist/forms/text-area/TextArea.js

@@ -1,116 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import "./TextArea.css";
-import classnames from "classnames";
-import react, { forwardRef, useEffect, useLayoutEffect, useState } from "react";
-import { useId } from "../../utils/useId.js";
-const TextArea = /*#__PURE__*/ forwardRef(({ onChange, label, error, hint, value, defaultValue, rows, maxLength, className, id: idProps, ...props }, ref)=>{
-    const controlled = void 0 !== value;
-    const [innerValue, setInnerValue] = useState(controlled ? value : defaultValue ?? '');
-    const id = useId(idProps);
-    const hintClasses = classnames('fwe-input-text-info');
-    const shadowRef = react.useRef(null);
-    const textareaRef = react.useRef(null);
-    const [height, setHeight] = useState(void 0);
-    const resizeToContent = react.useCallback(()=>{
-        const input = textareaRef.current;
-        const shadow = shadowRef.current;
-        const minRows = 2;
-        if (shadow && input) {
-            shadow.value = input.value || innerValue || 'x';
-            shadow.style.width = input.clientWidth.toString();
-            const newHeight = Math.max(24 * minRows, shadow.scrollHeight);
-            setHeight(newHeight + 4 + 4 + 1);
-        }
-    }, [
-        innerValue
-    ]);
-    useEffect(()=>{
-        if (controlled) setInnerValue(value);
-    }, [
-        value,
-        controlled
-    ]);
-    useLayoutEffect(()=>{
-        if (rows) return;
-        resizeToContent();
-    }, [
-        rows,
-        resizeToContent
-    ]);
-    useEffect(()=>{
-        if (rows) return;
-        const handleResize = ()=>resizeToContent();
-        window.addEventListener('resize', handleResize);
-        return ()=>{
-            window.removeEventListener('resize', handleResize);
-        };
-    }, [
-        rows,
-        resizeToContent
-    ]);
-    function handleChange(event) {
-        if (!controlled) setInnerValue(event.target.value);
-        if (!rows) resizeToContent();
-        if (onChange) onChange(event.target.value, event);
-    }
-    return /*#__PURE__*/ jsxs("label", {
-        className: classnames('fwe-input-text', className),
-        htmlFor: id,
-        ref: ref,
-        children: [
-            /*#__PURE__*/ jsx("textarea", {
-                style: {
-                    ...!rows && {
-                        height,
-                        overflow: 'hidden'
-                    }
-                },
-                ref: textareaRef,
-                className: classnames('fr-textarea', `fwe-row-${rows}`),
-                autoComplete: "off",
-                onChange: handleChange,
-                maxLength: maxLength,
-                defaultValue: defaultValue,
-                value: value,
-                id: id,
-                ...props
-            }),
-            /*#__PURE__*/ jsx("textarea", {
-                style: {
-                    visibility: 'hidden',
-                    position: 'absolute',
-                    overflow: 'hidden',
-                    height: 0,
-                    top: 0,
-                    left: 0,
-                    transform: 'translateZ(0)',
-                    padding: '0'
-                },
-                ref: shadowRef,
-                readOnly: true
-            }),
-            /*#__PURE__*/ jsx("span", {
-                className: "fwe-input-text-label",
-                children: label
-            }),
-            hint && /*#__PURE__*/ jsx("span", {
-                className: hintClasses,
-                children: hint
-            }),
-            void 0 !== error && /*#__PURE__*/ jsx("span", {
-                className: "fwe-input-text-invalid",
-                children: error
-            }),
-            !!maxLength && void 0 !== innerValue && /*#__PURE__*/ jsxs("span", {
-                className: "fwe-input-text-count",
-                children: [
-                    innerValue.length,
-                    " /",
-                    maxLength
-                ]
-            })
-        ]
-    });
-});
-TextArea.displayName = 'TextArea';
-export { TextArea };

package/dist/forms/text-input/TextInput.css

@@ -1,31 +0,0 @@
-label.fwe-input-text input[type="text"][aria-invalid="true"], label.fwe-input-text input[type="password"][aria-invalid="true"], label.fwe-input-text input[type="date"][aria-invalid="true"], label.fwe-input-text input[type="datetime-local"][aria-invalid="true"], label.fwe-input-text input[type="number"][aria-invalid="true"] {
-  box-shadow: none;
-  outline: none;
-  border-bottom: 1px solid var(--fwe-red) !important;
-}
-
-label.fwe-input-text input[type="text"][aria-invalid="true"]:focus, label.fwe-input-text input[type="password"][aria-invalid="true"]:focus, label.fwe-input-text input[type="date"][aria-invalid="true"]:focus, label.fwe-input-text input[type="datetime-local"][aria-invalid="true"]:focus, label.fwe-input-text input[type="number"][aria-invalid="true"]:focus {
-  border-bottom: 1px solid var(--fwe-red) !important;
-}
-
-label.fwe-input-text input[type="text"][aria-invalid="true"]:disabled, label.fwe-input-text input[type="password"][aria-invalid="true"]:disabled, label.fwe-input-text input[type="date"][aria-invalid="true"]:disabled, label.fwe-input-text input[type="datetime-local"][aria-invalid="true"]:disabled, label.fwe-input-text input[type="number"][aria-invalid="true"]:disabled {
-  border-bottom: 1px solid var(--fwe-control-disabled) !important;
-}
-
-label.fwe-input-text input[type="text"][aria-invalid="true"]:disabled ~ .fwe-input-text-label, label.fwe-input-text input[type="text"][aria-invalid="true"]:disabled ~ .fwe-input-text-invalid, label.fwe-input-text input[type="text"][aria-invalid="true"]:disabled ~ .fwe-input-text-info, label.fwe-input-text input[type="password"][aria-invalid="true"]:disabled ~ .fwe-input-text-label, label.fwe-input-text input[type="password"][aria-invalid="true"]:disabled ~ .fwe-input-text-invalid, label.fwe-input-text input[type="password"][aria-invalid="true"]:disabled ~ .fwe-input-text-info, label.fwe-input-text input[type="date"][aria-invalid="true"]:disabled ~ .fwe-input-text-label, label.fwe-input-text input[type="date"][aria-invalid="true"]:disabled ~ .fwe-input-text-invalid, label.fwe-input-text input[type="date"][aria-invalid="true"]:disabled ~ .fwe-input-text-info, label.fwe-input-text input[type="datetime-local"][aria-invalid="true"]:disabled ~ .fwe-input-text-label, label.fwe-input-text input[type="datetime-local"][aria-invalid="true"]:disabled ~ .fwe-input-text-invalid, label.fwe-input-text input[type="datetime-local"][aria-invalid="true"]:disabled ~ .fwe-input-text-info, label.fwe-input-text input[type="number"][aria-invalid="true"]:disabled ~ .fwe-input-text-label, label.fwe-input-text input[type="number"][aria-invalid="true"]:disabled ~ .fwe-input-text-invalid, label.fwe-input-text input[type="number"][aria-invalid="true"]:disabled ~ .fwe-input-text-info {
-  color: var(--fwe-text-disabled);
-}
-
-label.fwe-input-text input[type="text"][aria-invalid="true"] ~ .fwe-input-text-info, label.fwe-input-text input[type="password"][aria-invalid="true"] ~ .fwe-input-text-info, label.fwe-input-text input[type="date"][aria-invalid="true"] ~ .fwe-input-text-info, label.fwe-input-text input[type="datetime-local"][aria-invalid="true"] ~ .fwe-input-text-info, label.fwe-input-text input[type="number"][aria-invalid="true"] ~ .fwe-input-text-info {
-  display: none;
-}
-
-label.fwe-input-text input[type="text"][aria-invalid="true"] ~ .fwe-input-text-invalid, label.fwe-input-text input[type="password"][aria-invalid="true"] ~ .fwe-input-text-invalid, label.fwe-input-text input[type="date"][aria-invalid="true"] ~ .fwe-input-text-invalid, label.fwe-input-text input[type="datetime-local"][aria-invalid="true"] ~ .fwe-input-text-invalid, label.fwe-input-text input[type="number"][aria-invalid="true"] ~ .fwe-input-text-invalid {
-  display: block;
-}
-
-label.fwe-input-text:has(input:disabled) {
-  cursor: not-allowed;
-  pointer-events: none;
-}
-

package/dist/forms/text-input/TextInput.d.ts

@@ -1,13 +0,0 @@
-import './TextInput.scss';
-import React, { type ComponentPropsWithoutRef, type ReactNode } from 'react';
-export interface TextInputProps extends Omit<ComponentPropsWithoutRef<'input'>, 'onChange'> {
-    readonly?: boolean;
-    value?: string;
-    defaultValue?: string;
-    label?: string;
-    hint?: string;
-    error?: string;
-    icon?: ReactNode;
-    onChange?: (value: string, event: React.ChangeEvent<HTMLInputElement>) => void;
-}
-export declare const TextInput: (props: TextInputProps & React.RefAttributes<HTMLLabelElement>) => React.ReactElement | null;