design-zystem 1.0.254 → 1.0.256
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.d.mts +3 -1
- package/dist/index.d.ts +3 -1
- package/dist/index.js +14 -6
- package/dist/index.mjs +14 -6
- package/package.json +1 -1
package/dist/index.d.mts
CHANGED
|
@@ -637,6 +637,7 @@ interface TableRowProps extends HTMLAttributes<HTMLDivElement> {
|
|
|
637
637
|
borderTop?: string;
|
|
638
638
|
height?: string;
|
|
639
639
|
isClickable?: boolean;
|
|
640
|
+
hoverable?: boolean;
|
|
640
641
|
onClick?: (e: MouseEvent<HTMLDivElement>) => void;
|
|
641
642
|
style?: CSSProperties;
|
|
642
643
|
className?: string;
|
|
@@ -823,8 +824,9 @@ interface PopoverProps {
|
|
|
823
824
|
children?: ReactNode;
|
|
824
825
|
anchorRef?: RefObject<HTMLElement>;
|
|
825
826
|
offsetY?: number;
|
|
827
|
+
align?: 'left' | 'right';
|
|
826
828
|
}
|
|
827
|
-
declare const Popover: ({ items, children, anchorRef, offsetY, }: PopoverProps) => react_jsx_runtime.JSX.Element;
|
|
829
|
+
declare const Popover: ({ items, children, anchorRef, offsetY, align, }: PopoverProps) => react_jsx_runtime.JSX.Element;
|
|
828
830
|
|
|
829
831
|
interface MetricCardProps {
|
|
830
832
|
icon: string;
|
package/dist/index.d.ts
CHANGED
|
@@ -637,6 +637,7 @@ interface TableRowProps extends HTMLAttributes<HTMLDivElement> {
|
|
|
637
637
|
borderTop?: string;
|
|
638
638
|
height?: string;
|
|
639
639
|
isClickable?: boolean;
|
|
640
|
+
hoverable?: boolean;
|
|
640
641
|
onClick?: (e: MouseEvent<HTMLDivElement>) => void;
|
|
641
642
|
style?: CSSProperties;
|
|
642
643
|
className?: string;
|
|
@@ -823,8 +824,9 @@ interface PopoverProps {
|
|
|
823
824
|
children?: ReactNode;
|
|
824
825
|
anchorRef?: RefObject<HTMLElement>;
|
|
825
826
|
offsetY?: number;
|
|
827
|
+
align?: 'left' | 'right';
|
|
826
828
|
}
|
|
827
|
-
declare const Popover: ({ items, children, anchorRef, offsetY, }: PopoverProps) => react_jsx_runtime.JSX.Element;
|
|
829
|
+
declare const Popover: ({ items, children, anchorRef, offsetY, align, }: PopoverProps) => react_jsx_runtime.JSX.Element;
|
|
828
830
|
|
|
829
831
|
interface MetricCardProps {
|
|
830
832
|
icon: string;
|
package/dist/index.js
CHANGED
|
@@ -3379,7 +3379,13 @@ TableBody.displayName = "TableBody";
|
|
|
3379
3379
|
// src/Components/Table/TableRow/TableRow.tsx
|
|
3380
3380
|
var import_styled_components29 = __toESM(require("styled-components"));
|
|
3381
3381
|
var import_jsx_runtime33 = require("react/jsx-runtime");
|
|
3382
|
-
var shouldForwardPropTableRow = (prop) => ![
|
|
3382
|
+
var shouldForwardPropTableRow = (prop) => ![
|
|
3383
|
+
"backgroundColor",
|
|
3384
|
+
"borderTop",
|
|
3385
|
+
"height",
|
|
3386
|
+
"isClickable",
|
|
3387
|
+
"hoverable"
|
|
3388
|
+
].includes(prop);
|
|
3383
3389
|
var StyledTableRow = import_styled_components29.default.div.withConfig({
|
|
3384
3390
|
shouldForwardProp: shouldForwardPropTableRow
|
|
3385
3391
|
})`
|
|
@@ -3390,9 +3396,10 @@ var StyledTableRow = import_styled_components29.default.div.withConfig({
|
|
|
3390
3396
|
background-color: ${(props) => props.backgroundColor || "inherit"};
|
|
3391
3397
|
border-top: ${(props) => props.borderTop || "none"};
|
|
3392
3398
|
height: ${(props) => props.height || ""};
|
|
3399
|
+
transition: box-shadow 0.12s ease;
|
|
3393
3400
|
|
|
3394
3401
|
&:hover {
|
|
3395
|
-
background-color: ${
|
|
3402
|
+
${(props) => props.hoverable ? "box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.025);" : `background-color: ${props.backgroundColor ? props.backgroundColor + "aa" : "#eaeaea"};`}
|
|
3396
3403
|
}
|
|
3397
3404
|
`;
|
|
3398
3405
|
var TableRow = (props) => {
|
|
@@ -4593,7 +4600,8 @@ var Popover = ({
|
|
|
4593
4600
|
items = [],
|
|
4594
4601
|
children,
|
|
4595
4602
|
anchorRef,
|
|
4596
|
-
offsetY = 8
|
|
4603
|
+
offsetY = 8,
|
|
4604
|
+
align = "right"
|
|
4597
4605
|
}) => {
|
|
4598
4606
|
const [open, setOpen] = (0, import_react24.useState)(false);
|
|
4599
4607
|
const ref = (0, import_react24.useRef)(null);
|
|
@@ -4628,10 +4636,10 @@ var Popover = ({
|
|
|
4628
4636
|
viewportPadding,
|
|
4629
4637
|
Math.min(top, window.innerHeight - menuHeight - viewportPadding)
|
|
4630
4638
|
),
|
|
4631
|
-
left: rect.right
|
|
4639
|
+
left: align === "left" ? rect.left : rect.right
|
|
4632
4640
|
});
|
|
4633
4641
|
}
|
|
4634
|
-
}, [items.length, anchorRef, offsetY]);
|
|
4642
|
+
}, [items.length, anchorRef, offsetY, align]);
|
|
4635
4643
|
(0, import_react24.useEffect)(() => {
|
|
4636
4644
|
const handleClickOutside = (event) => {
|
|
4637
4645
|
var _a, _b;
|
|
@@ -4663,7 +4671,7 @@ var Popover = ({
|
|
|
4663
4671
|
top: menuPosition.top,
|
|
4664
4672
|
bottom: "auto",
|
|
4665
4673
|
left: menuPosition.left,
|
|
4666
|
-
transform: "translateX(-100%)"
|
|
4674
|
+
transform: align === "left" ? "none" : "translateX(-100%)"
|
|
4667
4675
|
};
|
|
4668
4676
|
return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(PopoverWrapper, { ref, children: [
|
|
4669
4677
|
/* @__PURE__ */ (0, import_jsx_runtime49.jsx)(PopoverTrigger, { onClick: () => setOpen((o) => !o), children }),
|
package/dist/index.mjs
CHANGED
|
@@ -3286,7 +3286,13 @@ TableBody.displayName = "TableBody";
|
|
|
3286
3286
|
// src/Components/Table/TableRow/TableRow.tsx
|
|
3287
3287
|
import styled29 from "styled-components";
|
|
3288
3288
|
import { jsx as jsx33 } from "react/jsx-runtime";
|
|
3289
|
-
var shouldForwardPropTableRow = (prop) => ![
|
|
3289
|
+
var shouldForwardPropTableRow = (prop) => ![
|
|
3290
|
+
"backgroundColor",
|
|
3291
|
+
"borderTop",
|
|
3292
|
+
"height",
|
|
3293
|
+
"isClickable",
|
|
3294
|
+
"hoverable"
|
|
3295
|
+
].includes(prop);
|
|
3290
3296
|
var StyledTableRow = styled29.div.withConfig({
|
|
3291
3297
|
shouldForwardProp: shouldForwardPropTableRow
|
|
3292
3298
|
})`
|
|
@@ -3297,9 +3303,10 @@ var StyledTableRow = styled29.div.withConfig({
|
|
|
3297
3303
|
background-color: ${(props) => props.backgroundColor || "inherit"};
|
|
3298
3304
|
border-top: ${(props) => props.borderTop || "none"};
|
|
3299
3305
|
height: ${(props) => props.height || ""};
|
|
3306
|
+
transition: box-shadow 0.12s ease;
|
|
3300
3307
|
|
|
3301
3308
|
&:hover {
|
|
3302
|
-
background-color: ${
|
|
3309
|
+
${(props) => props.hoverable ? "box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.025);" : `background-color: ${props.backgroundColor ? props.backgroundColor + "aa" : "#eaeaea"};`}
|
|
3303
3310
|
}
|
|
3304
3311
|
`;
|
|
3305
3312
|
var TableRow = (props) => {
|
|
@@ -4514,7 +4521,8 @@ var Popover = ({
|
|
|
4514
4521
|
items = [],
|
|
4515
4522
|
children,
|
|
4516
4523
|
anchorRef,
|
|
4517
|
-
offsetY = 8
|
|
4524
|
+
offsetY = 8,
|
|
4525
|
+
align = "right"
|
|
4518
4526
|
}) => {
|
|
4519
4527
|
const [open, setOpen] = useState15(false);
|
|
4520
4528
|
const ref = useRef12(null);
|
|
@@ -4549,10 +4557,10 @@ var Popover = ({
|
|
|
4549
4557
|
viewportPadding,
|
|
4550
4558
|
Math.min(top, window.innerHeight - menuHeight - viewportPadding)
|
|
4551
4559
|
),
|
|
4552
|
-
left: rect.right
|
|
4560
|
+
left: align === "left" ? rect.left : rect.right
|
|
4553
4561
|
});
|
|
4554
4562
|
}
|
|
4555
|
-
}, [items.length, anchorRef, offsetY]);
|
|
4563
|
+
}, [items.length, anchorRef, offsetY, align]);
|
|
4556
4564
|
useEffect13(() => {
|
|
4557
4565
|
const handleClickOutside = (event) => {
|
|
4558
4566
|
var _a, _b;
|
|
@@ -4584,7 +4592,7 @@ var Popover = ({
|
|
|
4584
4592
|
top: menuPosition.top,
|
|
4585
4593
|
bottom: "auto",
|
|
4586
4594
|
left: menuPosition.left,
|
|
4587
|
-
transform: "translateX(-100%)"
|
|
4595
|
+
transform: align === "left" ? "none" : "translateX(-100%)"
|
|
4588
4596
|
};
|
|
4589
4597
|
return /* @__PURE__ */ jsxs25(PopoverWrapper, { ref, children: [
|
|
4590
4598
|
/* @__PURE__ */ jsx49(PopoverTrigger, { onClick: () => setOpen((o) => !o), children }),
|