@jirawatpyk/aura-react 4.11.0 → 4.13.0

package/dist/esm/Command.js

@@ -0,0 +1,213 @@
+'use client';
+import * as React from "react";
+import { createPortal } from "react-dom";
+import { Icon } from "./Icon.js";
+import { defaultFilter } from "./Combobox.js";
+import { cx, uid } from "./internal.js";
+import { useStrings } from "./locale.js";
+import { useModal } from "./useModal.js";
+function isMac() {
+  return typeof navigator !== "undefined" && /Mac|iPhone|iPad/.test(navigator.platform || navigator.userAgent);
+}
+function Command(props) {
+  const t = useStrings();
+  const id = uid(), listId = id + "-list";
+  const box = React.useRef(null);
+  const input = React.useRef(null);
+  const q = React.useState(""), act = React.useState(0);
+  const openRef = React.useRef(props.open);
+  openRef.current = props.open;
+  const close = function() {
+    props.onOpenChange(false);
+  };
+  const modal = useModal(props.open, box, { onEscape: close });
+  React.useEffect(
+    function() {
+      if (props.hotkey === false) return;
+      function onKey2(e) {
+        if ((e.metaKey || e.ctrlKey) && !e.altKey && !e.shiftKey && (e.key === "k" || e.key === "K")) {
+          e.preventDefault();
+          props.onOpenChange(!openRef.current);
+        }
+      }
+      document.addEventListener("keydown", onKey2, true);
+      return function() {
+        document.removeEventListener("keydown", onKey2, true);
+      };
+    },
+    [props.hotkey, props.onOpenChange]
+  );
+  React.useEffect(
+    function() {
+      if (!props.open) {
+        q[1]("");
+        act[1](0);
+      }
+    },
+    [props.open]
+  );
+  const filter = props.filter || defaultFilter;
+  const shown = (props.items || []).filter(function(it) {
+    return filter(it, q[0]);
+  });
+  const groups = [];
+  shown.forEach(function(it) {
+    const name = it.group || "";
+    let g = groups.filter(function(x) {
+      return x.name === name;
+    })[0];
+    if (!g) groups.push(g = { name, items: [] });
+    g.items.push(it);
+  });
+  const flat = [];
+  groups.forEach(function(g) {
+    g.items.forEach(function(it) {
+      flat.push(it);
+    });
+  });
+  const enabled = flat.map(function(it, i2) {
+    return it.disabled ? -1 : i2;
+  }).filter(function(i2) {
+    return i2 >= 0;
+  });
+  const active = enabled.indexOf(act[0]) >= 0 ? act[0] : enabled.length ? enabled[0] : -1;
+  const optId = function(i2) {
+    return id + "-o" + i2;
+  };
+  React.useEffect(
+    function() {
+      if (!box.current || active < 0) return;
+      const el = box.current.querySelector("#" + CSS.escape(optId(active)));
+      if (el && el.scrollIntoView) el.scrollIntoView({ block: "nearest" });
+    },
+    [active]
+  );
+  function run(it) {
+    if (it.disabled) return;
+    close();
+    if (it.onSelect) it.onSelect();
+    if (props.onSelect) props.onSelect(it);
+  }
+  function move(dir) {
+    if (!enabled.length) return;
+    const at = enabled.indexOf(active);
+    let n;
+    if (dir === "first") n = 0;
+    else if (dir === "last") n = enabled.length - 1;
+    else n = (at + dir + enabled.length) % enabled.length;
+    act[1](enabled[n]);
+  }
+  function onKey(e) {
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      move(1);
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      move(-1);
+    } else if (e.key === "Home" && e.ctrlKey) {
+      e.preventDefault();
+      move("first");
+    } else if (e.key === "End" && e.ctrlKey) {
+      e.preventDefault();
+      move("last");
+    } else if (e.key === "Enter") {
+      e.preventDefault();
+      if (active >= 0) run(flat[active]);
+    }
+  }
+  if (!modal.ready) return null;
+  let i = -1;
+  return createPortal(
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: "aura-dialog-layer aura-command-layer",
+        onKeyDown: function(e) {
+          modal.onKeyDown(e);
+          e.stopPropagation();
+        }
+      },
+      /* @__PURE__ */ React.createElement("div", { className: "aura-scrim", onClick: close, "aria-hidden": true }),
+      /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          ref: box,
+          role: "dialog",
+          "aria-modal": true,
+          "aria-label": props.label || t.commandMenu,
+          tabIndex: -1,
+          className: cx("aura-command", props.className)
+        },
+        /* @__PURE__ */ React.createElement("div", { className: "aura-command__search" }, /* @__PURE__ */ React.createElement(Icon, { name: "search", className: "aura-command__search-icon" }), /* @__PURE__ */ React.createElement(
+          "input",
+          {
+            ref: input,
+            "data-autofocus": "",
+            type: "text",
+            role: "combobox",
+            "aria-expanded": true,
+            "aria-controls": listId,
+            "aria-autocomplete": "list",
+            "aria-activedescendant": active >= 0 ? optId(active) : void 0,
+            "aria-label": props.label || t.commandMenu,
+            placeholder: props.placeholder || t.commandPlaceholder,
+            className: "aura-command__input",
+            value: q[0],
+            autoComplete: "off",
+            spellCheck: false,
+            onChange: function(e) {
+              q[1](e.target.value);
+              act[1](0);
+            },
+            onKeyDown: onKey
+          }
+        ), /* @__PURE__ */ React.createElement("kbd", { className: "aura-command__kbd" }, "Esc")),
+        /* @__PURE__ */ React.createElement("div", { className: "aura-command__list", id: listId, role: "listbox", "aria-label": props.label || t.commandMenu }, !flat.length ? /* @__PURE__ */ React.createElement("p", { className: "aura-command__empty", role: "presentation" }, props.emptyText || t.noMatches) : groups.map(function(g, gi) {
+          const gid = id + "-g" + gi;
+          return /* @__PURE__ */ React.createElement(
+            "div",
+            {
+              key: g.name || gi,
+              role: "group",
+              "aria-labelledby": g.name ? gid : void 0,
+              className: "aura-command__group"
+            },
+            g.name ? /* @__PURE__ */ React.createElement("div", { className: "aura-command__heading", id: gid, role: "presentation" }, g.name) : null,
+            g.items.map(function(it) {
+              i++;
+              const n = i;
+              return /* @__PURE__ */ React.createElement(
+                "div",
+                {
+                  key: it.id,
+                  id: optId(n),
+                  role: "option",
+                  "aria-selected": n === active,
+                  "aria-disabled": it.disabled || void 0,
+                  className: cx("aura-command__item", n === active && "is-active", it.disabled && "is-disabled"),
+                  onPointerDown: function(e) {
+                    e.preventDefault();
+                  },
+                  onPointerMove: function() {
+                    if (!it.disabled && act[0] !== n) act[1](n);
+                  },
+                  onClick: function() {
+                    run(it);
+                  }
+                },
+                it.icon ? /* @__PURE__ */ React.createElement(Icon, { name: it.icon }) : null,
+                /* @__PURE__ */ React.createElement("span", { className: "aura-command__text" }, /* @__PURE__ */ React.createElement("span", { className: "aura-command__label" }, it.label), it.description ? /* @__PURE__ */ React.createElement("span", { className: "aura-command__desc" }, it.description) : null),
+                it.shortcut ? /* @__PURE__ */ React.createElement("kbd", { className: "aura-command__kbd" }, it.shortcut) : null
+              );
+            })
+          );
+        })),
+        /* @__PURE__ */ React.createElement("div", { className: "aura-command__foot", "aria-hidden": true }, t.commandHint, /* @__PURE__ */ React.createElement("span", { className: "aura-command__mod" }, isMac() ? "\u2318K" : "Ctrl K"))
+      )
+    ),
+    document.body
+  );
+}
+export {
+  Command
+};

package/dist/esm/DatePicker.js

@@ -111,6 +111,22 @@ function formatDate(iso, opts) {
   const loc = o.locale || "th";
   return fmt(localeTag(loc, o.calendar || defaultCalendar(loc)), f, d).replace(ERA, "");
 }
+function useFormatDate() {
+  const ctx = useAuraLocale(), locale = ctx.locale || "en", calendar = ctx.calendar;
+  return React.useCallback(
+    function(iso, opts) {
+      const o = opts || {}, loc = o.locale || locale;
+      return formatDate(
+        iso,
+        Object.assign({}, o, {
+          locale: loc,
+          calendar: o.calendar || (o.locale ? void 0 : calendar) || defaultCalendar(loc)
+        })
+      );
+    },
+    [locale, calendar]
+  );
+}
 let MONTHS = null;
 function monthIndex(word) {
   if (!MONTHS) {
@@ -708,5 +724,6 @@ export {
   formatDate,
   fromISO,
   parseDate,
-  toISO
+  toISO,
+  useFormatDate
 };

package/dist/esm/FilterBar.js

@@ -0,0 +1,112 @@
+'use client';
+import * as React from "react";
+import { Icon } from "./Icon.js";
+import { IconButton } from "./IconButton.js";
+import { Tag } from "./Tag.js";
+import { cx, uid } from "./internal.js";
+import { useStrings } from "./locale.js";
+const FilterBar = React.forwardRef(function FilterBar2(props, ref) {
+  const t = useStrings();
+  const id = uid();
+  const hasSearch = !!props.onSearchChange;
+  const draft = React.useState(props.search || "");
+  const timer = React.useRef(null);
+  const sent = React.useRef(props.search || "");
+  const onChange = React.useRef(props.onSearchChange);
+  onChange.current = props.onSearchChange;
+  React.useEffect(
+    function() {
+      if ((props.search || "") !== sent.current) {
+        sent.current = props.search || "";
+        draft[1](props.search || "");
+      }
+    },
+    [props.search]
+  );
+  React.useEffect(function() {
+    return function() {
+      if (timer.current) clearTimeout(timer.current);
+    };
+  }, []);
+  function send(v) {
+    if (timer.current) clearTimeout(timer.current);
+    timer.current = null;
+    if (v === sent.current) return;
+    sent.current = v;
+    if (onChange.current) onChange.current(v);
+  }
+  function type(v) {
+    draft[1](v);
+    if (timer.current) clearTimeout(timer.current);
+    timer.current = setTimeout(
+      function() {
+        send(v);
+      },
+      props.searchDelay == null ? 300 : props.searchDelay
+    );
+  }
+  const filters = props.filters || [];
+  const anything = filters.length > 0 || !!(props.search || draft[0]);
+  const count = props.resultCount == null ? null : typeof props.resultCount === "number" ? t.results(props.resultCount) : props.resultCount;
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      ref,
+      role: "region",
+      "aria-label": props.label || t.filters,
+      className: cx("aura-filterbar", props.className)
+    },
+    /* @__PURE__ */ React.createElement("div", { className: "aura-filterbar__row" }, hasSearch ? /* @__PURE__ */ React.createElement("div", { className: "aura-input has-icon aura-filterbar__search" }, /* @__PURE__ */ React.createElement(Icon, { name: "search", className: "aura-input__icon" }), /* @__PURE__ */ React.createElement(
+      "input",
+      {
+        id,
+        type: "search",
+        className: "aura-input__control",
+        "aria-label": props.searchLabel || t.search,
+        placeholder: props.searchPlaceholder || props.searchLabel || t.search,
+        value: draft[0],
+        onChange: function(e) {
+          type(e.target.value);
+        },
+        onKeyDown: function(e) {
+          if (e.key === "Enter") send(draft[0]);
+          if (e.key === "Escape" && draft[0]) {
+            e.preventDefault();
+            draft[1]("");
+            send("");
+          }
+        }
+      }
+    ), draft[0] ? /* @__PURE__ */ React.createElement(
+      IconButton,
+      {
+        icon: "x",
+        label: t.clear((props.searchLabel || t.search).toLowerCase()),
+        className: "aura-filterbar__clear-search",
+        onClick: function() {
+          draft[1]("");
+          send("");
+        }
+      }
+    ) : null) : null, props.children ? /* @__PURE__ */ React.createElement("div", { className: "aura-filterbar__controls" }, props.children) : null, /* @__PURE__ */ React.createElement("span", { className: "aura-filterbar__spacer" }), count != null ? /* @__PURE__ */ React.createElement("span", { className: "aura-filterbar__count", "aria-live": "polite" }, count) : null, props.actions ? /* @__PURE__ */ React.createElement("div", { className: "aura-filterbar__actions" }, props.actions) : null),
+    filters.length || props.onClearAll && anything ? /* @__PURE__ */ React.createElement("div", { className: "aura-filterbar__chips" }, filters.map(function(f) {
+      return /* @__PURE__ */ React.createElement(Tag, { key: f.id, onRemove: f.onRemove }, f.label);
+    }), props.onClearAll && anything ? /* @__PURE__ */ React.createElement(
+      "button",
+      {
+        type: "button",
+        className: "aura-filterbar__clear",
+        onClick: function() {
+          draft[1]("");
+          sent.current = "";
+          if (timer.current) clearTimeout(timer.current);
+          props.onClearAll();
+        }
+      },
+      t.clearFilters
+    ) : null) : null
+  );
+});
+export {
+  FilterBar
+};

package/dist/esm/FormErrorSummary.js

@@ -0,0 +1,76 @@
+'use client';
+import * as React from "react";
+import { Icon } from "./Icon.js";
+import { cx, uid } from "./internal.js";
+import { useStrings } from "./locale.js";
+function items(errors) {
+  if (Array.isArray(errors)) return errors;
+  const out = [];
+  for (const k in errors || {}) {
+    const e = errors[k];
+    if (e && e.message) out.push({ field: k, message: e.message });
+  }
+  return out;
+}
+function fieldElement(field) {
+  if (typeof document === "undefined") return null;
+  return document.getElementById(field) || document.querySelector('[name="' + field.replace(/"/g, '\\"') + '"]');
+}
+const FormErrorSummary = React.forwardRef(
+  function FormErrorSummary2(props, ref) {
+    const t = useStrings();
+    const auto = uid(), id = props.id || auto;
+    const list = items(props.errors);
+    const box = React.useRef(null);
+    React.useEffect(
+      function() {
+        const has = list.length > 0;
+        if (has && box.current) box.current.focus();
+      },
+      /* focus when errors first appear, and again whenever focusKey changes (each submit) */
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      [list.length > 0, props.focusKey]
+    );
+    if (!list.length) return null;
+    return /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        ref: function(el) {
+          box.current = el;
+          if (typeof ref === "function") ref(el);
+          else if (ref) ref.current = el;
+        },
+        id,
+        tabIndex: -1,
+        role: "alert",
+        "aria-labelledby": id + "-title",
+        className: cx("aura-alert aura-alert--danger aura-error-summary", props.className)
+      },
+      /* @__PURE__ */ React.createElement(Icon, { name: "circle-alert", className: "aura-alert__icon" }),
+      /* @__PURE__ */ React.createElement("div", { className: "aura-alert__body" }, /* @__PURE__ */ React.createElement("h2", { className: "aura-alert__title", id: id + "-title" }, props.title || t.errorSummary(list.length)), /* @__PURE__ */ React.createElement("ul", { className: "aura-error-summary__list" }, list.map(function(e) {
+        return /* @__PURE__ */ React.createElement("li", { key: e.field }, /* @__PURE__ */ React.createElement(
+          "a",
+          {
+            href: "#" + e.field,
+            onClick: function(ev) {
+              ev.preventDefault();
+              if (props.onSelect) {
+                props.onSelect(e.field);
+                return;
+              }
+              const el = fieldElement(e.field);
+              if (el) {
+                el.scrollIntoView({ block: "center" });
+                el.focus();
+              }
+            }
+          },
+          e.message
+        ));
+      })))
+    );
+  }
+);
+export {
+  FormErrorSummary
+};

package/dist/esm/PasswordField.js

@@ -0,0 +1,38 @@
+'use client';
+import * as React from "react";
+import { TextField } from "./TextField.js";
+import { IconButton } from "./IconButton.js";
+import { cx, omit } from "./internal.js";
+import { useStrings } from "./locale.js";
+const PasswordField = React.forwardRef(function PasswordField2(props, ref) {
+  const t = useStrings();
+  const shown = React.useState(false);
+  const rest = omit(props, ["toggle", "className"]);
+  return /* @__PURE__ */ React.createElement(
+    TextField,
+    {
+      autoComplete: "current-password",
+      ...rest,
+      ref,
+      type: shown[0] ? "text" : "password",
+      spellCheck: false,
+      autoCapitalize: "none",
+      className: cx("aura-password", props.className),
+      suffix: props.toggle === false ? void 0 : /* @__PURE__ */ React.createElement(
+        IconButton,
+        {
+          icon: shown[0] ? "eye-off" : "eye",
+          label: t.showPassword,
+          "aria-pressed": shown[0],
+          disabled: props.disabled,
+          onClick: function() {
+            shown[1](!shown[0]);
+          }
+        }
+      )
+    }
+  );
+});
+export {
+  PasswordField
+};

package/dist/esm/Toaster.js

@@ -16,15 +16,40 @@ function emitToasts() {
     f(toastState.list.slice());
   });
 }
-function toast(opts) {
-  if (typeof opts === "string") opts = { title: opts };
+function show(opts) {
   const id = opts.id || "t" + ++toastState.n;
-  toastState.list = toastState.list.filter(function(t) {
-    return t.id !== id;
-  }).concat([Object.assign({ tone: "info" }, opts, { id })]).slice(-3);
+  const at = toastState.list.findIndex(function(t) {
+    return t.id === id;
+  });
+  const entry = Object.assign({ tone: "info" }, opts, {
+    id,
+    loading: !!opts.loading,
+    rev: at >= 0 ? toastState.list[at].rev + 1 : 0
+  });
+  if (at >= 0) {
+    toastState.list = toastState.list.slice();
+    toastState.list[at] = entry;
+  } else toastState.list = toastState.list.concat([entry]).slice(-3);
   emitToasts();
   return id;
 }
+function toast(opts) {
+  return show(typeof opts === "string" ? { title: opts } : opts);
+}
+function shorthand(tone) {
+  return function(title, opts) {
+    return show(Object.assign({}, opts, { title, tone }));
+  };
+}
+toast.success = shorthand("success");
+toast.error = shorthand("danger");
+toast.warning = shorthand("warning");
+toast.info = shorthand("info");
+toast.loading = function(title, opts) {
+  return show(
+    Object.assign({}, opts, { title, tone: "info", loading: true, duration: Infinity })
+  );
+};
 toast.dismiss = function(id) {
   toastState.list = toastState.list.filter(function(t) {
     return t.id !== id;
@@ -34,35 +59,56 @@ toast.dismiss = function(id) {
 function ToastItem(props) {
   const str = useStrings();
   const t = props.toast, timer = React.useRef(null), left = React.useRef(t.duration || 5e3), since = React.useRef(0);
+  const hover = React.useRef(false);
   function start() {
-    if (left.current === Infinity) return;
+    if (left.current === Infinity || timer.current) return;
     since.current = Date.now();
     timer.current = setTimeout(function() {
       toast.dismiss(t.id);
     }, left.current);
   }
+  function resume() {
+    hover.current = false;
+    start();
+  }
   function pause() {
+    hover.current = true;
     if (timer.current) {
       clearTimeout(timer.current);
       timer.current = null;
       left.current -= Date.now() - since.current;
     }
   }
-  React.useEffect(function() {
-    start();
-    return pause;
-  }, []);
+  React.useEffect(
+    function() {
+      if (timer.current) clearTimeout(timer.current);
+      timer.current = null;
+      left.current = t.duration || 5e3;
+      if (!hover.current) start();
+      return function() {
+        if (timer.current) clearTimeout(timer.current);
+      };
+    },
+    [t.rev]
+  );
   return /* @__PURE__ */ React.createElement(
     "div",
     {
-      className: cx("aura-toast", "aura-toast--" + t.tone),
+      className: cx("aura-toast", "aura-toast--" + t.tone, t.loading && "is-loading"),
       role: t.tone === "danger" ? "alert" : "status",
+      "aria-busy": t.loading || void 0,
       onMouseEnter: pause,
-      onMouseLeave: start,
+      onMouseLeave: resume,
       onFocus: pause,
-      onBlur: start
+      onBlur: resume
     },
-    /* @__PURE__ */ React.createElement(Icon, { name: ALERT_ICON[t.tone] || "info", className: "aura-toast__icon" }),
+    /* @__PURE__ */ React.createElement(
+      Icon,
+      {
+        name: t.loading ? "loader-circle" : ALERT_ICON[t.tone] || "info",
+        className: cx("aura-toast__icon", t.loading && "aura-spin")
+      }
+    ),
     /* @__PURE__ */ React.createElement("div", { className: "aura-toast__body" }, /* @__PURE__ */ React.createElement("p", { className: "aura-toast__title" }, t.title), t.description ? /* @__PURE__ */ React.createElement("p", { className: "aura-toast__text" }, t.description) : null),
     t.action ? /* @__PURE__ */ React.createElement(
       "button",

package/dist/esm/index.js

@@ -13,9 +13,13 @@ import { Select } from "./Select.js";
 import { RadioGroup } from "./RadioGroup.js";
 import { Switch } from "./Switch.js";
 import { Combobox, defaultFilter } from "./Combobox.js";
-import { DatePicker, DateRangePicker, Calendar, formatDate, parseDate } from "./DatePicker.js";
+import { DatePicker, DateRangePicker, Calendar, formatDate, parseDate, useFormatDate } from "./DatePicker.js";
 import { Alert } from "./Alert.js";
 import { Toaster, toast } from "./Toaster.js";
+import { PasswordField } from "./PasswordField.js";
+import { FormErrorSummary } from "./FormErrorSummary.js";
+import { FilterBar } from "./FilterBar.js";
+import { Command } from "./Command.js";
 import { Tooltip } from "./Tooltip.js";
 import { Dialog, Drawer } from "./Dialog.js";
 import { DataTable } from "./DataTable.js";
@@ -63,6 +67,7 @@ export {
   ColorSchemeScript,
   ColorSchemeToggle,
   Combobox,
+  Command,
   Container,
   DataTable,
   DatePicker,
@@ -73,6 +78,8 @@ export {
   EmptyState,
   Field,
   FileUpload,
+  FilterBar,
+  FormErrorSummary,
   Grid,
   ICONS,
   Icon,
@@ -80,6 +87,7 @@ export {
   Menu,
   NumberField,
   Pagination,
+  PasswordField,
   Popover,
   Progress,
   RadioGroup,
@@ -118,5 +126,6 @@ export {
   useAuraLocale,
   useBreakpoint,
   useColorScheme,
+  useFormatDate,
   useResponsive
 };

package/dist/esm/locale.js

@@ -11,6 +11,19 @@ const STRINGS = {
     close: "Close",
     dismiss: "Dismiss",
     dismissToast: "Dismiss notification",
+    showPassword: "Show password",
+    filters: "Filters",
+    search: "Search",
+    clearFilters: "Clear all",
+    results: function(n2) {
+      return n2 === 1 ? "1 result" : n2.toLocaleString("en") + " results";
+    },
+    commandMenu: "Command menu",
+    commandPlaceholder: "Type a command or search\u2026",
+    commandHint: "\u2191\u2193 to move \xB7 Enter to open \xB7 Esc to close",
+    errorSummary: function(n2) {
+      return n2 === 1 ? "Fix 1 field to continue" : "Fix " + n2 + " fields to continue";
+    },
     notifications: "Notifications",
     mainNav: "Main",
     breadcrumb: "Breadcrumb",
@@ -109,6 +122,19 @@ const STRINGS = {
     close: "\u0E1B\u0E34\u0E14",
     dismiss: "\u0E1B\u0E34\u0E14",
     dismissToast: "\u0E1B\u0E34\u0E14\u0E01\u0E32\u0E23\u0E41\u0E08\u0E49\u0E07\u0E40\u0E15\u0E37\u0E2D\u0E19",
+    showPassword: "\u0E41\u0E2A\u0E14\u0E07\u0E23\u0E2B\u0E31\u0E2A\u0E1C\u0E48\u0E32\u0E19",
+    filters: "\u0E15\u0E31\u0E27\u0E01\u0E23\u0E2D\u0E07",
+    search: "\u0E04\u0E49\u0E19\u0E2B\u0E32",
+    clearFilters: "\u0E25\u0E49\u0E32\u0E07\u0E17\u0E31\u0E49\u0E07\u0E2B\u0E21\u0E14",
+    results: function(n2) {
+      return n2.toLocaleString("en") + " \u0E23\u0E32\u0E22\u0E01\u0E32\u0E23";
+    },
+    commandMenu: "\u0E40\u0E21\u0E19\u0E39\u0E04\u0E33\u0E2A\u0E31\u0E48\u0E07",
+    commandPlaceholder: "\u0E1E\u0E34\u0E21\u0E1E\u0E4C\u0E04\u0E33\u0E2A\u0E31\u0E48\u0E07\u0E2B\u0E23\u0E37\u0E2D\u0E04\u0E49\u0E19\u0E2B\u0E32\u2026",
+    commandHint: "\u2191\u2193 \u0E40\u0E25\u0E37\u0E48\u0E2D\u0E19 \xB7 Enter \u0E40\u0E1B\u0E34\u0E14 \xB7 Esc \u0E1B\u0E34\u0E14",
+    errorSummary: function(n2) {
+      return "\u0E41\u0E01\u0E49\u0E44\u0E02 " + n2 + " \u0E0A\u0E48\u0E2D\u0E07\u0E01\u0E48\u0E2D\u0E19\u0E44\u0E1B\u0E15\u0E48\u0E2D";
+    },
     notifications: "\u0E01\u0E32\u0E23\u0E41\u0E08\u0E49\u0E07\u0E40\u0E15\u0E37\u0E2D\u0E19",
     mainNav: "\u0E40\u0E21\u0E19\u0E39\u0E2B\u0E25\u0E31\u0E01",
     breadcrumb: "\u0E40\u0E2A\u0E49\u0E19\u0E17\u0E32\u0E07",
@@ -207,6 +233,19 @@ const STRINGS = {
     close: "St\xE4ng",
     dismiss: "St\xE4ng",
     dismissToast: "St\xE4ng aviseringen",
+    showPassword: "Visa l\xF6senord",
+    filters: "Filter",
+    search: "S\xF6k",
+    clearFilters: "Rensa alla",
+    results: function(n2) {
+      return n2 === 1 ? "1 tr\xE4ff" : n2.toLocaleString("sv-SE") + " tr\xE4ffar";
+    },
+    commandMenu: "Kommandomeny",
+    commandPlaceholder: "Skriv ett kommando eller s\xF6k\u2026",
+    commandHint: "\u2191\u2193 flytta \xB7 Enter \xF6ppna \xB7 Esc st\xE4ng",
+    errorSummary: function(n2) {
+      return n2 === 1 ? "R\xE4tta 1 f\xE4lt f\xF6r att forts\xE4tta" : "R\xE4tta " + n2 + " f\xE4lt f\xF6r att forts\xE4tta";
+    },
     notifications: "Aviseringar",
     mainNav: "Huvudmeny",
     breadcrumb: "Br\xF6dsmulor",