@manifest-editor/components 1.1.0 → 1.2.0

package/dist/index.cjs

@@ -994,6 +994,7 @@ function ManifestOverviewEmptyState({ onCreate, canCreate }) {
 // src/SidebarTabs.tsx
 var import_react6 = require("react");
 var import_react_aria_components7 = require("react-aria-components");
+var import_collections = require("@react-aria/collections");
 var import_jsx_runtime33 = require("react/jsx-runtime");
 function SidebarTabs({ menu, menuId, selectedKey, onSelectionChange }) {
   const ref = (0, import_react6.useRef)(null);
@@ -1033,6 +1034,7 @@ function SidebarTabs({ menu, menuId, selectedKey, onSelectionChange }) {
       clearInterval(interval);
     };
   }, []);
+  const menuHidden = menu.filter((item, idx) => hidden >= menu.length - idx);
   return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
     import_react_aria_components7.Tabs,
     {
@@ -1060,34 +1062,16 @@ function SidebarTabs({ menu, menuId, selectedKey, onSelectionChange }) {
               item.id
             );
           }) }),
-          hidden > 0 && /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_react_aria_components7.MenuTrigger, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-              import_react_aria_components7.Button,
-              {
-                className: cn(
-                  "border-none rounded bg-gray-100 px-1.5 py-1 mr-2 mb-1 text-me-primary-500 semibold uppercase text-[10px]",
-                  selectedIndex > hidden && "bg-me-primary-500 text-white rounded"
-                ),
-                children: "MORE"
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react_aria_components7.Popover, { children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react_aria_components7.Menu, { className: "bg-white rounded shadow-lg flex flex-col gap-0.5 p-0.5 min-w-28", children: menu.map((item, idx) => {
-              if (idx < menu.length - hidden)
-                return null;
-              return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-                import_react_aria_components7.MenuItem,
-                {
-                  className: (state) => cn(
-                    "hover:bg-me-gray-100 p-1 rounded-sm text-sm",
-                    selectedKey === item.id && "ring ring-me-primary-500"
-                  ),
-                  onAction: () => onSelectionChange?.(item.id),
-                  children: item.label
-                },
-                item.id
-              );
-            }) }) })
-          ] })
+          hidden > 0 && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+            MoreMenu,
+            {
+              hidden,
+              menuHidden,
+              selectedIndex,
+              selectedKey,
+              onSelectionChange
+            }
+          )
         ] }),
         menu.map((item) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react_aria_components7.TabPanel, { id: item.id, className: "flex-1 overflow-y-auto h-full", children: item.renderComponent }, item.id))
       ]
@@ -1095,6 +1079,34 @@ function SidebarTabs({ menu, menuId, selectedKey, onSelectionChange }) {
     menuId
   );
 }
+var MoreMenu = (0, import_collections.createHideableComponent)(({ selectedIndex, hidden, menuHidden, selectedKey, onSelectionChange }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_react_aria_components7.MenuTrigger, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+      import_react_aria_components7.Button,
+      {
+        className: cn(
+          "border-none rounded bg-gray-100 px-1.5 py-1 mr-2 mb-1 text-me-primary-500 semibold uppercase text-[10px]",
+          selectedIndex > hidden && "bg-me-primary-500 text-white rounded"
+        ),
+        children: "MORE"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react_aria_components7.Popover, { children: menuHidden.length ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react_aria_components7.Menu, { className: "bg-white rounded shadow-lg flex flex-col gap-0.5 p-0.5 min-w-28", children: menuHidden.map((item, idx) => {
+      return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+        import_react_aria_components7.MenuItem,
+        {
+          className: (state) => cn(
+            "hover:bg-me-gray-100 p-1 rounded-sm text-sm",
+            selectedKey === item.id && "ring ring-me-primary-500"
+          ),
+          onAction: () => onSelectionChange?.(item.id),
+          children: item.label
+        },
+        item.id
+      );
+    }) }, menuHidden.length) : null })
+  ] });
+});
 
 // src/MetadataContainer.tsx
 var import_react_iiif_vault5 = require("react-iiif-vault");

package/dist/index.css

@@ -590,6 +590,9 @@
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(184 76 116 / var(--tw-ring-opacity));
 }
+.filter {
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
 .transition-all {
   transition-property: all;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

package/dist/index.js

@@ -932,6 +932,7 @@ function ManifestOverviewEmptyState({ onCreate, canCreate }) {
 // src/SidebarTabs.tsx
 import { useLayoutEffect as useLayoutEffect3, useMemo as useMemo2, useRef as useRef3, useState as useState3 } from "react";
 import { Button as Button5, Menu, MenuItem, MenuTrigger, Popover, Tab as Tab2, TabList as TabList2, TabPanel as TabPanel2, Tabs as Tabs2 } from "react-aria-components";
+import { createHideableComponent } from "@react-aria/collections";
 import { jsx as jsx32, jsxs as jsxs22 } from "react/jsx-runtime";
 function SidebarTabs({ menu, menuId, selectedKey, onSelectionChange }) {
   const ref = useRef3(null);
@@ -971,6 +972,7 @@ function SidebarTabs({ menu, menuId, selectedKey, onSelectionChange }) {
       clearInterval(interval);
     };
   }, []);
+  const menuHidden = menu.filter((item, idx) => hidden >= menu.length - idx);
   return /* @__PURE__ */ jsxs22(
     Tabs2,
     {
@@ -998,34 +1000,16 @@ function SidebarTabs({ menu, menuId, selectedKey, onSelectionChange }) {
               item.id
             );
           }) }),
-          hidden > 0 && /* @__PURE__ */ jsxs22(MenuTrigger, { children: [
-            /* @__PURE__ */ jsx32(
-              Button5,
-              {
-                className: cn(
-                  "border-none rounded bg-gray-100 px-1.5 py-1 mr-2 mb-1 text-me-primary-500 semibold uppercase text-[10px]",
-                  selectedIndex > hidden && "bg-me-primary-500 text-white rounded"
-                ),
-                children: "MORE"
-              }
-            ),
-            /* @__PURE__ */ jsx32(Popover, { children: /* @__PURE__ */ jsx32(Menu, { className: "bg-white rounded shadow-lg flex flex-col gap-0.5 p-0.5 min-w-28", children: menu.map((item, idx) => {
-              if (idx < menu.length - hidden)
-                return null;
-              return /* @__PURE__ */ jsx32(
-                MenuItem,
-                {
-                  className: (state) => cn(
-                    "hover:bg-me-gray-100 p-1 rounded-sm text-sm",
-                    selectedKey === item.id && "ring ring-me-primary-500"
-                  ),
-                  onAction: () => onSelectionChange?.(item.id),
-                  children: item.label
-                },
-                item.id
-              );
-            }) }) })
-          ] })
+          hidden > 0 && /* @__PURE__ */ jsx32(
+            MoreMenu,
+            {
+              hidden,
+              menuHidden,
+              selectedIndex,
+              selectedKey,
+              onSelectionChange
+            }
+          )
         ] }),
         menu.map((item) => /* @__PURE__ */ jsx32(TabPanel2, { id: item.id, className: "flex-1 overflow-y-auto h-full", children: item.renderComponent }, item.id))
       ]
@@ -1033,6 +1017,34 @@ function SidebarTabs({ menu, menuId, selectedKey, onSelectionChange }) {
     menuId
   );
 }
+var MoreMenu = createHideableComponent(({ selectedIndex, hidden, menuHidden, selectedKey, onSelectionChange }) => {
+  return /* @__PURE__ */ jsxs22(MenuTrigger, { children: [
+    /* @__PURE__ */ jsx32(
+      Button5,
+      {
+        className: cn(
+          "border-none rounded bg-gray-100 px-1.5 py-1 mr-2 mb-1 text-me-primary-500 semibold uppercase text-[10px]",
+          selectedIndex > hidden && "bg-me-primary-500 text-white rounded"
+        ),
+        children: "MORE"
+      }
+    ),
+    /* @__PURE__ */ jsx32(Popover, { children: menuHidden.length ? /* @__PURE__ */ jsx32(Menu, { className: "bg-white rounded shadow-lg flex flex-col gap-0.5 p-0.5 min-w-28", children: menuHidden.map((item, idx) => {
+      return /* @__PURE__ */ jsx32(
+        MenuItem,
+        {
+          className: (state) => cn(
+            "hover:bg-me-gray-100 p-1 rounded-sm text-sm",
+            selectedKey === item.id && "ring ring-me-primary-500"
+          ),
+          onAction: () => onSelectionChange?.(item.id),
+          children: item.label
+        },
+        item.id
+      );
+    }) }, menuHidden.length) : null })
+  ] });
+});
 
 // src/MetadataContainer.tsx
 import { LocaleString as LocaleString3 } from "react-iiif-vault";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@manifest-editor/components",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "type": "module",
   "bugs": "https://github.com/digirati-co-uk/iiif-manifest-editor/issues",
   "repository": {
@@ -49,12 +49,14 @@
     "@headlessui/react": "^2.0.3",
     "@iiif/helpers": "^1.2.12",
     "@iiif/presentation-3": "^2.2.3",
+    "@react-aria/collections": "3.0.0-alpha.4",
     "clsx": "^2.1.1",
     "polygon-editor": "^0.0.4",
     "react": "^18.3.1",
-    "react-aria": "^3.33.1",
-    "react-aria-components": "^1.2.1",
+    "react-aria": "^3.34.3",
+    "react-aria-components": "^1.3.3",
     "react-dom": "^18.3.1",
+    "react-error-boundary": "^4.0.13",
     "react-iiif-vault": "^1.2.1",
     "react-lazy-load-image-component": "^1.6.0",
     "tailwind-merge": "^2.3.0"
@@ -76,5 +78,5 @@
     "access": "public"
   },
   "globalName": "ClientVault",
-  "gitHead": "64dd0a345330544398ac49a35484f45171488b4e"
+  "gitHead": "d1de1d181a41f39cd2f01839348fa2da187331cb"
 }