@jirawatpyk/aura-react 4.9.0 → 4.11.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +17 -2
- package/dist/aura.bundle.js +910 -463
- package/dist/cjs/index.cjs +910 -463
- package/dist/esm/Breadcrumb.js +3 -2
- package/dist/esm/Button.js +26 -7
- package/dist/esm/DataTable.js +176 -94
- package/dist/esm/DatePicker.js +88 -24
- package/dist/esm/Icon.js +12 -1
- package/dist/esm/IconButton.js +2 -2
- package/dist/esm/Pagination.js +3 -2
- package/dist/esm/SideNav.js +116 -10
- package/dist/esm/Stat.js +7 -3
- package/dist/esm/Switch.js +27 -15
- package/dist/esm/colorScheme.js +8 -1
- package/dist/esm/locale.js +109 -2
- package/dist/esm/theme.js +38 -2
- package/dist/index.d.ts +76 -34
- package/dist/styles.css +71 -5
- package/package.json +1 -1
package/dist/cjs/index.cjs
CHANGED
|
@@ -198,9 +198,20 @@ var h = React2.createElement;
|
|
|
198
198
|
var ICONS = { "check": [["path", { "d": "M20 6 9 17l-5-5" }]], "x": [["path", { "d": "M18 6 6 18" }], ["path", { "d": "m6 6 12 12" }]], "plus": [["path", { "d": "M5 12h14" }], ["path", { "d": "M12 5v14" }]], "minus": [["path", { "d": "M5 12h14" }]], "search": [["path", { "d": "m21 21-4.34-4.34" }], ["circle", { "cx": "11", "cy": "11", "r": "8" }]], "chevron-down": [["path", { "d": "m6 9 6 6 6-6" }]], "chevron-up": [["path", { "d": "m18 15-6-6-6 6" }]], "chevron-left": [["path", { "d": "m15 18-6-6 6-6" }]], "chevron-right": [["path", { "d": "m9 18 6-6-6-6" }]], "arrow-right": [["path", { "d": "M5 12h14" }], ["path", { "d": "m12 5 7 7-7 7" }]], "arrow-up-right": [["path", { "d": "M7 7h10v10" }], ["path", { "d": "M7 17 17 7" }]], "arrow-up-down": [["path", { "d": "m21 16-4 4-4-4" }], ["path", { "d": "M17 20V4" }], ["path", { "d": "m3 8 4-4 4 4" }], ["path", { "d": "M7 4v16" }]], "loader-circle": [["path", { "d": "M21 12a9 9 0 1 1-6.219-8.56" }]], "circle-alert": [["circle", { "cx": "12", "cy": "12", "r": "10" }], ["line", { "x1": "12", "x2": "12", "y1": "8", "y2": "12" }], ["line", { "x1": "12", "x2": "12.01", "y1": "16", "y2": "16" }]], "circle-check": [["circle", { "cx": "12", "cy": "12", "r": "10" }], ["path", { "d": "m16 9-5.5 5.5L8 12" }]], "info": [["circle", { "cx": "12", "cy": "12", "r": "10" }], ["path", { "d": "M12 16v-4" }], ["path", { "d": "M12 8h.01" }]], "triangle-alert": [["path", { "d": "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3" }], ["path", { "d": "M12 9v4" }], ["path", { "d": "M12 17h.01" }]], "settings": [["path", { "d": "M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915" }], ["circle", { "cx": "12", "cy": "12", "r": "3" }]], "user": [["path", { "d": "M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" }], ["circle", { "cx": "12", "cy": "7", "r": "4" }]], "users": [["path", { "d": "M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" }], ["path", { "d": "M16 3.128a4 4 0 0 1 0 7.744" }], ["path", { "d": "M22 21v-2a4 4 0 0 0-3-3.87" }], ["circle", { "cx": "9", "cy": "7", "r": "4" }]], "filter": [["path", { "d": "M10 20a1 1 0 0 0 .553.895l2 1A1 1 0 0 0 14 21v-7a2 2 0 0 1 .517-1.341L21.74 4.67A1 1 0 0 0 21 3H3a1 1 0 0 0-.742 1.67l7.225 7.989A2 2 0 0 1 10 14z" }]], "ellipsis": [["circle", { "cx": "12", "cy": "12", "r": "1" }], ["circle", { "cx": "19", "cy": "12", "r": "1" }], ["circle", { "cx": "5", "cy": "12", "r": "1" }]], "external-link": [["path", { "d": "M15 3h6v6" }], ["path", { "d": "M10 14 21 3" }], ["path", { "d": "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" }]], "copy": [["rect", { "width": "14", "height": "14", "x": "8", "y": "8", "rx": "2", "ry": "2" }], ["path", { "d": "M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" }]], "trash-2": [["path", { "d": "M10 11v6" }], ["path", { "d": "M14 11v6" }], ["path", { "d": "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" }], ["path", { "d": "M3 6h18" }], ["path", { "d": "M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" }]], "pencil": [["path", { "d": "M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z" }], ["path", { "d": "m15 5 4 4" }]], "download": [["path", { "d": "M12 15V3" }], ["path", { "d": "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }], ["path", { "d": "m7 10 5 5 5-5" }]], "upload": [["path", { "d": "M12 3v12" }], ["path", { "d": "m17 8-5-5-5 5" }], ["path", { "d": "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }]], "calendar": [["path", { "d": "M8 2v3" }], ["path", { "d": "M16 2v3" }], ["rect", { "x": "3", "y": "3", "width": "18", "height": "18", "rx": "2" }], ["path", { "d": "M3 9h18" }]], "bell": [["path", { "d": "M10.268 21a2 2 0 0 0 3.464 0" }], ["path", { "d": "M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326" }]], "menu": [["path", { "d": "M4 5h16" }], ["path", { "d": "M4 12h16" }], ["path", { "d": "M4 19h16" }]], "eye": [["path", { "d": "M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0" }], ["circle", { "cx": "12", "cy": "12", "r": "3" }]], "log-out": [["path", { "d": "m16 17 5-5-5-5" }], ["path", { "d": "M21 12H9" }], ["path", { "d": "M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" }]], "circle": [["circle", { "cx": "12", "cy": "12", "r": "10" }]], "circle-dot-dashed": [["path", { "d": "M10.1 2.18a9.93 9.93 0 0 1 3.8 0" }], ["path", { "d": "M17.6 3.71a9.95 9.95 0 0 1 2.69 2.7" }], ["path", { "d": "M21.82 10.1a9.93 9.93 0 0 1 0 3.8" }], ["path", { "d": "M20.29 17.6a9.95 9.95 0 0 1-2.7 2.69" }], ["path", { "d": "M13.9 21.82a9.94 9.94 0 0 1-3.8 0" }], ["path", { "d": "M6.4 20.29a9.95 9.95 0 0 1-2.69-2.7" }], ["path", { "d": "M2.18 13.9a9.93 9.93 0 0 1 0-3.8" }], ["path", { "d": "M3.71 6.4a9.95 9.95 0 0 1 2.7-2.69" }], ["circle", { "cx": "12", "cy": "12", "r": "1" }]], "ban": [["circle", { "cx": "12", "cy": "12", "r": "10" }], ["path", { "d": "M4.929 4.929 19.07 19.071" }]], "arrow-up": [["path", { "d": "m5 12 7-7 7 7" }], ["path", { "d": "M12 19V5" }]], "arrow-down": [["path", { "d": "M12 5v14" }], ["path", { "d": "m19 12-7 7-7-7" }]], "inbox": [["polyline", { "points": "22 12 16 12 14 15 10 15 8 12 2 12" }], ["path", { "d": "M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z" }]], "pin": [["path", { "d": "M12 17v5" }], ["path", { "d": "M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z" }]], "pin-off": [["path", { "d": "M12 17v5" }], ["path", { "d": "M15 9.34V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H7.89" }], ["path", { "d": "m2 2 20 20" }], ["path", { "d": "M9 9v1.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h11" }]], "eye-off": [["path", { "d": "M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49" }], ["path", { "d": "M14.084 14.158a3 3 0 0 1-4.242-4.242" }], ["path", { "d": "M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143" }], ["path", { "d": "m2 2 20 20" }]], "columns-3": [["rect", { "width": "18", "height": "18", "x": "3", "y": "3", "rx": "2" }], ["path", { "d": "M9 3v18" }], ["path", { "d": "M15 3v18" }]], "arrow-left": [["path", { "d": "m12 19-7-7 7-7" }], ["path", { "d": "M19 12H5" }]], "rotate-ccw": [["path", { "d": "M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" }], ["path", { "d": "M3 3v5h5" }]], "house": [["path", { "d": "M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8" }], ["path", { "d": "M3 10a2 2 0 0 1 .709-1.528l7-6a2 2 0 0 1 2.582 0l7 6A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" }]], "layout-dashboard": [["rect", { "width": "7", "height": "9", "x": "3", "y": "3", "rx": "1" }], ["rect", { "width": "7", "height": "5", "x": "14", "y": "3", "rx": "1" }], ["rect", { "width": "7", "height": "9", "x": "14", "y": "12", "rx": "1" }], ["rect", { "width": "7", "height": "5", "x": "3", "y": "16", "rx": "1" }]], "folder": [["path", { "d": "M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z" }]], "chart-column": [["path", { "d": "M3 3v16a2 2 0 0 0 2 2h16" }], ["path", { "d": "M18 17V9" }], ["path", { "d": "M13 17V5" }], ["path", { "d": "M8 17v-3" }]], "file-text": [["path", { "d": "M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z" }], ["path", { "d": "M14 2v5a1 1 0 0 0 1 1h5" }], ["path", { "d": "M10 9H8" }], ["path", { "d": "M16 13H8" }], ["path", { "d": "M16 17H8" }]], "mail": [["path", { "d": "m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7" }], ["rect", { "x": "2", "y": "4", "width": "20", "height": "16", "rx": "2" }]], "lock": [["rect", { "width": "18", "height": "11", "x": "3", "y": "11", "rx": "2", "ry": "2" }], ["path", { "d": "M7 11V7a5 5 0 0 1 10 0v4" }]], "clock": [["circle", { "cx": "12", "cy": "12", "r": "10" }], ["path", { "d": "M12 6v6l4 2" }]], "trending-up": [["path", { "d": "M16 7h6v6" }], ["path", { "d": "m22 7-8.5 8.5-5-5L2 17" }]], "trending-down": [["path", { "d": "M16 17h6v-6" }], ["path", { "d": "m22 17-8.5-8.5-5 5L2 7" }]], "image": [["rect", { "width": "18", "height": "18", "x": "3", "y": "3", "rx": "2", "ry": "2" }], ["circle", { "cx": "9", "cy": "9", "r": "2" }], ["path", { "d": "m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21" }]], "paperclip": [["path", { "d": "m16 6-8.414 8.586a2 2 0 0 0 2.829 2.829l8.414-8.586a4 4 0 1 0-5.657-5.657l-8.379 8.551a6 6 0 1 0 8.485 8.485l8.379-8.551" }]], "cloud-upload": [["path", { "d": "M12 13v8" }], ["path", { "d": "M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242" }], ["path", { "d": "m8 17 4-4 4 4" }]], "file": [["path", { "d": "M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z" }], ["path", { "d": "M14 2v5a1 1 0 0 0 1 1h5" }]], "sun": [["circle", { "cx": "12", "cy": "12", "r": "4" }], ["path", { "d": "M12 2v2" }], ["path", { "d": "M12 20v2" }], ["path", { "d": "m4.93 4.93 1.41 1.41" }], ["path", { "d": "m17.66 17.66 1.41 1.41" }], ["path", { "d": "M2 12h2" }], ["path", { "d": "M20 12h2" }], ["path", { "d": "m6.34 17.66-1.41 1.41" }], ["path", { "d": "m19.07 4.93-1.41 1.41" }]], "moon": [["path", { "d": "M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401" }]], "monitor": [["rect", { "width": "20", "height": "14", "x": "2", "y": "3", "rx": "2" }], ["line", { "x1": "8", "x2": "16", "y1": "21", "y2": "21" }], ["line", { "x1": "12", "x2": "12", "y1": "17", "y2": "21" }]] };
|
|
199
199
|
var SIZES = { sm: 16, md: 20, lg: 24 };
|
|
200
200
|
var Icon = React2.forwardRef(function Icon2(props, ref) {
|
|
201
|
+
const size = SIZES[props.size] || props.size || 16;
|
|
202
|
+
if (React2.isValidElement(props.name)) {
|
|
203
|
+
return /* @__PURE__ */ React2.createElement(
|
|
204
|
+
"span",
|
|
205
|
+
{
|
|
206
|
+
className: cx("aura-icon", "aura-icon--custom", props.className),
|
|
207
|
+
style: { width: size, height: size, ["--aura-icon-stroke"]: props.strokeWidth || 2 },
|
|
208
|
+
...props.label ? { role: "img", "aria-label": props.label } : { "aria-hidden": true }
|
|
209
|
+
},
|
|
210
|
+
props.name
|
|
211
|
+
);
|
|
212
|
+
}
|
|
201
213
|
const shapes = ICONS[props.name];
|
|
202
214
|
if (!shapes) return null;
|
|
203
|
-
const size = SIZES[props.size] || props.size || 16;
|
|
204
215
|
const a11y = props.label ? { role: "img", "aria-label": props.label } : { "aria-hidden": true, focusable: "false" };
|
|
205
216
|
return /* @__PURE__ */ React2.createElement(
|
|
206
217
|
"svg",
|
|
@@ -228,307 +239,16 @@ var Icon = React2.forwardRef(function Icon2(props, ref) {
|
|
|
228
239
|
var iconNames = Object.keys(ICONS);
|
|
229
240
|
|
|
230
241
|
// src/Button.tsx
|
|
231
|
-
var React3 = __toESM(require("react"), 1);
|
|
232
|
-
function ButtonLink(props, ref) {
|
|
233
|
-
const variant = props.variant || "primary";
|
|
234
|
-
const disabled = !!props.disabled;
|
|
235
|
-
const rest = omit(props, [
|
|
236
|
-
"variant",
|
|
237
|
-
"className",
|
|
238
|
-
"children",
|
|
239
|
-
"icon",
|
|
240
|
-
"iconRight",
|
|
241
|
-
"disabled",
|
|
242
|
-
"linkComponent",
|
|
243
|
-
"href"
|
|
244
|
-
]);
|
|
245
|
-
const Tag3 = !disabled && props.linkComponent ? props.linkComponent : "a";
|
|
246
|
-
return /* @__PURE__ */ React3.createElement(
|
|
247
|
-
Tag3,
|
|
248
|
-
{
|
|
249
|
-
...rest,
|
|
250
|
-
ref,
|
|
251
|
-
href: disabled ? void 0 : props.href,
|
|
252
|
-
role: disabled ? "link" : void 0,
|
|
253
|
-
"aria-disabled": disabled || void 0,
|
|
254
|
-
tabIndex: disabled ? -1 : props.tabIndex,
|
|
255
|
-
className: cx("aura-btn", "aura-btn--" + variant, props.className),
|
|
256
|
-
onClick: disabled ? void 0 : props.onClick
|
|
257
|
-
},
|
|
258
|
-
props.icon ? /* @__PURE__ */ React3.createElement(Icon, { name: props.icon }) : null,
|
|
259
|
-
props.children,
|
|
260
|
-
props.iconRight ? /* @__PURE__ */ React3.createElement(Icon, { name: props.iconRight }) : null
|
|
261
|
-
);
|
|
262
|
-
}
|
|
263
|
-
var Button = React3.forwardRef(
|
|
264
|
-
function Button2(all, ref) {
|
|
265
|
-
if (typeof all.href === "string") {
|
|
266
|
-
return ButtonLink(all, ref);
|
|
267
|
-
}
|
|
268
|
-
const props = all;
|
|
269
|
-
const variant = props.variant || "primary";
|
|
270
|
-
const loading = !!props.loading;
|
|
271
|
-
const rest = omit(props, ["variant", "className", "children", "type", "icon", "iconRight", "loading", "onClick"]);
|
|
272
|
-
return /* @__PURE__ */ React3.createElement(
|
|
273
|
-
"button",
|
|
274
|
-
{
|
|
275
|
-
...rest,
|
|
276
|
-
ref,
|
|
277
|
-
type: props.type || "button",
|
|
278
|
-
className: cx("aura-btn", "aura-btn--" + variant, loading && "is-loading", props.className),
|
|
279
|
-
"aria-busy": loading || void 0,
|
|
280
|
-
"aria-disabled": loading || void 0,
|
|
281
|
-
onClick: loading ? function(e) {
|
|
282
|
-
e.preventDefault();
|
|
283
|
-
} : props.onClick
|
|
284
|
-
},
|
|
285
|
-
loading ? /* @__PURE__ */ React3.createElement(Icon, { name: "loader-circle", className: "aura-spin" }) : props.icon ? /* @__PURE__ */ React3.createElement(Icon, { name: props.icon }) : null,
|
|
286
|
-
props.children,
|
|
287
|
-
props.iconRight && !loading ? /* @__PURE__ */ React3.createElement(Icon, { name: props.iconRight }) : null
|
|
288
|
-
);
|
|
289
|
-
}
|
|
290
|
-
);
|
|
291
|
-
|
|
292
|
-
// src/IconButton.tsx
|
|
293
242
|
var React4 = __toESM(require("react"), 1);
|
|
294
|
-
var IconButton = React4.forwardRef(function IconButton2(props, ref) {
|
|
295
|
-
const rest = omit(props, ["icon", "label", "className", "size"]);
|
|
296
|
-
return /* @__PURE__ */ React4.createElement(
|
|
297
|
-
"button",
|
|
298
|
-
{
|
|
299
|
-
...rest,
|
|
300
|
-
ref,
|
|
301
|
-
type: props.type || "button",
|
|
302
|
-
"aria-label": props.label,
|
|
303
|
-
title: props.label,
|
|
304
|
-
className: cx("aura-icon-btn", props.className)
|
|
305
|
-
},
|
|
306
|
-
/* @__PURE__ */ React4.createElement(Icon, { name: props.icon, size: props.size || "sm" })
|
|
307
|
-
);
|
|
308
|
-
});
|
|
309
|
-
|
|
310
|
-
// src/Menu.tsx
|
|
311
|
-
var React5 = __toESM(require("react"), 1);
|
|
312
|
-
var import_react_dom = require("react-dom");
|
|
313
|
-
var Menu = React5.forwardRef(function Menu2(props, ref) {
|
|
314
|
-
const own = React5.useRef(null), merged = useMergedRef(ref, own);
|
|
315
|
-
const posState = React5.useState(null);
|
|
316
|
-
const pos = posState[0], setPos = posState[1];
|
|
317
|
-
const items = props.items || [];
|
|
318
|
-
const mounted = useMounted();
|
|
319
|
-
useIsoLayoutEffect(
|
|
320
|
-
function() {
|
|
321
|
-
const a = props.anchor, m = own.current;
|
|
322
|
-
if (!a || !m) return;
|
|
323
|
-
const r = a.getBoundingClientRect(), mh = m.offsetHeight, mw = m.offsetWidth;
|
|
324
|
-
let top = r.bottom + 4;
|
|
325
|
-
if (top + mh > window.innerHeight - 8 && r.top - mh - 4 > 8) top = r.top - mh - 4;
|
|
326
|
-
const left = Math.max(8, Math.min(r.right - mw, window.innerWidth - mw - 8));
|
|
327
|
-
setPos({ top, left });
|
|
328
|
-
},
|
|
329
|
-
[props.anchor, mounted]
|
|
330
|
-
);
|
|
331
|
-
React5.useEffect(
|
|
332
|
-
function() {
|
|
333
|
-
if (!mounted) return;
|
|
334
|
-
const first = own.current && own.current.querySelector('[role^="menuitem"]:not([disabled])');
|
|
335
|
-
if (first && props.autoFocus !== false) first.focus();
|
|
336
|
-
function outside(e) {
|
|
337
|
-
if (own.current && !own.current.contains(e.target) && !(props.anchor && props.anchor.contains(e.target)))
|
|
338
|
-
props.onClose(false);
|
|
339
|
-
}
|
|
340
|
-
function onScroll(e) {
|
|
341
|
-
if (own.current && !own.current.contains(e.target)) props.onClose(false);
|
|
342
|
-
}
|
|
343
|
-
document.addEventListener("pointerdown", outside, true);
|
|
344
|
-
window.addEventListener("scroll", onScroll, true);
|
|
345
|
-
window.addEventListener("resize", onScroll);
|
|
346
|
-
return function() {
|
|
347
|
-
document.removeEventListener("pointerdown", outside, true);
|
|
348
|
-
window.removeEventListener("scroll", onScroll, true);
|
|
349
|
-
window.removeEventListener("resize", onScroll);
|
|
350
|
-
};
|
|
351
|
-
},
|
|
352
|
-
[mounted]
|
|
353
|
-
);
|
|
354
|
-
function onKeyDown(e) {
|
|
355
|
-
const list = Array.prototype.slice.call(
|
|
356
|
-
own.current.querySelectorAll('[role^="menuitem"]:not([disabled])')
|
|
357
|
-
);
|
|
358
|
-
const i = list.indexOf(document.activeElement);
|
|
359
|
-
if (e.key === "ArrowDown") {
|
|
360
|
-
e.preventDefault();
|
|
361
|
-
list[(i + 1) % list.length].focus();
|
|
362
|
-
} else if (e.key === "ArrowUp") {
|
|
363
|
-
e.preventDefault();
|
|
364
|
-
list[(i - 1 + list.length) % list.length].focus();
|
|
365
|
-
} else if (e.key === "Home") {
|
|
366
|
-
e.preventDefault();
|
|
367
|
-
list[0].focus();
|
|
368
|
-
} else if (e.key === "End") {
|
|
369
|
-
e.preventDefault();
|
|
370
|
-
list[list.length - 1].focus();
|
|
371
|
-
} else if (e.key === "Escape") {
|
|
372
|
-
e.preventDefault();
|
|
373
|
-
props.onClose(true);
|
|
374
|
-
} else if (e.key === "Tab") {
|
|
375
|
-
props.onClose(true);
|
|
376
|
-
}
|
|
377
|
-
e.stopPropagation();
|
|
378
|
-
}
|
|
379
|
-
const el = /* @__PURE__ */ React5.createElement(
|
|
380
|
-
"div",
|
|
381
|
-
{
|
|
382
|
-
ref: merged,
|
|
383
|
-
role: "menu",
|
|
384
|
-
"aria-label": props.label,
|
|
385
|
-
className: "aura-menu",
|
|
386
|
-
onKeyDown,
|
|
387
|
-
style: { top: pos ? pos.top : -9999, left: pos ? pos.left : -9999 }
|
|
388
|
-
},
|
|
389
|
-
items.map(function(it, i) {
|
|
390
|
-
if (it.separator) return /* @__PURE__ */ React5.createElement("div", { key: "s" + i, role: "separator", className: "aura-menu__sep" });
|
|
391
|
-
const isCheck = it.checked !== void 0;
|
|
392
|
-
return /* @__PURE__ */ React5.createElement(
|
|
393
|
-
"button",
|
|
394
|
-
{
|
|
395
|
-
key: i,
|
|
396
|
-
type: "button",
|
|
397
|
-
tabIndex: -1,
|
|
398
|
-
disabled: it.disabled,
|
|
399
|
-
role: isCheck ? "menuitemcheckbox" : "menuitem",
|
|
400
|
-
"aria-checked": isCheck ? !!it.checked : void 0,
|
|
401
|
-
className: "aura-menu__item",
|
|
402
|
-
onClick: function() {
|
|
403
|
-
it.onSelect();
|
|
404
|
-
if (!it.keepOpen) props.onClose(true);
|
|
405
|
-
}
|
|
406
|
-
},
|
|
407
|
-
isCheck ? /* @__PURE__ */ React5.createElement("span", { className: cx("aura-menu__check", it.checked && "is-on") }, it.checked ? /* @__PURE__ */ React5.createElement(Icon, { name: "check", size: 12, strokeWidth: 3 }) : null) : it.icon ? /* @__PURE__ */ React5.createElement(Icon, { name: it.icon }) : /* @__PURE__ */ React5.createElement("span", { className: "aura-menu__blank" }),
|
|
408
|
-
/* @__PURE__ */ React5.createElement("span", { className: "aura-menu__label" }, it.label),
|
|
409
|
-
it.hint ? /* @__PURE__ */ React5.createElement("span", { className: "aura-menu__hint" }, it.hint) : null
|
|
410
|
-
);
|
|
411
|
-
})
|
|
412
|
-
);
|
|
413
|
-
return mounted ? (0, import_react_dom.createPortal)(el, document.body) : null;
|
|
414
|
-
});
|
|
415
|
-
|
|
416
|
-
// src/DropdownMenu.tsx
|
|
417
|
-
var React6 = __toESM(require("react"), 1);
|
|
418
|
-
var DropdownMenu = React6.forwardRef(function DropdownMenu2(props, ref) {
|
|
419
|
-
const st = React6.useState(null), anchor = st[0], setAnchor = st[1];
|
|
420
|
-
const wrap = React6.useRef(null), wrapMerged = useMergedRef(ref, wrap);
|
|
421
|
-
const child = React6.Children.only(props.trigger);
|
|
422
|
-
function toggle(e) {
|
|
423
|
-
if (child.props.onClick) child.props.onClick(e);
|
|
424
|
-
const el = wrap.current && (wrap.current.querySelector('button, [role="button"], a') || wrap.current);
|
|
425
|
-
setAnchor(anchor ? null : el);
|
|
426
|
-
}
|
|
427
|
-
function onKeyDown(e) {
|
|
428
|
-
if ((e.key === "ArrowDown" || e.key === "ArrowUp") && !anchor) {
|
|
429
|
-
e.preventDefault();
|
|
430
|
-
setAnchor(wrap.current.querySelector('button, [role="button"], a') || wrap.current);
|
|
431
|
-
}
|
|
432
|
-
}
|
|
433
|
-
return /* @__PURE__ */ React6.createElement("span", { ref: wrapMerged, className: "aura-dropdown", onKeyDown }, React6.cloneElement(child, { onClick: toggle, "aria-haspopup": "menu", "aria-expanded": anchor ? true : false }), anchor ? /* @__PURE__ */ React6.createElement(
|
|
434
|
-
Menu,
|
|
435
|
-
{
|
|
436
|
-
anchor,
|
|
437
|
-
label: props.label,
|
|
438
|
-
items: props.items,
|
|
439
|
-
onClose: function(restore) {
|
|
440
|
-
setAnchor(null);
|
|
441
|
-
if (restore && typeof anchor.focus === "function") anchor.focus();
|
|
442
|
-
}
|
|
443
|
-
}
|
|
444
|
-
) : null);
|
|
445
|
-
});
|
|
446
|
-
|
|
447
|
-
// src/Checkbox.tsx
|
|
448
|
-
var React7 = __toESM(require("react"), 1);
|
|
449
|
-
var Checkbox = React7.forwardRef(function Checkbox2(props, ref) {
|
|
450
|
-
const own = React7.useRef(null), merged = useMergedRef(ref, own);
|
|
451
|
-
const st = useMaybeControlled(props.checked, !!props.defaultChecked, props.onChange);
|
|
452
|
-
const on = !!st[0];
|
|
453
|
-
React7.useEffect(function() {
|
|
454
|
-
if (own.current) own.current.indeterminate = !!props.indeterminate;
|
|
455
|
-
});
|
|
456
|
-
const rest = omit(props, [
|
|
457
|
-
"checked",
|
|
458
|
-
"defaultChecked",
|
|
459
|
-
"onChange",
|
|
460
|
-
"indeterminate",
|
|
461
|
-
"label",
|
|
462
|
-
"children",
|
|
463
|
-
"description",
|
|
464
|
-
"className",
|
|
465
|
-
"tabIndex",
|
|
466
|
-
"disabled"
|
|
467
|
-
]);
|
|
468
|
-
const labelled = props.children != null;
|
|
469
|
-
const descId = props.description && props.id ? props.id + "-desc" : void 0;
|
|
470
|
-
return /* @__PURE__ */ React7.createElement(
|
|
471
|
-
"label",
|
|
472
|
-
{
|
|
473
|
-
className: cx("aura-check", labelled && "aura-check--labelled", props.disabled && "is-disabled", props.className),
|
|
474
|
-
onClick: function(e) {
|
|
475
|
-
e.stopPropagation();
|
|
476
|
-
}
|
|
477
|
-
},
|
|
478
|
-
/* @__PURE__ */ React7.createElement(
|
|
479
|
-
"input",
|
|
480
|
-
{
|
|
481
|
-
...rest,
|
|
482
|
-
ref: merged,
|
|
483
|
-
type: "checkbox",
|
|
484
|
-
className: "aura-check__input",
|
|
485
|
-
checked: on,
|
|
486
|
-
tabIndex: props.tabIndex,
|
|
487
|
-
disabled: props.disabled,
|
|
488
|
-
"aria-describedby": descId,
|
|
489
|
-
"aria-label": labelled ? void 0 : props.label,
|
|
490
|
-
onChange: function(e) {
|
|
491
|
-
st[1](e.target.checked);
|
|
492
|
-
}
|
|
493
|
-
}
|
|
494
|
-
),
|
|
495
|
-
/* @__PURE__ */ React7.createElement("span", { className: "aura-check__box", "aria-hidden": true }, props.indeterminate ? /* @__PURE__ */ React7.createElement(Icon, { name: "minus", size: 12, strokeWidth: 3 }) : on ? /* @__PURE__ */ React7.createElement(Icon, { name: "check", size: 12, strokeWidth: 3 }) : null),
|
|
496
|
-
labelled ? /* @__PURE__ */ React7.createElement("span", { className: "aura-check__text" }, /* @__PURE__ */ React7.createElement("span", { className: "aura-check__label" }, props.children), props.description ? /* @__PURE__ */ React7.createElement("span", { className: "aura-check__desc", id: descId }, props.description) : null) : null
|
|
497
|
-
);
|
|
498
|
-
});
|
|
499
|
-
|
|
500
|
-
// src/StatusPill.tsx
|
|
501
|
-
var React8 = __toESM(require("react"), 1);
|
|
502
|
-
var TONE_ICON = {
|
|
503
|
-
neutral: "circle",
|
|
504
|
-
progress: "circle-dot-dashed",
|
|
505
|
-
ready: "circle-check",
|
|
506
|
-
blocked: "ban"
|
|
507
|
-
};
|
|
508
|
-
var TONE_WORDS = {
|
|
509
|
-
ready: ["ready", "done", "complete", "completed", "approved", "live", "passed"],
|
|
510
|
-
progress: ["in progress", "in review", "review", "syncing", "running", "pending"],
|
|
511
|
-
blocked: ["blocked", "failed", "error", "rejected", "on hold", "cancelled"]
|
|
512
|
-
};
|
|
513
|
-
function toneFor(status) {
|
|
514
|
-
const s = String(status == null ? "" : status).trim().toLowerCase();
|
|
515
|
-
for (const t in TONE_WORDS) if (TONE_WORDS[t].indexOf(s) >= 0) return t;
|
|
516
|
-
return "neutral";
|
|
517
|
-
}
|
|
518
|
-
var TONE_ORDER = { neutral: 0, progress: 1, ready: 2, blocked: 3 };
|
|
519
|
-
var StatusPill = React8.forwardRef(function StatusPill2(props, ref) {
|
|
520
|
-
const tone2 = props.tone || toneFor(props.children);
|
|
521
|
-
return /* @__PURE__ */ React8.createElement("span", { ref, className: cx("aura-pill", "aura-pill--" + tone2, props.className) }, /* @__PURE__ */ React8.createElement(Icon, { name: TONE_ICON[tone2] || "circle", size: 12 }), props.children);
|
|
522
|
-
});
|
|
523
|
-
|
|
524
|
-
// src/Field.tsx
|
|
525
|
-
var React10 = __toESM(require("react"), 1);
|
|
526
243
|
|
|
527
244
|
// src/locale.tsx
|
|
528
|
-
var
|
|
245
|
+
var React3 = __toESM(require("react"), 1);
|
|
529
246
|
var n = function(x) {
|
|
530
247
|
return Number(x).toLocaleString("en");
|
|
531
248
|
};
|
|
249
|
+
var nsv = function(x) {
|
|
250
|
+
return Number(x).toLocaleString("sv-SE");
|
|
251
|
+
};
|
|
532
252
|
var STRINGS = {
|
|
533
253
|
en: {
|
|
534
254
|
close: "Close",
|
|
@@ -725,31 +445,446 @@ var STRINGS = {
|
|
|
725
445
|
accepts: function(list, max) {
|
|
726
446
|
return [list, max && "\u0E44\u0E21\u0E48\u0E40\u0E01\u0E34\u0E19 " + max + " \u0E15\u0E48\u0E2D\u0E44\u0E1F\u0E25\u0E4C"].filter(Boolean).join(" \xB7 ");
|
|
727
447
|
}
|
|
448
|
+
},
|
|
449
|
+
sv: {
|
|
450
|
+
close: "St\xE4ng",
|
|
451
|
+
dismiss: "St\xE4ng",
|
|
452
|
+
dismissToast: "St\xE4ng aviseringen",
|
|
453
|
+
notifications: "Aviseringar",
|
|
454
|
+
mainNav: "Huvudmeny",
|
|
455
|
+
breadcrumb: "Br\xF6dsmulor",
|
|
456
|
+
navigation: "Navigering",
|
|
457
|
+
openNav: "\xD6ppna menyn",
|
|
458
|
+
searching: "S\xF6ker\u2026",
|
|
459
|
+
noMatches: "Inga tr\xE4ffar",
|
|
460
|
+
clear: function(what) {
|
|
461
|
+
return "Rensa " + (what || "urvalet");
|
|
462
|
+
},
|
|
463
|
+
keepTyping: function(total) {
|
|
464
|
+
return "Skriv mer f\xF6r att begr\xE4nsa " + nsv(total) + " alternativ";
|
|
465
|
+
},
|
|
466
|
+
sortAsc: "Sortera stigande",
|
|
467
|
+
sortDesc: "Sortera fallande",
|
|
468
|
+
pin: "F\xE4st till v\xE4nster",
|
|
469
|
+
unpin: "Lossa kolumnen",
|
|
470
|
+
moveLeft: "Flytta v\xE4nster",
|
|
471
|
+
moveRight: "Flytta h\xF6ger",
|
|
472
|
+
hideColumn: "D\xF6lj kolumnen",
|
|
473
|
+
resetColumns: "\xC5terst\xE4ll kolumner",
|
|
474
|
+
selectRows: "V\xE4lj rader",
|
|
475
|
+
selectAllRows: "V\xE4lj alla rader",
|
|
476
|
+
deselectAllRows: "Avmarkera alla rader",
|
|
477
|
+
selectAll: "V\xE4lj alla",
|
|
478
|
+
selectRow: function(k) {
|
|
479
|
+
return "V\xE4lj " + k;
|
|
480
|
+
},
|
|
481
|
+
selectedCount: function(c) {
|
|
482
|
+
return nsv(c) + " valda";
|
|
483
|
+
},
|
|
484
|
+
pinned: "F\xE4st",
|
|
485
|
+
columnOptions: function(label) {
|
|
486
|
+
return "Alternativ f\xF6r kolumnen " + label;
|
|
487
|
+
},
|
|
488
|
+
column: function(label) {
|
|
489
|
+
return label ? "Kolumnen " + label : "Kolumn";
|
|
490
|
+
},
|
|
491
|
+
columns: "Kolumner",
|
|
492
|
+
showHideColumns: "Visa eller d\xF6lj kolumner",
|
|
493
|
+
empty: "Inget h\xE4r \xE4nnu",
|
|
494
|
+
loading: "Laddar\u2026",
|
|
495
|
+
loadingRows: "Laddar rader",
|
|
496
|
+
range: function(a, b, total) {
|
|
497
|
+
return a + "\u2013" + b + " av " + nsv(total);
|
|
498
|
+
},
|
|
499
|
+
page: function(p, total) {
|
|
500
|
+
return "Sida " + p + " av " + total;
|
|
501
|
+
},
|
|
502
|
+
prevPage: "F\xF6reg\xE5ende sida",
|
|
503
|
+
nextPage: "N\xE4sta sida",
|
|
504
|
+
rowCount: function(c) {
|
|
505
|
+
return nsv(c) + " rader";
|
|
506
|
+
},
|
|
507
|
+
actions: "\xC5tg\xE4rder",
|
|
508
|
+
optional: "valfritt",
|
|
509
|
+
timePlaceholder: "tt:mm",
|
|
510
|
+
timeInvalid: "Skriv en tid som 09:30",
|
|
511
|
+
timeOutOfRange: function(a, b) {
|
|
512
|
+
return "V\xE4lj en tid mellan " + a + " och " + b;
|
|
513
|
+
},
|
|
514
|
+
dropFiles: "Dra filer hit eller",
|
|
515
|
+
browse: "V\xE4lj filer",
|
|
516
|
+
browseOne: "V\xE4lj en fil",
|
|
517
|
+
remove: function(n2) {
|
|
518
|
+
return "Ta bort " + n2;
|
|
519
|
+
},
|
|
520
|
+
fileTooBig: function(max) {
|
|
521
|
+
return "St\xF6rre \xE4n " + max;
|
|
522
|
+
},
|
|
523
|
+
fileWrongType: "Den h\xE4r filtypen godtas inte",
|
|
524
|
+
tooManyFiles: function(n2) {
|
|
525
|
+
return "H\xF6gst " + n2 + " filer";
|
|
526
|
+
},
|
|
527
|
+
colorScheme: "F\xE4rgl\xE4ge",
|
|
528
|
+
increase: "\xD6ka",
|
|
529
|
+
decrease: "Minska",
|
|
530
|
+
stepDone: "klart",
|
|
531
|
+
stepOf: function(i, total) {
|
|
532
|
+
return "Steg " + i + " av " + total;
|
|
533
|
+
},
|
|
534
|
+
schemeLight: "Ljust",
|
|
535
|
+
schemeDark: "M\xF6rkt",
|
|
536
|
+
schemeSystem: "System",
|
|
537
|
+
uploading: "Laddar upp\u2026",
|
|
538
|
+
images: "Bilder",
|
|
539
|
+
pagination: "Sidnumrering",
|
|
540
|
+
pageN: function(p) {
|
|
541
|
+
return "Sida " + p;
|
|
542
|
+
},
|
|
543
|
+
accepts: function(list, max) {
|
|
544
|
+
return [list, max && "h\xF6gst " + max + " per fil"].filter(Boolean).join(", ");
|
|
545
|
+
}
|
|
546
|
+
}
|
|
547
|
+
};
|
|
548
|
+
var LocaleContext = React3.createContext(null);
|
|
549
|
+
function AuraProvider(props) {
|
|
550
|
+
const value = React3.useMemo(
|
|
551
|
+
function() {
|
|
552
|
+
const base = props.locale && STRINGS[props.locale] || STRINGS.en;
|
|
553
|
+
return {
|
|
554
|
+
locale: props.locale || "en",
|
|
555
|
+
calendar: props.calendar || null,
|
|
556
|
+
strings: props.strings ? Object.assign({}, base, props.strings) : base,
|
|
557
|
+
linkComponent: props.linkComponent || null
|
|
558
|
+
};
|
|
559
|
+
},
|
|
560
|
+
[props.locale, props.calendar, props.strings, props.linkComponent]
|
|
561
|
+
);
|
|
562
|
+
return /* @__PURE__ */ React3.createElement(LocaleContext.Provider, { value }, props.children);
|
|
563
|
+
}
|
|
564
|
+
function useAuraLocale() {
|
|
565
|
+
return React3.useContext(LocaleContext) || { locale: null, calendar: null, strings: STRINGS.en };
|
|
566
|
+
}
|
|
567
|
+
function useLinkComponent(own) {
|
|
568
|
+
const ctx = React3.useContext(LocaleContext);
|
|
569
|
+
return own || ctx && ctx.linkComponent || "a";
|
|
570
|
+
}
|
|
571
|
+
function useStrings() {
|
|
572
|
+
return useAuraLocale().strings;
|
|
573
|
+
}
|
|
574
|
+
|
|
575
|
+
// src/Button.tsx
|
|
576
|
+
function ButtonLink(props, ref, Link) {
|
|
577
|
+
const variant = props.variant || "primary";
|
|
578
|
+
const disabled = !!props.disabled;
|
|
579
|
+
const rest = omit(props, [
|
|
580
|
+
"variant",
|
|
581
|
+
"className",
|
|
582
|
+
"children",
|
|
583
|
+
"icon",
|
|
584
|
+
"iconRight",
|
|
585
|
+
"disabled",
|
|
586
|
+
"linkComponent",
|
|
587
|
+
"href",
|
|
588
|
+
"fullWidth"
|
|
589
|
+
]);
|
|
590
|
+
const Tag3 = disabled ? "a" : Link;
|
|
591
|
+
return /* @__PURE__ */ React4.createElement(
|
|
592
|
+
Tag3,
|
|
593
|
+
{
|
|
594
|
+
...rest,
|
|
595
|
+
ref,
|
|
596
|
+
href: disabled ? void 0 : props.href,
|
|
597
|
+
role: disabled ? "link" : void 0,
|
|
598
|
+
"aria-disabled": disabled || void 0,
|
|
599
|
+
tabIndex: disabled ? -1 : props.tabIndex,
|
|
600
|
+
className: cx("aura-btn", "aura-btn--" + variant, props.fullWidth && "aura-btn--full", props.className),
|
|
601
|
+
onClick: disabled ? void 0 : props.onClick
|
|
602
|
+
},
|
|
603
|
+
props.icon ? /* @__PURE__ */ React4.createElement(Icon, { name: props.icon }) : null,
|
|
604
|
+
props.children,
|
|
605
|
+
props.iconRight ? /* @__PURE__ */ React4.createElement(Icon, { name: props.iconRight }) : null
|
|
606
|
+
);
|
|
607
|
+
}
|
|
608
|
+
var Button = React4.forwardRef(
|
|
609
|
+
function Button2(all, ref) {
|
|
610
|
+
const Link = useLinkComponent(all.linkComponent);
|
|
611
|
+
if (typeof all.href === "string") {
|
|
612
|
+
return ButtonLink(all, ref, Link);
|
|
613
|
+
}
|
|
614
|
+
const props = all;
|
|
615
|
+
const variant = props.variant || "primary";
|
|
616
|
+
const loading = !!props.loading;
|
|
617
|
+
const rest = omit(props, [
|
|
618
|
+
"variant",
|
|
619
|
+
"className",
|
|
620
|
+
"children",
|
|
621
|
+
"type",
|
|
622
|
+
"icon",
|
|
623
|
+
"iconRight",
|
|
624
|
+
"loading",
|
|
625
|
+
"onClick",
|
|
626
|
+
"fullWidth"
|
|
627
|
+
]);
|
|
628
|
+
return /* @__PURE__ */ React4.createElement(
|
|
629
|
+
"button",
|
|
630
|
+
{
|
|
631
|
+
...rest,
|
|
632
|
+
ref,
|
|
633
|
+
type: props.type || "button",
|
|
634
|
+
className: cx(
|
|
635
|
+
"aura-btn",
|
|
636
|
+
"aura-btn--" + variant,
|
|
637
|
+
props.fullWidth && "aura-btn--full",
|
|
638
|
+
loading && "is-loading",
|
|
639
|
+
props.className
|
|
640
|
+
),
|
|
641
|
+
"aria-busy": loading || void 0,
|
|
642
|
+
"aria-disabled": loading || void 0,
|
|
643
|
+
onClick: loading ? function(e) {
|
|
644
|
+
e.preventDefault();
|
|
645
|
+
} : props.onClick
|
|
646
|
+
},
|
|
647
|
+
loading ? /* @__PURE__ */ React4.createElement(Icon, { name: "loader-circle", className: "aura-spin" }) : props.icon ? /* @__PURE__ */ React4.createElement(Icon, { name: props.icon }) : null,
|
|
648
|
+
props.children,
|
|
649
|
+
props.iconRight && !loading ? /* @__PURE__ */ React4.createElement(Icon, { name: props.iconRight }) : null
|
|
650
|
+
);
|
|
651
|
+
}
|
|
652
|
+
);
|
|
653
|
+
|
|
654
|
+
// src/IconButton.tsx
|
|
655
|
+
var React5 = __toESM(require("react"), 1);
|
|
656
|
+
var IconButton = React5.forwardRef(function IconButton2(props, ref) {
|
|
657
|
+
const rest = omit(props, ["icon", "label", "className", "size", "tone"]);
|
|
658
|
+
return /* @__PURE__ */ React5.createElement(
|
|
659
|
+
"button",
|
|
660
|
+
{
|
|
661
|
+
...rest,
|
|
662
|
+
ref,
|
|
663
|
+
type: props.type || "button",
|
|
664
|
+
"aria-label": props.label,
|
|
665
|
+
title: props.label,
|
|
666
|
+
className: cx("aura-icon-btn", props.tone === "danger" && "aura-icon-btn--danger", props.className)
|
|
667
|
+
},
|
|
668
|
+
/* @__PURE__ */ React5.createElement(Icon, { name: props.icon, size: props.size || "sm" })
|
|
669
|
+
);
|
|
670
|
+
});
|
|
671
|
+
|
|
672
|
+
// src/Menu.tsx
|
|
673
|
+
var React6 = __toESM(require("react"), 1);
|
|
674
|
+
var import_react_dom = require("react-dom");
|
|
675
|
+
var Menu = React6.forwardRef(function Menu2(props, ref) {
|
|
676
|
+
const own = React6.useRef(null), merged = useMergedRef(ref, own);
|
|
677
|
+
const posState = React6.useState(null);
|
|
678
|
+
const pos = posState[0], setPos = posState[1];
|
|
679
|
+
const items = props.items || [];
|
|
680
|
+
const mounted = useMounted();
|
|
681
|
+
useIsoLayoutEffect(
|
|
682
|
+
function() {
|
|
683
|
+
const a = props.anchor, m = own.current;
|
|
684
|
+
if (!a || !m) return;
|
|
685
|
+
const r = a.getBoundingClientRect(), mh = m.offsetHeight, mw = m.offsetWidth;
|
|
686
|
+
let top = r.bottom + 4;
|
|
687
|
+
if (top + mh > window.innerHeight - 8 && r.top - mh - 4 > 8) top = r.top - mh - 4;
|
|
688
|
+
const left = Math.max(8, Math.min(r.right - mw, window.innerWidth - mw - 8));
|
|
689
|
+
setPos({ top, left });
|
|
690
|
+
},
|
|
691
|
+
[props.anchor, mounted]
|
|
692
|
+
);
|
|
693
|
+
React6.useEffect(
|
|
694
|
+
function() {
|
|
695
|
+
if (!mounted) return;
|
|
696
|
+
const first = own.current && own.current.querySelector('[role^="menuitem"]:not([disabled])');
|
|
697
|
+
if (first && props.autoFocus !== false) first.focus();
|
|
698
|
+
function outside(e) {
|
|
699
|
+
if (own.current && !own.current.contains(e.target) && !(props.anchor && props.anchor.contains(e.target)))
|
|
700
|
+
props.onClose(false);
|
|
701
|
+
}
|
|
702
|
+
function onScroll(e) {
|
|
703
|
+
if (own.current && !own.current.contains(e.target)) props.onClose(false);
|
|
704
|
+
}
|
|
705
|
+
document.addEventListener("pointerdown", outside, true);
|
|
706
|
+
window.addEventListener("scroll", onScroll, true);
|
|
707
|
+
window.addEventListener("resize", onScroll);
|
|
708
|
+
return function() {
|
|
709
|
+
document.removeEventListener("pointerdown", outside, true);
|
|
710
|
+
window.removeEventListener("scroll", onScroll, true);
|
|
711
|
+
window.removeEventListener("resize", onScroll);
|
|
712
|
+
};
|
|
713
|
+
},
|
|
714
|
+
[mounted]
|
|
715
|
+
);
|
|
716
|
+
function onKeyDown(e) {
|
|
717
|
+
const list = Array.prototype.slice.call(
|
|
718
|
+
own.current.querySelectorAll('[role^="menuitem"]:not([disabled])')
|
|
719
|
+
);
|
|
720
|
+
const i = list.indexOf(document.activeElement);
|
|
721
|
+
if (e.key === "ArrowDown") {
|
|
722
|
+
e.preventDefault();
|
|
723
|
+
list[(i + 1) % list.length].focus();
|
|
724
|
+
} else if (e.key === "ArrowUp") {
|
|
725
|
+
e.preventDefault();
|
|
726
|
+
list[(i - 1 + list.length) % list.length].focus();
|
|
727
|
+
} else if (e.key === "Home") {
|
|
728
|
+
e.preventDefault();
|
|
729
|
+
list[0].focus();
|
|
730
|
+
} else if (e.key === "End") {
|
|
731
|
+
e.preventDefault();
|
|
732
|
+
list[list.length - 1].focus();
|
|
733
|
+
} else if (e.key === "Escape") {
|
|
734
|
+
e.preventDefault();
|
|
735
|
+
props.onClose(true);
|
|
736
|
+
} else if (e.key === "Tab") {
|
|
737
|
+
props.onClose(true);
|
|
738
|
+
}
|
|
739
|
+
e.stopPropagation();
|
|
740
|
+
}
|
|
741
|
+
const el = /* @__PURE__ */ React6.createElement(
|
|
742
|
+
"div",
|
|
743
|
+
{
|
|
744
|
+
ref: merged,
|
|
745
|
+
role: "menu",
|
|
746
|
+
"aria-label": props.label,
|
|
747
|
+
className: "aura-menu",
|
|
748
|
+
onKeyDown,
|
|
749
|
+
style: { top: pos ? pos.top : -9999, left: pos ? pos.left : -9999 }
|
|
750
|
+
},
|
|
751
|
+
items.map(function(it, i) {
|
|
752
|
+
if (it.separator) return /* @__PURE__ */ React6.createElement("div", { key: "s" + i, role: "separator", className: "aura-menu__sep" });
|
|
753
|
+
const isCheck = it.checked !== void 0;
|
|
754
|
+
return /* @__PURE__ */ React6.createElement(
|
|
755
|
+
"button",
|
|
756
|
+
{
|
|
757
|
+
key: i,
|
|
758
|
+
type: "button",
|
|
759
|
+
tabIndex: -1,
|
|
760
|
+
disabled: it.disabled,
|
|
761
|
+
role: isCheck ? "menuitemcheckbox" : "menuitem",
|
|
762
|
+
"aria-checked": isCheck ? !!it.checked : void 0,
|
|
763
|
+
className: "aura-menu__item",
|
|
764
|
+
onClick: function() {
|
|
765
|
+
it.onSelect();
|
|
766
|
+
if (!it.keepOpen) props.onClose(true);
|
|
767
|
+
}
|
|
768
|
+
},
|
|
769
|
+
isCheck ? /* @__PURE__ */ React6.createElement("span", { className: cx("aura-menu__check", it.checked && "is-on") }, it.checked ? /* @__PURE__ */ React6.createElement(Icon, { name: "check", size: 12, strokeWidth: 3 }) : null) : it.icon ? /* @__PURE__ */ React6.createElement(Icon, { name: it.icon }) : /* @__PURE__ */ React6.createElement("span", { className: "aura-menu__blank" }),
|
|
770
|
+
/* @__PURE__ */ React6.createElement("span", { className: "aura-menu__label" }, it.label),
|
|
771
|
+
it.hint ? /* @__PURE__ */ React6.createElement("span", { className: "aura-menu__hint" }, it.hint) : null
|
|
772
|
+
);
|
|
773
|
+
})
|
|
774
|
+
);
|
|
775
|
+
return mounted ? (0, import_react_dom.createPortal)(el, document.body) : null;
|
|
776
|
+
});
|
|
777
|
+
|
|
778
|
+
// src/DropdownMenu.tsx
|
|
779
|
+
var React7 = __toESM(require("react"), 1);
|
|
780
|
+
var DropdownMenu = React7.forwardRef(function DropdownMenu2(props, ref) {
|
|
781
|
+
const st = React7.useState(null), anchor = st[0], setAnchor = st[1];
|
|
782
|
+
const wrap = React7.useRef(null), wrapMerged = useMergedRef(ref, wrap);
|
|
783
|
+
const child = React7.Children.only(props.trigger);
|
|
784
|
+
function toggle(e) {
|
|
785
|
+
if (child.props.onClick) child.props.onClick(e);
|
|
786
|
+
const el = wrap.current && (wrap.current.querySelector('button, [role="button"], a') || wrap.current);
|
|
787
|
+
setAnchor(anchor ? null : el);
|
|
788
|
+
}
|
|
789
|
+
function onKeyDown(e) {
|
|
790
|
+
if ((e.key === "ArrowDown" || e.key === "ArrowUp") && !anchor) {
|
|
791
|
+
e.preventDefault();
|
|
792
|
+
setAnchor(wrap.current.querySelector('button, [role="button"], a') || wrap.current);
|
|
793
|
+
}
|
|
728
794
|
}
|
|
729
|
-
}
|
|
730
|
-
|
|
731
|
-
|
|
732
|
-
|
|
733
|
-
|
|
734
|
-
|
|
735
|
-
|
|
736
|
-
|
|
737
|
-
|
|
738
|
-
|
|
739
|
-
|
|
795
|
+
return /* @__PURE__ */ React7.createElement("span", { ref: wrapMerged, className: "aura-dropdown", onKeyDown }, React7.cloneElement(child, { onClick: toggle, "aria-haspopup": "menu", "aria-expanded": anchor ? true : false }), anchor ? /* @__PURE__ */ React7.createElement(
|
|
796
|
+
Menu,
|
|
797
|
+
{
|
|
798
|
+
anchor,
|
|
799
|
+
label: props.label,
|
|
800
|
+
items: props.items,
|
|
801
|
+
onClose: function(restore) {
|
|
802
|
+
setAnchor(null);
|
|
803
|
+
if (restore && typeof anchor.focus === "function") anchor.focus();
|
|
804
|
+
}
|
|
805
|
+
}
|
|
806
|
+
) : null);
|
|
807
|
+
});
|
|
808
|
+
|
|
809
|
+
// src/Checkbox.tsx
|
|
810
|
+
var React8 = __toESM(require("react"), 1);
|
|
811
|
+
var Checkbox = React8.forwardRef(function Checkbox2(props, ref) {
|
|
812
|
+
const own = React8.useRef(null), merged = useMergedRef(ref, own);
|
|
813
|
+
const st = useMaybeControlled(props.checked, !!props.defaultChecked, props.onChange);
|
|
814
|
+
const on = !!st[0];
|
|
815
|
+
React8.useEffect(function() {
|
|
816
|
+
if (own.current) own.current.indeterminate = !!props.indeterminate;
|
|
817
|
+
});
|
|
818
|
+
const rest = omit(props, [
|
|
819
|
+
"checked",
|
|
820
|
+
"defaultChecked",
|
|
821
|
+
"onChange",
|
|
822
|
+
"indeterminate",
|
|
823
|
+
"label",
|
|
824
|
+
"children",
|
|
825
|
+
"description",
|
|
826
|
+
"className",
|
|
827
|
+
"tabIndex",
|
|
828
|
+
"disabled"
|
|
829
|
+
]);
|
|
830
|
+
const labelled = props.children != null;
|
|
831
|
+
const descId = props.description && props.id ? props.id + "-desc" : void 0;
|
|
832
|
+
return /* @__PURE__ */ React8.createElement(
|
|
833
|
+
"label",
|
|
834
|
+
{
|
|
835
|
+
className: cx("aura-check", labelled && "aura-check--labelled", props.disabled && "is-disabled", props.className),
|
|
836
|
+
onClick: function(e) {
|
|
837
|
+
e.stopPropagation();
|
|
838
|
+
}
|
|
740
839
|
},
|
|
741
|
-
|
|
840
|
+
/* @__PURE__ */ React8.createElement(
|
|
841
|
+
"input",
|
|
842
|
+
{
|
|
843
|
+
...rest,
|
|
844
|
+
ref: merged,
|
|
845
|
+
type: "checkbox",
|
|
846
|
+
className: "aura-check__input",
|
|
847
|
+
checked: on,
|
|
848
|
+
tabIndex: props.tabIndex,
|
|
849
|
+
disabled: props.disabled,
|
|
850
|
+
"aria-describedby": descId,
|
|
851
|
+
"aria-label": labelled ? void 0 : props.label,
|
|
852
|
+
onChange: function(e) {
|
|
853
|
+
st[1](e.target.checked);
|
|
854
|
+
}
|
|
855
|
+
}
|
|
856
|
+
),
|
|
857
|
+
/* @__PURE__ */ React8.createElement("span", { className: "aura-check__box", "aria-hidden": true }, props.indeterminate ? /* @__PURE__ */ React8.createElement(Icon, { name: "minus", size: 12, strokeWidth: 3 }) : on ? /* @__PURE__ */ React8.createElement(Icon, { name: "check", size: 12, strokeWidth: 3 }) : null),
|
|
858
|
+
labelled ? /* @__PURE__ */ React8.createElement("span", { className: "aura-check__text" }, /* @__PURE__ */ React8.createElement("span", { className: "aura-check__label" }, props.children), props.description ? /* @__PURE__ */ React8.createElement("span", { className: "aura-check__desc", id: descId }, props.description) : null) : null
|
|
742
859
|
);
|
|
743
|
-
|
|
744
|
-
|
|
745
|
-
|
|
746
|
-
|
|
747
|
-
|
|
748
|
-
|
|
749
|
-
|
|
860
|
+
});
|
|
861
|
+
|
|
862
|
+
// src/StatusPill.tsx
|
|
863
|
+
var React9 = __toESM(require("react"), 1);
|
|
864
|
+
var TONE_ICON = {
|
|
865
|
+
neutral: "circle",
|
|
866
|
+
progress: "circle-dot-dashed",
|
|
867
|
+
ready: "circle-check",
|
|
868
|
+
blocked: "ban"
|
|
869
|
+
};
|
|
870
|
+
var TONE_WORDS = {
|
|
871
|
+
ready: ["ready", "done", "complete", "completed", "approved", "live", "passed"],
|
|
872
|
+
progress: ["in progress", "in review", "review", "syncing", "running", "pending"],
|
|
873
|
+
blocked: ["blocked", "failed", "error", "rejected", "on hold", "cancelled"]
|
|
874
|
+
};
|
|
875
|
+
function toneFor(status) {
|
|
876
|
+
const s = String(status == null ? "" : status).trim().toLowerCase();
|
|
877
|
+
for (const t in TONE_WORDS) if (TONE_WORDS[t].indexOf(s) >= 0) return t;
|
|
878
|
+
return "neutral";
|
|
750
879
|
}
|
|
880
|
+
var TONE_ORDER = { neutral: 0, progress: 1, ready: 2, blocked: 3 };
|
|
881
|
+
var StatusPill = React9.forwardRef(function StatusPill2(props, ref) {
|
|
882
|
+
const tone2 = props.tone || toneFor(props.children);
|
|
883
|
+
return /* @__PURE__ */ React9.createElement("span", { ref, className: cx("aura-pill", "aura-pill--" + tone2, props.className) }, /* @__PURE__ */ React9.createElement(Icon, { name: TONE_ICON[tone2] || "circle", size: 12 }), props.children);
|
|
884
|
+
});
|
|
751
885
|
|
|
752
886
|
// src/Field.tsx
|
|
887
|
+
var React10 = __toESM(require("react"), 1);
|
|
753
888
|
var h2 = React10.createElement;
|
|
754
889
|
var Field = React10.forwardRef(function Field2(props, ref) {
|
|
755
890
|
const t = useStrings();
|
|
@@ -945,25 +1080,37 @@ var Switch = React15.forwardRef(function Switch2(props, ref) {
|
|
|
945
1080
|
const auto = uid(), id = props.id || auto;
|
|
946
1081
|
const st = useMaybeControlled(props.checked, !!props.defaultChecked, props.onChange);
|
|
947
1082
|
const on = !!st[0];
|
|
948
|
-
return /* @__PURE__ */ React15.createElement(
|
|
949
|
-
"
|
|
1083
|
+
return /* @__PURE__ */ React15.createElement(
|
|
1084
|
+
"div",
|
|
950
1085
|
{
|
|
951
|
-
|
|
952
|
-
|
|
953
|
-
|
|
954
|
-
|
|
955
|
-
"aria-checked": on,
|
|
956
|
-
disabled: props.disabled,
|
|
957
|
-
"aria-labelledby": props.label ? id + "-label" : void 0,
|
|
958
|
-
"aria-label": props.label ? void 0 : props["aria-label"],
|
|
959
|
-
"aria-describedby": props.description ? id + "-desc" : void 0,
|
|
960
|
-
className: cx("aura-switch", on && "is-on"),
|
|
961
|
-
onClick: function() {
|
|
1086
|
+
className: cx("aura-switch-row", props.disabled && "is-disabled", props.className),
|
|
1087
|
+
onClick: function(e) {
|
|
1088
|
+
const t = e.target;
|
|
1089
|
+
if (props.disabled || t.closest("button, label, a, input")) return;
|
|
962
1090
|
st[1](!on);
|
|
963
1091
|
}
|
|
964
1092
|
},
|
|
965
|
-
/* @__PURE__ */ React15.createElement(
|
|
966
|
-
|
|
1093
|
+
/* @__PURE__ */ React15.createElement(
|
|
1094
|
+
"button",
|
|
1095
|
+
{
|
|
1096
|
+
ref,
|
|
1097
|
+
type: "button",
|
|
1098
|
+
role: "switch",
|
|
1099
|
+
id,
|
|
1100
|
+
"aria-checked": on,
|
|
1101
|
+
disabled: props.disabled,
|
|
1102
|
+
"aria-labelledby": props.label ? id + "-label" : void 0,
|
|
1103
|
+
"aria-label": props.label ? void 0 : props["aria-label"],
|
|
1104
|
+
"aria-describedby": props.description ? id + "-desc" : void 0,
|
|
1105
|
+
className: cx("aura-switch", on && "is-on"),
|
|
1106
|
+
onClick: function() {
|
|
1107
|
+
st[1](!on);
|
|
1108
|
+
}
|
|
1109
|
+
},
|
|
1110
|
+
/* @__PURE__ */ React15.createElement("span", { className: "aura-switch__thumb" })
|
|
1111
|
+
),
|
|
1112
|
+
props.label ? /* @__PURE__ */ React15.createElement("span", { className: "aura-choice__text" }, /* @__PURE__ */ React15.createElement("label", { className: "aura-choice__label", id: id + "-label", htmlFor: id }, props.label), props.description ? /* @__PURE__ */ React15.createElement("span", { className: "aura-choice__desc", id: id + "-desc" }, props.description) : null) : null
|
|
1113
|
+
);
|
|
967
1114
|
});
|
|
968
1115
|
|
|
969
1116
|
// src/Combobox.tsx
|
|
@@ -1335,8 +1482,69 @@ function addMonths(d, n2) {
|
|
|
1335
1482
|
function same(a, b) {
|
|
1336
1483
|
return !!a && !!b && a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
|
|
1337
1484
|
}
|
|
1485
|
+
var TAGS = { th: "th-TH", en: "en-GB", sv: "sv-SE" };
|
|
1486
|
+
function defaultCalendar(locale) {
|
|
1487
|
+
return locale === "th" ? "buddhist" : "gregory";
|
|
1488
|
+
}
|
|
1338
1489
|
function localeTag(locale, calendar) {
|
|
1339
|
-
|
|
1490
|
+
const cal = calendar || defaultCalendar(locale);
|
|
1491
|
+
return (TAGS[locale || "en"] || "en-GB") + "-u-ca-" + (cal === "gregory" ? "gregory" : "buddhist");
|
|
1492
|
+
}
|
|
1493
|
+
var DATE_TEXT = {
|
|
1494
|
+
th: {
|
|
1495
|
+
prevYears: "\u0E0A\u0E48\u0E27\u0E07\u0E1B\u0E35\u0E01\u0E48\u0E2D\u0E19\u0E2B\u0E19\u0E49\u0E32",
|
|
1496
|
+
nextYears: "\u0E0A\u0E48\u0E27\u0E07\u0E1B\u0E35\u0E16\u0E31\u0E14\u0E44\u0E1B",
|
|
1497
|
+
prevMonth: "\u0E40\u0E14\u0E37\u0E2D\u0E19\u0E01\u0E48\u0E2D\u0E19\u0E2B\u0E19\u0E49\u0E32",
|
|
1498
|
+
nextMonth: "\u0E40\u0E14\u0E37\u0E2D\u0E19\u0E16\u0E31\u0E14\u0E44\u0E1B",
|
|
1499
|
+
today: "\u0E27\u0E31\u0E19\u0E19\u0E35\u0E49",
|
|
1500
|
+
clear: "\u0E25\u0E49\u0E32\u0E07",
|
|
1501
|
+
chooseDate: "\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E27\u0E31\u0E19\u0E17\u0E35\u0E48",
|
|
1502
|
+
datePlaceholder: "\u0E27\u0E27/\u0E14\u0E14/\u0E1B\u0E1B\u0E1B\u0E1B",
|
|
1503
|
+
clearDate: "\u0E25\u0E49\u0E32\u0E07\u0E27\u0E31\u0E19\u0E17\u0E35\u0E48",
|
|
1504
|
+
openCalendar: "\u0E40\u0E1B\u0E34\u0E14\u0E1B\u0E0F\u0E34\u0E17\u0E34\u0E19",
|
|
1505
|
+
chooseDates: "\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E0A\u0E48\u0E27\u0E07\u0E27\u0E31\u0E19\u0E17\u0E35\u0E48",
|
|
1506
|
+
rangePlaceholder: "\u0E27\u0E27/\u0E14\u0E14/\u0E1B\u0E1B\u0E1B\u0E1B \u2013 \u0E27\u0E27/\u0E14\u0E14/\u0E1B\u0E1B\u0E1B\u0E1B",
|
|
1507
|
+
clearDates: "\u0E25\u0E49\u0E32\u0E07\u0E0A\u0E48\u0E27\u0E07\u0E27\u0E31\u0E19\u0E17\u0E35\u0E48",
|
|
1508
|
+
chooseStart: "\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E27\u0E31\u0E19\u0E40\u0E23\u0E34\u0E48\u0E21\u0E15\u0E49\u0E19",
|
|
1509
|
+
chooseEnd: "\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E27\u0E31\u0E19\u0E2A\u0E34\u0E49\u0E19\u0E2A\u0E38\u0E14"
|
|
1510
|
+
},
|
|
1511
|
+
en: {
|
|
1512
|
+
prevYears: "Previous years",
|
|
1513
|
+
nextYears: "Next years",
|
|
1514
|
+
prevMonth: "Previous month",
|
|
1515
|
+
nextMonth: "Next month",
|
|
1516
|
+
today: "Today",
|
|
1517
|
+
clear: "Clear",
|
|
1518
|
+
chooseDate: "Choose date",
|
|
1519
|
+
datePlaceholder: "DD/MM/YYYY",
|
|
1520
|
+
clearDate: "Clear date",
|
|
1521
|
+
openCalendar: "Open calendar",
|
|
1522
|
+
chooseDates: "Choose dates",
|
|
1523
|
+
rangePlaceholder: "DD/MM/YYYY \u2013 DD/MM/YYYY",
|
|
1524
|
+
clearDates: "Clear dates",
|
|
1525
|
+
chooseStart: "Choose the start date",
|
|
1526
|
+
chooseEnd: "Choose the end date"
|
|
1527
|
+
},
|
|
1528
|
+
sv: {
|
|
1529
|
+
prevYears: "Tidigare \xE5r",
|
|
1530
|
+
nextYears: "Senare \xE5r",
|
|
1531
|
+
prevMonth: "F\xF6reg\xE5ende m\xE5nad",
|
|
1532
|
+
nextMonth: "N\xE4sta m\xE5nad",
|
|
1533
|
+
today: "Idag",
|
|
1534
|
+
clear: "Rensa",
|
|
1535
|
+
chooseDate: "V\xE4lj datum",
|
|
1536
|
+
datePlaceholder: "\xE5\xE5\xE5\xE5-mm-dd",
|
|
1537
|
+
clearDate: "Rensa datum",
|
|
1538
|
+
openCalendar: "\xD6ppna kalendern",
|
|
1539
|
+
chooseDates: "V\xE4lj datum",
|
|
1540
|
+
rangePlaceholder: "\xE5\xE5\xE5\xE5-mm-dd \u2013 \xE5\xE5\xE5\xE5-mm-dd",
|
|
1541
|
+
clearDates: "Rensa datumen",
|
|
1542
|
+
chooseStart: "V\xE4lj startdatum",
|
|
1543
|
+
chooseEnd: "V\xE4lj slutdatum"
|
|
1544
|
+
}
|
|
1545
|
+
};
|
|
1546
|
+
function dateText(locale) {
|
|
1547
|
+
return DATE_TEXT[locale || "en"] || DATE_TEXT.en;
|
|
1340
1548
|
}
|
|
1341
1549
|
var fmtCache = {};
|
|
1342
1550
|
var PRESETS = {
|
|
@@ -1353,18 +1561,19 @@ function formatDate(iso, opts) {
|
|
|
1353
1561
|
const o = opts || {}, d = fromISO(iso);
|
|
1354
1562
|
if (!d) return "";
|
|
1355
1563
|
const f = typeof o.format === "object" ? o.format : PRESETS[o.format || "short"];
|
|
1356
|
-
|
|
1564
|
+
const loc = o.locale || "th";
|
|
1565
|
+
return fmt(localeTag(loc, o.calendar || defaultCalendar(loc)), f, d).replace(ERA, "");
|
|
1357
1566
|
}
|
|
1358
1567
|
var MONTHS = null;
|
|
1359
1568
|
function monthIndex(word) {
|
|
1360
1569
|
if (!MONTHS) {
|
|
1361
1570
|
MONTHS = {};
|
|
1362
|
-
["th-TH", "en-GB"].forEach(function(tag) {
|
|
1571
|
+
["th-TH", "en-GB", "sv-SE"].forEach(function(tag) {
|
|
1363
1572
|
["short", "long"].forEach(function(w) {
|
|
1364
1573
|
for (let i = 0; i < 12; i++) {
|
|
1365
1574
|
const n2 = new Intl.DateTimeFormat(tag, { month: w }).format(new Date(2020, i, 1)).toLowerCase().replace(/\.$/, "");
|
|
1366
1575
|
MONTHS[n2] = i;
|
|
1367
|
-
if (/^[a-
|
|
1576
|
+
if (/^[a-zåäö]/.test(n2)) MONTHS[n2.slice(0, 3)] = i;
|
|
1368
1577
|
}
|
|
1369
1578
|
});
|
|
1370
1579
|
});
|
|
@@ -1393,8 +1602,8 @@ function parseDate(text) {
|
|
|
1393
1602
|
return dt.getMonth() === mo - 1 && dt.getDate() === d ? toISO(dt) : null;
|
|
1394
1603
|
}
|
|
1395
1604
|
var Calendar = React17.forwardRef(function Calendar2(props, ref) {
|
|
1396
|
-
const ctx = useAuraLocale(), locale = props.locale || ctx.locale || "
|
|
1397
|
-
const weekStart = props.weekStartsOn == null ? 0 : props.weekStartsOn;
|
|
1605
|
+
const ctx = useAuraLocale(), locale = props.locale || ctx.locale || "en", calendar = props.calendar || ctx.calendar || defaultCalendar(locale), tag = localeTag(locale, calendar);
|
|
1606
|
+
const weekStart = props.weekStartsOn == null ? locale === "sv" ? 1 : 0 : props.weekStartsOn;
|
|
1398
1607
|
let today = /* @__PURE__ */ new Date();
|
|
1399
1608
|
today = new Date(today.getFullYear(), today.getMonth(), today.getDate());
|
|
1400
1609
|
const min = fromISO(props.min), max = fromISO(props.max);
|
|
@@ -1404,7 +1613,8 @@ var Calendar = React17.forwardRef(function Calendar2(props, ref) {
|
|
|
1404
1613
|
const viewState = React17.useState("days"), view = viewState[0], setView = viewState[1];
|
|
1405
1614
|
const hoverState = React17.useState(null);
|
|
1406
1615
|
const gridRef = React17.useRef(null), gridMerged = useMergedRef(ref, gridRef), moved = React17.useRef(false);
|
|
1407
|
-
const th = locale
|
|
1616
|
+
const th = locale === "th";
|
|
1617
|
+
const dt = dateText(locale);
|
|
1408
1618
|
function disabled(d) {
|
|
1409
1619
|
return !!(min && d < min || max && d > max || props.isDateDisabled && props.isDateDisabled(toISO(d)));
|
|
1410
1620
|
}
|
|
@@ -1470,7 +1680,7 @@ var Calendar = React17.forwardRef(function Calendar2(props, ref) {
|
|
|
1470
1680
|
IconButton,
|
|
1471
1681
|
{
|
|
1472
1682
|
icon: "chevron-left",
|
|
1473
|
-
label:
|
|
1683
|
+
label: dt.prevYears,
|
|
1474
1684
|
onClick: function() {
|
|
1475
1685
|
setFocus(new Date(yr - 12, focusDate.getMonth(), 1));
|
|
1476
1686
|
}
|
|
@@ -1489,7 +1699,7 @@ var Calendar = React17.forwardRef(function Calendar2(props, ref) {
|
|
|
1489
1699
|
IconButton,
|
|
1490
1700
|
{
|
|
1491
1701
|
icon: "chevron-right",
|
|
1492
|
-
label:
|
|
1702
|
+
label: dt.nextYears,
|
|
1493
1703
|
onClick: function() {
|
|
1494
1704
|
setFocus(new Date(yr + 12, focusDate.getMonth(), 1));
|
|
1495
1705
|
}
|
|
@@ -1517,7 +1727,7 @@ var Calendar = React17.forwardRef(function Calendar2(props, ref) {
|
|
|
1517
1727
|
IconButton,
|
|
1518
1728
|
{
|
|
1519
1729
|
icon: "chevron-left",
|
|
1520
|
-
label:
|
|
1730
|
+
label: dt.prevMonth,
|
|
1521
1731
|
onClick: function() {
|
|
1522
1732
|
setFocus(addMonths(focusDate, -1));
|
|
1523
1733
|
}
|
|
@@ -1538,7 +1748,7 @@ var Calendar = React17.forwardRef(function Calendar2(props, ref) {
|
|
|
1538
1748
|
IconButton,
|
|
1539
1749
|
{
|
|
1540
1750
|
icon: "chevron-right",
|
|
1541
|
-
label:
|
|
1751
|
+
label: dt.nextMonth,
|
|
1542
1752
|
onClick: function() {
|
|
1543
1753
|
setFocus(addMonths(focusDate, 1));
|
|
1544
1754
|
}
|
|
@@ -1577,6 +1787,7 @@ var Calendar = React17.forwardRef(function Calendar2(props, ref) {
|
|
|
1577
1787
|
tabIndex: same(d, focusDate) ? 0 : -1,
|
|
1578
1788
|
disabled: dis,
|
|
1579
1789
|
"aria-label": fmt(tag, { weekday: "long", day: "numeric", month: "long", year: "numeric" }, d),
|
|
1790
|
+
suppressHydrationWarning: true,
|
|
1580
1791
|
"aria-current": same(d, today) ? "date" : void 0,
|
|
1581
1792
|
"aria-pressed": sel || void 0,
|
|
1582
1793
|
className: cx(
|
|
@@ -1612,8 +1823,8 @@ var Calendar = React17.forwardRef(function Calendar2(props, ref) {
|
|
|
1612
1823
|
props.onSelect(toISO(today));
|
|
1613
1824
|
}
|
|
1614
1825
|
},
|
|
1615
|
-
|
|
1616
|
-
), props.onClear ? /* @__PURE__ */ React17.createElement("button", { type: "button", className: "aura-cal__link", onClick: props.onClear },
|
|
1826
|
+
dt.today
|
|
1827
|
+
), props.onClear ? /* @__PURE__ */ React17.createElement("button", { type: "button", className: "aura-cal__link", onClick: props.onClear }, dt.clear) : null));
|
|
1617
1828
|
});
|
|
1618
1829
|
function useCalendarPopover(boxRef) {
|
|
1619
1830
|
const openState = React17.useState(false), open = openState[0], setOpen = openState[1];
|
|
@@ -1735,7 +1946,7 @@ function DateField(props) {
|
|
|
1735
1946
|
}
|
|
1736
1947
|
var DatePicker = React17.forwardRef(function DatePicker2(props, ref) {
|
|
1737
1948
|
const auto = uid(), id = props.id || auto, dialogId = id + "-cal";
|
|
1738
|
-
const ctx = useAuraLocale(), locale = props.locale || ctx.locale || "
|
|
1949
|
+
const ctx = useAuraLocale(), locale = props.locale || ctx.locale || "en", calendar = props.calendar || ctx.calendar || defaultCalendar(locale), dt = dateText(locale);
|
|
1739
1950
|
const st = useMaybeControlled(
|
|
1740
1951
|
props.value,
|
|
1741
1952
|
props.defaultValue == null ? null : props.defaultValue,
|
|
@@ -1763,7 +1974,7 @@ var DatePicker = React17.forwardRef(function DatePicker2(props, ref) {
|
|
|
1763
1974
|
id: dialogId,
|
|
1764
1975
|
role: "dialog",
|
|
1765
1976
|
"aria-modal": false,
|
|
1766
|
-
"aria-label": props.label ||
|
|
1977
|
+
"aria-label": props.label || dt.chooseDate,
|
|
1767
1978
|
className: "aura-cal__popover",
|
|
1768
1979
|
style: pop.pos,
|
|
1769
1980
|
onKeyDown: function(e) {
|
|
@@ -1810,15 +2021,15 @@ var DatePicker = React17.forwardRef(function DatePicker2(props, ref) {
|
|
|
1810
2021
|
inputRef: inputMerged,
|
|
1811
2022
|
open: pop.open,
|
|
1812
2023
|
display: formatDate(st[0], { locale, calendar }),
|
|
1813
|
-
placeholder: props.placeholder ||
|
|
2024
|
+
placeholder: props.placeholder || dt.datePlaceholder,
|
|
1814
2025
|
hasValue: st[0] != null,
|
|
1815
2026
|
clearable: props.clearable,
|
|
1816
2027
|
onClear: function() {
|
|
1817
2028
|
st[1](null);
|
|
1818
2029
|
inputRef.current && inputRef.current.focus();
|
|
1819
2030
|
},
|
|
1820
|
-
clearLabel:
|
|
1821
|
-
toggleLabel:
|
|
2031
|
+
clearLabel: dt.clearDate,
|
|
2032
|
+
toggleLabel: dt.openCalendar,
|
|
1822
2033
|
onCommit: commit,
|
|
1823
2034
|
onToggle: function(o) {
|
|
1824
2035
|
pop.setOpen(o);
|
|
@@ -1830,7 +2041,7 @@ var DatePicker = React17.forwardRef(function DatePicker2(props, ref) {
|
|
|
1830
2041
|
var DateRangePicker = React17.forwardRef(
|
|
1831
2042
|
function DateRangePicker2(props, ref) {
|
|
1832
2043
|
const auto = uid(), id = props.id || auto, dialogId = id + "-cal";
|
|
1833
|
-
const ctx = useAuraLocale(), locale = props.locale || ctx.locale || "
|
|
2044
|
+
const ctx = useAuraLocale(), locale = props.locale || ctx.locale || "en", calendar = props.calendar || ctx.calendar || defaultCalendar(locale), dt = dateText(locale);
|
|
1834
2045
|
const st = useMaybeControlled(
|
|
1835
2046
|
props.value,
|
|
1836
2047
|
props.defaultValue || { start: null, end: null },
|
|
@@ -1877,7 +2088,7 @@ var DateRangePicker = React17.forwardRef(
|
|
|
1877
2088
|
id: dialogId,
|
|
1878
2089
|
role: "dialog",
|
|
1879
2090
|
"aria-modal": false,
|
|
1880
|
-
"aria-label": props.label ||
|
|
2091
|
+
"aria-label": props.label || dt.chooseDates,
|
|
1881
2092
|
className: "aura-cal__popover",
|
|
1882
2093
|
style: pop.pos,
|
|
1883
2094
|
onKeyDown: function(e) {
|
|
@@ -1887,7 +2098,7 @@ var DateRangePicker = React17.forwardRef(
|
|
|
1887
2098
|
} else trapTab(e, pop.popRef.current);
|
|
1888
2099
|
}
|
|
1889
2100
|
},
|
|
1890
|
-
/* @__PURE__ */ React17.createElement("p", { className: "aura-cal__hint", "aria-live": "polite" }, draft[0] ?
|
|
2101
|
+
/* @__PURE__ */ React17.createElement("p", { className: "aura-cal__hint", "aria-live": "polite" }, draft[0] ? dt.chooseEnd : dt.chooseStart),
|
|
1891
2102
|
/* @__PURE__ */ React17.createElement(
|
|
1892
2103
|
Calendar,
|
|
1893
2104
|
{
|
|
@@ -1924,15 +2135,15 @@ var DateRangePicker = React17.forwardRef(
|
|
|
1924
2135
|
inputRef: inputMerged,
|
|
1925
2136
|
open: pop.open,
|
|
1926
2137
|
display: show(v),
|
|
1927
|
-
placeholder: props.placeholder ||
|
|
2138
|
+
placeholder: props.placeholder || dt.rangePlaceholder,
|
|
1928
2139
|
hasValue: v.start != null,
|
|
1929
2140
|
clearable: props.clearable,
|
|
1930
2141
|
onClear: function() {
|
|
1931
2142
|
st[1]({ start: null, end: null });
|
|
1932
2143
|
inputRef.current && inputRef.current.focus();
|
|
1933
2144
|
},
|
|
1934
|
-
clearLabel:
|
|
1935
|
-
toggleLabel:
|
|
2145
|
+
clearLabel: dt.clearDates,
|
|
2146
|
+
toggleLabel: dt.openCalendar,
|
|
1936
2147
|
onCommit: commit,
|
|
1937
2148
|
onToggle: function(op) {
|
|
1938
2149
|
pop.setOpen(op);
|
|
@@ -2303,7 +2514,11 @@ var DataTable = React23.forwardRef(function DataTable2(props, ref) {
|
|
|
2303
2514
|
});
|
|
2304
2515
|
const rows = props.rows || [];
|
|
2305
2516
|
const rowKey = props.rowKey || columns[0].key;
|
|
2306
|
-
const
|
|
2517
|
+
const manual = !!props.manual;
|
|
2518
|
+
const Link = useLinkComponent(props.linkComponent);
|
|
2519
|
+
const busy = !!props.loading;
|
|
2520
|
+
const refreshing = busy && manual && rows.length > 0;
|
|
2521
|
+
const loading = busy && !refreshing;
|
|
2307
2522
|
const selectable = !!props.selectable;
|
|
2308
2523
|
const reorderable = props.reorderable !== false && !!props.columnControls;
|
|
2309
2524
|
const controls = !!props.columnControls;
|
|
@@ -2435,7 +2650,7 @@ var DataTable = React23.forwardRef(function DataTable2(props, ref) {
|
|
|
2435
2650
|
}
|
|
2436
2651
|
const view = React23.useMemo(
|
|
2437
2652
|
function() {
|
|
2438
|
-
if (!sort || !sort.key || !byKey[sort.key]) return rows;
|
|
2653
|
+
if (manual || !sort || !sort.key || !byKey[sort.key]) return rows;
|
|
2439
2654
|
const col = byKey[sort.key];
|
|
2440
2655
|
const val = col.sortValue || (col.pill ? function(r) {
|
|
2441
2656
|
return TONE_ORDER[col.tones && col.tones[r[col.key]] || toneFor(r[col.key])];
|
|
@@ -2451,7 +2666,7 @@ var DataTable = React23.forwardRef(function DataTable2(props, ref) {
|
|
|
2451
2666
|
return p[0];
|
|
2452
2667
|
});
|
|
2453
2668
|
},
|
|
2454
|
-
[rows, sort && sort.key, sort && sort.dir]
|
|
2669
|
+
[rows, manual, sort && sort.key, sort && sort.dir]
|
|
2455
2670
|
);
|
|
2456
2671
|
function nextSort(key) {
|
|
2457
2672
|
if (!sort || sort.key !== key) return { key, dir: "asc" };
|
|
@@ -2459,18 +2674,51 @@ var DataTable = React23.forwardRef(function DataTable2(props, ref) {
|
|
|
2459
2674
|
return null;
|
|
2460
2675
|
}
|
|
2461
2676
|
const pageSize = props.pageSize || 0;
|
|
2462
|
-
const
|
|
2677
|
+
const total = manual ? props.totalRows != null ? props.totalRows : (Math.max(1, pageState[0] || 1) - 1) * pageSize + rows.length + (pageSize && rows.length >= pageSize ? 1 : 0) : view.length;
|
|
2678
|
+
const pageCount = pageSize ? Math.max(1, Math.ceil(total / pageSize)) : 1;
|
|
2463
2679
|
const page = Math.min(Math.max(1, pageState[0] || 1), pageCount);
|
|
2464
2680
|
const first = pageSize ? (page - 1) * pageSize : 0;
|
|
2465
|
-
const pageRows = pageSize ? view.slice(first, first + pageSize) : view;
|
|
2681
|
+
const pageRows = pageSize && !manual ? view.slice(first, first + pageSize) : view;
|
|
2682
|
+
const canSortAny = !busy && (manual ? total > 1 : rows.length > 1);
|
|
2683
|
+
const shownTotal = manual && props.totalRows == null ? first + rows.length : total;
|
|
2684
|
+
const linkPaging = !!props.getPageHref && !props.onPageChange;
|
|
2685
|
+
const prevLink = React23.useRef(null), nextLink = React23.useRef(null);
|
|
2466
2686
|
function goPage(p, focus) {
|
|
2467
2687
|
const next = Math.min(Math.max(1, p), pageCount);
|
|
2468
2688
|
if (next === page) return false;
|
|
2689
|
+
if (linkPaging) {
|
|
2690
|
+
const a = next === page - 1 ? prevLink.current : next === page + 1 ? nextLink.current : null;
|
|
2691
|
+
if (a) a.click();
|
|
2692
|
+
return false;
|
|
2693
|
+
}
|
|
2469
2694
|
if (focus) pending.current = focus;
|
|
2470
2695
|
pageState[1](next);
|
|
2471
2696
|
if (scrollRef.current) scrollRef.current.scrollTop = 0;
|
|
2472
2697
|
return true;
|
|
2473
2698
|
}
|
|
2699
|
+
function sortBy(key) {
|
|
2700
|
+
setSort(nextSort(key));
|
|
2701
|
+
if (!(manual && linkPaging)) goPage(1);
|
|
2702
|
+
}
|
|
2703
|
+
const rowHref = props.getRowHref;
|
|
2704
|
+
function followRow(el, e) {
|
|
2705
|
+
const a = el && el.querySelector(".aura-table__row-link");
|
|
2706
|
+
if (!a) return;
|
|
2707
|
+
a.dispatchEvent(
|
|
2708
|
+
new MouseEvent("click", {
|
|
2709
|
+
bubbles: true,
|
|
2710
|
+
cancelable: true,
|
|
2711
|
+
view: window,
|
|
2712
|
+
ctrlKey: !!(e && e.ctrlKey),
|
|
2713
|
+
metaKey: !!(e && e.metaKey),
|
|
2714
|
+
shiftKey: !!(e && e.shiftKey),
|
|
2715
|
+
altKey: !!(e && e.altKey)
|
|
2716
|
+
})
|
|
2717
|
+
);
|
|
2718
|
+
}
|
|
2719
|
+
function rowLinkWrap(r, content) {
|
|
2720
|
+
return rowHref ? /* @__PURE__ */ React23.createElement(Link, { href: rowHref(r), className: "aura-table__row-link" }, content) : content;
|
|
2721
|
+
}
|
|
2474
2722
|
const height = props.height || 0;
|
|
2475
2723
|
const virtual = !!height && !loading && pageRows.length > 0;
|
|
2476
2724
|
const bodyH = Math.max(ROW_H, height - ROW_H);
|
|
@@ -2789,10 +3037,10 @@ var DataTable = React23.forwardRef(function DataTable2(props, ref) {
|
|
|
2789
3037
|
else handled = false;
|
|
2790
3038
|
} else if (k === " " || k === "Enter") {
|
|
2791
3039
|
if (r === 0 && !col && selectable && nRows) toggleAll();
|
|
2792
|
-
else if (r === 0 && col && col.sortable &&
|
|
2793
|
-
|
|
2794
|
-
|
|
2795
|
-
|
|
3040
|
+
else if (r === 0 && col && col.sortable && canSortAny) sortBy(col.key);
|
|
3041
|
+
else if (r > 0 && k === " " && selectable) toggle(row[rowKey], !selSet[row[rowKey]]);
|
|
3042
|
+
else if (r > 0 && k === "Enter" && rowHref && !target.querySelector("button, a[href]:not(.aura-table__row-link), input, select, textarea"))
|
|
3043
|
+
followRow(target.closest('[role="row"]'), e);
|
|
2796
3044
|
else if (r > 0 && k === "Enter" && target.querySelector("button, a[href], input, select, textarea"))
|
|
2797
3045
|
target.querySelector("button, a[href], input, select, textarea").focus();
|
|
2798
3046
|
else if (r > 0 && k === "Enter" && props.onRowActivate) props.onRowActivate(row);
|
|
@@ -2835,7 +3083,7 @@ var DataTable = React23.forwardRef(function DataTable2(props, ref) {
|
|
|
2835
3083
|
vis.forEach(function(c, i) {
|
|
2836
3084
|
const ci = i + (selectable ? 1 : 0);
|
|
2837
3085
|
const isSorted = sort && sort.key === c.key;
|
|
2838
|
-
const canSort = c.sortable &&
|
|
3086
|
+
const canSort = c.sortable && canSortAny;
|
|
2839
3087
|
const ariaSort = isSorted && canSort ? sort.dir === "desc" ? "descending" : "ascending" : canSort ? "none" : void 0;
|
|
2840
3088
|
const pin = isPinned(c), edge = pin && i === nPinned - 1;
|
|
2841
3089
|
head.push(
|
|
@@ -2851,12 +3099,13 @@ var DataTable = React23.forwardRef(function DataTable2(props, ref) {
|
|
|
2851
3099
|
"data-rc": "0:" + ci,
|
|
2852
3100
|
className: cx(
|
|
2853
3101
|
"aura-table__th",
|
|
3102
|
+
c.align === "end" && "is-end",
|
|
2854
3103
|
pin && "is-pinned",
|
|
2855
3104
|
edge && "is-pin-edge",
|
|
2856
3105
|
drag && drag.over === c.key && (drag.after ? "is-drop-after" : "is-drop-before"),
|
|
2857
3106
|
drag && drag.key === c.key && "is-dragging"
|
|
2858
3107
|
),
|
|
2859
|
-
draggable: reorderable && !
|
|
3108
|
+
draggable: reorderable && !busy ? true : void 0,
|
|
2860
3109
|
onFocus: function(e) {
|
|
2861
3110
|
if (e.target === e.currentTarget) activeState[1]({ r: 0, c: ci });
|
|
2862
3111
|
},
|
|
@@ -2894,8 +3143,7 @@ var DataTable = React23.forwardRef(function DataTable2(props, ref) {
|
|
|
2894
3143
|
tabIndex: -1,
|
|
2895
3144
|
className: cx("aura-table__sort", isSorted && "is-active"),
|
|
2896
3145
|
onClick: function() {
|
|
2897
|
-
|
|
2898
|
-
goPage(1);
|
|
3146
|
+
sortBy(c.key);
|
|
2899
3147
|
activeState[1]({ r: 0, c: ci });
|
|
2900
3148
|
}
|
|
2901
3149
|
},
|
|
@@ -2948,6 +3196,10 @@ var DataTable = React23.forwardRef(function DataTable2(props, ref) {
|
|
|
2948
3196
|
}
|
|
2949
3197
|
)
|
|
2950
3198
|
);
|
|
3199
|
+
function cellContent(c, r) {
|
|
3200
|
+
const v = r[c.key];
|
|
3201
|
+
return c.render ? c.render(r) : c.pill ? /* @__PURE__ */ React23.createElement(StatusPill, { ...{ tone: c.tones && c.tones[v] } }, v) : v;
|
|
3202
|
+
}
|
|
2951
3203
|
function rowCells(r, i, k, isSel) {
|
|
2952
3204
|
const ri = i + 1;
|
|
2953
3205
|
const cells = [/* @__PURE__ */ React23.createElement("span", { key: "__gl", className: "aura-table__gutter", "aria-hidden": true })];
|
|
@@ -2994,6 +3246,7 @@ var DataTable = React23.forwardRef(function DataTable2(props, ref) {
|
|
|
2994
3246
|
className: cx(
|
|
2995
3247
|
"aura-table__td",
|
|
2996
3248
|
c.mono && "aura-table__mono",
|
|
3249
|
+
c.align === "end" && "is-end",
|
|
2997
3250
|
pin && "is-pinned",
|
|
2998
3251
|
pin && j === nPinned - 1 && "is-pin-edge"
|
|
2999
3252
|
),
|
|
@@ -3002,7 +3255,7 @@ var DataTable = React23.forwardRef(function DataTable2(props, ref) {
|
|
|
3002
3255
|
if (activeState[0].r !== ri || activeState[0].c !== ci) activeState[1]({ r: ri, c: ci });
|
|
3003
3256
|
}
|
|
3004
3257
|
},
|
|
3005
|
-
|
|
3258
|
+
j === 0 ? rowLinkWrap(r, cellContent(c, r)) : cellContent(c, r)
|
|
3006
3259
|
)
|
|
3007
3260
|
);
|
|
3008
3261
|
});
|
|
@@ -3031,13 +3284,21 @@ var DataTable = React23.forwardRef(function DataTable2(props, ref) {
|
|
|
3031
3284
|
);
|
|
3032
3285
|
vis.forEach(function(c, j) {
|
|
3033
3286
|
sk.push(
|
|
3034
|
-
/* @__PURE__ */ React23.createElement(
|
|
3287
|
+
/* @__PURE__ */ React23.createElement(
|
|
3035
3288
|
"span",
|
|
3036
3289
|
{
|
|
3037
|
-
|
|
3038
|
-
|
|
3039
|
-
|
|
3040
|
-
|
|
3290
|
+
key: c.key,
|
|
3291
|
+
className: cx("aura-table__td", c.align === "end" && "is-end", isPinned(c) && "is-pinned"),
|
|
3292
|
+
style: cellStyle(c, j)
|
|
3293
|
+
},
|
|
3294
|
+
/* @__PURE__ */ React23.createElement(
|
|
3295
|
+
"span",
|
|
3296
|
+
{
|
|
3297
|
+
className: cx("aura-skel", c.pill && "aura-skel--pill"),
|
|
3298
|
+
style: c.pill ? void 0 : { width: SKELETON_WIDTHS[(i + j) % SKELETON_WIDTHS.length] }
|
|
3299
|
+
}
|
|
3300
|
+
)
|
|
3301
|
+
)
|
|
3041
3302
|
);
|
|
3042
3303
|
});
|
|
3043
3304
|
sk.push(
|
|
@@ -3065,12 +3326,17 @@ var DataTable = React23.forwardRef(function DataTable2(props, ref) {
|
|
|
3065
3326
|
role: "row",
|
|
3066
3327
|
"aria-rowindex": first + i + 2,
|
|
3067
3328
|
"aria-selected": selectable ? isSel : void 0,
|
|
3068
|
-
className: cx(
|
|
3329
|
+
className: cx(
|
|
3330
|
+
"aura-table__row",
|
|
3331
|
+
isSel && "is-selected",
|
|
3332
|
+
(props.onRowActivate || rowHref) && "is-actionable"
|
|
3333
|
+
),
|
|
3069
3334
|
style: rowStyle,
|
|
3070
3335
|
onClick: function(e) {
|
|
3071
3336
|
const el = e.target;
|
|
3072
3337
|
if (el.closest && el.closest(".aura-check, button, a, input")) return;
|
|
3073
|
-
if (
|
|
3338
|
+
if (rowHref) followRow(e.currentTarget, e);
|
|
3339
|
+
else if (props.onRowActivate) props.onRowActivate(r);
|
|
3074
3340
|
}
|
|
3075
3341
|
},
|
|
3076
3342
|
rowCells(r, i, k, isSel)
|
|
@@ -3082,31 +3348,42 @@ var DataTable = React23.forwardRef(function DataTable2(props, ref) {
|
|
|
3082
3348
|
bodyRows.push(/* @__PURE__ */ React23.createElement("div", { key: "__bot", style: { height: (pageRows.length - end) * ROW_H + "px" }, "aria-hidden": true }));
|
|
3083
3349
|
}
|
|
3084
3350
|
let foot = null;
|
|
3085
|
-
|
|
3086
|
-
const
|
|
3087
|
-
|
|
3088
|
-
|
|
3089
|
-
|
|
3090
|
-
|
|
3091
|
-
|
|
3092
|
-
|
|
3093
|
-
|
|
3094
|
-
|
|
3095
|
-
|
|
3096
|
-
|
|
3097
|
-
|
|
3351
|
+
function pagerButton(dir) {
|
|
3352
|
+
const p = page + dir, off = busy || (dir < 0 ? page <= 1 : page >= pageCount), label = dir < 0 ? t.prevPage : t.nextPage, icon = dir < 0 ? "chevron-left" : "chevron-right";
|
|
3353
|
+
if (props.getPageHref && !off)
|
|
3354
|
+
return /* @__PURE__ */ React23.createElement(
|
|
3355
|
+
Link,
|
|
3356
|
+
{
|
|
3357
|
+
ref: dir < 0 ? prevLink : nextLink,
|
|
3358
|
+
href: props.getPageHref(p),
|
|
3359
|
+
className: "aura-icon-btn",
|
|
3360
|
+
"aria-label": label,
|
|
3361
|
+
onClick: function(e) {
|
|
3362
|
+
if (props.onPageChange) {
|
|
3363
|
+
e.preventDefault();
|
|
3364
|
+
pageState[1](p);
|
|
3365
|
+
}
|
|
3366
|
+
}
|
|
3367
|
+
},
|
|
3368
|
+
/* @__PURE__ */ React23.createElement(Icon, { name: icon })
|
|
3369
|
+
);
|
|
3370
|
+
return /* @__PURE__ */ React23.createElement(
|
|
3098
3371
|
IconButton,
|
|
3099
3372
|
{
|
|
3100
|
-
icon
|
|
3101
|
-
label
|
|
3102
|
-
disabled:
|
|
3373
|
+
icon,
|
|
3374
|
+
label,
|
|
3375
|
+
disabled: off,
|
|
3103
3376
|
onClick: function() {
|
|
3104
|
-
goPage(
|
|
3377
|
+
goPage(p);
|
|
3105
3378
|
}
|
|
3106
3379
|
}
|
|
3107
|
-
)
|
|
3380
|
+
);
|
|
3381
|
+
}
|
|
3382
|
+
if (pageSize && (rows.length || busy)) {
|
|
3383
|
+
const from = rows.length ? first + 1 : 0, to = manual ? first + rows.length : Math.min(first + pageSize, view.length);
|
|
3384
|
+
foot = /* @__PURE__ */ React23.createElement("div", { className: "aura-table__foot" }, /* @__PURE__ */ React23.createElement("span", { "aria-live": "polite" }, busy ? t.loading : t.range(from, to, shownTotal)), /* @__PURE__ */ React23.createElement("span", { className: "aura-table__pager" }, /* @__PURE__ */ React23.createElement("span", null, t.page(page, pageCount)), pagerButton(-1), pagerButton(1)));
|
|
3108
3385
|
} else if (height && rows.length && !loading) {
|
|
3109
|
-
foot = /* @__PURE__ */ React23.createElement("div", { className: "aura-table__foot" }, /* @__PURE__ */ React23.createElement("span", null, t.rowCount(
|
|
3386
|
+
foot = /* @__PURE__ */ React23.createElement("div", { className: "aura-table__foot" }, /* @__PURE__ */ React23.createElement("span", null, t.rowCount(shownTotal)), selectable && selected.length ? /* @__PURE__ */ React23.createElement("span", null, t.selectedCount(selected.length)) : /* @__PURE__ */ React23.createElement("span", null));
|
|
3110
3387
|
}
|
|
3111
3388
|
if (stacked) {
|
|
3112
3389
|
const titleCol = vis[0], pillCol = vis.filter(function(c) {
|
|
@@ -3127,25 +3404,28 @@ var DataTable = React23.forwardRef(function DataTable2(props, ref) {
|
|
|
3127
3404
|
const em2 = props.empty || {};
|
|
3128
3405
|
cardBody = /* @__PURE__ */ React23.createElement("div", { className: "aura-table__empty" }, /* @__PURE__ */ React23.createElement("div", null, /* @__PURE__ */ React23.createElement("span", { className: "aura-table__empty-icon" }, /* @__PURE__ */ React23.createElement(Icon, { name: em2.icon || "inbox", size: "lg" })), /* @__PURE__ */ React23.createElement("p", { className: "aura-table__empty-title" }, em2.title || t.empty), em2.description ? /* @__PURE__ */ React23.createElement("p", { className: "aura-table__empty-text" }, em2.description) : null, em2.action ? /* @__PURE__ */ React23.createElement("div", { className: "aura-table__empty-action" }, em2.action) : null));
|
|
3129
3406
|
} else {
|
|
3130
|
-
const cellVal =
|
|
3131
|
-
const v = r[c.key];
|
|
3132
|
-
return c.render ? c.render(r) : c.pill ? /* @__PURE__ */ React23.createElement(StatusPill, { ...{ tone: c.tones && c.tones[v] } }, v) : v;
|
|
3133
|
-
};
|
|
3407
|
+
const cellVal = cellContent;
|
|
3134
3408
|
cardBody = /* @__PURE__ */ React23.createElement("ul", { className: "aura-table__cards", "aria-label": props.label }, pageRows.map(function(r) {
|
|
3135
3409
|
const k = r[rowKey], isSel = !!selSet[k];
|
|
3136
3410
|
return /* @__PURE__ */ React23.createElement(
|
|
3137
3411
|
"li",
|
|
3138
3412
|
{
|
|
3139
3413
|
key: k,
|
|
3140
|
-
className: cx(
|
|
3141
|
-
|
|
3414
|
+
className: cx(
|
|
3415
|
+
"aura-table__card",
|
|
3416
|
+
isSel && "is-selected",
|
|
3417
|
+
(props.onRowActivate || rowHref) && "is-actionable"
|
|
3418
|
+
),
|
|
3419
|
+
tabIndex: props.onRowActivate && !rowHref ? 0 : void 0,
|
|
3142
3420
|
onClick: function(e) {
|
|
3143
3421
|
const el = e.target;
|
|
3144
3422
|
if (el.closest && el.closest(".aura-check, button, a, input")) return;
|
|
3145
|
-
if (
|
|
3423
|
+
if (rowHref) followRow(e.currentTarget, e);
|
|
3424
|
+
else if (props.onRowActivate) props.onRowActivate(r);
|
|
3146
3425
|
},
|
|
3147
3426
|
onKeyDown: function(e) {
|
|
3148
|
-
if (e.target === e.currentTarget && e.key === "Enter" && props.onRowActivate
|
|
3427
|
+
if (e.target === e.currentTarget && e.key === "Enter" && props.onRowActivate && !rowHref)
|
|
3428
|
+
props.onRowActivate(r);
|
|
3149
3429
|
}
|
|
3150
3430
|
},
|
|
3151
3431
|
/* @__PURE__ */ React23.createElement("div", { className: "aura-table__card-head" }, selectable ? /* @__PURE__ */ React23.createElement(
|
|
@@ -3157,7 +3437,7 @@ var DataTable = React23.forwardRef(function DataTable2(props, ref) {
|
|
|
3157
3437
|
toggle(k, on);
|
|
3158
3438
|
}
|
|
3159
3439
|
}
|
|
3160
|
-
) : null, /* @__PURE__ */ React23.createElement("span", { className: cx("aura-table__card-title", titleCol.mono && "aura-table__mono") }, cellVal(titleCol, r)), pillCol ? cellVal(pillCol, r) : null, actionCols.map(function(c) {
|
|
3440
|
+
) : null, /* @__PURE__ */ React23.createElement("span", { className: cx("aura-table__card-title", titleCol.mono && "aura-table__mono") }, rowLinkWrap(r, cellVal(titleCol, r))), pillCol ? cellVal(pillCol, r) : null, actionCols.map(function(c) {
|
|
3161
3441
|
return /* @__PURE__ */ React23.createElement("span", { key: c.key, className: "aura-table__card-actions" }, cellVal(c, r));
|
|
3162
3442
|
})),
|
|
3163
3443
|
rest.length ? /* @__PURE__ */ React23.createElement("dl", { className: "aura-table__card-fields" }, rest.map(function(c) {
|
|
@@ -3170,12 +3450,13 @@ var DataTable = React23.forwardRef(function DataTable2(props, ref) {
|
|
|
3170
3450
|
"div",
|
|
3171
3451
|
{
|
|
3172
3452
|
ref: wrapMerged,
|
|
3173
|
-
className: cx("aura-table aura-table--stacked", props.className),
|
|
3453
|
+
className: cx("aura-table aura-table--stacked", refreshing && "is-refreshing", props.className),
|
|
3174
3454
|
role: "region",
|
|
3175
3455
|
"aria-label": props.label,
|
|
3176
|
-
"aria-busy":
|
|
3456
|
+
"aria-busy": busy || void 0
|
|
3177
3457
|
},
|
|
3178
|
-
|
|
3458
|
+
refreshing ? /* @__PURE__ */ React23.createElement("span", { className: "aura-table__busy-bar", "aria-hidden": true }) : null,
|
|
3459
|
+
selectable && pageRows.length && !busy ? /* @__PURE__ */ React23.createElement("div", { className: "aura-table__stack-bar" }, /* @__PURE__ */ React23.createElement(
|
|
3179
3460
|
Checkbox,
|
|
3180
3461
|
{
|
|
3181
3462
|
checked: all,
|
|
@@ -3193,52 +3474,64 @@ var DataTable = React23.forwardRef(function DataTable2(props, ref) {
|
|
|
3193
3474
|
scrollPaddingTop: ROW_H + "px"
|
|
3194
3475
|
};
|
|
3195
3476
|
if (height) scrollStyle.height = height + "px";
|
|
3196
|
-
return /* @__PURE__ */ React23.createElement(
|
|
3477
|
+
return /* @__PURE__ */ React23.createElement(
|
|
3197
3478
|
"div",
|
|
3198
3479
|
{
|
|
3199
|
-
ref:
|
|
3200
|
-
|
|
3201
|
-
|
|
3480
|
+
ref: wrapMerged,
|
|
3481
|
+
className: cx("aura-table", scrolledX[0] && "is-scrolled-x", refreshing && "is-refreshing", props.className)
|
|
3482
|
+
},
|
|
3483
|
+
refreshing ? /* @__PURE__ */ React23.createElement("span", { className: "aura-table__busy-bar", "aria-hidden": true }) : null,
|
|
3484
|
+
/* @__PURE__ */ React23.createElement(
|
|
3485
|
+
"div",
|
|
3486
|
+
{
|
|
3487
|
+
ref: function(el) {
|
|
3488
|
+
scrollRef.current = el;
|
|
3489
|
+
gridRef.current = el;
|
|
3490
|
+
},
|
|
3491
|
+
className: "aura-table__scroll",
|
|
3492
|
+
style: scrollStyle,
|
|
3493
|
+
role: "grid",
|
|
3494
|
+
"aria-label": props.label,
|
|
3495
|
+
"aria-busy": busy || void 0,
|
|
3496
|
+
"aria-rowcount": loading ? -1 : shownTotal + 1,
|
|
3497
|
+
"aria-colcount": nCols,
|
|
3498
|
+
"aria-multiselectable": selectable || void 0,
|
|
3499
|
+
onKeyDown: onGridKey,
|
|
3500
|
+
onScroll: function(e) {
|
|
3501
|
+
const t2 = e.currentTarget;
|
|
3502
|
+
if (virtual && Math.abs(t2.scrollTop - scrollTop) >= ROW_H / 2) setScrollTop(t2.scrollTop);
|
|
3503
|
+
else if (virtual && (t2.scrollTop === 0 || t2.scrollTop + t2.clientHeight >= t2.scrollHeight - 1))
|
|
3504
|
+
setScrollTop(t2.scrollTop);
|
|
3505
|
+
const sx = t2.scrollLeft > 0;
|
|
3506
|
+
if (sx !== scrolledX[0]) scrolledX[1](sx);
|
|
3507
|
+
}
|
|
3202
3508
|
},
|
|
3203
|
-
className: "aura-
|
|
3204
|
-
|
|
3205
|
-
|
|
3206
|
-
|
|
3207
|
-
|
|
3208
|
-
|
|
3209
|
-
|
|
3210
|
-
|
|
3211
|
-
|
|
3212
|
-
|
|
3213
|
-
|
|
3214
|
-
|
|
3215
|
-
|
|
3216
|
-
setScrollTop(t2.scrollTop);
|
|
3217
|
-
const sx = t2.scrollLeft > 0;
|
|
3218
|
-
if (sx !== scrolledX[0]) scrolledX[1](sx);
|
|
3509
|
+
/* @__PURE__ */ React23.createElement("div", { className: "aura-table__head", role: "row", "aria-rowindex": 1, style: rowStyle }, head),
|
|
3510
|
+
body
|
|
3511
|
+
),
|
|
3512
|
+
busy ? /* @__PURE__ */ React23.createElement("span", { className: "aura-sr-only", role: "status" }, t.loadingRows) : null,
|
|
3513
|
+
controls ? /* @__PURE__ */ React23.createElement("div", { className: "aura-table__picker" }, /* @__PURE__ */ React23.createElement(
|
|
3514
|
+
IconButton,
|
|
3515
|
+
{
|
|
3516
|
+
icon: "columns-3",
|
|
3517
|
+
label: t.showHideColumns,
|
|
3518
|
+
"aria-haspopup": "menu",
|
|
3519
|
+
onClick: function(e) {
|
|
3520
|
+
openMenu("picker", null, e.currentTarget);
|
|
3521
|
+
}
|
|
3219
3522
|
}
|
|
3220
|
-
|
|
3221
|
-
|
|
3222
|
-
|
|
3223
|
-
|
|
3224
|
-
|
|
3225
|
-
|
|
3226
|
-
|
|
3227
|
-
|
|
3228
|
-
|
|
3229
|
-
onClick: function(e) {
|
|
3230
|
-
openMenu("picker", null, e.currentTarget);
|
|
3523
|
+
)) : null,
|
|
3524
|
+
foot,
|
|
3525
|
+
menu ? /* @__PURE__ */ React23.createElement(
|
|
3526
|
+
Menu,
|
|
3527
|
+
{
|
|
3528
|
+
anchor: menu.anchor,
|
|
3529
|
+
onClose: closeMenu,
|
|
3530
|
+
label: menu.kind === "picker" ? t.columns : t.column(byKey[menu.key] && byKey[menu.key].label),
|
|
3531
|
+
items: menu.kind === "picker" ? pickerItems() : byKey[menu.key] ? columnMenuItems(byKey[menu.key]) : []
|
|
3231
3532
|
}
|
|
3232
|
-
|
|
3233
|
-
)
|
|
3234
|
-
Menu,
|
|
3235
|
-
{
|
|
3236
|
-
anchor: menu.anchor,
|
|
3237
|
-
onClose: closeMenu,
|
|
3238
|
-
label: menu.kind === "picker" ? t.columns : t.column(byKey[menu.key] && byKey[menu.key].label),
|
|
3239
|
-
items: menu.kind === "picker" ? pickerItems() : byKey[menu.key] ? columnMenuItems(byKey[menu.key]) : []
|
|
3240
|
-
}
|
|
3241
|
-
) : null);
|
|
3533
|
+
) : null
|
|
3534
|
+
);
|
|
3242
3535
|
});
|
|
3243
3536
|
|
|
3244
3537
|
// src/Card.tsx
|
|
@@ -3351,43 +3644,150 @@ var Tabs = React25.forwardRef(function Tabs2(props, ref) {
|
|
|
3351
3644
|
|
|
3352
3645
|
// src/SideNav.tsx
|
|
3353
3646
|
var React26 = __toESM(require("react"), 1);
|
|
3647
|
+
function contains(it, id) {
|
|
3648
|
+
return !!id && !!it.children && it.children.some(function(c) {
|
|
3649
|
+
return c.id === id || contains(c, id);
|
|
3650
|
+
});
|
|
3651
|
+
}
|
|
3354
3652
|
var SideNav = React26.forwardRef(function SideNav2(props, ref) {
|
|
3355
3653
|
const t = useStrings();
|
|
3654
|
+
const Link = useLinkComponent(props.linkComponent);
|
|
3655
|
+
const base = uid();
|
|
3356
3656
|
const st = useMaybeControlled(
|
|
3357
3657
|
props.value,
|
|
3358
3658
|
props.defaultValue,
|
|
3359
3659
|
props.onChange
|
|
3360
3660
|
);
|
|
3361
|
-
|
|
3362
|
-
|
|
3363
|
-
|
|
3661
|
+
const active = st[0];
|
|
3662
|
+
const sections = props.sections || [{ items: props.items || [] }];
|
|
3663
|
+
const openState = React26.useState({}), toggled = openState[0], setToggled = openState[1];
|
|
3664
|
+
function isOpen(it) {
|
|
3665
|
+
if (toggled[it.id] != null) return toggled[it.id];
|
|
3666
|
+
return !!it.defaultOpen || contains(it, active);
|
|
3667
|
+
}
|
|
3668
|
+
React26.useEffect(
|
|
3669
|
+
function() {
|
|
3670
|
+
if (!active) return;
|
|
3671
|
+
const next = {};
|
|
3672
|
+
let changed = false;
|
|
3673
|
+
sections.forEach(function(s) {
|
|
3674
|
+
(function walk(list) {
|
|
3675
|
+
list.forEach(function(it) {
|
|
3676
|
+
if (it.children) {
|
|
3677
|
+
if (contains(it, active) && toggled[it.id] !== true) {
|
|
3678
|
+
next[it.id] = true;
|
|
3679
|
+
changed = true;
|
|
3680
|
+
}
|
|
3681
|
+
walk(it.children);
|
|
3682
|
+
}
|
|
3683
|
+
});
|
|
3684
|
+
})(s.items);
|
|
3685
|
+
});
|
|
3686
|
+
if (changed) setToggled(Object.assign({}, toggled, next));
|
|
3687
|
+
},
|
|
3688
|
+
[active]
|
|
3689
|
+
);
|
|
3690
|
+
const navRef = React26.useRef(null);
|
|
3691
|
+
function onKeyDown(e) {
|
|
3692
|
+
const k = e.key;
|
|
3693
|
+
if (k !== "ArrowDown" && k !== "ArrowUp" && k !== "Home" && k !== "End") return;
|
|
3694
|
+
const root = navRef.current;
|
|
3695
|
+
if (!root) return;
|
|
3696
|
+
const items = Array.prototype.slice.call(root.querySelectorAll(".aura-nav__item"));
|
|
3697
|
+
const visible = items.filter(function(el) {
|
|
3698
|
+
return el.offsetParent !== null || el === document.activeElement;
|
|
3699
|
+
});
|
|
3700
|
+
const i = visible.indexOf(document.activeElement);
|
|
3701
|
+
if (i < 0) return;
|
|
3702
|
+
e.preventDefault();
|
|
3703
|
+
const j = k === "Home" ? 0 : k === "End" ? visible.length - 1 : Math.max(0, Math.min(visible.length - 1, i + (k === "ArrowDown" ? 1 : -1)));
|
|
3704
|
+
visible[j].focus();
|
|
3705
|
+
}
|
|
3706
|
+
function inner(it, group, open) {
|
|
3707
|
+
return [
|
|
3364
3708
|
it.icon ? /* @__PURE__ */ React26.createElement(Icon, { key: "i", name: it.icon }) : null,
|
|
3365
3709
|
/* @__PURE__ */ React26.createElement("span", { key: "l", className: "aura-nav__label" }, it.label),
|
|
3366
|
-
it.
|
|
3710
|
+
it.badge != null ? /* @__PURE__ */ React26.createElement("span", { key: "b", className: "aura-nav__badge" }, it.badge) : null,
|
|
3711
|
+
it.count != null ? /* @__PURE__ */ React26.createElement("span", { key: "c", className: "aura-nav__count" }, it.count) : null,
|
|
3712
|
+
group ? /* @__PURE__ */ React26.createElement(Icon, { key: "g", name: "chevron-down", className: cx("aura-nav__chevron", open && "is-open") }) : null
|
|
3367
3713
|
];
|
|
3714
|
+
}
|
|
3715
|
+
function item(it, depth) {
|
|
3716
|
+
if (it.children) {
|
|
3717
|
+
const open = isOpen(it);
|
|
3718
|
+
const listId = base + "-" + it.id;
|
|
3719
|
+
const holdsActive = contains(it, active);
|
|
3720
|
+
return /* @__PURE__ */ React26.createElement("li", { key: it.id, className: "aura-nav__group" }, /* @__PURE__ */ React26.createElement(
|
|
3721
|
+
"button",
|
|
3722
|
+
{
|
|
3723
|
+
type: "button",
|
|
3724
|
+
className: cx("aura-nav__item", "aura-nav__item--group", holdsActive && "has-active"),
|
|
3725
|
+
"aria-expanded": open,
|
|
3726
|
+
"aria-controls": listId,
|
|
3727
|
+
style: depth ? { ["--aura-nav-depth"]: depth } : void 0,
|
|
3728
|
+
onClick: function() {
|
|
3729
|
+
const next = Object.assign({}, toggled);
|
|
3730
|
+
next[it.id] = !open;
|
|
3731
|
+
setToggled(next);
|
|
3732
|
+
},
|
|
3733
|
+
onKeyDown: function(e) {
|
|
3734
|
+
if (e.key === "ArrowRight" && !open) {
|
|
3735
|
+
e.preventDefault();
|
|
3736
|
+
setToggled(Object.assign({}, toggled, { [it.id]: true }));
|
|
3737
|
+
} else if (e.key === "ArrowLeft" && open) {
|
|
3738
|
+
e.preventDefault();
|
|
3739
|
+
setToggled(Object.assign({}, toggled, { [it.id]: false }));
|
|
3740
|
+
}
|
|
3741
|
+
}
|
|
3742
|
+
},
|
|
3743
|
+
inner(it, true, open)
|
|
3744
|
+
), /* @__PURE__ */ React26.createElement("ul", { id: listId, className: "aura-nav__list aura-nav__sub", hidden: !open }, it.children.map(function(c) {
|
|
3745
|
+
return item(c, depth + 1);
|
|
3746
|
+
})));
|
|
3747
|
+
}
|
|
3748
|
+
const on = active === it.id;
|
|
3368
3749
|
const common = {
|
|
3369
3750
|
className: cx("aura-nav__item", on && "is-active"),
|
|
3370
3751
|
"aria-current": on ? "page" : void 0,
|
|
3752
|
+
style: depth ? { ["--aura-nav-depth"]: depth } : void 0,
|
|
3371
3753
|
onClick: function(e) {
|
|
3372
3754
|
if (!it.href) e.preventDefault();
|
|
3373
3755
|
st[1](it.id);
|
|
3374
3756
|
}
|
|
3375
3757
|
};
|
|
3376
|
-
return /* @__PURE__ */ React26.createElement("li", { key: it.id }, it.href ? /* @__PURE__ */ React26.createElement(
|
|
3758
|
+
return /* @__PURE__ */ React26.createElement("li", { key: it.id }, it.href ? /* @__PURE__ */ React26.createElement(Link, { href: it.href, ...common }, inner(it, false, false)) : /* @__PURE__ */ React26.createElement("button", { type: "button", ...common }, inner(it, false, false)));
|
|
3377
3759
|
}
|
|
3378
|
-
return /* @__PURE__ */ React26.createElement(
|
|
3379
|
-
|
|
3380
|
-
|
|
3760
|
+
return /* @__PURE__ */ React26.createElement(
|
|
3761
|
+
"nav",
|
|
3762
|
+
{
|
|
3763
|
+
ref: function(el) {
|
|
3764
|
+
navRef.current = el;
|
|
3765
|
+
if (typeof ref === "function") ref(el);
|
|
3766
|
+
else if (ref) ref.current = el;
|
|
3767
|
+
},
|
|
3768
|
+
className: cx("aura-nav", props.className),
|
|
3769
|
+
"aria-label": props.label || t.mainNav,
|
|
3770
|
+
onKeyDown
|
|
3771
|
+
},
|
|
3772
|
+
props.header ? /* @__PURE__ */ React26.createElement("div", { className: "aura-nav__header" }, props.header) : null,
|
|
3773
|
+
/* @__PURE__ */ React26.createElement("div", { className: "aura-nav__scroll" }, sections.map(function(s, i) {
|
|
3774
|
+
return /* @__PURE__ */ React26.createElement("div", { key: i, className: "aura-nav__section" }, s.title ? /* @__PURE__ */ React26.createElement("p", { className: "aura-nav__title" }, s.title) : null, /* @__PURE__ */ React26.createElement("ul", { className: "aura-nav__list" }, s.items.map(function(it) {
|
|
3775
|
+
return item(it, 0);
|
|
3776
|
+
})));
|
|
3777
|
+
})),
|
|
3778
|
+
props.footer ? /* @__PURE__ */ React26.createElement("div", { className: "aura-nav__footer" }, props.footer) : null
|
|
3779
|
+
);
|
|
3381
3780
|
});
|
|
3382
3781
|
|
|
3383
3782
|
// src/Breadcrumb.tsx
|
|
3384
3783
|
var React27 = __toESM(require("react"), 1);
|
|
3385
3784
|
var Breadcrumb = React27.forwardRef(function Breadcrumb2(props, ref) {
|
|
3386
3785
|
const t = useStrings();
|
|
3786
|
+
const Link = useLinkComponent();
|
|
3387
3787
|
const items = props.items || [];
|
|
3388
3788
|
return /* @__PURE__ */ React27.createElement("nav", { ref, "aria-label": props.label || t.breadcrumb, className: cx("aura-crumbs", props.className) }, /* @__PURE__ */ React27.createElement("ol", null, items.map(function(it, i) {
|
|
3389
3789
|
const last = i === items.length - 1;
|
|
3390
|
-
return /* @__PURE__ */ React27.createElement("li", { key: i }, last ? /* @__PURE__ */ React27.createElement("span", { "aria-current": "page", className: "aura-crumbs__current" }, it.label) : it.href ? /* @__PURE__ */ React27.createElement(
|
|
3790
|
+
return /* @__PURE__ */ React27.createElement("li", { key: i }, last ? /* @__PURE__ */ React27.createElement("span", { "aria-current": "page", className: "aura-crumbs__current" }, it.label) : it.href ? /* @__PURE__ */ React27.createElement(Link, { href: it.href, onClick: it.onClick }, it.label) : /* @__PURE__ */ React27.createElement("button", { type: "button", onClick: it.onClick }, it.label), last ? null : /* @__PURE__ */ React27.createElement(Icon, { name: "chevron-right", size: 12, className: "aura-crumbs__sep" }));
|
|
3391
3791
|
})));
|
|
3392
3792
|
});
|
|
3393
3793
|
|
|
@@ -3598,8 +3998,11 @@ var Stat = React35.forwardRef(function Stat2(props, ref) {
|
|
|
3598
3998
|
const ch = props.change;
|
|
3599
3999
|
const dir = ch && (ch.direction || "flat");
|
|
3600
4000
|
const tone2 = ch && (ch.tone || (dir === "up" ? "positive" : dir === "down" ? "negative" : "neutral"));
|
|
3601
|
-
const
|
|
3602
|
-
const
|
|
4001
|
+
const Link = useLinkComponent();
|
|
4002
|
+
const v = props.value;
|
|
4003
|
+
const numeric = typeof v === "number" || typeof v === "string" && /\d/.test(v) && /^[\s\d.,:+\-\u2212%()\u0E3F$\u20AC\u00A3\u00A5kKmMbB]+$/.test(v.replace(/\b[A-Z]{3}\b/g, ""));
|
|
4004
|
+
const Tag3 = props.href ? Link : props.onClick ? "button" : "div";
|
|
4005
|
+
const interactive = !!(props.href || props.onClick);
|
|
3603
4006
|
return /* @__PURE__ */ React35.createElement(
|
|
3604
4007
|
Tag3,
|
|
3605
4008
|
{
|
|
@@ -3611,7 +4014,7 @@ var Stat = React35.forwardRef(function Stat2(props, ref) {
|
|
|
3611
4014
|
"aria-busy": props.loading || void 0
|
|
3612
4015
|
},
|
|
3613
4016
|
/* @__PURE__ */ React35.createElement("span", { className: "aura-stat__head" }, /* @__PURE__ */ React35.createElement("span", { className: "aura-stat__label" }, props.label), props.icon ? /* @__PURE__ */ React35.createElement("span", { className: "aura-stat__icon" }, /* @__PURE__ */ React35.createElement(Icon, { name: props.icon })) : null),
|
|
3614
|
-
props.loading ? /* @__PURE__ */ React35.createElement("span", { className: "aura-stat__value" }, /* @__PURE__ */ React35.createElement("span", { className: "aura-skel aura-stat__skel" })) : /* @__PURE__ */ React35.createElement("span", { className: "aura-stat__value" }, props.value, props.unit ? /* @__PURE__ */ React35.createElement("span", { className: "aura-stat__unit" }, props.unit) : null),
|
|
4017
|
+
props.loading ? /* @__PURE__ */ React35.createElement("span", { className: "aura-stat__value" }, /* @__PURE__ */ React35.createElement("span", { className: "aura-skel aura-stat__skel" })) : /* @__PURE__ */ React35.createElement("span", { className: cx("aura-stat__value", numeric && "is-numeric") }, props.value, props.unit ? /* @__PURE__ */ React35.createElement("span", { className: "aura-stat__unit" }, props.unit) : null),
|
|
3615
4018
|
ch && !props.loading || props.caption ? /* @__PURE__ */ React35.createElement("span", { className: "aura-stat__foot" }, ch && !props.loading ? /* @__PURE__ */ React35.createElement("span", { className: cx("aura-stat__change", "is-" + tone2) }, /* @__PURE__ */ React35.createElement(Icon, { name: dir === "up" ? "trending-up" : dir === "down" ? "trending-down" : "minus", size: 14 }), /* @__PURE__ */ React35.createElement("span", null, ch.value)) : null, ch && ch.label && !props.loading ? /* @__PURE__ */ React35.createElement("span", { className: "aura-stat__caption" }, ch.label) : null, props.caption ? /* @__PURE__ */ React35.createElement("span", { className: "aura-stat__caption" }, props.caption) : null) : null
|
|
3616
4019
|
);
|
|
3617
4020
|
});
|
|
@@ -4229,6 +4632,20 @@ function fit(hex, grounds, target, dir) {
|
|
|
4229
4632
|
}
|
|
4230
4633
|
return c;
|
|
4231
4634
|
}
|
|
4635
|
+
function atLuminance(hex, Y) {
|
|
4636
|
+
const o = rgbToOklch(hexToRgb(hex)), C = Math.max(o[1], 0.02);
|
|
4637
|
+
let lo = 0, hi = 1, c = hex;
|
|
4638
|
+
for (let i = 0; i < 30; i++) {
|
|
4639
|
+
const mid = (lo + hi) / 2;
|
|
4640
|
+
c = oklchToHex(mid, C, o[2]);
|
|
4641
|
+
if (luminance(c) < Y) lo = mid;
|
|
4642
|
+
else hi = mid;
|
|
4643
|
+
}
|
|
4644
|
+
return c;
|
|
4645
|
+
}
|
|
4646
|
+
var CHART_Y = { light: 0.075, dark: 0.46 };
|
|
4647
|
+
var SEQ_Y = { light: [0.26, 0.165, 0.1, 0.055, 0.028], dark: [0.14, 0.22, 0.34, 0.5, 0.7] };
|
|
4648
|
+
var CHART_2 = "#0a8b7a";
|
|
4232
4649
|
var ZINC = { 0: "#ffffff", 50: "#fafafa", 100: "#f4f4f5", 800: "#27272a", 900: "#18181b", 950: "#09090b" };
|
|
4233
4650
|
var INK = "#18181b";
|
|
4234
4651
|
function createTheme(opts) {
|
|
@@ -4247,6 +4664,14 @@ function createTheme(opts) {
|
|
|
4247
4664
|
L["alert-info-fg"] = fit(b[800], [b[50]], 4.5, -1);
|
|
4248
4665
|
L["alert-info-border"] = b[200];
|
|
4249
4666
|
L["mesh-from"] = b[400];
|
|
4667
|
+
L["chart-1"] = atLuminance(o.brand, CHART_Y.light);
|
|
4668
|
+
D["chart-1"] = atLuminance(o.brand, CHART_Y.dark);
|
|
4669
|
+
SEQ_Y.light.forEach(function(y, i) {
|
|
4670
|
+
L["chart-seq-" + (i + 1)] = atLuminance(o.brand, y);
|
|
4671
|
+
});
|
|
4672
|
+
SEQ_Y.dark.forEach(function(y, i) {
|
|
4673
|
+
D["chart-seq-" + (i + 1)] = atLuminance(o.brand, y);
|
|
4674
|
+
});
|
|
4250
4675
|
D["fg-accent"] = fit(b[300], darkGrounds, 4.5, 1);
|
|
4251
4676
|
D["accent-violet"] = fit(b[400], darkGrounds, 3, 1);
|
|
4252
4677
|
D["focus-ring"] = fit(b[400], darkGrounds, 3, 1);
|
|
@@ -4254,8 +4679,8 @@ function createTheme(opts) {
|
|
|
4254
4679
|
D["alert-info-bg"] = D["bg-selected"];
|
|
4255
4680
|
D["alert-info-fg"] = fit(b[300], [D["alert-info-bg"]], 4.5, 1);
|
|
4256
4681
|
D["alert-info-border"] = mix(ZINC[900], b[400], 0.4);
|
|
4257
|
-
D["status-progress-bg"] = b[
|
|
4258
|
-
D["status-progress-fg"] =
|
|
4682
|
+
D["status-progress-bg"] = mix(ZINC[900], b[500], 0.2);
|
|
4683
|
+
D["status-progress-fg"] = fit(b[300], [D["status-progress-bg"]], 4.5, 1);
|
|
4259
4684
|
if (s) {
|
|
4260
4685
|
L["accent-dot"] = s[200];
|
|
4261
4686
|
L["accent-lime"] = s[200];
|
|
@@ -4306,9 +4731,23 @@ function createTheme(opts) {
|
|
|
4306
4731
|
check("dark", "fg-accent", g[0], 4.5, D["fg-accent"], g[1]);
|
|
4307
4732
|
check("dark", "focus-ring", g[0], 3, D["focus-ring"], g[1]);
|
|
4308
4733
|
});
|
|
4734
|
+
[
|
|
4735
|
+
["light", ZINC[0], L],
|
|
4736
|
+
["light", ZINC[50], L],
|
|
4737
|
+
["dark", ZINC[900], D],
|
|
4738
|
+
["dark", ZINC[950], D]
|
|
4739
|
+
].forEach(function(g) {
|
|
4740
|
+
const t = g[0], ground = g[1], m = g[2], name = ground === ZINC[0] || ground === ZINC[900] ? "bg-surface" : "bg-canvas";
|
|
4741
|
+
["chart-1", "chart-seq-1", "chart-seq-5"].forEach(function(k) {
|
|
4742
|
+
check(t, k, name, 3, m[k], ground);
|
|
4743
|
+
});
|
|
4744
|
+
});
|
|
4745
|
+
check("light", "chart-1", "chart-2 (lightness step)", 1.8, L["chart-1"], CHART_2);
|
|
4746
|
+
check("dark", "chart-1", "chart-2 (lightness step)", 1.8, D["chart-1"], CHART_2);
|
|
4309
4747
|
check("light", "fg-primary", "bg-selected", 4.5, INK, L["bg-selected"]);
|
|
4310
4748
|
check("dark", "fg-primary", "bg-selected", 4.5, "#ffffff", D["bg-selected"]);
|
|
4311
4749
|
check("light", "status-progress-fg", "status-progress-bg", 4.5, L["status-progress-fg"], L["status-progress-bg"]);
|
|
4750
|
+
check("dark", "status-progress-fg", "status-progress-bg", 4.5, D["status-progress-fg"], D["status-progress-bg"]);
|
|
4312
4751
|
check("light", "alert-info-fg", "alert-info-bg", 4.5, L["alert-info-fg"], L["alert-info-bg"]);
|
|
4313
4752
|
check("dark", "alert-info-fg", "alert-info-bg", 4.5, D["alert-info-fg"], D["alert-info-bg"]);
|
|
4314
4753
|
if (o.primary === "brand") {
|
|
@@ -4385,7 +4824,14 @@ function colorSchemeScript(options) {
|
|
|
4385
4824
|
return "(function(){try{var s=localStorage.getItem(" + key + ");if(s!=='light'&&s!=='dark'&&s!=='system')s=" + fallback + `;var d=document.documentElement;d.setAttribute("data-theme",s);var dark=s==='dark'||(s==='system'&&window.matchMedia('(prefers-color-scheme: dark)').matches);d.classList.toggle("dark",dark);}catch(e){}})();`;
|
|
4386
4825
|
}
|
|
4387
4826
|
function ColorSchemeScript(props) {
|
|
4388
|
-
return /* @__PURE__ */ React39.createElement(
|
|
4827
|
+
return /* @__PURE__ */ React39.createElement(
|
|
4828
|
+
"script",
|
|
4829
|
+
{
|
|
4830
|
+
"data-aura-color-scheme": "",
|
|
4831
|
+
nonce: props.nonce,
|
|
4832
|
+
dangerouslySetInnerHTML: { __html: colorSchemeScript(props) }
|
|
4833
|
+
}
|
|
4834
|
+
);
|
|
4389
4835
|
}
|
|
4390
4836
|
function systemDark() {
|
|
4391
4837
|
return typeof window !== "undefined" && !!window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches;
|
|
@@ -4638,6 +5084,7 @@ var Pagination = React45.forwardRef(function Pagination2(props, ref) {
|
|
|
4638
5084
|
if (p >= 1 && p <= count && p !== page) st[1](p);
|
|
4639
5085
|
}
|
|
4640
5086
|
const link = props.getHref;
|
|
5087
|
+
const Link = useLinkComponent();
|
|
4641
5088
|
function item(p, label, extra) {
|
|
4642
5089
|
const common = Object.assign(
|
|
4643
5090
|
{
|
|
@@ -4648,7 +5095,7 @@ var Pagination = React45.forwardRef(function Pagination2(props, ref) {
|
|
|
4648
5095
|
extra
|
|
4649
5096
|
);
|
|
4650
5097
|
return link ? /* @__PURE__ */ React45.createElement(
|
|
4651
|
-
|
|
5098
|
+
Link,
|
|
4652
5099
|
{
|
|
4653
5100
|
href: link(p),
|
|
4654
5101
|
onClick: function(e) {
|