npm - @festo-ui/react - Versions diffs - 6.0.0-dev.215 → 6.0.0-dev.217 - Mend

@festo-ui/react 6.0.0-dev.215 → 6.0.0-dev.217

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (15) hide show

package/lib/components/buttons/button/Button.d.ts CHANGED Viewed

@@ -1,12 +1,10 @@
-import React from 'react';
-import { ClassNamePropsWithChildren } from '../../../helper/types';
-interface ButtonProps extends ClassNamePropsWithChildren {
+import { ComponentPropsWithoutRef } from 'react';
+interface ButtonProps extends ComponentPropsWithoutRef<'button'> {
     icon?: string;
     disabled?: boolean;
     primary?: boolean;
     iconOnly?: boolean;
     large?: boolean;
-    onClick: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
 }
-declare function Button({ icon, disabled, iconOnly, large, onClick, primary, className, children, }: ButtonProps): JSX.Element;
+declare const Button: (props: ButtonProps & import("react").RefAttributes<HTMLButtonElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;
 export default Button;

package/lib/components/buttons/button/Button.js CHANGED Viewed

@@ -1,8 +1,8 @@
 import classNames from 'classnames';
-import React from 'react';
+import { forwardRef } from 'react';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-function Button(_ref) {
+const Button = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
     icon,
     disabled = false,
@@ -11,7 +11,8 @@ function Button(_ref) {
     onClick,
     primary = false,
     className,
-    children
+    children,
+    ...props
   } = _ref;
   const classes = classNames('fwe-btn', 'fr-button', {
     'fwe-btn-icon': iconOnly
@@ -27,11 +28,13 @@ function Button(_ref) {
     onClick: onClick,
     className: classes,
     disabled: disabled,
+    ref: ref,
+    ...props,
     children: [icon && /*#__PURE__*/_jsx("i", {
       className: `fwe-icon fwe-icon-${icon}`
     }), !iconOnly && /*#__PURE__*/_jsx("div", {
       children: children
     })]
   });
-}
+});
 export default Button;

package/lib/components/link-button/LinkButton.d.ts CHANGED Viewed

@@ -1,10 +1,9 @@
-/// <reference types="react" />
-import { ClassNamePropsWithChildren } from '../../helper/types';
-interface LinkButtonProps extends ClassNamePropsWithChildren {
+import { ComponentPropsWithoutRef } from 'react';
+interface LinkButtonProps extends ComponentPropsWithoutRef<'button'> {
     disabled?: boolean;
-    icon?: string;
+    icon?: React.ReactNode;
     onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
     iconOnly?: boolean;
 }
-declare function LinkButton({ icon, onClick, disabled, children, iconOnly, className, }: LinkButtonProps): JSX.Element;
+declare const LinkButton: (props: LinkButtonProps & import("react").RefAttributes<HTMLButtonElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;
 export default LinkButton;

package/lib/components/link-button/LinkButton.js CHANGED Viewed

@@ -1,26 +1,38 @@
 import classNames from 'classnames';
+import { forwardRef } from 'react';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-function LinkButton(_ref) {
+const LinkButton = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
     icon,
     onClick,
     disabled = false,
     children,
     iconOnly = false,
-    className
+    className,
+    ...props
   } = _ref;
   const classes = classNames('fwe-btn', 'fwe-btn-link', {
     'fwe-disabled': disabled
   }, className);
+  let innerIcon;
+  if (icon) {
+    if (typeof icon === 'string') {
+      innerIcon = /*#__PURE__*/_jsx("i", {
+        className: `fwe-icon fwe-icon-${icon}`
+      });
+    } else {
+      innerIcon = icon;
+    }
+  }
   return /*#__PURE__*/_jsxs("button", {
     onClick: onClick,
     type: "button",
     className: classes,
     disabled: disabled,
-    children: [/*#__PURE__*/_jsx("i", {
-      className: `fwe-icon fwe-icon-${icon}`
-    }), !iconOnly && children]
+    ref: ref,
+    ...props,
+    children: [innerIcon, !iconOnly && children]
   });
-}
+});
 export default LinkButton;

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

@@ -1,10 +1,9 @@
 import cn from 'classnames';
-import React, { forwardRef, useCallback, useMemo, useRef, useState, useEffect } from 'react';
+import React, { forwardRef, 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";
@@ -61,10 +60,6 @@ export const TimePicker = /*#__PURE__*/forwardRef((_ref, ref) => {
   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());
@@ -144,6 +139,7 @@ export const TimePicker = /*#__PURE__*/forwardRef((_ref, ref) => {
         })]
       })
     }), open && /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/_jsx(TimePickerDropdown, {
+      labelRef: labelRef,
       ref: combinedTimePickerRef,
       onClose: handleClose,
       onDateChange: handleDateChange,

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

@@ -1,5 +1,5 @@
 import './TimePickerDropdown.scss';
-import React from 'react';
+import React, { RefObject } from 'react';
 interface TimePickerDropdownProps {
     timeFormat: '12' | '24';
     date: Date;
@@ -7,6 +7,7 @@ interface TimePickerDropdownProps {
     showSeconds?: boolean;
     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 CHANGED Viewed

@@ -1,6 +1,9 @@
 import cn from 'classnames';
 import React, { forwardRef, useEffect, useRef, useState } from 'react';
 import useForkRef from '../../../helper/useForkRef';
+import LinkButton from '../../../components/link-button/LinkButton';
+import TimePickerInput from './TimePickerInput';
+import useOnClickOutside from '../../../helper/useOnClickOutside';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const TimePickerDropdown = /*#__PURE__*/forwardRef((_ref, ref) => {
@@ -10,7 +13,8 @@ const TimePickerDropdown = /*#__PURE__*/forwardRef((_ref, ref) => {
     onDateChange,
     showSeconds,
     onClose,
-    style
+    style,
+    labelRef
   } = _ref;
   const innerRef = useRef(null);
   const combinedRef = useForkRef(ref, innerRef);
@@ -19,6 +23,7 @@ const TimePickerDropdown = /*#__PURE__*/forwardRef((_ref, ref) => {
   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;
@@ -32,16 +37,9 @@ const TimePickerDropdown = /*#__PURE__*/forwardRef((_ref, ref) => {
       onClose(e.key === 'Enter' ? innerDate : undefined);
     }
   }
-  function handleHourUp() {
+  function handleHourIncrement(increment) {
     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);
+    newDate.setHours(innerDate.getHours() + increment);
     setInnerDate(newDate);
     onDateChange(newDate);
     setTmpHours(null);
@@ -53,16 +51,9 @@ const TimePickerDropdown = /*#__PURE__*/forwardRef((_ref, ref) => {
     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() {
+  function handleMinuteIncrement(increment) {
     const newDate = new Date(innerDate);
-    newDate.setMinutes(innerDate.getMinutes() - 1);
+    newDate.setMinutes(innerDate.getMinutes() + increment);
     setInnerDate(newDate);
     onDateChange(newDate);
     setTmpMinutes(null);
@@ -74,16 +65,9 @@ const TimePickerDropdown = /*#__PURE__*/forwardRef((_ref, ref) => {
     setInnerDate(newDate);
     setTmpMinutes(e.target.value);
   }
-  function handleSecondUp() {
+  function handleSecondIncrement(increment) {
     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);
+    newDate.setSeconds(innerDate.getSeconds() + increment);
     setInnerDate(newDate);
     onDateChange(newDate);
     setTmpSeconds(null);
@@ -96,6 +80,21 @@ const TimePickerDropdown = /*#__PURE__*/forwardRef((_ref, ref) => {
     setTmpSeconds(e.target.value);
   }
   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
@@ -113,98 +112,85 @@ const TimePickerDropdown = /*#__PURE__*/forwardRef((_ref, ref) => {
         className: "fwe-timepicker-spinners",
         children: [/*#__PURE__*/_jsxs("div", {
           className: "fwe-timepicker-spinners-hours",
-          children: [/*#__PURE__*/_jsx("button", {
-            type: "button",
+          children: [/*#__PURE__*/_jsx(LinkButton, {
             "aria-label": "hour up",
-            className: "fwe-btn fwe-btn-link fwe-dark",
-            onClick: () => handleHourUp(),
-            children: /*#__PURE__*/_jsx("i", {
+            className: "fwe-dark",
+            onClick: () => handleHourIncrement(1),
+            icon: /*#__PURE__*/_jsx("i", {
               "aria-hidden": true,
               className: "fwe-icon fwe-icon-arrows-expand"
             })
-          }), /*#__PURE__*/_jsx("input", {
+          }), /*#__PURE__*/_jsx(TimePickerInput, {
             "aria-label": "hours value",
-            className: "fwe-timepicker-hide-spinners",
-            type: "number",
             min: min,
-            step: 1,
-            value: tmpHours ?? (hours < 10 ? '0' : '') + hours,
             max: hourMax,
+            value: tmpHours ?? formatNumberWithLeadingZero(hours),
             onInput: handleHourChange,
             ref: hoursRef
-          }), /*#__PURE__*/_jsx("button", {
-            type: "button",
+          }), /*#__PURE__*/_jsx(LinkButton, {
             "aria-label": "hour down",
-            className: "fwe-btn fwe-btn-link fwe-dark",
-            onClick: () => handleHourDown(),
-            children: /*#__PURE__*/_jsx("i", {
+            className: "fwe-dark",
+            onClick: () => handleHourIncrement(-1),
+            icon: /*#__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",
+          children: [/*#__PURE__*/_jsx(LinkButton, {
             "aria-label": "minute up",
-            className: "fwe-btn fwe-btn-link fwe-dark",
-            onClick: () => handleMinuteUp(),
-            children: /*#__PURE__*/_jsx("i", {
+            className: "fwe-dark",
+            onClick: () => handleMinuteIncrement(1),
+            icon: /*#__PURE__*/_jsx("i", {
               "aria-hidden": true,
               className: "fwe-icon fwe-icon-arrows-expand"
             })
-          }), /*#__PURE__*/_jsx("input", {
+          }), /*#__PURE__*/_jsx(TimePickerInput, {
             "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,
+            value: tmpMinutes ?? formatNumberWithLeadingZero(innerDate.getMinutes()),
             onInput: handleMinuteChange
-          }), /*#__PURE__*/_jsx("button", {
-            type: "button",
+          }), /*#__PURE__*/_jsx(LinkButton, {
             "aria-label": "minute down",
-            className: "fwe-btn fwe-btn-link fwe-dark",
-            onClick: () => handleMinuteDown(),
-            children: /*#__PURE__*/_jsx("i", {
+            className: "fwe-dark",
+            onClick: () => handleMinuteIncrement(-1),
+            icon: /*#__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",
+          children: [/*#__PURE__*/_jsx(LinkButton, {
             "aria-label": "seconds up",
-            className: "fwe-btn fwe-btn-link fwe-dark",
-            onClick: () => handleSecondUp(),
-            children: /*#__PURE__*/_jsx("i", {
+            className: "fwe-dark",
+            onClick: () => handleSecondIncrement(1),
+            icon: /*#__PURE__*/_jsx("i", {
               "aria-hidden": true,
               className: "fwe-icon fwe-icon-arrows-expand"
             })
-          }), /*#__PURE__*/_jsx("input", {
+          }), /*#__PURE__*/_jsx(TimePickerInput, {
             "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,
+            value: tmpSeconds ?? formatNumberWithLeadingZero(innerDate.getSeconds()),
             onInput: handleSecondChange
-          }), /*#__PURE__*/_jsx("button", {
-            type: "button",
+          }), /*#__PURE__*/_jsx(LinkButton, {
             "aria-label": "minute down",
-            className: "fwe-btn fwe-btn-link fwe-dark",
-            onClick: () => handleSecondDown(),
-            children: /*#__PURE__*/_jsx("i", {
+            className: "fwe-dark",
+            onClick: () => handleSecondIncrement(-1),
+            icon: /*#__PURE__*/_jsx("i", {
               "aria-hidden": true,
               className: "fwe-icon fwe-icon-arrows-collapse"
             })
           })]
         })]
-      }), timeFormat === '12' && /*#__PURE__*/_jsx("span", {
-        className: "fwe-badge fwe-badge-control",
+      }), timeFormat === '12' && /*#__PURE__*/_jsx("button", {
+        onClick: toggleAmPm,
+        type: "button",
+        className: "fwe-btn fwe-ml-m",
         children: innerDate.getHours() >= 12 ? 'PM' : 'AM'
       })]
     })

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

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+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 ADDED Viewed

@@ -0,0 +1,23 @@
+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/node/lib/components/buttons/button/Button.js CHANGED Viewed

@@ -5,10 +5,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _classnames = _interopRequireDefault(require("classnames"));
-var _react = _interopRequireDefault(require("react"));
+var _react = require("react");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function Button(_ref) {
+const Button = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   let {
     icon,
     disabled = false,
@@ -17,7 +17,8 @@ function Button(_ref) {
     onClick,
     primary = false,
     className,
-    children
+    children,
+    ...props
   } = _ref;
   const classes = (0, _classnames.default)('fwe-btn', 'fr-button', {
     'fwe-btn-icon': iconOnly
@@ -33,11 +34,13 @@ function Button(_ref) {
     onClick: onClick,
     className: classes,
     disabled: disabled,
+    ref: ref,
+    ...props,
     children: [icon && /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
       className: `fwe-icon fwe-icon-${icon}`
     }), !iconOnly && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       children: children
     })]
   });
-}
+});
 var _default = exports.default = Button;

package/node/lib/components/link-button/LinkButton.js CHANGED Viewed

@@ -5,28 +5,40 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _classnames = _interopRequireDefault(require("classnames"));
+var _react = require("react");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function LinkButton(_ref) {
+const LinkButton = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   let {
     icon,
     onClick,
     disabled = false,
     children,
     iconOnly = false,
-    className
+    className,
+    ...props
   } = _ref;
   const classes = (0, _classnames.default)('fwe-btn', 'fwe-btn-link', {
     'fwe-disabled': disabled
   }, className);
+  let innerIcon;
+  if (icon) {
+    if (typeof icon === 'string') {
+      innerIcon = /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
+        className: `fwe-icon fwe-icon-${icon}`
+      });
+    } else {
+      innerIcon = icon;
+    }
+  }
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
     onClick: onClick,
     type: "button",
     className: classes,
     disabled: disabled,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
-      className: `fwe-icon fwe-icon-${icon}`
-    }), !iconOnly && children]
+    ref: ref,
+    ...props,
+    children: [innerIcon, !iconOnly && children]
   });
-}
+});
 var _default = exports.default = LinkButton;

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

@@ -10,7 +10,6 @@ var _reactDom = _interopRequireDefault(require("react-dom"));
 var _reactPopper = require("react-popper");
 var _useForkRef = _interopRequireDefault(require("../../helper/useForkRef"));
 var _useId = _interopRequireDefault(require("../../helper/useId"));
-var _useOnClickOutside = _interopRequireDefault(require("../../helper/useOnClickOutside"));
 var _TimePickerDropdown = _interopRequireDefault(require("./time-picker-dropdown/TimePickerDropdown"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
@@ -68,10 +67,6 @@ const TimePicker = exports.TimePicker = /*#__PURE__*/(0, _react.forwardRef)((_re
   const timePickerRef = (0, _react.useRef)(null);
   const combinedTimePickerRef = (0, _useForkRef.default)(timePickerRef, r => setPopperElement(r));
   const [open, setOpen] = (0, _react.useState)(false);
-  const closeDropdown = (0, _react.useCallback)(() => {
-    setOpen(false);
-  }, []);
-  (0, _useOnClickOutside.default)(labelRef, closeDropdown, timePickerRef);
   const controlled = value !== undefined;
   const initialValue = controlled ? value : defaultValue;
   const [innerValue, setInnerValue] = (0, _react.useState)(initialValue ?? new Date());
@@ -151,6 +146,7 @@ const TimePicker = exports.TimePicker = /*#__PURE__*/(0, _react.forwardRef)((_re
         })]
       })
     }), open && /*#__PURE__*/_reactDom.default.createPortal( /*#__PURE__*/(0, _jsxRuntime.jsx)(_TimePickerDropdown.default, {
+      labelRef: labelRef,
       ref: combinedTimePickerRef,
       onClose: handleClose,
       onDateChange: handleDateChange,

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

@@ -7,6 +7,9 @@ exports.default = void 0;
 var _classnames = _interopRequireDefault(require("classnames"));
 var _react = _interopRequireWildcard(require("react"));
 var _useForkRef = _interopRequireDefault(require("../../../helper/useForkRef"));
+var _LinkButton = _interopRequireDefault(require("../../../components/link-button/LinkButton"));
+var _TimePickerInput = _interopRequireDefault(require("./TimePickerInput"));
+var _useOnClickOutside = _interopRequireDefault(require("../../../helper/useOnClickOutside"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -18,7 +21,8 @@ const TimePickerDropdown = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     onDateChange,
     showSeconds,
     onClose,
-    style
+    style,
+    labelRef
   } = _ref;
   const innerRef = (0, _react.useRef)(null);
   const combinedRef = (0, _useForkRef.default)(ref, innerRef);
@@ -27,6 +31,7 @@ const TimePickerDropdown = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   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;
@@ -40,16 +45,9 @@ const TimePickerDropdown = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
       onClose(e.key === 'Enter' ? innerDate : undefined);
     }
   }
-  function handleHourUp() {
+  function handleHourIncrement(increment) {
     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);
+    newDate.setHours(innerDate.getHours() + increment);
     setInnerDate(newDate);
     onDateChange(newDate);
     setTmpHours(null);
@@ -61,16 +59,9 @@ const TimePickerDropdown = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     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() {
+  function handleMinuteIncrement(increment) {
     const newDate = new Date(innerDate);
-    newDate.setMinutes(innerDate.getMinutes() - 1);
+    newDate.setMinutes(innerDate.getMinutes() + increment);
     setInnerDate(newDate);
     onDateChange(newDate);
     setTmpMinutes(null);
@@ -82,16 +73,9 @@ const TimePickerDropdown = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     setInnerDate(newDate);
     setTmpMinutes(e.target.value);
   }
-  function handleSecondUp() {
+  function handleSecondIncrement(increment) {
     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);
+    newDate.setSeconds(innerDate.getSeconds() + increment);
     setInnerDate(newDate);
     onDateChange(newDate);
     setTmpSeconds(null);
@@ -104,6 +88,21 @@ const TimePickerDropdown = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     setTmpSeconds(e.target.value);
   }
   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
@@ -121,98 +120,85 @@ const TimePickerDropdown = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
         className: "fwe-timepicker-spinners",
         children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
           className: "fwe-timepicker-spinners-hours",
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
-            type: "button",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_LinkButton.default, {
             "aria-label": "hour up",
-            className: "fwe-btn fwe-btn-link fwe-dark",
-            onClick: () => handleHourUp(),
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
+            className: "fwe-dark",
+            onClick: () => handleHourIncrement(1),
+            icon: /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
               "aria-hidden": true,
               className: "fwe-icon fwe-icon-arrows-expand"
             })
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TimePickerInput.default, {
             "aria-label": "hours value",
-            className: "fwe-timepicker-hide-spinners",
-            type: "number",
             min: min,
-            step: 1,
-            value: tmpHours ?? (hours < 10 ? '0' : '') + hours,
             max: hourMax,
+            value: tmpHours ?? formatNumberWithLeadingZero(hours),
             onInput: handleHourChange,
             ref: hoursRef
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
-            type: "button",
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_LinkButton.default, {
             "aria-label": "hour down",
-            className: "fwe-btn fwe-btn-link fwe-dark",
-            onClick: () => handleHourDown(),
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
+            className: "fwe-dark",
+            onClick: () => handleHourIncrement(-1),
+            icon: /*#__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",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_LinkButton.default, {
             "aria-label": "minute up",
-            className: "fwe-btn fwe-btn-link fwe-dark",
-            onClick: () => handleMinuteUp(),
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
+            className: "fwe-dark",
+            onClick: () => handleMinuteIncrement(1),
+            icon: /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
               "aria-hidden": true,
               className: "fwe-icon fwe-icon-arrows-expand"
             })
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TimePickerInput.default, {
             "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,
+            value: tmpMinutes ?? formatNumberWithLeadingZero(innerDate.getMinutes()),
             onInput: handleMinuteChange
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
-            type: "button",
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_LinkButton.default, {
             "aria-label": "minute down",
-            className: "fwe-btn fwe-btn-link fwe-dark",
-            onClick: () => handleMinuteDown(),
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
+            className: "fwe-dark",
+            onClick: () => handleMinuteIncrement(-1),
+            icon: /*#__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",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_LinkButton.default, {
             "aria-label": "seconds up",
-            className: "fwe-btn fwe-btn-link fwe-dark",
-            onClick: () => handleSecondUp(),
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
+            className: "fwe-dark",
+            onClick: () => handleSecondIncrement(1),
+            icon: /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
               "aria-hidden": true,
               className: "fwe-icon fwe-icon-arrows-expand"
             })
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TimePickerInput.default, {
             "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,
+            value: tmpSeconds ?? formatNumberWithLeadingZero(innerDate.getSeconds()),
             onInput: handleSecondChange
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
-            type: "button",
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_LinkButton.default, {
             "aria-label": "minute down",
-            className: "fwe-btn fwe-btn-link fwe-dark",
-            onClick: () => handleSecondDown(),
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
+            className: "fwe-dark",
+            onClick: () => handleSecondIncrement(-1),
+            icon: /*#__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",
+      }), timeFormat === '12' && /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+        onClick: toggleAmPm,
+        type: "button",
+        className: "fwe-btn fwe-ml-m",
         children: innerDate.getHours() >= 12 ? 'PM' : 'AM'
       })]
     })

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

@@ -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/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@festo-ui/react",
-  "version": "6.0.0-dev.215",
+  "version": "6.0.0-dev.217",
   "author": "Festo UI (styleguide@festo.com)",
   "license": "apache-2.0",
   "exports": {