linear-react-components-ui 1.1.26-beta.9 → 2.0.0-beta.0

package/lib/list/helpers.d.ts

@@ -1,6 +1,5 @@
-import { default as React } from 'react';
 import { IListContext } from './types';
-declare const ListContext: React.Context<IListContext>;
+declare const ListContext: import('react').Context<IListContext>;
 declare const LIST_ITEMS_TYPES: {
     listHeader: string;
     listItem: string;

package/lib/list/helpers.js

@@ -1,10 +1,11 @@
-import t from "react";
-const r = t.createContext({}), o = {
-  listHeader: "Header",
-  listItem: "Item",
-  listSeparator: "Separator"
-};
-export {
-  o as LIST_ITEMS_TYPES,
-  r as ListContext
+import { createContext as e } from "react";
+//#region src/lib/list/helpers.ts
+var t = e({}), n = {
+	listHeader: "Header",
+	listItem: "Item",
+	listSeparator: "Separator"
 };
+//#endregion
+export { n as LIST_ITEMS_TYPES, t as ListContext };
+
+//# sourceMappingURL=helpers.js.map

package/lib/list/helpers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.js","names":[],"sources":["../../src/lib/list/helpers.ts"],"sourcesContent":["import { createContext } from 'react';\nimport { IListContext } from './types';\n\nconst ListContext = createContext<IListContext>({} as IListContext);\n\nconst LIST_ITEMS_TYPES = {\n  listHeader: 'Header',\n  listItem: 'Item',\n  listSeparator: 'Separator',\n};\n\nexport {\n  ListContext,\n  LIST_ITEMS_TYPES,\n};\n"],"mappings":";;AAGA,IAAM,IAAc,EAA4B,EAAE,CAAiB,EAE7D,IAAmB;CACvB,YAAY;CACZ,UAAU;CACV,eAAe;CAChB"}

package/lib/list/index.js

@@ -1,104 +1,75 @@
-import { j as l } from "../chunks/jsx-runtime.D1SHvdVE.js";
-import { useRef as R, useState as h, useEffect as f, Fragment as S } from "react";
-import { default as q } from "./Header.js";
-import { L as _ } from "../chunks/tabs.BvKfeA6Y.js";
-import { keyCodes as m } from "../internals/constants.js";
-import { default as J } from "./Separator.js";
-import { LIST_ITEMS_TYPES as O, ListContext as b } from "./helpers.js";
-import D from "../skeleton/index.js";
-const K = (u) => {
-  const {
-    children: t,
-    customClass: E,
-    condensed: L,
-    transparent: j,
-    style: v,
-    selectable: T,
-    onSelectItem: p,
-    skeletonize: c = !1,
-    skeletonHeight: W = 48,
-    skeletonItens: I = 5,
-    selectOnEnter: C = !1
-  } = u, i = R(null), r = R(null), [o, d] = h(""), [s, g] = h([]), [w, x] = h(t), N = {
-    selectable: T,
-    selectOnEnter: C,
-    selectedItemId: o,
-    selectedItemRef: i,
-    children: t,
-    skeletonize: c,
-    handleSelectItem: (e, n) => {
-      !p && n && d(e), p && p(e);
-    }
-  }, k = (e) => {
-    if ([m.ARROW_DOWN, m.ARROW_UP].includes(e.keyCode) && !c) {
-      if (e.preventDefault(), e.keyCode === m.ARROW_DOWN)
-        if (o === s[s.length - 1])
-          d(s[0]);
-        else {
-          const n = s.indexOf(o === "" ? "0" : o);
-          d(s[n + 1]);
-        }
-      else if (e.keyCode === m.ARROW_UP)
-        if (o === s[0])
-          d(s[s.length - 1]);
-        else {
-          const n = s.indexOf(o);
-          d(s[n - 1]);
-        }
-      return i.current && i.current.focus();
-    }
-    return null;
-  }, y = (e = 1) => {
-    const a = e > I ? 2 : Math.floor(I / e), A = Array.from(Array(a).keys());
-    return /* @__PURE__ */ l.jsx("div", { className: "skeleton-transparency", children: A.map((P) => /* @__PURE__ */ l.jsx(_, { hovered: !1, style: {
-      pointerEvents: "none"
-    }, children: /* @__PURE__ */ l.jsx(D, { height: W, style: {
-      margin: "6px 0"
-    } }) }, P)) });
-  }, B = (e) => e ? Array.isArray(e) && e.length > 0 ? e.map((n) => /* @__PURE__ */ l.jsxs(S, { children: [
-    n,
-    y(e.length)
-  ] }, n.props.title)) : /* @__PURE__ */ l.jsxs(S, { children: [
-    e,
-    y()
-  ] }) : y();
-  return f(() => {
-    if (i.current && r.current && r.current.scroll) {
-      const e = i.current.getBoundingClientRect(), n = r.current.getBoundingClientRect();
-      e.top - e.height > n.bottom ? r.current.scroll({
-        top: e.top
-      }) : e.top + e.height - n.y >= n.height ? r.current.scroll({
-        top: r.current.scrollTop + e.height
-      }) : e.bottom < 100 ? r.current.scroll({
-        top: 0
-      }) : r.current.scroll({
-        top: r.current.scrollTop - e.height
-      });
-    }
-  }, [i.current]), f(() => (c || document.addEventListener("keydown", k), () => {
-    document.removeEventListener("keydown", k);
-  }), [c, o, s]), f(() => {
-    p && u.selectedItemId && d(u.selectedItemId);
-  }, [u.selectedItemId]), f(() => {
-    if (Array.isArray(t) && t.length > 0) {
-      const e = t.map((n) => n.props && n.props.itemId).filter(Boolean);
-      g(e);
-    } else if (!Array.isArray(t) && t.props) {
-      const e = t;
-      e.props.itemId && g([e.props.itemId]);
-    }
-  }, [t]), f(() => {
-    if (c) {
-      let e = null;
-      Array.isArray(t) && t.length > 0 ? e = t.filter((a) => a.type && typeof a.type != "string" && a.type.name === O.listHeader) : Array.isArray(t) || (e = t.type && typeof t.type != "string" && t.type.name === O.listHeader ? t : null), x(B(e));
-    } else
-      x(t);
-  }, [c, t]), /* @__PURE__ */ l.jsx(b.Provider, { value: N, children: /* @__PURE__ */ l.jsx("ul", { "data-testid": "list-component", style: v, ref: r, className: `list-component ${L && "-condensed"}
-        ${E} ${!j && "-listbackground"}`, children: w }) });
-};
-export {
-  q as ListHeader,
-  _ as ListItem,
-  J as ListSeparator,
-  K as default
+import e from "./Header.js";
+import { LIST_ITEMS_TYPES as t, ListContext as n } from "./helpers.js";
+import { keyCodes as r } from "../internals/constants.js";
+import i from "./Item.js";
+import a from "./Separator.js";
+import '../assets/styles/list.css';/* empty css                    */
+import o from "../skeleton/index.js";
+import { Fragment as s, useEffect as c, useRef as l, useState as u } from "react";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
+//#region src/lib/list/index.tsx
+var p = (e) => {
+	let { children: a, customClass: p, condensed: m, transparent: h, style: g, selectable: _, onSelectItem: v, skeletonize: y = !1, skeletonHeight: b = 48, skeletonItens: x = 5, selectOnEnter: S = !1 } = e, C = l(null), w = l(null), [T, E] = u(""), [D, O] = u([]), [k, A] = u(a), j = {
+		selectable: _,
+		selectOnEnter: S,
+		selectedItemId: T,
+		selectedItemRef: C,
+		children: a,
+		skeletonize: y,
+		handleSelectItem: (e, t) => {
+			!v && t && E(e), v && v(e);
+		}
+	}, M = (e) => [r.ARROW_DOWN, r.ARROW_UP].includes(e.keyCode) && !y ? (e.preventDefault(), e.keyCode === r.ARROW_DOWN ? T === D[D.length - 1] ? E(D[0]) : E(D[D.indexOf(T === "" ? "0" : T) + 1]) : e.keyCode === r.ARROW_UP && (T === D[0] ? E(D[D.length - 1]) : E(D[D.indexOf(T) - 1])), C.current && C.current.focus()) : null, N = (e = 1) => {
+		let t = e > x ? 2 : Math.floor(x / e);
+		return /* @__PURE__ */ d("div", {
+			className: "skeleton-transparency",
+			children: Array.from(Array(t).keys()).map((e) => /* @__PURE__ */ d(i, {
+				hovered: !1,
+				style: { pointerEvents: "none" },
+				children: /* @__PURE__ */ d(o, {
+					height: b,
+					style: { margin: "6px 0" }
+				})
+			}, e))
+		});
+	}, P = (e) => e ? Array.isArray(e) && e.length > 0 ? e.map((t) => /* @__PURE__ */ f(s, { children: [t, N(e.length)] }, t.props.title)) : /* @__PURE__ */ f(s, { children: [e, N()] }) : N();
+	return c(() => {
+		if (C.current && w.current && w.current.scroll) {
+			let e = C.current.getBoundingClientRect(), t = w.current.getBoundingClientRect();
+			e.top - e.height > t.bottom ? w.current.scroll({ top: e.top }) : e.top + e.height - t.y >= t.height ? w.current.scroll({ top: w.current.scrollTop + e.height }) : e.bottom < 100 ? w.current.scroll({ top: 0 }) : w.current.scroll({ top: w.current.scrollTop - e.height });
+		}
+	}, [C.current]), c(() => (y || document.addEventListener("keydown", M), () => {
+		document.removeEventListener("keydown", M);
+	}), [
+		y,
+		T,
+		D
+	]), c(() => {
+		v && e.selectedItemId && E(e.selectedItemId);
+	}, [e.selectedItemId]), c(() => {
+		if (Array.isArray(a) && a.length > 0) O(a.map((e) => e.props && e.props.itemId).filter(Boolean));
+		else if (!Array.isArray(a) && a.props) {
+			let e = a;
+			e.props.itemId && O([e.props.itemId]);
+		}
+	}, [a]), c(() => {
+		if (y) {
+			let e = null;
+			Array.isArray(a) && a.length > 0 ? e = a.filter((e) => e.type && typeof e.type != "string" && e.type.name === t.listHeader) : Array.isArray(a) || (e = a.type && typeof a.type != "string" && a.type.name === t.listHeader ? a : null), A(P(e));
+		} else A(a);
+	}, [y, a]), /* @__PURE__ */ d(n.Provider, {
+		value: j,
+		children: /* @__PURE__ */ d("ul", {
+			"data-testid": "list-component",
+			style: g,
+			ref: w,
+			className: `list-component ${m && "-condensed"}
+        ${p} ${!h && "-listbackground"}`,
+			children: k
+		})
+	});
 };
+//#endregion
+export { e as ListHeader, i as ListItem, a as ListSeparator, p as default };
+
+//# sourceMappingURL=index.js.map

package/lib/list/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../src/lib/list/index.tsx"],"sourcesContent":["import { useState, useEffect, useRef, ReactElement, Fragment, MouseEventHandler } from 'react';\nimport ListHeader from './Header';\nimport ListItem from './Item';\nimport * as constants from '../internals/constants';\nimport ListSeparator from './Separator';\nimport '../assets/styles/list.scss';\nimport { ListContext, LIST_ITEMS_TYPES } from './helpers';\nimport { IListContext, IListProps, ItemId } from './types';\nimport Skeleton from '../skeleton';\n\nconst List = (props: IListProps) => {\n  const {\n    children, customClass, condensed, transparent, style, selectable, onSelectItem,\n    skeletonize = false, skeletonHeight = 48, skeletonItens = 5, selectOnEnter = false,\n  } = props;\n  const selectedItemRef = useRef< HTMLLIElement | null>(null);\n  const listRef = useRef<HTMLUListElement | null>(null);\n  const [selectedItemId, setSelectedItemId] = useState<string>('');\n  const [itensId, setItensId] = useState<ItemId[]>([]);\n  const [newChildren, setNewChildren] = useState(children);\n\n  const contextValues = {\n    selectable,\n    selectOnEnter,\n    selectedItemId,\n    selectedItemRef,\n    children,\n    skeletonize,\n    handleSelectItem: (itemId: string, onClick?: MouseEventHandler) => {\n      if (!onSelectItem && onClick) setSelectedItemId(itemId);\n      if (onSelectItem) onSelectItem(itemId);\n    },\n  } as IListContext;\n\n  const onKeyDown = (e: KeyboardEvent) => {\n    if ([constants.keyCodes.ARROW_DOWN, constants.keyCodes.ARROW_UP].includes(e.keyCode)\n      && !skeletonize) {\n      e.preventDefault();\n      if (e.keyCode === constants.keyCodes.ARROW_DOWN) {\n        if (selectedItemId === itensId[itensId.length - 1]) {\n          setSelectedItemId(itensId[0]);\n        } else {\n          const index = itensId.indexOf(selectedItemId === '' ? '0' : selectedItemId);\n          setSelectedItemId(itensId[index + 1]);\n        }\n      } else if (e.keyCode === constants.keyCodes.ARROW_UP) {\n        if (selectedItemId === itensId[0]) {\n          setSelectedItemId(itensId[itensId.length - 1]);\n        } else {\n          const index = itensId.indexOf(selectedItemId);\n          setSelectedItemId(itensId[index - 1]);\n        }\n      }\n      return selectedItemRef.current && selectedItemRef.current.focus();\n    }\n    return null;\n  };\n\n  const getSkeleton = (length = 1) => {\n    const maxSkeletonsItensExceeded = 2;\n    const skeletonItensCount = length > skeletonItens ?\n      maxSkeletonsItensExceeded\n      : Math.floor(skeletonItens / length);\n    const skeletonItensList = Array.from(Array(skeletonItensCount).keys());\n\n    return (\n      <div className=\"skeleton-transparency\">\n        {skeletonItensList.map(id => (\n          <ListItem key={id} hovered={false} style={{ pointerEvents: 'none' }}>\n            <Skeleton height={skeletonHeight} style={{ margin: '6px 0' }} />\n          </ListItem>\n        ))}\n      </div>\n    );\n  };\n\n  const getNewChildren = (headersChildren: ReactElement | ReactElement[] | null) => {\n    if (!headersChildren) return getSkeleton();\n\n    return (\n      Array.isArray(headersChildren) && headersChildren.length > 0 ?\n          headersChildren.map((item: any) => (\n            <Fragment key={item.props.title}>\n              {item}\n              {getSkeleton(headersChildren.length)}\n            </Fragment>\n          ))\n        : (\n          <Fragment>\n            {headersChildren}\n            {getSkeleton()}\n          </Fragment>\n          )\n    );\n  };\n\n  useEffect(() => {\n    if (selectedItemRef.current && listRef.current && listRef.current.scroll) {\n      const selectedItemRect = selectedItemRef.current.getBoundingClientRect();\n      const listRect = listRef.current.getBoundingClientRect();\n      const defaultScrollTop = 0;\n      const defaultBottomOffset = 100;\n\n      if (selectedItemRect.top - selectedItemRect.height > listRect.bottom) {\n        listRef.current.scroll({ top: selectedItemRect.top });\n      } else if ((selectedItemRect.top + selectedItemRect.height) - listRect.y >= listRect.height) {\n        listRef.current.scroll({ top: listRef.current.scrollTop + selectedItemRect.height });\n      } else if (selectedItemRect.bottom < defaultBottomOffset) {\n        listRef.current.scroll({ top: defaultScrollTop });\n      } else {\n        listRef.current.scroll({ top: listRef.current.scrollTop - selectedItemRect.height });\n      }\n    }\n  }, [selectedItemRef.current]);\n\n  useEffect(() => {\n    if (!skeletonize) document.addEventListener('keydown', onKeyDown);\n\n    return () => {\n      document.removeEventListener('keydown', onKeyDown);\n    };\n  }, [skeletonize, selectedItemId, itensId]);\n\n  useEffect(() => {\n    if (onSelectItem && props.selectedItemId) setSelectedItemId(props.selectedItemId);\n  }, [props.selectedItemId]);\n\n  useEffect(() => {\n    if (Array.isArray(children) && children.length > 0) {\n      const newItensIds: ItemId[] = children.map((item: any) =>\n        item.props && item.props.itemId).filter(Boolean);\n      setItensId(newItensIds);\n    } else if (!Array.isArray(children) && children.props) {\n      const childrenWithProps = children as ReactElement<{ itemId?: string }>;\n      if (childrenWithProps.props.itemId) setItensId([childrenWithProps.props.itemId]);\n    }\n  }, [children]);\n\n  useEffect(() => {\n    if (skeletonize) {\n      let headersChildren: ReactElement | ReactElement[] | null = null;\n      if (Array.isArray(children) && children.length > 0) {\n        const childrenWithType = children as ReactElement[];\n        headersChildren = childrenWithType.filter((item: ReactElement) => item.type &&\n          typeof item.type !== 'string' && item.type.name === LIST_ITEMS_TYPES.listHeader);\n      } else if (!Array.isArray(children)) {\n        headersChildren = children.type && typeof children.type !== 'string' &&\n          children.type.name === LIST_ITEMS_TYPES.listHeader\n          ? children\n          : null;\n      }\n      setNewChildren(getNewChildren(headersChildren));\n    } else {\n      setNewChildren(children);\n    }\n  }, [skeletonize, children]);\n\n  return (\n    <ListContext.Provider value={contextValues}>\n      <ul\n        data-testid=\"list-component\"\n        style={style}\n        ref={listRef}\n        className={`list-component ${condensed && '-condensed'}\n        ${customClass} ${!transparent && '-listbackground'}`}>\n        {newChildren}\n      </ul>\n    </ListContext.Provider>\n  );\n};\n\nexport default List;\nexport { ListHeader, ListItem, ListSeparator };\n"],"mappings":"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"}

package/lib/list/types.d.ts

@@ -1,7 +1,7 @@
-import { ComponentPropsWithoutRef, CSSProperties, ReactElement, ReactNode, Ref } from 'react';
+import { ComponentPropsWithoutRef, CSSProperties, MouseEvent, ReactElement, ReactNode, Ref } from 'react';
 import { PermissionAttr } from '../@types/PermissionAttr';
 import { IconNames } from '../@types/Icon';
-import { Position } from '../@types/Position';
+import { ITooltipCommonProps } from '../tooltip/types';
 export type ItemId = string;
 export interface KeyboardEvent {
     key: string;
@@ -28,7 +28,7 @@ export interface IListProps {
     skeletonItens?: number;
     selectOnEnter?: boolean;
 }
-export interface IListItemProps {
+export interface IListItemProps extends ITooltipCommonProps {
     text?: string;
     style?: object;
     separator?: boolean;
@@ -40,7 +40,7 @@ export interface IListItemProps {
     rightElement?: ReactElement;
     leftIcon?: ReactElement;
     rightIcon?: ReactElement;
-    onClick?: (event?: React.MouseEvent<HTMLLIElement, MouseEvent> | KeyboardEvent, itemId?: string) => void;
+    onClick?: (event?: MouseEvent<HTMLLIElement> | KeyboardEvent, itemId?: string) => void;
     leftIconName?: IconNames;
     rightIconName?: IconNames;
     customClass?: string;
@@ -52,11 +52,8 @@ export interface IListItemProps {
     permissionAttr?: PermissionAttr | PermissionAttr[];
     selectOnEnter?: boolean;
     skeletonize?: boolean;
-    targetRef?: (ref: HTMLLIElement) => void;
-    tooltipPosition?: Exclude<Position, 'center'>;
-    tooltipWidth?: string | number;
-    tooltip?: string;
     onDeniedText?: string;
+    onMouseDown?: (event?: MouseEvent<HTMLLIElement>) => void;
 }
 export interface IListContext {
     selectable: boolean;

package/lib/menus/float/MenuItem.js

@@ -1,55 +1,60 @@
-import { j as t } from "../../chunks/jsx-runtime.D1SHvdVE.js";
-import { c as I } from "../../chunks/compiler-runtime.Cu50tn6L.js";
-import { useContext as v } from "react";
-import { _ as M } from "../../chunks/lodash.CIAK_hAg.js";
-import y from "../../icons/index.js";
-import { WithDropdownContext as E } from "../../dropdown/withDropdown.js";
-import S from "../../buttons/Button.js";
-import '../../assets/button.css';/* empty css                           */
-import b from "./helpers.js";
-const A = (z) => {
-  const o = I.c(24), {
-    title: p,
-    url: f,
-    iconName: u,
-    iconColor: N,
-    iconSize: k,
-    dropdownMenu: c,
-    onClick: e
-  } = z, x = N === void 0 ? "gray" : N, C = k === void 0 ? 24 : k, {
-    customClassMenuItem: D
-  } = v(b), m = v(E);
-  let a;
-  o[0] !== m || o[1] !== e ? (a = () => {
-    if (e) {
-      e(m?.handleDropdownClose);
-      return;
-    }
-    m && m.handleDropdownClose();
-  }, o[0] = m, o[1] = e, o[2] = a) : a = o[2];
-  const h = a, w = `${D} -items`;
-  let n;
-  o[3] !== c || o[4] !== e ? (n = !M.isEmpty(c) && !e && /* @__PURE__ */ t.jsx(S, { customClass: "floatmenudropdown", iconName: "more1", transparent: !0, size: "medium", boxShadow: !1, dropdown: !0, showIconDropdown: !1, children: c }), o[3] = c, o[4] = e, o[5] = n) : n = o[5];
-  const j = e ? "pointer" : void 0;
-  let s;
-  o[6] !== j ? (s = {
-    cursor: j
-  }, o[6] = j, o[7] = s) : s = o[7];
-  let r;
-  o[8] !== x || o[9] !== u || o[10] !== C ? (r = /* @__PURE__ */ t.jsx("span", { className: "iconcontainer", children: /* @__PURE__ */ t.jsx(y, { name: u, size: C, color: x, customClass: "iconmenu" }) }), o[8] = x, o[9] = u, o[10] = C, o[11] = r) : r = o[11];
-  let i;
-  o[12] !== p ? (i = /* @__PURE__ */ t.jsx("span", { className: "nameitem", children: p }), o[12] = p, o[13] = i) : i = o[13];
-  let l;
-  o[14] !== h || o[15] !== s || o[16] !== r || o[17] !== i || o[18] !== f ? (l = /* @__PURE__ */ t.jsxs("a", { className: "floatmenulink", target: "_blank", onClick: h, href: f, style: s, rel: "noreferrer", children: [
-    r,
-    i
-  ] }), o[14] = h, o[15] = s, o[16] = r, o[17] = i, o[18] = f, o[19] = l) : l = o[19];
-  let d;
-  return o[20] !== l || o[21] !== w || o[22] !== n ? (d = /* @__PURE__ */ t.jsx("div", { className: "floatmenuitem", children: /* @__PURE__ */ t.jsxs("div", { className: w, children: [
-    n,
-    l
-  ] }) }), o[20] = l, o[21] = w, o[22] = n, o[23] = d) : d = o[23], d;
-};
-export {
-  A as default
+import { __toESM as e } from "../../_virtual/_rolldown/runtime.js";
+import { require_compiler_runtime as t } from "../../node_modules/react/compiler-runtime.js";
+import n from "../../icons/index.js";
+import { require_lodash as r } from "../../node_modules/lodash/lodash.js";
+import { WithDropdownContext as i } from "../../dropdown/withDropdown.js";
+import a from "../../buttons/index.js";
+import o from "./helpers.js";
+import { useContext as s } from "react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+//#region src/lib/menus/float/MenuItem.tsx
+var u = t(), d = /* @__PURE__ */ e(r(), 1), f = (e) => {
+	let t = (0, u.c)(13), { title: r, url: f, iconName: p, iconColor: m, iconSize: h, dropdownMenu: g, onClick: _ } = e, v = m === void 0 ? "gray" : m, y = h === void 0 ? 24 : h, { customClassMenuItem: b } = s(o), x = s(i), S;
+	t[0] !== x || t[1] !== _ ? (S = () => {
+		if (_) {
+			_(x?.handleDropdownClose);
+			return;
+		}
+		x && x.handleDropdownClose();
+	}, t[0] = x, t[1] = _, t[2] = S) : S = t[2];
+	let C = S, w;
+	return t[3] !== b || t[4] !== g || t[5] !== C || t[6] !== v || t[7] !== p || t[8] !== y || t[9] !== _ || t[10] !== r || t[11] !== f ? (w = c("div", {
+		className: "floatmenuitem",
+		children: l("div", {
+			className: `${b} -items`,
+			children: [!d.default.isEmpty(g) && !_ && c(a, {
+				customClass: "floatmenudropdown",
+				iconName: "more1",
+				transparent: !0,
+				size: "medium",
+				boxShadow: !1,
+				dropdown: !0,
+				showIconDropdown: !1,
+				children: g
+			}), l("a", {
+				className: "floatmenulink",
+				target: "_blank",
+				onClick: C,
+				href: f,
+				style: { cursor: _ ? "pointer" : void 0 },
+				rel: "noreferrer",
+				children: [c("span", {
+					className: "iconcontainer",
+					children: c(n, {
+						name: p,
+						size: y,
+						color: v,
+						customClass: "iconmenu"
+					})
+				}), c("span", {
+					className: "nameitem",
+					children: r
+				})]
+			})]
+		})
+	}), t[3] = b, t[4] = g, t[5] = C, t[6] = v, t[7] = p, t[8] = y, t[9] = _, t[10] = r, t[11] = f, t[12] = w) : w = t[12], w;
 };
+//#endregion
+export { f as default };
+
+//# sourceMappingURL=MenuItem.js.map

package/lib/menus/float/MenuItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuItem.js","names":[],"sources":["../../../src/lib/menus/float/MenuItem.tsx"],"sourcesContent":["import { useContext } from 'react';\nimport _ from 'lodash';\nimport Icon from '../../icons';\nimport { WithDropdownContext } from '../../dropdown/withDropdown';\nimport Button from '../../buttons';\nimport FloatMenuContext from './helpers';\nimport { IFloatMenuItemProps } from './types';\n\nconst MenuItem = ({\n  title, url, iconName, iconColor = 'gray', iconSize = 24, dropdownMenu, onClick,\n}: IFloatMenuItemProps) => {\n  const { customClassMenuItem } = useContext(FloatMenuContext);\n  const dropdownContext = useContext(WithDropdownContext);\n\n  const handleOnClick = () => {\n    if (onClick) {\n      onClick(dropdownContext?.handleDropdownClose);\n      return;\n    }\n    if (dropdownContext) dropdownContext.handleDropdownClose();\n  };\n\n  return (\n    <div className=\"floatmenuitem\">\n      <div className={`${customClassMenuItem} -items`}>\n        {!_.isEmpty(dropdownMenu) && !onClick && (\n          <Button\n            customClass=\"floatmenudropdown\"\n            iconName=\"more1\"\n            transparent\n            size=\"medium\"\n            boxShadow={false}\n            dropdown\n            showIconDropdown={false}>\n            {dropdownMenu}\n          </Button>\n        )}\n        <a\n          className=\"floatmenulink\"\n          target=\"_blank\"\n          onClick={handleOnClick}\n          href={url}\n          style={{ cursor: onClick ? 'pointer' : undefined }}\n          rel=\"noreferrer\">\n          <span className=\"iconcontainer\">\n            <Icon name={iconName} size={iconSize} color={iconColor} customClass=\"iconmenu\" />\n          </span>\n          <span className=\"nameitem\">{title}</span>\n        </a>\n      </div>\n    </div>\n  );\n};\n\nexport default MenuItem;\n"],"mappings":";;;;;;;;;;4CAQM,KAAA,MAAA;CAAA,IAAA,KAAA,GAAA,EAAA,GAAA,GAAA,EAAY,EAAA,UAAA,QAAA,aAAA,WAAA,GAAA,UAAA,GAAA,iBAAA,eAAA,GACM,IAAA,MAAA,KAAA,IAAA,SAAA,GAAoB,IAAA,MAAA,KAAA,IAAA,KAAA,GAE1C,EAAA,2BAAgC,EAAW,EAAiB,EAC5D,IAAwB,EAAW,EAAoB,EAAA;AAAA,CAAA,EAAA,OAAA,KAAA,EAAA,OAAA,KAEjD,UAAA;AACJ,MAAI,GAAA;AACF,KAAQ,GAAA,oBAAqC;AAAA;;AAG/C,EAAI,KAAiB,EAAA,qBAAqC;;CAL5D,IAAA,IAAM;AAoCE,wIA3BN,IAAA,EAAC,OAAD;EAAA,WAAe;EAAA,UACb,EAAC,OAAD;GAAA,WAAgB,GAAG,EAAA;GAAoB,UAAvC,CACG,CAAC,EAAA,QAAA,QAAU,EAAkB,IAA7B,CAA6B,KAC5B,EAAC,GAAD;IAAA,aACc;IAAA,UACH;IAAA,aACT;IAAA,MACK;IAAA,WACM;IAAA,UACX;IAAA,kBACkB;IAAA,UACjB;IACM,CAAA,EAEX,EAAC,KAAD;IAAA,WACY;IAAA,QACH;IAAA,SACE;IAAA,MACH;IAAA,OACC,EAAA,QAAU,IAAA,YAAA,KAAA,GAAiC;IAAA,KAC9C;IAAA,UANN,CAOE,EAAC,QAAD;KAAA,WAAgB;KAAA,UACd,EAAC,GAAD;MAAA,MAAY;MAAA,MAAgB;MAAA,OAAiB;MAAA,aAAuB;MAAa,CAAA;KAC5E,CAAA,EACP,EAAC,QAAD;KAAA,WAAgB;KAAA,UAAY;KAAa,CAAA,CAAA;;;EAGzC,CAAA,EAAA,EAAA,KAAA,GAAA,EAAA,KAAA,GAAA,EAAA,KAAA,GAAA,EAAA,KAAA,GAAA,EAAA,KAAA,GAAA,EAAA,KAAA,GAAA,EAAA,KAAA,GAAA,EAAA,MAAA,GAAA,EAAA,MAAA,GAAA,EAAA,MAAA,KAAA,IAAA,EAAA,KA3BN"}

package/lib/menus/float/SubMenuContainer.js

@@ -0,0 +1,63 @@
+import { __toESM as e } from "../../_virtual/_rolldown/runtime.js";
+import { require_compiler_runtime as t } from "../../node_modules/react/compiler-runtime.js";
+import n from "../../icons/index.js";
+import r from "../../skeleton/SkeletonContainer.js";
+import i from "../../skeleton/index.js";
+import { require_prop_types as a } from "../../node_modules/prop-types/index.js";
+import { useEffect as o } from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region src/lib/menus/float/SubMenuContainer.jsx
+var l = t(), u = /* @__PURE__ */ e(a(), 1), d = (e, t, n) => e && t ? /* @__PURE__ */ s(r, {
+	style: {
+		flexDirection: "row",
+		flexFlow: "row wrap"
+	},
+	children: Array.from({ length: t }, (e, t) => t + 1).map((e) => /* @__PURE__ */ s(i, {
+		height: 88,
+		width: 88,
+		style: {
+			flexGrow: "unset",
+			marginBottom: 5
+		}
+	}, e))
+}) : n, f = (e) => {
+	let t = (0, l.c)(10), { title: r, customClass: i, handlerGoBack: a, skeletonize: u, skeletonQtty: f, children: p } = e, m;
+	t[0] === a ? m = t[1] : (m = () => () => {
+		a();
+	}, t[0] = a, t[1] = m);
+	let h;
+	t[2] === Symbol.for("react.memo_cache_sentinel") ? (h = [], t[2] = h) : h = t[2], o(m, h);
+	let g = `floatsubmenu ${i}`, _;
+	return t[3] !== p || t[4] !== a || t[5] !== f || t[6] !== u || t[7] !== g || t[8] !== r ? (_ = c("div", {
+		className: g,
+		children: [c("div", {
+			className: "submenuheader",
+			children: [s(n, {
+				onClick: a,
+				name: "arrowBack",
+				pointerEvents: "all",
+				style: { cursor: "pointer" }
+			}), r && s("span", { children: r })]
+		}), s("div", {
+			className: "submenucontent",
+			children: d(u, f, p)
+		})]
+	}), t[3] = p, t[4] = a, t[5] = f, t[6] = u, t[7] = g, t[8] = r, t[9] = _) : _ = t[9], _;
+};
+f.propTypes = {
+	children: u.default.node.isRequired,
+	handlerGoBack: u.default.func.isRequired,
+	title: u.default.string,
+	customClass: u.default.string,
+	skeletonize: u.default.bool,
+	skeletonQtty: u.default.number
+}, f.defaultProps = {
+	title: void 0,
+	customClass: void 0,
+	skeletonize: !1,
+	skeletonQtty: 3
+};
+//#endregion
+export { f as default };
+
+//# sourceMappingURL=SubMenuContainer.js.map

package/lib/menus/float/SubMenuContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SubMenuContainer.js","names":[],"sources":["../../../src/lib/menus/float/SubMenuContainer.jsx"],"sourcesContent":["import { useEffect } from 'react';\nimport PropTypes from 'prop-types';\nimport Icon from '../../icons';\nimport Skeleton, { SkeletonContainer } from '../../skeleton';\n\nconst renderChildren = (skeletonize, skeletonQtty, children) => {\n  if (skeletonize && skeletonQtty) {\n    const skeletons = Array.from({ length: skeletonQtty }, (_, i) => i + 1);\n    return (\n      <SkeletonContainer style={{ flexDirection: 'row', flexFlow: 'row wrap' }}>\n        {skeletons.map(id => (\n          <Skeleton\n            key={id}\n            height={88}\n            width={88}\n            style={{\n              flexGrow: 'unset',\n              marginBottom: 5,\n            }} />\n        ))}\n      </SkeletonContainer>\n    );\n  }\n\n  return children;\n};\n\nconst SubMenuContainer = ({\n  title, customClass, handlerGoBack, skeletonize, skeletonQtty, children,\n}) => {\n  useEffect(() => () => {\n    handlerGoBack();\n  }, []);\n\n  return (\n    <div className={`floatsubmenu ${customClass}`}>\n      <div className=\"submenuheader\">\n        <Icon onClick={handlerGoBack} name=\"arrowBack\" pointerEvents=\"all\" style={{ cursor: 'pointer' }} />\n        {title && <span>{title}</span>}\n      </div>\n      <div className=\"submenucontent\">\n        {renderChildren(skeletonize, skeletonQtty, children)}\n      </div>\n    </div>\n  );\n};\n\nSubMenuContainer.propTypes = {\n  children: PropTypes.node.isRequired,\n  handlerGoBack: PropTypes.func.isRequired,\n  title: PropTypes.string,\n  customClass: PropTypes.string,\n  skeletonize: PropTypes.bool,\n  skeletonQtty: PropTypes.number,\n};\n\nSubMenuContainer.defaultProps = {\n  title: undefined,\n  customClass: undefined,\n  skeletonize: false,\n  skeletonQtty: 3,\n};\n\nexport default SubMenuContainer;\n"],"mappings":";;;;;;;;;4CAKM,KAAkB,GAAa,GAAc,MAC7C,KAAe,IAGf,kBAAC,GAAD;CAAmB,OAAO;EAAE,eAAe;EAAO,UAAU;EAAY;WAFxD,MAAM,KAAK,EAAE,QAAQ,GAAc,GAAG,GAAG,MAAM,IAAI,EAAE,CAGxD,KAAI,MACb,kBAAC,GAAD;EAEE,QAAQ;EACR,OAAO;EACP,OAAO;GACL,UAAU;GACV,cAAc;;EACX,EANA,EAMA,CAAA;CAES,CAAA,GAIjB,GAGH,KAAA,MAAA;CAAA,IAAA,KAAA,GAAA,EAAA,GAAA,GAAA,EAAoB,EAAA,UAAA,gBAAA,kBAAA,gBAAA,iBAAA,gBAAA,GACsC;AAAA,CAAA,EAAA,OAAA,gBAE9D,gBAAA;AACE,KAAe;;;AADjB,qDAEG,IAAA,EAAE,EAAA,EAAA,KAAA,KAAA,IAAA,EAAA,IAFL,EAAA,GAEG,EAAG;CAGY,IAAA,IAAA,gBAAgB,KAAA;QAAA,EAAA,OAAA,KAAA,EAAA,OAAA,KAAA,EAAA,OAAA,KAAA,EAAA,OAAA,KAAA,EAAA,OAAA,KAAA,EAAA,OAAA,KAAhC,IAAA,EAAC,OAAD;EAAA,WAAgB;EAAgB,UAAhC,CACE,EAAC,OAAD;GAAA,WAAe;GAAA,UAAf,CACE,EAAC,GAAD;IAAA,SAAe;IAAA,MAAoB;IAAA,eAA0B;IAAA,OAAa,EAAA,QAAU,WAAA;IAAe,CAAA,EAClG,KAAS,EAAC,QAAD,EAAA,UAAO,GAAa,CAAA,CAAA;MAEhC,EAAC,OAAD;GAAA,WAAe;GAAA,UACZ,EAAe,GAAa,GAAc,EAAA;GACvC,CAAA,CAAA;uFAPR;;AAYJ,EAAiB,YAAY;CAC3B,UAAU,EAAA,QAAU,KAAK;CACzB,eAAe,EAAA,QAAU,KAAK;CAC9B,OAAO,EAAA,QAAU;CACjB,aAAa,EAAA,QAAU;CACvB,aAAa,EAAA,QAAU;CACvB,cAAc,EAAA,QAAU;CACzB,EAED,EAAiB,eAAe;CAC9B,OAAO,KAAA;CACP,aAAa,KAAA;CACb,aAAa;CACb,cAAc;CACf"}

package/lib/menus/float/helpers.d.ts

@@ -1,4 +1,3 @@
-import { default as React } from 'react';
 import { IFloatMenuContext } from './types';
-declare const FloatMenuContext: React.Context<IFloatMenuContext>;
+declare const FloatMenuContext: import('react').Context<IFloatMenuContext>;
 export default FloatMenuContext;

package/lib/menus/float/helpers.js

@@ -1,5 +1,7 @@
-import t from "react";
-const o = t.createContext({});
-export {
-  o as default
-};
+import { createContext as e } from "react";
+//#region src/lib/menus/float/helpers.ts
+var t = e({});
+//#endregion
+export { t as default };
+
+//# sourceMappingURL=helpers.js.map

package/lib/menus/float/helpers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.js","names":[],"sources":["../../../src/lib/menus/float/helpers.ts"],"sourcesContent":["import { createContext } from 'react';\nimport { IFloatMenuContext } from './types';\n\nconst FloatMenuContext = createContext({} as IFloatMenuContext);\n\nexport default FloatMenuContext;\n"],"mappings":";;AAGA,IAAM,IAAmB,EAAc,EAAE,CAAsB"}