@festo-ui/react 9.0.0-dev.681 → 9.0.0-dev.683

package/lib/forms/date-picker/DatePicker.js

@@ -1,155 +0,0 @@
-import { useEffect, useRef, useState } from "react";
-import classNames from "classnames";
-import flatpickr from "flatpickr";
-import { IconCalendar } from "@festo-ui/react-icons";
-import useId from "../../helper/useId.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-function DatePicker(_ref) {
-  let {
-    children,
-    className,
-    disabled,
-    required,
-    error,
-    hint,
-    value,
-    defaultValue = new Date(),
-    formatDate = Intl.DateTimeFormat().format,
-    options,
-    onChange,
-    id: idProps,
-    allowManualInput = false,
-    dateFormat = "d/m/Y",
-    openOnInputClick = true
-  } = _ref;
-  const id = useId(idProps);
-  const [open, setOpen] = useState(false);
-  const [calendar, setCalendar] = useState(null);
-  const innerDefaultValue = value || defaultValue;
-  function toggle() {
-    const newOpen = !open;
-    setOpen(newOpen);
-    if (newOpen) {
-      calendar?.open();
-    } else {
-      calendar?.close();
-    }
-  }
-  const datePickerRef = useRef(null);
-  const {
-    keepOpenOnDateChange,
-    maxDate,
-    minDate,
-    position = "below center"
-  } = options || {};
-  useEffect(() => {
-    if (calendar !== null && value !== undefined) {
-      calendar.setDate(value);
-    }
-  }, [calendar, value]);
-  useEffect(() => {
-    function handleChange(date) {
-      datePickerRef.current?.blur();
-      if (onChange) {
-        onChange(date);
-      }
-    }
-    function handleClose() {
-      setOpen(false);
-      datePickerRef.current?.blur();
-    }
-    if (datePickerRef.current) {
-      if (calendar === null) {
-        setCalendar(flatpickr(datePickerRef.current, {
-          defaultDate: innerDefaultValue,
-          onChange: v => handleChange(v[0]),
-          onClose: handleClose,
-          position,
-          formatDate,
-          closeOnSelect: !keepOpenOnDateChange,
-          clickOpens: false,
-          minDate,
-          maxDate,
-          allowInput: allowManualInput,
-          dateFormat
-        }));
-      } else {
-        calendar.set({
-          defaultDate: innerDefaultValue,
-          minDate,
-          maxDate,
-          position,
-          closeOnSelect: !keepOpenOnDateChange,
-          allowInput: allowManualInput,
-          dateFormat
-        });
-      }
-    }
-  }, [datePickerRef, calendar, maxDate, minDate, onChange, innerDefaultValue, formatDate, keepOpenOnDateChange, position, allowManualInput, dateFormat]);
-  useEffect(() => () => {
-    if (calendar !== null) {
-      calendar.destroy();
-    }
-  }, [calendar]);
-  const handleKeyDown = event => {
-    if (event.key === "Enter") {
-      toggle();
-    }
-  };
-  const handleKeyUp = event => {
-    if (event.key === " ") {
-      toggle();
-    }
-  };
-  return /*#__PURE__*/_jsx("div", {
-    tabIndex: 0,
-    role: "button",
-    onClick: toggle,
-    onKeyDown: handleKeyDown,
-    onKeyUp: handleKeyUp,
-    children: /*#__PURE__*/_jsxs("label", {
-      className: classNames("fwe-input-text fwe-input-text-icon", className),
-      htmlFor: id,
-      children: [/*#__PURE__*/_jsx(IconCalendar, {
-        className: classNames({
-          "fwe-color-hero": open && !disabled,
-          "fwe-color-control-disabled": disabled,
-          "icon-hover": allowManualInput && !openOnInputClick
-        })
-      }), /*#__PURE__*/_jsx("input", {
-        id: id,
-        ref: datePickerRef,
-        "aria-label": "picked date",
-        type: "text",
-        readOnly: !allowManualInput,
-        onClick: e => {
-          if (allowManualInput && !openOnInputClick) e.stopPropagation();
-        },
-        onKeyDown: e => {
-          if (allowManualInput && !openOnInputClick) e.stopPropagation();
-        },
-        onBlur: () => {
-          if (allowManualInput && calendar && datePickerRef.current) {
-            const raw = datePickerRef.current.value;
-            if (raw) calendar.setDate(raw, true, dateFormat);
-          }
-        },
-        required: required,
-        className: classNames("fr-date-picker", {
-          "fwe-border-hero": open && !disabled
-        }),
-        disabled: disabled
-      }), /*#__PURE__*/_jsx("span", {
-        className: "fwe-input-text-label",
-        children: children
-      }), hint && /*#__PURE__*/_jsx("span", {
-        className: "fwe-input-text-info",
-        children: hint
-      }), error && /*#__PURE__*/_jsx("span", {
-        className: "fwe-input-text-invalid",
-        children: error
-      })]
-    })
-  });
-}
-export default DatePicker;

package/lib/forms/date-range-picker/DateRangePicker.d.ts

@@ -1,19 +0,0 @@
-import type { ClassNamePropsWithChildren } from "../../helper/types";
-import "./DateRangePicker.scss";
-export interface DatePickerOptions {
-    maxDate?: Date;
-    minDate?: Date;
-    keepOpenOnDateChange?: boolean;
-}
-export interface DateRangePickerProps extends ClassNamePropsWithChildren {
-    disabled?: boolean;
-    required?: boolean;
-    hint?: string;
-    error?: string;
-    defaultValue?: Date;
-    formatDate?: (date: Date) => string;
-    options?: DatePickerOptions;
-    onChange?: (dates: Date[]) => void;
-}
-declare function DateRangePicker({ children, className, disabled, error, formatDate, hint, onChange, options, required, defaultValue, }: DateRangePickerProps): import("react/jsx-runtime").JSX.Element;
-export default DateRangePicker;

package/lib/forms/date-range-picker/DateRangePicker.js

@@ -1,135 +0,0 @@
-import classNames from "classnames";
-import flatpickr from "flatpickr";
-import rangePlugin from "flatpickr/dist/plugins/rangePlugin.js";
-import { useEffect, useRef, useState } from "react";
-import { IconCalendar } from "@festo-ui/react-icons";
-import useId from "../../helper/useId.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-function DateRangePicker(_ref) {
-  let {
-    children,
-    className,
-    disabled,
-    error,
-    formatDate,
-    hint,
-    onChange,
-    options,
-    required,
-    defaultValue = new Date()
-  } = _ref;
-  const [open, setOpen] = useState(false);
-  const [calendar, setCalendar] = useState(null);
-  const id = useId();
-  function toggle() {
-    const newOpen = !open;
-    setOpen(newOpen);
-    if (newOpen) {
-      calendar?.open();
-    } else {
-      calendar?.close();
-    }
-  }
-  const inputRef = useRef(null);
-  const input2Ref = useRef(null);
-  const containerRef = useRef(null);
-  useEffect(() => {
-    function handleChange(dates) {
-      if (onChange) {
-        onChange(dates);
-      }
-    }
-    function handleClose() {
-      setOpen(false);
-      inputRef.current?.blur();
-      input2Ref.current?.blur();
-    }
-    if (containerRef.current && inputRef.current && input2Ref.current && calendar === null) {
-      setCalendar(flatpickr(inputRef.current, {
-        defaultDate: defaultValue,
-        plugins: [rangePlugin({
-          input: input2Ref.current
-        })],
-        onChange: v => handleChange(v),
-        position: "below center",
-        positionElement: containerRef.current,
-        formatDate,
-        closeOnSelect: !options?.keepOpenOnDateChange ?? true,
-        clickOpens: false,
-        onClose: handleClose,
-        minDate: options?.minDate,
-        maxDate: options?.maxDate
-      }));
-    }
-  }, [inputRef, input2Ref, containerRef, formatDate, options, onChange, calendar, defaultValue]);
-  useEffect(() => () => {
-    if (calendar !== null) {
-      calendar.destroy();
-    }
-  }, [calendar]);
-  const handleKeyDown = event => {
-    if (event.key === "Enter") {
-      toggle();
-    }
-  };
-  const handleKeyUp = event => {
-    if (event.key === " ") {
-      toggle();
-    }
-  };
-  return /*#__PURE__*/_jsx("div", {
-    tabIndex: 0,
-    role: "button",
-    className: classNames("fr-date-range-picker", className),
-    onClick: toggle,
-    onKeyDown: handleKeyDown,
-    onKeyUp: handleKeyUp,
-    children: /*#__PURE__*/_jsxs("label", {
-      className: "fwe-input-text fwe-input-text-icon",
-      htmlFor: id,
-      children: [/*#__PURE__*/_jsx(IconCalendar, {
-        className: classNames({
-          "fwe-color-hero": open && !disabled,
-          "fwe-color-control-disabled": disabled
-        })
-      }), /*#__PURE__*/_jsxs("div", {
-        ref: containerRef,
-        className: "fr-date-range-picker-inputs",
-        children: [/*#__PURE__*/_jsx("input", {
-          ref: inputRef,
-          "aria-label": "picked start date",
-          type: "text",
-          readOnly: true,
-          required: required,
-          className: classNames({
-            "fwe-border-hero": open && !disabled
-          }),
-          disabled: disabled,
-          id: id
-        }), /*#__PURE__*/_jsx("input", {
-          ref: input2Ref,
-          "aria-label": "picked end date",
-          type: "text",
-          readOnly: true,
-          required: required,
-          className: classNames({
-            "fwe-border-hero": open && !disabled
-          }),
-          disabled: disabled
-        })]
-      }), /*#__PURE__*/_jsx("span", {
-        className: classNames("fwe-input-text-label", {
-          "fwe-color-text-disabled": disabled
-        }),
-        children: children
-      }), hint && /*#__PURE__*/_jsx("span", {
-        className: "fwe-input-text-info",
-        children: hint
-      }), error && /*#__PURE__*/_jsx("span", {
-        className: "fwe-input-text-invalid",
-        children: error
-      })]
-    })
-  });
-}
-export default DateRangePicker;

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

@@ -1,29 +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;
-}
-declare function TextEditor({ disabled, defaultValue, label, maxLength, value, hint, error, readOnly, onChange, className, config: configProps, }: TextEditorProps): import("react/jsx-runtime").JSX.Element;
-export default TextEditor;

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

@@ -1,256 +0,0 @@
-import { useCallback, useEffect, useRef, useState } from "react";
-import classNames from "classnames";
-import * as xss from "xss";
-import { IconAlignCenter, IconAlignRight, IconEnumeration, IconImage, IconLink, IconListView } from "@festo-ui/react-icons";
-import useId from "../../helper/useId.js";
-import TextEditorButton from "./TextEditorButton.js";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-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(_ref) {
-  let {
-    disabled = false,
-    defaultValue,
-    label,
-    maxLength,
-    value,
-    hint,
-    error,
-    readOnly = false,
-    onChange,
-    className,
-    config: configProps
-  } = _ref;
-  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 = {
-        ...xss.whiteList,
-        p: [...(xss.whiteList?.p ?? []), "class"],
-        li: [...(xss.whiteList?.li ?? []), "class"],
-        a: [...(xss.whiteList?.a ?? []), "rel", "class"]
-      };
-      const sanitizedValue = xss.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 (typeof window !== "undefined") {
-        const QuillModule = await import("quill");
-        Quill = QuillModule.default;
-      }
-      if (editorRef.current && Quill && editor === null) {
-        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 (html === "<p><br></p>" || html === "<div><br></div>" || html === undefined) {
-          html = null;
-        }
-        if (html !== null) {
-          // Repairs relative links in an HTML string by prepending "https://".
-          // It ignores links that are already absolute (http, https) as well as mailto: and tel: links.
-          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 && value !== undefined && value !== null) {
-      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 && value != null && /*#__PURE__*/_jsx("span", {
-      className: "fwe-input-text-count",
-      children: `${currentLength()} / ${maxLength}`
-    })]
-  });
-}
-export default TextEditor;

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

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

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

@@ -1,80 +0,0 @@
-import { useEffect, useRef, useState } from "react";
-import classNames from "classnames";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-function TextEditorButton(_ref) {
-  let {
-    disabled,
-    label,
-    type,
-    className,
-    icon,
-    list,
-    value,
-    noAction,
-    category
-  } = _ref;
-  const [active, setActive] = useState(false);
-  const btnRef = useRef(null);
-  function handleClick() {
-    const btn = btnRef.current;
-    setActive(prevActive => !prevActive);
-    btn?.click();
-  }
-  useEffect(() => {
-    function callback(mutationRecords) {
-      mutationRecords.forEach(mutationRecord => {
-        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
-      });
-    }
-  }, [btnRef, noAction]);
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx("button", {
-      ref: btnRef,
-      type: "button",
-      className: classNames({
-        [`ql-${category || type}`]: !list
-      }, {
-        "ql-list": list
-      }, "fwe-d-none", {
-        [`action-${type}`]: !noAction
-      }),
-      "aria-hidden": "true",
-      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 default TextEditorButton;