@festo-ui/react-extra 9.0.0-dev.691 → 9.0.0-dev.693

package/dist/forms/text-editor/TextEditor.d.ts

@@ -1,28 +0,0 @@
-import './TextEditor.scss';
-export interface TextEditorConfiguration {
-    toolbar?: {
-        bold?: boolean;
-        italic?: boolean;
-        underline?: boolean;
-        alignCenter?: boolean;
-        alignRight?: boolean;
-        bulletList?: boolean;
-        orderedList?: boolean;
-        image?: boolean;
-        link?: boolean;
-    };
-}
-export interface TextEditorProps {
-    readonly disabled?: boolean;
-    readonly label: string;
-    readonly maxLength?: number;
-    readonly value?: string;
-    readonly defaultValue?: string;
-    readonly hint?: string;
-    readonly error?: string;
-    readonly readOnly?: boolean;
-    readonly onChange?: (value: string | null) => void;
-    readonly className?: string;
-    readonly config?: TextEditorConfiguration;
-}
-export declare function TextEditor({ disabled, defaultValue, label, maxLength, value, hint, error, readOnly, onChange, className, config: configProps, }: TextEditorProps): import("react/jsx-runtime").JSX.Element;

package/dist/forms/text-editor/TextEditor.js

@@ -1,279 +0,0 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import classnames from "classnames";
-import { useCallback, useEffect, useRef, useState } from "react";
-import "./TextEditor.css";
-import { IconAlignCenter, IconAlignRight, IconEnumeration, IconImage, IconLink, IconListView } from "@festo-ui/react-icons";
-import { filterXSS, whiteList as external_xss_whiteList } from "xss";
-import useId from "../../utils/useId.js";
-import { TextEditorButton } from "./TextEditorButton.js";
-const defaultConfig = {
-    toolbar: {
-        bold: true,
-        italic: true,
-        underline: true,
-        alignCenter: false,
-        alignRight: false,
-        bulletList: true,
-        orderedList: true,
-        image: true,
-        link: true
-    }
-};
-function postpone(fn) {
-    Promise.resolve().then(fn);
-}
-function TextEditor({ disabled = false, defaultValue, label, maxLength, value, hint, error, readOnly = false, onChange, className, config: configProps }) {
-    const editorRef = useRef(null);
-    const [editor, setEditor] = useState(null);
-    const id = useId();
-    const [innerValue, setInnerValue] = useState(null);
-    const config = {
-        toolbar: {
-            ...defaultConfig.toolbar,
-            ...configProps?.toolbar
-        }
-    };
-    const setEditorContents = useCallback((e, v)=>{
-        if (e) {
-            const whiteList = {
-                ...external_xss_whiteList,
-                p: [
-                    ...external_xss_whiteList?.p ?? [],
-                    'class'
-                ],
-                li: [
-                    ...external_xss_whiteList?.li ?? [],
-                    'class'
-                ],
-                a: [
-                    ...external_xss_whiteList?.a ?? [],
-                    'rel',
-                    'class'
-                ]
-            };
-            const sanitizedValue = filterXSS(v, {
-                whiteList
-            });
-            const content = e.clipboard.convert({
-                html: sanitizedValue
-            });
-            const selection = e.getSelection();
-            e.setContents(content, 'silent');
-            setInnerValue(sanitizedValue);
-            postpone(()=>e.setSelection(selection));
-        }
-    }, []);
-    useEffect(()=>{
-        const initializeQuill = async ()=>{
-            let Quill;
-            if ('undefined' != typeof globalThis) {
-                const QuillModule = await import("quill");
-                Quill = QuillModule.default;
-            }
-            if (editorRef.current && Quill && null === editor) {
-                const newEditor = new Quill(editorRef.current, {
-                    modules: {
-                        toolbar: `#editor-toolbar-${CSS.escape(id ?? '')}`
-                    },
-                    theme: 'snow'
-                });
-                newEditor.root.setAttribute('role', 'textbox');
-                newEditor.root.setAttribute('aria-labelledby', `editor-label-${id}`);
-                newEditor.root.setAttribute('aria-multiline', 'true');
-                newEditor.enable(!readOnly);
-                if (disabled) newEditor.disable();
-                else if (!readOnly) newEditor.enable();
-                setEditor(newEditor);
-                if (defaultValue) setEditorContents(newEditor, defaultValue);
-            }
-        };
-        initializeQuill();
-    }, [
-        editor,
-        disabled,
-        readOnly,
-        id,
-        setEditorContents,
-        defaultValue
-    ]);
-    useEffect(()=>{
-        if (editor) editor.on('text-change', ()=>{
-            let html = editor.getSemanticHTML();
-            if ('<p><br></p>' === html || '<div><br></div>' === html || void 0 === html) html = null;
-            if (null !== html) {
-                const relativeLinkRegex = /href="(?!https?:\/\/|mailto:|tel:)([^"]+)"/g;
-                html = html.replace(relativeLinkRegex, 'href="https://$1"');
-            }
-            if (onChange) onChange(html);
-            setInnerValue(html);
-        });
-    }, [
-        editor,
-        onChange
-    ]);
-    useEffect(()=>{
-        if (value !== innerValue && null != value) setEditorContents(editor, value);
-    }, [
-        editor,
-        innerValue,
-        setEditorContents,
-        value
-    ]);
-    function currentLength() {
-        return innerValue?.length || 0;
-    }
-    function hideDivider(name) {
-        const linkOrImage = config.toolbar?.image || config.toolbar?.link;
-        const lists = config.toolbar?.bulletList || config.toolbar?.orderedList;
-        const typos = config.toolbar?.bold || config.toolbar?.italic || config.toolbar?.underline;
-        const textAlign = config.toolbar?.alignCenter || config.toolbar?.alignRight;
-        switch(name){
-            case 'typo':
-                return !typos || !textAlign && !linkOrImage && !lists;
-            case 'text-align':
-                return !textAlign || !linkOrImage && !lists;
-            case 'lists':
-                return !lists || !linkOrImage;
-            case 'image':
-                return !config.toolbar?.image || !config.toolbar.link;
-            default:
-                break;
-        }
-        return true;
-    }
-    return /*#__PURE__*/ jsxs("label", {
-        className: classnames('fwe-input-text', {
-            disabled
-        }),
-        htmlFor: `editor-label-${id}`,
-        children: [
-            /*#__PURE__*/ jsx("div", {
-                className: classnames('fwe-editor-toolbar', {
-                    [`fwe-editor-toolbar-${className}`]: className
-                }),
-                id: `editor-toolbar-${id}`,
-                children: /*#__PURE__*/ jsxs("span", {
-                    className: "ql-formats fwe-mr-3",
-                    children: [
-                        config?.toolbar?.bold && /*#__PURE__*/ jsx(TextEditorButton, {
-                            disabled: disabled,
-                            type: "bold",
-                            className: "fwe-mr-3",
-                            label: "B"
-                        }),
-                        config?.toolbar?.italic && /*#__PURE__*/ jsx(TextEditorButton, {
-                            disabled: disabled,
-                            type: "italic",
-                            className: "fwe-mr-3",
-                            label: "I"
-                        }),
-                        config?.toolbar?.underline && /*#__PURE__*/ jsx(TextEditorButton, {
-                            disabled: disabled,
-                            type: "underline",
-                            label: "U"
-                        }),
-                        !hideDivider('typo') && /*#__PURE__*/ jsx("div", {
-                            className: "fwe-divider-y fwe-d-inline-flex fwe-mx-4"
-                        }),
-                        config?.toolbar?.alignCenter && /*#__PURE__*/ jsx(TextEditorButton, {
-                            disabled: disabled,
-                            category: "align",
-                            type: "align-center",
-                            icon: /*#__PURE__*/ jsx(IconAlignCenter, {
-                                className: classnames({
-                                    'fwe-gray': disabled
-                                })
-                            }),
-                            value: "center",
-                            className: classnames({
-                                'fwe-mr-3': config?.toolbar?.alignRight
-                            })
-                        }),
-                        config?.toolbar?.alignRight && /*#__PURE__*/ jsx(TextEditorButton, {
-                            disabled: disabled,
-                            category: "align",
-                            type: "align-right",
-                            icon: /*#__PURE__*/ jsx(IconAlignRight, {
-                                className: classnames({
-                                    'fwe-gray': disabled
-                                })
-                            }),
-                            value: "right"
-                        }),
-                        !hideDivider('text-align') && /*#__PURE__*/ jsx("div", {
-                            className: "fwe-divider-y fwe-d-inline-flex fwe-mx-4"
-                        }),
-                        config?.toolbar?.bulletList && /*#__PURE__*/ jsx(TextEditorButton, {
-                            disabled: disabled,
-                            className: "fwe-mr-3",
-                            type: "ul",
-                            list: true,
-                            icon: /*#__PURE__*/ jsx(IconListView, {}),
-                            value: "bullet"
-                        }),
-                        config?.toolbar?.orderedList && /*#__PURE__*/ jsx(TextEditorButton, {
-                            disabled: disabled,
-                            type: "ol",
-                            list: true,
-                            icon: /*#__PURE__*/ jsx(IconEnumeration, {}),
-                            value: "ordered"
-                        }),
-                        config?.toolbar?.image && /*#__PURE__*/ jsxs(Fragment, {
-                            children: [
-                                /*#__PURE__*/ jsx("div", {
-                                    className: "fwe-divider-y fwe-d-inline-flex fwe-mx-4"
-                                }),
-                                /*#__PURE__*/ jsx(TextEditorButton, {
-                                    disabled: disabled,
-                                    type: "image",
-                                    icon: /*#__PURE__*/ jsx(IconImage, {}),
-                                    noAction: true
-                                })
-                            ]
-                        }),
-                        config?.toolbar?.link && /*#__PURE__*/ jsxs(Fragment, {
-                            children: [
-                                /*#__PURE__*/ jsx("div", {
-                                    className: "fwe-divider-y fwe-d-inline-flex fwe-mx-4"
-                                }),
-                                /*#__PURE__*/ jsx(TextEditorButton, {
-                                    disabled: disabled,
-                                    type: "link",
-                                    icon: /*#__PURE__*/ jsx(IconLink, {}),
-                                    noAction: true
-                                })
-                            ]
-                        })
-                    ]
-                })
-            }),
-            /*#__PURE__*/ jsx("div", {
-                className: classnames('fwe-editor-container', {
-                    'fwe-editor-container--error': error
-                }),
-                id: `editor-container-${id}`,
-                children: /*#__PURE__*/ jsx("div", {
-                    className: "fwe-editor",
-                    ref: editorRef
-                })
-            }),
-            /*#__PURE__*/ jsx("span", {
-                className: "fwe-input-text-label",
-                children: label
-            }),
-            error && /*#__PURE__*/ jsx("span", {
-                className: "fwe-text-editor-invalid",
-                children: error
-            }),
-            hint && /*#__PURE__*/ jsx("span", {
-                className: "fwe-text-editor-info",
-                children: hint
-            }),
-            maxLength && maxLength > 0 && null != value && /*#__PURE__*/ jsx("span", {
-                className: "fwe-input-text-count",
-                children: `${currentLength()} / ${maxLength}`
-            })
-        ]
-    });
-}
-export { TextEditor };

package/dist/forms/text-editor/TextEditorButton.d.ts

@@ -1,14 +0,0 @@
-import { type ReactElement } from 'react';
-export interface TextEditorButtonProps {
-    type: string;
-    label?: string;
-    icon?: ReactElement;
-    disabled: boolean;
-    className?: string;
-    list?: boolean;
-    value?: string;
-    noAction?: boolean;
-    category?: string;
-}
-export declare function TextEditorButton({ disabled, label, type, className, icon, list, value, noAction, category, }: Readonly<TextEditorButtonProps>): import("react/jsx-runtime").JSX.Element;
-export default TextEditorButton;

package/dist/forms/text-editor/TextEditorButton.js

@@ -1,73 +0,0 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import classnames from "classnames";
-import { useEffect, useRef, useState } from "react";
-function TextEditorButton({ disabled, label, type, className, icon, list, value, noAction, category }) {
-    const [active, setActive] = useState(false);
-    const btnRef = useRef(null);
-    function handleClick() {
-        const btn = btnRef.current;
-        setActive((prevActive)=>!prevActive);
-        btn?.click();
-    }
-    useEffect(()=>{
-        function callback(mutationRecords) {
-            for (const mutationRecord of mutationRecords){
-                const { classList } = mutationRecord.target;
-                const { oldValue } = mutationRecord;
-                if (classList.contains('ql-active')) setActive(true);
-                if (!classList.contains('ql-active') && oldValue?.includes('ql-active')) setActive(false);
-            }
-        }
-        if (btnRef.current && !noAction) {
-            const observer = new MutationObserver(callback);
-            observer.observe(btnRef.current, {
-                attributes: true,
-                attributeFilter: [
-                    'class'
-                ],
-                attributeOldValue: true
-            });
-        }
-    }, [
-        noAction
-    ]);
-    return /*#__PURE__*/ jsxs(Fragment, {
-        children: [
-            /*#__PURE__*/ jsx("button", {
-                ref: btnRef,
-                type: "button",
-                className: classnames('fwe-d-none', {
-                    'ql-list': list
-                }, {
-                    [`ql-${category || type}`]: !list
-                }, {
-                    [`action-${type}`]: !noAction
-                }),
-                "aria-hidden": "true",
-                tabIndex: -1,
-                value: value
-            }),
-            /*#__PURE__*/ jsxs("button", {
-                type: "button",
-                className: classnames({
-                    'fr-icon-button': !!icon
-                }, 'fr-button', className, {
-                    'fwe-active': active && !noAction
-                }),
-                onClick: ()=>handleClick(),
-                disabled: disabled,
-                children: [
-                    label && /*#__PURE__*/ jsx("div", {
-                        className: `fr-button-text fwe-text-${type}`,
-                        children: label
-                    }),
-                    /*#__PURE__*/ jsx("div", {
-                        children: icon
-                    })
-                ]
-            })
-        ]
-    });
-}
-const text_editor_TextEditorButton = TextEditorButton;
-export { TextEditorButton, text_editor_TextEditorButton as default };

package/dist/index.d.ts

@@ -1,5 +0,0 @@
-export { ColorIndicator, type ColorIndicatorProps, } from './forms/color-indicator/ColorIndicator';
-export { ColorPicker, type ColorPickerProps, } from './forms/color-picker/ColorPicker';
-export { DatePicker, type DatePickerOptions, type DatePickerProps, } from './forms/date-picker/DatePicker';
-export { DateRangePicker, type DateRangePickerOptions, type DateRangePickerProps, } from './forms/date-range-picker/DateRangePicker';
-export { TextEditor, type TextEditorConfiguration, type TextEditorProps, } from './forms/text-editor/TextEditor';

package/dist/index.js

@@ -1,6 +0,0 @@
-import { ColorIndicator } from "./forms/color-indicator/ColorIndicator.js";
-import { ColorPicker } from "./forms/color-picker/ColorPicker.js";
-import { DatePicker } from "./forms/date-picker/DatePicker.js";
-import { DateRangePicker } from "./forms/date-range-picker/DateRangePicker.js";
-import { TextEditor } from "./forms/text-editor/TextEditor.js";
-export { ColorIndicator, ColorPicker, DatePicker, DateRangePicker, TextEditor };

package/dist/utils/useId.d.ts

@@ -1 +0,0 @@
-export default function useId(idInput?: string): string | undefined;

package/dist/utils/useId.js

@@ -1,20 +0,0 @@
-import react from "react";
-const maybeReactUseId = react["useId"];
-let nextId = 0;
-function useLegacyId() {
-    const [id, setId] = react.useState(void 0);
-    react.useEffect(()=>{
-        if (null == id) {
-            nextId += 1;
-            setId(`fr-${nextId}`);
-        }
-    }, [
-        id
-    ]);
-    return id;
-}
-function useId(idInput) {
-    if (null != idInput) return idInput;
-    return maybeReactUseId ? maybeReactUseId() : useLegacyId();
-}
-export { useId as default };