@festo-ui/react 4.0.3-pre-20221213.1 → 5.0.0-dev.72

package/lib/forms/time-picker/TimePicker.d.ts

@@ -1,18 +1,18 @@
-import React, { ComponentPropsWithoutRef } from 'react';
-export interface TimePickerOptions {
-    timeFormat?: '12' | '24';
-    showSeconds?: boolean;
-}
-export interface TimePickerProps extends Omit<ComponentPropsWithoutRef<'label'>, 'value' | 'defaultValue' | 'onChange'> {
-    error?: string;
-    hint?: string;
-    required?: boolean;
-    disabled?: boolean;
-    value?: Date;
-    defaultValue?: Date;
-    options?: TimePickerOptions;
-    formatDate?: (date: Date) => string;
-    onChange?: (date: Date) => void;
-}
-declare const TimePicker: React.ForwardRefExoticComponent<TimePickerProps & React.RefAttributes<HTMLLabelElement>>;
-export default TimePicker;
+import React, { ComponentPropsWithoutRef } from 'react';
+export interface TimePickerOptions {
+    timeFormat?: '12' | '24';
+    showSeconds?: boolean;
+}
+export interface TimePickerProps extends Omit<ComponentPropsWithoutRef<'div'>, 'value' | 'defaultValue' | 'onChange'> {
+    error?: string;
+    hint?: string;
+    required?: boolean;
+    disabled?: boolean;
+    value?: Date;
+    defaultValue?: Date;
+    options?: TimePickerOptions;
+    formatDate?: (date: Date) => string;
+    onChange?: (date: Date) => void;
+}
+declare const TimePicker: React.ForwardRefExoticComponent<TimePickerProps & React.RefAttributes<HTMLDivElement>>;
+export default TimePicker;

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

@@ -0,0 +1,161 @@
+import cn from 'classnames';
+import React, { forwardRef, useCallback, useMemo, useRef, useState, useEffect } from 'react';
+import ReactDOM from 'react-dom';
+import { usePopper } from 'react-popper';
+import useForkRef from '../../helper/useForkRef';
+import useId from '../../helper/useId';
+import useOnClickOutside from '../../helper/useOnClickOutside';
+import TimePickerDropdown from './time-picker-dropdown/TimePickerDropdown';
+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 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 closeDropdown = useCallback(() => {
+    setOpen(false);
+  }, []);
+  useOnClickOutside(labelRef, closeDropdown, timePickerRef);
+  const controlled = value !== undefined;
+  const initialValue = controlled ? value : defaultValue;
+  const [innerValue, setInnerValue] = useState(initialValue ?? new Date());
+  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__*/_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("i", {
+          className: cn('fwe-icon fwe-icon-time-time', {
+            'fwe-color-hero': open,
+            '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, {
+      ref: combinedTimePickerRef,
+      onClose: handleClose,
+      onDateChange: handleDateChange,
+      timeFormat: timeFormat,
+      showSeconds: options?.showSeconds,
+      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,12 +1,12 @@
-import './TimePickerDropdown.scss';
-import React from 'react';
-interface TimePickerDropdownProps {
-    timeFormat: '12' | '24';
-    date: Date;
-    onDateChange: (date: Date) => void;
-    showSeconds?: boolean;
-    onClose: (date?: Date) => void;
-    style?: React.CSSProperties;
-}
-declare const TimePickerDropdown: React.ForwardRefExoticComponent<TimePickerDropdownProps & React.RefAttributes<HTMLDivElement>>;
-export default TimePickerDropdown;
+import './TimePickerDropdown.scss';
+import React from 'react';
+interface TimePickerDropdownProps {
+    timeFormat: '12' | '24';
+    date: Date;
+    onDateChange: (date: Date) => void;
+    showSeconds?: boolean;
+    onClose: (date?: Date) => void;
+    style?: React.CSSProperties;
+}
+declare const TimePickerDropdown: React.ForwardRefExoticComponent<TimePickerDropdownProps & React.RefAttributes<HTMLDivElement>>;
+export default TimePickerDropdown;

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

@@ -0,0 +1,213 @@
+import cn from 'classnames';
+import React, { forwardRef, useEffect, useRef, useState } from 'react';
+import useForkRef from '../../../helper/useForkRef';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const TimePickerDropdown = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    timeFormat,
+    date,
+    onDateChange,
+    showSeconds,
+    onClose,
+    style
+  } = _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);
+  const min = 0;
+  const hourMax = timeFormat === '12' ? 12 : 23;
+  const minutesSecondsMax = 59;
+  useEffect(() => {
+    requestAnimationFrame(() => {
+      hoursRef.current?.focus();
+    });
+  }, []);
+  function handleKeyPress(e) {
+    if (e.key === 'Escape' || e.key === 'Enter') {
+      onClose(e.key === 'Enter' ? innerDate : undefined);
+    }
+  }
+  function handleHourUp() {
+    const newDate = new Date(innerDate);
+    newDate.setHours(innerDate.getHours() + 1);
+    setInnerDate(newDate);
+    onDateChange(newDate);
+    setTmpHours(null);
+  }
+  function handleHourDown() {
+    const newDate = new Date(innerDate);
+    newDate.setHours(innerDate.getHours() - 1);
+    setInnerDate(newDate);
+    onDateChange(newDate);
+    setTmpHours(null);
+  }
+  function handleHourChange(e) {
+    const newDate = new Date(innerDate);
+    const hour = +e.target.value;
+    newDate.setHours(Math.min(Math.max(hour, min), hourMax));
+    setInnerDate(newDate);
+    setTmpHours(e.target.value);
+  }
+  function handleMinuteUp() {
+    const newDate = new Date(innerDate);
+    newDate.setMinutes(innerDate.getMinutes() + 1);
+    setInnerDate(newDate);
+    onDateChange(newDate);
+    setTmpMinutes(null);
+  }
+  function handleMinuteDown() {
+    const newDate = new Date(innerDate);
+    newDate.setMinutes(innerDate.getMinutes() - 1);
+    setInnerDate(newDate);
+    onDateChange(newDate);
+    setTmpMinutes(null);
+  }
+  function handleMinuteChange(e) {
+    const newDate = new Date(innerDate);
+    const minute = +e.target.value;
+    newDate.setMinutes(Math.min(Math.max(minute, min), minutesSecondsMax));
+    setInnerDate(newDate);
+    setTmpMinutes(e.target.value);
+  }
+  function handleSecondUp() {
+    const newDate = new Date(innerDate);
+    newDate.setSeconds(innerDate.getSeconds() + 1);
+    setInnerDate(newDate);
+    onDateChange(newDate);
+    setTmpSeconds(null);
+  }
+  function handleSecondDown() {
+    const newDate = new Date(innerDate);
+    newDate.setSeconds(innerDate.getSeconds() - 1);
+    setInnerDate(newDate);
+    onDateChange(newDate);
+    setTmpSeconds(null);
+  }
+  function handleSecondChange(e) {
+    const newDate = new Date(innerDate);
+    const seconds = +e.target.value;
+    newDate.setSeconds(Math.min(Math.max(seconds, min), minutesSecondsMax));
+    setInnerDate(newDate);
+    setTmpSeconds(e.target.value);
+  }
+  const hours = timeFormat === '12' ? (innerDate.getHours() + 11) % 12 + 1 : innerDate.getHours();
+  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("button", {
+            type: "button",
+            "aria-label": "hour up",
+            className: "fwe-btn fwe-btn-link fwe-dark",
+            onClick: () => handleHourUp(),
+            children: /*#__PURE__*/_jsx("i", {
+              "aria-hidden": true,
+              className: "fwe-icon fwe-icon-arrows-expand"
+            })
+          }), /*#__PURE__*/_jsx("input", {
+            "aria-label": "hours value",
+            className: "fwe-timepicker-hide-spinners",
+            type: "number",
+            min: min,
+            step: 1,
+            value: tmpHours ?? (hours < 10 ? '0' : '') + hours,
+            max: hourMax,
+            onInput: handleHourChange,
+            ref: hoursRef
+          }), /*#__PURE__*/_jsx("button", {
+            type: "button",
+            "aria-label": "hour down",
+            className: "fwe-btn fwe-btn-link fwe-dark",
+            onClick: () => handleHourDown(),
+            children: /*#__PURE__*/_jsx("i", {
+              "aria-hidden": true,
+              className: "fwe-icon fwe-icon-arrows-collapse"
+            })
+          })]
+        }), /*#__PURE__*/_jsxs("div", {
+          className: "fwe-timepicker-spinners-minutes",
+          children: [/*#__PURE__*/_jsx("button", {
+            type: "button",
+            "aria-label": "minute up",
+            className: "fwe-btn fwe-btn-link fwe-dark",
+            onClick: () => handleMinuteUp(),
+            children: /*#__PURE__*/_jsx("i", {
+              "aria-hidden": true,
+              className: "fwe-icon fwe-icon-arrows-expand"
+            })
+          }), /*#__PURE__*/_jsx("input", {
+            "aria-label": "minutes value",
+            className: "fwe-timepicker-hide-spinners",
+            type: "number",
+            min: min,
+            step: 1,
+            value: tmpMinutes ?? (innerDate.getMinutes() < 10 ? '0' : '') + innerDate.getMinutes(),
+            max: minutesSecondsMax,
+            onInput: handleMinuteChange
+          }), /*#__PURE__*/_jsx("button", {
+            type: "button",
+            "aria-label": "minute down",
+            className: "fwe-btn fwe-btn-link fwe-dark",
+            onClick: () => handleMinuteDown(),
+            children: /*#__PURE__*/_jsx("i", {
+              "aria-hidden": true,
+              className: "fwe-icon fwe-icon-arrows-collapse"
+            })
+          })]
+        }), showSeconds && /*#__PURE__*/_jsxs("div", {
+          className: "fwe-timepicker-spinners-seconds",
+          children: [/*#__PURE__*/_jsx("button", {
+            type: "button",
+            "aria-label": "seconds up",
+            className: "fwe-btn fwe-btn-link fwe-dark",
+            onClick: () => handleSecondUp(),
+            children: /*#__PURE__*/_jsx("i", {
+              "aria-hidden": true,
+              className: "fwe-icon fwe-icon-arrows-expand"
+            })
+          }), /*#__PURE__*/_jsx("input", {
+            "aria-label": "seconds value",
+            className: "fwe-timepicker-hide-spinners",
+            type: "number",
+            min: min,
+            step: 1,
+            value: tmpSeconds ?? (innerDate.getSeconds() < 10 ? '0' : '') + innerDate.getSeconds(),
+            max: minutesSecondsMax,
+            onInput: handleSecondChange
+          }), /*#__PURE__*/_jsx("button", {
+            type: "button",
+            "aria-label": "minute down",
+            className: "fwe-btn fwe-btn-link fwe-dark",
+            onClick: () => handleSecondDown(),
+            children: /*#__PURE__*/_jsx("i", {
+              "aria-hidden": true,
+              className: "fwe-icon fwe-icon-arrows-collapse"
+            })
+          })]
+        })]
+      }), timeFormat === '12' && /*#__PURE__*/_jsx("span", {
+        className: "fwe-badge fwe-badge-control",
+        children: innerDate.getHours() >= 12 ? 'PM' : 'AM'
+      })]
+    })
+  );
+});
+export default TimePickerDropdown;

package/lib/helper/index.d.ts

@@ -1,2 +1,2 @@
-export declare const provideDiv: () => HTMLDivElement;
-export default provideDiv;
+export declare const provideDiv: () => HTMLDivElement;
+export default provideDiv;

package/lib/helper/index.js

@@ -0,0 +1,7 @@
+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,2 +1,2 @@
-import React from 'react';
-export default function setRef<T>(ref: React.ForwardedRef<T>, value: any): void;
+/// <reference types="react" />
+export default function setRef<T>(ref: React.ForwardedRef<T> | undefined, value: any): void;

package/lib/helper/setRef.js

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

package/lib/helper/types.d.ts

@@ -1,7 +1,7 @@
-/// <reference types="react" />
-export interface ClassNameProps {
-    className?: string;
-}
-export interface ClassNamePropsWithChildren extends ClassNameProps {
-    children?: React.ReactNode;
-}
+/// <reference types="react" />
+export interface ClassNameProps {
+    className?: string;
+}
+export interface ClassNamePropsWithChildren extends ClassNameProps {
+    children?: React.ReactNode;
+}

package/lib/helper/types.js

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

package/lib/helper/useControlled.d.ts

@@ -1,6 +1,6 @@
-import { Dispatch, SetStateAction } from 'react';
-export interface UseControlledProps<T> {
-    controlled: T | undefined;
-    default: T | undefined;
-}
-export default function useControlled<T>({ controlled, default: defaultValue }: UseControlledProps<T>): [T, Dispatch<SetStateAction<T>>];
+import { Dispatch, SetStateAction } from 'react';
+export interface UseControlledProps<T> {
+    controlled: T | undefined;
+    default: T | undefined;
+}
+export default function useControlled<T>({ controlled, default: defaultValue, }: UseControlledProps<T>): [T | undefined, Dispatch<SetStateAction<T | undefined>>];

package/lib/helper/useControlled.js

@@ -0,0 +1,18 @@
+import { useRef, useState, useCallback } from 'react';
+export default function useControlled(_ref) {
+  let {
+    controlled,
+    default: defaultValue
+  } = _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);
+    }
+  }, [isControlled]);
+  return [value, setValueIfUncontrolled];
+}

package/lib/helper/useForkRef.d.ts

@@ -1,2 +1,2 @@
-import React from 'react';
-export default function useForkRef<T>(refA: React.Ref<T> | null | undefined, refB: React.Ref<T> | null | undefined): React.Ref<T> | null;
+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

@@ -0,0 +1,20 @@
+import React from 'react';
+import setRef from './setRef';
+
+// 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

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

package/lib/helper/useId.js

@@ -0,0 +1,21 @@
+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}`);
+    }
+  }, [setId]);
+  return id;
+}
+export default function useId(idInput) {
+  if (idInput !== undefined && idInput !== null) {
+    return idInput;
+  }
+  return maybeReactUseId ? maybeReactUseId() : useLegacyId();
+}

package/lib/helper/useOnClickOutside.d.ts

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

package/lib/helper/useOnClickOutside.js

@@ -0,0 +1,18 @@
+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);
+    document.addEventListener('touchstart', listener);
+    return () => {
+      document.removeEventListener('mousedown', listener);
+      document.removeEventListener('touchstart', listener);
+    };
+  }, [ref, ref2, callback]);
+}