@festo-ui/react 4.0.3-pre-20221124.8 → 5.0.0-dev.46

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

@@ -0,0 +1,108 @@
+import React, { useEffect, useState } from 'react';
+import classNames from 'classnames';
+import useId from '../../helper/useId';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+function TextArea(_ref) {
+  let {
+    disabled,
+    onBlur,
+    onChange,
+    onFocus,
+    onInput,
+    readonly,
+    required,
+    label,
+    error,
+    hint,
+    value,
+    rows,
+    maxLength,
+    className,
+    id: idProps,
+    defaultValue
+  } = _ref;
+  const controlled = value !== undefined;
+  const [innerValue, setInnerValue] = useState(controlled ? value : defaultValue);
+  const id = useId(idProps);
+  const hintClasses = classNames('fwe-input-text-info');
+  const shadowRef = React.useRef(null);
+  const ref = React.useRef(null);
+  const [height, setHeight] = useState(undefined);
+  useEffect(() => {
+    if (controlled) {
+      setInnerValue(value);
+    }
+  }, [value, controlled]);
+  useEffect(() => {
+    const input = ref.current;
+    const shadow = shadowRef.current;
+    const minRows = 2;
+    if (shadow && input) {
+      shadow.value = input.value || 'x';
+      shadow.style.width = `${input.clientWidth}`;
+      const newHeight = Math.max(minRows * 24, shadow.scrollHeight);
+      setHeight(newHeight + 4 + 4 + 1);
+    }
+  }, [innerValue]);
+  function handleChange(event) {
+    if (!controlled) {
+      setInnerValue(event.target.value);
+    }
+    if (onChange) {
+      onChange(event);
+    }
+  }
+  return /*#__PURE__*/_jsxs("label", {
+    className: classNames('fwe-input-text', className),
+    htmlFor: id,
+    children: [/*#__PURE__*/_jsx("textarea", {
+      style: {
+        ...(!rows && {
+          height,
+          overflow: 'hidden'
+        })
+      },
+      ref: ref,
+      className: classNames('fr-textarea', `fwe-row-${rows}`),
+      disabled: disabled,
+      readOnly: readonly,
+      required: required,
+      autoComplete: "off",
+      onChange: handleChange,
+      onFocus: onFocus,
+      onInput: onInput,
+      onBlur: onBlur,
+      maxLength: maxLength,
+      defaultValue: innerValue,
+      value: innerValue,
+      id: id
+    }), /*#__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
+    }), error !== undefined && /*#__PURE__*/_jsx("span", {
+      className: "fwe-input-text-invalid",
+      children: error
+    }), maxLength > 0 && innerValue !== undefined && /*#__PURE__*/_jsxs("span", {
+      className: "fwe-input-text-count",
+      children: [innerValue.length, " /", maxLength]
+    })]
+  });
+}
+export default TextArea;

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

@@ -1,29 +1,29 @@
-/// <reference types="react" />
-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 {
-    disabled?: boolean;
-    label: string;
-    maxLength?: number;
-    value?: string;
-    hint?: string;
-    error?: string;
-    readOnly?: boolean;
-    onChange?: (value: string) => void;
-    className?: string;
-    config?: TextEditorConfiguration;
-}
-export declare function TextEditor({ disabled, label, maxLength, value, hint, error, readOnly, onChange, className, config: configProps }: TextEditorProps): JSX.Element;
-export default TextEditor;
+/// <reference types="react" />
+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 {
+    disabled?: boolean;
+    label: string;
+    maxLength?: number;
+    value?: string;
+    hint?: string;
+    error?: string;
+    readOnly?: boolean;
+    onChange?: (value: string | null) => void;
+    className?: string;
+    config?: TextEditorConfiguration;
+}
+declare function TextEditor({ disabled, label, maxLength, value, hint, error, readOnly, onChange, className, config: configProps, }: TextEditorProps): JSX.Element;
+export default TextEditor;

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

@@ -0,0 +1,255 @@
+import { useEffect, useRef, useState } from 'react';
+import classNames from 'classnames';
+import TextEditorButton from './TextEditorButton';
+import useId from '../../helper/useId';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+const xss = require('xss');
+const defaultConfig = {
+  toolbar: {
+    bold: true,
+    italic: true,
+    underline: true,
+    alignCenter: true,
+    alignRight: true,
+    bulletList: true,
+    orderedList: true,
+    image: true,
+    link: true
+  }
+};
+function TextEditor(_ref) {
+  let {
+    disabled = false,
+    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(value);
+  const config = {
+    toolbar: {
+      ...defaultConfig.toolbar,
+      ...configProps?.toolbar
+    }
+  };
+  useEffect(() => {
+    if (editorRef && editor === null && typeof window === 'object') {
+      // eslint-disable-next-line global-require
+      const Quill = require('quill');
+      const newEditor = new Quill(editorRef.current, {
+        modules: {
+          toolbar: `#editor-toolbar-${CSS.escape(id ?? '')}`
+        },
+        theme: 'snow',
+        scrollingContainer: `#editor-container-${CSS.escape(id ?? '')}`
+      });
+      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();
+      }
+
+      // set up a matcher that does allow/disallow to paste images corresponding to config settings
+      newEditor.clipboard.addMatcher('img', (_node, delta) => {
+        // allowed, passthru delta
+        if (config.toolbar?.image === true) {
+          return delta;
+        }
+
+        // not allowed, remove image by setting up a new delta
+        const Delta = Quill.import('quill-delta');
+        return new Delta().insert('');
+      });
+      setEditor(newEditor);
+    }
+  }, [editorRef, editor, disabled, readOnly, className, id, config.toolbar?.image]);
+  useEffect(() => {
+    if (editor) {
+      editor.on('text-change', () => {
+        let html = editor.root.innerHTML;
+        if (html === '<p><br></p>' || html === '<div><br></div>' || html === undefined) {
+          html = null;
+        }
+        if (onChange) {
+          onChange(html);
+        }
+        setInnerValue(html);
+      });
+    }
+  }, [editor, onChange]);
+  useEffect(() => {
+    if (editor) {
+      const whiteList = {
+        ...xss.whiteList,
+        a: [...xss.whiteList.a, 'rel']
+      };
+      const sanitizedValue = xss(value, {
+        whiteList
+      });
+      const content = editor.clipboard.convert(sanitizedValue);
+      editor.setContents(content, 'silent');
+    }
+  }, [editor, 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__*/_jsxs("div", {
+      className: classNames('fwe-editor-toolbar', {
+        [`fwe-editor-toolbar-${className}`]: className
+      }),
+      id: `editor-toolbar-${id}`,
+      children: [/*#__PURE__*/_jsx("span", {
+        className: "ql-formats fwe-d-none",
+        children: /*#__PURE__*/_jsxs("select", {
+          className: "ql-size",
+          "aria-hidden": "true",
+          children: [/*#__PURE__*/_jsx("option", {
+            value: "small",
+            "aria-label": "small"
+          }), /*#__PURE__*/_jsx("option", {
+            selected: true,
+            "aria-label": "selected"
+          }), /*#__PURE__*/_jsx("option", {
+            value: "large",
+            "aria-label": "large"
+          }), /*#__PURE__*/_jsx("option", {
+            value: "huge",
+            "aria-label": "huge"
+          })]
+        })
+      }), /*#__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: classNames('text-align-center', {
+            'fwe-gray': disabled
+          }),
+          value: "center",
+          className: classNames('fwe-btn-toolbar-list fwe-btn-toolbar-list-alignments', {
+            'fwe-mr-3': config?.toolbar?.alignRight
+          })
+        }), config?.toolbar?.alignRight && /*#__PURE__*/_jsx(TextEditorButton, {
+          disabled: disabled,
+          category: "align",
+          type: "align-right",
+          icon: classNames('text-align-right', {
+            'fwe-gray': disabled
+          }),
+          value: "right",
+          className: "fwe-btn-toolbar-list fwe-btn-toolbar-list-alignments"
+        }), !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: "list-list-view",
+          value: "bullet"
+        }), config?.toolbar?.orderedList && /*#__PURE__*/_jsx(TextEditorButton, {
+          disabled: disabled,
+          type: "ol",
+          list: true,
+          icon: "enumeration",
+          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: "image-image",
+            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: "file-link",
+            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 +1,14 @@
-/// <reference types="react" />
-interface TextEditorButtonProps {
-    type: string;
-    label?: string;
-    icon?: string;
-    disabled: boolean;
-    className?: string;
-    list?: boolean;
-    value?: string;
-    noAction?: boolean;
-    category?: string;
-}
-declare function TextEditorButton({ disabled, label, type, className, icon, list, value, noAction, category }: TextEditorButtonProps): JSX.Element;
-export default TextEditorButton;
+/// <reference types="react" />
+interface TextEditorButtonProps {
+    type: string;
+    label?: string;
+    icon?: string;
+    disabled: boolean;
+    className?: string;
+    list?: boolean;
+    value?: string;
+    noAction?: boolean;
+    category?: string;
+}
+declare function TextEditorButton({ disabled, label, type, className, icon, list, value, noAction, category, }: TextEditorButtonProps): JSX.Element;
+export default TextEditorButton;

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

@@ -0,0 +1,82 @@
+import { useEffect, useRef, useState } from 'react';
+import classNames from 'classnames';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { 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('fwe-btn', {
+        'fwe-btn-toolbar-list': list
+      }, '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
+      }), icon && /*#__PURE__*/_jsx("i", {
+        className: classNames('fwe-icon fwe-icon-toolbar-list', `fwe-icon-${icon}`, 'fwe-pr-0')
+      })]
+    })]
+  });
+}
+export default TextEditorButton;

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

@@ -1,21 +1,21 @@
-import React from 'react';
-interface TextInputProps {
-    disabled?: boolean;
-    required?: boolean;
-    readonly?: boolean;
-    placeholder?: string;
-    type?: string;
-    step?: string;
-    min?: number;
-    max?: number;
-    value?: string;
-    onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
-    onInput?: (event: React.FormEvent<HTMLInputElement>) => void;
-    onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
-    label?: string;
-    hint?: string;
-    error?: string;
-    labelClassName?: string;
-}
-declare const TextInput: React.FC<TextInputProps & React.HTMLProps<HTMLInputElement>>;
-export default TextInput;
+import React from 'react';
+interface TextInputProps {
+    disabled?: boolean;
+    required?: boolean;
+    readonly?: boolean;
+    placeholder?: string;
+    type?: string;
+    step?: string;
+    min?: number;
+    max?: number;
+    value?: string;
+    onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
+    onInput?: (event: React.FormEvent<HTMLInputElement>) => void;
+    onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
+    label?: string;
+    hint?: string;
+    error?: string;
+    labelClassName?: string;
+}
+declare const TextInput: React.ForwardRefExoticComponent<Pick<TextInputProps & React.HTMLProps<HTMLInputElement>, "cite" | "data" | "form" | "label" | "slot" | "span" | "style" | "summary" | "title" | "pattern" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "nonce" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "value" | "list" | "step" | "type" | "height" | "start" | "content" | "size" | "default" | "wrap" | "open" | "multiple" | "disabled" | "href" | "action" | "selected" | "error" | "required" | "readonly" | "max" | "min" | "hint" | "labelClassName" | "accept" | "acceptCharset" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "async" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "classID" | "cols" | "colSpan" | "controls" | "coords" | "crossOrigin" | "dateTime" | "defer" | "download" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "high" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "maxLength" | "media" | "mediaGroup" | "method" | "minLength" | "muted" | "name" | "noValidate" | "optimum" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "shape" | "sizes" | "src" | "srcDoc" | "srcLang" | "srcSet" | "target" | "useMap" | "width" | "wmode"> & React.RefAttributes<HTMLLabelElement>>;
+export default TextInput;

package/lib/forms/text-input/TextInput.js

@@ -0,0 +1,75 @@
+import React, { forwardRef, useEffect, useState } from 'react';
+import classNames from 'classnames';
+import useId from '../../helper/useId';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const TextInput = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    disabled,
+    required,
+    readonly,
+    placeholder,
+    max,
+    min,
+    onBlur,
+    onFocus,
+    onInput,
+    step,
+    type,
+    value,
+    error,
+    hint,
+    label,
+    labelClassName,
+    id: idProps,
+    ...props
+  } = _ref;
+  const id = useId(idProps);
+  const [innerValue, setInnerValue] = useState(value);
+  useEffect(() => {
+    setInnerValue(value);
+  }, [value]);
+  const supported = ['text', 'number', 'password', 'datetime-local'];
+  const innerType = type && supported.indexOf(type) !== -1 ? type : 'text';
+  const labelClasses = classNames('fwe-input-text', labelClassName);
+  const hintClasses = classNames('fwe-input-text-info');
+  function handleChange(e) {
+    setInnerValue(e.target.value);
+    if (props.onChange) {
+      props.onChange(e);
+    }
+  }
+  return /*#__PURE__*/_jsxs("label", {
+    className: labelClasses,
+    htmlFor: id,
+    ref: ref,
+    children: [/*#__PURE__*/_jsx("input", {
+      disabled: disabled,
+      required: required,
+      readOnly: readonly,
+      placeholder: placeholder,
+      autoComplete: "off",
+      min: min,
+      max: max,
+      step: step,
+      onChange: handleChange,
+      onBlur: onBlur,
+      onFocus: onFocus,
+      onInput: onInput,
+      type: innerType,
+      value: innerValue,
+      id: id,
+      ...props
+    }), /*#__PURE__*/_jsx("span", {
+      className: "fwe-input-text-label",
+      children: label
+    }), hint && /*#__PURE__*/_jsx("span", {
+      className: hintClasses,
+      children: hint
+    }), error && /*#__PURE__*/_jsx("span", {
+      className: "fwe-input-text-invalid",
+      children: error
+    })]
+  });
+});
+export default TextInput;