@festo-ui/react 9.0.0-dev.679 → 9.0.0-dev.683

package/lib/components/popovers/tooltip/Tooltip.js

@@ -1,60 +1,18 @@
-import { useRef, useState } from "react";
-import { usePopper } from "react-popper";
-import classNames from "classnames";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Popover from "../popover/Popover.js";
+import { jsx as _jsx } from "react/jsx-runtime";
 function Tooltip(_ref) {
   let {
-    children,
-    className,
     title,
-    position = "bottom"
+    ...props
   } = _ref;
-  const [showPopper, setShowPopper] = useState(false);
-  const referenceElement = useRef(null);
-  const [popperElement, setPopperElement] = useState(null);
-  const [arrowElement, setArrowElement] = useState(null);
-  const {
-    styles,
-    attributes
-  } = usePopper(referenceElement.current, popperElement, {
-    placement: position,
-    modifiers: [{
-      name: "arrow",
-      options: {
-        element: arrowElement
-      }
-    }, {
-      name: "offset",
-      options: {
-        offset: [0, 24]
-      }
-    }, {
-      name: "flip",
-      options: {
-        fallbackPlacements: ["right", "left", "top"]
-      }
-    }]
-  });
-  return /*#__PURE__*/_jsxs("div", {
-    className: classNames("fr-tooltip-container", className),
-    ref: referenceElement,
-    onMouseEnter: () => setShowPopper(true),
-    onMouseLeave: () => setShowPopper(false),
-    children: [children, showPopper && /*#__PURE__*/_jsxs("div", {
-      className: "fwe-popover-container",
-      id: "tooltip",
-      ref: setPopperElement,
-      style: styles.popper,
-      ...attributes.popper,
-      children: [/*#__PURE__*/_jsx("div", {
-        ref: setArrowElement,
-        style: styles.arrow,
-        id: "arrow"
-      }), /*#__PURE__*/_jsx("div", {
-        className: "fwe-popover",
-        children: title
-      })]
-    })]
+  return /*#__PURE__*/_jsx(Popover, {
+    position: "bottom",
+    popoverContent: /*#__PURE__*/_jsx("span", {
+      children: title
+    }),
+    openOnHover: true,
+    ...props,
+    children: props.children
   });
 }
 export default Tooltip;

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: (event: MouseEvent | TouchEvent) => void, ref2?: RefObject<T>): void;
+import { type RefObject } from "react";
+export default function useOnClickOutside(ref: RefObject<HTMLElement>, callback: (event: MouseEvent | TouchEvent) => void, ref2?: RefObject<HTMLElement>): void;

package/node/index.js

@@ -99,18 +99,6 @@ Object.defineProperty(exports, "ChipType", {
     return _Chip.ChipType;
   }
 });
-Object.defineProperty(exports, "ColorIndicator", {
-  enumerable: true,
-  get: function () {
-    return _ColorIndicator.default;
-  }
-});
-Object.defineProperty(exports, "ColorPicker", {
-  enumerable: true,
-  get: function () {
-    return _ColorPicker.default;
-  }
-});
 Object.defineProperty(exports, "ConfirmModal", {
   enumerable: true,
   get: function () {
@@ -123,18 +111,6 @@ Object.defineProperty(exports, "CustomModal", {
     return _CustomModal.default;
   }
 });
-Object.defineProperty(exports, "DatePicker", {
-  enumerable: true,
-  get: function () {
-    return _DatePicker.default;
-  }
-});
-Object.defineProperty(exports, "DateRangePicker", {
-  enumerable: true,
-  get: function () {
-    return _DateRangePicker.default;
-  }
-});
 Object.defineProperty(exports, "ImageGallery", {
   enumerable: true,
   get: function () {
@@ -213,6 +189,24 @@ Object.defineProperty(exports, "PopoverMenu", {
     return _PopoverMenu.default;
   }
 });
+Object.defineProperty(exports, "PopoverMenuContext", {
+  enumerable: true,
+  get: function () {
+    return _PopoverMenuContext.default;
+  }
+});
+Object.defineProperty(exports, "PopoverMenuItem", {
+  enumerable: true,
+  get: function () {
+    return _PopoverMenuItem.default;
+  }
+});
+Object.defineProperty(exports, "PopoverMenuItemProps", {
+  enumerable: true,
+  get: function () {
+    return _PopoverMenuItem.PopoverMenuItemProps;
+  }
+});
 Object.defineProperty(exports, "Progress", {
   enumerable: true,
   get: function () {
@@ -357,12 +351,6 @@ Object.defineProperty(exports, "TextArea", {
     return _TextArea.default;
   }
 });
-Object.defineProperty(exports, "TextEditor", {
-  enumerable: true,
-  get: function () {
-    return _TextEditor.default;
-  }
-});
 Object.defineProperty(exports, "TextInput", {
   enumerable: true,
   get: function () {
@@ -421,7 +409,9 @@ var _ImageGalleryThumbsSwiper = _interopRequireDefault(require("./lib/components
 var _ImageGalleryItem = _interopRequireDefault(require("./lib/components/modals/image-gallery/image-gallery-item/ImageGalleryItem.js"));
 var _Prompt = _interopRequireDefault(require("./lib/components/modals/Prompt.js"));
 var _Pagination = _interopRequireDefault(require("./lib/components/pagination/Pagination.js"));
+var _PopoverMenuContext = _interopRequireDefault(require("./lib/components/popovers/popover-menu/PopoverMenuContext.js"));
 var _PopoverMenu = _interopRequireDefault(require("./lib/components/popovers/popover-menu/PopoverMenu.js"));
+var _PopoverMenuItem = _interopRequireWildcard(require("./lib/components/popovers/popover-menu-item/PopoverMenuItem.js"));
 var _Popover = _interopRequireDefault(require("./lib/components/popovers/popover/Popover.js"));
 var _Tooltip = _interopRequireDefault(require("./lib/components/popovers/tooltip/Tooltip.js"));
 var _Progress = _interopRequireDefault(require("./lib/components/progress/Progress.js"));
@@ -438,10 +428,6 @@ var _TabPane = _interopRequireDefault(require("./lib/components/tab/tab-pane/Tab
 var _Tabs = _interopRequireDefault(require("./lib/components/tab/Tabs.js"));
 var _TableHeaderCell = _interopRequireDefault(require("./lib/components/table-header-cell/TableHeaderCell.js"));
 var _Checkbox = _interopRequireDefault(require("./lib/forms/checkbox/Checkbox.js"));
-var _ColorIndicator = _interopRequireDefault(require("./lib/forms/color-indicator/ColorIndicator.js"));
-var _ColorPicker = _interopRequireDefault(require("./lib/forms/color-picker/ColorPicker.js"));
-var _DatePicker = _interopRequireDefault(require("./lib/forms/date-picker/DatePicker.js"));
-var _DateRangePicker = _interopRequireDefault(require("./lib/forms/date-range-picker/DateRangePicker.js"));
 var _RadioButton = _interopRequireDefault(require("./lib/forms/radio/RadioButton.js"));
 var _RadioGroup = _interopRequireDefault(require("./lib/forms/radio/RadioGroup.js"));
 var _ScrollArea = _interopRequireDefault(require("./lib/components/scroll-area/ScrollArea.js"));
@@ -452,7 +438,6 @@ var _SelectOption = _interopRequireDefault(require("./lib/forms/select/select-op
 var _Slider = _interopRequireDefault(require("./lib/forms/slider/Slider.js"));
 var _Switch = _interopRequireDefault(require("./lib/forms/switch/Switch.js"));
 var _TextArea = _interopRequireDefault(require("./lib/forms/text-area/TextArea.js"));
-var _TextEditor = _interopRequireDefault(require("./lib/forms/text-editor/TextEditor.js"));
 var _TextInput = _interopRequireDefault(require("./lib/forms/text-input/TextInput.js"));
 var _TimePicker = _interopRequireDefault(require("./lib/forms/time-picker/TimePicker.js"));
 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); }

package/node/lib/components/popovers/popover/Popover.js

@@ -20,6 +20,7 @@ function Popover(_ref) {
     children,
     position,
     fallbackPositions,
+    openOnHover = false,
     defaultOpen = false,
     open,
     onStatusChange,
@@ -96,7 +97,10 @@ function Popover(_ref) {
       handleChange(event, !showPopper);
     }
   }
-  const childrenWrapper = /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+  const childrenWrapper =
+  /*#__PURE__*/
+  // biome-ignore lint/a11y/useSemanticElements: since a button in button is wrong, we need a div with click handler here. 
+  (0, _jsxRuntime.jsx)("div", {
     tabIndex: 0,
     role: "button",
     className: classes,
@@ -104,6 +108,8 @@ function Popover(_ref) {
     onKeyDown: handleKeyDown,
     onKeyUp: handleKeyUp,
     onClick: handleTriggerClick,
+    onMouseEnter: openOnHover ? e => handleChange(e, true) : undefined,
+    onMouseLeave: openOnHover ? e => handleChange(e, false) : undefined,
     children: children
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {

package/node/lib/components/popovers/popover-menu/PopoverMenu.js

@@ -7,56 +7,45 @@ exports.default = void 0;
 var _react = require("react");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _Popover = _interopRequireDefault(require("../popover/Popover.js"));
-var _IconWrapper = _interopRequireDefault(require("../../icon-wrapper/IconWrapper.js"));
+var _PopoverMenuItem = _interopRequireDefault(require("../popover-menu-item/PopoverMenuItem.js"));
+var _PopoverMenuContext = _interopRequireDefault(require("./PopoverMenuContext.js"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function PopoverMenu(_ref) {
   let {
-    children,
     menu,
-    className,
     ...props
   } = _ref;
   const [showPopper, setShowPopper] = (0, _react.useState)(false);
-  const handleClick = (e, item) => {
-    if (props.stopPropagation) {
-      e?.stopPropagation();
-      e?.preventDefault();
-    }
-    if (item.action) {
-      item.action(item.data);
-    }
-    setShowPopper(false);
-  };
-  const content = /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
-    className: "fwe-list-group",
-    children: menu.map(item => /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
-      className: "fwe-list-group-item",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
-        type: "button",
-        className: "fwe-btn fwe-btn-link fwe-dark",
-        onClick: e => handleClick(e, item),
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_IconWrapper.default, {
-          icon: item.icon
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-          children: item.text
-        })]
-      })
-    }, item.icon + item.text))
-  });
+  const isPopoverMenuItemPropsArray = items => Array.isArray(items) && items.length > 0 && "text" in items[0];
+  let content = null;
+  if (isPopoverMenuItemPropsArray(menu)) {
+    // menu is PopoverMenuItemProps[]
+    content = menu.map(item => /*#__PURE__*/(0, _jsxRuntime.jsx)(_PopoverMenuItem.default, {
+      item: item
+    }, item.text));
+  } else {
+    // menu is ReactNode
+    content = menu;
+  }
+  const popoverMenuContext = (0, _react.useMemo)(() => ({
+    setShowPopper
+  }), []);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    className: (0, _classnames.default)("fwe-popover-menu", className),
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Popover.default, {
-      popoverContent: content,
-      position: "right",
-      open: showPopper,
-      onStatusChange: setShowPopper,
-      ...props,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
-        "data-testid": "fwe-popover-menu-button",
-        type: "button",
-        className: "fwe-popover-menu-button",
-        children: children
+    className: (0, _classnames.default)("fwe-popover-menu", props.className),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_PopoverMenuContext.default.Provider, {
+      value: popoverMenuContext,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Popover.default, {
+        popoverContent: content,
+        position: "right",
+        open: showPopper,
+        onStatusChange: setShowPopper,
+        ...props,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          "data-testid": "fwe-popover-menu-button",
+          className: "fwe-popover-menu-button",
+          children: props.children
+        })
       })
     })
   });

package/node/lib/components/popovers/popover-menu/PopoverMenuContext.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+const PopoverMenuContext = /*#__PURE__*/(0, _react.createContext)({
+  setShowPopper: () => {}
+});
+var _default = exports.default = PopoverMenuContext;

package/node/lib/components/popovers/popover-menu-item/PopoverMenuItem.js

@@ -0,0 +1,48 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _IconWrapper = _interopRequireDefault(require("../../icon-wrapper/IconWrapper.js"));
+var _PopoverMenuContext = _interopRequireDefault(require("../popover-menu/PopoverMenuContext.js"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function PopoverMenuItem(_ref) {
+  let {
+    item
+  } = _ref;
+  // get context to close the popover menu
+  const {
+    setShowPopper
+  } = (0, _react.useContext)(_PopoverMenuContext.default);
+  function handleClick(e) {
+    // prevent event propagation
+    e?.stopPropagation();
+    e?.preventDefault();
+
+    // close the popover menu
+    if (setShowPopper) {
+      setShowPopper(false);
+    }
+    if (item.action) {
+      item.action(item.data);
+    }
+  }
+  if (!item) {
+    return null;
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
+    type: "button",
+    className: "fwe-btn-unstyled fr-popover-item",
+    onClick: e => handleClick(e),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_IconWrapper.default, {
+      icon: item.icon
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      className: "fwe-mr-xxs",
+      children: item.text
+    })]
+  });
+}
+var _default = exports.default = PopoverMenuItem;

package/node/lib/components/popovers/tooltip/Tooltip.js

@@ -4,64 +4,22 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = require("react");
-var _reactPopper = require("react-popper");
-var _classnames = _interopRequireDefault(require("classnames"));
+var _Popover = _interopRequireDefault(require("../popover/Popover.js"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function Tooltip(_ref) {
   let {
-    children,
-    className,
     title,
-    position = "bottom"
+    ...props
   } = _ref;
-  const [showPopper, setShowPopper] = (0, _react.useState)(false);
-  const referenceElement = (0, _react.useRef)(null);
-  const [popperElement, setPopperElement] = (0, _react.useState)(null);
-  const [arrowElement, setArrowElement] = (0, _react.useState)(null);
-  const {
-    styles,
-    attributes
-  } = (0, _reactPopper.usePopper)(referenceElement.current, popperElement, {
-    placement: position,
-    modifiers: [{
-      name: "arrow",
-      options: {
-        element: arrowElement
-      }
-    }, {
-      name: "offset",
-      options: {
-        offset: [0, 24]
-      }
-    }, {
-      name: "flip",
-      options: {
-        fallbackPlacements: ["right", "left", "top"]
-      }
-    }]
-  });
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-    className: (0, _classnames.default)("fr-tooltip-container", className),
-    ref: referenceElement,
-    onMouseEnter: () => setShowPopper(true),
-    onMouseLeave: () => setShowPopper(false),
-    children: [children, showPopper && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      className: "fwe-popover-container",
-      id: "tooltip",
-      ref: setPopperElement,
-      style: styles.popper,
-      ...attributes.popper,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        ref: setArrowElement,
-        style: styles.arrow,
-        id: "arrow"
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: "fwe-popover",
-        children: title
-      })]
-    })]
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Popover.default, {
+    position: "bottom",
+    popoverContent: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      children: title
+    }),
+    openOnHover: true,
+    ...props,
+    children: props.children
   });
 }
 var _default = exports.default = Tooltip;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@festo-ui/react",
-  "version": "9.0.0-dev.679",
+  "version": "9.0.0-dev.683",
   "author": "Festo UI (styleguide@festo.com)",
   "copyright": "Copyright (c) 2025 Festo SE & Co. KG. All rights reserved.",
   "license": "apache-2.0",
@@ -18,9 +18,6 @@
     "react": ">=17.0.0",
     "react-dom": ">=17.0.0"
   },
-  "optionalDependencies": {
-    "quill": "^2.0.3"
-  },
   "sideEffects": [
     "*.scss",
     "*.css"
@@ -32,8 +29,6 @@
     "@festo-ui/react-icons": "*",
     "@popperjs/core": "^2.11.0",
     "classnames": "^2.2.6",
-    "flatpickr": "^4.6.9",
-    "react-draggable": "^4.4.6",
     "react-popper": "^2.3.0",
     "react-remove-scroll": "^2.5.7",
     "react-transition-group": "^4.4.2",