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

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

@@ -0,0 +1,222 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _classnames = _interopRequireDefault(require("classnames"));
+var _react = _interopRequireWildcard(require("react"));
+var _useForkRef = _interopRequireDefault(require("../../../helper/useForkRef"));
+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 TimePickerDropdown = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    timeFormat,
+    date,
+    onDateChange,
+    showSeconds,
+    onClose,
+    style
+  } = _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);
+  const min = 0;
+  const hourMax = timeFormat === '12' ? 12 : 23;
+  const minutesSecondsMax = 59;
+  (0, _react.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
+    (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)("button", {
+            type: "button",
+            "aria-label": "hour up",
+            className: "fwe-btn fwe-btn-link fwe-dark",
+            onClick: () => handleHourUp(),
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
+              "aria-hidden": true,
+              className: "fwe-icon fwe-icon-arrows-expand"
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsx)("button", {
+            type: "button",
+            "aria-label": "hour down",
+            className: "fwe-btn fwe-btn-link fwe-dark",
+            onClick: () => handleHourDown(),
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
+              "aria-hidden": true,
+              className: "fwe-icon fwe-icon-arrows-collapse"
+            })
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "fwe-timepicker-spinners-minutes",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+            type: "button",
+            "aria-label": "minute up",
+            className: "fwe-btn fwe-btn-link fwe-dark",
+            onClick: () => handleMinuteUp(),
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
+              "aria-hidden": true,
+              className: "fwe-icon fwe-icon-arrows-expand"
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsx)("button", {
+            type: "button",
+            "aria-label": "minute down",
+            className: "fwe-btn fwe-btn-link fwe-dark",
+            onClick: () => handleMinuteDown(),
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
+              "aria-hidden": true,
+              className: "fwe-icon fwe-icon-arrows-collapse"
+            })
+          })]
+        }), showSeconds && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "fwe-timepicker-spinners-seconds",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+            type: "button",
+            "aria-label": "seconds up",
+            className: "fwe-btn fwe-btn-link fwe-dark",
+            onClick: () => handleSecondUp(),
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
+              "aria-hidden": true,
+              className: "fwe-icon fwe-icon-arrows-expand"
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsx)("button", {
+            type: "button",
+            "aria-label": "minute down",
+            className: "fwe-btn fwe-btn-link fwe-dark",
+            onClick: () => handleSecondDown(),
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
+              "aria-hidden": true,
+              className: "fwe-icon fwe-icon-arrows-collapse"
+            })
+          })]
+        })]
+      }), timeFormat === '12' && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: "fwe-badge fwe-badge-control",
+        children: innerDate.getHours() >= 12 ? 'PM' : 'AM'
+      })]
+    })
+  );
+});
+var _default = TimePickerDropdown;
+exports.default = _default;

package/node/lib/helper/index.js

@@ -0,0 +1,15 @@
+"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 = provideDiv;
+exports.default = _default;

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,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useControlled;
+var _react = require("react");
+function useControlled(_ref) {
+  let {
+    controlled,
+    default: defaultValue
+  } = _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);
+    }
+  }, [isControlled]);
+  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"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+// 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,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useId;
+var _react = _interopRequireDefault(require("react"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+// 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}`);
+    }
+  }, [setId]);
+  return id;
+}
+function useId(idInput) {
+  if (idInput !== undefined && idInput !== null) {
+    return idInput;
+  }
+  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);
+    document.addEventListener('touchstart', listener);
+    return () => {
+      document.removeEventListener('mousedown', listener);
+      document.removeEventListener('touchstart', listener);
+    };
+  }, [ref, ref2, callback]);
+}

package/package.json

@@ -1,29 +1,39 @@
 {
   "name": "@festo-ui/react",
-  "version": "4.0.3-pre-20221213.1",
+  "version": "5.0.0-dev.72",
   "author": "Festo UI (styleguide@festo.com)",
   "license": "apache-2.0",
   "peerDependencies": {
+    "@festo-ui/web-essentials": "*",
     "react": "^17.0.0 || ^18.0.0",
-    "react-dom": "^17.0.0 || ^18.0.0",
-    "@festo-ui/web-essentials": "*"
+    "react-dom": "^17.0.0 || ^18.0.0"
   },
   "sideEffects": [
     "*.scss",
     "*.css"
   ],
   "module": "./index.js",
-  "main": "./index.js",
+  "main": "./node/index.js",
   "types": "./index.d.ts",
   "dependencies": {
+    "@popperjs/core": "^2.11.0",
+    "@types/quill": "^2.0.10",
     "classnames": "^2.2.6",
-    "react-transition-group": "^4.4.2",
+    "flatpickr": "^4.6.9",
+    "quill": "1.3.7",
+    "react-draggable": "^4.4.4",
     "react-outside-click-handler": "^1.3.0",
     "react-popper": "^2.3.0",
-    "@popperjs/core": "^2.11.0",
-    "react-draggable": "^4.4.4",
-    "flatpickr": "^4.6.9",
-    "xss": "^1.0.10",
-    "quill": "1.3.7"
+    "react-transition-group": "^4.4.2",
+    "sass": "^1.57.1",
+    "xss": "^1.0.10"
+  },
+  "browserslist": [
+    "defaults"
+  ],
+  "postcss": {
+    "plugins": {
+      "autoprefixer": {}
+    }
   }
 }

package/README.md

@@ -1,17 +0,0 @@
-# FESTO UI
-
-## React Component Library
-
-### Installation
-
-To install Festo React, run:
-
-`npm install @festo-ui/react @festo-ui/web-essentials`
-
-### Stylesheets
-
-```js
-/* The following lines should be included in your src/index.js or App.js file*/
-import '@festo-ui/web-essentials/dist/css/festo-web-essentials.min.css';
-import '@festo-ui/react/index.css';
-```