@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/cjs/index.cjs
CHANGED
|
@@ -198,9 +198,20 @@ var h = React2.createElement;
|
|
|
198
198
|
var ICONS = { "check": [["path", { "d": "M20 6 9 17l-5-5" }]], "x": [["path", { "d": "M18 6 6 18" }], ["path", { "d": "m6 6 12 12" }]], "plus": [["path", { "d": "M5 12h14" }], ["path", { "d": "M12 5v14" }]], "minus": [["path", { "d": "M5 12h14" }]], "search": [["path", { "d": "m21 21-4.34-4.34" }], ["circle", { "cx": "11", "cy": "11", "r": "8" }]], "chevron-down": [["path", { "d": "m6 9 6 6 6-6" }]], "chevron-up": [["path", { "d": "m18 15-6-6-6 6" }]], "chevron-left": [["path", { "d": "m15 18-6-6 6-6" }]], "chevron-right": [["path", { "d": "m9 18 6-6-6-6" }]], "arrow-right": [["path", { "d": "M5 12h14" }], ["path", { "d": "m12 5 7 7-7 7" }]], "arrow-up-right": [["path", { "d": "M7 7h10v10" }], ["path", { "d": "M7 17 17 7" }]], "arrow-up-down": [["path", { "d": "m21 16-4 4-4-4" }], ["path", { "d": "M17 20V4" }], ["path", { "d": "m3 8 4-4 4 4" }], ["path", { "d": "M7 4v16" }]], "loader-circle": [["path", { "d": "M21 12a9 9 0 1 1-6.219-8.56" }]], "circle-alert": [["circle", { "cx": "12", "cy": "12", "r": "10" }], ["line", { "x1": "12", "x2": "12", "y1": "8", "y2": "12" }], ["line", { "x1": "12", "x2": "12.01", "y1": "16", "y2": "16" }]], "circle-check": [["circle", { "cx": "12", "cy": "12", "r": "10" }], ["path", { "d": "m16 9-5.5 5.5L8 12" }]], "info": [["circle", { "cx": "12", "cy": "12", "r": "10" }], ["path", { "d": "M12 16v-4" }], ["path", { "d": "M12 8h.01" }]], "triangle-alert": [["path", { "d": "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3" }], ["path", { "d": "M12 9v4" }], ["path", { "d": "M12 17h.01" }]], "settings": [["path", { "d": "M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915" }], ["circle", { "cx": "12", "cy": "12", "r": "3" }]], "user": [["path", { "d": "M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" }], ["circle", { "cx": "12", "cy": "7", "r": "4" }]], "users": [["path", { "d": "M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" }], ["path", { "d": "M16 3.128a4 4 0 0 1 0 7.744" }], ["path", { "d": "M22 21v-2a4 4 0 0 0-3-3.87" }], ["circle", { "cx": "9", "cy": "7", "r": "4" }]], "filter": [["path", { "d": "M10 20a1 1 0 0 0 .553.895l2 1A1 1 0 0 0 14 21v-7a2 2 0 0 1 .517-1.341L21.74 4.67A1 1 0 0 0 21 3H3a1 1 0 0 0-.742 1.67l7.225 7.989A2 2 0 0 1 10 14z" }]], "ellipsis": [["circle", { "cx": "12", "cy": "12", "r": "1" }], ["circle", { "cx": "19", "cy": "12", "r": "1" }], ["circle", { "cx": "5", "cy": "12", "r": "1" }]], "external-link": [["path", { "d": "M15 3h6v6" }], ["path", { "d": "M10 14 21 3" }], ["path", { "d": "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" }]], "copy": [["rect", { "width": "14", "height": "14", "x": "8", "y": "8", "rx": "2", "ry": "2" }], ["path", { "d": "M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" }]], "trash-2": [["path", { "d": "M10 11v6" }], ["path", { "d": "M14 11v6" }], ["path", { "d": "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" }], ["path", { "d": "M3 6h18" }], ["path", { "d": "M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" }]], "pencil": [["path", { "d": "M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z" }], ["path", { "d": "m15 5 4 4" }]], "download": [["path", { "d": "M12 15V3" }], ["path", { "d": "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }], ["path", { "d": "m7 10 5 5 5-5" }]], "upload": [["path", { "d": "M12 3v12" }], ["path", { "d": "m17 8-5-5-5 5" }], ["path", { "d": "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }]], "calendar": [["path", { "d": "M8 2v3" }], ["path", { "d": "M16 2v3" }], ["rect", { "x": "3", "y": "3", "width": "18", "height": "18", "rx": "2" }], ["path", { "d": "M3 9h18" }]], "bell": [["path", { "d": "M10.268 21a2 2 0 0 0 3.464 0" }], ["path", { "d": "M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326" }]], "menu": [["path", { "d": "M4 5h16" }], ["path", { "d": "M4 12h16" }], ["path", { "d": "M4 19h16" }]], "eye": [["path", { "d": "M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0" }], ["circle", { "cx": "12", "cy": "12", "r": "3" }]], "log-out": [["path", { "d": "m16 17 5-5-5-5" }], ["path", { "d": "M21 12H9" }], ["path", { "d": "M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" }]], "circle": [["circle", { "cx": "12", "cy": "12", "r": "10" }]], "circle-dot-dashed": [["path", { "d": "M10.1 2.18a9.93 9.93 0 0 1 3.8 0" }], ["path", { "d": "M17.6 3.71a9.95 9.95 0 0 1 2.69 2.7" }], ["path", { "d": "M21.82 10.1a9.93 9.93 0 0 1 0 3.8" }], ["path", { "d": "M20.29 17.6a9.95 9.95 0 0 1-2.7 2.69" }], ["path", { "d": "M13.9 21.82a9.94 9.94 0 0 1-3.8 0" }], ["path", { "d": "M6.4 20.29a9.95 9.95 0 0 1-2.69-2.7" }], ["path", { "d": "M2.18 13.9a9.93 9.93 0 0 1 0-3.8" }], ["path", { "d": "M3.71 6.4a9.95 9.95 0 0 1 2.7-2.69" }], ["circle", { "cx": "12", "cy": "12", "r": "1" }]], "ban": [["circle", { "cx": "12", "cy": "12", "r": "10" }], ["path", { "d": "M4.929 4.929 19.07 19.071" }]], "arrow-up": [["path", { "d": "m5 12 7-7 7 7" }], ["path", { "d": "M12 19V5" }]], "arrow-down": [["path", { "d": "M12 5v14" }], ["path", { "d": "m19 12-7 7-7-7" }]], "inbox": [["polyline", { "points": "22 12 16 12 14 15 10 15 8 12 2 12" }], ["path", { "d": "M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z" }]], "pin": [["path", { "d": "M12 17v5" }], ["path", { "d": "M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z" }]], "pin-off": [["path", { "d": "M12 17v5" }], ["path", { "d": "M15 9.34V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H7.89" }], ["path", { "d": "m2 2 20 20" }], ["path", { "d": "M9 9v1.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h11" }]], "eye-off": [["path", { "d": "M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49" }], ["path", { "d": "M14.084 14.158a3 3 0 0 1-4.242-4.242" }], ["path", { "d": "M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143" }], ["path", { "d": "m2 2 20 20" }]], "columns-3": [["rect", { "width": "18", "height": "18", "x": "3", "y": "3", "rx": "2" }], ["path", { "d": "M9 3v18" }], ["path", { "d": "M15 3v18" }]], "arrow-left": [["path", { "d": "m12 19-7-7 7-7" }], ["path", { "d": "M19 12H5" }]], "rotate-ccw": [["path", { "d": "M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" }], ["path", { "d": "M3 3v5h5" }]], "house": [["path", { "d": "M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8" }], ["path", { "d": "M3 10a2 2 0 0 1 .709-1.528l7-6a2 2 0 0 1 2.582 0l7 6A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" }]], "layout-dashboard": [["rect", { "width": "7", "height": "9", "x": "3", "y": "3", "rx": "1" }], ["rect", { "width": "7", "height": "5", "x": "14", "y": "3", "rx": "1" }], ["rect", { "width": "7", "height": "9", "x": "14", "y": "12", "rx": "1" }], ["rect", { "width": "7", "height": "5", "x": "3", "y": "16", "rx": "1" }]], "folder": [["path", { "d": "M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z" }]], "chart-column": [["path", { "d": "M3 3v16a2 2 0 0 0 2 2h16" }], ["path", { "d": "M18 17V9" }], ["path", { "d": "M13 17V5" }], ["path", { "d": "M8 17v-3" }]], "file-text": [["path", { "d": "M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z" }], ["path", { "d": "M14 2v5a1 1 0 0 0 1 1h5" }], ["path", { "d": "M10 9H8" }], ["path", { "d": "M16 13H8" }], ["path", { "d": "M16 17H8" }]], "mail": [["path", { "d": "m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7" }], ["rect", { "x": "2", "y": "4", "width": "20", "height": "16", "rx": "2" }]], "lock": [["rect", { "width": "18", "height": "11", "x": "3", "y": "11", "rx": "2", "ry": "2" }], ["path", { "d": "M7 11V7a5 5 0 0 1 10 0v4" }]], "clock": [["circle", { "cx": "12", "cy": "12", "r": "10" }], ["path", { "d": "M12 6v6l4 2" }]], "trending-up": [["path", { "d": "M16 7h6v6" }], ["path", { "d": "m22 7-8.5 8.5-5-5L2 17" }]], "trending-down": [["path", { "d": "M16 17h6v-6" }], ["path", { "d": "m22 17-8.5-8.5-5 5L2 7" }]], "image": [["rect", { "width": "18", "height": "18", "x": "3", "y": "3", "rx": "2", "ry": "2" }], ["circle", { "cx": "9", "cy": "9", "r": "2" }], ["path", { "d": "m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21" }]], "paperclip": [["path", { "d": "m16 6-8.414 8.586a2 2 0 0 0 2.829 2.829l8.414-8.586a4 4 0 1 0-5.657-5.657l-8.379 8.551a6 6 0 1 0 8.485 8.485l8.379-8.551" }]], "cloud-upload": [["path", { "d": "M12 13v8" }], ["path", { "d": "M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242" }], ["path", { "d": "m8 17 4-4 4 4" }]], "file": [["path", { "d": "M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z" }], ["path", { "d": "M14 2v5a1 1 0 0 0 1 1h5" }]], "sun": [["circle", { "cx": "12", "cy": "12", "r": "4" }], ["path", { "d": "M12 2v2" }], ["path", { "d": "M12 20v2" }], ["path", { "d": "m4.93 4.93 1.41 1.41" }], ["path", { "d": "m17.66 17.66 1.41 1.41" }], ["path", { "d": "M2 12h2" }], ["path", { "d": "M20 12h2" }], ["path", { "d": "m6.34 17.66-1.41 1.41" }], ["path", { "d": "m19.07 4.93-1.41 1.41" }]], "moon": [["path", { "d": "M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401" }]], "monitor": [["rect", { "width": "20", "height": "14", "x": "2", "y": "3", "rx": "2" }], ["line", { "x1": "8", "x2": "16", "y1": "21", "y2": "21" }], ["line", { "x1": "12", "x2": "12", "y1": "17", "y2": "21" }]] };
|
|
199
199
|
var SIZES = { sm: 16, md: 20, lg: 24 };
|
|
200
200
|
var Icon = React2.forwardRef(function Icon2(props, ref) {
|
|
201
|
+
const size = SIZES[props.size] || props.size || 16;
|
|
202
|
+
if (React2.isValidElement(props.name)) {
|
|
203
|
+
return /* @__PURE__ */ React2.createElement(
|
|
204
|
+
"span",
|
|
205
|
+
{
|
|
206
|
+
className: cx("aura-icon", "aura-icon--custom", props.className),
|
|
207
|
+
style: { width: size, height: size, ["--aura-icon-stroke"]: props.strokeWidth || 2 },
|
|
208
|
+
...props.label ? { role: "img", "aria-label": props.label } : { "aria-hidden": true }
|
|
209
|
+
},
|
|
210
|
+
props.name
|
|
211
|
+
);
|
|
212
|
+
}
|
|
201
213
|
const shapes = ICONS[props.name];
|
|
202
214
|
if (!shapes) return null;
|
|
203
|
-
const size = SIZES[props.size] || props.size || 16;
|
|
204
215
|
const a11y = props.label ? { role: "img", "aria-label": props.label } : { "aria-hidden": true, focusable: "false" };
|
|
205
216
|
return /* @__PURE__ */ React2.createElement(
|
|
206
217
|
"svg",
|
|
@@ -228,307 +239,16 @@ var Icon = React2.forwardRef(function Icon2(props, ref) {
|
|
|
228
239
|
var iconNames = Object.keys(ICONS);
|
|
229
240
|
|
|
230
241
|
// src/Button.tsx
|
|
231
|
-
var React3 = __toESM(require("react"), 1);
|
|
232
|
-
function ButtonLink(props, ref) {
|
|
233
|
-
const variant = props.variant || "primary";
|
|
234
|
-
const disabled = !!props.disabled;
|
|
235
|
-
const rest = omit(props, [
|
|
236
|
-
"variant",
|
|
237
|
-
"className",
|
|
238
|
-
"children",
|
|
239
|
-
"icon",
|
|
240
|
-
"iconRight",
|
|
241
|
-
"disabled",
|
|
242
|
-
"linkComponent",
|
|
243
|
-
"href"
|
|
244
|
-
]);
|
|
245
|
-
const Tag3 = !disabled && props.linkComponent ? props.linkComponent : "a";
|
|
246
|
-
return /* @__PURE__ */ React3.createElement(
|
|
247
|
-
Tag3,
|
|
248
|
-
{
|
|
249
|
-
...rest,
|
|
250
|
-
ref,
|
|
251
|
-
href: disabled ? void 0 : props.href,
|
|
252
|
-
role: disabled ? "link" : void 0,
|
|
253
|
-
"aria-disabled": disabled || void 0,
|
|
254
|
-
tabIndex: disabled ? -1 : props.tabIndex,
|
|
255
|
-
className: cx("aura-btn", "aura-btn--" + variant, props.className),
|
|
256
|
-
onClick: disabled ? void 0 : props.onClick
|
|
257
|
-
},
|
|
258
|
-
props.icon ? /* @__PURE__ */ React3.createElement(Icon, { name: props.icon }) : null,
|
|
259
|
-
props.children,
|
|
260
|
-
props.iconRight ? /* @__PURE__ */ React3.createElement(Icon, { name: props.iconRight }) : null
|
|
261
|
-
);
|
|
262
|
-
}
|
|
263
|
-
var Button = React3.forwardRef(
|
|
264
|
-
function Button2(all, ref) {
|
|
265
|
-
if (typeof all.href === "string") {
|
|
266
|
-
return ButtonLink(all, ref);
|
|
267
|
-
}
|
|
268
|
-
const props = all;
|
|
269
|
-
const variant = props.variant || "primary";
|
|
270
|
-
const loading = !!props.loading;
|
|
271
|
-
const rest = omit(props, ["variant", "className", "children", "type", "icon", "iconRight", "loading", "onClick"]);
|
|
272
|
-
return /* @__PURE__ */ React3.createElement(
|
|
273
|
-
"button",
|
|
274
|
-
{
|
|
275
|
-
...rest,
|
|
276
|
-
ref,
|
|
277
|
-
type: props.type || "button",
|
|
278
|
-
className: cx("aura-btn", "aura-btn--" + variant, loading && "is-loading", props.className),
|
|
279
|
-
"aria-busy": loading || void 0,
|
|
280
|
-
"aria-disabled": loading || void 0,
|
|
281
|
-
onClick: loading ? function(e) {
|
|
282
|
-
e.preventDefault();
|
|
283
|
-
} : props.onClick
|
|
284
|
-
},
|
|
285
|
-
loading ? /* @__PURE__ */ React3.createElement(Icon, { name: "loader-circle", className: "aura-spin" }) : props.icon ? /* @__PURE__ */ React3.createElement(Icon, { name: props.icon }) : null,
|
|
286
|
-
props.children,
|
|
287
|
-
props.iconRight && !loading ? /* @__PURE__ */ React3.createElement(Icon, { name: props.iconRight }) : null
|
|
288
|
-
);
|
|
289
|
-
}
|
|
290
|
-
);
|
|
291
|
-
|
|
292
|
-
// src/IconButton.tsx
|
|
293
242
|
var React4 = __toESM(require("react"), 1);
|
|
294
|
-
var IconButton = React4.forwardRef(function IconButton2(props, ref) {
|
|
295
|
-
const rest = omit(props, ["icon", "label", "className", "size"]);
|
|
296
|
-
return /* @__PURE__ */ React4.createElement(
|
|
297
|
-
"button",
|
|
298
|
-
{
|
|
299
|
-
...rest,
|
|
300
|
-
ref,
|
|
301
|
-
type: props.type || "button",
|
|
302
|
-
"aria-label": props.label,
|
|
303
|
-
title: props.label,
|
|
304
|
-
className: cx("aura-icon-btn", props.className)
|
|
305
|
-
},
|
|
306
|
-
/* @__PURE__ */ React4.createElement(Icon, { name: props.icon, size: props.size || "sm" })
|
|
307
|
-
);
|
|
308
|
-
});
|
|
309
|
-
|
|
310
|
-
// src/Menu.tsx
|
|
311
|
-
var React5 = __toESM(require("react"), 1);
|
|
312
|
-
var import_react_dom = require("react-dom");
|
|
313
|
-
var Menu = React5.forwardRef(function Menu2(props, ref) {
|
|
314
|
-
const own = React5.useRef(null), merged = useMergedRef(ref, own);
|
|
315
|
-
const posState = React5.useState(null);
|
|
316
|
-
const pos = posState[0], setPos = posState[1];
|
|
317
|
-
const items = props.items || [];
|
|
318
|
-
const mounted = useMounted();
|
|
319
|
-
useIsoLayoutEffect(
|
|
320
|
-
function() {
|
|
321
|
-
const a = props.anchor, m = own.current;
|
|
322
|
-
if (!a || !m) return;
|
|
323
|
-
const r = a.getBoundingClientRect(), mh = m.offsetHeight, mw = m.offsetWidth;
|
|
324
|
-
let top = r.bottom + 4;
|
|
325
|
-
if (top + mh > window.innerHeight - 8 && r.top - mh - 4 > 8) top = r.top - mh - 4;
|
|
326
|
-
const left = Math.max(8, Math.min(r.right - mw, window.innerWidth - mw - 8));
|
|
327
|
-
setPos({ top, left });
|
|
328
|
-
},
|
|
329
|
-
[props.anchor, mounted]
|
|
330
|
-
);
|
|
331
|
-
React5.useEffect(
|
|
332
|
-
function() {
|
|
333
|
-
if (!mounted) return;
|
|
334
|
-
const first = own.current && own.current.querySelector('[role^="menuitem"]:not([disabled])');
|
|
335
|
-
if (first && props.autoFocus !== false) first.focus();
|
|
336
|
-
function outside(e) {
|
|
337
|
-
if (own.current && !own.current.contains(e.target) && !(props.anchor && props.anchor.contains(e.target)))
|
|
338
|
-
props.onClose(false);
|
|
339
|
-
}
|
|
340
|
-
function onScroll(e) {
|
|
341
|
-
if (own.current && !own.current.contains(e.target)) props.onClose(false);
|
|
342
|
-
}
|
|
343
|
-
document.addEventListener("pointerdown", outside, true);
|
|
344
|
-
window.addEventListener("scroll", onScroll, true);
|
|
345
|
-
window.addEventListener("resize", onScroll);
|
|
346
|
-
return function() {
|
|
347
|
-
document.removeEventListener("pointerdown", outside, true);
|
|
348
|
-
window.removeEventListener("scroll", onScroll, true);
|
|
349
|
-
window.removeEventListener("resize", onScroll);
|
|
350
|
-
};
|
|
351
|
-
},
|
|
352
|
-
[mounted]
|
|
353
|
-
);
|
|
354
|
-
function onKeyDown(e) {
|
|
355
|
-
const list = Array.prototype.slice.call(
|
|
356
|
-
own.current.querySelectorAll('[role^="menuitem"]:not([disabled])')
|
|
357
|
-
);
|
|
358
|
-
const i = list.indexOf(document.activeElement);
|
|
359
|
-
if (e.key === "ArrowDown") {
|
|
360
|
-
e.preventDefault();
|
|
361
|
-
list[(i + 1) % list.length].focus();
|
|
362
|
-
} else if (e.key === "ArrowUp") {
|
|
363
|
-
e.preventDefault();
|
|
364
|
-
list[(i - 1 + list.length) % list.length].focus();
|
|
365
|
-
} else if (e.key === "Home") {
|
|
366
|
-
e.preventDefault();
|
|
367
|
-
list[0].focus();
|
|
368
|
-
} else if (e.key === "End") {
|
|
369
|
-
e.preventDefault();
|
|
370
|
-
list[list.length - 1].focus();
|
|
371
|
-
} else if (e.key === "Escape") {
|
|
372
|
-
e.preventDefault();
|
|
373
|
-
props.onClose(true);
|
|
374
|
-
} else if (e.key === "Tab") {
|
|
375
|
-
props.onClose(true);
|
|
376
|
-
}
|
|
377
|
-
e.stopPropagation();
|
|
378
|
-
}
|
|
379
|
-
const el = /* @__PURE__ */ React5.createElement(
|
|
380
|
-
"div",
|
|
381
|
-
{
|
|
382
|
-
ref: merged,
|
|
383
|
-
role: "menu",
|
|
384
|
-
"aria-label": props.label,
|
|
385
|
-
className: "aura-menu",
|
|
386
|
-
onKeyDown,
|
|
387
|
-
style: { top: pos ? pos.top : -9999, left: pos ? pos.left : -9999 }
|
|
388
|
-
},
|
|
389
|
-
items.map(function(it, i) {
|
|
390
|
-
if (it.separator) return /* @__PURE__ */ React5.createElement("div", { key: "s" + i, role: "separator", className: "aura-menu__sep" });
|
|
391
|
-
const isCheck = it.checked !== void 0;
|
|
392
|
-
return /* @__PURE__ */ React5.createElement(
|
|
393
|
-
"button",
|
|
394
|
-
{
|
|
395
|
-
key: i,
|
|
396
|
-
type: "button",
|
|
397
|
-
tabIndex: -1,
|
|
398
|
-
disabled: it.disabled,
|
|
399
|
-
role: isCheck ? "menuitemcheckbox" : "menuitem",
|
|
400
|
-
"aria-checked": isCheck ? !!it.checked : void 0,
|
|
401
|
-
className: "aura-menu__item",
|
|
402
|
-
onClick: function() {
|
|
403
|
-
it.onSelect();
|
|
404
|
-
if (!it.keepOpen) props.onClose(true);
|
|
405
|
-
}
|
|
406
|
-
},
|
|
407
|
-
isCheck ? /* @__PURE__ */ React5.createElement("span", { className: cx("aura-menu__check", it.checked && "is-on") }, it.checked ? /* @__PURE__ */ React5.createElement(Icon, { name: "check", size: 12, strokeWidth: 3 }) : null) : it.icon ? /* @__PURE__ */ React5.createElement(Icon, { name: it.icon }) : /* @__PURE__ */ React5.createElement("span", { className: "aura-menu__blank" }),
|
|
408
|
-
/* @__PURE__ */ React5.createElement("span", { className: "aura-menu__label" }, it.label),
|
|
409
|
-
it.hint ? /* @__PURE__ */ React5.createElement("span", { className: "aura-menu__hint" }, it.hint) : null
|
|
410
|
-
);
|
|
411
|
-
})
|
|
412
|
-
);
|
|
413
|
-
return mounted ? (0, import_react_dom.createPortal)(el, document.body) : null;
|
|
414
|
-
});
|
|
415
|
-
|
|
416
|
-
// src/DropdownMenu.tsx
|
|
417
|
-
var React6 = __toESM(require("react"), 1);
|
|
418
|
-
var DropdownMenu = React6.forwardRef(function DropdownMenu2(props, ref) {
|
|
419
|
-
const st = React6.useState(null), anchor = st[0], setAnchor = st[1];
|
|
420
|
-
const wrap = React6.useRef(null), wrapMerged = useMergedRef(ref, wrap);
|
|
421
|
-
const child = React6.Children.only(props.trigger);
|
|
422
|
-
function toggle(e) {
|
|
423
|
-
if (child.props.onClick) child.props.onClick(e);
|
|
424
|
-
const el = wrap.current && (wrap.current.querySelector('button, [role="button"], a') || wrap.current);
|
|
425
|
-
setAnchor(anchor ? null : el);
|
|
426
|
-
}
|
|
427
|
-
function onKeyDown(e) {
|
|
428
|
-
if ((e.key === "ArrowDown" || e.key === "ArrowUp") && !anchor) {
|
|
429
|
-
e.preventDefault();
|
|
430
|
-
setAnchor(wrap.current.querySelector('button, [role="button"], a') || wrap.current);
|
|
431
|
-
}
|
|
432
|
-
}
|
|
433
|
-
return /* @__PURE__ */ React6.createElement("span", { ref: wrapMerged, className: "aura-dropdown", onKeyDown }, React6.cloneElement(child, { onClick: toggle, "aria-haspopup": "menu", "aria-expanded": anchor ? true : false }), anchor ? /* @__PURE__ */ React6.createElement(
|
|
434
|
-
Menu,
|
|
435
|
-
{
|
|
436
|
-
anchor,
|
|
437
|
-
label: props.label,
|
|
438
|
-
items: props.items,
|
|
439
|
-
onClose: function(restore) {
|
|
440
|
-
setAnchor(null);
|
|
441
|
-
if (restore && typeof anchor.focus === "function") anchor.focus();
|
|
442
|
-
}
|
|
443
|
-
}
|
|
444
|
-
) : null);
|
|
445
|
-
});
|
|
446
|
-
|
|
447
|
-
// src/Checkbox.tsx
|
|
448
|
-
var React7 = __toESM(require("react"), 1);
|
|
449
|
-
var Checkbox = React7.forwardRef(function Checkbox2(props, ref) {
|
|
450
|
-
const own = React7.useRef(null), merged = useMergedRef(ref, own);
|
|
451
|
-
const st = useMaybeControlled(props.checked, !!props.defaultChecked, props.onChange);
|
|
452
|
-
const on = !!st[0];
|
|
453
|
-
React7.useEffect(function() {
|
|
454
|
-
if (own.current) own.current.indeterminate = !!props.indeterminate;
|
|
455
|
-
});
|
|
456
|
-
const rest = omit(props, [
|
|
457
|
-
"checked",
|
|
458
|
-
"defaultChecked",
|
|
459
|
-
"onChange",
|
|
460
|
-
"indeterminate",
|
|
461
|
-
"label",
|
|
462
|
-
"children",
|
|
463
|
-
"description",
|
|
464
|
-
"className",
|
|
465
|
-
"tabIndex",
|
|
466
|
-
"disabled"
|
|
467
|
-
]);
|
|
468
|
-
const labelled = props.children != null;
|
|
469
|
-
const descId = props.description && props.id ? props.id + "-desc" : void 0;
|
|
470
|
-
return /* @__PURE__ */ React7.createElement(
|
|
471
|
-
"label",
|
|
472
|
-
{
|
|
473
|
-
className: cx("aura-check", labelled && "aura-check--labelled", props.disabled && "is-disabled", props.className),
|
|
474
|
-
onClick: function(e) {
|
|
475
|
-
e.stopPropagation();
|
|
476
|
-
}
|
|
477
|
-
},
|
|
478
|
-
/* @__PURE__ */ React7.createElement(
|
|
479
|
-
"input",
|
|
480
|
-
{
|
|
481
|
-
...rest,
|
|
482
|
-
ref: merged,
|
|
483
|
-
type: "checkbox",
|
|
484
|
-
className: "aura-check__input",
|
|
485
|
-
checked: on,
|
|
486
|
-
tabIndex: props.tabIndex,
|
|
487
|
-
disabled: props.disabled,
|
|
488
|
-
"aria-describedby": descId,
|
|
489
|
-
"aria-label": labelled ? void 0 : props.label,
|
|
490
|
-
onChange: function(e) {
|
|
491
|
-
st[1](e.target.checked);
|
|
492
|
-
}
|
|
493
|
-
}
|
|
494
|
-
),
|
|
495
|
-
/* @__PURE__ */ React7.createElement("span", { className: "aura-check__box", "aria-hidden": true }, props.indeterminate ? /* @__PURE__ */ React7.createElement(Icon, { name: "minus", size: 12, strokeWidth: 3 }) : on ? /* @__PURE__ */ React7.createElement(Icon, { name: "check", size: 12, strokeWidth: 3 }) : null),
|
|
496
|
-
labelled ? /* @__PURE__ */ React7.createElement("span", { className: "aura-check__text" }, /* @__PURE__ */ React7.createElement("span", { className: "aura-check__label" }, props.children), props.description ? /* @__PURE__ */ React7.createElement("span", { className: "aura-check__desc", id: descId }, props.description) : null) : null
|
|
497
|
-
);
|
|
498
|
-
});
|
|
499
|
-
|
|
500
|
-
// src/StatusPill.tsx
|
|
501
|
-
var React8 = __toESM(require("react"), 1);
|
|
502
|
-
var TONE_ICON = {
|
|
503
|
-
neutral: "circle",
|
|
504
|
-
progress: "circle-dot-dashed",
|
|
505
|
-
ready: "circle-check",
|
|
506
|
-
blocked: "ban"
|
|
507
|
-
};
|
|
508
|
-
var TONE_WORDS = {
|
|
509
|
-
ready: ["ready", "done", "complete", "completed", "approved", "live", "passed"],
|
|
510
|
-
progress: ["in progress", "in review", "review", "syncing", "running", "pending"],
|
|
511
|
-
blocked: ["blocked", "failed", "error", "rejected", "on hold", "cancelled"]
|
|
512
|
-
};
|
|
513
|
-
function toneFor(status) {
|
|
514
|
-
const s = String(status == null ? "" : status).trim().toLowerCase();
|
|
515
|
-
for (const t in TONE_WORDS) if (TONE_WORDS[t].indexOf(s) >= 0) return t;
|
|
516
|
-
return "neutral";
|
|
517
|
-
}
|
|
518
|
-
var TONE_ORDER = { neutral: 0, progress: 1, ready: 2, blocked: 3 };
|
|
519
|
-
var StatusPill = React8.forwardRef(function StatusPill2(props, ref) {
|
|
520
|
-
const tone2 = props.tone || toneFor(props.children);
|
|
521
|
-
return /* @__PURE__ */ React8.createElement("span", { ref, className: cx("aura-pill", "aura-pill--" + tone2, props.className) }, /* @__PURE__ */ React8.createElement(Icon, { name: TONE_ICON[tone2] || "circle", size: 12 }), props.children);
|
|
522
|
-
});
|
|
523
|
-
|
|
524
|
-
// src/Field.tsx
|
|
525
|
-
var React10 = __toESM(require("react"), 1);
|
|
526
243
|
|
|
527
244
|
// src/locale.tsx
|
|
528
|
-
var
|
|
245
|
+
var React3 = __toESM(require("react"), 1);
|
|
529
246
|
var n = function(x) {
|
|
530
247
|
return Number(x).toLocaleString("en");
|
|
531
248
|
};
|
|
249
|
+
var nsv = function(x) {
|
|
250
|
+
return Number(x).toLocaleString("sv-SE");
|
|
251
|
+
};
|
|
532
252
|
var STRINGS = {
|
|
533
253
|
en: {
|
|
534
254
|
close: "Close",
|
|
@@ -722,34 +442,432 @@ var STRINGS = {
|
|
|
722
442
|
pageN: function(p) {
|
|
723
443
|
return "\u0E2B\u0E19\u0E49\u0E32 " + p;
|
|
724
444
|
},
|
|
725
|
-
accepts: function(list, max) {
|
|
726
|
-
return [list, max && "\u0E44\u0E21\u0E48\u0E40\u0E01\u0E34\u0E19 " + max + " \u0E15\u0E48\u0E2D\u0E44\u0E1F\u0E25\u0E4C"].filter(Boolean).join(" \xB7 ");
|
|
445
|
+
accepts: function(list, max) {
|
|
446
|
+
return [list, max && "\u0E44\u0E21\u0E48\u0E40\u0E01\u0E34\u0E19 " + max + " \u0E15\u0E48\u0E2D\u0E44\u0E1F\u0E25\u0E4C"].filter(Boolean).join(" \xB7 ");
|
|
447
|
+
}
|
|
448
|
+
},
|
|
449
|
+
sv: {
|
|
450
|
+
close: "St\xE4ng",
|
|
451
|
+
dismiss: "St\xE4ng",
|
|
452
|
+
dismissToast: "St\xE4ng aviseringen",
|
|
453
|
+
notifications: "Aviseringar",
|
|
454
|
+
mainNav: "Huvudmeny",
|
|
455
|
+
breadcrumb: "Br\xF6dsmulor",
|
|
456
|
+
navigation: "Navigering",
|
|
457
|
+
openNav: "\xD6ppna menyn",
|
|
458
|
+
searching: "S\xF6ker\u2026",
|
|
459
|
+
noMatches: "Inga tr\xE4ffar",
|
|
460
|
+
clear: function(what) {
|
|
461
|
+
return "Rensa " + (what || "urvalet");
|
|
462
|
+
},
|
|
463
|
+
keepTyping: function(total) {
|
|
464
|
+
return "Skriv mer f\xF6r att begr\xE4nsa " + nsv(total) + " alternativ";
|
|
465
|
+
},
|
|
466
|
+
sortAsc: "Sortera stigande",
|
|
467
|
+
sortDesc: "Sortera fallande",
|
|
468
|
+
pin: "F\xE4st till v\xE4nster",
|
|
469
|
+
unpin: "Lossa kolumnen",
|
|
470
|
+
moveLeft: "Flytta v\xE4nster",
|
|
471
|
+
moveRight: "Flytta h\xF6ger",
|
|
472
|
+
hideColumn: "D\xF6lj kolumnen",
|
|
473
|
+
resetColumns: "\xC5terst\xE4ll kolumner",
|
|
474
|
+
selectRows: "V\xE4lj rader",
|
|
475
|
+
selectAllRows: "V\xE4lj alla rader",
|
|
476
|
+
deselectAllRows: "Avmarkera alla rader",
|
|
477
|
+
selectAll: "V\xE4lj alla",
|
|
478
|
+
selectRow: function(k) {
|
|
479
|
+
return "V\xE4lj " + k;
|
|
480
|
+
},
|
|
481
|
+
selectedCount: function(c) {
|
|
482
|
+
return nsv(c) + " valda";
|
|
483
|
+
},
|
|
484
|
+
pinned: "F\xE4st",
|
|
485
|
+
columnOptions: function(label) {
|
|
486
|
+
return "Alternativ f\xF6r kolumnen " + label;
|
|
487
|
+
},
|
|
488
|
+
column: function(label) {
|
|
489
|
+
return label ? "Kolumnen " + label : "Kolumn";
|
|
490
|
+
},
|
|
491
|
+
columns: "Kolumner",
|
|
492
|
+
showHideColumns: "Visa eller d\xF6lj kolumner",
|
|
493
|
+
empty: "Inget h\xE4r \xE4nnu",
|
|
494
|
+
loading: "Laddar\u2026",
|
|
495
|
+
loadingRows: "Laddar rader",
|
|
496
|
+
range: function(a, b, total) {
|
|
497
|
+
return a + "\u2013" + b + " av " + nsv(total);
|
|
498
|
+
},
|
|
499
|
+
page: function(p, total) {
|
|
500
|
+
return "Sida " + p + " av " + total;
|
|
501
|
+
},
|
|
502
|
+
prevPage: "F\xF6reg\xE5ende sida",
|
|
503
|
+
nextPage: "N\xE4sta sida",
|
|
504
|
+
rowCount: function(c) {
|
|
505
|
+
return nsv(c) + " rader";
|
|
506
|
+
},
|
|
507
|
+
actions: "\xC5tg\xE4rder",
|
|
508
|
+
optional: "valfritt",
|
|
509
|
+
timePlaceholder: "tt:mm",
|
|
510
|
+
timeInvalid: "Skriv en tid som 09:30",
|
|
511
|
+
timeOutOfRange: function(a, b) {
|
|
512
|
+
return "V\xE4lj en tid mellan " + a + " och " + b;
|
|
513
|
+
},
|
|
514
|
+
dropFiles: "Dra filer hit eller",
|
|
515
|
+
browse: "V\xE4lj filer",
|
|
516
|
+
browseOne: "V\xE4lj en fil",
|
|
517
|
+
remove: function(n2) {
|
|
518
|
+
return "Ta bort " + n2;
|
|
519
|
+
},
|
|
520
|
+
fileTooBig: function(max) {
|
|
521
|
+
return "St\xF6rre \xE4n " + max;
|
|
522
|
+
},
|
|
523
|
+
fileWrongType: "Den h\xE4r filtypen godtas inte",
|
|
524
|
+
tooManyFiles: function(n2) {
|
|
525
|
+
return "H\xF6gst " + n2 + " filer";
|
|
526
|
+
},
|
|
527
|
+
colorScheme: "F\xE4rgl\xE4ge",
|
|
528
|
+
increase: "\xD6ka",
|
|
529
|
+
decrease: "Minska",
|
|
530
|
+
stepDone: "klart",
|
|
531
|
+
stepOf: function(i, total) {
|
|
532
|
+
return "Steg " + i + " av " + total;
|
|
533
|
+
},
|
|
534
|
+
schemeLight: "Ljust",
|
|
535
|
+
schemeDark: "M\xF6rkt",
|
|
536
|
+
schemeSystem: "System",
|
|
537
|
+
uploading: "Laddar upp\u2026",
|
|
538
|
+
images: "Bilder",
|
|
539
|
+
pagination: "Sidnumrering",
|
|
540
|
+
pageN: function(p) {
|
|
541
|
+
return "Sida " + p;
|
|
542
|
+
},
|
|
543
|
+
accepts: function(list, max) {
|
|
544
|
+
return [list, max && "h\xF6gst " + max + " per fil"].filter(Boolean).join(", ");
|
|
545
|
+
}
|
|
546
|
+
}
|
|
547
|
+
};
|
|
548
|
+
var LocaleContext = React3.createContext(null);
|
|
549
|
+
function AuraProvider(props) {
|
|
550
|
+
const value = React3.useMemo(
|
|
551
|
+
function() {
|
|
552
|
+
const base = props.locale && STRINGS[props.locale] || STRINGS.en;
|
|
553
|
+
return {
|
|
554
|
+
locale: props.locale || "en",
|
|
555
|
+
calendar: props.calendar || null,
|
|
556
|
+
strings: props.strings ? Object.assign({}, base, props.strings) : base,
|
|
557
|
+
linkComponent: props.linkComponent || null
|
|
558
|
+
};
|
|
559
|
+
},
|
|
560
|
+
[props.locale, props.calendar, props.strings, props.linkComponent]
|
|
561
|
+
);
|
|
562
|
+
return /* @__PURE__ */ React3.createElement(LocaleContext.Provider, { value }, props.children);
|
|
563
|
+
}
|
|
564
|
+
function useAuraLocale() {
|
|
565
|
+
return React3.useContext(LocaleContext) || { locale: null, calendar: null, strings: STRINGS.en };
|
|
566
|
+
}
|
|
567
|
+
function useLinkComponent(own) {
|
|
568
|
+
const ctx = React3.useContext(LocaleContext);
|
|
569
|
+
return own || ctx && ctx.linkComponent || "a";
|
|
570
|
+
}
|
|
571
|
+
function useStrings() {
|
|
572
|
+
return useAuraLocale().strings;
|
|
573
|
+
}
|
|
574
|
+
|
|
575
|
+
// src/Button.tsx
|
|
576
|
+
function ButtonLink(props, ref, Link) {
|
|
577
|
+
const variant = props.variant || "primary";
|
|
578
|
+
const disabled = !!props.disabled;
|
|
579
|
+
const rest = omit(props, [
|
|
580
|
+
"variant",
|
|
581
|
+
"className",
|
|
582
|
+
"children",
|
|
583
|
+
"icon",
|
|
584
|
+
"iconRight",
|
|
585
|
+
"disabled",
|
|
586
|
+
"linkComponent",
|
|
587
|
+
"href"
|
|
588
|
+
]);
|
|
589
|
+
const Tag3 = disabled ? "a" : Link;
|
|
590
|
+
return /* @__PURE__ */ React4.createElement(
|
|
591
|
+
Tag3,
|
|
592
|
+
{
|
|
593
|
+
...rest,
|
|
594
|
+
ref,
|
|
595
|
+
href: disabled ? void 0 : props.href,
|
|
596
|
+
role: disabled ? "link" : void 0,
|
|
597
|
+
"aria-disabled": disabled || void 0,
|
|
598
|
+
tabIndex: disabled ? -1 : props.tabIndex,
|
|
599
|
+
className: cx("aura-btn", "aura-btn--" + variant, props.className),
|
|
600
|
+
onClick: disabled ? void 0 : props.onClick
|
|
601
|
+
},
|
|
602
|
+
props.icon ? /* @__PURE__ */ React4.createElement(Icon, { name: props.icon }) : null,
|
|
603
|
+
props.children,
|
|
604
|
+
props.iconRight ? /* @__PURE__ */ React4.createElement(Icon, { name: props.iconRight }) : null
|
|
605
|
+
);
|
|
606
|
+
}
|
|
607
|
+
var Button = React4.forwardRef(
|
|
608
|
+
function Button2(all, ref) {
|
|
609
|
+
const Link = useLinkComponent(all.linkComponent);
|
|
610
|
+
if (typeof all.href === "string") {
|
|
611
|
+
return ButtonLink(all, ref, Link);
|
|
612
|
+
}
|
|
613
|
+
const props = all;
|
|
614
|
+
const variant = props.variant || "primary";
|
|
615
|
+
const loading = !!props.loading;
|
|
616
|
+
const rest = omit(props, ["variant", "className", "children", "type", "icon", "iconRight", "loading", "onClick"]);
|
|
617
|
+
return /* @__PURE__ */ React4.createElement(
|
|
618
|
+
"button",
|
|
619
|
+
{
|
|
620
|
+
...rest,
|
|
621
|
+
ref,
|
|
622
|
+
type: props.type || "button",
|
|
623
|
+
className: cx("aura-btn", "aura-btn--" + variant, loading && "is-loading", props.className),
|
|
624
|
+
"aria-busy": loading || void 0,
|
|
625
|
+
"aria-disabled": loading || void 0,
|
|
626
|
+
onClick: loading ? function(e) {
|
|
627
|
+
e.preventDefault();
|
|
628
|
+
} : props.onClick
|
|
629
|
+
},
|
|
630
|
+
loading ? /* @__PURE__ */ React4.createElement(Icon, { name: "loader-circle", className: "aura-spin" }) : props.icon ? /* @__PURE__ */ React4.createElement(Icon, { name: props.icon }) : null,
|
|
631
|
+
props.children,
|
|
632
|
+
props.iconRight && !loading ? /* @__PURE__ */ React4.createElement(Icon, { name: props.iconRight }) : null
|
|
633
|
+
);
|
|
634
|
+
}
|
|
635
|
+
);
|
|
636
|
+
|
|
637
|
+
// src/IconButton.tsx
|
|
638
|
+
var React5 = __toESM(require("react"), 1);
|
|
639
|
+
var IconButton = React5.forwardRef(function IconButton2(props, ref) {
|
|
640
|
+
const rest = omit(props, ["icon", "label", "className", "size", "tone"]);
|
|
641
|
+
return /* @__PURE__ */ React5.createElement(
|
|
642
|
+
"button",
|
|
643
|
+
{
|
|
644
|
+
...rest,
|
|
645
|
+
ref,
|
|
646
|
+
type: props.type || "button",
|
|
647
|
+
"aria-label": props.label,
|
|
648
|
+
title: props.label,
|
|
649
|
+
className: cx("aura-icon-btn", props.tone === "danger" && "aura-icon-btn--danger", props.className)
|
|
650
|
+
},
|
|
651
|
+
/* @__PURE__ */ React5.createElement(Icon, { name: props.icon, size: props.size || "sm" })
|
|
652
|
+
);
|
|
653
|
+
});
|
|
654
|
+
|
|
655
|
+
// src/Menu.tsx
|
|
656
|
+
var React6 = __toESM(require("react"), 1);
|
|
657
|
+
var import_react_dom = require("react-dom");
|
|
658
|
+
var Menu = React6.forwardRef(function Menu2(props, ref) {
|
|
659
|
+
const own = React6.useRef(null), merged = useMergedRef(ref, own);
|
|
660
|
+
const posState = React6.useState(null);
|
|
661
|
+
const pos = posState[0], setPos = posState[1];
|
|
662
|
+
const items = props.items || [];
|
|
663
|
+
const mounted = useMounted();
|
|
664
|
+
useIsoLayoutEffect(
|
|
665
|
+
function() {
|
|
666
|
+
const a = props.anchor, m = own.current;
|
|
667
|
+
if (!a || !m) return;
|
|
668
|
+
const r = a.getBoundingClientRect(), mh = m.offsetHeight, mw = m.offsetWidth;
|
|
669
|
+
let top = r.bottom + 4;
|
|
670
|
+
if (top + mh > window.innerHeight - 8 && r.top - mh - 4 > 8) top = r.top - mh - 4;
|
|
671
|
+
const left = Math.max(8, Math.min(r.right - mw, window.innerWidth - mw - 8));
|
|
672
|
+
setPos({ top, left });
|
|
673
|
+
},
|
|
674
|
+
[props.anchor, mounted]
|
|
675
|
+
);
|
|
676
|
+
React6.useEffect(
|
|
677
|
+
function() {
|
|
678
|
+
if (!mounted) return;
|
|
679
|
+
const first = own.current && own.current.querySelector('[role^="menuitem"]:not([disabled])');
|
|
680
|
+
if (first && props.autoFocus !== false) first.focus();
|
|
681
|
+
function outside(e) {
|
|
682
|
+
if (own.current && !own.current.contains(e.target) && !(props.anchor && props.anchor.contains(e.target)))
|
|
683
|
+
props.onClose(false);
|
|
684
|
+
}
|
|
685
|
+
function onScroll(e) {
|
|
686
|
+
if (own.current && !own.current.contains(e.target)) props.onClose(false);
|
|
687
|
+
}
|
|
688
|
+
document.addEventListener("pointerdown", outside, true);
|
|
689
|
+
window.addEventListener("scroll", onScroll, true);
|
|
690
|
+
window.addEventListener("resize", onScroll);
|
|
691
|
+
return function() {
|
|
692
|
+
document.removeEventListener("pointerdown", outside, true);
|
|
693
|
+
window.removeEventListener("scroll", onScroll, true);
|
|
694
|
+
window.removeEventListener("resize", onScroll);
|
|
695
|
+
};
|
|
696
|
+
},
|
|
697
|
+
[mounted]
|
|
698
|
+
);
|
|
699
|
+
function onKeyDown(e) {
|
|
700
|
+
const list = Array.prototype.slice.call(
|
|
701
|
+
own.current.querySelectorAll('[role^="menuitem"]:not([disabled])')
|
|
702
|
+
);
|
|
703
|
+
const i = list.indexOf(document.activeElement);
|
|
704
|
+
if (e.key === "ArrowDown") {
|
|
705
|
+
e.preventDefault();
|
|
706
|
+
list[(i + 1) % list.length].focus();
|
|
707
|
+
} else if (e.key === "ArrowUp") {
|
|
708
|
+
e.preventDefault();
|
|
709
|
+
list[(i - 1 + list.length) % list.length].focus();
|
|
710
|
+
} else if (e.key === "Home") {
|
|
711
|
+
e.preventDefault();
|
|
712
|
+
list[0].focus();
|
|
713
|
+
} else if (e.key === "End") {
|
|
714
|
+
e.preventDefault();
|
|
715
|
+
list[list.length - 1].focus();
|
|
716
|
+
} else if (e.key === "Escape") {
|
|
717
|
+
e.preventDefault();
|
|
718
|
+
props.onClose(true);
|
|
719
|
+
} else if (e.key === "Tab") {
|
|
720
|
+
props.onClose(true);
|
|
721
|
+
}
|
|
722
|
+
e.stopPropagation();
|
|
723
|
+
}
|
|
724
|
+
const el = /* @__PURE__ */ React6.createElement(
|
|
725
|
+
"div",
|
|
726
|
+
{
|
|
727
|
+
ref: merged,
|
|
728
|
+
role: "menu",
|
|
729
|
+
"aria-label": props.label,
|
|
730
|
+
className: "aura-menu",
|
|
731
|
+
onKeyDown,
|
|
732
|
+
style: { top: pos ? pos.top : -9999, left: pos ? pos.left : -9999 }
|
|
733
|
+
},
|
|
734
|
+
items.map(function(it, i) {
|
|
735
|
+
if (it.separator) return /* @__PURE__ */ React6.createElement("div", { key: "s" + i, role: "separator", className: "aura-menu__sep" });
|
|
736
|
+
const isCheck = it.checked !== void 0;
|
|
737
|
+
return /* @__PURE__ */ React6.createElement(
|
|
738
|
+
"button",
|
|
739
|
+
{
|
|
740
|
+
key: i,
|
|
741
|
+
type: "button",
|
|
742
|
+
tabIndex: -1,
|
|
743
|
+
disabled: it.disabled,
|
|
744
|
+
role: isCheck ? "menuitemcheckbox" : "menuitem",
|
|
745
|
+
"aria-checked": isCheck ? !!it.checked : void 0,
|
|
746
|
+
className: "aura-menu__item",
|
|
747
|
+
onClick: function() {
|
|
748
|
+
it.onSelect();
|
|
749
|
+
if (!it.keepOpen) props.onClose(true);
|
|
750
|
+
}
|
|
751
|
+
},
|
|
752
|
+
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" }),
|
|
753
|
+
/* @__PURE__ */ React6.createElement("span", { className: "aura-menu__label" }, it.label),
|
|
754
|
+
it.hint ? /* @__PURE__ */ React6.createElement("span", { className: "aura-menu__hint" }, it.hint) : null
|
|
755
|
+
);
|
|
756
|
+
})
|
|
757
|
+
);
|
|
758
|
+
return mounted ? (0, import_react_dom.createPortal)(el, document.body) : null;
|
|
759
|
+
});
|
|
760
|
+
|
|
761
|
+
// src/DropdownMenu.tsx
|
|
762
|
+
var React7 = __toESM(require("react"), 1);
|
|
763
|
+
var DropdownMenu = React7.forwardRef(function DropdownMenu2(props, ref) {
|
|
764
|
+
const st = React7.useState(null), anchor = st[0], setAnchor = st[1];
|
|
765
|
+
const wrap = React7.useRef(null), wrapMerged = useMergedRef(ref, wrap);
|
|
766
|
+
const child = React7.Children.only(props.trigger);
|
|
767
|
+
function toggle(e) {
|
|
768
|
+
if (child.props.onClick) child.props.onClick(e);
|
|
769
|
+
const el = wrap.current && (wrap.current.querySelector('button, [role="button"], a') || wrap.current);
|
|
770
|
+
setAnchor(anchor ? null : el);
|
|
771
|
+
}
|
|
772
|
+
function onKeyDown(e) {
|
|
773
|
+
if ((e.key === "ArrowDown" || e.key === "ArrowUp") && !anchor) {
|
|
774
|
+
e.preventDefault();
|
|
775
|
+
setAnchor(wrap.current.querySelector('button, [role="button"], a') || wrap.current);
|
|
727
776
|
}
|
|
728
777
|
}
|
|
729
|
-
}
|
|
730
|
-
|
|
731
|
-
|
|
732
|
-
|
|
733
|
-
|
|
734
|
-
|
|
735
|
-
|
|
736
|
-
|
|
737
|
-
|
|
738
|
-
|
|
739
|
-
|
|
778
|
+
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(
|
|
779
|
+
Menu,
|
|
780
|
+
{
|
|
781
|
+
anchor,
|
|
782
|
+
label: props.label,
|
|
783
|
+
items: props.items,
|
|
784
|
+
onClose: function(restore) {
|
|
785
|
+
setAnchor(null);
|
|
786
|
+
if (restore && typeof anchor.focus === "function") anchor.focus();
|
|
787
|
+
}
|
|
788
|
+
}
|
|
789
|
+
) : null);
|
|
790
|
+
});
|
|
791
|
+
|
|
792
|
+
// src/Checkbox.tsx
|
|
793
|
+
var React8 = __toESM(require("react"), 1);
|
|
794
|
+
var Checkbox = React8.forwardRef(function Checkbox2(props, ref) {
|
|
795
|
+
const own = React8.useRef(null), merged = useMergedRef(ref, own);
|
|
796
|
+
const st = useMaybeControlled(props.checked, !!props.defaultChecked, props.onChange);
|
|
797
|
+
const on = !!st[0];
|
|
798
|
+
React8.useEffect(function() {
|
|
799
|
+
if (own.current) own.current.indeterminate = !!props.indeterminate;
|
|
800
|
+
});
|
|
801
|
+
const rest = omit(props, [
|
|
802
|
+
"checked",
|
|
803
|
+
"defaultChecked",
|
|
804
|
+
"onChange",
|
|
805
|
+
"indeterminate",
|
|
806
|
+
"label",
|
|
807
|
+
"children",
|
|
808
|
+
"description",
|
|
809
|
+
"className",
|
|
810
|
+
"tabIndex",
|
|
811
|
+
"disabled"
|
|
812
|
+
]);
|
|
813
|
+
const labelled = props.children != null;
|
|
814
|
+
const descId = props.description && props.id ? props.id + "-desc" : void 0;
|
|
815
|
+
return /* @__PURE__ */ React8.createElement(
|
|
816
|
+
"label",
|
|
817
|
+
{
|
|
818
|
+
className: cx("aura-check", labelled && "aura-check--labelled", props.disabled && "is-disabled", props.className),
|
|
819
|
+
onClick: function(e) {
|
|
820
|
+
e.stopPropagation();
|
|
821
|
+
}
|
|
740
822
|
},
|
|
741
|
-
|
|
823
|
+
/* @__PURE__ */ React8.createElement(
|
|
824
|
+
"input",
|
|
825
|
+
{
|
|
826
|
+
...rest,
|
|
827
|
+
ref: merged,
|
|
828
|
+
type: "checkbox",
|
|
829
|
+
className: "aura-check__input",
|
|
830
|
+
checked: on,
|
|
831
|
+
tabIndex: props.tabIndex,
|
|
832
|
+
disabled: props.disabled,
|
|
833
|
+
"aria-describedby": descId,
|
|
834
|
+
"aria-label": labelled ? void 0 : props.label,
|
|
835
|
+
onChange: function(e) {
|
|
836
|
+
st[1](e.target.checked);
|
|
837
|
+
}
|
|
838
|
+
}
|
|
839
|
+
),
|
|
840
|
+
/* @__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),
|
|
841
|
+
labelled ? /* @__PURE__ */ React8.createElement("span", { className: "aura-check__text" }, /* @__PURE__ */ React8.createElement("span", { className: "aura-check__label" }, props.children), props.description ? /* @__PURE__ */ React8.createElement("span", { className: "aura-check__desc", id: descId }, props.description) : null) : null
|
|
742
842
|
);
|
|
743
|
-
|
|
744
|
-
|
|
745
|
-
|
|
746
|
-
|
|
747
|
-
|
|
748
|
-
|
|
749
|
-
|
|
843
|
+
});
|
|
844
|
+
|
|
845
|
+
// src/StatusPill.tsx
|
|
846
|
+
var React9 = __toESM(require("react"), 1);
|
|
847
|
+
var TONE_ICON = {
|
|
848
|
+
neutral: "circle",
|
|
849
|
+
progress: "circle-dot-dashed",
|
|
850
|
+
ready: "circle-check",
|
|
851
|
+
blocked: "ban"
|
|
852
|
+
};
|
|
853
|
+
var TONE_WORDS = {
|
|
854
|
+
ready: ["ready", "done", "complete", "completed", "approved", "live", "passed"],
|
|
855
|
+
progress: ["in progress", "in review", "review", "syncing", "running", "pending"],
|
|
856
|
+
blocked: ["blocked", "failed", "error", "rejected", "on hold", "cancelled"]
|
|
857
|
+
};
|
|
858
|
+
function toneFor(status) {
|
|
859
|
+
const s = String(status == null ? "" : status).trim().toLowerCase();
|
|
860
|
+
for (const t in TONE_WORDS) if (TONE_WORDS[t].indexOf(s) >= 0) return t;
|
|
861
|
+
return "neutral";
|
|
750
862
|
}
|
|
863
|
+
var TONE_ORDER = { neutral: 0, progress: 1, ready: 2, blocked: 3 };
|
|
864
|
+
var StatusPill = React9.forwardRef(function StatusPill2(props, ref) {
|
|
865
|
+
const tone2 = props.tone || toneFor(props.children);
|
|
866
|
+
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);
|
|
867
|
+
});
|
|
751
868
|
|
|
752
869
|
// src/Field.tsx
|
|
870
|
+
var React10 = __toESM(require("react"), 1);
|
|
753
871
|
var h2 = React10.createElement;
|
|
754
872
|
var Field = React10.forwardRef(function Field2(props, ref) {
|
|
755
873
|
const t = useStrings();
|
|
@@ -1335,8 +1453,69 @@ function addMonths(d, n2) {
|
|
|
1335
1453
|
function same(a, b) {
|
|
1336
1454
|
return !!a && !!b && a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
|
|
1337
1455
|
}
|
|
1456
|
+
var TAGS = { th: "th-TH", en: "en-GB", sv: "sv-SE" };
|
|
1457
|
+
function defaultCalendar(locale) {
|
|
1458
|
+
return locale === "sv" ? "gregory" : "buddhist";
|
|
1459
|
+
}
|
|
1338
1460
|
function localeTag(locale, calendar) {
|
|
1339
|
-
|
|
1461
|
+
const cal = calendar || defaultCalendar(locale);
|
|
1462
|
+
return (TAGS[locale || "th"] || "th-TH") + "-u-ca-" + (cal === "gregory" ? "gregory" : "buddhist");
|
|
1463
|
+
}
|
|
1464
|
+
var DATE_TEXT = {
|
|
1465
|
+
th: {
|
|
1466
|
+
prevYears: "\u0E0A\u0E48\u0E27\u0E07\u0E1B\u0E35\u0E01\u0E48\u0E2D\u0E19\u0E2B\u0E19\u0E49\u0E32",
|
|
1467
|
+
nextYears: "\u0E0A\u0E48\u0E27\u0E07\u0E1B\u0E35\u0E16\u0E31\u0E14\u0E44\u0E1B",
|
|
1468
|
+
prevMonth: "\u0E40\u0E14\u0E37\u0E2D\u0E19\u0E01\u0E48\u0E2D\u0E19\u0E2B\u0E19\u0E49\u0E32",
|
|
1469
|
+
nextMonth: "\u0E40\u0E14\u0E37\u0E2D\u0E19\u0E16\u0E31\u0E14\u0E44\u0E1B",
|
|
1470
|
+
today: "\u0E27\u0E31\u0E19\u0E19\u0E35\u0E49",
|
|
1471
|
+
clear: "\u0E25\u0E49\u0E32\u0E07",
|
|
1472
|
+
chooseDate: "\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E27\u0E31\u0E19\u0E17\u0E35\u0E48",
|
|
1473
|
+
datePlaceholder: "\u0E27\u0E27/\u0E14\u0E14/\u0E1B\u0E1B\u0E1B\u0E1B",
|
|
1474
|
+
clearDate: "\u0E25\u0E49\u0E32\u0E07\u0E27\u0E31\u0E19\u0E17\u0E35\u0E48",
|
|
1475
|
+
openCalendar: "\u0E40\u0E1B\u0E34\u0E14\u0E1B\u0E0F\u0E34\u0E17\u0E34\u0E19",
|
|
1476
|
+
chooseDates: "\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E0A\u0E48\u0E27\u0E07\u0E27\u0E31\u0E19\u0E17\u0E35\u0E48",
|
|
1477
|
+
rangePlaceholder: "\u0E27\u0E27/\u0E14\u0E14/\u0E1B\u0E1B\u0E1B\u0E1B \u2013 \u0E27\u0E27/\u0E14\u0E14/\u0E1B\u0E1B\u0E1B\u0E1B",
|
|
1478
|
+
clearDates: "\u0E25\u0E49\u0E32\u0E07\u0E0A\u0E48\u0E27\u0E07\u0E27\u0E31\u0E19\u0E17\u0E35\u0E48",
|
|
1479
|
+
chooseStart: "\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E27\u0E31\u0E19\u0E40\u0E23\u0E34\u0E48\u0E21\u0E15\u0E49\u0E19",
|
|
1480
|
+
chooseEnd: "\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E27\u0E31\u0E19\u0E2A\u0E34\u0E49\u0E19\u0E2A\u0E38\u0E14"
|
|
1481
|
+
},
|
|
1482
|
+
en: {
|
|
1483
|
+
prevYears: "Previous years",
|
|
1484
|
+
nextYears: "Next years",
|
|
1485
|
+
prevMonth: "Previous month",
|
|
1486
|
+
nextMonth: "Next month",
|
|
1487
|
+
today: "Today",
|
|
1488
|
+
clear: "Clear",
|
|
1489
|
+
chooseDate: "Choose date",
|
|
1490
|
+
datePlaceholder: "dd/mm/yyyy",
|
|
1491
|
+
clearDate: "Clear date",
|
|
1492
|
+
openCalendar: "Open calendar",
|
|
1493
|
+
chooseDates: "Choose dates",
|
|
1494
|
+
rangePlaceholder: "dd/mm/yyyy \u2013 dd/mm/yyyy",
|
|
1495
|
+
clearDates: "Clear dates",
|
|
1496
|
+
chooseStart: "Choose the start date",
|
|
1497
|
+
chooseEnd: "Choose the end date"
|
|
1498
|
+
},
|
|
1499
|
+
sv: {
|
|
1500
|
+
prevYears: "Tidigare \xE5r",
|
|
1501
|
+
nextYears: "Senare \xE5r",
|
|
1502
|
+
prevMonth: "F\xF6reg\xE5ende m\xE5nad",
|
|
1503
|
+
nextMonth: "N\xE4sta m\xE5nad",
|
|
1504
|
+
today: "Idag",
|
|
1505
|
+
clear: "Rensa",
|
|
1506
|
+
chooseDate: "V\xE4lj datum",
|
|
1507
|
+
datePlaceholder: "\xE5\xE5\xE5\xE5-mm-dd",
|
|
1508
|
+
clearDate: "Rensa datum",
|
|
1509
|
+
openCalendar: "\xD6ppna kalendern",
|
|
1510
|
+
chooseDates: "V\xE4lj datum",
|
|
1511
|
+
rangePlaceholder: "\xE5\xE5\xE5\xE5-mm-dd \u2013 \xE5\xE5\xE5\xE5-mm-dd",
|
|
1512
|
+
clearDates: "Rensa datumen",
|
|
1513
|
+
chooseStart: "V\xE4lj startdatum",
|
|
1514
|
+
chooseEnd: "V\xE4lj slutdatum"
|
|
1515
|
+
}
|
|
1516
|
+
};
|
|
1517
|
+
function dateText(locale) {
|
|
1518
|
+
return DATE_TEXT[locale || "th"] || DATE_TEXT.th;
|
|
1340
1519
|
}
|
|
1341
1520
|
var fmtCache = {};
|
|
1342
1521
|
var PRESETS = {
|
|
@@ -1359,12 +1538,12 @@ var MONTHS = null;
|
|
|
1359
1538
|
function monthIndex(word) {
|
|
1360
1539
|
if (!MONTHS) {
|
|
1361
1540
|
MONTHS = {};
|
|
1362
|
-
["th-TH", "en-GB"].forEach(function(tag) {
|
|
1541
|
+
["th-TH", "en-GB", "sv-SE"].forEach(function(tag) {
|
|
1363
1542
|
["short", "long"].forEach(function(w) {
|
|
1364
1543
|
for (let i = 0; i < 12; i++) {
|
|
1365
1544
|
const n2 = new Intl.DateTimeFormat(tag, { month: w }).format(new Date(2020, i, 1)).toLowerCase().replace(/\.$/, "");
|
|
1366
1545
|
MONTHS[n2] = i;
|
|
1367
|
-
if (/^[a-
|
|
1546
|
+
if (/^[a-zåäö]/.test(n2)) MONTHS[n2.slice(0, 3)] = i;
|
|
1368
1547
|
}
|
|
1369
1548
|
});
|
|
1370
1549
|
});
|
|
@@ -1393,8 +1572,8 @@ function parseDate(text) {
|
|
|
1393
1572
|
return dt.getMonth() === mo - 1 && dt.getDate() === d ? toISO(dt) : null;
|
|
1394
1573
|
}
|
|
1395
1574
|
var Calendar = React17.forwardRef(function Calendar2(props, ref) {
|
|
1396
|
-
const ctx = useAuraLocale(), locale = props.locale || ctx.locale || "th", calendar = props.calendar || ctx.calendar ||
|
|
1397
|
-
const weekStart = props.weekStartsOn == null ? 0 : props.weekStartsOn;
|
|
1575
|
+
const ctx = useAuraLocale(), locale = props.locale || ctx.locale || "th", calendar = props.calendar || ctx.calendar || defaultCalendar(locale), tag = localeTag(locale, calendar);
|
|
1576
|
+
const weekStart = props.weekStartsOn == null ? locale === "sv" ? 1 : 0 : props.weekStartsOn;
|
|
1398
1577
|
let today = /* @__PURE__ */ new Date();
|
|
1399
1578
|
today = new Date(today.getFullYear(), today.getMonth(), today.getDate());
|
|
1400
1579
|
const min = fromISO(props.min), max = fromISO(props.max);
|
|
@@ -1404,7 +1583,8 @@ var Calendar = React17.forwardRef(function Calendar2(props, ref) {
|
|
|
1404
1583
|
const viewState = React17.useState("days"), view = viewState[0], setView = viewState[1];
|
|
1405
1584
|
const hoverState = React17.useState(null);
|
|
1406
1585
|
const gridRef = React17.useRef(null), gridMerged = useMergedRef(ref, gridRef), moved = React17.useRef(false);
|
|
1407
|
-
const th = locale
|
|
1586
|
+
const th = locale === "th";
|
|
1587
|
+
const dt = dateText(locale);
|
|
1408
1588
|
function disabled(d) {
|
|
1409
1589
|
return !!(min && d < min || max && d > max || props.isDateDisabled && props.isDateDisabled(toISO(d)));
|
|
1410
1590
|
}
|
|
@@ -1470,7 +1650,7 @@ var Calendar = React17.forwardRef(function Calendar2(props, ref) {
|
|
|
1470
1650
|
IconButton,
|
|
1471
1651
|
{
|
|
1472
1652
|
icon: "chevron-left",
|
|
1473
|
-
label:
|
|
1653
|
+
label: dt.prevYears,
|
|
1474
1654
|
onClick: function() {
|
|
1475
1655
|
setFocus(new Date(yr - 12, focusDate.getMonth(), 1));
|
|
1476
1656
|
}
|
|
@@ -1489,7 +1669,7 @@ var Calendar = React17.forwardRef(function Calendar2(props, ref) {
|
|
|
1489
1669
|
IconButton,
|
|
1490
1670
|
{
|
|
1491
1671
|
icon: "chevron-right",
|
|
1492
|
-
label:
|
|
1672
|
+
label: dt.nextYears,
|
|
1493
1673
|
onClick: function() {
|
|
1494
1674
|
setFocus(new Date(yr + 12, focusDate.getMonth(), 1));
|
|
1495
1675
|
}
|
|
@@ -1517,7 +1697,7 @@ var Calendar = React17.forwardRef(function Calendar2(props, ref) {
|
|
|
1517
1697
|
IconButton,
|
|
1518
1698
|
{
|
|
1519
1699
|
icon: "chevron-left",
|
|
1520
|
-
label:
|
|
1700
|
+
label: dt.prevMonth,
|
|
1521
1701
|
onClick: function() {
|
|
1522
1702
|
setFocus(addMonths(focusDate, -1));
|
|
1523
1703
|
}
|
|
@@ -1538,7 +1718,7 @@ var Calendar = React17.forwardRef(function Calendar2(props, ref) {
|
|
|
1538
1718
|
IconButton,
|
|
1539
1719
|
{
|
|
1540
1720
|
icon: "chevron-right",
|
|
1541
|
-
label:
|
|
1721
|
+
label: dt.nextMonth,
|
|
1542
1722
|
onClick: function() {
|
|
1543
1723
|
setFocus(addMonths(focusDate, 1));
|
|
1544
1724
|
}
|
|
@@ -1612,8 +1792,8 @@ var Calendar = React17.forwardRef(function Calendar2(props, ref) {
|
|
|
1612
1792
|
props.onSelect(toISO(today));
|
|
1613
1793
|
}
|
|
1614
1794
|
},
|
|
1615
|
-
|
|
1616
|
-
), props.onClear ? /* @__PURE__ */ React17.createElement("button", { type: "button", className: "aura-cal__link", onClick: props.onClear },
|
|
1795
|
+
dt.today
|
|
1796
|
+
), props.onClear ? /* @__PURE__ */ React17.createElement("button", { type: "button", className: "aura-cal__link", onClick: props.onClear }, dt.clear) : null));
|
|
1617
1797
|
});
|
|
1618
1798
|
function useCalendarPopover(boxRef) {
|
|
1619
1799
|
const openState = React17.useState(false), open = openState[0], setOpen = openState[1];
|
|
@@ -1735,7 +1915,7 @@ function DateField(props) {
|
|
|
1735
1915
|
}
|
|
1736
1916
|
var DatePicker = React17.forwardRef(function DatePicker2(props, ref) {
|
|
1737
1917
|
const auto = uid(), id = props.id || auto, dialogId = id + "-cal";
|
|
1738
|
-
const ctx = useAuraLocale(), locale = props.locale || ctx.locale || "th", calendar = props.calendar || ctx.calendar ||
|
|
1918
|
+
const ctx = useAuraLocale(), locale = props.locale || ctx.locale || "th", calendar = props.calendar || ctx.calendar || defaultCalendar(locale), dt = dateText(locale);
|
|
1739
1919
|
const st = useMaybeControlled(
|
|
1740
1920
|
props.value,
|
|
1741
1921
|
props.defaultValue == null ? null : props.defaultValue,
|
|
@@ -1763,7 +1943,7 @@ var DatePicker = React17.forwardRef(function DatePicker2(props, ref) {
|
|
|
1763
1943
|
id: dialogId,
|
|
1764
1944
|
role: "dialog",
|
|
1765
1945
|
"aria-modal": false,
|
|
1766
|
-
"aria-label": props.label ||
|
|
1946
|
+
"aria-label": props.label || dt.chooseDate,
|
|
1767
1947
|
className: "aura-cal__popover",
|
|
1768
1948
|
style: pop.pos,
|
|
1769
1949
|
onKeyDown: function(e) {
|
|
@@ -1810,15 +1990,15 @@ var DatePicker = React17.forwardRef(function DatePicker2(props, ref) {
|
|
|
1810
1990
|
inputRef: inputMerged,
|
|
1811
1991
|
open: pop.open,
|
|
1812
1992
|
display: formatDate(st[0], { locale, calendar }),
|
|
1813
|
-
placeholder: props.placeholder ||
|
|
1993
|
+
placeholder: props.placeholder || dt.datePlaceholder,
|
|
1814
1994
|
hasValue: st[0] != null,
|
|
1815
1995
|
clearable: props.clearable,
|
|
1816
1996
|
onClear: function() {
|
|
1817
1997
|
st[1](null);
|
|
1818
1998
|
inputRef.current && inputRef.current.focus();
|
|
1819
1999
|
},
|
|
1820
|
-
clearLabel:
|
|
1821
|
-
toggleLabel:
|
|
2000
|
+
clearLabel: dt.clearDate,
|
|
2001
|
+
toggleLabel: dt.openCalendar,
|
|
1822
2002
|
onCommit: commit,
|
|
1823
2003
|
onToggle: function(o) {
|
|
1824
2004
|
pop.setOpen(o);
|
|
@@ -1830,7 +2010,7 @@ var DatePicker = React17.forwardRef(function DatePicker2(props, ref) {
|
|
|
1830
2010
|
var DateRangePicker = React17.forwardRef(
|
|
1831
2011
|
function DateRangePicker2(props, ref) {
|
|
1832
2012
|
const auto = uid(), id = props.id || auto, dialogId = id + "-cal";
|
|
1833
|
-
const ctx = useAuraLocale(), locale = props.locale || ctx.locale || "th", calendar = props.calendar || ctx.calendar ||
|
|
2013
|
+
const ctx = useAuraLocale(), locale = props.locale || ctx.locale || "th", calendar = props.calendar || ctx.calendar || defaultCalendar(locale), dt = dateText(locale);
|
|
1834
2014
|
const st = useMaybeControlled(
|
|
1835
2015
|
props.value,
|
|
1836
2016
|
props.defaultValue || { start: null, end: null },
|
|
@@ -1877,7 +2057,7 @@ var DateRangePicker = React17.forwardRef(
|
|
|
1877
2057
|
id: dialogId,
|
|
1878
2058
|
role: "dialog",
|
|
1879
2059
|
"aria-modal": false,
|
|
1880
|
-
"aria-label": props.label ||
|
|
2060
|
+
"aria-label": props.label || dt.chooseDates,
|
|
1881
2061
|
className: "aura-cal__popover",
|
|
1882
2062
|
style: pop.pos,
|
|
1883
2063
|
onKeyDown: function(e) {
|
|
@@ -1887,7 +2067,7 @@ var DateRangePicker = React17.forwardRef(
|
|
|
1887
2067
|
} else trapTab(e, pop.popRef.current);
|
|
1888
2068
|
}
|
|
1889
2069
|
},
|
|
1890
|
-
/* @__PURE__ */ React17.createElement("p", { className: "aura-cal__hint", "aria-live": "polite" }, draft[0] ?
|
|
2070
|
+
/* @__PURE__ */ React17.createElement("p", { className: "aura-cal__hint", "aria-live": "polite" }, draft[0] ? dt.chooseEnd : dt.chooseStart),
|
|
1891
2071
|
/* @__PURE__ */ React17.createElement(
|
|
1892
2072
|
Calendar,
|
|
1893
2073
|
{
|
|
@@ -1924,15 +2104,15 @@ var DateRangePicker = React17.forwardRef(
|
|
|
1924
2104
|
inputRef: inputMerged,
|
|
1925
2105
|
open: pop.open,
|
|
1926
2106
|
display: show(v),
|
|
1927
|
-
placeholder: props.placeholder ||
|
|
2107
|
+
placeholder: props.placeholder || dt.rangePlaceholder,
|
|
1928
2108
|
hasValue: v.start != null,
|
|
1929
2109
|
clearable: props.clearable,
|
|
1930
2110
|
onClear: function() {
|
|
1931
2111
|
st[1]({ start: null, end: null });
|
|
1932
2112
|
inputRef.current && inputRef.current.focus();
|
|
1933
2113
|
},
|
|
1934
|
-
clearLabel:
|
|
1935
|
-
toggleLabel:
|
|
2114
|
+
clearLabel: dt.clearDates,
|
|
2115
|
+
toggleLabel: dt.openCalendar,
|
|
1936
2116
|
onCommit: commit,
|
|
1937
2117
|
onToggle: function(op) {
|
|
1938
2118
|
pop.setOpen(op);
|
|
@@ -2303,7 +2483,11 @@ var DataTable = React23.forwardRef(function DataTable2(props, ref) {
|
|
|
2303
2483
|
});
|
|
2304
2484
|
const rows = props.rows || [];
|
|
2305
2485
|
const rowKey = props.rowKey || columns[0].key;
|
|
2306
|
-
const
|
|
2486
|
+
const manual = !!props.manual;
|
|
2487
|
+
const Link = useLinkComponent(props.linkComponent);
|
|
2488
|
+
const busy = !!props.loading;
|
|
2489
|
+
const refreshing = busy && manual && rows.length > 0;
|
|
2490
|
+
const loading = busy && !refreshing;
|
|
2307
2491
|
const selectable = !!props.selectable;
|
|
2308
2492
|
const reorderable = props.reorderable !== false && !!props.columnControls;
|
|
2309
2493
|
const controls = !!props.columnControls;
|
|
@@ -2435,7 +2619,7 @@ var DataTable = React23.forwardRef(function DataTable2(props, ref) {
|
|
|
2435
2619
|
}
|
|
2436
2620
|
const view = React23.useMemo(
|
|
2437
2621
|
function() {
|
|
2438
|
-
if (!sort || !sort.key || !byKey[sort.key]) return rows;
|
|
2622
|
+
if (manual || !sort || !sort.key || !byKey[sort.key]) return rows;
|
|
2439
2623
|
const col = byKey[sort.key];
|
|
2440
2624
|
const val = col.sortValue || (col.pill ? function(r) {
|
|
2441
2625
|
return TONE_ORDER[col.tones && col.tones[r[col.key]] || toneFor(r[col.key])];
|
|
@@ -2451,7 +2635,7 @@ var DataTable = React23.forwardRef(function DataTable2(props, ref) {
|
|
|
2451
2635
|
return p[0];
|
|
2452
2636
|
});
|
|
2453
2637
|
},
|
|
2454
|
-
[rows, sort && sort.key, sort && sort.dir]
|
|
2638
|
+
[rows, manual, sort && sort.key, sort && sort.dir]
|
|
2455
2639
|
);
|
|
2456
2640
|
function nextSort(key) {
|
|
2457
2641
|
if (!sort || sort.key !== key) return { key, dir: "asc" };
|
|
@@ -2459,18 +2643,51 @@ var DataTable = React23.forwardRef(function DataTable2(props, ref) {
|
|
|
2459
2643
|
return null;
|
|
2460
2644
|
}
|
|
2461
2645
|
const pageSize = props.pageSize || 0;
|
|
2462
|
-
const
|
|
2646
|
+
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;
|
|
2647
|
+
const pageCount = pageSize ? Math.max(1, Math.ceil(total / pageSize)) : 1;
|
|
2463
2648
|
const page = Math.min(Math.max(1, pageState[0] || 1), pageCount);
|
|
2464
2649
|
const first = pageSize ? (page - 1) * pageSize : 0;
|
|
2465
|
-
const pageRows = pageSize ? view.slice(first, first + pageSize) : view;
|
|
2650
|
+
const pageRows = pageSize && !manual ? view.slice(first, first + pageSize) : view;
|
|
2651
|
+
const canSortAny = !busy && (manual ? total > 1 : rows.length > 1);
|
|
2652
|
+
const shownTotal = manual && props.totalRows == null ? first + rows.length : total;
|
|
2653
|
+
const linkPaging = !!props.getPageHref && !props.onPageChange;
|
|
2654
|
+
const prevLink = React23.useRef(null), nextLink = React23.useRef(null);
|
|
2466
2655
|
function goPage(p, focus) {
|
|
2467
2656
|
const next = Math.min(Math.max(1, p), pageCount);
|
|
2468
2657
|
if (next === page) return false;
|
|
2658
|
+
if (linkPaging) {
|
|
2659
|
+
const a = next === page - 1 ? prevLink.current : next === page + 1 ? nextLink.current : null;
|
|
2660
|
+
if (a) a.click();
|
|
2661
|
+
return false;
|
|
2662
|
+
}
|
|
2469
2663
|
if (focus) pending.current = focus;
|
|
2470
2664
|
pageState[1](next);
|
|
2471
2665
|
if (scrollRef.current) scrollRef.current.scrollTop = 0;
|
|
2472
2666
|
return true;
|
|
2473
2667
|
}
|
|
2668
|
+
function sortBy(key) {
|
|
2669
|
+
setSort(nextSort(key));
|
|
2670
|
+
if (!(manual && linkPaging)) goPage(1);
|
|
2671
|
+
}
|
|
2672
|
+
const rowHref = props.getRowHref;
|
|
2673
|
+
function followRow(el, e) {
|
|
2674
|
+
const a = el && el.querySelector(".aura-table__row-link");
|
|
2675
|
+
if (!a) return;
|
|
2676
|
+
a.dispatchEvent(
|
|
2677
|
+
new MouseEvent("click", {
|
|
2678
|
+
bubbles: true,
|
|
2679
|
+
cancelable: true,
|
|
2680
|
+
view: window,
|
|
2681
|
+
ctrlKey: !!(e && e.ctrlKey),
|
|
2682
|
+
metaKey: !!(e && e.metaKey),
|
|
2683
|
+
shiftKey: !!(e && e.shiftKey),
|
|
2684
|
+
altKey: !!(e && e.altKey)
|
|
2685
|
+
})
|
|
2686
|
+
);
|
|
2687
|
+
}
|
|
2688
|
+
function rowLinkWrap(r, content) {
|
|
2689
|
+
return rowHref ? /* @__PURE__ */ React23.createElement(Link, { href: rowHref(r), className: "aura-table__row-link" }, content) : content;
|
|
2690
|
+
}
|
|
2474
2691
|
const height = props.height || 0;
|
|
2475
2692
|
const virtual = !!height && !loading && pageRows.length > 0;
|
|
2476
2693
|
const bodyH = Math.max(ROW_H, height - ROW_H);
|
|
@@ -2789,10 +3006,10 @@ var DataTable = React23.forwardRef(function DataTable2(props, ref) {
|
|
|
2789
3006
|
else handled = false;
|
|
2790
3007
|
} else if (k === " " || k === "Enter") {
|
|
2791
3008
|
if (r === 0 && !col && selectable && nRows) toggleAll();
|
|
2792
|
-
else if (r === 0 && col && col.sortable &&
|
|
2793
|
-
|
|
2794
|
-
|
|
2795
|
-
|
|
3009
|
+
else if (r === 0 && col && col.sortable && canSortAny) sortBy(col.key);
|
|
3010
|
+
else if (r > 0 && k === " " && selectable) toggle(row[rowKey], !selSet[row[rowKey]]);
|
|
3011
|
+
else if (r > 0 && k === "Enter" && rowHref && !target.querySelector("button, a[href]:not(.aura-table__row-link), input, select, textarea"))
|
|
3012
|
+
followRow(target.closest('[role="row"]'), e);
|
|
2796
3013
|
else if (r > 0 && k === "Enter" && target.querySelector("button, a[href], input, select, textarea"))
|
|
2797
3014
|
target.querySelector("button, a[href], input, select, textarea").focus();
|
|
2798
3015
|
else if (r > 0 && k === "Enter" && props.onRowActivate) props.onRowActivate(row);
|
|
@@ -2835,7 +3052,7 @@ var DataTable = React23.forwardRef(function DataTable2(props, ref) {
|
|
|
2835
3052
|
vis.forEach(function(c, i) {
|
|
2836
3053
|
const ci = i + (selectable ? 1 : 0);
|
|
2837
3054
|
const isSorted = sort && sort.key === c.key;
|
|
2838
|
-
const canSort = c.sortable &&
|
|
3055
|
+
const canSort = c.sortable && canSortAny;
|
|
2839
3056
|
const ariaSort = isSorted && canSort ? sort.dir === "desc" ? "descending" : "ascending" : canSort ? "none" : void 0;
|
|
2840
3057
|
const pin = isPinned(c), edge = pin && i === nPinned - 1;
|
|
2841
3058
|
head.push(
|
|
@@ -2851,12 +3068,13 @@ var DataTable = React23.forwardRef(function DataTable2(props, ref) {
|
|
|
2851
3068
|
"data-rc": "0:" + ci,
|
|
2852
3069
|
className: cx(
|
|
2853
3070
|
"aura-table__th",
|
|
3071
|
+
c.align === "end" && "is-end",
|
|
2854
3072
|
pin && "is-pinned",
|
|
2855
3073
|
edge && "is-pin-edge",
|
|
2856
3074
|
drag && drag.over === c.key && (drag.after ? "is-drop-after" : "is-drop-before"),
|
|
2857
3075
|
drag && drag.key === c.key && "is-dragging"
|
|
2858
3076
|
),
|
|
2859
|
-
draggable: reorderable && !
|
|
3077
|
+
draggable: reorderable && !busy ? true : void 0,
|
|
2860
3078
|
onFocus: function(e) {
|
|
2861
3079
|
if (e.target === e.currentTarget) activeState[1]({ r: 0, c: ci });
|
|
2862
3080
|
},
|
|
@@ -2894,8 +3112,7 @@ var DataTable = React23.forwardRef(function DataTable2(props, ref) {
|
|
|
2894
3112
|
tabIndex: -1,
|
|
2895
3113
|
className: cx("aura-table__sort", isSorted && "is-active"),
|
|
2896
3114
|
onClick: function() {
|
|
2897
|
-
|
|
2898
|
-
goPage(1);
|
|
3115
|
+
sortBy(c.key);
|
|
2899
3116
|
activeState[1]({ r: 0, c: ci });
|
|
2900
3117
|
}
|
|
2901
3118
|
},
|
|
@@ -2948,6 +3165,10 @@ var DataTable = React23.forwardRef(function DataTable2(props, ref) {
|
|
|
2948
3165
|
}
|
|
2949
3166
|
)
|
|
2950
3167
|
);
|
|
3168
|
+
function cellContent(c, r) {
|
|
3169
|
+
const v = r[c.key];
|
|
3170
|
+
return c.render ? c.render(r) : c.pill ? /* @__PURE__ */ React23.createElement(StatusPill, { ...{ tone: c.tones && c.tones[v] } }, v) : v;
|
|
3171
|
+
}
|
|
2951
3172
|
function rowCells(r, i, k, isSel) {
|
|
2952
3173
|
const ri = i + 1;
|
|
2953
3174
|
const cells = [/* @__PURE__ */ React23.createElement("span", { key: "__gl", className: "aura-table__gutter", "aria-hidden": true })];
|
|
@@ -2994,6 +3215,7 @@ var DataTable = React23.forwardRef(function DataTable2(props, ref) {
|
|
|
2994
3215
|
className: cx(
|
|
2995
3216
|
"aura-table__td",
|
|
2996
3217
|
c.mono && "aura-table__mono",
|
|
3218
|
+
c.align === "end" && "is-end",
|
|
2997
3219
|
pin && "is-pinned",
|
|
2998
3220
|
pin && j === nPinned - 1 && "is-pin-edge"
|
|
2999
3221
|
),
|
|
@@ -3002,7 +3224,7 @@ var DataTable = React23.forwardRef(function DataTable2(props, ref) {
|
|
|
3002
3224
|
if (activeState[0].r !== ri || activeState[0].c !== ci) activeState[1]({ r: ri, c: ci });
|
|
3003
3225
|
}
|
|
3004
3226
|
},
|
|
3005
|
-
|
|
3227
|
+
j === 0 ? rowLinkWrap(r, cellContent(c, r)) : cellContent(c, r)
|
|
3006
3228
|
)
|
|
3007
3229
|
);
|
|
3008
3230
|
});
|
|
@@ -3031,13 +3253,21 @@ var DataTable = React23.forwardRef(function DataTable2(props, ref) {
|
|
|
3031
3253
|
);
|
|
3032
3254
|
vis.forEach(function(c, j) {
|
|
3033
3255
|
sk.push(
|
|
3034
|
-
/* @__PURE__ */ React23.createElement(
|
|
3256
|
+
/* @__PURE__ */ React23.createElement(
|
|
3035
3257
|
"span",
|
|
3036
3258
|
{
|
|
3037
|
-
|
|
3038
|
-
|
|
3039
|
-
|
|
3040
|
-
|
|
3259
|
+
key: c.key,
|
|
3260
|
+
className: cx("aura-table__td", c.align === "end" && "is-end", isPinned(c) && "is-pinned"),
|
|
3261
|
+
style: cellStyle(c, j)
|
|
3262
|
+
},
|
|
3263
|
+
/* @__PURE__ */ React23.createElement(
|
|
3264
|
+
"span",
|
|
3265
|
+
{
|
|
3266
|
+
className: cx("aura-skel", c.pill && "aura-skel--pill"),
|
|
3267
|
+
style: c.pill ? void 0 : { width: SKELETON_WIDTHS[(i + j) % SKELETON_WIDTHS.length] }
|
|
3268
|
+
}
|
|
3269
|
+
)
|
|
3270
|
+
)
|
|
3041
3271
|
);
|
|
3042
3272
|
});
|
|
3043
3273
|
sk.push(
|
|
@@ -3065,12 +3295,17 @@ var DataTable = React23.forwardRef(function DataTable2(props, ref) {
|
|
|
3065
3295
|
role: "row",
|
|
3066
3296
|
"aria-rowindex": first + i + 2,
|
|
3067
3297
|
"aria-selected": selectable ? isSel : void 0,
|
|
3068
|
-
className: cx(
|
|
3298
|
+
className: cx(
|
|
3299
|
+
"aura-table__row",
|
|
3300
|
+
isSel && "is-selected",
|
|
3301
|
+
(props.onRowActivate || rowHref) && "is-actionable"
|
|
3302
|
+
),
|
|
3069
3303
|
style: rowStyle,
|
|
3070
3304
|
onClick: function(e) {
|
|
3071
3305
|
const el = e.target;
|
|
3072
3306
|
if (el.closest && el.closest(".aura-check, button, a, input")) return;
|
|
3073
|
-
if (
|
|
3307
|
+
if (rowHref) followRow(e.currentTarget, e);
|
|
3308
|
+
else if (props.onRowActivate) props.onRowActivate(r);
|
|
3074
3309
|
}
|
|
3075
3310
|
},
|
|
3076
3311
|
rowCells(r, i, k, isSel)
|
|
@@ -3082,31 +3317,42 @@ var DataTable = React23.forwardRef(function DataTable2(props, ref) {
|
|
|
3082
3317
|
bodyRows.push(/* @__PURE__ */ React23.createElement("div", { key: "__bot", style: { height: (pageRows.length - end) * ROW_H + "px" }, "aria-hidden": true }));
|
|
3083
3318
|
}
|
|
3084
3319
|
let foot = null;
|
|
3085
|
-
|
|
3086
|
-
const
|
|
3087
|
-
|
|
3088
|
-
|
|
3089
|
-
|
|
3090
|
-
|
|
3091
|
-
|
|
3092
|
-
|
|
3093
|
-
|
|
3094
|
-
|
|
3095
|
-
|
|
3096
|
-
|
|
3097
|
-
|
|
3320
|
+
function pagerButton(dir) {
|
|
3321
|
+
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";
|
|
3322
|
+
if (props.getPageHref && !off)
|
|
3323
|
+
return /* @__PURE__ */ React23.createElement(
|
|
3324
|
+
Link,
|
|
3325
|
+
{
|
|
3326
|
+
ref: dir < 0 ? prevLink : nextLink,
|
|
3327
|
+
href: props.getPageHref(p),
|
|
3328
|
+
className: "aura-icon-btn",
|
|
3329
|
+
"aria-label": label,
|
|
3330
|
+
onClick: function(e) {
|
|
3331
|
+
if (props.onPageChange) {
|
|
3332
|
+
e.preventDefault();
|
|
3333
|
+
pageState[1](p);
|
|
3334
|
+
}
|
|
3335
|
+
}
|
|
3336
|
+
},
|
|
3337
|
+
/* @__PURE__ */ React23.createElement(Icon, { name: icon })
|
|
3338
|
+
);
|
|
3339
|
+
return /* @__PURE__ */ React23.createElement(
|
|
3098
3340
|
IconButton,
|
|
3099
3341
|
{
|
|
3100
|
-
icon
|
|
3101
|
-
label
|
|
3102
|
-
disabled:
|
|
3342
|
+
icon,
|
|
3343
|
+
label,
|
|
3344
|
+
disabled: off,
|
|
3103
3345
|
onClick: function() {
|
|
3104
|
-
goPage(
|
|
3346
|
+
goPage(p);
|
|
3105
3347
|
}
|
|
3106
3348
|
}
|
|
3107
|
-
)
|
|
3349
|
+
);
|
|
3350
|
+
}
|
|
3351
|
+
if (pageSize && (rows.length || busy)) {
|
|
3352
|
+
const from = rows.length ? first + 1 : 0, to = manual ? first + rows.length : Math.min(first + pageSize, view.length);
|
|
3353
|
+
foot = /* @__PURE__ */ React23.createElement("div", { className: "aura-table__foot" }, /* @__PURE__ */ React23.createElement("span", { "aria-live": "polite" }, busy ? t.loading : t.range(from, to, shownTotal)), /* @__PURE__ */ React23.createElement("span", { className: "aura-table__pager" }, /* @__PURE__ */ React23.createElement("span", null, t.page(page, pageCount)), pagerButton(-1), pagerButton(1)));
|
|
3108
3354
|
} else if (height && rows.length && !loading) {
|
|
3109
|
-
foot = /* @__PURE__ */ React23.createElement("div", { className: "aura-table__foot" }, /* @__PURE__ */ React23.createElement("span", null, t.rowCount(
|
|
3355
|
+
foot = /* @__PURE__ */ React23.createElement("div", { className: "aura-table__foot" }, /* @__PURE__ */ React23.createElement("span", null, t.rowCount(shownTotal)), selectable && selected.length ? /* @__PURE__ */ React23.createElement("span", null, t.selectedCount(selected.length)) : /* @__PURE__ */ React23.createElement("span", null));
|
|
3110
3356
|
}
|
|
3111
3357
|
if (stacked) {
|
|
3112
3358
|
const titleCol = vis[0], pillCol = vis.filter(function(c) {
|
|
@@ -3127,25 +3373,28 @@ var DataTable = React23.forwardRef(function DataTable2(props, ref) {
|
|
|
3127
3373
|
const em2 = props.empty || {};
|
|
3128
3374
|
cardBody = /* @__PURE__ */ React23.createElement("div", { className: "aura-table__empty" }, /* @__PURE__ */ React23.createElement("div", null, /* @__PURE__ */ React23.createElement("span", { className: "aura-table__empty-icon" }, /* @__PURE__ */ React23.createElement(Icon, { name: em2.icon || "inbox", size: "lg" })), /* @__PURE__ */ React23.createElement("p", { className: "aura-table__empty-title" }, em2.title || t.empty), em2.description ? /* @__PURE__ */ React23.createElement("p", { className: "aura-table__empty-text" }, em2.description) : null, em2.action ? /* @__PURE__ */ React23.createElement("div", { className: "aura-table__empty-action" }, em2.action) : null));
|
|
3129
3375
|
} else {
|
|
3130
|
-
const cellVal =
|
|
3131
|
-
const v = r[c.key];
|
|
3132
|
-
return c.render ? c.render(r) : c.pill ? /* @__PURE__ */ React23.createElement(StatusPill, { ...{ tone: c.tones && c.tones[v] } }, v) : v;
|
|
3133
|
-
};
|
|
3376
|
+
const cellVal = cellContent;
|
|
3134
3377
|
cardBody = /* @__PURE__ */ React23.createElement("ul", { className: "aura-table__cards", "aria-label": props.label }, pageRows.map(function(r) {
|
|
3135
3378
|
const k = r[rowKey], isSel = !!selSet[k];
|
|
3136
3379
|
return /* @__PURE__ */ React23.createElement(
|
|
3137
3380
|
"li",
|
|
3138
3381
|
{
|
|
3139
3382
|
key: k,
|
|
3140
|
-
className: cx(
|
|
3141
|
-
|
|
3383
|
+
className: cx(
|
|
3384
|
+
"aura-table__card",
|
|
3385
|
+
isSel && "is-selected",
|
|
3386
|
+
(props.onRowActivate || rowHref) && "is-actionable"
|
|
3387
|
+
),
|
|
3388
|
+
tabIndex: props.onRowActivate && !rowHref ? 0 : void 0,
|
|
3142
3389
|
onClick: function(e) {
|
|
3143
3390
|
const el = e.target;
|
|
3144
3391
|
if (el.closest && el.closest(".aura-check, button, a, input")) return;
|
|
3145
|
-
if (
|
|
3392
|
+
if (rowHref) followRow(e.currentTarget, e);
|
|
3393
|
+
else if (props.onRowActivate) props.onRowActivate(r);
|
|
3146
3394
|
},
|
|
3147
3395
|
onKeyDown: function(e) {
|
|
3148
|
-
if (e.target === e.currentTarget && e.key === "Enter" && props.onRowActivate
|
|
3396
|
+
if (e.target === e.currentTarget && e.key === "Enter" && props.onRowActivate && !rowHref)
|
|
3397
|
+
props.onRowActivate(r);
|
|
3149
3398
|
}
|
|
3150
3399
|
},
|
|
3151
3400
|
/* @__PURE__ */ React23.createElement("div", { className: "aura-table__card-head" }, selectable ? /* @__PURE__ */ React23.createElement(
|
|
@@ -3157,7 +3406,7 @@ var DataTable = React23.forwardRef(function DataTable2(props, ref) {
|
|
|
3157
3406
|
toggle(k, on);
|
|
3158
3407
|
}
|
|
3159
3408
|
}
|
|
3160
|
-
) : null, /* @__PURE__ */ React23.createElement("span", { className: cx("aura-table__card-title", titleCol.mono && "aura-table__mono") }, cellVal(titleCol, r)), pillCol ? cellVal(pillCol, r) : null, actionCols.map(function(c) {
|
|
3409
|
+
) : null, /* @__PURE__ */ React23.createElement("span", { className: cx("aura-table__card-title", titleCol.mono && "aura-table__mono") }, rowLinkWrap(r, cellVal(titleCol, r))), pillCol ? cellVal(pillCol, r) : null, actionCols.map(function(c) {
|
|
3161
3410
|
return /* @__PURE__ */ React23.createElement("span", { key: c.key, className: "aura-table__card-actions" }, cellVal(c, r));
|
|
3162
3411
|
})),
|
|
3163
3412
|
rest.length ? /* @__PURE__ */ React23.createElement("dl", { className: "aura-table__card-fields" }, rest.map(function(c) {
|
|
@@ -3170,12 +3419,13 @@ var DataTable = React23.forwardRef(function DataTable2(props, ref) {
|
|
|
3170
3419
|
"div",
|
|
3171
3420
|
{
|
|
3172
3421
|
ref: wrapMerged,
|
|
3173
|
-
className: cx("aura-table aura-table--stacked", props.className),
|
|
3422
|
+
className: cx("aura-table aura-table--stacked", refreshing && "is-refreshing", props.className),
|
|
3174
3423
|
role: "region",
|
|
3175
3424
|
"aria-label": props.label,
|
|
3176
|
-
"aria-busy":
|
|
3425
|
+
"aria-busy": busy || void 0
|
|
3177
3426
|
},
|
|
3178
|
-
|
|
3427
|
+
refreshing ? /* @__PURE__ */ React23.createElement("span", { className: "aura-table__busy-bar", "aria-hidden": true }) : null,
|
|
3428
|
+
selectable && pageRows.length && !busy ? /* @__PURE__ */ React23.createElement("div", { className: "aura-table__stack-bar" }, /* @__PURE__ */ React23.createElement(
|
|
3179
3429
|
Checkbox,
|
|
3180
3430
|
{
|
|
3181
3431
|
checked: all,
|
|
@@ -3193,52 +3443,64 @@ var DataTable = React23.forwardRef(function DataTable2(props, ref) {
|
|
|
3193
3443
|
scrollPaddingTop: ROW_H + "px"
|
|
3194
3444
|
};
|
|
3195
3445
|
if (height) scrollStyle.height = height + "px";
|
|
3196
|
-
return /* @__PURE__ */ React23.createElement(
|
|
3446
|
+
return /* @__PURE__ */ React23.createElement(
|
|
3197
3447
|
"div",
|
|
3198
3448
|
{
|
|
3199
|
-
ref:
|
|
3200
|
-
|
|
3201
|
-
|
|
3449
|
+
ref: wrapMerged,
|
|
3450
|
+
className: cx("aura-table", scrolledX[0] && "is-scrolled-x", refreshing && "is-refreshing", props.className)
|
|
3451
|
+
},
|
|
3452
|
+
refreshing ? /* @__PURE__ */ React23.createElement("span", { className: "aura-table__busy-bar", "aria-hidden": true }) : null,
|
|
3453
|
+
/* @__PURE__ */ React23.createElement(
|
|
3454
|
+
"div",
|
|
3455
|
+
{
|
|
3456
|
+
ref: function(el) {
|
|
3457
|
+
scrollRef.current = el;
|
|
3458
|
+
gridRef.current = el;
|
|
3459
|
+
},
|
|
3460
|
+
className: "aura-table__scroll",
|
|
3461
|
+
style: scrollStyle,
|
|
3462
|
+
role: "grid",
|
|
3463
|
+
"aria-label": props.label,
|
|
3464
|
+
"aria-busy": busy || void 0,
|
|
3465
|
+
"aria-rowcount": loading ? -1 : shownTotal + 1,
|
|
3466
|
+
"aria-colcount": nCols,
|
|
3467
|
+
"aria-multiselectable": selectable || void 0,
|
|
3468
|
+
onKeyDown: onGridKey,
|
|
3469
|
+
onScroll: function(e) {
|
|
3470
|
+
const t2 = e.currentTarget;
|
|
3471
|
+
if (virtual && Math.abs(t2.scrollTop - scrollTop) >= ROW_H / 2) setScrollTop(t2.scrollTop);
|
|
3472
|
+
else if (virtual && (t2.scrollTop === 0 || t2.scrollTop + t2.clientHeight >= t2.scrollHeight - 1))
|
|
3473
|
+
setScrollTop(t2.scrollTop);
|
|
3474
|
+
const sx = t2.scrollLeft > 0;
|
|
3475
|
+
if (sx !== scrolledX[0]) scrolledX[1](sx);
|
|
3476
|
+
}
|
|
3202
3477
|
},
|
|
3203
|
-
className: "aura-
|
|
3204
|
-
|
|
3205
|
-
|
|
3206
|
-
|
|
3207
|
-
|
|
3208
|
-
|
|
3209
|
-
|
|
3210
|
-
|
|
3211
|
-
|
|
3212
|
-
|
|
3213
|
-
|
|
3214
|
-
|
|
3215
|
-
|
|
3216
|
-
setScrollTop(t2.scrollTop);
|
|
3217
|
-
const sx = t2.scrollLeft > 0;
|
|
3218
|
-
if (sx !== scrolledX[0]) scrolledX[1](sx);
|
|
3478
|
+
/* @__PURE__ */ React23.createElement("div", { className: "aura-table__head", role: "row", "aria-rowindex": 1, style: rowStyle }, head),
|
|
3479
|
+
body
|
|
3480
|
+
),
|
|
3481
|
+
busy ? /* @__PURE__ */ React23.createElement("span", { className: "aura-sr-only", role: "status" }, t.loadingRows) : null,
|
|
3482
|
+
controls ? /* @__PURE__ */ React23.createElement("div", { className: "aura-table__picker" }, /* @__PURE__ */ React23.createElement(
|
|
3483
|
+
IconButton,
|
|
3484
|
+
{
|
|
3485
|
+
icon: "columns-3",
|
|
3486
|
+
label: t.showHideColumns,
|
|
3487
|
+
"aria-haspopup": "menu",
|
|
3488
|
+
onClick: function(e) {
|
|
3489
|
+
openMenu("picker", null, e.currentTarget);
|
|
3490
|
+
}
|
|
3219
3491
|
}
|
|
3220
|
-
|
|
3221
|
-
|
|
3222
|
-
|
|
3223
|
-
|
|
3224
|
-
|
|
3225
|
-
|
|
3226
|
-
|
|
3227
|
-
|
|
3228
|
-
|
|
3229
|
-
onClick: function(e) {
|
|
3230
|
-
openMenu("picker", null, e.currentTarget);
|
|
3492
|
+
)) : null,
|
|
3493
|
+
foot,
|
|
3494
|
+
menu ? /* @__PURE__ */ React23.createElement(
|
|
3495
|
+
Menu,
|
|
3496
|
+
{
|
|
3497
|
+
anchor: menu.anchor,
|
|
3498
|
+
onClose: closeMenu,
|
|
3499
|
+
label: menu.kind === "picker" ? t.columns : t.column(byKey[menu.key] && byKey[menu.key].label),
|
|
3500
|
+
items: menu.kind === "picker" ? pickerItems() : byKey[menu.key] ? columnMenuItems(byKey[menu.key]) : []
|
|
3231
3501
|
}
|
|
3232
|
-
|
|
3233
|
-
)
|
|
3234
|
-
Menu,
|
|
3235
|
-
{
|
|
3236
|
-
anchor: menu.anchor,
|
|
3237
|
-
onClose: closeMenu,
|
|
3238
|
-
label: menu.kind === "picker" ? t.columns : t.column(byKey[menu.key] && byKey[menu.key].label),
|
|
3239
|
-
items: menu.kind === "picker" ? pickerItems() : byKey[menu.key] ? columnMenuItems(byKey[menu.key]) : []
|
|
3240
|
-
}
|
|
3241
|
-
) : null);
|
|
3502
|
+
) : null
|
|
3503
|
+
);
|
|
3242
3504
|
});
|
|
3243
3505
|
|
|
3244
3506
|
// src/Card.tsx
|
|
@@ -3351,43 +3613,150 @@ var Tabs = React25.forwardRef(function Tabs2(props, ref) {
|
|
|
3351
3613
|
|
|
3352
3614
|
// src/SideNav.tsx
|
|
3353
3615
|
var React26 = __toESM(require("react"), 1);
|
|
3616
|
+
function contains(it, id) {
|
|
3617
|
+
return !!id && !!it.children && it.children.some(function(c) {
|
|
3618
|
+
return c.id === id || contains(c, id);
|
|
3619
|
+
});
|
|
3620
|
+
}
|
|
3354
3621
|
var SideNav = React26.forwardRef(function SideNav2(props, ref) {
|
|
3355
3622
|
const t = useStrings();
|
|
3623
|
+
const Link = useLinkComponent(props.linkComponent);
|
|
3624
|
+
const base = uid();
|
|
3356
3625
|
const st = useMaybeControlled(
|
|
3357
3626
|
props.value,
|
|
3358
3627
|
props.defaultValue,
|
|
3359
3628
|
props.onChange
|
|
3360
3629
|
);
|
|
3361
|
-
|
|
3362
|
-
|
|
3363
|
-
|
|
3630
|
+
const active = st[0];
|
|
3631
|
+
const sections = props.sections || [{ items: props.items || [] }];
|
|
3632
|
+
const openState = React26.useState({}), toggled = openState[0], setToggled = openState[1];
|
|
3633
|
+
function isOpen(it) {
|
|
3634
|
+
if (toggled[it.id] != null) return toggled[it.id];
|
|
3635
|
+
return !!it.defaultOpen || contains(it, active);
|
|
3636
|
+
}
|
|
3637
|
+
React26.useEffect(
|
|
3638
|
+
function() {
|
|
3639
|
+
if (!active) return;
|
|
3640
|
+
const next = {};
|
|
3641
|
+
let changed = false;
|
|
3642
|
+
sections.forEach(function(s) {
|
|
3643
|
+
(function walk(list) {
|
|
3644
|
+
list.forEach(function(it) {
|
|
3645
|
+
if (it.children) {
|
|
3646
|
+
if (contains(it, active) && toggled[it.id] !== true) {
|
|
3647
|
+
next[it.id] = true;
|
|
3648
|
+
changed = true;
|
|
3649
|
+
}
|
|
3650
|
+
walk(it.children);
|
|
3651
|
+
}
|
|
3652
|
+
});
|
|
3653
|
+
})(s.items);
|
|
3654
|
+
});
|
|
3655
|
+
if (changed) setToggled(Object.assign({}, toggled, next));
|
|
3656
|
+
},
|
|
3657
|
+
[active]
|
|
3658
|
+
);
|
|
3659
|
+
const navRef = React26.useRef(null);
|
|
3660
|
+
function onKeyDown(e) {
|
|
3661
|
+
const k = e.key;
|
|
3662
|
+
if (k !== "ArrowDown" && k !== "ArrowUp" && k !== "Home" && k !== "End") return;
|
|
3663
|
+
const root = navRef.current;
|
|
3664
|
+
if (!root) return;
|
|
3665
|
+
const items = Array.prototype.slice.call(root.querySelectorAll(".aura-nav__item"));
|
|
3666
|
+
const visible = items.filter(function(el) {
|
|
3667
|
+
return el.offsetParent !== null || el === document.activeElement;
|
|
3668
|
+
});
|
|
3669
|
+
const i = visible.indexOf(document.activeElement);
|
|
3670
|
+
if (i < 0) return;
|
|
3671
|
+
e.preventDefault();
|
|
3672
|
+
const j = k === "Home" ? 0 : k === "End" ? visible.length - 1 : Math.max(0, Math.min(visible.length - 1, i + (k === "ArrowDown" ? 1 : -1)));
|
|
3673
|
+
visible[j].focus();
|
|
3674
|
+
}
|
|
3675
|
+
function inner(it, group, open) {
|
|
3676
|
+
return [
|
|
3364
3677
|
it.icon ? /* @__PURE__ */ React26.createElement(Icon, { key: "i", name: it.icon }) : null,
|
|
3365
3678
|
/* @__PURE__ */ React26.createElement("span", { key: "l", className: "aura-nav__label" }, it.label),
|
|
3366
|
-
it.
|
|
3679
|
+
it.badge != null ? /* @__PURE__ */ React26.createElement("span", { key: "b", className: "aura-nav__badge" }, it.badge) : null,
|
|
3680
|
+
it.count != null ? /* @__PURE__ */ React26.createElement("span", { key: "c", className: "aura-nav__count" }, it.count) : null,
|
|
3681
|
+
group ? /* @__PURE__ */ React26.createElement(Icon, { key: "g", name: "chevron-down", className: cx("aura-nav__chevron", open && "is-open") }) : null
|
|
3367
3682
|
];
|
|
3683
|
+
}
|
|
3684
|
+
function item(it, depth) {
|
|
3685
|
+
if (it.children) {
|
|
3686
|
+
const open = isOpen(it);
|
|
3687
|
+
const listId = base + "-" + it.id;
|
|
3688
|
+
const holdsActive = contains(it, active);
|
|
3689
|
+
return /* @__PURE__ */ React26.createElement("li", { key: it.id, className: "aura-nav__group" }, /* @__PURE__ */ React26.createElement(
|
|
3690
|
+
"button",
|
|
3691
|
+
{
|
|
3692
|
+
type: "button",
|
|
3693
|
+
className: cx("aura-nav__item", "aura-nav__item--group", holdsActive && "has-active"),
|
|
3694
|
+
"aria-expanded": open,
|
|
3695
|
+
"aria-controls": listId,
|
|
3696
|
+
style: depth ? { ["--aura-nav-depth"]: depth } : void 0,
|
|
3697
|
+
onClick: function() {
|
|
3698
|
+
const next = Object.assign({}, toggled);
|
|
3699
|
+
next[it.id] = !open;
|
|
3700
|
+
setToggled(next);
|
|
3701
|
+
},
|
|
3702
|
+
onKeyDown: function(e) {
|
|
3703
|
+
if (e.key === "ArrowRight" && !open) {
|
|
3704
|
+
e.preventDefault();
|
|
3705
|
+
setToggled(Object.assign({}, toggled, { [it.id]: true }));
|
|
3706
|
+
} else if (e.key === "ArrowLeft" && open) {
|
|
3707
|
+
e.preventDefault();
|
|
3708
|
+
setToggled(Object.assign({}, toggled, { [it.id]: false }));
|
|
3709
|
+
}
|
|
3710
|
+
}
|
|
3711
|
+
},
|
|
3712
|
+
inner(it, true, open)
|
|
3713
|
+
), /* @__PURE__ */ React26.createElement("ul", { id: listId, className: "aura-nav__list aura-nav__sub", hidden: !open }, it.children.map(function(c) {
|
|
3714
|
+
return item(c, depth + 1);
|
|
3715
|
+
})));
|
|
3716
|
+
}
|
|
3717
|
+
const on = active === it.id;
|
|
3368
3718
|
const common = {
|
|
3369
3719
|
className: cx("aura-nav__item", on && "is-active"),
|
|
3370
3720
|
"aria-current": on ? "page" : void 0,
|
|
3721
|
+
style: depth ? { ["--aura-nav-depth"]: depth } : void 0,
|
|
3371
3722
|
onClick: function(e) {
|
|
3372
3723
|
if (!it.href) e.preventDefault();
|
|
3373
3724
|
st[1](it.id);
|
|
3374
3725
|
}
|
|
3375
3726
|
};
|
|
3376
|
-
return /* @__PURE__ */ React26.createElement("li", { key: it.id }, it.href ? /* @__PURE__ */ React26.createElement(
|
|
3727
|
+
return /* @__PURE__ */ React26.createElement("li", { key: it.id }, it.href ? /* @__PURE__ */ React26.createElement(Link, { href: it.href, ...common }, inner(it, false, false)) : /* @__PURE__ */ React26.createElement("button", { type: "button", ...common }, inner(it, false, false)));
|
|
3377
3728
|
}
|
|
3378
|
-
return /* @__PURE__ */ React26.createElement(
|
|
3379
|
-
|
|
3380
|
-
|
|
3729
|
+
return /* @__PURE__ */ React26.createElement(
|
|
3730
|
+
"nav",
|
|
3731
|
+
{
|
|
3732
|
+
ref: function(el) {
|
|
3733
|
+
navRef.current = el;
|
|
3734
|
+
if (typeof ref === "function") ref(el);
|
|
3735
|
+
else if (ref) ref.current = el;
|
|
3736
|
+
},
|
|
3737
|
+
className: cx("aura-nav", props.className),
|
|
3738
|
+
"aria-label": props.label || t.mainNav,
|
|
3739
|
+
onKeyDown
|
|
3740
|
+
},
|
|
3741
|
+
props.header ? /* @__PURE__ */ React26.createElement("div", { className: "aura-nav__header" }, props.header) : null,
|
|
3742
|
+
/* @__PURE__ */ React26.createElement("div", { className: "aura-nav__scroll" }, sections.map(function(s, i) {
|
|
3743
|
+
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) {
|
|
3744
|
+
return item(it, 0);
|
|
3745
|
+
})));
|
|
3746
|
+
})),
|
|
3747
|
+
props.footer ? /* @__PURE__ */ React26.createElement("div", { className: "aura-nav__footer" }, props.footer) : null
|
|
3748
|
+
);
|
|
3381
3749
|
});
|
|
3382
3750
|
|
|
3383
3751
|
// src/Breadcrumb.tsx
|
|
3384
3752
|
var React27 = __toESM(require("react"), 1);
|
|
3385
3753
|
var Breadcrumb = React27.forwardRef(function Breadcrumb2(props, ref) {
|
|
3386
3754
|
const t = useStrings();
|
|
3755
|
+
const Link = useLinkComponent();
|
|
3387
3756
|
const items = props.items || [];
|
|
3388
3757
|
return /* @__PURE__ */ React27.createElement("nav", { ref, "aria-label": props.label || t.breadcrumb, className: cx("aura-crumbs", props.className) }, /* @__PURE__ */ React27.createElement("ol", null, items.map(function(it, i) {
|
|
3389
3758
|
const last = i === items.length - 1;
|
|
3390
|
-
return /* @__PURE__ */ React27.createElement("li", { key: i }, last ? /* @__PURE__ */ React27.createElement("span", { "aria-current": "page", className: "aura-crumbs__current" }, it.label) : it.href ? /* @__PURE__ */ React27.createElement(
|
|
3759
|
+
return /* @__PURE__ */ React27.createElement("li", { key: i }, last ? /* @__PURE__ */ React27.createElement("span", { "aria-current": "page", className: "aura-crumbs__current" }, it.label) : it.href ? /* @__PURE__ */ React27.createElement(Link, { href: it.href, onClick: it.onClick }, it.label) : /* @__PURE__ */ React27.createElement("button", { type: "button", onClick: it.onClick }, it.label), last ? null : /* @__PURE__ */ React27.createElement(Icon, { name: "chevron-right", size: 12, className: "aura-crumbs__sep" }));
|
|
3391
3760
|
})));
|
|
3392
3761
|
});
|
|
3393
3762
|
|
|
@@ -3598,8 +3967,11 @@ var Stat = React35.forwardRef(function Stat2(props, ref) {
|
|
|
3598
3967
|
const ch = props.change;
|
|
3599
3968
|
const dir = ch && (ch.direction || "flat");
|
|
3600
3969
|
const tone2 = ch && (ch.tone || (dir === "up" ? "positive" : dir === "down" ? "negative" : "neutral"));
|
|
3601
|
-
const
|
|
3602
|
-
const
|
|
3970
|
+
const Link = useLinkComponent();
|
|
3971
|
+
const v = props.value;
|
|
3972
|
+
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, ""));
|
|
3973
|
+
const Tag3 = props.href ? Link : props.onClick ? "button" : "div";
|
|
3974
|
+
const interactive = !!(props.href || props.onClick);
|
|
3603
3975
|
return /* @__PURE__ */ React35.createElement(
|
|
3604
3976
|
Tag3,
|
|
3605
3977
|
{
|
|
@@ -3611,7 +3983,7 @@ var Stat = React35.forwardRef(function Stat2(props, ref) {
|
|
|
3611
3983
|
"aria-busy": props.loading || void 0
|
|
3612
3984
|
},
|
|
3613
3985
|
/* @__PURE__ */ React35.createElement("span", { className: "aura-stat__head" }, /* @__PURE__ */ React35.createElement("span", { className: "aura-stat__label" }, props.label), props.icon ? /* @__PURE__ */ React35.createElement("span", { className: "aura-stat__icon" }, /* @__PURE__ */ React35.createElement(Icon, { name: props.icon })) : null),
|
|
3614
|
-
props.loading ? /* @__PURE__ */ React35.createElement("span", { className: "aura-stat__value" }, /* @__PURE__ */ React35.createElement("span", { className: "aura-skel aura-stat__skel" })) : /* @__PURE__ */ React35.createElement("span", { className: "aura-stat__value" }, props.value, props.unit ? /* @__PURE__ */ React35.createElement("span", { className: "aura-stat__unit" }, props.unit) : null),
|
|
3986
|
+
props.loading ? /* @__PURE__ */ React35.createElement("span", { className: "aura-stat__value" }, /* @__PURE__ */ React35.createElement("span", { className: "aura-skel aura-stat__skel" })) : /* @__PURE__ */ React35.createElement("span", { className: cx("aura-stat__value", numeric && "is-numeric") }, props.value, props.unit ? /* @__PURE__ */ React35.createElement("span", { className: "aura-stat__unit" }, props.unit) : null),
|
|
3615
3987
|
ch && !props.loading || props.caption ? /* @__PURE__ */ React35.createElement("span", { className: "aura-stat__foot" }, ch && !props.loading ? /* @__PURE__ */ React35.createElement("span", { className: cx("aura-stat__change", "is-" + tone2) }, /* @__PURE__ */ React35.createElement(Icon, { name: dir === "up" ? "trending-up" : dir === "down" ? "trending-down" : "minus", size: 14 }), /* @__PURE__ */ React35.createElement("span", null, ch.value)) : null, ch && ch.label && !props.loading ? /* @__PURE__ */ React35.createElement("span", { className: "aura-stat__caption" }, ch.label) : null, props.caption ? /* @__PURE__ */ React35.createElement("span", { className: "aura-stat__caption" }, props.caption) : null) : null
|
|
3616
3988
|
);
|
|
3617
3989
|
});
|
|
@@ -4229,6 +4601,20 @@ function fit(hex, grounds, target, dir) {
|
|
|
4229
4601
|
}
|
|
4230
4602
|
return c;
|
|
4231
4603
|
}
|
|
4604
|
+
function atLuminance(hex, Y) {
|
|
4605
|
+
const o = rgbToOklch(hexToRgb(hex)), C = Math.max(o[1], 0.02);
|
|
4606
|
+
let lo = 0, hi = 1, c = hex;
|
|
4607
|
+
for (let i = 0; i < 30; i++) {
|
|
4608
|
+
const mid = (lo + hi) / 2;
|
|
4609
|
+
c = oklchToHex(mid, C, o[2]);
|
|
4610
|
+
if (luminance(c) < Y) lo = mid;
|
|
4611
|
+
else hi = mid;
|
|
4612
|
+
}
|
|
4613
|
+
return c;
|
|
4614
|
+
}
|
|
4615
|
+
var CHART_Y = { light: 0.075, dark: 0.46 };
|
|
4616
|
+
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] };
|
|
4617
|
+
var CHART_2 = "#0a8b7a";
|
|
4232
4618
|
var ZINC = { 0: "#ffffff", 50: "#fafafa", 100: "#f4f4f5", 800: "#27272a", 900: "#18181b", 950: "#09090b" };
|
|
4233
4619
|
var INK = "#18181b";
|
|
4234
4620
|
function createTheme(opts) {
|
|
@@ -4247,6 +4633,14 @@ function createTheme(opts) {
|
|
|
4247
4633
|
L["alert-info-fg"] = fit(b[800], [b[50]], 4.5, -1);
|
|
4248
4634
|
L["alert-info-border"] = b[200];
|
|
4249
4635
|
L["mesh-from"] = b[400];
|
|
4636
|
+
L["chart-1"] = atLuminance(o.brand, CHART_Y.light);
|
|
4637
|
+
D["chart-1"] = atLuminance(o.brand, CHART_Y.dark);
|
|
4638
|
+
SEQ_Y.light.forEach(function(y, i) {
|
|
4639
|
+
L["chart-seq-" + (i + 1)] = atLuminance(o.brand, y);
|
|
4640
|
+
});
|
|
4641
|
+
SEQ_Y.dark.forEach(function(y, i) {
|
|
4642
|
+
D["chart-seq-" + (i + 1)] = atLuminance(o.brand, y);
|
|
4643
|
+
});
|
|
4250
4644
|
D["fg-accent"] = fit(b[300], darkGrounds, 4.5, 1);
|
|
4251
4645
|
D["accent-violet"] = fit(b[400], darkGrounds, 3, 1);
|
|
4252
4646
|
D["focus-ring"] = fit(b[400], darkGrounds, 3, 1);
|
|
@@ -4306,6 +4700,19 @@ function createTheme(opts) {
|
|
|
4306
4700
|
check("dark", "fg-accent", g[0], 4.5, D["fg-accent"], g[1]);
|
|
4307
4701
|
check("dark", "focus-ring", g[0], 3, D["focus-ring"], g[1]);
|
|
4308
4702
|
});
|
|
4703
|
+
[
|
|
4704
|
+
["light", ZINC[0], L],
|
|
4705
|
+
["light", ZINC[50], L],
|
|
4706
|
+
["dark", ZINC[900], D],
|
|
4707
|
+
["dark", ZINC[950], D]
|
|
4708
|
+
].forEach(function(g) {
|
|
4709
|
+
const t = g[0], ground = g[1], m = g[2], name = ground === ZINC[0] || ground === ZINC[900] ? "bg-surface" : "bg-canvas";
|
|
4710
|
+
["chart-1", "chart-seq-1", "chart-seq-5"].forEach(function(k) {
|
|
4711
|
+
check(t, k, name, 3, m[k], ground);
|
|
4712
|
+
});
|
|
4713
|
+
});
|
|
4714
|
+
check("light", "chart-1", "chart-2 (lightness step)", 1.8, L["chart-1"], CHART_2);
|
|
4715
|
+
check("dark", "chart-1", "chart-2 (lightness step)", 1.8, D["chart-1"], CHART_2);
|
|
4309
4716
|
check("light", "fg-primary", "bg-selected", 4.5, INK, L["bg-selected"]);
|
|
4310
4717
|
check("dark", "fg-primary", "bg-selected", 4.5, "#ffffff", D["bg-selected"]);
|
|
4311
4718
|
check("light", "status-progress-fg", "status-progress-bg", 4.5, L["status-progress-fg"], L["status-progress-bg"]);
|
|
@@ -4385,7 +4792,14 @@ function colorSchemeScript(options) {
|
|
|
4385
4792
|
return "(function(){try{var s=localStorage.getItem(" + key + ");if(s!=='light'&&s!=='dark'&&s!=='system')s=" + fallback + `;var d=document.documentElement;d.setAttribute("data-theme",s);var dark=s==='dark'||(s==='system'&&window.matchMedia('(prefers-color-scheme: dark)').matches);d.classList.toggle("dark",dark);}catch(e){}})();`;
|
|
4386
4793
|
}
|
|
4387
4794
|
function ColorSchemeScript(props) {
|
|
4388
|
-
return /* @__PURE__ */ React39.createElement(
|
|
4795
|
+
return /* @__PURE__ */ React39.createElement(
|
|
4796
|
+
"script",
|
|
4797
|
+
{
|
|
4798
|
+
"data-aura-color-scheme": "",
|
|
4799
|
+
nonce: props.nonce,
|
|
4800
|
+
dangerouslySetInnerHTML: { __html: colorSchemeScript(props) }
|
|
4801
|
+
}
|
|
4802
|
+
);
|
|
4389
4803
|
}
|
|
4390
4804
|
function systemDark() {
|
|
4391
4805
|
return typeof window !== "undefined" && !!window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches;
|
|
@@ -4638,6 +5052,7 @@ var Pagination = React45.forwardRef(function Pagination2(props, ref) {
|
|
|
4638
5052
|
if (p >= 1 && p <= count && p !== page) st[1](p);
|
|
4639
5053
|
}
|
|
4640
5054
|
const link = props.getHref;
|
|
5055
|
+
const Link = useLinkComponent();
|
|
4641
5056
|
function item(p, label, extra) {
|
|
4642
5057
|
const common = Object.assign(
|
|
4643
5058
|
{
|
|
@@ -4648,7 +5063,7 @@ var Pagination = React45.forwardRef(function Pagination2(props, ref) {
|
|
|
4648
5063
|
extra
|
|
4649
5064
|
);
|
|
4650
5065
|
return link ? /* @__PURE__ */ React45.createElement(
|
|
4651
|
-
|
|
5066
|
+
Link,
|
|
4652
5067
|
{
|
|
4653
5068
|
href: link(p),
|
|
4654
5069
|
onClick: function(e) {
|