@kolking/react-ui 1.8.19 → 1.9.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.
Files changed (61) hide show
  1. package/dist/{Input-D46mAsdt.js → Input-BG84zXZH.js} +1 -1
  2. package/dist/Thumbnails-BlXFynlF.js +38 -0
  3. package/dist/ValidationTooltip-N4SQpl9r.js +32 -0
  4. package/dist/components/Avatar/Avatar.js +12 -12
  5. package/dist/components/Badge/Badge.js +28 -29
  6. package/dist/components/Button/Button.d.ts +1 -1
  7. package/dist/components/Dialog/Dialog.js +44 -44
  8. package/dist/components/Dialog/useDialog.d.ts +1 -1
  9. package/dist/components/Dialog/useDialog.js +21 -29
  10. package/dist/components/Fields/Checkbox.d.ts +1 -1
  11. package/dist/components/Fields/Checkbox.js +1 -1
  12. package/dist/components/Fields/Input.d.ts +1 -1
  13. package/dist/components/Fields/Input.js +2 -2
  14. package/dist/components/Fields/Numeric.js +34 -36
  15. package/dist/components/Fields/Radio.d.ts +1 -1
  16. package/dist/components/Fields/Radio.js +1 -1
  17. package/dist/components/Fields/Range.d.ts +1 -1
  18. package/dist/components/Fields/Range.js +33 -33
  19. package/dist/components/Fields/Select.d.ts +1 -1
  20. package/dist/components/Fields/Select.js +1 -1
  21. package/dist/components/Fields/Switch.d.ts +1 -1
  22. package/dist/components/Fields/Switch.js +1 -1
  23. package/dist/components/Fields/Textarea.d.ts +1 -1
  24. package/dist/components/Fields/Textarea.js +1 -1
  25. package/dist/components/Fields/ValidationTooltip.d.ts +1 -1
  26. package/dist/components/Fields/ValidationTooltip.js +1 -1
  27. package/dist/components/Fields/index.js +2 -2
  28. package/dist/components/Flex/Flex.d.ts +1 -1
  29. package/dist/components/Gallery/Gallery.d.ts +11 -0
  30. package/dist/components/Gallery/Gallery.js +48 -0
  31. package/dist/components/Gallery/GalleryItem.d.ts +12 -0
  32. package/dist/components/Gallery/GalleryItem.js +41 -0
  33. package/dist/components/Gallery/index.d.ts +2 -0
  34. package/dist/components/Gallery/index.js +6 -0
  35. package/dist/components/Icon/Icon.js +125 -122
  36. package/dist/components/Icon/icons.d.ts +1 -1
  37. package/dist/components/Icon/icons.js +4 -0
  38. package/dist/components/Lightbox/Lightbox.d.ts +12 -0
  39. package/dist/components/Lightbox/Lightbox.js +150 -0
  40. package/dist/components/Lightbox/Thumbnail.d.ts +7 -0
  41. package/dist/components/Lightbox/Thumbnail.js +26 -0
  42. package/dist/components/Lightbox/Thumbnails.d.ts +11 -0
  43. package/dist/components/Lightbox/Thumbnails.js +8 -0
  44. package/dist/components/Lightbox/index.d.ts +1 -0
  45. package/dist/components/Lightbox/index.js +4 -0
  46. package/dist/components/Menu/Menu.js +44 -45
  47. package/dist/components/Menu/MenuItem.js +33 -33
  48. package/dist/components/Popover/Popover.js +40 -41
  49. package/dist/components/Segmented/Segmented.js +43 -47
  50. package/dist/components/Tag/Tag.d.ts +1 -1
  51. package/dist/components/ToggleButton/ToggleButton.d.ts +1 -1
  52. package/dist/components/ToggleButton/ToggleGroup.js +42 -40
  53. package/dist/components/Tooltip/Tooltip.js +30 -31
  54. package/dist/index.d.ts +3 -1
  55. package/dist/index.js +71 -63
  56. package/dist/styles/style.css +1 -1
  57. package/dist/styles.module-D0C-vMZX.js +7 -0
  58. package/dist/utils/helpers.d.ts +3 -1
  59. package/dist/utils/helpers.js +30 -19
  60. package/package.json +31 -32
  61. package/dist/ValidationTooltip-D8d9O6Re.js +0 -31
@@ -1,2 +1,2 @@
1
- declare const icons: readonly ["arrow-down-circle", "arrow-down-outline", "arrow-down", "arrow-left-circle", "arrow-left-outline", "arrow-left", "arrow-right-circle", "arrow-right-outline", "arrow-right", "arrow-up-circle", "arrow-up-outline", "arrow-up", "bell", "bubble-outline", "bubble", "bubbles-outline", "bubbles", "bug", "calendar-checkmark", "calendar-date", "calendar-plus", "calendar", "camera", "cart-outline", "cart", "cat", "checkmark-circle", "checkmark-outline", "checkmark", "chevron-left", "chevron-right", "clock-circle", "clock-outline", "close", "cloud-outline", "cloud", "collapse", "copy", "cross-circle", "cross-outline", "cross", "delete-outline", "delete", "denied", "disclosure", "dropdown", "envelope-outline", "envelope", "error-circle", "error-outline", "expand", "export", "eye-off", "eye", "eyeglasses", "frame", "gear", "heart-outline", "heart", "help-circle", "help-outline", "import", "info-circle", "info-outline", "key", "location-cross", "location", "lock-open", "lock", "map-outline", "map", "menu", "minus-circle", "minus-outline", "minus", "page-outline", "page", "paper-plane", "paperclip", "pencil-circle", "pencil-outline", "pencil", "person", "phone-circle", "phone-outline", "phone", "photos", "playback-next", "playback-pause", "playback-play", "playback-prev", "playback-stop", "plus-circle", "plus-outline", "plus", "printer", "profile-outline", "profile", "redo-circle", "redo-outline", "refresh", "reorder", "search", "shield-checkmark", "shield-lock", "star-circle", "star-outline", "star", "triangle-down", "triangle-left", "triangle-right", "triangle-up", "undo-circle", "undo-outline", "warning-outline", "warning"];
1
+ declare const icons: readonly ["arrow-down-circle", "arrow-down-outline", "arrow-down", "arrow-left-circle", "arrow-left-outline", "arrow-left", "arrow-right-circle", "arrow-right-outline", "arrow-right", "arrow-up-circle", "arrow-up-outline", "arrow-up", "bell", "book-outline", "book", "bubble-outline", "bubble", "bubbles-outline", "bubbles", "bug", "calendar-checkmark", "calendar-date", "calendar-plus", "calendar", "camera", "cart-outline", "cart", "cat", "checkmark-circle", "checkmark-outline", "checkmark", "chevron-left", "chevron-right", "clock-circle", "clock-outline", "close", "cloud-outline", "cloud", "collapse", "copy", "credit-card", "cross-circle", "cross-outline", "cross", "delete-outline", "delete", "denied", "disclosure", "dropdown", "envelope-outline", "envelope", "error-circle", "error-outline", "expand", "export", "eye-off", "eye", "eyeglasses", "frame", "gear", "heart-outline", "heart", "help-circle", "help-outline", "import", "info-circle", "info-outline", "key", "location-cross", "location", "lock-open", "lock", "map-outline", "map", "menu", "minus-circle", "minus-outline", "minus", "page-outline", "page", "paper-plane", "paperclip", "pencil-circle", "pencil-outline", "pencil", "person", "phone-circle", "phone-outline", "phone", "photos", "playback-next", "playback-pause", "playback-play", "playback-prev", "playback-stop", "plus-circle", "plus-outline", "plus", "printer", "profile-outline", "profile", "redo-circle", "redo-outline", "refresh", "reorder", "scissors", "search", "shield-checkmark", "shield-lock", "star-circle", "star-outline", "star", "triangle-down", "triangle-left", "triangle-right", "triangle-up", "undo-circle", "undo-outline", "warning-outline", "warning"];
2
2
  export default icons;
@@ -12,6 +12,8 @@ const e = [
12
12
  "arrow-up-outline",
13
13
  "arrow-up",
14
14
  "bell",
15
+ "book-outline",
16
+ "book",
15
17
  "bubble-outline",
16
18
  "bubble",
17
19
  "bubbles-outline",
@@ -37,6 +39,7 @@ const e = [
37
39
  "cloud",
38
40
  "collapse",
39
41
  "copy",
42
+ "credit-card",
40
43
  "cross-circle",
41
44
  "cross-outline",
42
45
  "cross",
@@ -101,6 +104,7 @@ const e = [
101
104
  "redo-outline",
102
105
  "refresh",
103
106
  "reorder",
107
+ "scissors",
104
108
  "search",
105
109
  "shield-checkmark",
106
110
  "shield-lock",
@@ -0,0 +1,12 @@
1
+ export type LightboxImage = React.ImgHTMLAttributes<HTMLImageElement>;
2
+ export type LightboxProps<T extends LightboxImage> = Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'> & {
3
+ images: T[];
4
+ selected: number;
5
+ loop?: boolean;
6
+ onSelect: (index?: number) => void;
7
+ renderImage?: (image: T) => React.ReactElement;
8
+ };
9
+ export declare const Lightbox: {
10
+ <T extends LightboxImage>({ images, selected, loop, className, children, onSelect, renderImage, ...props }: LightboxProps<T>): import("react/jsx-runtime").JSX.Element;
11
+ Thumbnails: <T extends LightboxImage>({ images, selected, className, style, imageSize: thumbnailSize, objectFit: thumbnailObjectFit, renderImage, onSelect, ...props }: import('./Thumbnails').ThumbnailsProps<T>) => import("react/jsx-runtime").JSX.Element | null;
12
+ };
@@ -0,0 +1,150 @@
1
+ import { jsxs as b, jsx as n } from "react/jsx-runtime";
2
+ import { useId as j, useRef as D, useCallback as m, useEffect as q } from "react";
3
+ import { useFloating as A, useInteractions as B, useDismiss as H, useRole as K, useListNavigation as M, FloatingPortal as V, FloatingOverlay as z, FloatingFocusManager as G } from "@floating-ui/react";
4
+ import J from "classnames";
5
+ import { Icon as v } from "../Icon/Icon.js";
6
+ import { Button as p } from "../Button/Button.js";
7
+ import { afterTransition as Q, htmlImage as U } from "../../utils/helpers.js";
8
+ import { s as e, T as W } from "../../Thumbnails-BlXFynlF.js";
9
+ const X = ({
10
+ images: x,
11
+ selected: o,
12
+ loop: c = !0,
13
+ className: I,
14
+ children: y,
15
+ onSelect: i,
16
+ renderImage: N = U,
17
+ ...w
18
+ }) => {
19
+ const F = j(), a = x.length, O = o !== void 0, s = D([]), k = document.querySelector("[data-floating-root]") ?? document.body, C = a > 1 && (c || o > 0), P = a > 1 && (c || o < a - 1), { refs: R, context: u, elements: l } = A({
20
+ open: O,
21
+ onOpenChange: (t) => {
22
+ t || d();
23
+ }
24
+ }), { getFloatingProps: L, getItemProps: T } = B([
25
+ H(u),
26
+ K(u, { role: "dialog" }),
27
+ M(u, {
28
+ loop: c,
29
+ virtual: !0,
30
+ listRef: s,
31
+ activeIndex: o,
32
+ selectedIndex: o,
33
+ orientation: "both",
34
+ focusItemOnHover: !1,
35
+ openOnArrowKeyDown: !1,
36
+ scrollItemIntoView: { inline: "nearest" },
37
+ onNavigate: (t) => {
38
+ t !== null && t !== o && (s.current[t]?.focus(), i(t));
39
+ }
40
+ })
41
+ ]), f = m(
42
+ (t) => {
43
+ !c && (t === 0 || t === a - 1) && s.current[t]?.focus();
44
+ },
45
+ [c, a]
46
+ ), d = m(() => {
47
+ l.floating?.classList.add(e.willhide), Q(l.floating, () => {
48
+ i(void 0);
49
+ });
50
+ }, [l.floating, i]), $ = m(() => {
51
+ const t = o === 0 ? a - 1 : o - 1;
52
+ i(t), f(t);
53
+ }, [a, o, f, i]), E = m(() => {
54
+ const t = o === a - 1 ? 0 : o + 1;
55
+ i(t), f(t);
56
+ }, [a, o, f, i]);
57
+ return q(() => {
58
+ const t = new IntersectionObserver(
59
+ (r) => {
60
+ r.forEach((g) => {
61
+ if (g.isIntersecting) {
62
+ const h = s.current.indexOf(g.target);
63
+ h !== -1 && h !== o && i(h);
64
+ }
65
+ });
66
+ },
67
+ {
68
+ root: l.floating,
69
+ threshold: 1
70
+ }
71
+ );
72
+ return l.floating && s.current.forEach((r) => {
73
+ r && t.observe(r);
74
+ }), () => {
75
+ t.disconnect();
76
+ };
77
+ }, [l.floating, o, i]), /* @__PURE__ */ b(V, { root: k, children: [
78
+ /* @__PURE__ */ n(z, { lockScroll: !0 }),
79
+ /* @__PURE__ */ n(G, { context: u, children: /* @__PURE__ */ b(
80
+ "div",
81
+ {
82
+ ...L(w),
83
+ ref: R.setFloating,
84
+ "data-lightbox": !0,
85
+ "data-floating-root": !0,
86
+ className: J(e.lightbox, I),
87
+ children: [
88
+ /* @__PURE__ */ b("div", { "data-lightbox-content": !0, className: e.content, children: [
89
+ /* @__PURE__ */ n("div", { "data-lightbox-images": !0, className: e.images, children: x.map((t, r) => /* @__PURE__ */ n(
90
+ "figure",
91
+ {
92
+ ref: (g) => {
93
+ s.current[r] = g;
94
+ },
95
+ id: `${F}${r}`,
96
+ "data-lightbox-image": r,
97
+ "data-selected": r === o,
98
+ tabIndex: r === o ? 0 : -1,
99
+ ...T(),
100
+ children: N({ ...t, alt: t.alt ?? `Image ${r + 1} of ${a}` })
101
+ },
102
+ r
103
+ )) }),
104
+ /* @__PURE__ */ n(
105
+ p,
106
+ {
107
+ type: "button",
108
+ variant: "tertiary",
109
+ "data-lightbox-close": !0,
110
+ "aria-label": "close lightbox",
111
+ icon: /* @__PURE__ */ n(v, { name: "close" }),
112
+ className: e.close,
113
+ onClick: d
114
+ }
115
+ ),
116
+ P && /* @__PURE__ */ n(
117
+ p,
118
+ {
119
+ type: "button",
120
+ variant: "tertiary",
121
+ "data-lightbox-next": !0,
122
+ "aria-label": "next image",
123
+ icon: /* @__PURE__ */ n(v, { name: "arrow-right" }),
124
+ className: e.next,
125
+ onClick: E
126
+ }
127
+ ),
128
+ C && /* @__PURE__ */ n(
129
+ p,
130
+ {
131
+ type: "button",
132
+ variant: "tertiary",
133
+ "data-lightbox-prev": !0,
134
+ "aria-label": "previous image",
135
+ icon: /* @__PURE__ */ n(v, { name: "arrow-left" }),
136
+ className: e.prev,
137
+ onClick: $
138
+ }
139
+ )
140
+ ] }),
141
+ y
142
+ ]
143
+ }
144
+ ) })
145
+ ] });
146
+ };
147
+ X.Thumbnails = W;
148
+ export {
149
+ X as Lightbox
150
+ };
@@ -0,0 +1,7 @@
1
+ export type ThumbnailProps = {
2
+ index: number;
3
+ selected: boolean;
4
+ children: React.ReactNode;
5
+ onSelect: (index: number) => void;
6
+ };
7
+ export declare const Thumbnail: ({ index, selected, children, onSelect }: ThumbnailProps) => import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,26 @@
1
+ import { jsx as a } from "react/jsx-runtime";
2
+ import { useRef as c, useEffect as e, useCallback as u } from "react";
3
+ const m = ({ index: r, selected: o, children: i, onSelect: t }) => {
4
+ const l = c(null);
5
+ e(() => {
6
+ o && l.current?.scrollIntoView({ inline: "center" });
7
+ }, [o]);
8
+ const n = u(() => {
9
+ t(r);
10
+ }, [r, t]);
11
+ return /* @__PURE__ */ a(
12
+ "li",
13
+ {
14
+ ref: l,
15
+ role: "option",
16
+ "aria-selected": o,
17
+ "data-selected": o,
18
+ "data-lightbox-thumbnail": r,
19
+ onClick: n,
20
+ children: i
21
+ }
22
+ );
23
+ };
24
+ export {
25
+ m as Thumbnail
26
+ };
@@ -0,0 +1,11 @@
1
+ import { default as React } from 'react';
2
+ import { LightboxImage } from './Lightbox';
3
+ export type ThumbnailsProps<T extends LightboxImage> = Omit<React.HTMLAttributes<HTMLUListElement>, 'onSelect'> & {
4
+ images: T[];
5
+ selected: number;
6
+ imageSize?: React.CSSProperties['width'];
7
+ objectFit?: React.CSSProperties['objectFit'];
8
+ renderImage?: (image: T) => React.ReactElement;
9
+ onSelect: (index: number) => void;
10
+ };
11
+ export declare const Thumbnails: <T extends LightboxImage>({ images, selected, className, style, imageSize: thumbnailSize, objectFit: thumbnailObjectFit, renderImage, onSelect, ...props }: ThumbnailsProps<T>) => import("react/jsx-runtime").JSX.Element | null;
@@ -0,0 +1,8 @@
1
+ import "react/jsx-runtime";
2
+ import "classnames";
3
+ import "./Thumbnail.js";
4
+ import "../../utils/helpers.js";
5
+ import { T as a } from "../../Thumbnails-BlXFynlF.js";
6
+ export {
7
+ a as Thumbnails
8
+ };
@@ -0,0 +1 @@
1
+ export * from './Lightbox';
@@ -0,0 +1,4 @@
1
+ import { Lightbox as t } from "./Lightbox.js";
2
+ export {
3
+ t as Lightbox
4
+ };
@@ -1,5 +1,5 @@
1
1
  import { jsxs as O, Fragment as W, jsx as t } from "react/jsx-runtime";
2
- import _, { useState as l, useRef as g, useMemo as k, useEffect as A } from "react";
2
+ import _, { useState as a, useRef as p, useMemo as k, useEffect as A } from "react";
3
3
  import { flushSync as D } from "react-dom";
4
4
  import { useFloating as H, offset as U, flip as q, size as G, autoUpdate as J, useInteractions as K, useDismiss as Q, useRole as T, useClick as V, useListNavigation as X, useMergeRefs as Y, FloatingPortal as Z, FloatingFocusManager as $, FloatingList as ee } from "@floating-ui/react";
5
5
  import te from "classnames";
@@ -7,75 +7,74 @@ import { MenuContext as oe } from "./MenuContext.js";
7
7
  import { getElementRef as ne, cssProps as se } from "../../utils/helpers.js";
8
8
  import { s as re } from "../../styles.module-DHm-YTnz.js";
9
9
  const pe = ({
10
- size: h,
11
- placement: c = "bottom-start",
12
- trigger: s,
13
- offset: R = 5,
14
- unmount: v = !0,
15
- minWidth: x,
16
- maxWidth: F,
17
- minHeight: y,
18
- maxHeight: M,
19
- className: P,
20
- children: z,
21
- onSelect: m,
22
- ...w
10
+ size: g,
11
+ placement: l = "bottom-start",
12
+ trigger: n,
13
+ offset: h = 5,
14
+ unmount: R = !0,
15
+ minWidth: v,
16
+ maxWidth: x,
17
+ minHeight: F,
18
+ maxHeight: y,
19
+ className: M,
20
+ children: P,
21
+ onSelect: c,
22
+ ...z
23
23
  }) => {
24
- const [r, u] = l(!1), [i, C] = l(null), [E, I] = l({}), f = g([]), d = g(null), { refs: o, context: e, floatingStyles: N } = H({
25
- open: r,
26
- placement: c,
27
- onOpenChange: u,
24
+ const [s, m] = a(!1), [r, w] = a(null), [C, E] = a({}), u = p([]), f = p(null), { refs: o, context: e, floatingStyles: I } = H({
25
+ open: s,
26
+ placement: l,
27
+ onOpenChange: m,
28
28
  whileElementsMounted: J,
29
29
  middleware: [
30
- U(R),
30
+ U(h),
31
31
  q({ padding: 10 }),
32
32
  G({
33
33
  padding: 10,
34
- apply({ rects: a, availableWidth: n, availableHeight: L }) {
34
+ apply({ rects: i, availableWidth: B, availableHeight: L }) {
35
35
  D(() => {
36
- I({
37
- minHeight: y,
38
- minWidth: x ?? a.reference.width,
39
- maxWidth: F ?? n,
40
- maxHeight: M ?? L
36
+ E({
37
+ minHeight: F,
38
+ minWidth: v ?? i.reference.width,
39
+ maxWidth: x ?? B,
40
+ maxHeight: y ?? L
41
41
  });
42
42
  });
43
43
  }
44
44
  })
45
45
  ]
46
- }), { getReferenceProps: S, getFloatingProps: b, getItemProps: p } = K([
46
+ }), { getReferenceProps: N, getFloatingProps: S, getItemProps: d } = K([
47
47
  Q(e),
48
48
  T(e, { role: "menu" }),
49
49
  V(e, { event: "mousedown" }),
50
50
  X(e, {
51
- listRef: f,
51
+ listRef: u,
52
52
  loop: !0,
53
- activeIndex: i,
54
- onNavigate: C
53
+ activeIndex: r,
54
+ onNavigate: w
55
55
  })
56
- ]), j = k(
57
- () => ({ active: i, setOpen: u, getItemProps: p, onSelect: m }),
58
- [i, p, m]
59
- ), B = Y([o.setReference, ne(s)]);
56
+ ]), b = k(
57
+ () => ({ active: r, setOpen: m, getItemProps: d, onSelect: c }),
58
+ [r, d, c]
59
+ ), j = Y([o.setReference, ne(n)]);
60
60
  return A(() => {
61
- var n;
62
- const a = (n = o.domReference.current) == null ? void 0 : n.closest("[data-floating-root]");
63
- d.current = a ?? document.body;
61
+ const i = o.domReference.current?.closest("[data-floating-root]");
62
+ f.current = i ?? document.body;
64
63
  }, [o]), /* @__PURE__ */ O(W, { children: [
65
64
  _.cloneElement(
66
- s,
67
- S({ ...s.props, ref: B, "data-menu-trigger": !0 })
65
+ n,
66
+ N({ ...n.props, ref: j, "data-menu-trigger": !0 })
68
67
  ),
69
- /* @__PURE__ */ t(oe.Provider, { value: j, children: (r || !v) && /* @__PURE__ */ t(Z, { root: d.current, children: /* @__PURE__ */ t($, { context: e, modal: !1, initialFocus: -1, children: /* @__PURE__ */ t(
68
+ /* @__PURE__ */ t(oe.Provider, { value: b, children: (s || !R) && /* @__PURE__ */ t(Z, { root: f.current, children: /* @__PURE__ */ t($, { context: e, modal: !1, initialFocus: -1, children: /* @__PURE__ */ t(
70
69
  "div",
71
70
  {
72
- ...b(w),
71
+ ...S(z),
73
72
  ref: o.setFloating,
74
- "data-open": r,
75
- "data-menu": c,
76
- className: te(re.menu, P),
77
- style: { ...N, ...E, ...se({ size: h }) },
78
- children: /* @__PURE__ */ t(ee, { elementsRef: f, children: z })
73
+ "data-open": s,
74
+ "data-menu": l,
75
+ className: te(re.menu, M),
76
+ style: { ...I, ...C, ...se({ size: g }) },
77
+ children: /* @__PURE__ */ t(ee, { elementsRef: u, children: P })
79
78
  }
80
79
  ) }) }) })
81
80
  ] });
@@ -1,47 +1,47 @@
1
- import { jsx as u, jsxs as y, Fragment as M } from "react/jsx-runtime";
2
- import { useContext as N, useCallback as w } from "react";
3
- import { useListItem as A } from "@floating-ui/react";
4
- import E from "classnames";
5
- import { MenuContext as F } from "./MenuContext.js";
6
- import { wrapNode as d } from "../../utils/helpers.js";
7
- import { s as f } from "../../styles.module-DHm-YTnz.js";
8
- const C = ({
9
- as: o,
10
- scheme: c = "default",
11
- icon: r,
12
- title: a,
13
- selected: s,
14
- children: n,
15
- className: l,
16
- onClick: t,
1
+ import { jsx as p, jsxs as h, Fragment as j } from "react/jsx-runtime";
2
+ import { useContext as y, useCallback as M } from "react";
3
+ import { useListItem as N } from "@floating-ui/react";
4
+ import w from "classnames";
5
+ import { MenuContext as A } from "./MenuContext.js";
6
+ import { wrapNode as u } from "../../utils/helpers.js";
7
+ import { s as d } from "../../styles.module-DHm-YTnz.js";
8
+ const z = ({
9
+ as: e,
10
+ scheme: l = "default",
11
+ icon: o,
12
+ title: n,
13
+ selected: m,
14
+ children: r,
15
+ className: f,
16
+ onClick: a,
17
17
  ...x
18
18
  }) => {
19
- const { active: b, setOpen: i, getItemProps: v, onSelect: e } = N(F), { ref: I, index: m } = A(), p = m === b, g = o ?? "button", h = w(
20
- (j) => {
21
- i(!1), e == null || e(m), t == null || t(j);
19
+ const { active: b, setOpen: s, getItemProps: v, onSelect: i } = y(A), { ref: k, index: t } = N(), c = t === b, C = e ?? "button", I = M(
20
+ (g) => {
21
+ s(!1), i?.(t), a?.(g);
22
22
  },
23
- [m, i, e, t]
23
+ [t, s, i, a]
24
24
  );
25
- return /* @__PURE__ */ u(
26
- g,
25
+ return /* @__PURE__ */ p(
26
+ C,
27
27
  {
28
28
  ...x,
29
- ref: I,
29
+ ref: k,
30
30
  role: "menuitem",
31
31
  "data-menu-item": !0,
32
- "data-active": p || s,
33
- "data-selected": s,
34
- tabIndex: p ? 0 : -1,
35
- type: o ? void 0 : "button",
36
- className: E(f.menuitem, f[c], l),
37
- ...v({ onClick: h }),
38
- children: n ? d(n, "span") : /* @__PURE__ */ y(M, { children: [
39
- r === "blank" ? /* @__PURE__ */ u("div", { "data-icon-blank": !0 }) : r,
40
- a !== void 0 && d(a, "span")
32
+ "data-active": c || m,
33
+ "data-selected": m,
34
+ tabIndex: c ? 0 : -1,
35
+ type: e ? void 0 : "button",
36
+ className: w(d.menuitem, d[l], f),
37
+ ...v({ onClick: I }),
38
+ children: r ? u(r, "span") : /* @__PURE__ */ h(j, { children: [
39
+ o === "blank" ? /* @__PURE__ */ p("div", { "data-icon-blank": !0 }) : o,
40
+ n !== void 0 && u(n, "span")
41
41
  ] })
42
42
  }
43
43
  );
44
44
  };
45
45
  export {
46
- C as MenuItem
46
+ z as MenuItem
47
47
  };
@@ -1,65 +1,64 @@
1
- import { jsxs as w, Fragment as C, jsx as r } from "react/jsx-runtime";
2
- import D, { useRef as H, useState as S, useEffect as U, useLayoutEffect as X } from "react";
3
- import b from "classnames";
4
- import { useFloating as B, offset as I, flip as L, shift as N, autoUpdate as T, useInteractions as q, useDismiss as z, useRole as A, useHover as G, useFocus as J, useClick as K, useMergeRefs as Q, FloatingPortal as V, FloatingFocusManager as W } from "@floating-ui/react";
5
- import { getElementRef as Y } from "../../utils/helpers.js";
6
- const Z = "Popover_popover_sXXB0", $ = {
7
- popover: Z
8
- }, le = ({
9
- open: m,
1
+ import { jsxs as j, Fragment as w, jsx as r } from "react/jsx-runtime";
2
+ import C, { useRef as D, useState as H, useEffect as S, useLayoutEffect as U } from "react";
3
+ import X from "classnames";
4
+ import { useFloating as b, offset as B, flip as I, shift as L, autoUpdate as N, useInteractions as T, useDismiss as q, useRole as z, useHover as A, useFocus as G, useClick as J, useMergeRefs as K, FloatingPortal as Q, FloatingFocusManager as V } from "@floating-ui/react";
5
+ import { getElementRef as W } from "../../utils/helpers.js";
6
+ const Y = "Popover_popover_sXXB0", Z = {
7
+ popover: Y
8
+ }, ne = ({
9
+ open: d,
10
10
  event: s = "click",
11
11
  placement: c = "bottom",
12
12
  trigger: t,
13
- offset: g = 5,
13
+ offset: m = 5,
14
14
  modal: f = !1,
15
15
  anchor: n,
16
16
  boundary: i,
17
17
  disabled: l,
18
- minWidth: R,
19
- maxWidth: v,
20
- className: F,
21
- children: P,
22
- onToggle: h,
23
- ...E
18
+ minWidth: g,
19
+ maxWidth: R,
20
+ className: v,
21
+ children: F,
22
+ onToggle: P,
23
+ ...h
24
24
  }) => {
25
- const p = H(null), [x, y] = S(!1), a = m ?? x, O = h ?? y, { refs: e, context: o, floatingStyles: _ } = B({
25
+ const p = D(null), [E, x] = H(!1), a = d ?? E, y = P ?? x, { refs: e, context: o, floatingStyles: O } = b({
26
26
  open: a,
27
27
  placement: c,
28
- onOpenChange: O,
29
- whileElementsMounted: T,
28
+ onOpenChange: y,
29
+ whileElementsMounted: N,
30
30
  middleware: [
31
- I(g),
32
- L({ padding: 10, boundary: i }),
33
- N({ padding: 5, boundary: i })
31
+ B(m),
32
+ I({ padding: 10, boundary: i }),
33
+ L({ padding: 5, boundary: i })
34
34
  ]
35
- }), { getReferenceProps: k, getFloatingProps: M } = q([
36
- z(o),
37
- A(o, { role: "dialog" }),
38
- G(o, { move: !1, enabled: s.includes("hover") }),
39
- J(o, { enabled: s.includes("focus") }),
40
- K(o, { enabled: s.includes("click") })
41
- ]), j = Q([e.setReference, Y(t)]);
42
- return U(() => {
43
- var d;
44
- const u = (d = e.domReference.current) == null ? void 0 : d.closest("[data-floating-root]");
35
+ }), { getReferenceProps: _, getFloatingProps: k } = T([
36
+ q(o),
37
+ z(o, { role: "dialog" }),
38
+ A(o, { move: !1, enabled: s.includes("hover") }),
39
+ G(o, { enabled: s.includes("focus") }),
40
+ J(o, { enabled: s.includes("click") })
41
+ ]), M = K([e.setReference, W(t)]);
42
+ return S(() => {
43
+ const u = e.domReference.current?.closest("[data-floating-root]");
45
44
  !l && u && (p.current = u);
46
- }, [e, l]), X(() => {
45
+ }, [e, l]), U(() => {
47
46
  n && e.setPositionReference(n);
48
- }, [e, n]), l ? t : /* @__PURE__ */ w(C, { children: [
49
- D.cloneElement(t, k({ ...t.props, ref: j })),
50
- a && /* @__PURE__ */ r(V, { root: p, children: /* @__PURE__ */ r(W, { context: o, modal: f, visuallyHiddenDismiss: f, children: /* @__PURE__ */ r(
47
+ }, [e, n]), l ? t : /* @__PURE__ */ j(w, { children: [
48
+ C.cloneElement(t, _({ ...t.props, ref: M })),
49
+ a && /* @__PURE__ */ r(Q, { root: p, children: /* @__PURE__ */ r(V, { context: o, modal: f, visuallyHiddenDismiss: f, children: /* @__PURE__ */ r(
51
50
  "div",
52
51
  {
53
- ...M(E),
52
+ ...k(h),
54
53
  ref: e.setFloating,
55
54
  "data-popover": c,
56
- className: b($.popover, F),
57
- style: { ..._, minWidth: R, maxWidth: v },
58
- children: P
55
+ className: X(Z.popover, v),
56
+ style: { ...O, minWidth: g, maxWidth: R },
57
+ children: F
59
58
  }
60
59
  ) }) })
61
60
  ] });
62
61
  };
63
62
  export {
64
- le as Popover
63
+ ne as Popover
65
64
  };