@caseparts-org/caseblocks 0.0.114 → 0.0.115

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.
@@ -1,15 +1,10 @@
1
+ import { PopoverAPI } from './usePopover';
1
2
  import * as React from "react";
2
3
  type PositionKeyword = "top" | "right" | "bottom" | "left";
3
4
  type Position = "top left" | "top center" | "top right" | "right top" | "right center" | "right bottom" | "bottom left" | "bottom center" | "bottom right" | "left top" | "left center" | "left bottom" | PositionKeyword;
4
- type PopoverAPI = {
5
- close: () => void;
6
- open: () => void;
7
- toggle: () => void;
8
- };
9
- export declare function usePopover(): PopoverAPI;
10
5
  export type PopoverProps = {
11
6
  trigger: React.ReactElement;
12
- children: React.ReactNode | ((api: PopoverAPI) => React.ReactNode);
7
+ children: React.ReactNode | ((_api: PopoverAPI) => React.ReactNode);
13
8
  position?: Position;
14
9
  popoverClassName?: string;
15
10
  contentClassName?: string;
@@ -1,85 +1,80 @@
1
1
  import { jsxs as H, jsx as k } from "react/jsx-runtime";
2
- import * as s from "react";
2
+ import * as f from "react";
3
3
  import { r as N } from "../../index-B4KbmMH3.js";
4
4
  import { c as z } from "../../clsx-OuTLNxxd.js";
5
- import '../../assets/Popover.css';const W = "_popover_vlr81_1", q = "_content_vlr81_7", M = {
6
- popover: W,
7
- content: q
8
- }, S = s.createContext(null);
9
- function K() {
10
- const o = s.useContext(S);
11
- if (!o)
12
- throw new Error("usePopover must be used within a Popover");
13
- return o;
14
- }
15
- function D(o) {
16
- return o ? o.includes(" ") ? o : `${o} center` : "top center";
5
+ import { PopoverContext as W } from "./usePopover.js";
6
+ import '../../assets/Popover.css';const q = "_popover_vlr81_1", C = "_content_vlr81_7", M = {
7
+ popover: q,
8
+ content: C
9
+ };
10
+ function D(r) {
11
+ return r ? r.includes(" ") ? r : `${r} center` : "top center";
17
12
  }
18
- function F(o) {
19
- const p = D(o).toLowerCase(), [c, l] = p.split(" ");
20
- return { side: ["top", "right", "bottom", "left"].includes(c) ? c : "top", align: l === "left" || l === "top" ? "start" : l === "right" || l === "bottom" ? "end" : "center" };
13
+ function F(r) {
14
+ const d = D(r).toLowerCase(), [s, c] = d.split(" ");
15
+ return { side: ["top", "right", "bottom", "left"].includes(s) ? s : "top", align: c === "left" || c === "top" ? "start" : c === "right" || c === "bottom" ? "end" : "center" };
21
16
  }
22
- function U(o, p, c, l, d = 8) {
23
- const n = o.getBoundingClientRect(), u = p.getBoundingClientRect();
24
- let a = 0, f = 0;
25
- c === "top" ? a = n.top - u.height - d : c === "bottom" ? a = n.bottom + d : c === "left" ? f = n.left - u.width - d : c === "right" && (f = n.right + d), c === "top" || c === "bottom" ? l === "start" ? f = n.left : l === "end" ? f = n.right - u.width : f = n.left + n.width / 2 - u.width / 2 : l === "start" ? a = n.top : l === "end" ? a = n.bottom - u.height : a = n.top + n.height / 2 - u.height / 2;
17
+ function U(r, d, s, c, p = 8) {
18
+ const o = r.getBoundingClientRect(), l = d.getBoundingClientRect();
19
+ let a = 0, u = 0;
20
+ s === "top" ? a = o.top - l.height - p : s === "bottom" ? a = o.bottom + p : s === "left" ? u = o.left - l.width - p : s === "right" && (u = o.right + p), s === "top" || s === "bottom" ? c === "start" ? u = o.left : c === "end" ? u = o.right - l.width : u = o.left + o.width / 2 - l.width / 2 : c === "start" ? a = o.top : c === "end" ? a = o.bottom - l.height : a = o.top + o.height / 2 - l.height / 2;
26
21
  const w = window.innerWidth, h = window.innerHeight;
27
- return a = Math.max(4, Math.min(h - u.height - 4, a)), f = Math.max(4, Math.min(w - u.width - 4, f)), { top: a, left: f };
22
+ return a = Math.max(4, Math.min(h - l.height - 4, a)), u = Math.max(4, Math.min(w - l.width - 4, u)), { top: a, left: u };
28
23
  }
29
24
  const Q = ({
30
- trigger: o,
31
- children: p,
32
- position: c,
33
- popoverClassName: l,
34
- contentClassName: d,
35
- disabled: n,
36
- closeOnOutsideClick: u = !0,
25
+ trigger: r,
26
+ children: d,
27
+ position: s,
28
+ popoverClassName: c,
29
+ contentClassName: p,
30
+ disabled: o,
31
+ closeOnOutsideClick: l = !0,
37
32
  closeOnInsideClickAttr: a = !0,
38
- open: f,
33
+ open: u,
39
34
  onOpenChange: w
40
35
  }) => {
41
- const { side: h, align: y } = F(c), [C, j] = s.useState(!1), P = typeof f == "boolean", r = P ? f : C, [v, R] = s.useState(null), b = s.useRef(null), m = s.useRef(null), x = (t) => {
42
- const e = typeof t == "function" ? t(r) : t;
43
- P ? w == null || w(e) : j(e);
44
- }, L = () => {
45
- n || x((t) => !t);
46
- }, E = () => x(!1), _ = () => x(!0), B = s.cloneElement(o, {
36
+ const { side: h, align: y } = F(s), [S, j] = f.useState(!1), R = typeof u == "boolean", n = R ? u : S, [m, P] = f.useState(null), b = f.useRef(null), v = f.useRef(null), L = (t) => {
37
+ const e = typeof t == "function" ? t(n) : t;
38
+ R ? w == null || w(e) : j(e);
39
+ }, x = () => {
40
+ o || L((t) => !t);
41
+ }, E = () => L(!1), _ = () => L(!0), B = f.cloneElement(r, {
47
42
  ref: (t) => {
48
- const { ref: e } = o;
43
+ const { ref: e } = r;
49
44
  typeof e == "function" ? e(t) : e && (e.current = t), b.current = t;
50
45
  },
51
46
  onClick: (t) => {
52
47
  var e, i;
53
- (i = (e = o.props).onClick) == null || i.call(e, t), L();
48
+ (i = (e = r.props).onClick) == null || i.call(e, t), x();
54
49
  },
55
50
  "aria-haspopup": "dialog",
56
- "aria-expanded": r || void 0,
57
- "aria-controls": r ? "popover-panel" : void 0,
58
- style: { ...o.props.style || {}, outline: "none" }
51
+ "aria-expanded": n || void 0,
52
+ "aria-controls": n ? "popover-panel" : void 0,
53
+ style: { ...r.props.style || {}, outline: "none" }
59
54
  });
60
- return s.useLayoutEffect(() => {
61
- if (!r) {
62
- R(null);
55
+ return f.useLayoutEffect(() => {
56
+ if (!n) {
57
+ P(null);
63
58
  return;
64
59
  }
65
- const t = b.current, e = m.current;
60
+ const t = b.current, e = v.current;
66
61
  if (!t || !e) return;
67
62
  const i = () => {
68
- R(U(t, e, h, y, 8));
63
+ P(U(t, e, h, y, 8));
69
64
  };
70
65
  return i(), window.addEventListener("resize", i), window.addEventListener("scroll", i, !0), () => {
71
66
  window.removeEventListener("resize", i), window.removeEventListener("scroll", i, !0);
72
67
  };
73
- }, [r, h, y, p]), s.useEffect(() => {
74
- if (!r || !u) return;
68
+ }, [n, h, y, d]), f.useEffect(() => {
69
+ if (!n || !l) return;
75
70
  const t = (e) => {
76
- const i = m.current, g = b.current;
71
+ const i = v.current, g = b.current;
77
72
  !i || !g || i.contains(e.target) || g.contains(e.target) || E();
78
73
  };
79
74
  return window.addEventListener("mousedown", t), () => window.removeEventListener("mousedown", t);
80
- }, [r, u]), s.useEffect(() => {
81
- if (!r || !a) return;
82
- const t = m.current;
75
+ }, [n, l]), f.useEffect(() => {
76
+ if (!n || !a) return;
77
+ const t = v.current;
83
78
  if (!t) return;
84
79
  const e = (i) => {
85
80
  const g = i.target;
@@ -87,40 +82,40 @@ const Q = ({
87
82
  g.closest('[data-popover-close="true"]') && E();
88
83
  };
89
84
  return t.addEventListener("click", e), () => t.removeEventListener("click", e);
90
- }, [r, a]), s.useEffect(() => {
91
- if (!r) return;
85
+ }, [n, a]), f.useEffect(() => {
86
+ if (!n) return;
92
87
  const t = (e) => {
93
88
  e.key === "Escape" && E();
94
89
  };
95
90
  return window.addEventListener("keydown", t), () => window.removeEventListener("keydown", t);
96
- }, [r]), s.useEffect(() => {
97
- if (r && m.current) {
98
- const t = m.current.querySelector(
91
+ }, [n]), f.useEffect(() => {
92
+ if (n && v.current) {
93
+ const t = v.current.querySelector(
99
94
  'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
100
95
  );
101
96
  t == null || t.focus();
102
97
  }
103
- }, [r]), /* @__PURE__ */ H(S.Provider, { value: { close: E, open: _, toggle: L }, children: [
98
+ }, [n]), /* @__PURE__ */ H(W.Provider, { value: { close: E, open: _, toggle: x }, children: [
104
99
  B,
105
- r && typeof document < "u" && N.createPortal(
100
+ n && typeof document < "u" && N.createPortal(
106
101
  /* @__PURE__ */ k(
107
102
  "div",
108
103
  {
109
104
  id: "popover-panel",
110
- ref: m,
105
+ ref: v,
111
106
  role: "dialog",
112
107
  "aria-modal": "false",
113
- className: z(M.popover, l),
108
+ className: z(M.popover, c),
114
109
  "data-side": h,
115
110
  "data-align": y,
116
111
  style: {
117
112
  position: "absolute",
118
- top: (v == null ? void 0 : v.top) ?? 0,
119
- left: (v == null ? void 0 : v.left) ?? 0,
120
- visibility: v ? "visible" : "hidden",
113
+ top: (m == null ? void 0 : m.top) ?? 0,
114
+ left: (m == null ? void 0 : m.left) ?? 0,
115
+ visibility: m ? "visible" : "hidden",
121
116
  zIndex: 20
122
117
  },
123
- children: /* @__PURE__ */ k("div", { className: z(M.content, d), children: typeof p == "function" ? p({ close: E, open: _, toggle: L }) : p })
118
+ children: /* @__PURE__ */ k("div", { className: z(M.content, p), children: typeof d == "function" ? d({ close: E, open: _, toggle: x }) : d })
124
119
  }
125
120
  ),
126
121
  document.body
@@ -128,6 +123,5 @@ const Q = ({
128
123
  ] });
129
124
  };
130
125
  export {
131
- Q as Popover,
132
- K as usePopover
126
+ Q as Popover
133
127
  };
@@ -0,0 +1,8 @@
1
+ import * as React from "react";
2
+ export type PopoverAPI = {
3
+ close: () => void;
4
+ open: () => void;
5
+ toggle: () => void;
6
+ };
7
+ export declare const PopoverContext: React.Context<PopoverAPI | null>;
8
+ export declare function usePopover(): PopoverAPI;
@@ -0,0 +1,12 @@
1
+ import * as e from "react";
2
+ const t = e.createContext(null);
3
+ function r() {
4
+ const o = e.useContext(t);
5
+ if (!o)
6
+ throw new Error("usePopover must be used within a Popover");
7
+ return o;
8
+ }
9
+ export {
10
+ t as PopoverContext,
11
+ r as usePopover
12
+ };
@@ -6,6 +6,8 @@ export type { SlideInPanelProps } from './atoms/SlideInPanel/SlideInPanel';
6
6
  export { Tooltip } from './atoms/Tooltip/Tooltip';
7
7
  export { Popover } from './atoms/Popover/Popover';
8
8
  export type { PopoverProps } from './atoms/Popover/Popover';
9
+ export { usePopover } from './atoms/Popover/usePopover';
10
+ export type { PopoverAPI } from './atoms/Popover/usePopover';
9
11
  export { Account } from './molecules/Account/Account';
10
12
  export type { AccountProps } from './molecules/Account/Account';
11
13
  export { Chip } from './molecules/Chip/Chip';
@@ -6,10 +6,10 @@ import { Icon as l } from "./atoms/Icon/Icon.js";
6
6
  import { Root as d } from "./atoms/Root/Root.js";
7
7
  import { Separator as C } from "./atoms/Separator/Separator.js";
8
8
  import { Text as k } from "./atoms/Text/Text.js";
9
- import { Input as B } from "./atoms/Input/Input.js";
10
- import { Link as v } from "./atoms/Link/Link.js";
11
- import { linkClassName as L } from "./atoms/Link/linkClassName.js";
12
- import { configureLink as h, routerOverride as s } from "./atoms/Link/configureLink.js";
9
+ import { Input as v } from "./atoms/Input/Input.js";
10
+ import { Link as I } from "./atoms/Link/Link.js";
11
+ import { linkClassName as s } from "./atoms/Link/linkClassName.js";
12
+ import { configureLink as L, routerOverride as h } from "./atoms/Link/configureLink.js";
13
13
  import { LinkButton as F } from "./atoms/LinkButton/LinkButton.js";
14
14
  import { configureImage as N } from "./atoms/Image/configureImage.js";
15
15
  import { Logo as y } from "./molecules/Logo/Logo.js";
@@ -26,61 +26,63 @@ import { HorizontalScroll as _ } from "./atoms/HorizontalScroll/HorizontalScroll
26
26
  import { SlideInPanel as oo } from "./atoms/SlideInPanel/SlideInPanel.js";
27
27
  import { Tooltip as eo } from "./atoms/Tooltip/Tooltip.js";
28
28
  import { Popover as po } from "./atoms/Popover/Popover.js";
29
- import { Account as fo } from "./molecules/Account/Account.js";
30
- import { Chip as ao } from "./molecules/Chip/Chip.js";
31
- import { ToggleView as io } from "./molecules/ToggleView/ToggleView.js";
32
- import { CartSlideInPanel as uo } from "./molecules/Cart/CartSlideInPanel.js";
33
- import { StatefulButton as Co } from "./molecules/StatefulButton/StatefulButton.js";
34
- import { AnimatedCheckMark as ko } from "./molecules/StatefulButton/AnimatedCheckmark.js";
35
- import { AddToCart as Bo } from "./molecules/AddToCart/AddToCart.js";
36
- import { Modal as vo } from "./molecules/Modal/Modal.js";
29
+ import { usePopover as fo } from "./atoms/Popover/usePopover.js";
30
+ import { Account as ao } from "./molecules/Account/Account.js";
31
+ import { Chip as io } from "./molecules/Chip/Chip.js";
32
+ import { ToggleView as uo } from "./molecules/ToggleView/ToggleView.js";
33
+ import { CartSlideInPanel as Co } from "./molecules/Cart/CartSlideInPanel.js";
34
+ import { StatefulButton as ko } from "./molecules/StatefulButton/StatefulButton.js";
35
+ import { AnimatedCheckMark as vo } from "./molecules/StatefulButton/AnimatedCheckmark.js";
36
+ import { AddToCart as Io } from "./molecules/AddToCart/AddToCart.js";
37
+ import { Modal as so } from "./molecules/Modal/Modal.js";
37
38
  import { MainNav as Lo } from "./organisms/MainNav/MainNav.js";
38
- import { ChipSelector as ho } from "./organisms/ChipSelector/ChipSelector.js";
39
- import { Product as To } from "./organisms/Product/Product.js";
40
- import { Carousel as Mo } from "./organisms/Carousel/Carousel.js";
41
- import { Footer as bo } from "./organisms/Footer/Footer.js";
39
+ import { ChipSelector as To } from "./organisms/ChipSelector/ChipSelector.js";
40
+ import { Product as Mo } from "./organisms/Product/Product.js";
41
+ import { Carousel as bo } from "./organisms/Carousel/Carousel.js";
42
+ import { Footer as Ho } from "./organisms/Footer/Footer.js";
42
43
  export {
43
- fo as Account,
44
- Bo as AddToCart,
45
- ko as AnimatedCheckMark,
44
+ ao as Account,
45
+ Io as AddToCart,
46
+ vo as AnimatedCheckMark,
46
47
  V as Availability,
47
48
  q as Avatar,
48
49
  E as BannerCard,
49
50
  W as Breadcrumbs,
50
51
  e as Button,
51
52
  K as CardLink,
52
- Mo as Carousel,
53
- uo as CartSlideInPanel,
54
- ao as Chip,
55
- ho as ChipSelector,
53
+ bo as Carousel,
54
+ Co as CartSlideInPanel,
55
+ io as Chip,
56
+ To as ChipSelector,
56
57
  f as Column,
57
58
  p as Flex,
58
- bo as Footer,
59
+ Ho as Footer,
59
60
  x as Grid,
60
61
  n as Head,
61
62
  _ as HorizontalScroll,
62
63
  l as Icon,
63
- B as Input,
64
- v as Link,
64
+ v as Input,
65
+ I as Link,
65
66
  F as LinkButton,
66
67
  y as Logo,
67
68
  Lo as MainNav,
68
- vo as Modal,
69
+ so as Modal,
69
70
  Y as NotFound,
70
71
  po as Popover,
71
72
  Q as Pricing,
72
- To as Product,
73
+ Mo as Product,
73
74
  G as QuantityInput,
74
75
  d as Root,
75
76
  w as SearchBox,
76
77
  C as Separator,
77
78
  oo as SlideInPanel,
78
- Co as StatefulButton,
79
+ ko as StatefulButton,
79
80
  k as Text,
80
- io as ToggleView,
81
+ uo as ToggleView,
81
82
  eo as Tooltip,
82
83
  N as configureImage,
83
- h as configureLink,
84
- L as linkClassName,
85
- s as routerOverride
84
+ L as configureLink,
85
+ s as linkClassName,
86
+ h as routerOverride,
87
+ fo as usePopover
86
88
  };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@caseparts-org/caseblocks",
3
3
  "private": false,
4
- "version": "0.0.114",
4
+ "version": "0.0.115",
5
5
  "type": "module",
6
6
  "module": "dist/main.js",
7
7
  "types": "dist/main.d.ts",