npm - @smwb/ui-react - Versions diffs - 2.6.3 → 2.7.0 - Mend

@smwb/ui-react 2.6.3 → 2.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (416) hide show

package/dist/components/dataDisplay/table/tablePagination/tablePagination.js CHANGED Viewed

@@ -1,8 +1,9 @@
 import { jsx as e, jsxs as o } from "react/jsx-runtime";
-import '../../../../assets/styles/less/components/table/tablePagination/tablePagination.entry.css';/* empty css                                                                                  */
+import '../../../../assets/styles/less/components/table/tablePagination/tablePagination.entry.css';import '../../../../assets/styles/less/tokens.entry.css';/* empty css                                        */
+/* empty css                                                                                  */
 import f from "clsx";
 import { Icon as d } from "../../../base/icon/icon.js";
-const k = ({
+const x = ({
   limit: n,
   page: s,
   totalCount: t,
@@ -14,11 +15,11 @@ const k = ({
 }) => {
   const _ = typeof t == "undefined", m = _ ? !b : s === Math.ceil(t / n), h = (a) => {
     r && r(+a.target.value);
-  }, w = () => {
+  }, p = () => {
     c == null || c();
-  }, g = () => {
+  }, w = () => {
     i == null || i();
-  }, p = () => {
+  }, g = () => {
     const a = s * n - n, u = s * n;
     return `${a}–${u}` + (_ ? "" : ` of ${t}`);
   };
@@ -27,15 +28,15 @@ const k = ({
       /* @__PURE__ */ e("span", { children: "Rows per page" }),
       /* @__PURE__ */ e("select", { id: "rows", className: "smwb-table__pagination__select", onChange: h, value: n, children: l.map((a) => /* @__PURE__ */ e("option", { value: a, className: f("smwb-select-option", { selected: a === n }), children: a }, a)) })
     ] }),
-    /* @__PURE__ */ e("div", { className: "smwb-table__pagination__current-count", children: p() }),
+    /* @__PURE__ */ e("div", { className: "smwb-table__pagination__current-count", children: g() }),
     /* @__PURE__ */ o("div", { className: "smwb-table__pagination__buttons", children: [
-      /* @__PURE__ */ e("button", { className: "smwb-table__pagination__control", onClick: w, disabled: s === 1, children: /* @__PURE__ */ e(d, { name: "chevron_left", size: 24, weight: 600 }) }),
+      /* @__PURE__ */ e("button", { className: "smwb-table__pagination__control", onClick: p, disabled: s === 1, children: /* @__PURE__ */ e(d, { name: "chevron_left", size: 24, weight: 600 }) }),
       /* @__PURE__ */ e("span", { className: "smwb-table__pagination__page", children: s }),
-      /* @__PURE__ */ e("button", { className: "smwb-table__pagination__control", onClick: g, disabled: m, children: /* @__PURE__ */ e(d, { name: "chevron_right", size: 24, weight: 600 }) })
+      /* @__PURE__ */ e("button", { className: "smwb-table__pagination__control", onClick: w, disabled: m, children: /* @__PURE__ */ e(d, { name: "chevron_right", size: 24, weight: 600 }) })
     ] })
   ] }) });
 };
 export {
-  k as default
+  x as default
 };
 //# sourceMappingURL=tablePagination.js.map

package/dist/components/dataDisplay/table/tablePagination/tablePagination.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"tablePagination.js","sources":["../../../../../src/components/dataDisplay/table/tablePagination/tablePagination.tsx"],"sourcesContent":["import cn from \"clsx\";\nimport React from \"react\";\nimport Icon from \"../../../base/icon/icon\";\n\nexport interface BaseTablePaginationProps {\n page: number;\n limit: number;\n onPrev?: () => void;\n onNext?: () => void;\n limitOptions?: number[];\n onLimitChange?: (limit: number) => void;\n}\n\n// Вариант с известным количеством записей\ninterface WithTotalCount extends BaseTablePaginationProps {\n totalCount: number;\n hasNextPage?: never;\n}\n\n// Вариант с бесконечной пагинацией\ninterface WithHasNextPage extends BaseTablePaginationProps {\n totalCount?: never;\n hasNextPage: boolean;\n}\n\nexport type TablePaginationProps = WithTotalCount \| WithHasNextPage;\n\nconst TablePagination = ({\n limit,\n page,\n totalCount,\n onPrev,\n onNext,\n limitOptions,\n onLimitChange,\n hasNextPage,\n}: TablePaginationProps) => {\n // Если totalCount не передан, считаем что пагинация \"бесконечная\"\n const isInfiniteMode = typeof totalCount === \"undefined\";\n\n const isDisabledNext = isInfiniteMode ? !hasNextPage : page === Math.ceil(totalCount / limit);\n\n const handleLimitChange = (e: React.ChangeEvent<HTMLSelectElement>) => {\n if (!onLimitChange) return;\n onLimitChange(+e.target.value);\n };\n\n const handlePrev = () => {\n onPrev?.();\n };\n\n const handleNext = () => {\n onNext?.();\n };\n\n const renderCountText = () => {\n const from = page * limit - limit;\n const to = page * limit;\n\n return `${from}–${to}` + (isInfiniteMode ? \"\" : ` of ${totalCount}`);\n };\n\n return (\n <div className=\"smwb-table__pagination\">\n <div className=\"smwb-table__pagination__controls\">\n {limitOptions && limitOptions.length > 1 && (\n <div className=\"smwb-table__pagination__rows\">\n <span>Rows per page</span>\n <select id=\"rows\" className=\"smwb-table__pagination__select\" onChange={handleLimitChange} value={limit}>\n {limitOptions.map((opt) => (\n <option value={opt} className={cn(\"smwb-select-option\", { selected: opt === limit })} key={opt}>\n {opt}\n </option>\n ))}\n </select>\n </div>\n )}\n <div className=\"smwb-table__pagination__current-count\">{renderCountText()}</div>\n <div className=\"smwb-table__pagination__buttons\">\n <button className=\"smwb-table__pagination__control\" onClick={handlePrev} disabled={page === 1}>\n <Icon name=\"chevron_left\" size={24} weight={600} />\n </button>\n <span className=\"smwb-table__pagination__page\">{page}</span>\n <button className=\"smwb-table__pagination__control\" onClick={handleNext} disabled={isDisabledNext}>\n <Icon name=\"chevron_right\" size={24} weight={600} />\n </button>\n </div>\n </div>\n </div>\n );\n};\n\nexport default TablePagination;\n"],"names":["TablePagination","limit","page","totalCount","onPrev","onNext","limitOptions","onLimitChange","hasNextPage","isInfiniteMode","isDisabledNext","handleLimitChange","e","handlePrev","handleNext","renderCountText","from","to","jsxs","jsx","opt","cn","Icon"],"mappings":"~~;;;;AA4BA~~,MAAMA,IAAkB,CAAC;AAAA,EACvB,OAAAC;AAAA,EACA,MAAAC;AAAA,EACA,YAAAC;AAAA,EACA,QAAAC;AAAA,EACA,QAAAC;AAAA,EACA,cAAAC;AAAA,EACA,eAAAC;AAAA,EACA,aAAAC;AACF,MAA4B;AAE1B,QAAMC,IAAiB,OAAON,KAAe,aAEvCO,IAAiBD,IAAiB,CAACD,IAAcN,MAAS,KAAK,KAAKC,IAAaF,CAAK,GAEtFU,IAAoB,CAACC,MAA4C;AACrE,IAAKL,KACLA,EAAc,CAACK,EAAE,OAAO,KAAK;AAAA,EAC/B,GAEMC,IAAa,MAAM;AACvB,IAAAT,KAAA,QAAAA;AAAA,EACF,GAEMU,IAAa,MAAM;AACvB,IAAAT,KAAA,QAAAA;AAAA,EACF,GAEMU,IAAkB,MAAM;AAC5B,UAAMC,IAAOd,IAAOD,IAAQA,GACtBgB,IAAKf,IAAOD;AAElB,WAAO,GAAGe,CAAI,IAAIC,CAAE,MAAMR,IAAiB,KAAK,OAAON,CAAU;AAAA,EACnE;AAEA,2BACG,OAAA,EAAI,WAAU,0BACb,UAAA,gBAAAe,EAAC,OAAA,EAAI,WAAU,oCACZ,UAAA;AAAA,IAAAZ,KAAgBA,EAAa,SAAS,KACrC,gBAAAY,EAAC,OAAA,EAAI,WAAU,gCACb,UAAA;AAAA,MAAA,gBAAAC,EAAC,UAAK,UAAA,gBAAA,CAAa;AAAA,MACnB,gBAAAA,EAAC,UAAA,EAAO,IAAG,QAAO,WAAU,kCAAiC,UAAUR,GAAmB,OAAOV,GAC9F,UAAAK,EAAa,IAAI,CAACc,MACjB,gBAAAD,EAAC,UAAA,EAAO,OAAOC,GAAK,WAAWC,EAAG,sBAAsB,EAAE,UAAUD,MAAQnB,EAAA,CAAO,GAChF,UAAAmB,EAAA,GADwFA,CAE3F,CACD,EAAA,CACH;AAAA,IAAA,GACF;AAAA,IAEF,gBAAAD,EAAC,OAAA,EAAI,WAAU,yCAAyC,eAAkB;AAAA,IAC1E,gBAAAD,EAAC,OAAA,EAAI,WAAU,mCACb,UAAA;AAAA,MAAA,gBAAAC,EAAC,YAAO,WAAU,mCAAkC,SAASN,GAAY,UAAUX,MAAS,GAC1F,UAAA,gBAAAiB,EAACG,GAAA,EAAK,MAAK,gBAAe,MAAM,IAAI,QAAQ,KAAK,GACnD;AAAA,MACA,gBAAAH,EAAC,QAAA,EAAK,WAAU,gCAAgC,UAAAjB,GAAK;AAAA,wBACpD,UAAA,EAAO,WAAU,mCAAkC,SAASY,GAAY,UAAUJ,GACjF,UAAA,gBAAAS,EAACG,GAAA,EAAK,MAAK,iBAAgB,MAAM,IAAI,QAAQ,KAAK,EAAA,CACpD;AAAA,IAAA,EAAA,CACF;AAAA,EAAA,EAAA,CACF,EAAA,CACF;AAEJ;"}
1	+ {"version":3,"file":"tablePagination.js","sources":["../../../../../src/components/dataDisplay/table/tablePagination/tablePagination.tsx"],"sourcesContent":["import cn from \"clsx\";\nimport React from \"react\";\nimport Icon from \"../../../base/icon/icon\";\n\nexport interface BaseTablePaginationProps {\n page: number;\n limit: number;\n onPrev?: () => void;\n onNext?: () => void;\n limitOptions?: number[];\n onLimitChange?: (limit: number) => void;\n}\n\n// Вариант с известным количеством записей\ninterface WithTotalCount extends BaseTablePaginationProps {\n totalCount: number;\n hasNextPage?: never;\n}\n\n// Вариант с бесконечной пагинацией\ninterface WithHasNextPage extends BaseTablePaginationProps {\n totalCount?: never;\n hasNextPage: boolean;\n}\n\nexport type TablePaginationProps = WithTotalCount \| WithHasNextPage;\n\nconst TablePagination = ({\n limit,\n page,\n totalCount,\n onPrev,\n onNext,\n limitOptions,\n onLimitChange,\n hasNextPage,\n}: TablePaginationProps) => {\n // Если totalCount не передан, считаем что пагинация \"бесконечная\"\n const isInfiniteMode = typeof totalCount === \"undefined\";\n\n const isDisabledNext = isInfiniteMode ? !hasNextPage : page === Math.ceil(totalCount / limit);\n\n const handleLimitChange = (e: React.ChangeEvent<HTMLSelectElement>) => {\n if (!onLimitChange) return;\n onLimitChange(+e.target.value);\n };\n\n const handlePrev = () => {\n onPrev?.();\n };\n\n const handleNext = () => {\n onNext?.();\n };\n\n const renderCountText = () => {\n const from = page * limit - limit;\n const to = page * limit;\n\n return `${from}–${to}` + (isInfiniteMode ? \"\" : ` of ${totalCount}`);\n };\n\n return (\n <div className=\"smwb-table__pagination\">\n <div className=\"smwb-table__pagination__controls\">\n {limitOptions && limitOptions.length > 1 && (\n <div className=\"smwb-table__pagination__rows\">\n <span>Rows per page</span>\n <select id=\"rows\" className=\"smwb-table__pagination__select\" onChange={handleLimitChange} value={limit}>\n {limitOptions.map((opt) => (\n <option value={opt} className={cn(\"smwb-select-option\", { selected: opt === limit })} key={opt}>\n {opt}\n </option>\n ))}\n </select>\n </div>\n )}\n <div className=\"smwb-table__pagination__current-count\">{renderCountText()}</div>\n <div className=\"smwb-table__pagination__buttons\">\n <button className=\"smwb-table__pagination__control\" onClick={handlePrev} disabled={page === 1}>\n <Icon name=\"chevron_left\" size={24} weight={600} />\n </button>\n <span className=\"smwb-table__pagination__page\">{page}</span>\n <button className=\"smwb-table__pagination__control\" onClick={handleNext} disabled={isDisabledNext}>\n <Icon name=\"chevron_right\" size={24} weight={600} />\n </button>\n </div>\n </div>\n </div>\n );\n};\n\nexport default TablePagination;\n"],"names":["TablePagination","limit","page","totalCount","onPrev","onNext","limitOptions","onLimitChange","hasNextPage","isInfiniteMode","isDisabledNext","handleLimitChange","e","handlePrev","handleNext","renderCountText","from","to","jsxs","jsx","opt","cn","Icon"],"mappings":";;;;;AA6BA,MAAMA,IAAkB,CAAC;AAAA,EACvB,OAAAC;AAAA,EACA,MAAAC;AAAA,EACA,YAAAC;AAAA,EACA,QAAAC;AAAA,EACA,QAAAC;AAAA,EACA,cAAAC;AAAA,EACA,eAAAC;AAAA,EACA,aAAAC;AACF,MAA4B;AAE1B,QAAMC,IAAiB,OAAON,KAAe,aAEvCO,IAAiBD,IAAiB,CAACD,IAAcN,MAAS,KAAK,KAAKC,IAAaF,CAAK,GAEtFU,IAAoB,CAACC,MAA4C;AACrE,IAAKL,KACLA,EAAc,CAACK,EAAE,OAAO,KAAK;AAAA,EAC/B,GAEMC,IAAa,MAAM;AACvB,IAAAT,KAAA,QAAAA;AAAA,EACF,GAEMU,IAAa,MAAM;AACvB,IAAAT,KAAA,QAAAA;AAAA,EACF,GAEMU,IAAkB,MAAM;AAC5B,UAAMC,IAAOd,IAAOD,IAAQA,GACtBgB,IAAKf,IAAOD;AAElB,WAAO,GAAGe,CAAI,IAAIC,CAAE,MAAMR,IAAiB,KAAK,OAAON,CAAU;AAAA,EACnE;AAEA,2BACG,OAAA,EAAI,WAAU,0BACb,UAAA,gBAAAe,EAAC,OAAA,EAAI,WAAU,oCACZ,UAAA;AAAA,IAAAZ,KAAgBA,EAAa,SAAS,KACrC,gBAAAY,EAAC,OAAA,EAAI,WAAU,gCACb,UAAA;AAAA,MAAA,gBAAAC,EAAC,UAAK,UAAA,gBAAA,CAAa;AAAA,MACnB,gBAAAA,EAAC,UAAA,EAAO,IAAG,QAAO,WAAU,kCAAiC,UAAUR,GAAmB,OAAOV,GAC9F,UAAAK,EAAa,IAAI,CAACc,MACjB,gBAAAD,EAAC,UAAA,EAAO,OAAOC,GAAK,WAAWC,EAAG,sBAAsB,EAAE,UAAUD,MAAQnB,EAAA,CAAO,GAChF,UAAAmB,EAAA,GADwFA,CAE3F,CACD,EAAA,CACH;AAAA,IAAA,GACF;AAAA,IAEF,gBAAAD,EAAC,OAAA,EAAI,WAAU,yCAAyC,eAAkB;AAAA,IAC1E,gBAAAD,EAAC,OAAA,EAAI,WAAU,mCACb,UAAA;AAAA,MAAA,gBAAAC,EAAC,YAAO,WAAU,mCAAkC,SAASN,GAAY,UAAUX,MAAS,GAC1F,UAAA,gBAAAiB,EAACG,GAAA,EAAK,MAAK,gBAAe,MAAM,IAAI,QAAQ,KAAK,GACnD;AAAA,MACA,gBAAAH,EAAC,QAAA,EAAK,WAAU,gCAAgC,UAAAjB,GAAK;AAAA,wBACpD,UAAA,EAAO,WAAU,mCAAkC,SAASY,GAAY,UAAUJ,GACjF,UAAA,gBAAAS,EAACG,GAAA,EAAK,MAAK,iBAAgB,MAAM,IAAI,QAAQ,KAAK,EAAA,CACpD;AAAA,IAAA,EAAA,CACF;AAAA,EAAA,EAAA,CACF,EAAA,CACF;AAEJ;"}

package/dist/components/dataDisplay/thumbCard/thumbCard.js CHANGED Viewed

@@ -1,11 +1,12 @@
-import { jsxs as p, jsx as s } from "react/jsx-runtime";
-import '../../../assets/styles/less/components/thumbCard/thumbCard.entry.css';/* empty css                                                             */
+import { jsxs as h, jsx as s } from "react/jsx-runtime";
+import '../../../assets/styles/less/components/thumbCard/thumbCard.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
+/* empty css                                                             */
 import { forwardRef as L, useRef as _, useState as j, useEffect as D } from "react";
 import { createPortal as I } from "react-dom";
 import M from "clsx";
 import { useForkRef as z } from "../../../hooks/useForkRef.js";
 import { LazyImage as B } from "../lazyImage/lazyImage.js";
-const Q = L(function({
+const U = L(function({
   src: w,
   caption: c,
   selected: i,
@@ -24,8 +25,8 @@ const Q = L(function({
     o.current && (clearTimeout(o.current), o.current = null);
   }, k = () => {
     a == null || n || (e(), o.current = setTimeout(() => {
-      var h;
-      const t = (h = f.current) == null ? void 0 : h.getBoundingClientRect();
+      var p;
+      const t = (p = f.current) == null ? void 0 : p.getBoundingClientRect();
       t && b({ top: t.top, left: t.right + 8 });
     }, g));
   }, C = () => {
@@ -35,7 +36,7 @@ const Q = L(function({
   const m = !!r && !n, E = (t) => {
     m && (t.key === "Enter" || t.key === " ") && (t.preventDefault(), r == null || r());
   };
-  return /* @__PURE__ */ p(
+  return /* @__PURE__ */ h(
     "div",
     {
       ...R,
@@ -54,7 +55,7 @@ const Q = L(function({
       onMouseEnter: k,
       onMouseLeave: C,
       children: [
-        /* @__PURE__ */ p("div", { className: "smwb-thumb-card__media", children: [
+        /* @__PURE__ */ h("div", { className: "smwb-thumb-card__media", children: [
           /* @__PURE__ */ s(B, { src: w, lazy: y, fallback: v }),
           d ? /* @__PURE__ */ s("div", { className: "smwb-thumb-card__slot smwb-thumb-card__slot--start", children: d }) : null,
           l ? /* @__PURE__ */ s("div", { className: "smwb-thumb-card__slot smwb-thumb-card__slot--end", children: l }) : null
@@ -76,7 +77,7 @@ const Q = L(function({
   );
 });
 export {
-  Q as ThumbCard,
-  Q as default
+  U as ThumbCard,
+  U as default
 };
 //# sourceMappingURL=thumbCard.js.map

package/dist/components/dataDisplay/thumbCard/thumbCard.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"thumbCard.js","sources":["../../../../src/components/dataDisplay/thumbCard/thumbCard.tsx"],"sourcesContent":["import React, { forwardRef, useEffect, useRef, useState } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport cn from \"clsx\";\nimport { LazyImage } from \"../lazyImage\";\nimport { useForkRef } from \"../../../hooks/useForkRef\";\n\nexport interface ThumbCardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, \"onSelect\"> {\n /** Thumbnail URL; falls back to `fallback` when missing / failed. /\n src?: string;\n caption?: React.ReactNode;\n selected?: boolean;\n /* Makes the card a selectable button (keyboard + `aria-pressed`). /\n onSelect?: () => void;\n /* Shown in place of the image when `src` is missing / fails. /\n fallback?: React.ReactNode;\n /* A larger preview shown in a floating popup after a hover delay. /\n hoverPreview?: React.ReactNode \| string;\n /* Top-left overlay slot (e.g. a favourite star). /\n topStart?: React.ReactNode;\n /* Top-right overlay slot (e.g. a kebab menu). /\n topEnd?: React.ReactNode;\n lazy?: boolean;\n disabled?: boolean;\n /* Delay (ms) before the hover preview appears. Default 350. /\n hoverDelay?: number;\n}\n\n/\n A selectable gallery card: image with an `onError` fallback + optional lazy\n * load, keyboard/`aria-pressed` selection, corner action slots, and a delayed\n * floating hover-preview. The generic gallery-card behaviour every app rebuilds\n * on top of the primitives. SSR-safe — the hover preview is client-only.\n */\nexport const ThumbCard = forwardRef<HTMLDivElement, ThumbCardProps>(function ThumbCard(\n {\n src,\n caption,\n selected,\n onSelect,\n fallback,\n hoverPreview,\n topStart,\n topEnd,\n lazy = true,\n disabled,\n hoverDelay = 350,\n className,\n ...rest\n },\n ref\n) {\n const cardRef = useRef<HTMLDivElement \| null>(null);\n const setRefs = useForkRef(ref, cardRef);\n const [preview, setPreview] = useState<{ top: number; left: number } \| null>(null);\n const timer = useRef<ReturnType<typeof setTimeout> \| null>(null);\n\n const clearTimer = (): void => {\n if (timer.current) {\n clearTimeout(timer.current);\n timer.current = null;\n }\n };\n const onEnter = (): void => {\n if (hoverPreview == null \|\| disabled) return;\n clearTimer();\n timer.current = setTimeout(() => {\n const rect = cardRef.current?.getBoundingClientRect();\n if (rect) setPreview({ top: rect.top, left: rect.right + 8 });\n }, hoverDelay);\n };\n const onLeave = (): void => {\n clearTimer();\n setPreview(null);\n };\n useEffect(() => clearTimer, []);\n\n const interactive = !!onSelect && !disabled;\n const onKeyDown = (event: React.KeyboardEvent<HTMLDivElement>): void => {\n if (interactive && (event.key === \"Enter\" \|\| event.key === \" \")) {\n event.preventDefault();\n onSelect?.();\n }\n };\n\n return (\n <div\n {...rest}\n ref={setRefs}\n className={cn(\"smwb-thumb-card\", className, {\n \"smwb-thumb-card--selected\": selected,\n \"smwb-thumb-card--disabled\": disabled,\n \"smwb-thumb-card--interactive\": interactive,\n })}\n role={interactive ? \"button\" : undefined}\n tabIndex={interactive ? 0 : undefined}\n aria-pressed={onSelect ? (selected ?? false) : undefined}\n aria-disabled={disabled \|\| undefined}\n onClick={interactive ? () => onSelect?.() : undefined}\n onKeyDown={onKeyDown}\n onMouseEnter={onEnter}\n onMouseLeave={onLeave}\n >\n <div className=\"smwb-thumb-card__media\">\n <LazyImage src={src} lazy={lazy} fallback={fallback} />\n {topStart ? <div className=\"smwb-thumb-card__slot smwb-thumb-card__slot--start\">{topStart}</div> : null}\n {topEnd ? <div className=\"smwb-thumb-card__slot smwb-thumb-card__slot--end\">{topEnd}</div> : null}\n </div>\n {caption ? <div className=\"smwb-thumb-card__caption\">{caption}</div> : null}\n {preview && typeof document !== \"undefined\"\n ? createPortal(\n <div\n className=\"smwb-thumb-card__preview\"\n style={{ position: \"fixed\", top: preview.top, left: preview.left }}\n >\n {typeof hoverPreview === \"string\" ? <img src={hoverPreview} alt=\"\" /> : hoverPreview}\n </div>,\n document.body\n )\n : null}\n </div>\n );\n});\n\nexport default ThumbCard;\n"],"names":["ThumbCard","forwardRef","src","caption","selected","onSelect","fallback","hoverPreview","topStart","topEnd","lazy","disabled","hoverDelay","className","rest","ref","cardRef","useRef","setRefs","useForkRef","preview","setPreview","useState","timer","clearTimer","onEnter","rect","_a","onLeave","useEffect","interactive","onKeyDown","event","jsxs","cn","jsx","LazyImage","createPortal"],"mappings":"~~;;;;;;;AAkCO~~,MAAMA,IAAYC,EAA2C,SAClE;AAAA,EACE,KAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,cAAAC;AAAA,EACA,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,UAAAC;AAAA,EACA,YAAAC,IAAa;AAAA,EACb,WAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAAUC,EAA8B,IAAI,GAC5CC,IAAUC,EAAWJ,GAAKC,CAAO,GACjC,CAACI,GAASC,CAAU,IAAIC,EAA+C,IAAI,GAC3EC,IAAQN,EAA6C,IAAI,GAEzDO,IAAa,MAAY;AAC7B,IAAID,EAAM,YACR,aAAaA,EAAM,OAAO,GAC1BA,EAAM,UAAU;AAAA,EAEpB,GACME,IAAU,MAAY;AAC1B,IAAIlB,KAAgB,QAAQI,MAC5Ba,EAAA,GACAD,EAAM,UAAU,WAAW,MAAM;;AAC/B,YAAMG,KAAOC,IAAAX,EAAQ,YAAR,gBAAAW,EAAiB;AAC9B,MAAID,KAAML,EAAW,EAAE,KAAKK,EAAK,KAAK,MAAMA,EAAK,QAAQ,GAAG;AAAA,IAC9D,GAAGd,CAAU;AAAA,EACf,GACMgB,IAAU,MAAY;AAC1B,IAAAJ,EAAA,GACAH,EAAW,IAAI;AAAA,EACjB;AACA,EAAAQ,EAAU,MAAML,GAAY,EAAE;AAE9B,QAAMM,IAAc,CAAC,CAACzB,KAAY,CAACM,GAC7BoB,IAAY,CAACC,MAAqD;AACtE,IAAIF,MAAgBE,EAAM,QAAQ,WAAWA,EAAM,QAAQ,SACzDA,EAAM,eAAA,GACN3B,KAAA,QAAAA;AAAA,EAEJ;AAEA,SACE,gBAAA4B;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGnB;AAAA,MACJ,KAAKI;AAAA,MACL,WAAWgB,EAAG,mBAAmBrB,GAAW;AAAA,QAC1C,6BAA6BT;AAAA,QAC7B,6BAA6BO;AAAA,QAC7B,gCAAgCmB;AAAA,MAAA,CACjC;AAAA,MACD,MAAMA,IAAc,WAAW;AAAA,MAC/B,UAAUA,IAAc,IAAI;AAAA,MAC5B,gBAAczB,IAAYD,KAAA,OAAAA,IAAY,KAAS;AAAA,MAC/C,iBAAeO,KAAY;AAAA,MAC3B,SAASmB,IAAc,MAAMzB,KAAA,gBAAAA,MAAe;AAAA,MAC5C,WAAA0B;AAAA,MACA,cAAcN;AAAA,MACd,cAAcG;AAAA,MAEd,UAAA;AAAA,QAAA,gBAAAK,EAAC,OAAA,EAAI,WAAU,0BACb,UAAA;AAAA,UAAA,gBAAAE,EAACC,GAAA,EAAU,KAAAlC,GAAU,MAAAQ,GAAY,UAAAJ,EAAA,CAAoB;AAAA,UACpDE,IAAW,gBAAA2B,EAAC,OAAA,EAAI,WAAU,sDAAsD,aAAS,IAAS;AAAA,UAClG1B,IAAS,gBAAA0B,EAAC,OAAA,EAAI,WAAU,oDAAoD,aAAO,IAAS;AAAA,QAAA,GAC/F;AAAA,QACChC,IAAU,gBAAAgC,EAAC,OAAA,EAAI,WAAU,4BAA4B,aAAQ,IAAS;AAAA,QACtEf,KAAW,OAAO,YAAa,cAC5BiB;AAAA,UACE,gBAAAF;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAU;AAAA,cACV,OAAO,EAAE,UAAU,SAAS,KAAKf,EAAQ,KAAK,MAAMA,EAAQ,KAAA;AAAA,cAE3D,UAAA,OAAOb,KAAiB,WAAW,gBAAA4B,EAAC,SAAI,KAAK5B,GAAc,KAAI,GAAA,CAAG,IAAKA;AAAA,YAAA;AAAA,UAAA;AAAA,UAE1E,SAAS;AAAA,QAAA,IAEX;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC;"}
1	+ {"version":3,"file":"thumbCard.js","sources":["../../../../src/components/dataDisplay/thumbCard/thumbCard.tsx"],"sourcesContent":["import React, { forwardRef, useEffect, useRef, useState } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport cn from \"clsx\";\nimport { LazyImage } from \"../lazyImage\";\nimport { useForkRef } from \"../../../hooks/useForkRef\";\n\nexport interface ThumbCardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, \"onSelect\"> {\n /** Thumbnail URL; falls back to `fallback` when missing / failed. /\n src?: string;\n caption?: React.ReactNode;\n selected?: boolean;\n /* Makes the card a selectable button (keyboard + `aria-pressed`). /\n onSelect?: () => void;\n /* Shown in place of the image when `src` is missing / fails. /\n fallback?: React.ReactNode;\n /* A larger preview shown in a floating popup after a hover delay. /\n hoverPreview?: React.ReactNode \| string;\n /* Top-left overlay slot (e.g. a favourite star). /\n topStart?: React.ReactNode;\n /* Top-right overlay slot (e.g. a kebab menu). /\n topEnd?: React.ReactNode;\n lazy?: boolean;\n disabled?: boolean;\n /* Delay (ms) before the hover preview appears. Default 350. /\n hoverDelay?: number;\n}\n\n/\n A selectable gallery card: image with an `onError` fallback + optional lazy\n * load, keyboard/`aria-pressed` selection, corner action slots, and a delayed\n * floating hover-preview. The generic gallery-card behaviour every app rebuilds\n * on top of the primitives. SSR-safe — the hover preview is client-only.\n */\nexport const ThumbCard = forwardRef<HTMLDivElement, ThumbCardProps>(function ThumbCard(\n {\n src,\n caption,\n selected,\n onSelect,\n fallback,\n hoverPreview,\n topStart,\n topEnd,\n lazy = true,\n disabled,\n hoverDelay = 350,\n className,\n ...rest\n },\n ref\n) {\n const cardRef = useRef<HTMLDivElement \| null>(null);\n const setRefs = useForkRef(ref, cardRef);\n const [preview, setPreview] = useState<{ top: number; left: number } \| null>(null);\n const timer = useRef<ReturnType<typeof setTimeout> \| null>(null);\n\n const clearTimer = (): void => {\n if (timer.current) {\n clearTimeout(timer.current);\n timer.current = null;\n }\n };\n const onEnter = (): void => {\n if (hoverPreview == null \|\| disabled) return;\n clearTimer();\n timer.current = setTimeout(() => {\n const rect = cardRef.current?.getBoundingClientRect();\n if (rect) setPreview({ top: rect.top, left: rect.right + 8 });\n }, hoverDelay);\n };\n const onLeave = (): void => {\n clearTimer();\n setPreview(null);\n };\n useEffect(() => clearTimer, []);\n\n const interactive = !!onSelect && !disabled;\n const onKeyDown = (event: React.KeyboardEvent<HTMLDivElement>): void => {\n if (interactive && (event.key === \"Enter\" \|\| event.key === \" \")) {\n event.preventDefault();\n onSelect?.();\n }\n };\n\n return (\n <div\n {...rest}\n ref={setRefs}\n className={cn(\"smwb-thumb-card\", className, {\n \"smwb-thumb-card--selected\": selected,\n \"smwb-thumb-card--disabled\": disabled,\n \"smwb-thumb-card--interactive\": interactive,\n })}\n role={interactive ? \"button\" : undefined}\n tabIndex={interactive ? 0 : undefined}\n aria-pressed={onSelect ? (selected ?? false) : undefined}\n aria-disabled={disabled \|\| undefined}\n onClick={interactive ? () => onSelect?.() : undefined}\n onKeyDown={onKeyDown}\n onMouseEnter={onEnter}\n onMouseLeave={onLeave}\n >\n <div className=\"smwb-thumb-card__media\">\n <LazyImage src={src} lazy={lazy} fallback={fallback} />\n {topStart ? <div className=\"smwb-thumb-card__slot smwb-thumb-card__slot--start\">{topStart}</div> : null}\n {topEnd ? <div className=\"smwb-thumb-card__slot smwb-thumb-card__slot--end\">{topEnd}</div> : null}\n </div>\n {caption ? <div className=\"smwb-thumb-card__caption\">{caption}</div> : null}\n {preview && typeof document !== \"undefined\"\n ? createPortal(\n <div\n className=\"smwb-thumb-card__preview\"\n style={{ position: \"fixed\", top: preview.top, left: preview.left }}\n >\n {typeof hoverPreview === \"string\" ? <img src={hoverPreview} alt=\"\" /> : hoverPreview}\n </div>,\n document.body\n )\n : null}\n </div>\n );\n});\n\nexport default ThumbCard;\n"],"names":["ThumbCard","forwardRef","src","caption","selected","onSelect","fallback","hoverPreview","topStart","topEnd","lazy","disabled","hoverDelay","className","rest","ref","cardRef","useRef","setRefs","useForkRef","preview","setPreview","useState","timer","clearTimer","onEnter","rect","_a","onLeave","useEffect","interactive","onKeyDown","event","jsxs","cn","jsx","LazyImage","createPortal"],"mappings":"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"}

package/dist/components/dataDisplay/timeline/index.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export { Timeline, TimelineGroup, TimelineItem, default } from "./timeline";
2	+ export type { TimelineProps, TimelineGroupProps, TimelineItemProps, TimelineTone } from "./timeline";

package/dist/components/dataDisplay/timeline/timeline.d.ts ADDED Viewed

@@ -0,0 +1,43 @@
+import React, { HTMLAttributes, LiHTMLAttributes, OlHTMLAttributes, ReactNode } from "react";
+export type TimelineTone = "neutral" | "info" | "success" | "warning" | "error";
+export interface TimelineProps extends OlHTMLAttributes<HTMLOListElement> {
+    className?: string;
+    /** Tighter rows, for side panels. */
+    dense?: boolean;
+    /** Keep a group's label in view while its events scroll past (in a scrolling container). */
+    stickyLabels?: boolean;
+}
+export interface TimelineGroupProps extends Omit<LiHTMLAttributes<HTMLLIElement>, "title"> {
+    className?: string;
+    /** What groups the events — a day, a week, a stage. */
+    label: ReactNode;
+}
+export interface TimelineItemProps extends Omit<HTMLAttributes<HTMLLIElement>, "title"> {
+    className?: string;
+    /** The event itself: a line of text, usually a link. */
+    title: ReactNode;
+    /** A second line: who, what kind, where. */
+    meta?: ReactNode;
+    /** When: a time or a date, at the end of the row. */
+    time?: ReactNode;
+    /** The event's mark on the line: a Material Symbols name or an element. A dot without it. */
+    icon?: string | ReactNode;
+    /** Colour of the mark. */
+    tone?: TimelineTone;
+}
+/**
+ * Events on a line, newest or oldest first as given: TimelineItem children,
+ * optionally grouped by TimelineGroup (a day, a week).
+ */
+export declare const Timeline: React.ForwardRefExoticComponent<TimelineProps & {
+    children?: ReactNode | undefined;
+} & React.RefAttributes<HTMLOListElement>>;
+/** A labelled run of events: the label, then its TimelineItem children on the line. */
+export declare const TimelineGroup: React.ForwardRefExoticComponent<TimelineGroupProps & {
+    children?: ReactNode | undefined;
+} & React.RefAttributes<HTMLLIElement>>;
+/** One event: its mark on the line, the title and meta lines, the time; children below. */
+export declare const TimelineItem: React.ForwardRefExoticComponent<TimelineItemProps & {
+    children?: ReactNode | undefined;
+} & React.RefAttributes<HTMLLIElement>>;
+export default Timeline;

package/dist/components/dataDisplay/timeline/timeline.js ADDED Viewed

@@ -0,0 +1,44 @@
+import { jsx as e, jsxs as r } from "react/jsx-runtime";
+import '../../../assets/styles/less/components/timeline/timeline.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
+/* empty css                                                           */
+import a from "react";
+import o from "clsx";
+import { Icon as w } from "../../base/icon/icon.js";
+const T = a.forwardRef(function({ className: s, dense: n, stickyLabels: m, children: l, ...i }, t) {
+  return /* @__PURE__ */ e(
+    "ol",
+    {
+      ...i,
+      ref: t,
+      className: o(
+        "smwb-timeline",
+        { "smwb-timeline_dense": n, "smwb-timeline_sticky-labels": m },
+        s
+      ),
+      children: l
+    }
+  );
+}), R = a.forwardRef(
+  function({ className: s, label: n, children: m, ...l }, i) {
+    return /* @__PURE__ */ r("li", { ...l, ref: i, className: o("smwb-timeline__group", s), children: [
+      /* @__PURE__ */ e("div", { className: "smwb-timeline__label", children: n }),
+      /* @__PURE__ */ e("ol", { className: "smwb-timeline__items", children: m })
+    ] });
+  }
+), x = a.forwardRef(function({ className: s, title: n, meta: m, time: l, icon: i, tone: t = "neutral", children: _, ...d }, b) {
+  return /* @__PURE__ */ r("li", { ...d, ref: b, className: o("smwb-timeline__item", `smwb-timeline__item_tone-${t}`, s), children: [
+    /* @__PURE__ */ e("span", { className: "smwb-timeline__mark", "aria-hidden": "true", children: i ? typeof i == "string" ? /* @__PURE__ */ e(w, { name: i, size: 16 }) : i : /* @__PURE__ */ e("span", { className: "smwb-timeline__dot" }) }),
+    /* @__PURE__ */ r("div", { className: "smwb-timeline__body", children: [
+      /* @__PURE__ */ e("div", { className: "smwb-timeline__title", children: n }),
+      m ? /* @__PURE__ */ e("div", { className: "smwb-timeline__meta", children: m }) : null,
+      _ ? /* @__PURE__ */ e("div", { className: "smwb-timeline__content", children: _ }) : null
+    ] }),
+    l ? /* @__PURE__ */ e("div", { className: "smwb-timeline__time", children: l }) : null
+  ] });
+});
+export {
+  T as Timeline,
+  R as TimelineGroup,
+  x as TimelineItem
+};
+//# sourceMappingURL=timeline.js.map

package/dist/components/dataDisplay/timeline/timeline.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"timeline.js","sources":["../../../../src/components/dataDisplay/timeline/timeline.tsx"],"sourcesContent":["import React, { HTMLAttributes, LiHTMLAttributes, OlHTMLAttributes, PropsWithChildren, ReactNode } from \"react\";\nimport cn from \"clsx\";\nimport Icon from \"../../base/icon/icon\";\n\nexport type TimelineTone = \"neutral\" | \"info\" | \"success\" | \"warning\" | \"error\";\n\nexport interface TimelineProps extends OlHTMLAttributes<HTMLOListElement> {\n className?: string;\n /** Tighter rows, for side panels. */\n dense?: boolean;\n /** Keep a group's label in view while its events scroll past (in a scrolling container). */\n stickyLabels?: boolean;\n}\n\nexport interface TimelineGroupProps extends Omit<LiHTMLAttributes<HTMLLIElement>, \"title\"> {\n className?: string;\n /** What groups the events — a day, a week, a stage. */\n label: ReactNode;\n}\n\nexport interface TimelineItemProps extends Omit<HTMLAttributes<HTMLLIElement>, \"title\"> {\n className?: string;\n /** The event itself: a line of text, usually a link. */\n title: ReactNode;\n /** A second line: who, what kind, where. */\n meta?: ReactNode;\n /** When: a time or a date, at the end of the row. */\n time?: ReactNode;\n /** The event's mark on the line: a Material Symbols name or an element. A dot without it. */\n icon?: string | ReactNode;\n /** Colour of the mark. */\n tone?: TimelineTone;\n}\n\n/**\n * Events on a line, newest or oldest first as given: TimelineItem children,\n * optionally grouped by TimelineGroup (a day, a week).\n */\nexport const Timeline = React.forwardRef<HTMLOListElement, PropsWithChildren<TimelineProps>>(function Timeline(\n { className, dense, stickyLabels, children, ...rest },\n ref\n) {\n return (\n <ol\n {...rest}\n ref={ref}\n className={cn(\n \"smwb-timeline\",\n { \"smwb-timeline_dense\": dense, \"smwb-timeline_sticky-labels\": stickyLabels },\n className\n )}\n >\n {children}\n </ol>\n );\n});\n\n/** A labelled run of events: the label, then its TimelineItem children on the line. */\nexport const TimelineGroup = React.forwardRef<HTMLLIElement, PropsWithChildren<TimelineGroupProps>>(\n function TimelineGroup({ className, label, children, ...rest }, ref) {\n return (\n <li {...rest} ref={ref} className={cn(\"smwb-timeline__group\", className)}>\n <div className=\"smwb-timeline__label\">{label}</div>\n <ol className=\"smwb-timeline__items\">{children}</ol>\n </li>\n );\n }\n);\n\n/** One event: its mark on the line, the title and meta lines, the time; children below. */\nexport const TimelineItem = React.forwardRef<HTMLLIElement, PropsWithChildren<TimelineItemProps>>(function TimelineItem(\n { className, title, meta, time, icon, tone = \"neutral\", children, ...rest },\n ref\n) {\n return (\n <li {...rest} ref={ref} className={cn(\"smwb-timeline__item\", `smwb-timeline__item_tone-${tone}`, className)}>\n <span className=\"smwb-timeline__mark\" aria-hidden=\"true\">\n {icon ? (\n typeof icon === \"string\" ? (\n <Icon name={icon} size={16} />\n ) : (\n icon\n )\n ) : (\n <span className=\"smwb-timeline__dot\" />\n )}\n </span>\n <div className=\"smwb-timeline__body\">\n <div className=\"smwb-timeline__title\">{title}</div>\n {meta ? <div className=\"smwb-timeline__meta\">{meta}</div> : null}\n {children ? <div className=\"smwb-timeline__content\">{children}</div> : null}\n </div>\n {time ? <div className=\"smwb-timeline__time\">{time}</div> : null}\n </li>\n );\n});\n\nexport default Timeline;\n"],"names":["Timeline","React","className","dense","stickyLabels","children","rest","ref","jsx","cn","TimelineGroup","label","jsxs","TimelineItem","title","meta","time","icon","tone","Icon"],"mappings":";;;;;;AAwCO,MAAMA,IAAWC,EAAM,WAA+D,SAC3F,EAAE,WAAAC,GAAW,OAAAC,GAAO,cAAAC,GAAc,UAAAC,GAAU,GAAGC,EAAA,GAC/CC,GACA;AACA,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGF;AAAA,MACJ,KAAAC;AAAA,MACA,WAAWE;AAAA,QACT;AAAA,QACA,EAAE,uBAAuBN,GAAO,+BAA+BC,EAAA;AAAA,QAC/DF;AAAA,MAAA;AAAA,MAGD,UAAAG;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC,GAGYK,IAAgBT,EAAM;AAAA,EACjC,SAAuB,EAAE,WAAAC,GAAW,OAAAS,GAAO,UAAAN,GAAU,GAAGC,EAAA,GAAQC,GAAK;AACnE,WACE,gBAAAK,EAAC,QAAI,GAAGN,GAAM,KAAAC,GAAU,WAAWE,EAAG,wBAAwBP,CAAS,GACrE,UAAA;AAAA,MAAA,gBAAAM,EAAC,OAAA,EAAI,WAAU,wBAAwB,UAAAG,GAAM;AAAA,MAC7C,gBAAAH,EAAC,MAAA,EAAG,WAAU,wBAAwB,UAAAH,EAAA,CAAS;AAAA,IAAA,GACjD;AAAA,EAEJ;AACF,GAGaQ,IAAeZ,EAAM,WAAgE,SAChG,EAAE,WAAAC,GAAW,OAAAY,GAAO,MAAAC,GAAM,MAAAC,GAAM,MAAAC,GAAM,MAAAC,IAAO,WAAW,UAAAb,GAAU,GAAGC,EAAA,GACrEC,GACA;AACA,SACE,gBAAAK,EAAC,MAAA,EAAI,GAAGN,GAAM,KAAAC,GAAU,WAAWE,EAAG,uBAAuB,4BAA4BS,CAAI,IAAIhB,CAAS,GACxG,UAAA;AAAA,IAAA,gBAAAM,EAAC,QAAA,EAAK,WAAU,uBAAsB,eAAY,QAC/C,UAAAS,IACC,OAAOA,KAAS,WACd,gBAAAT,EAACW,KAAK,MAAMF,GAAM,MAAM,GAAA,CAAI,IAE5BA,IAGF,gBAAAT,EAAC,QAAA,EAAK,WAAU,qBAAA,CAAqB,EAAA,CAEzC;AAAA,IACA,gBAAAI,EAAC,OAAA,EAAI,WAAU,uBACb,UAAA;AAAA,MAAA,gBAAAJ,EAAC,OAAA,EAAI,WAAU,wBAAwB,UAAAM,GAAM;AAAA,MAC5CC,IAAO,gBAAAP,EAAC,OAAA,EAAI,WAAU,uBAAuB,aAAK,IAAS;AAAA,MAC3DH,IAAW,gBAAAG,EAAC,OAAA,EAAI,WAAU,0BAA0B,UAAAH,GAAS,IAAS;AAAA,IAAA,GACzE;AAAA,IACCW,IAAO,gBAAAR,EAAC,OAAA,EAAI,WAAU,uBAAuB,aAAK,IAAS;AAAA,EAAA,GAC9D;AAEJ,CAAC;"}

package/dist/components/dataDisplay/treeView/treeView.js CHANGED Viewed

@@ -1,10 +1,11 @@
 import { jsx as n, jsxs as b } from "react/jsx-runtime";
-import '../../../assets/styles/less/components/treeView/treeView.entry.css';/* empty css                                                           */
+import '../../../assets/styles/less/components/treeView/treeView.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
+/* empty css                                                           */
 import { forwardRef as v, useState as D, useRef as I, useMemo as ee } from "react";
 import O from "clsx";
 import { Icon as N } from "../../base/icon/icon.js";
 import { useControllableState as K } from "../../../hooks/useControllableState.js";
-const oe = v(function({
+const ce = v(function({
   className: M,
   listIcon: k = "draft",
   nodeIcon: a = { closed: "folder", opened: "folder_open" },
@@ -113,7 +114,7 @@ const oe = v(function({
   return /* @__PURE__ */ n("div", { "data-testid": "tree-view", ...G, ref: H, role: "tree", className: O("smwb-tree", M), children: W.map((e, t) => /* @__PURE__ */ n("div", { className: "smwb-tree__wrapper", role: "presentation", children: e }, t)) });
 });
 export {
-  oe as TreeView,
-  oe as default
+  ce as TreeView,
+  ce as default
 };
 //# sourceMappingURL=treeView.js.map

package/dist/components/dataDisplay/treeView/treeView.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"treeView.js","sources":["../../../../src/components/dataDisplay/treeView/treeView.tsx"],"sourcesContent":["import React, { forwardRef, KeyboardEvent, ReactNode, useMemo, useRef, useState } from \"react\";\nimport cn from \"clsx\";\nimport Icon from \"../../base/icon/icon\";\nimport { useControllableState } from \"../../../hooks/useControllableState\";\n\nexport interface ITreeNodeItem {\n /** Stable identifier. Falls back to the positional path when omitted. /\n id?: string;\n label: string;\n children?: ITreeNodeItem[];\n /* Hint that the node is expandable even before its children are loaded. /\n hasChildren?: boolean;\n}\n\nexport interface TreeViewProps extends Omit<React.HTMLAttributes<HTMLDivElement>, \"onSelect\"> {\n nodeIcon?: {\n opened?: string;\n closed?: string;\n };\n listIcon?: string;\n data: ITreeNodeItem[];\n /* Controlled list of expanded node ids. /\n expanded?: string[];\n /* Initially expanded node ids (uncontrolled). /\n defaultExpanded?: string[];\n /* Called with the next expanded ids. /\n onExpandedChange?: (expanded: string[]) => void;\n /* Controlled list of selected node ids. /\n selected?: string[];\n /* Initially selected node ids (uncontrolled). /\n defaultSelected?: string[];\n /* Called with the next selected ids plus, for user toggles, the node that just changed. /\n onSelectedChange?: (selected: string[], changed?: { id: string; selected: boolean }) => void;\n /* Enables label click selection. /\n selectable?: boolean;\n /* Renders a checkbox per node bound to selection. /\n checkboxes?: boolean;\n /* Custom node renderer. /\n renderLabel?: (item: ITreeNodeItem, nodeId: string) => ReactNode;\n /* Lazily resolves children the first time a node is expanded. */\n loadChildren?: (item: ITreeNodeItem, nodeId: string) => Promise<ITreeNodeItem[]>;\n}\n\nexport const TreeView = forwardRef<HTMLDivElement, TreeViewProps>(function TreeView(\n {\n className,\n listIcon = \"draft\",\n nodeIcon = { closed: \"folder\", opened: \"folder_open\" },\n data = [],\n expanded,\n defaultExpanded = [],\n onExpandedChange,\n selected,\n defaultSelected = [],\n onSelectedChange,\n selectable = false,\n checkboxes = false,\n renderLabel,\n loadChildren,\n ...props\n },\n ref\n) {\n const [loadedChildren, setLoadedChildren] = useState<Record<string, ITreeNodeItem[]>>({});\n const [loadingIds, setLoadingIds] = useState<string[]>([]);\n const [expandedIds, setExpandedIds] = useControllableState<string[]>({\n value: expanded,\n defaultValue: defaultExpanded,\n onChange: onExpandedChange,\n });\n const lastToggledRef = useRef<{ id: string; selected: boolean }>();\n const [selectedIds, setSelectedIds] = useControllableState<string[]>({\n value: selected,\n defaultValue: defaultSelected,\n onChange: (next) => {\n // useControllableState calls onChange synchronously from the setter,\n // so lastToggledRef still refers to the toggle that caused this change.\n const changed = lastToggledRef.current;\n lastToggledRef.current = undefined;\n onSelectedChange?.(next, changed);\n },\n });\n\n const toggleExpanded = (id: string) => {\n setExpandedIds((prev) => (prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id]));\n };\n\n const setOpen = (id: string, open: boolean) => {\n setExpandedIds((prev) => {\n const has = prev.includes(id);\n if (open && !has) return [...prev, id];\n if (!open && has) return prev.filter((x) => x !== id);\n return prev;\n });\n };\n\n const toggleSelected = (id: string) => {\n lastToggledRef.current = { id, selected: !selectedIds.includes(id) };\n setSelectedIds((prev) => (prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id]));\n };\n\n const ensureLoaded = (item: ITreeNodeItem, nodeId: string) => {\n if (!loadChildren \|\| loadedChildren[nodeId] \|\| (item.children && item.children.length > 0)) {\n return;\n }\n setLoadingIds((prev) => (prev.includes(nodeId) ? prev : [...prev, nodeId]));\n void loadChildren(item, nodeId)\n .then((children) => {\n setLoadedChildren((prev) => ({ ...prev, [nodeId]: children }));\n })\n .finally(() => {\n setLoadingIds((prev) => prev.filter((x) => x !== nodeId));\n });\n };\n\n const renderNode = (item: ITreeNodeItem, path: string): ReactNode => {\n const nodeId = item.id ?? path;\n const resolvedChildren = item.children ?? loadedChildren[nodeId];\n const isLazy = !!loadChildren && (item.hasChildren \|\| !!loadedChildren[nodeId]);\n const hasChildNodes = (!!resolvedChildren && resolvedChildren.length > 0) \|\| isLazy;\n const isOpen = expandedIds.includes(nodeId);\n const isSelected = selectedIds.includes(nodeId);\n const isLoading = loadingIds.includes(nodeId);\n\n const onLabelClick = () => {\n if (hasChildNodes) {\n if (!isOpen) {\n ensureLoaded(item, nodeId);\n }\n toggleExpanded(nodeId);\n }\n if (selectable) {\n toggleSelected(nodeId);\n }\n };\n\n const onKeyDown = (event: KeyboardEvent<HTMLSpanElement>) => {\n if (event.key === \"Enter\" \|\| event.key === \" \") {\n event.preventDefault();\n onLabelClick();\n } else if (event.key === \"ArrowRight\" && hasChildNodes) {\n ensureLoaded(item, nodeId);\n setOpen(nodeId, true);\n } else if (event.key === \"ArrowLeft\" && hasChildNodes) {\n setOpen(nodeId, false);\n }\n };\n\n return (\n <div\n className={cn(\"smwb-tree__node\", { \"smwb-tree__node_selected\": isSelected })}\n role=\"treeitem\"\n aria-expanded={hasChildNodes ? isOpen : undefined}\n aria-selected={selectable \|\| checkboxes ? isSelected : undefined}\n key={nodeId}\n >\n <span\n className=\"smwb-tree__node__content\"\n onClick={onLabelClick}\n onKeyDown={onKeyDown}\n tabIndex={0}\n role=\"button\"\n >\n {checkboxes && (\n <input\n type=\"checkbox\"\n className=\"smwb-tree__node__checkbox\"\n checked={isSelected}\n onClick={(e) => e.stopPropagation()}\n onChange={() => toggleSelected(nodeId)}\n aria-label={item.label}\n />\n )}\n <span className=\"smwb-tree__node__label\">\n {hasChildNodes && isOpen ? (\n <Icon name={nodeIcon?.opened as string} fill={1} size={20} />\n ) : hasChildNodes ? (\n <Icon name={nodeIcon?.closed as string} fill={1} size={20} />\n ) : (\n <Icon name={listIcon} size={20} />\n )}\n {renderLabel ? renderLabel(item, nodeId) : item.label}\n </span>\n </span>\n {hasChildNodes && isOpen && (\n <div role=\"group\">\n {isLoading && !resolvedChildren ? (\n <div className=\"smwb-tree__node__loading\" role=\"status\">\n Загрузка…\n </div>\n ) : (\n resolvedChildren?.map((c, idx) => renderNode(c, `${path}.${idx}`))\n )}\n </div>\n )}\n </div>\n );\n };\n\n const tree = useMemo(\n () => data.map((d, idx) => renderNode(d, `${idx}`)),\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [\n data,\n expandedIds,\n selectedIds,\n selectable,\n checkboxes,\n listIcon,\n nodeIcon,\n renderLabel,\n loadedChildren,\n loadingIds,\n ]\n );\n\n return (\n <div data-testid=\"tree-view\" {...props} ref={ref} role=\"tree\" className={cn(\"smwb-tree\", className)}>\n {tree.map((node, idx) => (\n <div className=\"smwb-tree__wrapper\" key={idx} role=\"presentation\">\n {node}\n </div>\n ))}\n </div>\n );\n});\n\nexport default TreeView;\n"],"names":["TreeView","forwardRef","className","listIcon","nodeIcon","data","expanded","defaultExpanded","onExpandedChange","selected","defaultSelected","onSelectedChange","selectable","checkboxes","renderLabel","loadChildren","props","ref","loadedChildren","setLoadedChildren","useState","loadingIds","setLoadingIds","expandedIds","setExpandedIds","useControllableState","lastToggledRef","useRef","selectedIds","setSelectedIds","next","changed","toggleExpanded","id","prev","x","setOpen","open","has","toggleSelected","ensureLoaded","item","nodeId","children","renderNode","path","_a","resolvedChildren","_b","isLazy","hasChildNodes","isOpen","isSelected","isLoading","onLabelClick","onKeyDown","event","jsxs","cn","jsx","e","Icon","c","idx","tree","useMemo","d","node"],"mappings":";;;;;;AA4CO,MAAMA,KAAWC,EAA0C,SAChE;AAAA,EACE,WAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,UAAAC,IAAW,EAAE,QAAQ,UAAU,QAAQ,cAAA;AAAA,EACvC,MAAAC,IAAO,CAAA;AAAA,EACP,UAAAC;AAAA,EACA,iBAAAC,IAAkB,CAAA;AAAA,EAClB,kBAAAC;AAAA,EACA,UAAAC;AAAA,EACA,iBAAAC,IAAkB,CAAA;AAAA,EAClB,kBAAAC;AAAA,EACA,YAAAC,IAAa;AAAA,EACb,YAAAC,IAAa;AAAA,EACb,aAAAC;AAAA,EACA,cAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,QAAM,CAACC,GAAgBC,CAAiB,IAAIC,EAA0C,CAAA,CAAE,GAClF,CAACC,GAAYC,CAAa,IAAIF,EAAmB,CAAA,CAAE,GACnD,CAACG,GAAaC,CAAc,IAAIC,EAA+B;AAAA,IACnE,OAAOnB;AAAA,IACP,cAAcC;AAAA,IACd,UAAUC;AAAA,EAAA,CACX,GACKkB,IAAiBC,EAAA,GACjB,CAACC,GAAaC,CAAc,IAAIJ,EAA+B;AAAA,IACnE,OAAOhB;AAAA,IACP,cAAcC;AAAA,IACd,UAAU,CAACoB,MAAS;AAGlB,YAAMC,IAAUL,EAAe;AAC/B,MAAAA,EAAe,UAAU,QACzBf,KAAA,QAAAA,EAAmBmB,GAAMC;AAAA,IAC3B;AAAA,EAAA,CACD,GAEKC,IAAiB,CAACC,MAAe;AACrC,IAAAT,EAAe,CAACU,MAAUA,EAAK,SAASD,CAAE,IAAIC,EAAK,OAAO,CAACC,MAAMA,MAAMF,CAAE,IAAI,CAAC,GAAGC,GAAMD,CAAE,CAAE;AAAA,EAC7F,GAEMG,IAAU,CAACH,GAAYI,MAAkB;AAC7C,IAAAb,EAAe,CAACU,MAAS;AACvB,YAAMI,IAAMJ,EAAK,SAASD,CAAE;AAC5B,aAAII,KAAQ,CAACC,IAAY,CAAC,GAAGJ,GAAMD,CAAE,IACjC,CAACI,KAAQC,IAAYJ,EAAK,OAAO,CAACC,MAAMA,MAAMF,CAAE,IAC7CC;AAAA,IACT,CAAC;AAAA,EACH,GAEMK,IAAiB,CAACN,MAAe;AACrC,IAAAP,EAAe,UAAU,EAAE,IAAAO,GAAI,UAAU,CAACL,EAAY,SAASK,CAAE,EAAA,GACjEJ,EAAe,CAACK,MAAUA,EAAK,SAASD,CAAE,IAAIC,EAAK,OAAO,CAACC,MAAMA,MAAMF,CAAE,IAAI,CAAC,GAAGC,GAAMD,CAAE,CAAE;AAAA,EAC7F,GAEMO,IAAe,CAACC,GAAqBC,MAAmB;AAC5D,IAAI,CAAC3B,KAAgBG,EAAewB,CAAM,KAAMD,EAAK,YAAYA,EAAK,SAAS,SAAS,MAGxFnB,EAAc,CAACY,MAAUA,EAAK,SAASQ,CAAM,IAAIR,IAAO,CAAC,GAAGA,GAAMQ,CAAM,CAAE,GACrE3B,EAAa0B,GAAMC,CAAM,EAC3B,KAAK,CAACC,MAAa;AAClB,MAAAxB,EAAkB,CAACe,OAAU,EAAE,GAAGA,GAAM,CAACQ,CAAM,GAAGC,EAAA,EAAW;AAAA,IAC/D,CAAC,EACA,QAAQ,MAAM;AACb,MAAArB,EAAc,CAACY,MAASA,EAAK,OAAO,CAACC,MAAMA,MAAMO,CAAM,CAAC;AAAA,IAC1D,CAAC;AAAA,EACL,GAEME,IAAa,CAACH,GAAqBI,MAA4B;;AACnE,UAAMH,KAASI,IAAAL,EAAK,OAAL,OAAAK,IAAWD,GACpBE,KAAmBC,IAAAP,EAAK,aAAL,OAAAO,IAAiB9B,EAAewB,CAAM,GACzDO,IAAS,CAAC,CAAClC,MAAiB0B,EAAK,eAAe,CAAC,CAACvB,EAAewB,CAAM,IACvEQ,IAAiB,CAAC,CAACH,KAAoBA,EAAiB,SAAS,KAAME,GACvEE,IAAS5B,EAAY,SAASmB,CAAM,GACpCU,IAAaxB,EAAY,SAASc,CAAM,GACxCW,IAAYhC,EAAW,SAASqB,CAAM,GAEtCY,IAAe,MAAM;AACzB,MAAIJ,MACGC,KACHX,EAAaC,GAAMC,CAAM,GAE3BV,EAAeU,CAAM,IAEnB9B,KACF2B,EAAeG,CAAM;AAAA,IAEzB,GAEMa,IAAY,CAACC,MAA0C;AAC3D,MAAIA,EAAM,QAAQ,WAAWA,EAAM,QAAQ,OACzCA,EAAM,eAAA,GACNF,EAAA,KACSE,EAAM,QAAQ,gBAAgBN,KACvCV,EAAaC,GAAMC,CAAM,GACzBN,EAAQM,GAAQ,EAAI,KACXc,EAAM,QAAQ,eAAeN,KACtCd,EAAQM,GAAQ,EAAK;AAAA,IAEzB;AAEA,WACE,gBAAAe;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWC,EAAG,mBAAmB,EAAE,4BAA4BN,GAAY;AAAA,QAC3E,MAAK;AAAA,QACL,iBAAeF,IAAgBC,IAAS;AAAA,QACxC,iBAAevC,KAAcC,IAAauC,IAAa;AAAA,QAGvD,UAAA;AAAA,UAAA,gBAAAK;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAU;AAAA,cACV,SAASH;AAAA,cACT,WAAAC;AAAA,cACA,UAAU;AAAA,cACV,MAAK;AAAA,cAEJ,UAAA;AAAA,gBAAA1C,KACC,gBAAA8C;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,MAAK;AAAA,oBACL,WAAU;AAAA,oBACV,SAASP;AAAA,oBACT,SAAS,CAACQ,MAAMA,EAAE,gBAAA;AAAA,oBAClB,UAAU,MAAMrB,EAAeG,CAAM;AAAA,oBACrC,cAAYD,EAAK;AAAA,kBAAA;AAAA,gBAAA;AAAA,gBAGrB,gBAAAgB,EAAC,QAAA,EAAK,WAAU,0BACb,UAAA;AAAA,kBAAAP,KAAiBC,IAChB,gBAAAQ,EAACE,GAAA,EAAK,MAAMzD,KAAA,gBAAAA,EAAU,QAAkB,MAAM,GAAG,MAAM,GAAA,CAAI,IACzD8C,IACF,gBAAAS,EAACE,GAAA,EAAK,MAAMzD,KAAA,gBAAAA,EAAU,QAAkB,MAAM,GAAG,MAAM,GAAA,CAAI,IAE3D,gBAAAuD,EAACE,GAAA,EAAK,MAAM1D,GAAU,MAAM,IAAI;AAAA,kBAEjCW,IAAcA,EAAY2B,GAAMC,CAAM,IAAID,EAAK;AAAA,gBAAA,EAAA,CAClD;AAAA,cAAA;AAAA,YAAA;AAAA,UAAA;AAAA,UAEDS,KAAiBC,KAChB,gBAAAQ,EAAC,OAAA,EAAI,MAAK,SACP,UAAAN,KAAa,CAACN,IACb,gBAAAY,EAAC,OAAA,EAAI,WAAU,4BAA2B,MAAK,UAAS,UAAA,YAAA,CAExD,IAEAZ,KAAA,gBAAAA,EAAkB,IAAI,CAACe,GAAGC,MAAQnB,EAAWkB,GAAG,GAAGjB,CAAI,IAAIkB,CAAG,EAAE,GAAC,CAErE;AAAA,QAAA;AAAA,MAAA;AAAA,MAvCGrB;AAAA,IAAA;AAAA,EA2CX,GAEMsB,IAAOC;AAAA,IACX,MAAM5D,EAAK,IAAI,CAAC6D,GAAGH,MAAQnB,EAAWsB,GAAG,GAAGH,CAAG,EAAE,CAAC;AAAA;AAAA,IAElD;AAAA,MACE1D;AAAA,MACAkB;AAAA,MACAK;AAAA,MACAhB;AAAA,MACAC;AAAA,MACAV;AAAA,MACAC;AAAA,MACAU;AAAA,MACAI;AAAA,MACAG;AAAA,IAAA;AAAA,EACF;AAGF,SACE,gBAAAsC,EAAC,OAAA,EAAI,eAAY,aAAa,GAAG3C,GAAO,KAAAC,GAAU,MAAK,QAAO,WAAWyC,EAAG,aAAaxD,CAAS,GAC/F,UAAA8D,EAAK,IAAI,CAACG,GAAMJ,MACf,gBAAAJ,EAAC,OAAA,EAAI,WAAU,sBAA+B,MAAK,gBAChD,UAAAQ,EAAA,GADsCJ,CAEzC,CACD,GACH;AAEJ,CAAC;"}
1	+ {"version":3,"file":"treeView.js","sources":["../../../../src/components/dataDisplay/treeView/treeView.tsx"],"sourcesContent":["import React, { forwardRef, KeyboardEvent, ReactNode, useMemo, useRef, useState } from \"react\";\nimport cn from \"clsx\";\nimport Icon from \"../../base/icon/icon\";\nimport { useControllableState } from \"../../../hooks/useControllableState\";\n\nexport interface ITreeNodeItem {\n /** Stable identifier. Falls back to the positional path when omitted. /\n id?: string;\n label: string;\n children?: ITreeNodeItem[];\n /* Hint that the node is expandable even before its children are loaded. /\n hasChildren?: boolean;\n}\n\nexport interface TreeViewProps extends Omit<React.HTMLAttributes<HTMLDivElement>, \"onSelect\"> {\n nodeIcon?: {\n opened?: string;\n closed?: string;\n };\n listIcon?: string;\n data: ITreeNodeItem[];\n /* Controlled list of expanded node ids. /\n expanded?: string[];\n /* Initially expanded node ids (uncontrolled). /\n defaultExpanded?: string[];\n /* Called with the next expanded ids. /\n onExpandedChange?: (expanded: string[]) => void;\n /* Controlled list of selected node ids. /\n selected?: string[];\n /* Initially selected node ids (uncontrolled). /\n defaultSelected?: string[];\n /* Called with the next selected ids plus, for user toggles, the node that just changed. /\n onSelectedChange?: (selected: string[], changed?: { id: string; selected: boolean }) => void;\n /* Enables label click selection. /\n selectable?: boolean;\n /* Renders a checkbox per node bound to selection. /\n checkboxes?: boolean;\n /* Custom node renderer. /\n renderLabel?: (item: ITreeNodeItem, nodeId: string) => ReactNode;\n /* Lazily resolves children the first time a node is expanded. */\n loadChildren?: (item: ITreeNodeItem, nodeId: string) => Promise<ITreeNodeItem[]>;\n}\n\nexport const TreeView = forwardRef<HTMLDivElement, TreeViewProps>(function TreeView(\n {\n className,\n listIcon = \"draft\",\n nodeIcon = { closed: \"folder\", opened: \"folder_open\" },\n data = [],\n expanded,\n defaultExpanded = [],\n onExpandedChange,\n selected,\n defaultSelected = [],\n onSelectedChange,\n selectable = false,\n checkboxes = false,\n renderLabel,\n loadChildren,\n ...props\n },\n ref\n) {\n const [loadedChildren, setLoadedChildren] = useState<Record<string, ITreeNodeItem[]>>({});\n const [loadingIds, setLoadingIds] = useState<string[]>([]);\n const [expandedIds, setExpandedIds] = useControllableState<string[]>({\n value: expanded,\n defaultValue: defaultExpanded,\n onChange: onExpandedChange,\n });\n const lastToggledRef = useRef<{ id: string; selected: boolean }>();\n const [selectedIds, setSelectedIds] = useControllableState<string[]>({\n value: selected,\n defaultValue: defaultSelected,\n onChange: (next) => {\n // useControllableState calls onChange synchronously from the setter,\n // so lastToggledRef still refers to the toggle that caused this change.\n const changed = lastToggledRef.current;\n lastToggledRef.current = undefined;\n onSelectedChange?.(next, changed);\n },\n });\n\n const toggleExpanded = (id: string) => {\n setExpandedIds((prev) => (prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id]));\n };\n\n const setOpen = (id: string, open: boolean) => {\n setExpandedIds((prev) => {\n const has = prev.includes(id);\n if (open && !has) return [...prev, id];\n if (!open && has) return prev.filter((x) => x !== id);\n return prev;\n });\n };\n\n const toggleSelected = (id: string) => {\n lastToggledRef.current = { id, selected: !selectedIds.includes(id) };\n setSelectedIds((prev) => (prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id]));\n };\n\n const ensureLoaded = (item: ITreeNodeItem, nodeId: string) => {\n if (!loadChildren \|\| loadedChildren[nodeId] \|\| (item.children && item.children.length > 0)) {\n return;\n }\n setLoadingIds((prev) => (prev.includes(nodeId) ? prev : [...prev, nodeId]));\n void loadChildren(item, nodeId)\n .then((children) => {\n setLoadedChildren((prev) => ({ ...prev, [nodeId]: children }));\n })\n .finally(() => {\n setLoadingIds((prev) => prev.filter((x) => x !== nodeId));\n });\n };\n\n const renderNode = (item: ITreeNodeItem, path: string): ReactNode => {\n const nodeId = item.id ?? path;\n const resolvedChildren = item.children ?? loadedChildren[nodeId];\n const isLazy = !!loadChildren && (item.hasChildren \|\| !!loadedChildren[nodeId]);\n const hasChildNodes = (!!resolvedChildren && resolvedChildren.length > 0) \|\| isLazy;\n const isOpen = expandedIds.includes(nodeId);\n const isSelected = selectedIds.includes(nodeId);\n const isLoading = loadingIds.includes(nodeId);\n\n const onLabelClick = () => {\n if (hasChildNodes) {\n if (!isOpen) {\n ensureLoaded(item, nodeId);\n }\n toggleExpanded(nodeId);\n }\n if (selectable) {\n toggleSelected(nodeId);\n }\n };\n\n const onKeyDown = (event: KeyboardEvent<HTMLSpanElement>) => {\n if (event.key === \"Enter\" \|\| event.key === \" \") {\n event.preventDefault();\n onLabelClick();\n } else if (event.key === \"ArrowRight\" && hasChildNodes) {\n ensureLoaded(item, nodeId);\n setOpen(nodeId, true);\n } else if (event.key === \"ArrowLeft\" && hasChildNodes) {\n setOpen(nodeId, false);\n }\n };\n\n return (\n <div\n className={cn(\"smwb-tree__node\", { \"smwb-tree__node_selected\": isSelected })}\n role=\"treeitem\"\n aria-expanded={hasChildNodes ? isOpen : undefined}\n aria-selected={selectable \|\| checkboxes ? isSelected : undefined}\n key={nodeId}\n >\n <span\n className=\"smwb-tree__node__content\"\n onClick={onLabelClick}\n onKeyDown={onKeyDown}\n tabIndex={0}\n role=\"button\"\n >\n {checkboxes && (\n <input\n type=\"checkbox\"\n className=\"smwb-tree__node__checkbox\"\n checked={isSelected}\n onClick={(e) => e.stopPropagation()}\n onChange={() => toggleSelected(nodeId)}\n aria-label={item.label}\n />\n )}\n <span className=\"smwb-tree__node__label\">\n {hasChildNodes && isOpen ? (\n <Icon name={nodeIcon?.opened as string} fill={1} size={20} />\n ) : hasChildNodes ? (\n <Icon name={nodeIcon?.closed as string} fill={1} size={20} />\n ) : (\n <Icon name={listIcon} size={20} />\n )}\n {renderLabel ? renderLabel(item, nodeId) : item.label}\n </span>\n </span>\n {hasChildNodes && isOpen && (\n <div role=\"group\">\n {isLoading && !resolvedChildren ? (\n <div className=\"smwb-tree__node__loading\" role=\"status\">\n Загрузка…\n </div>\n ) : (\n resolvedChildren?.map((c, idx) => renderNode(c, `${path}.${idx}`))\n )}\n </div>\n )}\n </div>\n );\n };\n\n const tree = useMemo(\n () => data.map((d, idx) => renderNode(d, `${idx}`)),\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [\n data,\n expandedIds,\n selectedIds,\n selectable,\n checkboxes,\n listIcon,\n nodeIcon,\n renderLabel,\n loadedChildren,\n loadingIds,\n ]\n );\n\n return (\n <div data-testid=\"tree-view\" {...props} ref={ref} role=\"tree\" className={cn(\"smwb-tree\", className)}>\n {tree.map((node, idx) => (\n <div className=\"smwb-tree__wrapper\" key={idx} role=\"presentation\">\n {node}\n </div>\n ))}\n </div>\n );\n});\n\nexport default TreeView;\n"],"names":["TreeView","forwardRef","className","listIcon","nodeIcon","data","expanded","defaultExpanded","onExpandedChange","selected","defaultSelected","onSelectedChange","selectable","checkboxes","renderLabel","loadChildren","props","ref","loadedChildren","setLoadedChildren","useState","loadingIds","setLoadingIds","expandedIds","setExpandedIds","useControllableState","lastToggledRef","useRef","selectedIds","setSelectedIds","next","changed","toggleExpanded","id","prev","x","setOpen","open","has","toggleSelected","ensureLoaded","item","nodeId","children","renderNode","path","_a","resolvedChildren","_b","isLazy","hasChildNodes","isOpen","isSelected","isLoading","onLabelClick","onKeyDown","event","jsxs","cn","jsx","e","Icon","c","idx","tree","useMemo","d","node"],"mappings":"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"}

package/dist/components/dataDisplay/typography/typography.d.ts CHANGED Viewed

@@ -9,6 +9,10 @@ export interface TypographyProps extends HTMLAttributes<HTMLElement> {
     gutterBottom?: boolean;
     /** Truncate with an ellipsis on a single line. */
     noWrap?: boolean;
+    /** Truncate with an ellipsis after this many lines. */
+    lines?: number;
+    /** Digits of equal width (`tabular-nums`), so figures line up in KPIs and tables. */
+    tabularNums?: boolean;
     /** Render as a different element/component. */
     component?: keyof JSX.IntrinsicElements;
     className?: string;

package/dist/components/dataDisplay/typography/typography.js CHANGED Viewed

@@ -1,45 +1,63 @@
-import { jsx as e } from "react/jsx-runtime";
-import '../../../assets/styles/less/components/typography/typography.entry.css';/* empty css                                                               */
-import m from "react";
-import f from "clsx";
-const u = {
+import { jsx as d } from "react/jsx-runtime";
+import '../../../assets/styles/less/components/typography/typography.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
+/* empty css                                                               */
+import f from "react";
+import l from "clsx";
+const n = {
   h1: "h1",
   h2: "h2",
   h3: "h3",
   h4: "h4",
   h5: "h5",
   h6: "h6",
-  subtitle1: "h6",
-  subtitle2: "h6",
+  // A subtitle is not a heading: as h6 it would break the page's outline.
+  subtitle1: "p",
+  subtitle2: "p",
   body1: "p",
   body2: "p",
   caption: "span",
   overline: "span",
   button: "span"
-}, c = m.forwardRef(function({ variant: h = "body1", color: p = "inherit", align: r, gutterBottom: a, noWrap: o, component: t, className: y, children: s, ...b }, i) {
-  const g = t != null ? t : u[h];
-  return /* @__PURE__ */ e(
-    g,
+}, j = f.forwardRef(function({
+  variant: r = "body1",
+  color: a = "inherit",
+  align: o,
+  gutterBottom: s,
+  noWrap: m,
+  lines: p,
+  tabularNums: b,
+  component: t,
+  className: g,
+  style: h,
+  children: i,
+  ...w
+}, e) {
+  const u = t != null ? t : n[r], y = p !== void 0 && p > 0;
+  return /* @__PURE__ */ d(
+    u,
     {
-      ref: i,
-      className: f(
+      ref: e,
+      className: l(
         "smwb-typography",
-        `smwb-typography_${h}`,
-        p !== "inherit" && `smwb-typography_color-${p}`,
-        r && `smwb-typography_align-${r}`,
+        `smwb-typography_${r}`,
+        a !== "inherit" && `smwb-typography_color-${a}`,
+        o && `smwb-typography_align-${o}`,
         {
-          "smwb-typography_gutter": a,
-          "smwb-typography_nowrap": o
+          "smwb-typography_gutter": s,
+          "smwb-typography_nowrap": m,
+          "smwb-typography_clamp": y,
+          "smwb-typography_tabular-nums": b
         },
-        y
+        g
       ),
-      ...b,
-      children: s
+      style: y ? { ...h, "--smwb-typography-lines": p } : h,
+      ...w,
+      children: i
     }
   );
 });
 export {
-  c as Typography,
-  c as default
+  j as Typography,
+  j as default
 };
 //# sourceMappingURL=typography.js.map

package/dist/components/dataDisplay/typography/typography.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"typography.js","sources":["../../../../src/components/dataDisplay/typography/typography.tsx"],"sourcesContent":["import React, { HTMLAttributes, PropsWithChildren } from \"react\";\nimport cn from \"clsx\";\n\nexport type TypographyVariant =\n \| \"h1\"\n \| \"h2\"\n \| \"h3\"\n \| \"h4\"\n \| \"h5\"\n \| \"h6\"\n \| \"subtitle1\"\n \| \"subtitle2\"\n \| \"body1\"\n \| \"body2\"\n \| \"caption\"\n \| \"overline\"\n \| \"button\";\n\nexport type TypographyColor =\n \| \"inherit\"\n \| \"primary\"\n \| \"secondary\"\n \| \"error\"\n \| \"success\"\n \| \"warning\"\n \| \"info\"\n \| \"textPrimary\"\n \| \"textSecondary\"\n \| \"disabled\";\n\nconst defaultTag: Record<TypographyVariant, keyof JSX.IntrinsicElements> = {\n h1: \"h1\",\n h2: \"h2\",\n h3: \"h3\",\n h4: \"h4\",\n h5: \"h5\",\n h6: \"h6\",\n subtitle1: \"h6\",\n subtitle2: \"h6\",\n body1: \"p\",\n body2: \"p\",\n caption: \"span\",\n overline: \"span\",\n button: \"span\",\n};\n\nexport interface TypographyProps extends HTMLAttributes<HTMLElement> {\n variant?: TypographyVariant;\n color?: TypographyColor;\n align?: \"left\" \| \"center\" \| \"right\" \| \"justify\";\n /** Add a bottom margin (block rhythm). /\n gutterBottom?: boolean;\n /* Truncate with an ellipsis on a single line. /\n noWrap?: boolean;\n /* Render as a different element/component. */\n component?: keyof JSX.IntrinsicElements;\n className?: string;\n}\n\nexport const Typography = React.forwardRef<HTMLElement, PropsWithChildren<TypographyProps>>(function Typography(\n { variant = \"body1\", color = \"inherit\", align, gutterBottom, noWrap, component, className, children, ...rest },\n ref\n) {\n const Tag = (component ?? defaultTag[variant]) as \"p\";\n return (\n <Tag\n ref={ref as React.Ref<HTMLParagraphElement>}\n className={cn(\n \"smwb-typography\",\n `smwb-typography_${variant}`,\n color !== \"inherit\" && `smwb-typography_color-${color}`,\n align && `smwb-typography_align-${align}`,\n {\n \"smwb-typography_gutter\": gutterBottom,\n \"smwb-typography_nowrap\": noWrap,\n },\n className\n )}\n {...rest}\n >\n {children}\n </Tag>\n );\n});\n\nexport default Typography;\n"],"names":["defaultTag","Typography","React","variant","color","align","gutterBottom","noWrap","component","className","children","rest","ref","Tag","jsx","cn"],"mappings":"~~;;;;AA+BA~~,MAAMA,IAAqE;AAAA,EACzE,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,~~EACJ~~,WAAW;AAAA,EACX,WAAW;AAAA,EACX,OAAO;AAAA,EACP,OAAO;AAAA,EACP,SAAS;AAAA,EACT,UAAU;AAAA,EACV,QAAQ;AACV,~~GAeaC~~,IAAaC,EAAM,WAA4D,SAC1F,~~EAAE~~,SAAAC,IAAU,~~SAAS~~,OAAAC,IAAQ,~~WAAW~~,OAAAC,~~GAAO~~,cAAAC,~~GAAc~~,QAAAC,~~GAAQ~~,WAAAC,~~GAAW~~,WAAAC,~~GAAW~~,UAAAC,~~GAAU~~,GAAGC,~~EAAA~~,~~GACxGC,~~GACA;AACA,QAAMC,~~IAAOL~~,KAAA,OAAAA,~~IAAaR~~,EAAWG,CAAO;~~AAC5C~~,SACE,~~gBAAAW~~;AAAA,~~IAACD~~;AAAA,IAAA;AAAA,MACC,KAAAD;AAAA,MACA,~~WAAWG~~;AAAA,QACT;AAAA,QACA,~~mBAAmBZ~~,CAAO;AAAA,QAC1BC,MAAU,aAAa,yBAAyBA,CAAK;AAAA,QACrDC,KAAS,yBAAyBA,CAAK;AAAA,QACvC;AAAA,UACE,0BAA0BC;AAAA,UAC1B,0BAA0BC;AAAA,QAAA;AAAA,~~QAE5BE~~;AAAA,MAAA;AAAA,~~MAED~~,GAAGE;AAAA,MAEH,UAAAD;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}
1	+ {"version":3,"file":"typography.js","sources":["../../../../src/components/dataDisplay/typography/typography.tsx"],"sourcesContent":["import React, { CSSProperties, HTMLAttributes, PropsWithChildren } from \"react\";\nimport cn from \"clsx\";\n\nexport type TypographyVariant =\n \| \"h1\"\n \| \"h2\"\n \| \"h3\"\n \| \"h4\"\n \| \"h5\"\n \| \"h6\"\n \| \"subtitle1\"\n \| \"subtitle2\"\n \| \"body1\"\n \| \"body2\"\n \| \"caption\"\n \| \"overline\"\n \| \"button\";\n\nexport type TypographyColor =\n \| \"inherit\"\n \| \"primary\"\n \| \"secondary\"\n \| \"error\"\n \| \"success\"\n \| \"warning\"\n \| \"info\"\n \| \"textPrimary\"\n \| \"textSecondary\"\n \| \"disabled\";\n\nconst defaultTag: Record<TypographyVariant, keyof JSX.IntrinsicElements> = {\n h1: \"h1\",\n h2: \"h2\",\n h3: \"h3\",\n h4: \"h4\",\n h5: \"h5\",\n h6: \"h6\",\n // A subtitle is not a heading: as h6 it would break the page's outline.\n subtitle1: \"p\",\n subtitle2: \"p\",\n body1: \"p\",\n body2: \"p\",\n caption: \"span\",\n overline: \"span\",\n button: \"span\",\n};\n\nexport interface TypographyProps extends HTMLAttributes<HTMLElement> {\n variant?: TypographyVariant;\n color?: TypographyColor;\n align?: \"left\" \| \"center\" \| \"right\" \| \"justify\";\n /** Add a bottom margin (block rhythm). /\n gutterBottom?: boolean;\n /* Truncate with an ellipsis on a single line. /\n noWrap?: boolean;\n /* Truncate with an ellipsis after this many lines. /\n lines?: number;\n /* Digits of equal width (`tabular-nums`), so figures line up in KPIs and tables. /\n tabularNums?: boolean;\n /* Render as a different element/component. */\n component?: keyof JSX.IntrinsicElements;\n className?: string;\n}\n\nexport const Typography = React.forwardRef<HTMLElement, PropsWithChildren<TypographyProps>>(function Typography(\n {\n variant = \"body1\",\n color = \"inherit\",\n align,\n gutterBottom,\n noWrap,\n lines,\n tabularNums,\n component,\n className,\n style,\n children,\n ...rest\n },\n ref\n) {\n const Tag = (component ?? defaultTag[variant]) as \"p\";\n const clamped = lines !== undefined && lines > 0;\n return (\n <Tag\n ref={ref as React.Ref<HTMLParagraphElement>}\n className={cn(\n \"smwb-typography\",\n `smwb-typography_${variant}`,\n color !== \"inherit\" && `smwb-typography_color-${color}`,\n align && `smwb-typography_align-${align}`,\n {\n \"smwb-typography_gutter\": gutterBottom,\n \"smwb-typography_nowrap\": noWrap,\n \"smwb-typography_clamp\": clamped,\n \"smwb-typography_tabular-nums\": tabularNums,\n },\n className\n )}\n style={clamped ? ({ ...style, \"--smwb-typography-lines\": lines } as CSSProperties) : style}\n {...rest}\n >\n {children}\n </Tag>\n );\n});\n\nexport default Typography;\n"],"names":["defaultTag","Typography","React","variant","color","align","gutterBottom","noWrap","lines","tabularNums","component","className","style","children","rest","ref","Tag","clamped","jsx","cn"],"mappings":";;;;;AAgCA,MAAMA,IAAqE;AAAA,EACzE,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA;AAAA,EAEJ,WAAW;AAAA,EACX,WAAW;AAAA,EACX,OAAO;AAAA,EACP,OAAO;AAAA,EACP,SAAS;AAAA,EACT,UAAU;AAAA,EACV,QAAQ;AACV,GAmBaC,IAAaC,EAAM,WAA4D,SAC1F;AAAA,EACE,SAAAC,IAAU;AAAA,EACV,OAAAC,IAAQ;AAAA,EACR,OAAAC;AAAA,EACA,cAAAC;AAAA,EACA,QAAAC;AAAA,EACA,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,WAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAAON,KAAA,OAAAA,IAAaV,EAAWG,CAAO,GACtCc,IAAUT,MAAU,UAAaA,IAAQ;AAC/C,SACE,gBAAAU;AAAA,IAACF;AAAA,IAAA;AAAA,MACC,KAAAD;AAAA,MACA,WAAWI;AAAA,QACT;AAAA,QACA,mBAAmBhB,CAAO;AAAA,QAC1BC,MAAU,aAAa,yBAAyBA,CAAK;AAAA,QACrDC,KAAS,yBAAyBA,CAAK;AAAA,QACvC;AAAA,UACE,0BAA0BC;AAAA,UAC1B,0BAA0BC;AAAA,UAC1B,yBAAyBU;AAAA,UACzB,gCAAgCR;AAAA,QAAA;AAAA,QAElCE;AAAA,MAAA;AAAA,MAEF,OAAOM,IAAW,EAAE,GAAGL,GAAO,2BAA2BJ,MAA4BI;AAAA,MACpF,GAAGE;AAAA,MAEH,UAAAD;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}

package/dist/components/feedBack/confirmDialog/confirmDialog.js CHANGED Viewed

@@ -1,39 +1,40 @@
 import { jsxs as l, jsx as o } from "react/jsx-runtime";
-import '../../../assets/styles/less/components/confirmDialog/confirmDialog.entry.css';/* empty css                                                                     */
+import '../../../assets/styles/less/components/confirmDialog/confirmDialog.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
+/* empty css                                                                     */
 import { useId as p } from "react";
 import j from "clsx";
-import { Modal as r } from "../modal/modal.js";
+import { Modal as e } from "../modal/modal.js";
 import { Typography as b } from "../../dataDisplay/typography/typography.js";
 import { Button as f } from "../../inputs/button/button.js";
-function _(u) {
-  const { open: y, title: t, subject: i, message: n, confirmLabel: C, cancelLabel: a, danger: h, busy: e, onConfirm: g, onCancel: c, className: x } = u, s = p(), d = p(), m = [i ? s : "", n ? d : ""].filter(Boolean).join(" ");
+function w(u) {
+  const { open: y, title: t, subject: i, message: n, confirmLabel: C, cancelLabel: a, danger: h, busy: r, onConfirm: g, onCancel: c, className: x } = u, s = p(), d = p(), m = [i ? s : "", n ? d : ""].filter(Boolean).join(" ");
   return /* @__PURE__ */ l(
-    r,
+    e,
     {
       open: y,
       onClose: c,
       size: "medium",
       role: "alertdialog",
       backdrop: "dark",
-      closeOnEsc: !e,
-      closeOnOutsideClick: !e,
+      closeOnEsc: !r,
+      closeOnOutsideClick: !r,
       "aria-label": t,
       ...m ? { "aria-describedby": m } : {},
       children: [
-        /* @__PURE__ */ o(r.Header, { children: t }),
-        /* @__PURE__ */ o(r.Content, { children: /* @__PURE__ */ l("div", { className: j("smwb-confirm-dialog__body", x), children: [
+        /* @__PURE__ */ o(e.Header, { children: t }),
+        /* @__PURE__ */ o(e.Content, { children: /* @__PURE__ */ l("div", { className: j("smwb-confirm-dialog__body", x), children: [
           i ? /* @__PURE__ */ o(b, { id: s, variant: "body2", color: "textPrimary", component: "span", children: i }) : null,
           n ? /* @__PURE__ */ o(b, { id: d, variant: "caption", color: "textSecondary", component: "span", children: n }) : null
         ] }) }),
-        /* @__PURE__ */ l(r.Footer, { children: [
-          /* @__PURE__ */ o(f, { variant: "text", size: "small", disabled: !!e, onClick: c, label: a != null ? a : "Cancel" }),
+        /* @__PURE__ */ l(e.Footer, { children: [
+          /* @__PURE__ */ o(f, { variant: "text", size: "small", disabled: !!r, onClick: c, label: a != null ? a : "Cancel" }),
           /* @__PURE__ */ o(
             f,
             {
               variant: "contained",
               size: "small",
               color: h ? "error" : "primary",
-              disabled: !!e,
+              disabled: !!r,
               onClick: g,
               label: C
             }
@@ -44,6 +45,6 @@ function _(u) {
   );
 }
 export {
-  _ as ConfirmDialog
+  w as ConfirmDialog
 };
 //# sourceMappingURL=confirmDialog.js.map

package/dist/components/feedBack/confirmDialog/confirmDialog.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"confirmDialog.js","sources":["../../../../src/components/feedBack/confirmDialog/confirmDialog.tsx"],"sourcesContent":["import React, { useId } from \"react\";\nimport cn from \"clsx\";\nimport { Modal } from \"../modal\";\nimport { Button } from \"../../inputs/button\";\nimport { Typography } from \"../../dataDisplay/typography\";\n\nexport interface ConfirmDialogProps {\n open: boolean;\n title: string;\n /** The subject of the action, shown emphasised on its own line (e.g. the asset name). /\n subject?: string;\n /* A secondary explanatory line (e.g. \"can't be undone\"). /\n message?: string;\n confirmLabel: string;\n cancelLabel?: string;\n /* Style the confirm button as destructive (red). /\n danger?: boolean;\n /* Disable the actions + gate Esc/outside-click while a confirm is in flight. /\n busy?: boolean;\n onConfirm: () => void;\n onCancel: () => void;\n className?: string;\n}\n\n/\n An alert/confirm dialog built on {@link Modal}: a title, an optional emphasised subject + secondary\n * message, and Cancel / Confirm actions. `role=\"alertdialog\"` with the subject + message wired to\n * `aria-describedby` so a screen reader announces the consequence, not just the title. While `busy`,\n * Escape + outside-click are gated and the buttons disabled. Pure presentation — the caller owns the\n * open state and the confirm/cancel handlers (and supplies localised labels).\n */\nexport function ConfirmDialog(props: ConfirmDialogProps): React.ReactElement {\n const { open, title, subject, message, confirmLabel, cancelLabel, danger, busy, onConfirm, onCancel, className } =\n props;\n\n const subjectId = useId();\n const messageId = useId();\n // Only describe when there IS something to describe — an empty aria-describedby would point a\n // screen reader at nothing.\n const describedBy = [subject ? subjectId : \"\", message ? messageId : \"\"].filter(Boolean).join(\" \");\n\n return (\n <Modal\n open={open}\n onClose={onCancel}\n size=\"medium\"\n role=\"alertdialog\"\n backdrop=\"dark\"\n closeOnEsc={!busy}\n closeOnOutsideClick={!busy}\n aria-label={title}\n {...(describedBy ? { \"aria-describedby\": describedBy } : {})}\n >\n <Modal.Header>{title}</Modal.Header>\n <Modal.Content>\n <div className={cn(\"smwb-confirm-dialog__body\", className)}>\n {subject ? (\n <Typography id={subjectId} variant=\"body2\" color=\"textPrimary\" component=\"span\">\n {subject}\n </Typography>\n ) : null}\n {message ? (\n <Typography id={messageId} variant=\"caption\" color=\"textSecondary\" component=\"span\">\n {message}\n </Typography>\n ) : null}\n </div>\n </Modal.Content>\n <Modal.Footer>\n <Button variant=\"text\" size=\"small\" disabled={!!busy} onClick={onCancel} label={cancelLabel ?? \"Cancel\"} />\n <Button\n variant=\"contained\"\n size=\"small\"\n color={danger ? \"error\" : \"primary\"}\n disabled={!!busy}\n onClick={onConfirm}\n label={confirmLabel}\n />\n </Modal.Footer>\n </Modal>\n );\n}\n\nexport default ConfirmDialog;\n"],"names":["ConfirmDialog","props","open","title","subject","message","confirmLabel","cancelLabel","danger","busy","onConfirm","onCancel","className","subjectId","useId","messageId","describedBy","jsxs","Modal","jsx","cn","Typography","Button"],"mappings":"~~;;;;;;;AAgCO~~,SAASA,EAAcC,GAA+C;AAC3E,QAAM,EAAE,MAAAC,GAAM,OAAAC,GAAO,SAAAC,GAAS,SAAAC,GAAS,cAAAC,GAAc,aAAAC,GAAa,QAAAC,GAAQ,MAAAC,GAAM,WAAAC,GAAW,UAAAC,GAAU,WAAAC,EAAA,IACnGX,GAEIY,IAAYC,EAAA,GACZC,IAAYD,EAAA,GAGZE,IAAc,CAACZ,IAAUS,IAAY,IAAIR,IAAUU,IAAY,EAAE,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAEjG,SACE,gBAAAE;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,MAAAhB;AAAA,MACA,SAASS;AAAA,MACT,MAAK;AAAA,MACL,MAAK;AAAA,MACL,UAAS;AAAA,MACT,YAAY,CAACF;AAAA,MACb,qBAAqB,CAACA;AAAA,MACtB,cAAYN;AAAA,MACX,GAAIa,IAAc,EAAE,oBAAoBA,EAAA,IAAgB,CAAA;AAAA,MAEzD,UAAA;AAAA,QAAA,gBAAAG,EAACD,EAAM,QAAN,EAAc,UAAAf,EAAA,CAAM;AAAA,QACrB,gBAAAgB,EAACD,EAAM,SAAN,EACC,UAAA,gBAAAD,EAAC,SAAI,WAAWG,EAAG,6BAA6BR,CAAS,GACtD,UAAA;AAAA,UAAAR,IACC,gBAAAe,EAACE,GAAA,EAAW,IAAIR,GAAW,SAAQ,SAAQ,OAAM,eAAc,WAAU,QACtE,UAAAT,EAAA,CACH,IACE;AAAA,UACHC,IACC,gBAAAc,EAACE,GAAA,EAAW,IAAIN,GAAW,SAAQ,WAAU,OAAM,iBAAgB,WAAU,QAC1E,UAAAV,EAAA,CACH,IACE;AAAA,QAAA,EAAA,CACN,EAAA,CACF;AAAA,QACA,gBAAAY,EAACC,EAAM,QAAN,EACC,UAAA;AAAA,UAAA,gBAAAC,EAACG,GAAA,EAAO,SAAQ,QAAO,MAAK,SAAQ,UAAU,CAAC,CAACb,GAAM,SAASE,GAAU,OAAOJ,KAAA,OAAAA,IAAe,UAAU;AAAA,UACzG,gBAAAY;AAAA,YAACG;AAAA,YAAA;AAAA,cACC,SAAQ;AAAA,cACR,MAAK;AAAA,cACL,OAAOd,IAAS,UAAU;AAAA,cAC1B,UAAU,CAAC,CAACC;AAAA,cACZ,SAASC;AAAA,cACT,OAAOJ;AAAA,YAAA;AAAA,UAAA;AAAA,QACT,EAAA,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}
1	+ {"version":3,"file":"confirmDialog.js","sources":["../../../../src/components/feedBack/confirmDialog/confirmDialog.tsx"],"sourcesContent":["import React, { useId } from \"react\";\nimport cn from \"clsx\";\nimport { Modal } from \"../modal\";\nimport { Button } from \"../../inputs/button\";\nimport { Typography } from \"../../dataDisplay/typography\";\n\nexport interface ConfirmDialogProps {\n open: boolean;\n title: string;\n /** The subject of the action, shown emphasised on its own line (e.g. the asset name). /\n subject?: string;\n /* A secondary explanatory line (e.g. \"can't be undone\"). /\n message?: string;\n confirmLabel: string;\n cancelLabel?: string;\n /* Style the confirm button as destructive (red). /\n danger?: boolean;\n /* Disable the actions + gate Esc/outside-click while a confirm is in flight. /\n busy?: boolean;\n onConfirm: () => void;\n onCancel: () => void;\n className?: string;\n}\n\n/\n An alert/confirm dialog built on {@link Modal}: a title, an optional emphasised subject + secondary\n * message, and Cancel / Confirm actions. `role=\"alertdialog\"` with the subject + message wired to\n * `aria-describedby` so a screen reader announces the consequence, not just the title. While `busy`,\n * Escape + outside-click are gated and the buttons disabled. Pure presentation — the caller owns the\n * open state and the confirm/cancel handlers (and supplies localised labels).\n */\nexport function ConfirmDialog(props: ConfirmDialogProps): React.ReactElement {\n const { open, title, subject, message, confirmLabel, cancelLabel, danger, busy, onConfirm, onCancel, className } =\n props;\n\n const subjectId = useId();\n const messageId = useId();\n // Only describe when there IS something to describe — an empty aria-describedby would point a\n // screen reader at nothing.\n const describedBy = [subject ? subjectId : \"\", message ? messageId : \"\"].filter(Boolean).join(\" \");\n\n return (\n <Modal\n open={open}\n onClose={onCancel}\n size=\"medium\"\n role=\"alertdialog\"\n backdrop=\"dark\"\n closeOnEsc={!busy}\n closeOnOutsideClick={!busy}\n aria-label={title}\n {...(describedBy ? { \"aria-describedby\": describedBy } : {})}\n >\n <Modal.Header>{title}</Modal.Header>\n <Modal.Content>\n <div className={cn(\"smwb-confirm-dialog__body\", className)}>\n {subject ? (\n <Typography id={subjectId} variant=\"body2\" color=\"textPrimary\" component=\"span\">\n {subject}\n </Typography>\n ) : null}\n {message ? (\n <Typography id={messageId} variant=\"caption\" color=\"textSecondary\" component=\"span\">\n {message}\n </Typography>\n ) : null}\n </div>\n </Modal.Content>\n <Modal.Footer>\n <Button variant=\"text\" size=\"small\" disabled={!!busy} onClick={onCancel} label={cancelLabel ?? \"Cancel\"} />\n <Button\n variant=\"contained\"\n size=\"small\"\n color={danger ? \"error\" : \"primary\"}\n disabled={!!busy}\n onClick={onConfirm}\n label={confirmLabel}\n />\n </Modal.Footer>\n </Modal>\n );\n}\n\nexport default ConfirmDialog;\n"],"names":["ConfirmDialog","props","open","title","subject","message","confirmLabel","cancelLabel","danger","busy","onConfirm","onCancel","className","subjectId","useId","messageId","describedBy","jsxs","Modal","jsx","cn","Typography","Button"],"mappings":";;;;;;;;AAiCO,SAASA,EAAcC,GAA+C;AAC3E,QAAM,EAAE,MAAAC,GAAM,OAAAC,GAAO,SAAAC,GAAS,SAAAC,GAAS,cAAAC,GAAc,aAAAC,GAAa,QAAAC,GAAQ,MAAAC,GAAM,WAAAC,GAAW,UAAAC,GAAU,WAAAC,EAAA,IACnGX,GAEIY,IAAYC,EAAA,GACZC,IAAYD,EAAA,GAGZE,IAAc,CAACZ,IAAUS,IAAY,IAAIR,IAAUU,IAAY,EAAE,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAEjG,SACE,gBAAAE;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,MAAAhB;AAAA,MACA,SAASS;AAAA,MACT,MAAK;AAAA,MACL,MAAK;AAAA,MACL,UAAS;AAAA,MACT,YAAY,CAACF;AAAA,MACb,qBAAqB,CAACA;AAAA,MACtB,cAAYN;AAAA,MACX,GAAIa,IAAc,EAAE,oBAAoBA,EAAA,IAAgB,CAAA;AAAA,MAEzD,UAAA;AAAA,QAAA,gBAAAG,EAACD,EAAM,QAAN,EAAc,UAAAf,EAAA,CAAM;AAAA,QACrB,gBAAAgB,EAACD,EAAM,SAAN,EACC,UAAA,gBAAAD,EAAC,SAAI,WAAWG,EAAG,6BAA6BR,CAAS,GACtD,UAAA;AAAA,UAAAR,IACC,gBAAAe,EAACE,GAAA,EAAW,IAAIR,GAAW,SAAQ,SAAQ,OAAM,eAAc,WAAU,QACtE,UAAAT,EAAA,CACH,IACE;AAAA,UACHC,IACC,gBAAAc,EAACE,GAAA,EAAW,IAAIN,GAAW,SAAQ,WAAU,OAAM,iBAAgB,WAAU,QAC1E,UAAAV,EAAA,CACH,IACE;AAAA,QAAA,EAAA,CACN,EAAA,CACF;AAAA,QACA,gBAAAY,EAACC,EAAM,QAAN,EACC,UAAA;AAAA,UAAA,gBAAAC,EAACG,GAAA,EAAO,SAAQ,QAAO,MAAK,SAAQ,UAAU,CAAC,CAACb,GAAM,SAASE,GAAU,OAAOJ,KAAA,OAAAA,IAAe,UAAU;AAAA,UACzG,gBAAAY;AAAA,YAACG;AAAA,YAAA;AAAA,cACC,SAAQ;AAAA,cACR,MAAK;AAAA,cACL,OAAOd,IAAS,UAAU;AAAA,cAC1B,UAAU,CAAC,CAACC;AAAA,cACZ,SAASC;AAAA,cACT,OAAOJ;AAAA,YAAA;AAAA,UAAA;AAAA,QACT,EAAA,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}