@rio-cloud/rio-uikit 2.5.0 → 2.5.1

package/components/button/Button.d.ts

@@ -104,6 +104,12 @@ type BaseButtonProps = {
      * @default false
      */
     block?: boolean;
+    /**
+     * Enables a subtle scale animation when the button is hovered.
+     *
+     * @default false
+     */
+    hoverScale?: boolean;
     /**
      * Sets the button style.
      * @default 'default'

package/components/button/Button.js

@@ -1,11 +1,11 @@
 import { jsxs as E, jsx as k } from "react/jsx-runtime";
-import { forwardRef as Y, useState as L, useRef as $ } from "react";
-import { noop as w } from "es-toolkit/function";
-import B from "../../utils/classNames.js";
-import { createButtonRipple as S } from "../../utils/buttonEffect.js";
-import F from "../../hooks/useMergeRefs.js";
-import { getAutoTrackingAttributes as G } from "../../utils/analytics/autoTracking.js";
-const z = {
+import { forwardRef as $, useState as S, useRef as w } from "react";
+import { noop as B } from "es-toolkit/function";
+import F from "../../utils/classNames.js";
+import { createButtonRipple as L } from "../../utils/buttonEffect.js";
+import G from "../../hooks/useMergeRefs.js";
+import { getAutoTrackingAttributes as z } from "../../utils/analytics/autoTracking.js";
+const W = {
   DEFAULT: "default",
   UNSTYLED: "unstyled",
   PRIMARY: "primary",
@@ -16,72 +16,74 @@ const z = {
   SUCCESS: "success",
   MUTED: "muted",
   MUTED_FILLED: "muted-filled"
-}, i = {
+}, s = {
   VARIANT_LINK: "link",
   VARIANT_LINK_INLINE: "link-inline",
   VARIANT_OUTLINE: "outline",
   VARIANT_ACTION: "action"
-}, W = {
+}, X = {
   XS: "xs",
   SM: "sm",
   MD: "md",
   LG: "lg"
-}, u = Y((_, C) => {
+}, u = $((_, h) => {
   const {
     as: a = "button",
-    active: n = !1,
-    disabled: e = !1,
+    active: e = !1,
+    disabled: n = !1,
     asToggle: f = !1,
-    onClick: l = w,
-    bsStyle: y = "default",
+    onClick: l = B,
+    bsStyle: C = "default",
     bsSize: b,
-    variant: s,
-    iconOnly: O = !1,
+    variant: i,
+    iconOnly: v = !1,
     iconName: o,
-    iconRight: h = !1,
-    multiline: D = !1,
-    block: M = !1,
+    iconRight: y = !1,
+    multiline: O = !1,
+    block: D = !1,
+    hoverScale: M = !1,
     className: V = "",
     noRippleEffect: N = !1,
-    autoTrackingKey: v,
-    type: U = "button",
+    autoTrackingKey: U,
+    type: x = "button",
     tabIndex: A = 0,
     children: m,
     ...r
-  } = _, I = G({
-    autoTrackingKey: v,
+  } = _, I = z({
+    autoTrackingKey: U,
     props: r,
     source: "button"
-  }), [g, d] = L(n), T = $(null), p = F(T, C), [x, P] = L(n);
-  n !== x && (d(n), P(n));
-  const j = (t) => {
-    if (N || S(t.nativeEvent, t.currentTarget), f) {
+  }), [g, d] = S(e), T = w(null), p = G(T, h), [P, j] = S(e);
+  e !== P && (d(e), j(e));
+  const K = (t) => {
+    if (N || L(t.nativeEvent, t.currentTarget), f) {
       const c = !g;
       d(c), c && T.current?.blur(), l(c);
     } else
       l(t);
-  }, K = (t) => {
-    if (e) {
+  }, Y = (t) => {
+    if (n) {
       t.preventDefault();
       return;
     }
-    N || S(t.nativeEvent, t.currentTarget), l(t);
-  }, R = B(
+    N || L(t.nativeEvent, t.currentTarget), l(t);
+  }, R = F(
     "btn",
-    `btn-${y}`,
-    s === i.VARIANT_LINK && "btn-link",
-    s === i.VARIANT_LINK_INLINE && "btn-link btn-link-inline",
-    s === i.VARIANT_OUTLINE && "btn-outline",
-    s === i.VARIANT_ACTION && "btn-action",
+    `btn-${C}`,
+    i === s.VARIANT_LINK && "btn-link",
+    i === s.VARIANT_LINK_INLINE && "btn-link btn-link-inline",
+    i === s.VARIANT_OUTLINE && "btn-outline",
+    i === s.VARIANT_ACTION && "btn-action",
     b && `btn-${b}`,
     f && "btn-toggle",
     g && "active",
-    O && "btn-icon-only",
-    h && "btn-icon-right",
-    D && "btn-multiline",
-    M && "btn-block",
+    v && "btn-icon-only",
+    y && "btn-icon-right",
+    O && "btn-multiline",
+    D && "btn-block",
+    M && "hover-scale",
     a === "a" && "gap-0",
-    a === "a" && e && "disabled",
+    a === "a" && n && "disabled",
     "btn-component",
     V
   );
@@ -92,9 +94,9 @@ const z = {
       ...r,
       ...I,
       className: R,
-      onClick: K,
-      "aria-disabled": e || void 0,
-      tabIndex: e ? -1 : A,
+      onClick: Y,
+      "aria-disabled": n || void 0,
+      tabIndex: n ? -1 : A,
       children: [
         o && /* @__PURE__ */ k("span", { className: `rioglyph ${o}` }),
         m
@@ -104,12 +106,12 @@ const z = {
     "button",
     {
       ref: p,
-      type: U,
+      type: x,
       ...r,
       ...I,
       className: R,
-      onClick: j,
-      disabled: e,
+      onClick: K,
+      disabled: n,
       tabIndex: A,
       children: [
         o && /* @__PURE__ */ k("span", { className: `rioglyph ${o}` }),
@@ -118,13 +120,13 @@ const z = {
     }
   );
 });
-Object.assign(u, z);
-Object.assign(u, i);
 Object.assign(u, W);
+Object.assign(u, s);
+Object.assign(u, X);
 export {
-  W as SIZES_MAP,
-  z as STYLES_MAP,
-  i as VARIANTS_MAP,
+  X as SIZES_MAP,
+  W as STYLES_MAP,
+  s as VARIANTS_MAP,
   u as default
 };
 //# sourceMappingURL=Button.js.map

package/components/button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sources":["../../../src/components/button/Button.tsx"],"sourcesContent":["import React, {\n    forwardRef,\n    type ForwardRefExoticComponent,\n    type HTMLProps,\n    type PropsWithChildren,\n    type RefAttributes,\n    useRef,\n    useState,\n} from 'react';\nimport { noop } from 'es-toolkit/function';\n\nimport classNames from '../../utils/classNames';\nimport { createButtonRipple } from '../../utils/buttonEffect';\nimport useMergeRefs from '../../hooks/useMergeRefs';\nimport type { ObjectValues } from '../../utils/ObjectValues';\nimport { getAutoTrackingAttributes } from '../../utils/analytics/autoTracking';\n\nexport const STYLES_MAP = {\n    DEFAULT: 'default',\n    UNSTYLED: 'unstyled',\n    PRIMARY: 'primary',\n    SECONDARY: 'secondary',\n    INFO: 'info',\n    WARNING: 'warning',\n    DANGER: 'danger',\n    SUCCESS: 'success',\n    MUTED: 'muted',\n    MUTED_FILLED: 'muted-filled',\n} as const;\n\n// export for convenient usage on client side\nexport type BUTTON_STYLE = ObjectValues<typeof STYLES_MAP>;\n\nexport const VARIANTS_MAP = {\n    VARIANT_LINK: 'link',\n    VARIANT_LINK_INLINE: 'link-inline',\n    VARIANT_OUTLINE: 'outline',\n    VARIANT_ACTION: 'action',\n} as const;\n\nexport type BUTTON_VARIANT = ObjectValues<typeof VARIANTS_MAP>;\n\nexport const SIZES_MAP = {\n    XS: 'xs',\n    SM: 'sm',\n    MD: 'md',\n    LG: 'lg',\n} as const;\n\nexport type BUTTON_SIZE = ObjectValues<typeof SIZES_MAP>;\n\n/*\n *  ATTENTION: We're typing the onClick handler based on the value of `asToggle`.\n *\n *  It does not fully work here inside of this file, though. Therefore, we have to apply some explicit casts below.\n *  In code _using_ the Button component, however, the parameter type of the onClick handler must either be a boolean or\n *  a React.MouseEvent, respectively.\n */\n\ntype RegularButton = {\n    /**\n     * Use the button as a toggle button. The toggle state can be controlled via the `active` prop.\n     *\n     * @default false\n     */\n    asToggle?: false;\n\n    /**\n     * Callback function triggered when clicking the button.\n     *\n     * @param event The MouseEvent that triggered the click.\n     */\n    onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;\n};\n\ntype ToggleButton = {\n    /**\n     * Use the button as a toggle button. The toggle state can be controlled via the `active` prop.\n     *\n     * @default false\n     */\n    asToggle: true;\n\n    /**\n     * Callback function triggered when clicking the button.\n     *\n     * @param value The new value of the toggle button.\n     */\n    onClick?: (value: boolean) => void;\n};\n\ntype BaseButtonProps = {\n    /**\n     * Whether the button should be disabled.\n     *\n     * @default false\n     */\n    disabled?: boolean;\n\n    /**\n     * Set the button toggled. Should be used in combination with \"asToggle\" prop.\n     *\n     * @default false\n     */\n    active?: boolean;\n\n    /**\n     * Use when the content of the button is an icon only to adapt the button spacing accordingly.\n     *\n     * @default false\n     */\n    iconOnly?: boolean;\n\n    /**\n     * Adds right side spacing for an icon. This should be used when having navigation buttons\n     * that use an icon on the right side.\n     *\n     * @default false\n     */\n    iconRight?: boolean;\n\n    /**\n     * Optional RIOglyph icon class name that comes in handy for icon-only buttons without adding\n     * a separate icon span.\n     *\n     * Use only exact existing `rioglyph-*` classes from the generated UIKIT icon contract,\n     * for example `rioglyph-download`. Do not compose or guess semantic icon names; an unknown\n     * icon class renders as a filled rectangle.\n     */\n    iconName?: string;\n\n    /**\n     * Defines whether the button text break into multiple lines when the button space exceeds.\n     *\n     * Multiline buttons should be used as exception only.\n     *\n     * @default false\n     */\n    multiline?: boolean;\n\n    /**\n     * Defines whether the button takes up the full width of the parent element.\n     *\n     * @default false\n     */\n    block?: boolean;\n\n    /**\n     * Sets the button style.\n     * @default 'default'\n     */\n    bsStyle?: BUTTON_STYLE;\n\n    /**\n     * Sets the button size.\n     */\n    bsSize?: BUTTON_SIZE;\n\n    /**\n     * Sets the button variant.\n     */\n    variant?: BUTTON_VARIANT;\n\n    /**\n     * Whether the \"ripple\" effect should be suppressed on this button.\n     */\n    noRippleEffect?: boolean;\n\n    /**\n     * Optional key used to generate automatic GA tracking attributes when no explicit\n     * tracking attributes are provided.\n     *\n     * Resulting label format: `button::<autoTrackingKey>`.\n     */\n    autoTrackingKey?: string;\n\n    /**\n     * Number of the index used for keyboard support.\n     *\n     * @default 0\n     */\n    tabIndex?: number;\n\n    /**\n     * Additional classes to be set on the button element.\n     */\n    className?: string;\n};\n\ntype NativeButtonProps = Omit<HTMLProps<HTMLButtonElement>, 'as' | 'type' | 'onClick' | 'ref'> &\n    BaseButtonProps & {\n        /**\n         * Defines this component as a native button element.\n         *\n         * @default 'button'\n         */\n        as?: 'button';\n\n        /**\n         * Defines the native button type.\n         *\n         * The Button component renders a native `<button>` with `type=\"button\"` by default.\n         * Only set `type=\"submit\"` when the button should submit a form. Do not add\n         * `type=\"button\"` defensively unless local code style requires explicit defaults.\n         *\n         * @default 'button'\n         */\n        type?: 'button' | 'submit';\n    } & (RegularButton | ToggleButton);\n\ntype LinkButtonProps = Omit<HTMLProps<HTMLAnchorElement>, 'as' | 'type' | 'onClick' | 'ref'> &\n    BaseButtonProps & {\n        /**\n         * Defines this component as a link element.\n         */\n        as: 'a';\n\n        /**\n         * Native button type is not supported when using `as=\"a\"`.\n         */\n        type?: never;\n\n        /**\n         * Defines the destination URL for the link button.\n         */\n        href: string;\n\n        /**\n         * Toggle behavior is not supported when using `as=\"a\"`.\n         *\n         * @default false\n         */\n        asToggle?: false;\n\n        /**\n         * Callback function triggered when clicking the link.\n         *\n         * @param event The MouseEvent that triggered the click.\n         */\n        onClick?: (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void;\n    };\n\nexport type ButtonProps = NativeButtonProps | LinkButtonProps;\n\ntype Props = PropsWithChildren<ButtonProps>;\n\n// Define statics to be used as \"Button.PRIMARY\"\ntype ButtonType = ForwardRefExoticComponent<Props & RefAttributes<HTMLButtonElement>> & {\n    DEFAULT: 'default';\n    UNSTYLED: 'unstyled';\n    PRIMARY: 'primary';\n    SECONDARY: 'secondary';\n    INFO: 'info';\n    WARNING: 'warning';\n    DANGER: 'danger';\n    SUCCESS: 'success';\n    MUTED: 'muted';\n    MUTED_FILLED: 'muted-filled';\n\n    VARIANT_LINK: 'link';\n    VARIANT_LINK_INLINE: 'link-inline';\n    VARIANT_OUTLINE: 'outline';\n    VARIANT_ACTION: 'action';\n\n    XS: 'xs';\n    SM: 'sm';\n    MD: 'md';\n    LG: 'lg';\n};\n\nconst Button = forwardRef<HTMLButtonElement, Props>((props, ref) => {\n    const {\n        as = 'button',\n        active = false,\n        disabled = false,\n        asToggle = false,\n        onClick = noop,\n        bsStyle = 'default',\n        bsSize,\n        variant,\n        iconOnly = false,\n        iconName,\n        iconRight = false,\n        multiline = false,\n        block = false,\n        className = '',\n        noRippleEffect = false,\n        autoTrackingKey,\n        type = 'button',\n        tabIndex = 0,\n        children,\n        ...remainingProps\n    } = props;\n\n    const autoTrackingAttributes = getAutoTrackingAttributes({\n        autoTrackingKey,\n        props: remainingProps as Record<string, unknown>,\n        source: 'button',\n    });\n\n    const [isToggled, setIsToggled] = useState(active);\n\n    const btnRef = useRef<HTMLButtonElement>(null);\n\n    const buttonRef = useMergeRefs(btnRef, ref);\n\n    // Update internal toggle state when used as controlled component and outside toggle state changes\n    // Note, using the usePrevious hook resulted in an endless loop, hence the useState here\n    const [previousActive, setPreviousActive] = useState(active);\n    if (active !== previousActive) {\n        setIsToggled(active);\n        setPreviousActive(active);\n    }\n\n    const handleButtonClick = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n        if (!noRippleEffect) {\n            createButtonRipple(event.nativeEvent, event.currentTarget);\n        }\n\n        if (asToggle) {\n            // Intercept click handler only for toggle button to update internal state and blur after click\n            const newIsToggled = !isToggled;\n            setIsToggled(newIsToggled);\n\n            if (newIsToggled) {\n                btnRef.current?.blur();\n            }\n\n            (onClick as (x: boolean) => void)(newIsToggled);\n        } else {\n            (onClick as (x: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void)(event);\n        }\n    };\n\n    const handleLinkClick = (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {\n        if (disabled) {\n            event.preventDefault();\n            return;\n        }\n\n        if (!noRippleEffect) {\n            createButtonRipple(event.nativeEvent, event.currentTarget);\n        }\n\n        (onClick as (x: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void)(event);\n    };\n\n    const buttonClassNames = classNames(\n        'btn',\n        `btn-${bsStyle}`,\n        variant === VARIANTS_MAP.VARIANT_LINK && 'btn-link',\n        variant === VARIANTS_MAP.VARIANT_LINK_INLINE && 'btn-link btn-link-inline',\n        variant === VARIANTS_MAP.VARIANT_OUTLINE && 'btn-outline',\n        variant === VARIANTS_MAP.VARIANT_ACTION && 'btn-action',\n        bsSize && `btn-${bsSize}`,\n        asToggle && 'btn-toggle',\n        isToggled && 'active',\n        iconOnly && 'btn-icon-only',\n        iconRight && 'btn-icon-right',\n        multiline && 'btn-multiline',\n        block && 'btn-block',\n        as === 'a' && 'gap-0',\n        as === 'a' && disabled && 'disabled',\n        'btn-component',\n        className\n    );\n\n    if (as === 'a') {\n        return (\n            <a\n                ref={buttonRef as React.Ref<HTMLAnchorElement>}\n                {...(remainingProps as Omit<HTMLProps<HTMLAnchorElement>, 'as' | 'type' | 'onClick' | 'ref'>)}\n                {...autoTrackingAttributes}\n                className={buttonClassNames}\n                onClick={handleLinkClick}\n                aria-disabled={disabled || undefined}\n                tabIndex={disabled ? -1 : tabIndex}\n            >\n                {iconName && <span className={`rioglyph ${iconName}`} />}\n                {children}\n            </a>\n        );\n    }\n\n    return (\n        <button\n            ref={buttonRef}\n            type={type}\n            {...(remainingProps as Omit<HTMLProps<HTMLButtonElement>, 'as' | 'type' | 'onClick' | 'ref'>)}\n            {...autoTrackingAttributes}\n            className={buttonClassNames}\n            onClick={handleButtonClick}\n            disabled={disabled}\n            tabIndex={tabIndex}\n        >\n            {iconName && <span className={`rioglyph ${iconName}`} />}\n            {children}\n        </button>\n    );\n}) as ButtonType;\n\nObject.assign(Button, STYLES_MAP);\nObject.assign(Button, VARIANTS_MAP);\nObject.assign(Button, SIZES_MAP);\n\nexport default Button;\n"],"names":["STYLES_MAP","VARIANTS_MAP","SIZES_MAP","Button","forwardRef","props","ref","as","active","disabled","asToggle","onClick","noop","bsStyle","bsSize","variant","iconOnly","iconName","iconRight","multiline","block","className","noRippleEffect","autoTrackingKey","type","tabIndex","children","remainingProps","autoTrackingAttributes","getAutoTrackingAttributes","isToggled","setIsToggled","useState","btnRef","useRef","buttonRef","useMergeRefs","previousActive","setPreviousActive","handleButtonClick","event","createButtonRipple","newIsToggled","handleLinkClick","buttonClassNames","classNames","jsxs","jsx"],"mappings":"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"}
+{"version":3,"file":"Button.js","sources":["../../../src/components/button/Button.tsx"],"sourcesContent":["import React, {\n    forwardRef,\n    type ForwardRefExoticComponent,\n    type HTMLProps,\n    type PropsWithChildren,\n    type RefAttributes,\n    useRef,\n    useState,\n} from 'react';\nimport { noop } from 'es-toolkit/function';\n\nimport classNames from '../../utils/classNames';\nimport { createButtonRipple } from '../../utils/buttonEffect';\nimport useMergeRefs from '../../hooks/useMergeRefs';\nimport type { ObjectValues } from '../../utils/ObjectValues';\nimport { getAutoTrackingAttributes } from '../../utils/analytics/autoTracking';\n\nexport const STYLES_MAP = {\n    DEFAULT: 'default',\n    UNSTYLED: 'unstyled',\n    PRIMARY: 'primary',\n    SECONDARY: 'secondary',\n    INFO: 'info',\n    WARNING: 'warning',\n    DANGER: 'danger',\n    SUCCESS: 'success',\n    MUTED: 'muted',\n    MUTED_FILLED: 'muted-filled',\n} as const;\n\n// export for convenient usage on client side\nexport type BUTTON_STYLE = ObjectValues<typeof STYLES_MAP>;\n\nexport const VARIANTS_MAP = {\n    VARIANT_LINK: 'link',\n    VARIANT_LINK_INLINE: 'link-inline',\n    VARIANT_OUTLINE: 'outline',\n    VARIANT_ACTION: 'action',\n} as const;\n\nexport type BUTTON_VARIANT = ObjectValues<typeof VARIANTS_MAP>;\n\nexport const SIZES_MAP = {\n    XS: 'xs',\n    SM: 'sm',\n    MD: 'md',\n    LG: 'lg',\n} as const;\n\nexport type BUTTON_SIZE = ObjectValues<typeof SIZES_MAP>;\n\n/*\n *  ATTENTION: We're typing the onClick handler based on the value of `asToggle`.\n *\n *  It does not fully work here inside of this file, though. Therefore, we have to apply some explicit casts below.\n *  In code _using_ the Button component, however, the parameter type of the onClick handler must either be a boolean or\n *  a React.MouseEvent, respectively.\n */\n\ntype RegularButton = {\n    /**\n     * Use the button as a toggle button. The toggle state can be controlled via the `active` prop.\n     *\n     * @default false\n     */\n    asToggle?: false;\n\n    /**\n     * Callback function triggered when clicking the button.\n     *\n     * @param event The MouseEvent that triggered the click.\n     */\n    onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;\n};\n\ntype ToggleButton = {\n    /**\n     * Use the button as a toggle button. The toggle state can be controlled via the `active` prop.\n     *\n     * @default false\n     */\n    asToggle: true;\n\n    /**\n     * Callback function triggered when clicking the button.\n     *\n     * @param value The new value of the toggle button.\n     */\n    onClick?: (value: boolean) => void;\n};\n\ntype BaseButtonProps = {\n    /**\n     * Whether the button should be disabled.\n     *\n     * @default false\n     */\n    disabled?: boolean;\n\n    /**\n     * Set the button toggled. Should be used in combination with \"asToggle\" prop.\n     *\n     * @default false\n     */\n    active?: boolean;\n\n    /**\n     * Use when the content of the button is an icon only to adapt the button spacing accordingly.\n     *\n     * @default false\n     */\n    iconOnly?: boolean;\n\n    /**\n     * Adds right side spacing for an icon. This should be used when having navigation buttons\n     * that use an icon on the right side.\n     *\n     * @default false\n     */\n    iconRight?: boolean;\n\n    /**\n     * Optional RIOglyph icon class name that comes in handy for icon-only buttons without adding\n     * a separate icon span.\n     *\n     * Use only exact existing `rioglyph-*` classes from the generated UIKIT icon contract,\n     * for example `rioglyph-download`. Do not compose or guess semantic icon names; an unknown\n     * icon class renders as a filled rectangle.\n     */\n    iconName?: string;\n\n    /**\n     * Defines whether the button text break into multiple lines when the button space exceeds.\n     *\n     * Multiline buttons should be used as exception only.\n     *\n     * @default false\n     */\n    multiline?: boolean;\n\n    /**\n     * Defines whether the button takes up the full width of the parent element.\n     *\n     * @default false\n     */\n    block?: boolean;\n\n    /**\n     * Enables a subtle scale animation when the button is hovered.\n     *\n     * @default false\n     */\n    hoverScale?: boolean;\n\n    /**\n     * Sets the button style.\n     * @default 'default'\n     */\n    bsStyle?: BUTTON_STYLE;\n\n    /**\n     * Sets the button size.\n     */\n    bsSize?: BUTTON_SIZE;\n\n    /**\n     * Sets the button variant.\n     */\n    variant?: BUTTON_VARIANT;\n\n    /**\n     * Whether the \"ripple\" effect should be suppressed on this button.\n     */\n    noRippleEffect?: boolean;\n\n    /**\n     * Optional key used to generate automatic GA tracking attributes when no explicit\n     * tracking attributes are provided.\n     *\n     * Resulting label format: `button::<autoTrackingKey>`.\n     */\n    autoTrackingKey?: string;\n\n    /**\n     * Number of the index used for keyboard support.\n     *\n     * @default 0\n     */\n    tabIndex?: number;\n\n    /**\n     * Additional classes to be set on the button element.\n     */\n    className?: string;\n};\n\ntype NativeButtonProps = Omit<HTMLProps<HTMLButtonElement>, 'as' | 'type' | 'onClick' | 'ref'> &\n    BaseButtonProps & {\n        /**\n         * Defines this component as a native button element.\n         *\n         * @default 'button'\n         */\n        as?: 'button';\n\n        /**\n         * Defines the native button type.\n         *\n         * The Button component renders a native `<button>` with `type=\"button\"` by default.\n         * Only set `type=\"submit\"` when the button should submit a form. Do not add\n         * `type=\"button\"` defensively unless local code style requires explicit defaults.\n         *\n         * @default 'button'\n         */\n        type?: 'button' | 'submit';\n    } & (RegularButton | ToggleButton);\n\ntype LinkButtonProps = Omit<HTMLProps<HTMLAnchorElement>, 'as' | 'type' | 'onClick' | 'ref'> &\n    BaseButtonProps & {\n        /**\n         * Defines this component as a link element.\n         */\n        as: 'a';\n\n        /**\n         * Native button type is not supported when using `as=\"a\"`.\n         */\n        type?: never;\n\n        /**\n         * Defines the destination URL for the link button.\n         */\n        href: string;\n\n        /**\n         * Toggle behavior is not supported when using `as=\"a\"`.\n         *\n         * @default false\n         */\n        asToggle?: false;\n\n        /**\n         * Callback function triggered when clicking the link.\n         *\n         * @param event The MouseEvent that triggered the click.\n         */\n        onClick?: (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void;\n    };\n\nexport type ButtonProps = NativeButtonProps | LinkButtonProps;\n\ntype Props = PropsWithChildren<ButtonProps>;\n\n// Define statics to be used as \"Button.PRIMARY\"\ntype ButtonType = ForwardRefExoticComponent<Props & RefAttributes<HTMLButtonElement>> & {\n    DEFAULT: 'default';\n    UNSTYLED: 'unstyled';\n    PRIMARY: 'primary';\n    SECONDARY: 'secondary';\n    INFO: 'info';\n    WARNING: 'warning';\n    DANGER: 'danger';\n    SUCCESS: 'success';\n    MUTED: 'muted';\n    MUTED_FILLED: 'muted-filled';\n\n    VARIANT_LINK: 'link';\n    VARIANT_LINK_INLINE: 'link-inline';\n    VARIANT_OUTLINE: 'outline';\n    VARIANT_ACTION: 'action';\n\n    XS: 'xs';\n    SM: 'sm';\n    MD: 'md';\n    LG: 'lg';\n};\n\nconst Button = forwardRef<HTMLButtonElement, Props>((props, ref) => {\n    const {\n        as = 'button',\n        active = false,\n        disabled = false,\n        asToggle = false,\n        onClick = noop,\n        bsStyle = 'default',\n        bsSize,\n        variant,\n        iconOnly = false,\n        iconName,\n        iconRight = false,\n        multiline = false,\n        block = false,\n        hoverScale = false,\n        className = '',\n        noRippleEffect = false,\n        autoTrackingKey,\n        type = 'button',\n        tabIndex = 0,\n        children,\n        ...remainingProps\n    } = props;\n\n    const autoTrackingAttributes = getAutoTrackingAttributes({\n        autoTrackingKey,\n        props: remainingProps as Record<string, unknown>,\n        source: 'button',\n    });\n\n    const [isToggled, setIsToggled] = useState(active);\n\n    const btnRef = useRef<HTMLButtonElement>(null);\n\n    const buttonRef = useMergeRefs(btnRef, ref);\n\n    // Update internal toggle state when used as controlled component and outside toggle state changes\n    // Note, using the usePrevious hook resulted in an endless loop, hence the useState here\n    const [previousActive, setPreviousActive] = useState(active);\n    if (active !== previousActive) {\n        setIsToggled(active);\n        setPreviousActive(active);\n    }\n\n    const handleButtonClick = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n        if (!noRippleEffect) {\n            createButtonRipple(event.nativeEvent, event.currentTarget);\n        }\n\n        if (asToggle) {\n            // Intercept click handler only for toggle button to update internal state and blur after click\n            const newIsToggled = !isToggled;\n            setIsToggled(newIsToggled);\n\n            if (newIsToggled) {\n                btnRef.current?.blur();\n            }\n\n            (onClick as (x: boolean) => void)(newIsToggled);\n        } else {\n            (onClick as (x: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void)(event);\n        }\n    };\n\n    const handleLinkClick = (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {\n        if (disabled) {\n            event.preventDefault();\n            return;\n        }\n\n        if (!noRippleEffect) {\n            createButtonRipple(event.nativeEvent, event.currentTarget);\n        }\n\n        (onClick as (x: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void)(event);\n    };\n\n    const buttonClassNames = classNames(\n        'btn',\n        `btn-${bsStyle}`,\n        variant === VARIANTS_MAP.VARIANT_LINK && 'btn-link',\n        variant === VARIANTS_MAP.VARIANT_LINK_INLINE && 'btn-link btn-link-inline',\n        variant === VARIANTS_MAP.VARIANT_OUTLINE && 'btn-outline',\n        variant === VARIANTS_MAP.VARIANT_ACTION && 'btn-action',\n        bsSize && `btn-${bsSize}`,\n        asToggle && 'btn-toggle',\n        isToggled && 'active',\n        iconOnly && 'btn-icon-only',\n        iconRight && 'btn-icon-right',\n        multiline && 'btn-multiline',\n        block && 'btn-block',\n        hoverScale && 'hover-scale',\n        as === 'a' && 'gap-0',\n        as === 'a' && disabled && 'disabled',\n        'btn-component',\n        className\n    );\n\n    if (as === 'a') {\n        return (\n            <a\n                ref={buttonRef as React.Ref<HTMLAnchorElement>}\n                {...(remainingProps as Omit<HTMLProps<HTMLAnchorElement>, 'as' | 'type' | 'onClick' | 'ref'>)}\n                {...autoTrackingAttributes}\n                className={buttonClassNames}\n                onClick={handleLinkClick}\n                aria-disabled={disabled || undefined}\n                tabIndex={disabled ? -1 : tabIndex}\n            >\n                {iconName && <span className={`rioglyph ${iconName}`} />}\n                {children}\n            </a>\n        );\n    }\n\n    return (\n        <button\n            ref={buttonRef}\n            type={type}\n            {...(remainingProps as Omit<HTMLProps<HTMLButtonElement>, 'as' | 'type' | 'onClick' | 'ref'>)}\n            {...autoTrackingAttributes}\n            className={buttonClassNames}\n            onClick={handleButtonClick}\n            disabled={disabled}\n            tabIndex={tabIndex}\n        >\n            {iconName && <span className={`rioglyph ${iconName}`} />}\n            {children}\n        </button>\n    );\n}) as ButtonType;\n\nObject.assign(Button, STYLES_MAP);\nObject.assign(Button, VARIANTS_MAP);\nObject.assign(Button, SIZES_MAP);\n\nexport default Button;\n"],"names":["STYLES_MAP","VARIANTS_MAP","SIZES_MAP","Button","forwardRef","props","ref","as","active","disabled","asToggle","onClick","noop","bsStyle","bsSize","variant","iconOnly","iconName","iconRight","multiline","block","hoverScale","className","noRippleEffect","autoTrackingKey","type","tabIndex","children","remainingProps","autoTrackingAttributes","getAutoTrackingAttributes","isToggled","setIsToggled","useState","btnRef","useRef","buttonRef","useMergeRefs","previousActive","setPreviousActive","handleButtonClick","event","createButtonRipple","newIsToggled","handleLinkClick","buttonClassNames","classNames","jsxs","jsx"],"mappings":"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"}

package/components/table/render/header/TableBatchDropdown.js

@@ -2,11 +2,11 @@ import { jsx as n } from "react/jsx-runtime";
 import { useState as i, useEffect as m } from "react";
 import p from "../../../dropdown/ButtonDropdown.js";
 import { TABLE_HORIZONTAL_SCROLL_EVENT as r } from "../../layout/useHorizontalSectionSync.js";
-const h = ({ items: a, dropdownClassName: o, ...s }) => {
+const w = ({ items: a, dropdownClassName: t, ...s }) => {
   const [l, e] = i(!1);
   return m(() => {
-    const t = () => e(!1);
-    return window.addEventListener(r, t), () => window.removeEventListener(r, t);
+    const o = () => e(!1);
+    return window.addEventListener(r, o), () => window.removeEventListener(r, o);
   }, []), /* @__PURE__ */ n(
     p,
     {
@@ -14,17 +14,18 @@ const h = ({ items: a, dropdownClassName: o, ...s }) => {
       title: /* @__PURE__ */ n("span", { className: "rioglyph rioglyph-checkboxes" }),
       variant: "outline",
       bsSize: "sm",
-      toggleClassName: "table-batch-dropdown-button no-hover-scale",
-      dropdownClassName: o ? `text-normal ${o}` : "text-normal",
+      toggleClassName: "table-batch-dropdown-button",
+      dropdownClassName: t ? `text-normal ${t}` : "text-normal",
       iconOnly: !0,
       items: a,
       open: l,
       onOpen: () => e(!0),
-      onClose: () => e(!1)
+      onClose: () => e(!1),
+      usePortal: !0
     }
   );
 };
 export {
-  h as default
+  w as default
 };
 //# sourceMappingURL=TableBatchDropdown.js.map

package/components/table/render/header/TableBatchDropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableBatchDropdown.js","sources":["../../../../../src/components/table/render/header/TableBatchDropdown.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nimport ButtonDropdown, { type ButtonDropdownProps } from '../../../dropdown/ButtonDropdown';\nimport { TABLE_HORIZONTAL_SCROLL_EVENT } from '../../layout/useHorizontalSectionSync';\n\nexport type TableBatchDropdownProps = {\n    /**\n     * Dropdown items rendered for batch actions in the selection header.\n     */\n    items: NonNullable<ButtonDropdownProps['items']>;\n\n    /**\n     * Optional class names for the dropdown menu.\n     */\n    dropdownClassName?: ButtonDropdownProps['dropdownClassName'];\n};\n\nconst TableBatchDropdown = ({ items, dropdownClassName, ...remainingProps }: TableBatchDropdownProps) => {\n    const [open, setOpen] = useState(false);\n\n    useEffect(() => {\n        const handleHorizontalScroll = () => setOpen(false);\n\n        window.addEventListener(TABLE_HORIZONTAL_SCROLL_EVENT, handleHorizontalScroll);\n\n        return () => window.removeEventListener(TABLE_HORIZONTAL_SCROLL_EVENT, handleHorizontalScroll);\n    }, []);\n\n    return (\n        <ButtonDropdown\n            {...remainingProps}\n            title={<span className='rioglyph rioglyph-checkboxes' />}\n            variant='outline'\n            bsSize='sm'\n            toggleClassName='table-batch-dropdown-button no-hover-scale'\n            dropdownClassName={dropdownClassName ? `text-normal ${dropdownClassName}` : 'text-normal'}\n            iconOnly\n            items={items}\n            open={open}\n            onOpen={() => setOpen(true)}\n            onClose={() => setOpen(false)}\n        />\n    );\n};\n\nexport default TableBatchDropdown;\n"],"names":["TableBatchDropdown","items","dropdownClassName","remainingProps","open","setOpen","useState","useEffect","handleHorizontalScroll","TABLE_HORIZONTAL_SCROLL_EVENT","jsx","ButtonDropdown"],"mappings":";;;;AAiBA,MAAMA,IAAqB,CAAC,EAAE,OAAAC,GAAO,mBAAAC,GAAmB,GAAGC,QAA8C;AACrG,QAAM,CAACC,GAAMC,CAAO,IAAIC,EAAS,EAAK;AAEtC,SAAAC,EAAU,MAAM;AACZ,UAAMC,IAAyB,MAAMH,EAAQ,EAAK;AAElD,kBAAO,iBAAiBI,GAA+BD,CAAsB,GAEtE,MAAM,OAAO,oBAAoBC,GAA+BD,CAAsB;AAAA,EACjG,GAAG,CAAA,CAAE,GAGD,gBAAAE;AAAA,IAACC;AAAA,IAAA;AAAA,MACI,GAAGR;AAAA,MACJ,OAAO,gBAAAO,EAAC,QAAA,EAAK,WAAU,+BAAA,CAA+B;AAAA,MACtD,SAAQ;AAAA,MACR,QAAO;AAAA,MACP,iBAAgB;AAAA,MAChB,mBAAmBR,IAAoB,eAAeA,CAAiB,KAAK;AAAA,MAC5E,UAAQ;AAAA,MACR,OAAAD;AAAA,MACA,MAAAG;AAAA,MACA,QAAQ,MAAMC,EAAQ,EAAI;AAAA,MAC1B,SAAS,MAAMA,EAAQ,EAAK;AAAA,IAAA;AAAA,EAAA;AAGxC;"}
+{"version":3,"file":"TableBatchDropdown.js","sources":["../../../../../src/components/table/render/header/TableBatchDropdown.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nimport ButtonDropdown, { type ButtonDropdownProps } from '../../../dropdown/ButtonDropdown';\nimport { TABLE_HORIZONTAL_SCROLL_EVENT } from '../../layout/useHorizontalSectionSync';\n\nexport type TableBatchDropdownProps = {\n    /**\n     * Dropdown items rendered for batch actions in the selection header.\n     */\n    items: NonNullable<ButtonDropdownProps['items']>;\n\n    /**\n     * Optional class names for the dropdown menu.\n     */\n    dropdownClassName?: ButtonDropdownProps['dropdownClassName'];\n};\n\nconst TableBatchDropdown = ({ items, dropdownClassName, ...remainingProps }: TableBatchDropdownProps) => {\n    const [open, setOpen] = useState(false);\n\n    useEffect(() => {\n        const handleHorizontalScroll = () => setOpen(false);\n\n        window.addEventListener(TABLE_HORIZONTAL_SCROLL_EVENT, handleHorizontalScroll);\n\n        return () => window.removeEventListener(TABLE_HORIZONTAL_SCROLL_EVENT, handleHorizontalScroll);\n    }, []);\n\n    return (\n        <ButtonDropdown\n            {...remainingProps}\n            title={<span className='rioglyph rioglyph-checkboxes' />}\n            variant='outline'\n            bsSize='sm'\n            toggleClassName='table-batch-dropdown-button'\n            dropdownClassName={dropdownClassName ? `text-normal ${dropdownClassName}` : 'text-normal'}\n            iconOnly\n            items={items}\n            open={open}\n            onOpen={() => setOpen(true)}\n            onClose={() => setOpen(false)}\n            usePortal\n        />\n    );\n};\n\nexport default TableBatchDropdown;\n"],"names":["TableBatchDropdown","items","dropdownClassName","remainingProps","open","setOpen","useState","useEffect","handleHorizontalScroll","TABLE_HORIZONTAL_SCROLL_EVENT","jsx","ButtonDropdown"],"mappings":";;;;AAiBA,MAAMA,IAAqB,CAAC,EAAE,OAAAC,GAAO,mBAAAC,GAAmB,GAAGC,QAA8C;AACrG,QAAM,CAACC,GAAMC,CAAO,IAAIC,EAAS,EAAK;AAEtC,SAAAC,EAAU,MAAM;AACZ,UAAMC,IAAyB,MAAMH,EAAQ,EAAK;AAElD,kBAAO,iBAAiBI,GAA+BD,CAAsB,GAEtE,MAAM,OAAO,oBAAoBC,GAA+BD,CAAsB;AAAA,EACjG,GAAG,CAAA,CAAE,GAGD,gBAAAE;AAAA,IAACC;AAAA,IAAA;AAAA,MACI,GAAGR;AAAA,MACJ,OAAO,gBAAAO,EAAC,QAAA,EAAK,WAAU,+BAAA,CAA+B;AAAA,MACtD,SAAQ;AAAA,MACR,QAAO;AAAA,MACP,iBAAgB;AAAA,MAChB,mBAAmBR,IAAoB,eAAeA,CAAiB,KAAK;AAAA,MAC5E,UAAQ;AAAA,MACR,OAAAD;AAAA,MACA,MAAAG;AAAA,MACA,QAAQ,MAAMC,EAAQ,EAAI;AAAA,MAC1B,SAAS,MAAMA,EAAQ,EAAK;AAAA,MAC5B,WAAS;AAAA,IAAA;AAAA,EAAA;AAGrB;"}

package/components/table/render/header/TableColumnFilter.js

@@ -5,7 +5,7 @@ import S from "../../../dropdown/ButtonDropdown.js";
 import { TABLE_HORIZONTAL_SCROLL_EVENT as p } from "../../layout/useHorizontalSectionSync.js";
 const j = (d) => {
   const {
-    activeCount: a = 0,
+    activeCount: i = 0,
     active: c = !1,
     children: m,
     className: f,
@@ -13,13 +13,13 @@ const j = (d) => {
     id: g,
     onClose: o,
     onOpen: h,
-    open: i,
-    popperConfig: v,
-    pullRight: C = !0,
+    open: a,
+    popperConfig: C,
+    pullRight: v = !0,
     toggleClassName: N,
     usePortal: O = !0,
     ...b
-  } = d, [x, n] = y(!1), e = i !== void 0, r = e ? i : x, l = a > 0;
+  } = d, [x, n] = y(!1), e = a !== void 0, r = e ? a : x, l = i > 0;
   return E(() => {
     const t = () => {
       r && (e || n(!1), o?.());
@@ -38,7 +38,7 @@ const j = (d) => {
             "aria-hidden": "true"
           }
         ),
-        l && /* @__PURE__ */ s("span", { className: "text-medium", children: a })
+        l && /* @__PURE__ */ s("span", { className: "text-medium", children: i })
       ] }),
       bsStyle: "default",
       variant: "outline",
@@ -52,12 +52,12 @@ const j = (d) => {
       onClose: () => {
         e || n(!1), o?.();
       },
-      pullRight: C,
+      pullRight: v,
       usePortal: O,
       className: f,
-      popperConfig: v,
+      popperConfig: C,
       toggleClassName: L(
-        "table-head-filter-button no-hover-scale border-color-light bg-decent hover-bg-lighter rounded-small",
+        "table-head-filter-button border-color-light bg-decent hover-bg-lighter rounded-small",
         l && "padding-left-2",
         N
       ),

package/components/table/render/header/TableColumnFilter.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableColumnFilter.js","sources":["../../../../../src/components/table/render/header/TableColumnFilter.tsx"],"sourcesContent":["import { useEffect, useState, type HTMLAttributes, type ReactNode } from 'react';\n\nimport classNames from '../../../../utils/classNames';\nimport ButtonDropdown, { type ButtonDropdownProps } from '../../../dropdown/ButtonDropdown';\nimport { TABLE_HORIZONTAL_SCROLL_EVENT } from '../../layout/useHorizontalSectionSync';\n\nexport type TableColumnFilterProps = Omit<\n    HTMLAttributes<HTMLDivElement>,\n    'children' | 'className' | 'onClick' | 'role'\n> & {\n    /**\n     * Custom dropdown content rendered below the filter trigger.\n     */\n    children?: ReactNode;\n\n    /**\n     * Optional classes for the outer dropdown component.\n     */\n    className?: ButtonDropdownProps['className'];\n\n    /**\n     * Optional classes for the dropdown menu.\n     */\n    dropdownClassName?: ButtonDropdownProps['dropdownClassName'];\n\n    /**\n     * Optional DOM id for the dropdown trigger.\n     */\n    id?: ButtonDropdownProps['id'];\n\n    /**\n     * Called when the dropdown closes.\n     */\n    onClose?: ButtonDropdownProps['onClose'];\n\n    /**\n     * Called when the dropdown opens.\n     */\n    onOpen?: ButtonDropdownProps['onOpen'];\n\n    /**\n     * Controlled open state for the dropdown.\n     */\n    open?: ButtonDropdownProps['open'];\n\n    /**\n     * Optional Popper configuration passed to the underlying dropdown.\n     */\n    popperConfig?: ButtonDropdownProps['popperConfig'];\n\n    /**\n     * Aligns the dropdown menu to the right side of the trigger.\n     *\n     * @default true\n     */\n    pullRight?: ButtonDropdownProps['pullRight'];\n\n    /**\n     * Optional classes for the dropdown toggle button.\n     */\n    toggleClassName?: ButtonDropdownProps['toggleClassName'];\n\n    /**\n     * Renders the dropdown through a portal.\n     *\n     * @default true\n     */\n    usePortal?: ButtonDropdownProps['usePortal'];\n\n    /**\n     * Renders the active filter icon variant.\n     *\n     * @default false\n     */\n    active?: boolean;\n\n    /**\n     * Optional number of currently active filters shown next to the filter icon.\n     *\n     * @default 0\n     */\n    activeCount?: number;\n};\n\nconst TableColumnFilter = (props: TableColumnFilterProps) => {\n    const {\n        activeCount = 0,\n        active = false,\n        children,\n        className,\n        dropdownClassName,\n        id,\n        onClose,\n        onOpen,\n        open,\n        popperConfig,\n        pullRight = true,\n        toggleClassName,\n        usePortal = true,\n        ...remainingProps\n    } = props;\n\n    const [internalOpen, setInternalOpen] = useState(false);\n\n    const isControlled = open !== undefined;\n    const isOpen = isControlled ? open : internalOpen;\n    const hasActiveFilters = activeCount > 0;\n\n    useEffect(() => {\n        const handleHorizontalScroll = () => {\n            if (!isOpen) {\n                return;\n            }\n\n            if (!isControlled) {\n                setInternalOpen(false);\n            }\n\n            onClose?.();\n        };\n\n        window.addEventListener(TABLE_HORIZONTAL_SCROLL_EVENT, handleHorizontalScroll);\n\n        return () => window.removeEventListener(TABLE_HORIZONTAL_SCROLL_EVENT, handleHorizontalScroll);\n    }, [isControlled, isOpen, onClose]);\n\n    return (\n        <ButtonDropdown\n            {...remainingProps}\n            id={id}\n            title={\n                <span className='display-flex gap-0 align-items-center text-color-dark'>\n                    <span\n                        className={`text-size-16 rioglyph ${active ? 'rioglyph-filter-active' : 'rioglyph-filter'}`}\n                        aria-hidden='true'\n                    />\n                    {hasActiveFilters && <span className='text-medium'>{activeCount}</span>}\n                </span>\n            }\n            bsStyle='default'\n            variant='outline'\n            bsSize='xs'\n            noCaret\n            iconOnly={!hasActiveFilters}\n            open={isOpen}\n            onOpen={event => {\n                if (!isControlled) {\n                    setInternalOpen(true);\n                }\n\n                onOpen?.(event);\n            }}\n            onClose={() => {\n                if (!isControlled) {\n                    setInternalOpen(false);\n                }\n\n                onClose?.();\n            }}\n            pullRight={pullRight}\n            usePortal={usePortal}\n            className={className}\n            popperConfig={popperConfig}\n            toggleClassName={classNames(\n                'table-head-filter-button no-hover-scale border-color-light bg-decent hover-bg-lighter rounded-small',\n                hasActiveFilters && 'padding-left-2',\n                toggleClassName\n            )}\n            dropdownClassName={dropdownClassName}\n            customDropdown={children}\n        />\n    );\n};\n\nexport default TableColumnFilter;\n"],"names":["TableColumnFilter","props","activeCount","active","children","className","dropdownClassName","id","onClose","onOpen","open","popperConfig","pullRight","toggleClassName","usePortal","remainingProps","internalOpen","setInternalOpen","useState","isControlled","isOpen","hasActiveFilters","useEffect","handleHorizontalScroll","TABLE_HORIZONTAL_SCROLL_EVENT","jsx","ButtonDropdown","jsxs","event","classNames"],"mappings":";;;;;AAoFA,MAAMA,IAAoB,CAACC,MAAkC;AACzD,QAAM;AAAA,IACF,aAAAC,IAAc;AAAA,IACd,QAAAC,IAAS;AAAA,IACT,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,mBAAAC;AAAA,IACA,IAAAC;AAAA,IACA,SAAAC;AAAA,IACA,QAAAC;AAAA,IACA,MAAAC;AAAA,IACA,cAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,iBAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,GAAGC;AAAA,EAAA,IACHd,GAEE,CAACe,GAAcC,CAAe,IAAIC,EAAS,EAAK,GAEhDC,IAAeT,MAAS,QACxBU,IAASD,IAAeT,IAAOM,GAC/BK,IAAmBnB,IAAc;AAEvC,SAAAoB,EAAU,MAAM;AACZ,UAAMC,IAAyB,MAAM;AACjC,MAAKH,MAIAD,KACDF,EAAgB,EAAK,GAGzBT,IAAA;AAAA,IACJ;AAEA,kBAAO,iBAAiBgB,GAA+BD,CAAsB,GAEtE,MAAM,OAAO,oBAAoBC,GAA+BD,CAAsB;AAAA,EACjG,GAAG,CAACJ,GAAcC,GAAQZ,CAAO,CAAC,GAG9B,gBAAAiB;AAAA,IAACC;AAAA,IAAA;AAAA,MACI,GAAGX;AAAA,MACJ,IAAAR;AAAA,MACA,OACI,gBAAAoB,EAAC,QAAA,EAAK,WAAU,yDACZ,UAAA;AAAA,QAAA,gBAAAF;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,WAAW,yBAAyBtB,IAAS,2BAA2B,iBAAiB;AAAA,YACzF,eAAY;AAAA,UAAA;AAAA,QAAA;AAAA,QAEfkB,KAAoB,gBAAAI,EAAC,QAAA,EAAK,WAAU,eAAe,UAAAvB,EAAA,CAAY;AAAA,MAAA,GACpE;AAAA,MAEJ,SAAQ;AAAA,MACR,SAAQ;AAAA,MACR,QAAO;AAAA,MACP,SAAO;AAAA,MACP,UAAU,CAACmB;AAAA,MACX,MAAMD;AAAA,MACN,QAAQ,CAAAQ,MAAS;AACb,QAAKT,KACDF,EAAgB,EAAI,GAGxBR,IAASmB,CAAK;AAAA,MAClB;AAAA,MACA,SAAS,MAAM;AACX,QAAKT,KACDF,EAAgB,EAAK,GAGzBT,IAAA;AAAA,MACJ;AAAA,MACA,WAAAI;AAAA,MACA,WAAAE;AAAA,MACA,WAAAT;AAAA,MACA,cAAAM;AAAA,MACA,iBAAiBkB;AAAA,QACb;AAAA,QACAR,KAAoB;AAAA,QACpBR;AAAA,MAAA;AAAA,MAEJ,mBAAAP;AAAA,MACA,gBAAgBF;AAAA,IAAA;AAAA,EAAA;AAG5B;"}
+{"version":3,"file":"TableColumnFilter.js","sources":["../../../../../src/components/table/render/header/TableColumnFilter.tsx"],"sourcesContent":["import { useEffect, useState, type HTMLAttributes, type ReactNode } from 'react';\n\nimport classNames from '../../../../utils/classNames';\nimport ButtonDropdown, { type ButtonDropdownProps } from '../../../dropdown/ButtonDropdown';\nimport { TABLE_HORIZONTAL_SCROLL_EVENT } from '../../layout/useHorizontalSectionSync';\n\nexport type TableColumnFilterProps = Omit<\n    HTMLAttributes<HTMLDivElement>,\n    'children' | 'className' | 'onClick' | 'role'\n> & {\n    /**\n     * Custom dropdown content rendered below the filter trigger.\n     */\n    children?: ReactNode;\n\n    /**\n     * Optional classes for the outer dropdown component.\n     */\n    className?: ButtonDropdownProps['className'];\n\n    /**\n     * Optional classes for the dropdown menu.\n     */\n    dropdownClassName?: ButtonDropdownProps['dropdownClassName'];\n\n    /**\n     * Optional DOM id for the dropdown trigger.\n     */\n    id?: ButtonDropdownProps['id'];\n\n    /**\n     * Called when the dropdown closes.\n     */\n    onClose?: ButtonDropdownProps['onClose'];\n\n    /**\n     * Called when the dropdown opens.\n     */\n    onOpen?: ButtonDropdownProps['onOpen'];\n\n    /**\n     * Controlled open state for the dropdown.\n     */\n    open?: ButtonDropdownProps['open'];\n\n    /**\n     * Optional Popper configuration passed to the underlying dropdown.\n     */\n    popperConfig?: ButtonDropdownProps['popperConfig'];\n\n    /**\n     * Aligns the dropdown menu to the right side of the trigger.\n     *\n     * @default true\n     */\n    pullRight?: ButtonDropdownProps['pullRight'];\n\n    /**\n     * Optional classes for the dropdown toggle button.\n     */\n    toggleClassName?: ButtonDropdownProps['toggleClassName'];\n\n    /**\n     * Renders the dropdown through a portal.\n     *\n     * @default true\n     */\n    usePortal?: ButtonDropdownProps['usePortal'];\n\n    /**\n     * Renders the active filter icon variant.\n     *\n     * @default false\n     */\n    active?: boolean;\n\n    /**\n     * Optional number of currently active filters shown next to the filter icon.\n     *\n     * @default 0\n     */\n    activeCount?: number;\n};\n\nconst TableColumnFilter = (props: TableColumnFilterProps) => {\n    const {\n        activeCount = 0,\n        active = false,\n        children,\n        className,\n        dropdownClassName,\n        id,\n        onClose,\n        onOpen,\n        open,\n        popperConfig,\n        pullRight = true,\n        toggleClassName,\n        usePortal = true,\n        ...remainingProps\n    } = props;\n\n    const [internalOpen, setInternalOpen] = useState(false);\n\n    const isControlled = open !== undefined;\n    const isOpen = isControlled ? open : internalOpen;\n    const hasActiveFilters = activeCount > 0;\n\n    useEffect(() => {\n        const handleHorizontalScroll = () => {\n            if (!isOpen) {\n                return;\n            }\n\n            if (!isControlled) {\n                setInternalOpen(false);\n            }\n\n            onClose?.();\n        };\n\n        window.addEventListener(TABLE_HORIZONTAL_SCROLL_EVENT, handleHorizontalScroll);\n\n        return () => window.removeEventListener(TABLE_HORIZONTAL_SCROLL_EVENT, handleHorizontalScroll);\n    }, [isControlled, isOpen, onClose]);\n\n    return (\n        <ButtonDropdown\n            {...remainingProps}\n            id={id}\n            title={\n                <span className='display-flex gap-0 align-items-center text-color-dark'>\n                    <span\n                        className={`text-size-16 rioglyph ${active ? 'rioglyph-filter-active' : 'rioglyph-filter'}`}\n                        aria-hidden='true'\n                    />\n                    {hasActiveFilters && <span className='text-medium'>{activeCount}</span>}\n                </span>\n            }\n            bsStyle='default'\n            variant='outline'\n            bsSize='xs'\n            noCaret\n            iconOnly={!hasActiveFilters}\n            open={isOpen}\n            onOpen={event => {\n                if (!isControlled) {\n                    setInternalOpen(true);\n                }\n\n                onOpen?.(event);\n            }}\n            onClose={() => {\n                if (!isControlled) {\n                    setInternalOpen(false);\n                }\n\n                onClose?.();\n            }}\n            pullRight={pullRight}\n            usePortal={usePortal}\n            className={className}\n            popperConfig={popperConfig}\n            toggleClassName={classNames(\n                'table-head-filter-button border-color-light bg-decent hover-bg-lighter rounded-small',\n                hasActiveFilters && 'padding-left-2',\n                toggleClassName\n            )}\n            dropdownClassName={dropdownClassName}\n            customDropdown={children}\n        />\n    );\n};\n\nexport default TableColumnFilter;\n"],"names":["TableColumnFilter","props","activeCount","active","children","className","dropdownClassName","id","onClose","onOpen","open","popperConfig","pullRight","toggleClassName","usePortal","remainingProps","internalOpen","setInternalOpen","useState","isControlled","isOpen","hasActiveFilters","useEffect","handleHorizontalScroll","TABLE_HORIZONTAL_SCROLL_EVENT","jsx","ButtonDropdown","jsxs","event","classNames"],"mappings":";;;;;AAoFA,MAAMA,IAAoB,CAACC,MAAkC;AACzD,QAAM;AAAA,IACF,aAAAC,IAAc;AAAA,IACd,QAAAC,IAAS;AAAA,IACT,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,mBAAAC;AAAA,IACA,IAAAC;AAAA,IACA,SAAAC;AAAA,IACA,QAAAC;AAAA,IACA,MAAAC;AAAA,IACA,cAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,iBAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,GAAGC;AAAA,EAAA,IACHd,GAEE,CAACe,GAAcC,CAAe,IAAIC,EAAS,EAAK,GAEhDC,IAAeT,MAAS,QACxBU,IAASD,IAAeT,IAAOM,GAC/BK,IAAmBnB,IAAc;AAEvC,SAAAoB,EAAU,MAAM;AACZ,UAAMC,IAAyB,MAAM;AACjC,MAAKH,MAIAD,KACDF,EAAgB,EAAK,GAGzBT,IAAA;AAAA,IACJ;AAEA,kBAAO,iBAAiBgB,GAA+BD,CAAsB,GAEtE,MAAM,OAAO,oBAAoBC,GAA+BD,CAAsB;AAAA,EACjG,GAAG,CAACJ,GAAcC,GAAQZ,CAAO,CAAC,GAG9B,gBAAAiB;AAAA,IAACC;AAAA,IAAA;AAAA,MACI,GAAGX;AAAA,MACJ,IAAAR;AAAA,MACA,OACI,gBAAAoB,EAAC,QAAA,EAAK,WAAU,yDACZ,UAAA;AAAA,QAAA,gBAAAF;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,WAAW,yBAAyBtB,IAAS,2BAA2B,iBAAiB;AAAA,YACzF,eAAY;AAAA,UAAA;AAAA,QAAA;AAAA,QAEfkB,KAAoB,gBAAAI,EAAC,QAAA,EAAK,WAAU,eAAe,UAAAvB,EAAA,CAAY;AAAA,MAAA,GACpE;AAAA,MAEJ,SAAQ;AAAA,MACR,SAAQ;AAAA,MACR,QAAO;AAAA,MACP,SAAO;AAAA,MACP,UAAU,CAACmB;AAAA,MACX,MAAMD;AAAA,MACN,QAAQ,CAAAQ,MAAS;AACb,QAAKT,KACDF,EAAgB,EAAI,GAGxBR,IAASmB,CAAK;AAAA,MAClB;AAAA,MACA,SAAS,MAAM;AACX,QAAKT,KACDF,EAAgB,EAAK,GAGzBT,IAAA;AAAA,MACJ;AAAA,MACA,WAAAI;AAAA,MACA,WAAAE;AAAA,MACA,WAAAT;AAAA,MACA,cAAAM;AAAA,MACA,iBAAiBkB;AAAA,QACb;AAAA,QACAR,KAAoB;AAAA,QACpBR;AAAA,MAAA;AAAA,MAEJ,mBAAAP;AAAA,MACA,gBAAgBF;AAAA,IAAA;AAAA,EAAA;AAG5B;"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@rio-cloud/rio-uikit",
-    "version": "2.5.0",
+    "version": "2.5.1",
     "description": "The RIO UIKIT component library",
     "repository": {
         "type": "git",

package/version.d.ts

@@ -1 +1 @@
-export const version: "2.5.0";
+export const version: "2.5.1";

package/version.js

@@ -1,4 +1,4 @@
-const o = "2.5.0";
+const o = "2.5.1";
 export {
   o as version
 };

package/version.js.map

@@ -1 +1 @@
-{"version":3,"file":"version.js","sources":["../src/version.js"],"sourcesContent":["export const version = '2.5.0';\n"],"names":["version"],"mappings":"AAAY,MAACA,IAAU;"}
+{"version":3,"file":"version.js","sources":["../src/version.js"],"sourcesContent":["export const version = '2.5.1';\n"],"names":["version"],"mappings":"AAAY,MAACA,IAAU;"}