@astryxdesign/core 0.5.0 → 0.5.1-canary.f64186a

package/dist/NumberInput/numberParser.js

@@ -0,0 +1,350 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file numberParser.ts
+ * @input Text a person typed or pasted, plus the resolved BCP 47 locale
+ * @output Exports parseLocaleNumber and formatEditableNumber
+ * @position Internal to NumberInput; not part of the public surface
+ *
+ * People paste numbers out of spreadsheets, and a spreadsheet writes them
+ * grouped, signed, and decorated. This reads those back. Everything locale
+ * specific — the grouping and decimal separators, the group sizes, the digit
+ * script — is derived from Intl and Unicode rather than a table, and text that
+ * no reading fits returns null so the field stays visibly invalid instead of
+ * committing a guess. Where both readings are well formed the locale's wins,
+ * the way utils/dateParser.ts settles an ambiguous date by locale preference.
+ * Grouping is well formed only when every group fits the locale's own sizes:
+ * the last exactly the primary size, each inner one exactly the secondary, the
+ * first no longer than that. So de-DE `1.234` is 1234, while `1.2345` (last
+ * group too long) and `1234.567` (too much ahead of it) keep the full stop as
+ * a decimal point. Groups of three fit every locale, so a separator repeated
+ * with three-digit groups is grouping in all of them and `1,234,567` reads the
+ * same everywhere; for a space or apostrophe, which no locale writes as a
+ * decimal point, one occurrence is enough, so en-US `1 234` is 1234.
+ *
+ * That paragraph is executable: numberParser.docblock.test.ts implements it as
+ * code, quote by quote, and fails when the parser and the words disagree.
+ *
+ * Which characters may separate digits at all is the one thing that is NOT
+ * read off the input: SEPARATOR_CHARS below is a bounded alphabet, the same
+ * shape utils/dateParser.ts uses for its `[-/.]` date separators.
+ *
+ * SYNC: When modified, update these files to stay in sync:
+ * - /packages/core/src/NumberInput/NumberInput.tsx
+ * - /packages/core/src/NumberInput/numberParser.test.ts
+ * - /packages/core/src/NumberInput/numberParser.docblock.test.ts
+ */
+
+const symbolsByLocale = new Map();
+function getLocaleNumberSymbols(locale) {
+  const key = locale ?? '';
+  let symbols = symbolsByLocale.get(key);
+  if (symbols === undefined) {
+    let format;
+    try {
+      format = new Intl.NumberFormat(locale);
+    } catch {
+      format = new Intl.NumberFormat('en');
+    }
+    const parts = format.formatToParts(12345.6);
+    // A probe long enough to expose a second grouping size where one exists.
+    const groupSizes = format.formatToParts(11111111111).filter(part => part.type === 'integer').map(part => part.value.length);
+    const hasGrouping = groupSizes.length > 1;
+    symbols = {
+      // Normalized so the space-family separators compare equal to the plain
+      // space that input text is normalized to.
+      group: (parts.find(p => p.type === 'group')?.value ?? ',').normalize('NFKC'),
+      decimal: parts.find(p => p.type === 'decimal')?.value ?? '.',
+      primaryGroupSize: hasGrouping ? groupSizes[groupSizes.length - 1] : 3,
+      secondaryGroupSize: hasGrouping ? groupSizes[groupSizes.length - 2] : 3
+    };
+    symbolsByLocale.set(key, symbols);
+  }
+  return symbols;
+}
+
+// Built at runtime rather than written as literals: Babel's
+// transform-unicode-property-regex rewrites a `\p{...}` regex LITERAL into an
+// enumerated character class, and the copy bundled with Next rejects the
+// General_Category short names, failing the sandbox build. Property escapes are
+// ES2018 and need no transform in any browser this package supports.
+const DECIMAL_DIGIT = new RegExp('\\p{Nd}', 'u');
+const CURRENCY = new RegExp('\\p{Sc}', 'u');
+// Zero-width joiners, bidi isolates and the BOM Excel prepends.
+const INVISIBLES = /[\u200B-\u200D\u200E\u200F\u061C\u2066-\u2069\uFEFF]/g;
+// Hyphen last: inside the character class this builds, a leading one would
+// open a range.
+const MINUS_SIGNS = '\u2212\u2012\u2013-';
+
+/**
+ * Every character a locale writes between digits. Sweeping every language ICU
+ * resolves, in every region, yields seven: comma, full stop, apostrophe,
+ * space (the whole space family folds to it under NFKC), the Arabic decimal
+ * and thousands separators, and U+060C — which only nqo writes, and which
+ * this alphabet leaves out. U+2019 is here in its place: no locale writes it,
+ * but the corpus pins it as the Swiss spelling.
+ *
+ * The alphabet is bounded on purpose. Read the candidates off the input
+ * instead and any repeated character is grouping, so a hyphenated ID commits
+ * as a number. It bounds characters and not shapes: a full stop is a real
+ * separator, so `192.168.100.200` is four well-formed groups.
+ */
+const SEPARATOR_CHARS = ",.' \u2019\u066B\u066C";
+const NUMBER_BODY = new RegExp(`^[0-9${SEPARATOR_CHARS}]+$`);
+/** No grouping and at most one full stop: the format `Number()` reads. */
+const MACHINE_NUMBER = /^(?:\d+\.?\d*|\.\d+)$/;
+
+/**
+ * Value of any Unicode decimal digit. Each digit script lays its ten digits
+ * out consecutively, so walking back to the script's zero derives the value
+ * for Arabic-Indic, Devanagari, full-width and the rest without shipping a
+ * table of them. Returns null in the one shape the walk cannot resolve: two
+ * digit blocks adjacent in code space (the mathematical alphanumerics).
+ */
+function digitValue(char) {
+  const codePoint = char.codePointAt(0);
+  if (codePoint == null) {
+    return null;
+  }
+  for (let zero = codePoint; codePoint - zero < 10; zero--) {
+    if (!DECIMAL_DIGIT.test(String.fromCodePoint(zero - 1))) {
+      return codePoint - zero;
+    }
+  }
+  return null;
+}
+function toAsciiDigits(text) {
+  let out = '';
+  for (const char of text) {
+    if (!DECIMAL_DIGIT.test(char)) {
+      out += char;
+      continue;
+    }
+    const value = digitValue(char);
+    if (value == null) {
+      return null;
+    }
+    out += String(value);
+  }
+  return out;
+}
+
+/**
+ * Reduce a digits-and-separators string to a plain machine number under one
+ * candidate reading, or null when it is not well formed under that reading.
+ * `minGroups` is how many grouping separators the reading has to see before it
+ * believes the separator is grouping at all.
+ */
+function readUnder(core, group, decimal, primaryGroupSize, secondaryGroupSize, minGroups) {
+  let intText = core;
+  let fracText = null;
+  if (decimal !== '' && core.includes(decimal)) {
+    const at = core.indexOf(decimal);
+    if (core.includes(decimal, at + decimal.length)) {
+      return null;
+    }
+    intText = core.slice(0, at);
+    fracText = core.slice(at + decimal.length);
+    if (!/^\d*$/.test(fracText)) {
+      return null;
+    }
+  }
+  let digits;
+  if (group !== '' && intText.includes(group)) {
+    const chunks = intText.split(group);
+    if (chunks.length - 1 < minGroups || !chunks.every(chunk => /^\d+$/.test(chunk))) {
+      return null;
+    }
+    const first = chunks[0];
+    const last = chunks[chunks.length - 1];
+    if (last.length !== primaryGroupSize || first.length > secondaryGroupSize) {
+      return null;
+    }
+    for (let i = 1; i < chunks.length - 1; i++) {
+      if (chunks[i].length !== secondaryGroupSize) {
+        return null;
+      }
+    }
+    digits = chunks.join('');
+  } else {
+    if (!/^\d*$/.test(intText)) {
+      return null;
+    }
+    digits = intText;
+  }
+  if (digits === '' && (fracText == null || fracText === '')) {
+    return null;
+  }
+  return fracText == null ? digits : `${digits}.${fracText}`;
+}
+
+/**
+ * A separator that no locale uses as a decimal point, so one well-formed group
+ * of it is already unambiguous. Everything else needs two before grouping
+ * beats the decimal-point reading.
+ */
+function isGroupOnlySeparator(separator) {
+  return /^[\s'\u2019]$/.test(separator);
+}
+function toPlainNumber(core, locale) {
+  if (!NUMBER_BODY.test(core)) {
+    return null;
+  }
+  const {
+    group,
+    decimal,
+    primaryGroupSize,
+    secondaryGroupSize
+  } = getLocaleNumberSymbols(locale);
+  const inLocale = readUnder(core, group, decimal, primaryGroupSize, secondaryGroupSize, 1);
+  if (inLocale != null) {
+    return inLocale;
+  }
+
+  // The machine format, which is what the field read before this parser
+  // existed. It comes after the locale rather than before it — dateParser.ts
+  // can put ISO first because `2026-01-25` has no second reading, while
+  // `1.234` in de-DE has one and grouping is the reading a German means. What
+  // reaches here is a full stop the locale could NOT read, so it is not
+  // well-formed grouping either, and exactly one reading is left.
+  if (MACHINE_NUMBER.test(core)) {
+    return core;
+  }
+
+  // A repeated separator with three digits after each occurrence can only be
+  // grouping — a decimal point appears once — so that shape reads the same in
+  // every locale, which is what lets a `1,234,234,234` pasted out of a
+  // spreadsheet land in a de-DE app.
+  const separators = [...new Set(core.replace(/\d/g, ''))];
+  if (separators.length === 0 || separators.length > 2) {
+    return null;
+  }
+  for (const candidate of separators) {
+    const occurrences = core.split(candidate).length - 1;
+    const minGroups = isGroupOnlySeparator(candidate) ? 1 : 2;
+    if (occurrences < minGroups) {
+      continue;
+    }
+    const other = separators.find(s => s !== candidate) ?? '';
+    if (other !== '' && core.split(other).length - 1 !== 1) {
+      continue;
+    }
+    const read = readUnder(core, candidate, other, 3, 3, minGroups);
+    if (read != null) {
+      return read;
+    }
+  }
+  return null;
+}
+
+/**
+ * Read a number out of text the way a person in `locale` writes one: their
+ * grouping and decimal separators, their group sizes, their digit script, an
+ * optional currency symbol, and the shapes a spreadsheet pastes.
+ *
+ * Returns null rather than a guess. Grouping is validated, so en-US `1,23` —
+ * a comma that is neither a decimal point nor a well-formed group — is not
+ * silently read as 123, and neither is a number written for another locale.
+ * Only the characters some locale writes between digits count as separators,
+ * so `123-456-789` is not a number at all.
+ *
+ * @example
+ * ```
+ * parseLocaleNumber('1,234,234,234', 'en-US')  // 1234234234
+ * parseLocaleNumber('1,234,234,234', 'de-DE')  // 1234234234
+ * parseLocaleNumber('1,5', 'de-DE')            // 1.5
+ * parseLocaleNumber('1.5', 'de-DE')            // 1.5
+ * parseLocaleNumber('1,5', 'en-US')            // null
+ * parseLocaleNumber('123-456-789', 'en-US')    // null
+ * ```
+ */
+export function parseLocaleNumber(text, locale) {
+  const normalized = toAsciiDigits(text.normalize('NFKC').replace(INVISIBLES, ''));
+  if (normalized == null) {
+    return null;
+  }
+  let rest = normalized.trim();
+  let sign = 1;
+
+  // Accounting negatives: spreadsheets write -1234 as (1,234).
+  const accounting = /^\((.*)\)$/s.exec(rest);
+  if (accounting) {
+    sign = -1;
+    rest = accounting[1].trim();
+  }
+  rest = stripCurrency(rest);
+
+  // The sign lands on either end — RTL locales trail it, and Intl writes
+  // U+2212 where a keyboard writes a hyphen.
+  let hasWrittenSign = false;
+  const leadingSign = new RegExp(`^([+${MINUS_SIGNS}])\\s*`).exec(rest);
+  if (leadingSign) {
+    hasWrittenSign = true;
+    sign = leadingSign[1] === '+' ? sign : -sign;
+    rest = rest.slice(leadingSign[0].length);
+  } else {
+    const trailingSign = new RegExp(`\\s*([+${MINUS_SIGNS}])$`).exec(rest);
+    if (trailingSign) {
+      hasWrittenSign = true;
+      sign = trailingSign[1] === '+' ? sign : -sign;
+      rest = rest.slice(0, rest.length - trailingSign[0].length);
+    }
+  }
+
+  // The parens already say negative, so a sign inside them contradicts or
+  // doubles it: `(-1,234)` is -1234 to one reader and +1234 to another.
+  if (accounting && hasWrittenSign) {
+    return null;
+  }
+  rest = stripCurrency(rest);
+  let exponent = 0;
+  const exponentMatch = /\s*[eE]\s*([+-]?\d+)$/.exec(rest);
+  if (exponentMatch) {
+    exponent = Number(exponentMatch[1]);
+    rest = rest.slice(0, rest.length - exponentMatch[0].length);
+  }
+  const core = rest.trim();
+  if (core === '') {
+    return null;
+  }
+  const plain = toPlainNumber(core, locale);
+  if (plain == null) {
+    return null;
+  }
+  const magnitude = Number(plain);
+  if (!Number.isFinite(magnitude)) {
+    return null;
+  }
+  const scaled = exponent === 0 ? magnitude :
+  // 1.23 * 1e3 is 1229.9999999999998 in binary floating point, and a
+  // field that commits that instead of 1230 has not round-tripped.
+  Number((magnitude * 10 ** exponent).toPrecision(15));
+  if (!Number.isFinite(scaled)) {
+    return null;
+  }
+  const result = sign * scaled;
+  return Object.is(result, -0) ? 0 : result;
+}
+function stripCurrency(text) {
+  let out = text.trim();
+  if (CURRENCY.test(out.charAt(0))) {
+    out = out.slice(1).trim();
+  }
+  if (CURRENCY.test(out.charAt(out.length - 1))) {
+    out = out.slice(0, -1).trim();
+  }
+  return out;
+}
+
+/**
+ * The text shown while the field is focused: the plain machine number in the
+ * locale's decimal separator, so what a person sees mid-edit is what the
+ * parser reads back on blur.
+ */
+export function formatEditableNumber(value, locale) {
+  const {
+    decimal
+  } = getLocaleNumberSymbols(locale);
+  const raw = String(value);
+  return decimal === '.' ? raw : raw.replace('.', decimal);
+}

package/dist/Outline/Outline.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Outline.d.ts","sourceRoot":"","sources":["../../src/Outline/Outline.tsx"],"names":[],"mappings":"AAwCA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAE5C,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,SAAS,CAAC;AAMzC,YAAY,EAAC,WAAW,EAAC,MAAM,SAAS,CAAC;AAEzC,MAAM,WAAW,YAAa,SAAQ,SAAS,CAAC,WAAW,CAAC;IAC1D,6CAA6C;IAC7C,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAE7B,+CAA+C;IAC/C,KAAK,EAAE,WAAW,EAAE,CAAC;IAErB,oFAAoF;IACpF,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,oEAAoE;IACpE,gBAAgB,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAExC,0EAA0E;IAC1E,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;;;OAKG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAEhC;;;;OAIG;IACH,eAAe,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAEvC;;;;;;;OAOG;IACH,aAAa,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAErC;;;;;;;;;;;;;OAaG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAEzD;;;;;;OAMG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAE3B,sCAAsC;IACtC,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AA+ID;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AACH,wBAAgB,OAAO,CAAC,EACtB,KAAK,EACL,QAAQ,EACR,gBAAgB,EAChB,KAAK,EAAE,cAAc,EACrB,OAAmB,EACnB,eAAe,EACf,aAAa,EACb,MAAU,EACV,kBAAkB,EAClB,gBAAuB,EACvB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,aAAa,EAAE,MAAM,EACrB,GAAG,KAAK,EACT,EAAE,YAAY,+BAiLd;yBAlMe,OAAO"}
+{"version":3,"file":"Outline.d.ts","sourceRoot":"","sources":["../../src/Outline/Outline.tsx"],"names":[],"mappings":"AAwCA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAE5C,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,SAAS,CAAC;AAOzC,YAAY,EAAC,WAAW,EAAC,MAAM,SAAS,CAAC;AAEzC,MAAM,WAAW,YAAa,SAAQ,SAAS,CAAC,WAAW,CAAC;IAC1D,6CAA6C;IAC7C,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAE7B,+CAA+C;IAC/C,KAAK,EAAE,WAAW,EAAE,CAAC;IAErB,oFAAoF;IACpF,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,oEAAoE;IACpE,gBAAgB,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAExC,0EAA0E;IAC1E,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;;;OAKG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAEhC;;;;OAIG;IACH,eAAe,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAEvC;;;;;;;OAOG;IACH,aAAa,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAErC;;;;;;;;;;;;;OAaG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAEzD;;;;;;OAMG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAE3B,sCAAsC;IACtC,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AA2ID;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AACH,wBAAgB,OAAO,CAAC,EACtB,KAAK,EACL,QAAQ,EACR,gBAAgB,EAChB,KAAK,EAAE,cAAc,EACrB,OAAmB,EACnB,eAAe,EACf,aAAa,EACb,MAAU,EACV,kBAAkB,EAClB,gBAAuB,EACvB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,aAAa,EAAE,MAAM,EACrB,GAAG,KAAK,EACT,EAAE,YAAY,+BAkLd;yBAnMe,OAAO"}

package/dist/Outline/Outline.js

@@ -33,6 +33,7 @@ import { mergeProps } from "../utils/index.js";
 import { useScrollSpy } from "./useScrollSpy.js";
 import { themeProps } from "../utils/themeProps.js";
 import { focusOutlineProps } from "../utils/focusOutline.stylex.js";
+import { interactionOverlayStyles } from "../utils/interactionOverlay.stylex.js";
 import { useTranslator } from "../i18n/index.js";
 import { useMergedRefs } from "../hooks/useMergedRefs.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -71,9 +72,7 @@ const styles = {
     kzqmXN: "xh8yej3",
     kGuDYH: "xjm74w1",
     kLWn49: "xw6l6zx",
-    kRL5z6: "xoevpu5",
     kZC7kL: "xo5jvnm",
-    kSReZ0: "xyxi2l3",
     $$css: true
   },
   activeLink: {
@@ -332,7 +331,7 @@ export function Outline({
             ...mergeProps(themeProps('outline-item', {
               active: isActive ? 'active' : null,
               level: item.level
-            }), focusOutlineProps.focusVisible(styles.link, densityStyles[density], getIndentStyle(item.level), isActive && styles.activeLink, isActive && styles.activeAnchor)),
+            }), focusOutlineProps.focusVisible(styles.link, interactionOverlayStyles.backgroundColor, densityStyles[density], getIndentStyle(item.level), isActive && styles.activeLink, isActive && styles.activeAnchor)),
             children: /*#__PURE__*/_jsx("span", {
               ...{
                 className: "xb3r6kr xlyipyv xuxw1ft"

package/dist/OverflowList/OverflowList.d.ts

@@ -95,6 +95,46 @@ export interface OverflowListProps extends BaseProps<HTMLDivElement> {
      * ```
      */
     overflowRenderer?: (overflowItems: OverflowItem[]) => ReactNode;
+    /**
+     * Called with the items that are currently collapsed, whenever that set
+     * changes.
+     *
+     * Use it when the collapsed items belong in a menu the surrounding UI
+     * already renders (a row that already has its own "…" button), so the list
+     * does not grow a second anchor beside it. `overflowRenderer` cannot serve
+     * that case: it is only rendered while items overflow, and its measurement
+     * copy always receives every item.
+     *
+     * The contract:
+     * - It fires once measurement has collapsed something, and again with an
+     *   empty array once the row widens back out and everything fits.
+     * - It is **silent while nothing overflows** — including on mount, so a list
+     *   that fits from the start never calls it. There is no report of the
+     *   pre-measurement state, which would always be an empty set whether or not
+     *   the row actually overflows. Hold the collapsed set in state initialised
+     *   to `[]` and it is correct at every moment; if you remount the list while
+     *   keeping that state, reset it yourself.
+     * - Reports are keyed on the collapsed items' original indices and React
+     *   keys. Membership and order changes report even when the count stays the
+     *   same; unrelated re-renders and callback identity changes do not.
+     *
+     * Give dynamic children stable React keys. Items include their current
+     * original `index`; use it to look up your own data rather than storing
+     * `child`.
+     *
+     * @example
+     * ```
+     * const [hidden, setHidden] = useState<OverflowItem[]>([]);
+     * <>
+     *   <OverflowList onOverflowChange={setHidden}>{items}</OverflowList>
+     *   <DropdownMenu
+     *     button={{label: 'More', variant: 'ghost'}}
+     *     items={[...alwaysThere, ...hidden.map(({index}) => actions[index])]}
+     *   />
+     * </>
+     * ```
+     */
+    onOverflowChange?: (overflowItems: OverflowItem[]) => void;
 }
 /**
  * A horizontal list that hides items that don't fit and shows an overflow indicator.
@@ -117,7 +157,7 @@ export interface OverflowListProps extends BaseProps<HTMLDivElement> {
  * </OverflowList>
  * ```
  */
-export declare function OverflowList({ children, gap, minVisibleItems, maxVisibleItems, maxRows, collapseFrom, behavior, overflowRenderer, xstyle, className, style, ref, ...props }: OverflowListProps): import("react").JSX.Element;
+export declare function OverflowList({ children, gap, minVisibleItems, maxVisibleItems, maxRows, collapseFrom, behavior, overflowRenderer, onOverflowChange, xstyle, className, style, ref, ...props }: OverflowListProps): import("react").JSX.Element;
 export declare namespace OverflowList {
     var displayName: string;
 }

package/dist/OverflowList/OverflowList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"OverflowList.d.ts","sourceRoot":"","sources":["../../src/OverflowList/OverflowList.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EAAC,KAAK,SAAS,EAAE,KAAK,YAAY,EAAW,MAAM,OAAO,CAAC;AAClE,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AA+EhD,MAAM,WAAW,YAAY;IAC3B,sCAAsC;IACtC,KAAK,EAAE,YAAY,CAAC;IACpB,2DAA2D;IAC3D,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,iBAAkB,SAAQ,SAAS,CAAC,cAAc,CAAC;IAClE,qDAAqD;IACrD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAEhC;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;;;OAIG;IACH,GAAG,CAAC,EAAE,WAAW,CAAC;IAElB;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB;;;;;;OAMG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IAE/B;;;;;;;;;OASG;IACH,QAAQ,CAAC,EAAE,eAAe,GAAG,aAAa,CAAC;IAE3C;;;;;;;;;;;;;;;;;;;;;OAqBG;IACH,gBAAgB,CAAC,EAAE,CAAC,aAAa,EAAE,YAAY,EAAE,KAAK,SAAS,CAAC;CACjE;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,GAAO,EACP,eAAmB,EACnB,eAAe,EACf,OAAO,EACP,YAAoB,EACpB,QAAwB,EACxB,gBAAgB,EAChB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,iBAAiB,+BAoFnB;yBAlGe,YAAY"}
+{"version":3,"file":"OverflowList.d.ts","sourceRoot":"","sources":["../../src/OverflowList/OverflowList.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EACL,KAAK,SAAS,EACd,KAAK,YAAY,EAKlB,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAgFhD,MAAM,WAAW,YAAY;IAC3B,sCAAsC;IACtC,KAAK,EAAE,YAAY,CAAC;IACpB,2DAA2D;IAC3D,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,iBAAkB,SAAQ,SAAS,CAAC,cAAc,CAAC;IAClE,qDAAqD;IACrD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAEhC;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;;;OAIG;IACH,GAAG,CAAC,EAAE,WAAW,CAAC;IAElB;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB;;;;;;OAMG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IAE/B;;;;;;;;;OASG;IACH,QAAQ,CAAC,EAAE,eAAe,GAAG,aAAa,CAAC;IAE3C;;;;;;;;;;;;;;;;;;;;;OAqBG;IACH,gBAAgB,CAAC,EAAE,CAAC,aAAa,EAAE,YAAY,EAAE,KAAK,SAAS,CAAC;IAEhE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAsCG;IACH,gBAAgB,CAAC,EAAE,CAAC,aAAa,EAAE,YAAY,EAAE,KAAK,IAAI,CAAC;CAC5D;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,GAAO,EACP,eAAmB,EACnB,eAAe,EACf,OAAO,EACP,YAAoB,EACpB,QAAwB,EACxB,gBAAgB,EAChB,gBAAgB,EAChB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,iBAAiB,+BAoInB;yBAnJe,YAAY"}

package/dist/OverflowList/OverflowList.js

@@ -17,10 +17,11 @@
  * - /packages/core/src/OverflowList/index.ts (exports if types change)
  * - /packages/cli/assets/templates/blocks/components/OverflowList/ (showcase blocks)
  */
-import { Children } from 'react';
+import { Children, useCallback, useRef, useState } from 'react';
 import * as stylex from '@stylexjs/stylex';
 import { mergeProps } from "../utils/index.js";
 import { useOverflow } from "../hooks/useOverflow.js";
+import { useIsomorphicLayoutEffect } from "../hooks/useIsomorphicLayoutEffect.js";
 import "../theme/tokens.stylex.js";
 import { spacingVars } from "../theme/tokens.stylex.js";
 import { themeProps } from "../utils/themeProps.js";
@@ -162,6 +163,7 @@ export function OverflowList({
   collapseFrom = 'end',
   behavior = 'observeSelf',
   overflowRenderer,
+  onOverflowChange,
   xstyle,
   className,
   style,
@@ -204,9 +206,48 @@ export function OverflowList({
   // Render a placeholder for measurement — uses all items as overflow
   // so the indicator renders at its maximum possible width.
   const measureIndicator = overflowRenderer?.(allItems);
+
+  // Re-run measurement when keyed children change without resizing the row.
+  // The measured key delays reporting until that measurement has committed.
+  // Lists without the callback skip all identity work.
+  const measurementKey = onOverflowChange ? JSON.stringify({
+    children: childArray.map((child, index) => [index, child.key]),
+    gap,
+    minVisibleItems,
+    maxVisibleItems,
+    maxRows,
+    collapseFrom,
+    behavior
+  }) : '';
+  const [measuredKey, setMeasuredKey] = useState(measurementKey);
+  const reportMeasureRef = useCallback(element => {
+    measureRef(element);
+    if (element) {
+      setMeasuredKey(measurementKey);
+    }
+  }, [measureRef, measurementKey]);
+
+  // Report after measurement, before paint, so a standing menu updates in the
+  // same frame as the visible row. Keys distinguish membership and order while
+  // suppressing callback-only or unrelated re-renders. The initial empty key
+  // suppresses the optimistic pre-measurement render.
+  const overflowKey = onOverflowChange ? JSON.stringify(overflowItems.map(({
+    child,
+    index
+  }) => [index, child.key])) : '[]';
+  const reportedKeyRef = useRef('[]');
+  const overflowItemsRef = useRef(overflowItems);
+  overflowItemsRef.current = overflowItems;
+  useIsomorphicLayoutEffect(() => {
+    if (!onOverflowChange || measuredKey !== measurementKey || reportedKeyRef.current === overflowKey) {
+      return;
+    }
+    reportedKeyRef.current = overflowKey;
+    onOverflowChange(overflowItemsRef.current);
+  }, [measuredKey, measurementKey, overflowKey, onOverflowChange]);
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsxs("div", {
-      ref: measureRef,
+      ref: reportMeasureRef,
       "aria-hidden": "true",
       inert: true,
       ...stylex.props(styles.measureContainer, gapStyles[gap]),

package/dist/Popover/Popover.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Popover.d.ts","sourceRoot":"","sources":["../../src/Popover/Popover.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;GAaG;AAEH,OAAO,KAAK,EAAE,EAGZ,KAAK,YAAY,EACjB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAKf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAE5C,OAAO,KAAK,EAAC,cAAc,EAAE,cAAc,EAAC,MAAM,mBAAmB,CAAC;AA4BtE;;GAEG;AACH,MAAM,WAAW,yBAAyB;IACxC,2EAA2E;IAC3E,GAAG,EAAE,CAAC,EAAE,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;IACtC,sCAAsC;IACtC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,+DAA+D;IAC/D,eAAe,EAAE,QAAQ,CAAC;IAC1B,6DAA6D;IAC7D,eAAe,EAAE,OAAO,CAAC;IACzB,4DAA4D;IAC5D,eAAe,EAAE,MAAM,CAAC;CACzB;AAED,MAAM,WAAW,YAAa,SAAQ,IAAI,CACxC,SAAS,EACT,QAAQ,GAAG,WAAW,GAAG,OAAO,CACjC;IACC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OA6BG;IACH,QAAQ,CAAC,EAAE,SAAS,GAAG,CAAC,CAAC,KAAK,EAAE,yBAAyB,KAAK,SAAS,CAAC,CAAC;IAEzE;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IAEzC;;OAEG;IACH,OAAO,EAAE,SAAS,CAAC;IAEnB;;;;OAIG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B;;;OAGG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAEzC;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAExB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;;;;;;OAQG;IACH,IAAI,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;IAEzB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;;;OAIG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;;;;OAKG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;;;;;;OAOG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAE3B;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAkCD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,wBAAgB,OAAO,CAAC,EACtB,QAAQ,EACR,SAAS,EACT,OAAO,EACP,SAAmB,EACnB,SAAmB,EACnB,MAAM,EACN,YAAY,EACZ,SAAgB,EAChB,KAAK,EACL,KAAK,EACL,IAAe,EACf,OAAO,EACP,cAAc,EACd,gBAAgB,EAChB,YAAY,EACZ,eAAsB,EACtB,gBAAuB,EACvB,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,GACtB,EAAE,YAAY,GAAG,YAAY,CAuR7B;yBA7Se,OAAO"}
+{"version":3,"file":"Popover.d.ts","sourceRoot":"","sources":["../../src/Popover/Popover.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;GAaG;AAEH,OAAO,KAAK,EAAE,EAGZ,KAAK,YAAY,EACjB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAIf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAE5C,OAAO,KAAK,EAAC,cAAc,EAAE,cAAc,EAAC,MAAM,mBAAmB,CAAC;AA2BtE;;GAEG;AACH,MAAM,WAAW,yBAAyB;IACxC,2EAA2E;IAC3E,GAAG,EAAE,CAAC,EAAE,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;IACtC,sCAAsC;IACtC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,+DAA+D;IAC/D,eAAe,EAAE,QAAQ,CAAC;IAC1B,6DAA6D;IAC7D,eAAe,EAAE,OAAO,CAAC;IACzB,4DAA4D;IAC5D,eAAe,EAAE,MAAM,CAAC;CACzB;AAED,MAAM,WAAW,YAAa,SAAQ,IAAI,CACxC,SAAS,EACT,QAAQ,GAAG,WAAW,GAAG,OAAO,CACjC;IACC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OA6BG;IACH,QAAQ,CAAC,EAAE,SAAS,GAAG,CAAC,CAAC,KAAK,EAAE,yBAAyB,KAAK,SAAS,CAAC,CAAC;IAEzE;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IAEzC;;OAEG;IACH,OAAO,EAAE,SAAS,CAAC;IAEnB;;;;OAIG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B;;;OAGG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAEzC;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAExB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;;;;;;OAQG;IACH,IAAI,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;IAEzB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;;;OAIG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;;;;OAKG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;;;;;;OAOG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAE3B;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAmCD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,wBAAgB,OAAO,CAAC,EACtB,QAAQ,EACR,SAAS,EACT,OAAO,EACP,SAAmB,EACnB,SAAmB,EACnB,MAAM,EACN,YAAY,EACZ,SAAgB,EAChB,KAAK,EACL,KAAK,EACL,IAAe,EACf,OAAO,EACP,cAAc,EACd,gBAAgB,EAChB,YAAY,EACZ,eAAsB,EACtB,gBAAuB,EACvB,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,GACtB,EAAE,YAAY,GAAG,YAAY,CAkP7B;yBAxQe,OAAO"}

package/dist/Popover/Popover.js

@@ -19,14 +19,12 @@
 import React, { useCallback, useRef } from 'react';
 import { useIsomorphicLayoutEffect } from "../hooks/useIsomorphicLayoutEffect.js";
 import * as stylex from '@stylexjs/stylex';
-import { mergeProps } from "../utils/index.js";
 import { devWarn } from "../utils/devWarning.js";
 import { usePopover } from "./usePopover.js";
 import { layerAnimations } from "../Layer/layerAnimations.stylex.js";
 import "../theme/tokens.stylex.js";
 import { spacingVars } from "../theme/tokens.stylex.js";
 import { InteractiveRoleContext } from "../InteractiveRoleContext/InteractiveRoleContext.js";
-import { themeProps } from "../utils/themeProps.js";
 
 // =============================================================================
 // Helpers
@@ -142,14 +140,10 @@ export function Popover({
 }) {
   const wrapperRef = useRef(null);
   const isControlled = isOpen !== undefined;
-  // Track when the popover was last hidden by light dismiss to prevent
-  // the trigger click from immediately re-opening it.
-  const lastHideTimeRef = useRef(0);
   const handlePopoverShow = useCallback(() => {
     onOpenChange?.(true);
   }, [onOpenChange]);
   const handlePopoverHide = useCallback(() => {
-    lastHideTimeRef.current = Date.now();
     onOpenChange?.(false);
   }, [onOpenChange]);
   const popover = usePopover({
@@ -161,6 +155,13 @@ export function Popover({
     hasCloseButton,
     closeButtonLabel,
     hasAutoFocus,
+    // The surface is the box that paints background, radius and elevation, so
+    // it is the element the `popover` theme target has to sit on — a target on
+    // the content div inside it styles a box that paints nothing.
+    surfaceTarget: 'popover',
+    xstyle: [styles.contentPadding, xstyle],
+    className,
+    style,
     onShow: handlePopoverShow,
     onHide: handlePopoverHide
   });
@@ -170,11 +171,7 @@ export function Popover({
     if (!isEnabled) {
       return;
     }
-    // If the popover was just closed by light dismiss (clicking outside),
-    // the trigger click fires in the same event — skip re-opening.
-    if (Date.now() - lastHideTimeRef.current < 50) {
-      return;
-    }
+    // `toggle` absorbs a click that belongs to its own light dismiss.
     popover.toggle();
   }, [isEnabled, popover]);
 
@@ -299,7 +296,6 @@ export function Popover({
     return /*#__PURE__*/_jsx(_Fragment, {
       children: popover.render(/*#__PURE__*/_jsx("div", {
         "data-testid": testId,
-        ...mergeProps(themeProps('popover'), stylex.props(styles.contentPadding, xstyle), className, style),
         children: content
       }), {
         placement,
@@ -323,7 +319,6 @@ export function Popover({
     return /*#__PURE__*/_jsxs(_Fragment, {
       children: [children(triggerProps), popover.render(/*#__PURE__*/_jsx("div", {
         "data-testid": testId,
-        ...mergeProps(themeProps('popover'), stylex.props(styles.contentPadding, xstyle), className, style),
         children: content
       }), {
         placement,
@@ -347,7 +342,6 @@ export function Popover({
       })
     }), popover.render(/*#__PURE__*/_jsx("div", {
       "data-testid": testId,
-      ...mergeProps(themeProps('popover'), stylex.props(styles.contentPadding, xstyle), className, style),
       children: content
     }), {
       placement,