@festo-ui/react-extra 9.0.0-dev.725 → 9.0.0-dev.727

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

@@ -0,0 +1,28 @@
+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

@@ -0,0 +1,272 @@
+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 quill from "quill";
+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(()=>{
+        if (editorRef.current && 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);
+        }
+    }, [
+        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

@@ -0,0 +1,13 @@
+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;

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

@@ -0,0 +1,72 @@
+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
+                    })
+                ]
+            })
+        ]
+    });
+}
+export { TextEditorButton };

package/dist/index.d.ts

@@ -0,0 +1,6 @@
+export { ColorIndicator, type ColorIndicatorProps, } from './components/color-indicator/ColorIndicator';
+export { ScrollArea, type ScrollAreaProps, } from './components/scroll-area/ScrollArea';
+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

@@ -0,0 +1,7 @@
+import { ColorIndicator } from "./components/color-indicator/ColorIndicator.js";
+import { ScrollArea } from "./components/scroll-area/ScrollArea.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, ScrollArea, TextEditor };

package/dist/utils/useId.d.ts

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

package/dist/utils/useId.js

@@ -0,0 +1,20 @@
+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 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@festo-ui/react-extra",
-  "version": "9.0.0-dev.725",
+  "version": "9.0.0-dev.727",
   "license": "apache-2.0",
   "author": "Festo UI (styleguide@festo.com)",
   "type": "module",