@iris-ui-kit/react 0.1.0 → 0.2.0

package/dist/admin.cjs

@@ -266,11 +266,13 @@ function IrisNavMenu({
   expandedKeys,
   defaultExpandedKeys,
   collapsed = false,
+  orientation = "vertical",
   ariaLabel,
   onSelect,
   onExpandedKeysChange
 }) {
   const { t } = useI18n();
+  const horizontal = orientation === "horizontal";
   const trailOf = React13__namespace.useCallback(
     (key) => key ? core.branchTrail(items, key) : [],
     [items]
@@ -306,7 +308,7 @@ function IrisNavMenu({
     display: "flex",
     alignItems: "center",
     gap: 10,
-    width: "100%",
+    width: horizontal && opts.depth === 0 ? "auto" : "100%",
     boxSizing: "border-box",
     border: "none",
     borderRadius: "var(--iris-radius-md, 6px)",
@@ -318,7 +320,8 @@ function IrisNavMenu({
     textAlign: "start",
     cursor: opts.disabled ? "not-allowed" : "pointer",
     opacity: opts.disabled ? 0.5 : 1,
-    padding: collapsed ? 10 : `8px 10px 8px ${12 + opts.depth * 16}px`,
+    padding: collapsed ? 10 : "8px 10px",
+    paddingInlineStart: collapsed ? 10 : 12 + opts.depth * 16,
     justifyContent: collapsed ? "center" : "flex-start"
   });
   const iconNode = (node, size = 18) => node.icon ? /* @__PURE__ */ jsxRuntime.jsx(IrisIcon, { name: node.icon, size }) : null;
@@ -425,12 +428,48 @@ function IrisNavMenu({
       }
     );
     if (!branch || !open) {
-      return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-iris-nav-group": branch ? "" : void 0, children: row }, node.key);
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          "data-iris-nav-group": branch ? "" : void 0,
+          style: { position: horizontal && depth === 0 ? "relative" : void 0 },
+          children: row
+        },
+        node.key
+      );
     }
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-iris-nav-group": "", "data-open": "true", children: [
-      row,
-      /* @__PURE__ */ jsxRuntime.jsx("div", { "data-iris-nav-children": "", role: "group", children: (node.children ?? []).map((child) => renderItem(child, depth + 1)) })
-    ] }, node.key);
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        "data-iris-nav-group": "",
+        "data-open": "true",
+        style: { position: horizontal && depth === 0 ? "relative" : void 0 },
+        children: [
+          row,
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              "data-iris-nav-children": "",
+              role: "group",
+              style: horizontal && depth === 0 ? {
+                position: "absolute",
+                insetBlockStart: "calc(100% + 4px)",
+                insetInlineStart: 0,
+                zIndex: 60,
+                minWidth: 220,
+                padding: 6,
+                border: "1px solid var(--iris-border)",
+                borderRadius: "var(--iris-radius-md, 6px)",
+                background: "var(--iris-surface)",
+                boxShadow: "var(--iris-shadow-md)"
+              } : void 0,
+              children: (node.children ?? []).map((child) => renderItem(child, depth + 1))
+            }
+          )
+        ]
+      },
+      node.key
+    );
   };
   const onKeyDown = (e) => {
     const root = e.currentTarget;
@@ -478,9 +517,15 @@ function IrisNavMenu({
     {
       "data-iris-nav-menu": "",
       "data-collapsed": collapsed ? "true" : void 0,
+      "data-orientation": orientation,
       "aria-label": ariaLabel ?? t("admin.nav"),
       onKeyDown,
-      style: { display: "flex", flexDirection: "column", gap: 2 },
+      style: {
+        display: "flex",
+        flexDirection: horizontal ? "row" : "column",
+        alignItems: horizontal ? "center" : void 0,
+        gap: 2
+      },
       children: collapsed ? tree.map((node) => renderCollapsed(node)) : tree.map((node) => renderItem(node, 0))
     }
   );
@@ -611,6 +656,7 @@ function useTabsNav(nav) {
     closeRight: nav.closeRight,
     refresh: nav.refresh,
     setPinned: nav.setPinned,
+    move: nav.move,
     cacheKey: nav.cacheKey
   };
 }
@@ -1109,11 +1155,110 @@ var IrisDropdownSeparator = React13__namespace.forwardRef(
     );
   }
 );
+var SORTABLE_ITEM_ATTR = "data-iris-sortable-item";
+function IrisSortable({
+  items,
+  onReorder,
+  getKey = (_item, index) => String(index),
+  disabled = false,
+  orientation = "vertical",
+  style,
+  className,
+  children,
+  ...rest
+}) {
+  const containerRef = React13__namespace.useRef(null);
+  const ctrlRef = React13__namespace.useRef(null);
+  if (ctrlRef.current === null) ctrlRef.current = core.createSortable();
+  const ctrl = ctrlRef.current;
+  const [state, setState] = React13__namespace.useState({ activeId: null, overId: null });
+  React13__namespace.useEffect(() => ctrl.subscribe(setState), [ctrl]);
+  const dragging = state.activeId;
+  const indexByKey = (key) => Array.from(containerRef.current?.querySelectorAll(`[${SORTABLE_ITEM_ATTR}]`) ?? []).findIndex(
+    (el) => el.getAttribute(SORTABLE_ITEM_ATTR) === key
+  );
+  const onPointerDown = (e) => {
+    if (disabled) return;
+    const target = e.target.closest(`[${SORTABLE_ITEM_ATTR}]`);
+    if (!target) return;
+    const key = target.getAttribute(SORTABLE_ITEM_ATTR) ?? "";
+    if (!key) return;
+    ctrl.press(key, e.clientX, e.clientY);
+  };
+  const onPointerMove = (e) => {
+    if (!ctrl.getState().activeId) {
+      if (!ctrl.tryStart(e.clientX, e.clientY)) return;
+    }
+    const els = containerRef.current?.querySelectorAll(`[${SORTABLE_ITEM_ATTR}]`);
+    const rects = Array.from(els ?? []).map((el) => ({
+      id: el.getAttribute(SORTABLE_ITEM_ATTR) ?? "",
+      ...el.getBoundingClientRect()
+    }));
+    ctrl.moveOver({ x: e.clientX, y: e.clientY }, rects);
+  };
+  const onPointerUp = () => {
+    const result = ctrl.end();
+    if (result.activeId && result.overId && result.activeId !== result.overId) {
+      const from = indexByKey(result.activeId);
+      const to = indexByKey(result.overId);
+      if (from >= 0 && to >= 0 && from !== to) {
+        const next = [...items];
+        const [moved] = next.splice(from, 1);
+        next.splice(to, 0, moved);
+        onReorder(next);
+      }
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ...rest,
+      ref: containerRef,
+      "data-iris-sortable": "",
+      "data-state": dragging ? "dragging" : "idle",
+      className,
+      style: {
+        display: "flex",
+        flexDirection: orientation === "horizontal" ? "row" : "column",
+        gap: "var(--iris-gap-sm, 4px)",
+        opacity: disabled ? 0.6 : 1,
+        userSelect: dragging ? "none" : void 0,
+        ...style
+      },
+      onPointerDown,
+      onPointerMove,
+      onPointerUp,
+      onPointerLeave: onPointerUp,
+      children: React13__namespace.Children.map(children, (child, index) => {
+        if (!React13__namespace.isValidElement(child)) return child;
+        const key = getKey(items[index], index);
+        const isDragging = key === dragging;
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            "data-iris-sortable-item": key,
+            "data-iris-sortable-dragging": isDragging ? "" : void 0,
+            style: {
+              transition: isDragging ? "none" : "transform 150ms ease",
+              opacity: isDragging ? 0.4 : 1,
+              position: "relative",
+              zIndex: isDragging ? 100 : void 0
+            },
+            children: child
+          },
+          key
+        );
+      })
+    }
+  );
+}
 function IrisAdminTabs({
   nav,
   onChange,
   onClose,
-  onRefresh
+  onRefresh,
+  reorderable = true,
+  onReorder
 }) {
   const t = useTabsNav(nav);
   const { t: translate } = useI18n();
@@ -1139,6 +1284,10 @@ function IrisAdminTabs({
     nav.refresh(key);
     onRefresh?.(key);
   };
+  const reorder = (tabs) => {
+    tabs.forEach((tab, index) => nav.move(tab.key, index));
+    onReorder?.(tabs);
+  };
   const onKeyDown = (e) => {
     const tabs = t.tabs;
     const idx = tabs.findIndex((x) => x.key === t.activeKey);
@@ -1270,8 +1419,19 @@ function IrisAdminTabs({
             role: "tablist",
             "aria-label": translate("admin.openPages"),
             onKeyDown,
-            style: { display: "flex", alignItems: "center", gap: 6, overflowX: "auto", flex: 1 },
-            children: t.tabs.map((tab) => chip(tab))
+            style: { overflowX: "auto", flex: 1 },
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              IrisSortable,
+              {
+                items: t.tabs,
+                getKey: (tab) => tab.key,
+                onReorder: reorder,
+                disabled: !reorderable,
+                orientation: "horizontal",
+                style: { alignItems: "center", gap: 6, width: "max-content" },
+                children: t.tabs.map((tab) => chip(tab))
+              }
+            )
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsxs(IrisDropdown, { children: [
@@ -1298,6 +1458,8 @@ function IrisAdminTabs({
             /* @__PURE__ */ jsxRuntime.jsx(IrisDropdownItem, { onSelect: () => refresh(activeKey), children: translate("admin.refresh") }),
             /* @__PURE__ */ jsxRuntime.jsx(IrisDropdownItem, { onSelect: () => close(activeKey), children: translate("admin.close") }),
             /* @__PURE__ */ jsxRuntime.jsx(IrisDropdownSeparator, {}),
+            /* @__PURE__ */ jsxRuntime.jsx(IrisDropdownItem, { onSelect: () => nav.closeLeft(activeKey), children: translate("admin.closeLeft") }),
+            /* @__PURE__ */ jsxRuntime.jsx(IrisDropdownItem, { onSelect: () => nav.closeRight(activeKey), children: translate("admin.closeRight") }),
             /* @__PURE__ */ jsxRuntime.jsx(IrisDropdownItem, { onSelect: () => nav.closeOthers(activeKey), children: translate("admin.closeOthers") }),
             /* @__PURE__ */ jsxRuntime.jsx(IrisDropdownItem, { onSelect: () => nav.closeAll(), children: translate("admin.closeAll") })
           ] }) : /* @__PURE__ */ jsxRuntime.jsx(IrisDropdownItem, { disabled: true, children: "No active tab" }) })
@@ -1363,7 +1525,13 @@ function IrisAdminLayout({
   mode = "sidebar",
   appTitle = "Iris Admin",
   tabs,
+  showTabs = true,
   showBreadcrumb = true,
+  stickyHeader = true,
+  stickyTabs = true,
+  menuAlign = "start",
+  contentWidth = "fluid",
+  contentHeight = "viewport",
   sidebarWidth = 240,
   collapsedWidth = 64,
   logo,
@@ -1434,6 +1602,37 @@ function IrisAdminLayout({
     }
   );
   const renderLogo = (state) => typeof logo === "function" ? logo(state) : logo ?? defaultLogo(state);
+  const tabsBar = tabs && showTabs ? /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-iris-admin-tabs-region": "",
+      "data-sticky": stickyTabs ? "true" : void 0,
+      style: {
+        position: stickyTabs && !stickyHeader ? "sticky" : "relative",
+        top: 0,
+        zIndex: 49
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx(IrisAdminTabs, { nav: tabs })
+    }
+  ) : null;
+  const contentRegion = /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      "data-iris-admin-content": "",
+      "data-width": contentWidth,
+      style: {
+        boxSizing: "border-box",
+        width: "100%",
+        maxWidth: contentWidth === "centered" ? "72rem" : void 0,
+        marginInline: contentWidth === "centered" ? "auto" : void 0,
+        padding: 16
+      },
+      children: [
+        mode === "horizontal" && showBreadcrumb ? /* @__PURE__ */ jsxRuntime.jsx(IrisAdminBreadcrumb, { trail, onSelect: handleSelect }) : null,
+        renderContent()
+      ]
+    }
+  );
   const collapseToggle = /* @__PURE__ */ jsxRuntime.jsx(
     "button",
     {
@@ -1479,6 +1678,75 @@ function IrisAdminLayout({
       ]
     }
   );
+  if (mode === "horizontal") {
+    const justifyContent = menuAlign === "center" ? "center" : menuAlign === "end" ? "flex-end" : "flex-start";
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        "data-iris-admin-layout": "",
+        "data-mode": "horizontal",
+        style: {
+          height: contentHeight === "viewport" ? "100vh" : "auto",
+          minHeight: "100vh"
+        },
+        children: [
+          tabs ? /* @__PURE__ */ jsxRuntime.jsx(TabsSync, { nav: tabs, activeKey: currentActive, onActivate: syncFromTab }) : null,
+          /* @__PURE__ */ jsxRuntime.jsx(
+            IrisHeaderLayout,
+            {
+              sticky: stickyHeader,
+              footer,
+              header: /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-iris-admin-header": "", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  "div",
+                  {
+                    "data-iris-admin-headerbar": "",
+                    style: {
+                      display: "flex",
+                      alignItems: "center",
+                      gap: 12,
+                      minHeight: 52,
+                      padding: "0 16px",
+                      background: "var(--iris-background)"
+                    },
+                    children: [
+                      renderLogo({ collapsed: false }),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "div",
+                        {
+                          "data-iris-admin-topnav": "",
+                          style: { display: "flex", flex: 1, minWidth: 0, justifyContent },
+                          children: /* @__PURE__ */ jsxRuntime.jsx(
+                            IrisNavMenu,
+                            {
+                              items: menus,
+                              activeKey: currentActive,
+                              orientation: "horizontal",
+                              onSelect: handleSelect
+                            }
+                          )
+                        }
+                      ),
+                      toolbar ? /* @__PURE__ */ jsxRuntime.jsx(
+                        "div",
+                        {
+                          "data-iris-admin-toolbar": "",
+                          style: { display: "flex", alignItems: "center", gap: 8 },
+                          children: toolbar
+                        }
+                      ) : null
+                    ]
+                  }
+                ),
+                tabsBar
+              ] }),
+              children: contentRegion
+            }
+          )
+        ]
+      }
+    );
+  }
   return /* @__PURE__ */ jsxRuntime.jsxs(
     IrisSidebarLayout,
     {
@@ -1519,20 +1787,38 @@ function IrisAdminLayout({
         /* @__PURE__ */ jsxRuntime.jsx(
           IrisHeaderLayout,
           {
-            sticky: true,
+            sticky: stickyHeader,
             header: /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-iris-admin-header": "", children: [
               headerBar,
-              tabs ? /* @__PURE__ */ jsxRuntime.jsx(IrisAdminTabs, { nav: tabs }) : null
+              tabsBar
             ] }),
             footer,
-            children: /* @__PURE__ */ jsxRuntime.jsx("div", { "data-iris-admin-content": "", style: { padding: 16 }, children: renderContent() })
+            children: contentRegion
           }
         )
       ]
     }
   );
 }
+function useAdminPreferences(preferences, hydrate = true) {
+  const state = useStore(preferences.store);
+  React13__namespace.useEffect(() => {
+    if (hydrate) void preferences.hydrate();
+  }, [hydrate, preferences]);
+  return {
+    state,
+    set: preferences.set,
+    patch: preferences.patch,
+    reset: preferences.reset,
+    hydrate: preferences.hydrate,
+    flush: preferences.flush
+  };
+}
 
+Object.defineProperty(exports, "createAdminPreferences", {
+  enumerable: true,
+  get: function () { return core.createAdminPreferences; }
+});
 Object.defineProperty(exports, "createTabsNav", {
   enumerable: true,
   get: function () { return core.createTabsNav; }
@@ -1565,6 +1851,10 @@ Object.defineProperty(exports, "isClosable", {
   enumerable: true,
   get: function () { return core.isClosable; }
 });
+Object.defineProperty(exports, "localStorageAdminPreferencesStorage", {
+  enumerable: true,
+  get: function () { return core.localStorageAdminPreferencesStorage; }
+});
 Object.defineProperty(exports, "nodeAllowsRoles", {
   enumerable: true,
   get: function () { return core.nodeAllowsRoles; }
@@ -1577,6 +1867,7 @@ exports.IrisAdminBreadcrumb = IrisAdminBreadcrumb;
 exports.IrisAdminLayout = IrisAdminLayout;
 exports.IrisAdminTabs = IrisAdminTabs;
 exports.IrisNavMenu = IrisNavMenu;
+exports.useAdminPreferences = useAdminPreferences;
 exports.useAdminShell = useAdminShell;
 exports.useTabsNav = useTabsNav;
 //# sourceMappingURL=admin.cjs.map