@solibo/solibo-ui 1.0.15 → 1.0.17
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/assets/index.css +1 -1
- package/dist/assets/index10.css +1 -1
- package/dist/assets/index12.css +1 -1
- package/dist/assets/index13.css +1 -1
- package/dist/assets/index14.css +1 -1
- package/dist/assets/index15.css +1 -1
- package/dist/assets/index18.css +1 -1
- package/dist/assets/index23.css +1 -1
- package/dist/assets/index24.css +1 -1
- package/dist/assets/index25.css +1 -1
- package/dist/assets/index26.css +1 -1
- package/dist/assets/index27.css +1 -1
- package/dist/assets/index29.css +1 -1
- package/dist/assets/index3.css +1 -1
- package/dist/assets/index30.css +1 -1
- package/dist/assets/index31.css +1 -1
- package/dist/assets/index33.css +1 -1
- package/dist/assets/index34.css +1 -1
- package/dist/assets/index35.css +1 -1
- package/dist/assets/index36.css +1 -1
- package/dist/assets/index37.css +1 -1
- package/dist/assets/index39.css +1 -1
- package/dist/assets/index4.css +1 -1
- package/dist/assets/index43.css +1 -1
- package/dist/assets/index44.css +1 -1
- package/dist/assets/index45.css +1 -1
- package/dist/assets/index47.css +1 -1
- package/dist/assets/index48.css +1 -1
- package/dist/assets/index49.css +1 -1
- package/dist/assets/index6.css +1 -1
- package/dist/assets/index8.css +1 -1
- package/dist/assets/index9.css +1 -1
- package/dist/assets/menu-popover.css +1 -1
- package/dist/components/app-link/index.cjs +1 -1
- package/dist/components/app-link/index.js +8 -8
- package/dist/components/aside/index.cjs +1 -1
- package/dist/components/aside/index.js +11 -11
- package/dist/components/avatar/index.cjs +1 -1
- package/dist/components/avatar/index.cjs.map +1 -1
- package/dist/components/avatar/index.js +58 -58
- package/dist/components/badge/index.cjs +1 -1
- package/dist/components/badge/index.js +27 -27
- package/dist/components/banner/index.cjs +1 -1
- package/dist/components/banner/index.js +14 -14
- package/dist/components/button/index.cjs +1 -1
- package/dist/components/button/index.js +18 -18
- package/dist/components/card/index.cjs +1 -1
- package/dist/components/card/index.js +46 -46
- package/dist/components/checkbox/index.cjs +1 -1
- package/dist/components/checkbox/index.js +7 -7
- package/dist/components/collapsible/index.cjs +1 -1
- package/dist/components/collapsible/index.cjs.map +1 -1
- package/dist/components/collapsible/index.js +18 -37
- package/dist/components/collapsible/index.js.map +1 -1
- package/dist/components/controls/index.cjs +1 -1
- package/dist/components/controls/index.cjs.map +1 -1
- package/dist/components/controls/index.js +110 -90
- package/dist/components/controls/index.js.map +1 -1
- package/dist/components/croppable/index.cjs +1 -1
- package/dist/components/croppable/index.js +181 -181
- package/dist/components/dialog/index.cjs +1 -1
- package/dist/components/dialog/index.js +31 -31
- package/dist/components/dropdown/index.cjs +1 -1
- package/dist/components/dropdown/index.js +81 -81
- package/dist/components/editor/index.cjs +16 -16
- package/dist/components/editor/index.cjs.map +1 -1
- package/dist/components/editor/index.js +196 -196
- package/dist/components/file/index.cjs +1 -1
- package/dist/components/file/index.js +24 -24
- package/dist/components/header/index.cjs +1 -1
- package/dist/components/header/index.cjs.map +1 -1
- package/dist/components/header/index.js +14 -14
- package/dist/components/icon/index.cjs +1 -1
- package/dist/components/icon/index.js +20 -20
- package/dist/components/input/index.cjs +1 -1
- package/dist/components/input/index.js +2 -2
- package/dist/components/list/index.cjs +1 -1
- package/dist/components/list/index.js +24 -24
- package/dist/components/loading/index.cjs +1 -1
- package/dist/components/loading/index.js +11 -11
- package/dist/components/menu/index.cjs +1 -1
- package/dist/components/menu/index.js +1 -1
- package/dist/components/message/index.cjs +1 -1
- package/dist/components/message/index.cjs.map +1 -1
- package/dist/components/message/index.js +26 -26
- package/dist/components/messages/index.cjs +1 -1
- package/dist/components/messages/index.js +20 -20
- package/dist/components/nav/index.cjs +1 -1
- package/dist/components/nav/index.js +13 -13
- package/dist/components/popover/index.cjs +1 -1
- package/dist/components/popover/index.js +38 -38
- package/dist/components/portal/index.cjs +1 -1
- package/dist/components/portal/index.js +7 -7
- package/dist/components/search/index.cjs +1 -1
- package/dist/components/search/index.cjs.map +1 -1
- package/dist/components/search/index.js +36 -36
- package/dist/components/select/index.cjs +1 -1
- package/dist/components/select/index.js +2 -2
- package/dist/components/sortable/index.cjs +1 -1
- package/dist/components/sortable/index.js +74 -74
- package/dist/components/textarea/index.cjs +1 -1
- package/dist/components/textarea/index.js +15 -15
- package/dist/components/toasts/index.cjs +1 -1
- package/dist/components/toasts/index.js +4 -4
- package/dist/components/toggle/index.cjs +1 -1
- package/dist/components/toggle/index.js +6 -6
- package/dist/components/tooltip/index.cjs +1 -1
- package/dist/components/tooltip/index.js +1 -1
- package/dist/{icons-Dj0vEOCB.js → icons-BkaMeh-J.js} +2 -1
- package/dist/{icons-DaZGJzI0.cjs.map → icons-BkaMeh-J.js.map} +1 -1
- package/dist/icons-Lq3pr85X.cjs +2 -0
- package/dist/icons-Lq3pr85X.cjs.map +1 -0
- package/dist/{index-DE2nzqL5.js → index-C-ESxR26.js} +24 -24
- package/dist/{index-DE2nzqL5.js.map → index-C-ESxR26.js.map} +1 -1
- package/dist/{index-Dn1v0qm6.cjs → index-CXge5nFf.cjs} +2 -2
- package/dist/{index-Dn1v0qm6.cjs.map → index-CXge5nFf.cjs.map} +1 -1
- package/dist/{index-CgA0NUMD.js → index-Rm3D-iwf.js} +2 -2
- package/dist/{index-CgA0NUMD.js.map → index-Rm3D-iwf.js.map} +1 -1
- package/dist/index-lALToPBm.cjs +2 -0
- package/dist/{index-DF8JisYI.cjs.map → index-lALToPBm.cjs.map} +1 -1
- package/dist/index.cjs +1 -1
- package/dist/index.d.ts +4 -1
- package/dist/index.js +2 -2
- package/dist/{menu-popover-jTTxzTGZ.cjs → menu-popover-D1ALaiV5.cjs} +2 -2
- package/dist/{menu-popover-jTTxzTGZ.cjs.map → menu-popover-D1ALaiV5.cjs.map} +1 -1
- package/dist/{menu-popover-SiOOwab-.js → menu-popover-DQHDIw-8.js} +12 -12
- package/dist/{menu-popover-SiOOwab-.js.map → menu-popover-DQHDIw-8.js.map} +1 -1
- package/dist/tokens.json +1 -1
- package/package.json +1 -1
- package/dist/icons-DaZGJzI0.cjs +0 -2
- package/dist/icons-Dj0vEOCB.js.map +0 -1
- package/dist/index-DF8JisYI.cjs +0 -2
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
import { jsx as
|
|
1
|
+
import { jsx as l } from "react/jsx-runtime";
|
|
2
2
|
import { t as r } from "../../classix-DG18itHa.js";
|
|
3
|
-
import { useState as
|
|
4
|
-
import { i as h } from "../../icons-
|
|
5
|
-
import '../../assets/index12.css';const m = "
|
|
3
|
+
import { useState as f } from "react";
|
|
4
|
+
import { i as h } from "../../icons-BkaMeh-J.js";
|
|
5
|
+
import '../../assets/index12.css';const m = "_nav_1hgi7_3", u = "_label_1hgi7_9", v = "_horizontal_1hgi7_17", g = "_sidebar_1hgi7_27", w = "_tabs_1hgi7_66", z = "_pills_1hgi7_86", a = {
|
|
6
6
|
nav: m,
|
|
7
7
|
label: u,
|
|
8
8
|
horizontal: v,
|
|
9
|
-
sidebar:
|
|
9
|
+
sidebar: g,
|
|
10
10
|
tabs: w,
|
|
11
11
|
pills: z
|
|
12
12
|
}, N = {
|
|
@@ -17,24 +17,24 @@ import '../../assets/index12.css';const m = "_nav_1fy2h_3", u = "_label_1fy2h_9"
|
|
|
17
17
|
}, T = ({
|
|
18
18
|
className: n,
|
|
19
19
|
...s
|
|
20
|
-
}) => /* @__PURE__ */
|
|
20
|
+
}) => /* @__PURE__ */ l("span", { className: r(n, a.label), ...s, "data-component": "navlabel" }), V = ({
|
|
21
21
|
animation: n,
|
|
22
22
|
children: s,
|
|
23
23
|
className: c,
|
|
24
24
|
horizontal: e = !1,
|
|
25
25
|
variant: o = "default",
|
|
26
|
-
...
|
|
26
|
+
...p
|
|
27
27
|
}) => {
|
|
28
|
-
const [
|
|
28
|
+
const [d, i] = f(!1), _ = {
|
|
29
29
|
"--icon-svg": h("chevron")
|
|
30
30
|
};
|
|
31
|
-
return /* @__PURE__ */
|
|
31
|
+
return /* @__PURE__ */ l("nav", { className: r(c, e && a.horizontal, a.nav, N[o]), "data-animation": n, "data-open": d ? "true" : "false", "data-orientation": e ? "horizontal" : "vertical", onBlurCapture: (t) => {
|
|
32
32
|
if (o !== "pills" || window.innerWidth > 960) return;
|
|
33
|
-
const
|
|
34
|
-
t.currentTarget.contains(
|
|
33
|
+
const b = t.relatedTarget;
|
|
34
|
+
t.currentTarget.contains(b) || i(!1);
|
|
35
35
|
}, onClick: () => {
|
|
36
|
-
o !== "pills" || window.innerWidth > 960 ||
|
|
37
|
-
}, style:
|
|
36
|
+
o !== "pills" || window.innerWidth > 960 || i((t) => !t);
|
|
37
|
+
}, style: _, ...p, "data-component": "nav", children: s });
|
|
38
38
|
};
|
|
39
39
|
export {
|
|
40
40
|
V as Nav,
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index49.css');const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index49.css');const m=require("react/jsx-runtime"),k=require("../../classix-5H4IWnMA.cjs"),o=require("react"),S=require("react-dom"),K=require("../button/index.cjs"),O="_popover_14bo5_1",I="_inline_14bo5_6",N="_below_14bo5_47",H="_above_14bo5_52",W="_left_14bo5_62",M="_right_14bo5_67",U="_trigger_14bo5_72",r={popover:O,inline:I,"popover-panel":"_popover-panel_14bo5_26",below:N,above:H,"inline-panel":"_inline-panel_14bo5_57",left:W,right:M,trigger:U,"inline-trigger":"_inline-trigger_14bo5_76"},X=({children:v,inline:s=!1,triggerAccessibleLabel:C,triggerAriaHasPopup:T,triggerButtonContent:z})=>{var B;const h=o.useRef(null),y=o.useRef(void 0),b=o.useRef(null),P=o.useId(),p=o.useRef(null),[t,R]=o.useState(!1),[f,D]=o.useState(!1),[d,x]=o.useState("right"),_=({initialFocus:e}={})=>{y.current=e,D(!1),x("right"),R(!0)},l=o.useCallback(({restoreFocus:e=!0}={})=>{var i;R(!1),e&&((i=p.current)==null||i.focus())},[]),L=e=>{t&&e.key==="Escape"&&l()},j=e=>{if(!t){if(e.key==="ArrowDown"){e.preventDefault(),_({initialFocus:"first"});return}e.key==="ArrowUp"&&(e.preventDefault(),_({initialFocus:"last"}))}};o.useEffect(()=>{if(!t)return;const e=i=>{var n,g;const u=i.target;(n=h.current)!=null&&n.contains(u)||(g=b.current)!=null&&g.contains(u)||l({restoreFocus:!1})};return document.addEventListener("mousedown",e),()=>{document.removeEventListener("mousedown",e)}},[l,t]);const a=o.useCallback(()=>{const e=b.current,i=p.current;if(!e||!i)return;const u=e.getBoundingClientRect(),n=i.getBoundingClientRect(),g=n.top,E=window.innerHeight-n.bottom;D(u.height>E&&g>E),x(u.width>window.innerWidth-n.left&&n.right>window.innerWidth-n.left?"left":"right")},[]);o.useLayoutEffect(()=>{if(t)return a(),window.addEventListener("resize",a),window.addEventListener("scroll",a,!0),()=>{window.removeEventListener("resize",a),window.removeEventListener("scroll",a,!0)}},[t,a]);const F=e=>{e.preventDefault(),e.stopPropagation(),t?l({restoreFocus:!1}):_()},q={"aria-controls":t?P:void 0,"aria-expanded":t,"aria-haspopup":T,"aria-label":C,className:s?r["inline-trigger"]:r.trigger,onClick:F,onKeyDown:j},c=s?(B=p.current)==null?void 0:B.getBoundingClientRect():void 0,A=[d==="left"?"translateX(-100%)":"",f?"translateY(calc(-100% - var(--shape-spacing-2xs)))":""].filter(Boolean).join(" "),w=t?m.jsx("div",{className:k.t(r["popover-panel"],r[f?"above":"below"],s&&r["inline-panel"],!s&&r[d]),"data-horizontal-placement":d,"data-placement":f?"above":"below",id:P,ref:b,style:c?{left:d==="left"?c.right:c.left,position:"fixed",top:f?c.top:c.bottom,transform:A||void 0}:void 0,children:typeof v=="function"?v({close:l,initialFocus:y.current,isOpen:t}):v}):null;return m.jsxs("div",{className:k.t(r.popover,s&&r.inline),"data-open":t,onKeyDown:L,onClick:e=>{e.preventDefault(),e.stopPropagation()},ref:h,"data-component":"popover",children:[m.jsx(K.Button,{...q,ref:p,variant:"simple",children:z}),s&&w&&typeof document<"u"?S.createPortal(w,document.body):w]})};exports.Popover=X;
|
|
2
2
|
//# sourceMappingURL=index.cjs.map
|
|
@@ -1,40 +1,40 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import { t as
|
|
3
|
-
import { useRef as g, useId as H, useState as
|
|
1
|
+
import { jsx as z, jsxs as O } from "react/jsx-runtime";
|
|
2
|
+
import { t as C } from "../../classix-DG18itHa.js";
|
|
3
|
+
import { useRef as g, useId as H, useState as b, useCallback as L, useEffect as W, useLayoutEffect as S } from "react";
|
|
4
4
|
import { createPortal as U } from "react-dom";
|
|
5
5
|
import { Button as X } from "../button/index.js";
|
|
6
|
-
import '../../assets/index49.css';const Y = "
|
|
6
|
+
import '../../assets/index49.css';const Y = "_popover_14bo5_1", q = "_inline_14bo5_6", G = "_below_14bo5_47", J = "_above_14bo5_52", M = "_left_14bo5_62", Q = "_right_14bo5_67", V = "_trigger_14bo5_72", n = {
|
|
7
7
|
popover: Y,
|
|
8
8
|
inline: q,
|
|
9
|
-
"popover-panel": "_popover-
|
|
9
|
+
"popover-panel": "_popover-panel_14bo5_26",
|
|
10
10
|
below: G,
|
|
11
11
|
above: J,
|
|
12
|
-
"inline-panel": "_inline-
|
|
12
|
+
"inline-panel": "_inline-panel_14bo5_57",
|
|
13
13
|
left: M,
|
|
14
14
|
right: Q,
|
|
15
15
|
trigger: V,
|
|
16
|
-
"inline-trigger": "_inline-
|
|
16
|
+
"inline-trigger": "_inline-trigger_14bo5_76"
|
|
17
17
|
}, ie = ({
|
|
18
18
|
children: v,
|
|
19
19
|
inline: i = !1,
|
|
20
|
-
triggerAccessibleLabel:
|
|
21
|
-
triggerAriaHasPopup:
|
|
20
|
+
triggerAccessibleLabel: T,
|
|
21
|
+
triggerAriaHasPopup: x,
|
|
22
22
|
triggerButtonContent: F
|
|
23
23
|
}) => {
|
|
24
|
-
var
|
|
25
|
-
const
|
|
24
|
+
var R;
|
|
25
|
+
const h = g(null), y = g(void 0), m = g(null), P = H(), p = g(null), [o, D] = b(!1), [f, B] = b(!1), [u, E] = b("right"), w = ({
|
|
26
26
|
initialFocus: e
|
|
27
27
|
} = {}) => {
|
|
28
|
-
|
|
29
|
-
}, a =
|
|
28
|
+
y.current = e, B(!1), E("right"), D(!0);
|
|
29
|
+
}, a = L(({
|
|
30
30
|
restoreFocus: e = !0
|
|
31
31
|
} = {}) => {
|
|
32
32
|
var r;
|
|
33
|
-
|
|
33
|
+
D(!1), e && ((r = p.current) == null || r.focus());
|
|
34
34
|
}, []), A = (e) => {
|
|
35
|
-
|
|
35
|
+
o && e.key === "Escape" && a();
|
|
36
36
|
}, K = (e) => {
|
|
37
|
-
if (!
|
|
37
|
+
if (!o) {
|
|
38
38
|
if (e.key === "ArrowDown") {
|
|
39
39
|
e.preventDefault(), w({
|
|
40
40
|
initialFocus: "first"
|
|
@@ -47,57 +47,57 @@ import '../../assets/index49.css';const Y = "_popover_1e3fx_1", q = "_inline_1e3
|
|
|
47
47
|
}
|
|
48
48
|
};
|
|
49
49
|
W(() => {
|
|
50
|
-
if (!
|
|
50
|
+
if (!o)
|
|
51
51
|
return;
|
|
52
52
|
const e = (r) => {
|
|
53
|
-
var
|
|
53
|
+
var t, d;
|
|
54
54
|
const c = r.target;
|
|
55
|
-
(
|
|
55
|
+
(t = h.current) != null && t.contains(c) || (d = m.current) != null && d.contains(c) || a({
|
|
56
56
|
restoreFocus: !1
|
|
57
57
|
});
|
|
58
58
|
};
|
|
59
59
|
return document.addEventListener("mousedown", e), () => {
|
|
60
60
|
document.removeEventListener("mousedown", e);
|
|
61
61
|
};
|
|
62
|
-
}, [a,
|
|
63
|
-
const s =
|
|
64
|
-
const e = m.current, r =
|
|
62
|
+
}, [a, o]);
|
|
63
|
+
const s = L(() => {
|
|
64
|
+
const e = m.current, r = p.current;
|
|
65
65
|
if (!e || !r) return;
|
|
66
|
-
const c = e.getBoundingClientRect(),
|
|
67
|
-
|
|
66
|
+
const c = e.getBoundingClientRect(), t = r.getBoundingClientRect(), d = t.top, k = window.innerHeight - t.bottom;
|
|
67
|
+
B(c.height > k && d > k), E(c.width > window.innerWidth - t.left && t.right > window.innerWidth - t.left ? "left" : "right");
|
|
68
68
|
}, []);
|
|
69
69
|
S(() => {
|
|
70
|
-
if (
|
|
70
|
+
if (o)
|
|
71
71
|
return s(), window.addEventListener("resize", s), window.addEventListener("scroll", s, !0), () => {
|
|
72
72
|
window.removeEventListener("resize", s), window.removeEventListener("scroll", s, !0);
|
|
73
73
|
};
|
|
74
|
-
}, [
|
|
74
|
+
}, [o, s]);
|
|
75
75
|
const j = (e) => {
|
|
76
|
-
e.preventDefault(), e.stopPropagation(),
|
|
76
|
+
e.preventDefault(), e.stopPropagation(), o ? a({
|
|
77
77
|
restoreFocus: !1
|
|
78
78
|
}) : w();
|
|
79
79
|
}, I = {
|
|
80
|
-
"aria-controls":
|
|
81
|
-
"aria-expanded":
|
|
82
|
-
"aria-haspopup":
|
|
83
|
-
"aria-label":
|
|
80
|
+
"aria-controls": o ? P : void 0,
|
|
81
|
+
"aria-expanded": o,
|
|
82
|
+
"aria-haspopup": x,
|
|
83
|
+
"aria-label": T,
|
|
84
84
|
className: i ? n["inline-trigger"] : n.trigger,
|
|
85
85
|
onClick: j,
|
|
86
86
|
onKeyDown: K
|
|
87
|
-
}, l = i ? (
|
|
87
|
+
}, l = i ? (R = p.current) == null ? void 0 : R.getBoundingClientRect() : void 0, N = [u === "left" ? "translateX(-100%)" : "", f ? "translateY(calc(-100% - var(--shape-spacing-2xs)))" : ""].filter(Boolean).join(" "), _ = o ? /* @__PURE__ */ z("div", { className: C(n["popover-panel"], n[f ? "above" : "below"], i && n["inline-panel"], !i && n[u]), "data-horizontal-placement": u, "data-placement": f ? "above" : "below", id: P, ref: m, style: l ? {
|
|
88
88
|
left: u === "left" ? l.right : l.left,
|
|
89
89
|
position: "fixed",
|
|
90
|
-
top:
|
|
90
|
+
top: f ? l.top : l.bottom,
|
|
91
91
|
transform: N || void 0
|
|
92
92
|
} : void 0, children: typeof v == "function" ? v({
|
|
93
93
|
close: a,
|
|
94
|
-
initialFocus:
|
|
95
|
-
isOpen:
|
|
94
|
+
initialFocus: y.current,
|
|
95
|
+
isOpen: o
|
|
96
96
|
}) : v }) : null;
|
|
97
|
-
return /* @__PURE__ */ O("div", { className:
|
|
97
|
+
return /* @__PURE__ */ O("div", { className: C(n.popover, i && n.inline), "data-open": o, onKeyDown: A, onClick: (e) => {
|
|
98
98
|
e.preventDefault(), e.stopPropagation();
|
|
99
|
-
}, ref:
|
|
100
|
-
/* @__PURE__ */
|
|
99
|
+
}, ref: h, "data-component": "popover", children: [
|
|
100
|
+
/* @__PURE__ */ z(X, { ...I, ref: p, variant: "simple", children: F }),
|
|
101
101
|
i && _ && typeof document < "u" ? U(_, document.body) : _
|
|
102
102
|
] });
|
|
103
103
|
};
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index10.css');const e=require("react/jsx-runtime"),i=require("../../classix-5H4IWnMA.cjs"),c=require("../button/index.cjs"),a=require("../icon/index.cjs"),l=require("../aside/index.cjs"),_=require("../branding/index.cjs"),d=require("../figure/index.cjs"),u=require("../nav/index.cjs"),g="
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index10.css');const e=require("react/jsx-runtime"),i=require("../../classix-5H4IWnMA.cjs"),c=require("../button/index.cjs"),a=require("../icon/index.cjs"),l=require("../aside/index.cjs"),_=require("../branding/index.cjs"),d=require("../figure/index.cjs"),u=require("../nav/index.cjs"),g="_portal_663w8_41",p="_content_663w8_251",x="_toggle_663w8_258",m="_open_663w8_311",n={portal:g,content:p,toggle:x,open:m},j=({children:t,portals:o,open:s,setOpen:r})=>e.jsxs(l.Aside,{className:i.t(n.portal,s&&n.open),sticky:!0,"data-component":"portal",children:[e.jsx(c.Button,{className:n.toggle,onClick:()=>r(!s),variant:"tertiary",children:e.jsx(a.Icon,{name:"sidebar"})}),e.jsx(d.Figure,{children:e.jsx(_.Branding,{name:"logo",size:48,variant:"white"})}),e.jsxs("div",{className:n.content,children:[o&&e.jsx(u.Nav,{horizontal:!0,children:o}),t&&t]})]});exports.Portal=j;
|
|
2
2
|
//# sourceMappingURL=index.cjs.map
|
|
@@ -4,13 +4,13 @@ import { Button as c } from "../button/index.js";
|
|
|
4
4
|
import { Icon as l } from "../icon/index.js";
|
|
5
5
|
import { Aside as s } from "../aside/index.js";
|
|
6
6
|
import { Branding as p } from "../branding/index.js";
|
|
7
|
-
import { Figure as
|
|
8
|
-
import { Nav as
|
|
9
|
-
import '../../assets/index10.css';const
|
|
10
|
-
portal:
|
|
7
|
+
import { Figure as _ } from "../figure/index.js";
|
|
8
|
+
import { Nav as g } from "../nav/index.js";
|
|
9
|
+
import '../../assets/index10.css';const d = "_portal_663w8_41", f = "_content_663w8_251", h = "_toggle_663w8_258", w = "_open_663w8_311", t = {
|
|
10
|
+
portal: d,
|
|
11
11
|
content: f,
|
|
12
12
|
toggle: h,
|
|
13
|
-
open:
|
|
13
|
+
open: w
|
|
14
14
|
}, B = ({
|
|
15
15
|
children: r,
|
|
16
16
|
portals: n,
|
|
@@ -18,9 +18,9 @@ import '../../assets/index10.css';const g = "_portal_1j8wd_41", f = "_content_1j
|
|
|
18
18
|
setOpen: a
|
|
19
19
|
}) => /* @__PURE__ */ i(s, { className: m(t.portal, e && t.open), sticky: !0, "data-component": "portal", children: [
|
|
20
20
|
/* @__PURE__ */ o(c, { className: t.toggle, onClick: () => a(!e), variant: "tertiary", children: /* @__PURE__ */ o(l, { name: "sidebar" }) }),
|
|
21
|
-
/* @__PURE__ */ o(
|
|
21
|
+
/* @__PURE__ */ o(_, { children: /* @__PURE__ */ o(p, { name: "logo", size: 48, variant: "white" }) }),
|
|
22
22
|
/* @__PURE__ */ i("div", { className: t.content, children: [
|
|
23
|
-
n && /* @__PURE__ */ o(
|
|
23
|
+
n && /* @__PURE__ */ o(g, { horizontal: !0, children: n }),
|
|
24
24
|
r && r
|
|
25
25
|
] })
|
|
26
26
|
] });
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index9.css');const a=require("react/jsx-runtime"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index9.css');const a=require("react/jsx-runtime"),b=require("react"),m=require("../button/index.cjs"),w=require("../checkbox/index.cjs"),B=require("../chip/index.cjs"),I=require("../collapsible/index.cjs"),T=require("../controls/index.cjs"),H=require("../dialog/index.cjs"),P=require("../header/index.cjs"),z=require("../../index-lALToPBm.cjs"),A="_search_1rde5_3",E="_controls_1rde5_15",J="_chips_1rde5_35",K="_radio_1rde5_101",n={search:A,controls:E,chips:J,"filter-dialog":"_filter-dialog_1rde5_42","filter-groups":"_filter-groups_1rde5_47","filter-group":"_filter-group_1rde5_47","filter-option":"_filter-option_1rde5_83","option-copy":"_option-copy_1rde5_89",radio:K,"collapsible-options":"_collapsible-options_1rde5_128"},L=({closeLabel:q="Close",filterButtonLabel:x="Filters",filterDialogColumns:f=1,filterDialogTitle:k="Filters",filterGroups:d=[],onChange:$,onSelectedFiltersChange:o,removeFilterLabel:M=i=>`Remove ${i.label} filter`,resetLabel:O="Reset",searchLabel:C="Search",searchPlaceholder:D="Search",selectedFilters:t=[],value:R=""})=>{const i=b.useId(),[j,r]=b.useState(!1),S=b.useMemo(()=>new Map(d.flatMap(e=>{var l;return[...e.options,...((l=e.collapsible)==null?void 0:l.options)??[]]}).map(e=>[e.value,e])),[d]),h=t.flatMap(e=>{const l=S.get(e);return l?[l]:[]}),_=(e,l,s)=>{var N;if(!o)return;const p=new Set([...(s==null?void 0:s.options.map(c=>c.value))??[],...((N=s==null?void 0:s.collapsible)==null?void 0:N.options.map(c=>c.value))??[]]),y=t.filter(c=>!p.has(c));if(l&&(s==null?void 0:s.defaultValue)===e){o(y);return}o(l?(s==null?void 0:s.control)==="radio"||(s==null?void 0:s.selectionMode)==="single"?[...y,e]:[...new Set([...t,e])]:t.filter(c=>c!==e))},v=(e,l)=>{var s;return t.includes(e)||l.defaultValue===e&&![...l.options,...((s=l.collapsible)==null?void 0:s.options)??[]].some(p=>t.includes(p.value))},u=(e,l)=>a.jsx("div",{className:n["filter-option"],"data-component":"renderfilter",children:l.control==="radio"?a.jsxs("label",{className:n.radio,children:[a.jsx("input",{checked:v(e.value,l),name:`${i}-filter-${l.label??"group"}`,onChange:s=>_(e.value,s.target.checked,l),type:"radio"}),a.jsxs("span",{className:n["option-copy"],children:[e.label,e.description&&a.jsx("sub",{children:e.description})]})]}):a.jsx(w.Checkbox,{checked:v(e.value,l),label:a.jsxs("span",{className:n["option-copy"],children:[e.label,e.description&&a.jsx("sub",{children:e.description})]}),onChange:s=>_(e.value,s.target.checked,l)})},e.value);return a.jsxs("div",{className:n.search,"data-component":"search",children:[a.jsxs("div",{className:n.controls,children:[a.jsx(z.Input,{"aria-label":C,icon:"search",onChange:e=>$(e.target.value),placeholder:D,type:"search",value:R}),d.length>0&&a.jsx(m.Button,{"aria-expanded":j,"aria-haspopup":"dialog",badge:h.length,icon:"funnel",onClick:()=>r(!0),variant:"tertiary",children:x})]}),h.length>0&&a.jsxs("div",{"aria-label":x,className:n.chips,children:[h.map(e=>a.jsx(B.Chip,{accessibleLabel:M(e),label:e.label,onDelete:()=>_(e.value,!1)},e.value)),a.jsx(m.Button,{onClick:()=>o==null?void 0:o([]),variant:"tertiary",children:O})]}),j&&a.jsx(H.Dialog,{"aria-labelledby":i,className:n["filter-dialog"],controls:a.jsx(T.Controls,{children:a.jsx(m.Button,{onClick:()=>r(!1),children:q})}),header:a.jsx(P.Header,{children:a.jsx("h2",{id:i,children:k})}),open:!0,setOpen:r,children:a.jsx("div",{className:n["filter-groups"],"data-columns":f,children:d.map((e,l)=>a.jsxs("section",{"aria-labelledby":e.label?`${i}-${l}`:void 0,className:n["filter-group"],"data-column-span":e.columnSpan??1,role:e.control==="radio"?"radiogroup":"group",children:[e.label&&a.jsx("h3",{id:`${i}-${l}`,children:e.label}),e.options.map(s=>u(s,e)),e.collapsible&&a.jsx(I.Collapsible,{summary:e.collapsible.label,children:a.jsx("div",{className:n["collapsible-options"],children:e.collapsible.options.map(s=>u(s,e))})})]},e.label??l))})})]})};exports.Search=L;
|
|
2
2
|
//# sourceMappingURL=index.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":["../../../src/components/search/index.tsx"],"sourcesContent":["import { useId, useMemo, useState } from 'react';\n\nimport { Button } from '../button';\nimport { Checkbox } from '../checkbox';\nimport { Chip } from '../chip';\nimport { Collapsible } from '../collapsible';\nimport { Controls } from '../controls';\nimport { Dialog } from '../dialog';\nimport { Header } from '../header';\nimport { Input } from '../input';\nimport styles from './styles.module.css';\n\nexport type SearchFilter = {\n description?: string;\n label: string;\n value: string;\n};\n\nexport type SearchFilterGroup = {\n collapsible?: {\n label: string;\n options: readonly SearchFilter[];\n };\n columnSpan?: 1 | 2;\n control?: 'checkbox' | 'radio';\n defaultValue?: string;\n label?: string;\n options: readonly SearchFilter[];\n selectionMode?: 'multiple' | 'single';\n};\n\nexport type SearchProps = {\n closeLabel?: string;\n filterButtonLabel?: string;\n filterDialogColumns?: 1 | 2;\n filterDialogTitle?: string;\n filterGroups?: readonly SearchFilterGroup[];\n onChange: (value: string) => void;\n onSelectedFiltersChange?: (selectedFilters: string[]) => void;\n removeFilterLabel?: (filter: SearchFilter) => string;\n resetLabel?: string;\n searchLabel?: string;\n searchPlaceholder?: string;\n selectedFilters?: readonly string[];\n value?: string;\n};\n\nexport const Search = ({\n closeLabel = 'Close',\n filterButtonLabel = 'Filters',\n filterDialogColumns = 1,\n filterDialogTitle = 'Filters',\n filterGroups = [],\n onChange,\n onSelectedFiltersChange,\n removeFilterLabel = (filter) => `Remove ${filter.label} filter`,\n resetLabel = 'Reset',\n searchLabel = 'Search',\n searchPlaceholder = 'Search',\n selectedFilters = [],\n value = '',\n}: SearchProps) => {\n const dialogTitleId = useId();\n const [isFilterDialogOpen, setIsFilterDialogOpen] = useState(false);\n const filtersByValue = useMemo(\n () =>\n new Map(\n filterGroups\n .flatMap((group) => [...group.options, ...(group.collapsible?.options ?? [])])\n .map((filter) => [filter.value, filter])\n ),\n [filterGroups]\n );\n const activeFilters = selectedFilters.flatMap((selectedFilter) => {\n const filter = filtersByValue.get(selectedFilter);\n\n return filter ? [filter] : [];\n });\n\n const setFilterSelected = (\n filterValue: string,\n isSelected: boolean,\n group?: SearchFilterGroup\n ) => {\n if (!onSelectedFiltersChange) return;\n\n const groupValues = new Set([\n ...(group?.options.map((filter) => filter.value) ?? []),\n ...(group?.collapsible?.options.map((filter) => filter.value) ?? []),\n ]);\n const filtersOutsideGroup = selectedFilters.filter(\n (selectedFilter) => !groupValues.has(selectedFilter)\n );\n\n if (isSelected && group?.defaultValue === filterValue) {\n onSelectedFiltersChange(filtersOutsideGroup);\n return;\n }\n\n onSelectedFiltersChange(\n isSelected\n ? group?.control === 'radio' || group?.selectionMode === 'single'\n ? [...filtersOutsideGroup, filterValue]\n : [...new Set([...selectedFilters, filterValue])]\n : selectedFilters.filter((selectedFilter) => selectedFilter !== filterValue)\n );\n };\n\n const isFilterSelected = (filterValue: string, group: SearchFilterGroup) =>\n selectedFilters.includes(filterValue) ||\n (group.defaultValue === filterValue &&\n ![...group.options, ...(group.collapsible?.options ?? [])].some((filter) =>\n selectedFilters.includes(filter.value)\n ));\n\n const renderFilter = (filter: SearchFilter, group: SearchFilterGroup) => (\n <div\n className={styles['filter-option']}\n key={filter.value}\n >\n {group.control === 'radio' ? (\n <label className={styles.radio}>\n <input\n checked={isFilterSelected(filter.value, group)}\n name={`${dialogTitleId}-filter-${group.label ?? 'group'}`}\n onChange={(event) => setFilterSelected(filter.value, event.target.checked, group)}\n type='radio'\n />\n <span className={styles['option-copy']}>\n {filter.label}\n {filter.description && <sub>{filter.description}</sub>}\n </span>\n </label>\n ) : (\n <Checkbox\n checked={isFilterSelected(filter.value, group)}\n label={\n <span className={styles['option-copy']}>\n {filter.label}\n {filter.description && <sub>{filter.description}</sub>}\n </span>\n }\n onChange={(event) => setFilterSelected(filter.value, event.target.checked, group)}\n />\n )}\n </div>\n );\n\n return (\n <div\n className={styles.search}\n data-component='search'\n >\n <div className={styles.controls}>\n <Input\n aria-label={searchLabel}\n icon='search'\n onChange={(event) => onChange(event.target.value)}\n placeholder={searchPlaceholder}\n type='search'\n value={value}\n />\n {filterGroups.length > 0 && (\n <Button\n aria-expanded={isFilterDialogOpen}\n aria-haspopup='dialog'\n badge={activeFilters.length}\n icon='funnel'\n onClick={() => setIsFilterDialogOpen(true)}\n variant='tertiary'\n >\n {filterButtonLabel}\n </Button>\n )}\n </div>\n {activeFilters.length > 0 && (\n <div\n aria-label={filterButtonLabel}\n className={styles.chips}\n >\n {activeFilters.map((filter) => (\n <Chip\n accessibleLabel={removeFilterLabel(filter)}\n key={filter.value}\n label={filter.label}\n onDelete={() => setFilterSelected(filter.value, false)}\n />\n ))}\n <Button\n onClick={() => onSelectedFiltersChange?.([])}\n variant='tertiary'\n >\n {resetLabel}\n </Button>\n </div>\n )}\n {isFilterDialogOpen && (\n <Dialog\n aria-labelledby={dialogTitleId}\n className={styles['filter-dialog']}\n controls={\n <Controls>\n <Button onClick={() => setIsFilterDialogOpen(false)}>{closeLabel}</Button>\n </Controls>\n }\n header={\n <Header>\n <h2 id={dialogTitleId}>{filterDialogTitle}</h2>\n </Header>\n }\n open\n setOpen={setIsFilterDialogOpen}\n >\n <div\n className={styles['filter-groups']}\n data-columns={filterDialogColumns}\n >\n {filterGroups.map((group, groupIndex) => (\n <section\n aria-labelledby={group.label ? `${dialogTitleId}-${groupIndex}` : undefined}\n className={styles['filter-group']}\n data-column-span={group.columnSpan ?? 1}\n key={group.label ?? groupIndex}\n role={group.control === 'radio' ? 'radiogroup' : 'group'}\n >\n {group.label && <h3 id={`${dialogTitleId}-${groupIndex}`}>{group.label}</h3>}\n {group.options.map((filter) => renderFilter(filter, group))}\n {group.collapsible && (\n <Collapsible summary={group.collapsible.label}>\n <div className={styles['collapsible-options']}>\n {group.collapsible.options.map((filter) => renderFilter(filter, group))}\n </div>\n </Collapsible>\n )}\n </section>\n ))}\n </div>\n </Dialog>\n )}\n </div>\n );\n};\n"],"names":["Search","closeLabel","filterButtonLabel","filterDialogColumns","filterDialogTitle","filterGroups","onChange","onSelectedFiltersChange","removeFilterLabel","filter","label","resetLabel","searchLabel","searchPlaceholder","selectedFilters","value","dialogTitleId","useId","isFilterDialogOpen","setIsFilterDialogOpen","useState","filtersByValue","useMemo","Map","flatMap","group","options","collapsible","map","activeFilters","selectedFilter","get","setFilterSelected","filterValue","isSelected","groupValues","Set","filtersOutsideGroup","has","defaultValue","control","selectionMode","isFilterSelected","includes","some","renderFilter","jsx","styles","radio","event","target","checked","jsxs","description","Checkbox","search","controls","Input","length","Button","chips","Chip","Dialog","Controls","Header","groupIndex","undefined","columnSpan","Collapsible"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../../../src/components/search/index.tsx"],"sourcesContent":["import { useId, useMemo, useState } from 'react';\n\nimport { Button } from '../button';\nimport { Checkbox } from '../checkbox';\nimport { Chip } from '../chip';\nimport { Collapsible } from '../collapsible';\nimport { Controls } from '../controls';\nimport { Dialog } from '../dialog';\nimport { Header } from '../header';\nimport { Input } from '../input';\nimport styles from './styles.module.css';\n\nexport type SearchFilter = {\n description?: string;\n label: string;\n value: string;\n};\n\nexport type SearchFilterGroup = {\n collapsible?: {\n label: string;\n options: readonly SearchFilter[];\n };\n columnSpan?: 1 | 2;\n control?: 'checkbox' | 'radio';\n defaultValue?: string;\n label?: string;\n options: readonly SearchFilter[];\n selectionMode?: 'multiple' | 'single';\n};\n\nexport type SearchProps = {\n closeLabel?: string;\n filterButtonLabel?: string;\n filterDialogColumns?: 1 | 2;\n filterDialogTitle?: string;\n filterGroups?: readonly SearchFilterGroup[];\n onChange: (value: string) => void;\n onSelectedFiltersChange?: (selectedFilters: string[]) => void;\n removeFilterLabel?: (filter: SearchFilter) => string;\n resetLabel?: string;\n searchLabel?: string;\n searchPlaceholder?: string;\n selectedFilters?: readonly string[];\n value?: string;\n};\n\nexport const Search = ({\n closeLabel = 'Close',\n filterButtonLabel = 'Filters',\n filterDialogColumns = 1,\n filterDialogTitle = 'Filters',\n filterGroups = [],\n onChange,\n onSelectedFiltersChange,\n removeFilterLabel = (filter) => `Remove ${filter.label} filter`,\n resetLabel = 'Reset',\n searchLabel = 'Search',\n searchPlaceholder = 'Search',\n selectedFilters = [],\n value = '',\n}: SearchProps) => {\n const dialogTitleId = useId();\n const [isFilterDialogOpen, setIsFilterDialogOpen] = useState(false);\n const filtersByValue = useMemo(\n () =>\n new Map(\n filterGroups\n .flatMap((group) => [...group.options, ...(group.collapsible?.options ?? [])])\n .map((filter) => [filter.value, filter])\n ),\n [filterGroups]\n );\n const activeFilters = selectedFilters.flatMap((selectedFilter) => {\n const filter = filtersByValue.get(selectedFilter);\n\n return filter ? [filter] : [];\n });\n\n const setFilterSelected = (\n filterValue: string,\n isSelected: boolean,\n group?: SearchFilterGroup\n ) => {\n if (!onSelectedFiltersChange) return;\n\n const groupValues = new Set([\n ...(group?.options.map((filter) => filter.value) ?? []),\n ...(group?.collapsible?.options.map((filter) => filter.value) ?? []),\n ]);\n const filtersOutsideGroup = selectedFilters.filter(\n (selectedFilter) => !groupValues.has(selectedFilter)\n );\n\n if (isSelected && group?.defaultValue === filterValue) {\n onSelectedFiltersChange(filtersOutsideGroup);\n return;\n }\n\n onSelectedFiltersChange(\n isSelected\n ? group?.control === 'radio' || group?.selectionMode === 'single'\n ? [...filtersOutsideGroup, filterValue]\n : [...new Set([...selectedFilters, filterValue])]\n : selectedFilters.filter((selectedFilter) => selectedFilter !== filterValue)\n );\n };\n\n const isFilterSelected = (filterValue: string, group: SearchFilterGroup) =>\n selectedFilters.includes(filterValue) ||\n (group.defaultValue === filterValue &&\n ![...group.options, ...(group.collapsible?.options ?? [])].some((filter) =>\n selectedFilters.includes(filter.value)\n ));\n\n const renderFilter = (filter: SearchFilter, group: SearchFilterGroup) => (\n <div\n className={styles['filter-option']}\n key={filter.value}\n >\n {group.control === 'radio' ? (\n <label className={styles.radio}>\n <input\n checked={isFilterSelected(filter.value, group)}\n name={`${dialogTitleId}-filter-${group.label ?? 'group'}`}\n onChange={(event) => setFilterSelected(filter.value, event.target.checked, group)}\n type='radio'\n />\n <span className={styles['option-copy']}>\n {filter.label}\n {filter.description && <sub>{filter.description}</sub>}\n </span>\n </label>\n ) : (\n <Checkbox\n checked={isFilterSelected(filter.value, group)}\n label={\n <span className={styles['option-copy']}>\n {filter.label}\n {filter.description && <sub>{filter.description}</sub>}\n </span>\n }\n onChange={(event) => setFilterSelected(filter.value, event.target.checked, group)}\n />\n )}\n </div>\n );\n\n return (\n <div\n className={styles.search}\n data-component='search'\n >\n <div className={styles.controls}>\n <Input\n aria-label={searchLabel}\n icon='search'\n onChange={(event) => onChange(event.target.value)}\n placeholder={searchPlaceholder}\n type='search'\n value={value}\n />\n {filterGroups.length > 0 && (\n <Button\n aria-expanded={isFilterDialogOpen}\n aria-haspopup='dialog'\n badge={activeFilters.length}\n icon='funnel'\n onClick={() => setIsFilterDialogOpen(true)}\n variant='tertiary'\n >\n {filterButtonLabel}\n </Button>\n )}\n </div>\n {activeFilters.length > 0 && (\n <div\n aria-label={filterButtonLabel}\n className={styles.chips}\n >\n {activeFilters.map((filter) => (\n <Chip\n accessibleLabel={removeFilterLabel(filter)}\n key={filter.value}\n label={filter.label}\n onDelete={() => setFilterSelected(filter.value, false)}\n />\n ))}\n <Button\n onClick={() => onSelectedFiltersChange?.([])}\n variant='tertiary'\n >\n {resetLabel}\n </Button>\n </div>\n )}\n {isFilterDialogOpen && (\n <Dialog\n aria-labelledby={dialogTitleId}\n className={styles['filter-dialog']}\n controls={\n <Controls>\n <Button onClick={() => setIsFilterDialogOpen(false)}>{closeLabel}</Button>\n </Controls>\n }\n header={\n <Header>\n <h2 id={dialogTitleId}>{filterDialogTitle}</h2>\n </Header>\n }\n open\n setOpen={setIsFilterDialogOpen}\n >\n <div\n className={styles['filter-groups']}\n data-columns={filterDialogColumns}\n >\n {filterGroups.map((group, groupIndex) => (\n <section\n aria-labelledby={group.label ? `${dialogTitleId}-${groupIndex}` : undefined}\n className={styles['filter-group']}\n data-column-span={group.columnSpan ?? 1}\n key={group.label ?? groupIndex}\n role={group.control === 'radio' ? 'radiogroup' : 'group'}\n >\n {group.label && <h3 id={`${dialogTitleId}-${groupIndex}`}>{group.label}</h3>}\n {group.options.map((filter) => renderFilter(filter, group))}\n {group.collapsible && (\n <Collapsible summary={group.collapsible.label}>\n <div className={styles['collapsible-options']}>\n {group.collapsible.options.map((filter) => renderFilter(filter, group))}\n </div>\n </Collapsible>\n )}\n </section>\n ))}\n </div>\n </Dialog>\n )}\n </div>\n );\n};\n"],"names":["Search","closeLabel","filterButtonLabel","filterDialogColumns","filterDialogTitle","filterGroups","onChange","onSelectedFiltersChange","removeFilterLabel","filter","label","resetLabel","searchLabel","searchPlaceholder","selectedFilters","value","dialogTitleId","useId","isFilterDialogOpen","setIsFilterDialogOpen","useState","filtersByValue","useMemo","Map","flatMap","group","options","collapsible","map","activeFilters","selectedFilter","get","setFilterSelected","filterValue","isSelected","groupValues","Set","filtersOutsideGroup","has","defaultValue","control","selectionMode","isFilterSelected","includes","some","renderFilter","jsx","styles","radio","event","target","checked","jsxs","description","Checkbox","search","controls","Input","length","Button","chips","Chip","Dialog","Controls","Header","groupIndex","undefined","columnSpan","Collapsible"],"mappings":"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"}
|
|
@@ -7,21 +7,21 @@ import { Collapsible as A } from "../collapsible/index.js";
|
|
|
7
7
|
import { Controls as E } from "../controls/index.js";
|
|
8
8
|
import { Dialog as J } from "../dialog/index.js";
|
|
9
9
|
import { Header as K } from "../header/index.js";
|
|
10
|
-
import { I as L } from "../../index-
|
|
11
|
-
import '../../assets/index9.css';const P = "
|
|
10
|
+
import { I as L } from "../../index-C-ESxR26.js";
|
|
11
|
+
import '../../assets/index9.css';const P = "_search_1rde5_3", Q = "_controls_1rde5_15", U = "_chips_1rde5_35", V = "_radio_1rde5_101", o = {
|
|
12
12
|
search: P,
|
|
13
13
|
controls: Q,
|
|
14
14
|
chips: U,
|
|
15
|
-
"filter-dialog": "_filter-
|
|
16
|
-
"filter-groups": "_filter-
|
|
17
|
-
"filter-group": "_filter-
|
|
18
|
-
"filter-option": "_filter-
|
|
19
|
-
"option-copy": "_option-
|
|
15
|
+
"filter-dialog": "_filter-dialog_1rde5_42",
|
|
16
|
+
"filter-groups": "_filter-groups_1rde5_47",
|
|
17
|
+
"filter-group": "_filter-group_1rde5_47",
|
|
18
|
+
"filter-option": "_filter-option_1rde5_83",
|
|
19
|
+
"option-copy": "_option-copy_1rde5_89",
|
|
20
20
|
radio: V,
|
|
21
|
-
"collapsible-options": "_collapsible-
|
|
22
|
-
},
|
|
21
|
+
"collapsible-options": "_collapsible-options_1rde5_128"
|
|
22
|
+
}, la = ({
|
|
23
23
|
closeLabel: M = "Close",
|
|
24
|
-
filterButtonLabel:
|
|
24
|
+
filterButtonLabel: v = "Filters",
|
|
25
25
|
filterDialogColumns: C = 1,
|
|
26
26
|
filterDialogTitle: D = "Filters",
|
|
27
27
|
filterGroups: d = [],
|
|
@@ -34,51 +34,51 @@ import '../../assets/index9.css';const P = "_search_bp8f4_3", Q = "_controls_bp8
|
|
|
34
34
|
selectedFilters: r = [],
|
|
35
35
|
value: R = ""
|
|
36
36
|
}) => {
|
|
37
|
-
const s = H(), [
|
|
38
|
-
var
|
|
39
|
-
return [...a.options, ...((
|
|
40
|
-
}).map((a) => [a.value, a])), [d]),
|
|
41
|
-
const
|
|
42
|
-
return
|
|
43
|
-
}),
|
|
37
|
+
const s = H(), [f, m] = S(!1), B = T(() => new Map(d.flatMap((a) => {
|
|
38
|
+
var l;
|
|
39
|
+
return [...a.options, ...((l = a.collapsible) == null ? void 0 : l.options) ?? []];
|
|
40
|
+
}).map((a) => [a.value, a])), [d]), h = r.flatMap((a) => {
|
|
41
|
+
const l = B.get(a);
|
|
42
|
+
return l ? [l] : [];
|
|
43
|
+
}), p = (a, l, e) => {
|
|
44
44
|
var $;
|
|
45
45
|
if (!t) return;
|
|
46
|
-
const b = /* @__PURE__ */ new Set([...(
|
|
47
|
-
if (
|
|
46
|
+
const b = /* @__PURE__ */ new Set([...(e == null ? void 0 : e.options.map((n) => n.value)) ?? [], ...(($ = e == null ? void 0 : e.collapsible) == null ? void 0 : $.options.map((n) => n.value)) ?? []]), k = r.filter((n) => !b.has(n));
|
|
47
|
+
if (l && (e == null ? void 0 : e.defaultValue) === a) {
|
|
48
48
|
t(k);
|
|
49
49
|
return;
|
|
50
50
|
}
|
|
51
|
-
t(
|
|
52
|
-
}, y = (a,
|
|
53
|
-
var
|
|
54
|
-
return r.includes(a) ||
|
|
55
|
-
}, N = (a,
|
|
56
|
-
/* @__PURE__ */ i("input", { checked: y(a.value,
|
|
51
|
+
t(l ? (e == null ? void 0 : e.control) === "radio" || (e == null ? void 0 : e.selectionMode) === "single" ? [...k, a] : [.../* @__PURE__ */ new Set([...r, a])] : r.filter((n) => n !== a));
|
|
52
|
+
}, y = (a, l) => {
|
|
53
|
+
var e;
|
|
54
|
+
return r.includes(a) || l.defaultValue === a && ![...l.options, ...((e = l.collapsible) == null ? void 0 : e.options) ?? []].some((b) => r.includes(b.value));
|
|
55
|
+
}, N = (a, l) => /* @__PURE__ */ i("div", { className: o["filter-option"], "data-component": "renderfilter", children: l.control === "radio" ? /* @__PURE__ */ c("label", { className: o.radio, children: [
|
|
56
|
+
/* @__PURE__ */ i("input", { checked: y(a.value, l), name: `${s}-filter-${l.label ?? "group"}`, onChange: (e) => p(a.value, e.target.checked, l), type: "radio" }),
|
|
57
57
|
/* @__PURE__ */ c("span", { className: o["option-copy"], children: [
|
|
58
58
|
a.label,
|
|
59
59
|
a.description && /* @__PURE__ */ i("sub", { children: a.description })
|
|
60
60
|
] })
|
|
61
|
-
] }) : /* @__PURE__ */ i(q, { checked: y(a.value,
|
|
61
|
+
] }) : /* @__PURE__ */ i(q, { checked: y(a.value, l), label: /* @__PURE__ */ c("span", { className: o["option-copy"], children: [
|
|
62
62
|
a.label,
|
|
63
63
|
a.description && /* @__PURE__ */ i("sub", { children: a.description })
|
|
64
|
-
] }), onChange: (
|
|
64
|
+
] }), onChange: (e) => p(a.value, e.target.checked, l) }) }, a.value);
|
|
65
65
|
return /* @__PURE__ */ c("div", { className: o.search, "data-component": "search", children: [
|
|
66
66
|
/* @__PURE__ */ c("div", { className: o.controls, children: [
|
|
67
67
|
/* @__PURE__ */ i(L, { "aria-label": I, icon: "search", onChange: (a) => O(a.target.value), placeholder: j, type: "search", value: R }),
|
|
68
|
-
d.length > 0 && /* @__PURE__ */ i(_, { "aria-expanded":
|
|
68
|
+
d.length > 0 && /* @__PURE__ */ i(_, { "aria-expanded": f, "aria-haspopup": "dialog", badge: h.length, icon: "funnel", onClick: () => m(!0), variant: "tertiary", children: v })
|
|
69
69
|
] }),
|
|
70
|
-
|
|
71
|
-
|
|
70
|
+
h.length > 0 && /* @__PURE__ */ c("div", { "aria-label": v, className: o.chips, children: [
|
|
71
|
+
h.map((a) => /* @__PURE__ */ i(z, { accessibleLabel: w(a), label: a.label, onDelete: () => p(a.value, !1) }, a.value)),
|
|
72
72
|
/* @__PURE__ */ i(_, { onClick: () => t == null ? void 0 : t([]), variant: "tertiary", children: x })
|
|
73
73
|
] }),
|
|
74
|
-
|
|
75
|
-
a.label && /* @__PURE__ */ i("h3", { id: `${s}-${
|
|
76
|
-
a.options.map((
|
|
77
|
-
a.collapsible && /* @__PURE__ */ i(A, { summary: a.collapsible.label, children: /* @__PURE__ */ i("div", { className: o["collapsible-options"], children: a.collapsible.options.map((
|
|
78
|
-
] }, a.label ??
|
|
74
|
+
f && /* @__PURE__ */ i(J, { "aria-labelledby": s, className: o["filter-dialog"], controls: /* @__PURE__ */ i(E, { children: /* @__PURE__ */ i(_, { onClick: () => m(!1), children: M }) }), header: /* @__PURE__ */ i(K, { children: /* @__PURE__ */ i("h2", { id: s, children: D }) }), open: !0, setOpen: m, children: /* @__PURE__ */ i("div", { className: o["filter-groups"], "data-columns": C, children: d.map((a, l) => /* @__PURE__ */ c("section", { "aria-labelledby": a.label ? `${s}-${l}` : void 0, className: o["filter-group"], "data-column-span": a.columnSpan ?? 1, role: a.control === "radio" ? "radiogroup" : "group", children: [
|
|
75
|
+
a.label && /* @__PURE__ */ i("h3", { id: `${s}-${l}`, children: a.label }),
|
|
76
|
+
a.options.map((e) => N(e, a)),
|
|
77
|
+
a.collapsible && /* @__PURE__ */ i(A, { summary: a.collapsible.label, children: /* @__PURE__ */ i("div", { className: o["collapsible-options"], children: a.collapsible.options.map((e) => N(e, a)) }) })
|
|
78
|
+
] }, a.label ?? l)) }) })
|
|
79
79
|
] });
|
|
80
80
|
};
|
|
81
81
|
export {
|
|
82
|
-
|
|
82
|
+
la as Search
|
|
83
83
|
};
|
|
84
84
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("react/jsx-runtime");require("../../classix-5H4IWnMA.cjs");require("../../icons-
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("react/jsx-runtime");require("../../classix-5H4IWnMA.cjs");require("../../icons-Lq3pr85X.cjs");const e=require("../../index-CXge5nFf.cjs");require("../../use-touched-Bq5Gjbpz.cjs");exports.Select=e.Select;
|
|
2
2
|
//# sourceMappingURL=index.cjs.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import "react/jsx-runtime";
|
|
2
2
|
import "../../classix-DG18itHa.js";
|
|
3
|
-
import "../../icons-
|
|
4
|
-
import { S as e } from "../../index-
|
|
3
|
+
import "../../icons-BkaMeh-J.js";
|
|
4
|
+
import { S as e } from "../../index-Rm3D-iwf.js";
|
|
5
5
|
import "../../use-touched-B999bBr8.js";
|
|
6
6
|
export {
|
|
7
7
|
e as Select
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index8.css');const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index8.css');const F=require("react/jsx-runtime"),X=require("../../classix-5H4IWnMA.cjs"),s=require("react"),Z=require("../list/index.cjs"),G="_sortable_5vbjc_1",J="_dragging_5vbjc_13",K="_columns_5vbjc_38",Q="_pseudo_5vbjc_47",b={sortable:G,dragging:J,columns:K,pseudo:Q,"target-above":"_target-above_5vbjc_62","target-below":"_target-below_5vbjc_63"},k=s.createContext(null);function tt(){return s.useContext(k)}const h=a=>Number.parseFloat(a)||0,et=a=>{const v=a.firstElementChild,i=a.getBoundingClientRect();if(v){const y=v.getBoundingClientRect();return{borderRadius:window.getComputedStyle(v).borderRadius,height:y.height,width:y.width,wrapperHeight:i.height}}const u=window.getComputedStyle(a),j=h(u.borderLeftWidth)+h(u.borderRightWidth)+h(u.paddingLeft)+h(u.paddingRight),T=h(u.borderBottomWidth)+h(u.borderTopWidth)+h(u.paddingBottom)+h(u.paddingTop);return{borderRadius:u.borderRadius,height:Math.max(0,i.height-T),width:Math.max(0,i.width-j),wrapperHeight:i.height}};function nt({children:a,className:v,columns:i=1,isRearranging:u=!1,onChangeOrder:j,...T}){const y=Number.isFinite(i)?Math.max(1,Math.floor(i)):1,R=s.useMemo(()=>s.Children.toArray(a),[a]),l=s.useRef(-1),q=s.useMemo(()=>typeof window<"u"&&(navigator.maxTouchPoints>0||window.matchMedia("(pointer: coarse)").matches),[]),p=s.useRef(!1),_=s.useRef(null),w=s.useRef(null),x=s.useRef(null),I=s.useRef(0),C=s.useRef(null),g=s.useRef(null),E=s.useRef(o=>o.preventDefault()).current,[M,O]=s.useState({borderRadius:"0px",height:0,width:0,wrapperHeight:0}),[m,S]=s.useState(null),W={...T.style,"--sortable-placeholder-height":`${M.height}px`,"--sortable-placeholder-radius":M.borderRadius,"--sortable-placeholder-width":`${M.width}px`},H=(o,t)=>{if(t<0||t>=R.length||o===t)return;const c=R.slice(),[e]=c.splice(o,1);c.splice(t,0,e),j(c.map((n,r)=>({id:String(s.isValidElement(n)?n.props["data-id"]??`idx-${r}`:`idx-${r}`),weight:c.length-1-r})))},D=()=>{w.current!==null&&(clearTimeout(w.current),w.current=null)},A=()=>{g.current!==null&&(cancelAnimationFrame(g.current),g.current=null)},$=o=>{let t=(o==null?void 0:o.parentElement)??null;for(;t;){const{overflowY:c}=window.getComputedStyle(t);if(/(auto|scroll|overlay)/.test(c)&&t.scrollHeight>t.clientHeight)return t;t=t.parentElement}return document.scrollingElement instanceof HTMLElement?document.scrollingElement:null},L=(o=!1)=>{D(),A(),window.removeEventListener("touchmove",E),C.current=null,p.current=!1,_.current=null,x.current=null,I.current=o?Date.now()+500:0,l.current=-1,S(null)},P=(o,t)=>{l.current=o,O(et(t)),S(o)},U=o=>o instanceof Element&&!!o.closest('button, a, input, textarea, select, option, [role="button"], [contenteditable="true"]'),N=(o,t,c)=>{const e=l.current;if(!Number.isInteger(t)||e<0||t===e)return null;const n=o.getBoundingClientRect(),r=t===e+1?M.wrapperHeight:n.height,d=c>n.top+r/2?t+1:t;return d>e?d-1:d},Y=(o,t)=>{var n;const c=(n=document.elementFromPoint(o,t))==null?void 0:n.closest("[data-sortable-index]");if(!c)return;const e=N(c,Number(c.dataset.sortableIndex),t);e!==null&&(_.current=e,S(e))},V=o=>{const t=$(o);if(!t)return;const c=72,e=18,n=()=>{if(!p.current){g.current=null;return}const r=C.current;if(!r){g.current=requestAnimationFrame(n);return}const f=t===document.scrollingElement?{top:0,bottom:window.innerHeight}:t.getBoundingClientRect();let d=0;if(r.y<f.top+c){const B=Math.max(0,r.y-f.top);d=-e*(1-B/c)}else if(r.y>f.bottom-c){const B=Math.max(0,f.bottom-r.y);d=e*(1-B/c)}d!==0&&(t.scrollBy({top:d,behavior:"auto"}),Y(r.x,r.y)),g.current=requestAnimationFrame(n)};A(),g.current=requestAnimationFrame(n)},z=()=>{l.current=-1,S(null)};return s.useEffect(()=>()=>{D(),A(),window.removeEventListener("touchmove",E)},[E]),F.jsx(Z.List,{className:X.t(v,b.sortable,y>1&&b.columns),columns:i,ordered:!0,style:W,...T,"data-component":"sortable",children:R.map((o,t)=>{const c=s.isValidElement(o)?o.key:null;return F.jsx("li",{"data-sortable-index":t,onClickCapture:e=>{I.current<=Date.now()||(e.preventDefault(),e.stopPropagation(),I.current=0)},className:X.t(m!==null&&m>t-10&&m<t+10&&b.pseudo,m===t&&l.current<t&&b["target-below"],m===t&&l.current>t&&b["target-above"],l.current===t&&b.dragging),onContextMenu:e=>{(p.current||w.current!==null)&&e.preventDefault()},onTouchStart:e=>{if(u||U(e.target))return;I.current=0;const n=e.touches[0];if(!n)return;const r=e.currentTarget;x.current={x:n.clientX,y:n.clientY},D(),w.current=setTimeout(()=>{P(t,r),p.current=!0,_.current=t,C.current={x:n.clientX,y:n.clientY},window.addEventListener("touchmove",E,{passive:!1}),V(r)},350)},onTouchMove:e=>{const n=e.touches[0];if(n){if(C.current={x:n.clientX,y:n.clientY},!p.current){const r=x.current;if(!r)return;Math.hypot(n.clientX-r.x,n.clientY-r.y)>8&&(D(),x.current=null);return}Y(n.clientX,n.clientY)}},onTouchEnd:e=>{if(D(),!p.current){x.current=null;return}e.preventDefault();const n=l.current,r=_.current;n>=0&&r!==null&&n!==r&&H(n,r),L(!0)},onTouchCancel:()=>L(),draggable:!u&&!q,onDragEnd:()=>z(),onDragOver:e=>{e.preventDefault(),e.dataTransfer.dropEffect="move";const n=N(e.currentTarget,t,e.clientY);n!==null&&S(n)},onDragStart:e=>{if(q){e.preventDefault();return}P(t,e.currentTarget),e.dataTransfer.setData("text/plain",""),e.dataTransfer.effectAllowed="move"},onDrop:e=>{e.preventDefault();const n=l.current,r=m;n<0||r===null||n===r||(H(n,r),z())},"data-component":"sortable",children:F.jsx(k.Provider,{value:{canMoveDown:t<R.length-1,canMoveUp:t>0,index:t,moveDown:()=>H(t,t+1),moveUp:()=>H(t,t-1)},children:o})},c??t)})})}exports.Sortable=nt;exports.useOptionalSortableItem=tt;
|
|
2
2
|
//# sourceMappingURL=index.cjs.map
|