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

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

@@ -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

@@ -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

@@ -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

@@ -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/text-editor/TextEditor.js

@@ -3,8 +3,8 @@ import classNames from 'classnames';
 import TextEditorButton from './TextEditorButton';
 import useId from '../../helper/useId';
 import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 const xss = require('xss');
 const defaultConfig = {
   toolbar: {
@@ -146,31 +146,12 @@ function TextEditor(_ref) {
       disabled
     }),
     htmlFor: `editor-label-${id}`,
-    children: [/*#__PURE__*/_jsxs("div", {
+    children: [/*#__PURE__*/_jsx("div", {
       className: classNames('fwe-editor-toolbar', {
         [`fwe-editor-toolbar-${className}`]: className
       }),
       id: `editor-toolbar-${id}`,
-      children: [/*#__PURE__*/_jsx("span", {
-        className: "ql-formats fwe-d-none",
-        children: /*#__PURE__*/_jsxs("select", {
-          className: "ql-size",
-          "aria-hidden": "true",
-          children: [/*#__PURE__*/_jsx("option", {
-            value: "small",
-            "aria-label": "small"
-          }), /*#__PURE__*/_jsx("option", {
-            selected: true,
-            "aria-label": "selected"
-          }), /*#__PURE__*/_jsx("option", {
-            value: "large",
-            "aria-label": "large"
-          }), /*#__PURE__*/_jsx("option", {
-            value: "huge",
-            "aria-label": "huge"
-          })]
-        })
-      }), /*#__PURE__*/_jsxs("span", {
+      children: /*#__PURE__*/_jsxs("span", {
         className: "ql-formats fwe-mr-3",
         children: [config?.toolbar?.bold && /*#__PURE__*/_jsx(TextEditorButton, {
           disabled: disabled,
@@ -242,7 +223,7 @@ function TextEditor(_ref) {
             noAction: true
           })]
         })]
-      })]
+      })
     }), /*#__PURE__*/_jsx("div", {
       className: classNames('fwe-editor-container', {
         'fwe-editor-container--error': error

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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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/text-editor/TextEditor.js

@@ -151,31 +151,12 @@ function TextEditor(_ref) {
       disabled
     }),
     htmlFor: `editor-label-${id}`,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: (0, _classnames.default)('fwe-editor-toolbar', {
         [`fwe-editor-toolbar-${className}`]: className
       }),
       id: `editor-toolbar-${id}`,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-        className: "ql-formats fwe-d-none",
-        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("select", {
-          className: "ql-size",
-          "aria-hidden": "true",
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
-            value: "small",
-            "aria-label": "small"
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
-            selected: true,
-            "aria-label": "selected"
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
-            value: "large",
-            "aria-label": "large"
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
-            value: "huge",
-            "aria-label": "huge"
-          })]
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
         className: "ql-formats fwe-mr-3",
         children: [config?.toolbar?.bold && /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextEditorButton.default, {
           disabled: disabled,
@@ -247,7 +228,7 @@ function TextEditor(_ref) {
             noAction: true
           })]
         })]
-      })]
+      })
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: (0, _classnames.default)('fwe-editor-container', {
         'fwe-editor-container--error': error

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

@@ -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

@@ -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

@@ -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

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