@rio-cloud/rio-uikit 2.5.0 → 3.0.0-beta.1

package/components/divider/Divider.js.map

@@ -1 +1 @@
-{"version":3,"file":"Divider.js","sources":["../../../src/components/divider/Divider.tsx"],"sourcesContent":["import type React from 'react';\nimport type { PropsWithChildren } from 'react';\n\nimport classNames from '../../utils/classNames';\n\nexport type DividerProps = {\n    /**\n     * The amount of space to either side\n     *\n     * @default 15\n     */\n    spacing?: number;\n\n    /**\n     * Defines the width of the divider line\n     *\n     * @default 1\n     */\n    dividerWidth?: 1 | 2 | 3;\n\n    /**\n     * Defines the color of the divider line\n     *\n     * @default 'light'\n     */\n    dividerColor?: 'darkest' | 'darker' | 'dark' | 'gray' | 'light' | 'lighter' | 'lightest';\n\n    /**\n     * Use the component as a spacer element without the divider line\n     *\n     * @default false\n     */\n    asSpacer?: boolean;\n\n    /**\n     * Set the orientation for the divider line to vertical.\n     * This may be useful for button toolbars or elements on a single row.\n     *\n     * @default false\n     */\n    vertical?: boolean;\n\n    /**\n     * Defines where the children are aligned on the divider line\n     *\n     * @default 'center'\n     */\n    titleAlignment?: 'left' | 'center' | 'right';\n\n    /**\n     * Additional classes added to the wrapping element.\n     */\n    className?: string;\n};\n\nconst Divider = (props: PropsWithChildren<DividerProps>) => {\n    const {\n        spacing = 15,\n        dividerWidth = 1,\n        dividerColor = 'light',\n        asSpacer = false,\n        vertical = false,\n        titleAlignment = 'center',\n        className = '',\n        children,\n    } = props;\n\n    const classes = classNames('Divider', 'position-relative', !vertical && 'width-100pct', className);\n\n    const spacingValue = `${spacing}px`;\n    const wrapperStyle: React.CSSProperties = {};\n\n    if (vertical) {\n        wrapperStyle.paddingLeft = spacingValue;\n        wrapperStyle.paddingRight = spacingValue;\n    }\n\n    if (!vertical) {\n        wrapperStyle.paddingTop = spacingValue;\n        wrapperStyle.paddingBottom = spacingValue;\n    }\n\n    const dividerLineClasses = classNames('divider-line', `bg-${dividerColor}`);\n\n    const isStringTitle = typeof children === 'string';\n\n    const line = (\n        <div\n            className={dividerLineClasses}\n            style={{\n                width: vertical ? `${dividerWidth}px` : '100%',\n                height: vertical ? '100%' : `${dividerWidth}px`,\n            }}\n        />\n    );\n\n    const titleLine = <div className='flex-1-0'>{line}</div>;\n    const title = <div className={isStringTitle ? 'padding-x-10' : ''}>{children}</div>;\n\n    const dividerTitleClasses = classNames('divider-title', 'display-flex', 'align-items-center');\n\n    return (\n        <div className={classes} style={wrapperStyle}>\n            {!asSpacer && !children && line}\n            {children && (\n                <div className={dividerTitleClasses}>\n                    {titleAlignment === 'left' && (\n                        <>\n                            {title}\n                            {titleLine}\n                        </>\n                    )}\n                    {titleAlignment === 'center' && (\n                        <>\n                            {titleLine}\n                            {title}\n                            {titleLine}\n                        </>\n                    )}\n                    {titleAlignment === 'right' && (\n                        <>\n                            {titleLine}\n                            {title}\n                        </>\n                    )}\n                </div>\n            )}\n        </div>\n    );\n};\n\nexport default Divider;\n"],"names":["Divider","props","spacing","dividerWidth","dividerColor","asSpacer","vertical","titleAlignment","className","children","classes","classNames","spacingValue","wrapperStyle","dividerLineClasses","isStringTitle","line","jsx","titleLine","title","dividerTitleClasses","jsxs","Fragment"],"mappings":";;AAuDA,MAAMA,IAAU,CAACC,MAA2C;AACxD,QAAM;AAAA,IACF,SAAAC,IAAU;AAAA,IACV,cAAAC,IAAe;AAAA,IACf,cAAAC,IAAe;AAAA,IACf,UAAAC,IAAW;AAAA,IACX,UAAAC,IAAW;AAAA,IACX,gBAAAC,IAAiB;AAAA,IACjB,WAAAC,IAAY;AAAA,IACZ,UAAAC;AAAA,EAAA,IACAR,GAEES,IAAUC,EAAW,WAAW,qBAAqB,CAACL,KAAY,gBAAgBE,CAAS,GAE3FI,IAAe,GAAGV,CAAO,MACzBW,IAAoC,CAAA;AAE1C,EAAIP,MACAO,EAAa,cAAcD,GAC3BC,EAAa,eAAeD,IAG3BN,MACDO,EAAa,aAAaD,GAC1BC,EAAa,gBAAgBD;AAGjC,QAAME,IAAqBH,EAAW,gBAAgB,MAAMP,CAAY,EAAE,GAEpEW,IAAgB,OAAON,KAAa,UAEpCO,IACF,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAWH;AAAA,MACX,OAAO;AAAA,QACH,OAAOR,IAAW,GAAGH,CAAY,OAAO;AAAA,QACxC,QAAQG,IAAW,SAAS,GAAGH,CAAY;AAAA,MAAA;AAAA,IAC/C;AAAA,EAAA,GAIFe,IAAY,gBAAAD,EAAC,OAAA,EAAI,WAAU,YAAY,UAAAD,GAAK,GAC5CG,IAAQ,gBAAAF,EAAC,OAAA,EAAI,WAAWF,IAAgB,iBAAiB,IAAK,UAAAN,GAAS,GAEvEW,IAAsBT,EAAW,iBAAiB,gBAAgB,oBAAoB;AAE5F,SACI,gBAAAU,EAAC,OAAA,EAAI,WAAWX,GAAS,OAAOG,GAC3B,UAAA;AAAA,IAAA,CAACR,KAAY,CAACI,KAAYO;AAAA,IAC1BP,KACG,gBAAAY,EAAC,OAAA,EAAI,WAAWD,GACX,UAAA;AAAA,MAAAb,MAAmB,UAChB,gBAAAc,EAAAC,GAAA,EACK,UAAA;AAAA,QAAAH;AAAA,QACAD;AAAA,MAAA,GACL;AAAA,MAEHX,MAAmB,YAChB,gBAAAc,EAAAC,GAAA,EACK,UAAA;AAAA,QAAAJ;AAAA,QACAC;AAAA,QACAD;AAAA,MAAA,GACL;AAAA,MAEHX,MAAmB,WAChB,gBAAAc,EAAAC,GAAA,EACK,UAAA;AAAA,QAAAJ;AAAA,QACAC;AAAA,MAAA,EAAA,CACL;AAAA,IAAA,EAAA,CAER;AAAA,EAAA,GAER;AAER;"}
+{"version":3,"file":"Divider.js","names":[],"sources":["../../../src/components/divider/Divider.tsx"],"sourcesContent":["import type React from 'react';\nimport type { PropsWithChildren } from 'react';\n\nimport classNames from '../../utils/classNames';\n\nexport type DividerProps = {\n    /**\n     * The amount of space to either side\n     *\n     * @default 15\n     */\n    spacing?: number;\n\n    /**\n     * Defines the width of the divider line\n     *\n     * @default 1\n     */\n    dividerWidth?: 1 | 2 | 3;\n\n    /**\n     * Defines the color of the divider line\n     *\n     * @default 'light'\n     */\n    dividerColor?: 'darkest' | 'darker' | 'dark' | 'gray' | 'light' | 'lighter' | 'lightest';\n\n    /**\n     * Use the component as a spacer element without the divider line\n     *\n     * @default false\n     */\n    asSpacer?: boolean;\n\n    /**\n     * Set the orientation for the divider line to vertical.\n     * This may be useful for button toolbars or elements on a single row.\n     *\n     * @default false\n     */\n    vertical?: boolean;\n\n    /**\n     * Defines where the children are aligned on the divider line\n     *\n     * @default 'center'\n     */\n    titleAlignment?: 'left' | 'center' | 'right';\n\n    /**\n     * Additional classes added to the wrapping element.\n     */\n    className?: string;\n};\n\nconst Divider = (props: PropsWithChildren<DividerProps>) => {\n    const {\n        spacing = 15,\n        dividerWidth = 1,\n        dividerColor = 'light',\n        asSpacer = false,\n        vertical = false,\n        titleAlignment = 'center',\n        className = '',\n        children,\n    } = props;\n\n    const classes = classNames('Divider', 'position-relative', !vertical && 'width-100pct', className);\n\n    const spacingValue = `${spacing}px`;\n    const wrapperStyle: React.CSSProperties = {};\n\n    if (vertical) {\n        wrapperStyle.paddingLeft = spacingValue;\n        wrapperStyle.paddingRight = spacingValue;\n    }\n\n    if (!vertical) {\n        wrapperStyle.paddingTop = spacingValue;\n        wrapperStyle.paddingBottom = spacingValue;\n    }\n\n    const dividerLineClasses = classNames('divider-line', `bg-${dividerColor}`);\n\n    const isStringTitle = typeof children === 'string';\n\n    const line = (\n        <div\n            className={dividerLineClasses}\n            style={{\n                width: vertical ? `${dividerWidth}px` : '100%',\n                height: vertical ? '100%' : `${dividerWidth}px`,\n            }}\n        />\n    );\n\n    const titleLine = <div className='flex-1-0'>{line}</div>;\n    const title = <div className={isStringTitle ? 'padding-x-10' : ''}>{children}</div>;\n\n    const dividerTitleClasses = classNames('divider-title', 'display-flex', 'align-items-center');\n\n    return (\n        <div className={classes} style={wrapperStyle}>\n            {!asSpacer && !children && line}\n            {children && (\n                <div className={dividerTitleClasses}>\n                    {titleAlignment === 'left' && (\n                        <>\n                            {title}\n                            {titleLine}\n                        </>\n                    )}\n                    {titleAlignment === 'center' && (\n                        <>\n                            {titleLine}\n                            {title}\n                            {titleLine}\n                        </>\n                    )}\n                    {titleAlignment === 'right' && (\n                        <>\n                            {titleLine}\n                            {title}\n                        </>\n                    )}\n                </div>\n            )}\n        </div>\n    );\n};\n\nexport default Divider;\n"],"mappings":";;;AAuDA,IAAM,KAAW,MAA2C;CACxD,IAAM,EACF,aAAU,IACV,kBAAe,GACf,kBAAe,SACf,cAAW,IACX,cAAW,IACX,oBAAiB,UACjB,eAAY,IACZ,gBACA,GAEE,IAAU,EAAW,WAAW,qBAAqB,CAAC,KAAY,gBAAgB,CAAS,GAE3F,IAAe,GAAG,EAAQ,KAC1B,IAAoC,CAAC;CAO3C,AALI,MACA,EAAa,cAAc,GAC3B,EAAa,eAAe,IAG3B,MACD,EAAa,aAAa,GAC1B,EAAa,gBAAgB;CAGjC,IAAM,IAAqB,EAAW,gBAAgB,MAAM,GAAc,GAEpE,IAAgB,OAAO,KAAa,UAEpC,IACF,kBAAC,OAAD;EACI,WAAW;EACX,OAAO;GACH,OAAO,IAAW,GAAG,EAAa,MAAM;GACxC,QAAQ,IAAW,SAAS,GAAG,EAAa;EAChD;CACH,CAAA,GAGC,IAAY,kBAAC,OAAD;EAAK,WAAU;YAAY;CAAU,CAAA,GACjD,IAAQ,kBAAC,OAAD;EAAK,WAAW,IAAgB,iBAAiB;EAAK;CAAc,CAAA,GAE5E,IAAsB,EAAW,iBAAiB,gBAAgB,oBAAoB;CAE5F,OACI,kBAAC,OAAD;EAAK,WAAW;EAAS,OAAO;YAAhC,CACK,CAAC,KAAY,CAAC,KAAY,GAC1B,KACG,kBAAC,OAAD;GAAK,WAAW;aAAhB;IACK,MAAmB,UAChB,kBAAA,GAAA,EAAA,UAAA,CACK,GACA,CACH,EAAA,CAAA;IAEL,MAAmB,YAChB,kBAAA,GAAA,EAAA,UAAA;KACK;KACA;KACA;IACH,EAAA,CAAA;IAEL,MAAmB,WAChB,kBAAA,GAAA,EAAA,UAAA,CACK,GACA,CACH,EAAA,CAAA;GAEL;IAER;;AAEb"}

package/components/dropdown/ButtonDropdown.d.ts

@@ -3,6 +3,7 @@ import { DropdownToggleEvent, DropdownToggleButtonType } from './DropdownToggleB
 import { MenuItemProps as MenuItem } from '../menuItems/MenuItem';
 import { BUTTON_SIZE, BUTTON_STYLE, BUTTON_VARIANT } from '../button/Button';
 import { TrackingAttributes } from '../../utils/analytics/googleAnalyticsUtils';
+import { IconType } from '../icon/Icon';
 export type ButtonDropdownProps<T extends DropdownToggleButtonType = 'button'> = {
     /**
      * Unique button id. If not present a random id is generated.
@@ -13,9 +14,9 @@ export type ButtonDropdownProps<T extends DropdownToggleButtonType = 'button'> =
      */
     'aria-label'?: string;
     /**
-     * The button title. This may be also a node, like a <span> or a <FormattedMessage>.
+     * The optional button title. This may be also a node, like a <span> or a <FormattedMessage>.
      */
-    title: string | React.ReactNode;
+    title?: string | React.ReactNode;
     /**
      * Defined weather or not the menu is rendered.
      * Use this to control the component from the outside.
@@ -24,8 +25,8 @@ export type ButtonDropdownProps<T extends DropdownToggleButtonType = 'button'> =
      */
     open?: boolean;
     /**
-     * Defines whether the dropdown opens above or below.
-     * Set it to "true" additionally disables the automatic position feature.
+     * Defines whether the dropdown prefers to open above the toggle button.
+     * The dropdown can still fall back to another position when there is not enough space.
      *
      * @default false
      */
@@ -71,9 +72,9 @@ export type ButtonDropdownProps<T extends DropdownToggleButtonType = 'button'> =
      */
     iconOnly?: boolean;
     /**
-     * Optional rioglyph icon name forwarded to the underlying button toggle.
+     * Optional uikit-icon icon name forwarded to the underlying button toggle.
      */
-    iconName?: string;
+    iconName?: IconType;
     /**
      * Defines whether the caret is shown or not.
      *
@@ -86,12 +87,6 @@ export type ButtonDropdownProps<T extends DropdownToggleButtonType = 'button'> =
      * @default false
      */
     splitButton?: boolean;
-    /**
-     * Renders the dropdown into a dedicated react portal
-     *
-     * @default false
-     */
-    usePortal?: boolean;
     /**
      * Items to display in the dropdown menu. If you use a custom dropdown you can skip this prop.
      */
@@ -121,10 +116,6 @@ export type ButtonDropdownProps<T extends DropdownToggleButtonType = 'button'> =
      * Allows to pass in custom dropdown menu content.
      */
     customDropdown?: React.ReactNode;
-    /**
-     * Define custom popper.js configuration for dropdown placement and modifiers.
-     */
-    popperConfig?: object;
     /**
      * Additional classes to be set on the dropdown-toggle button.
      */

package/components/dropdown/ButtonDropdown.js

@@ -1,128 +1,83 @@
-import { jsx as p, jsxs as h } from "react/jsx-runtime";
-import { forwardRef as ao, useState as c, useEffect as io } from "react";
-import po from "react-dom";
-import { usePopper as co } from "react-popper";
-import { noop as d } from "es-toolkit/function";
-import { isNil as fo } from "es-toolkit/predicate";
-import P from "../../utils/classNames.js";
-import { getOrCreatePortalRoot as mo } from "../../utils/portalRoot.js";
-import uo, { DEFAULT_EVENT_TYPES as go } from "../../hooks/useClickOutside.js";
-import wo from "../menuItems/MenuItems.js";
-import Co from "../menuItems/MenuItemList.js";
-import bo from "./DropdownToggleButton.js";
-import Bo from "./SplitCaretButton.js";
-import Do from "./Caret.js";
-const No = (r, s) => r && s ? "top-end" : !r && s ? "top-start" : r && !s ? "bottom-end" : "bottom-start", Oo = () => ao((r, s) => {
-  const {
-    id: g = Math.random().toString(36).slice(2, 16),
-    "aria-label": R,
-    items: T = [],
-    bsSize: w = "md",
-    bsStyle: C = "default",
-    variant: k,
-    disabled: b = !1,
-    iconName: y,
-    iconOnly: B = !1,
-    title: E,
-    splitButton: t = !1,
-    customDropdown: D,
-    open: e,
-    dropup: L = !1,
-    pullRight: f = !1,
-    noCaret: x = !1,
-    onOpen: I = d,
-    onClose: j = d,
-    onLabelButtonClick: A = d,
-    usePortal: l = !1,
-    popperConfig: U,
-    toggleButtonType: _ = "button",
-    toggleClassName: N = "",
-    trackingAttributes: v,
-    dropdownClassName: z,
-    className: F = "",
-    ...V
-  } = r, [O, m] = c(e), [Y, q] = c(null), [S, G] = c(null), [H, J] = c(null), K = {
-    placement: No(f, L),
-    modifiers: []
-  }, Q = t && f ? H : Y, { styles: W, attributes: X } = co(Q, S, U || K), n = fo(e), a = n ? O : e, Z = uo(
-    (o) => {
-      l && S?.contains(o.target) || i();
-    },
-    go,
-    !!a
-    // only listen to clicks outside when the dropdown is open
-  ), $ = mo(), oo = !x && !t && !B;
-  io(() => {
-    n || m(e);
-  }, [n, e]);
-  const u = (o) => {
-    (n ? O : e) ? i() : to(o);
-  }, to = (o) => {
-    n && m(!0), o && I(o);
-  }, i = () => {
-    n && m(!1), j();
-  }, eo = () => {
-    i(), A();
-  }, no = (o) => {
-    u(o);
-  }, ro = (o) => {
-    t ? eo() : u(o);
-  }, so = P("dropdown", "btn-group", a && "open", F), lo = P(
-    l && "dropdown-portal",
-    t && f && "pull-right",
-    z
-  ), M = /* @__PURE__ */ p(
-    Co,
-    {
-      className: lo,
-      ref: G,
-      style: W.popper,
-      ...X.popper,
-      children: D || /* @__PURE__ */ p(wo, { items: T, closeMenu: u })
-    }
-  );
-  return /* @__PURE__ */ h("div", { ...V, className: so, ref: Z, children: [
-    /* @__PURE__ */ h(
-      bo,
-      {
-        id: g,
-        "aria-label": R,
-        splitButton: t,
-        bsStyle: C,
-        bsSize: w,
-        variant: k,
-        iconOnly: B,
-        iconName: y,
-        disabled: b,
-        ref: q,
-        onClick: ro,
-        outerRef: s,
-        toggleButtonType: _,
-        className: N,
-        trackingAttributes: v,
-        children: [
-          E,
-          oo && /* @__PURE__ */ p(Do, {})
-        ]
-      }
-    ),
-    t && /* @__PURE__ */ p(
-      Bo,
-      {
-        id: g,
-        bsStyle: C,
-        bsSize: w,
-        disabled: b,
-        className: N,
-        onClick: no,
-        ref: J
-      }
-    ),
-    a && l && po.createPortal(M, $),
-    a && !l && M
-  ] });
-}), _o = Oo();
-export {
-  _o as default
-};
-//# sourceMappingURL=ButtonDropdown.js.map
+import e, { DEFAULT_EVENT_TYPES as t } from "../../hooks/useClickOutside.js";
+import n from "../../utils/classNames.js";
+import r from "../menuItems/MenuItemList.js";
+import { useAnchorName as i, usePopover as a } from "../../hooks/useAnchoredPopover.js";
+import o from "../menuItems/MenuItems.js";
+import s from "./DropdownToggleButton.js";
+import c from "./Caret.js";
+import l from "./SplitCaretButton.js";
+import { forwardRef as u, useEffect as d, useState as f } from "react";
+import { noop as p } from "es-toolkit/function";
+import { isNil as m } from "es-toolkit/predicate";
+import { jsx as h, jsxs as g } from "react/jsx-runtime";
+var _ = u((u, _) => {
+	let { id: v = Math.random().toString(36).slice(2, 16), "aria-label": y, items: b = [], bsSize: x = "md", bsStyle: S = "default", variant: C, disabled: w = !1, iconName: ee, iconOnly: T = !1, title: E, splitButton: D = !1, customDropdown: O, open: k, dropup: A = !1, pullRight: j = !1, noCaret: M = !1, onOpen: N = p, onClose: P = p, onLabelButtonClick: F = p, toggleButtonType: I = "button", toggleClassName: L = "", trackingAttributes: R, dropdownClassName: z, className: te = "", ...B } = u, [V, H] = f(k), [U, W] = f(null), G = i("button-dropdown"), K = { anchorName: G }, q = { positionAnchor: G }, J = m(k), Y = J ? V : k, X = e((e) => {
+		U?.contains(e.target) || $();
+	}, t, !!Y), Z = !M && !D && !T;
+	d(() => {
+		J || H(k);
+	}, [J, k]);
+	let Q = (e) => {
+		(J ? V : k) ? $() : ne(e);
+	}, ne = (e) => {
+		J && H(!0), e && N(e);
+	}, $ = () => {
+		J && H(!1), P();
+	};
+	a(U, Y);
+	let re = () => {
+		$(), F();
+	}, ie = (e) => {
+		Q(e);
+	}, ae = (e) => {
+		D ? re() : Q(e);
+	}, oe = n("dropdown", "btn-group", A && "dropup", Y && "open", te), se = /* @__PURE__ */ h(r, {
+		className: n(z),
+		pullRight: j,
+		ref: W,
+		popover: "manual",
+		style: q,
+		children: O || /* @__PURE__ */ h(o, {
+			items: b,
+			closeMenu: Q
+		})
+	});
+	return /* @__PURE__ */ g("div", {
+		...B,
+		className: oe,
+		ref: X,
+		style: K,
+		children: [
+			/* @__PURE__ */ g(s, {
+				id: v,
+				"aria-label": y,
+				splitButton: D,
+				bsStyle: S,
+				bsSize: x,
+				variant: C,
+				iconOnly: T,
+				iconName: ee,
+				disabled: w,
+				onClick: ae,
+				outerRef: _,
+				toggleButtonType: I,
+				className: L,
+				trackingAttributes: R,
+				children: [E, Z && /* @__PURE__ */ h(c, {})]
+			}),
+			D && /* @__PURE__ */ h(l, {
+				id: v,
+				bsStyle: S,
+				bsSize: x,
+				disabled: w,
+				className: L,
+				onClick: ie
+			}),
+			Y && se
+		]
+	});
+});
+//#endregion
+export { _ 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';\nimport type { TrackingAttributes } from '../../utils/analytics/googleAnalyticsUtils';\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     * Accessible label applied to the dropdown toggle button.\n     */\n    'aria-label'?: 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     * Optional tracking attributes added to the dropdown toggle button.\n     */\n    trackingAttributes?: TrackingAttributes;\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            'aria-label': ariaLabel,\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            trackingAttributes,\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                    aria-label={ariaLabel}\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                    trackingAttributes={trackingAttributes}\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","ariaLabel","items","bsSize","bsStyle","variant","disabled","iconName","iconOnly","title","splitButton","customDropdown","open","noCaret","onOpen","noop","onClose","onLabelButtonClick","usePortal","popperConfig","toggleButtonType","toggleClassName","trackingAttributes","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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"}
+{"version":3,"file":"ButtonDropdown.js","names":[],"sources":["../../../src/components/dropdown/ButtonDropdown.tsx"],"sourcesContent":["import React, { useState, useEffect, forwardRef, type CSSProperties, type PropsWithChildren } from 'react';\nimport { noop } from 'es-toolkit/function';\nimport { isNil } from 'es-toolkit/predicate';\n\nimport classNames from '../../utils/classNames';\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';\nimport type { TrackingAttributes } from '../../utils/analytics/googleAnalyticsUtils';\nimport { useAnchorName, usePopover } from '../../hooks/useAnchoredPopover';\nimport type { IconType } from '../icon/Icon';\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     * Accessible label applied to the dropdown toggle button.\n     */\n    'aria-label'?: string;\n\n    /**\n     * The optional 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 prefers to open above the toggle button.\n     * The dropdown can still fall back to another position when there is not enough space.\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 uikit-icon icon name forwarded to the underlying button toggle.\n     */\n    iconName?: IconType;\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     * 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     * Additional classes to be set on the dropdown-toggle button.\n     */\n    toggleClassName?: string;\n\n    /**\n     * Optional tracking attributes added to the dropdown toggle button.\n     */\n    trackingAttributes?: TrackingAttributes;\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            'aria-label': ariaLabel,\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            toggleButtonType = 'button',\n            toggleClassName = '',\n            trackingAttributes,\n            dropdownClassName,\n            className = '',\n            ...remainingProps\n        } = props;\n\n        const [internalOpen, setInternalOpen] = useState(open);\n\n        const [refDropdownMenu, setRefDropdownMenu] = useState<HTMLUListElement | null>(null);\n\n        const anchorName = useAnchorName('button-dropdown');\n\n        const wrapperStyle = {\n            anchorName,\n        } as CSSProperties;\n\n        const dropdownStyle = {\n            positionAnchor: anchorName,\n        } as CSSProperties;\n\n        const isUncontrolled = isNil(open);\n        const isOpen = isUncontrolled ? internalOpen : open;\n\n        const wrapperRef = useClickOutside(\n            event => {\n                // The native Popover API renders the dropdown menu in the top layer, so the menu is not considered\n                // inside the wrapper for hit testing. Keep clicks inside the menu from closing the dropdown.\n                if (!refDropdownMenu?.contains(event.target as Node)) {\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 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        usePopover(refDropdownMenu, isOpen);\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', dropup && 'dropup', isOpen && 'open', className);\n\n        const dropdownClasses = classNames(dropdownClassName);\n\n        const dropdownMenu = (\n            <MenuItemList\n                className={dropdownClasses}\n                pullRight={pullRight}\n                ref={setRefDropdownMenu}\n                {...({ popover: 'manual' } as React.HTMLAttributes<HTMLUListElement>)}\n                style={dropdownStyle}\n            >\n                {customDropdown ? customDropdown : <MenuItems items={items} closeMenu={toggleOpen} />}\n            </MenuItemList>\n        );\n\n        return (\n            <div {...remainingProps} className={wrapperClasses} ref={wrapperRef} style={wrapperStyle}>\n                <DropdownToggleButton\n                    id={id}\n                    aria-label={ariaLabel}\n                    splitButton={splitButton}\n                    bsStyle={bsStyle}\n                    bsSize={bsSize}\n                    variant={variant}\n                    iconOnly={iconOnly}\n                    iconName={iconName}\n                    disabled={disabled}\n                    onClick={handleDropdownButtonClick}\n                    outerRef={ref}\n                    toggleButtonType={toggleButtonType}\n                    className={toggleClassName}\n                    trackingAttributes={trackingAttributes}\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                    />\n                )}\n                {isOpen && dropdownMenu}\n            </div>\n        );\n    });\n};\n\nconst ButtonDropdown = createButtonDropdown();\n\nexport default ButtonDropdown;\n"],"mappings":";;;;;;;;;;;;AAkVA,IAAM,IAvKK,GAGJ,GAAO,MAAQ;CACd,IAAM,EACF,QAAK,KAAK,OAAO,CAAC,CAAC,SAAS,EAAE,CAAC,CAAC,MAAM,GAAG,EAAE,GAC3C,cAAc,GACd,WAAQ,CAAC,GACT,YAAS,MACT,aAAU,WACV,YACA,cAAW,IACX,cACA,cAAW,IACX,UACA,iBAAc,IACd,mBACA,SACA,YAAS,IACT,eAAY,IACZ,aAAU,IACV,YAAS,GACT,aAAU,GACV,wBAAqB,GACrB,sBAAmB,UACnB,qBAAkB,IAClB,uBACA,sBACA,gBAAY,IACZ,GAAG,MACH,GAEE,CAAC,GAAc,KAAmB,EAAS,CAAI,GAE/C,CAAC,GAAiB,KAAsB,EAAkC,IAAI,GAE9E,IAAa,EAAc,iBAAiB,GAE5C,IAAe,EACjB,cACJ,GAEM,IAAgB,EAClB,gBAAgB,EACpB,GAEM,IAAiB,EAAM,CAAI,GAC3B,IAAS,IAAiB,IAAe,GAEzC,IAAa,GACf,MAAS;EAGL,AAAK,GAAiB,SAAS,EAAM,MAAc,KAC/C,EAAU;CAElB,GACA,GACA,EAAQ,CACZ,GAEM,IAAkB,CAAC,KAAW,CAAC,KAAe,CAAC;CAErD,QAAgB;EACZ,AAAK,KACD,EAAgB,CAAI;CAE5B,GAAG,CAAC,GAAgB,CAAI,CAAC;CAEzB,IAAM,KAAc,MAAmC;EAGnD,CAFuB,IAAiB,IAAe,KAGnD,EAAU,IAEV,GAAS,CAAK;CAEtB,GAEM,MAAY,MAAmC;EAIjD,AAHI,KACA,EAAgB,EAAI,GAEpB,KACA,EAAO,CAAK;CAEpB,GAEM,UAAkB;EAIpB,AAHI,KACA,EAAgB,EAAK,GAEzB,EAAQ;CACZ;CAEA,EAAW,GAAiB,CAAM;CAElC,IAAM,WAAoC;EAEtC,AADA,EAAU,GACV,EAAmB;CACvB,GAEM,MAA+B,MAA+C;EAChF,EAAW,CAA+B;CAC9C,GAEM,MAA6B,MAAgE;EAC/F,AAAI,IACA,GAA4B,IAE5B,EAAW,CAA+B;CAElD,GAEM,KAAiB,EAAW,YAAY,aAAa,KAAU,UAAU,KAAU,QAAQ,EAAS,GAIpG,KACF,kBAAC,GAAD;EACI,WAJgB,EAAW,CAIhB;EACA;EACX,KAAK;EACE,SAAS;EAChB,OAAO;YAEN,KAAkC,kBAAC,GAAD;GAAkB;GAAO,WAAW;EAAa,CAAA;CAC1E,CAAA;CAGlB,OACI,kBAAC,OAAD;EAAK,GAAI;EAAgB,WAAW;EAAgB,KAAK;EAAY,OAAO;YAA5E;GACI,kBAAC,GAAD;IACQ;IACJ,cAAY;IACC;IACJ;IACD;IACC;IACC;IACA;IACA;IACV,SAAS;IACT,UAAU;IACQ;IAClB,WAAW;IACS;cAdxB,CAgBK,GACA,KAAmB,kBAAC,GAAD,CAAQ,CAAA,CACV;;GACrB,KACG,kBAAC,GAAD;IACQ;IACK;IACD;IACE;IACV,WAAW;IACX,SAAS;GACZ,CAAA;GAEJ,KAAU;EACV;;AAEb,CAAC"}

package/components/dropdown/Caret.js

@@ -1,6 +1,7 @@
-import { jsx as a } from "react/jsx-runtime";
-const t = () => /* @__PURE__ */ a("span", { className: "caret" });
-export {
-  t as default
-};
-//# sourceMappingURL=Caret.js.map
+import { jsx as e } from "react/jsx-runtime";
+//#region src/components/dropdown/Caret.tsx
+var t = () => /* @__PURE__ */ e("span", { className: "caret" });
+//#endregion
+export { t as default };
+
+//# sourceMappingURL=Caret.js.map

package/components/dropdown/Caret.js.map

@@ -1 +1 @@
-{"version":3,"file":"Caret.js","sources":["../../../src/components/dropdown/Caret.tsx"],"sourcesContent":["const Caret = () => <span className='caret' />;\n\nexport default Caret;\n"],"names":["Caret","jsx"],"mappings":";AAAA,MAAMA,IAAQ,MAAM,gBAAAC,EAAC,QAAA,EAAK,WAAU,QAAA,CAAQ;"}
+{"version":3,"file":"Caret.js","names":[],"sources":["../../../src/components/dropdown/Caret.tsx"],"sourcesContent":["const Caret = () => <span className='caret' />;\n\nexport default Caret;\n"],"mappings":";;AAAA,IAAM,UAAc,kBAAC,QAAD,EAAM,WAAU,QAAS,CAAA"}

package/components/dropdown/DropdownSubmenu.js

@@ -1,40 +1,34 @@
-import { jsxs as r, jsx as e } from "react/jsx-runtime";
-import { useState as s } from "react";
-import { usePopper as g } from "react-popper";
-import v from "../../utils/classNames.js";
-import w from "../menuItems/MenuItems.js";
-import x from "../menuItems/MenuItemList.js";
-const E = (n) => {
-  const { title: a = "", items: l = [], disabled: t = !1, className: m, ...i } = n, p = v("dropdown-submenu", t && "disabled", m), [u, c] = s(null), [f, d] = s(null), [h, o] = s(!1), b = () => o(!0), M = () => o(!1), { styles: N, attributes: P } = g(u, f, {
-    placement: "right-start",
-    modifiers: [
-      {
-        name: "offset",
-        options: {
-          offset: [-4, 0]
-        }
-      }
-    ]
-  });
-  return /* @__PURE__ */ r(
-    "li",
-    {
-      ref: c,
-      ...i,
-      className: p,
-      onMouseEnter: b,
-      onMouseLeave: M,
-      children: [
-        /* @__PURE__ */ r("a", { className: "submenu-title", role: "menuitem", children: [
-          /* @__PURE__ */ e("span", { className: "submenu-title-text", children: a }),
-          /* @__PURE__ */ e("span", { className: "rioglyph rioglyph-chevron-right" })
-        ] }),
-        h && !t && /* @__PURE__ */ e(x, { ref: d, style: N.popper, ...P.popper, children: /* @__PURE__ */ e(w, { items: l }) })
-      ]
-    }
-  );
+import e from "../../utils/classNames.js";
+import t from "../menuItems/MenuItemList.js";
+import { useAnchorName as n, usePopover as r } from "../../hooks/useAnchoredPopover.js";
+import i from "../menuItems/MenuItems.js";
+import { useRef as a, useState as o } from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region src/components/dropdown/DropdownSubmenu.tsx
+var l = (l) => {
+	let { title: u = "", items: d = [], disabled: f = !1, className: p, ...m } = l, h = e("dropdown-submenu", f && "disabled", p), g = n("dropdown-submenu"), _ = { anchorName: g }, v = { positionAnchor: g }, [y, b] = o(!1), x = a(null), S = () => b(!0), C = () => b(!1);
+	return r(x, y && !f), /* @__PURE__ */ c("li", {
+		...m,
+		className: h,
+		onMouseEnter: S,
+		onMouseLeave: C,
+		style: _,
+		children: [/* @__PURE__ */ c("a", {
+			className: "submenu-title",
+			role: "menuitem",
+			children: [/* @__PURE__ */ s("span", {
+				className: "submenu-title-text",
+				children: u
+			}), /* @__PURE__ */ s("span", { className: "uikit-icon icon-chevron-right" })]
+		}), y && !f && /* @__PURE__ */ s(t, {
+			ref: x,
+			popover: "manual",
+			style: v,
+			children: /* @__PURE__ */ s(i, { items: d })
+		})]
+	});
 };
-export {
-  E as default
-};
-//# sourceMappingURL=DropdownSubmenu.js.map
+//#endregion
+export { l as default };
+
+//# sourceMappingURL=DropdownSubmenu.js.map

package/components/dropdown/DropdownSubmenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownSubmenu.js","sources":["../../../src/components/dropdown/DropdownSubmenu.tsx"],"sourcesContent":["import type React from 'react';\nimport { useState } from 'react';\nimport { usePopper } from 'react-popper';\n\nimport classNames from '../../utils/classNames';\nimport MenuItems from '../menuItems/MenuItems';\nimport MenuItemList from '../menuItems/MenuItemList';\nimport type { MenuItemProps as MenuItem } from '../menuItems/MenuItem';\n\nexport type DropdownSubmenuProps = {\n    /**\n     * Displayed button title.\n     *\n     * @default ''\n     */\n    title?: string | React.ReactNode;\n\n    /**\n     * Items to display in the dropdown sub menu.\n     */\n    items?: MenuItem[];\n\n    /**\n     * Disables every entry on the title list item.\n     *\n     * @default false\n     */\n    disabled?: boolean;\n\n    /**\n     * Additional classes to be set on the dropdown-submenu element.\n     */\n    className?: string;\n};\n\nconst DropdownSubmenu = (props: DropdownSubmenuProps) => {\n    const { title = '', items = [], disabled = false, className, ...remainingProps } = props;\n\n    const classes = classNames('dropdown-submenu', disabled && 'disabled', className);\n\n    const [refParentPopper, setRefParentPopper] = useState<HTMLLIElement | null>(null);\n    const [refDropdownSubmenu, setRefDropdownSubmenu] = useState<HTMLUListElement | null>(null);\n\n    // We have to use the workaround of checking the hover state as popper may render\n    // the sub menu on an odd place and fixes it's position on the next render cycle\n    const [isHover, setIsHover] = useState(false);\n    const handleMouseEnter = () => setIsHover(true);\n    const handleMouseLeave = () => setIsHover(false);\n\n    const { styles, attributes } = usePopper(refParentPopper, refDropdownSubmenu, {\n        placement: 'right-start',\n        modifiers: [\n            {\n                name: 'offset',\n                options: {\n                    offset: [-4, 0],\n                },\n            },\n        ],\n    });\n\n    // return a list item that is also automatically the new toggle for the submenu\n    return (\n        <li\n            ref={setRefParentPopper}\n            {...remainingProps}\n            className={classes}\n            onMouseEnter={handleMouseEnter}\n            onMouseLeave={handleMouseLeave}\n        >\n            {/* biome-ignore lint/a11y/useValidAnchor: <explanation> */}\n            <a className='submenu-title' role='menuitem'>\n                <span className='submenu-title-text'>{title}</span>\n                <span className='rioglyph rioglyph-chevron-right' />\n            </a>\n            {/* The actual submenu items */}\n            {isHover && !disabled && (\n                <MenuItemList ref={setRefDropdownSubmenu} style={styles.popper} {...attributes.popper}>\n                    <MenuItems items={items} />\n                </MenuItemList>\n            )}\n        </li>\n    );\n};\n\nexport default DropdownSubmenu;\n"],"names":["DropdownSubmenu","props","title","items","disabled","className","remainingProps","classes","classNames","refParentPopper","setRefParentPopper","useState","refDropdownSubmenu","setRefDropdownSubmenu","isHover","setIsHover","handleMouseEnter","handleMouseLeave","styles","attributes","usePopper","jsxs","jsx","MenuItemList","MenuItems"],"mappings":";;;;;;AAmCA,MAAMA,IAAkB,CAACC,MAAgC;AACrD,QAAM,EAAE,OAAAC,IAAQ,IAAI,OAAAC,IAAQ,CAAA,GAAI,UAAAC,IAAW,IAAO,WAAAC,GAAW,GAAGC,EAAA,IAAmBL,GAE7EM,IAAUC,EAAW,oBAAoBJ,KAAY,YAAYC,CAAS,GAE1E,CAACI,GAAiBC,CAAkB,IAAIC,EAA+B,IAAI,GAC3E,CAACC,GAAoBC,CAAqB,IAAIF,EAAkC,IAAI,GAIpF,CAACG,GAASC,CAAU,IAAIJ,EAAS,EAAK,GACtCK,IAAmB,MAAMD,EAAW,EAAI,GACxCE,IAAmB,MAAMF,EAAW,EAAK,GAEzC,EAAE,QAAAG,GAAQ,YAAAC,EAAA,IAAeC,EAAUX,GAAiBG,GAAoB;AAAA,IAC1E,WAAW;AAAA,IACX,WAAW;AAAA,MACP;AAAA,QACI,MAAM;AAAA,QACN,SAAS;AAAA,UACL,QAAQ,CAAC,IAAI,CAAC;AAAA,QAAA;AAAA,MAClB;AAAA,IACJ;AAAA,EACJ,CACH;AAGD,SACI,gBAAAS;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,KAAKX;AAAA,MACJ,GAAGJ;AAAA,MACJ,WAAWC;AAAA,MACX,cAAcS;AAAA,MACd,cAAcC;AAAA,MAGd,UAAA;AAAA,QAAA,gBAAAI,EAAC,KAAA,EAAE,WAAU,iBAAgB,MAAK,YAC9B,UAAA;AAAA,UAAA,gBAAAC,EAAC,QAAA,EAAK,WAAU,sBAAsB,UAAApB,GAAM;AAAA,UAC5C,gBAAAoB,EAAC,QAAA,EAAK,WAAU,kCAAA,CAAkC;AAAA,QAAA,GACtD;AAAA,QAECR,KAAW,CAACV,KACT,gBAAAkB,EAACC,GAAA,EAAa,KAAKV,GAAuB,OAAOK,EAAO,QAAS,GAAGC,EAAW,QAC3E,UAAA,gBAAAG,EAACE,GAAA,EAAU,OAAArB,GAAc,EAAA,CAC7B;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIhB;"}
+{"version":3,"file":"DropdownSubmenu.js","names":[],"sources":["../../../src/components/dropdown/DropdownSubmenu.tsx"],"sourcesContent":["import { useRef, useState, type CSSProperties } from 'react';\nimport type React from 'react';\n\nimport classNames from '../../utils/classNames';\nimport MenuItems from '../menuItems/MenuItems';\nimport MenuItemList from '../menuItems/MenuItemList';\nimport type { MenuItemProps as MenuItem } from '../menuItems/MenuItem';\nimport { useAnchorName, usePopover } from '../../hooks/useAnchoredPopover';\n\nexport type DropdownSubmenuProps = {\n    /**\n     * Displayed button title.\n     *\n     * @default ''\n     */\n    title?: string | React.ReactNode;\n\n    /**\n     * Items to display in the dropdown sub menu.\n     */\n    items?: MenuItem[];\n\n    /**\n     * Disables every entry on the title list item.\n     *\n     * @default false\n     */\n    disabled?: boolean;\n\n    /**\n     * Additional classes to be set on the dropdown-submenu element.\n     */\n    className?: string;\n};\n\nconst DropdownSubmenu = (props: DropdownSubmenuProps) => {\n    const { title = '', items = [], disabled = false, className, ...remainingProps } = props;\n\n    const classes = classNames('dropdown-submenu', disabled && 'disabled', className);\n\n    const anchorName = useAnchorName('dropdown-submenu');\n\n    const anchorStyle = {\n        anchorName,\n    } as CSSProperties;\n\n    const submenuStyle = {\n        positionAnchor: anchorName,\n    } as CSSProperties;\n\n    // Keep the submenu mounted only while hovered so keyboard and click handling stay scoped to the open menu.\n    const [isHover, setIsHover] = useState(false);\n    const submenuRef = useRef<HTMLUListElement>(null);\n\n    const handleMouseEnter = () => setIsHover(true);\n    const handleMouseLeave = () => setIsHover(false);\n\n    usePopover(submenuRef, isHover && !disabled);\n\n    // return a list item that is also automatically the new toggle for the submenu\n    return (\n        <li\n            {...remainingProps}\n            className={classes}\n            onMouseEnter={handleMouseEnter}\n            onMouseLeave={handleMouseLeave}\n            style={anchorStyle}\n        >\n            <a className='submenu-title' role='menuitem'>\n                <span className='submenu-title-text'>{title}</span>\n                <span className='uikit-icon icon-chevron-right' />\n            </a>\n            {/* The actual submenu items */}\n            {isHover && !disabled && (\n                <MenuItemList\n                    ref={submenuRef}\n                    {...({ popover: 'manual' } as React.HTMLAttributes<HTMLUListElement>)}\n                    style={submenuStyle}\n                >\n                    <MenuItems items={items} />\n                </MenuItemList>\n            )}\n        </li>\n    );\n};\n\nexport default DropdownSubmenu;\n"],"mappings":";;;;;;;AAmCA,IAAM,KAAmB,MAAgC;CACrD,IAAM,EAAE,WAAQ,IAAI,WAAQ,CAAC,GAAG,cAAW,IAAO,cAAW,GAAG,MAAmB,GAE7E,IAAU,EAAW,oBAAoB,KAAY,YAAY,CAAS,GAE1E,IAAa,EAAc,kBAAkB,GAE7C,IAAc,EAChB,cACJ,GAEM,IAAe,EACjB,gBAAgB,EACpB,GAGM,CAAC,GAAS,KAAc,EAAS,EAAK,GACtC,IAAa,EAAyB,IAAI,GAE1C,UAAyB,EAAW,EAAI,GACxC,UAAyB,EAAW,EAAK;CAK/C,OAHA,EAAW,GAAY,KAAW,CAAC,CAAQ,GAIvC,kBAAC,MAAD;EACI,GAAI;EACJ,WAAW;EACX,cAAc;EACd,cAAc;EACd,OAAO;YALX,CAOI,kBAAC,KAAD;GAAG,WAAU;GAAgB,MAAK;aAAlC,CACI,kBAAC,QAAD;IAAM,WAAU;cAAsB;GAAY,CAAA,GAClD,kBAAC,QAAD,EAAM,WAAU,gCAAiC,CAAA,CAClD;MAEF,KAAW,CAAC,KACT,kBAAC,GAAD;GACI,KAAK;GACE,SAAS;GAChB,OAAO;aAEP,kBAAC,GAAD,EAAkB,SAAQ,CAAA;EAChB,CAAA,CAElB;;AAEZ"}

package/components/dropdown/DropdownToggleButton.d.ts

@@ -1,12 +1,13 @@
 import { HTMLProps, PropsWithChildren } from 'react';
 import { BUTTON_VARIANT, BUTTON_SIZE, BUTTON_STYLE } from '../button/Button';
 import { TrackingAttributes } from '../../utils/analytics/googleAnalyticsUtils';
+import { IconType } from '../icon/Icon';
 export type DropdownToggleButtonType = 'button' | 'tag' | 'label';
 export type DropdownToggleEvent<T extends DropdownToggleButtonType = 'button'> = T extends 'button' ? React.MouseEvent<HTMLButtonElement> : React.MouseEvent<HTMLDivElement>;
 export type DropdownToggleButtonProps = HTMLProps<HTMLButtonElement> & {
     id?: string;
     disabled?: boolean;
-    iconName?: string;
+    iconName?: IconType;
     splitButton?: boolean;
     iconOnly?: boolean;
     onClick: (event: React.MouseEvent<HTMLButtonElement | HTMLDivElement>) => void;