@rio-cloud/rio-uikit 2.2.0 → 2.3.0-beta.1

package/components/banner/BannerPage.js

@@ -1,13 +1,13 @@
 import { jsx as s } from "react/jsx-runtime";
-const r = ({ className: t = "", children: a, ...e }) => /* @__PURE__ */ s(
+const l = ({ className: a = "", children: t, ...e }) => /* @__PURE__ */ s(
   "div",
   {
-    className: `display-flex align-items-start align-items-center-ls width-100pct gap-15 ${t}`,
+    className: `display-flex align-items-start align-items-center-ls width-100pct gap-15 ${a}`,
     ...e,
-    children: a
+    children: t
   }
 );
 export {
-  r as default
+  l as default
 };
 //# sourceMappingURL=BannerPage.js.map

package/components/banner/BannerPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"BannerPage.js","sources":["../../../src/components/banner/BannerPage.tsx"],"sourcesContent":["import type { PropsWithChildren } from 'react';\n\ntype BannerPageProps = {\n    /**\n     * Additional classname added to the wrapper element.\n     */\n    className?: string;\n};\n\nconst BannerPage = ({ className = '', children, ...remainingProps }: PropsWithChildren<BannerPageProps>) => {\n    return (\n        <div\n            className={`display-flex align-items-start align-items-center-ls width-100pct gap-15 ${className}`}\n            {...remainingProps}\n        >\n            {children}\n        </div>\n    );\n};\n\nexport default BannerPage;\n"],"names":["BannerPage","className","children","remainingProps","jsx"],"mappings":";AASA,MAAMA,IAAa,CAAC,EAAE,WAAAC,IAAY,IAAI,UAAAC,GAAU,GAAGC,QAE3C,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,WAAW,4EAA4EH,CAAS;AAAA,IAC/F,GAAGE;AAAA,IAEH,UAAAD;AAAA,EAAA;AAAA;"}
+{"version":3,"file":"BannerPage.js","sources":["../../../src/components/banner/BannerPage.tsx"],"sourcesContent":["import type { PropsWithChildren } from 'react';\n\ntype BannerPageProps = {\n    /**\n     * Additional classname added to the wrapper element.\n     */\n    className?: string;\n};\n\nconst BannerPage = ({ className = '', children, ...remainingProps }: PropsWithChildren<BannerPageProps>) => (\n    <div\n        className={`display-flex align-items-start align-items-center-ls width-100pct gap-15 ${className}`}\n        {...remainingProps}\n    >\n        {children}\n    </div>\n);\n\nexport default BannerPage;\n"],"names":["BannerPage","className","children","remainingProps","jsx"],"mappings":";AASA,MAAMA,IAAa,CAAC,EAAE,WAAAC,IAAY,IAAI,UAAAC,GAAU,GAAGC,QAC/C,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,WAAW,4EAA4EH,CAAS;AAAA,IAC/F,GAAGE;AAAA,IAEH,UAAAD;AAAA,EAAA;AACL;"}

package/components/button/Button.d.ts

@@ -117,6 +117,13 @@ type BaseButtonProps = {
      * Whether the "ripple" effect should be suppressed on this button.
      */
     noRippleEffect?: boolean;
+    /**
+     * Optional key used to generate automatic GA tracking attributes when no explicit
+     * tracking attributes are provided.
+     *
+     * Resulting label format: `button::<autoTrackingKey>`.
+     */
+    autoTrackingKey?: string;
     /**
      * Number of the index used for keyboard support.
      *

package/components/button/Button.js

@@ -1,10 +1,11 @@
-import { jsxs as R, jsx as E } from "react/jsx-runtime";
-import { forwardRef as j, useState as L, useRef as K } from "react";
-import { noop as Y } from "es-toolkit/function";
-import $ from "../../utils/classNames.js";
+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 w from "../../hooks/useMergeRefs.js";
-const B = {
+import F from "../../hooks/useMergeRefs.js";
+import { getAutoTrackingAttributes as G } from "../../utils/analytics/autoTracking.js";
+const z = {
   DEFAULT: "default",
   UNSTYLED: "unstyled",
   PRIMARY: "primary",
@@ -15,108 +16,115 @@ const B = {
   SUCCESS: "success",
   MUTED: "muted",
   MUTED_FILLED: "muted-filled"
-}, s = {
+}, i = {
   VARIANT_LINK: "link",
   VARIANT_LINK_INLINE: "link-inline",
   VARIANT_OUTLINE: "outline",
   VARIANT_ACTION: "action"
-}, F = {
+}, W = {
   XS: "xs",
   SM: "sm",
   MD: "md",
   LG: "lg"
-}, r = j((_, k) => {
+}, u = Y((_, C) => {
   const {
     as: a = "button",
-    active: t = !1,
+    active: n = !1,
     disabled: e = !1,
     asToggle: f = !1,
-    onClick: l = Y,
-    bsStyle: C = "default",
-    bsSize: N,
-    variant: i,
+    onClick: l = w,
+    bsStyle: y = "default",
+    bsSize: b,
+    variant: s,
     iconOnly: O = !1,
     iconName: o,
     iconRight: h = !1,
-    multiline: y = !1,
-    block: D = !1,
-    className: M = "",
-    noRippleEffect: b = !1,
-    type: V = "button",
-    tabIndex: u = 0,
-    children: A,
-    ...I
-  } = _, [m, d] = L(t), g = K(null), T = w(g, k), [v, U] = L(t);
-  t !== v && (d(t), U(t));
-  const x = (n) => {
-    if (b || S(n.nativeEvent, n.currentTarget), f) {
-      const c = !m;
-      d(c), c && g.current?.blur(), l(c);
+    multiline: D = !1,
+    block: M = !1,
+    className: V = "",
+    noRippleEffect: N = !1,
+    autoTrackingKey: v,
+    type: U = "button",
+    tabIndex: A = 0,
+    children: m,
+    ...r
+  } = _, I = G({
+    autoTrackingKey: v,
+    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) {
+      const c = !g;
+      d(c), c && T.current?.blur(), l(c);
     } else
-      l(n);
-  }, P = (n) => {
+      l(t);
+  }, K = (t) => {
     if (e) {
-      n.preventDefault();
+      t.preventDefault();
       return;
     }
-    b || S(n.nativeEvent, n.currentTarget), l(n);
-  }, p = $(
+    N || S(t.nativeEvent, t.currentTarget), l(t);
+  }, R = B(
     "btn",
-    `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",
-    N && `btn-${N}`,
+    `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",
+    b && `btn-${b}`,
     f && "btn-toggle",
-    m && "active",
+    g && "active",
     O && "btn-icon-only",
     h && "btn-icon-right",
-    y && "btn-multiline",
-    D && "btn-block",
+    D && "btn-multiline",
+    M && "btn-block",
     a === "a" && "gap-0",
     a === "a" && e && "disabled",
     "btn-component",
-    M
+    V
   );
-  return a === "a" ? /* @__PURE__ */ R(
+  return a === "a" ? /* @__PURE__ */ E(
     "a",
     {
-      ref: T,
+      ref: p,
+      ...r,
       ...I,
-      className: p,
-      onClick: P,
+      className: R,
+      onClick: K,
       "aria-disabled": e || void 0,
-      tabIndex: e ? -1 : u,
+      tabIndex: e ? -1 : A,
       children: [
-        o && /* @__PURE__ */ E("span", { className: `rioglyph ${o}` }),
-        A
+        o && /* @__PURE__ */ k("span", { className: `rioglyph ${o}` }),
+        m
       ]
     }
-  ) : /* @__PURE__ */ R(
+  ) : /* @__PURE__ */ E(
     "button",
     {
-      ref: T,
-      type: V,
+      ref: p,
+      type: U,
+      ...r,
       ...I,
-      className: p,
-      onClick: x,
+      className: R,
+      onClick: j,
       disabled: e,
-      tabIndex: u,
+      tabIndex: A,
       children: [
-        o && /* @__PURE__ */ E("span", { className: `rioglyph ${o}` }),
-        A
+        o && /* @__PURE__ */ k("span", { className: `rioglyph ${o}` }),
+        m
       ]
     }
   );
 });
-Object.assign(r, B);
-Object.assign(r, s);
-Object.assign(r, F);
+Object.assign(u, z);
+Object.assign(u, i);
+Object.assign(u, W);
 export {
-  F as SIZES_MAP,
-  B as STYLES_MAP,
-  s as VARIANTS_MAP,
-  r as default
+  W as SIZES_MAP,
+  z as STYLES_MAP,
+  i 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';\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 rio-glyph icon name that comes in handy for icon only buttons for not adding\n     * a span tag for the icon which reduces boilerplate code.\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     * 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 type of the button. This may be used for form submit buttons.\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        type = 'button',\n        tabIndex = 0,\n        children,\n        ...remainingProps\n    } = props;\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                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            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","type","tabIndex","children","remainingProps","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 rio-glyph icon name that comes in handy for icon only buttons for not adding\n     * a span tag for the icon which reduces boilerplate code.\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 type of the button. This may be used for form submit buttons.\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":";;;;;;;AAiBO,MAAMA,IAAa;AAAA,EACtB,SAAS;AAAA,EACT,UAAU;AAAA,EACV,SAAS;AAAA,EACT,WAAW;AAAA,EACX,MAAM;AAAA,EACN,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,OAAO;AAAA,EACP,cAAc;AAClB,GAKaC,IAAe;AAAA,EACxB,cAAc;AAAA,EACd,qBAAqB;AAAA,EACrB,iBAAiB;AAAA,EACjB,gBAAgB;AACpB,GAIaC,IAAY;AAAA,EACrB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACR,GAuNMC,IAASC,EAAqC,CAACC,GAAOC,MAAQ;AAChE,QAAM;AAAA,IACF,IAAAC,IAAK;AAAA,IACL,QAAAC,IAAS;AAAA,IACT,UAAAC,IAAW;AAAA,IACX,UAAAC,IAAW;AAAA,IACX,SAAAC,IAAUC;AAAA,IACV,SAAAC,IAAU;AAAA,IACV,QAAAC;AAAA,IACA,SAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,UAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,WAAAC,IAAY;AAAA,IACZ,OAAAC,IAAQ;AAAA,IACR,WAAAC,IAAY;AAAA,IACZ,gBAAAC,IAAiB;AAAA,IACjB,iBAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,UAAAC,IAAW;AAAA,IACX,UAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACHtB,GAEEuB,IAAyBC,EAA0B;AAAA,IACrD,iBAAAN;AAAA,IACA,OAAOI;AAAA,IACP,QAAQ;AAAA,EAAA,CACX,GAEK,CAACG,GAAWC,CAAY,IAAIC,EAASxB,CAAM,GAE3CyB,IAASC,EAA0B,IAAI,GAEvCC,IAAYC,EAAaH,GAAQ3B,CAAG,GAIpC,CAAC+B,GAAgBC,CAAiB,IAAIN,EAASxB,CAAM;AAC3D,EAAIA,MAAW6B,MACXN,EAAavB,CAAM,GACnB8B,EAAkB9B,CAAM;AAG5B,QAAM+B,IAAoB,CAACC,MAA2D;AAKlF,QAJKlB,KACDmB,EAAmBD,EAAM,aAAaA,EAAM,aAAa,GAGzD9B,GAAU;AAEV,YAAMgC,IAAe,CAACZ;AACtB,MAAAC,EAAaW,CAAY,GAErBA,KACAT,EAAO,SAAS,KAAA,GAGnBtB,EAAiC+B,CAAY;AAAA,IAClD;AACK,MAAA/B,EAAyE6B,CAAK;AAAA,EAEvF,GAEMG,IAAkB,CAACH,MAA2D;AAChF,QAAI/B,GAAU;AACV,MAAA+B,EAAM,eAAA;AACN;AAAA,IACJ;AAEA,IAAKlB,KACDmB,EAAmBD,EAAM,aAAaA,EAAM,aAAa,GAG5D7B,EAAyE6B,CAAK;AAAA,EACnF,GAEMI,IAAmBC;AAAA,IACrB;AAAA,IACA,OAAOhC,CAAO;AAAA,IACdE,MAAYd,EAAa,gBAAgB;AAAA,IACzCc,MAAYd,EAAa,uBAAuB;AAAA,IAChDc,MAAYd,EAAa,mBAAmB;AAAA,IAC5Cc,MAAYd,EAAa,kBAAkB;AAAA,IAC3Ca,KAAU,OAAOA,CAAM;AAAA,IACvBJ,KAAY;AAAA,IACZoB,KAAa;AAAA,IACbd,KAAY;AAAA,IACZE,KAAa;AAAA,IACbC,KAAa;AAAA,IACbC,KAAS;AAAA,IACTb,MAAO,OAAO;AAAA,IACdA,MAAO,OAAOE,KAAY;AAAA,IAC1B;AAAA,IACAY;AAAA,EAAA;AAGJ,SAAId,MAAO,MAEH,gBAAAuC;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,KAAKX;AAAA,MACJ,GAAIR;AAAA,MACJ,GAAGC;AAAA,MACJ,WAAWgB;AAAA,MACX,SAASD;AAAA,MACT,iBAAelC,KAAY;AAAA,MAC3B,UAAUA,IAAW,KAAKgB;AAAA,MAEzB,UAAA;AAAA,QAAAR,KAAY,gBAAA8B,EAAC,QAAA,EAAK,WAAW,YAAY9B,CAAQ,IAAI;AAAA,QACrDS;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,IAMT,gBAAAoB;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,KAAKX;AAAA,MACL,MAAAX;AAAA,MACC,GAAIG;AAAA,MACJ,GAAGC;AAAA,MACJ,WAAWgB;AAAA,MACX,SAASL;AAAA,MACT,UAAA9B;AAAA,MACA,UAAAgB;AAAA,MAEC,UAAA;AAAA,QAAAR,KAAY,gBAAA8B,EAAC,QAAA,EAAK,WAAW,YAAY9B,CAAQ,IAAI;AAAA,QACrDS;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGb,CAAC;AAED,OAAO,OAAOvB,GAAQH,CAAU;AAChC,OAAO,OAAOG,GAAQF,CAAY;AAClC,OAAO,OAAOE,GAAQD,CAAS;"}

package/components/checkbox/Checkbox.js

@@ -3,20 +3,20 @@ import { useRef as H, useEffect as K } from "react";
 import { noop as k } from "es-toolkit/function";
 import p from "../../utils/classNames.js";
 import { CheckboxIcon as P } from "./CheckboxIcon.js";
-const S = 16, x = "vertical", V = "horizontal", I = (i) => {
+const S = 16, x = "vertical", V = "horizontal", I = (l) => {
   const {
     checked: L,
     children: o,
-    className: l,
+    className: d,
     custom: m = !1,
     defaultChecked: g,
-    disabled: d = !1,
+    disabled: c = !1,
     error: N = !1,
-    icon: c = "",
+    icon: s = "",
     iconLabelPosition: E = x,
     iconSize: _ = S,
-    id: f = i.name,
-    indeterminate: s = !1,
+    id: f = l.name,
+    indeterminate: a = !1,
     inline: A = !1,
     inputRef: O,
     label: R,
@@ -28,11 +28,11 @@ const S = 16, x = "vertical", V = "horizontal", I = (i) => {
     size: C,
     tabIndex: B = 0,
     ...w
-  } = i, n = H(null);
+  } = l, n = H(null);
   K(() => {
     const e = n.current?.firstChild;
-    e && (e.indeterminate = s);
-  }, [s, n.current]);
+    e && (e.indeterminate = a);
+  }, [a, n.current]);
   const z = (e) => {
     switch (e.key) {
       case " ":
@@ -43,21 +43,22 @@ const S = 16, x = "vertical", V = "horizontal", I = (i) => {
         break;
     }
   }, b = (e) => {
-    if (e.preventDefault(), d)
+    if (e.preventDefault(), c)
       return;
     const t = n.current?.firstChild;
     t.indeterminate && (t.indeterminate = !1), t.checked = !t.checked, u(e), h(e);
-  }, a = R || o, Z = p(
+  }, i = R || o, Z = p(
     "checkbox",
     A && "checkbox-inline",
     C === "large" && "checkbox-large",
     y && "checkbox-right",
-    l
+    c && "disabled",
+    d
   ), j = p(
     N && "error",
     C === "large" && "large",
-    s && "indeterminate",
-    l
+    a && "indeterminate",
+    d
   );
   return /* @__PURE__ */ F(
     "label",
@@ -78,15 +79,15 @@ const S = 16, x = "vertical", V = "horizontal", I = (i) => {
             checked: L,
             required: T,
             defaultChecked: g,
-            disabled: d,
+            disabled: c,
             className: j,
             onClick: u,
             onChange: h,
             ref: O
           }
         ),
-        !!c && /* @__PURE__ */ r(P, { icon: c, iconSize: _, iconLabelPosition: E, text: a }),
-        !c && !m && /* @__PURE__ */ r("span", { className: "checkbox-text", children: a && /* @__PURE__ */ r("span", { children: a }) }),
+        !!s && /* @__PURE__ */ r(P, { icon: s, iconSize: _, iconLabelPosition: E, text: i }),
+        !s && !m && /* @__PURE__ */ r("span", { className: "checkbox-text", children: i && /* @__PURE__ */ r("span", { children: i }) }),
         m && o && o
       ]
     }

package/components/checkbox/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","sources":["../../../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["import React, { useRef, useEffect, type ReactNode, type PropsWithChildren } from 'react';\nimport { noop } from 'es-toolkit/function';\n\nimport classNames from '../../utils/classNames';\nimport { CheckboxIcon } from './CheckboxIcon';\n\nconst DEFAULT_ICON_SIZE = 16;\n\nconst ICON_LABEL_VERTICAL = 'vertical';\nconst ICON_LABEL_HORIZONTAL = 'horizontal';\n\nexport type CheckboxProps = {\n    /**\n     * Passed through as HTML attribute to the underlying input.\n     * Set an `id` or a `name` otherwise.\n     */\n    id?: string;\n\n    /**\n     * Passed through as HTML attribute to the underlying input\n     */\n    name?: string;\n\n    /**\n     * Define some text or component as a label.\n     */\n    label?: string | ReactNode;\n\n    /**\n     * Define a custom icon for the checkbox by naming a rioglyph icon like `rioglyph-truck`.\n     */\n    icon?: string;\n\n    /**\n     * The icon size in pixel.\n     */\n    iconSize?: number;\n\n    /**\n     * The label position for a custom icon checkbox. Using this on a regular checkbox has no effect.\n     *\n     * Possible values are: `horizontal` or `vertical`.\n     */\n    iconLabelPosition?: typeof ICON_LABEL_VERTICAL | typeof ICON_LABEL_HORIZONTAL;\n\n    /**\n     * Callback function that is invoked when the checkbox is checked or unchecked.\n     * @param event\n     * @returns\n     */\n    onClick?: (event: React.MouseEvent<HTMLInputElement>) => void;\n\n    /**\n     * Callback function that is invoked when the checkbox value changes.\n     * This will also be invoked by a keyboard event.\n     * @param event\n     * @returns\n     */\n    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;\n\n    /**\n     * Defines whether the checkbox is checked or not (state cannot be changed).\n     */\n    checked?: boolean;\n\n    /**\n     * Defines whether the checkbox is initially checked or not (state can be changed on click).\n     */\n    defaultChecked?: boolean;\n\n    /**\n     * Defines whether the checkbox is disabled or not.\n     * @default false\n     */\n    disabled?: boolean;\n\n    /**\n     * Allows for rendering a completely different layout with or without a checkbox tick.\n     * Note, when using the `custom` option, make sure to wrap the children with the class name\n     * `checkbox-text-wrapper`. For using the checkbox tick, use an element with class name\n     * `checkbox-text`.\n     *\n     * @example\n     * <div className='checkbox-text-wrapper display-flex justify-content-between'>\n     *     <div className='margin-right-15'>\n     *         <div className='text-medium text-size-16 text-color-darker'>Option 1</div>\n     *         <div className='text-color-dark'>This option is a first option</div>\n     *     </div>\n     *     <div className='checkbox-text' />\n     * </div>\n     */\n    custom?: boolean;\n\n    /**\n     * Defines whether the checkbox is required or not.\n     *\n     * @default false\n     */\n    required?: boolean;\n\n    /**\n     * Defines if the checkbox is in an indeterminate state in regard to other checkboxes that may be in different\n     * selection state.\n     *\n     * @default false\n     */\n    indeterminate?: boolean;\n\n    /**\n     * Defines whether the checkbox is applying an inline style. Use this in combination\n     * with other checkboxes.\n     *\n     * @default false\n     */\n    inline?: boolean;\n\n    /**\n     * Defines whether the checkbox is on the right side.\n     *\n     * @default false\n     */\n    right?: boolean;\n\n    /**\n     * Use \"error\" to change color of the checkbox.\n     *\n     * @default false\n     */\n    error?: boolean;\n\n    /**\n     * Defines the size of the checkbox. Omitting this prop renders the Checkbox in normal size.\n     *\n     * Possible values are:\n     * `large`\n     */\n    size?: 'large';\n\n    /**\n     * A React ref assigned to the input itself.\n     */\n    inputRef?: React.RefObject<HTMLInputElement>;\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 input field.\n     */\n    className?: string;\n};\n\ntype CheckboxEvent =\n    | React.MouseEvent<HTMLInputElement>\n    | React.ChangeEvent<HTMLInputElement>\n    | React.KeyboardEvent<HTMLLabelElement>;\n\nconst Checkbox = (props: PropsWithChildren<CheckboxProps>) => {\n    const {\n        checked,\n        children,\n        className,\n        custom = false,\n        defaultChecked,\n        disabled = false,\n        error = false,\n        icon = '',\n        iconLabelPosition = ICON_LABEL_VERTICAL,\n        iconSize = DEFAULT_ICON_SIZE,\n        id = props.name,\n        indeterminate = false,\n        inline = false,\n        inputRef,\n        label,\n        name,\n        onChange = noop,\n        onClick = noop,\n        required = false,\n        right,\n        size,\n        tabIndex = 0,\n        ...remainingProps\n    } = props;\n\n    const labelRef = useRef<HTMLLabelElement>(null);\n\n    useEffect(() => {\n        const input = labelRef.current?.firstChild as HTMLInputElement;\n        if (input) {\n            input.indeterminate = indeterminate;\n        }\n    }, [indeterminate, labelRef.current]);\n\n    const handleToggleKeyDown = (event: React.KeyboardEvent<HTMLLabelElement>) => {\n        switch (event.key) {\n            case ' ':\n                // toggle on space\n                toggle(event);\n                break;\n            case 'Enter':\n                // open on enter\n                toggle(event);\n                break;\n            default:\n                break;\n        }\n    };\n\n    const toggle = (event: CheckboxEvent) => {\n        event.preventDefault();\n\n        if (disabled) {\n            return;\n        }\n\n        const input = labelRef.current?.firstChild as HTMLInputElement;\n\n        if (input.indeterminate) {\n            input.indeterminate = false;\n        }\n\n        input.checked = !input.checked;\n\n        onClick(event as React.MouseEvent<HTMLInputElement>);\n        onChange(event as React.ChangeEvent<HTMLInputElement>);\n    };\n\n    const text = label || children;\n\n    const labelClassnames = classNames(\n        'checkbox',\n        inline && 'checkbox-inline',\n        size === 'large' && 'checkbox-large',\n        right && 'checkbox-right',\n        className\n    );\n\n    const inputClassnames = classNames(\n        error && 'error',\n        size === 'large' && 'large',\n        indeterminate && 'indeterminate',\n        className\n    );\n\n    const renderCustomIcon = !!icon;\n    const renderCustomContent = custom && children;\n    const renderDefault = !icon && !custom;\n\n    return (\n        <label\n            {...remainingProps}\n            className={labelClassnames}\n            tabIndex={tabIndex}\n            htmlFor={id}\n            onKeyDown={handleToggleKeyDown}\n            ref={labelRef}\n        >\n            <input\n                id={id}\n                name={name}\n                type='checkbox'\n                checked={checked}\n                required={required}\n                defaultChecked={defaultChecked}\n                disabled={disabled}\n                className={inputClassnames}\n                onClick={onClick}\n                onChange={onChange}\n                ref={inputRef}\n            />\n            {renderCustomIcon && (\n                <CheckboxIcon icon={icon} iconSize={iconSize} iconLabelPosition={iconLabelPosition} text={text} />\n            )}\n            {renderDefault && <span className='checkbox-text'>{text && <span>{text}</span>}</span>}\n            {renderCustomContent && children}\n        </label>\n    );\n};\n\nCheckbox.ICON_LABEL_VERTICAL = ICON_LABEL_VERTICAL as typeof ICON_LABEL_VERTICAL;\nCheckbox.ICON_LABEL_HORIZONTAL = ICON_LABEL_HORIZONTAL as typeof ICON_LABEL_HORIZONTAL;\n\nexport default Checkbox;\n"],"names":["DEFAULT_ICON_SIZE","ICON_LABEL_VERTICAL","ICON_LABEL_HORIZONTAL","Checkbox","props","checked","children","className","custom","defaultChecked","disabled","error","icon","iconLabelPosition","iconSize","id","indeterminate","inline","inputRef","label","name","onChange","noop","onClick","required","right","size","tabIndex","remainingProps","labelRef","useRef","useEffect","input","handleToggleKeyDown","event","toggle","text","labelClassnames","classNames","inputClassnames","jsxs","jsx","CheckboxIcon"],"mappings":";;;;;AAMA,MAAMA,IAAoB,IAEpBC,IAAsB,YACtBC,IAAwB,cAwJxBC,IAAW,CAACC,MAA4C;AAC1D,QAAM;AAAA,IACF,SAAAC;AAAA,IACA,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,QAAAC,IAAS;AAAA,IACT,gBAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,OAAAC,IAAQ;AAAA,IACR,MAAAC,IAAO;AAAA,IACP,mBAAAC,IAAoBZ;AAAA,IACpB,UAAAa,IAAWd;AAAA,IACX,IAAAe,IAAKX,EAAM;AAAA,IACX,eAAAY,IAAgB;AAAA,IAChB,QAAAC,IAAS;AAAA,IACT,UAAAC;AAAA,IACA,OAAAC;AAAA,IACA,MAAAC;AAAA,IACA,UAAAC,IAAWC;AAAA,IACX,SAAAC,IAAUD;AAAA,IACV,UAAAE,IAAW;AAAA,IACX,OAAAC;AAAA,IACA,MAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,GAAGC;AAAA,EAAA,IACHxB,GAEEyB,IAAWC,EAAyB,IAAI;AAE9C,EAAAC,EAAU,MAAM;AACZ,UAAMC,IAAQH,EAAS,SAAS;AAChC,IAAIG,MACAA,EAAM,gBAAgBhB;AAAA,EAE9B,GAAG,CAACA,GAAea,EAAS,OAAO,CAAC;AAEpC,QAAMI,IAAsB,CAACC,MAAiD;AAC1E,YAAQA,EAAM,KAAA;AAAA,MACV,KAAK;AAED,QAAAC,EAAOD,CAAK;AACZ;AAAA,MACJ,KAAK;AAED,QAAAC,EAAOD,CAAK;AACZ;AAAA,IAEA;AAAA,EAEZ,GAEMC,IAAS,CAACD,MAAyB;AAGrC,QAFAA,EAAM,eAAA,GAEFxB;AACA;AAGJ,UAAMsB,IAAQH,EAAS,SAAS;AAEhC,IAAIG,EAAM,kBACNA,EAAM,gBAAgB,KAG1BA,EAAM,UAAU,CAACA,EAAM,SAEvBT,EAAQW,CAA2C,GACnDb,EAASa,CAA4C;AAAA,EACzD,GAEME,IAAOjB,KAASb,GAEhB+B,IAAkBC;AAAA,IACpB;AAAA,IACArB,KAAU;AAAA,IACVS,MAAS,WAAW;AAAA,IACpBD,KAAS;AAAA,IACTlB;AAAA,EAAA,GAGEgC,IAAkBD;AAAA,IACpB3B,KAAS;AAAA,IACTe,MAAS,WAAW;AAAA,IACpBV,KAAiB;AAAA,IACjBT;AAAA,EAAA;AAOJ,SACI,gBAAAiC;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAGZ;AAAA,MACJ,WAAWS;AAAA,MACX,UAAAV;AAAA,MACA,SAASZ;AAAA,MACT,WAAWkB;AAAA,MACX,KAAKJ;AAAA,MAEL,UAAA;AAAA,QAAA,gBAAAY;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,IAAA1B;AAAA,YACA,MAAAK;AAAA,YACA,MAAK;AAAA,YACL,SAAAf;AAAA,YACA,UAAAmB;AAAA,YACA,gBAAAf;AAAA,YACA,UAAAC;AAAA,YACA,WAAW6B;AAAA,YACX,SAAAhB;AAAA,YACA,UAAAF;AAAA,YACA,KAAKH;AAAA,UAAA;AAAA,QAAA;AAAA,QAxBQ,CAAC,CAACN,KA2Bf,gBAAA6B,EAACC,GAAA,EAAa,MAAA9B,GAAY,UAAAE,GAAoB,mBAAAD,GAAsC,MAAAuB,GAAY;AAAA,QAzBtF,CAACxB,KAAQ,CAACJ,uBA2BL,QAAA,EAAK,WAAU,iBAAiB,UAAA4B,KAAQ,gBAAAK,EAAC,QAAA,EAAM,UAAAL,EAAA,CAAK,EAAA,CAAQ;AAAA,QA5B3D5B,KAAUF,KA6BNA;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGpC;AAEAH,EAAS,sBAAsBF;AAC/BE,EAAS,wBAAwBD;"}
+{"version":3,"file":"Checkbox.js","sources":["../../../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["import React, { useRef, useEffect, type ReactNode, type PropsWithChildren } from 'react';\nimport { noop } from 'es-toolkit/function';\n\nimport classNames from '../../utils/classNames';\nimport { CheckboxIcon } from './CheckboxIcon';\n\nconst DEFAULT_ICON_SIZE = 16;\n\nconst ICON_LABEL_VERTICAL = 'vertical';\nconst ICON_LABEL_HORIZONTAL = 'horizontal';\n\nexport type CheckboxProps = {\n    /**\n     * Passed through as HTML attribute to the underlying input.\n     * Set an `id` or a `name` otherwise.\n     */\n    id?: string;\n\n    /**\n     * Passed through as HTML attribute to the underlying input\n     */\n    name?: string;\n\n    /**\n     * Define some text or component as a label.\n     */\n    label?: string | ReactNode;\n\n    /**\n     * Define a custom icon for the checkbox by naming a rioglyph icon like `rioglyph-truck`.\n     */\n    icon?: string;\n\n    /**\n     * The icon size in pixel.\n     */\n    iconSize?: number;\n\n    /**\n     * The label position for a custom icon checkbox. Using this on a regular checkbox has no effect.\n     *\n     * Possible values are: `horizontal` or `vertical`.\n     */\n    iconLabelPosition?: typeof ICON_LABEL_VERTICAL | typeof ICON_LABEL_HORIZONTAL;\n\n    /**\n     * Callback function that is invoked when the checkbox is checked or unchecked.\n     * @param event\n     * @returns\n     */\n    onClick?: (event: React.MouseEvent<HTMLInputElement>) => void;\n\n    /**\n     * Callback function that is invoked when the checkbox value changes.\n     * This will also be invoked by a keyboard event.\n     * @param event\n     * @returns\n     */\n    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;\n\n    /**\n     * Defines whether the checkbox is checked or not (state cannot be changed).\n     */\n    checked?: boolean;\n\n    /**\n     * Defines whether the checkbox is initially checked or not (state can be changed on click).\n     */\n    defaultChecked?: boolean;\n\n    /**\n     * Defines whether the checkbox is disabled or not.\n     * @default false\n     */\n    disabled?: boolean;\n\n    /**\n     * Allows for rendering a completely different layout with or without a checkbox tick.\n     * Note, when using the `custom` option, make sure to wrap the children with the class name\n     * `checkbox-text-wrapper`. For using the checkbox tick, use an element with class name\n     * `checkbox-text`.\n     *\n     * @example\n     * <div className='checkbox-text-wrapper display-flex justify-content-between'>\n     *     <div className='margin-right-15'>\n     *         <div className='text-medium text-size-16 text-color-darker'>Option 1</div>\n     *         <div className='text-color-dark'>This option is a first option</div>\n     *     </div>\n     *     <div className='checkbox-text' />\n     * </div>\n     */\n    custom?: boolean;\n\n    /**\n     * Defines whether the checkbox is required or not.\n     *\n     * @default false\n     */\n    required?: boolean;\n\n    /**\n     * Defines if the checkbox is in an indeterminate state in regard to other checkboxes that may be in different\n     * selection state.\n     *\n     * @default false\n     */\n    indeterminate?: boolean;\n\n    /**\n     * Defines whether the checkbox is applying an inline style. Use this in combination\n     * with other checkboxes.\n     *\n     * @default false\n     */\n    inline?: boolean;\n\n    /**\n     * Defines whether the checkbox is on the right side.\n     *\n     * @default false\n     */\n    right?: boolean;\n\n    /**\n     * Use \"error\" to change color of the checkbox.\n     *\n     * @default false\n     */\n    error?: boolean;\n\n    /**\n     * Defines the size of the checkbox. Omitting this prop renders the Checkbox in normal size.\n     *\n     * Possible values are:\n     * `large`\n     */\n    size?: 'large';\n\n    /**\n     * A React ref assigned to the input itself.\n     */\n    inputRef?: React.RefObject<HTMLInputElement>;\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 input field.\n     */\n    className?: string;\n};\n\ntype CheckboxEvent =\n    | React.MouseEvent<HTMLInputElement>\n    | React.ChangeEvent<HTMLInputElement>\n    | React.KeyboardEvent<HTMLLabelElement>;\n\nconst Checkbox = (props: PropsWithChildren<CheckboxProps>) => {\n    const {\n        checked,\n        children,\n        className,\n        custom = false,\n        defaultChecked,\n        disabled = false,\n        error = false,\n        icon = '',\n        iconLabelPosition = ICON_LABEL_VERTICAL,\n        iconSize = DEFAULT_ICON_SIZE,\n        id = props.name,\n        indeterminate = false,\n        inline = false,\n        inputRef,\n        label,\n        name,\n        onChange = noop,\n        onClick = noop,\n        required = false,\n        right,\n        size,\n        tabIndex = 0,\n        ...remainingProps\n    } = props;\n\n    const labelRef = useRef<HTMLLabelElement>(null);\n\n    useEffect(() => {\n        const input = labelRef.current?.firstChild as HTMLInputElement;\n        if (input) {\n            input.indeterminate = indeterminate;\n        }\n    }, [indeterminate, labelRef.current]);\n\n    const handleToggleKeyDown = (event: React.KeyboardEvent<HTMLLabelElement>) => {\n        switch (event.key) {\n            case ' ':\n                // toggle on space\n                toggle(event);\n                break;\n            case 'Enter':\n                // open on enter\n                toggle(event);\n                break;\n            default:\n                break;\n        }\n    };\n\n    const toggle = (event: CheckboxEvent) => {\n        event.preventDefault();\n\n        if (disabled) {\n            return;\n        }\n\n        const input = labelRef.current?.firstChild as HTMLInputElement;\n\n        if (input.indeterminate) {\n            input.indeterminate = false;\n        }\n\n        input.checked = !input.checked;\n\n        onClick(event as React.MouseEvent<HTMLInputElement>);\n        onChange(event as React.ChangeEvent<HTMLInputElement>);\n    };\n\n    const text = label || children;\n\n    const labelClassnames = classNames(\n        'checkbox',\n        inline && 'checkbox-inline',\n        size === 'large' && 'checkbox-large',\n        right && 'checkbox-right',\n        disabled && 'disabled',\n        className\n    );\n\n    const inputClassnames = classNames(\n        error && 'error',\n        size === 'large' && 'large',\n        indeterminate && 'indeterminate',\n        className\n    );\n\n    const renderCustomIcon = !!icon;\n    const renderCustomContent = custom && children;\n    const renderDefault = !icon && !custom;\n\n    return (\n        <label\n            {...remainingProps}\n            className={labelClassnames}\n            tabIndex={tabIndex}\n            htmlFor={id}\n            onKeyDown={handleToggleKeyDown}\n            ref={labelRef}\n        >\n            <input\n                id={id}\n                name={name}\n                type='checkbox'\n                checked={checked}\n                required={required}\n                defaultChecked={defaultChecked}\n                disabled={disabled}\n                className={inputClassnames}\n                onClick={onClick}\n                onChange={onChange}\n                ref={inputRef}\n            />\n            {renderCustomIcon && (\n                <CheckboxIcon icon={icon} iconSize={iconSize} iconLabelPosition={iconLabelPosition} text={text} />\n            )}\n            {renderDefault && <span className='checkbox-text'>{text && <span>{text}</span>}</span>}\n            {renderCustomContent && children}\n        </label>\n    );\n};\n\nCheckbox.ICON_LABEL_VERTICAL = ICON_LABEL_VERTICAL as typeof ICON_LABEL_VERTICAL;\nCheckbox.ICON_LABEL_HORIZONTAL = ICON_LABEL_HORIZONTAL as typeof ICON_LABEL_HORIZONTAL;\n\nexport default Checkbox;\n"],"names":["DEFAULT_ICON_SIZE","ICON_LABEL_VERTICAL","ICON_LABEL_HORIZONTAL","Checkbox","props","checked","children","className","custom","defaultChecked","disabled","error","icon","iconLabelPosition","iconSize","id","indeterminate","inline","inputRef","label","name","onChange","noop","onClick","required","right","size","tabIndex","remainingProps","labelRef","useRef","useEffect","input","handleToggleKeyDown","event","toggle","text","labelClassnames","classNames","inputClassnames","jsxs","jsx","CheckboxIcon"],"mappings":";;;;;AAMA,MAAMA,IAAoB,IAEpBC,IAAsB,YACtBC,IAAwB,cAwJxBC,IAAW,CAACC,MAA4C;AAC1D,QAAM;AAAA,IACF,SAAAC;AAAA,IACA,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,QAAAC,IAAS;AAAA,IACT,gBAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,OAAAC,IAAQ;AAAA,IACR,MAAAC,IAAO;AAAA,IACP,mBAAAC,IAAoBZ;AAAA,IACpB,UAAAa,IAAWd;AAAA,IACX,IAAAe,IAAKX,EAAM;AAAA,IACX,eAAAY,IAAgB;AAAA,IAChB,QAAAC,IAAS;AAAA,IACT,UAAAC;AAAA,IACA,OAAAC;AAAA,IACA,MAAAC;AAAA,IACA,UAAAC,IAAWC;AAAA,IACX,SAAAC,IAAUD;AAAA,IACV,UAAAE,IAAW;AAAA,IACX,OAAAC;AAAA,IACA,MAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,GAAGC;AAAA,EAAA,IACHxB,GAEEyB,IAAWC,EAAyB,IAAI;AAE9C,EAAAC,EAAU,MAAM;AACZ,UAAMC,IAAQH,EAAS,SAAS;AAChC,IAAIG,MACAA,EAAM,gBAAgBhB;AAAA,EAE9B,GAAG,CAACA,GAAea,EAAS,OAAO,CAAC;AAEpC,QAAMI,IAAsB,CAACC,MAAiD;AAC1E,YAAQA,EAAM,KAAA;AAAA,MACV,KAAK;AAED,QAAAC,EAAOD,CAAK;AACZ;AAAA,MACJ,KAAK;AAED,QAAAC,EAAOD,CAAK;AACZ;AAAA,IAEA;AAAA,EAEZ,GAEMC,IAAS,CAACD,MAAyB;AAGrC,QAFAA,EAAM,eAAA,GAEFxB;AACA;AAGJ,UAAMsB,IAAQH,EAAS,SAAS;AAEhC,IAAIG,EAAM,kBACNA,EAAM,gBAAgB,KAG1BA,EAAM,UAAU,CAACA,EAAM,SAEvBT,EAAQW,CAA2C,GACnDb,EAASa,CAA4C;AAAA,EACzD,GAEME,IAAOjB,KAASb,GAEhB+B,IAAkBC;AAAA,IACpB;AAAA,IACArB,KAAU;AAAA,IACVS,MAAS,WAAW;AAAA,IACpBD,KAAS;AAAA,IACTf,KAAY;AAAA,IACZH;AAAA,EAAA,GAGEgC,IAAkBD;AAAA,IACpB3B,KAAS;AAAA,IACTe,MAAS,WAAW;AAAA,IACpBV,KAAiB;AAAA,IACjBT;AAAA,EAAA;AAOJ,SACI,gBAAAiC;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAGZ;AAAA,MACJ,WAAWS;AAAA,MACX,UAAAV;AAAA,MACA,SAASZ;AAAA,MACT,WAAWkB;AAAA,MACX,KAAKJ;AAAA,MAEL,UAAA;AAAA,QAAA,gBAAAY;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,IAAA1B;AAAA,YACA,MAAAK;AAAA,YACA,MAAK;AAAA,YACL,SAAAf;AAAA,YACA,UAAAmB;AAAA,YACA,gBAAAf;AAAA,YACA,UAAAC;AAAA,YACA,WAAW6B;AAAA,YACX,SAAAhB;AAAA,YACA,UAAAF;AAAA,YACA,KAAKH;AAAA,UAAA;AAAA,QAAA;AAAA,QAxBQ,CAAC,CAACN,KA2Bf,gBAAA6B,EAACC,GAAA,EAAa,MAAA9B,GAAY,UAAAE,GAAoB,mBAAAD,GAAsC,MAAAuB,GAAY;AAAA,QAzBtF,CAACxB,KAAQ,CAACJ,uBA2BL,QAAA,EAAK,WAAU,iBAAiB,UAAA4B,KAAQ,gBAAAK,EAAC,QAAA,EAAM,UAAAL,EAAA,CAAK,EAAA,CAAQ;AAAA,QA5B3D5B,KAAUF,KA6BNA;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGpC;AAEAH,EAAS,sBAAsBF;AAC/BE,EAAS,wBAAwBD;"}

package/components/datepicker/DateRangePicker.js

@@ -121,7 +121,6 @@ class E extends W {
    * @param {object} nextProps - The next props.
    * @returns {undefined}
    */
-  // eslint-disable-next-line camelcase
   UNSAFE_componentWillReceiveProps(e) {
     const { startValue: a, endValue: s, textDefault: i, customRangeOnly: n, locale: l, defaultStartValue: d, defaultEndValue: r } = e, { internalStartValue: u, internalEndValue: c } = this.state, m = R(a) && R(s) && R(u) && R(c), g = T(a) && T(s);
     m || g ? this.setState({
@@ -340,7 +339,6 @@ class E extends W {
       i
     ), /* @__PURE__ */ React.createElement("button", { type: "button", onClick: this.toggleDropdownOpen, className: "btn btn-default pull-right" }, n)));
   }
-  // eslint-disable-next-line complexity
   render() {
     const {
       locale: e,