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

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

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

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

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

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

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

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

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

package/node/lib/helper/useControlled.js

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

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

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

@@ -0,0 +1,24 @@
+"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]);
+}