@planningcenter/tapestry 4.12.0 → 4.13.0

package/dist/components/DataTable/useSavedViewsState.js

@@ -0,0 +1,192 @@
+import { useState, useRef } from 'react';
+import { withoutSearch } from './savedViews.js';
+
+function startSaving(updates, view) {
+    updates.saving.push(view);
+}
+function stopSaving(updates, view) {
+    updates.saving = updates.saving.filter((pending) => pending !== view);
+}
+// A slower save of an older update doesn't replace a newer one.
+function confirmIfNewest(updates, saved, order) {
+    if (order <= updates.confirmedOrder)
+        return;
+    updates.confirmed = saved;
+    updates.confirmedOrder = order;
+}
+// The newest update still saving, or else the last saved version.
+function viewToRestore(updates) {
+    return updates.saving.at(-1) ?? updates.confirmed;
+}
+/**
+ * Keeps the saved views and default view id after mount. Each callback is
+ * wrapped to apply its change here, and stays undefined when the consumer's is,
+ * since that hides the matching action. Updates, deletes, and default changes
+ * show right away and are undone if the callback rejects, unless a newer
+ * change has replaced them. Reorders save one at a time, so a failed one puts
+ * back the order from before it.
+ */
+function useSavedViewsState({ initialDefaultViewId, initialSavedViews, onCreate, onDelete, onReorder, onSetDefault, onUpdate, }) {
+    const [savedViews, setSavedViews] = useState(() => initialSavedViews?.map(withoutSearch));
+    const [defaultViewId, setDefaultViewId] = useState(initialDefaultViewId);
+    const latestDefaultChange = useRef(0);
+    const latestUpdate = useRef(0);
+    const updates = useRef(new Map());
+    const [isReordering, setIsReordering] = useState(false);
+    // So a second drop before a render is skipped too.
+    const isReorderingNow = useRef(false);
+    // Only swaps out `current` if it's still there, so a slow save doesn't
+    // overwrite a newer change to the same view.
+    const replaceView = (current, next) => setSavedViews((views) => views?.map((view) => (view === current ? next : view)));
+    // Starts from the view as it was last saved, to restore if every update fails.
+    const trackUpdates = (view) => {
+        let tracked = updates.current.get(view.id);
+        if (!tracked) {
+            const original = savedViews?.find(({ id }) => id === view.id);
+            tracked = { confirmed: original ?? view, confirmedOrder: 0, saving: [] };
+            updates.current.set(view.id, tracked);
+        }
+        return tracked;
+    };
+    const showUpdate = (view) => setSavedViews((views) => views?.map((current) => (current.id === view.id ? view : current)));
+    // Returns an undo that does nothing once a newer default has been set.
+    const changeDefault = (id) => {
+        const change = ++latestDefaultChange.current;
+        let previous = id;
+        setDefaultViewId((current) => {
+            previous = current;
+            return id;
+        });
+        // Read in an updater, since a callback that rejects right away runs this
+        // before the change above has been applied.
+        return () => {
+            if (latestDefaultChange.current === change)
+                setDefaultViewId(() => previous);
+        };
+    };
+    return {
+        defaultViewId,
+        isReordering,
+        onCreate: onCreate &&
+            (async (view) => {
+                const created = await onCreate(view);
+                const saved = created && withoutSearch(created);
+                // Tolerates a consumer that returns nothing, leaving the list as is.
+                if (saved)
+                    setSavedViews((views = []) => [...views, saved]);
+                return saved;
+            }),
+        onDelete: onDelete &&
+            (async (view) => {
+                let index = -1;
+                let removed;
+                setSavedViews((views) => {
+                    index = views?.findIndex(({ id }) => id === view.id) ?? -1;
+                    removed = views?.[index];
+                    return views?.filter(({ id }) => id !== view.id);
+                });
+                const undoDefault = view.id === defaultViewId ? changeDefault("initial") : undefined;
+                try {
+                    await onDelete(view);
+                }
+                catch (error) {
+                    setSavedViews((views) => !views || !removed || views.some(({ id }) => id === view.id)
+                        ? views
+                        : [...views.slice(0, index), removed, ...views.slice(index)]);
+                    undoDefault?.();
+                    throw error;
+                }
+                // Saved only once the view is gone, so a failed delete has no reset
+                // to take back.
+                if (undoDefault)
+                    await onSetDefault?.("initial");
+            }),
+        // Moves the view right away, and moves it back if the save fails. A drop
+        // while another reorder saves is skipped.
+        onReorder: onReorder &&
+            (async (view, target) => {
+                if (isReorderingNow.current)
+                    return;
+                const views = savedViews ?? [];
+                const from = views.indexOf(view);
+                const moved = moveView(views, view, target);
+                const to = moved.indexOf(view);
+                const after = moved[to - 1] ?? null;
+                if (from === -1 || from === to)
+                    return;
+                // The position is saved by the view it follows, which needs an id.
+                if (after && after.id === undefined)
+                    return;
+                isReorderingNow.current = true;
+                setIsReordering(true);
+                const previousOrder = views.map(({ id }) => id);
+                setSavedViews((current) => current && moveView(current, view, target));
+                try {
+                    await onReorder(view, after);
+                }
+                catch (error) {
+                    setSavedViews((current) => current && restoreOrder(current, previousOrder));
+                    throw error;
+                }
+                finally {
+                    isReorderingNow.current = false;
+                    setIsReordering(false);
+                }
+            }),
+        onSetDefault: onSetDefault &&
+            (async (id) => {
+                const undo = changeDefault(id);
+                try {
+                    await onSetDefault(id);
+                }
+                catch (error) {
+                    undo();
+                    throw error;
+                }
+            }),
+        // Shows the change right away. If the save fails, puts back the newest
+        // update still saving, or else the last saved version.
+        onUpdate: onUpdate &&
+            (async (view) => {
+                const order = ++latestUpdate.current;
+                const tracked = trackUpdates(view);
+                startSaving(tracked, view);
+                showUpdate(view);
+                try {
+                    const updated = await onUpdate(view);
+                    const saved = updated && withoutSearch(updated);
+                    stopSaving(tracked, view);
+                    confirmIfNewest(tracked, saved ?? view, order);
+                    if (saved)
+                        replaceView(view, saved);
+                    return saved;
+                }
+                catch (error) {
+                    stopSaving(tracked, view);
+                    replaceView(view, viewToRestore(tracked));
+                    throw error;
+                }
+            }),
+        savedViews,
+    };
+}
+function moveView(views, view, { dropPosition, view: target }) {
+    const rest = views.filter((existing) => existing !== view);
+    const targetIndex = rest.indexOf(target);
+    if (targetIndex === -1)
+        return views;
+    const to = dropPosition === "after" ? targetIndex + 1 : targetIndex;
+    return [...rest.slice(0, to), view, ...rest.slice(to)];
+}
+// Matched by id, so views updated or deleted since keep those changes. Views
+// created since stay at the end.
+function restoreOrder(views, order) {
+    const indexOf = (view) => {
+        const index = order.indexOf(view.id);
+        return index === -1 ? order.length : index;
+    };
+    return [...views].sort((a, b) => indexOf(a) - indexOf(b));
+}
+
+export { useSavedViewsState };
+//# sourceMappingURL=useSavedViewsState.js.map

package/dist/components/DataTable/useSavedViewsState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSavedViewsState.js","sources":["../../../src/components/DataTable/useSavedViewsState.ts"],"sourcesContent":["import { useRef, useState } from \"react\"\n\nimport { type SavedView, withoutSearch } from \"./savedViews\"\n\ninterface SavedViewsStateOptions {\n  initialDefaultViewId: NonNullable<SavedView[\"id\"]>\n  initialSavedViews: SavedView[] | undefined\n  onCreate?: (\n    savedView: Omit<SavedView, \"id\">\n  ) => Promise<SavedView> | SavedView\n  onDelete?: (savedView: SavedView) => Promise<void> | void\n  onReorder?: (\n    savedView: SavedView,\n    after: SavedView | null\n  ) => Promise<void> | void\n  onSetDefault?: (id: NonNullable<SavedView[\"id\"]>) => Promise<void> | void\n  onUpdate?: (savedView: SavedView) => Promise<SavedView> | SavedView\n}\n\ninterface ViewUpdates {\n  confirmed: SavedView\n  confirmedOrder: number\n  saving: SavedView[]\n}\n\nfunction startSaving(updates: ViewUpdates, view: SavedView) {\n  updates.saving.push(view)\n}\n\nfunction stopSaving(updates: ViewUpdates, view: SavedView) {\n  updates.saving = updates.saving.filter((pending) => pending !== view)\n}\n\n// A slower save of an older update doesn't replace a newer one.\nfunction confirmIfNewest(\n  updates: ViewUpdates,\n  saved: SavedView,\n  order: number\n) {\n  if (order <= updates.confirmedOrder) return\n  updates.confirmed = saved\n  updates.confirmedOrder = order\n}\n\n// The newest update still saving, or else the last saved version.\nfunction viewToRestore(updates: ViewUpdates) {\n  return updates.saving.at(-1) ?? updates.confirmed\n}\n\n/**\n * Keeps the saved views and default view id after mount. Each callback is\n * wrapped to apply its change here, and stays undefined when the consumer's is,\n * since that hides the matching action. Updates, deletes, and default changes\n * show right away and are undone if the callback rejects, unless a newer\n * change has replaced them. Reorders save one at a time, so a failed one puts\n * back the order from before it.\n */\nexport function useSavedViewsState({\n  initialDefaultViewId,\n  initialSavedViews,\n  onCreate,\n  onDelete,\n  onReorder,\n  onSetDefault,\n  onUpdate,\n}: SavedViewsStateOptions) {\n  const [savedViews, setSavedViews] = useState(() =>\n    initialSavedViews?.map(withoutSearch)\n  )\n  const [defaultViewId, setDefaultViewId] = useState(initialDefaultViewId)\n  const latestDefaultChange = useRef(0)\n  const latestUpdate = useRef(0)\n  const updates = useRef(new Map<SavedView[\"id\"], ViewUpdates>())\n  const [isReordering, setIsReordering] = useState(false)\n  // So a second drop before a render is skipped too.\n  const isReorderingNow = useRef(false)\n\n  // Only swaps out `current` if it's still there, so a slow save doesn't\n  // overwrite a newer change to the same view.\n  const replaceView = (current: SavedView, next: SavedView) =>\n    setSavedViews((views) =>\n      views?.map((view) => (view === current ? next : view))\n    )\n\n  // Starts from the view as it was last saved, to restore if every update fails.\n  const trackUpdates = (view: SavedView) => {\n    let tracked = updates.current.get(view.id)\n    if (!tracked) {\n      const original = savedViews?.find(({ id }) => id === view.id)\n      tracked = { confirmed: original ?? view, confirmedOrder: 0, saving: [] }\n      updates.current.set(view.id, tracked)\n    }\n    return tracked\n  }\n\n  const showUpdate = (view: SavedView) =>\n    setSavedViews((views) =>\n      views?.map((current) => (current.id === view.id ? view : current))\n    )\n\n  // Returns an undo that does nothing once a newer default has been set.\n  const changeDefault = (id: NonNullable<SavedView[\"id\"]>) => {\n    const change = ++latestDefaultChange.current\n    let previous = id\n    setDefaultViewId((current) => {\n      previous = current\n      return id\n    })\n    // Read in an updater, since a callback that rejects right away runs this\n    // before the change above has been applied.\n    return () => {\n      if (latestDefaultChange.current === change)\n        setDefaultViewId(() => previous)\n    }\n  }\n\n  return {\n    defaultViewId,\n    isReordering,\n    onCreate:\n      onCreate &&\n      (async (view: Omit<SavedView, \"id\">) => {\n        const created = await onCreate(view)\n        const saved = created && withoutSearch(created)\n        // Tolerates a consumer that returns nothing, leaving the list as is.\n        if (saved) setSavedViews((views = []) => [...views, saved])\n        return saved\n      }),\n    onDelete:\n      onDelete &&\n      (async (view: SavedView) => {\n        let index = -1\n        let removed: SavedView | undefined\n        setSavedViews((views) => {\n          index = views?.findIndex(({ id }) => id === view.id) ?? -1\n          removed = views?.[index]\n          return views?.filter(({ id }) => id !== view.id)\n        })\n        const undoDefault =\n          view.id === defaultViewId ? changeDefault(\"initial\") : undefined\n        try {\n          await onDelete(view)\n        } catch (error) {\n          setSavedViews((views) =>\n            !views || !removed || views.some(({ id }) => id === view.id)\n              ? views\n              : [...views.slice(0, index), removed, ...views.slice(index)]\n          )\n          undoDefault?.()\n          throw error\n        }\n        // Saved only once the view is gone, so a failed delete has no reset\n        // to take back.\n        if (undoDefault) await onSetDefault?.(\"initial\")\n      }),\n    // Moves the view right away, and moves it back if the save fails. A drop\n    // while another reorder saves is skipped.\n    onReorder:\n      onReorder &&\n      (async (view: SavedView, target: ReorderTarget) => {\n        if (isReorderingNow.current) return\n        const views = savedViews ?? []\n        const from = views.indexOf(view)\n        const moved = moveView(views, view, target)\n        const to = moved.indexOf(view)\n        const after = moved[to - 1] ?? null\n        if (from === -1 || from === to) return\n        // The position is saved by the view it follows, which needs an id.\n        if (after && after.id === undefined) return\n\n        isReorderingNow.current = true\n        setIsReordering(true)\n        const previousOrder = views.map(({ id }) => id)\n        setSavedViews((current) => current && moveView(current, view, target))\n        try {\n          await onReorder(view, after)\n        } catch (error) {\n          setSavedViews(\n            (current) => current && restoreOrder(current, previousOrder)\n          )\n          throw error\n        } finally {\n          isReorderingNow.current = false\n          setIsReordering(false)\n        }\n      }),\n    onSetDefault:\n      onSetDefault &&\n      (async (id: NonNullable<SavedView[\"id\"]>) => {\n        const undo = changeDefault(id)\n        try {\n          await onSetDefault(id)\n        } catch (error) {\n          undo()\n          throw error\n        }\n      }),\n    // Shows the change right away. If the save fails, puts back the newest\n    // update still saving, or else the last saved version.\n    onUpdate:\n      onUpdate &&\n      (async (view: SavedView) => {\n        const order = ++latestUpdate.current\n        const tracked = trackUpdates(view)\n        startSaving(tracked, view)\n        showUpdate(view)\n        try {\n          const updated = await onUpdate(view)\n          const saved = updated && withoutSearch(updated)\n          stopSaving(tracked, view)\n          confirmIfNewest(tracked, saved ?? view, order)\n          if (saved) replaceView(view, saved)\n          return saved\n        } catch (error) {\n          stopSaving(tracked, view)\n          replaceView(view, viewToRestore(tracked))\n          throw error\n        }\n      }),\n    savedViews,\n  }\n}\n\n/** Where a view was dropped, as React Aria reports it. */\nexport interface ReorderTarget {\n  dropPosition: \"after\" | \"before\"\n  view: SavedView\n}\n\nfunction moveView(\n  views: SavedView[],\n  view: SavedView,\n  { dropPosition, view: target }: ReorderTarget\n) {\n  const rest = views.filter((existing) => existing !== view)\n  const targetIndex = rest.indexOf(target)\n  if (targetIndex === -1) return views\n  const to = dropPosition === \"after\" ? targetIndex + 1 : targetIndex\n  return [...rest.slice(0, to), view, ...rest.slice(to)]\n}\n\n// Matched by id, so views updated or deleted since keep those changes. Views\n// created since stay at the end.\nfunction restoreOrder(views: SavedView[], order: SavedView[\"id\"][]) {\n  const indexOf = (view: SavedView) => {\n    const index = order.indexOf(view.id)\n    return index === -1 ? order.length : index\n  }\n  return [...views].sort((a, b) => indexOf(a) - indexOf(b))\n}\n"],"names":[],"mappings":"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"}

package/dist/components/DataTable/useUpdateSavedViewName.d.ts

@@ -1,7 +1,6 @@
 import type { SavedView } from "./savedViews";
 /**
- * Saves a view's new name, trimmed. Callers skip blank and unchanged names,
- * since `view.name` is out of date while a save is pending.
+ * Saves a view's new name, trimmed. Callers skip blank and unchanged names.
  */
-export declare function useUpdateSavedViewName(onUpdate?: (savedView: SavedView) => Promise<SavedView> | SavedView): (view: SavedView, name: string) => Promise<void>;
+export declare function useUpdateSavedViewName(onUpdate?: (savedView: SavedView) => Promise<SavedView | undefined> | SavedView): (view: SavedView, name: string) => Promise<void>;
 //# sourceMappingURL=useUpdateSavedViewName.d.ts.map

package/dist/components/DataTable/useUpdateSavedViewName.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useUpdateSavedViewName.d.ts","sourceRoot":"","sources":["../../../src/components/DataTable/useUpdateSavedViewName.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAE7C;;;GAGG;AACH,wBAAgB,sBAAsB,CACpC,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,SAAS,KAAK,OAAO,CAAC,SAAS,CAAC,GAAG,SAAS,IAErD,MAAM,SAAS,EAAE,MAAM,MAAM,mBAG5C"}
+{"version":3,"file":"useUpdateSavedViewName.d.ts","sourceRoot":"","sources":["../../../src/components/DataTable/useUpdateSavedViewName.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAE7C;;GAEG;AACH,wBAAgB,sBAAsB,CACpC,QAAQ,CAAC,EAAE,CACT,SAAS,EAAE,SAAS,KACjB,OAAO,CAAC,SAAS,GAAG,SAAS,CAAC,GAAG,SAAS,IAEjC,MAAM,SAAS,EAAE,MAAM,MAAM,mBAG5C"}

package/dist/components/DataTable/useUpdateSavedViewName.js

@@ -1,6 +1,5 @@
 /**
- * Saves a view's new name, trimmed. Callers skip blank and unchanged names,
- * since `view.name` is out of date while a save is pending.
+ * Saves a view's new name, trimmed. Callers skip blank and unchanged names.
  */
 function useUpdateSavedViewName(onUpdate) {
     return async (view, name) => {

package/dist/components/DataTable/useUpdateSavedViewName.js.map

@@ -1 +1 @@
-{"version":3,"file":"useUpdateSavedViewName.js","sources":["../../../src/components/DataTable/useUpdateSavedViewName.ts"],"sourcesContent":["import type { SavedView } from \"./savedViews\"\n\n/**\n * Saves a view's new name, trimmed. Callers skip blank and unchanged names,\n * since `view.name` is out of date while a save is pending.\n */\nexport function useUpdateSavedViewName(\n  onUpdate?: (savedView: SavedView) => Promise<SavedView> | SavedView\n) {\n  return async (view: SavedView, name: string) => {\n    await onUpdate?.({ ...view, name: name.trim() })\n  }\n}\n"],"names":[],"mappings":"AAEA;;;AAGG;AACG,SAAU,sBAAsB,CACpC,QAAmE,EAAA;AAEnE,IAAA,OAAO,OAAO,IAAe,EAAE,IAAY,KAAI;AAC7C,QAAA,MAAM,QAAQ,GAAG,EAAE,GAAG,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,EAAE,CAAC;AAClD,IAAA,CAAC;AACH;;;;"}
+{"version":3,"file":"useUpdateSavedViewName.js","sources":["../../../src/components/DataTable/useUpdateSavedViewName.ts"],"sourcesContent":["import type { SavedView } from \"./savedViews\"\n\n/**\n * Saves a view's new name, trimmed. Callers skip blank and unchanged names.\n */\nexport function useUpdateSavedViewName(\n  onUpdate?: (\n    savedView: SavedView\n  ) => Promise<SavedView | undefined> | SavedView\n) {\n  return async (view: SavedView, name: string) => {\n    await onUpdate?.({ ...view, name: name.trim() })\n  }\n}\n"],"names":[],"mappings":"AAEA;;AAEG;AACG,SAAU,sBAAsB,CACpC,QAE+C,EAAA;AAE/C,IAAA,OAAO,OAAO,IAAe,EAAE,IAAY,KAAI;AAC7C,QAAA,MAAM,QAAQ,GAAG,EAAE,GAAG,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,EAAE,CAAC;AAClD,IAAA,CAAC;AACH;;;;"}

package/dist/components/DataTable/useVisibleSavedViews.d.ts

@@ -0,0 +1,31 @@
+import { type RefObject } from "react";
+import type { Key } from "react-aria-components/ListBox";
+/**
+ * Splits `items` into the ones that fit on one line in `listRef` and the
+ * ones that go in the overflow menu. Items keep their order. The active item
+ * always shows, taking the last visible slot when it would otherwise
+ * overflow.
+ *
+ * Item widths are kept from when each item last rendered, and a resize
+ * observer on the rendered items, the overflow trigger, the list, and
+ * `newViewRef` keeps them current. An item with no width yet, such as a new
+ * one, renders every item and the overflow trigger for one measuring pass.
+ * The list's items land a render after the list, so call `measure` once
+ * they're in the DOM.
+ */
+export declare function useVisibleSavedViews<T extends {
+    id: Key;
+}>({ activeKey, items, listRef, newViewRef, }: {
+    activeKey: Key | null;
+    items: T[];
+    listRef: RefObject<HTMLElement>;
+    /** The new view button and its save status, which follow the items. */
+    newViewRef: RefObject<HTMLElement>;
+}): {
+    isCollapsed: boolean;
+    isMeasuring: boolean;
+    measure: () => void;
+    overflowItems: T[];
+    visibleItems: T[];
+};
+//# sourceMappingURL=useVisibleSavedViews.d.ts.map

package/dist/components/DataTable/useVisibleSavedViews.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useVisibleSavedViews.d.ts","sourceRoot":"","sources":["../../../src/components/DataTable/useVisibleSavedViews.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAqC,MAAM,OAAO,CAAA;AACzE,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,+BAA+B,CAAA;AAExD;;;;;;;;;;;;GAYG;AACH,wBAAgB,oBAAoB,CAAC,CAAC,SAAS;IAAE,EAAE,EAAE,GAAG,CAAA;CAAE,EAAE,EAC1D,SAAS,EACT,KAAK,EACL,OAAO,EACP,UAAU,GACX,EAAE;IACD,SAAS,EAAE,GAAG,GAAG,IAAI,CAAA;IACrB,KAAK,EAAE,CAAC,EAAE,CAAA;IACV,OAAO,EAAE,SAAS,CAAC,WAAW,CAAC,CAAA;IAC/B,uEAAuE;IACvE,UAAU,EAAE,SAAS,CAAC,WAAW,CAAC,CAAA;CACnC;;;;;;EAiHA"}

package/dist/components/DataTable/useVisibleSavedViews.js

@@ -0,0 +1,178 @@
+import { useState, useRef, useLayoutEffect } from 'react';
+
+/**
+ * Splits `items` into the ones that fit on one line in `listRef` and the
+ * ones that go in the overflow menu. Items keep their order. The active item
+ * always shows, taking the last visible slot when it would otherwise
+ * overflow.
+ *
+ * Item widths are kept from when each item last rendered, and a resize
+ * observer on the rendered items, the overflow trigger, the list, and
+ * `newViewRef` keeps them current. An item with no width yet, such as a new
+ * one, renders every item and the overflow trigger for one measuring pass.
+ * The list's items land a render after the list, so call `measure` once
+ * they're in the DOM.
+ */
+function useVisibleSavedViews({ activeKey, items, listRef, newViewRef, }) {
+    // By `data-key`, which is a string.
+    const [widths, setWidths] = useState(() => new Map());
+    const [overflowWidth, setOverflowWidth] = useState();
+    const [available, setAvailable] = useState(0);
+    const [gap, setGap] = useState(0);
+    const observerRef = useRef();
+    const observedRef = useRef(new Set());
+    const isMeasuring = overflowWidth === undefined ||
+        items.some(({ id }) => !widths.has(String(id)));
+    // Only reads refs and sets state, so the observer can keep the first one.
+    const read = () => {
+        const list = listRef.current;
+        if (!list)
+            return;
+        // Hidden, everything reads 0, so widths from before are kept.
+        const isHidden = list.clientWidth === 0;
+        if (!isHidden) {
+            const gap = readGap(list);
+            setAvailable(readAvailable(list, newViewRef.current, gap));
+            setGap(gap);
+        }
+        // Its count changes its width, which changes the count, so keep the
+        // widest to settle on one count.
+        const overflow = list.querySelector(OVERFLOW_SELECTOR);
+        if (overflow) {
+            const width = widthOf(overflow);
+            setOverflowWidth((current) => Math.max(current ?? 0, width));
+        }
+        const itemElements = list.querySelectorAll(ITEM_SELECTOR);
+        setWidths((current) => {
+            let next = current;
+            for (const itemElement of itemElements) {
+                const key = itemElement.dataset.key;
+                const width = fullWidthOf(itemElement);
+                if (key === undefined || current.get(key) === width)
+                    continue;
+                if (isHidden && current.has(key))
+                    continue;
+                if (next === current)
+                    next = new Map(current);
+                next.set(key, width);
+            }
+            return next;
+        });
+    };
+    const measure = () => {
+        const list = listRef.current;
+        if (!list)
+            return;
+        const elements = new Set([
+            list,
+            ...(newViewRef.current ? [newViewRef.current] : []),
+            ...list.querySelectorAll(`${ITEM_SELECTOR}, ${OVERFLOW_SELECTOR}`),
+        ]);
+        const observed = observedRef.current;
+        // The observer reads size changes, so only added or removed elements
+        // need reading here.
+        const isSame = elements.size === observed.size &&
+            [...elements].every((element) => observed.has(element));
+        if (isSame)
+            return;
+        observedRef.current = elements;
+        read();
+        if (typeof ResizeObserver === "undefined")
+            return;
+        observerRef.current ??= new ResizeObserver(read);
+        for (const element of observed) {
+            if (!elements.has(element))
+                observerRef.current.unobserve(element);
+        }
+        for (const element of elements) {
+            if (!observed.has(element))
+                observerRef.current.observe(element);
+        }
+    };
+    // Cleared too, so a remount, such as StrictMode's, observes again.
+    useLayoutEffect(() => () => {
+        observerRef.current?.disconnect();
+        observerRef.current = undefined;
+        observedRef.current = new Set();
+    }, []);
+    // Drops the widths of deleted items.
+    useLayoutEffect(() => {
+        const keys = new Set(items.map(({ id }) => String(id)));
+        if ([...widths.keys()].some((key) => !keys.has(key))) {
+            setWidths(new Map([...widths].filter(([key]) => keys.has(key))));
+        }
+    }, [items, widths]);
+    let visibleItems = items;
+    let overflowItems = [];
+    if (!isMeasuring) {
+        let remaining = countFitting({
+            activeIndex: items.findIndex(({ id }) => id === activeKey),
+            available,
+            gap,
+            overflowWidth,
+            widths: items.map(({ id }) => widths.get(String(id)) ?? 0),
+        });
+        visibleItems = [];
+        overflowItems = [];
+        for (const item of items) {
+            if (item.id === activeKey || remaining-- > 0)
+                visibleItems.push(item);
+            else
+                overflowItems.push(item);
+        }
+    }
+    // Alone, the view truncates rather than overflow, whether the rest are in
+    // the overflow menu or it's the only one.
+    const isCollapsed = visibleItems.length === 1;
+    return { isCollapsed, isMeasuring, measure, overflowItems, visibleItems };
+}
+const ITEM_SELECTOR = ".tds-data-table-saved-view-list-item";
+const NAME_SELECTOR = ".tds-data-table-saved-view-name";
+const OVERFLOW_SELECTOR = ".tds-btn--data-table-saved-views-overflow";
+/** The list's width, less the new view button, its save status, and a gap. */
+function readAvailable(list, newView, gap) {
+    const newViewWidth = widthOf(newView);
+    return list.clientWidth - (newViewWidth ? newViewWidth + gap : 0);
+}
+function readGap(element) {
+    return parseFloat(getComputedStyle(element).columnGap) || 0;
+}
+function widthOf(element) {
+    return element?.getBoundingClientRect().width ?? 0;
+}
+/** Includes the part of its name cut off by truncation. */
+function fullWidthOf(itemElement) {
+    const name = itemElement.querySelector(NAME_SELECTOR);
+    const truncated = name ? name.scrollWidth - name.clientWidth : 0;
+    return widthOf(itemElement) + truncated;
+}
+// Measured widths can be fractional, but the list's width is rounded.
+const SUBPIXEL_SLACK = 1;
+function countFitting({ activeIndex, available, gap, overflowWidth, widths, }) {
+    const limit = available + SUBPIXEL_SLACK;
+    // Each item counts with the gap after it, which comes before the overflow
+    // trigger, or after the last item doesn't exist. The active item's width is
+    // set aside first so it always shows.
+    let used = activeIndex === -1 ? 0 : widths[activeIndex] + gap;
+    // Items that still fit with the overflow trigger beside them.
+    let fitsWithOverflow = 0;
+    for (let index = 0; index < widths.length; index++) {
+        if (index === activeIndex)
+            continue;
+        used += widths[index] + gap;
+        // Out of room, so the overflow trigger is needed. With no active item,
+        // the first item shows anyway.
+        if (used - gap > limit) {
+            return activeIndex === -1
+                ? Math.max(fitsWithOverflow, 1)
+                : fitsWithOverflow;
+        }
+        if (used + overflowWidth <= limit)
+            fitsWithOverflow++;
+    }
+    // Every item fits, so there's no overflow trigger.
+    return Infinity;
+}
+
+export { useVisibleSavedViews };
+//# sourceMappingURL=useVisibleSavedViews.js.map

package/dist/components/DataTable/useVisibleSavedViews.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useVisibleSavedViews.js","sources":["../../../src/components/DataTable/useVisibleSavedViews.ts"],"sourcesContent":["import { type RefObject, useLayoutEffect, useRef, useState } from \"react\"\nimport type { Key } from \"react-aria-components/ListBox\"\n\n/**\n * Splits `items` into the ones that fit on one line in `listRef` and the\n * ones that go in the overflow menu. Items keep their order. The active item\n * always shows, taking the last visible slot when it would otherwise\n * overflow.\n *\n * Item widths are kept from when each item last rendered, and a resize\n * observer on the rendered items, the overflow trigger, the list, and\n * `newViewRef` keeps them current. An item with no width yet, such as a new\n * one, renders every item and the overflow trigger for one measuring pass.\n * The list's items land a render after the list, so call `measure` once\n * they're in the DOM.\n */\nexport function useVisibleSavedViews<T extends { id: Key }>({\n  activeKey,\n  items,\n  listRef,\n  newViewRef,\n}: {\n  activeKey: Key | null\n  items: T[]\n  listRef: RefObject<HTMLElement>\n  /** The new view button and its save status, which follow the items. */\n  newViewRef: RefObject<HTMLElement>\n}) {\n  // By `data-key`, which is a string.\n  const [widths, setWidths] = useState(() => new Map<string, number>())\n  const [overflowWidth, setOverflowWidth] = useState<number>()\n  const [available, setAvailable] = useState(0)\n  const [gap, setGap] = useState(0)\n  const observerRef = useRef<ResizeObserver>()\n  const observedRef = useRef(new Set<Element>())\n\n  const isMeasuring =\n    overflowWidth === undefined ||\n    items.some(({ id }) => !widths.has(String(id)))\n\n  // Only reads refs and sets state, so the observer can keep the first one.\n  const read = () => {\n    const list = listRef.current\n    if (!list) return\n    // Hidden, everything reads 0, so widths from before are kept.\n    const isHidden = list.clientWidth === 0\n    if (!isHidden) {\n      const gap = readGap(list)\n      setAvailable(readAvailable(list, newViewRef.current, gap))\n      setGap(gap)\n    }\n    // Its count changes its width, which changes the count, so keep the\n    // widest to settle on one count.\n    const overflow = list.querySelector(OVERFLOW_SELECTOR)\n    if (overflow) {\n      const width = widthOf(overflow)\n      setOverflowWidth((current) => Math.max(current ?? 0, width))\n    }\n    const itemElements = list.querySelectorAll<HTMLElement>(ITEM_SELECTOR)\n    setWidths((current) => {\n      let next = current\n      for (const itemElement of itemElements) {\n        const key = itemElement.dataset.key\n        const width = fullWidthOf(itemElement)\n        if (key === undefined || current.get(key) === width) continue\n        if (isHidden && current.has(key)) continue\n        if (next === current) next = new Map(current)\n        next.set(key, width)\n      }\n      return next\n    })\n  }\n\n  const measure = () => {\n    const list = listRef.current\n    if (!list) return\n    const elements = new Set<Element>([\n      list,\n      ...(newViewRef.current ? [newViewRef.current] : []),\n      ...list.querySelectorAll(`${ITEM_SELECTOR}, ${OVERFLOW_SELECTOR}`),\n    ])\n    const observed = observedRef.current\n    // The observer reads size changes, so only added or removed elements\n    // need reading here.\n    const isSame =\n      elements.size === observed.size &&\n      [...elements].every((element) => observed.has(element))\n    if (isSame) return\n    observedRef.current = elements\n    read()\n    if (typeof ResizeObserver === \"undefined\") return\n    observerRef.current ??= new ResizeObserver(read)\n    for (const element of observed) {\n      if (!elements.has(element)) observerRef.current.unobserve(element)\n    }\n    for (const element of elements) {\n      if (!observed.has(element)) observerRef.current.observe(element)\n    }\n  }\n\n  // Cleared too, so a remount, such as StrictMode's, observes again.\n  useLayoutEffect(\n    () => () => {\n      observerRef.current?.disconnect()\n      observerRef.current = undefined\n      observedRef.current = new Set()\n    },\n    []\n  )\n\n  // Drops the widths of deleted items.\n  useLayoutEffect(() => {\n    const keys = new Set(items.map(({ id }) => String(id)))\n    if ([...widths.keys()].some((key) => !keys.has(key))) {\n      setWidths(new Map([...widths].filter(([key]) => keys.has(key))))\n    }\n  }, [items, widths])\n\n  let visibleItems = items\n  let overflowItems: T[] = []\n  if (!isMeasuring) {\n    let remaining = countFitting({\n      activeIndex: items.findIndex(({ id }) => id === activeKey),\n      available,\n      gap,\n      overflowWidth,\n      widths: items.map(({ id }) => widths.get(String(id)) ?? 0),\n    })\n    visibleItems = []\n    overflowItems = []\n    for (const item of items) {\n      if (item.id === activeKey || remaining-- > 0) visibleItems.push(item)\n      else overflowItems.push(item)\n    }\n  }\n  // Alone, the view truncates rather than overflow, whether the rest are in\n  // the overflow menu or it's the only one.\n  const isCollapsed = visibleItems.length === 1\n\n  return { isCollapsed, isMeasuring, measure, overflowItems, visibleItems }\n}\n\nconst ITEM_SELECTOR = \".tds-data-table-saved-view-list-item\"\nconst NAME_SELECTOR = \".tds-data-table-saved-view-name\"\nconst OVERFLOW_SELECTOR = \".tds-btn--data-table-saved-views-overflow\"\n\n/** The list's width, less the new view button, its save status, and a gap. */\nfunction readAvailable(\n  list: HTMLElement,\n  newView: HTMLElement | null,\n  gap: number\n) {\n  const newViewWidth = widthOf(newView)\n  return list.clientWidth - (newViewWidth ? newViewWidth + gap : 0)\n}\n\nfunction readGap(element: Element) {\n  return parseFloat(getComputedStyle(element).columnGap) || 0\n}\n\nfunction widthOf(element: Element | null) {\n  return element?.getBoundingClientRect().width ?? 0\n}\n\n/** Includes the part of its name cut off by truncation. */\nfunction fullWidthOf(itemElement: Element) {\n  const name = itemElement.querySelector(NAME_SELECTOR)\n  const truncated = name ? name.scrollWidth - name.clientWidth : 0\n  return widthOf(itemElement) + truncated\n}\n\n// Measured widths can be fractional, but the list's width is rounded.\nconst SUBPIXEL_SLACK = 1\n\nfunction countFitting({\n  activeIndex,\n  available,\n  gap,\n  overflowWidth,\n  widths,\n}: {\n  activeIndex: number\n  available: number\n  gap: number\n  overflowWidth: number\n  widths: number[]\n}) {\n  const limit = available + SUBPIXEL_SLACK\n  // Each item counts with the gap after it, which comes before the overflow\n  // trigger, or after the last item doesn't exist. The active item's width is\n  // set aside first so it always shows.\n  let used = activeIndex === -1 ? 0 : widths[activeIndex] + gap\n  // Items that still fit with the overflow trigger beside them.\n  let fitsWithOverflow = 0\n  for (let index = 0; index < widths.length; index++) {\n    if (index === activeIndex) continue\n    used += widths[index] + gap\n    // Out of room, so the overflow trigger is needed. With no active item,\n    // the first item shows anyway.\n    if (used - gap > limit) {\n      return activeIndex === -1\n        ? Math.max(fitsWithOverflow, 1)\n        : fitsWithOverflow\n    }\n    if (used + overflowWidth <= limit) fitsWithOverflow++\n  }\n  // Every item fits, so there's no overflow trigger.\n  return Infinity\n}\n"],"names":[],"mappings":"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"}

package/dist/components/button/BaseButton.d.ts

@@ -2,6 +2,8 @@ import "./btn.css";
 import { BaseComponentProps, ComponentKind } from "../../utilities/buttonLinkShared";
 import React, { ButtonHTMLAttributes } from "react";
 export interface BaseButtonProps extends Omit<BaseComponentProps, "kind"> {
+    /** Keeps a disabled button focusable, using `aria-disabled` without the native `disabled` attribute. Use when focus would otherwise be lost, such as a button that disables itself while focused. */
+    focusableWhenDisabled?: boolean;
     /** The visual style of the button. */
     kind?: ComponentKind;
     /** The text content of the button. */

package/dist/components/button/BaseButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BaseButton.d.ts","sourceRoot":"","sources":["../../../src/components/button/BaseButton.tsx"],"names":[],"mappings":"AAAA,OAAO,WAAW,CAAA;AAIlB,OAAO,EACL,kBAAkB,EAGlB,aAAa,EAEd,MAAM,6BAA6B,CAAA;AAEpC,OAAO,KAAK,EAAE,EACZ,oBAAoB,EAIrB,MAAM,OAAO,CAAA;AAId,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,kBAAkB,EAAE,MAAM,CAAC;IACvE,sCAAsC;IACtC,IAAI,CAAC,EAAE,aAAa,CAAA;IACpB,sCAAsC;IACtC,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,+GAA+G;IAC/G,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,mEAAmE;IACnE,gBAAgB,CAAC,EAAE,MAAM,CAAA;CAC1B;AAED,MAAM,MAAM,sBAAsB,GAAG,IAAI,CACvC,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,MAAM,eAAe,GAAG,UAAU,CACnC,GACC,eAAe,CAAA;AAEjB,eAAO,MAAM,UAAU,qLAkEtB,CAAA"}
+{"version":3,"file":"BaseButton.d.ts","sourceRoot":"","sources":["../../../src/components/button/BaseButton.tsx"],"names":[],"mappings":"AAAA,OAAO,WAAW,CAAA;AAIlB,OAAO,EACL,kBAAkB,EAGlB,aAAa,EAEd,MAAM,6BAA6B,CAAA;AAEpC,OAAO,KAAK,EAAE,EAAE,oBAAoB,EAAc,MAAM,OAAO,CAAA;AAE/D,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,kBAAkB,EAAE,MAAM,CAAC;IACvE,qMAAqM;IACrM,qBAAqB,CAAC,EAAE,OAAO,CAAA;IAC/B,sCAAsC;IACtC,IAAI,CAAC,EAAE,aAAa,CAAA;IACpB,sCAAsC;IACtC,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,+GAA+G;IAC/G,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,mEAAmE;IACnE,gBAAgB,CAAC,EAAE,MAAM,CAAA;CAC1B;AAED,MAAM,MAAM,sBAAsB,GAAG,IAAI,CACvC,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,MAAM,eAAe,GAAG,UAAU,CACnC,GACC,eAAe,CAAA;AAEjB,eAAO,MAAM,UAAU,qLA4DtB,CAAA"}

package/dist/components/button/BaseButton.js

@@ -1,26 +1,17 @@
 import LoadingSpinner from '../internal/LoadingSpinner.js';
-import React, { forwardRef, useContext } from 'react';
-import 'react-aria/private/live-announcer/LiveAnnouncer';
+import '../internal/LoadingAnnouncement.js';
 import '../internal/tooltip/Tooltip.js';
-import { TooltipTriggerContext } from '../internal/tooltip/TooltipTriggerContext.js';
+import { useTooltipTriggerProps } from '../internal/tooltip/useTooltipTriggerProps.js';
 import { COMPONENT_SIZE_CLASS_MAP, COMPONENT_KIND_CLASS_MAP, wrapStringWithSpan } from '../../utilities/buttonLinkShared.js';
 import classNames from 'classnames';
-import { mergeProps } from 'react-aria/mergeProps';
-import { mergeRefs } from 'react-aria/mergeRefs';
+import React, { forwardRef } from 'react';
 
-const BaseButton = forwardRef(({ "aria-describedby": ariaDescribedBy, "aria-label": ariaLabel, className, disabled = false, fullWidth, kind = "secondary", label, loading = false, loadingAriaLabel = "Loading...", prefix, size, suffix, ...restProps }, ref) => {
-    const tooltip = useContext(TooltipTriggerContext);
-    const { "aria-describedby": tooltipId, ...tooltipTriggerProps } = tooltip?.triggerProps ?? {};
-    const mergedProps = tooltip
-        ? mergeProps(restProps, tooltipTriggerProps)
-        : restProps;
-    const mergedRef = tooltip
-        ? mergeRefs(ref, tooltip.ref)
-        : ref;
-    const describedBy = [ariaDescribedBy, tooltipId].filter(Boolean).join(" ") || undefined;
-    const combinedClassName = classNames(kind && "tds-btn", size && size !== "md" && COMPONENT_SIZE_CLASS_MAP[size], kind && COMPONENT_KIND_CLASS_MAP[kind], fullWidth && "tds-btn--full-width", loading && "tds-btn--loading", className, { "tds-btn--prefix": prefix, "tds-btn--suffix": suffix });
+const BaseButton = forwardRef(({ "aria-describedby": ariaDescribedBy, "aria-label": ariaLabel, className, disabled = false, focusableWhenDisabled = false, fullWidth, kind = "secondary", label, loading = false, loadingAriaLabel = "Loading...", prefix, size, suffix, ...restProps }, ref) => {
+    const { describedBy, mergedProps, mergedRef } = useTooltipTriggerProps(restProps, ref, ariaDescribedBy);
     const isDisabled = disabled || loading;
-    return (React.createElement("button", { type: "button", className: combinedClassName, ref: mergedRef, ...mergedProps, "aria-busy": loading || undefined, "aria-describedby": describedBy, "aria-disabled": isDisabled || undefined, disabled: isDisabled, "aria-label": loading ? loadingAriaLabel : ariaLabel },
+    const isFocusableDisabled = isDisabled && focusableWhenDisabled;
+    const combinedClassName = classNames(kind && "tds-btn", size && size !== "md" && COMPONENT_SIZE_CLASS_MAP[size], kind && COMPONENT_KIND_CLASS_MAP[kind], fullWidth && "tds-btn--full-width", loading && "tds-btn--loading", isFocusableDisabled && "disabled", className, { "tds-btn--prefix": prefix, "tds-btn--suffix": suffix });
+    return (React.createElement("button", { type: "button", className: combinedClassName, ref: mergedRef, ...mergedProps, "aria-busy": loading || undefined, "aria-describedby": describedBy, "aria-disabled": isDisabled || undefined, disabled: isDisabled && !focusableWhenDisabled, onClick: isFocusableDisabled ? undefined : mergedProps.onClick, "aria-label": loading ? loadingAriaLabel : ariaLabel },
         loading && React.createElement(LoadingSpinner, null),
         wrapStringWithSpan(prefix),
         loading ? React.createElement("span", null, label) : label,

package/dist/components/button/BaseButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseButton.js","sources":["../../../src/components/button/BaseButton.tsx"],"sourcesContent":["import \"./btn.css\"\n\nimport { LoadingSpinner } from \"@components/internal\"\nimport { TooltipTriggerContext } from \"@components/internal/tooltip/TooltipTriggerContext\"\nimport {\n  BaseComponentProps,\n  COMPONENT_KIND_CLASS_MAP,\n  COMPONENT_SIZE_CLASS_MAP,\n  ComponentKind,\n  wrapStringWithSpan,\n} from \"@utilities/buttonLinkShared\"\nimport classNames from \"classnames\"\nimport React, {\n  ButtonHTMLAttributes,\n  forwardRef,\n  RefObject,\n  useContext,\n} from \"react\"\nimport { mergeProps } from \"react-aria/mergeProps\"\nimport { mergeRefs } from \"react-aria/mergeRefs\"\n\nexport interface BaseButtonProps extends Omit<BaseComponentProps, \"kind\"> {\n  /** The visual style of the button. */\n  kind?: ComponentKind\n  /** The text content of the button. */\n  label: React.ReactNode\n  /** Whether the button is in a loading state. When true, the button is disabled and shows a loading spinner. */\n  loading?: boolean\n  /** Accessible label to use when the button is in loading state. */\n  loadingAriaLabel?: string\n}\n\nexport type BaseButtonElementProps = Omit<\n  ButtonHTMLAttributes<HTMLButtonElement>,\n  keyof BaseButtonProps | \"children\"\n> &\n  BaseButtonProps\n\nexport const BaseButton = forwardRef<HTMLButtonElement, BaseButtonElementProps>(\n  (\n    {\n      \"aria-describedby\": ariaDescribedBy,\n      \"aria-label\": ariaLabel,\n      className,\n      disabled = false,\n      fullWidth,\n      kind = \"secondary\",\n      label,\n      loading = false,\n      loadingAriaLabel = \"Loading...\",\n      prefix,\n      size,\n      suffix,\n      ...restProps\n    }: BaseButtonElementProps,\n    ref\n  ) => {\n    const tooltip = useContext(TooltipTriggerContext)\n    const { \"aria-describedby\": tooltipId, ...tooltipTriggerProps } =\n      tooltip?.triggerProps ?? {}\n\n    const mergedProps = tooltip\n      ? mergeProps(restProps, tooltipTriggerProps)\n      : restProps\n    const mergedRef = tooltip\n      ? mergeRefs<HTMLButtonElement>(\n          ref,\n          tooltip.ref as RefObject<HTMLButtonElement>\n        )\n      : ref\n    const describedBy =\n      [ariaDescribedBy, tooltipId].filter(Boolean).join(\" \") || undefined\n\n    const combinedClassName = classNames(\n      kind && \"tds-btn\",\n      size && size !== \"md\" && COMPONENT_SIZE_CLASS_MAP[size],\n      kind && COMPONENT_KIND_CLASS_MAP[kind],\n      fullWidth && \"tds-btn--full-width\",\n      loading && \"tds-btn--loading\",\n      className,\n      { \"tds-btn--prefix\": prefix, \"tds-btn--suffix\": suffix }\n    )\n\n    const isDisabled = disabled || loading\n\n    return (\n      <button\n        type=\"button\"\n        className={combinedClassName}\n        ref={mergedRef}\n        {...mergedProps}\n        aria-busy={loading || undefined}\n        aria-describedby={describedBy}\n        aria-disabled={isDisabled || undefined}\n        disabled={isDisabled}\n        aria-label={loading ? loadingAriaLabel : ariaLabel}\n      >\n        {loading && <LoadingSpinner />}\n        {wrapStringWithSpan(prefix)}\n        {loading ? <span>{label}</span> : label}\n        {wrapStringWithSpan(suffix)}\n      </button>\n    )\n  }\n)\n\nBaseButton.displayName = \"BaseButton\"\n"],"names":[],"mappings":";;;;;;;;;;MAsCa,UAAU,GAAG,UAAU,CAClC,CACE,EACE,kBAAkB,EAAE,eAAe,EACnC,YAAY,EAAE,SAAS,EACvB,SAAS,EACT,QAAQ,GAAG,KAAK,EAChB,SAAS,EACT,IAAI,GAAG,WAAW,EAClB,KAAK,EACL,OAAO,GAAG,KAAK,EACf,gBAAgB,GAAG,YAAY,EAC/B,MAAM,EACN,IAAI,EACJ,MAAM,EACN,GAAG,SAAS,EACW,EACzB,GAAG,KACD;AACF,IAAA,MAAM,OAAO,GAAG,UAAU,CAAC,qBAAqB,CAAC;AACjD,IAAA,MAAM,EAAE,kBAAkB,EAAE,SAAS,EAAE,GAAG,mBAAmB,EAAE,GAC7D,OAAO,EAAE,YAAY,IAAI,EAAE;IAE7B,MAAM,WAAW,GAAG;AAClB,UAAE,UAAU,CAAC,SAAS,EAAE,mBAAmB;UACzC,SAAS;IACb,MAAM,SAAS,GAAG;UACd,SAAS,CACP,GAAG,EACH,OAAO,CAAC,GAAmC;UAE7C,GAAG;AACP,IAAA,MAAM,WAAW,GACf,CAAC,eAAe,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,SAAS;IAErE,MAAM,iBAAiB,GAAG,UAAU,CAClC,IAAI,IAAI,SAAS,EACjB,IAAI,IAAI,IAAI,KAAK,IAAI,IAAI,wBAAwB,CAAC,IAAI,CAAC,EACvD,IAAI,IAAI,wBAAwB,CAAC,IAAI,CAAC,EACtC,SAAS,IAAI,qBAAqB,EAClC,OAAO,IAAI,kBAAkB,EAC7B,SAAS,EACT,EAAE,iBAAiB,EAAE,MAAM,EAAE,iBAAiB,EAAE,MAAM,EAAE,CACzD;AAED,IAAA,MAAM,UAAU,GAAG,QAAQ,IAAI,OAAO;AAEtC,IAAA,QACE,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,iBAAiB,EAC5B,GAAG,EAAE,SAAS,KACV,WAAW,EAAA,WAAA,EACJ,OAAO,IAAI,SAAS,EAAA,kBAAA,EACb,WAAW,mBACd,UAAU,IAAI,SAAS,EACtC,QAAQ,EAAE,UAAU,EAAA,YAAA,EACR,OAAO,GAAG,gBAAgB,GAAG,SAAS,EAAA;QAEjD,OAAO,IAAI,KAAA,CAAA,aAAA,CAAC,cAAc,EAAA,IAAA,CAAG;QAC7B,kBAAkB,CAAC,MAAM,CAAC;QAC1B,OAAO,GAAG,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,IAAA,EAAO,KAAK,CAAQ,GAAG,KAAK;AACtC,QAAA,kBAAkB,CAAC,MAAM,CAAC,CACpB;AAEb,CAAC;AAGH,UAAU,CAAC,WAAW,GAAG,YAAY;;;;"}
+{"version":3,"file":"BaseButton.js","sources":["../../../src/components/button/BaseButton.tsx"],"sourcesContent":["import \"./btn.css\"\n\nimport { LoadingSpinner } from \"@components/internal\"\nimport { useTooltipTriggerProps } from \"@components/internal/tooltip/useTooltipTriggerProps\"\nimport {\n  BaseComponentProps,\n  COMPONENT_KIND_CLASS_MAP,\n  COMPONENT_SIZE_CLASS_MAP,\n  ComponentKind,\n  wrapStringWithSpan,\n} from \"@utilities/buttonLinkShared\"\nimport classNames from \"classnames\"\nimport React, { ButtonHTMLAttributes, forwardRef } from \"react\"\n\nexport interface BaseButtonProps extends Omit<BaseComponentProps, \"kind\"> {\n  /** Keeps a disabled button focusable, using `aria-disabled` without the native `disabled` attribute. Use when focus would otherwise be lost, such as a button that disables itself while focused. */\n  focusableWhenDisabled?: boolean\n  /** The visual style of the button. */\n  kind?: ComponentKind\n  /** The text content of the button. */\n  label: React.ReactNode\n  /** Whether the button is in a loading state. When true, the button is disabled and shows a loading spinner. */\n  loading?: boolean\n  /** Accessible label to use when the button is in loading state. */\n  loadingAriaLabel?: string\n}\n\nexport type BaseButtonElementProps = Omit<\n  ButtonHTMLAttributes<HTMLButtonElement>,\n  keyof BaseButtonProps | \"children\"\n> &\n  BaseButtonProps\n\nexport const BaseButton = forwardRef<HTMLButtonElement, BaseButtonElementProps>(\n  (\n    {\n      \"aria-describedby\": ariaDescribedBy,\n      \"aria-label\": ariaLabel,\n      className,\n      disabled = false,\n      focusableWhenDisabled = false,\n      fullWidth,\n      kind = \"secondary\",\n      label,\n      loading = false,\n      loadingAriaLabel = \"Loading...\",\n      prefix,\n      size,\n      suffix,\n      ...restProps\n    }: BaseButtonElementProps,\n    ref\n  ) => {\n    const { describedBy, mergedProps, mergedRef } = useTooltipTriggerProps(\n      restProps,\n      ref,\n      ariaDescribedBy\n    )\n\n    const isDisabled = disabled || loading\n    const isFocusableDisabled = isDisabled && focusableWhenDisabled\n\n    const combinedClassName = classNames(\n      kind && \"tds-btn\",\n      size && size !== \"md\" && COMPONENT_SIZE_CLASS_MAP[size],\n      kind && COMPONENT_KIND_CLASS_MAP[kind],\n      fullWidth && \"tds-btn--full-width\",\n      loading && \"tds-btn--loading\",\n      isFocusableDisabled && \"disabled\",\n      className,\n      { \"tds-btn--prefix\": prefix, \"tds-btn--suffix\": suffix }\n    )\n\n    return (\n      <button\n        type=\"button\"\n        className={combinedClassName}\n        ref={mergedRef}\n        {...mergedProps}\n        aria-busy={loading || undefined}\n        aria-describedby={describedBy}\n        aria-disabled={isDisabled || undefined}\n        disabled={isDisabled && !focusableWhenDisabled}\n        onClick={isFocusableDisabled ? undefined : mergedProps.onClick}\n        aria-label={loading ? loadingAriaLabel : ariaLabel}\n      >\n        {loading && <LoadingSpinner />}\n        {wrapStringWithSpan(prefix)}\n        {loading ? <span>{label}</span> : label}\n        {wrapStringWithSpan(suffix)}\n      </button>\n    )\n  }\n)\n\nBaseButton.displayName = \"BaseButton\"\n"],"names":[],"mappings":";;;;;;;;AAiCO,MAAM,UAAU,GAAG,UAAU,CAClC,CACE,EACE,kBAAkB,EAAE,eAAe,EACnC,YAAY,EAAE,SAAS,EACvB,SAAS,EACT,QAAQ,GAAG,KAAK,EAChB,qBAAqB,GAAG,KAAK,EAC7B,SAAS,EACT,IAAI,GAAG,WAAW,EAClB,KAAK,EACL,OAAO,GAAG,KAAK,EACf,gBAAgB,GAAG,YAAY,EAC/B,MAAM,EACN,IAAI,EACJ,MAAM,EACN,GAAG,SAAS,EACW,EACzB,GAAG,KACD;AACF,IAAA,MAAM,EAAE,WAAW,EAAE,WAAW,EAAE,SAAS,EAAE,GAAG,sBAAsB,CACpE,SAAS,EACT,GAAG,EACH,eAAe,CAChB;AAED,IAAA,MAAM,UAAU,GAAG,QAAQ,IAAI,OAAO;AACtC,IAAA,MAAM,mBAAmB,GAAG,UAAU,IAAI,qBAAqB;IAE/D,MAAM,iBAAiB,GAAG,UAAU,CAClC,IAAI,IAAI,SAAS,EACjB,IAAI,IAAI,IAAI,KAAK,IAAI,IAAI,wBAAwB,CAAC,IAAI,CAAC,EACvD,IAAI,IAAI,wBAAwB,CAAC,IAAI,CAAC,EACtC,SAAS,IAAI,qBAAqB,EAClC,OAAO,IAAI,kBAAkB,EAC7B,mBAAmB,IAAI,UAAU,EACjC,SAAS,EACT,EAAE,iBAAiB,EAAE,MAAM,EAAE,iBAAiB,EAAE,MAAM,EAAE,CACzD;IAED,QACE,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,iBAAiB,EAC5B,GAAG,EAAE,SAAS,EAAA,GACV,WAAW,EAAA,WAAA,EACJ,OAAO,IAAI,SAAS,EAAA,kBAAA,EACb,WAAW,EAAA,eAAA,EACd,UAAU,IAAI,SAAS,EACtC,QAAQ,EAAE,UAAU,IAAI,CAAC,qBAAqB,EAC9C,OAAO,EAAE,mBAAmB,GAAG,SAAS,GAAG,WAAW,CAAC,OAAO,EAAA,YAAA,EAClD,OAAO,GAAG,gBAAgB,GAAG,SAAS,EAAA;QAEjD,OAAO,IAAI,KAAA,CAAA,aAAA,CAAC,cAAc,EAAA,IAAA,CAAG;QAC7B,kBAAkB,CAAC,MAAM,CAAC;QAC1B,OAAO,GAAG,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,IAAA,EAAO,KAAK,CAAQ,GAAG,KAAK;AACtC,QAAA,kBAAkB,CAAC,MAAM,CAAC,CACpB;AAEb,CAAC;AAGH,UAAU,CAAC,WAAW,GAAG,YAAY;;;;"}

package/dist/components/internal/LoadingAnnouncement.d.ts

@@ -1,4 +1,10 @@
 export declare const LOADING_ANNOUNCEMENT_DELAY_MS = 500;
+/**
+ * Turns off every {@link LoadingAnnouncement} inside it while `true`. Use it
+ * when focus moves into a field during the load, because the screen reader
+ * then speaks the message only after the results appear.
+ */
+export declare const SuppressLoadingAnnouncementContext: import("react").Context<boolean>;
 /**
  * Announces `message` to screen reader users while a loading indicator is
  * shown. Render it next to the spinner, only while loading. It waits

package/dist/components/internal/LoadingAnnouncement.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LoadingAnnouncement.d.ts","sourceRoot":"","sources":["../../../src/components/internal/LoadingAnnouncement.tsx"],"names":[],"mappings":"AAGA,eAAO,MAAM,6BAA6B,MAAM,CAAA;AAEhD;;;;;GAKG;AACH,wBAAgB,mBAAmB,CAAC,EAAE,OAAO,EAAE,EAAE;IAAE,OAAO,EAAE,MAAM,CAAA;CAAE,QAYnE"}
+{"version":3,"file":"LoadingAnnouncement.d.ts","sourceRoot":"","sources":["../../../src/components/internal/LoadingAnnouncement.tsx"],"names":[],"mappings":"AAGA,eAAO,MAAM,6BAA6B,MAAM,CAAA;AAEhD;;;;GAIG;AACH,eAAO,MAAM,kCAAkC,kCAAuB,CAAA;AAEtE;;;;;GAKG;AACH,wBAAgB,mBAAmB,CAAC,EAAE,OAAO,EAAE,EAAE;IAAE,OAAO,EAAE,MAAM,CAAA;CAAE,QAcnE"}