@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/aura.bundle.js
CHANGED
|
@@ -216,9 +216,20 @@ window.Aura = (() => {
|
|
|
216
216
|
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" }]] };
|
|
217
217
|
var SIZES = { sm: 16, md: 20, lg: 24 };
|
|
218
218
|
var Icon = React2.forwardRef(function Icon2(props, ref) {
|
|
219
|
+
const size = SIZES[props.size] || props.size || 16;
|
|
220
|
+
if (React2.isValidElement(props.name)) {
|
|
221
|
+
return /* @__PURE__ */ React2.createElement(
|
|
222
|
+
"span",
|
|
223
|
+
{
|
|
224
|
+
className: cx("aura-icon", "aura-icon--custom", props.className),
|
|
225
|
+
style: { width: size, height: size, ["--aura-icon-stroke"]: props.strokeWidth || 2 },
|
|
226
|
+
...props.label ? { role: "img", "aria-label": props.label } : { "aria-hidden": true }
|
|
227
|
+
},
|
|
228
|
+
props.name
|
|
229
|
+
);
|
|
230
|
+
}
|
|
219
231
|
const shapes = ICONS[props.name];
|
|
220
232
|
if (!shapes) return null;
|
|
221
|
-
const size = SIZES[props.size] || props.size || 16;
|
|
222
233
|
const a11y = props.label ? { role: "img", "aria-label": props.label } : { "aria-hidden": true, focusable: "false" };
|
|
223
234
|
return /* @__PURE__ */ React2.createElement(
|
|
224
235
|
"svg",
|
|
@@ -246,307 +257,16 @@ window.Aura = (() => {
|
|
|
246
257
|
var iconNames = Object.keys(ICONS);
|
|
247
258
|
|
|
248
259
|
// src/Button.tsx
|
|
249
|
-
var React3 = __toESM(require_react(), 1);
|
|
250
|
-
function ButtonLink(props, ref) {
|
|
251
|
-
const variant = props.variant || "primary";
|
|
252
|
-
const disabled = !!props.disabled;
|
|
253
|
-
const rest = omit(props, [
|
|
254
|
-
"variant",
|
|
255
|
-
"className",
|
|
256
|
-
"children",
|
|
257
|
-
"icon",
|
|
258
|
-
"iconRight",
|
|
259
|
-
"disabled",
|
|
260
|
-
"linkComponent",
|
|
261
|
-
"href"
|
|
262
|
-
]);
|
|
263
|
-
const Tag3 = !disabled && props.linkComponent ? props.linkComponent : "a";
|
|
264
|
-
return /* @__PURE__ */ React3.createElement(
|
|
265
|
-
Tag3,
|
|
266
|
-
{
|
|
267
|
-
...rest,
|
|
268
|
-
ref,
|
|
269
|
-
href: disabled ? void 0 : props.href,
|
|
270
|
-
role: disabled ? "link" : void 0,
|
|
271
|
-
"aria-disabled": disabled || void 0,
|
|
272
|
-
tabIndex: disabled ? -1 : props.tabIndex,
|
|
273
|
-
className: cx("aura-btn", "aura-btn--" + variant, props.className),
|
|
274
|
-
onClick: disabled ? void 0 : props.onClick
|
|
275
|
-
},
|
|
276
|
-
props.icon ? /* @__PURE__ */ React3.createElement(Icon, { name: props.icon }) : null,
|
|
277
|
-
props.children,
|
|
278
|
-
props.iconRight ? /* @__PURE__ */ React3.createElement(Icon, { name: props.iconRight }) : null
|
|
279
|
-
);
|
|
280
|
-
}
|
|
281
|
-
var Button = React3.forwardRef(
|
|
282
|
-
function Button2(all, ref) {
|
|
283
|
-
if (typeof all.href === "string") {
|
|
284
|
-
return ButtonLink(all, ref);
|
|
285
|
-
}
|
|
286
|
-
const props = all;
|
|
287
|
-
const variant = props.variant || "primary";
|
|
288
|
-
const loading = !!props.loading;
|
|
289
|
-
const rest = omit(props, ["variant", "className", "children", "type", "icon", "iconRight", "loading", "onClick"]);
|
|
290
|
-
return /* @__PURE__ */ React3.createElement(
|
|
291
|
-
"button",
|
|
292
|
-
{
|
|
293
|
-
...rest,
|
|
294
|
-
ref,
|
|
295
|
-
type: props.type || "button",
|
|
296
|
-
className: cx("aura-btn", "aura-btn--" + variant, loading && "is-loading", props.className),
|
|
297
|
-
"aria-busy": loading || void 0,
|
|
298
|
-
"aria-disabled": loading || void 0,
|
|
299
|
-
onClick: loading ? function(e) {
|
|
300
|
-
e.preventDefault();
|
|
301
|
-
} : props.onClick
|
|
302
|
-
},
|
|
303
|
-
loading ? /* @__PURE__ */ React3.createElement(Icon, { name: "loader-circle", className: "aura-spin" }) : props.icon ? /* @__PURE__ */ React3.createElement(Icon, { name: props.icon }) : null,
|
|
304
|
-
props.children,
|
|
305
|
-
props.iconRight && !loading ? /* @__PURE__ */ React3.createElement(Icon, { name: props.iconRight }) : null
|
|
306
|
-
);
|
|
307
|
-
}
|
|
308
|
-
);
|
|
309
|
-
|
|
310
|
-
// src/IconButton.tsx
|
|
311
260
|
var React4 = __toESM(require_react(), 1);
|
|
312
|
-
var IconButton = React4.forwardRef(function IconButton2(props, ref) {
|
|
313
|
-
const rest = omit(props, ["icon", "label", "className", "size"]);
|
|
314
|
-
return /* @__PURE__ */ React4.createElement(
|
|
315
|
-
"button",
|
|
316
|
-
{
|
|
317
|
-
...rest,
|
|
318
|
-
ref,
|
|
319
|
-
type: props.type || "button",
|
|
320
|
-
"aria-label": props.label,
|
|
321
|
-
title: props.label,
|
|
322
|
-
className: cx("aura-icon-btn", props.className)
|
|
323
|
-
},
|
|
324
|
-
/* @__PURE__ */ React4.createElement(Icon, { name: props.icon, size: props.size || "sm" })
|
|
325
|
-
);
|
|
326
|
-
});
|
|
327
|
-
|
|
328
|
-
// src/Menu.tsx
|
|
329
|
-
var React5 = __toESM(require_react(), 1);
|
|
330
|
-
var import_react_dom = __toESM(require_react_dom(), 1);
|
|
331
|
-
var Menu = React5.forwardRef(function Menu2(props, ref) {
|
|
332
|
-
const own = React5.useRef(null), merged = useMergedRef(ref, own);
|
|
333
|
-
const posState = React5.useState(null);
|
|
334
|
-
const pos = posState[0], setPos = posState[1];
|
|
335
|
-
const items = props.items || [];
|
|
336
|
-
const mounted = useMounted();
|
|
337
|
-
useIsoLayoutEffect(
|
|
338
|
-
function() {
|
|
339
|
-
const a = props.anchor, m = own.current;
|
|
340
|
-
if (!a || !m) return;
|
|
341
|
-
const r = a.getBoundingClientRect(), mh = m.offsetHeight, mw = m.offsetWidth;
|
|
342
|
-
let top = r.bottom + 4;
|
|
343
|
-
if (top + mh > window.innerHeight - 8 && r.top - mh - 4 > 8) top = r.top - mh - 4;
|
|
344
|
-
const left = Math.max(8, Math.min(r.right - mw, window.innerWidth - mw - 8));
|
|
345
|
-
setPos({ top, left });
|
|
346
|
-
},
|
|
347
|
-
[props.anchor, mounted]
|
|
348
|
-
);
|
|
349
|
-
React5.useEffect(
|
|
350
|
-
function() {
|
|
351
|
-
if (!mounted) return;
|
|
352
|
-
const first = own.current && own.current.querySelector('[role^="menuitem"]:not([disabled])');
|
|
353
|
-
if (first && props.autoFocus !== false) first.focus();
|
|
354
|
-
function outside(e) {
|
|
355
|
-
if (own.current && !own.current.contains(e.target) && !(props.anchor && props.anchor.contains(e.target)))
|
|
356
|
-
props.onClose(false);
|
|
357
|
-
}
|
|
358
|
-
function onScroll(e) {
|
|
359
|
-
if (own.current && !own.current.contains(e.target)) props.onClose(false);
|
|
360
|
-
}
|
|
361
|
-
document.addEventListener("pointerdown", outside, true);
|
|
362
|
-
window.addEventListener("scroll", onScroll, true);
|
|
363
|
-
window.addEventListener("resize", onScroll);
|
|
364
|
-
return function() {
|
|
365
|
-
document.removeEventListener("pointerdown", outside, true);
|
|
366
|
-
window.removeEventListener("scroll", onScroll, true);
|
|
367
|
-
window.removeEventListener("resize", onScroll);
|
|
368
|
-
};
|
|
369
|
-
},
|
|
370
|
-
[mounted]
|
|
371
|
-
);
|
|
372
|
-
function onKeyDown(e) {
|
|
373
|
-
const list = Array.prototype.slice.call(
|
|
374
|
-
own.current.querySelectorAll('[role^="menuitem"]:not([disabled])')
|
|
375
|
-
);
|
|
376
|
-
const i = list.indexOf(document.activeElement);
|
|
377
|
-
if (e.key === "ArrowDown") {
|
|
378
|
-
e.preventDefault();
|
|
379
|
-
list[(i + 1) % list.length].focus();
|
|
380
|
-
} else if (e.key === "ArrowUp") {
|
|
381
|
-
e.preventDefault();
|
|
382
|
-
list[(i - 1 + list.length) % list.length].focus();
|
|
383
|
-
} else if (e.key === "Home") {
|
|
384
|
-
e.preventDefault();
|
|
385
|
-
list[0].focus();
|
|
386
|
-
} else if (e.key === "End") {
|
|
387
|
-
e.preventDefault();
|
|
388
|
-
list[list.length - 1].focus();
|
|
389
|
-
} else if (e.key === "Escape") {
|
|
390
|
-
e.preventDefault();
|
|
391
|
-
props.onClose(true);
|
|
392
|
-
} else if (e.key === "Tab") {
|
|
393
|
-
props.onClose(true);
|
|
394
|
-
}
|
|
395
|
-
e.stopPropagation();
|
|
396
|
-
}
|
|
397
|
-
const el = /* @__PURE__ */ React5.createElement(
|
|
398
|
-
"div",
|
|
399
|
-
{
|
|
400
|
-
ref: merged,
|
|
401
|
-
role: "menu",
|
|
402
|
-
"aria-label": props.label,
|
|
403
|
-
className: "aura-menu",
|
|
404
|
-
onKeyDown,
|
|
405
|
-
style: { top: pos ? pos.top : -9999, left: pos ? pos.left : -9999 }
|
|
406
|
-
},
|
|
407
|
-
items.map(function(it, i) {
|
|
408
|
-
if (it.separator) return /* @__PURE__ */ React5.createElement("div", { key: "s" + i, role: "separator", className: "aura-menu__sep" });
|
|
409
|
-
const isCheck = it.checked !== void 0;
|
|
410
|
-
return /* @__PURE__ */ React5.createElement(
|
|
411
|
-
"button",
|
|
412
|
-
{
|
|
413
|
-
key: i,
|
|
414
|
-
type: "button",
|
|
415
|
-
tabIndex: -1,
|
|
416
|
-
disabled: it.disabled,
|
|
417
|
-
role: isCheck ? "menuitemcheckbox" : "menuitem",
|
|
418
|
-
"aria-checked": isCheck ? !!it.checked : void 0,
|
|
419
|
-
className: "aura-menu__item",
|
|
420
|
-
onClick: function() {
|
|
421
|
-
it.onSelect();
|
|
422
|
-
if (!it.keepOpen) props.onClose(true);
|
|
423
|
-
}
|
|
424
|
-
},
|
|
425
|
-
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" }),
|
|
426
|
-
/* @__PURE__ */ React5.createElement("span", { className: "aura-menu__label" }, it.label),
|
|
427
|
-
it.hint ? /* @__PURE__ */ React5.createElement("span", { className: "aura-menu__hint" }, it.hint) : null
|
|
428
|
-
);
|
|
429
|
-
})
|
|
430
|
-
);
|
|
431
|
-
return mounted ? (0, import_react_dom.createPortal)(el, document.body) : null;
|
|
432
|
-
});
|
|
433
|
-
|
|
434
|
-
// src/DropdownMenu.tsx
|
|
435
|
-
var React6 = __toESM(require_react(), 1);
|
|
436
|
-
var DropdownMenu = React6.forwardRef(function DropdownMenu2(props, ref) {
|
|
437
|
-
const st = React6.useState(null), anchor = st[0], setAnchor = st[1];
|
|
438
|
-
const wrap = React6.useRef(null), wrapMerged = useMergedRef(ref, wrap);
|
|
439
|
-
const child = React6.Children.only(props.trigger);
|
|
440
|
-
function toggle(e) {
|
|
441
|
-
if (child.props.onClick) child.props.onClick(e);
|
|
442
|
-
const el = wrap.current && (wrap.current.querySelector('button, [role="button"], a') || wrap.current);
|
|
443
|
-
setAnchor(anchor ? null : el);
|
|
444
|
-
}
|
|
445
|
-
function onKeyDown(e) {
|
|
446
|
-
if ((e.key === "ArrowDown" || e.key === "ArrowUp") && !anchor) {
|
|
447
|
-
e.preventDefault();
|
|
448
|
-
setAnchor(wrap.current.querySelector('button, [role="button"], a') || wrap.current);
|
|
449
|
-
}
|
|
450
|
-
}
|
|
451
|
-
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(
|
|
452
|
-
Menu,
|
|
453
|
-
{
|
|
454
|
-
anchor,
|
|
455
|
-
label: props.label,
|
|
456
|
-
items: props.items,
|
|
457
|
-
onClose: function(restore) {
|
|
458
|
-
setAnchor(null);
|
|
459
|
-
if (restore && typeof anchor.focus === "function") anchor.focus();
|
|
460
|
-
}
|
|
461
|
-
}
|
|
462
|
-
) : null);
|
|
463
|
-
});
|
|
464
|
-
|
|
465
|
-
// src/Checkbox.tsx
|
|
466
|
-
var React7 = __toESM(require_react(), 1);
|
|
467
|
-
var Checkbox = React7.forwardRef(function Checkbox2(props, ref) {
|
|
468
|
-
const own = React7.useRef(null), merged = useMergedRef(ref, own);
|
|
469
|
-
const st = useMaybeControlled(props.checked, !!props.defaultChecked, props.onChange);
|
|
470
|
-
const on = !!st[0];
|
|
471
|
-
React7.useEffect(function() {
|
|
472
|
-
if (own.current) own.current.indeterminate = !!props.indeterminate;
|
|
473
|
-
});
|
|
474
|
-
const rest = omit(props, [
|
|
475
|
-
"checked",
|
|
476
|
-
"defaultChecked",
|
|
477
|
-
"onChange",
|
|
478
|
-
"indeterminate",
|
|
479
|
-
"label",
|
|
480
|
-
"children",
|
|
481
|
-
"description",
|
|
482
|
-
"className",
|
|
483
|
-
"tabIndex",
|
|
484
|
-
"disabled"
|
|
485
|
-
]);
|
|
486
|
-
const labelled = props.children != null;
|
|
487
|
-
const descId = props.description && props.id ? props.id + "-desc" : void 0;
|
|
488
|
-
return /* @__PURE__ */ React7.createElement(
|
|
489
|
-
"label",
|
|
490
|
-
{
|
|
491
|
-
className: cx("aura-check", labelled && "aura-check--labelled", props.disabled && "is-disabled", props.className),
|
|
492
|
-
onClick: function(e) {
|
|
493
|
-
e.stopPropagation();
|
|
494
|
-
}
|
|
495
|
-
},
|
|
496
|
-
/* @__PURE__ */ React7.createElement(
|
|
497
|
-
"input",
|
|
498
|
-
{
|
|
499
|
-
...rest,
|
|
500
|
-
ref: merged,
|
|
501
|
-
type: "checkbox",
|
|
502
|
-
className: "aura-check__input",
|
|
503
|
-
checked: on,
|
|
504
|
-
tabIndex: props.tabIndex,
|
|
505
|
-
disabled: props.disabled,
|
|
506
|
-
"aria-describedby": descId,
|
|
507
|
-
"aria-label": labelled ? void 0 : props.label,
|
|
508
|
-
onChange: function(e) {
|
|
509
|
-
st[1](e.target.checked);
|
|
510
|
-
}
|
|
511
|
-
}
|
|
512
|
-
),
|
|
513
|
-
/* @__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),
|
|
514
|
-
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
|
|
515
|
-
);
|
|
516
|
-
});
|
|
517
|
-
|
|
518
|
-
// src/StatusPill.tsx
|
|
519
|
-
var React8 = __toESM(require_react(), 1);
|
|
520
|
-
var TONE_ICON = {
|
|
521
|
-
neutral: "circle",
|
|
522
|
-
progress: "circle-dot-dashed",
|
|
523
|
-
ready: "circle-check",
|
|
524
|
-
blocked: "ban"
|
|
525
|
-
};
|
|
526
|
-
var TONE_WORDS = {
|
|
527
|
-
ready: ["ready", "done", "complete", "completed", "approved", "live", "passed"],
|
|
528
|
-
progress: ["in progress", "in review", "review", "syncing", "running", "pending"],
|
|
529
|
-
blocked: ["blocked", "failed", "error", "rejected", "on hold", "cancelled"]
|
|
530
|
-
};
|
|
531
|
-
function toneFor(status) {
|
|
532
|
-
const s = String(status == null ? "" : status).trim().toLowerCase();
|
|
533
|
-
for (const t in TONE_WORDS) if (TONE_WORDS[t].indexOf(s) >= 0) return t;
|
|
534
|
-
return "neutral";
|
|
535
|
-
}
|
|
536
|
-
var TONE_ORDER = { neutral: 0, progress: 1, ready: 2, blocked: 3 };
|
|
537
|
-
var StatusPill = React8.forwardRef(function StatusPill2(props, ref) {
|
|
538
|
-
const tone2 = props.tone || toneFor(props.children);
|
|
539
|
-
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);
|
|
540
|
-
});
|
|
541
|
-
|
|
542
|
-
// src/Field.tsx
|
|
543
|
-
var React10 = __toESM(require_react(), 1);
|
|
544
261
|
|
|
545
262
|
// src/locale.tsx
|
|
546
|
-
var
|
|
263
|
+
var React3 = __toESM(require_react(), 1);
|
|
547
264
|
var n = function(x) {
|
|
548
265
|
return Number(x).toLocaleString("en");
|
|
549
266
|
};
|
|
267
|
+
var nsv = function(x) {
|
|
268
|
+
return Number(x).toLocaleString("sv-SE");
|
|
269
|
+
};
|
|
550
270
|
var STRINGS = {
|
|
551
271
|
en: {
|
|
552
272
|
close: "Close",
|
|
@@ -743,31 +463,446 @@ window.Aura = (() => {
|
|
|
743
463
|
accepts: function(list, max) {
|
|
744
464
|
return [list, max && "\u0E44\u0E21\u0E48\u0E40\u0E01\u0E34\u0E19 " + max + " \u0E15\u0E48\u0E2D\u0E44\u0E1F\u0E25\u0E4C"].filter(Boolean).join(" \xB7 ");
|
|
745
465
|
}
|
|
466
|
+
},
|
|
467
|
+
sv: {
|
|
468
|
+
close: "St\xE4ng",
|
|
469
|
+
dismiss: "St\xE4ng",
|
|
470
|
+
dismissToast: "St\xE4ng aviseringen",
|
|
471
|
+
notifications: "Aviseringar",
|
|
472
|
+
mainNav: "Huvudmeny",
|
|
473
|
+
breadcrumb: "Br\xF6dsmulor",
|
|
474
|
+
navigation: "Navigering",
|
|
475
|
+
openNav: "\xD6ppna menyn",
|
|
476
|
+
searching: "S\xF6ker\u2026",
|
|
477
|
+
noMatches: "Inga tr\xE4ffar",
|
|
478
|
+
clear: function(what) {
|
|
479
|
+
return "Rensa " + (what || "urvalet");
|
|
480
|
+
},
|
|
481
|
+
keepTyping: function(total) {
|
|
482
|
+
return "Skriv mer f\xF6r att begr\xE4nsa " + nsv(total) + " alternativ";
|
|
483
|
+
},
|
|
484
|
+
sortAsc: "Sortera stigande",
|
|
485
|
+
sortDesc: "Sortera fallande",
|
|
486
|
+
pin: "F\xE4st till v\xE4nster",
|
|
487
|
+
unpin: "Lossa kolumnen",
|
|
488
|
+
moveLeft: "Flytta v\xE4nster",
|
|
489
|
+
moveRight: "Flytta h\xF6ger",
|
|
490
|
+
hideColumn: "D\xF6lj kolumnen",
|
|
491
|
+
resetColumns: "\xC5terst\xE4ll kolumner",
|
|
492
|
+
selectRows: "V\xE4lj rader",
|
|
493
|
+
selectAllRows: "V\xE4lj alla rader",
|
|
494
|
+
deselectAllRows: "Avmarkera alla rader",
|
|
495
|
+
selectAll: "V\xE4lj alla",
|
|
496
|
+
selectRow: function(k) {
|
|
497
|
+
return "V\xE4lj " + k;
|
|
498
|
+
},
|
|
499
|
+
selectedCount: function(c) {
|
|
500
|
+
return nsv(c) + " valda";
|
|
501
|
+
},
|
|
502
|
+
pinned: "F\xE4st",
|
|
503
|
+
columnOptions: function(label) {
|
|
504
|
+
return "Alternativ f\xF6r kolumnen " + label;
|
|
505
|
+
},
|
|
506
|
+
column: function(label) {
|
|
507
|
+
return label ? "Kolumnen " + label : "Kolumn";
|
|
508
|
+
},
|
|
509
|
+
columns: "Kolumner",
|
|
510
|
+
showHideColumns: "Visa eller d\xF6lj kolumner",
|
|
511
|
+
empty: "Inget h\xE4r \xE4nnu",
|
|
512
|
+
loading: "Laddar\u2026",
|
|
513
|
+
loadingRows: "Laddar rader",
|
|
514
|
+
range: function(a, b, total) {
|
|
515
|
+
return a + "\u2013" + b + " av " + nsv(total);
|
|
516
|
+
},
|
|
517
|
+
page: function(p, total) {
|
|
518
|
+
return "Sida " + p + " av " + total;
|
|
519
|
+
},
|
|
520
|
+
prevPage: "F\xF6reg\xE5ende sida",
|
|
521
|
+
nextPage: "N\xE4sta sida",
|
|
522
|
+
rowCount: function(c) {
|
|
523
|
+
return nsv(c) + " rader";
|
|
524
|
+
},
|
|
525
|
+
actions: "\xC5tg\xE4rder",
|
|
526
|
+
optional: "valfritt",
|
|
527
|
+
timePlaceholder: "tt:mm",
|
|
528
|
+
timeInvalid: "Skriv en tid som 09:30",
|
|
529
|
+
timeOutOfRange: function(a, b) {
|
|
530
|
+
return "V\xE4lj en tid mellan " + a + " och " + b;
|
|
531
|
+
},
|
|
532
|
+
dropFiles: "Dra filer hit eller",
|
|
533
|
+
browse: "V\xE4lj filer",
|
|
534
|
+
browseOne: "V\xE4lj en fil",
|
|
535
|
+
remove: function(n2) {
|
|
536
|
+
return "Ta bort " + n2;
|
|
537
|
+
},
|
|
538
|
+
fileTooBig: function(max) {
|
|
539
|
+
return "St\xF6rre \xE4n " + max;
|
|
540
|
+
},
|
|
541
|
+
fileWrongType: "Den h\xE4r filtypen godtas inte",
|
|
542
|
+
tooManyFiles: function(n2) {
|
|
543
|
+
return "H\xF6gst " + n2 + " filer";
|
|
544
|
+
},
|
|
545
|
+
colorScheme: "F\xE4rgl\xE4ge",
|
|
546
|
+
increase: "\xD6ka",
|
|
547
|
+
decrease: "Minska",
|
|
548
|
+
stepDone: "klart",
|
|
549
|
+
stepOf: function(i, total) {
|
|
550
|
+
return "Steg " + i + " av " + total;
|
|
551
|
+
},
|
|
552
|
+
schemeLight: "Ljust",
|
|
553
|
+
schemeDark: "M\xF6rkt",
|
|
554
|
+
schemeSystem: "System",
|
|
555
|
+
uploading: "Laddar upp\u2026",
|
|
556
|
+
images: "Bilder",
|
|
557
|
+
pagination: "Sidnumrering",
|
|
558
|
+
pageN: function(p) {
|
|
559
|
+
return "Sida " + p;
|
|
560
|
+
},
|
|
561
|
+
accepts: function(list, max) {
|
|
562
|
+
return [list, max && "h\xF6gst " + max + " per fil"].filter(Boolean).join(", ");
|
|
563
|
+
}
|
|
564
|
+
}
|
|
565
|
+
};
|
|
566
|
+
var LocaleContext = React3.createContext(null);
|
|
567
|
+
function AuraProvider(props) {
|
|
568
|
+
const value = React3.useMemo(
|
|
569
|
+
function() {
|
|
570
|
+
const base = props.locale && STRINGS[props.locale] || STRINGS.en;
|
|
571
|
+
return {
|
|
572
|
+
locale: props.locale || "en",
|
|
573
|
+
calendar: props.calendar || null,
|
|
574
|
+
strings: props.strings ? Object.assign({}, base, props.strings) : base,
|
|
575
|
+
linkComponent: props.linkComponent || null
|
|
576
|
+
};
|
|
577
|
+
},
|
|
578
|
+
[props.locale, props.calendar, props.strings, props.linkComponent]
|
|
579
|
+
);
|
|
580
|
+
return /* @__PURE__ */ React3.createElement(LocaleContext.Provider, { value }, props.children);
|
|
581
|
+
}
|
|
582
|
+
function useAuraLocale() {
|
|
583
|
+
return React3.useContext(LocaleContext) || { locale: null, calendar: null, strings: STRINGS.en };
|
|
584
|
+
}
|
|
585
|
+
function useLinkComponent(own) {
|
|
586
|
+
const ctx = React3.useContext(LocaleContext);
|
|
587
|
+
return own || ctx && ctx.linkComponent || "a";
|
|
588
|
+
}
|
|
589
|
+
function useStrings() {
|
|
590
|
+
return useAuraLocale().strings;
|
|
591
|
+
}
|
|
592
|
+
|
|
593
|
+
// src/Button.tsx
|
|
594
|
+
function ButtonLink(props, ref, Link) {
|
|
595
|
+
const variant = props.variant || "primary";
|
|
596
|
+
const disabled = !!props.disabled;
|
|
597
|
+
const rest = omit(props, [
|
|
598
|
+
"variant",
|
|
599
|
+
"className",
|
|
600
|
+
"children",
|
|
601
|
+
"icon",
|
|
602
|
+
"iconRight",
|
|
603
|
+
"disabled",
|
|
604
|
+
"linkComponent",
|
|
605
|
+
"href",
|
|
606
|
+
"fullWidth"
|
|
607
|
+
]);
|
|
608
|
+
const Tag3 = disabled ? "a" : Link;
|
|
609
|
+
return /* @__PURE__ */ React4.createElement(
|
|
610
|
+
Tag3,
|
|
611
|
+
{
|
|
612
|
+
...rest,
|
|
613
|
+
ref,
|
|
614
|
+
href: disabled ? void 0 : props.href,
|
|
615
|
+
role: disabled ? "link" : void 0,
|
|
616
|
+
"aria-disabled": disabled || void 0,
|
|
617
|
+
tabIndex: disabled ? -1 : props.tabIndex,
|
|
618
|
+
className: cx("aura-btn", "aura-btn--" + variant, props.fullWidth && "aura-btn--full", props.className),
|
|
619
|
+
onClick: disabled ? void 0 : props.onClick
|
|
620
|
+
},
|
|
621
|
+
props.icon ? /* @__PURE__ */ React4.createElement(Icon, { name: props.icon }) : null,
|
|
622
|
+
props.children,
|
|
623
|
+
props.iconRight ? /* @__PURE__ */ React4.createElement(Icon, { name: props.iconRight }) : null
|
|
624
|
+
);
|
|
625
|
+
}
|
|
626
|
+
var Button = React4.forwardRef(
|
|
627
|
+
function Button2(all, ref) {
|
|
628
|
+
const Link = useLinkComponent(all.linkComponent);
|
|
629
|
+
if (typeof all.href === "string") {
|
|
630
|
+
return ButtonLink(all, ref, Link);
|
|
631
|
+
}
|
|
632
|
+
const props = all;
|
|
633
|
+
const variant = props.variant || "primary";
|
|
634
|
+
const loading = !!props.loading;
|
|
635
|
+
const rest = omit(props, [
|
|
636
|
+
"variant",
|
|
637
|
+
"className",
|
|
638
|
+
"children",
|
|
639
|
+
"type",
|
|
640
|
+
"icon",
|
|
641
|
+
"iconRight",
|
|
642
|
+
"loading",
|
|
643
|
+
"onClick",
|
|
644
|
+
"fullWidth"
|
|
645
|
+
]);
|
|
646
|
+
return /* @__PURE__ */ React4.createElement(
|
|
647
|
+
"button",
|
|
648
|
+
{
|
|
649
|
+
...rest,
|
|
650
|
+
ref,
|
|
651
|
+
type: props.type || "button",
|
|
652
|
+
className: cx(
|
|
653
|
+
"aura-btn",
|
|
654
|
+
"aura-btn--" + variant,
|
|
655
|
+
props.fullWidth && "aura-btn--full",
|
|
656
|
+
loading && "is-loading",
|
|
657
|
+
props.className
|
|
658
|
+
),
|
|
659
|
+
"aria-busy": loading || void 0,
|
|
660
|
+
"aria-disabled": loading || void 0,
|
|
661
|
+
onClick: loading ? function(e) {
|
|
662
|
+
e.preventDefault();
|
|
663
|
+
} : props.onClick
|
|
664
|
+
},
|
|
665
|
+
loading ? /* @__PURE__ */ React4.createElement(Icon, { name: "loader-circle", className: "aura-spin" }) : props.icon ? /* @__PURE__ */ React4.createElement(Icon, { name: props.icon }) : null,
|
|
666
|
+
props.children,
|
|
667
|
+
props.iconRight && !loading ? /* @__PURE__ */ React4.createElement(Icon, { name: props.iconRight }) : null
|
|
668
|
+
);
|
|
669
|
+
}
|
|
670
|
+
);
|
|
671
|
+
|
|
672
|
+
// src/IconButton.tsx
|
|
673
|
+
var React5 = __toESM(require_react(), 1);
|
|
674
|
+
var IconButton = React5.forwardRef(function IconButton2(props, ref) {
|
|
675
|
+
const rest = omit(props, ["icon", "label", "className", "size", "tone"]);
|
|
676
|
+
return /* @__PURE__ */ React5.createElement(
|
|
677
|
+
"button",
|
|
678
|
+
{
|
|
679
|
+
...rest,
|
|
680
|
+
ref,
|
|
681
|
+
type: props.type || "button",
|
|
682
|
+
"aria-label": props.label,
|
|
683
|
+
title: props.label,
|
|
684
|
+
className: cx("aura-icon-btn", props.tone === "danger" && "aura-icon-btn--danger", props.className)
|
|
685
|
+
},
|
|
686
|
+
/* @__PURE__ */ React5.createElement(Icon, { name: props.icon, size: props.size || "sm" })
|
|
687
|
+
);
|
|
688
|
+
});
|
|
689
|
+
|
|
690
|
+
// src/Menu.tsx
|
|
691
|
+
var React6 = __toESM(require_react(), 1);
|
|
692
|
+
var import_react_dom = __toESM(require_react_dom(), 1);
|
|
693
|
+
var Menu = React6.forwardRef(function Menu2(props, ref) {
|
|
694
|
+
const own = React6.useRef(null), merged = useMergedRef(ref, own);
|
|
695
|
+
const posState = React6.useState(null);
|
|
696
|
+
const pos = posState[0], setPos = posState[1];
|
|
697
|
+
const items = props.items || [];
|
|
698
|
+
const mounted = useMounted();
|
|
699
|
+
useIsoLayoutEffect(
|
|
700
|
+
function() {
|
|
701
|
+
const a = props.anchor, m = own.current;
|
|
702
|
+
if (!a || !m) return;
|
|
703
|
+
const r = a.getBoundingClientRect(), mh = m.offsetHeight, mw = m.offsetWidth;
|
|
704
|
+
let top = r.bottom + 4;
|
|
705
|
+
if (top + mh > window.innerHeight - 8 && r.top - mh - 4 > 8) top = r.top - mh - 4;
|
|
706
|
+
const left = Math.max(8, Math.min(r.right - mw, window.innerWidth - mw - 8));
|
|
707
|
+
setPos({ top, left });
|
|
708
|
+
},
|
|
709
|
+
[props.anchor, mounted]
|
|
710
|
+
);
|
|
711
|
+
React6.useEffect(
|
|
712
|
+
function() {
|
|
713
|
+
if (!mounted) return;
|
|
714
|
+
const first = own.current && own.current.querySelector('[role^="menuitem"]:not([disabled])');
|
|
715
|
+
if (first && props.autoFocus !== false) first.focus();
|
|
716
|
+
function outside(e) {
|
|
717
|
+
if (own.current && !own.current.contains(e.target) && !(props.anchor && props.anchor.contains(e.target)))
|
|
718
|
+
props.onClose(false);
|
|
719
|
+
}
|
|
720
|
+
function onScroll(e) {
|
|
721
|
+
if (own.current && !own.current.contains(e.target)) props.onClose(false);
|
|
722
|
+
}
|
|
723
|
+
document.addEventListener("pointerdown", outside, true);
|
|
724
|
+
window.addEventListener("scroll", onScroll, true);
|
|
725
|
+
window.addEventListener("resize", onScroll);
|
|
726
|
+
return function() {
|
|
727
|
+
document.removeEventListener("pointerdown", outside, true);
|
|
728
|
+
window.removeEventListener("scroll", onScroll, true);
|
|
729
|
+
window.removeEventListener("resize", onScroll);
|
|
730
|
+
};
|
|
731
|
+
},
|
|
732
|
+
[mounted]
|
|
733
|
+
);
|
|
734
|
+
function onKeyDown(e) {
|
|
735
|
+
const list = Array.prototype.slice.call(
|
|
736
|
+
own.current.querySelectorAll('[role^="menuitem"]:not([disabled])')
|
|
737
|
+
);
|
|
738
|
+
const i = list.indexOf(document.activeElement);
|
|
739
|
+
if (e.key === "ArrowDown") {
|
|
740
|
+
e.preventDefault();
|
|
741
|
+
list[(i + 1) % list.length].focus();
|
|
742
|
+
} else if (e.key === "ArrowUp") {
|
|
743
|
+
e.preventDefault();
|
|
744
|
+
list[(i - 1 + list.length) % list.length].focus();
|
|
745
|
+
} else if (e.key === "Home") {
|
|
746
|
+
e.preventDefault();
|
|
747
|
+
list[0].focus();
|
|
748
|
+
} else if (e.key === "End") {
|
|
749
|
+
e.preventDefault();
|
|
750
|
+
list[list.length - 1].focus();
|
|
751
|
+
} else if (e.key === "Escape") {
|
|
752
|
+
e.preventDefault();
|
|
753
|
+
props.onClose(true);
|
|
754
|
+
} else if (e.key === "Tab") {
|
|
755
|
+
props.onClose(true);
|
|
756
|
+
}
|
|
757
|
+
e.stopPropagation();
|
|
758
|
+
}
|
|
759
|
+
const el = /* @__PURE__ */ React6.createElement(
|
|
760
|
+
"div",
|
|
761
|
+
{
|
|
762
|
+
ref: merged,
|
|
763
|
+
role: "menu",
|
|
764
|
+
"aria-label": props.label,
|
|
765
|
+
className: "aura-menu",
|
|
766
|
+
onKeyDown,
|
|
767
|
+
style: { top: pos ? pos.top : -9999, left: pos ? pos.left : -9999 }
|
|
768
|
+
},
|
|
769
|
+
items.map(function(it, i) {
|
|
770
|
+
if (it.separator) return /* @__PURE__ */ React6.createElement("div", { key: "s" + i, role: "separator", className: "aura-menu__sep" });
|
|
771
|
+
const isCheck = it.checked !== void 0;
|
|
772
|
+
return /* @__PURE__ */ React6.createElement(
|
|
773
|
+
"button",
|
|
774
|
+
{
|
|
775
|
+
key: i,
|
|
776
|
+
type: "button",
|
|
777
|
+
tabIndex: -1,
|
|
778
|
+
disabled: it.disabled,
|
|
779
|
+
role: isCheck ? "menuitemcheckbox" : "menuitem",
|
|
780
|
+
"aria-checked": isCheck ? !!it.checked : void 0,
|
|
781
|
+
className: "aura-menu__item",
|
|
782
|
+
onClick: function() {
|
|
783
|
+
it.onSelect();
|
|
784
|
+
if (!it.keepOpen) props.onClose(true);
|
|
785
|
+
}
|
|
786
|
+
},
|
|
787
|
+
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" }),
|
|
788
|
+
/* @__PURE__ */ React6.createElement("span", { className: "aura-menu__label" }, it.label),
|
|
789
|
+
it.hint ? /* @__PURE__ */ React6.createElement("span", { className: "aura-menu__hint" }, it.hint) : null
|
|
790
|
+
);
|
|
791
|
+
})
|
|
792
|
+
);
|
|
793
|
+
return mounted ? (0, import_react_dom.createPortal)(el, document.body) : null;
|
|
794
|
+
});
|
|
795
|
+
|
|
796
|
+
// src/DropdownMenu.tsx
|
|
797
|
+
var React7 = __toESM(require_react(), 1);
|
|
798
|
+
var DropdownMenu = React7.forwardRef(function DropdownMenu2(props, ref) {
|
|
799
|
+
const st = React7.useState(null), anchor = st[0], setAnchor = st[1];
|
|
800
|
+
const wrap = React7.useRef(null), wrapMerged = useMergedRef(ref, wrap);
|
|
801
|
+
const child = React7.Children.only(props.trigger);
|
|
802
|
+
function toggle(e) {
|
|
803
|
+
if (child.props.onClick) child.props.onClick(e);
|
|
804
|
+
const el = wrap.current && (wrap.current.querySelector('button, [role="button"], a') || wrap.current);
|
|
805
|
+
setAnchor(anchor ? null : el);
|
|
806
|
+
}
|
|
807
|
+
function onKeyDown(e) {
|
|
808
|
+
if ((e.key === "ArrowDown" || e.key === "ArrowUp") && !anchor) {
|
|
809
|
+
e.preventDefault();
|
|
810
|
+
setAnchor(wrap.current.querySelector('button, [role="button"], a') || wrap.current);
|
|
811
|
+
}
|
|
746
812
|
}
|
|
747
|
-
|
|
748
|
-
|
|
749
|
-
|
|
750
|
-
|
|
751
|
-
|
|
752
|
-
|
|
753
|
-
|
|
754
|
-
|
|
755
|
-
|
|
756
|
-
|
|
757
|
-
|
|
813
|
+
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(
|
|
814
|
+
Menu,
|
|
815
|
+
{
|
|
816
|
+
anchor,
|
|
817
|
+
label: props.label,
|
|
818
|
+
items: props.items,
|
|
819
|
+
onClose: function(restore) {
|
|
820
|
+
setAnchor(null);
|
|
821
|
+
if (restore && typeof anchor.focus === "function") anchor.focus();
|
|
822
|
+
}
|
|
823
|
+
}
|
|
824
|
+
) : null);
|
|
825
|
+
});
|
|
826
|
+
|
|
827
|
+
// src/Checkbox.tsx
|
|
828
|
+
var React8 = __toESM(require_react(), 1);
|
|
829
|
+
var Checkbox = React8.forwardRef(function Checkbox2(props, ref) {
|
|
830
|
+
const own = React8.useRef(null), merged = useMergedRef(ref, own);
|
|
831
|
+
const st = useMaybeControlled(props.checked, !!props.defaultChecked, props.onChange);
|
|
832
|
+
const on = !!st[0];
|
|
833
|
+
React8.useEffect(function() {
|
|
834
|
+
if (own.current) own.current.indeterminate = !!props.indeterminate;
|
|
835
|
+
});
|
|
836
|
+
const rest = omit(props, [
|
|
837
|
+
"checked",
|
|
838
|
+
"defaultChecked",
|
|
839
|
+
"onChange",
|
|
840
|
+
"indeterminate",
|
|
841
|
+
"label",
|
|
842
|
+
"children",
|
|
843
|
+
"description",
|
|
844
|
+
"className",
|
|
845
|
+
"tabIndex",
|
|
846
|
+
"disabled"
|
|
847
|
+
]);
|
|
848
|
+
const labelled = props.children != null;
|
|
849
|
+
const descId = props.description && props.id ? props.id + "-desc" : void 0;
|
|
850
|
+
return /* @__PURE__ */ React8.createElement(
|
|
851
|
+
"label",
|
|
852
|
+
{
|
|
853
|
+
className: cx("aura-check", labelled && "aura-check--labelled", props.disabled && "is-disabled", props.className),
|
|
854
|
+
onClick: function(e) {
|
|
855
|
+
e.stopPropagation();
|
|
856
|
+
}
|
|
758
857
|
},
|
|
759
|
-
|
|
858
|
+
/* @__PURE__ */ React8.createElement(
|
|
859
|
+
"input",
|
|
860
|
+
{
|
|
861
|
+
...rest,
|
|
862
|
+
ref: merged,
|
|
863
|
+
type: "checkbox",
|
|
864
|
+
className: "aura-check__input",
|
|
865
|
+
checked: on,
|
|
866
|
+
tabIndex: props.tabIndex,
|
|
867
|
+
disabled: props.disabled,
|
|
868
|
+
"aria-describedby": descId,
|
|
869
|
+
"aria-label": labelled ? void 0 : props.label,
|
|
870
|
+
onChange: function(e) {
|
|
871
|
+
st[1](e.target.checked);
|
|
872
|
+
}
|
|
873
|
+
}
|
|
874
|
+
),
|
|
875
|
+
/* @__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),
|
|
876
|
+
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
|
|
760
877
|
);
|
|
761
|
-
|
|
762
|
-
|
|
763
|
-
|
|
764
|
-
|
|
765
|
-
|
|
766
|
-
|
|
767
|
-
|
|
878
|
+
});
|
|
879
|
+
|
|
880
|
+
// src/StatusPill.tsx
|
|
881
|
+
var React9 = __toESM(require_react(), 1);
|
|
882
|
+
var TONE_ICON = {
|
|
883
|
+
neutral: "circle",
|
|
884
|
+
progress: "circle-dot-dashed",
|
|
885
|
+
ready: "circle-check",
|
|
886
|
+
blocked: "ban"
|
|
887
|
+
};
|
|
888
|
+
var TONE_WORDS = {
|
|
889
|
+
ready: ["ready", "done", "complete", "completed", "approved", "live", "passed"],
|
|
890
|
+
progress: ["in progress", "in review", "review", "syncing", "running", "pending"],
|
|
891
|
+
blocked: ["blocked", "failed", "error", "rejected", "on hold", "cancelled"]
|
|
892
|
+
};
|
|
893
|
+
function toneFor(status) {
|
|
894
|
+
const s = String(status == null ? "" : status).trim().toLowerCase();
|
|
895
|
+
for (const t in TONE_WORDS) if (TONE_WORDS[t].indexOf(s) >= 0) return t;
|
|
896
|
+
return "neutral";
|
|
768
897
|
}
|
|
898
|
+
var TONE_ORDER = { neutral: 0, progress: 1, ready: 2, blocked: 3 };
|
|
899
|
+
var StatusPill = React9.forwardRef(function StatusPill2(props, ref) {
|
|
900
|
+
const tone2 = props.tone || toneFor(props.children);
|
|
901
|
+
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);
|
|
902
|
+
});
|
|
769
903
|
|
|
770
904
|
// src/Field.tsx
|
|
905
|
+
var React10 = __toESM(require_react(), 1);
|
|
771
906
|
var h2 = React10.createElement;
|
|
772
907
|
var Field = React10.forwardRef(function Field2(props, ref) {
|
|
773
908
|
const t = useStrings();
|
|
@@ -963,25 +1098,37 @@ window.Aura = (() => {
|
|
|
963
1098
|
const auto = uid(), id = props.id || auto;
|
|
964
1099
|
const st = useMaybeControlled(props.checked, !!props.defaultChecked, props.onChange);
|
|
965
1100
|
const on = !!st[0];
|
|
966
|
-
return /* @__PURE__ */ React15.createElement(
|
|
967
|
-
"
|
|
1101
|
+
return /* @__PURE__ */ React15.createElement(
|
|
1102
|
+
"div",
|
|
968
1103
|
{
|
|
969
|
-
|
|
970
|
-
|
|
971
|
-
|
|
972
|
-
|
|
973
|
-
"aria-checked": on,
|
|
974
|
-
disabled: props.disabled,
|
|
975
|
-
"aria-labelledby": props.label ? id + "-label" : void 0,
|
|
976
|
-
"aria-label": props.label ? void 0 : props["aria-label"],
|
|
977
|
-
"aria-describedby": props.description ? id + "-desc" : void 0,
|
|
978
|
-
className: cx("aura-switch", on && "is-on"),
|
|
979
|
-
onClick: function() {
|
|
1104
|
+
className: cx("aura-switch-row", props.disabled && "is-disabled", props.className),
|
|
1105
|
+
onClick: function(e) {
|
|
1106
|
+
const t = e.target;
|
|
1107
|
+
if (props.disabled || t.closest("button, label, a, input")) return;
|
|
980
1108
|
st[1](!on);
|
|
981
1109
|
}
|
|
982
1110
|
},
|
|
983
|
-
/* @__PURE__ */ React15.createElement(
|
|
984
|
-
|
|
1111
|
+
/* @__PURE__ */ React15.createElement(
|
|
1112
|
+
"button",
|
|
1113
|
+
{
|
|
1114
|
+
ref,
|
|
1115
|
+
type: "button",
|
|
1116
|
+
role: "switch",
|
|
1117
|
+
id,
|
|
1118
|
+
"aria-checked": on,
|
|
1119
|
+
disabled: props.disabled,
|
|
1120
|
+
"aria-labelledby": props.label ? id + "-label" : void 0,
|
|
1121
|
+
"aria-label": props.label ? void 0 : props["aria-label"],
|
|
1122
|
+
"aria-describedby": props.description ? id + "-desc" : void 0,
|
|
1123
|
+
className: cx("aura-switch", on && "is-on"),
|
|
1124
|
+
onClick: function() {
|
|
1125
|
+
st[1](!on);
|
|
1126
|
+
}
|
|
1127
|
+
},
|
|
1128
|
+
/* @__PURE__ */ React15.createElement("span", { className: "aura-switch__thumb" })
|
|
1129
|
+
),
|
|
1130
|
+
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
|
|
1131
|
+
);
|
|
985
1132
|
});
|
|
986
1133
|
|
|
987
1134
|
// src/Combobox.tsx
|
|
@@ -1353,8 +1500,69 @@ window.Aura = (() => {
|
|
|
1353
1500
|
function same(a, b) {
|
|
1354
1501
|
return !!a && !!b && a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
|
|
1355
1502
|
}
|
|
1503
|
+
var TAGS = { th: "th-TH", en: "en-GB", sv: "sv-SE" };
|
|
1504
|
+
function defaultCalendar(locale) {
|
|
1505
|
+
return locale === "th" ? "buddhist" : "gregory";
|
|
1506
|
+
}
|
|
1356
1507
|
function localeTag(locale, calendar) {
|
|
1357
|
-
|
|
1508
|
+
const cal = calendar || defaultCalendar(locale);
|
|
1509
|
+
return (TAGS[locale || "en"] || "en-GB") + "-u-ca-" + (cal === "gregory" ? "gregory" : "buddhist");
|
|
1510
|
+
}
|
|
1511
|
+
var DATE_TEXT = {
|
|
1512
|
+
th: {
|
|
1513
|
+
prevYears: "\u0E0A\u0E48\u0E27\u0E07\u0E1B\u0E35\u0E01\u0E48\u0E2D\u0E19\u0E2B\u0E19\u0E49\u0E32",
|
|
1514
|
+
nextYears: "\u0E0A\u0E48\u0E27\u0E07\u0E1B\u0E35\u0E16\u0E31\u0E14\u0E44\u0E1B",
|
|
1515
|
+
prevMonth: "\u0E40\u0E14\u0E37\u0E2D\u0E19\u0E01\u0E48\u0E2D\u0E19\u0E2B\u0E19\u0E49\u0E32",
|
|
1516
|
+
nextMonth: "\u0E40\u0E14\u0E37\u0E2D\u0E19\u0E16\u0E31\u0E14\u0E44\u0E1B",
|
|
1517
|
+
today: "\u0E27\u0E31\u0E19\u0E19\u0E35\u0E49",
|
|
1518
|
+
clear: "\u0E25\u0E49\u0E32\u0E07",
|
|
1519
|
+
chooseDate: "\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E27\u0E31\u0E19\u0E17\u0E35\u0E48",
|
|
1520
|
+
datePlaceholder: "\u0E27\u0E27/\u0E14\u0E14/\u0E1B\u0E1B\u0E1B\u0E1B",
|
|
1521
|
+
clearDate: "\u0E25\u0E49\u0E32\u0E07\u0E27\u0E31\u0E19\u0E17\u0E35\u0E48",
|
|
1522
|
+
openCalendar: "\u0E40\u0E1B\u0E34\u0E14\u0E1B\u0E0F\u0E34\u0E17\u0E34\u0E19",
|
|
1523
|
+
chooseDates: "\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E0A\u0E48\u0E27\u0E07\u0E27\u0E31\u0E19\u0E17\u0E35\u0E48",
|
|
1524
|
+
rangePlaceholder: "\u0E27\u0E27/\u0E14\u0E14/\u0E1B\u0E1B\u0E1B\u0E1B \u2013 \u0E27\u0E27/\u0E14\u0E14/\u0E1B\u0E1B\u0E1B\u0E1B",
|
|
1525
|
+
clearDates: "\u0E25\u0E49\u0E32\u0E07\u0E0A\u0E48\u0E27\u0E07\u0E27\u0E31\u0E19\u0E17\u0E35\u0E48",
|
|
1526
|
+
chooseStart: "\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E27\u0E31\u0E19\u0E40\u0E23\u0E34\u0E48\u0E21\u0E15\u0E49\u0E19",
|
|
1527
|
+
chooseEnd: "\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E27\u0E31\u0E19\u0E2A\u0E34\u0E49\u0E19\u0E2A\u0E38\u0E14"
|
|
1528
|
+
},
|
|
1529
|
+
en: {
|
|
1530
|
+
prevYears: "Previous years",
|
|
1531
|
+
nextYears: "Next years",
|
|
1532
|
+
prevMonth: "Previous month",
|
|
1533
|
+
nextMonth: "Next month",
|
|
1534
|
+
today: "Today",
|
|
1535
|
+
clear: "Clear",
|
|
1536
|
+
chooseDate: "Choose date",
|
|
1537
|
+
datePlaceholder: "DD/MM/YYYY",
|
|
1538
|
+
clearDate: "Clear date",
|
|
1539
|
+
openCalendar: "Open calendar",
|
|
1540
|
+
chooseDates: "Choose dates",
|
|
1541
|
+
rangePlaceholder: "DD/MM/YYYY \u2013 DD/MM/YYYY",
|
|
1542
|
+
clearDates: "Clear dates",
|
|
1543
|
+
chooseStart: "Choose the start date",
|
|
1544
|
+
chooseEnd: "Choose the end date"
|
|
1545
|
+
},
|
|
1546
|
+
sv: {
|
|
1547
|
+
prevYears: "Tidigare \xE5r",
|
|
1548
|
+
nextYears: "Senare \xE5r",
|
|
1549
|
+
prevMonth: "F\xF6reg\xE5ende m\xE5nad",
|
|
1550
|
+
nextMonth: "N\xE4sta m\xE5nad",
|
|
1551
|
+
today: "Idag",
|
|
1552
|
+
clear: "Rensa",
|
|
1553
|
+
chooseDate: "V\xE4lj datum",
|
|
1554
|
+
datePlaceholder: "\xE5\xE5\xE5\xE5-mm-dd",
|
|
1555
|
+
clearDate: "Rensa datum",
|
|
1556
|
+
openCalendar: "\xD6ppna kalendern",
|
|
1557
|
+
chooseDates: "V\xE4lj datum",
|
|
1558
|
+
rangePlaceholder: "\xE5\xE5\xE5\xE5-mm-dd \u2013 \xE5\xE5\xE5\xE5-mm-dd",
|
|
1559
|
+
clearDates: "Rensa datumen",
|
|
1560
|
+
chooseStart: "V\xE4lj startdatum",
|
|
1561
|
+
chooseEnd: "V\xE4lj slutdatum"
|
|
1562
|
+
}
|
|
1563
|
+
};
|
|
1564
|
+
function dateText(locale) {
|
|
1565
|
+
return DATE_TEXT[locale || "en"] || DATE_TEXT.en;
|
|
1358
1566
|
}
|
|
1359
1567
|
var fmtCache = {};
|
|
1360
1568
|
var PRESETS = {
|
|
@@ -1371,18 +1579,19 @@ window.Aura = (() => {
|
|
|
1371
1579
|
const o = opts || {}, d = fromISO(iso);
|
|
1372
1580
|
if (!d) return "";
|
|
1373
1581
|
const f = typeof o.format === "object" ? o.format : PRESETS[o.format || "short"];
|
|
1374
|
-
|
|
1582
|
+
const loc = o.locale || "th";
|
|
1583
|
+
return fmt(localeTag(loc, o.calendar || defaultCalendar(loc)), f, d).replace(ERA, "");
|
|
1375
1584
|
}
|
|
1376
1585
|
var MONTHS = null;
|
|
1377
1586
|
function monthIndex(word) {
|
|
1378
1587
|
if (!MONTHS) {
|
|
1379
1588
|
MONTHS = {};
|
|
1380
|
-
["th-TH", "en-GB"].forEach(function(tag) {
|
|
1589
|
+
["th-TH", "en-GB", "sv-SE"].forEach(function(tag) {
|
|
1381
1590
|
["short", "long"].forEach(function(w) {
|
|
1382
1591
|
for (let i = 0; i < 12; i++) {
|
|
1383
1592
|
const n2 = new Intl.DateTimeFormat(tag, { month: w }).format(new Date(2020, i, 1)).toLowerCase().replace(/\.$/, "");
|
|
1384
1593
|
MONTHS[n2] = i;
|
|
1385
|
-
if (/^[a-
|
|
1594
|
+
if (/^[a-zåäö]/.test(n2)) MONTHS[n2.slice(0, 3)] = i;
|
|
1386
1595
|
}
|
|
1387
1596
|
});
|
|
1388
1597
|
});
|
|
@@ -1411,8 +1620,8 @@ window.Aura = (() => {
|
|
|
1411
1620
|
return dt.getMonth() === mo - 1 && dt.getDate() === d ? toISO(dt) : null;
|
|
1412
1621
|
}
|
|
1413
1622
|
var Calendar = React17.forwardRef(function Calendar2(props, ref) {
|
|
1414
|
-
const ctx = useAuraLocale(), locale = props.locale || ctx.locale || "
|
|
1415
|
-
const weekStart = props.weekStartsOn == null ? 0 : props.weekStartsOn;
|
|
1623
|
+
const ctx = useAuraLocale(), locale = props.locale || ctx.locale || "en", calendar = props.calendar || ctx.calendar || defaultCalendar(locale), tag = localeTag(locale, calendar);
|
|
1624
|
+
const weekStart = props.weekStartsOn == null ? locale === "sv" ? 1 : 0 : props.weekStartsOn;
|
|
1416
1625
|
let today = /* @__PURE__ */ new Date();
|
|
1417
1626
|
today = new Date(today.getFullYear(), today.getMonth(), today.getDate());
|
|
1418
1627
|
const min = fromISO(props.min), max = fromISO(props.max);
|
|
@@ -1422,7 +1631,8 @@ window.Aura = (() => {
|
|
|
1422
1631
|
const viewState = React17.useState("days"), view = viewState[0], setView = viewState[1];
|
|
1423
1632
|
const hoverState = React17.useState(null);
|
|
1424
1633
|
const gridRef = React17.useRef(null), gridMerged = useMergedRef(ref, gridRef), moved = React17.useRef(false);
|
|
1425
|
-
const th = locale
|
|
1634
|
+
const th = locale === "th";
|
|
1635
|
+
const dt = dateText(locale);
|
|
1426
1636
|
function disabled(d) {
|
|
1427
1637
|
return !!(min && d < min || max && d > max || props.isDateDisabled && props.isDateDisabled(toISO(d)));
|
|
1428
1638
|
}
|
|
@@ -1488,7 +1698,7 @@ window.Aura = (() => {
|
|
|
1488
1698
|
IconButton,
|
|
1489
1699
|
{
|
|
1490
1700
|
icon: "chevron-left",
|
|
1491
|
-
label:
|
|
1701
|
+
label: dt.prevYears,
|
|
1492
1702
|
onClick: function() {
|
|
1493
1703
|
setFocus(new Date(yr - 12, focusDate.getMonth(), 1));
|
|
1494
1704
|
}
|
|
@@ -1507,7 +1717,7 @@ window.Aura = (() => {
|
|
|
1507
1717
|
IconButton,
|
|
1508
1718
|
{
|
|
1509
1719
|
icon: "chevron-right",
|
|
1510
|
-
label:
|
|
1720
|
+
label: dt.nextYears,
|
|
1511
1721
|
onClick: function() {
|
|
1512
1722
|
setFocus(new Date(yr + 12, focusDate.getMonth(), 1));
|
|
1513
1723
|
}
|
|
@@ -1535,7 +1745,7 @@ window.Aura = (() => {
|
|
|
1535
1745
|
IconButton,
|
|
1536
1746
|
{
|
|
1537
1747
|
icon: "chevron-left",
|
|
1538
|
-
label:
|
|
1748
|
+
label: dt.prevMonth,
|
|
1539
1749
|
onClick: function() {
|
|
1540
1750
|
setFocus(addMonths(focusDate, -1));
|
|
1541
1751
|
}
|
|
@@ -1556,7 +1766,7 @@ window.Aura = (() => {
|
|
|
1556
1766
|
IconButton,
|
|
1557
1767
|
{
|
|
1558
1768
|
icon: "chevron-right",
|
|
1559
|
-
label:
|
|
1769
|
+
label: dt.nextMonth,
|
|
1560
1770
|
onClick: function() {
|
|
1561
1771
|
setFocus(addMonths(focusDate, 1));
|
|
1562
1772
|
}
|
|
@@ -1595,6 +1805,7 @@ window.Aura = (() => {
|
|
|
1595
1805
|
tabIndex: same(d, focusDate) ? 0 : -1,
|
|
1596
1806
|
disabled: dis,
|
|
1597
1807
|
"aria-label": fmt(tag, { weekday: "long", day: "numeric", month: "long", year: "numeric" }, d),
|
|
1808
|
+
suppressHydrationWarning: true,
|
|
1598
1809
|
"aria-current": same(d, today) ? "date" : void 0,
|
|
1599
1810
|
"aria-pressed": sel || void 0,
|
|
1600
1811
|
className: cx(
|
|
@@ -1630,8 +1841,8 @@ window.Aura = (() => {
|
|
|
1630
1841
|
props.onSelect(toISO(today));
|
|
1631
1842
|
}
|
|
1632
1843
|
},
|
|
1633
|
-
|
|
1634
|
-
), props.onClear ? /* @__PURE__ */ React17.createElement("button", { type: "button", className: "aura-cal__link", onClick: props.onClear },
|
|
1844
|
+
dt.today
|
|
1845
|
+
), props.onClear ? /* @__PURE__ */ React17.createElement("button", { type: "button", className: "aura-cal__link", onClick: props.onClear }, dt.clear) : null));
|
|
1635
1846
|
});
|
|
1636
1847
|
function useCalendarPopover(boxRef) {
|
|
1637
1848
|
const openState = React17.useState(false), open = openState[0], setOpen = openState[1];
|
|
@@ -1753,7 +1964,7 @@ window.Aura = (() => {
|
|
|
1753
1964
|
}
|
|
1754
1965
|
var DatePicker = React17.forwardRef(function DatePicker2(props, ref) {
|
|
1755
1966
|
const auto = uid(), id = props.id || auto, dialogId = id + "-cal";
|
|
1756
|
-
const ctx = useAuraLocale(), locale = props.locale || ctx.locale || "
|
|
1967
|
+
const ctx = useAuraLocale(), locale = props.locale || ctx.locale || "en", calendar = props.calendar || ctx.calendar || defaultCalendar(locale), dt = dateText(locale);
|
|
1757
1968
|
const st = useMaybeControlled(
|
|
1758
1969
|
props.value,
|
|
1759
1970
|
props.defaultValue == null ? null : props.defaultValue,
|
|
@@ -1781,7 +1992,7 @@ window.Aura = (() => {
|
|
|
1781
1992
|
id: dialogId,
|
|
1782
1993
|
role: "dialog",
|
|
1783
1994
|
"aria-modal": false,
|
|
1784
|
-
"aria-label": props.label ||
|
|
1995
|
+
"aria-label": props.label || dt.chooseDate,
|
|
1785
1996
|
className: "aura-cal__popover",
|
|
1786
1997
|
style: pop.pos,
|
|
1787
1998
|
onKeyDown: function(e) {
|
|
@@ -1828,15 +2039,15 @@ window.Aura = (() => {
|
|
|
1828
2039
|
inputRef: inputMerged,
|
|
1829
2040
|
open: pop.open,
|
|
1830
2041
|
display: formatDate(st[0], { locale, calendar }),
|
|
1831
|
-
placeholder: props.placeholder ||
|
|
2042
|
+
placeholder: props.placeholder || dt.datePlaceholder,
|
|
1832
2043
|
hasValue: st[0] != null,
|
|
1833
2044
|
clearable: props.clearable,
|
|
1834
2045
|
onClear: function() {
|
|
1835
2046
|
st[1](null);
|
|
1836
2047
|
inputRef.current && inputRef.current.focus();
|
|
1837
2048
|
},
|
|
1838
|
-
clearLabel:
|
|
1839
|
-
toggleLabel:
|
|
2049
|
+
clearLabel: dt.clearDate,
|
|
2050
|
+
toggleLabel: dt.openCalendar,
|
|
1840
2051
|
onCommit: commit,
|
|
1841
2052
|
onToggle: function(o) {
|
|
1842
2053
|
pop.setOpen(o);
|
|
@@ -1848,7 +2059,7 @@ window.Aura = (() => {
|
|
|
1848
2059
|
var DateRangePicker = React17.forwardRef(
|
|
1849
2060
|
function DateRangePicker2(props, ref) {
|
|
1850
2061
|
const auto = uid(), id = props.id || auto, dialogId = id + "-cal";
|
|
1851
|
-
const ctx = useAuraLocale(), locale = props.locale || ctx.locale || "
|
|
2062
|
+
const ctx = useAuraLocale(), locale = props.locale || ctx.locale || "en", calendar = props.calendar || ctx.calendar || defaultCalendar(locale), dt = dateText(locale);
|
|
1852
2063
|
const st = useMaybeControlled(
|
|
1853
2064
|
props.value,
|
|
1854
2065
|
props.defaultValue || { start: null, end: null },
|
|
@@ -1895,7 +2106,7 @@ window.Aura = (() => {
|
|
|
1895
2106
|
id: dialogId,
|
|
1896
2107
|
role: "dialog",
|
|
1897
2108
|
"aria-modal": false,
|
|
1898
|
-
"aria-label": props.label ||
|
|
2109
|
+
"aria-label": props.label || dt.chooseDates,
|
|
1899
2110
|
className: "aura-cal__popover",
|
|
1900
2111
|
style: pop.pos,
|
|
1901
2112
|
onKeyDown: function(e) {
|
|
@@ -1905,7 +2116,7 @@ window.Aura = (() => {
|
|
|
1905
2116
|
} else trapTab(e, pop.popRef.current);
|
|
1906
2117
|
}
|
|
1907
2118
|
},
|
|
1908
|
-
/* @__PURE__ */ React17.createElement("p", { className: "aura-cal__hint", "aria-live": "polite" }, draft[0] ?
|
|
2119
|
+
/* @__PURE__ */ React17.createElement("p", { className: "aura-cal__hint", "aria-live": "polite" }, draft[0] ? dt.chooseEnd : dt.chooseStart),
|
|
1909
2120
|
/* @__PURE__ */ React17.createElement(
|
|
1910
2121
|
Calendar,
|
|
1911
2122
|
{
|
|
@@ -1942,15 +2153,15 @@ window.Aura = (() => {
|
|
|
1942
2153
|
inputRef: inputMerged,
|
|
1943
2154
|
open: pop.open,
|
|
1944
2155
|
display: show(v),
|
|
1945
|
-
placeholder: props.placeholder ||
|
|
2156
|
+
placeholder: props.placeholder || dt.rangePlaceholder,
|
|
1946
2157
|
hasValue: v.start != null,
|
|
1947
2158
|
clearable: props.clearable,
|
|
1948
2159
|
onClear: function() {
|
|
1949
2160
|
st[1]({ start: null, end: null });
|
|
1950
2161
|
inputRef.current && inputRef.current.focus();
|
|
1951
2162
|
},
|
|
1952
|
-
clearLabel:
|
|
1953
|
-
toggleLabel:
|
|
2163
|
+
clearLabel: dt.clearDates,
|
|
2164
|
+
toggleLabel: dt.openCalendar,
|
|
1954
2165
|
onCommit: commit,
|
|
1955
2166
|
onToggle: function(op) {
|
|
1956
2167
|
pop.setOpen(op);
|
|
@@ -2321,7 +2532,11 @@ window.Aura = (() => {
|
|
|
2321
2532
|
});
|
|
2322
2533
|
const rows = props.rows || [];
|
|
2323
2534
|
const rowKey = props.rowKey || columns[0].key;
|
|
2324
|
-
const
|
|
2535
|
+
const manual = !!props.manual;
|
|
2536
|
+
const Link = useLinkComponent(props.linkComponent);
|
|
2537
|
+
const busy = !!props.loading;
|
|
2538
|
+
const refreshing = busy && manual && rows.length > 0;
|
|
2539
|
+
const loading = busy && !refreshing;
|
|
2325
2540
|
const selectable = !!props.selectable;
|
|
2326
2541
|
const reorderable = props.reorderable !== false && !!props.columnControls;
|
|
2327
2542
|
const controls = !!props.columnControls;
|
|
@@ -2453,7 +2668,7 @@ window.Aura = (() => {
|
|
|
2453
2668
|
}
|
|
2454
2669
|
const view = React23.useMemo(
|
|
2455
2670
|
function() {
|
|
2456
|
-
if (!sort || !sort.key || !byKey[sort.key]) return rows;
|
|
2671
|
+
if (manual || !sort || !sort.key || !byKey[sort.key]) return rows;
|
|
2457
2672
|
const col = byKey[sort.key];
|
|
2458
2673
|
const val = col.sortValue || (col.pill ? function(r) {
|
|
2459
2674
|
return TONE_ORDER[col.tones && col.tones[r[col.key]] || toneFor(r[col.key])];
|
|
@@ -2469,7 +2684,7 @@ window.Aura = (() => {
|
|
|
2469
2684
|
return p[0];
|
|
2470
2685
|
});
|
|
2471
2686
|
},
|
|
2472
|
-
[rows, sort && sort.key, sort && sort.dir]
|
|
2687
|
+
[rows, manual, sort && sort.key, sort && sort.dir]
|
|
2473
2688
|
);
|
|
2474
2689
|
function nextSort(key) {
|
|
2475
2690
|
if (!sort || sort.key !== key) return { key, dir: "asc" };
|
|
@@ -2477,18 +2692,51 @@ window.Aura = (() => {
|
|
|
2477
2692
|
return null;
|
|
2478
2693
|
}
|
|
2479
2694
|
const pageSize = props.pageSize || 0;
|
|
2480
|
-
const
|
|
2695
|
+
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;
|
|
2696
|
+
const pageCount = pageSize ? Math.max(1, Math.ceil(total / pageSize)) : 1;
|
|
2481
2697
|
const page = Math.min(Math.max(1, pageState[0] || 1), pageCount);
|
|
2482
2698
|
const first = pageSize ? (page - 1) * pageSize : 0;
|
|
2483
|
-
const pageRows = pageSize ? view.slice(first, first + pageSize) : view;
|
|
2699
|
+
const pageRows = pageSize && !manual ? view.slice(first, first + pageSize) : view;
|
|
2700
|
+
const canSortAny = !busy && (manual ? total > 1 : rows.length > 1);
|
|
2701
|
+
const shownTotal = manual && props.totalRows == null ? first + rows.length : total;
|
|
2702
|
+
const linkPaging = !!props.getPageHref && !props.onPageChange;
|
|
2703
|
+
const prevLink = React23.useRef(null), nextLink = React23.useRef(null);
|
|
2484
2704
|
function goPage(p, focus) {
|
|
2485
2705
|
const next = Math.min(Math.max(1, p), pageCount);
|
|
2486
2706
|
if (next === page) return false;
|
|
2707
|
+
if (linkPaging) {
|
|
2708
|
+
const a = next === page - 1 ? prevLink.current : next === page + 1 ? nextLink.current : null;
|
|
2709
|
+
if (a) a.click();
|
|
2710
|
+
return false;
|
|
2711
|
+
}
|
|
2487
2712
|
if (focus) pending.current = focus;
|
|
2488
2713
|
pageState[1](next);
|
|
2489
2714
|
if (scrollRef.current) scrollRef.current.scrollTop = 0;
|
|
2490
2715
|
return true;
|
|
2491
2716
|
}
|
|
2717
|
+
function sortBy(key) {
|
|
2718
|
+
setSort(nextSort(key));
|
|
2719
|
+
if (!(manual && linkPaging)) goPage(1);
|
|
2720
|
+
}
|
|
2721
|
+
const rowHref = props.getRowHref;
|
|
2722
|
+
function followRow(el, e) {
|
|
2723
|
+
const a = el && el.querySelector(".aura-table__row-link");
|
|
2724
|
+
if (!a) return;
|
|
2725
|
+
a.dispatchEvent(
|
|
2726
|
+
new MouseEvent("click", {
|
|
2727
|
+
bubbles: true,
|
|
2728
|
+
cancelable: true,
|
|
2729
|
+
view: window,
|
|
2730
|
+
ctrlKey: !!(e && e.ctrlKey),
|
|
2731
|
+
metaKey: !!(e && e.metaKey),
|
|
2732
|
+
shiftKey: !!(e && e.shiftKey),
|
|
2733
|
+
altKey: !!(e && e.altKey)
|
|
2734
|
+
})
|
|
2735
|
+
);
|
|
2736
|
+
}
|
|
2737
|
+
function rowLinkWrap(r, content) {
|
|
2738
|
+
return rowHref ? /* @__PURE__ */ React23.createElement(Link, { href: rowHref(r), className: "aura-table__row-link" }, content) : content;
|
|
2739
|
+
}
|
|
2492
2740
|
const height = props.height || 0;
|
|
2493
2741
|
const virtual = !!height && !loading && pageRows.length > 0;
|
|
2494
2742
|
const bodyH = Math.max(ROW_H, height - ROW_H);
|
|
@@ -2807,10 +3055,10 @@ window.Aura = (() => {
|
|
|
2807
3055
|
else handled = false;
|
|
2808
3056
|
} else if (k === " " || k === "Enter") {
|
|
2809
3057
|
if (r === 0 && !col && selectable && nRows) toggleAll();
|
|
2810
|
-
else if (r === 0 && col && col.sortable &&
|
|
2811
|
-
|
|
2812
|
-
|
|
2813
|
-
|
|
3058
|
+
else if (r === 0 && col && col.sortable && canSortAny) sortBy(col.key);
|
|
3059
|
+
else if (r > 0 && k === " " && selectable) toggle(row[rowKey], !selSet[row[rowKey]]);
|
|
3060
|
+
else if (r > 0 && k === "Enter" && rowHref && !target.querySelector("button, a[href]:not(.aura-table__row-link), input, select, textarea"))
|
|
3061
|
+
followRow(target.closest('[role="row"]'), e);
|
|
2814
3062
|
else if (r > 0 && k === "Enter" && target.querySelector("button, a[href], input, select, textarea"))
|
|
2815
3063
|
target.querySelector("button, a[href], input, select, textarea").focus();
|
|
2816
3064
|
else if (r > 0 && k === "Enter" && props.onRowActivate) props.onRowActivate(row);
|
|
@@ -2853,7 +3101,7 @@ window.Aura = (() => {
|
|
|
2853
3101
|
vis.forEach(function(c, i) {
|
|
2854
3102
|
const ci = i + (selectable ? 1 : 0);
|
|
2855
3103
|
const isSorted = sort && sort.key === c.key;
|
|
2856
|
-
const canSort = c.sortable &&
|
|
3104
|
+
const canSort = c.sortable && canSortAny;
|
|
2857
3105
|
const ariaSort = isSorted && canSort ? sort.dir === "desc" ? "descending" : "ascending" : canSort ? "none" : void 0;
|
|
2858
3106
|
const pin = isPinned(c), edge = pin && i === nPinned - 1;
|
|
2859
3107
|
head.push(
|
|
@@ -2869,12 +3117,13 @@ window.Aura = (() => {
|
|
|
2869
3117
|
"data-rc": "0:" + ci,
|
|
2870
3118
|
className: cx(
|
|
2871
3119
|
"aura-table__th",
|
|
3120
|
+
c.align === "end" && "is-end",
|
|
2872
3121
|
pin && "is-pinned",
|
|
2873
3122
|
edge && "is-pin-edge",
|
|
2874
3123
|
drag && drag.over === c.key && (drag.after ? "is-drop-after" : "is-drop-before"),
|
|
2875
3124
|
drag && drag.key === c.key && "is-dragging"
|
|
2876
3125
|
),
|
|
2877
|
-
draggable: reorderable && !
|
|
3126
|
+
draggable: reorderable && !busy ? true : void 0,
|
|
2878
3127
|
onFocus: function(e) {
|
|
2879
3128
|
if (e.target === e.currentTarget) activeState[1]({ r: 0, c: ci });
|
|
2880
3129
|
},
|
|
@@ -2912,8 +3161,7 @@ window.Aura = (() => {
|
|
|
2912
3161
|
tabIndex: -1,
|
|
2913
3162
|
className: cx("aura-table__sort", isSorted && "is-active"),
|
|
2914
3163
|
onClick: function() {
|
|
2915
|
-
|
|
2916
|
-
goPage(1);
|
|
3164
|
+
sortBy(c.key);
|
|
2917
3165
|
activeState[1]({ r: 0, c: ci });
|
|
2918
3166
|
}
|
|
2919
3167
|
},
|
|
@@ -2966,6 +3214,10 @@ window.Aura = (() => {
|
|
|
2966
3214
|
}
|
|
2967
3215
|
)
|
|
2968
3216
|
);
|
|
3217
|
+
function cellContent(c, r) {
|
|
3218
|
+
const v = r[c.key];
|
|
3219
|
+
return c.render ? c.render(r) : c.pill ? /* @__PURE__ */ React23.createElement(StatusPill, { ...{ tone: c.tones && c.tones[v] } }, v) : v;
|
|
3220
|
+
}
|
|
2969
3221
|
function rowCells(r, i, k, isSel) {
|
|
2970
3222
|
const ri = i + 1;
|
|
2971
3223
|
const cells = [/* @__PURE__ */ React23.createElement("span", { key: "__gl", className: "aura-table__gutter", "aria-hidden": true })];
|
|
@@ -3012,6 +3264,7 @@ window.Aura = (() => {
|
|
|
3012
3264
|
className: cx(
|
|
3013
3265
|
"aura-table__td",
|
|
3014
3266
|
c.mono && "aura-table__mono",
|
|
3267
|
+
c.align === "end" && "is-end",
|
|
3015
3268
|
pin && "is-pinned",
|
|
3016
3269
|
pin && j === nPinned - 1 && "is-pin-edge"
|
|
3017
3270
|
),
|
|
@@ -3020,7 +3273,7 @@ window.Aura = (() => {
|
|
|
3020
3273
|
if (activeState[0].r !== ri || activeState[0].c !== ci) activeState[1]({ r: ri, c: ci });
|
|
3021
3274
|
}
|
|
3022
3275
|
},
|
|
3023
|
-
|
|
3276
|
+
j === 0 ? rowLinkWrap(r, cellContent(c, r)) : cellContent(c, r)
|
|
3024
3277
|
)
|
|
3025
3278
|
);
|
|
3026
3279
|
});
|
|
@@ -3049,13 +3302,21 @@ window.Aura = (() => {
|
|
|
3049
3302
|
);
|
|
3050
3303
|
vis.forEach(function(c, j) {
|
|
3051
3304
|
sk.push(
|
|
3052
|
-
/* @__PURE__ */ React23.createElement(
|
|
3305
|
+
/* @__PURE__ */ React23.createElement(
|
|
3053
3306
|
"span",
|
|
3054
3307
|
{
|
|
3055
|
-
|
|
3056
|
-
|
|
3057
|
-
|
|
3058
|
-
|
|
3308
|
+
key: c.key,
|
|
3309
|
+
className: cx("aura-table__td", c.align === "end" && "is-end", isPinned(c) && "is-pinned"),
|
|
3310
|
+
style: cellStyle(c, j)
|
|
3311
|
+
},
|
|
3312
|
+
/* @__PURE__ */ React23.createElement(
|
|
3313
|
+
"span",
|
|
3314
|
+
{
|
|
3315
|
+
className: cx("aura-skel", c.pill && "aura-skel--pill"),
|
|
3316
|
+
style: c.pill ? void 0 : { width: SKELETON_WIDTHS[(i + j) % SKELETON_WIDTHS.length] }
|
|
3317
|
+
}
|
|
3318
|
+
)
|
|
3319
|
+
)
|
|
3059
3320
|
);
|
|
3060
3321
|
});
|
|
3061
3322
|
sk.push(
|
|
@@ -3083,12 +3344,17 @@ window.Aura = (() => {
|
|
|
3083
3344
|
role: "row",
|
|
3084
3345
|
"aria-rowindex": first + i + 2,
|
|
3085
3346
|
"aria-selected": selectable ? isSel : void 0,
|
|
3086
|
-
className: cx(
|
|
3347
|
+
className: cx(
|
|
3348
|
+
"aura-table__row",
|
|
3349
|
+
isSel && "is-selected",
|
|
3350
|
+
(props.onRowActivate || rowHref) && "is-actionable"
|
|
3351
|
+
),
|
|
3087
3352
|
style: rowStyle,
|
|
3088
3353
|
onClick: function(e) {
|
|
3089
3354
|
const el = e.target;
|
|
3090
3355
|
if (el.closest && el.closest(".aura-check, button, a, input")) return;
|
|
3091
|
-
if (
|
|
3356
|
+
if (rowHref) followRow(e.currentTarget, e);
|
|
3357
|
+
else if (props.onRowActivate) props.onRowActivate(r);
|
|
3092
3358
|
}
|
|
3093
3359
|
},
|
|
3094
3360
|
rowCells(r, i, k, isSel)
|
|
@@ -3100,31 +3366,42 @@ window.Aura = (() => {
|
|
|
3100
3366
|
bodyRows.push(/* @__PURE__ */ React23.createElement("div", { key: "__bot", style: { height: (pageRows.length - end) * ROW_H + "px" }, "aria-hidden": true }));
|
|
3101
3367
|
}
|
|
3102
3368
|
let foot = null;
|
|
3103
|
-
|
|
3104
|
-
const
|
|
3105
|
-
|
|
3106
|
-
|
|
3107
|
-
|
|
3108
|
-
|
|
3109
|
-
|
|
3110
|
-
|
|
3111
|
-
|
|
3112
|
-
|
|
3113
|
-
|
|
3114
|
-
|
|
3115
|
-
|
|
3369
|
+
function pagerButton(dir) {
|
|
3370
|
+
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";
|
|
3371
|
+
if (props.getPageHref && !off)
|
|
3372
|
+
return /* @__PURE__ */ React23.createElement(
|
|
3373
|
+
Link,
|
|
3374
|
+
{
|
|
3375
|
+
ref: dir < 0 ? prevLink : nextLink,
|
|
3376
|
+
href: props.getPageHref(p),
|
|
3377
|
+
className: "aura-icon-btn",
|
|
3378
|
+
"aria-label": label,
|
|
3379
|
+
onClick: function(e) {
|
|
3380
|
+
if (props.onPageChange) {
|
|
3381
|
+
e.preventDefault();
|
|
3382
|
+
pageState[1](p);
|
|
3383
|
+
}
|
|
3384
|
+
}
|
|
3385
|
+
},
|
|
3386
|
+
/* @__PURE__ */ React23.createElement(Icon, { name: icon })
|
|
3387
|
+
);
|
|
3388
|
+
return /* @__PURE__ */ React23.createElement(
|
|
3116
3389
|
IconButton,
|
|
3117
3390
|
{
|
|
3118
|
-
icon
|
|
3119
|
-
label
|
|
3120
|
-
disabled:
|
|
3391
|
+
icon,
|
|
3392
|
+
label,
|
|
3393
|
+
disabled: off,
|
|
3121
3394
|
onClick: function() {
|
|
3122
|
-
goPage(
|
|
3395
|
+
goPage(p);
|
|
3123
3396
|
}
|
|
3124
3397
|
}
|
|
3125
|
-
)
|
|
3398
|
+
);
|
|
3399
|
+
}
|
|
3400
|
+
if (pageSize && (rows.length || busy)) {
|
|
3401
|
+
const from = rows.length ? first + 1 : 0, to = manual ? first + rows.length : Math.min(first + pageSize, view.length);
|
|
3402
|
+
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)));
|
|
3126
3403
|
} else if (height && rows.length && !loading) {
|
|
3127
|
-
foot = /* @__PURE__ */ React23.createElement("div", { className: "aura-table__foot" }, /* @__PURE__ */ React23.createElement("span", null, t.rowCount(
|
|
3404
|
+
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));
|
|
3128
3405
|
}
|
|
3129
3406
|
if (stacked) {
|
|
3130
3407
|
const titleCol = vis[0], pillCol = vis.filter(function(c) {
|
|
@@ -3145,25 +3422,28 @@ window.Aura = (() => {
|
|
|
3145
3422
|
const em2 = props.empty || {};
|
|
3146
3423
|
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));
|
|
3147
3424
|
} else {
|
|
3148
|
-
const cellVal =
|
|
3149
|
-
const v = r[c.key];
|
|
3150
|
-
return c.render ? c.render(r) : c.pill ? /* @__PURE__ */ React23.createElement(StatusPill, { ...{ tone: c.tones && c.tones[v] } }, v) : v;
|
|
3151
|
-
};
|
|
3425
|
+
const cellVal = cellContent;
|
|
3152
3426
|
cardBody = /* @__PURE__ */ React23.createElement("ul", { className: "aura-table__cards", "aria-label": props.label }, pageRows.map(function(r) {
|
|
3153
3427
|
const k = r[rowKey], isSel = !!selSet[k];
|
|
3154
3428
|
return /* @__PURE__ */ React23.createElement(
|
|
3155
3429
|
"li",
|
|
3156
3430
|
{
|
|
3157
3431
|
key: k,
|
|
3158
|
-
className: cx(
|
|
3159
|
-
|
|
3432
|
+
className: cx(
|
|
3433
|
+
"aura-table__card",
|
|
3434
|
+
isSel && "is-selected",
|
|
3435
|
+
(props.onRowActivate || rowHref) && "is-actionable"
|
|
3436
|
+
),
|
|
3437
|
+
tabIndex: props.onRowActivate && !rowHref ? 0 : void 0,
|
|
3160
3438
|
onClick: function(e) {
|
|
3161
3439
|
const el = e.target;
|
|
3162
3440
|
if (el.closest && el.closest(".aura-check, button, a, input")) return;
|
|
3163
|
-
if (
|
|
3441
|
+
if (rowHref) followRow(e.currentTarget, e);
|
|
3442
|
+
else if (props.onRowActivate) props.onRowActivate(r);
|
|
3164
3443
|
},
|
|
3165
3444
|
onKeyDown: function(e) {
|
|
3166
|
-
if (e.target === e.currentTarget && e.key === "Enter" && props.onRowActivate
|
|
3445
|
+
if (e.target === e.currentTarget && e.key === "Enter" && props.onRowActivate && !rowHref)
|
|
3446
|
+
props.onRowActivate(r);
|
|
3167
3447
|
}
|
|
3168
3448
|
},
|
|
3169
3449
|
/* @__PURE__ */ React23.createElement("div", { className: "aura-table__card-head" }, selectable ? /* @__PURE__ */ React23.createElement(
|
|
@@ -3175,7 +3455,7 @@ window.Aura = (() => {
|
|
|
3175
3455
|
toggle(k, on);
|
|
3176
3456
|
}
|
|
3177
3457
|
}
|
|
3178
|
-
) : 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) {
|
|
3458
|
+
) : 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) {
|
|
3179
3459
|
return /* @__PURE__ */ React23.createElement("span", { key: c.key, className: "aura-table__card-actions" }, cellVal(c, r));
|
|
3180
3460
|
})),
|
|
3181
3461
|
rest.length ? /* @__PURE__ */ React23.createElement("dl", { className: "aura-table__card-fields" }, rest.map(function(c) {
|
|
@@ -3188,12 +3468,13 @@ window.Aura = (() => {
|
|
|
3188
3468
|
"div",
|
|
3189
3469
|
{
|
|
3190
3470
|
ref: wrapMerged,
|
|
3191
|
-
className: cx("aura-table aura-table--stacked", props.className),
|
|
3471
|
+
className: cx("aura-table aura-table--stacked", refreshing && "is-refreshing", props.className),
|
|
3192
3472
|
role: "region",
|
|
3193
3473
|
"aria-label": props.label,
|
|
3194
|
-
"aria-busy":
|
|
3474
|
+
"aria-busy": busy || void 0
|
|
3195
3475
|
},
|
|
3196
|
-
|
|
3476
|
+
refreshing ? /* @__PURE__ */ React23.createElement("span", { className: "aura-table__busy-bar", "aria-hidden": true }) : null,
|
|
3477
|
+
selectable && pageRows.length && !busy ? /* @__PURE__ */ React23.createElement("div", { className: "aura-table__stack-bar" }, /* @__PURE__ */ React23.createElement(
|
|
3197
3478
|
Checkbox,
|
|
3198
3479
|
{
|
|
3199
3480
|
checked: all,
|
|
@@ -3211,52 +3492,64 @@ window.Aura = (() => {
|
|
|
3211
3492
|
scrollPaddingTop: ROW_H + "px"
|
|
3212
3493
|
};
|
|
3213
3494
|
if (height) scrollStyle.height = height + "px";
|
|
3214
|
-
return /* @__PURE__ */ React23.createElement(
|
|
3495
|
+
return /* @__PURE__ */ React23.createElement(
|
|
3215
3496
|
"div",
|
|
3216
3497
|
{
|
|
3217
|
-
ref:
|
|
3218
|
-
|
|
3219
|
-
|
|
3498
|
+
ref: wrapMerged,
|
|
3499
|
+
className: cx("aura-table", scrolledX[0] && "is-scrolled-x", refreshing && "is-refreshing", props.className)
|
|
3500
|
+
},
|
|
3501
|
+
refreshing ? /* @__PURE__ */ React23.createElement("span", { className: "aura-table__busy-bar", "aria-hidden": true }) : null,
|
|
3502
|
+
/* @__PURE__ */ React23.createElement(
|
|
3503
|
+
"div",
|
|
3504
|
+
{
|
|
3505
|
+
ref: function(el) {
|
|
3506
|
+
scrollRef.current = el;
|
|
3507
|
+
gridRef.current = el;
|
|
3508
|
+
},
|
|
3509
|
+
className: "aura-table__scroll",
|
|
3510
|
+
style: scrollStyle,
|
|
3511
|
+
role: "grid",
|
|
3512
|
+
"aria-label": props.label,
|
|
3513
|
+
"aria-busy": busy || void 0,
|
|
3514
|
+
"aria-rowcount": loading ? -1 : shownTotal + 1,
|
|
3515
|
+
"aria-colcount": nCols,
|
|
3516
|
+
"aria-multiselectable": selectable || void 0,
|
|
3517
|
+
onKeyDown: onGridKey,
|
|
3518
|
+
onScroll: function(e) {
|
|
3519
|
+
const t2 = e.currentTarget;
|
|
3520
|
+
if (virtual && Math.abs(t2.scrollTop - scrollTop) >= ROW_H / 2) setScrollTop(t2.scrollTop);
|
|
3521
|
+
else if (virtual && (t2.scrollTop === 0 || t2.scrollTop + t2.clientHeight >= t2.scrollHeight - 1))
|
|
3522
|
+
setScrollTop(t2.scrollTop);
|
|
3523
|
+
const sx = t2.scrollLeft > 0;
|
|
3524
|
+
if (sx !== scrolledX[0]) scrolledX[1](sx);
|
|
3525
|
+
}
|
|
3220
3526
|
},
|
|
3221
|
-
className: "aura-
|
|
3222
|
-
|
|
3223
|
-
|
|
3224
|
-
|
|
3225
|
-
|
|
3226
|
-
|
|
3227
|
-
|
|
3228
|
-
|
|
3229
|
-
|
|
3230
|
-
|
|
3231
|
-
|
|
3232
|
-
|
|
3233
|
-
|
|
3234
|
-
setScrollTop(t2.scrollTop);
|
|
3235
|
-
const sx = t2.scrollLeft > 0;
|
|
3236
|
-
if (sx !== scrolledX[0]) scrolledX[1](sx);
|
|
3527
|
+
/* @__PURE__ */ React23.createElement("div", { className: "aura-table__head", role: "row", "aria-rowindex": 1, style: rowStyle }, head),
|
|
3528
|
+
body
|
|
3529
|
+
),
|
|
3530
|
+
busy ? /* @__PURE__ */ React23.createElement("span", { className: "aura-sr-only", role: "status" }, t.loadingRows) : null,
|
|
3531
|
+
controls ? /* @__PURE__ */ React23.createElement("div", { className: "aura-table__picker" }, /* @__PURE__ */ React23.createElement(
|
|
3532
|
+
IconButton,
|
|
3533
|
+
{
|
|
3534
|
+
icon: "columns-3",
|
|
3535
|
+
label: t.showHideColumns,
|
|
3536
|
+
"aria-haspopup": "menu",
|
|
3537
|
+
onClick: function(e) {
|
|
3538
|
+
openMenu("picker", null, e.currentTarget);
|
|
3539
|
+
}
|
|
3237
3540
|
}
|
|
3238
|
-
|
|
3239
|
-
|
|
3240
|
-
|
|
3241
|
-
|
|
3242
|
-
|
|
3243
|
-
|
|
3244
|
-
|
|
3245
|
-
|
|
3246
|
-
|
|
3247
|
-
onClick: function(e) {
|
|
3248
|
-
openMenu("picker", null, e.currentTarget);
|
|
3541
|
+
)) : null,
|
|
3542
|
+
foot,
|
|
3543
|
+
menu ? /* @__PURE__ */ React23.createElement(
|
|
3544
|
+
Menu,
|
|
3545
|
+
{
|
|
3546
|
+
anchor: menu.anchor,
|
|
3547
|
+
onClose: closeMenu,
|
|
3548
|
+
label: menu.kind === "picker" ? t.columns : t.column(byKey[menu.key] && byKey[menu.key].label),
|
|
3549
|
+
items: menu.kind === "picker" ? pickerItems() : byKey[menu.key] ? columnMenuItems(byKey[menu.key]) : []
|
|
3249
3550
|
}
|
|
3250
|
-
|
|
3251
|
-
)
|
|
3252
|
-
Menu,
|
|
3253
|
-
{
|
|
3254
|
-
anchor: menu.anchor,
|
|
3255
|
-
onClose: closeMenu,
|
|
3256
|
-
label: menu.kind === "picker" ? t.columns : t.column(byKey[menu.key] && byKey[menu.key].label),
|
|
3257
|
-
items: menu.kind === "picker" ? pickerItems() : byKey[menu.key] ? columnMenuItems(byKey[menu.key]) : []
|
|
3258
|
-
}
|
|
3259
|
-
) : null);
|
|
3551
|
+
) : null
|
|
3552
|
+
);
|
|
3260
3553
|
});
|
|
3261
3554
|
|
|
3262
3555
|
// src/Card.tsx
|
|
@@ -3369,43 +3662,150 @@ window.Aura = (() => {
|
|
|
3369
3662
|
|
|
3370
3663
|
// src/SideNav.tsx
|
|
3371
3664
|
var React26 = __toESM(require_react(), 1);
|
|
3665
|
+
function contains(it, id) {
|
|
3666
|
+
return !!id && !!it.children && it.children.some(function(c) {
|
|
3667
|
+
return c.id === id || contains(c, id);
|
|
3668
|
+
});
|
|
3669
|
+
}
|
|
3372
3670
|
var SideNav = React26.forwardRef(function SideNav2(props, ref) {
|
|
3373
3671
|
const t = useStrings();
|
|
3672
|
+
const Link = useLinkComponent(props.linkComponent);
|
|
3673
|
+
const base = uid();
|
|
3374
3674
|
const st = useMaybeControlled(
|
|
3375
3675
|
props.value,
|
|
3376
3676
|
props.defaultValue,
|
|
3377
3677
|
props.onChange
|
|
3378
3678
|
);
|
|
3379
|
-
|
|
3380
|
-
|
|
3381
|
-
|
|
3679
|
+
const active = st[0];
|
|
3680
|
+
const sections = props.sections || [{ items: props.items || [] }];
|
|
3681
|
+
const openState = React26.useState({}), toggled = openState[0], setToggled = openState[1];
|
|
3682
|
+
function isOpen(it) {
|
|
3683
|
+
if (toggled[it.id] != null) return toggled[it.id];
|
|
3684
|
+
return !!it.defaultOpen || contains(it, active);
|
|
3685
|
+
}
|
|
3686
|
+
React26.useEffect(
|
|
3687
|
+
function() {
|
|
3688
|
+
if (!active) return;
|
|
3689
|
+
const next = {};
|
|
3690
|
+
let changed = false;
|
|
3691
|
+
sections.forEach(function(s) {
|
|
3692
|
+
(function walk(list) {
|
|
3693
|
+
list.forEach(function(it) {
|
|
3694
|
+
if (it.children) {
|
|
3695
|
+
if (contains(it, active) && toggled[it.id] !== true) {
|
|
3696
|
+
next[it.id] = true;
|
|
3697
|
+
changed = true;
|
|
3698
|
+
}
|
|
3699
|
+
walk(it.children);
|
|
3700
|
+
}
|
|
3701
|
+
});
|
|
3702
|
+
})(s.items);
|
|
3703
|
+
});
|
|
3704
|
+
if (changed) setToggled(Object.assign({}, toggled, next));
|
|
3705
|
+
},
|
|
3706
|
+
[active]
|
|
3707
|
+
);
|
|
3708
|
+
const navRef = React26.useRef(null);
|
|
3709
|
+
function onKeyDown(e) {
|
|
3710
|
+
const k = e.key;
|
|
3711
|
+
if (k !== "ArrowDown" && k !== "ArrowUp" && k !== "Home" && k !== "End") return;
|
|
3712
|
+
const root = navRef.current;
|
|
3713
|
+
if (!root) return;
|
|
3714
|
+
const items = Array.prototype.slice.call(root.querySelectorAll(".aura-nav__item"));
|
|
3715
|
+
const visible = items.filter(function(el) {
|
|
3716
|
+
return el.offsetParent !== null || el === document.activeElement;
|
|
3717
|
+
});
|
|
3718
|
+
const i = visible.indexOf(document.activeElement);
|
|
3719
|
+
if (i < 0) return;
|
|
3720
|
+
e.preventDefault();
|
|
3721
|
+
const j = k === "Home" ? 0 : k === "End" ? visible.length - 1 : Math.max(0, Math.min(visible.length - 1, i + (k === "ArrowDown" ? 1 : -1)));
|
|
3722
|
+
visible[j].focus();
|
|
3723
|
+
}
|
|
3724
|
+
function inner(it, group, open) {
|
|
3725
|
+
return [
|
|
3382
3726
|
it.icon ? /* @__PURE__ */ React26.createElement(Icon, { key: "i", name: it.icon }) : null,
|
|
3383
3727
|
/* @__PURE__ */ React26.createElement("span", { key: "l", className: "aura-nav__label" }, it.label),
|
|
3384
|
-
it.
|
|
3728
|
+
it.badge != null ? /* @__PURE__ */ React26.createElement("span", { key: "b", className: "aura-nav__badge" }, it.badge) : null,
|
|
3729
|
+
it.count != null ? /* @__PURE__ */ React26.createElement("span", { key: "c", className: "aura-nav__count" }, it.count) : null,
|
|
3730
|
+
group ? /* @__PURE__ */ React26.createElement(Icon, { key: "g", name: "chevron-down", className: cx("aura-nav__chevron", open && "is-open") }) : null
|
|
3385
3731
|
];
|
|
3732
|
+
}
|
|
3733
|
+
function item(it, depth) {
|
|
3734
|
+
if (it.children) {
|
|
3735
|
+
const open = isOpen(it);
|
|
3736
|
+
const listId = base + "-" + it.id;
|
|
3737
|
+
const holdsActive = contains(it, active);
|
|
3738
|
+
return /* @__PURE__ */ React26.createElement("li", { key: it.id, className: "aura-nav__group" }, /* @__PURE__ */ React26.createElement(
|
|
3739
|
+
"button",
|
|
3740
|
+
{
|
|
3741
|
+
type: "button",
|
|
3742
|
+
className: cx("aura-nav__item", "aura-nav__item--group", holdsActive && "has-active"),
|
|
3743
|
+
"aria-expanded": open,
|
|
3744
|
+
"aria-controls": listId,
|
|
3745
|
+
style: depth ? { ["--aura-nav-depth"]: depth } : void 0,
|
|
3746
|
+
onClick: function() {
|
|
3747
|
+
const next = Object.assign({}, toggled);
|
|
3748
|
+
next[it.id] = !open;
|
|
3749
|
+
setToggled(next);
|
|
3750
|
+
},
|
|
3751
|
+
onKeyDown: function(e) {
|
|
3752
|
+
if (e.key === "ArrowRight" && !open) {
|
|
3753
|
+
e.preventDefault();
|
|
3754
|
+
setToggled(Object.assign({}, toggled, { [it.id]: true }));
|
|
3755
|
+
} else if (e.key === "ArrowLeft" && open) {
|
|
3756
|
+
e.preventDefault();
|
|
3757
|
+
setToggled(Object.assign({}, toggled, { [it.id]: false }));
|
|
3758
|
+
}
|
|
3759
|
+
}
|
|
3760
|
+
},
|
|
3761
|
+
inner(it, true, open)
|
|
3762
|
+
), /* @__PURE__ */ React26.createElement("ul", { id: listId, className: "aura-nav__list aura-nav__sub", hidden: !open }, it.children.map(function(c) {
|
|
3763
|
+
return item(c, depth + 1);
|
|
3764
|
+
})));
|
|
3765
|
+
}
|
|
3766
|
+
const on = active === it.id;
|
|
3386
3767
|
const common = {
|
|
3387
3768
|
className: cx("aura-nav__item", on && "is-active"),
|
|
3388
3769
|
"aria-current": on ? "page" : void 0,
|
|
3770
|
+
style: depth ? { ["--aura-nav-depth"]: depth } : void 0,
|
|
3389
3771
|
onClick: function(e) {
|
|
3390
3772
|
if (!it.href) e.preventDefault();
|
|
3391
3773
|
st[1](it.id);
|
|
3392
3774
|
}
|
|
3393
3775
|
};
|
|
3394
|
-
return /* @__PURE__ */ React26.createElement("li", { key: it.id }, it.href ? /* @__PURE__ */ React26.createElement(
|
|
3776
|
+
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)));
|
|
3395
3777
|
}
|
|
3396
|
-
return /* @__PURE__ */ React26.createElement(
|
|
3397
|
-
|
|
3398
|
-
|
|
3778
|
+
return /* @__PURE__ */ React26.createElement(
|
|
3779
|
+
"nav",
|
|
3780
|
+
{
|
|
3781
|
+
ref: function(el) {
|
|
3782
|
+
navRef.current = el;
|
|
3783
|
+
if (typeof ref === "function") ref(el);
|
|
3784
|
+
else if (ref) ref.current = el;
|
|
3785
|
+
},
|
|
3786
|
+
className: cx("aura-nav", props.className),
|
|
3787
|
+
"aria-label": props.label || t.mainNav,
|
|
3788
|
+
onKeyDown
|
|
3789
|
+
},
|
|
3790
|
+
props.header ? /* @__PURE__ */ React26.createElement("div", { className: "aura-nav__header" }, props.header) : null,
|
|
3791
|
+
/* @__PURE__ */ React26.createElement("div", { className: "aura-nav__scroll" }, sections.map(function(s, i) {
|
|
3792
|
+
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) {
|
|
3793
|
+
return item(it, 0);
|
|
3794
|
+
})));
|
|
3795
|
+
})),
|
|
3796
|
+
props.footer ? /* @__PURE__ */ React26.createElement("div", { className: "aura-nav__footer" }, props.footer) : null
|
|
3797
|
+
);
|
|
3399
3798
|
});
|
|
3400
3799
|
|
|
3401
3800
|
// src/Breadcrumb.tsx
|
|
3402
3801
|
var React27 = __toESM(require_react(), 1);
|
|
3403
3802
|
var Breadcrumb = React27.forwardRef(function Breadcrumb2(props, ref) {
|
|
3404
3803
|
const t = useStrings();
|
|
3804
|
+
const Link = useLinkComponent();
|
|
3405
3805
|
const items = props.items || [];
|
|
3406
3806
|
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) {
|
|
3407
3807
|
const last = i === items.length - 1;
|
|
3408
|
-
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(
|
|
3808
|
+
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" }));
|
|
3409
3809
|
})));
|
|
3410
3810
|
});
|
|
3411
3811
|
|
|
@@ -3616,8 +4016,11 @@ window.Aura = (() => {
|
|
|
3616
4016
|
const ch = props.change;
|
|
3617
4017
|
const dir = ch && (ch.direction || "flat");
|
|
3618
4018
|
const tone2 = ch && (ch.tone || (dir === "up" ? "positive" : dir === "down" ? "negative" : "neutral"));
|
|
3619
|
-
const
|
|
3620
|
-
const
|
|
4019
|
+
const Link = useLinkComponent();
|
|
4020
|
+
const v = props.value;
|
|
4021
|
+
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, ""));
|
|
4022
|
+
const Tag3 = props.href ? Link : props.onClick ? "button" : "div";
|
|
4023
|
+
const interactive = !!(props.href || props.onClick);
|
|
3621
4024
|
return /* @__PURE__ */ React35.createElement(
|
|
3622
4025
|
Tag3,
|
|
3623
4026
|
{
|
|
@@ -3629,7 +4032,7 @@ window.Aura = (() => {
|
|
|
3629
4032
|
"aria-busy": props.loading || void 0
|
|
3630
4033
|
},
|
|
3631
4034
|
/* @__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),
|
|
3632
|
-
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),
|
|
4035
|
+
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),
|
|
3633
4036
|
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
|
|
3634
4037
|
);
|
|
3635
4038
|
});
|
|
@@ -4247,6 +4650,20 @@ window.Aura = (() => {
|
|
|
4247
4650
|
}
|
|
4248
4651
|
return c;
|
|
4249
4652
|
}
|
|
4653
|
+
function atLuminance(hex, Y) {
|
|
4654
|
+
const o = rgbToOklch(hexToRgb(hex)), C = Math.max(o[1], 0.02);
|
|
4655
|
+
let lo = 0, hi = 1, c = hex;
|
|
4656
|
+
for (let i = 0; i < 30; i++) {
|
|
4657
|
+
const mid = (lo + hi) / 2;
|
|
4658
|
+
c = oklchToHex(mid, C, o[2]);
|
|
4659
|
+
if (luminance(c) < Y) lo = mid;
|
|
4660
|
+
else hi = mid;
|
|
4661
|
+
}
|
|
4662
|
+
return c;
|
|
4663
|
+
}
|
|
4664
|
+
var CHART_Y = { light: 0.075, dark: 0.46 };
|
|
4665
|
+
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] };
|
|
4666
|
+
var CHART_2 = "#0a8b7a";
|
|
4250
4667
|
var ZINC = { 0: "#ffffff", 50: "#fafafa", 100: "#f4f4f5", 800: "#27272a", 900: "#18181b", 950: "#09090b" };
|
|
4251
4668
|
var INK = "#18181b";
|
|
4252
4669
|
function createTheme(opts) {
|
|
@@ -4265,6 +4682,14 @@ window.Aura = (() => {
|
|
|
4265
4682
|
L["alert-info-fg"] = fit(b[800], [b[50]], 4.5, -1);
|
|
4266
4683
|
L["alert-info-border"] = b[200];
|
|
4267
4684
|
L["mesh-from"] = b[400];
|
|
4685
|
+
L["chart-1"] = atLuminance(o.brand, CHART_Y.light);
|
|
4686
|
+
D["chart-1"] = atLuminance(o.brand, CHART_Y.dark);
|
|
4687
|
+
SEQ_Y.light.forEach(function(y, i) {
|
|
4688
|
+
L["chart-seq-" + (i + 1)] = atLuminance(o.brand, y);
|
|
4689
|
+
});
|
|
4690
|
+
SEQ_Y.dark.forEach(function(y, i) {
|
|
4691
|
+
D["chart-seq-" + (i + 1)] = atLuminance(o.brand, y);
|
|
4692
|
+
});
|
|
4268
4693
|
D["fg-accent"] = fit(b[300], darkGrounds, 4.5, 1);
|
|
4269
4694
|
D["accent-violet"] = fit(b[400], darkGrounds, 3, 1);
|
|
4270
4695
|
D["focus-ring"] = fit(b[400], darkGrounds, 3, 1);
|
|
@@ -4272,8 +4697,8 @@ window.Aura = (() => {
|
|
|
4272
4697
|
D["alert-info-bg"] = D["bg-selected"];
|
|
4273
4698
|
D["alert-info-fg"] = fit(b[300], [D["alert-info-bg"]], 4.5, 1);
|
|
4274
4699
|
D["alert-info-border"] = mix(ZINC[900], b[400], 0.4);
|
|
4275
|
-
D["status-progress-bg"] = b[
|
|
4276
|
-
D["status-progress-fg"] =
|
|
4700
|
+
D["status-progress-bg"] = mix(ZINC[900], b[500], 0.2);
|
|
4701
|
+
D["status-progress-fg"] = fit(b[300], [D["status-progress-bg"]], 4.5, 1);
|
|
4277
4702
|
if (s) {
|
|
4278
4703
|
L["accent-dot"] = s[200];
|
|
4279
4704
|
L["accent-lime"] = s[200];
|
|
@@ -4324,9 +4749,23 @@ window.Aura = (() => {
|
|
|
4324
4749
|
check("dark", "fg-accent", g[0], 4.5, D["fg-accent"], g[1]);
|
|
4325
4750
|
check("dark", "focus-ring", g[0], 3, D["focus-ring"], g[1]);
|
|
4326
4751
|
});
|
|
4752
|
+
[
|
|
4753
|
+
["light", ZINC[0], L],
|
|
4754
|
+
["light", ZINC[50], L],
|
|
4755
|
+
["dark", ZINC[900], D],
|
|
4756
|
+
["dark", ZINC[950], D]
|
|
4757
|
+
].forEach(function(g) {
|
|
4758
|
+
const t = g[0], ground = g[1], m = g[2], name = ground === ZINC[0] || ground === ZINC[900] ? "bg-surface" : "bg-canvas";
|
|
4759
|
+
["chart-1", "chart-seq-1", "chart-seq-5"].forEach(function(k) {
|
|
4760
|
+
check(t, k, name, 3, m[k], ground);
|
|
4761
|
+
});
|
|
4762
|
+
});
|
|
4763
|
+
check("light", "chart-1", "chart-2 (lightness step)", 1.8, L["chart-1"], CHART_2);
|
|
4764
|
+
check("dark", "chart-1", "chart-2 (lightness step)", 1.8, D["chart-1"], CHART_2);
|
|
4327
4765
|
check("light", "fg-primary", "bg-selected", 4.5, INK, L["bg-selected"]);
|
|
4328
4766
|
check("dark", "fg-primary", "bg-selected", 4.5, "#ffffff", D["bg-selected"]);
|
|
4329
4767
|
check("light", "status-progress-fg", "status-progress-bg", 4.5, L["status-progress-fg"], L["status-progress-bg"]);
|
|
4768
|
+
check("dark", "status-progress-fg", "status-progress-bg", 4.5, D["status-progress-fg"], D["status-progress-bg"]);
|
|
4330
4769
|
check("light", "alert-info-fg", "alert-info-bg", 4.5, L["alert-info-fg"], L["alert-info-bg"]);
|
|
4331
4770
|
check("dark", "alert-info-fg", "alert-info-bg", 4.5, D["alert-info-fg"], D["alert-info-bg"]);
|
|
4332
4771
|
if (o.primary === "brand") {
|
|
@@ -4403,7 +4842,14 @@ window.Aura = (() => {
|
|
|
4403
4842
|
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){}})();`;
|
|
4404
4843
|
}
|
|
4405
4844
|
function ColorSchemeScript(props) {
|
|
4406
|
-
return /* @__PURE__ */ React39.createElement(
|
|
4845
|
+
return /* @__PURE__ */ React39.createElement(
|
|
4846
|
+
"script",
|
|
4847
|
+
{
|
|
4848
|
+
"data-aura-color-scheme": "",
|
|
4849
|
+
nonce: props.nonce,
|
|
4850
|
+
dangerouslySetInnerHTML: { __html: colorSchemeScript(props) }
|
|
4851
|
+
}
|
|
4852
|
+
);
|
|
4407
4853
|
}
|
|
4408
4854
|
function systemDark() {
|
|
4409
4855
|
return typeof window !== "undefined" && !!window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches;
|
|
@@ -4656,6 +5102,7 @@ window.Aura = (() => {
|
|
|
4656
5102
|
if (p >= 1 && p <= count && p !== page) st[1](p);
|
|
4657
5103
|
}
|
|
4658
5104
|
const link = props.getHref;
|
|
5105
|
+
const Link = useLinkComponent();
|
|
4659
5106
|
function item(p, label, extra) {
|
|
4660
5107
|
const common = Object.assign(
|
|
4661
5108
|
{
|
|
@@ -4666,7 +5113,7 @@ window.Aura = (() => {
|
|
|
4666
5113
|
extra
|
|
4667
5114
|
);
|
|
4668
5115
|
return link ? /* @__PURE__ */ React45.createElement(
|
|
4669
|
-
|
|
5116
|
+
Link,
|
|
4670
5117
|
{
|
|
4671
5118
|
href: link(p),
|
|
4672
5119
|
onClick: function(e) {
|