@festo-ui/react 9.0.0-dev.713 → 9.0.0-dev.714

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

@@ -1,98 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = require("react");
-var _classnames = _interopRequireDefault(require("classnames"));
-var _useId = _interopRequireDefault(require("../../helper/useId.js"));
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const TextInput = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
-  let {
-    disabled,
-    required,
-    readonly,
-    placeholder,
-    max,
-    min,
-    onBlur,
-    onFocus,
-    onInput,
-    step,
-    type,
-    value,
-    defaultValue,
-    name,
-    error,
-    hint,
-    label,
-    labelClassName,
-    icon,
-    id: idProps,
-    autoFocus,
-    ...props
-  } = _ref;
-  const id = (0, _useId.default)(idProps);
-  const inputRef = (0, _react.useRef)(null);
-
-  // Programmatically focus the input instead of using autoFocus attribute
-  (0, _react.useEffect)(() => {
-    if (autoFocus && inputRef.current) {
-      // Short delay to ensure component is fully rendered
-      const timer = setTimeout(() => {
-        inputRef.current?.focus();
-      }, 0);
-      return () => clearTimeout(timer);
-    }
-    return undefined;
-  }, [autoFocus]);
-  const supported = ["text", "number", "password", "datetime-local"];
-  const innerType = type && supported.includes(type) ? type : "text";
-  const labelClasses = (0, _classnames.default)("fwe-input-text", {
-    "fwe-input-text-icon": icon
-  }, labelClassName);
-  const hintClasses = (0, _classnames.default)("fwe-input-text-info");
-  function handleChange(e) {
-    if (props.onChange) {
-      props.onChange(e);
-    }
-  }
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
-    className: labelClasses,
-    htmlFor: id,
-    ref: ref,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
-      name: name,
-      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: value,
-      defaultValue: defaultValue,
-      id: id,
-      ref: inputRef,
-      ...props
-    }), icon, /*#__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 = exports.default = TextInput;

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

@@ -1,166 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _classnames = _interopRequireDefault(require("classnames"));
-var _react = require("react");
-var _reactDom = _interopRequireDefault(require("react-dom"));
-var _reactPopper = require("react-popper");
-var _reactIcons = require("@festo-ui/react-icons");
-var _useForkRef = _interopRequireDefault(require("../../helper/useForkRef.js"));
-var _useId = _interopRequireDefault(require("../../helper/useId.js"));
-var _TimePickerDropdown = _interopRequireDefault(require("./time-picker-dropdown/TimePickerDropdown.js"));
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-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 controlled = value !== undefined;
-  const initialValue = controlled ? value : defaultValue;
-  const [innerValue, setInnerValue] = (0, _react.useState)(initialValue ?? new Date());
-  (0, _react.useEffect)(() => {
-    if (value !== undefined) {
-      value.setMilliseconds(0);
-      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)(_reactIcons.IconTime, {
-          className: (0, _classnames.default)({
-            "fwe-color-hero": open && !disabled,
-            "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, {
-      labelRef: labelRef,
-      ref: combinedTimePickerRef,
-      onClose: handleClose,
-      onDateChange: handleDateChange,
-      timeFormat: timeFormat,
-      showSeconds: options?.showSeconds,
-      minuteStepSize: options?.minuteStepSize,
-      range: options?.range,
-      date: innerValue,
-      style: {
-        ...styles.popper,
-        minWidth: labelRef?.current?.scrollWidth
-      },
-      ...attributes.popper
-    }), container.body)]
-  });
-});
-var _default = exports.default = TimePicker;

package/node/lib/forms/time-picker/time-picker-dropdown/TimePickerDropdown.js

@@ -1,219 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _classnames = _interopRequireDefault(require("classnames"));
-var _react = require("react");
-var _reactIcons = require("@festo-ui/react-icons");
-var _useForkRef = _interopRequireDefault(require("../../../helper/useForkRef.js"));
-var _LinkButton = _interopRequireDefault(require("../../../components/link-button/LinkButton.js"));
-var _TimePickerInput = _interopRequireDefault(require("./TimePickerInput.js"));
-var _useOnClickOutside = _interopRequireDefault(require("../../../helper/useOnClickOutside.js"));
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const TimePickerDropdown = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
-  let {
-    timeFormat,
-    date,
-    onDateChange,
-    showSeconds,
-    minuteStepSize,
-    range,
-    onClose,
-    style,
-    labelRef
-  } = _ref;
-  const innerRef = (0, _react.useRef)(null);
-  const combinedRef = (0, _useForkRef.default)(ref, innerRef);
-  const hoursRef = (0, _react.useRef)(null);
-  const [tmpHours, setTmpHours] = (0, _react.useState)(null);
-  const [tmpMinutes, setTmpMinutes] = (0, _react.useState)(null);
-  const [tmpSeconds, setTmpSeconds] = (0, _react.useState)(null);
-  const [innerDate, setInnerDate] = (0, _react.useState)(date);
-  (0, _useOnClickOutside.default)(labelRef, () => onClose(innerDate), innerRef);
-  const min = 0;
-  const hourMax = timeFormat === "12" ? 12 : 23;
-  const minutesSecondsMax = 59;
-  let innerMinuteStepSize = 1;
-  if (minuteStepSize) {
-    if (minuteStepSize > 1 && minuteStepSize < 60) {
-      innerMinuteStepSize = Math.round(minuteStepSize);
-    }
-  }
-  (0, _react.useEffect)(() => {
-    requestAnimationFrame(() => {
-      hoursRef.current?.focus();
-    });
-  }, []);
-  function handleKeyPress(e) {
-    if (e.key === "Escape" || e.key === "Enter") {
-      onClose(e.key === "Enter" ? innerDate : undefined);
-    }
-  }
-  function limitRange(newDate) {
-    if (range) {
-      if (newDate > range.maxValue) {
-        return range.minValue;
-      }
-      if (newDate < range.minValue) {
-        return range.maxValue;
-      }
-    }
-    return newDate;
-  }
-  function handleHourIncrement(increment) {
-    let newDate = new Date(innerDate);
-    newDate.setHours(innerDate.getHours() + increment);
-    newDate = limitRange(newDate);
-    setInnerDate(newDate);
-    onDateChange(newDate);
-    setTmpHours(null);
-  }
-  function handleHourChange(e) {
-    let newDate = new Date(innerDate);
-    const hour = +e.target.value;
-    newDate.setHours(Math.min(Math.max(hour, min), hourMax));
-    newDate = limitRange(newDate);
-    setInnerDate(newDate);
-    setTmpHours(newDate.getHours().toString());
-  }
-  function handleMinuteIncrement(increment) {
-    let newDate = new Date(innerDate);
-    newDate.setMinutes(innerDate.getMinutes() + increment);
-    newDate = limitRange(newDate);
-    setInnerDate(newDate);
-    onDateChange(newDate);
-    setTmpMinutes(null);
-  }
-  function handleMinuteChange(e) {
-    let newDate = new Date(innerDate);
-    const minute = +e.target.value;
-    newDate.setMinutes(Math.min(Math.max(minute, min), minutesSecondsMax));
-    newDate = limitRange(newDate);
-    setInnerDate(newDate);
-    setTmpMinutes(newDate.getMinutes().toString());
-  }
-  function handleSecondIncrement(increment) {
-    let newDate = new Date(innerDate);
-    newDate.setSeconds(innerDate.getSeconds() + increment);
-    newDate = limitRange(newDate);
-    setInnerDate(newDate);
-    onDateChange(newDate);
-    setTmpSeconds(null);
-  }
-  function handleSecondChange(e) {
-    let newDate = new Date(innerDate);
-    const seconds = +e.target.value;
-    newDate.setSeconds(Math.min(Math.max(seconds, min), minutesSecondsMax));
-    newDate = limitRange(newDate);
-    setInnerDate(newDate);
-    setTmpSeconds(newDate.getSeconds().toString());
-  }
-  const hours = timeFormat === "12" ? (innerDate.getHours() + 11) % 12 + 1 : innerDate.getHours();
-  function toggleAmPm() {
-    const newDate = new Date(innerDate);
-    // Get the current hour in 24-hour format
-    const currentHours = innerDate.getHours();
-    if (currentHours >= 0 && currentHours < 12) {
-      // Switching from AM to PM
-      newDate.setHours(currentHours + 12);
-    } else {
-      // Switching from PM to AM
-      newDate.setHours(currentHours - 12);
-    }
-    setInnerDate(newDate);
-    onDateChange(newDate);
-  }
-  const formatNumberWithLeadingZero = number => (number < 10 ? "0" : "") + number;
-  return (
-    /*#__PURE__*/
-    // should not be an issue with dialog
-    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
-    (0, _jsxRuntime.jsxs)("div", {
-      role: "dialog",
-      style: style,
-      ref: combinedRef,
-      className: (0, _classnames.default)("fr-timepicker fwe-timepicker", {
-        "fwe-timepicker-am-pm": timeFormat === "12"
-      }),
-      onKeyDown: e => handleKeyPress(e),
-      tabIndex: -1,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: "fwe-timepicker-spinners",
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-          className: "fwe-timepicker-spinners-hours",
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_LinkButton.default, {
-            "aria-label": "hour up",
-            className: "fwe-dark",
-            onClick: () => handleHourIncrement(1),
-            iconOnly: true,
-            icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactIcons.IconExpand, {})
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TimePickerInput.default, {
-            "aria-label": "hours value",
-            min: min,
-            max: hourMax,
-            value: tmpHours ?? formatNumberWithLeadingZero(hours),
-            onInput: handleHourChange,
-            ref: hoursRef
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_LinkButton.default, {
-            "aria-label": "hour down",
-            className: "fwe-dark",
-            onClick: () => handleHourIncrement(-1),
-            iconOnly: true,
-            icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactIcons.IconCollapse, {})
-          })]
-        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-          className: "fwe-timepicker-spinners-minutes",
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_LinkButton.default, {
-            "aria-label": "minute up",
-            className: "fwe-dark",
-            onClick: () => handleMinuteIncrement(innerMinuteStepSize),
-            iconOnly: true,
-            icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactIcons.IconExpand, {})
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TimePickerInput.default, {
-            "aria-label": "minutes value",
-            min: min,
-            max: minutesSecondsMax,
-            value: tmpMinutes ?? formatNumberWithLeadingZero(innerDate.getMinutes()),
-            onInput: handleMinuteChange
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_LinkButton.default, {
-            "aria-label": "minute down",
-            className: "fwe-dark",
-            onClick: () => handleMinuteIncrement(-innerMinuteStepSize),
-            iconOnly: true,
-            icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactIcons.IconCollapse, {})
-          })]
-        }), showSeconds && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-          className: "fwe-timepicker-spinners-seconds",
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_LinkButton.default, {
-            "aria-label": "seconds up",
-            className: "fwe-dark",
-            onClick: () => handleSecondIncrement(1),
-            iconOnly: true,
-            icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactIcons.IconExpand, {})
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TimePickerInput.default, {
-            "aria-label": "seconds value",
-            min: min,
-            max: minutesSecondsMax,
-            value: tmpSeconds ?? formatNumberWithLeadingZero(innerDate.getSeconds()),
-            onInput: handleSecondChange
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_LinkButton.default, {
-            "aria-label": "minute down",
-            className: "fwe-dark",
-            onClick: () => handleSecondIncrement(-1),
-            iconOnly: true,
-            icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactIcons.IconCollapse, {})
-          })]
-        })]
-      }), timeFormat === "12" && /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
-        onClick: toggleAmPm,
-        type: "button",
-        className: "fwe-btn fwe-ml-m",
-        children: innerDate.getHours() >= 12 ? "PM" : "AM"
-      })]
-    })
-  );
-});
-var _default = exports.default = TimePickerDropdown;

package/node/lib/forms/time-picker/time-picker-dropdown/TimePickerInput.js

@@ -1,29 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = require("react");
-var _jsxRuntime = require("react/jsx-runtime");
-const TimePickerInput = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
-  let {
-    min,
-    max,
-    value,
-    onInput,
-    "aria-label": ariaLabel
-  } = _ref;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
-    "aria-label": ariaLabel,
-    className: "fwe-timepicker-hide-spinners",
-    type: "number",
-    min: min,
-    step: 1,
-    value: value,
-    max: max,
-    onInput: onInput,
-    ref: ref
-  });
-});
-var _default = exports.default = TimePickerInput;

package/node/lib/helper/index.js

@@ -1,14 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.provideDiv = exports.default = void 0;
-const provideDiv = () => {
-  const div = document.createElement("div");
-  const id = Math.floor(Math.random() * 1000);
-  div.setAttribute("id", `${id}`);
-  return div;
-};
-exports.provideDiv = provideDiv;
-var _default = exports.default = provideDiv;

package/node/lib/helper/setRef.js

@@ -1,13 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = setRef;
-function setRef(ref, value) {
-  if (typeof ref === "function") {
-    ref(value);
-  } else if (ref) {
-    ref.current = value;
-  }
-}

package/node/lib/helper/types.js

@@ -1,5 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});

package/node/lib/helper/useControlled.js

@@ -1,28 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = useControlled;
-var _react = require("react");
-function useControlled(_ref) {
-  let {
-    controlled,
-    default: defaultValue,
-    onChange
-  } = _ref;
-  const {
-    current: isControlled
-  } = (0, _react.useRef)(controlled !== undefined);
-  const [valueState, setValue] = (0, _react.useState)(defaultValue);
-  const value = isControlled ? controlled : valueState;
-  const setValueIfUncontrolled = (0, _react.useCallback)(newValue => {
-    if (!isControlled) {
-      setValue(newValue);
-    }
-    const setter = newValue;
-    const onChangeValue = typeof newValue === "function" ? setter(controlled) : newValue;
-    onChange?.(onChangeValue);
-  }, [controlled, isControlled, onChange]);
-  return [value, setValueIfUncontrolled];
-}

package/node/lib/helper/useForkRef.js

@@ -1,26 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = useForkRef;
-var _react = _interopRequireDefault(require("react"));
-var _setRef = _interopRequireDefault(require("./setRef.js"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-// https://github.com/facebook/react/issues/13029#issuecomment-497629971
-function useForkRef(refA, refB) {
-  /**
-   * This will create a new function if the ref props change and are defined.
-   * This means react will call the old forkRef with `null` and the new forkRef
-   * with the ref. Cleanup naturally emerges from this behavior
-   */
-  return _react.default.useMemo(() => {
-    if ((refA === null || refA === undefined) && (refB == null || refB === undefined)) {
-      return null;
-    }
-    return instance => {
-      (0, _setRef.default)(refA, instance);
-      (0, _setRef.default)(refB, instance);
-    };
-  }, [refA, refB]);
-}

package/node/lib/helper/useId.js

@@ -1,28 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = useId;
-var _react = _interopRequireDefault(require("react"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-// eslint-disable-next-line no-useless-concat
-const maybeReactUseId = _react.default["useId" + ""];
-let nextId = 0;
-function useLegacyId() {
-  const [id, setId] = _react.default.useState(undefined);
-  _react.default.useEffect(() => {
-    if (id == null) {
-      nextId += 1;
-      setId(`fr-${nextId}`);
-    }
-  }, [id]);
-  return id;
-}
-function useId(idInput) {
-  if (idInput !== undefined && idInput !== null) {
-    return idInput;
-  }
-  // eslint-disable-next-line react-hooks/rules-of-hooks
-  return maybeReactUseId ? maybeReactUseId() : useLegacyId();
-}

package/node/lib/helper/useOnClickOutside.js

@@ -1,24 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = useOnClickOutside;
-var _react = require("react");
-function useOnClickOutside(ref, callback, ref2) {
-  (0, _react.useEffect)(() => {
-    const listener = event => {
-      // Do nothing if clicking ref's element or descendent elements
-      if (!ref.current || ref.current.contains(event.target) || ref2 && (!ref2.current || ref2.current.contains(event.target))) {
-        return;
-      }
-      callback(event);
-    };
-    document.addEventListener("mousedown", listener, true);
-    document.addEventListener("touchstart", listener, true);
-    return () => {
-      document.removeEventListener("mousedown", listener, true);
-      document.removeEventListener("touchstart", listener, true);
-    };
-  }, [ref, ref2, callback]);
-}

package/simplebar.min.css

@@ -1 +0,0 @@
-[data-simplebar]{position:relative;flex-direction:column;flex-wrap:wrap;justify-content:flex-start;align-content:flex-start;align-items:flex-start}.simplebar-wrapper{overflow:hidden;width:inherit;height:inherit;max-width:inherit;max-height:inherit}.simplebar-mask{direction:inherit;position:absolute;overflow:hidden;padding:0;margin:0;left:0;top:0;bottom:0;right:0;width:auto!important;height:auto!important;z-index:0}.simplebar-offset{direction:inherit!important;box-sizing:inherit!important;resize:none!important;position:absolute;top:0;left:0;bottom:0;right:0;padding:0;margin:0;-webkit-overflow-scrolling:touch}.simplebar-content-wrapper{direction:inherit;box-sizing:border-box!important;position:relative;display:block;height:100%;width:auto;max-width:100%;max-height:100%;overflow:auto;scrollbar-width:none;-ms-overflow-style:none}.simplebar-content-wrapper::-webkit-scrollbar,.simplebar-hide-scrollbar::-webkit-scrollbar{display:none;width:0;height:0}.simplebar-content:after,.simplebar-content:before{content:' ';display:table}.simplebar-placeholder{max-height:100%;max-width:100%;width:100%;pointer-events:none}.simplebar-height-auto-observer-wrapper{box-sizing:inherit!important;height:100%;width:100%;max-width:1px;position:relative;float:left;max-height:1px;overflow:hidden;z-index:-1;padding:0;margin:0;pointer-events:none;flex-grow:inherit;flex-shrink:0;flex-basis:0}.simplebar-height-auto-observer{box-sizing:inherit;display:block;opacity:0;position:absolute;top:0;left:0;height:1000%;width:1000%;min-height:1px;min-width:1px;overflow:hidden;pointer-events:none;z-index:-1}.simplebar-track{z-index:1;position:absolute;right:0;bottom:0;pointer-events:none;overflow:hidden}[data-simplebar].simplebar-dragging{pointer-events:none;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}[data-simplebar].simplebar-dragging .simplebar-content{pointer-events:none;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}[data-simplebar].simplebar-dragging .simplebar-track{pointer-events:all}.simplebar-scrollbar{position:absolute;left:0;right:0;min-height:10px}.simplebar-scrollbar:before{position:absolute;content:'';background:#000;border-radius:7px;left:2px;right:2px;opacity:0;transition:opacity .2s .5s linear}.simplebar-scrollbar.simplebar-visible:before{opacity:.5;transition-delay:0s;transition-duration:0s}.simplebar-track.simplebar-vertical{top:0;width:11px}.simplebar-scrollbar:before{top:2px;bottom:2px;left:2px;right:2px}.simplebar-track.simplebar-horizontal{left:0;height:11px}.simplebar-track.simplebar-horizontal .simplebar-scrollbar{right:auto;left:0;top:0;bottom:0;min-height:0;min-width:10px;width:auto}[data-simplebar-direction=rtl] .simplebar-track.simplebar-vertical{right:auto;left:0}.simplebar-dummy-scrollbar-size{direction:rtl;position:fixed;opacity:0;visibility:hidden;height:500px;width:500px;overflow-y:hidden;overflow-x:scroll;-ms-overflow-style:scrollbar!important}.simplebar-dummy-scrollbar-size>div{width:200%;height:200%;margin:10px 0}.simplebar-hide-scrollbar{position:fixed;left:0;visibility:hidden;overflow-y:scroll;scrollbar-width:none;-ms-overflow-style:none}