@gntik-ai/blocks 0.6.0 → 0.8.0

package/src/tables/LoadMoreFooter/examples/flag.tsx

@@ -0,0 +1,33 @@
+import { useState } from 'react';
+import { LoadMoreFooter } from '../LoadMoreFooter';
+import { LOAD_MORE_RECORDS } from '../fixtures';
+
+export default function FlagExample() {
+  const [state, setState] = useState({ rows: LOAD_MORE_RECORDS.slice(0, 2), hasMore: true, loading: false, error: '' });
+  const [lastAppend, setLastAppend] = useState<{ seq: number; count: number }>();
+  const load = async () => {
+    setState((previous) => ({ ...previous, loading: true }));
+    const batch = await Promise.resolve(LOAD_MORE_RECORDS.slice(2));
+    // Same-tick updates are batched: settle loading=false together with the result. Split settles are unsupported.
+    setState((previous) => ({ rows: [...previous.rows, ...batch], hasMore: false, loading: false, error: '' }));
+    setLastAppend({ seq: 1, count: batch.length });
+  };
+  return (
+    <div className="space-y-4">
+      <ul>
+        {state.rows.map((row) => (
+          <li key={row.id}>{row.name}</li>
+        ))}
+      </ul>
+      <LoadMoreFooter
+        hasMore={state.hasMore}
+        loading={state.loading}
+        error={state.error}
+        loadedCount={state.rows.length}
+        lastAppend={lastAppend}
+        onLoadMore={load}
+        exhaustedFocusTarget="root"
+      />
+    </div>
+  );
+}

package/src/tables/LoadMoreFooter/examples/useMockCursor.ts

@@ -0,0 +1,30 @@
+import { useState } from 'react';
+import { LOAD_MORE_RECORDS } from '../fixtures';
+
+/** Mock consumer: real consumers normalize cursors and preserve their filters here. */
+export function useMockCursor() {
+  const [state, setState] = useState({
+    rows: LOAD_MORE_RECORDS.slice(0, 2),
+    nextCursor: 'c1' as string | null,
+    loading: false,
+    error: '',
+    lastAppend: undefined as { seq: number; count: number } | undefined,
+  });
+  const load = async (cursor?: string) => {
+    setState((previous) => ({ ...previous, loading: true }));
+    try {
+      const batch = await Promise.resolve(cursor === 'c1' ? LOAD_MORE_RECORDS.slice(2) : []);
+      // Settle loading=false and the result together in one update. Split settles are unsupported.
+      setState((previous) => ({
+        rows: [...previous.rows, ...batch],
+        nextCursor: null,
+        loading: false,
+        error: '',
+        lastAppend: { seq: (previous.lastAppend?.seq ?? 0) + 1, count: batch.length },
+      }));
+    } catch {
+      setState((previous) => ({ ...previous, loading: false, error: 'Could not load more items.' }));
+    }
+  };
+  return { ...state, load };
+}

package/src/tables/LoadMoreFooter/fixtures.ts

@@ -0,0 +1,9 @@
+/** Meaningful defaults for the no-props catalogue preview. */
+export const LOAD_MORE_PREVIEW = { nextCursor: 'page-2', loadedCount: 20 } as const;
+
+export const LOAD_MORE_RECORDS = [
+  { id: 'r1', name: 'Record 1', status: 'Ready' },
+  { id: 'r2', name: 'Record 2', status: 'Ready' },
+  { id: 'r3', name: 'Record 3', status: 'Ready' },
+  { id: 'r4', name: 'Record 4', status: 'Ready' },
+];

package/src/tables/LoadMoreFooter/useLoadMoreFooter.ts

@@ -0,0 +1,56 @@
+import { useAnnounce } from '@gntik-ai/ui';
+import { useCallback, useEffect, useLayoutEffect, useRef } from 'react';
+
+/** Capture focus before React removes the control, then restore it after the replacement commits. */
+export function useLoadMoreFooter(
+  control: 'button' | 'retry' | 'none',
+  target: 'summary' | 'root',
+  loading: boolean,
+  error: string,
+) {
+  const rootRef = useRef<HTMLDivElement>(null);
+  const summaryRef = useRef<HTMLParagraphElement>(null);
+  const currentControl = useRef<HTMLElement | null>(null);
+  const moveFocus = useRef(false);
+  const inFlightCursorRef = useRef<string | undefined>(undefined);
+  useEffect(() => {
+    // A successful settle releases the cursor; later external failures use nextCursor.
+    if (!loading && !error) inFlightCursorRef.current = undefined;
+  }, [loading, error]);
+  const controlRef = useCallback((node: HTMLElement | null) => {
+    if (!node && currentControl.current?.contains(document.activeElement)) moveFocus.current = true;
+    currentControl.current = node;
+  }, []);
+
+  useLayoutEffect(() => {
+    if (!moveFocus.current) return;
+    moveFocus.current = false;
+    const nextControl = currentControl.current;
+    const next = nextControl?.matches('button') ? nextControl : nextControl?.querySelector('button');
+    (next ?? (target === 'root' ? rootRef.current : summaryRef.current))?.focus();
+  }, [control, target]);
+
+  return { rootRef, summaryRef, controlRef, inFlightCursorRef };
+}
+
+/** Track committed results; mounting and intermediate loading states remain silent. */
+export function useLoadMoreAnnouncements(
+  loading: boolean,
+  error: string,
+  lastAppend: { seq: number; count: number } | undefined,
+  loadedAnnouncement: (count: number) => string,
+) {
+  const announce = useAnnounce();
+  const previous = useRef({ loading, error });
+  const lastSeq = useRef(lastAppend?.seq);
+  useEffect(() => {
+    const before = previous.current;
+    previous.current = { loading, error };
+    if (!loading && error && (before.loading || before.error !== error)) announce(error, 'assertive');
+  }, [loading, error, announce]);
+  useEffect(() => {
+    if (!lastAppend || (lastSeq.current !== undefined && lastAppend.seq <= lastSeq.current)) return;
+    lastSeq.current = lastAppend.seq;
+    if (lastAppend.count > 0) announce(loadedAnnouncement(lastAppend.count), 'polite');
+  }, [lastAppend, loadedAnnouncement, announce]);
+}

package/src/tables/index.ts

@@ -35,7 +35,11 @@ export * from './FilterBar/FilterBar';
 export { meta as filterBarMeta } from './FilterBar/block.meta';
 export { DEPLOYMENT_DEFAULT_FILTERS, DEPLOYMENT_FILTER_FIELDS, DEPLOYMENT_SAVED_VIEWS } from './FilterBar/fixtures';
 export * from './PaginationFooter/PaginationFooter';
+export * from './CursorPagerFooter/CursorPagerFooter';
+export { meta as cursorPagerFooterMeta } from './CursorPagerFooter/block.meta';
 export { meta as paginationFooterMeta } from './PaginationFooter/block.meta';
+export * from './LoadMoreFooter/LoadMoreFooter';
+export { meta as loadMoreFooterMeta } from './LoadMoreFooter/block.meta';
 export * from './TruncatedCollectionFooter/TruncatedCollectionFooter';
 export { meta as truncatedCollectionFooterMeta } from './TruncatedCollectionFooter/block.meta';
 export * from './InlineEditRow/InlineEditRow';

package/src/test/CredentialDisclosureDialog.compatibility.tsx

@@ -0,0 +1,30 @@
+import {
+  CredentialDisclosureDialog,
+  type CredentialDisclosureDialogProps,
+} from '../forms/CredentialDisclosureDialog/CredentialDisclosureDialog';
+import { storedDisclosure } from '../forms/CredentialDisclosureDialog/fixtures';
+
+/** Compile-only consumer fixture for every pre-amendment prop. */
+export function LegacyCredentialDisclosure() {
+  const props: CredentialDisclosureDialogProps = {
+    disclosure: storedDisclosure,
+    onClose: () => {},
+    resolveReturnFocus: () => null,
+    fallbackFocus: () => null,
+    title: 'Credential',
+    description: 'Keep this value safe.',
+    credentialIdLabel: 'Identifier',
+    expiryLabel: 'Expiry',
+    secretLabel: 'Secret',
+    showLabel: 'Show',
+    hideLabel: 'Hide',
+    copyLabel: 'Copy',
+    copiedLabel: 'Copied',
+    successAnnouncement: 'Copied safely',
+    failureAnnouncement: 'Copy manually',
+    warningTitle: 'Save this value',
+    warningText: 'Shown once',
+    closeLabel: 'Close',
+  };
+  return <CredentialDisclosureDialog {...props} />;
+}