@jirawatpyk/aura-react 4.9.0 → 4.10.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 +12 -1
- package/dist/aura.bundle.js +862 -447
- package/dist/cjs/index.cjs +862 -447
- package/dist/esm/Breadcrumb.js +3 -2
- package/dist/esm/Button.js +5 -3
- package/dist/esm/DataTable.js +176 -94
- package/dist/esm/DatePicker.js +85 -23
- 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/colorScheme.js +8 -1
- package/dist/esm/locale.js +109 -2
- package/dist/esm/theme.js +35 -0
- package/dist/index.d.ts +71 -33
- package/dist/styles.css +43 -2
- 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",
|
|
@@ -740,34 +460,432 @@ window.Aura = (() => {
|
|
|
740
460
|
pageN: function(p) {
|
|
741
461
|
return "\u0E2B\u0E19\u0E49\u0E32 " + p;
|
|
742
462
|
},
|
|
743
|
-
accepts: function(list, max) {
|
|
744
|
-
return [list, max && "\u0E44\u0E21\u0E48\u0E40\u0E01\u0E34\u0E19 " + max + " \u0E15\u0E48\u0E2D\u0E44\u0E1F\u0E25\u0E4C"].filter(Boolean).join(" \xB7 ");
|
|
463
|
+
accepts: function(list, max) {
|
|
464
|
+
return [list, max && "\u0E44\u0E21\u0E48\u0E40\u0E01\u0E34\u0E19 " + max + " \u0E15\u0E48\u0E2D\u0E44\u0E1F\u0E25\u0E4C"].filter(Boolean).join(" \xB7 ");
|
|
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
|
+
]);
|
|
607
|
+
const Tag3 = disabled ? "a" : Link;
|
|
608
|
+
return /* @__PURE__ */ React4.createElement(
|
|
609
|
+
Tag3,
|
|
610
|
+
{
|
|
611
|
+
...rest,
|
|
612
|
+
ref,
|
|
613
|
+
href: disabled ? void 0 : props.href,
|
|
614
|
+
role: disabled ? "link" : void 0,
|
|
615
|
+
"aria-disabled": disabled || void 0,
|
|
616
|
+
tabIndex: disabled ? -1 : props.tabIndex,
|
|
617
|
+
className: cx("aura-btn", "aura-btn--" + variant, props.className),
|
|
618
|
+
onClick: disabled ? void 0 : props.onClick
|
|
619
|
+
},
|
|
620
|
+
props.icon ? /* @__PURE__ */ React4.createElement(Icon, { name: props.icon }) : null,
|
|
621
|
+
props.children,
|
|
622
|
+
props.iconRight ? /* @__PURE__ */ React4.createElement(Icon, { name: props.iconRight }) : null
|
|
623
|
+
);
|
|
624
|
+
}
|
|
625
|
+
var Button = React4.forwardRef(
|
|
626
|
+
function Button2(all, ref) {
|
|
627
|
+
const Link = useLinkComponent(all.linkComponent);
|
|
628
|
+
if (typeof all.href === "string") {
|
|
629
|
+
return ButtonLink(all, ref, Link);
|
|
630
|
+
}
|
|
631
|
+
const props = all;
|
|
632
|
+
const variant = props.variant || "primary";
|
|
633
|
+
const loading = !!props.loading;
|
|
634
|
+
const rest = omit(props, ["variant", "className", "children", "type", "icon", "iconRight", "loading", "onClick"]);
|
|
635
|
+
return /* @__PURE__ */ React4.createElement(
|
|
636
|
+
"button",
|
|
637
|
+
{
|
|
638
|
+
...rest,
|
|
639
|
+
ref,
|
|
640
|
+
type: props.type || "button",
|
|
641
|
+
className: cx("aura-btn", "aura-btn--" + variant, loading && "is-loading", props.className),
|
|
642
|
+
"aria-busy": loading || void 0,
|
|
643
|
+
"aria-disabled": loading || void 0,
|
|
644
|
+
onClick: loading ? function(e) {
|
|
645
|
+
e.preventDefault();
|
|
646
|
+
} : props.onClick
|
|
647
|
+
},
|
|
648
|
+
loading ? /* @__PURE__ */ React4.createElement(Icon, { name: "loader-circle", className: "aura-spin" }) : props.icon ? /* @__PURE__ */ React4.createElement(Icon, { name: props.icon }) : null,
|
|
649
|
+
props.children,
|
|
650
|
+
props.iconRight && !loading ? /* @__PURE__ */ React4.createElement(Icon, { name: props.iconRight }) : null
|
|
651
|
+
);
|
|
652
|
+
}
|
|
653
|
+
);
|
|
654
|
+
|
|
655
|
+
// src/IconButton.tsx
|
|
656
|
+
var React5 = __toESM(require_react(), 1);
|
|
657
|
+
var IconButton = React5.forwardRef(function IconButton2(props, ref) {
|
|
658
|
+
const rest = omit(props, ["icon", "label", "className", "size", "tone"]);
|
|
659
|
+
return /* @__PURE__ */ React5.createElement(
|
|
660
|
+
"button",
|
|
661
|
+
{
|
|
662
|
+
...rest,
|
|
663
|
+
ref,
|
|
664
|
+
type: props.type || "button",
|
|
665
|
+
"aria-label": props.label,
|
|
666
|
+
title: props.label,
|
|
667
|
+
className: cx("aura-icon-btn", props.tone === "danger" && "aura-icon-btn--danger", props.className)
|
|
668
|
+
},
|
|
669
|
+
/* @__PURE__ */ React5.createElement(Icon, { name: props.icon, size: props.size || "sm" })
|
|
670
|
+
);
|
|
671
|
+
});
|
|
672
|
+
|
|
673
|
+
// src/Menu.tsx
|
|
674
|
+
var React6 = __toESM(require_react(), 1);
|
|
675
|
+
var import_react_dom = __toESM(require_react_dom(), 1);
|
|
676
|
+
var Menu = React6.forwardRef(function Menu2(props, ref) {
|
|
677
|
+
const own = React6.useRef(null), merged = useMergedRef(ref, own);
|
|
678
|
+
const posState = React6.useState(null);
|
|
679
|
+
const pos = posState[0], setPos = posState[1];
|
|
680
|
+
const items = props.items || [];
|
|
681
|
+
const mounted = useMounted();
|
|
682
|
+
useIsoLayoutEffect(
|
|
683
|
+
function() {
|
|
684
|
+
const a = props.anchor, m = own.current;
|
|
685
|
+
if (!a || !m) return;
|
|
686
|
+
const r = a.getBoundingClientRect(), mh = m.offsetHeight, mw = m.offsetWidth;
|
|
687
|
+
let top = r.bottom + 4;
|
|
688
|
+
if (top + mh > window.innerHeight - 8 && r.top - mh - 4 > 8) top = r.top - mh - 4;
|
|
689
|
+
const left = Math.max(8, Math.min(r.right - mw, window.innerWidth - mw - 8));
|
|
690
|
+
setPos({ top, left });
|
|
691
|
+
},
|
|
692
|
+
[props.anchor, mounted]
|
|
693
|
+
);
|
|
694
|
+
React6.useEffect(
|
|
695
|
+
function() {
|
|
696
|
+
if (!mounted) return;
|
|
697
|
+
const first = own.current && own.current.querySelector('[role^="menuitem"]:not([disabled])');
|
|
698
|
+
if (first && props.autoFocus !== false) first.focus();
|
|
699
|
+
function outside(e) {
|
|
700
|
+
if (own.current && !own.current.contains(e.target) && !(props.anchor && props.anchor.contains(e.target)))
|
|
701
|
+
props.onClose(false);
|
|
702
|
+
}
|
|
703
|
+
function onScroll(e) {
|
|
704
|
+
if (own.current && !own.current.contains(e.target)) props.onClose(false);
|
|
705
|
+
}
|
|
706
|
+
document.addEventListener("pointerdown", outside, true);
|
|
707
|
+
window.addEventListener("scroll", onScroll, true);
|
|
708
|
+
window.addEventListener("resize", onScroll);
|
|
709
|
+
return function() {
|
|
710
|
+
document.removeEventListener("pointerdown", outside, true);
|
|
711
|
+
window.removeEventListener("scroll", onScroll, true);
|
|
712
|
+
window.removeEventListener("resize", onScroll);
|
|
713
|
+
};
|
|
714
|
+
},
|
|
715
|
+
[mounted]
|
|
716
|
+
);
|
|
717
|
+
function onKeyDown(e) {
|
|
718
|
+
const list = Array.prototype.slice.call(
|
|
719
|
+
own.current.querySelectorAll('[role^="menuitem"]:not([disabled])')
|
|
720
|
+
);
|
|
721
|
+
const i = list.indexOf(document.activeElement);
|
|
722
|
+
if (e.key === "ArrowDown") {
|
|
723
|
+
e.preventDefault();
|
|
724
|
+
list[(i + 1) % list.length].focus();
|
|
725
|
+
} else if (e.key === "ArrowUp") {
|
|
726
|
+
e.preventDefault();
|
|
727
|
+
list[(i - 1 + list.length) % list.length].focus();
|
|
728
|
+
} else if (e.key === "Home") {
|
|
729
|
+
e.preventDefault();
|
|
730
|
+
list[0].focus();
|
|
731
|
+
} else if (e.key === "End") {
|
|
732
|
+
e.preventDefault();
|
|
733
|
+
list[list.length - 1].focus();
|
|
734
|
+
} else if (e.key === "Escape") {
|
|
735
|
+
e.preventDefault();
|
|
736
|
+
props.onClose(true);
|
|
737
|
+
} else if (e.key === "Tab") {
|
|
738
|
+
props.onClose(true);
|
|
739
|
+
}
|
|
740
|
+
e.stopPropagation();
|
|
741
|
+
}
|
|
742
|
+
const el = /* @__PURE__ */ React6.createElement(
|
|
743
|
+
"div",
|
|
744
|
+
{
|
|
745
|
+
ref: merged,
|
|
746
|
+
role: "menu",
|
|
747
|
+
"aria-label": props.label,
|
|
748
|
+
className: "aura-menu",
|
|
749
|
+
onKeyDown,
|
|
750
|
+
style: { top: pos ? pos.top : -9999, left: pos ? pos.left : -9999 }
|
|
751
|
+
},
|
|
752
|
+
items.map(function(it, i) {
|
|
753
|
+
if (it.separator) return /* @__PURE__ */ React6.createElement("div", { key: "s" + i, role: "separator", className: "aura-menu__sep" });
|
|
754
|
+
const isCheck = it.checked !== void 0;
|
|
755
|
+
return /* @__PURE__ */ React6.createElement(
|
|
756
|
+
"button",
|
|
757
|
+
{
|
|
758
|
+
key: i,
|
|
759
|
+
type: "button",
|
|
760
|
+
tabIndex: -1,
|
|
761
|
+
disabled: it.disabled,
|
|
762
|
+
role: isCheck ? "menuitemcheckbox" : "menuitem",
|
|
763
|
+
"aria-checked": isCheck ? !!it.checked : void 0,
|
|
764
|
+
className: "aura-menu__item",
|
|
765
|
+
onClick: function() {
|
|
766
|
+
it.onSelect();
|
|
767
|
+
if (!it.keepOpen) props.onClose(true);
|
|
768
|
+
}
|
|
769
|
+
},
|
|
770
|
+
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" }),
|
|
771
|
+
/* @__PURE__ */ React6.createElement("span", { className: "aura-menu__label" }, it.label),
|
|
772
|
+
it.hint ? /* @__PURE__ */ React6.createElement("span", { className: "aura-menu__hint" }, it.hint) : null
|
|
773
|
+
);
|
|
774
|
+
})
|
|
775
|
+
);
|
|
776
|
+
return mounted ? (0, import_react_dom.createPortal)(el, document.body) : null;
|
|
777
|
+
});
|
|
778
|
+
|
|
779
|
+
// src/DropdownMenu.tsx
|
|
780
|
+
var React7 = __toESM(require_react(), 1);
|
|
781
|
+
var DropdownMenu = React7.forwardRef(function DropdownMenu2(props, ref) {
|
|
782
|
+
const st = React7.useState(null), anchor = st[0], setAnchor = st[1];
|
|
783
|
+
const wrap = React7.useRef(null), wrapMerged = useMergedRef(ref, wrap);
|
|
784
|
+
const child = React7.Children.only(props.trigger);
|
|
785
|
+
function toggle(e) {
|
|
786
|
+
if (child.props.onClick) child.props.onClick(e);
|
|
787
|
+
const el = wrap.current && (wrap.current.querySelector('button, [role="button"], a') || wrap.current);
|
|
788
|
+
setAnchor(anchor ? null : el);
|
|
789
|
+
}
|
|
790
|
+
function onKeyDown(e) {
|
|
791
|
+
if ((e.key === "ArrowDown" || e.key === "ArrowUp") && !anchor) {
|
|
792
|
+
e.preventDefault();
|
|
793
|
+
setAnchor(wrap.current.querySelector('button, [role="button"], a') || wrap.current);
|
|
745
794
|
}
|
|
746
795
|
}
|
|
747
|
-
|
|
748
|
-
|
|
749
|
-
|
|
750
|
-
|
|
751
|
-
|
|
752
|
-
|
|
753
|
-
|
|
754
|
-
|
|
755
|
-
|
|
756
|
-
|
|
757
|
-
|
|
796
|
+
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(
|
|
797
|
+
Menu,
|
|
798
|
+
{
|
|
799
|
+
anchor,
|
|
800
|
+
label: props.label,
|
|
801
|
+
items: props.items,
|
|
802
|
+
onClose: function(restore) {
|
|
803
|
+
setAnchor(null);
|
|
804
|
+
if (restore && typeof anchor.focus === "function") anchor.focus();
|
|
805
|
+
}
|
|
806
|
+
}
|
|
807
|
+
) : null);
|
|
808
|
+
});
|
|
809
|
+
|
|
810
|
+
// src/Checkbox.tsx
|
|
811
|
+
var React8 = __toESM(require_react(), 1);
|
|
812
|
+
var Checkbox = React8.forwardRef(function Checkbox2(props, ref) {
|
|
813
|
+
const own = React8.useRef(null), merged = useMergedRef(ref, own);
|
|
814
|
+
const st = useMaybeControlled(props.checked, !!props.defaultChecked, props.onChange);
|
|
815
|
+
const on = !!st[0];
|
|
816
|
+
React8.useEffect(function() {
|
|
817
|
+
if (own.current) own.current.indeterminate = !!props.indeterminate;
|
|
818
|
+
});
|
|
819
|
+
const rest = omit(props, [
|
|
820
|
+
"checked",
|
|
821
|
+
"defaultChecked",
|
|
822
|
+
"onChange",
|
|
823
|
+
"indeterminate",
|
|
824
|
+
"label",
|
|
825
|
+
"children",
|
|
826
|
+
"description",
|
|
827
|
+
"className",
|
|
828
|
+
"tabIndex",
|
|
829
|
+
"disabled"
|
|
830
|
+
]);
|
|
831
|
+
const labelled = props.children != null;
|
|
832
|
+
const descId = props.description && props.id ? props.id + "-desc" : void 0;
|
|
833
|
+
return /* @__PURE__ */ React8.createElement(
|
|
834
|
+
"label",
|
|
835
|
+
{
|
|
836
|
+
className: cx("aura-check", labelled && "aura-check--labelled", props.disabled && "is-disabled", props.className),
|
|
837
|
+
onClick: function(e) {
|
|
838
|
+
e.stopPropagation();
|
|
839
|
+
}
|
|
758
840
|
},
|
|
759
|
-
|
|
841
|
+
/* @__PURE__ */ React8.createElement(
|
|
842
|
+
"input",
|
|
843
|
+
{
|
|
844
|
+
...rest,
|
|
845
|
+
ref: merged,
|
|
846
|
+
type: "checkbox",
|
|
847
|
+
className: "aura-check__input",
|
|
848
|
+
checked: on,
|
|
849
|
+
tabIndex: props.tabIndex,
|
|
850
|
+
disabled: props.disabled,
|
|
851
|
+
"aria-describedby": descId,
|
|
852
|
+
"aria-label": labelled ? void 0 : props.label,
|
|
853
|
+
onChange: function(e) {
|
|
854
|
+
st[1](e.target.checked);
|
|
855
|
+
}
|
|
856
|
+
}
|
|
857
|
+
),
|
|
858
|
+
/* @__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),
|
|
859
|
+
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
860
|
);
|
|
761
|
-
|
|
762
|
-
|
|
763
|
-
|
|
764
|
-
|
|
765
|
-
|
|
766
|
-
|
|
767
|
-
|
|
861
|
+
});
|
|
862
|
+
|
|
863
|
+
// src/StatusPill.tsx
|
|
864
|
+
var React9 = __toESM(require_react(), 1);
|
|
865
|
+
var TONE_ICON = {
|
|
866
|
+
neutral: "circle",
|
|
867
|
+
progress: "circle-dot-dashed",
|
|
868
|
+
ready: "circle-check",
|
|
869
|
+
blocked: "ban"
|
|
870
|
+
};
|
|
871
|
+
var TONE_WORDS = {
|
|
872
|
+
ready: ["ready", "done", "complete", "completed", "approved", "live", "passed"],
|
|
873
|
+
progress: ["in progress", "in review", "review", "syncing", "running", "pending"],
|
|
874
|
+
blocked: ["blocked", "failed", "error", "rejected", "on hold", "cancelled"]
|
|
875
|
+
};
|
|
876
|
+
function toneFor(status) {
|
|
877
|
+
const s = String(status == null ? "" : status).trim().toLowerCase();
|
|
878
|
+
for (const t in TONE_WORDS) if (TONE_WORDS[t].indexOf(s) >= 0) return t;
|
|
879
|
+
return "neutral";
|
|
768
880
|
}
|
|
881
|
+
var TONE_ORDER = { neutral: 0, progress: 1, ready: 2, blocked: 3 };
|
|
882
|
+
var StatusPill = React9.forwardRef(function StatusPill2(props, ref) {
|
|
883
|
+
const tone2 = props.tone || toneFor(props.children);
|
|
884
|
+
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);
|
|
885
|
+
});
|
|
769
886
|
|
|
770
887
|
// src/Field.tsx
|
|
888
|
+
var React10 = __toESM(require_react(), 1);
|
|
771
889
|
var h2 = React10.createElement;
|
|
772
890
|
var Field = React10.forwardRef(function Field2(props, ref) {
|
|
773
891
|
const t = useStrings();
|
|
@@ -1353,8 +1471,69 @@ window.Aura = (() => {
|
|
|
1353
1471
|
function same(a, b) {
|
|
1354
1472
|
return !!a && !!b && a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
|
|
1355
1473
|
}
|
|
1474
|
+
var TAGS = { th: "th-TH", en: "en-GB", sv: "sv-SE" };
|
|
1475
|
+
function defaultCalendar(locale) {
|
|
1476
|
+
return locale === "sv" ? "gregory" : "buddhist";
|
|
1477
|
+
}
|
|
1356
1478
|
function localeTag(locale, calendar) {
|
|
1357
|
-
|
|
1479
|
+
const cal = calendar || defaultCalendar(locale);
|
|
1480
|
+
return (TAGS[locale || "th"] || "th-TH") + "-u-ca-" + (cal === "gregory" ? "gregory" : "buddhist");
|
|
1481
|
+
}
|
|
1482
|
+
var DATE_TEXT = {
|
|
1483
|
+
th: {
|
|
1484
|
+
prevYears: "\u0E0A\u0E48\u0E27\u0E07\u0E1B\u0E35\u0E01\u0E48\u0E2D\u0E19\u0E2B\u0E19\u0E49\u0E32",
|
|
1485
|
+
nextYears: "\u0E0A\u0E48\u0E27\u0E07\u0E1B\u0E35\u0E16\u0E31\u0E14\u0E44\u0E1B",
|
|
1486
|
+
prevMonth: "\u0E40\u0E14\u0E37\u0E2D\u0E19\u0E01\u0E48\u0E2D\u0E19\u0E2B\u0E19\u0E49\u0E32",
|
|
1487
|
+
nextMonth: "\u0E40\u0E14\u0E37\u0E2D\u0E19\u0E16\u0E31\u0E14\u0E44\u0E1B",
|
|
1488
|
+
today: "\u0E27\u0E31\u0E19\u0E19\u0E35\u0E49",
|
|
1489
|
+
clear: "\u0E25\u0E49\u0E32\u0E07",
|
|
1490
|
+
chooseDate: "\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E27\u0E31\u0E19\u0E17\u0E35\u0E48",
|
|
1491
|
+
datePlaceholder: "\u0E27\u0E27/\u0E14\u0E14/\u0E1B\u0E1B\u0E1B\u0E1B",
|
|
1492
|
+
clearDate: "\u0E25\u0E49\u0E32\u0E07\u0E27\u0E31\u0E19\u0E17\u0E35\u0E48",
|
|
1493
|
+
openCalendar: "\u0E40\u0E1B\u0E34\u0E14\u0E1B\u0E0F\u0E34\u0E17\u0E34\u0E19",
|
|
1494
|
+
chooseDates: "\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E0A\u0E48\u0E27\u0E07\u0E27\u0E31\u0E19\u0E17\u0E35\u0E48",
|
|
1495
|
+
rangePlaceholder: "\u0E27\u0E27/\u0E14\u0E14/\u0E1B\u0E1B\u0E1B\u0E1B \u2013 \u0E27\u0E27/\u0E14\u0E14/\u0E1B\u0E1B\u0E1B\u0E1B",
|
|
1496
|
+
clearDates: "\u0E25\u0E49\u0E32\u0E07\u0E0A\u0E48\u0E27\u0E07\u0E27\u0E31\u0E19\u0E17\u0E35\u0E48",
|
|
1497
|
+
chooseStart: "\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E27\u0E31\u0E19\u0E40\u0E23\u0E34\u0E48\u0E21\u0E15\u0E49\u0E19",
|
|
1498
|
+
chooseEnd: "\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E27\u0E31\u0E19\u0E2A\u0E34\u0E49\u0E19\u0E2A\u0E38\u0E14"
|
|
1499
|
+
},
|
|
1500
|
+
en: {
|
|
1501
|
+
prevYears: "Previous years",
|
|
1502
|
+
nextYears: "Next years",
|
|
1503
|
+
prevMonth: "Previous month",
|
|
1504
|
+
nextMonth: "Next month",
|
|
1505
|
+
today: "Today",
|
|
1506
|
+
clear: "Clear",
|
|
1507
|
+
chooseDate: "Choose date",
|
|
1508
|
+
datePlaceholder: "dd/mm/yyyy",
|
|
1509
|
+
clearDate: "Clear date",
|
|
1510
|
+
openCalendar: "Open calendar",
|
|
1511
|
+
chooseDates: "Choose dates",
|
|
1512
|
+
rangePlaceholder: "dd/mm/yyyy \u2013 dd/mm/yyyy",
|
|
1513
|
+
clearDates: "Clear dates",
|
|
1514
|
+
chooseStart: "Choose the start date",
|
|
1515
|
+
chooseEnd: "Choose the end date"
|
|
1516
|
+
},
|
|
1517
|
+
sv: {
|
|
1518
|
+
prevYears: "Tidigare \xE5r",
|
|
1519
|
+
nextYears: "Senare \xE5r",
|
|
1520
|
+
prevMonth: "F\xF6reg\xE5ende m\xE5nad",
|
|
1521
|
+
nextMonth: "N\xE4sta m\xE5nad",
|
|
1522
|
+
today: "Idag",
|
|
1523
|
+
clear: "Rensa",
|
|
1524
|
+
chooseDate: "V\xE4lj datum",
|
|
1525
|
+
datePlaceholder: "\xE5\xE5\xE5\xE5-mm-dd",
|
|
1526
|
+
clearDate: "Rensa datum",
|
|
1527
|
+
openCalendar: "\xD6ppna kalendern",
|
|
1528
|
+
chooseDates: "V\xE4lj datum",
|
|
1529
|
+
rangePlaceholder: "\xE5\xE5\xE5\xE5-mm-dd \u2013 \xE5\xE5\xE5\xE5-mm-dd",
|
|
1530
|
+
clearDates: "Rensa datumen",
|
|
1531
|
+
chooseStart: "V\xE4lj startdatum",
|
|
1532
|
+
chooseEnd: "V\xE4lj slutdatum"
|
|
1533
|
+
}
|
|
1534
|
+
};
|
|
1535
|
+
function dateText(locale) {
|
|
1536
|
+
return DATE_TEXT[locale || "th"] || DATE_TEXT.th;
|
|
1358
1537
|
}
|
|
1359
1538
|
var fmtCache = {};
|
|
1360
1539
|
var PRESETS = {
|
|
@@ -1377,12 +1556,12 @@ window.Aura = (() => {
|
|
|
1377
1556
|
function monthIndex(word) {
|
|
1378
1557
|
if (!MONTHS) {
|
|
1379
1558
|
MONTHS = {};
|
|
1380
|
-
["th-TH", "en-GB"].forEach(function(tag) {
|
|
1559
|
+
["th-TH", "en-GB", "sv-SE"].forEach(function(tag) {
|
|
1381
1560
|
["short", "long"].forEach(function(w) {
|
|
1382
1561
|
for (let i = 0; i < 12; i++) {
|
|
1383
1562
|
const n2 = new Intl.DateTimeFormat(tag, { month: w }).format(new Date(2020, i, 1)).toLowerCase().replace(/\.$/, "");
|
|
1384
1563
|
MONTHS[n2] = i;
|
|
1385
|
-
if (/^[a-
|
|
1564
|
+
if (/^[a-zåäö]/.test(n2)) MONTHS[n2.slice(0, 3)] = i;
|
|
1386
1565
|
}
|
|
1387
1566
|
});
|
|
1388
1567
|
});
|
|
@@ -1411,8 +1590,8 @@ window.Aura = (() => {
|
|
|
1411
1590
|
return dt.getMonth() === mo - 1 && dt.getDate() === d ? toISO(dt) : null;
|
|
1412
1591
|
}
|
|
1413
1592
|
var Calendar = React17.forwardRef(function Calendar2(props, ref) {
|
|
1414
|
-
const ctx = useAuraLocale(), locale = props.locale || ctx.locale || "th", calendar = props.calendar || ctx.calendar ||
|
|
1415
|
-
const weekStart = props.weekStartsOn == null ? 0 : props.weekStartsOn;
|
|
1593
|
+
const ctx = useAuraLocale(), locale = props.locale || ctx.locale || "th", calendar = props.calendar || ctx.calendar || defaultCalendar(locale), tag = localeTag(locale, calendar);
|
|
1594
|
+
const weekStart = props.weekStartsOn == null ? locale === "sv" ? 1 : 0 : props.weekStartsOn;
|
|
1416
1595
|
let today = /* @__PURE__ */ new Date();
|
|
1417
1596
|
today = new Date(today.getFullYear(), today.getMonth(), today.getDate());
|
|
1418
1597
|
const min = fromISO(props.min), max = fromISO(props.max);
|
|
@@ -1422,7 +1601,8 @@ window.Aura = (() => {
|
|
|
1422
1601
|
const viewState = React17.useState("days"), view = viewState[0], setView = viewState[1];
|
|
1423
1602
|
const hoverState = React17.useState(null);
|
|
1424
1603
|
const gridRef = React17.useRef(null), gridMerged = useMergedRef(ref, gridRef), moved = React17.useRef(false);
|
|
1425
|
-
const th = locale
|
|
1604
|
+
const th = locale === "th";
|
|
1605
|
+
const dt = dateText(locale);
|
|
1426
1606
|
function disabled(d) {
|
|
1427
1607
|
return !!(min && d < min || max && d > max || props.isDateDisabled && props.isDateDisabled(toISO(d)));
|
|
1428
1608
|
}
|
|
@@ -1488,7 +1668,7 @@ window.Aura = (() => {
|
|
|
1488
1668
|
IconButton,
|
|
1489
1669
|
{
|
|
1490
1670
|
icon: "chevron-left",
|
|
1491
|
-
label:
|
|
1671
|
+
label: dt.prevYears,
|
|
1492
1672
|
onClick: function() {
|
|
1493
1673
|
setFocus(new Date(yr - 12, focusDate.getMonth(), 1));
|
|
1494
1674
|
}
|
|
@@ -1507,7 +1687,7 @@ window.Aura = (() => {
|
|
|
1507
1687
|
IconButton,
|
|
1508
1688
|
{
|
|
1509
1689
|
icon: "chevron-right",
|
|
1510
|
-
label:
|
|
1690
|
+
label: dt.nextYears,
|
|
1511
1691
|
onClick: function() {
|
|
1512
1692
|
setFocus(new Date(yr + 12, focusDate.getMonth(), 1));
|
|
1513
1693
|
}
|
|
@@ -1535,7 +1715,7 @@ window.Aura = (() => {
|
|
|
1535
1715
|
IconButton,
|
|
1536
1716
|
{
|
|
1537
1717
|
icon: "chevron-left",
|
|
1538
|
-
label:
|
|
1718
|
+
label: dt.prevMonth,
|
|
1539
1719
|
onClick: function() {
|
|
1540
1720
|
setFocus(addMonths(focusDate, -1));
|
|
1541
1721
|
}
|
|
@@ -1556,7 +1736,7 @@ window.Aura = (() => {
|
|
|
1556
1736
|
IconButton,
|
|
1557
1737
|
{
|
|
1558
1738
|
icon: "chevron-right",
|
|
1559
|
-
label:
|
|
1739
|
+
label: dt.nextMonth,
|
|
1560
1740
|
onClick: function() {
|
|
1561
1741
|
setFocus(addMonths(focusDate, 1));
|
|
1562
1742
|
}
|
|
@@ -1630,8 +1810,8 @@ window.Aura = (() => {
|
|
|
1630
1810
|
props.onSelect(toISO(today));
|
|
1631
1811
|
}
|
|
1632
1812
|
},
|
|
1633
|
-
|
|
1634
|
-
), props.onClear ? /* @__PURE__ */ React17.createElement("button", { type: "button", className: "aura-cal__link", onClick: props.onClear },
|
|
1813
|
+
dt.today
|
|
1814
|
+
), props.onClear ? /* @__PURE__ */ React17.createElement("button", { type: "button", className: "aura-cal__link", onClick: props.onClear }, dt.clear) : null));
|
|
1635
1815
|
});
|
|
1636
1816
|
function useCalendarPopover(boxRef) {
|
|
1637
1817
|
const openState = React17.useState(false), open = openState[0], setOpen = openState[1];
|
|
@@ -1753,7 +1933,7 @@ window.Aura = (() => {
|
|
|
1753
1933
|
}
|
|
1754
1934
|
var DatePicker = React17.forwardRef(function DatePicker2(props, ref) {
|
|
1755
1935
|
const auto = uid(), id = props.id || auto, dialogId = id + "-cal";
|
|
1756
|
-
const ctx = useAuraLocale(), locale = props.locale || ctx.locale || "th", calendar = props.calendar || ctx.calendar ||
|
|
1936
|
+
const ctx = useAuraLocale(), locale = props.locale || ctx.locale || "th", calendar = props.calendar || ctx.calendar || defaultCalendar(locale), dt = dateText(locale);
|
|
1757
1937
|
const st = useMaybeControlled(
|
|
1758
1938
|
props.value,
|
|
1759
1939
|
props.defaultValue == null ? null : props.defaultValue,
|
|
@@ -1781,7 +1961,7 @@ window.Aura = (() => {
|
|
|
1781
1961
|
id: dialogId,
|
|
1782
1962
|
role: "dialog",
|
|
1783
1963
|
"aria-modal": false,
|
|
1784
|
-
"aria-label": props.label ||
|
|
1964
|
+
"aria-label": props.label || dt.chooseDate,
|
|
1785
1965
|
className: "aura-cal__popover",
|
|
1786
1966
|
style: pop.pos,
|
|
1787
1967
|
onKeyDown: function(e) {
|
|
@@ -1828,15 +2008,15 @@ window.Aura = (() => {
|
|
|
1828
2008
|
inputRef: inputMerged,
|
|
1829
2009
|
open: pop.open,
|
|
1830
2010
|
display: formatDate(st[0], { locale, calendar }),
|
|
1831
|
-
placeholder: props.placeholder ||
|
|
2011
|
+
placeholder: props.placeholder || dt.datePlaceholder,
|
|
1832
2012
|
hasValue: st[0] != null,
|
|
1833
2013
|
clearable: props.clearable,
|
|
1834
2014
|
onClear: function() {
|
|
1835
2015
|
st[1](null);
|
|
1836
2016
|
inputRef.current && inputRef.current.focus();
|
|
1837
2017
|
},
|
|
1838
|
-
clearLabel:
|
|
1839
|
-
toggleLabel:
|
|
2018
|
+
clearLabel: dt.clearDate,
|
|
2019
|
+
toggleLabel: dt.openCalendar,
|
|
1840
2020
|
onCommit: commit,
|
|
1841
2021
|
onToggle: function(o) {
|
|
1842
2022
|
pop.setOpen(o);
|
|
@@ -1848,7 +2028,7 @@ window.Aura = (() => {
|
|
|
1848
2028
|
var DateRangePicker = React17.forwardRef(
|
|
1849
2029
|
function DateRangePicker2(props, ref) {
|
|
1850
2030
|
const auto = uid(), id = props.id || auto, dialogId = id + "-cal";
|
|
1851
|
-
const ctx = useAuraLocale(), locale = props.locale || ctx.locale || "th", calendar = props.calendar || ctx.calendar ||
|
|
2031
|
+
const ctx = useAuraLocale(), locale = props.locale || ctx.locale || "th", calendar = props.calendar || ctx.calendar || defaultCalendar(locale), dt = dateText(locale);
|
|
1852
2032
|
const st = useMaybeControlled(
|
|
1853
2033
|
props.value,
|
|
1854
2034
|
props.defaultValue || { start: null, end: null },
|
|
@@ -1895,7 +2075,7 @@ window.Aura = (() => {
|
|
|
1895
2075
|
id: dialogId,
|
|
1896
2076
|
role: "dialog",
|
|
1897
2077
|
"aria-modal": false,
|
|
1898
|
-
"aria-label": props.label ||
|
|
2078
|
+
"aria-label": props.label || dt.chooseDates,
|
|
1899
2079
|
className: "aura-cal__popover",
|
|
1900
2080
|
style: pop.pos,
|
|
1901
2081
|
onKeyDown: function(e) {
|
|
@@ -1905,7 +2085,7 @@ window.Aura = (() => {
|
|
|
1905
2085
|
} else trapTab(e, pop.popRef.current);
|
|
1906
2086
|
}
|
|
1907
2087
|
},
|
|
1908
|
-
/* @__PURE__ */ React17.createElement("p", { className: "aura-cal__hint", "aria-live": "polite" }, draft[0] ?
|
|
2088
|
+
/* @__PURE__ */ React17.createElement("p", { className: "aura-cal__hint", "aria-live": "polite" }, draft[0] ? dt.chooseEnd : dt.chooseStart),
|
|
1909
2089
|
/* @__PURE__ */ React17.createElement(
|
|
1910
2090
|
Calendar,
|
|
1911
2091
|
{
|
|
@@ -1942,15 +2122,15 @@ window.Aura = (() => {
|
|
|
1942
2122
|
inputRef: inputMerged,
|
|
1943
2123
|
open: pop.open,
|
|
1944
2124
|
display: show(v),
|
|
1945
|
-
placeholder: props.placeholder ||
|
|
2125
|
+
placeholder: props.placeholder || dt.rangePlaceholder,
|
|
1946
2126
|
hasValue: v.start != null,
|
|
1947
2127
|
clearable: props.clearable,
|
|
1948
2128
|
onClear: function() {
|
|
1949
2129
|
st[1]({ start: null, end: null });
|
|
1950
2130
|
inputRef.current && inputRef.current.focus();
|
|
1951
2131
|
},
|
|
1952
|
-
clearLabel:
|
|
1953
|
-
toggleLabel:
|
|
2132
|
+
clearLabel: dt.clearDates,
|
|
2133
|
+
toggleLabel: dt.openCalendar,
|
|
1954
2134
|
onCommit: commit,
|
|
1955
2135
|
onToggle: function(op) {
|
|
1956
2136
|
pop.setOpen(op);
|
|
@@ -2321,7 +2501,11 @@ window.Aura = (() => {
|
|
|
2321
2501
|
});
|
|
2322
2502
|
const rows = props.rows || [];
|
|
2323
2503
|
const rowKey = props.rowKey || columns[0].key;
|
|
2324
|
-
const
|
|
2504
|
+
const manual = !!props.manual;
|
|
2505
|
+
const Link = useLinkComponent(props.linkComponent);
|
|
2506
|
+
const busy = !!props.loading;
|
|
2507
|
+
const refreshing = busy && manual && rows.length > 0;
|
|
2508
|
+
const loading = busy && !refreshing;
|
|
2325
2509
|
const selectable = !!props.selectable;
|
|
2326
2510
|
const reorderable = props.reorderable !== false && !!props.columnControls;
|
|
2327
2511
|
const controls = !!props.columnControls;
|
|
@@ -2453,7 +2637,7 @@ window.Aura = (() => {
|
|
|
2453
2637
|
}
|
|
2454
2638
|
const view = React23.useMemo(
|
|
2455
2639
|
function() {
|
|
2456
|
-
if (!sort || !sort.key || !byKey[sort.key]) return rows;
|
|
2640
|
+
if (manual || !sort || !sort.key || !byKey[sort.key]) return rows;
|
|
2457
2641
|
const col = byKey[sort.key];
|
|
2458
2642
|
const val = col.sortValue || (col.pill ? function(r) {
|
|
2459
2643
|
return TONE_ORDER[col.tones && col.tones[r[col.key]] || toneFor(r[col.key])];
|
|
@@ -2469,7 +2653,7 @@ window.Aura = (() => {
|
|
|
2469
2653
|
return p[0];
|
|
2470
2654
|
});
|
|
2471
2655
|
},
|
|
2472
|
-
[rows, sort && sort.key, sort && sort.dir]
|
|
2656
|
+
[rows, manual, sort && sort.key, sort && sort.dir]
|
|
2473
2657
|
);
|
|
2474
2658
|
function nextSort(key) {
|
|
2475
2659
|
if (!sort || sort.key !== key) return { key, dir: "asc" };
|
|
@@ -2477,18 +2661,51 @@ window.Aura = (() => {
|
|
|
2477
2661
|
return null;
|
|
2478
2662
|
}
|
|
2479
2663
|
const pageSize = props.pageSize || 0;
|
|
2480
|
-
const
|
|
2664
|
+
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;
|
|
2665
|
+
const pageCount = pageSize ? Math.max(1, Math.ceil(total / pageSize)) : 1;
|
|
2481
2666
|
const page = Math.min(Math.max(1, pageState[0] || 1), pageCount);
|
|
2482
2667
|
const first = pageSize ? (page - 1) * pageSize : 0;
|
|
2483
|
-
const pageRows = pageSize ? view.slice(first, first + pageSize) : view;
|
|
2668
|
+
const pageRows = pageSize && !manual ? view.slice(first, first + pageSize) : view;
|
|
2669
|
+
const canSortAny = !busy && (manual ? total > 1 : rows.length > 1);
|
|
2670
|
+
const shownTotal = manual && props.totalRows == null ? first + rows.length : total;
|
|
2671
|
+
const linkPaging = !!props.getPageHref && !props.onPageChange;
|
|
2672
|
+
const prevLink = React23.useRef(null), nextLink = React23.useRef(null);
|
|
2484
2673
|
function goPage(p, focus) {
|
|
2485
2674
|
const next = Math.min(Math.max(1, p), pageCount);
|
|
2486
2675
|
if (next === page) return false;
|
|
2676
|
+
if (linkPaging) {
|
|
2677
|
+
const a = next === page - 1 ? prevLink.current : next === page + 1 ? nextLink.current : null;
|
|
2678
|
+
if (a) a.click();
|
|
2679
|
+
return false;
|
|
2680
|
+
}
|
|
2487
2681
|
if (focus) pending.current = focus;
|
|
2488
2682
|
pageState[1](next);
|
|
2489
2683
|
if (scrollRef.current) scrollRef.current.scrollTop = 0;
|
|
2490
2684
|
return true;
|
|
2491
2685
|
}
|
|
2686
|
+
function sortBy(key) {
|
|
2687
|
+
setSort(nextSort(key));
|
|
2688
|
+
if (!(manual && linkPaging)) goPage(1);
|
|
2689
|
+
}
|
|
2690
|
+
const rowHref = props.getRowHref;
|
|
2691
|
+
function followRow(el, e) {
|
|
2692
|
+
const a = el && el.querySelector(".aura-table__row-link");
|
|
2693
|
+
if (!a) return;
|
|
2694
|
+
a.dispatchEvent(
|
|
2695
|
+
new MouseEvent("click", {
|
|
2696
|
+
bubbles: true,
|
|
2697
|
+
cancelable: true,
|
|
2698
|
+
view: window,
|
|
2699
|
+
ctrlKey: !!(e && e.ctrlKey),
|
|
2700
|
+
metaKey: !!(e && e.metaKey),
|
|
2701
|
+
shiftKey: !!(e && e.shiftKey),
|
|
2702
|
+
altKey: !!(e && e.altKey)
|
|
2703
|
+
})
|
|
2704
|
+
);
|
|
2705
|
+
}
|
|
2706
|
+
function rowLinkWrap(r, content) {
|
|
2707
|
+
return rowHref ? /* @__PURE__ */ React23.createElement(Link, { href: rowHref(r), className: "aura-table__row-link" }, content) : content;
|
|
2708
|
+
}
|
|
2492
2709
|
const height = props.height || 0;
|
|
2493
2710
|
const virtual = !!height && !loading && pageRows.length > 0;
|
|
2494
2711
|
const bodyH = Math.max(ROW_H, height - ROW_H);
|
|
@@ -2807,10 +3024,10 @@ window.Aura = (() => {
|
|
|
2807
3024
|
else handled = false;
|
|
2808
3025
|
} else if (k === " " || k === "Enter") {
|
|
2809
3026
|
if (r === 0 && !col && selectable && nRows) toggleAll();
|
|
2810
|
-
else if (r === 0 && col && col.sortable &&
|
|
2811
|
-
|
|
2812
|
-
|
|
2813
|
-
|
|
3027
|
+
else if (r === 0 && col && col.sortable && canSortAny) sortBy(col.key);
|
|
3028
|
+
else if (r > 0 && k === " " && selectable) toggle(row[rowKey], !selSet[row[rowKey]]);
|
|
3029
|
+
else if (r > 0 && k === "Enter" && rowHref && !target.querySelector("button, a[href]:not(.aura-table__row-link), input, select, textarea"))
|
|
3030
|
+
followRow(target.closest('[role="row"]'), e);
|
|
2814
3031
|
else if (r > 0 && k === "Enter" && target.querySelector("button, a[href], input, select, textarea"))
|
|
2815
3032
|
target.querySelector("button, a[href], input, select, textarea").focus();
|
|
2816
3033
|
else if (r > 0 && k === "Enter" && props.onRowActivate) props.onRowActivate(row);
|
|
@@ -2853,7 +3070,7 @@ window.Aura = (() => {
|
|
|
2853
3070
|
vis.forEach(function(c, i) {
|
|
2854
3071
|
const ci = i + (selectable ? 1 : 0);
|
|
2855
3072
|
const isSorted = sort && sort.key === c.key;
|
|
2856
|
-
const canSort = c.sortable &&
|
|
3073
|
+
const canSort = c.sortable && canSortAny;
|
|
2857
3074
|
const ariaSort = isSorted && canSort ? sort.dir === "desc" ? "descending" : "ascending" : canSort ? "none" : void 0;
|
|
2858
3075
|
const pin = isPinned(c), edge = pin && i === nPinned - 1;
|
|
2859
3076
|
head.push(
|
|
@@ -2869,12 +3086,13 @@ window.Aura = (() => {
|
|
|
2869
3086
|
"data-rc": "0:" + ci,
|
|
2870
3087
|
className: cx(
|
|
2871
3088
|
"aura-table__th",
|
|
3089
|
+
c.align === "end" && "is-end",
|
|
2872
3090
|
pin && "is-pinned",
|
|
2873
3091
|
edge && "is-pin-edge",
|
|
2874
3092
|
drag && drag.over === c.key && (drag.after ? "is-drop-after" : "is-drop-before"),
|
|
2875
3093
|
drag && drag.key === c.key && "is-dragging"
|
|
2876
3094
|
),
|
|
2877
|
-
draggable: reorderable && !
|
|
3095
|
+
draggable: reorderable && !busy ? true : void 0,
|
|
2878
3096
|
onFocus: function(e) {
|
|
2879
3097
|
if (e.target === e.currentTarget) activeState[1]({ r: 0, c: ci });
|
|
2880
3098
|
},
|
|
@@ -2912,8 +3130,7 @@ window.Aura = (() => {
|
|
|
2912
3130
|
tabIndex: -1,
|
|
2913
3131
|
className: cx("aura-table__sort", isSorted && "is-active"),
|
|
2914
3132
|
onClick: function() {
|
|
2915
|
-
|
|
2916
|
-
goPage(1);
|
|
3133
|
+
sortBy(c.key);
|
|
2917
3134
|
activeState[1]({ r: 0, c: ci });
|
|
2918
3135
|
}
|
|
2919
3136
|
},
|
|
@@ -2966,6 +3183,10 @@ window.Aura = (() => {
|
|
|
2966
3183
|
}
|
|
2967
3184
|
)
|
|
2968
3185
|
);
|
|
3186
|
+
function cellContent(c, r) {
|
|
3187
|
+
const v = r[c.key];
|
|
3188
|
+
return c.render ? c.render(r) : c.pill ? /* @__PURE__ */ React23.createElement(StatusPill, { ...{ tone: c.tones && c.tones[v] } }, v) : v;
|
|
3189
|
+
}
|
|
2969
3190
|
function rowCells(r, i, k, isSel) {
|
|
2970
3191
|
const ri = i + 1;
|
|
2971
3192
|
const cells = [/* @__PURE__ */ React23.createElement("span", { key: "__gl", className: "aura-table__gutter", "aria-hidden": true })];
|
|
@@ -3012,6 +3233,7 @@ window.Aura = (() => {
|
|
|
3012
3233
|
className: cx(
|
|
3013
3234
|
"aura-table__td",
|
|
3014
3235
|
c.mono && "aura-table__mono",
|
|
3236
|
+
c.align === "end" && "is-end",
|
|
3015
3237
|
pin && "is-pinned",
|
|
3016
3238
|
pin && j === nPinned - 1 && "is-pin-edge"
|
|
3017
3239
|
),
|
|
@@ -3020,7 +3242,7 @@ window.Aura = (() => {
|
|
|
3020
3242
|
if (activeState[0].r !== ri || activeState[0].c !== ci) activeState[1]({ r: ri, c: ci });
|
|
3021
3243
|
}
|
|
3022
3244
|
},
|
|
3023
|
-
|
|
3245
|
+
j === 0 ? rowLinkWrap(r, cellContent(c, r)) : cellContent(c, r)
|
|
3024
3246
|
)
|
|
3025
3247
|
);
|
|
3026
3248
|
});
|
|
@@ -3049,13 +3271,21 @@ window.Aura = (() => {
|
|
|
3049
3271
|
);
|
|
3050
3272
|
vis.forEach(function(c, j) {
|
|
3051
3273
|
sk.push(
|
|
3052
|
-
/* @__PURE__ */ React23.createElement(
|
|
3274
|
+
/* @__PURE__ */ React23.createElement(
|
|
3053
3275
|
"span",
|
|
3054
3276
|
{
|
|
3055
|
-
|
|
3056
|
-
|
|
3057
|
-
|
|
3058
|
-
|
|
3277
|
+
key: c.key,
|
|
3278
|
+
className: cx("aura-table__td", c.align === "end" && "is-end", isPinned(c) && "is-pinned"),
|
|
3279
|
+
style: cellStyle(c, j)
|
|
3280
|
+
},
|
|
3281
|
+
/* @__PURE__ */ React23.createElement(
|
|
3282
|
+
"span",
|
|
3283
|
+
{
|
|
3284
|
+
className: cx("aura-skel", c.pill && "aura-skel--pill"),
|
|
3285
|
+
style: c.pill ? void 0 : { width: SKELETON_WIDTHS[(i + j) % SKELETON_WIDTHS.length] }
|
|
3286
|
+
}
|
|
3287
|
+
)
|
|
3288
|
+
)
|
|
3059
3289
|
);
|
|
3060
3290
|
});
|
|
3061
3291
|
sk.push(
|
|
@@ -3083,12 +3313,17 @@ window.Aura = (() => {
|
|
|
3083
3313
|
role: "row",
|
|
3084
3314
|
"aria-rowindex": first + i + 2,
|
|
3085
3315
|
"aria-selected": selectable ? isSel : void 0,
|
|
3086
|
-
className: cx(
|
|
3316
|
+
className: cx(
|
|
3317
|
+
"aura-table__row",
|
|
3318
|
+
isSel && "is-selected",
|
|
3319
|
+
(props.onRowActivate || rowHref) && "is-actionable"
|
|
3320
|
+
),
|
|
3087
3321
|
style: rowStyle,
|
|
3088
3322
|
onClick: function(e) {
|
|
3089
3323
|
const el = e.target;
|
|
3090
3324
|
if (el.closest && el.closest(".aura-check, button, a, input")) return;
|
|
3091
|
-
if (
|
|
3325
|
+
if (rowHref) followRow(e.currentTarget, e);
|
|
3326
|
+
else if (props.onRowActivate) props.onRowActivate(r);
|
|
3092
3327
|
}
|
|
3093
3328
|
},
|
|
3094
3329
|
rowCells(r, i, k, isSel)
|
|
@@ -3100,31 +3335,42 @@ window.Aura = (() => {
|
|
|
3100
3335
|
bodyRows.push(/* @__PURE__ */ React23.createElement("div", { key: "__bot", style: { height: (pageRows.length - end) * ROW_H + "px" }, "aria-hidden": true }));
|
|
3101
3336
|
}
|
|
3102
3337
|
let foot = null;
|
|
3103
|
-
|
|
3104
|
-
const
|
|
3105
|
-
|
|
3106
|
-
|
|
3107
|
-
|
|
3108
|
-
|
|
3109
|
-
|
|
3110
|
-
|
|
3111
|
-
|
|
3112
|
-
|
|
3113
|
-
|
|
3114
|
-
|
|
3115
|
-
|
|
3338
|
+
function pagerButton(dir) {
|
|
3339
|
+
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";
|
|
3340
|
+
if (props.getPageHref && !off)
|
|
3341
|
+
return /* @__PURE__ */ React23.createElement(
|
|
3342
|
+
Link,
|
|
3343
|
+
{
|
|
3344
|
+
ref: dir < 0 ? prevLink : nextLink,
|
|
3345
|
+
href: props.getPageHref(p),
|
|
3346
|
+
className: "aura-icon-btn",
|
|
3347
|
+
"aria-label": label,
|
|
3348
|
+
onClick: function(e) {
|
|
3349
|
+
if (props.onPageChange) {
|
|
3350
|
+
e.preventDefault();
|
|
3351
|
+
pageState[1](p);
|
|
3352
|
+
}
|
|
3353
|
+
}
|
|
3354
|
+
},
|
|
3355
|
+
/* @__PURE__ */ React23.createElement(Icon, { name: icon })
|
|
3356
|
+
);
|
|
3357
|
+
return /* @__PURE__ */ React23.createElement(
|
|
3116
3358
|
IconButton,
|
|
3117
3359
|
{
|
|
3118
|
-
icon
|
|
3119
|
-
label
|
|
3120
|
-
disabled:
|
|
3360
|
+
icon,
|
|
3361
|
+
label,
|
|
3362
|
+
disabled: off,
|
|
3121
3363
|
onClick: function() {
|
|
3122
|
-
goPage(
|
|
3364
|
+
goPage(p);
|
|
3123
3365
|
}
|
|
3124
3366
|
}
|
|
3125
|
-
)
|
|
3367
|
+
);
|
|
3368
|
+
}
|
|
3369
|
+
if (pageSize && (rows.length || busy)) {
|
|
3370
|
+
const from = rows.length ? first + 1 : 0, to = manual ? first + rows.length : Math.min(first + pageSize, view.length);
|
|
3371
|
+
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
3372
|
} else if (height && rows.length && !loading) {
|
|
3127
|
-
foot = /* @__PURE__ */ React23.createElement("div", { className: "aura-table__foot" }, /* @__PURE__ */ React23.createElement("span", null, t.rowCount(
|
|
3373
|
+
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
3374
|
}
|
|
3129
3375
|
if (stacked) {
|
|
3130
3376
|
const titleCol = vis[0], pillCol = vis.filter(function(c) {
|
|
@@ -3145,25 +3391,28 @@ window.Aura = (() => {
|
|
|
3145
3391
|
const em2 = props.empty || {};
|
|
3146
3392
|
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
3393
|
} 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
|
-
};
|
|
3394
|
+
const cellVal = cellContent;
|
|
3152
3395
|
cardBody = /* @__PURE__ */ React23.createElement("ul", { className: "aura-table__cards", "aria-label": props.label }, pageRows.map(function(r) {
|
|
3153
3396
|
const k = r[rowKey], isSel = !!selSet[k];
|
|
3154
3397
|
return /* @__PURE__ */ React23.createElement(
|
|
3155
3398
|
"li",
|
|
3156
3399
|
{
|
|
3157
3400
|
key: k,
|
|
3158
|
-
className: cx(
|
|
3159
|
-
|
|
3401
|
+
className: cx(
|
|
3402
|
+
"aura-table__card",
|
|
3403
|
+
isSel && "is-selected",
|
|
3404
|
+
(props.onRowActivate || rowHref) && "is-actionable"
|
|
3405
|
+
),
|
|
3406
|
+
tabIndex: props.onRowActivate && !rowHref ? 0 : void 0,
|
|
3160
3407
|
onClick: function(e) {
|
|
3161
3408
|
const el = e.target;
|
|
3162
3409
|
if (el.closest && el.closest(".aura-check, button, a, input")) return;
|
|
3163
|
-
if (
|
|
3410
|
+
if (rowHref) followRow(e.currentTarget, e);
|
|
3411
|
+
else if (props.onRowActivate) props.onRowActivate(r);
|
|
3164
3412
|
},
|
|
3165
3413
|
onKeyDown: function(e) {
|
|
3166
|
-
if (e.target === e.currentTarget && e.key === "Enter" && props.onRowActivate
|
|
3414
|
+
if (e.target === e.currentTarget && e.key === "Enter" && props.onRowActivate && !rowHref)
|
|
3415
|
+
props.onRowActivate(r);
|
|
3167
3416
|
}
|
|
3168
3417
|
},
|
|
3169
3418
|
/* @__PURE__ */ React23.createElement("div", { className: "aura-table__card-head" }, selectable ? /* @__PURE__ */ React23.createElement(
|
|
@@ -3175,7 +3424,7 @@ window.Aura = (() => {
|
|
|
3175
3424
|
toggle(k, on);
|
|
3176
3425
|
}
|
|
3177
3426
|
}
|
|
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) {
|
|
3427
|
+
) : 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
3428
|
return /* @__PURE__ */ React23.createElement("span", { key: c.key, className: "aura-table__card-actions" }, cellVal(c, r));
|
|
3180
3429
|
})),
|
|
3181
3430
|
rest.length ? /* @__PURE__ */ React23.createElement("dl", { className: "aura-table__card-fields" }, rest.map(function(c) {
|
|
@@ -3188,12 +3437,13 @@ window.Aura = (() => {
|
|
|
3188
3437
|
"div",
|
|
3189
3438
|
{
|
|
3190
3439
|
ref: wrapMerged,
|
|
3191
|
-
className: cx("aura-table aura-table--stacked", props.className),
|
|
3440
|
+
className: cx("aura-table aura-table--stacked", refreshing && "is-refreshing", props.className),
|
|
3192
3441
|
role: "region",
|
|
3193
3442
|
"aria-label": props.label,
|
|
3194
|
-
"aria-busy":
|
|
3443
|
+
"aria-busy": busy || void 0
|
|
3195
3444
|
},
|
|
3196
|
-
|
|
3445
|
+
refreshing ? /* @__PURE__ */ React23.createElement("span", { className: "aura-table__busy-bar", "aria-hidden": true }) : null,
|
|
3446
|
+
selectable && pageRows.length && !busy ? /* @__PURE__ */ React23.createElement("div", { className: "aura-table__stack-bar" }, /* @__PURE__ */ React23.createElement(
|
|
3197
3447
|
Checkbox,
|
|
3198
3448
|
{
|
|
3199
3449
|
checked: all,
|
|
@@ -3211,52 +3461,64 @@ window.Aura = (() => {
|
|
|
3211
3461
|
scrollPaddingTop: ROW_H + "px"
|
|
3212
3462
|
};
|
|
3213
3463
|
if (height) scrollStyle.height = height + "px";
|
|
3214
|
-
return /* @__PURE__ */ React23.createElement(
|
|
3464
|
+
return /* @__PURE__ */ React23.createElement(
|
|
3215
3465
|
"div",
|
|
3216
3466
|
{
|
|
3217
|
-
ref:
|
|
3218
|
-
|
|
3219
|
-
|
|
3467
|
+
ref: wrapMerged,
|
|
3468
|
+
className: cx("aura-table", scrolledX[0] && "is-scrolled-x", refreshing && "is-refreshing", props.className)
|
|
3469
|
+
},
|
|
3470
|
+
refreshing ? /* @__PURE__ */ React23.createElement("span", { className: "aura-table__busy-bar", "aria-hidden": true }) : null,
|
|
3471
|
+
/* @__PURE__ */ React23.createElement(
|
|
3472
|
+
"div",
|
|
3473
|
+
{
|
|
3474
|
+
ref: function(el) {
|
|
3475
|
+
scrollRef.current = el;
|
|
3476
|
+
gridRef.current = el;
|
|
3477
|
+
},
|
|
3478
|
+
className: "aura-table__scroll",
|
|
3479
|
+
style: scrollStyle,
|
|
3480
|
+
role: "grid",
|
|
3481
|
+
"aria-label": props.label,
|
|
3482
|
+
"aria-busy": busy || void 0,
|
|
3483
|
+
"aria-rowcount": loading ? -1 : shownTotal + 1,
|
|
3484
|
+
"aria-colcount": nCols,
|
|
3485
|
+
"aria-multiselectable": selectable || void 0,
|
|
3486
|
+
onKeyDown: onGridKey,
|
|
3487
|
+
onScroll: function(e) {
|
|
3488
|
+
const t2 = e.currentTarget;
|
|
3489
|
+
if (virtual && Math.abs(t2.scrollTop - scrollTop) >= ROW_H / 2) setScrollTop(t2.scrollTop);
|
|
3490
|
+
else if (virtual && (t2.scrollTop === 0 || t2.scrollTop + t2.clientHeight >= t2.scrollHeight - 1))
|
|
3491
|
+
setScrollTop(t2.scrollTop);
|
|
3492
|
+
const sx = t2.scrollLeft > 0;
|
|
3493
|
+
if (sx !== scrolledX[0]) scrolledX[1](sx);
|
|
3494
|
+
}
|
|
3220
3495
|
},
|
|
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);
|
|
3496
|
+
/* @__PURE__ */ React23.createElement("div", { className: "aura-table__head", role: "row", "aria-rowindex": 1, style: rowStyle }, head),
|
|
3497
|
+
body
|
|
3498
|
+
),
|
|
3499
|
+
busy ? /* @__PURE__ */ React23.createElement("span", { className: "aura-sr-only", role: "status" }, t.loadingRows) : null,
|
|
3500
|
+
controls ? /* @__PURE__ */ React23.createElement("div", { className: "aura-table__picker" }, /* @__PURE__ */ React23.createElement(
|
|
3501
|
+
IconButton,
|
|
3502
|
+
{
|
|
3503
|
+
icon: "columns-3",
|
|
3504
|
+
label: t.showHideColumns,
|
|
3505
|
+
"aria-haspopup": "menu",
|
|
3506
|
+
onClick: function(e) {
|
|
3507
|
+
openMenu("picker", null, e.currentTarget);
|
|
3508
|
+
}
|
|
3237
3509
|
}
|
|
3238
|
-
|
|
3239
|
-
|
|
3240
|
-
|
|
3241
|
-
|
|
3242
|
-
|
|
3243
|
-
|
|
3244
|
-
|
|
3245
|
-
|
|
3246
|
-
|
|
3247
|
-
onClick: function(e) {
|
|
3248
|
-
openMenu("picker", null, e.currentTarget);
|
|
3510
|
+
)) : null,
|
|
3511
|
+
foot,
|
|
3512
|
+
menu ? /* @__PURE__ */ React23.createElement(
|
|
3513
|
+
Menu,
|
|
3514
|
+
{
|
|
3515
|
+
anchor: menu.anchor,
|
|
3516
|
+
onClose: closeMenu,
|
|
3517
|
+
label: menu.kind === "picker" ? t.columns : t.column(byKey[menu.key] && byKey[menu.key].label),
|
|
3518
|
+
items: menu.kind === "picker" ? pickerItems() : byKey[menu.key] ? columnMenuItems(byKey[menu.key]) : []
|
|
3249
3519
|
}
|
|
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);
|
|
3520
|
+
) : null
|
|
3521
|
+
);
|
|
3260
3522
|
});
|
|
3261
3523
|
|
|
3262
3524
|
// src/Card.tsx
|
|
@@ -3369,43 +3631,150 @@ window.Aura = (() => {
|
|
|
3369
3631
|
|
|
3370
3632
|
// src/SideNav.tsx
|
|
3371
3633
|
var React26 = __toESM(require_react(), 1);
|
|
3634
|
+
function contains(it, id) {
|
|
3635
|
+
return !!id && !!it.children && it.children.some(function(c) {
|
|
3636
|
+
return c.id === id || contains(c, id);
|
|
3637
|
+
});
|
|
3638
|
+
}
|
|
3372
3639
|
var SideNav = React26.forwardRef(function SideNav2(props, ref) {
|
|
3373
3640
|
const t = useStrings();
|
|
3641
|
+
const Link = useLinkComponent(props.linkComponent);
|
|
3642
|
+
const base = uid();
|
|
3374
3643
|
const st = useMaybeControlled(
|
|
3375
3644
|
props.value,
|
|
3376
3645
|
props.defaultValue,
|
|
3377
3646
|
props.onChange
|
|
3378
3647
|
);
|
|
3379
|
-
|
|
3380
|
-
|
|
3381
|
-
|
|
3648
|
+
const active = st[0];
|
|
3649
|
+
const sections = props.sections || [{ items: props.items || [] }];
|
|
3650
|
+
const openState = React26.useState({}), toggled = openState[0], setToggled = openState[1];
|
|
3651
|
+
function isOpen(it) {
|
|
3652
|
+
if (toggled[it.id] != null) return toggled[it.id];
|
|
3653
|
+
return !!it.defaultOpen || contains(it, active);
|
|
3654
|
+
}
|
|
3655
|
+
React26.useEffect(
|
|
3656
|
+
function() {
|
|
3657
|
+
if (!active) return;
|
|
3658
|
+
const next = {};
|
|
3659
|
+
let changed = false;
|
|
3660
|
+
sections.forEach(function(s) {
|
|
3661
|
+
(function walk(list) {
|
|
3662
|
+
list.forEach(function(it) {
|
|
3663
|
+
if (it.children) {
|
|
3664
|
+
if (contains(it, active) && toggled[it.id] !== true) {
|
|
3665
|
+
next[it.id] = true;
|
|
3666
|
+
changed = true;
|
|
3667
|
+
}
|
|
3668
|
+
walk(it.children);
|
|
3669
|
+
}
|
|
3670
|
+
});
|
|
3671
|
+
})(s.items);
|
|
3672
|
+
});
|
|
3673
|
+
if (changed) setToggled(Object.assign({}, toggled, next));
|
|
3674
|
+
},
|
|
3675
|
+
[active]
|
|
3676
|
+
);
|
|
3677
|
+
const navRef = React26.useRef(null);
|
|
3678
|
+
function onKeyDown(e) {
|
|
3679
|
+
const k = e.key;
|
|
3680
|
+
if (k !== "ArrowDown" && k !== "ArrowUp" && k !== "Home" && k !== "End") return;
|
|
3681
|
+
const root = navRef.current;
|
|
3682
|
+
if (!root) return;
|
|
3683
|
+
const items = Array.prototype.slice.call(root.querySelectorAll(".aura-nav__item"));
|
|
3684
|
+
const visible = items.filter(function(el) {
|
|
3685
|
+
return el.offsetParent !== null || el === document.activeElement;
|
|
3686
|
+
});
|
|
3687
|
+
const i = visible.indexOf(document.activeElement);
|
|
3688
|
+
if (i < 0) return;
|
|
3689
|
+
e.preventDefault();
|
|
3690
|
+
const j = k === "Home" ? 0 : k === "End" ? visible.length - 1 : Math.max(0, Math.min(visible.length - 1, i + (k === "ArrowDown" ? 1 : -1)));
|
|
3691
|
+
visible[j].focus();
|
|
3692
|
+
}
|
|
3693
|
+
function inner(it, group, open) {
|
|
3694
|
+
return [
|
|
3382
3695
|
it.icon ? /* @__PURE__ */ React26.createElement(Icon, { key: "i", name: it.icon }) : null,
|
|
3383
3696
|
/* @__PURE__ */ React26.createElement("span", { key: "l", className: "aura-nav__label" }, it.label),
|
|
3384
|
-
it.
|
|
3697
|
+
it.badge != null ? /* @__PURE__ */ React26.createElement("span", { key: "b", className: "aura-nav__badge" }, it.badge) : null,
|
|
3698
|
+
it.count != null ? /* @__PURE__ */ React26.createElement("span", { key: "c", className: "aura-nav__count" }, it.count) : null,
|
|
3699
|
+
group ? /* @__PURE__ */ React26.createElement(Icon, { key: "g", name: "chevron-down", className: cx("aura-nav__chevron", open && "is-open") }) : null
|
|
3385
3700
|
];
|
|
3701
|
+
}
|
|
3702
|
+
function item(it, depth) {
|
|
3703
|
+
if (it.children) {
|
|
3704
|
+
const open = isOpen(it);
|
|
3705
|
+
const listId = base + "-" + it.id;
|
|
3706
|
+
const holdsActive = contains(it, active);
|
|
3707
|
+
return /* @__PURE__ */ React26.createElement("li", { key: it.id, className: "aura-nav__group" }, /* @__PURE__ */ React26.createElement(
|
|
3708
|
+
"button",
|
|
3709
|
+
{
|
|
3710
|
+
type: "button",
|
|
3711
|
+
className: cx("aura-nav__item", "aura-nav__item--group", holdsActive && "has-active"),
|
|
3712
|
+
"aria-expanded": open,
|
|
3713
|
+
"aria-controls": listId,
|
|
3714
|
+
style: depth ? { ["--aura-nav-depth"]: depth } : void 0,
|
|
3715
|
+
onClick: function() {
|
|
3716
|
+
const next = Object.assign({}, toggled);
|
|
3717
|
+
next[it.id] = !open;
|
|
3718
|
+
setToggled(next);
|
|
3719
|
+
},
|
|
3720
|
+
onKeyDown: function(e) {
|
|
3721
|
+
if (e.key === "ArrowRight" && !open) {
|
|
3722
|
+
e.preventDefault();
|
|
3723
|
+
setToggled(Object.assign({}, toggled, { [it.id]: true }));
|
|
3724
|
+
} else if (e.key === "ArrowLeft" && open) {
|
|
3725
|
+
e.preventDefault();
|
|
3726
|
+
setToggled(Object.assign({}, toggled, { [it.id]: false }));
|
|
3727
|
+
}
|
|
3728
|
+
}
|
|
3729
|
+
},
|
|
3730
|
+
inner(it, true, open)
|
|
3731
|
+
), /* @__PURE__ */ React26.createElement("ul", { id: listId, className: "aura-nav__list aura-nav__sub", hidden: !open }, it.children.map(function(c) {
|
|
3732
|
+
return item(c, depth + 1);
|
|
3733
|
+
})));
|
|
3734
|
+
}
|
|
3735
|
+
const on = active === it.id;
|
|
3386
3736
|
const common = {
|
|
3387
3737
|
className: cx("aura-nav__item", on && "is-active"),
|
|
3388
3738
|
"aria-current": on ? "page" : void 0,
|
|
3739
|
+
style: depth ? { ["--aura-nav-depth"]: depth } : void 0,
|
|
3389
3740
|
onClick: function(e) {
|
|
3390
3741
|
if (!it.href) e.preventDefault();
|
|
3391
3742
|
st[1](it.id);
|
|
3392
3743
|
}
|
|
3393
3744
|
};
|
|
3394
|
-
return /* @__PURE__ */ React26.createElement("li", { key: it.id }, it.href ? /* @__PURE__ */ React26.createElement(
|
|
3745
|
+
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
3746
|
}
|
|
3396
|
-
return /* @__PURE__ */ React26.createElement(
|
|
3397
|
-
|
|
3398
|
-
|
|
3747
|
+
return /* @__PURE__ */ React26.createElement(
|
|
3748
|
+
"nav",
|
|
3749
|
+
{
|
|
3750
|
+
ref: function(el) {
|
|
3751
|
+
navRef.current = el;
|
|
3752
|
+
if (typeof ref === "function") ref(el);
|
|
3753
|
+
else if (ref) ref.current = el;
|
|
3754
|
+
},
|
|
3755
|
+
className: cx("aura-nav", props.className),
|
|
3756
|
+
"aria-label": props.label || t.mainNav,
|
|
3757
|
+
onKeyDown
|
|
3758
|
+
},
|
|
3759
|
+
props.header ? /* @__PURE__ */ React26.createElement("div", { className: "aura-nav__header" }, props.header) : null,
|
|
3760
|
+
/* @__PURE__ */ React26.createElement("div", { className: "aura-nav__scroll" }, sections.map(function(s, i) {
|
|
3761
|
+
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) {
|
|
3762
|
+
return item(it, 0);
|
|
3763
|
+
})));
|
|
3764
|
+
})),
|
|
3765
|
+
props.footer ? /* @__PURE__ */ React26.createElement("div", { className: "aura-nav__footer" }, props.footer) : null
|
|
3766
|
+
);
|
|
3399
3767
|
});
|
|
3400
3768
|
|
|
3401
3769
|
// src/Breadcrumb.tsx
|
|
3402
3770
|
var React27 = __toESM(require_react(), 1);
|
|
3403
3771
|
var Breadcrumb = React27.forwardRef(function Breadcrumb2(props, ref) {
|
|
3404
3772
|
const t = useStrings();
|
|
3773
|
+
const Link = useLinkComponent();
|
|
3405
3774
|
const items = props.items || [];
|
|
3406
3775
|
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
3776
|
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(
|
|
3777
|
+
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
3778
|
})));
|
|
3410
3779
|
});
|
|
3411
3780
|
|
|
@@ -3616,8 +3985,11 @@ window.Aura = (() => {
|
|
|
3616
3985
|
const ch = props.change;
|
|
3617
3986
|
const dir = ch && (ch.direction || "flat");
|
|
3618
3987
|
const tone2 = ch && (ch.tone || (dir === "up" ? "positive" : dir === "down" ? "negative" : "neutral"));
|
|
3619
|
-
const
|
|
3620
|
-
const
|
|
3988
|
+
const Link = useLinkComponent();
|
|
3989
|
+
const v = props.value;
|
|
3990
|
+
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, ""));
|
|
3991
|
+
const Tag3 = props.href ? Link : props.onClick ? "button" : "div";
|
|
3992
|
+
const interactive = !!(props.href || props.onClick);
|
|
3621
3993
|
return /* @__PURE__ */ React35.createElement(
|
|
3622
3994
|
Tag3,
|
|
3623
3995
|
{
|
|
@@ -3629,7 +4001,7 @@ window.Aura = (() => {
|
|
|
3629
4001
|
"aria-busy": props.loading || void 0
|
|
3630
4002
|
},
|
|
3631
4003
|
/* @__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),
|
|
4004
|
+
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
4005
|
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
4006
|
);
|
|
3635
4007
|
});
|
|
@@ -4247,6 +4619,20 @@ window.Aura = (() => {
|
|
|
4247
4619
|
}
|
|
4248
4620
|
return c;
|
|
4249
4621
|
}
|
|
4622
|
+
function atLuminance(hex, Y) {
|
|
4623
|
+
const o = rgbToOklch(hexToRgb(hex)), C = Math.max(o[1], 0.02);
|
|
4624
|
+
let lo = 0, hi = 1, c = hex;
|
|
4625
|
+
for (let i = 0; i < 30; i++) {
|
|
4626
|
+
const mid = (lo + hi) / 2;
|
|
4627
|
+
c = oklchToHex(mid, C, o[2]);
|
|
4628
|
+
if (luminance(c) < Y) lo = mid;
|
|
4629
|
+
else hi = mid;
|
|
4630
|
+
}
|
|
4631
|
+
return c;
|
|
4632
|
+
}
|
|
4633
|
+
var CHART_Y = { light: 0.075, dark: 0.46 };
|
|
4634
|
+
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] };
|
|
4635
|
+
var CHART_2 = "#0a8b7a";
|
|
4250
4636
|
var ZINC = { 0: "#ffffff", 50: "#fafafa", 100: "#f4f4f5", 800: "#27272a", 900: "#18181b", 950: "#09090b" };
|
|
4251
4637
|
var INK = "#18181b";
|
|
4252
4638
|
function createTheme(opts) {
|
|
@@ -4265,6 +4651,14 @@ window.Aura = (() => {
|
|
|
4265
4651
|
L["alert-info-fg"] = fit(b[800], [b[50]], 4.5, -1);
|
|
4266
4652
|
L["alert-info-border"] = b[200];
|
|
4267
4653
|
L["mesh-from"] = b[400];
|
|
4654
|
+
L["chart-1"] = atLuminance(o.brand, CHART_Y.light);
|
|
4655
|
+
D["chart-1"] = atLuminance(o.brand, CHART_Y.dark);
|
|
4656
|
+
SEQ_Y.light.forEach(function(y, i) {
|
|
4657
|
+
L["chart-seq-" + (i + 1)] = atLuminance(o.brand, y);
|
|
4658
|
+
});
|
|
4659
|
+
SEQ_Y.dark.forEach(function(y, i) {
|
|
4660
|
+
D["chart-seq-" + (i + 1)] = atLuminance(o.brand, y);
|
|
4661
|
+
});
|
|
4268
4662
|
D["fg-accent"] = fit(b[300], darkGrounds, 4.5, 1);
|
|
4269
4663
|
D["accent-violet"] = fit(b[400], darkGrounds, 3, 1);
|
|
4270
4664
|
D["focus-ring"] = fit(b[400], darkGrounds, 3, 1);
|
|
@@ -4324,6 +4718,19 @@ window.Aura = (() => {
|
|
|
4324
4718
|
check("dark", "fg-accent", g[0], 4.5, D["fg-accent"], g[1]);
|
|
4325
4719
|
check("dark", "focus-ring", g[0], 3, D["focus-ring"], g[1]);
|
|
4326
4720
|
});
|
|
4721
|
+
[
|
|
4722
|
+
["light", ZINC[0], L],
|
|
4723
|
+
["light", ZINC[50], L],
|
|
4724
|
+
["dark", ZINC[900], D],
|
|
4725
|
+
["dark", ZINC[950], D]
|
|
4726
|
+
].forEach(function(g) {
|
|
4727
|
+
const t = g[0], ground = g[1], m = g[2], name = ground === ZINC[0] || ground === ZINC[900] ? "bg-surface" : "bg-canvas";
|
|
4728
|
+
["chart-1", "chart-seq-1", "chart-seq-5"].forEach(function(k) {
|
|
4729
|
+
check(t, k, name, 3, m[k], ground);
|
|
4730
|
+
});
|
|
4731
|
+
});
|
|
4732
|
+
check("light", "chart-1", "chart-2 (lightness step)", 1.8, L["chart-1"], CHART_2);
|
|
4733
|
+
check("dark", "chart-1", "chart-2 (lightness step)", 1.8, D["chart-1"], CHART_2);
|
|
4327
4734
|
check("light", "fg-primary", "bg-selected", 4.5, INK, L["bg-selected"]);
|
|
4328
4735
|
check("dark", "fg-primary", "bg-selected", 4.5, "#ffffff", D["bg-selected"]);
|
|
4329
4736
|
check("light", "status-progress-fg", "status-progress-bg", 4.5, L["status-progress-fg"], L["status-progress-bg"]);
|
|
@@ -4403,7 +4810,14 @@ window.Aura = (() => {
|
|
|
4403
4810
|
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
4811
|
}
|
|
4405
4812
|
function ColorSchemeScript(props) {
|
|
4406
|
-
return /* @__PURE__ */ React39.createElement(
|
|
4813
|
+
return /* @__PURE__ */ React39.createElement(
|
|
4814
|
+
"script",
|
|
4815
|
+
{
|
|
4816
|
+
"data-aura-color-scheme": "",
|
|
4817
|
+
nonce: props.nonce,
|
|
4818
|
+
dangerouslySetInnerHTML: { __html: colorSchemeScript(props) }
|
|
4819
|
+
}
|
|
4820
|
+
);
|
|
4407
4821
|
}
|
|
4408
4822
|
function systemDark() {
|
|
4409
4823
|
return typeof window !== "undefined" && !!window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches;
|
|
@@ -4656,6 +5070,7 @@ window.Aura = (() => {
|
|
|
4656
5070
|
if (p >= 1 && p <= count && p !== page) st[1](p);
|
|
4657
5071
|
}
|
|
4658
5072
|
const link = props.getHref;
|
|
5073
|
+
const Link = useLinkComponent();
|
|
4659
5074
|
function item(p, label, extra) {
|
|
4660
5075
|
const common = Object.assign(
|
|
4661
5076
|
{
|
|
@@ -4666,7 +5081,7 @@ window.Aura = (() => {
|
|
|
4666
5081
|
extra
|
|
4667
5082
|
);
|
|
4668
5083
|
return link ? /* @__PURE__ */ React45.createElement(
|
|
4669
|
-
|
|
5084
|
+
Link,
|
|
4670
5085
|
{
|
|
4671
5086
|
href: link(p),
|
|
4672
5087
|
onClick: function(e) {
|