@allxsmith/bestax-bulma 5.57.4 → 5.58.0

package/dist/esm/helpers/localeFormat.js

@@ -1,50 +1,210 @@
 /* @allxsmith/bestax-bulma — AI agents: see AGENTS.md in the package root, or https://bestax.io/llms.txt */
 'use client';
 import { useMemo } from 'react';
-import { useLocaleScope } from './LocaleProvider.js';
+import { useLocaleScope, validLocale } from './LocaleProvider.js';
+import { warnOnce } from './devWarnings.js';
 
-// INTERNAL: deliberately not exported from src/index.ts. Number formatting
-// and text matching in a LocaleProvider's locale. Both return `null` outside
-// a provider that gives a locale, so each caller keeps the formatting and the
-// matching it has always had there.
+// Number formatting and text matching in a locale.
+//
+// `useNumberFormat` and its `NumberFormatFunction` type are public, exported
+// from src/index.ts. The rest is INTERNAL, deliberately not exported.
+//
+// Which a component calls depends on its job. A component whose job is to
+// write a number, such as `NumberFormatter`, uses `useNumberFormat`, which
+// writes in the runtime's locale outside a `LocaleProvider`, as the pickers
+// do. Any other component that shows a number in passing, such as a badge
+// count, a page number or a step's number, uses `useScopedNumberFormat`,
+// and filters a list through `useLocaleMatcher`. Those two return `null`
+// outside a provider, and inside one that gives no locale, as a provider
+// with only a `dir` doesn't, so the component keeps the formatting and the
+// matching it has always had there, as `LocaleProvider` promises.
 /** A combining mark: an accent, a vowel sign or a point written on a letter. */
 const MARK = /\p{M}/u;
 /**
- * The locale a component formats and matches in: inside a `LocaleProvider`,
- * the component's own locale when it has one (a picker's `locale`), else the
- * provider's; outside a provider, none.
+ * The warning about a locale `Intl` refuses, given to `useNumberFormat`,
+ * and so to `NumberFormatter`, the only callers that pass one.
  */
-function useScopedLocale(own) {
+const warnOwnLocale = (tag) => warnOnce(`number-format-invalid-locale:${tag}`, `[bestax-bulma] NumberFormatter or useNumberFormat was given the locale ` +
+    `"${tag}", which is not a language tag Intl accepts, so it is ` +
+    "ignored and numbers are written in the LocaleProvider's locale, " +
+    'else the runtime\'s. Use a BCP 47 tag such as "en-US", with a ' +
+    'hyphen rather than an underscore.');
+/**
+ * The locale a component formats and matches in: the locale given, else the
+ * `LocaleProvider`'s, else none. A tag `Intl` refuses counts as none, with a
+ * development warning, as `LocaleProvider` treats one.
+ */
+function useResolvedLocale(own) {
     const scope = useLocaleScope();
-    if (!scope)
-        return undefined;
-    return scope.locale;
+    const valid = useMemo(() => validLocale(own, warnOwnLocale), [own]);
+    return valid || scope?.locale;
 }
 /**
- * A formatter for numbers shown on screen, in the locale of the
- * `LocaleProvider` around the component, or `null` outside one that gives a
- * locale. Formatters are kept per set of options, since building one is the
- * expensive part.
+ * The options `Intl.NumberFormat` reads, as ECMA-402 lists them. A key reads
+ * each by name, so an inherited option counts as `Intl` counts it.
+ */
+const NUMBER_FORMAT_OPTIONS = [
+    'localeMatcher',
+    'numberingSystem',
+    'style',
+    'currency',
+    'currencyDisplay',
+    'currencySign',
+    'unit',
+    'unitDisplay',
+    'notation',
+    'minimumIntegerDigits',
+    'minimumFractionDigits',
+    'maximumFractionDigits',
+    'minimumSignificantDigits',
+    'maximumSignificantDigits',
+    'roundingIncrement',
+    'roundingMode',
+    'roundingPriority',
+    'trailingZeroDisplay',
+    'compactDisplay',
+    'useGrouping',
+    'signDisplay',
+];
+const KNOWN_OPTIONS = new Set(NUMBER_FORMAT_OPTIONS);
+/** One option's value with its type, or `null` for one a key can't hold. */
+function writeOption(value) {
+    switch (typeof value) {
+        case 'string':
+            return JSON.stringify(value);
+        case 'number':
+            // `NaN` and `Infinity` as themselves, which `JSON.stringify` makes
+            // `null`, and `-0` with its sign.
+            return Object.is(value, -0) ? '-0' : String(value);
+        case 'boolean':
+            return String(value);
+        case 'bigint':
+            return `${value}n`;
+        default:
+            return value === null ? 'null' : null;
+    }
+}
+/**
+ * The options as `Intl` will read them, and a key that tells apart any two
+ * sets it would read differently; `null` when an option `Intl` reads holds
+ * an object, a function or a symbol, which `Intl` converts in ways a key
+ * can't follow. It reads each option `Intl` reads by name, inherited ones
+ * included, then every other enumerable key, own or inherited, so an option
+ * `Intl` gains later still keeps two sets apart. Since `Intl`'s options are
+ * all primitives, one of those other keys holding anything else is left
+ * out. An option set to `undefined` is unset, as it is for `Intl`. The
+ * formatter is built from the copy, so `Intl` sees what the key says, even
+ * of a getter.
+ */
+function readOptions(options) {
+    const others = [];
+    for (const name in options) {
+        if (!KNOWN_OPTIONS.has(name))
+            others.push(name);
+    }
+    const names = NUMBER_FORMAT_OPTIONS.concat(others.sort());
+    const read = {};
+    const parts = [];
+    for (const name of names) {
+        const value = options[name];
+        if (value === undefined)
+            continue;
+        const written = writeOption(value);
+        if (written === null) {
+            // An option `Intl` reads converts an object; a key it doesn't read,
+            // such as a config's own `meta`, means nothing to it.
+            if (KNOWN_OPTIONS.has(name))
+                return null;
+            continue;
+        }
+        read[name] = value;
+        parts.push(`${JSON.stringify(name)}:${written}`);
+    }
+    return { key: parts.join(','), read };
+}
+/**
+ * Every formatter's `Intl.NumberFormat`s, by locale and options, so a page of
+ * numbers in one locale and format builds one. Building one is the expensive
+ * part of formatting. Past `MOST_NUMBER_FORMATS`, the one used longest ago
+ * goes, so a server that writes numbers in many locales doesn't keep them
+ * all, and the ones in use stay. A `Map` keeps its keys in the order they
+ * were set, so a formatter is set again each time it's used.
+ */
+const numberFormats = new Map();
+const MOST_NUMBER_FORMATS = 200;
+/** The `Intl.NumberFormat` for `locale` and `options`, built once. */
+function numberFormatFor(locale, options) {
+    let read;
+    let key = '';
+    if (options !== undefined) {
+        const copy = typeof options === 'object' && options !== null
+            ? readOptions(options)
+            : null;
+        // Options a key can't hold get a formatter of their own, which also
+        // throws what `Intl` throws for them.
+        if (!copy)
+            return new Intl.NumberFormat(locale, options);
+        read = copy.read;
+        key = copy.key;
+    }
+    // A locale tag has no spaces, so the key can't be read two ways.
+    const cacheKey = `${locale ?? ''} ${key}`;
+    let format = numberFormats.get(cacheKey);
+    if (format) {
+        numberFormats.delete(cacheKey);
+    }
+    else {
+        // Built before anything is stored, so options `Intl` refuses throw its
+        // error and leave nothing behind.
+        format = new Intl.NumberFormat(locale, read);
+        if (numberFormats.size >= MOST_NUMBER_FORMATS) {
+            numberFormats.delete(numberFormats.keys().next().value);
+        }
+    }
+    numberFormats.set(cacheKey, format);
+    return format;
+}
+/** A function that writes numbers in `locale`, the same one for each locale. */
+function useFormatIn(locale) {
+    return useMemo(() => (value, options) => numberFormatFor(locale, options).format(value), [locale]);
+}
+/**
+ * A function that writes numbers for display in a locale: `locale` when given, else the `LocaleProvider`'s around the component, else the runtime's.
+ *
+ * Formatters are kept per locale and set of options, since building one is
+ * the expensive part, and shared, so many numbers written the same way build
+ * one. The function is the same from one render to the next for the same
+ * locale, so it's safe in a dependency array. Use it for text outside JSX,
+ * such as an `aria-label`, a `placeholder` or a chart's axis; in JSX,
+ * `NumberFormatter` also marks the number up. On a server render the
+ * runtime's locale is the server's, so give it a locale, here or through a
+ * `LocaleProvider`, where the server's and the browser's can differ. A tag
+ * `Intl` refuses is ignored, with a warning in development, as
+ * `LocaleProvider` ignores one. Options `Intl` refuses throw its error when
+ * the function is called.
+ *
+ * @function
+ * @param locale - A BCP 47 locale tag, which wins over the provider's.
+ * @returns {NumberFormatFunction} Writes `value` with `Intl.NumberFormat` options.
  *
- * @param own - The component's own locale, such as a picker's `locale`,
- * which wins inside a provider.
+ * @example
+ * const format = useNumberFormat();
+ * const placeholder = format(1500, { style: 'currency', currency: 'EUR' });
  */
-function useNumberFormat(own) {
-    const locale = useScopedLocale();
-    return useMemo(() => {
-        if (!locale)
-            return null;
-        const formats = new Map();
-        return (value, options) => {
-            const key = options ? JSON.stringify(options) : '';
-            let format = formats.get(key);
-            if (!format) {
-                format = new Intl.NumberFormat(locale, options);
-                formats.set(key, format);
-            }
-            return format.format(value);
-        };
-    }, [locale]);
+function useNumberFormat(locale) {
+    return useFormatIn(useResolvedLocale(locale));
+}
+/**
+ * INTERNAL, deliberately not exported from `src/index.ts`. Number formatting
+ * for a component that shows a number in passing, as `useNumberFormat`
+ * writes it in the `LocaleProvider`'s locale, or `null` outside a provider
+ * and inside one that gives no locale, as a provider with only a `dir`
+ * doesn't, where the component keeps the formatting it has always had.
+ */
+function useScopedNumberFormat() {
+    const scoped = useResolvedLocale(undefined);
+    const format = useFormatIn(scoped);
+    return scoped ? format : null;
 }
 /**
  * A matcher for filtering a list by what was typed, in the locale of the
@@ -58,7 +218,7 @@ function useNumberFormat(own) {
  * matches everything.
  */
 function useLocaleMatcher() {
-    const locale = useScopedLocale();
+    const locale = useResolvedLocale(undefined);
     return useMemo(() => {
         if (!locale)
             return null;
@@ -105,5 +265,5 @@ function useLocaleMatcher() {
     }, [locale]);
 }
 
-export { useLocaleMatcher, useNumberFormat };
+export { useLocaleMatcher, useNumberFormat, useScopedNumberFormat };
 //# sourceMappingURL=localeFormat.js.map

package/dist/esm/helpers/localeFormat.js.map

@@ -1 +1 @@
-{"version":3,"file":"localeFormat.js","sources":["../../../src/helpers/localeFormat.ts"],"sourcesContent":["// INTERNAL: deliberately not exported from src/index.ts. Number formatting\n// and text matching in a LocaleProvider's locale. Both return `null` outside\n// a provider that gives a locale, so each caller keeps the formatting and the\n// matching it has always had there.\n\nimport { useMemo } from 'react';\nimport { useLocaleScope } from './LocaleProvider';\n\n/** A combining mark: an accent, a vowel sign or a point written on a letter. */\nconst MARK = /\\p{M}/u;\n\n/** Formats a number for display, with `Intl.NumberFormat` options. */\nexport type NumberFormatter = (\n  value: number,\n  options?: Intl.NumberFormatOptions\n) => string;\n\n/** Whether `text` contains `query`, as the locale compares letters. */\nexport type TextMatcher = (text: string, query: string) => boolean;\n\n/**\n * The locale a component formats and matches in: inside a `LocaleProvider`,\n * the component's own locale when it has one (a picker's `locale`), else the\n * provider's; outside a provider, none.\n */\nfunction useScopedLocale(own: string | undefined): string | undefined {\n  const scope = useLocaleScope();\n  if (!scope) return undefined;\n  return own || scope.locale;\n}\n\n/**\n * A formatter for numbers shown on screen, in the locale of the\n * `LocaleProvider` around the component, or `null` outside one that gives a\n * locale. Formatters are kept per set of options, since building one is the\n * expensive part.\n *\n * @param own - The component's own locale, such as a picker's `locale`,\n * which wins inside a provider.\n */\nexport function useNumberFormat(own?: string): NumberFormatter | null {\n  const locale = useScopedLocale(own);\n  return useMemo(() => {\n    if (!locale) return null;\n    const formats = new Map<string, Intl.NumberFormat>();\n    return (value, options) => {\n      const key = options ? JSON.stringify(options) : '';\n      let format = formats.get(key);\n      if (!format) {\n        format = new Intl.NumberFormat(locale, options);\n        formats.set(key, format);\n      }\n      return format.format(value);\n    };\n  }, [locale]);\n}\n\n/**\n * A matcher for filtering a list by what was typed, in the locale of the\n * `LocaleProvider` around the component, or `null` outside one that gives a\n * locale. It compares with `Intl.Collator` at `usage: 'search'` and\n * `sensitivity: 'base'`, so it ignores case and accents where the language\n * treats the letters as the same: \"cafe\" finds \"Café\", while in Swedish \"a\"\n * doesn't find \"å\", a letter of its own there. Marks the language ignores\n * count for nothing on either side, so in Arabic محمد finds مُحَمَّد and the\n * other way round. An empty query, or one of nothing but such marks,\n * matches everything.\n */\nexport function useLocaleMatcher(): TextMatcher | null {\n  const locale = useScopedLocale(undefined);\n  return useMemo(() => {\n    if (!locale) return null;\n    const collator = new Intl.Collator(locale, {\n      usage: 'search',\n      sensitivity: 'base',\n    });\n    return (text, query) => {\n      const needle = query.normalize('NFC');\n      if (collator.compare(needle, '') === 0) return true;\n      // Compared by code point, so a slice never splits a surrogate pair.\n      const chars = Array.from(text.normalize('NFC'));\n      const marks = chars.map(char => MARK.test(char));\n      // A slice equal to the needle can be longer or shorter than it: the\n      // marks the collator ignores, Arabic harakat or Hebrew niqqud, take\n      // code points on one side and not the other, and the expansions the\n      // collator makes, \"ß\" against \"ss\" or \"æ\" against \"ae\", turn one letter\n      // into two. So each slice runs from a letter to just before the next\n      // letter, never cutting a letter from its marks, and the slices from\n      // one start grow until they hold twice the needle's letters, which\n      // those expansions can't get past. That keeps the work proportional to\n      // the text's length, however long a label is, rather than to its\n      // square.\n      const most =\n        2 * Array.from(needle).filter(char => !MARK.test(char)).length;\n      for (let start = 0; start < chars.length; start++) {\n        if (marks[start]) continue;\n        let letters = 0;\n        for (let end = start + 1; end <= chars.length; end++) {\n          if (!marks[end - 1]) letters++;\n          if (letters > most) break;\n          if (marks[end]) continue;\n          if (\n            collator.compare(chars.slice(start, end).join(''), needle) === 0\n          ) {\n            return true;\n          }\n        }\n      }\n      return false;\n    };\n  }, [locale]);\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"localeFormat.js","sources":["../../../src/helpers/localeFormat.ts"],"sourcesContent":["// Number formatting and text matching in a locale.\n//\n// `useNumberFormat` and its `NumberFormatFunction` type are public, exported\n// from src/index.ts. The rest is INTERNAL, deliberately not exported.\n//\n// Which a component calls depends on its job. A component whose job is to\n// write a number, such as `NumberFormatter`, uses `useNumberFormat`, which\n// writes in the runtime's locale outside a `LocaleProvider`, as the pickers\n// do. Any other component that shows a number in passing, such as a badge\n// count, a page number or a step's number, uses `useScopedNumberFormat`,\n// and filters a list through `useLocaleMatcher`. Those two return `null`\n// outside a provider, and inside one that gives no locale, as a provider\n// with only a `dir` doesn't, so the component keeps the formatting and the\n// matching it has always had there, as `LocaleProvider` promises.\n\nimport { useMemo } from 'react';\nimport { useLocaleScope, validLocale } from './LocaleProvider';\nimport { warnOnce } from './devWarnings';\n\n/** A combining mark: an accent, a vowel sign or a point written on a letter. */\nconst MARK = /\\p{M}/u;\n\n/** Formats a number for display, with `Intl.NumberFormat` options. */\nexport type NumberFormatFunction = (\n  value: number,\n  options?: Intl.NumberFormatOptions\n) => string;\n\n/** Whether `text` contains `query`, as the locale compares letters. */\nexport type TextMatcher = (text: string, query: string) => boolean;\n\n/**\n * The warning about a locale `Intl` refuses, given to `useNumberFormat`,\n * and so to `NumberFormatter`, the only callers that pass one.\n */\nconst warnOwnLocale = (tag: string) =>\n  warnOnce(\n    `number-format-invalid-locale:${tag}`,\n    `[bestax-bulma] NumberFormatter or useNumberFormat was given the locale ` +\n      `\"${tag}\", which is not a language tag Intl accepts, so it is ` +\n      \"ignored and numbers are written in the LocaleProvider's locale, \" +\n      'else the runtime\\'s. Use a BCP 47 tag such as \"en-US\", with a ' +\n      'hyphen rather than an underscore.'\n  );\n\n/**\n * The locale a component formats and matches in: the locale given, else the\n * `LocaleProvider`'s, else none. A tag `Intl` refuses counts as none, with a\n * development warning, as `LocaleProvider` treats one.\n */\nfunction useResolvedLocale(own: string | undefined): string | undefined {\n  const scope = useLocaleScope();\n  const valid = useMemo(() => validLocale(own, warnOwnLocale), [own]);\n  return valid || scope?.locale;\n}\n\n/**\n * The options `Intl.NumberFormat` reads, as ECMA-402 lists them. A key reads\n * each by name, so an inherited option counts as `Intl` counts it.\n */\nconst NUMBER_FORMAT_OPTIONS = [\n  'localeMatcher',\n  'numberingSystem',\n  'style',\n  'currency',\n  'currencyDisplay',\n  'currencySign',\n  'unit',\n  'unitDisplay',\n  'notation',\n  'minimumIntegerDigits',\n  'minimumFractionDigits',\n  'maximumFractionDigits',\n  'minimumSignificantDigits',\n  'maximumSignificantDigits',\n  'roundingIncrement',\n  'roundingMode',\n  'roundingPriority',\n  'trailingZeroDisplay',\n  'compactDisplay',\n  'useGrouping',\n  'signDisplay',\n];\nconst KNOWN_OPTIONS = new Set(NUMBER_FORMAT_OPTIONS);\n\n/** One option's value with its type, or `null` for one a key can't hold. */\nfunction writeOption(value: unknown): string | null {\n  switch (typeof value) {\n    case 'string':\n      return JSON.stringify(value);\n    case 'number':\n      // `NaN` and `Infinity` as themselves, which `JSON.stringify` makes\n      // `null`, and `-0` with its sign.\n      return Object.is(value, -0) ? '-0' : String(value);\n    case 'boolean':\n      return String(value);\n    case 'bigint':\n      return `${value}n`;\n    default:\n      return value === null ? 'null' : null;\n  }\n}\n\n/**\n * The options as `Intl` will read them, and a key that tells apart any two\n * sets it would read differently; `null` when an option `Intl` reads holds\n * an object, a function or a symbol, which `Intl` converts in ways a key\n * can't follow. It reads each option `Intl` reads by name, inherited ones\n * included, then every other enumerable key, own or inherited, so an option\n * `Intl` gains later still keeps two sets apart. Since `Intl`'s options are\n * all primitives, one of those other keys holding anything else is left\n * out. An option set to `undefined` is unset, as it is for `Intl`. The\n * formatter is built from the copy, so `Intl` sees what the key says, even\n * of a getter.\n */\nfunction readOptions(\n  options: object\n): { key: string; read: Record<string, unknown> } | null {\n  const others: string[] = [];\n  for (const name in options) {\n    if (!KNOWN_OPTIONS.has(name)) others.push(name);\n  }\n  const names = NUMBER_FORMAT_OPTIONS.concat(others.sort());\n  const read: Record<string, unknown> = {};\n  const parts: string[] = [];\n  for (const name of names) {\n    const value = (options as Record<string, unknown>)[name];\n    if (value === undefined) continue;\n    const written = writeOption(value);\n    if (written === null) {\n      // An option `Intl` reads converts an object; a key it doesn't read,\n      // such as a config's own `meta`, means nothing to it.\n      if (KNOWN_OPTIONS.has(name)) return null;\n      continue;\n    }\n    read[name] = value;\n    parts.push(`${JSON.stringify(name)}:${written}`);\n  }\n  return { key: parts.join(','), read };\n}\n\n/**\n * Every formatter's `Intl.NumberFormat`s, by locale and options, so a page of\n * numbers in one locale and format builds one. Building one is the expensive\n * part of formatting. Past `MOST_NUMBER_FORMATS`, the one used longest ago\n * goes, so a server that writes numbers in many locales doesn't keep them\n * all, and the ones in use stay. A `Map` keeps its keys in the order they\n * were set, so a formatter is set again each time it's used.\n */\nconst numberFormats = new Map<string, Intl.NumberFormat>();\nconst MOST_NUMBER_FORMATS = 200;\n\n/** The `Intl.NumberFormat` for `locale` and `options`, built once. */\nfunction numberFormatFor(\n  locale: string | undefined,\n  options: Intl.NumberFormatOptions | undefined\n): Intl.NumberFormat {\n  let read: Intl.NumberFormatOptions | undefined;\n  let key = '';\n  if (options !== undefined) {\n    const copy =\n      typeof options === 'object' && options !== null\n        ? readOptions(options)\n        : null;\n    // Options a key can't hold get a formatter of their own, which also\n    // throws what `Intl` throws for them.\n    if (!copy) return new Intl.NumberFormat(locale, options);\n    read = copy.read;\n    key = copy.key;\n  }\n  // A locale tag has no spaces, so the key can't be read two ways.\n  const cacheKey = `${locale ?? ''} ${key}`;\n  let format = numberFormats.get(cacheKey);\n  if (format) {\n    numberFormats.delete(cacheKey);\n  } else {\n    // Built before anything is stored, so options `Intl` refuses throw its\n    // error and leave nothing behind.\n    format = new Intl.NumberFormat(locale, read);\n    if (numberFormats.size >= MOST_NUMBER_FORMATS) {\n      numberFormats.delete(numberFormats.keys().next().value as string);\n    }\n  }\n  numberFormats.set(cacheKey, format);\n  return format;\n}\n\n/** A function that writes numbers in `locale`, the same one for each locale. */\nfunction useFormatIn(locale: string | undefined): NumberFormatFunction {\n  return useMemo<NumberFormatFunction>(\n    () => (value, options) => numberFormatFor(locale, options).format(value),\n    [locale]\n  );\n}\n\n/**\n * A function that writes numbers for display in a locale: `locale` when given, else the `LocaleProvider`'s around the component, else the runtime's.\n *\n * Formatters are kept per locale and set of options, since building one is\n * the expensive part, and shared, so many numbers written the same way build\n * one. The function is the same from one render to the next for the same\n * locale, so it's safe in a dependency array. Use it for text outside JSX,\n * such as an `aria-label`, a `placeholder` or a chart's axis; in JSX,\n * `NumberFormatter` also marks the number up. On a server render the\n * runtime's locale is the server's, so give it a locale, here or through a\n * `LocaleProvider`, where the server's and the browser's can differ. A tag\n * `Intl` refuses is ignored, with a warning in development, as\n * `LocaleProvider` ignores one. Options `Intl` refuses throw its error when\n * the function is called.\n *\n * @function\n * @param locale - A BCP 47 locale tag, which wins over the provider's.\n * @returns {NumberFormatFunction} Writes `value` with `Intl.NumberFormat` options.\n *\n * @example\n * const format = useNumberFormat();\n * const placeholder = format(1500, { style: 'currency', currency: 'EUR' });\n */\nexport function useNumberFormat(locale?: string): NumberFormatFunction {\n  return useFormatIn(useResolvedLocale(locale));\n}\n\n/**\n * INTERNAL, deliberately not exported from `src/index.ts`. Number formatting\n * for a component that shows a number in passing, as `useNumberFormat`\n * writes it in the `LocaleProvider`'s locale, or `null` outside a provider\n * and inside one that gives no locale, as a provider with only a `dir`\n * doesn't, where the component keeps the formatting it has always had.\n */\nexport function useScopedNumberFormat(): NumberFormatFunction | null {\n  const scoped = useResolvedLocale(undefined);\n  const format = useFormatIn(scoped);\n  return scoped ? format : null;\n}\n\n/**\n * A matcher for filtering a list by what was typed, in the locale of the\n * `LocaleProvider` around the component, or `null` outside one that gives a\n * locale. It compares with `Intl.Collator` at `usage: 'search'` and\n * `sensitivity: 'base'`, so it ignores case and accents where the language\n * treats the letters as the same: \"cafe\" finds \"Café\", while in Swedish \"a\"\n * doesn't find \"å\", a letter of its own there. Marks the language ignores\n * count for nothing on either side, so in Arabic محمد finds مُحَمَّد and the\n * other way round. An empty query, or one of nothing but such marks,\n * matches everything.\n */\nexport function useLocaleMatcher(): TextMatcher | null {\n  const locale = useResolvedLocale(undefined);\n  return useMemo(() => {\n    if (!locale) return null;\n    const collator = new Intl.Collator(locale, {\n      usage: 'search',\n      sensitivity: 'base',\n    });\n    return (text, query) => {\n      const needle = query.normalize('NFC');\n      if (collator.compare(needle, '') === 0) return true;\n      // Compared by code point, so a slice never splits a surrogate pair.\n      const chars = Array.from(text.normalize('NFC'));\n      const marks = chars.map(char => MARK.test(char));\n      // A slice equal to the needle can be longer or shorter than it: the\n      // marks the collator ignores, Arabic harakat or Hebrew niqqud, take\n      // code points on one side and not the other, and the expansions the\n      // collator makes, \"ß\" against \"ss\" or \"æ\" against \"ae\", turn one letter\n      // into two. So each slice runs from a letter to just before the next\n      // letter, never cutting a letter from its marks, and the slices from\n      // one start grow until they hold twice the needle's letters, which\n      // those expansions can't get past. That keeps the work proportional to\n      // the text's length, however long a label is, rather than to its\n      // square.\n      const most =\n        2 * Array.from(needle).filter(char => !MARK.test(char)).length;\n      for (let start = 0; start < chars.length; start++) {\n        if (marks[start]) continue;\n        let letters = 0;\n        for (let end = start + 1; end <= chars.length; end++) {\n          if (!marks[end - 1]) letters++;\n          if (letters > most) break;\n          if (marks[end]) continue;\n          if (\n            collator.compare(chars.slice(start, end).join(''), needle) === 0\n          ) {\n            return true;\n          }\n        }\n      }\n      return false;\n    };\n  }, [locale]);\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/helpers/useTreeView.js

@@ -6,15 +6,23 @@ import { getActiveElementInTree } from './shadowDom.js';
 import { useTypeahead, typeaheadMatch, typeaheadText } from './typeahead.js';
 
 // INTERNAL: deliberately not exported from src/index.ts.
+/** The keys and clicks of both checkbox modes, which differ only in what a check reaches. */
+const CHECKBOX_ACTIONS = {
+    enter: ['open'],
+    space: ['check'],
+    click: ['check'],
+};
 /**
  * What Enter, Space and a click on the row do in each mode, from the tables
- * in #1096. `open` opens or closes a parent and does nothing on a leaf. A
- * click on the chevron only ever opens or closes.
+ * in #1096, with `checkbox-independent` from #1430. `open` opens or closes a
+ * parent and does nothing on a leaf. A click on the chevron only ever opens
+ * or closes.
  */
 const MODES = {
     none: { enter: ['open'], space: ['open'], click: ['open'] },
     single: { enter: ['select'], space: ['select'], click: ['select', 'open'] },
-    checkbox: { enter: ['open'], space: ['check'], click: ['check'] },
+    checkbox: CHECKBOX_ACTIONS,
+    'checkbox-independent': CHECKBOX_ACTIONS,
 };
 /** Left and Right, swapped for a right-to-left page. */
 const MIRRORED = {
@@ -155,6 +163,13 @@ function useControlled(controlled, initial) {
     };
     return [isControlled ? controlled : own, set];
 }
+/**
+ * The list with `value` added at the end, or, when it's `present`, with
+ * every copy of it taken out. Everything else stays as it was, in its order.
+ */
+function addedOrRemoved(list, value, present) {
+    return present ? list.filter(v => v !== value) : [...list, value];
+}
 /**
  * The open state, the selection, the keys, the tab stop, the positions and
  * the registry of a TreeView (#1096). Focus moves for real, with a roving
@@ -163,10 +178,12 @@ function useControlled(controlled, initial) {
  * browser (#1171), read off the page once the tree has mounted.
  *
  * Every item registers its value, its parent and whether it's disabled from
- * a layout effect. In a checkbox tree a closed item's children still render
- * and register while drawing nothing, so the registry knows every item and a
- * check reaches all of them. The keys read the items on the page, in
- * document order, each time they need them.
+ * a layout effect. In a `checkbox` tree a closed item's children still
+ * render and register while drawing nothing, so the registry knows every item
+ * and a check reaches all of them. A `checkbox-independent` tree reads each
+ * box off the checked list alone, so a check adds or takes out its own value
+ * and nothing else. The keys read the items on the page, in document order,
+ * each time they need them.
  *
  * @function useTreeView
  * @param options - The TreeView's props.
@@ -182,9 +199,15 @@ function useTreeView(options) {
     const [expanded, setExpanded] = useControlled(options.expanded, options.defaultExpanded);
     const [selection, setSelection] = useControlled(options.selected, options.defaultSelected);
     const [checkedList, setChecked] = useControlled(options.checked, options.defaultChecked);
+    // In a `checkbox` tree a check reaches the items under it, by the rules. In
+    // a `checkbox-independent` one each box is its own item's, read off the list.
+    const cascade = mode === 'checkbox';
+    const independent = mode === 'checkbox-independent';
+    // A box on every item, in either checkbox tree.
+    const boxed = cascade || independent;
     // Each is read in its own mode only.
     const selected = mode === 'single' ? selection : null;
-    const listed = new Set(mode === 'checkbox' ? checkedList : []);
+    const listed = new Set(boxed ? checkedList : []);
     const treeRef = useRef(null);
     const registryRef = useRef({
         records: new Map(),
@@ -205,21 +228,28 @@ function useTreeView(options) {
     // Each item's place among the items beside it, by its key.
     const [positions, setPositions] = useState(NO_POSITIONS);
     const { records } = registryRef.current;
-    const checks = mode === 'checkbox'
+    const checks = cascade
         ? // eslint-disable-next-line react-hooks/refs -- read in render on purpose: items write the registry from their layout effects and then ask for this render with `refresh`
             readChecks(records, listed).states
         : undefined;
     const tabStop = focused ?? (resting === undefined ? selected : resting);
+    // An item's box, decided here alone, so the box drawn, the tab stop and a
+    // toggle agree: off the list in a `checkbox-independent` tree, and by the
+    // rules in a `checkbox` one, where it's `undefined` until the item
+    // registers. `undefined` in a tree with no boxes.
+    const checkOf = (value) => independent ? listed.has(value) : checks?.get(value);
     const isOpen = (value) => expanded.includes(value);
     const stateOf = (value, path, disabled) => {
         if (mode === 'single') {
             return disabled ? {} : { selected: value === selected };
         }
-        if (checks) {
-            // Until the items register, a value stands for its branch, and a
-            // parent can't know it's mixed.
-            const fromList = listed.has(value) || (!disabled && path.some(v => listed.has(v)));
-            return { checked: checks.get(value) ?? fromList };
+        if (boxed) {
+            // Until the items register in a `checkbox` tree, a value stands for
+            // its branch, and a parent can't know it's mixed.
+            return {
+                checked: checkOf(value) ??
+                    (listed.has(value) || (!disabled && path.some(v => listed.has(v)))),
+            };
         }
         return {};
     };
@@ -229,9 +259,8 @@ function useTreeView(options) {
     };
     const run = {
         open: ({ value, isParent, open }) => {
-            if (isParent) {
-                changeOpen(open ? expanded.filter(v => v !== value) : [...expanded, value]);
-            }
+            if (isParent)
+                changeOpen(addedOrRemoved(expanded, value, open));
         },
         select: ({ value }) => {
             if (value === selected)
@@ -240,7 +269,11 @@ function useTreeView(options) {
             options.onSelectedChange?.(value);
         },
         check: ({ value }) => {
-            const next = toggledList(records, checkedList, value);
+            // A `checkbox-independent` box is its own item's alone, so its value
+            // comes or goes and the rest of the list stays as it was.
+            const next = independent
+                ? addedOrRemoved(checkedList, value, checkOf(value) === true)
+                : toggledList(records, checkedList, value);
             setChecked(next);
             options.onCheckedChange?.(next);
         },
@@ -289,7 +322,7 @@ function useTreeView(options) {
         }
         if (focused !== null && !isShown(focused))
             setFocused(null);
-        const preferred = onPage.find(value => value === selected || checks?.get(value) === true);
+        const preferred = onPage.find(value => value === selected || checkOf(value) === true);
         const next = preferred ?? (isShown(resting) ? resting : heir(restingPathRef.current));
         if (next !== resting) {
             setResting(next);
@@ -428,7 +461,8 @@ function useTreeView(options) {
     };
     return {
         treeRef,
-        rendersClosed: mode === 'checkbox',
+        rendersClosed: cascade,
+        multiselectable: boxed,
         tabStop,
         isOpen,
         stateOf,