@altinn/altinn-components 0.26.1 → 0.27.1
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/FieldsetLegend-Dwb3U0vQ.js +10 -0
- package/dist/Input-B_w6SBmg.js +12 -0
- package/dist/Label-DjSEhgyW.js +11 -0
- package/dist/Paragraph-CFjOkbXa.js +11 -0
- package/dist/Textarea-BBstVlPT.js +10 -0
- package/dist/altinn-ds-overrides.css +2 -2
- package/dist/altinn-ds.css +47 -101
- package/dist/assets/Button.css +1 -1
- package/dist/assets/ButtonBase.css +1 -1
- package/dist/assets/ButtonIcon.css +1 -1
- package/dist/assets/ButtonLabel.css +1 -1
- package/dist/assets/ComboButton.css +1 -1
- package/dist/assets/IconButton.css +1 -1
- package/dist/assets/ListItemHeader.css +1 -1
- package/dist/assets/MenuItemLabel.css +1 -1
- package/dist/components/Bookmarks/EditableBookmark.js +31 -30
- package/dist/components/Button/Button.js +41 -43
- package/dist/components/Button/ButtonBase.js +28 -26
- package/dist/components/Button/ButtonIcon.js +3 -3
- package/dist/components/Button/ButtonLabel.js +3 -3
- package/dist/components/Button/ComboButton.js +30 -28
- package/dist/components/Button/IconButton.js +24 -25
- package/dist/components/ContextMenu/ContextMenu.js +5 -6
- package/dist/components/Dialog/DialogActions.js +22 -21
- package/dist/components/Dialog/DialogListItem.js +65 -62
- package/dist/components/DsComponents/index.js +23 -21
- package/dist/components/Forms/Checkbox.js +16 -0
- package/dist/components/Forms/CheckboxOptions.js +12 -0
- package/dist/components/Forms/Field.js +6 -0
- package/dist/components/Forms/FieldBase.js +17 -0
- package/dist/components/Forms/Fieldset.js +28 -0
- package/dist/components/Forms/FieldsetBase.js +15 -0
- package/dist/components/Forms/Input.js +14 -0
- package/dist/components/Forms/Label.js +6 -0
- package/dist/components/Forms/Legend.js +14 -0
- package/dist/components/Forms/OptionsBase.js +18 -0
- package/dist/components/Forms/Radio.js +16 -0
- package/dist/components/Forms/RadioOptions.js +12 -0
- package/dist/components/Forms/Select.js +25 -0
- package/dist/components/Forms/SelectField.js +12 -0
- package/dist/components/Forms/Switch.js +16 -0
- package/dist/components/Forms/SwitchOptions.js +12 -0
- package/dist/components/Forms/TextField.js +12 -0
- package/dist/components/Forms/Textarea.js +6 -0
- package/dist/components/Forms/TextareaField.js +12 -0
- package/dist/components/Forms/index.js +40 -0
- package/dist/components/GlobalMenu/AccountMenu.js +2 -2
- package/dist/components/GlobalMenu/GlobalMenu.js +72 -65
- package/dist/components/List/ListItem.js +15 -13
- package/dist/components/List/ListItemBase.js +18 -16
- package/dist/components/List/ListItemHeader.js +30 -30
- package/dist/components/Menu/Menu.js +42 -38
- package/dist/components/Menu/MenuItemLabel.js +10 -10
- package/dist/components/Menu/MenuItemsVirtual.js +28 -27
- package/dist/components/Page/DashboardCard.js +10 -9
- package/dist/components/Page/PageDetails.js +1 -1
- package/dist/components/Page/PageNav.js +6 -6
- package/dist/components/Toolbar/ToolbarButton.js +23 -21
- package/dist/components/Toolbar/ToolbarFilter.js +27 -26
- package/dist/components/index.js +147 -113
- package/dist/{floating-ui.react-BQwG1HOM.js → floating-ui.react-DpzNAs2N.js} +26 -31
- package/dist/{index-DcykCrjD.js → index-B7UjMwQm.js} +13 -12
- package/dist/index-Bq6w9CqA.js +81 -0
- package/dist/index.js +177 -143
- package/dist/lite-1fxw3LjI.js +7 -0
- package/dist/tokens/README.md +1 -1
- package/dist/tokens/altinn-ds.css +48 -102
- package/dist/tokens/design-tokens-build/altinn-ds.css +48 -102
- package/dist/types/fields.js +1 -0
- package/dist/types/lib/components/Bookmarks/BookmarksSection.stories.d.ts +0 -1
- package/dist/types/lib/components/Button/Button.d.ts +1 -2
- package/dist/types/lib/components/Button/Button.stories.d.ts +5 -1
- package/dist/types/lib/components/Button/ButtonBase.d.ts +3 -2
- package/dist/types/lib/components/Button/ComboButton.d.ts +1 -1
- package/dist/types/lib/components/Dialog/DialogActions.d.ts +2 -1
- package/dist/types/lib/components/Dialog/DialogActions.stories.d.ts +1 -1
- package/dist/types/lib/components/Dialog/DialogListItem.d.ts +1 -1
- package/dist/types/lib/components/Forms/Checkbox.d.ts +7 -0
- package/dist/types/lib/components/Forms/Checkbox.stories.d.ts +15 -0
- package/dist/types/lib/components/Forms/CheckboxOptions.d.ts +5 -0
- package/dist/types/lib/components/Forms/CheckboxOptions.stories.d.ts +18 -0
- package/dist/types/lib/components/Forms/Field.d.ts +7 -0
- package/dist/types/lib/components/Forms/FieldBase.d.ts +8 -0
- package/dist/types/lib/components/Forms/Fieldset.d.ts +7 -0
- package/dist/types/lib/components/Forms/FieldsetBase.d.ts +8 -0
- package/dist/types/lib/components/Forms/Forms.stories.d.ts +7 -0
- package/dist/types/lib/components/Forms/Input.d.ts +10 -0
- package/dist/types/lib/components/Forms/Label.d.ts +7 -0
- package/dist/types/lib/components/Forms/Legend.d.ts +7 -0
- package/dist/types/lib/components/Forms/OptionsBase.d.ts +9 -0
- package/dist/types/lib/components/Forms/Radio.d.ts +7 -0
- package/dist/types/lib/components/Forms/Radio.stories.d.ts +15 -0
- package/dist/types/lib/components/Forms/RadioOptions.d.ts +6 -0
- package/dist/types/lib/components/Forms/RadioOptions.stories.d.ts +18 -0
- package/dist/types/lib/components/Forms/Select.d.ts +9 -0
- package/dist/types/lib/components/Forms/SelectField.d.ts +8 -0
- package/dist/types/lib/components/Forms/SelectField.stories.d.ts +14 -0
- package/dist/types/lib/components/Forms/Switch.d.ts +7 -0
- package/dist/types/lib/components/Forms/Switch.stories.d.ts +15 -0
- package/dist/types/lib/components/Forms/SwitchOptions.d.ts +6 -0
- package/dist/types/lib/components/Forms/SwitchOptions.stories.d.ts +18 -0
- package/dist/types/lib/components/Forms/TextField.d.ts +6 -0
- package/dist/types/lib/components/Forms/TextField.stories.d.ts +15 -0
- package/dist/types/lib/components/Forms/Textarea.d.ts +7 -0
- package/dist/types/lib/components/Forms/TextareaField.d.ts +6 -0
- package/dist/types/lib/components/Forms/TextareaField.stories.d.ts +15 -0
- package/dist/types/lib/components/Forms/index.d.ts +19 -0
- package/dist/types/lib/components/GlobalMenu/AccountMenu.d.ts +4 -2
- package/dist/types/lib/components/GlobalMenu/AccountMenu.stories.d.ts +3 -2
- package/dist/types/lib/components/GlobalMenu/GlobalMenu.d.ts +1 -1
- package/dist/types/lib/components/GlobalMenu/GlobalMenu.stories.d.ts +3 -2
- package/dist/types/lib/components/Header/Header.stories.d.ts +1 -0
- package/dist/types/lib/components/List/ListItem.d.ts +1 -1
- package/dist/types/lib/components/List/ListItem.stories.d.ts +1 -1
- package/dist/types/lib/components/List/ListItemBase.d.ts +3 -1
- package/dist/types/lib/components/List/Specimens.stories.d.ts +1 -1
- package/dist/types/lib/components/Menu/Examples.stories.d.ts +6 -6
- package/dist/types/lib/components/Menu/Menu.d.ts +3 -3
- package/dist/types/lib/components/Menu/Menu.stories.d.ts +1 -1
- package/dist/types/lib/components/Menu/MenuItems.d.ts +4 -0
- package/dist/types/lib/components/Menu/MenuItemsVirtual.d.ts +5 -1
- package/dist/types/lib/components/Page/DashboardHeader.stories.d.ts +12 -0
- package/dist/types/lib/components/Page/{Patterns.stories.d.ts → Examples.stories.d.ts} +2 -0
- package/dist/types/lib/components/Toolbar/ToolbarButton.d.ts +2 -1
- package/dist/types/lib/components/Toolbar/ToolbarButton.stories.d.ts +1 -1
- package/dist/types/lib/components/index.d.ts +1 -1
- package/dist/types/lib/types/fields.d.ts +2 -0
- package/dist/usePagination-B4GfH2GQ.js +1026 -0
- package/package.json +1 -1
- package/dist/assets/FieldBase.css +0 -1
- package/dist/assets/InputBase.css +0 -1
- package/dist/components/TextField/FieldBase.js +0 -16
- package/dist/components/TextField/InputBase.js +0 -33
- package/dist/components/TextField/TextField.js +0 -7
- package/dist/components/TextField/index.js +0 -8
- package/dist/types/lib/components/Button/Buttons.stories.d.ts +0 -18
- package/dist/types/lib/components/TextField/FieldBase.d.ts +0 -11
- package/dist/types/lib/components/TextField/InputBase.d.ts +0 -14
- package/dist/types/lib/components/TextField/TextField.d.ts +0 -7
- package/dist/types/lib/components/TextField/index.d.ts +0 -3
- package/dist/usePagination-BJD-uxk9.js +0 -1098
|
@@ -0,0 +1,1026 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsxs as O, jsx as a, Fragment as me } from "react/jsx-runtime";
|
|
3
|
+
import { c as I } from "./lite-1fxw3LjI.js";
|
|
4
|
+
import * as we from "react";
|
|
5
|
+
import { forwardRef as b, useLayoutEffect as Ot, useEffect as L, useRef as z, createContext as Y, useState as X, useContext as E, useId as ee, version as St, useReducer as _t, useMemo as Q, isValidElement as Ue, memo as Et, useCallback as Tt, Children as Ke } from "react";
|
|
6
|
+
import { a as Xe, S } from "./index-C8BS_2GY.js";
|
|
7
|
+
import { u as V, a as qe, c as Pt, o as Rt, f as Dt, s as Lt, b as At, d as Bt, e as Ft, g as zt, h as $t, i as jt, j as Mt, k as Vt, F as Kt, l as Ht } from "./floating-ui.react-DpzNAs2N.js";
|
|
8
|
+
import { F as ue, V as _e, a as Ut, b as Xt, c as He } from "./index-Bq6w9CqA.js";
|
|
9
|
+
import { I as ce } from "./Input-B_w6SBmg.js";
|
|
10
|
+
import { L as U } from "./Label-DjSEhgyW.js";
|
|
11
|
+
import { T as qt } from "./Textarea-BBstVlPT.js";
|
|
12
|
+
import { u as Wt } from "./index-DyDqjche.js";
|
|
13
|
+
import { S as Yt } from "./XMark-Bv1I87Ev.js";
|
|
14
|
+
import { P as Ne } from "./Paragraph-CFjOkbXa.js";
|
|
15
|
+
import { S as Gt } from "./ChevronUp-H8Nuww4h.js";
|
|
16
|
+
import { S as Jt } from "./ChevronDown-CRAwzuD3.js";
|
|
17
|
+
import { u as Qt } from "./useId-CsCRkvK3.js";
|
|
18
|
+
import { S as Zt } from "./Checkmark-RgzvRNxP.js";
|
|
19
|
+
import { flushSync as en } from "react-dom";
|
|
20
|
+
var tn = function(t, n) {
|
|
21
|
+
var e = {};
|
|
22
|
+
for (var o in t) Object.prototype.hasOwnProperty.call(t, o) && n.indexOf(o) < 0 && (e[o] = t[o]);
|
|
23
|
+
if (t != null && typeof Object.getOwnPropertySymbols == "function")
|
|
24
|
+
for (var r = 0, o = Object.getOwnPropertySymbols(t); r < o.length; r++)
|
|
25
|
+
n.indexOf(o[r]) < 0 && Object.prototype.propertyIsEnumerable.call(t, o[r]) && (e[o[r]] = t[o[r]]);
|
|
26
|
+
return e;
|
|
27
|
+
};
|
|
28
|
+
const nn = b((t, n) => {
|
|
29
|
+
var { title: e, titleId: o } = t, r = tn(t, ["title", "titleId"]);
|
|
30
|
+
let i = Qt();
|
|
31
|
+
return i = e ? o || "title-" + i : void 0, we.createElement(
|
|
32
|
+
"svg",
|
|
33
|
+
Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", fill: "none", viewBox: "0 0 24 24", focusable: !1, role: "img", ref: n, "aria-labelledby": i }, r),
|
|
34
|
+
e ? we.createElement("title", { id: i }, e) : null,
|
|
35
|
+
we.createElement("path", { fill: "currentColor", fillRule: "evenodd", d: "M12 2.25A4.75 4.75 0 0 0 7.25 7v2.25H7A1.75 1.75 0 0 0 5.25 11v9c0 .414.336.75.75.75h12a.75.75 0 0 0 .75-.75v-9A1.75 1.75 0 0 0 17 9.25h-.25V7A4.75 4.75 0 0 0 12 2.25m3.25 7V7a3.25 3.25 0 0 0-6.5 0v2.25zM12 13a1.5 1.5 0 0 0-.75 2.8V17a.75.75 0 0 0 1.5 0v-1.2A1.5 1.5 0 0 0 12 13", clipRule: "evenodd" })
|
|
36
|
+
);
|
|
37
|
+
}), on = typeof window < "u" ? Ot : L;
|
|
38
|
+
function Oe(t) {
|
|
39
|
+
const n = z(null);
|
|
40
|
+
return on(() => {
|
|
41
|
+
const e = document.getAnimations().filter((i) => "animationName" in i && i.animationName === t), o = e.find((i) => "animationName" in i && i.animationName === t), r = e.find((i) => {
|
|
42
|
+
var s;
|
|
43
|
+
return ((s = i.effect) == null ? void 0 : s.target) === n.current;
|
|
44
|
+
});
|
|
45
|
+
return r && r === o && (r.currentTime = 0), r && (o != null && o.currentTime) && r !== o && (r.currentTime = o.currentTime), () => {
|
|
46
|
+
r && (o != null && o.currentTime) && (r.currentTime = o.currentTime);
|
|
47
|
+
};
|
|
48
|
+
}, [t]), n;
|
|
49
|
+
}
|
|
50
|
+
const We = b(function({ "aria-label": n, className: e, ...o }, r) {
|
|
51
|
+
const i = Oe("ds-spinner-rotate-animation"), s = Oe("ds-spinner-stroke-animation"), c = V([i, r]);
|
|
52
|
+
return O("svg", { "aria-label": n, className: I("ds-spinner", e), ref: c, role: "img", viewBox: "0 0 50 50", ...o, children: [a("circle", { className: I("ds-spinner__background"), cx: "25", cy: "25", r: "20", fill: "none", strokeWidth: "5" }), a("circle", { className: I("ds-spinner__circle"), cx: "25", cy: "25", r: "20", fill: "none", strokeWidth: "5", ref: s })] });
|
|
53
|
+
}), te = b(function({ asChild: n, className: e, children: o, icon: r = !1, loading: i = !1, variant: s = "primary", ...c }, l) {
|
|
54
|
+
return O(n ? S : "button", {
|
|
55
|
+
"aria-busy": !!i || void 0,
|
|
56
|
+
"aria-disabled": !!i || void 0,
|
|
57
|
+
className: I("ds-button", e),
|
|
58
|
+
"data-icon": r || void 0,
|
|
59
|
+
"data-variant": s,
|
|
60
|
+
ref: l,
|
|
61
|
+
/* don't set type when we use `asChild` */
|
|
62
|
+
type: n ? void 0 : "button",
|
|
63
|
+
...c,
|
|
64
|
+
children: [i === !0 ? a(We, { "aria-hidden": "true" }) : i, a(Xe, { children: o })]
|
|
65
|
+
});
|
|
66
|
+
}), rn = b(function({ className: n, count: e, maxCount: o, variant: r = "base", ...i }, s) {
|
|
67
|
+
return a("span", { className: I("ds-badge", n), "data-count": e && o && e > o ? `${o}+` : e, "data-variant": r, ref: s, ...i });
|
|
68
|
+
}), sn = b(function({ className: n, overlap: e = "rectangle", placement: o = "top-right", ...r }, i) {
|
|
69
|
+
return a("span", { className: I("ds-badge--position", n), "data-overlap": e, "data-placement": o, ref: i, ...r });
|
|
70
|
+
}), an = Object.assign(rn, { Position: sn });
|
|
71
|
+
an.Position.displayName = "Badge.Position";
|
|
72
|
+
const cn = b(({ asChild: t, className: n, ...e }, o) => a(t ? S : "a", { className: I("ds-link", n), ref: o, ...e }));
|
|
73
|
+
cn.displayName = "Link";
|
|
74
|
+
const lo = b(function({ asChild: n, className: e, height: o, style: r, variant: i = "rectangle", width: s, ...c }, l) {
|
|
75
|
+
const u = n ? S : "span", h = i === "text", f = Oe("ds-skeleton-opacity-fade"), m = V([f, l]);
|
|
76
|
+
return a(u, { "aria-hidden": "true", className: I("ds-skeleton", e), "data-text": h ? "-".repeat(Number(s) || 1) : void 0, "data-variant": i, ref: m, style: h ? r : { width: s, height: o, ...r }, ...c });
|
|
77
|
+
}), uo = b(function({ asChild: n, ...e }, o) {
|
|
78
|
+
return a(n ? S : "li", { ...e, ref: o });
|
|
79
|
+
}), Ye = (t, { asChild: n, className: e, ...o }, r) => a(n ? S : t, { className: I("ds-list", e), ref: r, ...o }), mo = b(function(n, e) {
|
|
80
|
+
return Ye("ul", n, e);
|
|
81
|
+
});
|
|
82
|
+
b(function(n, e) {
|
|
83
|
+
return Ye("ol", n, e);
|
|
84
|
+
});
|
|
85
|
+
const fo = b(function({ level: n = 2, className: e, asChild: o, ...r }, i) {
|
|
86
|
+
const s = o ? S : `h${n}`;
|
|
87
|
+
return a(s, { className: I("ds-heading", e), ref: i, ...r });
|
|
88
|
+
}), po = b(function({ "data-color": n = "info", className: e, ...o }, r) {
|
|
89
|
+
return a("div", { className: I("ds-alert", e), "data-color": n, ref: r, ...o });
|
|
90
|
+
}), Ge = b(function({ asChild: n, className: e, ...o }, r) {
|
|
91
|
+
return a(n ? S : "button", { className: I("ds-chip", e), type: n ? void 0 : "button", ref: r, ...o });
|
|
92
|
+
}), Je = b(function(n, e) {
|
|
93
|
+
return a(Ge, { "data-removable": !0, ref: e, ...n });
|
|
94
|
+
}), Qe = b(function({ asChild: n, children: e, className: o, "data-size": r, "data-color": i, ...s }, c) {
|
|
95
|
+
const l = s.type ?? "checkbox";
|
|
96
|
+
return O(n ? S : "label", { className: I("ds-chip", o), "data-size": r, "data-color": i, ref: c, children: [a(ce, { ...s, type: l }), a(Xe, { children: e })] });
|
|
97
|
+
}), ln = b(function(n, e) {
|
|
98
|
+
return a(Qe, { ref: e, type: "radio", ...n });
|
|
99
|
+
}), fe = {
|
|
100
|
+
Button: Ge,
|
|
101
|
+
Checkbox: Qe,
|
|
102
|
+
Radio: ln,
|
|
103
|
+
Removable: Je
|
|
104
|
+
};
|
|
105
|
+
fe.Button.displayName = "Chip.Button";
|
|
106
|
+
fe.Checkbox.displayName = "Chip.Checkbox";
|
|
107
|
+
fe.Radio.displayName = "Chip.Radio";
|
|
108
|
+
fe.Removable.displayName = "Chip.Removable";
|
|
109
|
+
const dn = b(function({ "aria-label": n = "Sidenavigering", asChild: e, className: o, ...r }, i) {
|
|
110
|
+
return a(e ? S : "nav", { "aria-label": n, className: I("ds-pagination", o), ref: i, ...r });
|
|
111
|
+
}), un = b(function(n, e) {
|
|
112
|
+
return a(te, { ref: e, ...n });
|
|
113
|
+
}), mn = b(function({ asChild: n, className: e, ...o }, r) {
|
|
114
|
+
return a(n ? S : "li", { ref: r, ...o });
|
|
115
|
+
}), fn = b(function({ asChild: n, ...e }, o) {
|
|
116
|
+
return a(n ? S : "ul", { ref: o, ...e });
|
|
117
|
+
}), Ee = Object.assign(dn, {
|
|
118
|
+
List: fn,
|
|
119
|
+
Item: mn,
|
|
120
|
+
Button: un
|
|
121
|
+
});
|
|
122
|
+
Ee.List.displayName = "Pagination.List";
|
|
123
|
+
Ee.Item.displayName = "Pagination.Item";
|
|
124
|
+
Ee.Button.displayName = "Pagination.Button";
|
|
125
|
+
const bo = b(function({ "data-size": n, className: e, style: o, children: r, label: i, description: s, error: c, ...l }, u) {
|
|
126
|
+
return O(ue, { "data-size": n, className: e, style: o, children: [a(ce, { type: "checkbox", ref: u, ...l }), !!i && a(U, { weight: "regular", children: i }), !!s && a("div", { "data-field": "description", children: s }), !!c && a(_e, { children: c })] });
|
|
127
|
+
}), ho = b(function({ "data-size": n, children: e, className: o, description: r, label: i, position: s, style: c, ...l }, u) {
|
|
128
|
+
return O(ue, { className: o, "data-position": s, "data-size": n, style: c, children: [a(ce, { type: "checkbox", role: "switch", ref: u, ...l }), !!i && a(U, { weight: "regular", children: i }), !!r && a("div", { "data-field": "description", children: r })] });
|
|
129
|
+
}), go = b(function({ label: n, description: e, error: o, multiline: r, prefix: i, suffix: s, "data-size": c, counter: l, style: u, className: h, ...f }, m) {
|
|
130
|
+
return O(ue, { className: h, "data-size": c, style: u, children: [!!n && a(U, { children: n }), !!e && a(Ut, { children: e }), O(Xt, { children: [i === void 0 || a(He, { children: i }), r === !0 ? a(qt, { ref: m, "aria-invalid": !!o || void 0, ...f }) : a(ce, { ref: m, "aria-invalid": !!o || void 0, ...f }), s === void 0 || a(He, { children: s })] }), !!o && a(_e, { children: o }), !!l && a(ue.Counter, { ...typeof l == "number" ? { limit: l } : l })] });
|
|
131
|
+
}), pe = Y({}), pn = b(function({ value: n, defaultValue: e, className: o, onChange: r, ...i }, s) {
|
|
132
|
+
const c = n !== void 0, [l, u] = X(e);
|
|
133
|
+
let h = r;
|
|
134
|
+
return c || (h = (f) => {
|
|
135
|
+
u(f), r == null || r(f);
|
|
136
|
+
}, n = l), a(pe.Provider, { value: {
|
|
137
|
+
value: n,
|
|
138
|
+
defaultValue: e,
|
|
139
|
+
onChange: h
|
|
140
|
+
}, children: a("div", { className: I("ds-tabs", o), ref: s, ...i }) });
|
|
141
|
+
}), Ze = Y({
|
|
142
|
+
elements: { current: /* @__PURE__ */ new Map() },
|
|
143
|
+
getOrderedItems: () => [],
|
|
144
|
+
setFocusableValue: () => {
|
|
145
|
+
},
|
|
146
|
+
onShiftTab: () => {
|
|
147
|
+
},
|
|
148
|
+
focusableValue: null,
|
|
149
|
+
orientation: "horizontal"
|
|
150
|
+
}), bn = b(({ activeValue: t, asChild: n, orientation: e = "horizontal", onBlur: o, onFocus: r, ...i }, s) => {
|
|
151
|
+
const c = n ? S : "div", [l, u] = X(null), [h, f] = X(!1), m = z(/* @__PURE__ */ new Map()), g = z(null), x = V([s, g]), w = () => {
|
|
152
|
+
if (!g.current)
|
|
153
|
+
return [];
|
|
154
|
+
const d = Array.from(g.current.querySelectorAll("[data-roving-tabindex-item]"));
|
|
155
|
+
return Array.from(m.current).sort((v, p) => d.indexOf(v[1]) - d.indexOf(p[1])).map(([v, p]) => ({ value: v, element: p }));
|
|
156
|
+
};
|
|
157
|
+
return L(() => {
|
|
158
|
+
u(t ?? null);
|
|
159
|
+
}, [t]), a(Ze.Provider, { value: {
|
|
160
|
+
elements: m,
|
|
161
|
+
getOrderedItems: w,
|
|
162
|
+
focusableValue: l,
|
|
163
|
+
setFocusableValue: u,
|
|
164
|
+
onShiftTab: () => {
|
|
165
|
+
f(!0);
|
|
166
|
+
},
|
|
167
|
+
orientation: e
|
|
168
|
+
}, children: a(c, { ...i, tabIndex: h ? -1 : 0, onBlur: (d) => {
|
|
169
|
+
o == null || o(d), f(!1), u(t ?? null);
|
|
170
|
+
}, onFocus: (d) => {
|
|
171
|
+
var p, y, C;
|
|
172
|
+
if (r == null || r(d), d.target !== d.currentTarget)
|
|
173
|
+
return;
|
|
174
|
+
const v = w();
|
|
175
|
+
v.length !== 0 && (l != null ? (p = m.current.get(l)) == null || p.focus() : t != null ? (y = m.current.get(t)) == null || y.focus() : (C = v.at(0)) == null || C.element.focus());
|
|
176
|
+
}, ref: x }) });
|
|
177
|
+
}), hn = b(function({ children: n, ...e }, o) {
|
|
178
|
+
const { value: r } = E(pe);
|
|
179
|
+
return a(bn, { role: "tablist", activeValue: r, orientation: "ambiguous", ref: o, ...e, children: n });
|
|
180
|
+
}), gn = b(function({ children: n, value: e, ...o }, r) {
|
|
181
|
+
const { value: i } = E(pe), s = e === i, [c, l] = X(!1), u = z(null), h = V([r, u]);
|
|
182
|
+
return L(() => {
|
|
183
|
+
if (!u.current)
|
|
184
|
+
return;
|
|
185
|
+
const f = u.current.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
|
|
186
|
+
l(f.length > 0);
|
|
187
|
+
}, [n]), a(me, { children: s && a("div", { ref: h, role: "tabpanel", tabIndex: c ? void 0 : 0, ...o, children: n }) });
|
|
188
|
+
}), yn = (t) => {
|
|
189
|
+
const { elements: n, getOrderedItems: e, setFocusableValue: o, focusableValue: r, onShiftTab: i, orientation: s } = E(Ze);
|
|
190
|
+
return {
|
|
191
|
+
getOrderedItems: e,
|
|
192
|
+
isFocusable: r === t,
|
|
193
|
+
orientation: s,
|
|
194
|
+
getRovingProps: (c) => ({
|
|
195
|
+
...c,
|
|
196
|
+
ref: (l) => {
|
|
197
|
+
l ? n.current.set(t, l) : n.current.delete(t);
|
|
198
|
+
},
|
|
199
|
+
onKeyDown: (l) => {
|
|
200
|
+
var u;
|
|
201
|
+
if ((u = c == null ? void 0 : c.onKeyDown) == null || u.call(c, l), l.shiftKey && l.key === "Tab") {
|
|
202
|
+
i();
|
|
203
|
+
return;
|
|
204
|
+
}
|
|
205
|
+
},
|
|
206
|
+
onFocus: (l) => {
|
|
207
|
+
var u;
|
|
208
|
+
(u = c == null ? void 0 : c.onFocus) == null || u.call(c, l), o(t);
|
|
209
|
+
},
|
|
210
|
+
"data-roving-tabindex-item": !0,
|
|
211
|
+
tabIndex: r === t ? 0 : -1
|
|
212
|
+
})
|
|
213
|
+
};
|
|
214
|
+
};
|
|
215
|
+
function Ie(t, n) {
|
|
216
|
+
const e = t.findIndex((o) => o.value === n);
|
|
217
|
+
return t.at(e === t.length - 1 ? 0 : e + 1);
|
|
218
|
+
}
|
|
219
|
+
function ke(t, n) {
|
|
220
|
+
const e = t.findIndex((o) => o.value === n);
|
|
221
|
+
return t.at(e === 0 ? -1 : e - 1);
|
|
222
|
+
}
|
|
223
|
+
const xn = b(({ value: t, asChild: n, ...e }, o) => {
|
|
224
|
+
const r = n ? S : "div", i = t ?? (typeof e.children == "string" ? e.children : ""), { getOrderedItems: s, getRovingProps: c, orientation: l } = yn(i), u = c({
|
|
225
|
+
onKeyDown: (f) => {
|
|
226
|
+
var x;
|
|
227
|
+
(x = e == null ? void 0 : e.onKeyDown) == null || x.call(e, f);
|
|
228
|
+
const m = s();
|
|
229
|
+
let g;
|
|
230
|
+
switch (l) {
|
|
231
|
+
case "horizontal":
|
|
232
|
+
f.key === "ArrowRight" && (g = Ie(m, i)), f.key === "ArrowLeft" && (g = ke(m, i));
|
|
233
|
+
break;
|
|
234
|
+
case "vertical":
|
|
235
|
+
f.key === "ArrowDown" && (g = Ie(m, i)), f.key === "ArrowUp" && (g = ke(m, i));
|
|
236
|
+
break;
|
|
237
|
+
case "ambiguous":
|
|
238
|
+
["ArrowRight", "ArrowDown"].includes(f.key) && (g = Ie(m, i)), ["ArrowLeft", "ArrowUp"].includes(f.key) && (g = ke(m, i));
|
|
239
|
+
}
|
|
240
|
+
f.key === "Home" && (g = m[0]), f.key === "End" && (g = m[m.length - 1]), g && (f.preventDefault(), g.element.focus());
|
|
241
|
+
}
|
|
242
|
+
}), h = V([o, u.ref]);
|
|
243
|
+
return a(r, { ...e, ...u, ref: h, children: e.children });
|
|
244
|
+
}), vn = b(function({ value: n, id: e, ...o }, r) {
|
|
245
|
+
const i = E(pe), s = e ?? `tab-${ee()}`;
|
|
246
|
+
return a(xn, { value: n, ...o, asChild: !0, children: a("button", { ...o, "aria-selected": i.value === n, id: s, onClick: () => {
|
|
247
|
+
var c;
|
|
248
|
+
return (c = i.onChange) == null ? void 0 : c.call(i, n);
|
|
249
|
+
}, ref: r, role: "tab", type: "button" }) });
|
|
250
|
+
}), Te = Object.assign(pn, {
|
|
251
|
+
List: hn,
|
|
252
|
+
Tab: vn,
|
|
253
|
+
Panel: gn
|
|
254
|
+
});
|
|
255
|
+
Te.Tab.displayName = "Tabs.Tab";
|
|
256
|
+
Te.List.displayName = "Tabs.List";
|
|
257
|
+
Te.Panel.displayName = "Tabs.Panel";
|
|
258
|
+
const et = ({ children: t }) => {
|
|
259
|
+
const n = ee(), [e, o] = X(n);
|
|
260
|
+
return a(Pe.Provider, { value: { popoverId: e, setPopoverId: o }, children: t });
|
|
261
|
+
};
|
|
262
|
+
et.displayName = "PopoverTriggerContext";
|
|
263
|
+
const Pe = Y({}), Cn = b(function({ id: n, className: e, onClose: o, onOpen: r, open: i, variant: s = "default", placement: c = "top", autoPlacement: l = !0, asChild: u = !1, ...h }, f) {
|
|
264
|
+
const m = u ? S : "div", g = z(null), x = V([g, f]), { popoverId: w, setPopoverId: d } = E(Pe), [v, p] = X(!1), y = i ?? v;
|
|
265
|
+
return L(() => {
|
|
266
|
+
var A;
|
|
267
|
+
const C = g.current, N = ($) => {
|
|
268
|
+
var J;
|
|
269
|
+
const B = $.target, K = (J = B == null ? void 0 : B.closest) == null ? void 0 : J.call(B, `[popovertarget="${C == null ? void 0 : C.id}"]`), j = !K && !(C != null && C.contains(B));
|
|
270
|
+
K && ($.preventDefault(), p((P) => !P), r == null || r()), j && (p(!1), o == null || o());
|
|
271
|
+
}, T = ($) => {
|
|
272
|
+
$.key !== "Escape" || !y || ($.preventDefault(), p(!1), o == null || o());
|
|
273
|
+
};
|
|
274
|
+
return (A = C == null ? void 0 : C.togglePopover) == null || A.call(C, y), document.addEventListener("click", N, !0), document.addEventListener("keydown", T), () => {
|
|
275
|
+
document.removeEventListener("click", N, !0), document.removeEventListener("keydown", T);
|
|
276
|
+
};
|
|
277
|
+
}, [y]), L(() => {
|
|
278
|
+
const C = g.current, N = document.querySelector(`[popovertarget="${C == null ? void 0 : C.id}"]`);
|
|
279
|
+
if (C && N && y)
|
|
280
|
+
return qe(N, C, () => {
|
|
281
|
+
Pt(N, C, {
|
|
282
|
+
placement: c,
|
|
283
|
+
strategy: "fixed",
|
|
284
|
+
middleware: [
|
|
285
|
+
Rt((T) => {
|
|
286
|
+
const A = getComputedStyle(T.elements.floating, "::before");
|
|
287
|
+
return parseFloat(A.height);
|
|
288
|
+
}),
|
|
289
|
+
...l ? [Dt({ fallbackAxisSideDirection: "start" }), Lt()] : [],
|
|
290
|
+
wn
|
|
291
|
+
]
|
|
292
|
+
}).then(({ x: T, y: A }) => {
|
|
293
|
+
C.style.translate = `${T}px ${A}px`;
|
|
294
|
+
});
|
|
295
|
+
});
|
|
296
|
+
}, [y, c, n, l]), L(() => {
|
|
297
|
+
n && (d == null || d(n));
|
|
298
|
+
}, [n]), a(m, {
|
|
299
|
+
className: I("ds-popover", e),
|
|
300
|
+
id: n || w,
|
|
301
|
+
// @ts-ignore @types/react-dom does not understand popover yet
|
|
302
|
+
popover: "manual",
|
|
303
|
+
"data-variant": s,
|
|
304
|
+
ref: x,
|
|
305
|
+
...h
|
|
306
|
+
});
|
|
307
|
+
}), wn = {
|
|
308
|
+
name: "ArrowPseudoElement",
|
|
309
|
+
fn(t) {
|
|
310
|
+
const { elements: n, rects: e, placement: o } = t;
|
|
311
|
+
let r = `${Math.round(e.reference.width / 2 + e.reference.x - t.x)}px`, i = `${Math.round(e.reference.height / 2 + e.reference.y - t.y)}px`;
|
|
312
|
+
switch (e.reference.width > e.floating.width && (r = `${Math.round(e.floating.width / 2)}px`), e.reference.height > e.floating.height && (i = `${Math.round(e.floating.height / 2)}px`), o.split("-")[0]) {
|
|
313
|
+
case "top":
|
|
314
|
+
i = "100%";
|
|
315
|
+
break;
|
|
316
|
+
case "right":
|
|
317
|
+
r = "0";
|
|
318
|
+
break;
|
|
319
|
+
case "bottom":
|
|
320
|
+
i = "0";
|
|
321
|
+
break;
|
|
322
|
+
case "left":
|
|
323
|
+
r = "100%";
|
|
324
|
+
break;
|
|
325
|
+
}
|
|
326
|
+
return n.floating.setAttribute("data-placement", o.split("-")[0]), n.floating.style.setProperty("--ds-popover-arrow-x", r), n.floating.style.setProperty("--ds-popover-arrow-y", i), t;
|
|
327
|
+
}
|
|
328
|
+
}, In = b(function({ id: n, inline: e, asChild: o, ...r }, i) {
|
|
329
|
+
const { popoverId: s } = E(Pe), c = o ? S : e ? "button" : te, l = Object.assign({
|
|
330
|
+
[St.startsWith("19") ? "popoverTarget" : "popovertarget"]: s,
|
|
331
|
+
...e ? {
|
|
332
|
+
"data-popover": "inline"
|
|
333
|
+
} : {}
|
|
334
|
+
}, r);
|
|
335
|
+
return a(c, { ref: i, ...l });
|
|
336
|
+
}), tt = Object.assign(Cn, {
|
|
337
|
+
TriggerContext: et,
|
|
338
|
+
Trigger: In
|
|
339
|
+
});
|
|
340
|
+
tt.TriggerContext.displayName = "Popover.TriggerContext";
|
|
341
|
+
tt.Trigger.displayName = "Popover.Trigger";
|
|
342
|
+
const Re = Y({
|
|
343
|
+
current: null
|
|
344
|
+
}), nt = ({ children: t }) => {
|
|
345
|
+
const n = z(null);
|
|
346
|
+
return a(Re.Provider, { value: n, children: t });
|
|
347
|
+
};
|
|
348
|
+
nt.displayName = "DialogTriggerContext";
|
|
349
|
+
const kn = b(function({ asChild: n, children: e, className: o, closeButton: r = "Lukk dialogvindu", closedby: i = "closerequest", modal: s = !0, onClose: c, open: l, ...u }, h) {
|
|
350
|
+
const f = E(Re), m = z(null), g = n ? S : "dialog", x = V([f, h, m]), w = s ? "showModal" : "show";
|
|
351
|
+
return L(() => {
|
|
352
|
+
var d;
|
|
353
|
+
return (d = m.current) == null ? void 0 : d[l ? w : "close"]();
|
|
354
|
+
}, [l]), L(() => {
|
|
355
|
+
const d = m.current, v = (y) => {
|
|
356
|
+
var A;
|
|
357
|
+
const { clientY: C, clientX: N, target: T } = y;
|
|
358
|
+
if (y instanceof KeyboardEvent)
|
|
359
|
+
return i === "none" && y.key === "Escape" && y.preventDefault();
|
|
360
|
+
if (!((A = window.getSelection()) != null && A.toString()) && d && T === d && i === "any") {
|
|
361
|
+
const { top: $, left: B, right: K, bottom: j } = d.getBoundingClientRect();
|
|
362
|
+
$ <= C && C <= j && B <= N && N <= K || d == null || d.close();
|
|
363
|
+
}
|
|
364
|
+
}, p = () => {
|
|
365
|
+
const y = d == null ? void 0 : d.querySelector("[autofocus]");
|
|
366
|
+
document.activeElement !== y && (y == null || y.focus());
|
|
367
|
+
};
|
|
368
|
+
return d == null || d.addEventListener("animationend", p), d == null || d.addEventListener("click", v), d == null || d.addEventListener("keydown", v), () => {
|
|
369
|
+
d == null || d.removeEventListener("animationend", p), d == null || d.removeEventListener("click", v), d == null || d.removeEventListener("keydown", v);
|
|
370
|
+
};
|
|
371
|
+
}, [i]), L(() => {
|
|
372
|
+
var v;
|
|
373
|
+
const d = (p) => c == null ? void 0 : c(p);
|
|
374
|
+
return (v = m.current) == null || v.addEventListener("close", d), () => {
|
|
375
|
+
var p;
|
|
376
|
+
return (p = m.current) == null ? void 0 : p.removeEventListener("close", d);
|
|
377
|
+
};
|
|
378
|
+
}, [c]), O(g, { className: I("ds-dialog", o), ref: x, "data-modal": s, ...u, children: [r !== !1 && a("form", { method: "dialog", children: a(te, { "aria-label": r, autoFocus: !0, "data-color": "neutral", icon: !0, name: "close", type: "submit", variant: "tertiary" }) }), e] });
|
|
379
|
+
}), Nn = b(function({ asChild: n, className: e, ...o }, r) {
|
|
380
|
+
return a(n ? S : "div", { className: I("ds-dialog__block", e), ref: r, ...o });
|
|
381
|
+
}), On = b(function({ asChild: n, ...e }, o) {
|
|
382
|
+
const r = E(Re);
|
|
383
|
+
return a(n ? S : te, { "aria-haspopup": "dialog", onClick: () => {
|
|
384
|
+
var c, l, u;
|
|
385
|
+
((c = r.current) == null ? void 0 : c.getAttribute("data-modal")) === "true" ? (l = r.current) == null || l.showModal() : (u = r.current) == null || u.show();
|
|
386
|
+
}, ref: o, ...e });
|
|
387
|
+
}), De = Object.assign(kn, {
|
|
388
|
+
Block: Nn,
|
|
389
|
+
TriggerContext: nt,
|
|
390
|
+
Trigger: On
|
|
391
|
+
});
|
|
392
|
+
De.Block.displayName = "Dialog.Block";
|
|
393
|
+
De.TriggerContext.displayName = "Dialog.TriggerContext";
|
|
394
|
+
De.Trigger.displayName = "Dialog.Trigger";
|
|
395
|
+
const G = Y(void 0), ot = Y({
|
|
396
|
+
activeIndex: 0
|
|
397
|
+
}), Sn = (t, n) => {
|
|
398
|
+
switch (n.type) {
|
|
399
|
+
case "SET_ACTIVE_INDEX":
|
|
400
|
+
return {
|
|
401
|
+
...t,
|
|
402
|
+
activeIndex: n.payload
|
|
403
|
+
};
|
|
404
|
+
default:
|
|
405
|
+
return t;
|
|
406
|
+
}
|
|
407
|
+
}, rt = Y(() => {
|
|
408
|
+
throw new Error("ComboboxIdDispatch must be used within a provider");
|
|
409
|
+
}), _n = ({ children: t }) => {
|
|
410
|
+
const [n, e] = _t(Sn, {
|
|
411
|
+
activeIndex: 0
|
|
412
|
+
});
|
|
413
|
+
return a(ot.Provider, { value: n, children: a(rt.Provider, { value: e, children: t }) });
|
|
414
|
+
};
|
|
415
|
+
function Le() {
|
|
416
|
+
return E(rt);
|
|
417
|
+
}
|
|
418
|
+
function be() {
|
|
419
|
+
return E(ot);
|
|
420
|
+
}
|
|
421
|
+
const Z = (t, n) => {
|
|
422
|
+
const e = {}, o = {};
|
|
423
|
+
let r = 0;
|
|
424
|
+
const i = t.length;
|
|
425
|
+
for (; r < i; )
|
|
426
|
+
o[t[r]] = 1, r += 1;
|
|
427
|
+
for (const s in n)
|
|
428
|
+
Object.prototype.hasOwnProperty.call(o, s) || (e[s] = n[s]);
|
|
429
|
+
return e;
|
|
430
|
+
}, it = b(({ asChild: t, interactive: n, id: e, className: o, ...r }, i) => {
|
|
431
|
+
if (n && !e)
|
|
432
|
+
throw new Error("If ComboboxCustom is interactive, it must have an id");
|
|
433
|
+
const s = t ? S : "div", c = ee(), { activeIndex: l } = be(), u = E(G);
|
|
434
|
+
if (!u)
|
|
435
|
+
throw new Error("ComboboxCustom must be used within a Combobox");
|
|
436
|
+
const { customIds: h, setListRef: f, getItemProps: m, size: g } = u, x = Q(() => e && h.indexOf(e) || 0, [e, h]), w = V([
|
|
437
|
+
(d) => {
|
|
438
|
+
f(x, d);
|
|
439
|
+
},
|
|
440
|
+
i
|
|
441
|
+
]);
|
|
442
|
+
return a(U, { "data-size": g, asChild: !0, children: a(s, { ref: w, tabIndex: -1, className: I("ds-combobox__custom", o), id: e || c, role: "option", "aria-selected": l === x, "data-active": l === x, ...Z(["interactive"], r), ...Z(["onClick", "onPointerLeave"], m()) }) });
|
|
443
|
+
});
|
|
444
|
+
function En(t) {
|
|
445
|
+
return Ue(t) && t.type === it;
|
|
446
|
+
}
|
|
447
|
+
function Tn(t) {
|
|
448
|
+
return En(t) && t.props.interactive === !0;
|
|
449
|
+
}
|
|
450
|
+
const st = "internal-option-", D = (t) => st + t, Se = (t) => t.slice(st.length), ae = (t, n) => {
|
|
451
|
+
const e = t.value;
|
|
452
|
+
t.value = n;
|
|
453
|
+
const o = t._valueTracker;
|
|
454
|
+
typeof o < "u" && o.setValue(e), t.dispatchEvent(new Event("change", { bubbles: !0 }));
|
|
455
|
+
}, Pn = b(function({ "aria-label": n = "Tøm", onClick: e, ...o }, r) {
|
|
456
|
+
return a(te, { ref: r, variant: "tertiary", type: "reset", "aria-label": n, onClick: (s) => {
|
|
457
|
+
var u;
|
|
458
|
+
const c = s.target;
|
|
459
|
+
let l = null;
|
|
460
|
+
if (c instanceof HTMLElement && (l = (u = c.closest(".ds-search")) == null ? void 0 : u.querySelector("input")), !l)
|
|
461
|
+
throw new Error("Input is missing");
|
|
462
|
+
if (!(l instanceof HTMLInputElement))
|
|
463
|
+
throw new Error("Input is not an input element");
|
|
464
|
+
s.preventDefault(), ae(l, ""), l.focus(), e == null || e(s);
|
|
465
|
+
}, icon: !0, ...o });
|
|
466
|
+
}), Rn = b(function({ children: n = "Søk", ...e }, o) {
|
|
467
|
+
return a(te, { ref: o, type: "submit", ...e, children: n });
|
|
468
|
+
}), Dn = b(function({ ...n }, e) {
|
|
469
|
+
return a(ce, {
|
|
470
|
+
ref: e,
|
|
471
|
+
type: "search",
|
|
472
|
+
/* We need an empty placeholder for the clear button to be able to show/hide */
|
|
473
|
+
placeholder: "",
|
|
474
|
+
...n
|
|
475
|
+
});
|
|
476
|
+
}), Ln = b(function({ className: n, ...e }, o) {
|
|
477
|
+
return a("div", { ref: o, className: I("ds-search", n), ...e });
|
|
478
|
+
}), Ae = Object.assign(Ln, {
|
|
479
|
+
Clear: Pn,
|
|
480
|
+
Button: Rn,
|
|
481
|
+
Input: Dn
|
|
482
|
+
});
|
|
483
|
+
Ae.Clear.displayName = "Search.Clear";
|
|
484
|
+
Ae.Button.displayName = "Search.Button";
|
|
485
|
+
Ae.Input.displayName = "Search.Input";
|
|
486
|
+
const An = Y(null), Bn = (t, n) => {
|
|
487
|
+
const e = E(An), o = ee(), r = t.id ?? `${n}-${o}`, i = t.errorId ?? `${n}-error-${o}`, s = `${n}-description-${o}`, c = t.size ?? (e == null ? void 0 : e.size) ?? "md", l = (e == null ? void 0 : e.disabled) || (t == null ? void 0 : t.disabled), u = !l && !!(t.error || e != null && e.error);
|
|
488
|
+
return {
|
|
489
|
+
hasError: u,
|
|
490
|
+
errorId: i,
|
|
491
|
+
descriptionId: s,
|
|
492
|
+
size: c,
|
|
493
|
+
inputProps: {
|
|
494
|
+
id: r,
|
|
495
|
+
disabled: l,
|
|
496
|
+
"aria-invalid": u ? !0 : void 0,
|
|
497
|
+
"aria-describedby": I(t["aria-describedby"], !!(t != null && t.description) && typeof (t == null ? void 0 : t.description) == "string" && s, u && !(e != null && e.error) && i, u && !!(e != null && e.error) && (e == null ? void 0 : e.errorId)) || void 0
|
|
498
|
+
}
|
|
499
|
+
};
|
|
500
|
+
}, at = ({ size: t, error: n, formFieldProps: e }) => a("div", { className: "ds-combobox__error-message", id: e.errorId, "aria-live": "polite", "aria-relevant": "additions removals", children: n && a(_e, { "data-size": t, children: n }) });
|
|
501
|
+
at.displayName = "ComboboxError";
|
|
502
|
+
const ct = () => {
|
|
503
|
+
const t = E(G);
|
|
504
|
+
if (!t)
|
|
505
|
+
throw new Error("ComboboxContext is missing");
|
|
506
|
+
const { size: n, readOnly: e, disabled: o, selectedOptions: r, chipSrLabel: i, handleSelectOption: s, inputRef: c } = t;
|
|
507
|
+
return a(me, { children: Object.keys(r).map((l) => a(Je, { "data-size": n, disabled: o, onKeyDown: (u) => {
|
|
508
|
+
var h;
|
|
509
|
+
e || o || u.key === "Enter" && (u.stopPropagation(), s({
|
|
510
|
+
option: r[l],
|
|
511
|
+
remove: !0
|
|
512
|
+
}), (h = c == null ? void 0 : c.current) == null || h.focus());
|
|
513
|
+
}, onClick: () => {
|
|
514
|
+
e || o || s({
|
|
515
|
+
option: r[l],
|
|
516
|
+
remove: !0
|
|
517
|
+
});
|
|
518
|
+
}, "aria-label": i(r[l]), children: r[l].label }, l)) });
|
|
519
|
+
};
|
|
520
|
+
ct.displayName = "ComboboxChips";
|
|
521
|
+
const lt = b((t, n) => {
|
|
522
|
+
const e = E(G);
|
|
523
|
+
if (!e)
|
|
524
|
+
throw new Error("ComboboxContext is missing");
|
|
525
|
+
const { readOnly: o, disabled: r, clearButtonLabel: i, handleSelectOption: s } = e;
|
|
526
|
+
return a("button", { ...t, ref: n, disabled: r, className: I("ds-combobox__clear-button", "ds-focus"), onClick: () => {
|
|
527
|
+
o || r || s({ option: null, clear: !0 });
|
|
528
|
+
}, onKeyDown: (c) => {
|
|
529
|
+
o || r || c.key === "Enter" && (c.stopPropagation(), s({ option: null, clear: !0 }));
|
|
530
|
+
}, type: "button", "aria-label": i, children: a(Yt, { fontSize: "1.5em", title: "Clear selection" }) });
|
|
531
|
+
});
|
|
532
|
+
lt.displayName = "ComboboxClearButton";
|
|
533
|
+
const dt = ({ hideClearButton: t, listId: n, error: e, hideChips: o, handleKeyDown: r, ...i }) => {
|
|
534
|
+
const s = E(G), c = Le(), l = z(null);
|
|
535
|
+
if (!s)
|
|
536
|
+
throw new Error("ComboboxContext is missing");
|
|
537
|
+
const u = (R) => {
|
|
538
|
+
c == null || c({ type: "SET_ACTIVE_INDEX", payload: R });
|
|
539
|
+
}, { forwareddRef: h, readOnly: f, disabled: m, open: g, inputRef: x, refs: w, inputValue: d, multiple: v, selectedOptions: p, formFieldProps: y, htmlSize: C, options: N, setOpen: T, getReferenceProps: A, setInputValue: $, handleSelectOption: B, size: K } = s, j = V([h, x]), J = (R) => {
|
|
540
|
+
const F = R.target.value;
|
|
541
|
+
$(F), u(0);
|
|
542
|
+
for (const H of Object.values(N))
|
|
543
|
+
if (H.label.toLowerCase() === F.toLowerCase()) {
|
|
544
|
+
if (p[D(H.value)])
|
|
545
|
+
continue;
|
|
546
|
+
B({ option: H });
|
|
547
|
+
}
|
|
548
|
+
}, P = !t && Object.keys(p).length > 0, ne = A({
|
|
549
|
+
ref: w == null ? void 0 : w.setReference,
|
|
550
|
+
role: null,
|
|
551
|
+
"aria-controls": null,
|
|
552
|
+
"aria-expanded": null,
|
|
553
|
+
"aria-haspopup": null,
|
|
554
|
+
/* If we click the wrapper, toggle open, set index to first option, and focus the input */
|
|
555
|
+
onClick(R) {
|
|
556
|
+
var F, H;
|
|
557
|
+
m || f || (F = l.current) != null && F.contains(R.target) || (T(!g), u(0), (H = x.current) == null || H.focus());
|
|
558
|
+
},
|
|
559
|
+
/* Handles list navigation */
|
|
560
|
+
onKeyDown: r,
|
|
561
|
+
// preventDefault on keydown to avoid sending in form
|
|
562
|
+
onKeyPress(R) {
|
|
563
|
+
R.key === "Enter" && R.preventDefault();
|
|
564
|
+
}
|
|
565
|
+
});
|
|
566
|
+
return a(Ne, { "data-size": K, asChild: !0, children: O("div", { ...ne, "aria-disabled": m ? "true" : void 0, className: I("ds-textfield__input", "ds-combobox__input__wrapper", f && "ds-combobox--readonly", e && "ds-combobox--error"), children: [O("div", { className: "ds-combobox__chip-and-input", children: [v && !o && a(ct, {}), a(Ne, { "data-size": K, asChild: !0, children: a("input", { ref: j, "aria-activedescendant": ne["aria-activedescendant"], readOnly: f, "aria-autocomplete": "list", role: "combobox", "aria-expanded": g, "aria-controls": g ? n : void 0, autoComplete: "off", size: C, value: d, ...Z(["style", "className"], i), ...y.inputProps, className: "ds-combobox__input", onChange: (R) => {
|
|
567
|
+
var F;
|
|
568
|
+
J(R), !g && T(!0), (F = i.onChange) == null || F.call(i, R);
|
|
569
|
+
} }) })] }), P && a(lt, { ref: l }), a("div", { className: "ds-combobox__arrow", children: g ? a(Gt, { title: "arrow up", fontSize: "1.5em" }) : a(Jt, { title: "arrow down", fontSize: "1.5em" }) })] }) });
|
|
570
|
+
};
|
|
571
|
+
dt.displayName = "ComboboxInput";
|
|
572
|
+
const ut = ({ label: t, description: n, hideLabel: e, size: o, readOnly: r, formFieldProps: i }) => O(me, { children: [t && O(U, { "data-size": o, htmlFor: i.inputProps.id, className: I("ds-combobox__label", e && "ds-sr-only"), children: [r && a(nn, { "aria-hidden": !0, className: "ds-combobox__readonly__icon" }), t] }), n && a(Ne, { asChild: !0, "data-size": o, children: a("div", { id: i.descriptionId, className: I("ds-combobox__description", e && "ds-sr-only"), children: n }) })] });
|
|
573
|
+
ut.displayName = "ComboboxLabel";
|
|
574
|
+
const mt = ({ selectedOptions: t, multiple: n, name: e }) => {
|
|
575
|
+
const o = Object.keys(t).map((r) => Se(r));
|
|
576
|
+
return a("select", { name: e, multiple: n, style: { display: "none" }, value: n ? o : o[0], onChange: () => {
|
|
577
|
+
}, children: o.map((r) => a("option", { value: r }, r)) });
|
|
578
|
+
};
|
|
579
|
+
mt.displayName = "ComboboxNative";
|
|
580
|
+
const ft = b(({ children: t, className: n, ...e }, o) => a("span", { className: I("ds-combobox__option__description", n), ref: o, ...e, children: t }));
|
|
581
|
+
ft.displayName = "ComboboxOptionDescription";
|
|
582
|
+
const pt = ({ multiple: t, selected: n }) => a("div", { className: I(t && "ds-combobox__option__icon-wrapper", n && "ds-combobox__option__icon-wrapper--selected"), children: n && a(Zt, { className: "ds-combobox__option__icon-wrapper__icon", "aria-hidden": !0 }) });
|
|
583
|
+
pt.displayName = "SelectedIcon";
|
|
584
|
+
function Be(t, n = 50) {
|
|
585
|
+
const e = z(null);
|
|
586
|
+
return L(() => () => {
|
|
587
|
+
e.current && clearTimeout(e.current);
|
|
588
|
+
}, []), (...r) => {
|
|
589
|
+
e.current && clearTimeout(e.current), e.current = window.setTimeout(() => {
|
|
590
|
+
t(...r);
|
|
591
|
+
}, n);
|
|
592
|
+
};
|
|
593
|
+
}
|
|
594
|
+
const Fn = ({ id: t, ref: n, value: e }) => {
|
|
595
|
+
const o = ee(), r = t || o, i = E(G), { activeIndex: s } = be(), c = Le();
|
|
596
|
+
if (!i)
|
|
597
|
+
throw new Error("ComboboxOption must be used within a Combobox");
|
|
598
|
+
const { selectedOptions: l, onOptionClick: u, setListRef: h, customIds: f, filteredOptions: m } = i, g = Q(() => m.indexOf(D(String(e))) + f.length, [f.length, m, e]), x = V([
|
|
599
|
+
(p) => {
|
|
600
|
+
h(g, p);
|
|
601
|
+
},
|
|
602
|
+
n
|
|
603
|
+
]);
|
|
604
|
+
if (g === -1)
|
|
605
|
+
throw new Error("Internal error: ComboboxOption did not find index");
|
|
606
|
+
const w = l[D(e)], d = s === g;
|
|
607
|
+
L(() => {
|
|
608
|
+
d && (c == null || c({ type: "SET_ACTIVE_INDEX", payload: g }));
|
|
609
|
+
}, [o, t, c, d, g]);
|
|
610
|
+
const v = Be(() => u(e), 50);
|
|
611
|
+
return {
|
|
612
|
+
id: r,
|
|
613
|
+
ref: x,
|
|
614
|
+
selected: w,
|
|
615
|
+
active: d,
|
|
616
|
+
onOptionClick: v
|
|
617
|
+
};
|
|
618
|
+
}, Fe = Et(b(({ value: t, description: n, children: e, className: o, ...r }, i) => {
|
|
619
|
+
const s = ee(), { id: c, ref: l, selected: u, active: h, onOptionClick: f } = Fn({
|
|
620
|
+
id: r.id,
|
|
621
|
+
ref: i,
|
|
622
|
+
value: t
|
|
623
|
+
}), m = E(G);
|
|
624
|
+
if (!m)
|
|
625
|
+
throw new Error("ComboboxOption must be used within a Combobox");
|
|
626
|
+
const { size: g, multiple: x, getItemProps: w } = m, d = w();
|
|
627
|
+
return a(U, { "data-size": "md", asChild: !0, children: O("button", {
|
|
628
|
+
ref: l,
|
|
629
|
+
id: c,
|
|
630
|
+
// biome-ignore lint/a11y/useSemanticElements: biome wants me to use the <option> element
|
|
631
|
+
role: "option",
|
|
632
|
+
type: "button",
|
|
633
|
+
"aria-selected": !!u,
|
|
634
|
+
"aria-labelledby": s,
|
|
635
|
+
tabIndex: -1,
|
|
636
|
+
onClick: (v) => {
|
|
637
|
+
var p;
|
|
638
|
+
f(), (p = r.onClick) == null || p.call(r, v);
|
|
639
|
+
},
|
|
640
|
+
className: I("ds-combobox__option", h && "ds-combobox__option--active", x && "ds-combobox__option--multiple", o),
|
|
641
|
+
...Z(["displayValue"], r),
|
|
642
|
+
...Z(["onClick", "onPointerLeave"], d),
|
|
643
|
+
children: [a(U, { asChild: !0, "data-size": g, children: a("span", { children: a(pt, { multiple: x, selected: !!u }) }) }), O(U, { className: "ds-combobox__option__label", "data-size": g, id: s, children: [e, n && a(ft, { children: n })] })]
|
|
644
|
+
}) });
|
|
645
|
+
}));
|
|
646
|
+
Fe.displayName = "ComboboxOption";
|
|
647
|
+
function zn(t) {
|
|
648
|
+
return Ue(t) && t.type === Fe;
|
|
649
|
+
}
|
|
650
|
+
const $n = (t) => !!t;
|
|
651
|
+
function jn({ children: t, inputValue: n, multiple: e, filter: o = (i, s) => s.label.toLowerCase().startsWith(i.toLowerCase()), initialValue: r }) {
|
|
652
|
+
const i = Tt(o, [o]), { optionsChildren: s, customIds: c, restChildren: l, interactiveChildren: u } = Q(() => Ke.toArray(t).reduce((p, y) => {
|
|
653
|
+
if (zn(y))
|
|
654
|
+
p.optionsChildren.push(y);
|
|
655
|
+
else if (p.restChildren.push(y), Tn(y)) {
|
|
656
|
+
const C = y;
|
|
657
|
+
if (p.interactiveChildren.push(C), !C.props.id)
|
|
658
|
+
throw new Error("If ComboboxCustom is interactive, it must have an id");
|
|
659
|
+
p.customIds.push(C.props.id);
|
|
660
|
+
}
|
|
661
|
+
return p;
|
|
662
|
+
}, {
|
|
663
|
+
optionsChildren: [],
|
|
664
|
+
customIds: [],
|
|
665
|
+
restChildren: [],
|
|
666
|
+
interactiveChildren: []
|
|
667
|
+
}), [t]), h = Q(() => {
|
|
668
|
+
const d = [], v = {};
|
|
669
|
+
return s.map((p) => {
|
|
670
|
+
const y = p.props;
|
|
671
|
+
let C = y.displayValue || "";
|
|
672
|
+
if (!y.displayValue) {
|
|
673
|
+
let N = "";
|
|
674
|
+
Ke.forEach(y.children, (T) => {
|
|
675
|
+
if (typeof T == "string")
|
|
676
|
+
N += T;
|
|
677
|
+
else
|
|
678
|
+
throw new Error("If ComboboxOption is not a string, it must have a displayValue prop");
|
|
679
|
+
}), C = N;
|
|
680
|
+
}
|
|
681
|
+
d.includes(y.value) && console.warn(`Combobox has multiple options with the same value: ${y.value}`), d.push(y.value), v[D(String(y.value))] = {
|
|
682
|
+
value: String(y.value),
|
|
683
|
+
label: C,
|
|
684
|
+
displayValue: y.displayValue,
|
|
685
|
+
description: y.description
|
|
686
|
+
};
|
|
687
|
+
}), v;
|
|
688
|
+
}, [s]), f = Q(() => ((r == null ? void 0 : r.map((d) => D(d))) || []).reduce((d, v) => {
|
|
689
|
+
const p = h[v];
|
|
690
|
+
return $n(p) && (d[v] = p), d;
|
|
691
|
+
}, {}), [r, h]), [m, g] = X(f), { filteredOptions: x, filteredOptionsChildren: w } = Q(() => {
|
|
692
|
+
const d = [], v = Object.keys(h).map((p, y) => {
|
|
693
|
+
if (!e && Object.keys(m).length === 1 || e && m[p] || i(n, h[p]))
|
|
694
|
+
return d.push(p), s[y];
|
|
695
|
+
}).filter((p) => p);
|
|
696
|
+
return { filteredOptions: d, filteredOptionsChildren: v };
|
|
697
|
+
}, [
|
|
698
|
+
i,
|
|
699
|
+
n,
|
|
700
|
+
e,
|
|
701
|
+
h,
|
|
702
|
+
s,
|
|
703
|
+
m
|
|
704
|
+
]);
|
|
705
|
+
return {
|
|
706
|
+
filteredOptionsChildren: w,
|
|
707
|
+
filteredOptions: x,
|
|
708
|
+
restChildren: l,
|
|
709
|
+
options: h,
|
|
710
|
+
customIds: c,
|
|
711
|
+
selectedOptions: m,
|
|
712
|
+
interactiveChildren: u,
|
|
713
|
+
setSelectedOptions: g
|
|
714
|
+
};
|
|
715
|
+
}
|
|
716
|
+
const Mn = ({ readOnly: t, disabled: n, interactiveChildren: e, filteredOptions: o, inputValue: r, selectedOptions: i, multiple: s, open: c, options: l, setOpen: u, handleSelectOption: h }) => {
|
|
717
|
+
const { activeIndex: f } = be();
|
|
718
|
+
return Be((x) => {
|
|
719
|
+
if (!(t || n) && x)
|
|
720
|
+
switch (x.key) {
|
|
721
|
+
case "ArrowDown":
|
|
722
|
+
if (x.preventDefault(), c)
|
|
723
|
+
break;
|
|
724
|
+
u(!0);
|
|
725
|
+
break;
|
|
726
|
+
case "ArrowUp":
|
|
727
|
+
if (x.preventDefault(), f !== 0)
|
|
728
|
+
break;
|
|
729
|
+
u(!1);
|
|
730
|
+
break;
|
|
731
|
+
case "Enter": {
|
|
732
|
+
if (x.preventDefault(), !c)
|
|
733
|
+
break;
|
|
734
|
+
if (f <= e.length - 1) {
|
|
735
|
+
const v = e[f];
|
|
736
|
+
if (v.props.onSelect) {
|
|
737
|
+
v == null || v.props.onSelect();
|
|
738
|
+
return;
|
|
739
|
+
}
|
|
740
|
+
}
|
|
741
|
+
const w = f - e.length, d = o[w];
|
|
742
|
+
h({ option: l[d] });
|
|
743
|
+
break;
|
|
744
|
+
}
|
|
745
|
+
case "Backspace":
|
|
746
|
+
if (!s) {
|
|
747
|
+
const w = Object.keys(i).pop();
|
|
748
|
+
w && h({
|
|
749
|
+
option: i[w],
|
|
750
|
+
remove: !0
|
|
751
|
+
});
|
|
752
|
+
break;
|
|
753
|
+
}
|
|
754
|
+
if (r === "" && s) {
|
|
755
|
+
const w = Object.keys(i).pop();
|
|
756
|
+
w && h({
|
|
757
|
+
option: i[w],
|
|
758
|
+
remove: !0
|
|
759
|
+
});
|
|
760
|
+
}
|
|
761
|
+
break;
|
|
762
|
+
}
|
|
763
|
+
}, 20);
|
|
764
|
+
}, Vn = ({ listRef: t }) => {
|
|
765
|
+
const [n, e] = X(!1), { activeIndex: o } = be(), r = Le(), { refs: i, floatingStyles: s, context: c } = At({
|
|
766
|
+
open: n,
|
|
767
|
+
onOpenChange: (x) => {
|
|
768
|
+
x || r == null || r({ type: "SET_ACTIVE_INDEX", payload: 0 }), en(() => {
|
|
769
|
+
i.floating.current && !x && (i.floating.current.scrollTop = 0), setTimeout(() => {
|
|
770
|
+
e(x);
|
|
771
|
+
}, 1);
|
|
772
|
+
});
|
|
773
|
+
},
|
|
774
|
+
whileElementsMounted: (x, w, d) => (qe(x, w, d), () => {
|
|
775
|
+
w.scrollTop = 0;
|
|
776
|
+
}),
|
|
777
|
+
middleware: [
|
|
778
|
+
Bt({ padding: 10 }),
|
|
779
|
+
Ft({
|
|
780
|
+
apply({ rects: x, elements: w }) {
|
|
781
|
+
requestAnimationFrame(() => {
|
|
782
|
+
Object.assign(w.floating.style, {
|
|
783
|
+
width: `${x.reference.width}px`,
|
|
784
|
+
maxHeight: "200px"
|
|
785
|
+
});
|
|
786
|
+
});
|
|
787
|
+
}
|
|
788
|
+
}),
|
|
789
|
+
zt(10)
|
|
790
|
+
]
|
|
791
|
+
}), l = $t(c, { role: "listbox" }), u = jt(c), h = Mt(c, {
|
|
792
|
+
listRef: t,
|
|
793
|
+
activeIndex: o,
|
|
794
|
+
virtual: !0,
|
|
795
|
+
scrollItemIntoView: !0,
|
|
796
|
+
enabled: n,
|
|
797
|
+
focusItemOnHover: !0,
|
|
798
|
+
onNavigate: (x) => {
|
|
799
|
+
r == null || r({ type: "SET_ACTIVE_INDEX", payload: x || 0 });
|
|
800
|
+
}
|
|
801
|
+
}), { getReferenceProps: f, getFloatingProps: m, getItemProps: g } = Vt([l, u, h]);
|
|
802
|
+
return {
|
|
803
|
+
open: n,
|
|
804
|
+
setOpen: e,
|
|
805
|
+
activeIndex: o,
|
|
806
|
+
refs: i,
|
|
807
|
+
floatingStyles: s,
|
|
808
|
+
context: c,
|
|
809
|
+
getReferenceProps: f,
|
|
810
|
+
getFloatingProps: m,
|
|
811
|
+
getItemProps: g
|
|
812
|
+
};
|
|
813
|
+
}, Kn = b(({ value: t, initialValue: n = [], onValueChange: e, label: o, hideLabel: r = !1, description: i, multiple: s = !1, disabled: c = !1, readOnly: l = !1, hideChips: u = !1, clearButtonLabel: h = "Fjern alt", hideClearButton: f = !1, error: m, errorId: g, id: x, name: w, portal: d = !0, htmlSize: v = 0, virtual: p = !1, children: y, style: C, size: N = "md", loading: T, loadingLabel: A = "Laster...", filter: $, chipSrLabel: B = (P) => "Slett " + P.label, className: K, ...j }, J) => {
|
|
814
|
+
const P = z(null), ne = z(null), R = z([]), [F, H] = X(j.inputValue || "");
|
|
815
|
+
L(() => {
|
|
816
|
+
typeof j.inputValue == "string" && H(j.inputValue);
|
|
817
|
+
}, [j.inputValue]);
|
|
818
|
+
const { selectedOptions: oe, options: q, restChildren: gt, interactiveChildren: yt, customIds: xt, filteredOptionsChildren: ge, filteredOptions: ze, setSelectedOptions: re } = jn({
|
|
819
|
+
children: y,
|
|
820
|
+
inputValue: F,
|
|
821
|
+
filter: $,
|
|
822
|
+
multiple: s,
|
|
823
|
+
initialValue: n
|
|
824
|
+
}), { open: ye, setOpen: xe, refs: le, floatingStyles: vt, context: $e, getReferenceProps: Ct, getFloatingProps: wt, getItemProps: It } = Vn({
|
|
825
|
+
listRef: R
|
|
826
|
+
}), ie = Bn({
|
|
827
|
+
disabled: c,
|
|
828
|
+
error: m,
|
|
829
|
+
errorId: g,
|
|
830
|
+
size: N,
|
|
831
|
+
description: i,
|
|
832
|
+
id: x
|
|
833
|
+
}, "combobox");
|
|
834
|
+
L(() => {
|
|
835
|
+
if (t && t.length > 0 && !s) {
|
|
836
|
+
const _ = q[D(t[0])];
|
|
837
|
+
P.current && ae(P.current, (_ == null ? void 0 : _.label) || "");
|
|
838
|
+
}
|
|
839
|
+
}, [s, t, q]), L(() => {
|
|
840
|
+
if (t && Object.keys(q).length >= 0) {
|
|
841
|
+
const _ = t.map((k) => q[D(k)]);
|
|
842
|
+
re(_.reduce((k, se) => (k[D(se.value)] = se, k), {}));
|
|
843
|
+
}
|
|
844
|
+
}, [s, t, q, re]);
|
|
845
|
+
const ve = Be((_) => {
|
|
846
|
+
var je, Me;
|
|
847
|
+
const { option: k, clear: se, remove: Nt } = _;
|
|
848
|
+
if (se) {
|
|
849
|
+
re({}), P.current && ae(P.current, ""), e == null || e([]);
|
|
850
|
+
return;
|
|
851
|
+
}
|
|
852
|
+
if (!k)
|
|
853
|
+
return;
|
|
854
|
+
if (Nt) {
|
|
855
|
+
const M = { ...oe };
|
|
856
|
+
delete M[D(k.value)], re(M), e == null || e(Object.keys(M).map((de) => Se(de)));
|
|
857
|
+
return;
|
|
858
|
+
}
|
|
859
|
+
const W = { ...oe };
|
|
860
|
+
if (s)
|
|
861
|
+
W[D(k.value)] ? delete W[D(k.value)] : W[D(k.value)] = k, P.current && ae(P.current, ""), (je = P.current) == null || je.focus();
|
|
862
|
+
else {
|
|
863
|
+
for (const M of Object.keys(W))
|
|
864
|
+
delete W[M];
|
|
865
|
+
W[D(k.value)] = k, P.current && ae(P.current, (k == null ? void 0 : k.label) || ""), setTimeout(() => {
|
|
866
|
+
var M, de, Ve;
|
|
867
|
+
(Ve = P.current) == null || Ve.setSelectionRange(((M = k == null ? void 0 : k.label) == null ? void 0 : M.length) || 0, ((de = k == null ? void 0 : k.label) == null ? void 0 : de.length) || 0);
|
|
868
|
+
}, 0);
|
|
869
|
+
}
|
|
870
|
+
re(W), e == null || e(Object.keys(W).map((M) => Se(M))), !s && xe(!1), (Me = le.domReference.current) == null || Me.focus();
|
|
871
|
+
}, 50), kt = Mn({
|
|
872
|
+
filteredOptions: ze,
|
|
873
|
+
selectedOptions: oe,
|
|
874
|
+
readOnly: ie.readOnly || !1,
|
|
875
|
+
disabled: c,
|
|
876
|
+
multiple: s,
|
|
877
|
+
inputValue: F,
|
|
878
|
+
options: q,
|
|
879
|
+
open: ye,
|
|
880
|
+
interactiveChildren: yt,
|
|
881
|
+
setOpen: xe,
|
|
882
|
+
handleSelectOption: ve
|
|
883
|
+
}), Ce = Wt({
|
|
884
|
+
count: Object.keys(ge).length,
|
|
885
|
+
getScrollElement: () => p ? le.floating.current : null,
|
|
886
|
+
estimateSize: () => 70,
|
|
887
|
+
measureElement: (_) => _.getBoundingClientRect().height,
|
|
888
|
+
overscan: 7
|
|
889
|
+
});
|
|
890
|
+
return O(G.Provider, { value: {
|
|
891
|
+
size: N,
|
|
892
|
+
options: q,
|
|
893
|
+
selectedOptions: oe,
|
|
894
|
+
multiple: s,
|
|
895
|
+
disabled: c,
|
|
896
|
+
readOnly: l,
|
|
897
|
+
open: ye,
|
|
898
|
+
inputRef: P,
|
|
899
|
+
refs: le,
|
|
900
|
+
inputValue: F,
|
|
901
|
+
formFieldProps: ie,
|
|
902
|
+
htmlSize: v,
|
|
903
|
+
clearButtonLabel: h,
|
|
904
|
+
customIds: xt,
|
|
905
|
+
filteredOptions: ze,
|
|
906
|
+
setInputValue: H,
|
|
907
|
+
setOpen: xe,
|
|
908
|
+
getReferenceProps: Ct,
|
|
909
|
+
getItemProps: It,
|
|
910
|
+
/* Recieves the value of the option, and searches for it in our values lookup */
|
|
911
|
+
onOptionClick: (_) => {
|
|
912
|
+
if (l || c)
|
|
913
|
+
return;
|
|
914
|
+
const k = q[D(_)];
|
|
915
|
+
ve({ option: k });
|
|
916
|
+
},
|
|
917
|
+
handleSelectOption: ve,
|
|
918
|
+
chipSrLabel: B,
|
|
919
|
+
listRef: R,
|
|
920
|
+
forwareddRef: J,
|
|
921
|
+
setListRef: (_, k) => {
|
|
922
|
+
R.current[_] = k;
|
|
923
|
+
}
|
|
924
|
+
}, children: [O("div", { className: I("ds-combobox", `ds-combobox--${N}`, c && "ds-combobox__disabled", K), style: C, ref: ne, children: [w && a(mt, { name: w, selectedOptions: oe, multiple: s }), a(ut, { label: o, description: i, size: N, readOnly: l, hideLabel: r, formFieldProps: ie }), a(dt, { ...Z(["inputValue"], j), hideClearButton: f, listId: $e.floatingId || "", error: m, hideChips: u, handleKeyDown: kt, "aria-busy": T }), a(at, { size: N, error: m, formFieldProps: ie })] }), ye && a(Kt, { root: d ? null : ne, children: a(Ht, { context: $e, initialFocus: -1, visuallyHiddenDismiss: !0, children: O("div", { "aria-labelledby": ie.inputProps.id, "aria-autocomplete": "list", tabIndex: -1, ...wt({
|
|
925
|
+
ref: le.setFloating,
|
|
926
|
+
style: {
|
|
927
|
+
...vt
|
|
928
|
+
}
|
|
929
|
+
}), className: I("ds-combobox__options-wrapper", `ds-combobox--${N}`), children: [p && a("div", { style: {
|
|
930
|
+
height: `${Ce.getTotalSize()}px`,
|
|
931
|
+
width: "100%",
|
|
932
|
+
position: "relative"
|
|
933
|
+
}, children: Ce.getVirtualItems().map((_) => a("div", { ref: Ce.measureElement, "data-index": _.index, style: {
|
|
934
|
+
position: "absolute",
|
|
935
|
+
top: 0,
|
|
936
|
+
left: 0,
|
|
937
|
+
width: "100%",
|
|
938
|
+
transform: `translateY(${_.start}px)`
|
|
939
|
+
}, children: ge[_.index] }, _.index)) }), T ? O(it, { className: "ds-combobox__loading", children: [a(We, { "aria-label": "Laster", "data-size": "sm" }), A] }) : O(me, { children: [gt, !p && ge] })] }) }) })] });
|
|
940
|
+
}), bt = b((t, n) => a(_n, { children: a(Kn, { ...t, ref: n }) }));
|
|
941
|
+
bt.displayName = "Combobox";
|
|
942
|
+
const ht = b(({ children: t, className: n, ...e }, o) => {
|
|
943
|
+
const r = E(G);
|
|
944
|
+
if (!r)
|
|
945
|
+
throw new Error("ComboboxEmpty must be used within a Combobox");
|
|
946
|
+
const { filteredOptions: i, size: s } = r;
|
|
947
|
+
return i.length === 0 && a(U, { "data-size": s, asChild: !0, children: a("div", { ref: o, className: I("ds-combobox__empty", n), ...e, children: t }) });
|
|
948
|
+
});
|
|
949
|
+
ht.displayName = "ComboboxEmpty";
|
|
950
|
+
const he = bt;
|
|
951
|
+
he.Option = Fe;
|
|
952
|
+
he.Empty = ht;
|
|
953
|
+
he.Option.displayName = "Combobox.Option";
|
|
954
|
+
he.Empty.displayName = "Combobox.Empty";
|
|
955
|
+
const Hn = (t, n, e) => {
|
|
956
|
+
const o = (e - 1) / 2, r = Math.min(Math.max(t - Math.floor(o), 1), n - e + 1), i = Math.min(Math.max(t + Math.ceil(o), e), n), s = Array.from({ length: i + 1 - r }, (c, l) => l + r);
|
|
957
|
+
return e > 4 && r > 1 && s.splice(0, 2, 1, 0), e > 3 && i < n && s.splice(-2, 2, 0, n), s;
|
|
958
|
+
}, yo = ({ currentPage: t = 1, setCurrentPage: n, onChange: e, totalPages: o = 1, showPages: r = 7 }) => Q(() => {
|
|
959
|
+
const i = t < o, s = t !== 1, c = (l) => (u) => {
|
|
960
|
+
if (l < 1 || l > o)
|
|
961
|
+
return u.preventDefault();
|
|
962
|
+
e == null || e(u, l), u.defaultPrevented || n == null || n(l);
|
|
963
|
+
};
|
|
964
|
+
return {
|
|
965
|
+
/** Number of steps */
|
|
966
|
+
pages: Hn(t, o, r).map((l, u) => ({
|
|
967
|
+
/**
|
|
968
|
+
* Page number or "ellipsis" for the ellipsis item
|
|
969
|
+
*/
|
|
970
|
+
page: l || "ellipsis",
|
|
971
|
+
/**
|
|
972
|
+
* Unique key for the item
|
|
973
|
+
*/
|
|
974
|
+
itemKey: l ? `page-${l}` : `ellipsis-${u}`,
|
|
975
|
+
// React key utility
|
|
976
|
+
/**
|
|
977
|
+
* Properties to spread on Pagination.Button
|
|
978
|
+
*/
|
|
979
|
+
buttonProps: l ? {
|
|
980
|
+
"aria-current": l === t ? "page" : void 0,
|
|
981
|
+
onClick: c(l),
|
|
982
|
+
variant: l === t ? "primary" : "tertiary"
|
|
983
|
+
} : null
|
|
984
|
+
})),
|
|
985
|
+
/** Properties to spread on Pagination.Button used for previous naviagation */
|
|
986
|
+
prevButtonProps: {
|
|
987
|
+
"aria-disabled": !s,
|
|
988
|
+
// Using aria-disabled to support all HTML elements because of potential asChild
|
|
989
|
+
onClick: c(t - 1),
|
|
990
|
+
variant: "tertiary"
|
|
991
|
+
},
|
|
992
|
+
/** Properties to spread on Pagination.Button used for next naviagation */
|
|
993
|
+
nextButtonProps: {
|
|
994
|
+
"aria-disabled": !i,
|
|
995
|
+
// Using aria-disabled to support all HTML elements because of potential asChild
|
|
996
|
+
onClick: c(t + 1),
|
|
997
|
+
variant: "tertiary"
|
|
998
|
+
},
|
|
999
|
+
/** Indication if previous page action should be shown or not */
|
|
1000
|
+
hasPrev: s,
|
|
1001
|
+
/** Indication if next page action should be shown or not */
|
|
1002
|
+
hasNext: i
|
|
1003
|
+
};
|
|
1004
|
+
}, [t, o, r]);
|
|
1005
|
+
export {
|
|
1006
|
+
po as A,
|
|
1007
|
+
an as B,
|
|
1008
|
+
bo as C,
|
|
1009
|
+
De as D,
|
|
1010
|
+
fo as H,
|
|
1011
|
+
cn as L,
|
|
1012
|
+
Ee as P,
|
|
1013
|
+
ho as S,
|
|
1014
|
+
go as T,
|
|
1015
|
+
te as a,
|
|
1016
|
+
fe as b,
|
|
1017
|
+
he as c,
|
|
1018
|
+
uo as d,
|
|
1019
|
+
mo as e,
|
|
1020
|
+
tt as f,
|
|
1021
|
+
Ae as g,
|
|
1022
|
+
lo as h,
|
|
1023
|
+
We as i,
|
|
1024
|
+
Te as j,
|
|
1025
|
+
yo as u
|
|
1026
|
+
};
|