@rio-cloud/rio-uikit 2.2.1 → 2.3.0-beta.2

package/components/dropdown/ButtonDropdown.js

@@ -1,18 +1,18 @@
 import { jsx as i, jsxs as h } from "react/jsx-runtime";
-import { forwardRef as ro, useState as f, useEffect as so } from "react";
-import lo from "react-dom";
-import { usePopper as po } from "react-popper";
+import { forwardRef as so, useState as c, useEffect as lo } from "react";
+import po from "react-dom";
+import { usePopper as ao } from "react-popper";
 import { noop as u } from "es-toolkit/function";
-import { isNil as ao } from "es-toolkit/predicate";
+import { isNil as io } from "es-toolkit/predicate";
 import P from "../../utils/classNames.js";
-import { getOrCreatePortalRoot as io } from "../../utils/portalRoot.js";
-import fo, { DEFAULT_EVENT_TYPES as co } from "../../hooks/useClickOutside.js";
-import mo from "../menuItems/MenuItems.js";
-import uo from "../menuItems/MenuItemList.js";
-import go from "./DropdownToggleButton.js";
-import wo from "./SplitCaretButton.js";
-import Co from "./Caret.js";
-const Bo = (r, s) => r && s ? "top-end" : !r && s ? "top-start" : r && !s ? "bottom-end" : "bottom-start", Do = () => ro((r, s) => {
+import { getOrCreatePortalRoot as co } from "../../utils/portalRoot.js";
+import fo, { DEFAULT_EVENT_TYPES as mo } from "../../hooks/useClickOutside.js";
+import uo from "../menuItems/MenuItems.js";
+import go from "../menuItems/MenuItemList.js";
+import wo from "./DropdownToggleButton.js";
+import Co from "./SplitCaretButton.js";
+import Bo from "./Caret.js";
+const Do = (r, s) => r && s ? "top-end" : !r && s ? "top-start" : r && !s ? "bottom-end" : "bottom-start", No = () => so((r, s) => {
   const {
     id: g = Math.random().toString(36).slice(2, 16),
     items: R = [],
@@ -20,67 +20,68 @@ const Bo = (r, s) => r && s ? "top-end" : !r && s ? "top-start" : r && !s ? "bot
     bsStyle: C = "default",
     variant: T,
     disabled: B = !1,
+    iconName: k,
     iconOnly: D = !1,
-    title: k,
+    title: y,
     splitButton: t = !1,
-    customDropdown: O,
+    customDropdown: N,
     open: e,
-    dropup: y = !1,
-    pullRight: c = !1,
-    noCaret: E = !1,
-    onOpen: L = u,
-    onClose: x = u,
-    onLabelButtonClick: I = u,
+    dropup: E = !1,
+    pullRight: f = !1,
+    noCaret: L = !1,
+    onOpen: x = u,
+    onClose: I = u,
+    onLabelButtonClick: j = u,
     usePortal: l = !1,
-    popperConfig: j,
-    toggleButtonType: U = "button",
-    toggleClassName: S = "",
-    dropdownClassName: _,
-    className: v = "",
-    ...z
-  } = r, [b, m] = f(e), [A, F] = f(null), [M, V] = f(null), [Y, q] = f(null), G = {
-    placement: Bo(c, y),
+    popperConfig: U,
+    toggleButtonType: _ = "button",
+    toggleClassName: O = "",
+    dropdownClassName: v,
+    className: z = "",
+    ...A
+  } = r, [S, m] = c(e), [F, V] = c(null), [b, Y] = c(null), [q, G] = c(null), H = {
+    placement: Do(f, E),
     modifiers: []
-  }, H = t && c ? Y : A, { styles: J, attributes: K } = po(H, M, j || G), n = ao(e), p = n ? b : e, Q = fo(
+  }, J = t && f ? q : F, { styles: K, attributes: Q } = ao(J, b, U || H), n = io(e), p = n ? S : e, W = fo(
     (o) => {
-      l && M?.contains(o.target) || a();
+      l && b?.contains(o.target) || a();
     },
-    co,
+    mo,
     !!p
     // only listen to clicks outside when the dropdown is open
-  ), W = io(), X = !E && !t && !D;
-  so(() => {
+  ), X = co(), Z = !L && !t && !D;
+  lo(() => {
     n || m(e);
   }, [n, e]);
   const d = (o) => {
-    (n ? b : e) ? a() : Z(o);
-  }, Z = (o) => {
-    n && m(!0), o && L(o);
+    (n ? S : e) ? a() : $(o);
+  }, $ = (o) => {
+    n && m(!0), o && x(o);
   }, a = () => {
-    n && m(!1), x();
-  }, $ = () => {
-    a(), I();
-  }, oo = (o) => {
-    d(o);
+    n && m(!1), I();
+  }, oo = () => {
+    a(), j();
   }, to = (o) => {
-    t ? $() : d(o);
-  }, eo = P("dropdown", "btn-group", p && "open", v), no = P(
+    d(o);
+  }, eo = (o) => {
+    t ? oo() : d(o);
+  }, no = P("dropdown", "btn-group", p && "open", z), ro = P(
     l && "dropdown-portal",
-    t && c && "pull-right",
-    _
-  ), N = /* @__PURE__ */ i(
-    uo,
+    t && f && "pull-right",
+    v
+  ), M = /* @__PURE__ */ i(
+    go,
     {
-      className: no,
-      ref: V,
-      style: J.popper,
-      ...K.popper,
-      children: O || /* @__PURE__ */ i(mo, { items: R, closeMenu: d })
+      className: ro,
+      ref: Y,
+      style: K.popper,
+      ...Q.popper,
+      children: N || /* @__PURE__ */ i(uo, { items: R, closeMenu: d })
     }
   );
-  return /* @__PURE__ */ h("div", { ...z, className: eo, ref: Q, children: [
+  return /* @__PURE__ */ h("div", { ...A, className: no, ref: W, children: [
     /* @__PURE__ */ h(
-      go,
+      wo,
       {
         id: g,
         splitButton: t,
@@ -88,35 +89,36 @@ const Bo = (r, s) => r && s ? "top-end" : !r && s ? "top-start" : r && !s ? "bot
         bsSize: w,
         variant: T,
         iconOnly: D,
+        iconName: k,
         disabled: B,
-        ref: F,
-        onClick: to,
+        ref: V,
+        onClick: eo,
         outerRef: s,
-        toggleButtonType: U,
-        className: S,
+        toggleButtonType: _,
+        className: O,
         children: [
-          k,
-          X && /* @__PURE__ */ i(Co, {})
+          y,
+          Z && /* @__PURE__ */ i(Bo, {})
         ]
       }
     ),
     t && /* @__PURE__ */ i(
-      wo,
+      Co,
       {
         id: g,
         bsStyle: C,
         bsSize: w,
         disabled: B,
-        className: S,
-        onClick: oo,
-        ref: q
+        className: O,
+        onClick: to,
+        ref: G
       }
     ),
-    p && l && lo.createPortal(N, W),
-    p && !l && N
+    p && l && po.createPortal(M, X),
+    p && !l && M
   ] });
-}), jo = Do();
+}), Uo = No();
 export {
-  jo as default
+  Uo as default
 };
 //# sourceMappingURL=ButtonDropdown.js.map

package/components/dropdown/ButtonDropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonDropdown.js","sources":["../../../src/components/dropdown/ButtonDropdown.tsx"],"sourcesContent":["import React, { useState, useEffect, forwardRef, type PropsWithChildren } from 'react';\nimport ReactDOM from 'react-dom';\nimport { usePopper } from 'react-popper';\nimport { noop } from 'es-toolkit/function';\nimport { isNil } from 'es-toolkit/predicate';\n\nimport classNames from '../../utils/classNames';\nimport { getOrCreatePortalRoot } from '../../utils/portalRoot';\nimport useClickOutside, { DEFAULT_EVENT_TYPES } from '../../hooks/useClickOutside';\nimport MenuItems from '../menuItems/MenuItems';\nimport MenuItemList from '../menuItems/MenuItemList';\nimport DropdownToggleButton, { type DropdownToggleEvent, type DropdownToggleButtonType } from './DropdownToggleButton';\nimport SplitCaretButton from './SplitCaretButton';\nimport Caret from './Caret';\nimport type { MenuItemProps as MenuItem } from '../menuItems/MenuItem';\nimport type { BUTTON_SIZE, BUTTON_STYLE, BUTTON_VARIANT } from '../button/Button';\n\nconst getPlacement = (pullRight: boolean, dropup: boolean) => {\n    if (pullRight && dropup) {\n        return 'top-end';\n    }\n    if (!pullRight && dropup) {\n        return 'top-start';\n    }\n    if (pullRight && !dropup) {\n        return 'bottom-end';\n    }\n    return 'bottom-start';\n};\n\nexport type ButtonDropdownProps<T extends DropdownToggleButtonType = 'button'> = {\n    /**\n     * Unique button id. If not present a random id is generated.\n     */\n    id?: string;\n\n    /**\n     * The button title. This may be also a node, like a <span> or a <FormattedMessage>.\n     */\n    title: string | React.ReactNode;\n\n    /**\n     * Defined weather or not the menu is rendered.\n     * Use this to control the component from the outside.\n     *\n     * @default undefined\n     */\n    open?: boolean;\n\n    /**\n     * Defines whether the dropdown opens above or below.\n     * Set it to \"true\" additionally disables the automatic position feature.\n     *\n     * @default false\n     */\n    dropup?: boolean;\n\n    /**\n     * Defines whether the dropdown opens right aligned to the dropdown or not.\n     */\n    pullRight?: boolean;\n\n    /**\n     * Defines how large the button will be rendered.\n     *\n     * Possible values are: `xs`, `sm`, `md`, `lg`\n     *\n     * @default 'md'\n     */\n    bsSize?: BUTTON_SIZE;\n\n    /**\n     * Defines the button color.\n     *\n     * Possible values are: `default`, `primary`, `secondary`, `info`, `warning`, `danger`, `success`, `muted`\n     *\n     * @default 'default'\n     */\n    bsStyle?: BUTTON_STYLE;\n\n    /**\n     * Defines the variation of the button design.\n     *\n     * Possible values are: `link`, `link-inline`, `outline`, `action`\n     */\n    variant?: BUTTON_VARIANT;\n\n    /**\n     * Specify the toggle element type.\n     * It supports the following types: \"button\" | \"tag\" | \"label\"\n     *\n     * @default 'button'\n     */\n    toggleButtonType?: DropdownToggleButtonType;\n\n    /**\n     * Optional prop to defines whether the dropdown title is icon only which\n     * applies different padding so the button is a square.\n     *\n     * @default false\n     */\n    iconOnly?: boolean;\n\n    /**\n     * Defines whether the caret is shown or not.\n     *\n     * @default false\n     */\n    noCaret?: boolean;\n\n    /**\n     * Defines whether the dropdown-toggle (with caret) should be in a separate button.\n     *\n     * @default false\n     */\n    splitButton?: boolean;\n\n    /**\n     * Renders the dropdown into a dedicated react portal\n     *\n     * @default false\n     */\n    usePortal?: boolean;\n\n    /**\n     * Items to display in the dropdown menu. If you use a custom dropdown you can skip this prop.\n     */\n    items?: MenuItem[];\n\n    /**\n     * Disables the dropdown button.\n     *\n     * @default false\n     */\n    disabled?: boolean;\n\n    /**\n     * Callback for splitButton label button click.\n     */\n    onLabelButtonClick?: () => void;\n\n    /**\n     * Callback for when the toggle button was clicked to open it.\n     * @param event\n     * @returns\n     */\n    onOpen?: (event: DropdownToggleEvent<T>) => void;\n\n    /**\n     * Callback for when the toggle button was clicked to close it.\n     * @returns\n     */\n    onClose?: () => void;\n\n    /**\n     * Allows to pass in custom dropdown menu content.\n     */\n    customDropdown?: React.ReactNode;\n\n    /**\n     * Define custom popper.js configuration for dropdown placement and modifiers.\n     */\n    popperConfig?: object;\n\n    /**\n     * Additional classes to be set on the dropdown-toggle button.\n     */\n    toggleClassName?: string;\n\n    /**\n     * Additional classes to be set on the dropdown.\n     */\n    dropdownClassName?: string;\n\n    /**\n     * Additional classes to be set to the wrapper element.\n     */\n    className?: string;\n};\n\nconst createButtonDropdown = <T extends DropdownToggleButtonType = 'button'>() => {\n    return forwardRef<\n        T extends 'button' ? HTMLButtonElement : HTMLDivElement,\n        PropsWithChildren<ButtonDropdownProps<T>>\n    >((props, ref) => {\n        const {\n            id = Math.random().toString(36).slice(2, 16),\n            items = [],\n            bsSize = 'md',\n            bsStyle = 'default',\n            variant,\n            disabled = false,\n            iconOnly = false,\n            title,\n            splitButton = false,\n            customDropdown,\n            open,\n            dropup = false,\n            pullRight = false,\n            noCaret = false,\n            onOpen = noop,\n            onClose = noop,\n            onLabelButtonClick = noop,\n            usePortal = false,\n            popperConfig,\n            toggleButtonType = 'button',\n            toggleClassName = '',\n            dropdownClassName,\n            className = '',\n            ...remainingProps\n        } = props;\n\n        const [internalOpen, setInternalOpen] = useState(open);\n\n        const [refDropdownToggle, setRefDropdownToggle] = useState<HTMLButtonElement | HTMLDivElement | null>(null);\n        const [refDropdownMenu, setRefDropdownMenu] = useState<HTMLUListElement | null>(null);\n        const [refSplitButtonToggle, setRefSplitButtonToggle] = useState<HTMLButtonElement | null>(null);\n\n        const defaultPopperConfig = {\n            placement: getPlacement(pullRight, dropup),\n            modifiers: [],\n        };\n\n        const popperParentRef = splitButton && pullRight ? refSplitButtonToggle : refDropdownToggle;\n\n        const { styles, attributes } = usePopper(popperParentRef, refDropdownMenu, popperConfig || defaultPopperConfig);\n\n        const isUncontrolled = isNil(open);\n        const isOpen = isUncontrolled ? internalOpen : open;\n\n        const wrapperRef = useClickOutside(\n            event => {\n                if (usePortal) {\n                    // In case the dropdown is rendered via portal the clickOutside the toggle button element is\n                    // triggered since the dropdown is not a child of the wrapper element.\n                    // In this case we need to check if the event target is inside the dropdown-menu and prevent closing\n                    // the dropdown\n                    if (!refDropdownMenu?.contains(event.target as Node)) {\n                        closeMenu();\n                    }\n                } else {\n                    closeMenu();\n                }\n            },\n            DEFAULT_EVENT_TYPES,\n            Boolean(isOpen) // only listen to clicks outside when the dropdown is open\n        );\n\n        const dropdownRoot = getOrCreatePortalRoot();\n\n        const shouldShowCaret = !noCaret && !splitButton && !iconOnly;\n\n        useEffect(() => {\n            if (!isUncontrolled) {\n                setInternalOpen(open);\n            }\n        }, [isUncontrolled, open]);\n\n        const toggleOpen = (event?: DropdownToggleEvent<T>) => {\n            const isDropdownOpen = isUncontrolled ? internalOpen : open;\n\n            if (isDropdownOpen) {\n                closeMenu();\n            } else {\n                openMenu(event);\n            }\n        };\n\n        const openMenu = (event?: DropdownToggleEvent<T>) => {\n            if (isUncontrolled) {\n                setInternalOpen(true);\n            }\n            if (event) {\n                onOpen(event);\n            }\n        };\n\n        const closeMenu = () => {\n            if (isUncontrolled) {\n                setInternalOpen(false);\n            }\n            onClose();\n        };\n\n        const handleSplitLabelButtonClick = () => {\n            closeMenu();\n            onLabelButtonClick();\n        };\n\n        const handleSplitCaretButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n            toggleOpen(event as any);\n        };\n\n        const handleDropdownButtonClick = (event: React.MouseEvent<HTMLButtonElement | HTMLDivElement>) => {\n            if (splitButton) {\n                handleSplitLabelButtonClick();\n            } else {\n                toggleOpen(event as DropdownToggleEvent<T>);\n            }\n        };\n\n        const wrapperClasses = classNames('dropdown', 'btn-group', isOpen && 'open', className);\n\n        const dropdownClasses = classNames(\n            usePortal && 'dropdown-portal',\n            splitButton && pullRight && 'pull-right',\n            dropdownClassName\n        );\n\n        const dropdownMenu = (\n            <MenuItemList\n                className={dropdownClasses}\n                ref={setRefDropdownMenu}\n                style={styles.popper}\n                {...attributes.popper}\n            >\n                {customDropdown ? customDropdown : <MenuItems items={items} closeMenu={toggleOpen} />}\n            </MenuItemList>\n        );\n\n        return (\n            <div {...remainingProps} className={wrapperClasses} ref={wrapperRef}>\n                <DropdownToggleButton\n                    id={id}\n                    splitButton={splitButton}\n                    bsStyle={bsStyle}\n                    bsSize={bsSize}\n                    variant={variant}\n                    iconOnly={iconOnly}\n                    disabled={disabled}\n                    ref={setRefDropdownToggle}\n                    onClick={handleDropdownButtonClick}\n                    outerRef={ref}\n                    toggleButtonType={toggleButtonType}\n                    className={toggleClassName}\n                >\n                    {title}\n                    {shouldShowCaret && <Caret />}\n                </DropdownToggleButton>\n                {splitButton && (\n                    <SplitCaretButton\n                        id={id}\n                        bsStyle={bsStyle}\n                        bsSize={bsSize}\n                        disabled={disabled}\n                        className={toggleClassName}\n                        onClick={handleSplitCaretButtonClick}\n                        ref={setRefSplitButtonToggle}\n                    />\n                )}\n                {isOpen && usePortal && ReactDOM.createPortal(dropdownMenu, dropdownRoot)}\n                {isOpen && !usePortal && dropdownMenu}\n            </div>\n        );\n    });\n};\n\nconst ButtonDropdown = createButtonDropdown();\n\nexport default ButtonDropdown;\n"],"names":["getPlacement","pullRight","dropup","createButtonDropdown","forwardRef","props","ref","id","items","bsSize","bsStyle","variant","disabled","iconOnly","title","splitButton","customDropdown","open","noCaret","onOpen","noop","onClose","onLabelButtonClick","usePortal","popperConfig","toggleButtonType","toggleClassName","dropdownClassName","className","remainingProps","internalOpen","setInternalOpen","useState","refDropdownToggle","setRefDropdownToggle","refDropdownMenu","setRefDropdownMenu","refSplitButtonToggle","setRefSplitButtonToggle","defaultPopperConfig","popperParentRef","styles","attributes","usePopper","isUncontrolled","isNil","isOpen","wrapperRef","useClickOutside","event","closeMenu","DEFAULT_EVENT_TYPES","dropdownRoot","getOrCreatePortalRoot","shouldShowCaret","useEffect","toggleOpen","openMenu","handleSplitLabelButtonClick","handleSplitCaretButtonClick","handleDropdownButtonClick","wrapperClasses","classNames","dropdownClasses","dropdownMenu","jsx","MenuItemList","MenuItems","jsxs","DropdownToggleButton","Caret","SplitCaretButton","ReactDOM","ButtonDropdown"],"mappings":";;;;;;;;;;;;;;AAiBA,MAAMA,KAAe,CAACC,GAAoBC,MAClCD,KAAaC,IACN,YAEP,CAACD,KAAaC,IACP,cAEPD,KAAa,CAACC,IACP,eAEJ,gBAyJLC,KAAuB,MAClBC,GAGL,CAACC,GAAOC,MAAQ;AACd,QAAM;AAAA,IACF,IAAAC,IAAK,KAAK,SAAS,SAAS,EAAE,EAAE,MAAM,GAAG,EAAE;AAAA,IAC3C,OAAAC,IAAQ,CAAA;AAAA,IACR,QAAAC,IAAS;AAAA,IACT,SAAAC,IAAU;AAAA,IACV,SAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,UAAAC,IAAW;AAAA,IACX,OAAAC;AAAA,IACA,aAAAC,IAAc;AAAA,IACd,gBAAAC;AAAA,IACA,MAAAC;AAAA,IACA,QAAAf,IAAS;AAAA,IACT,WAAAD,IAAY;AAAA,IACZ,SAAAiB,IAAU;AAAA,IACV,QAAAC,IAASC;AAAA,IACT,SAAAC,IAAUD;AAAA,IACV,oBAAAE,IAAqBF;AAAA,IACrB,WAAAG,IAAY;AAAA,IACZ,cAAAC;AAAA,IACA,kBAAAC,IAAmB;AAAA,IACnB,iBAAAC,IAAkB;AAAA,IAClB,mBAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,GAAGC;AAAA,EAAA,IACHxB,GAEE,CAACyB,GAAcC,CAAe,IAAIC,EAASf,CAAI,GAE/C,CAACgB,GAAmBC,CAAoB,IAAIF,EAAoD,IAAI,GACpG,CAACG,GAAiBC,CAAkB,IAAIJ,EAAkC,IAAI,GAC9E,CAACK,GAAsBC,CAAuB,IAAIN,EAAmC,IAAI,GAEzFO,IAAsB;AAAA,IACxB,WAAWvC,GAAaC,GAAWC,CAAM;AAAA,IACzC,WAAW,CAAA;AAAA,EAAC,GAGVsC,IAAkBzB,KAAed,IAAYoC,IAAuBJ,GAEpE,EAAE,QAAAQ,GAAQ,YAAAC,MAAeC,GAAUH,GAAiBL,GAAiBX,KAAgBe,CAAmB,GAExGK,IAAiBC,GAAM5B,CAAI,GAC3B6B,IAASF,IAAiBd,IAAeb,GAEzC8B,IAAaC;AAAA,IACf,CAAAC,MAAS;AACL,MAAI1B,KAKKY,GAAiB,SAASc,EAAM,MAAc,KAC/CC,EAAA;AAAA,IAKZ;AAAA,IACAC;AAAA,IACA,EAAQL;AAAA;AAAA,EAAM,GAGZM,IAAeC,GAAA,GAEfC,IAAkB,CAACpC,KAAW,CAACH,KAAe,CAACF;AAErD,EAAA0C,GAAU,MAAM;AACZ,IAAKX,KACDb,EAAgBd,CAAI;AAAA,EAE5B,GAAG,CAAC2B,GAAgB3B,CAAI,CAAC;AAEzB,QAAMuC,IAAa,CAACP,MAAmC;AAGnD,KAFuBL,IAAiBd,IAAeb,KAGnDiC,EAAA,IAEAO,EAASR,CAAK;AAAA,EAEtB,GAEMQ,IAAW,CAACR,MAAmC;AACjD,IAAIL,KACAb,EAAgB,EAAI,GAEpBkB,KACA9B,EAAO8B,CAAK;AAAA,EAEpB,GAEMC,IAAY,MAAM;AACpB,IAAIN,KACAb,EAAgB,EAAK,GAEzBV,EAAA;AAAA,EACJ,GAEMqC,IAA8B,MAAM;AACtC,IAAAR,EAAA,GACA5B,EAAA;AAAA,EACJ,GAEMqC,KAA8B,CAACV,MAA+C;AAChF,IAAAO,EAAWP,CAAY;AAAA,EAC3B,GAEMW,KAA4B,CAACX,MAAgE;AAC/F,IAAIlC,IACA2C,EAAA,IAEAF,EAAWP,CAA+B;AAAA,EAElD,GAEMY,KAAiBC,EAAW,YAAY,aAAahB,KAAU,QAAQlB,CAAS,GAEhFmC,KAAkBD;AAAA,IACpBvC,KAAa;AAAA,IACbR,KAAed,KAAa;AAAA,IAC5B0B;AAAA,EAAA,GAGEqC,IACF,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACG,WAAWH;AAAA,MACX,KAAK3B;AAAA,MACL,OAAOK,EAAO;AAAA,MACb,GAAGC,EAAW;AAAA,MAEd,eAAkC,gBAAAuB,EAACE,IAAA,EAAU,OAAA3D,GAAc,WAAWgD,EAAA,CAAY;AAAA,IAAA;AAAA,EAAA;AAI3F,2BACK,OAAA,EAAK,GAAG3B,GAAgB,WAAWgC,IAAgB,KAAKd,GACrD,UAAA;AAAA,IAAA,gBAAAqB;AAAA,MAACC;AAAA,MAAA;AAAA,QACG,IAAA9D;AAAA,QACA,aAAAQ;AAAA,QACA,SAAAL;AAAA,QACA,QAAAD;AAAA,QACA,SAAAE;AAAA,QACA,UAAAE;AAAA,QACA,UAAAD;AAAA,QACA,KAAKsB;AAAA,QACL,SAAS0B;AAAA,QACT,UAAUtD;AAAA,QACV,kBAAAmB;AAAA,QACA,WAAWC;AAAA,QAEV,UAAA;AAAA,UAAAZ;AAAA,UACAwC,uBAAoBgB,IAAA,CAAA,CAAM;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAE9BvD,KACG,gBAAAkD;AAAA,MAACM;AAAA,MAAA;AAAA,QACG,IAAAhE;AAAA,QACA,SAAAG;AAAA,QACA,QAAAD;AAAA,QACA,UAAAG;AAAA,QACA,WAAWc;AAAA,QACX,SAASiC;AAAA,QACT,KAAKrB;AAAA,MAAA;AAAA,IAAA;AAAA,IAGZQ,KAAUvB,KAAaiD,GAAS,aAAaR,GAAcZ,CAAY;AAAA,IACvEN,KAAU,CAACvB,KAAayC;AAAA,EAAA,GAC7B;AAER,CAAC,GAGCS,KAAiBtE,GAAA;"}
+{"version":3,"file":"ButtonDropdown.js","sources":["../../../src/components/dropdown/ButtonDropdown.tsx"],"sourcesContent":["import React, { useState, useEffect, forwardRef, type PropsWithChildren } from 'react';\nimport ReactDOM from 'react-dom';\nimport { usePopper } from 'react-popper';\nimport { noop } from 'es-toolkit/function';\nimport { isNil } from 'es-toolkit/predicate';\n\nimport classNames from '../../utils/classNames';\nimport { getOrCreatePortalRoot } from '../../utils/portalRoot';\nimport useClickOutside, { DEFAULT_EVENT_TYPES } from '../../hooks/useClickOutside';\nimport MenuItems from '../menuItems/MenuItems';\nimport MenuItemList from '../menuItems/MenuItemList';\nimport DropdownToggleButton, { type DropdownToggleEvent, type DropdownToggleButtonType } from './DropdownToggleButton';\nimport SplitCaretButton from './SplitCaretButton';\nimport Caret from './Caret';\nimport type { MenuItemProps as MenuItem } from '../menuItems/MenuItem';\nimport type { BUTTON_SIZE, BUTTON_STYLE, BUTTON_VARIANT } from '../button/Button';\n\nconst getPlacement = (pullRight: boolean, dropup: boolean) => {\n    if (pullRight && dropup) {\n        return 'top-end';\n    }\n    if (!pullRight && dropup) {\n        return 'top-start';\n    }\n    if (pullRight && !dropup) {\n        return 'bottom-end';\n    }\n    return 'bottom-start';\n};\n\nexport type ButtonDropdownProps<T extends DropdownToggleButtonType = 'button'> = {\n    /**\n     * Unique button id. If not present a random id is generated.\n     */\n    id?: string;\n\n    /**\n     * The button title. This may be also a node, like a <span> or a <FormattedMessage>.\n     */\n    title: string | React.ReactNode;\n\n    /**\n     * Defined weather or not the menu is rendered.\n     * Use this to control the component from the outside.\n     *\n     * @default undefined\n     */\n    open?: boolean;\n\n    /**\n     * Defines whether the dropdown opens above or below.\n     * Set it to \"true\" additionally disables the automatic position feature.\n     *\n     * @default false\n     */\n    dropup?: boolean;\n\n    /**\n     * Defines whether the dropdown opens right aligned to the dropdown or not.\n     */\n    pullRight?: boolean;\n\n    /**\n     * Defines how large the button will be rendered.\n     *\n     * Possible values are: `xs`, `sm`, `md`, `lg`\n     *\n     * @default 'md'\n     */\n    bsSize?: BUTTON_SIZE;\n\n    /**\n     * Defines the button color.\n     *\n     * Possible values are: `default`, `primary`, `secondary`, `info`, `warning`, `danger`, `success`, `muted`\n     *\n     * @default 'default'\n     */\n    bsStyle?: BUTTON_STYLE;\n\n    /**\n     * Defines the variation of the button design.\n     *\n     * Possible values are: `link`, `link-inline`, `outline`, `action`\n     */\n    variant?: BUTTON_VARIANT;\n\n    /**\n     * Specify the toggle element type.\n     * It supports the following types: \"button\" | \"tag\" | \"label\"\n     *\n     * @default 'button'\n     */\n    toggleButtonType?: DropdownToggleButtonType;\n\n    /**\n     * Optional prop to defines whether the dropdown title is icon only which\n     * applies different padding so the button is a square.\n     *\n     * @default false\n     */\n    iconOnly?: boolean;\n\n    /**\n     * Optional rioglyph icon name forwarded to the underlying button toggle.\n     */\n    iconName?: string;\n\n    /**\n     * Defines whether the caret is shown or not.\n     *\n     * @default false\n     */\n    noCaret?: boolean;\n\n    /**\n     * Defines whether the dropdown-toggle (with caret) should be in a separate button.\n     *\n     * @default false\n     */\n    splitButton?: boolean;\n\n    /**\n     * Renders the dropdown into a dedicated react portal\n     *\n     * @default false\n     */\n    usePortal?: boolean;\n\n    /**\n     * Items to display in the dropdown menu. If you use a custom dropdown you can skip this prop.\n     */\n    items?: MenuItem[];\n\n    /**\n     * Disables the dropdown button.\n     *\n     * @default false\n     */\n    disabled?: boolean;\n\n    /**\n     * Callback for splitButton label button click.\n     */\n    onLabelButtonClick?: () => void;\n\n    /**\n     * Callback for when the toggle button was clicked to open it.\n     * @param event\n     * @returns\n     */\n    onOpen?: (event: DropdownToggleEvent<T>) => void;\n\n    /**\n     * Callback for when the toggle button was clicked to close it.\n     * @returns\n     */\n    onClose?: () => void;\n\n    /**\n     * Allows to pass in custom dropdown menu content.\n     */\n    customDropdown?: React.ReactNode;\n\n    /**\n     * Define custom popper.js configuration for dropdown placement and modifiers.\n     */\n    popperConfig?: object;\n\n    /**\n     * Additional classes to be set on the dropdown-toggle button.\n     */\n    toggleClassName?: string;\n\n    /**\n     * Additional classes to be set on the dropdown.\n     */\n    dropdownClassName?: string;\n\n    /**\n     * Additional classes to be set to the wrapper element.\n     */\n    className?: string;\n};\n\nconst createButtonDropdown = <T extends DropdownToggleButtonType = 'button'>() => {\n    return forwardRef<\n        T extends 'button' ? HTMLButtonElement : HTMLDivElement,\n        PropsWithChildren<ButtonDropdownProps<T>>\n    >((props, ref) => {\n        const {\n            id = Math.random().toString(36).slice(2, 16),\n            items = [],\n            bsSize = 'md',\n            bsStyle = 'default',\n            variant,\n            disabled = false,\n            iconName,\n            iconOnly = false,\n            title,\n            splitButton = false,\n            customDropdown,\n            open,\n            dropup = false,\n            pullRight = false,\n            noCaret = false,\n            onOpen = noop,\n            onClose = noop,\n            onLabelButtonClick = noop,\n            usePortal = false,\n            popperConfig,\n            toggleButtonType = 'button',\n            toggleClassName = '',\n            dropdownClassName,\n            className = '',\n            ...remainingProps\n        } = props;\n\n        const [internalOpen, setInternalOpen] = useState(open);\n\n        const [refDropdownToggle, setRefDropdownToggle] = useState<HTMLButtonElement | HTMLDivElement | null>(null);\n        const [refDropdownMenu, setRefDropdownMenu] = useState<HTMLUListElement | null>(null);\n        const [refSplitButtonToggle, setRefSplitButtonToggle] = useState<HTMLButtonElement | null>(null);\n\n        const defaultPopperConfig = {\n            placement: getPlacement(pullRight, dropup),\n            modifiers: [],\n        };\n\n        const popperParentRef = splitButton && pullRight ? refSplitButtonToggle : refDropdownToggle;\n\n        const { styles, attributes } = usePopper(popperParentRef, refDropdownMenu, popperConfig || defaultPopperConfig);\n\n        const isUncontrolled = isNil(open);\n        const isOpen = isUncontrolled ? internalOpen : open;\n\n        const wrapperRef = useClickOutside(\n            event => {\n                if (usePortal) {\n                    // In case the dropdown is rendered via portal the clickOutside the toggle button element is\n                    // triggered since the dropdown is not a child of the wrapper element.\n                    // In this case we need to check if the event target is inside the dropdown-menu and prevent closing\n                    // the dropdown\n                    if (!refDropdownMenu?.contains(event.target as Node)) {\n                        closeMenu();\n                    }\n                } else {\n                    closeMenu();\n                }\n            },\n            DEFAULT_EVENT_TYPES,\n            Boolean(isOpen) // only listen to clicks outside when the dropdown is open\n        );\n\n        const dropdownRoot = getOrCreatePortalRoot();\n\n        const shouldShowCaret = !noCaret && !splitButton && !iconOnly;\n\n        useEffect(() => {\n            if (!isUncontrolled) {\n                setInternalOpen(open);\n            }\n        }, [isUncontrolled, open]);\n\n        const toggleOpen = (event?: DropdownToggleEvent<T>) => {\n            const isDropdownOpen = isUncontrolled ? internalOpen : open;\n\n            if (isDropdownOpen) {\n                closeMenu();\n            } else {\n                openMenu(event);\n            }\n        };\n\n        const openMenu = (event?: DropdownToggleEvent<T>) => {\n            if (isUncontrolled) {\n                setInternalOpen(true);\n            }\n            if (event) {\n                onOpen(event);\n            }\n        };\n\n        const closeMenu = () => {\n            if (isUncontrolled) {\n                setInternalOpen(false);\n            }\n            onClose();\n        };\n\n        const handleSplitLabelButtonClick = () => {\n            closeMenu();\n            onLabelButtonClick();\n        };\n\n        const handleSplitCaretButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n            toggleOpen(event as DropdownToggleEvent<T>);\n        };\n\n        const handleDropdownButtonClick = (event: React.MouseEvent<HTMLButtonElement | HTMLDivElement>) => {\n            if (splitButton) {\n                handleSplitLabelButtonClick();\n            } else {\n                toggleOpen(event as DropdownToggleEvent<T>);\n            }\n        };\n\n        const wrapperClasses = classNames('dropdown', 'btn-group', isOpen && 'open', className);\n\n        const dropdownClasses = classNames(\n            usePortal && 'dropdown-portal',\n            splitButton && pullRight && 'pull-right',\n            dropdownClassName\n        );\n\n        const dropdownMenu = (\n            <MenuItemList\n                className={dropdownClasses}\n                ref={setRefDropdownMenu}\n                style={styles.popper}\n                {...attributes.popper}\n            >\n                {customDropdown ? customDropdown : <MenuItems items={items} closeMenu={toggleOpen} />}\n            </MenuItemList>\n        );\n\n        return (\n            <div {...remainingProps} className={wrapperClasses} ref={wrapperRef}>\n                <DropdownToggleButton\n                    id={id}\n                    splitButton={splitButton}\n                    bsStyle={bsStyle}\n                    bsSize={bsSize}\n                    variant={variant}\n                    iconOnly={iconOnly}\n                    iconName={iconName}\n                    disabled={disabled}\n                    ref={setRefDropdownToggle}\n                    onClick={handleDropdownButtonClick}\n                    outerRef={ref}\n                    toggleButtonType={toggleButtonType}\n                    className={toggleClassName}\n                >\n                    {title}\n                    {shouldShowCaret && <Caret />}\n                </DropdownToggleButton>\n                {splitButton && (\n                    <SplitCaretButton\n                        id={id}\n                        bsStyle={bsStyle}\n                        bsSize={bsSize}\n                        disabled={disabled}\n                        className={toggleClassName}\n                        onClick={handleSplitCaretButtonClick}\n                        ref={setRefSplitButtonToggle}\n                    />\n                )}\n                {isOpen && usePortal && ReactDOM.createPortal(dropdownMenu, dropdownRoot)}\n                {isOpen && !usePortal && dropdownMenu}\n            </div>\n        );\n    });\n};\n\nconst ButtonDropdown = createButtonDropdown();\n\nexport default ButtonDropdown;\n"],"names":["getPlacement","pullRight","dropup","createButtonDropdown","forwardRef","props","ref","id","items","bsSize","bsStyle","variant","disabled","iconName","iconOnly","title","splitButton","customDropdown","open","noCaret","onOpen","noop","onClose","onLabelButtonClick","usePortal","popperConfig","toggleButtonType","toggleClassName","dropdownClassName","className","remainingProps","internalOpen","setInternalOpen","useState","refDropdownToggle","setRefDropdownToggle","refDropdownMenu","setRefDropdownMenu","refSplitButtonToggle","setRefSplitButtonToggle","defaultPopperConfig","popperParentRef","styles","attributes","usePopper","isUncontrolled","isNil","isOpen","wrapperRef","useClickOutside","event","closeMenu","DEFAULT_EVENT_TYPES","dropdownRoot","getOrCreatePortalRoot","shouldShowCaret","useEffect","toggleOpen","openMenu","handleSplitLabelButtonClick","handleSplitCaretButtonClick","handleDropdownButtonClick","wrapperClasses","classNames","dropdownClasses","dropdownMenu","jsx","MenuItemList","MenuItems","jsxs","DropdownToggleButton","Caret","SplitCaretButton","ReactDOM","ButtonDropdown"],"mappings":"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"}

package/components/dropdown/DropdownToggleButton.d.ts

@@ -5,6 +5,7 @@ export type DropdownToggleEvent<T extends DropdownToggleButtonType = 'button'> =
 export type DropdownToggleButtonProps = HTMLProps<HTMLButtonElement> & {
     id?: string;
     disabled?: boolean;
+    iconName?: string;
     splitButton?: boolean;
     iconOnly?: boolean;
     onClick: (event: React.MouseEvent<HTMLButtonElement | HTMLDivElement>) => void;

package/components/dropdown/DropdownToggleButton.js

@@ -1,25 +1,26 @@
 import { jsx as i } from "react/jsx-runtime";
-import { forwardRef as x } from "react";
-import B from "../button/Button.js";
-import C from "../../hooks/useMergeRefs.js";
+import { forwardRef as B } from "react";
+import C from "../button/Button.js";
+import R from "../../hooks/useMergeRefs.js";
 import c from "../../utils/classNames.js";
-const j = x((f, u) => {
+const z = B((f, u) => {
   const {
     id: e,
     disabled: t,
+    iconName: d,
     bsSize: g,
     bsStyle: m,
-    variant: d,
+    variant: b,
     splitButton: o = !1,
     onClick: s,
     toggleButtonType: p = "button",
     className: n = "",
-    as: R,
+    as: h,
     children: r,
-    outerRef: b,
-    iconOnly: y,
+    outerRef: y,
+    iconOnly: N,
     ...l
-  } = f, a = C(b, u), v = c(!o && "dropdown-toggle", !o && n), w = c(
+  } = f, a = R(y, u), v = c(!o && "dropdown-toggle", !o && n), w = c(
     "dropdown-toggle",
     "label",
     `label-${m}`,
@@ -27,7 +28,7 @@ const j = x((f, u) => {
     "user-select-none cursor-pointer",
     t && "pointer-events-none",
     n
-  ), N = c(
+  ), x = c(
     "dropdown-toggle",
     "tag",
     "clickable height-auto",
@@ -44,7 +45,7 @@ const j = x((f, u) => {
       id: e,
       ref: a,
       onClick: s,
-      className: N,
+      className: x,
       children: r
     }
   ) : p === "label" ? /* @__PURE__ */ i(
@@ -58,7 +59,7 @@ const j = x((f, u) => {
       children: r
     }
   ) : /* @__PURE__ */ i(
-    B,
+    C,
     {
       ...l,
       id: o ? `button-${e}` : e,
@@ -67,15 +68,16 @@ const j = x((f, u) => {
       disabled: t,
       bsStyle: m,
       bsSize: g,
-      variant: d,
+      variant: b,
       onClick: s,
-      iconOnly: y,
+      iconName: d,
+      iconOnly: N,
       className: v,
       children: r
     }
   );
 });
 export {
-  j as default
+  z as default
 };
 //# sourceMappingURL=DropdownToggleButton.js.map

package/components/dropdown/DropdownToggleButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownToggleButton.js","sources":["../../../src/components/dropdown/DropdownToggleButton.tsx"],"sourcesContent":["import { forwardRef, type HTMLProps, type PropsWithChildren } from 'react';\n\nimport Button, { type BUTTON_VARIANT, type BUTTON_SIZE, type BUTTON_STYLE } from '../button/Button';\nimport useMergeRefs from '../../hooks/useMergeRefs';\nimport classNames from '../../utils/classNames';\n\nexport type DropdownToggleButtonType = 'button' | 'tag' | 'label';\n\nexport type DropdownToggleEvent<T extends DropdownToggleButtonType = 'button'> = T extends 'button'\n    ? React.MouseEvent<HTMLButtonElement>\n    : React.MouseEvent<HTMLDivElement>;\n\nexport type DropdownToggleButtonProps = HTMLProps<HTMLButtonElement> & {\n    id?: string;\n    disabled?: boolean;\n    splitButton?: boolean;\n    iconOnly?: boolean;\n    onClick: (event: React.MouseEvent<HTMLButtonElement | HTMLDivElement>) => void;\n    bsSize: BUTTON_SIZE;\n    bsStyle: BUTTON_STYLE;\n    variant?: BUTTON_VARIANT;\n    toggleButtonType?: DropdownToggleButtonType;\n    outerRef?: React.Ref<HTMLButtonElement | HTMLDivElement>;\n    className?: string;\n};\n\nconst DropdownToggleButton = forwardRef<\n    HTMLButtonElement | HTMLDivElement,\n    PropsWithChildren<DropdownToggleButtonProps>\n>((props, ref) => {\n    const {\n        id,\n        disabled,\n        bsSize,\n        bsStyle,\n        variant,\n        splitButton = false,\n        onClick,\n        toggleButtonType = 'button',\n        className = '',\n        as: _as,\n        children,\n        outerRef,\n        iconOnly,\n        ...remainingProps\n    } = props;\n\n    const toggleRef = useMergeRefs(outerRef, ref);\n\n    const buttonClasses = classNames(!splitButton && 'dropdown-toggle', !splitButton && className);\n\n    const labelClasses = classNames(\n        'dropdown-toggle',\n        'label',\n        `label-${bsStyle}`,\n        'display-flex align-items-center',\n        'user-select-none cursor-pointer',\n        disabled && 'pointer-events-none',\n        className\n    );\n    const tagClasses = classNames(\n        'dropdown-toggle',\n        'tag',\n        'clickable height-auto',\n        bsSize === 'sm' && 'tag-small',\n        'display-flex align-items-center',\n        'user-select-none cursor-pointer',\n        disabled && 'pointer-events-none',\n        className\n    );\n\n    if (toggleButtonType === 'tag') {\n        return (\n            <div\n                {...(remainingProps as typeof HTMLDivElement)}\n                id={id}\n                ref={toggleRef}\n                onClick={onClick}\n                className={tagClasses}\n            >\n                {children}\n            </div>\n        );\n    }\n\n    if (toggleButtonType === 'label') {\n        return (\n            <div\n                {...(remainingProps as typeof HTMLDivElement)}\n                id={id}\n                ref={toggleRef}\n                onClick={onClick}\n                className={labelClasses}\n            >\n                {children}\n            </div>\n        );\n    }\n\n    return (\n        <Button\n            {...remainingProps}\n            id={splitButton ? `button-${id}` : id}\n            type='button'\n            ref={toggleRef}\n            disabled={disabled}\n            bsStyle={bsStyle}\n            bsSize={bsSize}\n            variant={variant}\n            onClick={onClick}\n            iconOnly={iconOnly}\n            className={buttonClasses}\n        >\n            {children}\n        </Button>\n    );\n});\n\nexport default DropdownToggleButton;\n"],"names":["DropdownToggleButton","forwardRef","props","ref","id","disabled","bsSize","bsStyle","variant","splitButton","onClick","toggleButtonType","className","_as","children","outerRef","iconOnly","remainingProps","toggleRef","useMergeRefs","buttonClasses","classNames","labelClasses","tagClasses","jsx","Button"],"mappings":";;;;;AA0BA,MAAMA,IAAuBC,EAG3B,CAACC,GAAOC,MAAQ;AACd,QAAM;AAAA,IACF,IAAAC;AAAA,IACA,UAAAC;AAAA,IACA,QAAAC;AAAA,IACA,SAAAC;AAAA,IACA,SAAAC;AAAA,IACA,aAAAC,IAAc;AAAA,IACd,SAAAC;AAAA,IACA,kBAAAC,IAAmB;AAAA,IACnB,WAAAC,IAAY;AAAA,IACZ,IAAIC;AAAA,IACJ,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACHf,GAEEgB,IAAYC,EAAaJ,GAAUZ,CAAG,GAEtCiB,IAAgBC,EAAW,CAACZ,KAAe,mBAAmB,CAACA,KAAeG,CAAS,GAEvFU,IAAeD;AAAA,IACjB;AAAA,IACA;AAAA,IACA,SAASd,CAAO;AAAA,IAChB;AAAA,IACA;AAAA,IACAF,KAAY;AAAA,IACZO;AAAA,EAAA,GAEEW,IAAaF;AAAA,IACf;AAAA,IACA;AAAA,IACA;AAAA,IACAf,MAAW,QAAQ;AAAA,IACnB;AAAA,IACA;AAAA,IACAD,KAAY;AAAA,IACZO;AAAA,EAAA;AAGJ,SAAID,MAAqB,QAEjB,gBAAAa;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAIP;AAAA,MACL,IAAAb;AAAA,MACA,KAAKc;AAAA,MACL,SAAAR;AAAA,MACA,WAAWa;AAAA,MAEV,UAAAT;AAAA,IAAA;AAAA,EAAA,IAKTH,MAAqB,UAEjB,gBAAAa;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAIP;AAAA,MACL,IAAAb;AAAA,MACA,KAAKc;AAAA,MACL,SAAAR;AAAA,MACA,WAAWY;AAAA,MAEV,UAAAR;AAAA,IAAA;AAAA,EAAA,IAMT,gBAAAU;AAAA,IAACC;AAAA,IAAA;AAAA,MACI,GAAGR;AAAA,MACJ,IAAIR,IAAc,UAAUL,CAAE,KAAKA;AAAA,MACnC,MAAK;AAAA,MACL,KAAKc;AAAA,MACL,UAAAb;AAAA,MACA,SAAAE;AAAA,MACA,QAAAD;AAAA,MACA,SAAAE;AAAA,MACA,SAAAE;AAAA,MACA,UAAAM;AAAA,MACA,WAAWI;AAAA,MAEV,UAAAN;AAAA,IAAA;AAAA,EAAA;AAGb,CAAC;"}
+{"version":3,"file":"DropdownToggleButton.js","sources":["../../../src/components/dropdown/DropdownToggleButton.tsx"],"sourcesContent":["import { forwardRef, type HTMLProps, type PropsWithChildren } from 'react';\n\nimport Button, { type BUTTON_VARIANT, type BUTTON_SIZE, type BUTTON_STYLE } from '../button/Button';\nimport useMergeRefs from '../../hooks/useMergeRefs';\nimport classNames from '../../utils/classNames';\n\nexport type DropdownToggleButtonType = 'button' | 'tag' | 'label';\n\nexport type DropdownToggleEvent<T extends DropdownToggleButtonType = 'button'> = T extends 'button'\n    ? React.MouseEvent<HTMLButtonElement>\n    : React.MouseEvent<HTMLDivElement>;\n\nexport type DropdownToggleButtonProps = HTMLProps<HTMLButtonElement> & {\n    id?: string;\n    disabled?: boolean;\n    iconName?: string;\n    splitButton?: boolean;\n    iconOnly?: boolean;\n    onClick: (event: React.MouseEvent<HTMLButtonElement | HTMLDivElement>) => void;\n    bsSize: BUTTON_SIZE;\n    bsStyle: BUTTON_STYLE;\n    variant?: BUTTON_VARIANT;\n    toggleButtonType?: DropdownToggleButtonType;\n    outerRef?: React.Ref<HTMLButtonElement | HTMLDivElement>;\n    className?: string;\n};\n\nconst DropdownToggleButton = forwardRef<\n    HTMLButtonElement | HTMLDivElement,\n    PropsWithChildren<DropdownToggleButtonProps>\n>((props, ref) => {\n    const {\n        id,\n        disabled,\n        iconName,\n        bsSize,\n        bsStyle,\n        variant,\n        splitButton = false,\n        onClick,\n        toggleButtonType = 'button',\n        className = '',\n        as: _as,\n        children,\n        outerRef,\n        iconOnly,\n        ...remainingProps\n    } = props;\n\n    const toggleRef = useMergeRefs(outerRef, ref);\n\n    const buttonClasses = classNames(!splitButton && 'dropdown-toggle', !splitButton && className);\n\n    const labelClasses = classNames(\n        'dropdown-toggle',\n        'label',\n        `label-${bsStyle}`,\n        'display-flex align-items-center',\n        'user-select-none cursor-pointer',\n        disabled && 'pointer-events-none',\n        className\n    );\n    const tagClasses = classNames(\n        'dropdown-toggle',\n        'tag',\n        'clickable height-auto',\n        bsSize === 'sm' && 'tag-small',\n        'display-flex align-items-center',\n        'user-select-none cursor-pointer',\n        disabled && 'pointer-events-none',\n        className\n    );\n\n    if (toggleButtonType === 'tag') {\n        return (\n            <div\n                {...(remainingProps as typeof HTMLDivElement)}\n                id={id}\n                ref={toggleRef}\n                onClick={onClick}\n                className={tagClasses}\n            >\n                {children}\n            </div>\n        );\n    }\n\n    if (toggleButtonType === 'label') {\n        return (\n            <div\n                {...(remainingProps as typeof HTMLDivElement)}\n                id={id}\n                ref={toggleRef}\n                onClick={onClick}\n                className={labelClasses}\n            >\n                {children}\n            </div>\n        );\n    }\n\n    return (\n        <Button\n            {...remainingProps}\n            id={splitButton ? `button-${id}` : id}\n            type='button'\n            ref={toggleRef}\n            disabled={disabled}\n            bsStyle={bsStyle}\n            bsSize={bsSize}\n            variant={variant}\n            onClick={onClick}\n            iconName={iconName}\n            iconOnly={iconOnly}\n            className={buttonClasses}\n        >\n            {children}\n        </Button>\n    );\n});\n\nexport default DropdownToggleButton;\n"],"names":["DropdownToggleButton","forwardRef","props","ref","id","disabled","iconName","bsSize","bsStyle","variant","splitButton","onClick","toggleButtonType","className","_as","children","outerRef","iconOnly","remainingProps","toggleRef","useMergeRefs","buttonClasses","classNames","labelClasses","tagClasses","jsx","Button"],"mappings":";;;;;AA2BA,MAAMA,IAAuBC,EAG3B,CAACC,GAAOC,MAAQ;AACd,QAAM;AAAA,IACF,IAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,QAAAC;AAAA,IACA,SAAAC;AAAA,IACA,SAAAC;AAAA,IACA,aAAAC,IAAc;AAAA,IACd,SAAAC;AAAA,IACA,kBAAAC,IAAmB;AAAA,IACnB,WAAAC,IAAY;AAAA,IACZ,IAAIC;AAAA,IACJ,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACHhB,GAEEiB,IAAYC,EAAaJ,GAAUb,CAAG,GAEtCkB,IAAgBC,EAAW,CAACZ,KAAe,mBAAmB,CAACA,KAAeG,CAAS,GAEvFU,IAAeD;AAAA,IACjB;AAAA,IACA;AAAA,IACA,SAASd,CAAO;AAAA,IAChB;AAAA,IACA;AAAA,IACAH,KAAY;AAAA,IACZQ;AAAA,EAAA,GAEEW,IAAaF;AAAA,IACf;AAAA,IACA;AAAA,IACA;AAAA,IACAf,MAAW,QAAQ;AAAA,IACnB;AAAA,IACA;AAAA,IACAF,KAAY;AAAA,IACZQ;AAAA,EAAA;AAGJ,SAAID,MAAqB,QAEjB,gBAAAa;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAIP;AAAA,MACL,IAAAd;AAAA,MACA,KAAKe;AAAA,MACL,SAAAR;AAAA,MACA,WAAWa;AAAA,MAEV,UAAAT;AAAA,IAAA;AAAA,EAAA,IAKTH,MAAqB,UAEjB,gBAAAa;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAIP;AAAA,MACL,IAAAd;AAAA,MACA,KAAKe;AAAA,MACL,SAAAR;AAAA,MACA,WAAWY;AAAA,MAEV,UAAAR;AAAA,IAAA;AAAA,EAAA,IAMT,gBAAAU;AAAA,IAACC;AAAA,IAAA;AAAA,MACI,GAAGR;AAAA,MACJ,IAAIR,IAAc,UAAUN,CAAE,KAAKA;AAAA,MACnC,MAAK;AAAA,MACL,KAAKe;AAAA,MACL,UAAAd;AAAA,MACA,SAAAG;AAAA,MACA,QAAAD;AAAA,MACA,SAAAE;AAAA,MACA,SAAAE;AAAA,MACA,UAAAL;AAAA,MACA,UAAAW;AAAA,MACA,WAAWI;AAAA,MAEV,UAAAN;AAAA,IAAA;AAAA,EAAA;AAGb,CAAC;"}

package/components/editableContent/EditableContent.js

@@ -9,7 +9,7 @@ import ue from "../../hooks/useEsc.js";
 import me from "../../hooks/useFocusTrap.js";
 const Ee = -13, he = -18, O = 1, we = (P) => {
   const {
-    show: t = void 0,
+    show: t,
     onSave: S = r,
     onCancel: w = r,
     onFocus: M = r,
@@ -29,7 +29,7 @@ const Ee = -13, he = -18, O = 1, we = (P) => {
     editorClassName: D = "",
     children: A,
     ...L
-  } = P, [i, l] = s(t), [f, h] = s(""), [b, u] = s(!n), [C, j] = s(null), [g, K] = s(null), v = !!E;
+  } = P, [i, l] = s(t), [f, h] = s(""), [b, u] = s(!n), [C, j] = s(null), [g, K] = s(null), y = !!E;
   ue(() => N()), me(g);
   const a = ie(null);
   le(() => {
@@ -51,8 +51,8 @@ const Ee = -13, he = -18, O = 1, we = (P) => {
     )],
     strategy: "absolute"
   }, { styles: B, attributes: H } = pe(C, g, $), U = () => {
-    t === void 0 && y(), F();
-  }, y = () => {
+    t === void 0 && v(), F();
+  }, v = () => {
     l(!0), h(C?.textContent?.trimEnd() ?? ""), u(!1);
   }, X = (e) => {
     h(e.target.value);
@@ -64,7 +64,7 @@ const Ee = -13, he = -18, O = 1, we = (P) => {
     const e = T(f);
     u(!e), e && (l(!1), S(f.trimEnd()));
   }, [G, J] = s(t);
-  t !== G && (t && y(), t || l(!1), J(t));
+  t !== G && (t && v(), t || l(!1), J(t));
   const [Q, Y] = s(n);
   n !== Q && (u(!n), Y(n));
   const Z = p(W, i && "opacity-0"), ee = p(
@@ -99,8 +99,8 @@ const Ee = -13, he = -18, O = 1, we = (P) => {
           ...L,
           children: [
             /* @__PURE__ */ c("div", { className: te, children: [
-              v && E,
-              !v && /* @__PURE__ */ o(
+              y && E,
+              !y && /* @__PURE__ */ o(
                 "textarea",
                 {
                   ref: a,

package/components/editableContent/EditableContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"EditableContent.js","sources":["../../../src/components/editableContent/EditableContent.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect, useMemo, type PropsWithChildren, type CSSProperties } from 'react';\nimport { noop } from 'es-toolkit/function';\nimport { usePopper } from 'react-popper';\nimport { createPortal } from 'react-dom';\nimport type { Options, Rect, StrictModifiers } from '@popperjs/core';\n\nimport classNames from '../../utils/classNames';\nimport { getOrCreatePortalRoot } from '../../utils/portalRoot';\nimport useEsc from '../../hooks/useEsc';\nimport useFocusTrap from '../../hooks/useFocusTrap';\n\n// Features\n// [x] Hide children with opacity 0\n// [x] Allow custom editor elements\n// [x] Use textarea for longer text\n// [x] Use focus trap\n// [x] Keyboard support mit esc and tab+enter to accept\n// [-] If space, get the width of the text to make the input larger - no nice solution\n// [x] Control edit mode from outside\n\n// This offset takes into account the padding of the overlay and the padding/border of the edit component (input).\n// This works best if the text is wrapped within a single <span> tag and has a dotted bottom border only.\n// External offset defined by the using component will be starting from 0 for easier understanding.\nconst POPOVER_OFFSET_TOP = -13;\nconst POPOVER_OFFSET_LEFT = -18;\n\nconst DEFAULT_TEXTAREA_ROWS = 1;\n\nexport type EditableContentProps = {\n    /**\n     * Visibility flag used to control edit mode from outside.\n     *\n     * @default undefined\n     */\n    show?: boolean;\n\n    /**\n     * Callback function triggered when the save button is clicked.\n     *\n     * @param value\n     * @returns\n     */\n    onSave?: (value: string) => void;\n\n    /**\n     * Callback function triggered when the cancel button is clicked.\n     */\n    onCancel?: VoidFunction;\n\n    /**\n     * Callback function triggered when the input gets focused.\n     */\n    onFocus?: VoidFunction;\n\n    /**\n     * Callback function triggered when input looses it's focus.\n     */\n    onBlur?: VoidFunction;\n\n    /**\n     * Callback function triggered when entering the edit mode.\n     */\n    onEditMode?: VoidFunction;\n\n    /**\n     * Validation function to intercept saving and prevent save on error.\n     */\n    onSaveValidation?: (value: string) => boolean;\n\n    /**\n     * Controls the error message visibility from outside. This is useful when using a custom input\n     * where the validation happens outside of this component.\n     * @default true\n     */\n    isValid?: boolean;\n\n    /**\n     * The error message that shall be shown to the user in case the validation fails.\n     */\n    errorMessage?: React.ReactNode;\n\n    /**\n     * Use this prop to define a custom editor input component like Select, NumberInput, TimePicker or DatePicker.\n     * Handling input state changes of a custom editor need to be handled outside of this component.\n     * By default the EditableContent uses a built-in textarea to allow resizing for larger text.\n     */\n    customEditor?: React.ReactNode;\n\n    /**\n     * Offset value to control the vertical position for the editor in case the text element has\n     * borders, spacings different text sizes.\n     *\n     * @default 0\n     */\n    editorOffsetTop?: number;\n\n    /**\n     * Offset value to control the horizontal position for the editor in case the text element has\n     * borders, spacings different text sizes.\n     *\n     * @default 0\n     */\n    editorOffsetLeft?: number;\n\n    /**\n     * Defines the input and button size. Use 'lg' for headlines.\n     *\n     * @default 'md'\n     */\n    size?: 'md' | 'lg';\n\n    /**\n     * Defines if the internal textarea is allowed to resize vertically.\n     * This comes in handy for larger text and when using multiple input rows.\n     *\n     * @default false\n     */\n    allowResize?: boolean;\n\n    /**\n     * Defines the number of rows to use by the internal textarea component.\n     * When a single line is used, the input is saved on \"enter\" key.\n     *\n     * @default 1\n     */\n    inputRows?: number;\n\n    /**\n     * Additional classes to be set on the editor input itself.\n     */\n    inputClassName?: string;\n\n    /**\n     * Additional classes to be set on the editor wrapper element.\n     */\n    editorClassName?: string;\n\n    /**\n     * Additional classes to be set on the text wrapper element.\n     */\n    className?: string;\n};\n\nconst EditableContent = (props: PropsWithChildren<EditableContentProps>) => {\n    const {\n        show = undefined,\n        onSave = noop,\n        onCancel = noop,\n        onFocus = noop,\n        onBlur = noop,\n        onEditMode = noop,\n        onSaveValidation = () => true,\n        isValid = true,\n        errorMessage,\n        allowResize = false,\n        inputRows = DEFAULT_TEXTAREA_ROWS,\n        editorOffsetTop = 0,\n        editorOffsetLeft = 0,\n        customEditor,\n        size = 'md',\n        className = '',\n        inputClassName = '',\n        editorClassName = '',\n        children,\n        ...remainingProps\n    } = props;\n\n    const [isEditMode, setIsEditMode] = useState(show);\n    const [inputValue, setInputValue] = useState('');\n    const [hasError, setHasError] = useState(!isValid);\n\n    const [referenceElement, setReferenceElement] = useState<HTMLSpanElement | null>(null);\n    const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);\n\n    const hasCustomControl = !!customEditor;\n\n    // Close edit mode on \"esc\"\n    useEsc(() => handleCloseEditMode());\n\n    // Trap focus on the popper element\n    useFocusTrap(popperElement);\n\n    // Input ref used to focus inside when entering edit mode\n    const inputRef = useRef<HTMLTextAreaElement>(null);\n\n    useEffect(() => {\n        if (inputRef.current && isEditMode) {\n            inputRef.current?.focus();\n            inputRef.current?.select();\n        }\n    }, [isEditMode, inputRef.current]);\n\n    const customModifier = useMemo(\n        () => ({\n            name: 'offset',\n            options: {\n                offset: ({ reference }: { reference: Rect }) => {\n                    const leftOffset = POPOVER_OFFSET_LEFT + editorOffsetLeft;\n                    const topOffset = -(reference.height - (POPOVER_OFFSET_TOP + editorOffsetTop));\n                    return [leftOffset, topOffset];\n                },\n            },\n        }),\n        []\n    );\n\n    const popperConfig: Options = {\n        placement: 'bottom-start',\n        modifiers: [customModifier],\n        strategy: 'absolute',\n    };\n\n    const { styles, attributes } = usePopper<StrictModifiers>(referenceElement, popperElement, popperConfig);\n\n    const handleEditMode = () => {\n        // In a controlled usage, the \"show\" property is set from the outside\n        // and the edit mode is handled there\n        if (show === undefined) {\n            enterEditMode();\n        }\n        onEditMode();\n    };\n\n    const enterEditMode = () => {\n        setIsEditMode(true);\n        setInputValue(referenceElement?.textContent?.trimEnd() ?? '');\n        setHasError(false);\n    };\n\n    const handleInputChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {\n        setInputValue(event.target.value);\n    };\n\n    const handleKeyDown = (event: React.KeyboardEvent) => {\n        // Prevent line breaks when textarea is a single line\n        if (event.key === 'Enter' && inputRows === DEFAULT_TEXTAREA_ROWS) {\n            event.preventDefault();\n\n            // Save on \"enter\" when textarea has a single line\n            handleSaveChanges();\n        }\n    };\n\n    const handleCloseEditMode = () => {\n        setIsEditMode(false);\n        onCancel();\n    };\n\n    const handleSaveChanges = () => {\n        const isInputValid = onSaveValidation(inputValue);\n        setHasError(!isInputValid);\n\n        if (isInputValid) {\n            setIsEditMode(false);\n            onSave(inputValue.trimEnd());\n        }\n    };\n\n    // Control edit mode from outside for instance if text element got focus\n    // and user used \"Enter\" key to enter edit mode.\n    const [previousShow, setPreviousShow] = useState(show);\n    if (show !== previousShow) {\n        if (show) {\n            enterEditMode();\n        }\n        if (!show) {\n            setIsEditMode(false);\n        }\n        setPreviousShow(show);\n    }\n\n    // Control error message visibility from outside. This is useful when using a custom input\n    // where the validation happens outside of this component.\n    const [previousIsValid, setPreviousIsValid] = useState(isValid);\n    if (isValid !== previousIsValid) {\n        setHasError(!isValid);\n        setPreviousIsValid(isValid);\n    }\n\n    const textWrapperClasses = classNames(className, isEditMode && 'opacity-0');\n\n    const overlayWrapperClasses = classNames(\n        'EditableContentEditor',\n        'display-flex gap-5',\n        'padding-5',\n        'rounded',\n        'shadow-accent',\n        'z-index-max',\n        'bg-white',\n        editorClassName\n    );\n\n    const inputWrapperClasses = classNames(\n        'display-flex flex-column gap-5',\n        'margin-0',\n        'form-group',\n        hasError && 'has-feedback has-error'\n    );\n\n    const inputClasses = classNames('form-control', size === 'lg' && 'input-lg', inputClassName);\n\n    const inputStyle: CSSProperties = {\n        minWidth: '100px',\n        resize: allowResize ? 'vertical' : 'none',\n    };\n\n    return (\n        <>\n            <span ref={setReferenceElement} onClick={handleEditMode} className={textWrapperClasses}>\n                {children}\n            </span>\n            {isEditMode &&\n                createPortal(\n                    <div\n                        className={overlayWrapperClasses}\n                        onClick={event => event.stopPropagation()}\n                        ref={setPopperElement}\n                        style={styles.popper}\n                        {...attributes.popper}\n                        {...remainingProps}\n                    >\n                        <div className={inputWrapperClasses}>\n                            {hasCustomControl && customEditor}\n                            {!hasCustomControl && (\n                                <textarea\n                                    ref={inputRef}\n                                    className={inputClasses}\n                                    value={inputValue}\n                                    onChange={handleInputChange}\n                                    onFocus={onFocus}\n                                    onBlur={onBlur}\n                                    onKeyDown={handleKeyDown}\n                                    style={inputStyle}\n                                    rows={inputRows}\n                                />\n                            )}\n                            {hasError && <div className='help-block position-relative'>{errorMessage}</div>}\n                        </div>\n                        <div className='display-flex gap-5'>\n                            <button\n                                type='button'\n                                onClick={handleCloseEditMode}\n                                className={`EditableContentCancel btn btn-default btn-icon-only btn-${size}`}\n                                aria-label='EditableContent cancel button'\n                                data-testid='EditableContentCancel'\n                            >\n                                <span className='rioglyph rioglyph-remove' />\n                            </button>\n                            <button\n                                type='button'\n                                onClick={handleSaveChanges}\n                                className={`EditableContentSave btn btn-primary btn-icon-only btn-${size}`}\n                                aria-label='EditableContent save button'\n                                data-testid='EditableContentSave'\n                            >\n                                <span className='rioglyph rioglyph-ok' />\n                            </button>\n                        </div>\n                    </div>,\n                    getOrCreatePortalRoot()\n                )}\n        </>\n    );\n};\n\nexport default EditableContent;\n"],"names":["POPOVER_OFFSET_TOP","POPOVER_OFFSET_LEFT","DEFAULT_TEXTAREA_ROWS","EditableContent","props","show","onSave","noop","onCancel","onFocus","onBlur","onEditMode","onSaveValidation","isValid","errorMessage","allowResize","inputRows","editorOffsetTop","editorOffsetLeft","customEditor","size","className","inputClassName","editorClassName","children","remainingProps","isEditMode","setIsEditMode","useState","inputValue","setInputValue","hasError","setHasError","referenceElement","setReferenceElement","popperElement","setPopperElement","hasCustomControl","useEsc","handleCloseEditMode","useFocusTrap","inputRef","useRef","useEffect","popperConfig","useMemo","reference","leftOffset","topOffset","styles","attributes","usePopper","handleEditMode","enterEditMode","handleInputChange","event","handleKeyDown","handleSaveChanges","isInputValid","previousShow","setPreviousShow","previousIsValid","setPreviousIsValid","textWrapperClasses","classNames","overlayWrapperClasses","inputWrapperClasses","inputClasses","inputStyle","jsxs","Fragment","jsx","createPortal","getOrCreatePortalRoot"],"mappings":"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"}
+{"version":3,"file":"EditableContent.js","sources":["../../../src/components/editableContent/EditableContent.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect, useMemo, type PropsWithChildren, type CSSProperties } from 'react';\nimport { noop } from 'es-toolkit/function';\nimport { usePopper } from 'react-popper';\nimport { createPortal } from 'react-dom';\nimport type { Options, Rect, StrictModifiers } from '@popperjs/core';\n\nimport classNames from '../../utils/classNames';\nimport { getOrCreatePortalRoot } from '../../utils/portalRoot';\nimport useEsc from '../../hooks/useEsc';\nimport useFocusTrap from '../../hooks/useFocusTrap';\n\n// Features\n// [x] Hide children with opacity 0\n// [x] Allow custom editor elements\n// [x] Use textarea for longer text\n// [x] Use focus trap\n// [x] Keyboard support mit esc and tab+enter to accept\n// [-] If space, get the width of the text to make the input larger - no nice solution\n// [x] Control edit mode from outside\n\n// This offset takes into account the padding of the overlay and the padding/border of the edit component (input).\n// This works best if the text is wrapped within a single <span> tag and has a dotted bottom border only.\n// External offset defined by the using component will be starting from 0 for easier understanding.\nconst POPOVER_OFFSET_TOP = -13;\nconst POPOVER_OFFSET_LEFT = -18;\n\nconst DEFAULT_TEXTAREA_ROWS = 1;\n\nexport type EditableContentProps = {\n    /**\n     * Visibility flag used to control edit mode from outside.\n     *\n     * @default undefined\n     */\n    show?: boolean;\n\n    /**\n     * Callback function triggered when the save button is clicked.\n     *\n     * @param value\n     * @returns\n     */\n    onSave?: (value: string) => void;\n\n    /**\n     * Callback function triggered when the cancel button is clicked.\n     */\n    onCancel?: VoidFunction;\n\n    /**\n     * Callback function triggered when the input gets focused.\n     */\n    onFocus?: VoidFunction;\n\n    /**\n     * Callback function triggered when input looses it's focus.\n     */\n    onBlur?: VoidFunction;\n\n    /**\n     * Callback function triggered when entering the edit mode.\n     */\n    onEditMode?: VoidFunction;\n\n    /**\n     * Validation function to intercept saving and prevent save on error.\n     */\n    onSaveValidation?: (value: string) => boolean;\n\n    /**\n     * Controls the error message visibility from outside. This is useful when using a custom input\n     * where the validation happens outside of this component.\n     * @default true\n     */\n    isValid?: boolean;\n\n    /**\n     * The error message that shall be shown to the user in case the validation fails.\n     */\n    errorMessage?: React.ReactNode;\n\n    /**\n     * Use this prop to define a custom editor input component like Select, NumberInput, TimePicker or DatePicker.\n     * Handling input state changes of a custom editor need to be handled outside of this component.\n     * By default the EditableContent uses a built-in textarea to allow resizing for larger text.\n     */\n    customEditor?: React.ReactNode;\n\n    /**\n     * Offset value to control the vertical position for the editor in case the text element has\n     * borders, spacings different text sizes.\n     *\n     * @default 0\n     */\n    editorOffsetTop?: number;\n\n    /**\n     * Offset value to control the horizontal position for the editor in case the text element has\n     * borders, spacings different text sizes.\n     *\n     * @default 0\n     */\n    editorOffsetLeft?: number;\n\n    /**\n     * Defines the input and button size. Use 'lg' for headlines.\n     *\n     * @default 'md'\n     */\n    size?: 'md' | 'lg';\n\n    /**\n     * Defines if the internal textarea is allowed to resize vertically.\n     * This comes in handy for larger text and when using multiple input rows.\n     *\n     * @default false\n     */\n    allowResize?: boolean;\n\n    /**\n     * Defines the number of rows to use by the internal textarea component.\n     * When a single line is used, the input is saved on \"enter\" key.\n     *\n     * @default 1\n     */\n    inputRows?: number;\n\n    /**\n     * Additional classes to be set on the editor input itself.\n     */\n    inputClassName?: string;\n\n    /**\n     * Additional classes to be set on the editor wrapper element.\n     */\n    editorClassName?: string;\n\n    /**\n     * Additional classes to be set on the text wrapper element.\n     */\n    className?: string;\n};\n\nconst EditableContent = (props: PropsWithChildren<EditableContentProps>) => {\n    const {\n        show,\n        onSave = noop,\n        onCancel = noop,\n        onFocus = noop,\n        onBlur = noop,\n        onEditMode = noop,\n        onSaveValidation = () => true,\n        isValid = true,\n        errorMessage,\n        allowResize = false,\n        inputRows = DEFAULT_TEXTAREA_ROWS,\n        editorOffsetTop = 0,\n        editorOffsetLeft = 0,\n        customEditor,\n        size = 'md',\n        className = '',\n        inputClassName = '',\n        editorClassName = '',\n        children,\n        ...remainingProps\n    } = props;\n\n    const [isEditMode, setIsEditMode] = useState(show);\n    const [inputValue, setInputValue] = useState('');\n    const [hasError, setHasError] = useState(!isValid);\n\n    const [referenceElement, setReferenceElement] = useState<HTMLSpanElement | null>(null);\n    const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);\n\n    const hasCustomControl = !!customEditor;\n\n    // Close edit mode on \"esc\"\n    useEsc(() => handleCloseEditMode());\n\n    // Trap focus on the popper element\n    useFocusTrap(popperElement);\n\n    // Input ref used to focus inside when entering edit mode\n    const inputRef = useRef<HTMLTextAreaElement>(null);\n\n    useEffect(() => {\n        if (inputRef.current && isEditMode) {\n            inputRef.current?.focus();\n            inputRef.current?.select();\n        }\n    }, [isEditMode, inputRef.current]);\n\n    const customModifier = useMemo(\n        () => ({\n            name: 'offset',\n            options: {\n                offset: ({ reference }: { reference: Rect }) => {\n                    const leftOffset = POPOVER_OFFSET_LEFT + editorOffsetLeft;\n                    const topOffset = -(reference.height - (POPOVER_OFFSET_TOP + editorOffsetTop));\n                    return [leftOffset, topOffset];\n                },\n            },\n        }),\n        []\n    );\n\n    const popperConfig: Options = {\n        placement: 'bottom-start',\n        modifiers: [customModifier],\n        strategy: 'absolute',\n    };\n\n    const { styles, attributes } = usePopper<StrictModifiers>(referenceElement, popperElement, popperConfig);\n\n    const handleEditMode = () => {\n        // In a controlled usage, the \"show\" property is set from the outside\n        // and the edit mode is handled there\n        if (show === undefined) {\n            enterEditMode();\n        }\n        onEditMode();\n    };\n\n    const enterEditMode = () => {\n        setIsEditMode(true);\n        setInputValue(referenceElement?.textContent?.trimEnd() ?? '');\n        setHasError(false);\n    };\n\n    const handleInputChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {\n        setInputValue(event.target.value);\n    };\n\n    const handleKeyDown = (event: React.KeyboardEvent) => {\n        // Prevent line breaks when textarea is a single line\n        if (event.key === 'Enter' && inputRows === DEFAULT_TEXTAREA_ROWS) {\n            event.preventDefault();\n\n            // Save on \"enter\" when textarea has a single line\n            handleSaveChanges();\n        }\n    };\n\n    const handleCloseEditMode = () => {\n        setIsEditMode(false);\n        onCancel();\n    };\n\n    const handleSaveChanges = () => {\n        const isInputValid = onSaveValidation(inputValue);\n        setHasError(!isInputValid);\n\n        if (isInputValid) {\n            setIsEditMode(false);\n            onSave(inputValue.trimEnd());\n        }\n    };\n\n    // Control edit mode from outside for instance if text element got focus\n    // and user used \"Enter\" key to enter edit mode.\n    const [previousShow, setPreviousShow] = useState(show);\n    if (show !== previousShow) {\n        if (show) {\n            enterEditMode();\n        }\n        if (!show) {\n            setIsEditMode(false);\n        }\n        setPreviousShow(show);\n    }\n\n    // Control error message visibility from outside. This is useful when using a custom input\n    // where the validation happens outside of this component.\n    const [previousIsValid, setPreviousIsValid] = useState(isValid);\n    if (isValid !== previousIsValid) {\n        setHasError(!isValid);\n        setPreviousIsValid(isValid);\n    }\n\n    const textWrapperClasses = classNames(className, isEditMode && 'opacity-0');\n\n    const overlayWrapperClasses = classNames(\n        'EditableContentEditor',\n        'display-flex gap-5',\n        'padding-5',\n        'rounded',\n        'shadow-accent',\n        'z-index-max',\n        'bg-white',\n        editorClassName\n    );\n\n    const inputWrapperClasses = classNames(\n        'display-flex flex-column gap-5',\n        'margin-0',\n        'form-group',\n        hasError && 'has-feedback has-error'\n    );\n\n    const inputClasses = classNames('form-control', size === 'lg' && 'input-lg', inputClassName);\n\n    const inputStyle: CSSProperties = {\n        minWidth: '100px',\n        resize: allowResize ? 'vertical' : 'none',\n    };\n\n    return (\n        <>\n            <span ref={setReferenceElement} onClick={handleEditMode} className={textWrapperClasses}>\n                {children}\n            </span>\n            {isEditMode &&\n                createPortal(\n                    <div\n                        className={overlayWrapperClasses}\n                        onClick={event => event.stopPropagation()}\n                        ref={setPopperElement}\n                        style={styles.popper}\n                        {...attributes.popper}\n                        {...remainingProps}\n                    >\n                        <div className={inputWrapperClasses}>\n                            {hasCustomControl && customEditor}\n                            {!hasCustomControl && (\n                                <textarea\n                                    ref={inputRef}\n                                    className={inputClasses}\n                                    value={inputValue}\n                                    onChange={handleInputChange}\n                                    onFocus={onFocus}\n                                    onBlur={onBlur}\n                                    onKeyDown={handleKeyDown}\n                                    style={inputStyle}\n                                    rows={inputRows}\n                                />\n                            )}\n                            {hasError && <div className='help-block position-relative'>{errorMessage}</div>}\n                        </div>\n                        <div className='display-flex gap-5'>\n                            <button\n                                type='button'\n                                onClick={handleCloseEditMode}\n                                className={`EditableContentCancel btn btn-default btn-icon-only btn-${size}`}\n                                aria-label='EditableContent cancel button'\n                                data-testid='EditableContentCancel'\n                            >\n                                <span className='rioglyph rioglyph-remove' />\n                            </button>\n                            <button\n                                type='button'\n                                onClick={handleSaveChanges}\n                                className={`EditableContentSave btn btn-primary btn-icon-only btn-${size}`}\n                                aria-label='EditableContent save button'\n                                data-testid='EditableContentSave'\n                            >\n                                <span className='rioglyph rioglyph-ok' />\n                            </button>\n                        </div>\n                    </div>,\n                    getOrCreatePortalRoot()\n                )}\n        </>\n    );\n};\n\nexport default EditableContent;\n"],"names":["POPOVER_OFFSET_TOP","POPOVER_OFFSET_LEFT","DEFAULT_TEXTAREA_ROWS","EditableContent","props","show","onSave","noop","onCancel","onFocus","onBlur","onEditMode","onSaveValidation","isValid","errorMessage","allowResize","inputRows","editorOffsetTop","editorOffsetLeft","customEditor","size","className","inputClassName","editorClassName","children","remainingProps","isEditMode","setIsEditMode","useState","inputValue","setInputValue","hasError","setHasError","referenceElement","setReferenceElement","popperElement","setPopperElement","hasCustomControl","useEsc","handleCloseEditMode","useFocusTrap","inputRef","useRef","useEffect","popperConfig","useMemo","reference","leftOffset","topOffset","styles","attributes","usePopper","handleEditMode","enterEditMode","handleInputChange","event","handleKeyDown","handleSaveChanges","isInputValid","previousShow","setPreviousShow","previousIsValid","setPreviousIsValid","textWrapperClasses","classNames","overlayWrapperClasses","inputWrapperClasses","inputClasses","inputStyle","jsxs","Fragment","jsx","createPortal","getOrCreatePortalRoot"],"mappings":"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"}

package/components/expander/ExpanderList.d.ts

@@ -1,4 +1,5 @@
 import { default as React } from 'react';
+import { TrackingAttributes } from '../../utils/analytics/googleAnalyticsUtils';
 export type ExpanderListItem = {
     /**
      * The "id" property is used to know which item is expanded. It will also be used to control
@@ -38,6 +39,10 @@ export type ExpanderListItem = {
      * Additional classes to be set on list item node.
      */
     className?: string;
+    /**
+     * Optional tracking attributes (e.g. from `getTrackingAttributes`) added to the item header element.
+     */
+    trackingAttributes?: TrackingAttributes;
 };
 export type ExpanderListProps = {
     /**

package/components/expander/ExpanderList.js

@@ -1,41 +1,50 @@
 import { jsx as o, jsxs as h } from "react/jsx-runtime";
 import { useState as m } from "react";
-import { isEqual as g } from "es-toolkit/predicate";
+import { isEqual as y } from "es-toolkit/predicate";
 import d from "../../utils/classNames.js";
 import f from "../collapse/Collapse.js";
 import { hasBorderClass as I, hasRoundedClass as v } from "../../utils/hasUtilityClass.js";
 const L = () => (Math.random() + 1).toString(36).toUpperCase().substring(2), u = (r) => r.map((s) => (s.id || (s.id = L()), s)), q = (r) => {
-  const { items: s = [], unmountOnExit: n = !0, rounded: t = !0, bordered: N = !0, className: p = "" } = r, [c, i] = m(u(s)), [b, x] = m(s);
-  g(b, s) || (i(u(s)), x(s));
+  const { items: s = [], unmountOnExit: n = !0, rounded: l = !0, bordered: N = !0, className: p = "" } = r, [c, i] = m(u(s)), [b, x] = m(s);
+  y(b, s) || (i(u(s)), x(s));
   const C = (e) => {
     if (!e.body)
       return;
-    const l = [...c].map((a) => (a.id === e.id && (a.onOpen && !a.open && a.onOpen(), a.onClose && a.open && a.onClose(), a.open = !a.open), a));
-    i(l);
-  }, y = d(
+    const t = [...c].map((a) => (a.id === e.id && (a.onOpen && !a.open && a.onOpen(), a.onClose && a.open && a.onClose(), a.open = !a.open), a));
+    i(t);
+  }, g = d(
     "expander-list list-group",
-    t && !v(p) && "rounded",
+    l && !v(p) && "rounded",
     N && !I(p) && "border",
     p
   );
-  return /* @__PURE__ */ o("ul", { className: y, children: c.map((e) => {
-    const l = e.open, a = d(
+  return /* @__PURE__ */ o("ul", { className: g, children: c.map((e) => {
+    const t = e.open, a = d(
       "list-group-item",
       e.className && e.className,
       e.body ? "expandable" : "",
-      l && "open"
+      t && "open"
     );
     return /* @__PURE__ */ h("li", { className: a, children: [
       /* @__PURE__ */ o(E, { item: e, onToggle: C }),
-      e.body && /* @__PURE__ */ o(f, { open: l, unmountOnExit: n, children: /* @__PURE__ */ o("div", { className: "expander-list-body-wrapper", children: /* @__PURE__ */ o(O, { className: e.bodyClassName, children: e.body }) }) })
+      e.body && /* @__PURE__ */ o(f, { open: t, unmountOnExit: n, children: /* @__PURE__ */ o("div", { className: "expander-list-body-wrapper", children: /* @__PURE__ */ o(O, { className: e.bodyClassName, children: e.body }) }) })
     ] }, e.id);
   }) });
 }, E = ({ item: r, onToggle: s }) => {
-  const n = d("expander-list-header", r.headerClassName), t = d("expander-icon", "rioglyph", "rioglyph-chevron-down");
-  return /* @__PURE__ */ h("div", { className: n, onClick: () => s(r), "aria-label": "expander item header", children: [
-    /* @__PURE__ */ o("span", { className: "expander-list-header-content", children: r.header }),
-    r.body && /* @__PURE__ */ o("span", { className: t })
-  ] });
+  const n = d("expander-list-header", r.headerClassName), l = d("expander-icon", "rioglyph", "rioglyph-chevron-down");
+  return /* @__PURE__ */ h(
+    "div",
+    {
+      className: n,
+      onClick: () => s(r),
+      "aria-label": "expander item header",
+      ...r.trackingAttributes,
+      children: [
+        /* @__PURE__ */ o("span", { className: "expander-list-header-content", children: r.header }),
+        r.body && /* @__PURE__ */ o("span", { className: l })
+      ]
+    }
+  );
 }, O = ({ className: r, children: s }) => {
   const n = d("expander-list-body", r);
   return /* @__PURE__ */ o("div", { className: n, "aria-label": "expander item body", children: s });