@cypress-design/react-docmenu 0.5.4 → 0.6.0

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.
package/dist/index.umd.js CHANGED
@@ -183,10 +183,11 @@ const classes = {
183
183
  };
184
184
 
185
185
  var DocLink = React__namespace.forwardRef(function (_a, ref) {
186
- var _b = _a.item, label = _b.label, itemRest = __rest$1(_b, ["label"]), depth = _a.depth, markerIsMoving = _a.markerIsMoving, context = _a.context, onActive = _a.onActive, LinkComponent = _a.LinkComponent;
186
+ var item = _a.item, depth = _a.depth, markerIsMoving = _a.markerIsMoving, context = _a.context, onActive = _a.onActive, LinkComponent = _a.LinkComponent;
187
187
  var activeLIRef = React__namespace.useRef(null);
188
- var collapsible = context.collapsible, activePath = context.activePath;
189
- var active = itemRest.href === activePath;
188
+ var active = React__namespace.useMemo(function () { return item.href === context.activePath; }, [item.href, context.activePath]);
189
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
190
+ item.label; var itemRest = __rest$1(item, ["label"]);
190
191
  var setActiveMarkerPosition = function () {
191
192
  var _a;
192
193
  if (active) {
@@ -214,11 +215,12 @@ var DocLink = React__namespace.forwardRef(function (_a, ref) {
214
215
  } }),
215
216
  depth >= 0 ? (React__namespace.createElement("div", { className: clsx('left-[6.5px] absolute top-[4px] bottom-[4px] w-[4px] z-10 rounded-full', {
216
217
  hidden: !markerIsMoving || !active,
217
- 'group-hover:block bg-gray-300': !active && collapsible,
218
+ 'group-hover:block bg-gray-300': !active && context.collapsible,
218
219
  'bg-indigo-500 dark:bg-indigo-400': active && markerIsMoving,
219
220
  }) })) : null,
220
- label)));
221
+ item.label)));
221
222
  });
223
+ DocLink.displayName = 'DocMenuDocLink';
222
224
 
223
225
  var hasActiveItemRecursively = function (items, localActivePath) {
224
226
  return items.some(function (item) {
@@ -238,6 +240,11 @@ var DocGroup = React__namespace.forwardRef(function (_a, ref) {
238
240
  var _e = React__namespace.useState(!group.collapsed), open = _e[0], setOpen = _e[1];
239
241
  var _f = React__namespace.useState(), markerIsMovingTimeout = _f[0], setMarkerIsMovingTimeout = _f[1];
240
242
  var $groupElements = React__namespace.useRef(null);
243
+ React__namespace.useEffect(function () {
244
+ if (hasActiveItemRecursivelyMemo && !open) {
245
+ setOpen(true);
246
+ }
247
+ }, [hasActiveItemRecursivelyMemo, activePath, open]);
241
248
  var toggleMenu = function (localOpen) {
242
249
  if (!collapsible || markerIsMoving)
243
250
  return;
@@ -327,6 +334,7 @@ var DocGroup = React__namespace.forwardRef(function (_a, ref) {
327
334
  open && collapsible && depth === 0 ? (React__namespace.createElement("div", { className: classes.openListBorderLeft })) : null,
328
335
  React__namespace.createElement(DocGroupElements, { ref: $groupElements, className: "overflow-hidden", items: group.items, depth: depth, context: context, markerIsMoving: markerIsMoving, onActivePosition: setActivePosition, updateMarkerPosition: onUpdateMarkerPosition, LinkComponent: LinkComponent }))));
329
336
  });
337
+ DocGroup.displayName = 'DocMenuDocGroup';
330
338
  var DocGroupElements = React__namespace.forwardRef(function (_a, ref) {
331
339
  var items = _a.items, _b = _a.depth, depth = _b === void 0 ? 0 : _b, onActivePosition = _a.onActivePosition, updateMarkerPosition = _a.updateMarkerPosition, markerIsMoving = _a.markerIsMoving, LinkComponent = _a.LinkComponent, className = _a.className, context = _a.context, rest = __rest$1(_a, ["items", "depth", "onActivePosition", "updateMarkerPosition", "markerIsMoving", "LinkComponent", "className", "context"]);
332
340
  var $groups = React__namespace.useRef([]);
@@ -371,6 +379,7 @@ var DocGroupElements = React__namespace.forwardRef(function (_a, ref) {
371
379
  }, LinkComponent: LinkComponent }));
372
380
  })));
373
381
  });
382
+ DocGroupElements.displayName = 'DocMenuDocGroupElements';
374
383
 
375
384
  var DocMenu = function (_a) {
376
385
  var items = _a.items, _b = _a.activePath, activePath = _b === void 0 ? '<unknown>' : _b, _c = _a.collapsible, collapsible = _c === void 0 ? true : _c, _d = _a.LinkComponent, LinkComponent = _d === void 0 ? 'a' : _d, rest = __rest$1(_a, ["items", "activePath", "collapsible", "LinkComponent"]);