@astryxdesign/core 0.1.5-canary.efe7cc3 → 0.1.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astryxdesign/core",
-  "version": "0.1.5-canary.efe7cc3",
+  "version": "0.1.5",
   "displayName": "XDS Core",
   "description": "The component library. Accessible, themeable React components with built-in spacing, dark mode, and StyleX styling.",
   "author": "Meta Open Source",

package/src/AlertDialog/useImperativeAlertDialog.tsx

@@ -36,6 +36,7 @@ export interface ImperativeAlertDialogReturn {
  * @example
  * ```
  * const alert = useImperativeAlertDialog();
+ *
  * const handleDelete = () => {
  *   alert.show({
  *     title: 'Delete item?',
@@ -44,6 +45,7 @@ export interface ImperativeAlertDialogReturn {
  *     onAction: async () => { await deleteItem(); alert.hide(); },
  *   });
  * };
+ *
  * return (
  *   <>
  *     <button onClick={handleDelete}>Delete</button>

package/src/Lightbox/useLightbox.tsx

@@ -76,6 +76,7 @@ export interface UseLightboxReturn {
  * @example
  * ```
  * const lightbox = useLightbox({ media: photos });
+ *
  * {photos.map((photo, i) => (
  *   <img
  *     key={photo.src}

package/src/Link/Link.tsx

@@ -274,6 +274,8 @@ export interface LinkProps extends BaseProps<
  * <Link href="/settings" color="secondary">Settings</Link>
  * <Link href="/privacy" hasUnderline>Privacy Policy</Link>
  * <Link label="Close dialog" href="/home"><Icon icon="x" /></Link>
+ *
+ * // Inline link inside text — inherits the surrounding type/size:
  * <Text type="large">
  *   Read our <Link href="/terms" type="inherit">terms</Link> first.
  * </Text>

package/src/Overlay/useOverlay.tsx

@@ -149,6 +149,7 @@ export interface UseOverlayResult {
  *   showOn: 'hover',
  *   content: <Button label="Quick view" variant="ghost" />,
  * });
+ *
  * <Card ref={overlay.containerRef} {...overlay.containerProps}>
  *   <Layout content={...} />
  *   {overlay.element}
@@ -157,7 +158,9 @@ export interface UseOverlayResult {
  *
  * @example
  * ```
+ * // Callback mode — render on demand
  * const overlay = useOverlay({ showOn: 'hover' });
+ *
  * <div ref={overlay.containerRef} {...overlay.containerProps}>
  *   <img src={src} />
  *   {overlay.renderOverlay(<Button label="Quick view" />)}

package/src/Table/index.ts

@@ -26,7 +26,6 @@ export {useTableColumnSettings} from './plugins/columnSettings';
 export {useTableColumnSettingsState} from './plugins/columnSettings';
 export {useTableColumnResize} from './plugins/columnResize';
 export {useTableStickyColumns} from './plugins/stickyColumns';
-export {useTableGroupedRows} from './plugins/groupedRows';
 export {
   useTableRowExpansion,
   useTableRowExpansionState,
@@ -103,10 +102,6 @@ export type {
 export type {UseTableColumnResizeConfig} from './plugins/columnResize';
 export type {UseTableStickyColumnsConfig} from './plugins/stickyColumns';
 export type {UseTableRowExpansionConfig} from './plugins/rowExpansion';
-export type {
-  UseTableGroupedRowsConfig,
-  UseTableGroupedRowsResult,
-} from './plugins/groupedRows';
 export type {
   UseTableFilteringConfig,
   TableFilterState,

package/src/Table/plugins/rowExpansion/useTableRowExpansion.tsx

@@ -109,7 +109,7 @@ export interface UseTableRowExpansionStateResult<
  * computing the expand-all state.
  *
  * @example
- * ```
+ * ```tsx
  * const [expandedKeys, setExpandedKeys] = useState<Set<string>>(new Set());
  * const {data, expansionConfig} = useTableRowExpansionState({
  *   baseData: tree,

package/src/VisuallyHidden/VisuallyHidden.tsx

@@ -79,9 +79,12 @@ const styles = stylex.create({
  *
  * @example
  * ```
+ * // Accessible name for an icon-only button
  * <IconButton icon="trash" label="">
  *   <VisuallyHidden>Delete incident</VisuallyHidden>
  * </IconButton>
+ *
+ * // Live region for announcements
  * <VisuallyHidden as="div" aria-live="polite">
  *   {`Moved ${task} to ${column}`}
  * </VisuallyHidden>

package/dist/Table/plugins/groupedRows/index.d.ts

@@ -1,3 +0,0 @@
-export { useTableGroupedRows } from './useTableGroupedRows';
-export type { UseTableGroupedRowsConfig, UseTableGroupedRowsResult, } from './useTableGroupedRows';
-//# sourceMappingURL=index.d.ts.map

package/dist/Table/plugins/groupedRows/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/Table/plugins/groupedRows/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAC,mBAAmB,EAAC,MAAM,uBAAuB,CAAC;AAC1D,YAAY,EACV,yBAAyB,EACzB,yBAAyB,GAC1B,MAAM,uBAAuB,CAAC"}

package/dist/Table/plugins/groupedRows/index.js

@@ -1,3 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-export { useTableGroupedRows } from "./useTableGroupedRows.js";

package/dist/Table/plugins/groupedRows/useTableGroupedRows.d.ts

@@ -1,78 +0,0 @@
-/**
- * @file useTableGroupedRows.tsx
- * @input React, StyleX, Icon, Table types + the flat data array
- * @output Exports useTableGroupedRows hook + config/result types
- * @position Grouped-rows plugin; consumed by Table via plugins prop
- *
- * SYNC: When modified, update these files to stay in sync:
- * - /packages/core/src/Table/index.ts (exports)
- */
-import { type ReactNode } from 'react';
-import type { TablePlugin } from '../../types';
-/** Configuration for {@link useTableGroupedRows}. */
-export interface UseTableGroupedRowsConfig<T extends Record<string, unknown>> {
-    /** The flat data to group. */
-    data: T[];
-    /** Derive the group key for a row. Rows with the same key share a section. */
-    groupBy: (item: T) => string;
-    /** Set of currently-collapsed group keys. */
-    collapsedGroups: Set<string>;
-    /** Called with a group key when its header is toggled. */
-    onToggleGroup: (groupKey: string) => void;
-    /**
-     * Custom renderer for a group header's content (right of the chevron).
-     * Defaults to `<groupKey> (<count>)`.
-     */
-    renderGroupHeader?: (groupKey: string, count: number, collapsed: boolean) => ReactNode;
-    /** Stable key for a real row. Falls back to a positional key when omitted. */
-    getRowKey?: (item: T) => string;
-    /** Explicit group ordering; groups not listed keep first-seen order after these. */
-    groupOrder?: string[];
-}
-export interface UseTableGroupedRowsResult<T extends Record<string, unknown>> {
-    /** Ready-to-use plugin for `<Table plugins>`. */
-    plugin: TablePlugin<T>;
-    /** Flattened rows: `[header, ...visibleRows, header, ...visibleRows]`. */
-    data: T[];
-    /**
-     * Row-key resolver (also keys synthetic headers as `__group_<key>`). Pass to
-     * `<Table idKey>` — named for parallelism with the Table prop:
-     * `<Table idKey={grouped.idKey} />`.
-     */
-    idKey: (item: T) => string;
-}
-/**
- * Groups a flat data array into collapsible section rows. Each distinct
- * `groupBy` value becomes a full-width section-header row with a chevron
- * toggle, the group label, and a member count; collapsing hides that group's
- * data rows while keeping the header visible.
- *
- * Mirrors {@link useTableRowExpansionState}: the consumer owns the
- * `collapsedGroups` set and this hook returns `{data, plugin, idKey}` —
- * pass all three to `<Table>`.
- *
- * @example
- * ```tsx
- * const [collapsed, setCollapsed] = useState<Set<string>>(new Set());
- * const grouped = useTableGroupedRows({
- *   data: rows,
- *   groupBy: r => r.team,
- *   collapsedGroups: collapsed,
- *   onToggleGroup: key =>
- *     setCollapsed(prev => {
- *       const next = new Set(prev);
- *       next.has(key) ? next.delete(key) : next.add(key);
- *       return next;
- *     }),
- *   getRowKey: r => r.id,
- * });
- * <Table
- *   data={grouped.data}
- *   columns={columns}
- *   idKey={grouped.idKey}
- *   plugins={{grouped: grouped.plugin}}
- * />;
- * ```
- */
-export declare function useTableGroupedRows<T extends Record<string, unknown>>(config: UseTableGroupedRowsConfig<T>): UseTableGroupedRowsResult<T>;
-//# sourceMappingURL=useTableGroupedRows.d.ts.map

package/dist/Table/plugins/groupedRows/useTableGroupedRows.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useTableGroupedRows.d.ts","sourceRoot":"","sources":["../../../../src/Table/plugins/groupedRows/useTableGroupedRows.tsx"],"names":[],"mappings":"AAIA;;;;;;;;GAQG;AAEH,OAAO,EAAuB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAQ3D,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,aAAa,CAAC;AAoD7C,qDAAqD;AACrD,MAAM,WAAW,yBAAyB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IAC1E,8BAA8B;IAC9B,IAAI,EAAE,CAAC,EAAE,CAAC;IACV,8EAA8E;IAC9E,OAAO,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC;IAC7B,6CAA6C;IAC7C,eAAe,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAC7B,0DAA0D;IAC1D,aAAa,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C;;;OAGG;IACH,iBAAiB,CAAC,EAAE,CAClB,QAAQ,EAAE,MAAM,EAChB,KAAK,EAAE,MAAM,EACb,SAAS,EAAE,OAAO,KACf,SAAS,CAAC;IACf,8EAA8E;IAC9E,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC;IAChC,oFAAoF;IACpF,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;CACvB;AAED,MAAM,WAAW,yBAAyB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IAC1E,iDAAiD;IACjD,MAAM,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC;IACvB,0EAA0E;IAC1E,IAAI,EAAE,CAAC,EAAE,CAAC;IACV;;;;OAIG;IACH,KAAK,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC;CAC5B;AA6DD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,wBAAgB,mBAAmB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EACnE,MAAM,EAAE,yBAAyB,CAAC,CAAC,CAAC,GACnC,yBAAyB,CAAC,CAAC,CAAC,CA8I9B"}

package/dist/Table/plugins/groupedRows/useTableGroupedRows.js

@@ -1,250 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-'use client';
-
-/**
- * @file useTableGroupedRows.tsx
- * @input React, StyleX, Icon, Table types + the flat data array
- * @output Exports useTableGroupedRows hook + config/result types
- * @position Grouped-rows plugin; consumed by Table via plugins prop
- *
- * SYNC: When modified, update these files to stay in sync:
- * - /packages/core/src/Table/index.ts (exports)
- */
-import { useCallback, useMemo } from 'react';
-import * as stylex from '@stylexjs/stylex';
-import "../../../theme/tokens.stylex.js";
-import { spacingVars, colorVars, fontWeightVars } from "../../../theme/tokens.stylex.js";
-import { Icon } from "../../../Icon/index.js";
-import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
-// A synthetic group-header row injected into the flattened data. Real rows
-// never carry this marker.
-const GROUP_HEADER = Symbol('tableGroupHeader');
-function isGroupHeader(item) {
-  return typeof item === 'object' && item !== null && item[GROUP_HEADER] === true;
-}
-
-// Proxy handler: any field access beyond the marker fields resolves to `''`
-// so user cell renderers (`item.name.toUpperCase()`) never throw on a header.
-const HEADER_PROXY_HANDLER = {
-  // eslint-disable-next-line @typescript-eslint/promise-function-async -- Proxy get trap, not a promise-returning fn
-  get(t, prop) {
-    if (prop === GROUP_HEADER || prop === 'groupKey' || prop === 'count') {
-      return t[prop];
-    }
-    return prop in t ? t[prop] : '';
-  }
-};
-
-/**
- * Build a synthetic header row wrapped in a Proxy so arbitrary field access
- * from user cell renderers (e.g. `item.name.toUpperCase()`) resolves to `''`
- * instead of throwing — BaseTable evaluates `col.renderCell(item)` on every
- * row (including synthetic headers) before `transformBodyRow` can replace the
- * row's cells. `transformBodyRow` then discards those cells and renders a
- * single full-width header cell.
- */
-function makeHeader(groupKey, count) {
-  const target = {
-    [GROUP_HEADER]: true,
-    groupKey,
-    count
-  };
-  return new Proxy(target, HEADER_PROXY_HANDLER);
-}
-
-/** Configuration for {@link useTableGroupedRows}. */
-
-const styles = {
-  headerRow: {
-    kkrTdU: "x1ypdohk",
-    kfSwDN: "x87ps6o",
-    kWkggS: "xwmxj5m",
-    kt9PQ7: "xso031l",
-    kfdmCh: "x1q0q8m5",
-    kL6WhQ: "xw8gpjh",
-    $$css: true
-  }
-};
-
-/**
- * Groups a flat data array into collapsible section rows. Each distinct
- * `groupBy` value becomes a full-width section-header row with a chevron
- * toggle, the group label, and a member count; collapsing hides that group's
- * data rows while keeping the header visible.
- *
- * Mirrors {@link useTableRowExpansionState}: the consumer owns the
- * `collapsedGroups` set and this hook returns `{data, plugin, idKey}` —
- * pass all three to `<Table>`.
- *
- * @example
- * ```tsx
- * const [collapsed, setCollapsed] = useState<Set<string>>(new Set());
- * const grouped = useTableGroupedRows({
- *   data: rows,
- *   groupBy: r => r.team,
- *   collapsedGroups: collapsed,
- *   onToggleGroup: key =>
- *     setCollapsed(prev => {
- *       const next = new Set(prev);
- *       next.has(key) ? next.delete(key) : next.add(key);
- *       return next;
- *     }),
- *   getRowKey: r => r.id,
- * });
- * <Table
- *   data={grouped.data}
- *   columns={columns}
- *   idKey={grouped.idKey}
- *   plugins={{grouped: grouped.plugin}}
- * />;
- * ```
- */
-export function useTableGroupedRows(config) {
-  const {
-    data,
-    groupBy,
-    collapsedGroups,
-    onToggleGroup,
-    renderGroupHeader,
-    getRowKey: getRowKeyProp,
-    groupOrder
-  } = config;
-  const flattened = useMemo(() => {
-    if (data.length === 0) {
-      return [];
-    }
-
-    // Group preserving first-seen order.
-    const groups = new Map();
-    for (const item of data) {
-      const key = groupBy(item);
-      const bucket = groups.get(key);
-      if (bucket) {
-        bucket.push(item);
-      } else {
-        groups.set(key, [item]);
-      }
-    }
-
-    // Determine iteration order.
-    let keys = [...groups.keys()];
-    if (groupOrder && groupOrder.length > 0) {
-      const ordered = groupOrder.filter(k => groups.has(k));
-      const rest = keys.filter(k => !groupOrder.includes(k));
-      keys = [...ordered, ...rest];
-    }
-    const out = [];
-    for (const key of keys) {
-      const rows = groups.get(key) ?? [];
-      out.push(makeHeader(key, rows.length));
-      if (!collapsedGroups.has(key)) {
-        out.push(...rows);
-      }
-    }
-    return out;
-  }, [data, groupBy, collapsedGroups, groupOrder]);
-
-  // Positional fallback index, built once per flattened array so key lookup
-  // stays O(1) instead of O(n) per row (which would make table keying O(n²)).
-  const positionByItem = useMemo(() => {
-    if (getRowKeyProp) {
-      return null;
-    }
-    const map = new Map();
-    for (let i = 0; i < flattened.length; i++) {
-      map.set(flattened[i], i);
-    }
-    return map;
-  }, [flattened, getRowKeyProp]);
-  const idKey = useCallback(item => {
-    if (isGroupHeader(item)) {
-      return `__group_${item.groupKey}`;
-    }
-    if (getRowKeyProp) {
-      return getRowKeyProp(item);
-    }
-    return String(positionByItem?.get(item) ?? -1);
-  }, [getRowKeyProp, positionByItem]);
-  const plugin = useMemo(() => ({
-    // Replace a header row's pre-rendered cells with one full-width cell.
-    transformBodyRow(props, item) {
-      if (!isGroupHeader(item)) {
-        return props;
-      }
-      const header = item;
-      const collapsed = collapsedGroups.has(header.groupKey);
-      const toggle = () => onToggleGroup(header.groupKey);
-      const content = renderGroupHeader ? renderGroupHeader(header.groupKey, header.count, collapsed) : /*#__PURE__*/_jsxDEV("span", {
-        ...{
-          className: "x2mo6ok x1tgivj0"
-        },
-        children: [header.groupKey, ' ', /*#__PURE__*/_jsxDEV("span", {
-          ...{
-            className: "x1sodnla xv1l7n4"
-          },
-          children: ["(", header.count, ")"]
-        }, void 0, true)]
-      }, void 0, true);
-      return {
-        ...props,
-        htmlProps: {
-          ...props.htmlProps,
-          // Convenience: clicking anywhere on the row toggles it. The chevron
-          // button below is the accessible, keyboard-operable control, so the
-          // row keeps its implicit `row` role (no role override here).
-          onClick: toggle,
-          'aria-expanded': !collapsed
-        },
-        styles: [...props.styles, styles.headerRow],
-        children:
-        /*#__PURE__*/
-        // colSpan larger than the column count is clamped by the browser
-        // to the actual number of columns, so the header always spans the
-        // full width without the plugin knowing the column count.
-        _jsxDEV("td", {
-          colSpan: 999,
-          ...{
-            className: "xce4md1 x1vsv5vr x1t818jl"
-          },
-          children: /*#__PURE__*/_jsxDEV("span", {
-            ...{
-              className: "x78zum5 x6s0dn4 xzye2dw"
-            },
-            children: [/*#__PURE__*/_jsxDEV("button", {
-              type: "button",
-              ...{
-                className: "x3nfvp2 x6s0dn4 xl56j7k x2lah0s x1717udv x1ghz6dp x1ypdohk xv9yike x1cqbx0l"
-              },
-              onClick: e => {
-                e.stopPropagation();
-                toggle();
-              },
-              "aria-label": collapsed ? `Expand group ${header.groupKey}` : `Collapse group ${header.groupKey}`,
-              "aria-expanded": !collapsed,
-              children: /*#__PURE__*/_jsxDEV("span", {
-                ...{
-                  0: {
-                    className: "x3nfvp2 x11xpdln xx6bhzk"
-                  },
-                  1: {
-                    className: "x3nfvp2 x11xpdln xx6bhzk x1iffjtl"
-                  }
-                }[!!!collapsed << 0],
-                children: /*#__PURE__*/_jsxDEV(Icon, {
-                  icon: "chevronRight",
-                  size: "xsm"
-                }, void 0, false)
-              }, void 0, false)
-            }, void 0, false), content]
-          }, void 0, true)
-        }, void 0, false)
-      };
-    }
-  }), [collapsedGroups, onToggleGroup, renderGroupHeader]);
-  return {
-    plugin,
-    data: flattened,
-    idKey
-  };
-}

package/src/Table/plugins/groupedRows/index.ts

@@ -1,7 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-export {useTableGroupedRows} from './useTableGroupedRows';
-export type {
-  UseTableGroupedRowsConfig,
-  UseTableGroupedRowsResult,
-} from './useTableGroupedRows';