@festo-ui/react 9.0.0-dev.707 → 9.0.0-dev.710

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

@@ -1,159 +0,0 @@
-import cn from "classnames";
-import { forwardRef, useMemo, useRef, useState, useEffect } from "react";
-import ReactDOM from "react-dom";
-import { usePopper } from "react-popper";
-import { IconTime } from "@festo-ui/react-icons";
-import useForkRef from "../../helper/useForkRef.js";
-import useId from "../../helper/useId.js";
-import TimePickerDropdown from "./time-picker-dropdown/TimePickerDropdown.js";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-const TimePicker = /*#__PURE__*/forwardRef((_ref, ref) => {
-  let {
-    error,
-    hint,
-    required,
-    disabled,
-    children,
-    value,
-    options,
-    defaultValue,
-    formatDate,
-    onChange,
-    id: idProps,
-    ...props
-  } = _ref;
-  const id = useId(idProps);
-  const innerFormatDate = formatDate ?? Intl.DateTimeFormat("default", {
-    hour: "numeric",
-    minute: "numeric",
-    ...(options?.showSeconds && {
-      second: "numeric"
-    })
-  }).format;
-  const timeFormat = options?.timeFormat ?? "24";
-  const [referenceElement, setReferenceElement] = useState(null);
-  const [popperElement, setPopperElement] = useState(null);
-  const customModifier = useMemo(() => ({
-    name: "offset",
-    options: {
-      offset: _ref2 => {
-        let {
-          placement
-        } = _ref2;
-        if (placement === "bottom") {
-          return [0, -12];
-        }
-        return [0, 0];
-      }
-    }
-  }), []);
-  const {
-    styles,
-    attributes
-  } = usePopper(referenceElement, popperElement, {
-    modifiers: [customModifier]
-  });
-  const combinedRef = useForkRef(ref, r => setReferenceElement(r));
-  const labelRef = useRef(null);
-  const allRefs = useForkRef(combinedRef, labelRef);
-  const timePickerRef = useRef(null);
-  const combinedTimePickerRef = useForkRef(timePickerRef, r => setPopperElement(r));
-  const [open, setOpen] = useState(false);
-  const controlled = value !== undefined;
-  const initialValue = controlled ? value : defaultValue;
-  const [innerValue, setInnerValue] = useState(initialValue ?? new Date());
-  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__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx("div", {
-      tabIndex: 0,
-      role: "button",
-      ref: allRefs,
-      onKeyDown: handleKeyDown,
-      onKeyUp: handleKeyUp,
-      onClick: toggle,
-      ...props,
-      children: /*#__PURE__*/_jsxs("label", {
-        htmlFor: id,
-        className: "fr-time-picker fwe-input-text fwe-input-text-icon",
-        children: [/*#__PURE__*/_jsx(IconTime, {
-          className: cn({
-            "fwe-color-hero": open && !disabled,
-            "fwe-color-control-disabled": disabled
-          })
-        }), /*#__PURE__*/_jsx("input", {
-          id: id,
-          "aria-label": "picked time",
-          type: "text",
-          readOnly: true,
-          required: required,
-          className: cn({
-            "fwe-border-hero": open
-          }),
-          value: innerFormatDate(innerValue),
-          disabled: disabled
-        }), /*#__PURE__*/_jsx("span", {
-          className: "fwe-input-text-label",
-          children: children
-        }), hint && /*#__PURE__*/_jsx("span", {
-          className: "fwe-input-text-info",
-          children: hint
-        }), error && /*#__PURE__*/_jsx("span", {
-          className: "fwe-input-text-invalid",
-          children: error
-        })]
-      })
-    }), open && /*#__PURE__*/ReactDOM.createPortal(/*#__PURE__*/_jsx(TimePickerDropdown, {
-      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)]
-  });
-});
-export default TimePicker;

package/lib/forms/time-picker/time-picker-dropdown/TimePickerDropdown.d.ts

@@ -1,19 +0,0 @@
-import "./TimePickerDropdown.scss";
-import type React from "react";
-import { type RefObject } from "react";
-interface TimePickerDropdownProps {
-    timeFormat: "12" | "24";
-    date: Date;
-    onDateChange: (date: Date) => void;
-    showSeconds?: boolean;
-    minuteStepSize?: number;
-    range?: {
-        minValue: Date;
-        maxValue: Date;
-    };
-    onClose: (date?: Date) => void;
-    style?: React.CSSProperties;
-    labelRef: RefObject<HTMLDivElement>;
-}
-declare const TimePickerDropdown: (props: TimePickerDropdownProps & React.RefAttributes<HTMLDivElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
-export default TimePickerDropdown;

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

@@ -1,212 +0,0 @@
-import cn from "classnames";
-import { forwardRef, useEffect, useRef, useState } from "react";
-import { IconCollapse, IconExpand } from "@festo-ui/react-icons";
-import useForkRef from "../../../helper/useForkRef.js";
-import LinkButton from "../../../components/link-button/LinkButton.js";
-import TimePickerInput from "./TimePickerInput.js";
-import useOnClickOutside from "../../../helper/useOnClickOutside.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const TimePickerDropdown = /*#__PURE__*/forwardRef((_ref, ref) => {
-  let {
-    timeFormat,
-    date,
-    onDateChange,
-    showSeconds,
-    minuteStepSize,
-    range,
-    onClose,
-    style,
-    labelRef
-  } = _ref;
-  const innerRef = useRef(null);
-  const combinedRef = useForkRef(ref, innerRef);
-  const hoursRef = useRef(null);
-  const [tmpHours, setTmpHours] = useState(null);
-  const [tmpMinutes, setTmpMinutes] = useState(null);
-  const [tmpSeconds, setTmpSeconds] = useState(null);
-  const [innerDate, setInnerDate] = useState(date);
-  useOnClickOutside(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);
-    }
-  }
-  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
-    _jsxs("div", {
-      role: "dialog",
-      style: style,
-      ref: combinedRef,
-      className: cn("fr-timepicker fwe-timepicker", {
-        "fwe-timepicker-am-pm": timeFormat === "12"
-      }),
-      onKeyDown: e => handleKeyPress(e),
-      tabIndex: -1,
-      children: [/*#__PURE__*/_jsxs("div", {
-        className: "fwe-timepicker-spinners",
-        children: [/*#__PURE__*/_jsxs("div", {
-          className: "fwe-timepicker-spinners-hours",
-          children: [/*#__PURE__*/_jsx(LinkButton, {
-            "aria-label": "hour up",
-            className: "fwe-dark",
-            onClick: () => handleHourIncrement(1),
-            iconOnly: true,
-            icon: /*#__PURE__*/_jsx(IconExpand, {})
-          }), /*#__PURE__*/_jsx(TimePickerInput, {
-            "aria-label": "hours value",
-            min: min,
-            max: hourMax,
-            value: tmpHours ?? formatNumberWithLeadingZero(hours),
-            onInput: handleHourChange,
-            ref: hoursRef
-          }), /*#__PURE__*/_jsx(LinkButton, {
-            "aria-label": "hour down",
-            className: "fwe-dark",
-            onClick: () => handleHourIncrement(-1),
-            iconOnly: true,
-            icon: /*#__PURE__*/_jsx(IconCollapse, {})
-          })]
-        }), /*#__PURE__*/_jsxs("div", {
-          className: "fwe-timepicker-spinners-minutes",
-          children: [/*#__PURE__*/_jsx(LinkButton, {
-            "aria-label": "minute up",
-            className: "fwe-dark",
-            onClick: () => handleMinuteIncrement(innerMinuteStepSize),
-            iconOnly: true,
-            icon: /*#__PURE__*/_jsx(IconExpand, {})
-          }), /*#__PURE__*/_jsx(TimePickerInput, {
-            "aria-label": "minutes value",
-            min: min,
-            max: minutesSecondsMax,
-            value: tmpMinutes ?? formatNumberWithLeadingZero(innerDate.getMinutes()),
-            onInput: handleMinuteChange
-          }), /*#__PURE__*/_jsx(LinkButton, {
-            "aria-label": "minute down",
-            className: "fwe-dark",
-            onClick: () => handleMinuteIncrement(-innerMinuteStepSize),
-            iconOnly: true,
-            icon: /*#__PURE__*/_jsx(IconCollapse, {})
-          })]
-        }), showSeconds && /*#__PURE__*/_jsxs("div", {
-          className: "fwe-timepicker-spinners-seconds",
-          children: [/*#__PURE__*/_jsx(LinkButton, {
-            "aria-label": "seconds up",
-            className: "fwe-dark",
-            onClick: () => handleSecondIncrement(1),
-            iconOnly: true,
-            icon: /*#__PURE__*/_jsx(IconExpand, {})
-          }), /*#__PURE__*/_jsx(TimePickerInput, {
-            "aria-label": "seconds value",
-            min: min,
-            max: minutesSecondsMax,
-            value: tmpSeconds ?? formatNumberWithLeadingZero(innerDate.getSeconds()),
-            onInput: handleSecondChange
-          }), /*#__PURE__*/_jsx(LinkButton, {
-            "aria-label": "minute down",
-            className: "fwe-dark",
-            onClick: () => handleSecondIncrement(-1),
-            iconOnly: true,
-            icon: /*#__PURE__*/_jsx(IconCollapse, {})
-          })]
-        })]
-      }), timeFormat === "12" && /*#__PURE__*/_jsx("button", {
-        onClick: toggleAmPm,
-        type: "button",
-        className: "fwe-btn fwe-ml-m",
-        children: innerDate.getHours() >= 12 ? "PM" : "AM"
-      })]
-    })
-  );
-});
-export default TimePickerDropdown;

package/lib/forms/time-picker/time-picker-dropdown/TimePickerInput.d.ts

@@ -1,9 +0,0 @@
-interface TimePickerInputProps {
-    min: number;
-    value: string | number;
-    max: number;
-    onInput: React.FormEventHandler<HTMLInputElement>;
-    "aria-label": string;
-}
-declare const TimePickerInput: (props: TimePickerInputProps & import("react").RefAttributes<HTMLInputElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;
-export default TimePickerInput;

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

@@ -1,23 +0,0 @@
-import { forwardRef } from "react";
-import { jsx as _jsx } from "react/jsx-runtime";
-const TimePickerInput = /*#__PURE__*/forwardRef((_ref, ref) => {
-  let {
-    min,
-    max,
-    value,
-    onInput,
-    "aria-label": ariaLabel
-  } = _ref;
-  return /*#__PURE__*/_jsx("input", {
-    "aria-label": ariaLabel,
-    className: "fwe-timepicker-hide-spinners",
-    type: "number",
-    min: min,
-    step: 1,
-    value: value,
-    max: max,
-    onInput: onInput,
-    ref: ref
-  });
-});
-export default TimePickerInput;

package/lib/helper/index.js

@@ -1,7 +0,0 @@
-export const provideDiv = () => {
-  const div = document.createElement("div");
-  const id = Math.floor(Math.random() * 1000);
-  div.setAttribute("id", `${id}`);
-  return div;
-};
-export default provideDiv;

package/lib/helper/setRef.d.ts

@@ -1 +0,0 @@
-export default function setRef<T>(ref: React.ForwardedRef<T> | undefined, value: any): void;

package/lib/helper/setRef.js

@@ -1,7 +0,0 @@
-export default function setRef(ref, value) {
-  if (typeof ref === "function") {
-    ref(value);
-  } else if (ref) {
-    ref.current = value;
-  }
-}

package/lib/helper/types.js

@@ -1 +0,0 @@
-export {};

package/lib/helper/useControlled.js

@@ -1,22 +0,0 @@
-import { useRef, useState, useCallback } from "react";
-export default function useControlled(_ref) {
-  let {
-    controlled,
-    default: defaultValue,
-    onChange
-  } = _ref;
-  const {
-    current: isControlled
-  } = useRef(controlled !== undefined);
-  const [valueState, setValue] = useState(defaultValue);
-  const value = isControlled ? controlled : valueState;
-  const setValueIfUncontrolled = 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/lib/helper/useForkRef.d.ts

@@ -1,2 +0,0 @@
-import React from "react";
-export default function useForkRef<T>(refA: React.Ref<T> | null | undefined, refB: React.Ref<T> | null | undefined): React.RefCallback<T> | null;

package/lib/helper/useForkRef.js

@@ -1,18 +0,0 @@
-import React from "react";
-import setRef from "./setRef.js"; // https://github.com/facebook/react/issues/13029#issuecomment-497629971
-export default 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.useMemo(() => {
-    if ((refA === null || refA === undefined) && (refB == null || refB === undefined)) {
-      return null;
-    }
-    return instance => {
-      setRef(refA, instance);
-      setRef(refB, instance);
-    };
-  }, [refA, refB]);
-}

package/lib/helper/useId.d.ts

@@ -1 +0,0 @@
-export default function useId(idInput?: string): string | undefined;

package/lib/helper/useId.js

@@ -1,22 +0,0 @@
-import React from "react";
-
-// eslint-disable-next-line no-useless-concat
-const maybeReactUseId = React["useId" + ""];
-let nextId = 0;
-function useLegacyId() {
-  const [id, setId] = React.useState(undefined);
-  React.useEffect(() => {
-    if (id == null) {
-      nextId += 1;
-      setId(`fr-${nextId}`);
-    }
-  }, [id]);
-  return id;
-}
-export default function useId(idInput) {
-  if (idInput !== undefined && idInput !== null) {
-    return idInput;
-  }
-  // eslint-disable-next-line react-hooks/rules-of-hooks
-  return maybeReactUseId ? maybeReactUseId() : useLegacyId();
-}

package/lib/helper/useOnClickOutside.d.ts

@@ -1,2 +0,0 @@
-import { type RefObject } from "react";
-export default function useOnClickOutside(ref: RefObject<HTMLElement>, callback: (event: MouseEvent | TouchEvent) => void, ref2?: RefObject<HTMLElement>): void;

package/lib/helper/useOnClickOutside.js

@@ -1,18 +0,0 @@
-import { useEffect } from "react";
-export default function useOnClickOutside(ref, callback, ref2) {
-  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]);
-}