@manifest-editor/components 1.4.1 → 1.4.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/index.cjs +37 -66
  2. package/dist/index.d.cts +6 -1
  3. package/dist/index.d.ts +6 -1
  4. package/dist/index.js +38 -82
  5. package/package.json +2 -2
package/dist/index.cjs CHANGED
@@ -1107,26 +1107,18 @@ function ManifestOverviewEmptyState({ onCreate, canCreate }) {
1107
1107
  }
1108
1108
 
1109
1109
  // src/SidebarTabs.tsx
1110
+ var import_collections = require("@react-aria/collections");
1110
1111
  var import_react6 = require("react");
1111
1112
  var import_react_aria_components8 = require("react-aria-components");
1112
- var import_collections = require("@react-aria/collections");
1113
1113
  var import_react_dom2 = require("react-dom");
1114
1114
  var import_jsx_runtime35 = require("react/jsx-runtime");
1115
- function SidebarTabs({
1116
- menu,
1117
- menuId,
1118
- selectedKey,
1119
- onSelectionChange
1120
- }) {
1115
+ function SidebarTabs({ menu, menuId, selectedKey, onSelectionChange }) {
1121
1116
  const ref = (0, import_react6.useRef)(null);
1122
1117
  const [hidden, setHidden] = (0, import_react6.useState)(0);
1123
1118
  const [hiddenMenu, setHiddenMenu] = (0, import_react6.useState)(null);
1124
1119
  const widths = (0, import_react6.useRef)([]);
1125
1120
  const itemsRef = (0, import_react6.useRef)([]);
1126
- const selectedIndex = (0, import_react6.useMemo)(
1127
- () => menu.findIndex((item) => item.id === selectedKey),
1128
- [menu, selectedKey]
1129
- );
1121
+ const selectedIndex = (0, import_react6.useMemo)(() => menu.findIndex((item) => item.id === selectedKey), [menu, selectedKey]);
1130
1122
  (0, import_react6.useLayoutEffect)(() => {
1131
1123
  const cb = () => {
1132
1124
  if (widths.current.length === 0) {
@@ -1169,43 +1161,28 @@ function SidebarTabs({
1169
1161
  onSelectionChange,
1170
1162
  children: [
1171
1163
  /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex items-center w-full tab-shadow", children: [
1172
- /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
1173
- import_react_aria_components8.TabList,
1174
- {
1175
- ref,
1176
- className: "flex-1 overflow-hidden w-full flex text-sm whitespace-nowrap",
1177
- children: menu.map((item, idx) => {
1178
- const isHidden = hidden >= menu.length - idx;
1179
- return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
1180
- import_react_aria_components8.Tab,
1181
- {
1182
- ref: (el) => itemsRef.current[idx] = el,
1183
- id: item.id,
1184
- className: (state) => cn(
1185
- //
1186
- "border-b-2 px-2 py-1 text-sm text-gray-400 select-none hover:text-black focus:ring-0 focus:outline-none",
1187
- state.isSelected && "border-me-primary-500 text-black",
1188
- state.isFocusVisible && "ring-0 bg-me-gray-100",
1189
- isHidden && "hidden"
1190
- ),
1191
- children: item.label
1192
- },
1193
- item.id
1194
- );
1195
- })
1196
- }
1197
- ),
1164
+ /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_react_aria_components8.TabList, { ref, className: "flex-1 overflow-hidden w-full flex text-sm whitespace-nowrap", children: menu.map((item, idx) => {
1165
+ const isHidden = hidden >= menu.length - idx;
1166
+ return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
1167
+ import_react_aria_components8.Tab,
1168
+ {
1169
+ ref: (el) => itemsRef.current[idx] = el,
1170
+ id: item.id,
1171
+ className: (state) => cn(
1172
+ //
1173
+ "border-b-2 px-2 py-1 text-sm text-gray-400 select-none hover:text-black focus:ring-0 focus:outline-none",
1174
+ state.isSelected && "border-me-primary-500 text-black",
1175
+ state.isFocusVisible && "ring-0 bg-me-gray-100",
1176
+ isHidden && "hidden"
1177
+ ),
1178
+ children: item.label
1179
+ },
1180
+ item.id
1181
+ );
1182
+ }) }),
1198
1183
  /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { ref: setHiddenMenu, id: "hidden-menu" })
1199
1184
  ] }),
1200
- menu.map((item) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
1201
- import_react_aria_components8.TabPanel,
1202
- {
1203
- id: item.id,
1204
- className: "flex-1 overflow-y-auto h-full",
1205
- children: item.renderComponent
1206
- },
1207
- item.id
1208
- ))
1185
+ menu.map((item) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_react_aria_components8.TabPanel, { id: item.id, className: "flex-1 overflow-y-auto h-full", children: item.renderComponent }, item.id))
1209
1186
  ]
1210
1187
  },
1211
1188
  menuId
@@ -1237,26 +1214,20 @@ var MoreMenu = (0, import_collections.createHideableComponent)(({ selectedIndex,
1237
1214
  children: "MORE"
1238
1215
  }
1239
1216
  ),
1240
- /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_react_aria_components8.Popover, { children: menuHidden.length ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
1241
- import_react_aria_components8.Menu,
1242
- {
1243
- className: "bg-white rounded shadow-lg flex flex-col gap-0.5 p-0.5 min-w-28",
1244
- children: menuHidden.map((item) => {
1245
- return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
1246
- import_react_aria_components8.MenuItem,
1247
- {
1248
- className: (state) => cn(
1249
- "hover:bg-me-gray-100 p-1 rounded-sm text-sm",
1250
- selectedKey === item.id && "ring ring-me-primary-500"
1251
- ),
1252
- onAction: () => onSelectionChange?.(item.id),
1253
- children: item.label
1254
- },
1255
- item.id
1256
- );
1257
- })
1258
- }
1259
- ) : null })
1217
+ /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_react_aria_components8.Popover, { children: menuHidden.length ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_react_aria_components8.Menu, { className: "bg-white rounded shadow-lg flex flex-col gap-0.5 p-0.5 min-w-28", children: menuHidden.map((item) => {
1218
+ return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
1219
+ import_react_aria_components8.MenuItem,
1220
+ {
1221
+ className: (state) => cn(
1222
+ "hover:bg-me-gray-100 p-1 rounded-sm text-sm",
1223
+ selectedKey === item.id && "ring ring-me-primary-500"
1224
+ ),
1225
+ onAction: () => onSelectionChange?.(item.id),
1226
+ children: item.label
1227
+ },
1228
+ item.id
1229
+ );
1230
+ }) }) : null })
1260
1231
  ] });
1261
1232
  });
1262
1233
 
package/dist/index.d.cts CHANGED
@@ -203,8 +203,13 @@ interface SidebarTabsProps {
203
203
  }>;
204
204
  selectedKey?: string;
205
205
  onSelectionChange?: (key: string) => void;
206
+ isNested?: boolean;
207
+ rootResource?: {
208
+ id: string;
209
+ type: string;
210
+ };
206
211
  }
207
- declare function SidebarTabs({ menu, menuId, selectedKey, onSelectionChange, }: SidebarTabsProps): react_jsx_runtime.JSX.Element;
212
+ declare function SidebarTabs({ menu, menuId, selectedKey, onSelectionChange }: SidebarTabsProps): react_jsx_runtime.JSX.Element;
208
213
 
209
214
  declare function MetadataContainer({ className, label, children, ...props }: {
210
215
  label: InternationalString | null;
package/dist/index.d.ts CHANGED
@@ -203,8 +203,13 @@ interface SidebarTabsProps {
203
203
  }>;
204
204
  selectedKey?: string;
205
205
  onSelectionChange?: (key: string) => void;
206
+ isNested?: boolean;
207
+ rootResource?: {
208
+ id: string;
209
+ type: string;
210
+ };
206
211
  }
207
- declare function SidebarTabs({ menu, menuId, selectedKey, onSelectionChange, }: SidebarTabsProps): react_jsx_runtime.JSX.Element;
212
+ declare function SidebarTabs({ menu, menuId, selectedKey, onSelectionChange }: SidebarTabsProps): react_jsx_runtime.JSX.Element;
208
213
 
209
214
  declare function MetadataContainer({ className, label, children, ...props }: {
210
215
  label: InternationalString | null;
package/dist/index.js CHANGED
@@ -1030,41 +1030,18 @@ function ManifestOverviewEmptyState({ onCreate, canCreate }) {
1030
1030
  }
1031
1031
 
1032
1032
  // src/SidebarTabs.tsx
1033
- import {
1034
- useLayoutEffect as useLayoutEffect3,
1035
- useMemo as useMemo2,
1036
- useRef as useRef3,
1037
- useState as useState3
1038
- } from "react";
1039
- import {
1040
- Button as Button6,
1041
- Menu,
1042
- MenuItem,
1043
- MenuTrigger,
1044
- Popover,
1045
- Tab as Tab2,
1046
- TabList as TabList2,
1047
- TabPanel as TabPanel2,
1048
- Tabs as Tabs2
1049
- } from "react-aria-components";
1050
1033
  import { createHideableComponent } from "@react-aria/collections";
1034
+ import { useLayoutEffect as useLayoutEffect3, useMemo as useMemo2, useRef as useRef3, useState as useState3 } from "react";
1035
+ import { Button as Button6, Menu, MenuItem, MenuTrigger, Popover, Tab as Tab2, TabList as TabList2, TabPanel as TabPanel2, Tabs as Tabs2 } from "react-aria-components";
1051
1036
  import { createPortal as createPortal2 } from "react-dom";
1052
1037
  import { Fragment as Fragment3, jsx as jsx34, jsxs as jsxs23 } from "react/jsx-runtime";
1053
- function SidebarTabs({
1054
- menu,
1055
- menuId,
1056
- selectedKey,
1057
- onSelectionChange
1058
- }) {
1038
+ function SidebarTabs({ menu, menuId, selectedKey, onSelectionChange }) {
1059
1039
  const ref = useRef3(null);
1060
1040
  const [hidden, setHidden] = useState3(0);
1061
1041
  const [hiddenMenu, setHiddenMenu] = useState3(null);
1062
1042
  const widths = useRef3([]);
1063
1043
  const itemsRef = useRef3([]);
1064
- const selectedIndex = useMemo2(
1065
- () => menu.findIndex((item) => item.id === selectedKey),
1066
- [menu, selectedKey]
1067
- );
1044
+ const selectedIndex = useMemo2(() => menu.findIndex((item) => item.id === selectedKey), [menu, selectedKey]);
1068
1045
  useLayoutEffect3(() => {
1069
1046
  const cb = () => {
1070
1047
  if (widths.current.length === 0) {
@@ -1107,43 +1084,28 @@ function SidebarTabs({
1107
1084
  onSelectionChange,
1108
1085
  children: [
1109
1086
  /* @__PURE__ */ jsxs23("div", { className: "flex items-center w-full tab-shadow", children: [
1110
- /* @__PURE__ */ jsx34(
1111
- TabList2,
1112
- {
1113
- ref,
1114
- className: "flex-1 overflow-hidden w-full flex text-sm whitespace-nowrap",
1115
- children: menu.map((item, idx) => {
1116
- const isHidden = hidden >= menu.length - idx;
1117
- return /* @__PURE__ */ jsx34(
1118
- Tab2,
1119
- {
1120
- ref: (el) => itemsRef.current[idx] = el,
1121
- id: item.id,
1122
- className: (state) => cn(
1123
- //
1124
- "border-b-2 px-2 py-1 text-sm text-gray-400 select-none hover:text-black focus:ring-0 focus:outline-none",
1125
- state.isSelected && "border-me-primary-500 text-black",
1126
- state.isFocusVisible && "ring-0 bg-me-gray-100",
1127
- isHidden && "hidden"
1128
- ),
1129
- children: item.label
1130
- },
1131
- item.id
1132
- );
1133
- })
1134
- }
1135
- ),
1087
+ /* @__PURE__ */ jsx34(TabList2, { ref, className: "flex-1 overflow-hidden w-full flex text-sm whitespace-nowrap", children: menu.map((item, idx) => {
1088
+ const isHidden = hidden >= menu.length - idx;
1089
+ return /* @__PURE__ */ jsx34(
1090
+ Tab2,
1091
+ {
1092
+ ref: (el) => itemsRef.current[idx] = el,
1093
+ id: item.id,
1094
+ className: (state) => cn(
1095
+ //
1096
+ "border-b-2 px-2 py-1 text-sm text-gray-400 select-none hover:text-black focus:ring-0 focus:outline-none",
1097
+ state.isSelected && "border-me-primary-500 text-black",
1098
+ state.isFocusVisible && "ring-0 bg-me-gray-100",
1099
+ isHidden && "hidden"
1100
+ ),
1101
+ children: item.label
1102
+ },
1103
+ item.id
1104
+ );
1105
+ }) }),
1136
1106
  /* @__PURE__ */ jsx34("div", { ref: setHiddenMenu, id: "hidden-menu" })
1137
1107
  ] }),
1138
- menu.map((item) => /* @__PURE__ */ jsx34(
1139
- TabPanel2,
1140
- {
1141
- id: item.id,
1142
- className: "flex-1 overflow-y-auto h-full",
1143
- children: item.renderComponent
1144
- },
1145
- item.id
1146
- ))
1108
+ menu.map((item) => /* @__PURE__ */ jsx34(TabPanel2, { id: item.id, className: "flex-1 overflow-y-auto h-full", children: item.renderComponent }, item.id))
1147
1109
  ]
1148
1110
  },
1149
1111
  menuId
@@ -1175,26 +1137,20 @@ var MoreMenu = createHideableComponent(({ selectedIndex, hidden, menuHidden, sel
1175
1137
  children: "MORE"
1176
1138
  }
1177
1139
  ),
1178
- /* @__PURE__ */ jsx34(Popover, { children: menuHidden.length ? /* @__PURE__ */ jsx34(
1179
- Menu,
1180
- {
1181
- className: "bg-white rounded shadow-lg flex flex-col gap-0.5 p-0.5 min-w-28",
1182
- children: menuHidden.map((item) => {
1183
- return /* @__PURE__ */ jsx34(
1184
- MenuItem,
1185
- {
1186
- className: (state) => cn(
1187
- "hover:bg-me-gray-100 p-1 rounded-sm text-sm",
1188
- selectedKey === item.id && "ring ring-me-primary-500"
1189
- ),
1190
- onAction: () => onSelectionChange?.(item.id),
1191
- children: item.label
1192
- },
1193
- item.id
1194
- );
1195
- })
1196
- }
1197
- ) : null })
1140
+ /* @__PURE__ */ jsx34(Popover, { children: menuHidden.length ? /* @__PURE__ */ jsx34(Menu, { className: "bg-white rounded shadow-lg flex flex-col gap-0.5 p-0.5 min-w-28", children: menuHidden.map((item) => {
1141
+ return /* @__PURE__ */ jsx34(
1142
+ MenuItem,
1143
+ {
1144
+ className: (state) => cn(
1145
+ "hover:bg-me-gray-100 p-1 rounded-sm text-sm",
1146
+ selectedKey === item.id && "ring ring-me-primary-500"
1147
+ ),
1148
+ onAction: () => onSelectionChange?.(item.id),
1149
+ children: item.label
1150
+ },
1151
+ item.id
1152
+ );
1153
+ }) }) : null })
1198
1154
  ] });
1199
1155
  });
1200
1156
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@manifest-editor/components",
3
- "version": "1.4.1",
3
+ "version": "1.4.2",
4
4
  "type": "module",
5
5
  "bugs": "https://github.com/digirati-co-uk/iiif-manifest-editor/issues",
6
6
  "repository": {
@@ -88,5 +88,5 @@
88
88
  "access": "public"
89
89
  },
90
90
  "globalName": "ClientVault",
91
- "gitHead": "7e8791689668c2428ecf0d617f69038d0fd2e758"
91
+ "gitHead": "7da90acfb83545d53d34ba95b86c8d5492005e81"
92
92
  }