nexus-shared 3.1.0 → 4.0.0

package/dist/Helpers/UserPreferences.d.ts

@@ -1,3 +1,4 @@
+import type { InputDesign } from "../Interfaces/InputInterfaces.ts";
 import { type UserPreferences } from "../Interfaces/PreferenceInterfaces.ts";
 /** The saved settings, with the defaults for anything missing or invalid. Safe to call on the server. */
 export declare function readUserPreferences(): UserPreferences;
@@ -12,3 +13,10 @@ export declare function useUserPreferences(): UserPreferences;
  * use when they are given no `locale` of their own.
  */
 export declare function useNumberLocale(): string;
+/**
+ * The design an input takes: its own (its page's or its form's), else the person's choice in the quick preferences,
+ * else `standard`. A grid's cells and a demo of the designs name theirs, so they keep it. An input with no label of its
+ * own - a table's search box, a picker named by a heading above it - has no label to place, so the choice passes it by:
+ * a design for one would only leave an empty strip where the label would be.
+ */
+export declare function useInputDesign(own: InputDesign | undefined, labelled?: boolean): InputDesign;

package/dist/Helpers/UserPreferences.js

@@ -11,6 +11,7 @@ import { numberLocale } from "./NumberHelpers.js";
 const listeners = new Set();
 let snapshot = DEFAULT_USER_PREFERENCES;
 const SEPARATORS = ["comma", "period", "space", "none"];
+const INPUT_DESIGNS = ["standard", "outlined", "inbox"];
 function read(key) {
     try {
         return localStorage.getItem(key);
@@ -28,12 +29,14 @@ export function readUserPreferences() {
     const thousands = read(PREFERENCE_STORAGE_KEYS.thousands);
     const pageSize = Number(read(PREFERENCE_STORAGE_KEYS.pageSize));
     const rowClick = read(PREFERENCE_STORAGE_KEYS.rowClick);
+    const inputDesign = read(PREFERENCE_STORAGE_KEYS.inputDesign);
     const next = {
         language: language === "ne" ? "ne" : DEFAULT_USER_PREFERENCES.language,
         numberScale: scale === ENumberScales.SouthAsian ? ENumberScales.SouthAsian : DEFAULT_USER_PREFERENCES.numberScale,
         thousands: thousands && SEPARATORS.includes(thousands) ? thousands : DEFAULT_USER_PREFERENCES.thousands,
         pageSize: Number.isInteger(pageSize) && pageSize > 0 ? pageSize : DEFAULT_USER_PREFERENCES.pageSize,
         rowClick: rowClick === "1" ? true : rowClick === "0" ? false : DEFAULT_USER_PREFERENCES.rowClick,
+        inputDesign: inputDesign && INPUT_DESIGNS.includes(inputDesign) ? inputDesign : DEFAULT_USER_PREFERENCES.inputDesign,
     };
     // The same object while nothing changed, so React sees a stable snapshot.
     const keys = Object.keys(next);
@@ -59,6 +62,10 @@ export function setUserPreferences(changes) {
             localStorage.removeItem(PREFERENCE_STORAGE_KEYS.rowClick);
         else if (changes.rowClick !== undefined)
             localStorage.setItem(PREFERENCE_STORAGE_KEYS.rowClick, changes.rowClick ? "1" : "0");
+        if (changes.inputDesign === null)
+            localStorage.removeItem(PREFERENCE_STORAGE_KEYS.inputDesign);
+        else if (changes.inputDesign !== undefined)
+            localStorage.setItem(PREFERENCE_STORAGE_KEYS.inputDesign, changes.inputDesign);
     }
     catch {
         // Storage blocked (private mode, for example): the components keep what they have.
@@ -97,3 +104,13 @@ export function useNumberLocale() {
     const { numberScale, thousands } = useUserPreferences();
     return numberLocale(numberScale, thousands);
 }
+/**
+ * The design an input takes: its own (its page's or its form's), else the person's choice in the quick preferences,
+ * else `standard`. A grid's cells and a demo of the designs name theirs, so they keep it. An input with no label of its
+ * own - a table's search box, a picker named by a heading above it - has no label to place, so the choice passes it by:
+ * a design for one would only leave an empty strip where the label would be.
+ */
+export function useInputDesign(own, labelled = true) {
+    const chosen = useSyncExternalStore(subscribeUserPreferences, () => readUserPreferences().inputDesign, () => DEFAULT_USER_PREFERENCES.inputDesign);
+    return own ?? (labelled ? chosen : null) ?? "standard";
+}