@hortiview/shared-components 2.24.3 → 2.25.0

package/dist/components/ContextMenu/ContextMenu.js

@@ -1,129 +1,90 @@
-import { jsx as i, jsxs as g, Fragment as _ } from "react/jsx-runtime";
-import { I as z } from "../../index.es-CkB4776y.js";
-import { M as F, L as V, a as h, b as $ } from "../../index.es-Cg57snrN.js";
-import { c as o } from "../../index-Df2FYN-K.js";
-import { useState as j, useCallback as x, useEffect as D, useMemo as d, Fragment as q } from "react";
-import { createPortal as f } from "react-dom";
-import { useBreakpoints as E } from "../../hooks/useBreakpoints.js";
-import { OfflineView as T } from "../OfflineView/OfflineView.js";
-import { s as t } from "../../contextMenu.module-RWPDK7Ds.js";
-const X = ({
-  triggerOpen: c = null,
-  actions: u,
-  iconOrientation: p = "vertical",
-  "data-testid": M,
-  isOnline: B = !0,
-  offlineViewProps: N,
-  hasActionIconForSingleAction: b = !0,
-  isSingleActionTriggeredOnClick: L = !0,
-  isFloatingActionButtonOnMobile: S = !1,
-  floatingButtonPaddingInsertTarget: m,
-  floatingButtonScreenOffsetType: v = "buttonAppBar"
+import { jsx as t, jsxs as I } from "react/jsx-runtime";
+import { I as A } from "../../index.es-CkB4776y.js";
+import { M as h, L as k, a as c, b as y } from "../../index.es-Cg57snrN.js";
+import { useState as q, useCallback as m, useEffect as L, useMemo as V, Fragment as B } from "react";
+import { u as N } from "../../uniqueId-CJo-XRQb.js";
+import { OfflineView as b } from "../OfflineView/OfflineView.js";
+import { useIsAllowed as $ } from "../PermissionChecks/PermissionService.js";
+import '../../assets/ContextMenu.css';const j = "_menu_x6qd9_1", z = "_icon_x6qd9_6", H = "_listItem_x6qd9_10", O = "_offlineViewMargin_x6qd9_20", n = {
+  menu: j,
+  icon: z,
+  listItem: H,
+  offlineViewMargin: O
+}, U = ({
+  triggerOpen: s = null,
+  actions: r,
+  iconOrientation: _ = "vertical",
+  "data-testid": a,
+  isOnline: p = !0,
+  offlineViewProps: M
 }) => {
-  const [r, n] = j(!1), a = x(() => {
-    n(!1);
-  }, []), w = x(() => {
-    r ? a() : n(!0);
-  }, [r, a]);
-  D(() => {
-    n(c !== null ? !!c : !1);
-  }, [c]);
-  const s = d(
-    () => u.filter((e) => e.isAllowed !== !1),
-    [u]
-  ), { isDesktop: A } = E(), l = S && !A, k = d(() => {
-    if (s.length === 1 && b) {
-      const e = s[0];
-      if (typeof e.leadingBlock == "string")
-        return e.leadingBlock;
-    }
-    return p === "vertical" ? "more_vert" : "more_horiz";
-  }, [s, p, b]), C = d(() => m ? document.querySelector(m) : null, [m]);
-  if (s.length === 0) return null;
-  const y = /* @__PURE__ */ i(
-    F,
+  const [f, i] = q(!1), u = $(), d = m(() => {
+    i(!1);
+  }, []), g = m(() => {
+    i((e) => !e);
+  }, []);
+  L(() => {
+    i(s !== null ? s : !1);
+  }, [s]);
+  const o = V(() => r.filter((e) => e.isHidden || e.isAllowed === !1 ? !1 : !(e.permissionConfiguration && !u(e.permissionConfiguration))), [r, u]);
+  return o.length === 0 ? null : /* @__PURE__ */ t(
+    h,
     {
-      className: o(t.menu, l && t.fabMenu),
-      "data-testid": M ?? "selection-menu",
-      open: r,
+      className: n.menu,
+      "data-testid": a ?? "contextMenu-undefined",
+      open: f,
       surfaceOnly: !0,
-      hoistToBody: !l,
-      onClose: a,
-      trigger: /* @__PURE__ */ i(
-        z,
+      hoistToBody: !0,
+      onClose: d,
+      trigger: /* @__PURE__ */ t(
+        A,
         {
-          className: o(t.icon, l && t.fabIcon),
-          variant: r || l ? "filled-primary" : void 0,
-          iconSize: l ? "xlarge" : void 0,
+          className: n.icon,
+          variant: f ? "filled-primary" : void 0,
           "data-testid": "open-button",
-          icon: k,
-          onClick: () => {
-            s.length === 1 && L ? (s[0].onClick?.(), a()) : w();
-          },
-          "data-icon": k
+          icon: _ === "vertical" ? "more_vert" : "more_horiz",
+          onClick: g
         }
       ),
-      children: B ? /* @__PURE__ */ i(V, { "data-testid": "selection-list", children: s.map((e, I) => /* @__PURE__ */ g(q, { children: [
-        e.dividerBefore && /* @__PURE__ */ i(h, {}),
-        /* @__PURE__ */ i(
-          $,
-          {
-            className: t.listItem,
-            ...e,
-            leadingBlockType: "icon",
-            "data-testid": e["data-testid"],
-            onClick: () => {
-              e?.onClick?.(), e.closeOnClick !== !1 && a();
+      children: p ? /* @__PURE__ */ t(k, { "data-testid": "selection-list", children: o.map((e, l) => {
+        const {
+          closeOnClick: w,
+          dividerBefore: x,
+          dividerAfter: C,
+          permissionConfiguration: S,
+          isAllowed: T,
+          isHidden: D,
+          ...v
+        } = e;
+        return /* @__PURE__ */ I(B, { children: [
+          x && l !== 0 && /* @__PURE__ */ t(c, {}),
+          /* @__PURE__ */ t(
+            y,
+            {
+              className: n.listItem,
+              ...v,
+              leadingBlockType: "icon",
+              "data-testid": e["data-testid"] ?? `contextMenu-action-${l}`,
+              onClick: () => {
+                e?.onClick?.(), w !== !1 && d();
+              }
             }
-          }
-        ),
-        e.dividerAfter && /* @__PURE__ */ i(h, {})
-      ] }, `LI_${e.primaryText?.toString()}_${I}`)) }) : /* @__PURE__ */ i(
-        T,
+          ),
+          C && l !== o.length - 1 && /* @__PURE__ */ t(c, {})
+        ] }, N(`LI_${e.primaryText?.toString()}_`));
+      }) }) : /* @__PURE__ */ t(
+        b,
         {
           size: "small",
           variant: "filled",
-          className: t.offlineViewMargin,
-          ...N
+          className: n.offlineViewMargin,
+          ...M
         }
       )
     },
-    "selectionmenu"
+    `contextMenu-${a ?? "undefined"}`
   );
-  if (l) {
-    const e = /* @__PURE__ */ i(
-      "div",
-      {
-        className: o(
-          t.fabContainer,
-          v === "buttonAppBar" && t.buttonAppBar,
-          v === "fullScreen" && t.fullScreen
-        ),
-        "data-testid": "fab-container",
-        children: y
-      }
-    );
-    return /* @__PURE__ */ g(_, { children: [
-      f(e, document.body),
-      f(
-        /* @__PURE__ */ i(
-          "div",
-          {
-            className: o(t.scrim, r && t.scrimVisible),
-            onClick: a,
-            "data-testid": "context-menu-scrim"
-          }
-        ),
-        document.body
-      ),
-      C && f(
-        /* @__PURE__ */ i("div", { className: t.fabSpacer, "data-testid": "fab-spacer" }),
-        C
-      )
-    ] });
-  }
-  return y;
 };
 export {
-  X as ContextMenu
+  U as ContextMenu
 };

package/dist/components/EmptyView/EmptyView.js

@@ -8,8 +8,8 @@ import "../../react-tooltip.min-Dkz5ltCC.js";
 import "../../orderBy-Ce85KqD6.js";
 import "../../index-CuHybtft.js";
 import "../SharedComponentsPermissionProvider/PermissionContext.js";
-import "react-dom";
 import "../../uniqueId-CJo-XRQb.js";
+import "react-dom";
 import { LoadingSpinner as w } from "../LoadingSpinner/Default/LoadingSpinner.js";
 import "react-hook-form";
 import "../../get-CBFiuc3f.js";

package/dist/components/Filter/Filter.js

@@ -14,8 +14,8 @@ import { SearchBar as I } from "../SearchBar/SearchBar.js";
 import "../../index-CuHybtft.js";
 import "../SharedComponentsPermissionProvider/PermissionContext.js";
 import { Modal as K } from "../Modal/Modal.js";
-import "react-dom";
 import "../../uniqueId-CJo-XRQb.js";
+import "react-dom";
 import { Select as M } from "../Select/Select.js";
 import "react-hook-form";
 import "../../get-CBFiuc3f.js";

package/dist/components/FloatingActionButton/FloatingActionButton.d.ts

@@ -0,0 +1,76 @@
+import { OfflineViewProps } from '../OfflineView/OfflineView';
+import { ActionProps } from '../ContextMenu/ContextMenu.tsx';
+
+export type FloatingActionButtonProps = {
+    /**
+     * List of actions to display in the FAB as ListItems
+     */
+    actions: ActionProps[];
+    /**
+     * If not null, the menu will be open
+     */
+    triggerOpen?: boolean | null;
+    /**
+     * Determines if the menu icon should be vertical or horizontal three dots when multiple actions are present
+     * Default is 'vertical'
+     */
+    iconOrientation?: 'vertical' | 'horizontal';
+    'data-testid'?: string;
+    /**
+     * Whether the user is online; shows OfflineView when false.
+     */
+    isOnline?: boolean;
+    /**
+     * Props forwarded to <OfflineView /> when offline.
+     */
+    offlineViewProps?: Partial<OfflineViewProps>;
+    /**
+     * If only one action is provided/allowed, trigger that action without opening the menu
+     * @remarks Basically turns the component into an icon button
+     * @default true
+     */
+    isSingleActionTriggeredOnClick?: boolean;
+    /**
+     * If only one action is provided/visible, show the icon of that action in the FAB button instead of the default menu icon
+     * @default true
+     */
+    hasActionIconForSingleAction?: boolean;
+    /**
+     * Specify a target element (query selector) to insert an extra padding element below.
+     * The padding element is used to make sure the FAB doesn't block any elements at the end of a view.
+     * @example '#layout-container'
+     */
+    floatingButtonPaddingInsertTarget?: string;
+    /**
+     * Determines the distance/offset of the floating action button from the bottom and right edge of the screen
+     * - 'buttonAppBar' adds offset for when the element ButtonAppBar is used, so the button stays slightly above the bar
+     * - 'fullScreen' adds offset for a full-screen view, with the button sitting slightly above the screen edges
+     * @default 'buttonAppBar'
+     */
+    floatingButtonScreenOffsetType?: 'buttonAppBar' | 'fullScreen';
+    /**
+     * Variants prefixed with filled- will add a background color to the icon according to the theme.
+     * Variants prefixed with color- will change the color of the icon according to the theme.
+     * Default: 'filled-primary'
+     */
+    variant?: 'filled-danger-alt' | 'filled-danger' | 'filled-primary' | 'filled-secondary' | 'color-primary' | 'color-secondary' | 'color-on-dark' | 'color-on-unknown-black' | 'secondary-on-surface';
+};
+/**
+ * FloatingActionButton (FAB) for mobile and tablet layouts.
+ *
+ * Renders a floating action button fixed near the bottom-right of the viewport,
+ * providing quick access to contextual actions. Not rendered on desktop breakpoints.
+ *
+ * Behavior depends on the amount of actions:
+ * - No actions: renders nothing
+ * - Single action: clicking the FAB triggers it directly; optionally displays that action's icon on the FAB.
+ *    This can be controlled using the `isSingleActionTriggeredOnClick` and `hasActionIconForSingleAction` props
+ * - Multiple actions: clicking the FAB toggles a menu with all available actions
+ *
+ * FAB and scrim are portaled to `document.body` to float above layout constraints
+ * Optional spacer element can be inserted into a target element via `floatingButtonPaddingInsertTarget` to prevent the FAB from covering content
+ *
+ * This component is anchored as a floating overlay
+ * Use `floatingButtonScreenOffsetType` to control the distance from screen edges (above bottom app bar or full-screen layout)
+ */
+export declare const FloatingActionButton: ({ actions, triggerOpen, iconOrientation, "data-testid": dataTestId, isOnline, offlineViewProps, hasActionIconForSingleAction, isSingleActionTriggeredOnClick, floatingButtonPaddingInsertTarget, floatingButtonScreenOffsetType, variant, }: FloatingActionButtonProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/components/FloatingActionButton/FloatingActionButton.js

@@ -0,0 +1,150 @@
+import { jsx as n, jsxs as M, Fragment as z } from "react/jsx-runtime";
+import { I as F } from "../../index.es-CkB4776y.js";
+import { M as j, L as D, a as k, b as H } from "../../index.es-Cg57snrN.js";
+import { c as r } from "../../index-Df2FYN-K.js";
+import { useState as E, useCallback as w, useEffect as G, useMemo as f, Fragment as J } from "react";
+import { createPortal as d } from "react-dom";
+import { useBreakpoints as K } from "../../hooks/useBreakpoints.js";
+import { OfflineView as O } from "../OfflineView/OfflineView.js";
+import { useIsAllowed as Q } from "../PermissionChecks/PermissionService.js";
+import '../../assets/FloatingActionButton.css';const R = "_menu_1bdpq_1", T = "_icon_1bdpq_6", U = "_listItem_1bdpq_10", W = "_offlineViewMargin_1bdpq_20", X = "_fabContainer_1bdpq_24", Y = "_buttonAppBar_1bdpq_29", Z = "_fullScreen_1bdpq_34", P = "_fabIcon_1bdpq_39", ee = "_fabMenu_1bdpq_43", te = "_scrim_1bdpq_47", ne = "_scrimVisible_1bdpq_60", ie = "_fabSpacer_1bdpq_65", t = {
+  menu: R,
+  icon: T,
+  listItem: U,
+  offlineViewMargin: W,
+  fabContainer: X,
+  buttonAppBar: Y,
+  fullScreen: Z,
+  fabIcon: P,
+  fabMenu: ee,
+  scrim: te,
+  scrimVisible: ne,
+  fabSpacer: ie
+}, _e = ({
+  actions: m,
+  triggerOpen: a = null,
+  iconOrientation: u = "vertical",
+  "data-testid": b,
+  isOnline: B = !0,
+  offlineViewProps: S,
+  hasActionIconForSingleAction: p = !0,
+  isSingleActionTriggeredOnClick: h = !0,
+  floatingButtonPaddingInsertTarget: l,
+  floatingButtonScreenOffsetType: _ = "buttonAppBar",
+  variant: v = "filled-primary"
+}) => {
+  const [g, c] = E(!1), { isDesktop: I } = K(), C = Q(), s = w(() => {
+    c(!1);
+  }, []), y = w(() => {
+    c((e) => !e);
+  }, []);
+  G(() => {
+    a !== null && c(!!a);
+  }, [a]);
+  const i = f(() => m.filter((e) => e.isHidden || e.isAllowed === !1 ? !1 : !(e.permissionConfiguration && !C(e.permissionConfiguration))), [m, C]), q = f(() => {
+    if (i.length === 1 && p) {
+      const e = i[0];
+      if (typeof e.leadingBlock == "string")
+        return e.leadingBlock;
+    }
+    return u === "vertical" ? "more_vert" : "more_horiz";
+  }, [i, u, p]), A = f(() => l ? document.querySelector(l) : null, [l]);
+  if (I || i.length === 0)
+    return null;
+  const V = /* @__PURE__ */ n(
+    j,
+    {
+      className: r(t.menu, t.fabMenu),
+      "data-testid": b ?? "fab-undefined",
+      open: g,
+      surfaceOnly: !0,
+      hoistToBody: !1,
+      onClose: s,
+      trigger: /* @__PURE__ */ n(
+        F,
+        {
+          className: r(t.icon, t.fabIcon),
+          variant: v,
+          iconSize: "xlarge",
+          "data-testid": "open-button",
+          icon: q,
+          onClick: () => {
+            i.length === 1 && h ? (i[0].onClick?.(), s()) : y();
+          },
+          "data-icon": q
+        }
+      ),
+      children: B ? /* @__PURE__ */ n(D, { "data-testid": "selection-list", children: i.map((e, o) => {
+        const {
+          closeOnClick: N,
+          dividerBefore: L,
+          dividerAfter: $,
+          permissionConfiguration: se,
+          isAllowed: oe,
+          isHidden: re,
+          ...x
+        } = e;
+        return /* @__PURE__ */ M(J, { children: [
+          L && o !== 0 && /* @__PURE__ */ n(k, {}),
+          /* @__PURE__ */ n(
+            H,
+            {
+              className: t.listItem,
+              ...x,
+              leadingBlockType: "icon",
+              "data-testid": e["data-testid"] ?? `fab-action-${o}`,
+              onClick: () => {
+                e?.onClick?.(), N !== !1 && s();
+              }
+            }
+          ),
+          $ && o !== i.length - 1 && /* @__PURE__ */ n(k, {})
+        ] }, `LI_${e.primaryText?.toString()}_${o}`);
+      }) }) : /* @__PURE__ */ n(
+        O,
+        {
+          size: "small",
+          variant: "filled",
+          className: t.offlineViewMargin,
+          ...S
+        }
+      )
+    },
+    `fab-${b ?? "undefined"}`
+  );
+  return /* @__PURE__ */ M(z, { children: [
+    d(
+      /* @__PURE__ */ n(
+        "div",
+        {
+          className: r(
+            t.fabContainer,
+            _ === "buttonAppBar" && t.buttonAppBar,
+            _ === "fullScreen" && t.fullScreen
+          ),
+          "data-testid": "fab-container",
+          children: V
+        }
+      ),
+      document.body
+    ),
+    d(
+      /* @__PURE__ */ n(
+        "div",
+        {
+          className: r(t.scrim, g && t.scrimVisible),
+          onClick: s,
+          "data-testid": "context-menu-scrim"
+        }
+      ),
+      document.body
+    ),
+    A && d(
+      /* @__PURE__ */ n("div", { className: t.fabSpacer, "data-testid": "fab-spacer" }),
+      A
+    )
+  ] });
+};
+export {
+  _e as FloatingActionButton
+};

package/dist/components/ModulePadding/ModulePadding.js

@@ -7,8 +7,8 @@ import "../../react-tooltip.min-Dkz5ltCC.js";
 import "../../orderBy-Ce85KqD6.js";
 import "../../index-CuHybtft.js";
 import "../SharedComponentsPermissionProvider/PermissionContext.js";
-import "react-dom";
 import "../../uniqueId-CJo-XRQb.js";
+import "react-dom";
 import "react-hook-form";
 import "../../get-CBFiuc3f.js";
 import "../../isArray-olhCpv2e.js";

package/dist/main.d.ts

@@ -14,6 +14,7 @@ export { EmptyView } from './components/EmptyView/EmptyView';
 export { ErrorBanner } from './components/ErrorBanner/ErrorBanner';
 export { Filter } from './components/Filter/Filter';
 export { FormattedNumberDisplay } from './components/FormattedNumberDisplay/FormattedNumberDisplay';
+export { FloatingActionButton } from './components/FloatingActionButton/FloatingActionButton';
 export { GenericTable } from './components/GenericTable/GenericTable';
 export { HashTabView } from './components/HashTabView/HashTabView';
 export { HeaderFilter } from './components/HeaderFilter/HeaderFilter';