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

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

@@ -0,0 +1,261 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _TextEditorButton = _interopRequireDefault(require("./TextEditorButton"));
+var _useId = _interopRequireDefault(require("../../helper/useId"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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 = (0, _react.useRef)(null);
+  const [editor, setEditor] = (0, _react.useState)(null);
+  const id = (0, _useId.default)();
+  const [innerValue, setInnerValue] = (0, _react.useState)(value);
+  const config = {
+    toolbar: {
+      ...defaultConfig.toolbar,
+      ...configProps?.toolbar
+    }
+  };
+  (0, _react.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]);
+  (0, _react.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]);
+  (0, _react.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__*/(0, _jsxRuntime.jsxs)("label", {
+    className: (0, _classnames.default)('fwe-input-text', {
+      disabled
+    }),
+    htmlFor: `editor-label-${id}`,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: (0, _classnames.default)('fwe-editor-toolbar', {
+        [`fwe-editor-toolbar-${className}`]: className
+      }),
+      id: `editor-toolbar-${id}`,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: "ql-formats fwe-d-none",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("select", {
+          className: "ql-size",
+          "aria-hidden": "true",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
+            value: "small",
+            "aria-label": "small"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
+            selected: true,
+            "aria-label": "selected"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
+            value: "large",
+            "aria-label": "large"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
+            value: "huge",
+            "aria-label": "huge"
+          })]
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+        className: "ql-formats fwe-mr-3",
+        children: [config?.toolbar?.bold && /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextEditorButton.default, {
+          disabled: disabled,
+          type: "bold",
+          className: "fwe-mr-3",
+          label: "B"
+        }), config?.toolbar?.italic && /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextEditorButton.default, {
+          disabled: disabled,
+          type: "italic",
+          className: "fwe-mr-3",
+          label: "I"
+        }), config?.toolbar?.underline && /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextEditorButton.default, {
+          disabled: disabled,
+          type: "underline",
+          label: "U"
+        }), !hideDivider('typo') && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "fwe-divider-y fwe-d-inline-flex fwe-mx-4"
+        }), config?.toolbar?.alignCenter && /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextEditorButton.default, {
+          disabled: disabled,
+          category: "align",
+          type: "align-center",
+          icon: (0, _classnames.default)('text-align-center', {
+            'fwe-gray': disabled
+          }),
+          value: "center",
+          className: (0, _classnames.default)('fwe-btn-toolbar-list fwe-btn-toolbar-list-alignments', {
+            'fwe-mr-3': config?.toolbar?.alignRight
+          })
+        }), config?.toolbar?.alignRight && /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextEditorButton.default, {
+          disabled: disabled,
+          category: "align",
+          type: "align-right",
+          icon: (0, _classnames.default)('text-align-right', {
+            'fwe-gray': disabled
+          }),
+          value: "right",
+          className: "fwe-btn-toolbar-list fwe-btn-toolbar-list-alignments"
+        }), !hideDivider('text-align') && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "fwe-divider-y fwe-d-inline-flex fwe-mx-4"
+        }), config?.toolbar?.bulletList && /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextEditorButton.default, {
+          disabled: disabled,
+          className: "fwe-mr-3",
+          type: "ul",
+          list: true,
+          icon: "list-list-view",
+          value: "bullet"
+        }), config?.toolbar?.orderedList && /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextEditorButton.default, {
+          disabled: disabled,
+          type: "ol",
+          list: true,
+          icon: "enumeration",
+          value: "ordered"
+        }), config?.toolbar?.image && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "fwe-divider-y fwe-d-inline-flex fwe-mx-4"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextEditorButton.default, {
+            disabled: disabled,
+            type: "image",
+            icon: "image-image",
+            noAction: true
+          })]
+        }), config?.toolbar?.link && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "fwe-divider-y fwe-d-inline-flex fwe-mx-4"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextEditorButton.default, {
+            disabled: disabled,
+            type: "link",
+            icon: "file-link",
+            noAction: true
+          })]
+        })]
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: (0, _classnames.default)('fwe-editor-container', {
+        'fwe-editor-container--error': error
+      }),
+      id: `editor-container-${id}`,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "fwe-editor",
+        ref: editorRef
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      className: "fwe-input-text-label",
+      children: label
+    }), error && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      className: "fwe-text-editor-invalid",
+      children: error
+    }), hint && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      className: "fwe-text-editor-info",
+      children: hint
+    }), maxLength && maxLength > 0 && value != null && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      className: "fwe-input-text-count",
+      children: `${currentLength()} / ${maxLength}`
+    })]
+  });
+}
+var _default = TextEditor;
+exports.default = _default;

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

@@ -0,0 +1,88 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function TextEditorButton(_ref) {
+  let {
+    disabled,
+    label,
+    type,
+    className,
+    icon,
+    list,
+    value,
+    noAction,
+    category
+  } = _ref;
+  const [active, setActive] = (0, _react.useState)(false);
+  const btnRef = (0, _react.useRef)(null);
+  function handleClick() {
+    const btn = btnRef.current;
+    setActive(prevActive => !prevActive);
+    btn?.click();
+  }
+  (0, _react.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__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+      ref: btnRef,
+      type: "button",
+      className: (0, _classnames.default)({
+        [`ql-${category || type}`]: !list
+      }, {
+        'ql-list': list
+      }, 'fwe-d-none', {
+        [`action-${type}`]: !noAction
+      }),
+      "aria-hidden": "true",
+      value: value
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
+      type: "button",
+      className: (0, _classnames.default)('fwe-btn', {
+        'fwe-btn-toolbar-list': list
+      }, 'fr-button', className, {
+        'fwe-active': active && !noAction
+      }),
+      onClick: () => handleClick(),
+      disabled: disabled,
+      children: [label && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: `fr-button-text fwe-text-${type}`,
+        children: label
+      }), icon && /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
+        className: (0, _classnames.default)('fwe-icon fwe-icon-toolbar-list', `fwe-icon-${icon}`, 'fwe-pr-0')
+      })]
+    })]
+  });
+}
+var _default = TextEditorButton;
+exports.default = _default;

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

@@ -0,0 +1,84 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _useId = _interopRequireDefault(require("../../helper/useId"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+const TextInput = /*#__PURE__*/(0, _react.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 = (0, _useId.default)(idProps);
+  const [innerValue, setInnerValue] = (0, _react.useState)(value);
+  (0, _react.useEffect)(() => {
+    setInnerValue(value);
+  }, [value]);
+  const supported = ['text', 'number', 'password', 'datetime-local'];
+  const innerType = type && supported.indexOf(type) !== -1 ? type : 'text';
+  const labelClasses = (0, _classnames.default)('fwe-input-text', labelClassName);
+  const hintClasses = (0, _classnames.default)('fwe-input-text-info');
+  function handleChange(e) {
+    setInnerValue(e.target.value);
+    if (props.onChange) {
+      props.onChange(e);
+    }
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
+    className: labelClasses,
+    htmlFor: id,
+    ref: ref,
+    children: [/*#__PURE__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsx)("span", {
+      className: "fwe-input-text-label",
+      children: label
+    }), hint && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      className: hintClasses,
+      children: hint
+    }), error && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      className: "fwe-input-text-invalid",
+      children: error
+    })]
+  });
+});
+var _default = TextInput;
+exports.default = _default;

package/node/lib/forms/time-picker/TimePicker.js

@@ -0,0 +1,169 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _classnames = _interopRequireDefault(require("classnames"));
+var _react = _interopRequireWildcard(require("react"));
+var _reactDom = _interopRequireDefault(require("react-dom"));
+var _reactPopper = require("react-popper");
+var _useForkRef = _interopRequireDefault(require("../../helper/useForkRef"));
+var _useId = _interopRequireDefault(require("../../helper/useId"));
+var _useOnClickOutside = _interopRequireDefault(require("../../helper/useOnClickOutside"));
+var _TimePickerDropdown = _interopRequireDefault(require("./time-picker-dropdown/TimePickerDropdown"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const TimePicker = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    error,
+    hint,
+    required,
+    disabled,
+    children,
+    value,
+    options,
+    defaultValue,
+    formatDate,
+    onChange,
+    id: idProps,
+    ...props
+  } = _ref;
+  const id = (0, _useId.default)(idProps);
+  const innerFormatDate = formatDate ?? Intl.DateTimeFormat('default', {
+    hour: 'numeric',
+    minute: 'numeric',
+    ...(options?.showSeconds && {
+      second: 'numeric'
+    })
+  }).format;
+  const timeFormat = options?.timeFormat ?? '24';
+  const [referenceElement, setReferenceElement] = (0, _react.useState)(null);
+  const [popperElement, setPopperElement] = (0, _react.useState)(null);
+  const customModifier = (0, _react.useMemo)(() => ({
+    name: 'offset',
+    options: {
+      offset: _ref2 => {
+        let {
+          placement
+        } = _ref2;
+        if (placement === 'bottom') {
+          return [0, -12];
+        }
+        return [0, 0];
+      }
+    }
+  }), []);
+  const {
+    styles,
+    attributes
+  } = (0, _reactPopper.usePopper)(referenceElement, popperElement, {
+    modifiers: [customModifier]
+  });
+  const combinedRef = (0, _useForkRef.default)(ref, r => setReferenceElement(r));
+  const labelRef = (0, _react.useRef)(null);
+  const allRefs = (0, _useForkRef.default)(combinedRef, labelRef);
+  const timePickerRef = (0, _react.useRef)(null);
+  const combinedTimePickerRef = (0, _useForkRef.default)(timePickerRef, r => setPopperElement(r));
+  const [open, setOpen] = (0, _react.useState)(false);
+  const closeDropdown = (0, _react.useCallback)(() => {
+    setOpen(false);
+  }, []);
+  (0, _useOnClickOutside.default)(labelRef, closeDropdown, timePickerRef);
+  const controlled = value !== undefined;
+  const initialValue = controlled ? value : defaultValue;
+  const [innerValue, setInnerValue] = (0, _react.useState)(initialValue ?? new Date());
+  (0, _react.useEffect)(() => {
+    if (value !== undefined) {
+      setInnerValue(value);
+    }
+  }, [value]);
+  function toggle(e) {
+    e?.preventDefault();
+    if (!disabled) {
+      setOpen(prevOpen => !prevOpen);
+    }
+  }
+  function handleDateChange(newDate) {
+    if (!controlled) {
+      setInnerValue(newDate);
+    }
+    if (onChange) {
+      onChange(newDate);
+    }
+  }
+  function handleClose(newDate) {
+    if (newDate) {
+      handleDateChange(newDate);
+    }
+    setOpen(false);
+  }
+  const handleKeyDown = event => {
+    if (event.key === 'Enter') {
+      toggle();
+    }
+  };
+  const handleKeyUp = event => {
+    if (event.key === ' ') {
+      toggle();
+    }
+  };
+  const container = labelRef?.current?.ownerDocument || document;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      tabIndex: 0,
+      role: "button",
+      ref: allRefs,
+      onKeyDown: handleKeyDown,
+      onKeyUp: handleKeyUp,
+      onClick: toggle,
+      ...props,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
+        htmlFor: id,
+        className: "fr-time-picker fwe-input-text fwe-input-text-icon",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
+          className: (0, _classnames.default)('fwe-icon fwe-icon-time-time', {
+            'fwe-color-hero': open,
+            'fwe-color-control-disabled': disabled
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+          id: id,
+          "aria-label": "picked time",
+          type: "text",
+          readOnly: true,
+          required: required,
+          className: (0, _classnames.default)({
+            'fwe-border-hero': open
+          }),
+          value: innerFormatDate(innerValue),
+          disabled: disabled
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: "fwe-input-text-label",
+          children: children
+        }), hint && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: "fwe-input-text-info",
+          children: hint
+        }), error && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: "fwe-input-text-invalid",
+          children: error
+        })]
+      })
+    }), open && /*#__PURE__*/_reactDom.default.createPortal( /*#__PURE__*/(0, _jsxRuntime.jsx)(_TimePickerDropdown.default, {
+      ref: combinedTimePickerRef,
+      onClose: handleClose,
+      onDateChange: handleDateChange,
+      timeFormat: timeFormat,
+      showSeconds: options?.showSeconds,
+      date: innerValue,
+      style: {
+        ...styles.popper,
+        minWidth: labelRef?.current?.scrollWidth
+      },
+      ...attributes.popper
+    }), container.body)]
+  });
+});
+var _default = TimePicker;
+exports.default = _default;