design-zystem 1.0.309 → 1.0.310

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.d.mts +2 -1
  2. package/dist/index.d.ts +2 -1
  3. package/dist/index.js +12 -5
  4. package/dist/index.mjs +12 -5
  5. package/package.json +1 -1
package/dist/index.d.mts CHANGED
@@ -982,9 +982,10 @@ interface PopoverProps {
982
982
  anchorRef?: RefObject<HTMLElement>;
983
983
  offsetY?: number;
984
984
  align?: 'left' | 'right';
985
+ direction?: 'vertical' | 'horizontal';
985
986
  fullWidth?: boolean;
986
987
  }
987
- declare const Popover: ({ items, children, anchorRef, offsetY, align, fullWidth, }: PopoverProps) => react_jsx_runtime.JSX.Element;
988
+ declare const Popover: ({ items, children, anchorRef, offsetY, align, direction, fullWidth, }: PopoverProps) => react_jsx_runtime.JSX.Element;
988
989
 
989
990
  interface MetricCardProps {
990
991
  icon: string;
package/dist/index.d.ts CHANGED
@@ -982,9 +982,10 @@ interface PopoverProps {
982
982
  anchorRef?: RefObject<HTMLElement>;
983
983
  offsetY?: number;
984
984
  align?: 'left' | 'right';
985
+ direction?: 'vertical' | 'horizontal';
985
986
  fullWidth?: boolean;
986
987
  }
987
- declare const Popover: ({ items, children, anchorRef, offsetY, align, fullWidth, }: PopoverProps) => react_jsx_runtime.JSX.Element;
988
+ declare const Popover: ({ items, children, anchorRef, offsetY, align, direction, fullWidth, }: PopoverProps) => react_jsx_runtime.JSX.Element;
988
989
 
989
990
  interface MetricCardProps {
990
991
  icon: string;
package/dist/index.js CHANGED
@@ -5417,7 +5417,9 @@ var PopoverMenu = import_styled_components44.default.div`
5417
5417
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
5418
5418
  border-radius: 6px;
5419
5419
  z-index: 99999;
5420
- min-width: 140px;
5420
+ display: ${({ $horizontal }) => $horizontal ? "flex" : "block"};
5421
+ align-items: center;
5422
+ min-width: ${({ $horizontal }) => $horizontal ? "auto" : "140px"};
5421
5423
  padding: 4px;
5422
5424
  `;
5423
5425
  var PopoverItem = import_styled_components44.default.div`
@@ -5428,7 +5430,9 @@ var PopoverItem = import_styled_components44.default.div`
5428
5430
  font-weight: 500;
5429
5431
  color: #222;
5430
5432
  transition: background 0.15s;
5431
- border-bottom: ${({ isLast }) => isLast ? "none" : "1px solid #f0f0f0"};
5433
+ white-space: ${({ $horizontal }) => $horizontal ? "nowrap" : "normal"};
5434
+ border-bottom: ${({ isLast, $horizontal }) => isLast || $horizontal ? "none" : "1px solid #f0f0f0"};
5435
+ border-right: ${({ isLast, $horizontal }) => $horizontal && !isLast ? "1px solid #f0f0f0" : "none"};
5432
5436
 
5433
5437
  &:hover {
5434
5438
  background: #f5f5f5;
@@ -5440,8 +5444,10 @@ var Popover = ({
5440
5444
  anchorRef,
5441
5445
  offsetY = 8,
5442
5446
  align = "right",
5447
+ direction = "vertical",
5443
5448
  fullWidth = false
5444
5449
  }) => {
5450
+ const isHorizontal = direction === "horizontal";
5445
5451
  const [open, setOpen] = (0, import_react29.useState)(false);
5446
5452
  const ref = (0, import_react29.useRef)(null);
5447
5453
  const menuRef = (0, import_react29.useRef)(null);
@@ -5463,7 +5469,7 @@ var Popover = ({
5463
5469
  });
5464
5470
  } else {
5465
5471
  const rect = ref.current.getBoundingClientRect();
5466
- const estimatedMenuHeight = items.length * 42 + 8;
5472
+ const estimatedMenuHeight = isHorizontal ? 50 : items.length * 42 + 8;
5467
5473
  const menuHeight = ((_a = menuRef.current) == null ? void 0 : _a.getBoundingClientRect().height) ? menuRef.current.getBoundingClientRect().height : estimatedMenuHeight;
5468
5474
  const viewportPadding = 8;
5469
5475
  const spaceBelow = window.innerHeight - rect.bottom;
@@ -5479,7 +5485,7 @@ var Popover = ({
5479
5485
  width: fullWidth ? rect.width : void 0
5480
5486
  });
5481
5487
  }
5482
- }, [items.length, anchorRef, offsetY, align, fullWidth]);
5488
+ }, [items.length, anchorRef, offsetY, align, fullWidth, isHorizontal]);
5483
5489
  (0, import_react29.useEffect)(() => {
5484
5490
  const handleClickOutside = (event) => {
5485
5491
  var _a, _b;
@@ -5517,10 +5523,11 @@ var Popover = ({
5517
5523
  return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(PopoverWrapper, { ref, $fullWidth: fullWidth, children: [
5518
5524
  /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(PopoverTrigger, { $fullWidth: fullWidth, onClick: () => setOpen((o) => !o), children }),
5519
5525
  open && (0, import_react_dom3.createPortal)(
5520
- /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(PopoverMenu, { ref: menuRef, style: menuStyle, children: items.map((item, idx) => /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
5526
+ /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(PopoverMenu, { ref: menuRef, style: menuStyle, $horizontal: isHorizontal, children: items.map((item, idx) => /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
5521
5527
  PopoverItem,
5522
5528
  {
5523
5529
  isLast: idx === items.length - 1,
5530
+ $horizontal: isHorizontal,
5524
5531
  onClick: () => {
5525
5532
  setOpen(false);
5526
5533
  item.action();
package/dist/index.mjs CHANGED
@@ -5296,7 +5296,9 @@ var PopoverMenu = styled44.div`
5296
5296
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
5297
5297
  border-radius: 6px;
5298
5298
  z-index: 99999;
5299
- min-width: 140px;
5299
+ display: ${({ $horizontal }) => $horizontal ? "flex" : "block"};
5300
+ align-items: center;
5301
+ min-width: ${({ $horizontal }) => $horizontal ? "auto" : "140px"};
5300
5302
  padding: 4px;
5301
5303
  `;
5302
5304
  var PopoverItem = styled44.div`
@@ -5307,7 +5309,9 @@ var PopoverItem = styled44.div`
5307
5309
  font-weight: 500;
5308
5310
  color: #222;
5309
5311
  transition: background 0.15s;
5310
- border-bottom: ${({ isLast }) => isLast ? "none" : "1px solid #f0f0f0"};
5312
+ white-space: ${({ $horizontal }) => $horizontal ? "nowrap" : "normal"};
5313
+ border-bottom: ${({ isLast, $horizontal }) => isLast || $horizontal ? "none" : "1px solid #f0f0f0"};
5314
+ border-right: ${({ isLast, $horizontal }) => $horizontal && !isLast ? "1px solid #f0f0f0" : "none"};
5311
5315
 
5312
5316
  &:hover {
5313
5317
  background: #f5f5f5;
@@ -5319,8 +5323,10 @@ var Popover = ({
5319
5323
  anchorRef,
5320
5324
  offsetY = 8,
5321
5325
  align = "right",
5326
+ direction = "vertical",
5322
5327
  fullWidth = false
5323
5328
  }) => {
5329
+ const isHorizontal = direction === "horizontal";
5324
5330
  const [open, setOpen] = useState17(false);
5325
5331
  const ref = useRef12(null);
5326
5332
  const menuRef = useRef12(null);
@@ -5342,7 +5348,7 @@ var Popover = ({
5342
5348
  });
5343
5349
  } else {
5344
5350
  const rect = ref.current.getBoundingClientRect();
5345
- const estimatedMenuHeight = items.length * 42 + 8;
5351
+ const estimatedMenuHeight = isHorizontal ? 50 : items.length * 42 + 8;
5346
5352
  const menuHeight = ((_a = menuRef.current) == null ? void 0 : _a.getBoundingClientRect().height) ? menuRef.current.getBoundingClientRect().height : estimatedMenuHeight;
5347
5353
  const viewportPadding = 8;
5348
5354
  const spaceBelow = window.innerHeight - rect.bottom;
@@ -5358,7 +5364,7 @@ var Popover = ({
5358
5364
  width: fullWidth ? rect.width : void 0
5359
5365
  });
5360
5366
  }
5361
- }, [items.length, anchorRef, offsetY, align, fullWidth]);
5367
+ }, [items.length, anchorRef, offsetY, align, fullWidth, isHorizontal]);
5362
5368
  useEffect14(() => {
5363
5369
  const handleClickOutside = (event) => {
5364
5370
  var _a, _b;
@@ -5396,10 +5402,11 @@ var Popover = ({
5396
5402
  return /* @__PURE__ */ jsxs27(PopoverWrapper, { ref, $fullWidth: fullWidth, children: [
5397
5403
  /* @__PURE__ */ jsx52(PopoverTrigger, { $fullWidth: fullWidth, onClick: () => setOpen((o) => !o), children }),
5398
5404
  open && createPortal2(
5399
- /* @__PURE__ */ jsx52(PopoverMenu, { ref: menuRef, style: menuStyle, children: items.map((item, idx) => /* @__PURE__ */ jsx52(
5405
+ /* @__PURE__ */ jsx52(PopoverMenu, { ref: menuRef, style: menuStyle, $horizontal: isHorizontal, children: items.map((item, idx) => /* @__PURE__ */ jsx52(
5400
5406
  PopoverItem,
5401
5407
  {
5402
5408
  isLast: idx === items.length - 1,
5409
+ $horizontal: isHorizontal,
5403
5410
  onClick: () => {
5404
5411
  setOpen(false);
5405
5412
  item.action();
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "design-zystem",
3
- "version": "1.0.309",
3
+ "version": "1.0.310",
4
4
  "description": "A React design system of importable components",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",