@blockle/blocks-react 1.1.1 → 1.2.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/components/accessibility/VisuallyHidden/VisuallyHidden.stories.d.ts +1 -1
- package/dist/components/display/Divider/Divider.js +2 -2
- package/dist/components/display/Divider/Divider.stories.d.ts +1 -1
- package/dist/components/display/Divider/divider.css.js +2 -2
- package/dist/components/feedback/Progress/Progress.stories.d.ts +1 -1
- package/dist/components/feedback/Spinner/Spinner.stories.d.ts +1 -1
- package/dist/components/form/Button/Button.css.js +2 -2
- package/dist/components/form/Button/Button.js +2 -2
- package/dist/components/form/Button/Button.stories.d.ts +1 -1
- package/dist/components/form/Checkbox/Checkbox.js +1 -1
- package/dist/components/form/Checkbox/Checkbox.stories.d.ts +1 -1
- package/dist/components/form/Checkbox/checkbox.css.js +3 -3
- package/dist/components/form/Input/Input.js +2 -2
- package/dist/components/form/Input/Input.stories.d.ts +1 -1
- package/dist/components/form/Input/input.css.js +2 -2
- package/dist/components/form/Label/Label.stories.d.ts +1 -1
- package/dist/components/form/Radio/Radio.js +1 -1
- package/dist/components/form/Radio/Radio.stories.d.ts +1 -1
- package/dist/components/form/Radio/radio.css.js +3 -3
- package/dist/components/form/Select/Select.js +1 -1
- package/dist/components/form/Select/Select.stories.d.ts +1 -1
- package/dist/components/form/Select/select.css.js +4 -4
- package/dist/components/form/Slider/Slider.js +1 -1
- package/dist/components/form/Slider/Slider.stories.d.ts +1 -1
- package/dist/components/form/Slider/slider.css.js +6 -6
- package/dist/components/form/Switch/Switch.js +1 -1
- package/dist/components/form/Switch/Switch.stories.d.ts +1 -1
- package/dist/components/form/Switch/switch.css.js +3 -3
- package/dist/components/layout/Box/Box.stories.d.ts +1 -1
- package/dist/components/layout/Inline/Inline.stories.d.ts +1 -1
- package/dist/components/layout/Stack/Stack.stories.d.ts +1 -1
- package/dist/components/navigation/Link/Link.stories.d.ts +1 -1
- package/dist/components/overlay/Dialog/Dialog.js +5 -5
- package/dist/components/overlay/Dialog/Dialog.stories.d.ts +1 -1
- package/dist/components/overlay/Dialog/dialog.css.js +2 -2
- package/dist/components/overlay/Popover/Popover.js +2 -2
- package/dist/components/overlay/Popover/Popover.stories.d.ts +1 -1
- package/dist/components/overlay/Tooltip/Tooltip.d.ts +1 -1
- package/dist/components/overlay/Tooltip/Tooltip.stories.d.ts +1 -1
- package/dist/components/typography/Heading/Heading.js +1 -1
- package/dist/components/typography/Heading/heading.css.js +2 -2
- package/dist/components/typography/Heading/heading.stories.d.ts +1 -1
- package/dist/components/typography/Text/Text.js +1 -1
- package/dist/components/typography/Text/Text.stories.d.ts +1 -1
- package/dist/components/typography/Text/text.css.js +2 -2
- package/dist/index.d.ts +28 -27
- package/package.json +8 -14
- package/dist/components/accessibility/VisuallyHidden/VisuallyHidden.cjs +0 -20
- package/dist/components/accessibility/VisuallyHidden/index.d.ts +0 -1
- package/dist/components/accessibility/VisuallyHidden/visually-hidden.css.cjs +0 -16
- package/dist/components/display/Divider/Divider.cjs +0 -28
- package/dist/components/display/Divider/divider.css.cjs +0 -16
- package/dist/components/display/Divider/index.d.ts +0 -1
- package/dist/components/feedback/Progress/Progress.cjs +0 -55
- package/dist/components/feedback/Progress/index.d.ts +0 -1
- package/dist/components/feedback/Spinner/Spinner.cjs +0 -27
- package/dist/components/feedback/Spinner/index.d.ts +0 -1
- package/dist/components/form/Button/Button.cjs +0 -58
- package/dist/components/form/Button/Button.css.cjs +0 -16
- package/dist/components/form/Button/index.d.ts +0 -1
- package/dist/components/form/Checkbox/Checkbox.cjs +0 -80
- package/dist/components/form/Checkbox/checkbox.css.cjs +0 -32
- package/dist/components/form/Checkbox/index.d.ts +0 -1
- package/dist/components/form/Input/Input.cjs +0 -52
- package/dist/components/form/Input/index.d.ts +0 -1
- package/dist/components/form/Input/input.css.cjs +0 -21
- package/dist/components/form/Label/Label.cjs +0 -30
- package/dist/components/form/Label/index.d.ts +0 -1
- package/dist/components/form/Radio/Radio.cjs +0 -50
- package/dist/components/form/Radio/index.d.ts +0 -2
- package/dist/components/form/Radio/radio.css.cjs +0 -32
- package/dist/components/form/Select/Select.cjs +0 -73
- package/dist/components/form/Select/index.d.ts +0 -1
- package/dist/components/form/Select/select.css.cjs +0 -38
- package/dist/components/form/Slider/Slider.cjs +0 -139
- package/dist/components/form/Slider/index.d.ts +0 -1
- package/dist/components/form/Slider/slider.css.cjs +0 -75
- package/dist/components/form/Slider/usePointerProgress.cjs +0 -46
- package/dist/components/form/Switch/Switch.cjs +0 -73
- package/dist/components/form/Switch/index.d.ts +0 -1
- package/dist/components/form/Switch/switch.css.cjs +0 -27
- package/dist/components/layout/Box/Box.cjs +0 -26
- package/dist/components/layout/Box/index.d.ts +0 -1
- package/dist/components/layout/Inline/Inline.cjs +0 -30
- package/dist/components/layout/Inline/index.d.ts +0 -1
- package/dist/components/layout/Stack/Stack.cjs +0 -27
- package/dist/components/layout/Stack/index.d.ts +0 -1
- package/dist/components/navigation/Link/Link.cjs +0 -33
- package/dist/components/navigation/Link/index.d.ts +0 -1
- package/dist/components/overlay/Dialog/Dialog.cjs +0 -82
- package/dist/components/overlay/Dialog/dialog.css.cjs +0 -22
- package/dist/components/overlay/Dialog/dialogHelper.cjs +0 -21
- package/dist/components/overlay/Dialog/index.d.ts +0 -1
- package/dist/components/overlay/Popover/Popover.cjs +0 -106
- package/dist/components/overlay/Popover/index.d.ts +0 -1
- package/dist/components/overlay/Popover/popover-utils.cjs +0 -57
- package/dist/components/overlay/Portal/Portal.cjs +0 -15
- package/dist/components/overlay/Portal/index.d.ts +0 -1
- package/dist/components/overlay/Tooltip/Tooltip.cjs +0 -73
- package/dist/components/overlay/Tooltip/index.d.ts +0 -1
- package/dist/components/providers/BlocksProvider/BlocksProvider.cjs +0 -35
- package/dist/components/providers/BlocksProvider/context.cjs +0 -5
- package/dist/components/providers/BlocksProvider/index.d.ts +0 -2
- package/dist/components/typography/Heading/Heading.cjs +0 -24
- package/dist/components/typography/Heading/heading.css.cjs +0 -16
- package/dist/components/typography/Heading/index.d.ts +0 -1
- package/dist/components/typography/Text/Text.cjs +0 -21
- package/dist/components/typography/Text/index.d.ts +0 -1
- package/dist/components/typography/Text/text.css.cjs +0 -16
- package/dist/hooks/useClickOutside/useClickOutside.cjs +0 -23
- package/dist/hooks/useComponentStyles/index.d.ts +0 -2
- package/dist/hooks/useComponentStyles/useComponentStyleDefaultProps.cjs +0 -12
- package/dist/hooks/useComponentStyles/useComponentStyles.cjs +0 -74
- package/dist/hooks/useControlledValue/index.d.ts +0 -1
- package/dist/hooks/useControlledValue/useControlledValue.cjs +0 -33
- package/dist/hooks/useIsomorphicLayoutEffect/index.d.ts +0 -1
- package/dist/hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.cjs +0 -6
- package/dist/hooks/useKeyboard/index.d.ts +0 -1
- package/dist/hooks/useKeyboard/useKeyboard.cjs +0 -21
- package/dist/hooks/useLayer/index.d.ts +0 -1
- package/dist/hooks/usePreventBodyScroll/index.d.ts +0 -1
- package/dist/hooks/usePreventBodyScroll/usePreventBodyScroll.cjs +0 -31
- package/dist/hooks/useRestoreFocus/index.d.ts +0 -1
- package/dist/hooks/useRestoreFocus/useRestoreFocus.cjs +0 -19
- package/dist/hooks/useTheme/index.d.ts +0 -1
- package/dist/hooks/useTheme/useTheme.cjs +0 -13
- package/dist/hooks/useVisibilityState/index.d.ts +0 -1
- package/dist/index.cjs +0 -58
|
@@ -1,82 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
"use strict";
|
|
3
|
-
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
4
|
-
const jsxRuntime = require("react/jsx-runtime");
|
|
5
|
-
const blocksCore = require("@blockle/blocks-core");
|
|
6
|
-
const react = require("react");
|
|
7
|
-
const useClickOutside = require("../../../hooks/useClickOutside/useClickOutside.cjs");
|
|
8
|
-
const dialog_css = require("./dialog.css.cjs");
|
|
9
|
-
const dialogHelper = require("./dialogHelper.cjs");
|
|
10
|
-
const useComponentStyles = require("../../../hooks/useComponentStyles/useComponentStyles.cjs");
|
|
11
|
-
const useRestoreFocus = require("../../../hooks/useRestoreFocus/useRestoreFocus.cjs");
|
|
12
|
-
const usePreventBodyScroll = require("../../../hooks/usePreventBodyScroll/usePreventBodyScroll.cjs");
|
|
13
|
-
const useKeyboard = require("../../../hooks/useKeyboard/useKeyboard.cjs");
|
|
14
|
-
const useIsomorphicLayoutEffect = require("../../../hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.cjs");
|
|
15
|
-
const Dialog = ({
|
|
16
|
-
children,
|
|
17
|
-
open,
|
|
18
|
-
className,
|
|
19
|
-
onRequestClose,
|
|
20
|
-
size,
|
|
21
|
-
...restProps
|
|
22
|
-
}) => {
|
|
23
|
-
const dialogRef = react.useRef(null);
|
|
24
|
-
const dialogClassName = useComponentStyles.useComponentStyles("dialog", {
|
|
25
|
-
dialog: true,
|
|
26
|
-
variants: { size }
|
|
27
|
-
});
|
|
28
|
-
const [enabled, setEnabled] = react.useState(true);
|
|
29
|
-
const [visible, setVisible] = react.useState(open);
|
|
30
|
-
useRestoreFocus.useRestoreFocus(open);
|
|
31
|
-
const isNested = dialogHelper.useNestedDialog(open);
|
|
32
|
-
usePreventBodyScroll.usePreventBodyScroll(open && !isNested);
|
|
33
|
-
const onEscape = react.useCallback(
|
|
34
|
-
(event) => {
|
|
35
|
-
event.preventDefault();
|
|
36
|
-
onRequestClose();
|
|
37
|
-
},
|
|
38
|
-
[onRequestClose]
|
|
39
|
-
);
|
|
40
|
-
useKeyboard.useKeyboard("Escape", onEscape, { enabled: open && enabled });
|
|
41
|
-
useClickOutside.useClickOutside(dialogRef, onRequestClose, { enabled: open && enabled });
|
|
42
|
-
useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
|
|
43
|
-
var _a;
|
|
44
|
-
if (open && visible) {
|
|
45
|
-
if (!dialogRef.current || !dialogRef.current.showModal) {
|
|
46
|
-
return;
|
|
47
|
-
}
|
|
48
|
-
dialogRef.current.showModal();
|
|
49
|
-
} else if (open) {
|
|
50
|
-
setVisible(true);
|
|
51
|
-
} else {
|
|
52
|
-
if (!blocksCore.hasAnimationDuration(dialogRef.current)) {
|
|
53
|
-
setVisible(false);
|
|
54
|
-
}
|
|
55
|
-
if ((_a = dialogRef.current) == null ? void 0 : _a.close) {
|
|
56
|
-
dialogRef.current.close();
|
|
57
|
-
}
|
|
58
|
-
}
|
|
59
|
-
}, [open, visible]);
|
|
60
|
-
const onAnimationEnd = react.useCallback(() => {
|
|
61
|
-
if (!open) {
|
|
62
|
-
setVisible(false);
|
|
63
|
-
}
|
|
64
|
-
}, [open]);
|
|
65
|
-
if (!visible) {
|
|
66
|
-
return null;
|
|
67
|
-
}
|
|
68
|
-
const dataOpen = typeof window === "undefined" && open ? true : void 0;
|
|
69
|
-
return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(dialogHelper.DialogContext.Provider, { value: { setEnabled }, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
70
|
-
"dialog",
|
|
71
|
-
{
|
|
72
|
-
ref: dialogRef,
|
|
73
|
-
open: dataOpen,
|
|
74
|
-
className: blocksCore.classnames(dialog_css.dialog, dialogClassName, className),
|
|
75
|
-
onAnimationEnd,
|
|
76
|
-
onTransitionEnd: onAnimationEnd,
|
|
77
|
-
...restProps,
|
|
78
|
-
children
|
|
79
|
-
}
|
|
80
|
-
) }) });
|
|
81
|
-
};
|
|
82
|
-
exports.Dialog = Dialog;
|
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
-
const fileScope = require("@vanilla-extract/css/fileScope");
|
|
4
|
-
const blocksCore = require("@blockle/blocks-core");
|
|
5
|
-
const css = require("@vanilla-extract/css");
|
|
6
|
-
fileScope.setFileScope("src/components/overlay/Dialog/dialog.css.ts", "@blockle/blocks-react");
|
|
7
|
-
const dialog = css.style({
|
|
8
|
-
"@layer": {
|
|
9
|
-
[blocksCore.blocksLayer]: {
|
|
10
|
-
position: "fixed",
|
|
11
|
-
inset: 0,
|
|
12
|
-
border: "none",
|
|
13
|
-
"::backdrop": {
|
|
14
|
-
// Remove pointer event to prevent clicks on the backdrop
|
|
15
|
-
// and make it easier to check if the click was outside the dialog
|
|
16
|
-
pointerEvents: "none"
|
|
17
|
-
}
|
|
18
|
-
}
|
|
19
|
-
}
|
|
20
|
-
});
|
|
21
|
-
fileScope.endFileScope();
|
|
22
|
-
exports.dialog = dialog;
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
-
const react = require("react");
|
|
4
|
-
const DialogContext = react.createContext(
|
|
5
|
-
void 0
|
|
6
|
-
);
|
|
7
|
-
const useNestedDialog = (open) => {
|
|
8
|
-
const parentDialog = react.useContext(DialogContext);
|
|
9
|
-
react.useEffect(() => {
|
|
10
|
-
if (!parentDialog || !open) {
|
|
11
|
-
return;
|
|
12
|
-
}
|
|
13
|
-
parentDialog.setEnabled(false);
|
|
14
|
-
return () => {
|
|
15
|
-
parentDialog.setEnabled(true);
|
|
16
|
-
};
|
|
17
|
-
}, [parentDialog, open]);
|
|
18
|
-
return !!parentDialog;
|
|
19
|
-
};
|
|
20
|
-
exports.DialogContext = DialogContext;
|
|
21
|
-
exports.useNestedDialog = useNestedDialog;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { Dialog, type DialogProps } from './Dialog';
|
|
@@ -1,106 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
"use strict";
|
|
3
|
-
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
4
|
-
const jsxRuntime = require("react/jsx-runtime");
|
|
5
|
-
const blocksCore = require("@blockle/blocks-core");
|
|
6
|
-
const react = require("react");
|
|
7
|
-
const useClickOutside = require("../../../hooks/useClickOutside/useClickOutside.cjs");
|
|
8
|
-
const popoverUtils = require("./popover-utils.cjs");
|
|
9
|
-
const useComponentStyles = require("../../../hooks/useComponentStyles/useComponentStyles.cjs");
|
|
10
|
-
const useKeyboard = require("../../../hooks/useKeyboard/useKeyboard.cjs");
|
|
11
|
-
const useIsomorphicLayoutEffect = require("../../../hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.cjs");
|
|
12
|
-
const Box = require("../../layout/Box/Box.cjs");
|
|
13
|
-
const Popover = ({
|
|
14
|
-
anchorElement,
|
|
15
|
-
children,
|
|
16
|
-
className,
|
|
17
|
-
onRequestClose,
|
|
18
|
-
open,
|
|
19
|
-
position = "top",
|
|
20
|
-
sticky,
|
|
21
|
-
style,
|
|
22
|
-
...restProps
|
|
23
|
-
}) => {
|
|
24
|
-
const popoverRef = react.useRef(null);
|
|
25
|
-
const [popoverPosition, setPopoverPosition] = react.useState({ x: 0, y: 0 });
|
|
26
|
-
const [visible, setVisible] = react.useState(open);
|
|
27
|
-
const popoverClassName = useComponentStyles.useComponentStyles("popover", { base: true }, false);
|
|
28
|
-
useKeyboard.useKeyboard("Escape", onRequestClose, { enabled: open });
|
|
29
|
-
useClickOutside.useClickOutside(popoverRef, onRequestClose, { enabled: open });
|
|
30
|
-
useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
|
|
31
|
-
var _a;
|
|
32
|
-
const element = popoverRef.current;
|
|
33
|
-
if (open && visible) {
|
|
34
|
-
if (!element || typeof element.showPopover !== "function") {
|
|
35
|
-
console.warn(
|
|
36
|
-
"Popover: showPopover method is not available on the element."
|
|
37
|
-
);
|
|
38
|
-
return;
|
|
39
|
-
}
|
|
40
|
-
element.showPopover();
|
|
41
|
-
const [x, y] = popoverUtils.getPopoverPosition(position, anchorElement, popoverRef);
|
|
42
|
-
setPopoverPosition({ x, y });
|
|
43
|
-
} else if (open) {
|
|
44
|
-
setVisible(true);
|
|
45
|
-
} else {
|
|
46
|
-
if (!blocksCore.hasAnimationDuration(popoverRef.current)) {
|
|
47
|
-
setVisible(false);
|
|
48
|
-
}
|
|
49
|
-
(_a = popoverRef.current) == null ? void 0 : _a.hidePopover();
|
|
50
|
-
}
|
|
51
|
-
}, [open, visible]);
|
|
52
|
-
react.useEffect(() => {
|
|
53
|
-
if (open) {
|
|
54
|
-
const [x, y] = popoverUtils.getPopoverPosition(position, anchorElement, popoverRef);
|
|
55
|
-
setPopoverPosition({ x, y });
|
|
56
|
-
}
|
|
57
|
-
}, [open, anchorElement, position]);
|
|
58
|
-
react.useEffect(() => {
|
|
59
|
-
if (!open || !sticky) {
|
|
60
|
-
return;
|
|
61
|
-
}
|
|
62
|
-
function updatePopoverPosition() {
|
|
63
|
-
const [x, y] = popoverUtils.getPopoverPosition(position, anchorElement, popoverRef);
|
|
64
|
-
setPopoverPosition((prev) => {
|
|
65
|
-
if (prev.x === x && prev.y === y) {
|
|
66
|
-
return prev;
|
|
67
|
-
}
|
|
68
|
-
return { x, y };
|
|
69
|
-
});
|
|
70
|
-
}
|
|
71
|
-
window.addEventListener("resize", updatePopoverPosition);
|
|
72
|
-
window.addEventListener("scroll", updatePopoverPosition);
|
|
73
|
-
return () => {
|
|
74
|
-
window.removeEventListener("resize", updatePopoverPosition);
|
|
75
|
-
window.removeEventListener("scroll", updatePopoverPosition);
|
|
76
|
-
};
|
|
77
|
-
}, [position, anchorElement, open, sticky]);
|
|
78
|
-
const onAnimationEnd = react.useCallback(() => {
|
|
79
|
-
if (!open) {
|
|
80
|
-
setVisible(false);
|
|
81
|
-
}
|
|
82
|
-
}, [open]);
|
|
83
|
-
if (!visible) {
|
|
84
|
-
return null;
|
|
85
|
-
}
|
|
86
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
87
|
-
Box.Box,
|
|
88
|
-
{
|
|
89
|
-
ref: popoverRef,
|
|
90
|
-
"data-open": open ? "" : void 0,
|
|
91
|
-
popover: "manual",
|
|
92
|
-
className: blocksCore.classnames(popoverClassName, className),
|
|
93
|
-
position: "absolute",
|
|
94
|
-
onAnimationEnd,
|
|
95
|
-
onTransitionEnd: onAnimationEnd,
|
|
96
|
-
style: {
|
|
97
|
-
...style,
|
|
98
|
-
left: popoverPosition.x,
|
|
99
|
-
top: popoverPosition.y
|
|
100
|
-
},
|
|
101
|
-
...restProps,
|
|
102
|
-
children
|
|
103
|
-
}
|
|
104
|
-
);
|
|
105
|
-
};
|
|
106
|
-
exports.Popover = Popover;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { Popover, type PopoverProps } from './Popover';
|
|
@@ -1,57 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
-
const blocksCore = require("@blockle/blocks-core");
|
|
4
|
-
function getPopoverPosition(position, anchorRef, popoverRef) {
|
|
5
|
-
if (!anchorRef.current || !popoverRef.current) {
|
|
6
|
-
return [0, 0];
|
|
7
|
-
}
|
|
8
|
-
const anchorRect = anchorRef.current.getBoundingClientRect();
|
|
9
|
-
const popoverRect = popoverRef.current.getBoundingClientRect();
|
|
10
|
-
const popoverStyles = getComputedStyle(popoverRef.current);
|
|
11
|
-
const [popoverWidth, popoverHeight] = blocksCore.getOriginalElementSize(
|
|
12
|
-
popoverStyles,
|
|
13
|
-
popoverRect.width,
|
|
14
|
-
popoverRect.height
|
|
15
|
-
);
|
|
16
|
-
const marginTop = blocksCore.cssValueToNumber(
|
|
17
|
-
popoverStyles.getPropertyValue("margin-top")
|
|
18
|
-
);
|
|
19
|
-
const marginRight = blocksCore.cssValueToNumber(
|
|
20
|
-
popoverStyles.getPropertyValue("margin-right")
|
|
21
|
-
);
|
|
22
|
-
const marginBottom = blocksCore.cssValueToNumber(
|
|
23
|
-
popoverStyles.getPropertyValue("margin-bottom")
|
|
24
|
-
);
|
|
25
|
-
const marginLeft = blocksCore.cssValueToNumber(
|
|
26
|
-
popoverStyles.getPropertyValue("margin-left")
|
|
27
|
-
);
|
|
28
|
-
const marginY = marginTop + marginBottom;
|
|
29
|
-
const marginX = marginRight + marginLeft;
|
|
30
|
-
const docHeight = document.documentElement.clientHeight;
|
|
31
|
-
const docWidth = document.documentElement.clientWidth;
|
|
32
|
-
const docScrollTop = document.documentElement.scrollTop;
|
|
33
|
-
const docScrollLeft = document.documentElement.scrollLeft;
|
|
34
|
-
const anchorLeft = anchorRect.left + docScrollLeft;
|
|
35
|
-
const anchorTop = anchorRect.top + docScrollTop;
|
|
36
|
-
const topPosition = anchorRect.top - (popoverHeight + marginTop);
|
|
37
|
-
const rightPosition = anchorRect.left + anchorRect.width + popoverWidth;
|
|
38
|
-
const bottomPosition = anchorRect.top + anchorRect.height + popoverHeight;
|
|
39
|
-
const leftPosition = anchorRect.left - popoverWidth;
|
|
40
|
-
const offsetX = anchorLeft - marginLeft - (popoverWidth - anchorRect.width) / 2;
|
|
41
|
-
const offsetY = anchorTop - marginTop - (popoverHeight - anchorRect.height) / 2;
|
|
42
|
-
switch (position) {
|
|
43
|
-
case "top": {
|
|
44
|
-
return topPosition > 0 ? [offsetX, anchorTop - popoverHeight - marginY] : [offsetX, anchorTop + anchorRect.height];
|
|
45
|
-
}
|
|
46
|
-
case "bottom": {
|
|
47
|
-
return bottomPosition < docHeight || topPosition < 0 ? [offsetX, anchorTop + anchorRect.height] : [offsetX, anchorTop - popoverHeight - marginY];
|
|
48
|
-
}
|
|
49
|
-
case "left": {
|
|
50
|
-
return leftPosition > docWidth || leftPosition > 0 ? [anchorLeft - popoverWidth - marginX, offsetY] : [anchorLeft + anchorRect.width, offsetY];
|
|
51
|
-
}
|
|
52
|
-
case "right": {
|
|
53
|
-
return rightPosition < docWidth || leftPosition < 0 ? [anchorLeft + anchorRect.width, offsetY] : [anchorLeft - popoverWidth - marginX, offsetY];
|
|
54
|
-
}
|
|
55
|
-
}
|
|
56
|
-
}
|
|
57
|
-
exports.getPopoverPosition = getPopoverPosition;
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
"use strict";
|
|
3
|
-
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
4
|
-
const jsxRuntime = require("react/jsx-runtime");
|
|
5
|
-
const reactDom = require("react-dom");
|
|
6
|
-
const useTheme = require("../../../hooks/useTheme/useTheme.cjs");
|
|
7
|
-
const BlocksProvider = require("../../providers/BlocksProvider/BlocksProvider.cjs");
|
|
8
|
-
const Portal = ({ children, container }) => {
|
|
9
|
-
const context = useTheme.useTheme();
|
|
10
|
-
return reactDom.createPortal(
|
|
11
|
-
/* @__PURE__ */ jsxRuntime.jsx(BlocksProvider.BlocksProvider, { theme: context, children }),
|
|
12
|
-
container || document.body
|
|
13
|
-
);
|
|
14
|
-
};
|
|
15
|
-
exports.Portal = Portal;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { Portal, type PortalProps } from './Portal';
|
|
@@ -1,73 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
"use strict";
|
|
3
|
-
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
4
|
-
const jsxRuntime = require("react/jsx-runtime");
|
|
5
|
-
const blocksCore = require("@blockle/blocks-core");
|
|
6
|
-
const react = require("react");
|
|
7
|
-
const useComponentStyles = require("../../../hooks/useComponentStyles/useComponentStyles.cjs");
|
|
8
|
-
const Popover = require("../Popover/Popover.cjs");
|
|
9
|
-
const Tooltip = ({
|
|
10
|
-
position = "top",
|
|
11
|
-
children,
|
|
12
|
-
content,
|
|
13
|
-
colorScheme
|
|
14
|
-
}) => {
|
|
15
|
-
const id = react.useId();
|
|
16
|
-
const ref = react.useRef(null);
|
|
17
|
-
const [open, setOpen] = react.useState(false);
|
|
18
|
-
const tooltipClassName = useComponentStyles.useComponentStyles("tooltip", {
|
|
19
|
-
base: true,
|
|
20
|
-
variants: { colorScheme }
|
|
21
|
-
});
|
|
22
|
-
react.useEffect(() => {
|
|
23
|
-
const element = ref.current;
|
|
24
|
-
if (!element) {
|
|
25
|
-
return;
|
|
26
|
-
}
|
|
27
|
-
function onEnter() {
|
|
28
|
-
setOpen(true);
|
|
29
|
-
}
|
|
30
|
-
function onLeave() {
|
|
31
|
-
setOpen(false);
|
|
32
|
-
}
|
|
33
|
-
element.addEventListener("mouseenter", onEnter);
|
|
34
|
-
element.addEventListener("mouseleave", onLeave);
|
|
35
|
-
element.addEventListener("focusin", onEnter);
|
|
36
|
-
element.addEventListener("focusout", onLeave);
|
|
37
|
-
return () => {
|
|
38
|
-
element.removeEventListener("mouseenter", onEnter);
|
|
39
|
-
element.removeEventListener("mouseleave", onLeave);
|
|
40
|
-
element.removeEventListener("focusin", onEnter);
|
|
41
|
-
element.removeEventListener("focusout", onLeave);
|
|
42
|
-
};
|
|
43
|
-
}, []);
|
|
44
|
-
if (react.Children.count(children) !== 1) {
|
|
45
|
-
throw new Error("Tooltip component can only have one child");
|
|
46
|
-
}
|
|
47
|
-
const child = react.Children.toArray(children)[0];
|
|
48
|
-
if (!react.isValidElement(child)) {
|
|
49
|
-
return null;
|
|
50
|
-
}
|
|
51
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
52
|
-
react.cloneElement(child, {
|
|
53
|
-
ref: blocksCore.composeRefs(ref, child.ref),
|
|
54
|
-
"aria-describedby": open ? id : void 0
|
|
55
|
-
}),
|
|
56
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
57
|
-
Popover.Popover,
|
|
58
|
-
{
|
|
59
|
-
id,
|
|
60
|
-
role: "tooltip",
|
|
61
|
-
anchorElement: ref,
|
|
62
|
-
open,
|
|
63
|
-
onRequestClose: () => {
|
|
64
|
-
setOpen(false);
|
|
65
|
-
},
|
|
66
|
-
position,
|
|
67
|
-
className: tooltipClassName,
|
|
68
|
-
children: content
|
|
69
|
-
}
|
|
70
|
-
)
|
|
71
|
-
] });
|
|
72
|
-
};
|
|
73
|
-
exports.Tooltip = Tooltip;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { Tooltip, type TooltipProps } from './Tooltip';
|
|
@@ -1,35 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
"use strict";
|
|
3
|
-
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
4
|
-
const jsxRuntime = require("react/jsx-runtime");
|
|
5
|
-
const react = require("react");
|
|
6
|
-
const blocksCore = require("@blockle/blocks-core");
|
|
7
|
-
const blocksReactSlot = require("@blockle/blocks-react-slot");
|
|
8
|
-
const context = require("./context.cjs");
|
|
9
|
-
const [Template, Slot] = blocksReactSlot.createSlottable("div");
|
|
10
|
-
const BlocksProvider = ({
|
|
11
|
-
children,
|
|
12
|
-
theme,
|
|
13
|
-
className,
|
|
14
|
-
...restProps
|
|
15
|
-
}) => {
|
|
16
|
-
const contextValue = react.useMemo(
|
|
17
|
-
() => ({
|
|
18
|
-
theme
|
|
19
|
-
}),
|
|
20
|
-
[theme]
|
|
21
|
-
);
|
|
22
|
-
return /* @__PURE__ */ jsxRuntime.jsx(context.BlocksProviderContext, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
23
|
-
Template,
|
|
24
|
-
{
|
|
25
|
-
className: blocksCore.classnames(
|
|
26
|
-
theme.vars,
|
|
27
|
-
blocksCore.atoms({ fontFamily: "primary" }),
|
|
28
|
-
className
|
|
29
|
-
),
|
|
30
|
-
...restProps,
|
|
31
|
-
children: /* @__PURE__ */ jsxRuntime.jsx(Slot, { children })
|
|
32
|
-
}
|
|
33
|
-
) });
|
|
34
|
-
};
|
|
35
|
-
exports.BlocksProvider = BlocksProvider;
|
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
-
const jsxRuntime = require("react/jsx-runtime");
|
|
4
|
-
const blocksCore = require("@blockle/blocks-core");
|
|
5
|
-
const heading_css = require("./heading.css.cjs");
|
|
6
|
-
const Box = require("../../layout/Box/Box.cjs");
|
|
7
|
-
const Heading = ({
|
|
8
|
-
className,
|
|
9
|
-
level = 1,
|
|
10
|
-
children,
|
|
11
|
-
...restProps
|
|
12
|
-
}) => {
|
|
13
|
-
const Tag = `h${level}`;
|
|
14
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
15
|
-
Box.Box,
|
|
16
|
-
{
|
|
17
|
-
asChild: true,
|
|
18
|
-
className: blocksCore.classnames(heading_css.heading, className),
|
|
19
|
-
...restProps,
|
|
20
|
-
children: /* @__PURE__ */ jsxRuntime.jsx(Tag, { children })
|
|
21
|
-
}
|
|
22
|
-
);
|
|
23
|
-
};
|
|
24
|
-
exports.Heading = Heading;
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
-
const fileScope = require("@vanilla-extract/css/fileScope");
|
|
4
|
-
const blocksCore = require("@blockle/blocks-core");
|
|
5
|
-
const css = require("@vanilla-extract/css");
|
|
6
|
-
fileScope.setFileScope("src/components/typography/Heading/heading.css.ts", "@blockle/blocks-react");
|
|
7
|
-
const heading = css.style({
|
|
8
|
-
"@layer": {
|
|
9
|
-
[blocksCore.blocksLayer]: {
|
|
10
|
-
margin: 0,
|
|
11
|
-
padding: 0
|
|
12
|
-
}
|
|
13
|
-
}
|
|
14
|
-
});
|
|
15
|
-
fileScope.endFileScope();
|
|
16
|
-
exports.heading = heading;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { Heading, type HeadingProps } from './Heading';
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
-
const jsxRuntime = require("react/jsx-runtime");
|
|
4
|
-
const blocksCore = require("@blockle/blocks-core");
|
|
5
|
-
const text_css = require("./text.css.cjs");
|
|
6
|
-
const Box = require("../../layout/Box/Box.cjs");
|
|
7
|
-
const Text = ({
|
|
8
|
-
asChild,
|
|
9
|
-
children,
|
|
10
|
-
className,
|
|
11
|
-
ref,
|
|
12
|
-
tag,
|
|
13
|
-
...restProps
|
|
14
|
-
}) => {
|
|
15
|
-
const Component = tag ?? "span";
|
|
16
|
-
return /* @__PURE__ */ jsxRuntime.jsx(Box.Box, { asChild: true, className: blocksCore.classnames(text_css.text, className), ...restProps, children: asChild ? children : (
|
|
17
|
-
// biome-ignore lint/suspicious/noExplicitAny: Safe to assert ref as React.RefObject<any>
|
|
18
|
-
/* @__PURE__ */ jsxRuntime.jsx(Component, { ref, children })
|
|
19
|
-
) });
|
|
20
|
-
};
|
|
21
|
-
exports.Text = Text;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { Text, type TextProps } from './Text';
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
-
const fileScope = require("@vanilla-extract/css/fileScope");
|
|
4
|
-
const blocksCore = require("@blockle/blocks-core");
|
|
5
|
-
const css = require("@vanilla-extract/css");
|
|
6
|
-
fileScope.setFileScope("src/components/typography/Text/text.css.ts", "@blockle/blocks-react");
|
|
7
|
-
const text = css.style({
|
|
8
|
-
"@layer": {
|
|
9
|
-
[blocksCore.blocksLayer]: {
|
|
10
|
-
margin: 0,
|
|
11
|
-
padding: 0
|
|
12
|
-
}
|
|
13
|
-
}
|
|
14
|
-
});
|
|
15
|
-
fileScope.endFileScope();
|
|
16
|
-
exports.text = text;
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
-
const react = require("react");
|
|
4
|
-
const useClickOutside = (ref, onClickOutside, { enabled = true } = {}) => {
|
|
5
|
-
react.useEffect(() => {
|
|
6
|
-
if (!enabled) {
|
|
7
|
-
return;
|
|
8
|
-
}
|
|
9
|
-
const listener = (event) => {
|
|
10
|
-
if (ref.current && !ref.current.contains(event.target)) {
|
|
11
|
-
onClickOutside();
|
|
12
|
-
}
|
|
13
|
-
};
|
|
14
|
-
const rafId = requestAnimationFrame(() => {
|
|
15
|
-
document.addEventListener("click", listener);
|
|
16
|
-
});
|
|
17
|
-
return () => {
|
|
18
|
-
cancelAnimationFrame(rafId);
|
|
19
|
-
document.removeEventListener("click", listener);
|
|
20
|
-
};
|
|
21
|
-
}, [ref, onClickOutside, enabled]);
|
|
22
|
-
};
|
|
23
|
-
exports.useClickOutside = useClickOutside;
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
-
const useTheme = require("../useTheme/useTheme.cjs");
|
|
4
|
-
const useComponentStyleDefaultProps = (name) => {
|
|
5
|
-
const { components } = useTheme.useTheme();
|
|
6
|
-
const component = components[name];
|
|
7
|
-
if (!component) {
|
|
8
|
-
return {};
|
|
9
|
-
}
|
|
10
|
-
return component.defaultVariants ?? {};
|
|
11
|
-
};
|
|
12
|
-
exports.useComponentStyleDefaultProps = useComponentStyleDefaultProps;
|
|
@@ -1,74 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
"use strict";
|
|
3
|
-
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
4
|
-
const useTheme = require("../useTheme/useTheme.cjs");
|
|
5
|
-
function useComponentStyles(name, props, useDefaultVariants = true) {
|
|
6
|
-
const { components } = useTheme.useTheme();
|
|
7
|
-
const component = components[name];
|
|
8
|
-
if (!component) {
|
|
9
|
-
console.warn(`Component ${name} is not defined in the theme`);
|
|
10
|
-
return "";
|
|
11
|
-
}
|
|
12
|
-
const classNames = [];
|
|
13
|
-
const variants = props.variants ?? {};
|
|
14
|
-
const variantsWithDefaults = { ...variants };
|
|
15
|
-
for (const key in props) {
|
|
16
|
-
const value = props[key];
|
|
17
|
-
if (typeof value === "boolean" && value) {
|
|
18
|
-
classNames.push(
|
|
19
|
-
// biome-ignore lint/suspicious/noExplicitAny: type assertion
|
|
20
|
-
component[key]
|
|
21
|
-
);
|
|
22
|
-
}
|
|
23
|
-
}
|
|
24
|
-
if (!component.variants) {
|
|
25
|
-
return classNames.join(" ");
|
|
26
|
-
}
|
|
27
|
-
const { defaultVariants } = component;
|
|
28
|
-
if (useDefaultVariants && defaultVariants) {
|
|
29
|
-
const keys2 = Object.keys(defaultVariants);
|
|
30
|
-
for (const key of keys2) {
|
|
31
|
-
if (variantsWithDefaults[key] === void 0 && defaultVariants[key]) {
|
|
32
|
-
variantsWithDefaults[key] = defaultVariants[key];
|
|
33
|
-
}
|
|
34
|
-
}
|
|
35
|
-
}
|
|
36
|
-
const keys = Object.keys(variantsWithDefaults);
|
|
37
|
-
const componentVariants = component.variants;
|
|
38
|
-
for (const key of keys) {
|
|
39
|
-
const value = variantsWithDefaults[key];
|
|
40
|
-
if (value === void 0 || componentVariants[key] === void 0) {
|
|
41
|
-
continue;
|
|
42
|
-
}
|
|
43
|
-
if (typeof value === "boolean") {
|
|
44
|
-
if (value && componentVariants[key]) {
|
|
45
|
-
classNames.push(componentVariants[key]);
|
|
46
|
-
}
|
|
47
|
-
continue;
|
|
48
|
-
}
|
|
49
|
-
const variant = componentVariants[key][value];
|
|
50
|
-
if (variant) {
|
|
51
|
-
classNames.push(variant);
|
|
52
|
-
}
|
|
53
|
-
}
|
|
54
|
-
const { compoundVariants } = component;
|
|
55
|
-
if (compoundVariants) {
|
|
56
|
-
for (const compoundVariant of compoundVariants) {
|
|
57
|
-
const keys2 = Object.keys(
|
|
58
|
-
compoundVariant.variants
|
|
59
|
-
);
|
|
60
|
-
const matches = keys2.every((key) => {
|
|
61
|
-
const value = variantsWithDefaults[key];
|
|
62
|
-
if (value === void 0) {
|
|
63
|
-
return false;
|
|
64
|
-
}
|
|
65
|
-
return value === compoundVariant.variants[key];
|
|
66
|
-
});
|
|
67
|
-
if (matches) {
|
|
68
|
-
classNames.push(compoundVariant.style);
|
|
69
|
-
}
|
|
70
|
-
}
|
|
71
|
-
}
|
|
72
|
-
return classNames.join(" ");
|
|
73
|
-
}
|
|
74
|
-
exports.useComponentStyles = useComponentStyles;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { useControlledValue } from './useControlledValue';
|