@rio-cloud/rio-uikit 2.0.0-beta.1 → 2.0.0-beta.2

package/components/dropdown/DropdownSubmenu.js

@@ -1,31 +1,40 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
-import classNames from 'classnames';
-import { usePopper } from 'react-popper';
-import MenuItems from "../menuItems/MenuItems.js";
-import MenuItemList from "../menuItems/MenuItemList.js";
-const DropdownSubmenu = (props) => {
-    const { title = '', items = [], disabled = false, className, ...remainingProps } = props;
-    const classes = classNames('dropdown-submenu', disabled && 'disabled', className);
-    const [refParentPopper, setRefParentPopper] = useState(null);
-    const [refDropdownSubmenu, setRefDropdownSubmenu] = useState(null);
-    // We have to use the workaround of checking the hover state as popper may render
-    // the sub menu on an odd place and fixes it's position on the next render cycle
-    const [isHover, setIsHover] = useState(false);
-    const handleMouseEnter = () => setIsHover(true);
-    const handleMouseLeave = () => setIsHover(false);
-    const { styles, attributes } = usePopper(refParentPopper, refDropdownSubmenu, {
-        placement: 'right-start',
-        modifiers: [
-            {
-                name: 'offset',
-                options: {
-                    offset: [-4, 0],
-                },
-            },
-        ],
-    });
-    // return a list item that is also automatically the new toggle for the submenu
-    return (_jsxs("li", { ref: setRefParentPopper, ...remainingProps, className: classes, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: [_jsxs("a", { className: 'submenu-title', role: 'menuitem', children: [_jsx("span", { className: 'submenu-title-text', children: title }), _jsx("span", { className: 'rioglyph rioglyph-chevron-right' })] }), isHover && !disabled && (_jsx(MenuItemList, { ref: setRefDropdownSubmenu, style: styles.popper, ...attributes.popper, children: _jsx(MenuItems, { items: items }) }))] }));
+import { jsxs as r, jsx as e } from "react/jsx-runtime";
+import { useState as s } from "react";
+import g from "classnames";
+import { usePopper as v } from "react-popper";
+import w from "../menuItems/MenuItems.js";
+import x from "../menuItems/MenuItemList.js";
+const E = (n) => {
+  const { title: a = "", items: l = [], disabled: t = !1, className: m, ...i } = n, p = g("dropdown-submenu", t && "disabled", m), [u, c] = s(null), [f, d] = s(null), [h, o] = s(!1), b = () => o(!0), M = () => o(!1), { styles: N, attributes: P } = v(u, f, {
+    placement: "right-start",
+    modifiers: [
+      {
+        name: "offset",
+        options: {
+          offset: [-4, 0]
+        }
+      }
+    ]
+  });
+  return /* @__PURE__ */ r(
+    "li",
+    {
+      ref: c,
+      ...i,
+      className: p,
+      onMouseEnter: b,
+      onMouseLeave: M,
+      children: [
+        /* @__PURE__ */ r("a", { className: "submenu-title", role: "menuitem", children: [
+          /* @__PURE__ */ e("span", { className: "submenu-title-text", children: a }),
+          /* @__PURE__ */ e("span", { className: "rioglyph rioglyph-chevron-right" })
+        ] }),
+        h && !t && /* @__PURE__ */ e(x, { ref: d, style: N.popper, ...P.popper, children: /* @__PURE__ */ e(w, { items: l }) })
+      ]
+    }
+  );
 };
-export default DropdownSubmenu;
+export {
+  E as default
+};
+//# sourceMappingURL=DropdownSubmenu.js.map

package/components/dropdown/DropdownSubmenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropdownSubmenu.js","sources":["../../../src/components/dropdown/DropdownSubmenu.tsx"],"sourcesContent":["import type React from 'react';\nimport { useState } from 'react';\nimport classNames from 'classnames';\nimport { usePopper } from 'react-popper';\n\nimport MenuItems from '../menuItems/MenuItems';\nimport MenuItemList from '../menuItems/MenuItemList';\nimport type { MenuItemProps as MenuItem } from '../menuItems/MenuItem';\n\nexport type DropdownSubmenuProps = {\n    /**\n     * Displayed button title.\n     */\n    title?: string | React.ReactNode;\n\n    /**\n     * Items to display in the dropdown sub menu.\n     */\n    items?: MenuItem[];\n\n    /**\n     * Disables every entry on the title list item.\n     */\n    disabled?: boolean;\n\n    /**\n     * Additional classes to be set on the dropdown-submenu element.\n     */\n    className?: string;\n};\n\nconst DropdownSubmenu = (props: DropdownSubmenuProps) => {\n    const { title = '', items = [], disabled = false, className, ...remainingProps } = props;\n\n    const classes = classNames('dropdown-submenu', disabled && 'disabled', className);\n\n    const [refParentPopper, setRefParentPopper] = useState<HTMLLIElement | null>(null);\n    const [refDropdownSubmenu, setRefDropdownSubmenu] = useState<HTMLUListElement | null>(null);\n\n    // We have to use the workaround of checking the hover state as popper may render\n    // the sub menu on an odd place and fixes it's position on the next render cycle\n    const [isHover, setIsHover] = useState(false);\n    const handleMouseEnter = () => setIsHover(true);\n    const handleMouseLeave = () => setIsHover(false);\n\n    const { styles, attributes } = usePopper(refParentPopper, refDropdownSubmenu, {\n        placement: 'right-start',\n        modifiers: [\n            {\n                name: 'offset',\n                options: {\n                    offset: [-4, 0],\n                },\n            },\n        ],\n    });\n\n    // return a list item that is also automatically the new toggle for the submenu\n    return (\n        <li\n            ref={setRefParentPopper}\n            {...remainingProps}\n            className={classes}\n            onMouseEnter={handleMouseEnter}\n            onMouseLeave={handleMouseLeave}\n        >\n            {/* biome-ignore lint/a11y/useValidAnchor: <explanation> */}\n            <a className='submenu-title' role='menuitem'>\n                <span className='submenu-title-text'>{title}</span>\n                <span className='rioglyph rioglyph-chevron-right' />\n            </a>\n            {/* The actual submenu items */}\n            {isHover && !disabled && (\n                <MenuItemList ref={setRefDropdownSubmenu} style={styles.popper} {...attributes.popper}>\n                    <MenuItems items={items} />\n                </MenuItemList>\n            )}\n        </li>\n    );\n};\n\nexport default DropdownSubmenu;\n"],"names":["DropdownSubmenu","props","title","items","disabled","className","remainingProps","classes","classNames","refParentPopper","setRefParentPopper","useState","refDropdownSubmenu","setRefDropdownSubmenu","isHover","setIsHover","handleMouseEnter","handleMouseLeave","styles","attributes","usePopper","jsxs","jsx","MenuItemList","MenuItems"],"mappings":";;;;;;AA+BA,MAAMA,IAAkB,CAACC,MAAgC;AACrD,QAAM,EAAE,OAAAC,IAAQ,IAAI,OAAAC,IAAQ,CAAA,GAAI,UAAAC,IAAW,IAAO,WAAAC,GAAW,GAAGC,EAAA,IAAmBL,GAE7EM,IAAUC,EAAW,oBAAoBJ,KAAY,YAAYC,CAAS,GAE1E,CAACI,GAAiBC,CAAkB,IAAIC,EAA+B,IAAI,GAC3E,CAACC,GAAoBC,CAAqB,IAAIF,EAAkC,IAAI,GAIpF,CAACG,GAASC,CAAU,IAAIJ,EAAS,EAAK,GACtCK,IAAmB,MAAMD,EAAW,EAAI,GACxCE,IAAmB,MAAMF,EAAW,EAAK,GAEzC,EAAE,QAAAG,GAAQ,YAAAC,EAAA,IAAeC,EAAUX,GAAiBG,GAAoB;AAAA,IAC1E,WAAW;AAAA,IACX,WAAW;AAAA,MACP;AAAA,QACI,MAAM;AAAA,QACN,SAAS;AAAA,UACL,QAAQ,CAAC,IAAI,CAAC;AAAA,QAAA;AAAA,MAClB;AAAA,IACJ;AAAA,EACJ,CACH;AAGD,SACI,gBAAAS;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,KAAKX;AAAA,MACJ,GAAGJ;AAAA,MACJ,WAAWC;AAAA,MACX,cAAcS;AAAA,MACd,cAAcC;AAAA,MAGd,UAAA;AAAA,QAAA,gBAAAI,EAAC,KAAA,EAAE,WAAU,iBAAgB,MAAK,YAC9B,UAAA;AAAA,UAAA,gBAAAC,EAAC,QAAA,EAAK,WAAU,sBAAsB,UAAApB,GAAM;AAAA,UAC5C,gBAAAoB,EAAC,QAAA,EAAK,WAAU,kCAAA,CAAkC;AAAA,QAAA,GACtD;AAAA,QAECR,KAAW,CAACV,KACT,gBAAAkB,EAACC,GAAA,EAAa,KAAKV,GAAuB,OAAOK,EAAO,QAAS,GAAGC,EAAW,QAC3E,UAAA,gBAAAG,EAACE,GAAA,EAAU,OAAArB,GAAc,EAAA,CAC7B;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIhB;"}

package/components/dropdown/DropdownToggleButton.d.ts

@@ -1,5 +1,5 @@
-import { type HTMLProps, type PropsWithChildren } from 'react';
-import { type BUTTON_VARIANT, type BUTTON_SIZE, type BUTTON_STYLE } from '../button/Button';
+import { HTMLProps, PropsWithChildren } from 'react';
+import { BUTTON_VARIANT, BUTTON_SIZE, BUTTON_STYLE } from '../button/Button';
 export type DropdownToggleButtonType = 'button' | 'tag' | 'label';
 export type DropdownToggleEvent<T extends DropdownToggleButtonType = 'button'> = T extends 'button' ? React.MouseEvent<HTMLButtonElement> : React.MouseEvent<HTMLDivElement>;
 export type DropdownToggleButtonProps = HTMLProps<HTMLButtonElement> & {
@@ -15,5 +15,5 @@ export type DropdownToggleButtonProps = HTMLProps<HTMLButtonElement> & {
     outerRef?: React.Ref<HTMLButtonElement | HTMLDivElement>;
     className?: string;
 };
-declare const DropdownToggleButton: import("react").ForwardRefExoticComponent<Omit<PropsWithChildren<DropdownToggleButtonProps>, "ref"> & import("react").RefAttributes<HTMLDivElement | HTMLButtonElement>>;
+declare const DropdownToggleButton: import('react').ForwardRefExoticComponent<Omit<PropsWithChildren<DropdownToggleButtonProps>, "ref"> & import('react').RefAttributes<HTMLButtonElement | HTMLDivElement>>;
 export default DropdownToggleButton;

package/components/dropdown/DropdownToggleButton.js

@@ -1,20 +1,80 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from 'react';
-import classNames from 'classnames';
-import Button from "../button/Button.js";
-import useMergeRefs from "../../hooks/useMergeRefs.js";
-const DropdownToggleButton = forwardRef((props, ref) => {
-    const { id, disabled, bsSize, bsStyle, variant, splitButton = false, onClick, toggleButtonType = 'button', className = '', children, outerRef, iconOnly, ...remainingProps } = props;
-    const toggleRef = useMergeRefs(outerRef, ref);
-    const buttonClasses = classNames(!splitButton && 'dropdown-toggle', !splitButton && className);
-    const labelClasses = classNames('dropdown-toggle', 'label', `label-${bsStyle}`, 'display-flex align-items-center', 'user-select-none cursor-pointer', disabled && 'pointer-events-none', className);
-    const tagClasses = classNames('dropdown-toggle', 'tag', 'clickable height-auto', bsSize === 'sm' && 'tag-small', 'display-flex align-items-center', 'user-select-none cursor-pointer', disabled && 'pointer-events-none', className);
-    if (toggleButtonType === 'tag') {
-        return (_jsx("div", { ...remainingProps, id: id, ref: toggleRef, onClick: onClick, className: tagClasses, children: children }));
+import { jsx as i } from "react/jsx-runtime";
+import { forwardRef as x } from "react";
+import c from "classnames";
+import B from "../button/Button.js";
+import C from "../../hooks/useMergeRefs.js";
+const $ = x((f, u) => {
+  const {
+    id: e,
+    disabled: t,
+    bsSize: g,
+    bsStyle: m,
+    variant: d,
+    splitButton: o = !1,
+    onClick: s,
+    toggleButtonType: p = "button",
+    className: n = "",
+    children: r,
+    outerRef: b,
+    iconOnly: y,
+    ...l
+  } = f, a = C(b, u), v = c(!o && "dropdown-toggle", !o && n), w = c(
+    "dropdown-toggle",
+    "label",
+    `label-${m}`,
+    "display-flex align-items-center",
+    "user-select-none cursor-pointer",
+    t && "pointer-events-none",
+    n
+  ), N = c(
+    "dropdown-toggle",
+    "tag",
+    "clickable height-auto",
+    g === "sm" && "tag-small",
+    "display-flex align-items-center",
+    "user-select-none cursor-pointer",
+    t && "pointer-events-none",
+    n
+  );
+  return p === "tag" ? /* @__PURE__ */ i(
+    "div",
+    {
+      ...l,
+      id: e,
+      ref: a,
+      onClick: s,
+      className: N,
+      children: r
     }
-    if (toggleButtonType === 'label') {
-        return (_jsx("div", { ...remainingProps, id: id, ref: toggleRef, onClick: onClick, className: labelClasses, children: children }));
+  ) : p === "label" ? /* @__PURE__ */ i(
+    "div",
+    {
+      ...l,
+      id: e,
+      ref: a,
+      onClick: s,
+      className: w,
+      children: r
     }
-    return (_jsx(Button, { ...remainingProps, id: splitButton ? `button-${id}` : id, type: 'button', ref: toggleRef, disabled: disabled, bsStyle: bsStyle, bsSize: bsSize, variant: variant, onClick: onClick, iconOnly: iconOnly, className: buttonClasses, children: children }));
+  ) : /* @__PURE__ */ i(
+    B,
+    {
+      ...l,
+      id: o ? `button-${e}` : e,
+      type: "button",
+      ref: a,
+      disabled: t,
+      bsStyle: m,
+      bsSize: g,
+      variant: d,
+      onClick: s,
+      iconOnly: y,
+      className: v,
+      children: r
+    }
+  );
 });
-export default DropdownToggleButton;
+export {
+  $ as default
+};
+//# sourceMappingURL=DropdownToggleButton.js.map

package/components/dropdown/DropdownToggleButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropdownToggleButton.js","sources":["../../../src/components/dropdown/DropdownToggleButton.tsx"],"sourcesContent":["import { forwardRef, type HTMLProps, type PropsWithChildren } from 'react';\nimport classNames from 'classnames';\n\nimport Button, { type BUTTON_VARIANT, type BUTTON_SIZE, type BUTTON_STYLE } from '../button/Button';\nimport useMergeRefs from '../../hooks/useMergeRefs';\n\nexport type DropdownToggleButtonType = 'button' | 'tag' | 'label';\n\nexport type DropdownToggleEvent<T extends DropdownToggleButtonType = 'button'> = T extends 'button'\n    ? React.MouseEvent<HTMLButtonElement>\n    : React.MouseEvent<HTMLDivElement>;\n\nexport type DropdownToggleButtonProps = HTMLProps<HTMLButtonElement> & {\n    id?: string;\n    disabled?: boolean;\n    splitButton?: boolean;\n    iconOnly?: boolean;\n    onClick: (event: React.MouseEvent<HTMLButtonElement | HTMLDivElement>) => void;\n    bsSize: BUTTON_SIZE;\n    bsStyle: BUTTON_STYLE;\n    variant?: BUTTON_VARIANT;\n    toggleButtonType?: DropdownToggleButtonType;\n    outerRef?: React.Ref<HTMLButtonElement | HTMLDivElement>;\n    className?: string;\n};\n\nconst DropdownToggleButton = forwardRef<\n    HTMLButtonElement | HTMLDivElement,\n    PropsWithChildren<DropdownToggleButtonProps>\n>((props, ref) => {\n    const {\n        id,\n        disabled,\n        bsSize,\n        bsStyle,\n        variant,\n        splitButton = false,\n        onClick,\n        toggleButtonType = 'button',\n        className = '',\n        children,\n        outerRef,\n        iconOnly,\n        ...remainingProps\n    } = props;\n\n    const toggleRef = useMergeRefs(outerRef, ref);\n\n    const buttonClasses = classNames(!splitButton && 'dropdown-toggle', !splitButton && className);\n\n    const labelClasses = classNames(\n        'dropdown-toggle',\n        'label',\n        `label-${bsStyle}`,\n        'display-flex align-items-center',\n        'user-select-none cursor-pointer',\n        disabled && 'pointer-events-none',\n        className\n    );\n    const tagClasses = classNames(\n        'dropdown-toggle',\n        'tag',\n        'clickable height-auto',\n        bsSize === 'sm' && 'tag-small',\n        'display-flex align-items-center',\n        'user-select-none cursor-pointer',\n        disabled && 'pointer-events-none',\n        className\n    );\n\n    if (toggleButtonType === 'tag') {\n        return (\n            <div\n                {...(remainingProps as typeof HTMLDivElement)}\n                id={id}\n                ref={toggleRef}\n                onClick={onClick}\n                className={tagClasses}\n            >\n                {children}\n            </div>\n        );\n    }\n\n    if (toggleButtonType === 'label') {\n        return (\n            <div\n                {...(remainingProps as typeof HTMLDivElement)}\n                id={id}\n                ref={toggleRef}\n                onClick={onClick}\n                className={labelClasses}\n            >\n                {children}\n            </div>\n        );\n    }\n\n    return (\n        <Button\n            {...remainingProps}\n            id={splitButton ? `button-${id}` : id}\n            type='button'\n            ref={toggleRef}\n            disabled={disabled}\n            bsStyle={bsStyle}\n            bsSize={bsSize}\n            variant={variant}\n            onClick={onClick}\n            iconOnly={iconOnly}\n            className={buttonClasses}\n        >\n            {children}\n        </Button>\n    );\n});\n\nexport default DropdownToggleButton;\n"],"names":["DropdownToggleButton","forwardRef","props","ref","id","disabled","bsSize","bsStyle","variant","splitButton","onClick","toggleButtonType","className","children","outerRef","iconOnly","remainingProps","toggleRef","useMergeRefs","buttonClasses","classNames","labelClasses","tagClasses","jsx","Button"],"mappings":";;;;;AA0BA,MAAMA,IAAuBC,EAG3B,CAACC,GAAOC,MAAQ;AACd,QAAM;AAAA,IACF,IAAAC;AAAA,IACA,UAAAC;AAAA,IACA,QAAAC;AAAA,IACA,SAAAC;AAAA,IACA,SAAAC;AAAA,IACA,aAAAC,IAAc;AAAA,IACd,SAAAC;AAAA,IACA,kBAAAC,IAAmB;AAAA,IACnB,WAAAC,IAAY;AAAA,IACZ,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACHd,GAEEe,IAAYC,EAAaJ,GAAUX,CAAG,GAEtCgB,IAAgBC,EAAW,CAACX,KAAe,mBAAmB,CAACA,KAAeG,CAAS,GAEvFS,IAAeD;AAAA,IACjB;AAAA,IACA;AAAA,IACA,SAASb,CAAO;AAAA,IAChB;AAAA,IACA;AAAA,IACAF,KAAY;AAAA,IACZO;AAAA,EAAA,GAEEU,IAAaF;AAAA,IACf;AAAA,IACA;AAAA,IACA;AAAA,IACAd,MAAW,QAAQ;AAAA,IACnB;AAAA,IACA;AAAA,IACAD,KAAY;AAAA,IACZO;AAAA,EAAA;AAGJ,SAAID,MAAqB,QAEjB,gBAAAY;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAIP;AAAA,MACL,IAAAZ;AAAA,MACA,KAAKa;AAAA,MACL,SAAAP;AAAA,MACA,WAAWY;AAAA,MAEV,UAAAT;AAAA,IAAA;AAAA,EAAA,IAKTF,MAAqB,UAEjB,gBAAAY;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAIP;AAAA,MACL,IAAAZ;AAAA,MACA,KAAKa;AAAA,MACL,SAAAP;AAAA,MACA,WAAWW;AAAA,MAEV,UAAAR;AAAA,IAAA;AAAA,EAAA,IAMT,gBAAAU;AAAA,IAACC;AAAA,IAAA;AAAA,MACI,GAAGR;AAAA,MACJ,IAAIP,IAAc,UAAUL,CAAE,KAAKA;AAAA,MACnC,MAAK;AAAA,MACL,KAAKa;AAAA,MACL,UAAAZ;AAAA,MACA,SAAAE;AAAA,MACA,QAAAD;AAAA,MACA,SAAAE;AAAA,MACA,SAAAE;AAAA,MACA,UAAAK;AAAA,MACA,WAAWI;AAAA,MAEV,UAAAN;AAAA,IAAA;AAAA,EAAA;AAGb,CAAC;"}

package/components/dropdown/SimpleButtonDropdown.d.ts

@@ -1,4 +1,4 @@
-import { type ButtonDropdownProps } from './ButtonDropdown';
+import { ButtonDropdownProps } from './ButtonDropdown';
 export type SimpleButtonDropdownProps = ButtonDropdownProps;
 declare const SimpleButtonDropdown: (props: SimpleButtonDropdownProps) => import("react/jsx-runtime").JSX.Element;
 export default SimpleButtonDropdown;

package/components/dropdown/SimpleButtonDropdown.js

@@ -1,4 +1,7 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import ButtonDropdown from "./ButtonDropdown.js";
-const SimpleButtonDropdown = (props) => _jsx(ButtonDropdown, { ...props, noCaret: true });
-export default SimpleButtonDropdown;
+import { jsx as t } from "react/jsx-runtime";
+import r from "./ButtonDropdown.js";
+const e = (o) => /* @__PURE__ */ t(r, { ...o, noCaret: !0 });
+export {
+  e as default
+};
+//# sourceMappingURL=SimpleButtonDropdown.js.map

package/components/dropdown/SimpleButtonDropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SimpleButtonDropdown.js","sources":["../../../src/components/dropdown/SimpleButtonDropdown.tsx"],"sourcesContent":["import ButtonDropdown, { type ButtonDropdownProps } from './ButtonDropdown';\n\nexport type SimpleButtonDropdownProps = ButtonDropdownProps;\n\nconst SimpleButtonDropdown = (props: SimpleButtonDropdownProps) => <ButtonDropdown {...props} noCaret />;\n\nexport default SimpleButtonDropdown;\n"],"names":["SimpleButtonDropdown","props","jsx","ButtonDropdown"],"mappings":";;AAIA,MAAMA,IAAuB,CAACC,MAAqC,gBAAAC,EAACC,KAAgB,GAAGF,GAAO,SAAO,GAAA,CAAC;"}

package/components/dropdown/SingleButtonDropdown.d.ts

@@ -1,4 +1,4 @@
-import { type ButtonDropdownProps } from './ButtonDropdown';
+import { ButtonDropdownProps } from './ButtonDropdown';
 export type SingleButtonDropdownProps = ButtonDropdownProps;
 declare const SingleButtonDropdown: (props: SingleButtonDropdownProps) => import("react/jsx-runtime").JSX.Element;
 export default SingleButtonDropdown;

package/components/dropdown/SingleButtonDropdown.js

@@ -1,4 +1,7 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import ButtonDropdown from "./ButtonDropdown.js";
-const SingleButtonDropdown = (props) => _jsx(ButtonDropdown, { ...props });
-export default SingleButtonDropdown;
+import { jsx as t } from "react/jsx-runtime";
+import r from "./ButtonDropdown.js";
+const m = (o) => /* @__PURE__ */ t(r, { ...o });
+export {
+  m as default
+};
+//# sourceMappingURL=SingleButtonDropdown.js.map

package/components/dropdown/SingleButtonDropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SingleButtonDropdown.js","sources":["../../../src/components/dropdown/SingleButtonDropdown.tsx"],"sourcesContent":["import ButtonDropdown, { type ButtonDropdownProps } from './ButtonDropdown';\n\nexport type SingleButtonDropdownProps = ButtonDropdownProps;\n\nconst SingleButtonDropdown = (props: SingleButtonDropdownProps) => <ButtonDropdown {...props} />;\n\nexport default SingleButtonDropdown;\n"],"names":["SingleButtonDropdown","props","jsx","ButtonDropdown"],"mappings":";;AAIA,MAAMA,IAAuB,CAACC,MAAqC,gBAAAC,EAACC,GAAA,EAAgB,GAAGF,EAAA,CAAO;"}

package/components/dropdown/SplitButtonDropdown.d.ts

@@ -1,4 +1,4 @@
-import { type ButtonDropdownProps } from './ButtonDropdown';
+import { ButtonDropdownProps } from './ButtonDropdown';
 export type SplitButtonDropdownProps = ButtonDropdownProps;
 declare const SplitButtonDropdown: (props: SplitButtonDropdownProps) => import("react/jsx-runtime").JSX.Element;
 export default SplitButtonDropdown;

package/components/dropdown/SplitButtonDropdown.js

@@ -1,4 +1,7 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import ButtonDropdown from "./ButtonDropdown.js";
-const SplitButtonDropdown = (props) => _jsx(ButtonDropdown, { ...props, splitButton: true });
-export default SplitButtonDropdown;
+import { jsx as o } from "react/jsx-runtime";
+import r from "./ButtonDropdown.js";
+const u = (t) => /* @__PURE__ */ o(r, { ...t, splitButton: !0 });
+export {
+  u as default
+};
+//# sourceMappingURL=SplitButtonDropdown.js.map

package/components/dropdown/SplitButtonDropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SplitButtonDropdown.js","sources":["../../../src/components/dropdown/SplitButtonDropdown.tsx"],"sourcesContent":["import ButtonDropdown, { type ButtonDropdownProps } from './ButtonDropdown';\n\nexport type SplitButtonDropdownProps = ButtonDropdownProps;\n\nconst SplitButtonDropdown = (props: SplitButtonDropdownProps) => <ButtonDropdown {...props} splitButton />;\n\nexport default SplitButtonDropdown;\n"],"names":["SplitButtonDropdown","props","jsx","ButtonDropdown"],"mappings":";;AAIA,MAAMA,IAAsB,CAACC,MAAoC,gBAAAC,EAACC,KAAgB,GAAGF,GAAO,aAAW,GAAA,CAAC;"}

package/components/dropdown/SplitCaretButton.d.ts

@@ -1,5 +1,5 @@
-import React, { type HTMLProps } from 'react';
-import { type BUTTON_STYLE, type BUTTON_SIZE } from '../button/Button';
+import { default as React, HTMLProps } from 'react';
+import { BUTTON_STYLE, BUTTON_SIZE } from '../button/Button';
 export type SplitCaretButtonProps = HTMLProps<HTMLButtonElement> & {
     disabled?: boolean;
     iconOnly?: boolean;

package/components/dropdown/SplitCaretButton.js

@@ -1,11 +1,26 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from 'react';
-import classNames from 'classnames';
-import Caret from "./Caret.js";
-import Button from "../button/Button.js";
-const SplitCaretButton = forwardRef((props, ref) => {
-    const { disabled = false, bsStyle, bsSize, onClick, className, ...remainingProps } = props;
-    const splitCaretButtonClasses = classNames('dropdown-toggle', className);
-    return (_jsx(Button, { ...remainingProps, type: 'button', ref: ref, disabled: disabled, bsStyle: bsStyle, bsSize: bsSize, onClick: onClick, className: splitCaretButtonClasses, children: _jsx(Caret, {}) }));
+import { jsx as t } from "react/jsx-runtime";
+import { forwardRef as p } from "react";
+import f from "classnames";
+import c from "./Caret.js";
+import d from "../button/Button.js";
+const N = p((o, r) => {
+  const { disabled: s = !1, bsStyle: e, bsSize: a, onClick: m, className: i, ...l } = o, n = f("dropdown-toggle", i);
+  return /* @__PURE__ */ t(
+    d,
+    {
+      ...l,
+      type: "button",
+      ref: r,
+      disabled: s,
+      bsStyle: e,
+      bsSize: a,
+      onClick: m,
+      className: n,
+      children: /* @__PURE__ */ t(c, {})
+    }
+  );
 });
-export default SplitCaretButton;
+export {
+  N as default
+};
+//# sourceMappingURL=SplitCaretButton.js.map

package/components/dropdown/SplitCaretButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SplitCaretButton.js","sources":["../../../src/components/dropdown/SplitCaretButton.tsx"],"sourcesContent":["import React, { forwardRef, type HTMLProps, type PropsWithChildren } from 'react';\nimport classNames from 'classnames';\n\nimport Caret from './Caret';\nimport Button, { type BUTTON_STYLE, type BUTTON_SIZE } from '../button/Button';\n\nexport type SplitCaretButtonProps = HTMLProps<HTMLButtonElement> & {\n    disabled?: boolean;\n    iconOnly?: boolean;\n    onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;\n    bsSize: BUTTON_SIZE;\n    bsStyle: BUTTON_STYLE;\n    className?: string;\n};\n\nconst SplitCaretButton = forwardRef<HTMLButtonElement, PropsWithChildren<SplitCaretButtonProps>>((props, ref) => {\n    const { disabled = false, bsStyle, bsSize, onClick, className, ...remainingProps } = props;\n\n    const splitCaretButtonClasses = classNames('dropdown-toggle', className);\n\n    return (\n        <Button\n            {...remainingProps}\n            type='button'\n            ref={ref}\n            disabled={disabled}\n            bsStyle={bsStyle}\n            bsSize={bsSize}\n            onClick={onClick}\n            className={splitCaretButtonClasses}\n        >\n            <Caret />\n        </Button>\n    );\n});\n\nexport default SplitCaretButton;\n"],"names":["SplitCaretButton","forwardRef","props","ref","disabled","bsStyle","bsSize","onClick","className","remainingProps","splitCaretButtonClasses","classNames","jsx","Button","Caret"],"mappings":";;;;;AAeA,MAAMA,IAAmBC,EAAwE,CAACC,GAAOC,MAAQ;AAC7G,QAAM,EAAE,UAAAC,IAAW,IAAO,SAAAC,GAAS,QAAAC,GAAQ,SAAAC,GAAS,WAAAC,GAAW,GAAGC,EAAA,IAAmBP,GAE/EQ,IAA0BC,EAAW,mBAAmBH,CAAS;AAEvE,SACI,gBAAAI;AAAA,IAACC;AAAA,IAAA;AAAA,MACI,GAAGJ;AAAA,MACJ,MAAK;AAAA,MACL,KAAAN;AAAA,MACA,UAAAC;AAAA,MACA,SAAAC;AAAA,MACA,QAAAC;AAAA,MACA,SAAAC;AAAA,MACA,WAAWG;AAAA,MAEX,4BAACI,GAAA,CAAA,CAAM;AAAA,IAAA;AAAA,EAAA;AAGnB,CAAC;"}

package/components/editableContent/EditableContent.d.ts

@@ -1,4 +1,4 @@
-import React, { type PropsWithChildren } from 'react';
+import { default as React, PropsWithChildren } from 'react';
 export type EditableContentProps = {
     /**
      * Visibility flag used to control edit mode from outside.

package/components/editableContent/EditableContent.js

@@ -1,126 +1,153 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState, useRef, useEffect, useMemo } from 'react';
-import { noop } from 'es-toolkit/function';
-import classNames from 'classnames';
-import { usePopper } from 'react-popper';
-import { createPortal } from 'react-dom';
-import { getOrCreatePortalRoot } from "../../utils/portalRoot.js";
-import useEsc from "../../hooks/useEsc.js";
-import useFocusTrap from "../../hooks/useFocusTrap.js";
-// Features
-// [x] Hide children with opacity 0
-// [x] Allow custom editor elements
-// [x] Use textarea for longer text
-// [x] Use focus trap
-// [x] Keyboard support mit esc and tab+enter to accept
-// [-] If space, get the width of the text to make the input larger - no nice solution
-// [x] Control edit mode from outside
-// This offset takes into account the padding of the overlay and the padding/border of the edit component (input).
-// This works best if the text is wrapped within a single <span> tag and has a dotted bottom border only.
-// External offset defined by the using component will be starting from 0 for easier understanding.
-const POPOVER_OFFSET_TOP = -13;
-const POPOVER_OFFSET_LEFT = -18;
-const DEFAULT_TEXTAREA_ROWS = 1;
-const EditableContent = (props) => {
-    const { show = undefined, onSave = noop, onCancel = noop, onFocus = noop, onBlur = noop, onEditMode = noop, onSaveValidation = () => true, isValid = true, errorMessage, allowResize = false, inputRows = DEFAULT_TEXTAREA_ROWS, editorOffsetTop = 0, editorOffsetLeft = 0, customEditor, size = 'md', className = '', inputClassName = '', editorClassName = '', children, ...remainingProps } = props;
-    const [isEditMode, setIsEditMode] = useState(show);
-    const [inputValue, setInputValue] = useState('');
-    const [hasError, setHasError] = useState(!isValid);
-    const [referenceElement, setReferenceElement] = useState(null);
-    const [popperElement, setPopperElement] = useState(null);
-    const hasCustomControl = !!customEditor;
-    // Close edit mode on "esc"
-    useEsc(() => handleCloseEditMode());
-    // Trap focus on the popper element
-    useFocusTrap(popperElement);
-    // Input ref used to focus inside when entering edit mode
-    const inputRef = useRef(null);
-    useEffect(() => {
-        if (inputRef.current && isEditMode) {
-            inputRef.current?.focus();
-            inputRef.current?.select();
-        }
-    }, [isEditMode, inputRef.current]);
-    const customModifier = useMemo(() => ({
-        name: 'offset',
+import { jsxs as c, Fragment as re, jsx as o } from "react/jsx-runtime";
+import { useState as s, useRef as ie, useEffect as le, useMemo as ce } from "react";
+import { noop as r } from "es-toolkit/function";
+import p from "classnames";
+import { usePopper as pe } from "react-popper";
+import { createPortal as de } from "react-dom";
+import { getOrCreatePortalRoot as fe } from "../../utils/portalRoot.js";
+import ue from "../../hooks/useEsc.js";
+import me from "../../hooks/useFocusTrap.js";
+const Ee = -13, he = -18, O = 1, we = (P) => {
+  const {
+    show: t = void 0,
+    onSave: S = r,
+    onCancel: w = r,
+    onFocus: M = r,
+    onBlur: R = r,
+    onEditMode: F = r,
+    onSaveValidation: T = () => !0,
+    isValid: n = !0,
+    errorMessage: V,
+    allowResize: k = !1,
+    inputRows: m = O,
+    editorOffsetTop: I = 0,
+    editorOffsetLeft: _ = 0,
+    customEditor: E,
+    size: d = "md",
+    className: W = "",
+    inputClassName: z = "",
+    editorClassName: D = "",
+    children: A,
+    ...L
+  } = P, [i, l] = s(t), [f, h] = s(""), [b, u] = s(!n), [C, j] = s(null), [g, K] = s(null), v = !!E;
+  ue(() => N()), me(g);
+  const a = ie(null);
+  le(() => {
+    a.current && i && (a.current?.focus(), a.current?.select());
+  }, [i, a.current]);
+  const $ = {
+    placement: "bottom-start",
+    modifiers: [ce(
+      () => ({
+        name: "offset",
         options: {
-            offset: ({ reference }) => {
-                const leftOffset = POPOVER_OFFSET_LEFT + editorOffsetLeft;
-                const topOffset = -(reference.height - (POPOVER_OFFSET_TOP + editorOffsetTop));
-                return [leftOffset, topOffset];
-            },
-        },
-    }), []);
-    const popperConfig = {
-        placement: 'bottom-start',
-        modifiers: [customModifier],
-        strategy: 'absolute',
-    };
-    const { styles, attributes } = usePopper(referenceElement, popperElement, popperConfig);
-    const handleEditMode = () => {
-        // In a controlled usage, the "show" property is set from the outside
-        // and the edit mode is handled there
-        if (show === undefined) {
-            enterEditMode();
-        }
-        onEditMode();
-    };
-    const enterEditMode = () => {
-        setIsEditMode(true);
-        setInputValue(referenceElement?.textContent?.trimEnd() ?? '');
-        setHasError(false);
-    };
-    const handleInputChange = (event) => {
-        setInputValue(event.target.value);
-    };
-    const handleKeyDown = (event) => {
-        // Prevent line breaks when textarea is a single line
-        if (event.key === 'Enter' && inputRows === DEFAULT_TEXTAREA_ROWS) {
-            event.preventDefault();
-            // Save on "enter" when textarea has a single line
-            handleSaveChanges();
-        }
-    };
-    const handleCloseEditMode = () => {
-        setIsEditMode(false);
-        onCancel();
-    };
-    const handleSaveChanges = () => {
-        const isInputValid = onSaveValidation(inputValue);
-        setHasError(!isInputValid);
-        if (isInputValid) {
-            setIsEditMode(false);
-            onSave(inputValue.trimEnd());
+          offset: ({ reference: e }) => {
+            const ne = he + _, ae = -(e.height - (Ee + I));
+            return [ne, ae];
+          }
         }
-    };
-    // Control edit mode from outside for instance if text element got focus
-    // and user used "Enter" key to enter edit mode.
-    const [previousShow, setPreviousShow] = useState(show);
-    if (show !== previousShow) {
-        if (show) {
-            enterEditMode();
+      }),
+      []
+    )],
+    strategy: "absolute"
+  }, { styles: B, attributes: H } = pe(C, g, $), U = () => {
+    t === void 0 && y(), F();
+  }, y = () => {
+    l(!0), h(C?.textContent?.trimEnd() ?? ""), u(!1);
+  }, X = (e) => {
+    h(e.target.value);
+  }, q = (e) => {
+    e.key === "Enter" && m === O && (e.preventDefault(), x());
+  }, N = () => {
+    l(!1), w();
+  }, x = () => {
+    const e = T(f);
+    u(!e), e && (l(!1), S(f.trimEnd()));
+  }, [G, J] = s(t);
+  t !== G && (t && y(), t || l(!1), J(t));
+  const [Q, Y] = s(n);
+  n !== Q && (u(!n), Y(n));
+  const Z = p(W, i && "opacity-0"), ee = p(
+    "EditableContentEditor",
+    "display-flex gap-5",
+    "padding-5",
+    "rounded",
+    "shadow-accent",
+    "z-index-max",
+    "bg-white",
+    D
+  ), te = p(
+    "display-flex flex-column gap-5",
+    "margin-0",
+    "form-group",
+    b && "has-feedback has-error"
+  ), oe = p("form-control", d === "lg" && "input-lg", z), se = {
+    minWidth: "100px",
+    resize: k ? "vertical" : "none"
+  };
+  return /* @__PURE__ */ c(re, { children: [
+    /* @__PURE__ */ o("span", { ref: j, onClick: U, className: Z, children: A }),
+    i && de(
+      /* @__PURE__ */ c(
+        "div",
+        {
+          className: ee,
+          onClick: (e) => e.stopPropagation(),
+          ref: K,
+          style: B.popper,
+          ...H.popper,
+          ...L,
+          children: [
+            /* @__PURE__ */ c("div", { className: te, children: [
+              v && E,
+              !v && /* @__PURE__ */ o(
+                "textarea",
+                {
+                  ref: a,
+                  className: oe,
+                  value: f,
+                  onChange: X,
+                  onFocus: M,
+                  onBlur: R,
+                  onKeyDown: q,
+                  style: se,
+                  rows: m
+                }
+              ),
+              b && /* @__PURE__ */ o("div", { className: "help-block position-relative", children: V })
+            ] }),
+            /* @__PURE__ */ c("div", { className: "display-flex gap-5", children: [
+              /* @__PURE__ */ o(
+                "button",
+                {
+                  type: "button",
+                  onClick: N,
+                  className: `EditableContentCancel btn btn-default btn-icon-only btn-${d}`,
+                  "aria-label": "EditableContent cancel button",
+                  "data-testid": "EditableContentCancel",
+                  children: /* @__PURE__ */ o("span", { className: "rioglyph rioglyph-remove" })
+                }
+              ),
+              /* @__PURE__ */ o(
+                "button",
+                {
+                  type: "button",
+                  onClick: x,
+                  className: `EditableContentSave btn btn-primary btn-icon-only btn-${d}`,
+                  "aria-label": "EditableContent save button",
+                  "data-testid": "EditableContentSave",
+                  children: /* @__PURE__ */ o("span", { className: "rioglyph rioglyph-ok" })
+                }
+              )
+            ] })
+          ]
         }
-        if (!show) {
-            setIsEditMode(false);
-        }
-        setPreviousShow(show);
-    }
-    // Control error message visibility from outside. This is useful when using a custom input
-    // where the validation happens outside of this component.
-    const [previousIsValid, setPreviousIsValid] = useState(isValid);
-    if (isValid !== previousIsValid) {
-        setHasError(!isValid);
-        setPreviousIsValid(isValid);
-    }
-    const textWrapperClasses = classNames(className, isEditMode && 'opacity-0');
-    const overlayWrapperClasses = classNames('EditableContentEditor', 'display-flex gap-5', 'padding-5', 'rounded', 'shadow-accent', 'z-index-max', 'bg-white', editorClassName);
-    const inputWrapperClasses = classNames('display-flex flex-column gap-5', 'margin-0', 'form-group', hasError && 'has-feedback has-error');
-    const inputClasses = classNames('form-control', size === 'lg' && 'input-lg', inputClassName);
-    const inputStyle = {
-        minWidth: '100px',
-        resize: allowResize ? 'vertical' : 'none',
-    };
-    return (_jsxs(_Fragment, { children: [_jsx("span", { ref: setReferenceElement, onClick: handleEditMode, className: textWrapperClasses, children: children }), isEditMode &&
-                createPortal(_jsxs("div", { className: overlayWrapperClasses, onClick: event => event.stopPropagation(), ref: setPopperElement, style: styles.popper, ...attributes.popper, ...remainingProps, children: [_jsxs("div", { className: inputWrapperClasses, children: [hasCustomControl && customEditor, !hasCustomControl && (_jsx("textarea", { ref: inputRef, className: inputClasses, value: inputValue, onChange: handleInputChange, onFocus: onFocus, onBlur: onBlur, onKeyDown: handleKeyDown, style: inputStyle, rows: inputRows })), hasError && _jsx("div", { className: 'help-block position-relative', children: errorMessage })] }), _jsxs("div", { className: 'display-flex gap-5', children: [_jsx("button", { type: 'button', onClick: handleCloseEditMode, className: `EditableContentCancel btn btn-default btn-icon-only btn-${size}`, "aria-label": 'EditableContent cancel button', "data-testid": 'EditableContentCancel', children: _jsx("span", { className: 'rioglyph rioglyph-remove' }) }), _jsx("button", { type: 'button', onClick: handleSaveChanges, className: `EditableContentSave btn btn-primary btn-icon-only btn-${size}`, "aria-label": 'EditableContent save button', "data-testid": 'EditableContentSave', children: _jsx("span", { className: 'rioglyph rioglyph-ok' }) })] })] }), getOrCreatePortalRoot())] }));
+      ),
+      fe()
+    )
+  ] });
+};
+export {
+  we as default
 };
-export default EditableContent;
+//# sourceMappingURL=EditableContent.js.map