@smwb/ui-react 2.6.3 → 2.8.0

package/dist/components/dataDisplay/accordion/accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"accordion.js","sources":["../../../../src/components/dataDisplay/accordion/accordion.tsx"],"sourcesContent":["import React, { forwardRef, ReactNode, useState } from \"react\";\nimport cn from \"clsx\";\nimport AnimateHeight from \"../../base/animateHeight/animateHeight\";\nimport Icon from \"../../base/icon/icon\";\nimport { useId } from \"../../../hooks/useId\";\n\nexport interface AccordionProps {\n  className?: string;\n  title?: string;\n  isOpenByDefault?: boolean;\n  /** Controlled open state. When set, the component is controlled. */\n  open?: boolean;\n  /** Disable toggling. */\n  disabled?: boolean;\n  /** Custom expand icon (replaces the default chevron). */\n  icon?: ReactNode;\n  id?: string;\n  children?: React.ReactNode;\n  startAdornment?: (isOpen: boolean) => React.ReactNode;\n  noIcon?: boolean;\n  onToggleClick?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;\n  /** Fired with the next open state on toggle. */\n  onChange?: (open: boolean) => void;\n}\n\nexport const Accordion = forwardRef<HTMLDivElement, AccordionProps>(function Accordion(\n  {\n    className,\n    title,\n    isOpenByDefault = false,\n    open,\n    disabled,\n    icon,\n    id: idProp,\n    children,\n    startAdornment,\n    noIcon,\n    onToggleClick,\n    onChange,\n  },\n  ref\n) {\n  const isControlled = open !== undefined;\n  const [internalOpen, setInternalOpen] = useState<boolean>(isOpenByDefault);\n  const isOpen = isControlled ? !!open : internalOpen;\n  const baseId = useId(idProp);\n  const contentId = `${baseId}-content`;\n  const headerId = `${baseId}-header`;\n\n  const arrowIconClasses = cn(\"smwb-accordion__arrow-icon\", { \"smwb-accordion__arrow-icon_opened\": isOpen });\n\n  const toggle = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n    if (disabled) {\n      return;\n    }\n    const next = !isOpen;\n    if (!isControlled) {\n      setInternalOpen(next);\n    }\n    onChange?.(next);\n    onToggleClick?.(e);\n  };\n\n  return (\n    <div ref={ref} className={cn(\"smwb-accordion\", { \"smwb-disabled\": disabled }, className)} data-testid=\"accordion\">\n      <button\n        id={headerId}\n        className=\"smwb-accordion__header\"\n        onClick={toggle}\n        type=\"button\"\n        disabled={disabled}\n        aria-expanded={isOpen}\n        aria-controls={children ? contentId : undefined}\n      >\n        {startAdornment?.(isOpen)}\n        <span className=\"smwb-accordion__title\">{title}</span>\n        {!noIcon && (icon ?? <Icon className={arrowIconClasses} name=\"expand_more\" size={24} />)}\n      </button>\n\n      {children && (\n        <div id={contentId} role=\"region\" aria-labelledby={headerId}>\n          <AnimateHeight\n            height={isOpen ? \"auto\" : 0}\n            animateOpacity={true}\n            duration={300}\n            className=\"smwb-accordion__content\"\n          >\n            {children}\n          </AnimateHeight>\n        </div>\n      )}\n    </div>\n  );\n});\n\nexport default Accordion;\n"],"names":["Accordion","forwardRef","className","title","isOpenByDefault","open","disabled","icon","idProp","children","startAdornment","noIcon","onToggleClick","onChange","ref","isControlled","internalOpen","setInternalOpen","useState","isOpen","baseId","useId","contentId","headerId","arrowIconClasses","cn","toggle","e","next","jsxs","jsx","Icon","AnimateHeight"],"mappings":";;;;;;;AA0BO,MAAMA,IAAYC,EAA2C,SAClE;AAAA,EACE,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,iBAAAC,IAAkB;AAAA,EAClB,MAAAC;AAAA,EACA,UAAAC;AAAA,EACA,MAAAC;AAAA,EACA,IAAIC;AAAA,EACJ,UAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,QAAAC;AAAA,EACA,eAAAC;AAAA,EACA,UAAAC;AACF,GACAC,GACA;AACA,QAAMC,IAAeV,MAAS,QACxB,CAACW,GAAcC,CAAe,IAAIC,EAAkBd,CAAe,GACnEe,IAASJ,IAAe,CAAC,CAACV,IAAOW,GACjCI,IAASC,EAAMb,CAAM,GACrBc,IAAY,GAAGF,CAAM,YACrBG,IAAW,GAAGH,CAAM,WAEpBI,IAAmBC,EAAG,8BAA8B,EAAE,qCAAqCN,GAAQ,GAEnGO,IAAS,CAACC,MAAuD;AACrE,QAAIrB;AACF;AAEF,UAAMsB,IAAO,CAACT;AACd,IAAKJ,KACHE,EAAgBW,CAAI,GAEtBf,KAAA,QAAAA,EAAWe,IACXhB,KAAA,QAAAA,EAAgBe;AAAA,EAClB;AAEA,SACE,gBAAAE,EAAC,OAAA,EAAI,KAAAf,GAAU,WAAWW,EAAG,kBAAkB,EAAE,iBAAiBnB,EAAA,GAAYJ,CAAS,GAAG,eAAY,aACpG,UAAA;AAAA,IAAA,gBAAA2B;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAIN;AAAA,QACJ,WAAU;AAAA,QACV,SAASG;AAAA,QACT,MAAK;AAAA,QACL,UAAApB;AAAA,QACA,iBAAea;AAAA,QACf,iBAAeV,IAAWa,IAAY;AAAA,QAErC,UAAA;AAAA,UAAAZ,KAAA,gBAAAA,EAAiBS;AAAA,UAClB,gBAAAW,EAAC,QAAA,EAAK,WAAU,yBAAyB,UAAA3B,GAAM;AAAA,UAC9C,CAACQ,MAAWJ,KAAA,OAAAA,IAAQ,gBAAAuB,EAACC,GAAA,EAAK,WAAWP,GAAkB,MAAK,eAAc,MAAM,GAAA,CAAI;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAGtFf,uBACE,OAAA,EAAI,IAAIa,GAAW,MAAK,UAAS,mBAAiBC,GACjD,UAAA,gBAAAO;AAAA,MAACE;AAAA,MAAA;AAAA,QACC,QAAQb,IAAS,SAAS;AAAA,QAC1B,gBAAgB;AAAA,QAChB,UAAU;AAAA,QACV,WAAU;AAAA,QAET,UAAAV;AAAA,MAAA;AAAA,IAAA,EACH,CACF;AAAA,EAAA,GAEJ;AAEJ,CAAC;"}
+{"version":3,"file":"accordion.js","sources":["../../../../src/components/dataDisplay/accordion/accordion.tsx"],"sourcesContent":["import React, { forwardRef, ReactNode, useState } from \"react\";\nimport cn from \"clsx\";\nimport AnimateHeight, { type Height } from \"../../base/animateHeight/animateHeight\";\nimport Icon from \"../../base/icon/icon\";\nimport { useId } from \"../../../hooks/useId\";\n\n/**\n * `filled` — the header is an app-bar strip on a raised panel (the original look).\n * `outlined` — a bordered card with a flat header: for feeds of records.\n * `plain` — no frame, a divider under each panel: for FAQ-style lists.\n * The flat variants stretch to the container and wrap long titles.\n */\nexport type AccordionVariant = \"filled\" | \"outlined\" | \"plain\";\n\nexport interface AccordionProps {\n  className?: string;\n  /** Header text or markup (a date, an author, a badge…). */\n  title?: ReactNode;\n  /** Secondary line under the title. */\n  subtitle?: ReactNode;\n  variant?: AccordionVariant;\n  isOpenByDefault?: boolean;\n  /** Controlled open state. When set, the component is controlled. */\n  open?: boolean;\n  /** Disable toggling. */\n  disabled?: boolean;\n  /** Custom expand icon (replaces the default chevron). */\n  icon?: ReactNode;\n  id?: string;\n  children?: React.ReactNode;\n  startAdornment?: (isOpen: boolean) => React.ReactNode;\n  /** Rendered after the title, before the expand icon. */\n  endAdornment?: (isOpen: boolean) => React.ReactNode;\n  noIcon?: boolean;\n  /** Create the content on first open instead of up front. */\n  lazy?: boolean;\n  /** Remove the content once the panel has collapsed (created again on open). */\n  unmountOnExit?: boolean;\n  onToggleClick?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;\n  /** Fired with the next open state on toggle. */\n  onChange?: (open: boolean) => void;\n}\n\nexport const Accordion = forwardRef<HTMLDivElement, AccordionProps>(function Accordion(\n  {\n    className,\n    title,\n    subtitle,\n    variant = \"filled\",\n    isOpenByDefault = false,\n    open,\n    disabled,\n    icon,\n    id: idProp,\n    children,\n    startAdornment,\n    endAdornment,\n    noIcon,\n    lazy,\n    unmountOnExit,\n    onToggleClick,\n    onChange,\n  },\n  ref\n) {\n  const isControlled = open !== undefined;\n  const [internalOpen, setInternalOpen] = useState<boolean>(isOpenByDefault);\n  const isOpen = isControlled ? !!open : internalOpen;\n  const baseId = useId(idProp);\n  const contentId = `${baseId}-content`;\n  const headerId = `${baseId}-header`;\n\n  // Deferred content (lazy / unmountOnExit) exists only once the panel has been\n  // opened; unmountOnExit drops it again when the collapse animation ends.\n  const deferred = Boolean(lazy || unmountOnExit);\n  const [present, setPresent] = useState<boolean>(isOpen);\n  if (isOpen && !present) {\n    setPresent(true);\n  }\n  const onCollapsed = (height: Height) => {\n    if (height === 0 && unmountOnExit && !isOpen) {\n      setPresent(false);\n    }\n  };\n  // A deferred panel keeps its region (it has nothing to test yet); otherwise\n  // the region is there when there is content.\n  const hasContent = deferred ? children !== undefined : Boolean(children);\n\n  const arrowIconClasses = cn(\"smwb-accordion__arrow-icon\", { \"smwb-accordion__arrow-icon_opened\": isOpen });\n\n  const toggle = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n    if (disabled) {\n      return;\n    }\n    const next = !isOpen;\n    if (!isControlled) {\n      setInternalOpen(next);\n    }\n    onChange?.(next);\n    onToggleClick?.(e);\n  };\n\n  return (\n    <div\n      ref={ref}\n      className={cn(\"smwb-accordion\", `smwb-accordion_${variant}`, { \"smwb-disabled\": disabled }, className)}\n      data-testid=\"accordion\"\n    >\n      <button\n        id={headerId}\n        className=\"smwb-accordion__header\"\n        onClick={toggle}\n        type=\"button\"\n        disabled={disabled}\n        aria-expanded={isOpen}\n        aria-controls={hasContent ? contentId : undefined}\n      >\n        {startAdornment?.(isOpen)}\n        <span className=\"smwb-accordion__heading\">\n          <span className=\"smwb-accordion__title\">{title}</span>\n          {subtitle ? <span className=\"smwb-accordion__subtitle\">{subtitle}</span> : null}\n        </span>\n        {endAdornment ? <span className=\"smwb-accordion__end\">{endAdornment(isOpen)}</span> : null}\n        {!noIcon && (icon ?? <Icon className={arrowIconClasses} name=\"expand_more\" size={24} />)}\n      </button>\n\n      {hasContent && (\n        <div id={contentId} role=\"region\" aria-labelledby={headerId}>\n          <AnimateHeight\n            height={isOpen ? \"auto\" : 0}\n            animateOpacity={true}\n            duration={300}\n            className=\"smwb-accordion__content\"\n            onHeightAnimationEnd={onCollapsed}\n          >\n            {!deferred || present ? children : null}\n          </AnimateHeight>\n        </div>\n      )}\n    </div>\n  );\n});\n\nexport default Accordion;\n"],"names":["Accordion","forwardRef","className","title","subtitle","variant","isOpenByDefault","open","disabled","icon","idProp","children","startAdornment","endAdornment","noIcon","lazy","unmountOnExit","onToggleClick","onChange","ref","isControlled","internalOpen","setInternalOpen","useState","isOpen","baseId","useId","contentId","headerId","deferred","present","setPresent","onCollapsed","height","hasContent","arrowIconClasses","cn","toggle","e","next","jsxs","jsx","Icon","AnimateHeight"],"mappings":"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"}

package/dist/components/dataDisplay/assetGrid/assetGrid.js

@@ -1,9 +1,10 @@
 import { jsx as e } from "react/jsx-runtime";
-import '../../../assets/styles/less/components/assetGrid/assetGrid.entry.css';/* empty css                                                             */
+import '../../../assets/styles/less/components/assetGrid/assetGrid.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
+/* empty css                                                             */
 import _, { useRef as H, useState as h, useEffect as I, useMemo as O } from "react";
 import T from "clsx";
 import { useVirtualList as W } from "../../../hooks/useVirtualList.js";
-function L({
+function V({
   items: l,
   renderItem: f,
   minColumn: d = 160,
@@ -16,7 +17,7 @@ function L({
   className: N,
   style: R
 }) {
-  const g = H(null), [c, A] = h(0), [M, S] = h(0), [z, $] = h(!1);
+  const g = H(null), [m, A] = h(0), [M, S] = h(0), [z, $] = h(!1);
   I(() => {
     const s = g.current;
     if (!s || typeof ResizeObserver == "undefined") return;
@@ -26,14 +27,14 @@ function L({
     return t.observe(s), () => t.disconnect();
   }, []);
   const o = O(
-    () => c <= 0 ? 1 : Math.max(1, Math.floor((c + r) / (d + r))),
-    [c, r, d]
+    () => m <= 0 ? 1 : Math.max(1, Math.floor((m + r) / (d + r))),
+    [m, r, d]
   ), C = Math.ceil(l.length / o), i = W({
     itemCount: C,
     itemHeight: a + r,
     viewportHeight: M || 1,
     overscan: v
-  }), u = {
+  }), p = {
     display: "grid",
     gridTemplateColumns: `repeat(auto-fill, minmax(${d}px, 1fr))`,
     gap: r,
@@ -46,23 +47,23 @@ function L({
     marginBottom: r
   };
   let n;
-  return b ? n = /* @__PURE__ */ e("div", { className: "smwb-asset-grid__plain", style: u, children: Array.from({ length: w }).map((s, t) => /* @__PURE__ */ e("div", { className: "smwb-asset-grid__skeleton", style: { height: a } }, t)) }) : l.length === 0 ? n = /* @__PURE__ */ e("div", { className: "smwb-asset-grid__empty", children: x }) : z ? n = /* @__PURE__ */ e("div", { className: "smwb-asset-grid__sizer", style: { height: i.totalHeight, position: "relative" }, children: /* @__PURE__ */ e(
+  return b ? n = /* @__PURE__ */ e("div", { className: "smwb-asset-grid__plain", style: p, children: Array.from({ length: w }).map((s, t) => /* @__PURE__ */ e("div", { className: "smwb-asset-grid__skeleton", style: { height: a } }, t)) }) : l.length === 0 ? n = /* @__PURE__ */ e("div", { className: "smwb-asset-grid__empty", children: x }) : z ? n = /* @__PURE__ */ e("div", { className: "smwb-asset-grid__sizer", style: { height: i.totalHeight, position: "relative" }, children: /* @__PURE__ */ e(
     "div",
     {
       className: "smwb-asset-grid__band",
       style: { position: "absolute", top: 0, left: 0, right: 0, transform: `translateY(${i.offsetY}px)` },
       children: Array.from({ length: Math.max(0, i.endIndex - i.startIndex) }).map((s, t) => {
-        const p = i.startIndex + t;
+        const u = i.startIndex + t;
         return /* @__PURE__ */ e("div", { className: "smwb-asset-grid__row", style: F, children: Array.from({ length: o }).map((Y, y) => {
-          const m = p * o + y;
-          return m < l.length ? /* @__PURE__ */ e(_.Fragment, { children: f(l[m], m) }, y) : null;
-        }) }, p);
+          const c = u * o + y;
+          return c < l.length ? /* @__PURE__ */ e(_.Fragment, { children: f(l[c], c) }, y) : null;
+        }) }, u);
       })
     }
-  ) }) : n = /* @__PURE__ */ e("div", { className: "smwb-asset-grid__plain", style: u, children: l.map((s, t) => /* @__PURE__ */ e(_.Fragment, { children: f(s, t) }, t)) }), /* @__PURE__ */ e("div", { ref: g, className: T("smwb-asset-grid", N), style: R, onScroll: i.onScroll, children: n });
+  ) }) : n = /* @__PURE__ */ e("div", { className: "smwb-asset-grid__plain", style: p, children: l.map((s, t) => /* @__PURE__ */ e(_.Fragment, { children: f(s, t) }, t)) }), /* @__PURE__ */ e("div", { ref: g, className: T("smwb-asset-grid", N), style: R, onScroll: i.onScroll, children: n });
 }
 export {
-  L as AssetGrid,
-  L as default
+  V as AssetGrid,
+  V as default
 };
 //# sourceMappingURL=assetGrid.js.map

package/dist/components/dataDisplay/assetGrid/assetGrid.js.map

@@ -1 +1 @@
-{"version":3,"file":"assetGrid.js","sources":["../../../../src/components/dataDisplay/assetGrid/assetGrid.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useRef, useState } from \"react\";\nimport cn from \"clsx\";\nimport { useVirtualList } from \"../../../hooks/useVirtualList\";\n\nexport interface AssetGridProps<T> {\n  items: T[];\n  /** Render one cell. `index` is the absolute index into `items`. */\n  renderItem: (item: T, index: number) => React.ReactNode;\n  /** Minimum column width (px); drives the column count from the measured width. Default 160. */\n  minColumn?: number;\n  /** Fixed cell height (px). */\n  rowHeight: number;\n  /** Gap (px) between cells on both axes. Default 8. */\n  gap?: number;\n  /** Extra rows rendered above/below the viewport. Default 2. */\n  overscan?: number;\n  loading?: boolean;\n  /** Skeleton tile count while loading. Default 12. */\n  loadingCount?: number;\n  emptyLabel?: React.ReactNode;\n  className?: string;\n  style?: React.CSSProperties;\n}\n\n/**\n * A virtualized, data-shape-agnostic asset grid: measures its own width to pick a\n * column count, windows rows via `useVirtualList`, and renders only the visible\n * cells through a `renderItem` slot — with loading skeletons + an empty state. The\n * windowing math every catalog app reimplements, upstreamed. SSR-safe: before it\n * can measure (server + first paint) it renders a plain auto-fill grid of all\n * items, then virtualizes after mount.\n */\nexport function AssetGrid<T>({\n  items,\n  renderItem,\n  minColumn = 160,\n  rowHeight,\n  gap = 8,\n  overscan = 2,\n  loading,\n  loadingCount = 12,\n  emptyLabel,\n  className,\n  style,\n}: AssetGridProps<T>): React.ReactElement {\n  const viewportRef = useRef<HTMLDivElement | null>(null);\n  const [width, setWidth] = useState(0);\n  const [height, setHeight] = useState(0);\n  const [ready, setReady] = useState(false);\n\n  useEffect(() => {\n    const el = viewportRef.current;\n    if (!el || typeof ResizeObserver === \"undefined\") return;\n    const ro = new ResizeObserver(() => {\n      setWidth(el.clientWidth);\n      setHeight(el.clientHeight);\n      setReady(true);\n    });\n    ro.observe(el);\n    return () => ro.disconnect();\n  }, []);\n\n  const cols = useMemo(\n    () => (width <= 0 ? 1 : Math.max(1, Math.floor((width + gap) / (minColumn + gap)))),\n    [width, gap, minColumn]\n  );\n  const rowCount = Math.ceil(items.length / cols);\n  const vl = useVirtualList({\n    itemCount: rowCount,\n    itemHeight: rowHeight + gap,\n    viewportHeight: height || 1,\n    overscan,\n  });\n\n  const plainStyle: React.CSSProperties = {\n    display: \"grid\",\n    gridTemplateColumns: `repeat(auto-fill, minmax(${minColumn}px, 1fr))`,\n    gap,\n    gridAutoRows: rowHeight,\n  };\n  const rowStyle: React.CSSProperties = {\n    display: \"grid\",\n    gridTemplateColumns: `repeat(${cols}, minmax(0, 1fr))`,\n    gap,\n    height: rowHeight,\n    marginBottom: gap,\n  };\n\n  let body: React.ReactNode;\n  if (loading) {\n    body = (\n      <div className=\"smwb-asset-grid__plain\" style={plainStyle}>\n        {Array.from({ length: loadingCount }).map((_, i) => (\n          <div key={i} className=\"smwb-asset-grid__skeleton\" style={{ height: rowHeight }} />\n        ))}\n      </div>\n    );\n  } else if (items.length === 0) {\n    body = <div className=\"smwb-asset-grid__empty\">{emptyLabel}</div>;\n  } else if (!ready) {\n    body = (\n      <div className=\"smwb-asset-grid__plain\" style={plainStyle}>\n        {items.map((item, index) => (\n          <React.Fragment key={index}>{renderItem(item, index)}</React.Fragment>\n        ))}\n      </div>\n    );\n  } else {\n    body = (\n      <div className=\"smwb-asset-grid__sizer\" style={{ height: vl.totalHeight, position: \"relative\" }}>\n        <div\n          className=\"smwb-asset-grid__band\"\n          style={{ position: \"absolute\", top: 0, left: 0, right: 0, transform: `translateY(${vl.offsetY}px)` }}\n        >\n          {Array.from({ length: Math.max(0, vl.endIndex - vl.startIndex) }).map((_, r) => {\n            const row = vl.startIndex + r;\n            return (\n              <div key={row} className=\"smwb-asset-grid__row\" style={rowStyle}>\n                {Array.from({ length: cols }).map((_, c) => {\n                  const index = row * cols + c;\n                  return index < items.length ? (\n                    <React.Fragment key={c}>{renderItem(items[index], index)}</React.Fragment>\n                  ) : null;\n                })}\n              </div>\n            );\n          })}\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div ref={viewportRef} className={cn(\"smwb-asset-grid\", className)} style={style} onScroll={vl.onScroll}>\n      {body}\n    </div>\n  );\n}\n\nexport default AssetGrid;\n"],"names":["AssetGrid","items","renderItem","minColumn","rowHeight","gap","overscan","loading","loadingCount","emptyLabel","className","style","viewportRef","useRef","width","setWidth","useState","height","setHeight","ready","setReady","useEffect","el","ro","cols","useMemo","rowCount","vl","useVirtualList","plainStyle","rowStyle","body","jsx","_","i","r","row","c","index","React","item","cn"],"mappings":"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"}
+{"version":3,"file":"assetGrid.js","sources":["../../../../src/components/dataDisplay/assetGrid/assetGrid.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useRef, useState } from \"react\";\nimport cn from \"clsx\";\nimport { useVirtualList } from \"../../../hooks/useVirtualList\";\n\nexport interface AssetGridProps<T> {\n  items: T[];\n  /** Render one cell. `index` is the absolute index into `items`. */\n  renderItem: (item: T, index: number) => React.ReactNode;\n  /** Minimum column width (px); drives the column count from the measured width. Default 160. */\n  minColumn?: number;\n  /** Fixed cell height (px). */\n  rowHeight: number;\n  /** Gap (px) between cells on both axes. Default 8. */\n  gap?: number;\n  /** Extra rows rendered above/below the viewport. Default 2. */\n  overscan?: number;\n  loading?: boolean;\n  /** Skeleton tile count while loading. Default 12. */\n  loadingCount?: number;\n  emptyLabel?: React.ReactNode;\n  className?: string;\n  style?: React.CSSProperties;\n}\n\n/**\n * A virtualized, data-shape-agnostic asset grid: measures its own width to pick a\n * column count, windows rows via `useVirtualList`, and renders only the visible\n * cells through a `renderItem` slot — with loading skeletons + an empty state. The\n * windowing math every catalog app reimplements, upstreamed. SSR-safe: before it\n * can measure (server + first paint) it renders a plain auto-fill grid of all\n * items, then virtualizes after mount.\n */\nexport function AssetGrid<T>({\n  items,\n  renderItem,\n  minColumn = 160,\n  rowHeight,\n  gap = 8,\n  overscan = 2,\n  loading,\n  loadingCount = 12,\n  emptyLabel,\n  className,\n  style,\n}: AssetGridProps<T>): React.ReactElement {\n  const viewportRef = useRef<HTMLDivElement | null>(null);\n  const [width, setWidth] = useState(0);\n  const [height, setHeight] = useState(0);\n  const [ready, setReady] = useState(false);\n\n  useEffect(() => {\n    const el = viewportRef.current;\n    if (!el || typeof ResizeObserver === \"undefined\") return;\n    const ro = new ResizeObserver(() => {\n      setWidth(el.clientWidth);\n      setHeight(el.clientHeight);\n      setReady(true);\n    });\n    ro.observe(el);\n    return () => ro.disconnect();\n  }, []);\n\n  const cols = useMemo(\n    () => (width <= 0 ? 1 : Math.max(1, Math.floor((width + gap) / (minColumn + gap)))),\n    [width, gap, minColumn]\n  );\n  const rowCount = Math.ceil(items.length / cols);\n  const vl = useVirtualList({\n    itemCount: rowCount,\n    itemHeight: rowHeight + gap,\n    viewportHeight: height || 1,\n    overscan,\n  });\n\n  const plainStyle: React.CSSProperties = {\n    display: \"grid\",\n    gridTemplateColumns: `repeat(auto-fill, minmax(${minColumn}px, 1fr))`,\n    gap,\n    gridAutoRows: rowHeight,\n  };\n  const rowStyle: React.CSSProperties = {\n    display: \"grid\",\n    gridTemplateColumns: `repeat(${cols}, minmax(0, 1fr))`,\n    gap,\n    height: rowHeight,\n    marginBottom: gap,\n  };\n\n  let body: React.ReactNode;\n  if (loading) {\n    body = (\n      <div className=\"smwb-asset-grid__plain\" style={plainStyle}>\n        {Array.from({ length: loadingCount }).map((_, i) => (\n          <div key={i} className=\"smwb-asset-grid__skeleton\" style={{ height: rowHeight }} />\n        ))}\n      </div>\n    );\n  } else if (items.length === 0) {\n    body = <div className=\"smwb-asset-grid__empty\">{emptyLabel}</div>;\n  } else if (!ready) {\n    body = (\n      <div className=\"smwb-asset-grid__plain\" style={plainStyle}>\n        {items.map((item, index) => (\n          <React.Fragment key={index}>{renderItem(item, index)}</React.Fragment>\n        ))}\n      </div>\n    );\n  } else {\n    body = (\n      <div className=\"smwb-asset-grid__sizer\" style={{ height: vl.totalHeight, position: \"relative\" }}>\n        <div\n          className=\"smwb-asset-grid__band\"\n          style={{ position: \"absolute\", top: 0, left: 0, right: 0, transform: `translateY(${vl.offsetY}px)` }}\n        >\n          {Array.from({ length: Math.max(0, vl.endIndex - vl.startIndex) }).map((_, r) => {\n            const row = vl.startIndex + r;\n            return (\n              <div key={row} className=\"smwb-asset-grid__row\" style={rowStyle}>\n                {Array.from({ length: cols }).map((_, c) => {\n                  const index = row * cols + c;\n                  return index < items.length ? (\n                    <React.Fragment key={c}>{renderItem(items[index], index)}</React.Fragment>\n                  ) : null;\n                })}\n              </div>\n            );\n          })}\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div ref={viewportRef} className={cn(\"smwb-asset-grid\", className)} style={style} onScroll={vl.onScroll}>\n      {body}\n    </div>\n  );\n}\n\nexport default AssetGrid;\n"],"names":["AssetGrid","items","renderItem","minColumn","rowHeight","gap","overscan","loading","loadingCount","emptyLabel","className","style","viewportRef","useRef","width","setWidth","useState","height","setHeight","ready","setReady","useEffect","el","ro","cols","useMemo","rowCount","vl","useVirtualList","plainStyle","rowStyle","body","jsx","_","i","r","row","c","index","React","item","cn"],"mappings":"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"}

package/dist/components/dataDisplay/avatar/avatar.d.ts

@@ -12,6 +12,8 @@ export interface AvatarProps extends HTMLAttributes<HTMLDivElement> {
     color?: string;
     /** Extra attributes forwarded to the underlying <img> (srcSet, loading…). */
     imgProps?: ImgHTMLAttributes<HTMLImageElement>;
+    /** Test id of the root `<div>`; `avatar` unless given. */
+    "data-testid"?: string;
 }
 export declare const Avatar: import("react").ForwardRefExoticComponent<AvatarProps & {
     children?: ReactNode | undefined;
@@ -24,6 +26,12 @@ export interface AvatarGroupProps extends HTMLAttributes<HTMLDivElement> {
     total?: number;
     /** Click handler for the "+N" surplus chip. */
     onSurplusClick?: () => void;
+    /** Accessible name of the "+N" surplus chip. */
+    surplusAriaLabel?: (count: number) => string;
+    /** Size of the "+N" surplus chip: match the avatars in the group. */
+    size?: AvatarSize | number;
+    /** Test id of the root `<div>`; `avatar-group` unless given. */
+    "data-testid"?: string;
 }
 export declare const AvatarGroup: import("react").ForwardRefExoticComponent<AvatarGroupProps & {
     children?: ReactNode | undefined;

package/dist/components/dataDisplay/avatar/avatar.js

@@ -1,49 +1,77 @@
-import { jsx as c, jsxs as C } from "react/jsx-runtime";
-import '../../../assets/styles/less/components/avatar/avatar.entry.css';/* empty css                                                       */
-import { forwardRef as _, useState as E, Children as S, isValidElement as $ } from "react";
-import f from "clsx";
-const w = (o) => typeof o == "string", j = _(function({ className: i, src: r, alt: e, size: t = "medium", variant: u = "circular", color: n, style: d, imgProps: a, children: m, ...v }, s) {
-  const [l, N] = E(!1), b = !!r && !l, x = f(
+import { jsx as d, jsxs as $ } from "react/jsx-runtime";
+import '../../../assets/styles/less/components/avatar/avatar.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
+/* empty css                                                       */
+import { forwardRef as x, useState as E, Children as S, isValidElement as j } from "react";
+import w from "clsx";
+const N = (o) => typeof o == "string", k = x(function({
+  className: u,
+  src: l,
+  alt: e,
+  size: t = "medium",
+  variant: i = "circular",
+  color: s,
+  style: v,
+  imgProps: a,
+  children: m,
+  "data-testid": f = "avatar",
+  ...r
+}, b) {
+  const [h, c] = E(!1), n = !!l && !h, y = w(
     "smwb-avatar",
-    `smwb-avatar_${u}`,
-    w(t) ? `smwb-avatar_${t}` : null,
-    i
-  ), y = {
-    ...d,
-    ...w(t) ? {} : { width: t, height: t, fontSize: t / 2.5 },
-    ...n && !b ? { backgroundColor: n } : {}
+    `smwb-avatar_${i}`,
+    N(t) ? `smwb-avatar_${t}` : null,
+    u
+  ), A = {
+    ...v,
+    ...N(t) ? {} : { width: t, height: t, fontSize: t / 2.5 },
+    ...s && !n ? { backgroundColor: s } : {}
   };
-  return /* @__PURE__ */ c("div", { ref: s, ...v, "data-testid": "avatar", className: x, style: y, children: b ? /* @__PURE__ */ c(
+  return /* @__PURE__ */ d("div", { ref: b, ...r, "data-testid": f, className: y, style: A, children: n ? /* @__PURE__ */ d(
     "img",
     {
       ...a,
-      className: f("smwb-avatar__img", a == null ? void 0 : a.className),
-      src: r,
-      alt: e,
-      onError: (A) => {
-        var h;
-        N(!0), (h = a == null ? void 0 : a.onError) == null || h.call(a, A);
+      className: w("smwb-avatar__img", a == null ? void 0 : a.className),
+      src: l,
+      alt: e != null ? e : a == null ? void 0 : a.alt,
+      onError: (C) => {
+        var _;
+        c(!0), (_ = a == null ? void 0 : a.onError) == null || _.call(a, C);
       }
     }
-  ) : /* @__PURE__ */ c("span", { className: "smwb-avatar__fallback", role: "img", "aria-label": e, children: m }) });
-}), M = _(function({ className: i, max: r = 5, total: e, onSurplusClick: t, children: u, ...n }, d) {
-  const a = S.toArray(u).filter($), m = e != null ? e : a.length, v = Math.max(r, 1), s = a.slice(0, v), l = m - s.length;
-  return /* @__PURE__ */ C("div", { ref: d, ...n, "data-testid": "avatar-group", className: f("smwb-avatar-group", i), children: [
-    l > 0 ? /* @__PURE__ */ c(
-      j,
-      {
-        className: "smwb-avatar-group__surplus",
-        onClick: t,
-        style: t ? { cursor: "pointer" } : void 0,
-        children: `+${l}`
-      }
-    ) : null,
-    s
-  ] });
+  ) : /* @__PURE__ */ d("span", { className: "smwb-avatar__fallback", role: "img", "aria-label": e, children: m }) });
+}), R = x(function({
+  className: u,
+  max: l = 5,
+  total: e,
+  onSurplusClick: t,
+  surplusAriaLabel: i = (r) => `${r} more`,
+  size: s,
+  children: v,
+  "data-testid": a = "avatar-group",
+  ...m
+}, f) {
+  const r = S.toArray(v).filter(j), b = e != null ? e : r.length, h = Math.max(l, 1), c = r.slice(0, h), n = b - c.length;
+  return (
+    // In order, the first avatar first; the "+N" chip ends the row.
+    /* @__PURE__ */ $("div", { ref: f, ...m, "data-testid": a, className: w("smwb-avatar-group", u), children: [
+      c,
+      n > 0 ? /* @__PURE__ */ d(
+        k,
+        {
+          className: "smwb-avatar-group__surplus",
+          size: s,
+          alt: i(n),
+          onClick: t,
+          style: t ? { cursor: "pointer" } : void 0,
+          children: `+${n}`
+        }
+      ) : null
+    ] })
+  );
 });
 export {
-  j as Avatar,
-  M as AvatarGroup,
-  j as default
+  k as Avatar,
+  R as AvatarGroup,
+  k as default
 };
 //# sourceMappingURL=avatar.js.map

package/dist/components/dataDisplay/avatar/avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"avatar.js","sources":["../../../../src/components/dataDisplay/avatar/avatar.tsx"],"sourcesContent":["import {\n  Children,\n  CSSProperties,\n  forwardRef,\n  HTMLAttributes,\n  ImgHTMLAttributes,\n  isValidElement,\n  PropsWithChildren,\n  ReactNode,\n  useState,\n} from \"react\";\nimport cn from \"clsx\";\n\nexport type AvatarSize = \"small\" | \"medium\" | \"large\";\n\nexport interface AvatarProps extends HTMLAttributes<HTMLDivElement> {\n  className?: string;\n  /** Image source. Falls back to children (initials / icon) on error or when absent. */\n  src?: string;\n  alt?: string;\n  /** Preset size or an explicit pixel value. */\n  size?: AvatarSize | number;\n  variant?: \"circular\" | \"rounded\" | \"square\";\n  /** Background color for the fallback (initials / icon). */\n  color?: string;\n  /** Extra attributes forwarded to the underlying <img> (srcSet, loading…). */\n  imgProps?: ImgHTMLAttributes<HTMLImageElement>;\n}\n\nconst isPresetSize = (size: AvatarSize | number): size is AvatarSize => typeof size === \"string\";\n\nexport const Avatar = forwardRef<HTMLDivElement, PropsWithChildren<AvatarProps>>(function Avatar(\n  { className, src, alt, size = \"medium\", variant = \"circular\", color, style, imgProps, children, ...props },\n  ref\n) {\n  const [imgFailed, setImgFailed] = useState(false);\n  const showImage = Boolean(src) && !imgFailed;\n\n  const avatarClassName = cn(\n    \"smwb-avatar\",\n    `smwb-avatar_${variant}`,\n    isPresetSize(size) ? `smwb-avatar_${size}` : null,\n    className\n  );\n\n  const inlineStyle: CSSProperties = {\n    ...style,\n    ...(isPresetSize(size) ? {} : { width: size, height: size, fontSize: size / 2.5 }),\n    ...(color && !showImage ? { backgroundColor: color } : {}),\n  };\n\n  return (\n    <div ref={ref} {...props} data-testid=\"avatar\" className={avatarClassName} style={inlineStyle}>\n      {showImage ? (\n        <img\n          {...imgProps}\n          className={cn(\"smwb-avatar__img\", imgProps?.className)}\n          src={src}\n          alt={alt}\n          onError={(e) => {\n            setImgFailed(true);\n            imgProps?.onError?.(e);\n          }}\n        />\n      ) : (\n        <span className=\"smwb-avatar__fallback\" role=\"img\" aria-label={alt}>\n          {children}\n        </span>\n      )}\n    </div>\n  );\n});\n\nexport interface AvatarGroupProps extends HTMLAttributes<HTMLDivElement> {\n  className?: string;\n  /** Maximum avatars to show before collapsing the rest into a \"+N\" surplus. */\n  max?: number;\n  /** Override the total count used for the surplus label (defaults to children count). */\n  total?: number;\n  /** Click handler for the \"+N\" surplus chip. */\n  onSurplusClick?: () => void;\n}\n\nexport const AvatarGroup = forwardRef<HTMLDivElement, PropsWithChildren<AvatarGroupProps>>(function AvatarGroup(\n  { className, max = 5, total, onSurplusClick, children, ...props },\n  ref\n) {\n  const items = Children.toArray(children).filter(isValidElement);\n  const totalCount = total ?? items.length;\n  const clampedMax = Math.max(max, 1);\n  const visible: ReactNode[] = items.slice(0, clampedMax);\n  const surplus = totalCount - visible.length;\n\n  return (\n    <div ref={ref} {...props} data-testid=\"avatar-group\" className={cn(\"smwb-avatar-group\", className)}>\n      {surplus > 0 ? (\n        <Avatar\n          className=\"smwb-avatar-group__surplus\"\n          onClick={onSurplusClick}\n          style={onSurplusClick ? { cursor: \"pointer\" } : undefined}\n        >\n          {`+${surplus}`}\n        </Avatar>\n      ) : null}\n      {visible}\n    </div>\n  );\n});\n\nexport default Avatar;\n"],"names":["isPresetSize","size","Avatar","forwardRef","className","src","alt","variant","color","style","imgProps","children","props","ref","imgFailed","setImgFailed","useState","showImage","avatarClassName","cn","inlineStyle","jsx","e","_a","AvatarGroup","max","total","onSurplusClick","items","Children","isValidElement","totalCount","clampedMax","visible","surplus","jsxs"],"mappings":";;;;AA8BA,MAAMA,IAAe,CAACC,MAAkD,OAAOA,KAAS,UAE3EC,IAASC,EAA2D,SAC/E,EAAE,WAAAC,GAAW,KAAAC,GAAK,KAAAC,GAAK,MAAAL,IAAO,UAAU,SAAAM,IAAU,YAAY,OAAAC,GAAO,OAAAC,GAAO,UAAAC,GAAU,UAAAC,GAAU,GAAGC,EAAA,GACnGC,GACA;AACA,QAAM,CAACC,GAAWC,CAAY,IAAIC,EAAS,EAAK,GAC1CC,IAAY,EAAQZ,KAAQ,CAACS,GAE7BI,IAAkBC;AAAA,IACtB;AAAA,IACA,eAAeZ,CAAO;AAAA,IACtBP,EAAaC,CAAI,IAAI,eAAeA,CAAI,KAAK;AAAA,IAC7CG;AAAA,EAAA,GAGIgB,IAA6B;AAAA,IACjC,GAAGX;AAAA,IACH,GAAIT,EAAaC,CAAI,IAAI,CAAA,IAAK,EAAE,OAAOA,GAAM,QAAQA,GAAM,UAAUA,IAAO,IAAA;AAAA,IAC5E,GAAIO,KAAS,CAACS,IAAY,EAAE,iBAAiBT,EAAA,IAAU,CAAA;AAAA,EAAC;AAG1D,SACE,gBAAAa,EAAC,OAAA,EAAI,KAAAR,GAAW,GAAGD,GAAO,eAAY,UAAS,WAAWM,GAAiB,OAAOE,GAC/E,UAAAH,IACC,gBAAAI;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGX;AAAA,MACJ,WAAWS,EAAG,oBAAoBT,KAAA,gBAAAA,EAAU,SAAS;AAAA,MACrD,KAAAL;AAAA,MACA,KAAAC;AAAA,MACA,SAAS,CAACgB,MAAM;;AACd,QAAAP,EAAa,EAAI,IACjBQ,IAAAb,KAAA,gBAAAA,EAAU,YAAV,QAAAa,EAAA,KAAAb,GAAoBY;AAAA,MACtB;AAAA,IAAA;AAAA,EAAA,IAGF,gBAAAD,EAAC,QAAA,EAAK,WAAU,yBAAwB,MAAK,OAAM,cAAYf,GAC5D,UAAAK,EAAA,CACH,EAAA,CAEJ;AAEJ,CAAC,GAYYa,IAAcrB,EAAgE,SACzF,EAAE,WAAAC,GAAW,KAAAqB,IAAM,GAAG,OAAAC,GAAO,gBAAAC,GAAgB,UAAAhB,GAAU,GAAGC,EAAA,GAC1DC,GACA;AACA,QAAMe,IAAQC,EAAS,QAAQlB,CAAQ,EAAE,OAAOmB,CAAc,GACxDC,IAAaL,KAAA,OAAAA,IAASE,EAAM,QAC5BI,IAAa,KAAK,IAAIP,GAAK,CAAC,GAC5BQ,IAAuBL,EAAM,MAAM,GAAGI,CAAU,GAChDE,IAAUH,IAAaE,EAAQ;AAErC,SACE,gBAAAE,EAAC,OAAA,EAAI,KAAAtB,GAAW,GAAGD,GAAO,eAAY,gBAAe,WAAWO,EAAG,qBAAqBf,CAAS,GAC9F,UAAA;AAAA,IAAA8B,IAAU,IACT,gBAAAb;AAAA,MAACnB;AAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACV,SAASyB;AAAA,QACT,OAAOA,IAAiB,EAAE,QAAQ,cAAc;AAAA,QAE/C,cAAIO,CAAO;AAAA,MAAA;AAAA,IAAA,IAEZ;AAAA,IACHD;AAAA,EAAA,GACH;AAEJ,CAAC;"}
+{"version":3,"file":"avatar.js","sources":["../../../../src/components/dataDisplay/avatar/avatar.tsx"],"sourcesContent":["import {\n  Children,\n  CSSProperties,\n  forwardRef,\n  HTMLAttributes,\n  ImgHTMLAttributes,\n  isValidElement,\n  PropsWithChildren,\n  ReactNode,\n  useState,\n} from \"react\";\nimport cn from \"clsx\";\n\nexport type AvatarSize = \"small\" | \"medium\" | \"large\";\n\nexport interface AvatarProps extends HTMLAttributes<HTMLDivElement> {\n  className?: string;\n  /** Image source. Falls back to children (initials / icon) on error or when absent. */\n  src?: string;\n  alt?: string;\n  /** Preset size or an explicit pixel value. */\n  size?: AvatarSize | number;\n  variant?: \"circular\" | \"rounded\" | \"square\";\n  /** Background color for the fallback (initials / icon). */\n  color?: string;\n  /** Extra attributes forwarded to the underlying <img> (srcSet, loading…). */\n  imgProps?: ImgHTMLAttributes<HTMLImageElement>;\n  /** Test id of the root `<div>`; `avatar` unless given. */\n  \"data-testid\"?: string;\n}\n\nconst isPresetSize = (size: AvatarSize | number): size is AvatarSize => typeof size === \"string\";\n\nexport const Avatar = forwardRef<HTMLDivElement, PropsWithChildren<AvatarProps>>(function Avatar(\n  {\n    className,\n    src,\n    alt,\n    size = \"medium\",\n    variant = \"circular\",\n    color,\n    style,\n    imgProps,\n    children,\n    \"data-testid\": dataTestId = \"avatar\",\n    ...props\n  },\n  ref\n) {\n  const [imgFailed, setImgFailed] = useState(false);\n  const showImage = Boolean(src) && !imgFailed;\n\n  const avatarClassName = cn(\n    \"smwb-avatar\",\n    `smwb-avatar_${variant}`,\n    isPresetSize(size) ? `smwb-avatar_${size}` : null,\n    className\n  );\n\n  const inlineStyle: CSSProperties = {\n    ...style,\n    ...(isPresetSize(size) ? {} : { width: size, height: size, fontSize: size / 2.5 }),\n    ...(color && !showImage ? { backgroundColor: color } : {}),\n  };\n\n  return (\n    <div ref={ref} {...props} data-testid={dataTestId} className={avatarClassName} style={inlineStyle}>\n      {showImage ? (\n        <img\n          {...imgProps}\n          className={cn(\"smwb-avatar__img\", imgProps?.className)}\n          src={src}\n          // Avatar's own alt wins; without it, the one in imgProps stays.\n          alt={alt ?? imgProps?.alt}\n          onError={(e) => {\n            setImgFailed(true);\n            imgProps?.onError?.(e);\n          }}\n        />\n      ) : (\n        <span className=\"smwb-avatar__fallback\" role=\"img\" aria-label={alt}>\n          {children}\n        </span>\n      )}\n    </div>\n  );\n});\n\nexport interface AvatarGroupProps extends HTMLAttributes<HTMLDivElement> {\n  className?: string;\n  /** Maximum avatars to show before collapsing the rest into a \"+N\" surplus. */\n  max?: number;\n  /** Override the total count used for the surplus label (defaults to children count). */\n  total?: number;\n  /** Click handler for the \"+N\" surplus chip. */\n  onSurplusClick?: () => void;\n  /** Accessible name of the \"+N\" surplus chip. */\n  surplusAriaLabel?: (count: number) => string;\n  /** Size of the \"+N\" surplus chip: match the avatars in the group. */\n  size?: AvatarSize | number;\n  /** Test id of the root `<div>`; `avatar-group` unless given. */\n  \"data-testid\"?: string;\n}\n\nexport const AvatarGroup = forwardRef<HTMLDivElement, PropsWithChildren<AvatarGroupProps>>(function AvatarGroup(\n  {\n    className,\n    max = 5,\n    total,\n    onSurplusClick,\n    surplusAriaLabel = (count: number) => `${count} more`,\n    size,\n    children,\n    \"data-testid\": dataTestId = \"avatar-group\",\n    ...props\n  },\n  ref\n) {\n  const items = Children.toArray(children).filter(isValidElement);\n  const totalCount = total ?? items.length;\n  const clampedMax = Math.max(max, 1);\n  const visible: ReactNode[] = items.slice(0, clampedMax);\n  const surplus = totalCount - visible.length;\n\n  return (\n    // In order, the first avatar first; the \"+N\" chip ends the row.\n    <div ref={ref} {...props} data-testid={dataTestId} className={cn(\"smwb-avatar-group\", className)}>\n      {visible}\n      {surplus > 0 ? (\n        <Avatar\n          className=\"smwb-avatar-group__surplus\"\n          size={size}\n          alt={surplusAriaLabel(surplus)}\n          onClick={onSurplusClick}\n          style={onSurplusClick ? { cursor: \"pointer\" } : undefined}\n        >\n          {`+${surplus}`}\n        </Avatar>\n      ) : null}\n    </div>\n  );\n});\n\nexport default Avatar;\n"],"names":["isPresetSize","size","Avatar","forwardRef","className","src","alt","variant","color","style","imgProps","children","dataTestId","props","ref","imgFailed","setImgFailed","useState","showImage","avatarClassName","cn","inlineStyle","jsx","e","_a","AvatarGroup","max","total","onSurplusClick","surplusAriaLabel","count","items","Children","isValidElement","totalCount","clampedMax","visible","surplus","jsxs"],"mappings":";;;;;AAiCA,MAAMA,IAAe,CAACC,MAAkD,OAAOA,KAAS,UAE3EC,IAASC,EAA2D,SAC/E;AAAA,EACE,WAAAC;AAAA,EACA,KAAAC;AAAA,EACA,KAAAC;AAAA,EACA,MAAAL,IAAO;AAAA,EACP,SAAAM,IAAU;AAAA,EACV,OAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,eAAeC,IAAa;AAAA,EAC5B,GAAGC;AACL,GACAC,GACA;AACA,QAAM,CAACC,GAAWC,CAAY,IAAIC,EAAS,EAAK,GAC1CC,IAAY,EAAQb,KAAQ,CAACU,GAE7BI,IAAkBC;AAAA,IACtB;AAAA,IACA,eAAeb,CAAO;AAAA,IACtBP,EAAaC,CAAI,IAAI,eAAeA,CAAI,KAAK;AAAA,IAC7CG;AAAA,EAAA,GAGIiB,IAA6B;AAAA,IACjC,GAAGZ;AAAA,IACH,GAAIT,EAAaC,CAAI,IAAI,CAAA,IAAK,EAAE,OAAOA,GAAM,QAAQA,GAAM,UAAUA,IAAO,IAAA;AAAA,IAC5E,GAAIO,KAAS,CAACU,IAAY,EAAE,iBAAiBV,EAAA,IAAU,CAAA;AAAA,EAAC;AAG1D,SACE,gBAAAc,EAAC,OAAA,EAAI,KAAAR,GAAW,GAAGD,GAAO,eAAaD,GAAY,WAAWO,GAAiB,OAAOE,GACnF,UAAAH,IACC,gBAAAI;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGZ;AAAA,MACJ,WAAWU,EAAG,oBAAoBV,KAAA,gBAAAA,EAAU,SAAS;AAAA,MACrD,KAAAL;AAAA,MAEA,KAAKC,KAAA,OAAAA,IAAOI,KAAA,gBAAAA,EAAU;AAAA,MACtB,SAAS,CAACa,MAAM;;AACd,QAAAP,EAAa,EAAI,IACjBQ,IAAAd,KAAA,gBAAAA,EAAU,YAAV,QAAAc,EAAA,KAAAd,GAAoBa;AAAA,MACtB;AAAA,IAAA;AAAA,EAAA,IAGF,gBAAAD,EAAC,QAAA,EAAK,WAAU,yBAAwB,MAAK,OAAM,cAAYhB,GAC5D,UAAAK,EAAA,CACH,EAAA,CAEJ;AAEJ,CAAC,GAkBYc,IAActB,EAAgE,SACzF;AAAA,EACE,WAAAC;AAAA,EACA,KAAAsB,IAAM;AAAA,EACN,OAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,kBAAAC,IAAmB,CAACC,MAAkB,GAAGA,CAAK;AAAA,EAC9C,MAAA7B;AAAA,EACA,UAAAU;AAAA,EACA,eAAeC,IAAa;AAAA,EAC5B,GAAGC;AACL,GACAC,GACA;AACA,QAAMiB,IAAQC,EAAS,QAAQrB,CAAQ,EAAE,OAAOsB,CAAc,GACxDC,IAAaP,KAAA,OAAAA,IAASI,EAAM,QAC5BI,IAAa,KAAK,IAAIT,GAAK,CAAC,GAC5BU,IAAuBL,EAAM,MAAM,GAAGI,CAAU,GAChDE,IAAUH,IAAaE,EAAQ;AAErC;AAAA;AAAA,IAEE,gBAAAE,EAAC,OAAA,EAAI,KAAAxB,GAAW,GAAGD,GAAO,eAAaD,GAAY,WAAWQ,EAAG,qBAAqBhB,CAAS,GAC5F,UAAA;AAAA,MAAAgC;AAAA,MACAC,IAAU,IACT,gBAAAf;AAAA,QAACpB;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,MAAAD;AAAA,UACA,KAAK4B,EAAiBQ,CAAO;AAAA,UAC7B,SAAST;AAAA,UACT,OAAOA,IAAiB,EAAE,QAAQ,cAAc;AAAA,UAE/C,cAAIS,CAAO;AAAA,QAAA;AAAA,MAAA,IAEZ;AAAA,IAAA,EAAA,CACN;AAAA;AAEJ,CAAC;"}

package/dist/components/dataDisplay/badge/badge.js

@@ -1,39 +1,49 @@
-import { jsxs as u, jsx as $ } from "react/jsx-runtime";
-import '../../../assets/styles/less/components/badge/badge.entry.css';/* empty css                                                     */
-import { forwardRef as g } from "react";
-import n from "clsx";
-const x = g(function({
-  className: o,
-  color: i = "primary",
+import { jsxs as $, jsx as n } from "react/jsx-runtime";
+import '../../../assets/styles/less/components/badge/badge.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
+/* empty css                                                     */
+import { forwardRef as b } from "react";
+import h from "clsx";
+const R = b(function({
+  className: e,
+  color: c = "primary",
   badgeContent: s,
-  variant: r = "outside",
-  vertical: a = "top",
-  horizontal: l = "right",
-  max: e,
-  showZero: p = !1,
-  badgeAriaLabel: b,
-  children: c,
-  ...f
-}, _) {
-  const w = s === 0 || s === "0", d = (s == null || w && !p) === !0;
-  let m = s;
-  typeof s == "number" && e !== void 0 && s > e && (m = `${e}+`);
-  const t = n(
+  variant: m = "outside",
+  vertical: p = "top",
+  horizontal: f = "right",
+  max: o,
+  showZero: _ = !1,
+  badgeAriaLabel: r,
+  children: a,
+  ...d
+}, w) {
+  const t = s === 0 || s === "0", i = (s == null || t && !_) === !0;
+  let l = s;
+  typeof s == "number" && o !== void 0 && s > o && (l = `${o}+`);
+  const u = h(
     "smwb-badge",
-    `smwb-badge_${i}`,
-    `smwb-badge_${r}`,
-    `smwb-badge_${r}_${a}`,
-    `smwb-badge_${r}_${a}_${l}`,
-    o,
-    { "smwb-badge_no-content": d }
+    `smwb-badge_${c}`,
+    `smwb-badge_${m}`,
+    `smwb-badge_${m}_${p}`,
+    `smwb-badge_${m}_${p}_${f}`,
+    e,
+    { "smwb-badge_no-content": i }
   );
-  return /* @__PURE__ */ u("span", { className: "smwb-badge__wrapper", "data-testid": "badge", children: [
-    c,
-    /* @__PURE__ */ $("span", { ref: _, className: t, "aria-label": b, ...f, children: d ? null : m })
+  return /* @__PURE__ */ $("span", { className: "smwb-badge__wrapper", "data-testid": "badge", children: [
+    a,
+    /* @__PURE__ */ n(
+      "span",
+      {
+        ...d,
+        ref: w,
+        className: u,
+        "aria-label": r != null ? r : d["aria-label"],
+        children: i ? null : l
+      }
+    )
   ] });
 });
 export {
-  x as Badge,
-  x as default
+  R as Badge,
+  R as default
 };
 //# sourceMappingURL=badge.js.map

package/dist/components/dataDisplay/badge/badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"badge.js","sources":["../../../../src/components/dataDisplay/badge/badge.tsx"],"sourcesContent":["import React, { forwardRef, HTMLAttributes, PropsWithChildren } from \"react\";\nimport cn from \"clsx\";\n\nexport interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {\n  className?: string;\n  badgeContent?: React.ReactNode;\n  color?: \"primary\" | \"success\" | \"danger\";\n  variant?: \"inside\" | \"outside\";\n  vertical?: \"top\" | \"bottom\";\n  horizontal?: \"right\" | \"left\";\n  /** Cap numeric content, rendering `{max}+` when exceeded. */\n  max?: number;\n  /** Render the badge even when content is 0. */\n  showZero?: boolean;\n  /** Accessible label for the badge value. */\n  badgeAriaLabel?: string;\n}\n\nexport const Badge = forwardRef<HTMLSpanElement, PropsWithChildren<BadgeProps>>(function Badge(\n  {\n    className,\n    color = \"primary\",\n    badgeContent,\n    variant = \"outside\",\n    vertical = \"top\",\n    horizontal = \"right\",\n    max,\n    showZero = false,\n    badgeAriaLabel,\n    children,\n    ...rest\n  },\n  ref\n) {\n  const isZero = badgeContent === 0 || badgeContent === \"0\";\n  const hidden = (badgeContent === undefined || badgeContent === null || (isZero && !showZero)) === true;\n\n  let display: React.ReactNode = badgeContent;\n  if (typeof badgeContent === \"number\" && max !== undefined && badgeContent > max) {\n    display = `${max}+`;\n  }\n\n  const badgeClassname = cn(\n    \"smwb-badge\",\n    `smwb-badge_${color}`,\n    `smwb-badge_${variant}`,\n    `smwb-badge_${variant}_${vertical}`,\n    `smwb-badge_${variant}_${vertical}_${horizontal}`,\n    className,\n    { \"smwb-badge_no-content\": hidden }\n  );\n\n  return (\n    <span className=\"smwb-badge__wrapper\" data-testid=\"badge\">\n      {children}\n      <span ref={ref} className={badgeClassname} aria-label={badgeAriaLabel} {...rest}>\n        {hidden ? null : display}\n      </span>\n    </span>\n  );\n});\n\nexport default Badge;\n"],"names":["Badge","forwardRef","className","color","badgeContent","variant","vertical","horizontal","max","showZero","badgeAriaLabel","children","rest","ref","isZero","hidden","display","badgeClassname","cn","jsxs","jsx"],"mappings":";;;;AAmBO,MAAMA,IAAQC,EAA2D,SAC9E;AAAA,EACE,WAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,cAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,UAAAC,IAAW;AAAA,EACX,YAAAC,IAAa;AAAA,EACb,KAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,gBAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAASV,MAAiB,KAAKA,MAAiB,KAChDW,KAAwCX,KAAiB,QAASU,KAAU,CAACL,OAAe;AAElG,MAAIO,IAA2BZ;AAC/B,EAAI,OAAOA,KAAiB,YAAYI,MAAQ,UAAaJ,IAAeI,MAC1EQ,IAAU,GAAGR,CAAG;AAGlB,QAAMS,IAAiBC;AAAA,IACrB;AAAA,IACA,cAAcf,CAAK;AAAA,IACnB,cAAcE,CAAO;AAAA,IACrB,cAAcA,CAAO,IAAIC,CAAQ;AAAA,IACjC,cAAcD,CAAO,IAAIC,CAAQ,IAAIC,CAAU;AAAA,IAC/CL;AAAA,IACA,EAAE,yBAAyBa,EAAA;AAAA,EAAO;AAGpC,SACE,gBAAAI,EAAC,QAAA,EAAK,WAAU,uBAAsB,eAAY,SAC/C,UAAA;AAAA,IAAAR;AAAA,IACD,gBAAAS,EAAC,QAAA,EAAK,KAAAP,GAAU,WAAWI,GAAgB,cAAYP,GAAiB,GAAGE,GACxE,UAAAG,IAAS,OAAOC,EAAA,CACnB;AAAA,EAAA,GACF;AAEJ,CAAC;"}
+{"version":3,"file":"badge.js","sources":["../../../../src/components/dataDisplay/badge/badge.tsx"],"sourcesContent":["import React, { forwardRef, HTMLAttributes, PropsWithChildren } from \"react\";\nimport cn from \"clsx\";\n\nexport interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {\n  className?: string;\n  badgeContent?: React.ReactNode;\n  color?: \"primary\" | \"success\" | \"danger\";\n  variant?: \"inside\" | \"outside\";\n  vertical?: \"top\" | \"bottom\";\n  horizontal?: \"right\" | \"left\";\n  /** Cap numeric content, rendering `{max}+` when exceeded. */\n  max?: number;\n  /** Render the badge even when content is 0. */\n  showZero?: boolean;\n  /** Accessible label for the badge value. */\n  badgeAriaLabel?: string;\n}\n\nexport const Badge = forwardRef<HTMLSpanElement, PropsWithChildren<BadgeProps>>(function Badge(\n  {\n    className,\n    color = \"primary\",\n    badgeContent,\n    variant = \"outside\",\n    vertical = \"top\",\n    horizontal = \"right\",\n    max,\n    showZero = false,\n    badgeAriaLabel,\n    children,\n    ...rest\n  },\n  ref\n) {\n  const isZero = badgeContent === 0 || badgeContent === \"0\";\n  const hidden = (badgeContent === undefined || badgeContent === null || (isZero && !showZero)) === true;\n\n  let display: React.ReactNode = badgeContent;\n  if (typeof badgeContent === \"number\" && max !== undefined && badgeContent > max) {\n    display = `${max}+`;\n  }\n\n  const badgeClassname = cn(\n    \"smwb-badge\",\n    `smwb-badge_${color}`,\n    `smwb-badge_${variant}`,\n    `smwb-badge_${variant}_${vertical}`,\n    `smwb-badge_${variant}_${vertical}_${horizontal}`,\n    className,\n    { \"smwb-badge_no-content\": hidden }\n  );\n\n  return (\n    <span className=\"smwb-badge__wrapper\" data-testid=\"badge\">\n      {children}\n      <span\n        {...rest}\n        ref={ref}\n        className={badgeClassname}\n        // `badgeAriaLabel` wins over the caller's aria-label; without it, the caller's stays.\n        aria-label={badgeAriaLabel ?? rest[\"aria-label\"]}\n      >\n        {hidden ? null : display}\n      </span>\n    </span>\n  );\n});\n\nexport default Badge;\n"],"names":["Badge","forwardRef","className","color","badgeContent","variant","vertical","horizontal","max","showZero","badgeAriaLabel","children","rest","ref","isZero","hidden","display","badgeClassname","cn","jsxs","jsx"],"mappings":";;;;;AAoBO,MAAMA,IAAQC,EAA2D,SAC9E;AAAA,EACE,WAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,cAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,UAAAC,IAAW;AAAA,EACX,YAAAC,IAAa;AAAA,EACb,KAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,gBAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAASV,MAAiB,KAAKA,MAAiB,KAChDW,KAAwCX,KAAiB,QAASU,KAAU,CAACL,OAAe;AAElG,MAAIO,IAA2BZ;AAC/B,EAAI,OAAOA,KAAiB,YAAYI,MAAQ,UAAaJ,IAAeI,MAC1EQ,IAAU,GAAGR,CAAG;AAGlB,QAAMS,IAAiBC;AAAA,IACrB;AAAA,IACA,cAAcf,CAAK;AAAA,IACnB,cAAcE,CAAO;AAAA,IACrB,cAAcA,CAAO,IAAIC,CAAQ;AAAA,IACjC,cAAcD,CAAO,IAAIC,CAAQ,IAAIC,CAAU;AAAA,IAC/CL;AAAA,IACA,EAAE,yBAAyBa,EAAA;AAAA,EAAO;AAGpC,SACE,gBAAAI,EAAC,QAAA,EAAK,WAAU,uBAAsB,eAAY,SAC/C,UAAA;AAAA,IAAAR;AAAA,IACD,gBAAAS;AAAA,MAAC;AAAA,MAAA;AAAA,QACE,GAAGR;AAAA,QACJ,KAAAC;AAAA,QACA,WAAWI;AAAA,QAEX,cAAYP,KAAA,OAAAA,IAAkBE,EAAK,YAAY;AAAA,QAE9C,cAAS,OAAOI;AAAA,MAAA;AAAA,IAAA;AAAA,EACnB,GACF;AAEJ,CAAC;"}

package/dist/components/dataDisplay/card/card.d.ts

@@ -1,13 +1,41 @@
 import React, { HTMLAttributes, ReactNode } from "react";
 export interface CardProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Class name(s) for the root `<div>`, the card's box. `style`, `id`, `data-*`, `aria-hidden`, `ref` and event
+     * handlers go to the root too. With `onClick`, `role`, `tabIndex`, `onFocus`, `onBlur` and the other `aria-*`
+     * attributes go to the card's button, `.smwb-card__content` (the title and the children), which is also the element
+     * to focus. Without `onClick` the card is not a control, and they stay on the root, which holds the footer too.
+     */
     className?: string;
     variant?: "filled" | "elevated" | "outlined";
+    /**
+     * Disables the card: it says `aria-disabled`, and neither clicks nor keys run `onClick`. With `onClick` the card is
+     * still a button, out of the tab order.
+     */
     disabled?: boolean;
+    /**
+     * A heading drawn at the top of the card, not the `title` attribute. With `onClick` it is part of the card's button,
+     * and the button's name starts with it.
+     */
     title?: string;
-    /** Footer slot rendered after the content. */
+    /**
+     * Footer slot rendered after the content. With `onClick` it sits beside the card's button, not inside it, so
+     * controls here keep their own names, clicks and keys; see `onClick`.
+     */
     footer?: ReactNode;
-    /** Makes the card interactive (role=button, keyboard, focus ring). */
+    /**
+     * Makes the card interactive: its content (the title and the children) becomes a button, named by that content, with
+     * a focus ring around the whole card. The footer is not part of that button but its sibling, so the card's controls
+     * go there: a control in the children would sit inside the button, and its name would join the card's.
+     *
+     * Runs when the card is activated: a click on it, or Enter / Space while its button has focus. A click on a control
+     * (button, link, input, anything focusable), in the footer or the children, or in a portal opened from the card does
+     * not run it, and neither do Enter / Space pressed on such a control. Content that is not a control keeps its click
+     * from activating the card by calling `preventDefault()` on it.
+     */
     onClick?: React.MouseEventHandler<HTMLDivElement>;
+    /** Test id of the root `<div>`; `card` unless given. */
+    "data-testid"?: string;
 }
 export declare const Card: React.ForwardRefExoticComponent<CardProps & {
     children?: ReactNode | undefined;

package/dist/components/dataDisplay/card/card.js

@@ -1,36 +1,64 @@
-import { jsxs as _, jsx as c } from "react/jsx-runtime";
-import '../../../assets/styles/less/components/card/card.entry.css';/* empty css                                                   */
-import l from "react";
-import p from "clsx";
-const j = l.forwardRef(function({ className: m, variant: v = "elevated", children: f, disabled: t, title: s, footer: i, onClick: r, onKeyDown: e, ...o }, b) {
-  const a = !!r && !t, n = (d) => {
-    e == null || e(d), a && (d.key === "Enter" || d.key === " ") && (d.preventDefault(), r == null || r(d));
+import { jsxs as n, jsx as v } from "react/jsx-runtime";
+import '../../../assets/styles/less/components/card/card.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
+/* empty css                                                   */
+import N, { useRef as R } from "react";
+import j from "clsx";
+import { isOwnClick as I } from "../../../utils/ownClick.js";
+import { splitControlProps as g } from "../../../utils/controlProps.js";
+const B = N.forwardRef(function({
+  className: b,
+  variant: p = "elevated",
+  children: l,
+  disabled: a,
+  title: m,
+  footer: c,
+  onClick: r,
+  onKeyDown: e,
+  "data-testid": u = "card",
+  ..._
+}, h) {
+  var f;
+  const d = !!r && !a, [s, o] = g(_, !!r), i = R(null), w = (t) => {
+    e == null || e(t), !(!d || t.target !== i.current) && (t.key === "Enter" || t.key === " ") && (t.preventDefault(), r == null || r(t));
+  }, x = (t) => {
+    I(t, i.current) && (r == null || r(t));
   };
-  return /* @__PURE__ */ _(
+  return /* @__PURE__ */ n(
     "div",
     {
-      ref: b,
-      "data-testid": "card",
-      className: p("smwb-card", `smwb-card_${v}`, m, {
-        card_disabled: t,
-        "smwb-card_interactive": a
+      ref: h,
+      "data-testid": u,
+      className: j("smwb-card", `smwb-card_${p}`, b, {
+        card_disabled: a,
+        "smwb-card_interactive": d
       }),
-      role: a ? "button" : void 0,
-      tabIndex: a ? 0 : void 0,
-      "aria-disabled": t || void 0,
-      onClick: a ? r : void 0,
-      onKeyDown: n,
       ...o,
+      "aria-disabled": r ? void 0 : a || o["aria-disabled"],
+      onClick: d ? x : void 0,
+      onKeyDown: w,
       children: [
-        s && /* @__PURE__ */ c("div", { className: "smwb-card__title", children: s }),
-        f,
-        i && /* @__PURE__ */ c("div", { className: "smwb-card__footer", children: i })
+        /* @__PURE__ */ n(
+          "div",
+          {
+            ...s,
+            ref: i,
+            className: "smwb-card__content",
+            role: r ? "button" : void 0,
+            tabIndex: (f = s.tabIndex) != null ? f : d ? 0 : void 0,
+            "aria-disabled": r ? a || s["aria-disabled"] : void 0,
+            children: [
+              m && /* @__PURE__ */ v("div", { className: "smwb-card__title", children: m }),
+              l
+            ]
+          }
+        ),
+        c && /* @__PURE__ */ v("div", { className: "smwb-card__footer", children: c })
       ]
     }
   );
 });
 export {
-  j as Card,
-  j as default
+  B as Card,
+  B as default
 };
 //# sourceMappingURL=card.js.map

package/dist/components/dataDisplay/card/card.js.map

@@ -1 +1 @@
-{"version":3,"file":"card.js","sources":["../../../../src/components/dataDisplay/card/card.tsx"],"sourcesContent":["import React, { HTMLAttributes, PropsWithChildren, ReactNode } from \"react\";\nimport cn from \"clsx\";\n\nexport interface CardProps extends HTMLAttributes<HTMLDivElement> {\n  className?: string;\n  variant?: \"filled\" | \"elevated\" | \"outlined\";\n  disabled?: boolean;\n  title?: string;\n  /** Footer slot rendered after the content. */\n  footer?: ReactNode;\n  /** Makes the card interactive (role=button, keyboard, focus ring). */\n  onClick?: React.MouseEventHandler<HTMLDivElement>;\n}\n\nexport const Card = React.forwardRef<HTMLDivElement, PropsWithChildren<CardProps>>(function Card(\n  { className, variant = \"elevated\", children, disabled, title, footer, onClick, onKeyDown, ...rest },\n  ref\n) {\n  const interactive = !!onClick && !disabled;\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n    onKeyDown?.(e);\n    if (interactive && (e.key === \"Enter\" || e.key === \" \")) {\n      e.preventDefault();\n      onClick?.(e as unknown as React.MouseEvent<HTMLDivElement>);\n    }\n  };\n\n  return (\n    <div\n      ref={ref}\n      data-testid=\"card\"\n      className={cn(\"smwb-card\", `smwb-card_${variant}`, className, {\n        card_disabled: disabled,\n        \"smwb-card_interactive\": interactive,\n      })}\n      role={interactive ? \"button\" : undefined}\n      tabIndex={interactive ? 0 : undefined}\n      aria-disabled={disabled || undefined}\n      onClick={interactive ? onClick : undefined}\n      onKeyDown={handleKeyDown}\n      {...rest}\n    >\n      {title && <div className=\"smwb-card__title\">{title}</div>}\n      {children}\n      {footer && <div className=\"smwb-card__footer\">{footer}</div>}\n    </div>\n  );\n});\n\nexport default Card;\n"],"names":["Card","React","className","variant","children","disabled","title","footer","onClick","onKeyDown","rest","ref","interactive","handleKeyDown","e","jsxs","cn","jsx"],"mappings":";;;;AAeO,MAAMA,IAAOC,EAAM,WAAyD,SACjF,EAAE,WAAAC,GAAW,SAAAC,IAAU,YAAY,UAAAC,GAAU,UAAAC,GAAU,OAAAC,GAAO,QAAAC,GAAQ,SAAAC,GAAS,WAAAC,GAAW,GAAGC,EAAA,GAC7FC,GACA;AACA,QAAMC,IAAc,CAAC,CAACJ,KAAW,CAACH,GAE5BQ,IAAgB,CAACC,MAA2C;AAChE,IAAAL,KAAA,QAAAA,EAAYK,IACRF,MAAgBE,EAAE,QAAQ,WAAWA,EAAE,QAAQ,SACjDA,EAAE,eAAA,GACFN,KAAA,QAAAA,EAAUM;AAAA,EAEd;AAEA,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAJ;AAAA,MACA,eAAY;AAAA,MACZ,WAAWK,EAAG,aAAa,aAAab,CAAO,IAAID,GAAW;AAAA,QAC5D,eAAeG;AAAA,QACf,yBAAyBO;AAAA,MAAA,CAC1B;AAAA,MACD,MAAMA,IAAc,WAAW;AAAA,MAC/B,UAAUA,IAAc,IAAI;AAAA,MAC5B,iBAAeP,KAAY;AAAA,MAC3B,SAASO,IAAcJ,IAAU;AAAA,MACjC,WAAWK;AAAA,MACV,GAAGH;AAAA,MAEH,UAAA;AAAA,QAAAJ,KAAS,gBAAAW,EAAC,OAAA,EAAI,WAAU,oBAAoB,UAAAX,GAAM;AAAA,QAClDF;AAAA,QACAG,KAAU,gBAAAU,EAAC,OAAA,EAAI,WAAU,qBAAqB,UAAAV,EAAA,CAAO;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAG5D,CAAC;"}
+{"version":3,"file":"card.js","sources":["../../../../src/components/dataDisplay/card/card.tsx"],"sourcesContent":["import React, { HTMLAttributes, PropsWithChildren, ReactNode, useRef } from \"react\";\nimport cn from \"clsx\";\nimport { isOwnClick } from \"../../../utils/ownClick\";\nimport { splitControlProps } from \"../../../utils/controlProps\";\n\nexport interface CardProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Class name(s) for the root `<div>`, the card's box. `style`, `id`, `data-*`, `aria-hidden`, `ref` and event\n   * handlers go to the root too. With `onClick`, `role`, `tabIndex`, `onFocus`, `onBlur` and the other `aria-*`\n   * attributes go to the card's button, `.smwb-card__content` (the title and the children), which is also the element\n   * to focus. Without `onClick` the card is not a control, and they stay on the root, which holds the footer too.\n   */\n  className?: string;\n  variant?: \"filled\" | \"elevated\" | \"outlined\";\n  /**\n   * Disables the card: it says `aria-disabled`, and neither clicks nor keys run `onClick`. With `onClick` the card is\n   * still a button, out of the tab order.\n   */\n  disabled?: boolean;\n  /**\n   * A heading drawn at the top of the card, not the `title` attribute. With `onClick` it is part of the card's button,\n   * and the button's name starts with it.\n   */\n  title?: string;\n  /**\n   * Footer slot rendered after the content. With `onClick` it sits beside the card's button, not inside it, so\n   * controls here keep their own names, clicks and keys; see `onClick`.\n   */\n  footer?: ReactNode;\n  /**\n   * Makes the card interactive: its content (the title and the children) becomes a button, named by that content, with\n   * a focus ring around the whole card. The footer is not part of that button but its sibling, so the card's controls\n   * go there: a control in the children would sit inside the button, and its name would join the card's.\n   *\n   * Runs when the card is activated: a click on it, or Enter / Space while its button has focus. A click on a control\n   * (button, link, input, anything focusable), in the footer or the children, or in a portal opened from the card does\n   * not run it, and neither do Enter / Space pressed on such a control. Content that is not a control keeps its click\n   * from activating the card by calling `preventDefault()` on it.\n   */\n  onClick?: React.MouseEventHandler<HTMLDivElement>;\n  /** Test id of the root `<div>`; `card` unless given. */\n  \"data-testid\"?: string;\n}\n\nexport const Card = React.forwardRef<HTMLDivElement, PropsWithChildren<CardProps>>(function Card(\n  {\n    className,\n    variant = \"elevated\",\n    children,\n    disabled,\n    title,\n    footer,\n    onClick,\n    onKeyDown,\n    \"data-testid\": dataTestId = \"card\",\n    ...rest\n  },\n  ref\n) {\n  const interactive = !!onClick && !disabled;\n  // With onClick the card's content is its button, and what the card is to the\n  // keyboard and to assistive tech goes there. Without it the card is not a\n  // control: the caller's role and ARIA attributes stay on the root, around\n  // the footer too.\n  const [control, box] = splitControlProps(rest, !!onClick);\n  const contentRef = useRef<HTMLDivElement | null>(null);\n\n  // Keys pressed in the footer or on a control inside bubble up here too; only\n  // the keys of the card's button activate it. The caller's onKeyDown still\n  // sees them all.\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n    onKeyDown?.(e);\n    if (!interactive || e.target !== contentRef.current) return;\n    if (e.key === \"Enter\" || e.key === \" \") {\n      e.preventDefault();\n      onClick?.(e as unknown as React.MouseEvent<HTMLDivElement>);\n    }\n  };\n\n  // A click on the card's button, or on what is not a control beside it (the\n  // footer's text, the padding), activates the card: not one on a control, nor\n  // one in a portal rendered inside (React delivers it here, though it landed\n  // outside), nor one whose default a handler inside has prevented.\n  const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {\n    if (isOwnClick(e, contentRef.current)) onClick?.(e);\n  };\n\n  return (\n    <div\n      ref={ref}\n      data-testid={dataTestId}\n      className={cn(\"smwb-card\", `smwb-card_${variant}`, className, {\n        card_disabled: disabled,\n        \"smwb-card_interactive\": interactive,\n      })}\n      {...box}\n      // A disabled card says so where the caller's ARIA attributes are: on its\n      // button with onClick, on the root without.\n      aria-disabled={onClick ? undefined : disabled || box[\"aria-disabled\"]}\n      onClick={interactive ? handleClick : undefined}\n      onKeyDown={handleKeyDown}\n    >\n      <div\n        {...control}\n        ref={contentRef}\n        className=\"smwb-card__content\"\n        // With onClick the content is the card's button, and a disabled card\n        // says so: these win over the caller's, and where the card sets none,\n        // the caller's stay. Its tabIndex is a default: the caller's wins, e.g.\n        // for roving focus.\n        role={onClick ? \"button\" : undefined}\n        tabIndex={control.tabIndex ?? (interactive ? 0 : undefined)}\n        aria-disabled={onClick ? disabled || control[\"aria-disabled\"] : undefined}\n      >\n        {title && <div className=\"smwb-card__title\">{title}</div>}\n        {children}\n      </div>\n      {/* Beside the button, not in it: controls here keep their names and input. */}\n      {footer && <div className=\"smwb-card__footer\">{footer}</div>}\n    </div>\n  );\n});\n\nexport default Card;\n"],"names":["Card","React","className","variant","children","disabled","title","footer","onClick","onKeyDown","dataTestId","rest","ref","interactive","control","box","splitControlProps","contentRef","useRef","handleKeyDown","e","handleClick","isOwnClick","jsxs","cn","_a","jsx"],"mappings":";;;;;;;AA8CO,MAAMA,IAAOC,EAAM,WAAyD,SACjF;AAAA,EACE,WAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,SAAAC;AAAA,EACA,WAAAC;AAAA,EACA,eAAeC,IAAa;AAAA,EAC5B,GAAGC;AACL,GACAC,GACA;;AACA,QAAMC,IAAc,CAAC,CAACL,KAAW,CAACH,GAK5B,CAACS,GAASC,CAAG,IAAIC,EAAkBL,GAAM,CAAC,CAACH,CAAO,GAClDS,IAAaC,EAA8B,IAAI,GAK/CC,IAAgB,CAACC,MAA2C;AAEhE,IADAX,KAAA,QAAAA,EAAYW,IACR,GAACP,KAAeO,EAAE,WAAWH,EAAW,aACxCG,EAAE,QAAQ,WAAWA,EAAE,QAAQ,SACjCA,EAAE,eAAA,GACFZ,KAAA,QAAAA,EAAUY;AAAA,EAEd,GAMMC,IAAc,CAACD,MAAwC;AAC3D,IAAIE,EAAWF,GAAGH,EAAW,OAAO,qBAAaG;AAAA,EACnD;AAEA,SACE,gBAAAG;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAX;AAAA,MACA,eAAaF;AAAA,MACb,WAAWc,EAAG,aAAa,aAAarB,CAAO,IAAID,GAAW;AAAA,QAC5D,eAAeG;AAAA,QACf,yBAAyBQ;AAAA,MAAA,CAC1B;AAAA,MACA,GAAGE;AAAA,MAGJ,iBAAeP,IAAU,SAAYH,KAAYU,EAAI,eAAe;AAAA,MACpE,SAASF,IAAcQ,IAAc;AAAA,MACrC,WAAWF;AAAA,MAEX,UAAA;AAAA,QAAA,gBAAAI;AAAA,UAAC;AAAA,UAAA;AAAA,YACE,GAAGT;AAAA,YACJ,KAAKG;AAAA,YACL,WAAU;AAAA,YAKV,MAAMT,IAAU,WAAW;AAAA,YAC3B,WAAUiB,IAAAX,EAAQ,aAAR,OAAAW,IAAqBZ,IAAc,IAAI;AAAA,YACjD,iBAAeL,IAAUH,KAAYS,EAAQ,eAAe,IAAI;AAAA,YAE/D,UAAA;AAAA,cAAAR,KAAS,gBAAAoB,EAAC,OAAA,EAAI,WAAU,oBAAoB,UAAApB,GAAM;AAAA,cAClDF;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,QAGFG,KAAU,gBAAAmB,EAAC,OAAA,EAAI,WAAU,qBAAqB,UAAAnB,EAAA,CAAO;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAG5D,CAAC;"}