@smwb/ui-react 2.6.3 → 2.7.0

package/dist/components/navigation/tabs/tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.js","sources":["../../../../src/components/navigation/tabs/tabs.tsx"],"sourcesContent":["import React from \"react\";\nimport cn from \"clsx\";\nimport { debounce } from \"../../../utils/debounce\";\nimport { Tab, TabProps } from \"./tab/tab\";\nimport { useEventCallback } from \"../../../hooks/useEventCallback\";\nimport { setRef } from \"../../../utils/setRef\";\nimport { animate } from \"../../../utils/animate\";\n\nexport interface TabsProps {\n  value: number;\n  onChange: (e: React.MouseEvent<HTMLButtonElement>, index: number) => void;\n  indicatorContent?: boolean;\n  scrollable?: boolean;\n  className?: string;\n  children?: React.ReactNode;\n  /** Accessible label for the tab list. */\n  \"aria-label\"?: string;\n}\n\ninterface IndicatorStyle {\n  root: {\n    left: number;\n    width: number;\n  };\n  content?: {\n    width: number;\n  };\n}\n\nconst defaultIndicatorStyle = {\n  root: {},\n  content: {},\n} as IndicatorStyle;\n\nexport const Tabs = React.forwardRef<HTMLDivElement, TabsProps>(function Tabs(props, ref) {\n  const {\n    className,\n    children,\n    onChange,\n    value,\n    indicatorContent = false,\n    scrollable = false,\n    \"aria-label\": ariaLabel,\n    ...rest\n  } = props;\n  const [mounted, setMounted] = React.useState(false);\n  const [indicatorStyle, setIndicatorStyle] = React.useState<IndicatorStyle>(defaultIndicatorStyle);\n\n  const tabsRef = React.useRef<HTMLDivElement>(null);\n  const tabListRef = React.useRef<HTMLDivElement>(null);\n  const contentTabsRef = React.useRef<HTMLSpanElement[]>([]);\n\n  // Видимость следующего таба в пикселях\n  const viewNextTabInPixels = 40;\n\n  const getTabsMeta = () => {\n    const tabsNode = tabsRef.current;\n\n    let tabsMeta;\n\n    if (tabsNode) {\n      const rect = tabsNode.getBoundingClientRect();\n\n      tabsMeta = {\n        clientWidth: tabsNode.clientWidth,\n        scrollLeft: tabsNode.scrollLeft,\n        scrollTop: tabsNode.scrollTop,\n        scrollWidth: tabsNode.scrollWidth,\n        top: rect.top,\n        bottom: rect.bottom,\n        left: rect.left,\n        right: rect.right,\n      };\n    }\n\n    let tabMeta: DOMRect | null = null;\n    let tabContentMeta: DOMRect | null = null;\n\n    if (!tabListRef.current) {\n      console.error(\"tabListRef.current is undefined\");\n    }\n    if (tabsNode && tabListRef.current) {\n      const children = tabListRef.current.children;\n\n      if (children.length > 0) {\n        const tab = children[value];\n\n        tabMeta = tab ? tab.getBoundingClientRect() : null;\n\n        if (indicatorContent) {\n          tabContentMeta = contentTabsRef.current[value] ? contentTabsRef.current[value].getBoundingClientRect() : null;\n        }\n      }\n    }\n    return { tabsMeta, tabMeta, tabContentMeta };\n  };\n\n  const updateIndicatorState = useEventCallback(() => {\n    const { tabsMeta, tabMeta, tabContentMeta } = getTabsMeta();\n    let startValue = 0;\n\n    if (tabMeta && tabsMeta) {\n      startValue = 1 * (tabMeta.left - tabsMeta.left + tabsMeta.scrollLeft);\n    }\n\n    const newIndicatorStyle: IndicatorStyle = {\n      root: {\n        left: startValue,\n        width: tabMeta ? tabMeta.width : 0,\n      },\n    };\n\n    if (indicatorContent && tabContentMeta) {\n      newIndicatorStyle.content = {\n        width: tabContentMeta.width,\n      };\n    }\n\n    if (isNaN(indicatorStyle.root.left) || isNaN(indicatorStyle.root.width)) {\n      setIndicatorStyle(newIndicatorStyle);\n    } else {\n      const dStart = Math.abs(indicatorStyle.root.left - newIndicatorStyle.root.left);\n      const dSize = Math.abs(indicatorStyle.root.width - newIndicatorStyle.root.width);\n\n      if (dStart >= 1 || dSize >= 1) {\n        setIndicatorStyle(newIndicatorStyle);\n      }\n    }\n  });\n\n  const scroll = (scrollValue: number, { animation = true } = {}) => {\n    if (!tabsRef.current) {\n      return;\n    }\n    if (animation) {\n      animate(tabsRef.current, \"scrollLeft\", scrollValue, {\n        duration: 300,\n      });\n    } else {\n      tabsRef.current.scrollLeft = scrollValue;\n    }\n  };\n\n  const scrollSelectedIntoView = useEventCallback((animation: boolean) => {\n    const { tabsMeta, tabMeta } = getTabsMeta();\n\n    if (!tabMeta || !tabsMeta) {\n      return;\n    }\n\n    if (tabMeta.left < tabsMeta.left) {\n      // Левая сторона таба не видна.\n      const nextScrollStart = tabsMeta.scrollLeft + (tabMeta.left - tabsMeta.left);\n      scroll(nextScrollStart - viewNextTabInPixels, { animation });\n    } else if (tabMeta.right > tabsMeta.right) {\n      // Правая сторона таба не видна.\n      const nextScrollStart = tabsMeta.scrollLeft + (tabMeta.right - tabsMeta.right);\n      scroll(nextScrollStart + viewNextTabInPixels, { animation });\n    }\n  });\n\n  React.useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  React.useEffect(() => {\n    updateIndicatorState();\n  });\n\n  React.useEffect(() => {\n    const onResize = debounce(() => {\n      if (tabsRef.current) {\n        updateIndicatorState();\n      }\n    }, 166);\n    if (!tabsRef.current || !tabsRef.current.ownerDocument.defaultView) {\n      console.error(`tabsRef.current.ownerDocument.defaultView is undefined`);\n      return;\n    }\n    const window: Window & typeof globalThis = tabsRef.current.ownerDocument.defaultView;\n\n    window.addEventListener(\"resize\", onResize);\n\n    let resizeObserver: ResizeObserver;\n\n    if (typeof ResizeObserver !== \"undefined\") {\n      resizeObserver = new ResizeObserver(onResize);\n\n      Array.from(tabListRef.current?.children ?? []).forEach((child) => {\n        resizeObserver.observe(child);\n      });\n    }\n\n    return () => {\n      onResize.cancel();\n\n      window.removeEventListener(\"resize\", onResize);\n\n      if (resizeObserver) {\n        resizeObserver.disconnect();\n      }\n    };\n  }, [updateIndicatorState]);\n\n  React.useEffect(() => {\n    // Не анимировать при первом рендере\n    scrollSelectedIntoView(defaultIndicatorStyle !== indicatorStyle);\n  }, [scrollSelectedIntoView, indicatorStyle]);\n\n  const tabs = React.Children.map(\n    children as React.ReactElement<TabProps>[],\n    (child: React.ReactElement<TabProps>, index) =>\n      React.cloneElement(child, {\n        isActive: value === index,\n        onClick: (event: React.MouseEvent<HTMLButtonElement>) => {\n          onChange(event, index);\n        },\n        ...(indicatorContent && {\n          contentRef: (ref: HTMLSpanElement) => {\n            const { contentRef } = child.props;\n\n            contentTabsRef.current.push(ref);\n\n            if (contentRef) {\n              setRef(contentRef as React.Ref<unknown>, ref);\n            }\n          },\n        }),\n      } as TabProps)\n  );\n\n  return (\n    <div className={cn(\"smwb-tabs\", className)} role={\"tabpanel\"} ref={ref} {...rest}>\n      <div\n        className={cn(\"smwb-tabs__scroller\", {\n          \"smwb-tabs__scroller--scrollable\": scrollable,\n        })}\n        ref={tabsRef}\n      >\n        <div className=\"smwb-tabs__scroll-area\" ref={tabListRef} role=\"tablist\" aria-label={ariaLabel}>\n          {tabs}\n        </div>\n        {mounted && (\n          <span className=\"smwb-tabs__indicator\" style={indicatorStyle.root}>\n            <span className=\"smwb-tabs__indicator-content\" style={indicatorStyle.content} />\n          </span>\n        )}\n      </div>\n    </div>\n  );\n});\n\nexport { Tab };\nexport type { TabProps };\n"],"names":["defaultIndicatorStyle","Tabs","React","props","ref","className","children","onChange","value","indicatorContent","scrollable","ariaLabel","rest","mounted","setMounted","indicatorStyle","setIndicatorStyle","tabsRef","tabListRef","contentTabsRef","viewNextTabInPixels","getTabsMeta","tabsNode","tabsMeta","rect","tabMeta","tabContentMeta","tab","updateIndicatorState","useEventCallback","startValue","newIndicatorStyle","dStart","dSize","scroll","scrollValue","animation","animate","scrollSelectedIntoView","nextScrollStart","onResize","debounce","window","resizeObserver","_b","_a","child","tabs","index","event","contentRef","setRef","jsx","cn","jsxs"],"mappings":";;;;;;;;AA8BA,MAAMA,IAAwB;AAAA,EAC5B,MAAM,CAAA;AAAA,EACN,SAAS,CAAA;AACX,GAEaC,IAAOC,EAAM,WAAsC,SAAcC,GAAOC,GAAK;AACxF,QAAM;AAAA,IACJ,WAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,OAAAC;AAAA,IACA,kBAAAC,IAAmB;AAAA,IACnB,YAAAC,IAAa;AAAA,IACb,cAAcC;AAAA,IACd,GAAGC;AAAA,EAAA,IACDT,GACE,CAACU,GAASC,CAAU,IAAIZ,EAAM,SAAS,EAAK,GAC5C,CAACa,GAAgBC,CAAiB,IAAId,EAAM,SAAyBF,CAAqB,GAE1FiB,IAAUf,EAAM,OAAuB,IAAI,GAC3CgB,IAAahB,EAAM,OAAuB,IAAI,GAC9CiB,IAAiBjB,EAAM,OAA0B,EAAE,GAGnDkB,IAAsB,IAEtBC,IAAc,MAAM;AACxB,UAAMC,IAAWL,EAAQ;AAEzB,QAAIM;AAEJ,QAAID,GAAU;AACZ,YAAME,IAAOF,EAAS,sBAAA;AAEtB,MAAAC,IAAW;AAAA,QACT,aAAaD,EAAS;AAAA,QACtB,YAAYA,EAAS;AAAA,QACrB,WAAWA,EAAS;AAAA,QACpB,aAAaA,EAAS;AAAA,QACtB,KAAKE,EAAK;AAAA,QACV,QAAQA,EAAK;AAAA,QACb,MAAMA,EAAK;AAAA,QACX,OAAOA,EAAK;AAAA,MAAA;AAAA,IAEhB;AAEA,QAAIC,IAA0B,MAC1BC,IAAiC;AAKrC,QAHKR,EAAW,WACd,QAAQ,MAAM,iCAAiC,GAE7CI,KAAYJ,EAAW,SAAS;AAClC,YAAMZ,IAAWY,EAAW,QAAQ;AAEpC,UAAIZ,EAAS,SAAS,GAAG;AACvB,cAAMqB,IAAMrB,EAASE,CAAK;AAE1B,QAAAiB,IAAUE,IAAMA,EAAI,sBAAA,IAA0B,MAE1ClB,MACFiB,IAAiBP,EAAe,QAAQX,CAAK,IAAIW,EAAe,QAAQX,CAAK,EAAE,sBAAA,IAA0B;AAAA,MAE7G;AAAA,IACF;AACA,WAAO,EAAE,UAAAe,GAAU,SAAAE,GAAS,gBAAAC,EAAA;AAAA,EAC9B,GAEME,IAAuBC,EAAiB,MAAM;AAClD,UAAM,EAAE,UAAAN,GAAU,SAAAE,GAAS,gBAAAC,EAAA,IAAmBL,EAAA;AAC9C,QAAIS,IAAa;AAEjB,IAAIL,KAAWF,MACbO,IAAa,KAAKL,EAAQ,OAAOF,EAAS,OAAOA,EAAS;AAG5D,UAAMQ,IAAoC;AAAA,MACxC,MAAM;AAAA,QACJ,MAAMD;AAAA,QACN,OAAOL,IAAUA,EAAQ,QAAQ;AAAA,MAAA;AAAA,IACnC;AASF,QANIhB,KAAoBiB,MACtBK,EAAkB,UAAU;AAAA,MAC1B,OAAOL,EAAe;AAAA,IAAA,IAItB,MAAMX,EAAe,KAAK,IAAI,KAAK,MAAMA,EAAe,KAAK,KAAK;AACpE,MAAAC,EAAkBe,CAAiB;AAAA,SAC9B;AACL,YAAMC,IAAS,KAAK,IAAIjB,EAAe,KAAK,OAAOgB,EAAkB,KAAK,IAAI,GACxEE,IAAQ,KAAK,IAAIlB,EAAe,KAAK,QAAQgB,EAAkB,KAAK,KAAK;AAE/E,OAAIC,KAAU,KAAKC,KAAS,MAC1BjB,EAAkBe,CAAiB;AAAA,IAEvC;AAAA,EACF,CAAC,GAEKG,IAAS,CAACC,GAAqB,EAAE,WAAAC,IAAY,GAAA,IAAS,OAAO;AACjE,IAAKnB,EAAQ,YAGTmB,IACFC,EAAQpB,EAAQ,SAAS,cAAckB,GAAa;AAAA,MAClD,UAAU;AAAA,IAAA,CACX,IAEDlB,EAAQ,QAAQ,aAAakB;AAAA,EAEjC,GAEMG,IAAyBT,EAAiB,CAACO,MAAuB;AACtE,UAAM,EAAE,UAAAb,GAAU,SAAAE,EAAA,IAAYJ,EAAA;AAE9B,QAAI,GAACI,KAAW,CAACF;AAIjB,UAAIE,EAAQ,OAAOF,EAAS,MAAM;AAEhC,cAAMgB,IAAkBhB,EAAS,cAAcE,EAAQ,OAAOF,EAAS;AACvE,QAAAW,EAAOK,IAAkBnB,GAAqB,EAAE,WAAAgB,EAAA,CAAW;AAAA,MAC7D,WAAWX,EAAQ,QAAQF,EAAS,OAAO;AAEzC,cAAMgB,IAAkBhB,EAAS,cAAcE,EAAQ,QAAQF,EAAS;AACxE,QAAAW,EAAOK,IAAkBnB,GAAqB,EAAE,WAAAgB,EAAA,CAAW;AAAA,MAC7D;AAAA;AAAA,EACF,CAAC;AAED,EAAAlC,EAAM,UAAU,MAAM;AACpB,IAAAY,EAAW,EAAI;AAAA,EACjB,GAAG,CAAA,CAAE,GAELZ,EAAM,UAAU,MAAM;AACpB,IAAA0B,EAAA;AAAA,EACF,CAAC,GAED1B,EAAM,UAAU,MAAM;;AACpB,UAAMsC,IAAWC,EAAS,MAAM;AAC9B,MAAIxB,EAAQ,WACVW,EAAA;AAAA,IAEJ,GAAG,GAAG;AACN,QAAI,CAACX,EAAQ,WAAW,CAACA,EAAQ,QAAQ,cAAc,aAAa;AAClE,cAAQ,MAAM,wDAAwD;AACtE;AAAA,IACF;AACA,UAAMyB,IAAqCzB,EAAQ,QAAQ,cAAc;AAEzE,IAAAyB,EAAO,iBAAiB,UAAUF,CAAQ;AAE1C,QAAIG;AAEJ,WAAI,OAAO,kBAAmB,gBAC5BA,IAAiB,IAAI,eAAeH,CAAQ,GAE5C,MAAM,MAAKI,KAAAC,IAAA3B,EAAW,YAAX,gBAAA2B,EAAoB,aAApB,OAAAD,IAAgC,EAAE,EAAE,QAAQ,CAACE,MAAU;AAChE,MAAAH,EAAe,QAAQG,CAAK;AAAA,IAC9B,CAAC,IAGI,MAAM;AACX,MAAAN,EAAS,OAAA,GAETE,EAAO,oBAAoB,UAAUF,CAAQ,GAEzCG,KACFA,EAAe,WAAA;AAAA,IAEnB;AAAA,EACF,GAAG,CAACf,CAAoB,CAAC,GAEzB1B,EAAM,UAAU,MAAM;AAEpB,IAAAoC,EAAuBtC,MAA0Be,CAAc;AAAA,EACjE,GAAG,CAACuB,GAAwBvB,CAAc,CAAC;AAE3C,QAAMgC,IAAO7C,EAAM,SAAS;AAAA,IAC1BI;AAAA,IACA,CAACwC,GAAqCE,MACpC9C,EAAM,aAAa4C,GAAO;AAAA,MACxB,UAAUtC,MAAUwC;AAAA,MACpB,SAAS,CAACC,MAA+C;AACvD,QAAA1C,EAAS0C,GAAOD,CAAK;AAAA,MACvB;AAAA,MACA,GAAIvC,KAAoB;AAAA,QACtB,YAAY,CAACL,MAAyB;AACpC,gBAAM,EAAE,YAAA8C,MAAeJ,EAAM;AAE7B,UAAA3B,EAAe,QAAQ,KAAKf,CAAG,GAE3B8C,KACFC,EAAOD,GAAkC9C,CAAG;AAAA,QAEhD;AAAA,MAAA;AAAA,IACF,CACW;AAAA,EAAA;AAGjB,SACE,gBAAAgD,EAAC,OAAA,EAAI,WAAWC,EAAG,aAAahD,CAAS,GAAG,MAAM,YAAY,KAAAD,GAAW,GAAGQ,GAC1E,UAAA,gBAAA0C;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWD,EAAG,uBAAuB;AAAA,QACnC,mCAAmC3C;AAAA,MAAA,CACpC;AAAA,MACD,KAAKO;AAAA,MAEL,UAAA;AAAA,QAAA,gBAAAmC,EAAC,OAAA,EAAI,WAAU,0BAAyB,KAAKlC,GAAY,MAAK,WAAU,cAAYP,GACjF,UAAAoC,EAAA,CACH;AAAA,QACClC,KACC,gBAAAuC,EAAC,QAAA,EAAK,WAAU,wBAAuB,OAAOrC,EAAe,MAC3D,UAAA,gBAAAqC,EAAC,UAAK,WAAU,gCAA+B,OAAOrC,EAAe,SAAS,EAAA,CAChF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,GAGN;AAEJ,CAAC;"}
+{"version":3,"file":"tabs.js","sources":["../../../../src/components/navigation/tabs/tabs.tsx"],"sourcesContent":["import React from \"react\";\nimport cn from \"clsx\";\nimport { debounce } from \"../../../utils/debounce\";\nimport { Tab, TabProps } from \"./tab/tab\";\nimport { useEventCallback } from \"../../../hooks/useEventCallback\";\nimport { setRef } from \"../../../utils/setRef\";\nimport { animate } from \"../../../utils/animate\";\nimport Icon from \"../../base/icon/icon\";\n\nexport interface TabsProps {\n  value: number;\n  onChange: (e: React.MouseEvent<HTMLButtonElement>, index: number) => void;\n  indicatorContent?: boolean;\n  /**\n   * Let the tab row scroll sideways instead of clipping it. The edge beyond which\n   * more tabs are hidden fades out.\n   */\n  scrollable?: boolean;\n  /** With `scrollable`: buttons at both ends that scroll the row while it overflows. */\n  scrollButtons?: boolean;\n  /** Compact tabs: labels as written (no capitals, no letter spacing) and less padding. */\n  dense?: boolean;\n  /** Accessible label of the button that scrolls back. */\n  scrollBackAriaLabel?: string;\n  /** Accessible label of the button that scrolls forward. */\n  scrollForwardAriaLabel?: string;\n  className?: string;\n  children?: React.ReactNode;\n  /** Accessible label for the tab list. */\n  \"aria-label\"?: string;\n}\n\ninterface IndicatorStyle {\n  root: {\n    left: number;\n    width: number;\n  };\n  content?: {\n    width: number;\n  };\n}\n\nconst defaultIndicatorStyle = {\n  root: {},\n  content: {},\n} as IndicatorStyle;\n\n/** A scroll button moves the row by this share of its visible width. */\nconst SCROLL_PAGE = 0.8;\n\ninterface Overflow {\n  start: boolean;\n  end: boolean;\n}\n\nexport const Tabs = React.forwardRef<HTMLDivElement, TabsProps>(function Tabs(props, ref) {\n  const {\n    className,\n    children,\n    onChange,\n    value,\n    indicatorContent = false,\n    scrollable = false,\n    scrollButtons = false,\n    dense = false,\n    scrollBackAriaLabel = \"Scroll tabs back\",\n    scrollForwardAriaLabel = \"Scroll tabs forward\",\n    \"aria-label\": ariaLabel,\n    ...rest\n  } = props;\n  const [mounted, setMounted] = React.useState(false);\n  const [indicatorStyle, setIndicatorStyle] = React.useState<IndicatorStyle>(defaultIndicatorStyle);\n  // Whether tabs are hidden past the start / the end of a scrollable row. Only\n  // measured in the browser, so the server markup shows neither.\n  const [overflow, setOverflow] = React.useState<Overflow>({ start: false, end: false });\n\n  const tabsRef = React.useRef<HTMLDivElement>(null);\n  const tabListRef = React.useRef<HTMLDivElement>(null);\n  const contentTabsRef = React.useRef<HTMLSpanElement[]>([]);\n\n  // Видимость следующего таба в пикселях\n  const viewNextTabInPixels = 40;\n\n  const getTabsMeta = () => {\n    const tabsNode = tabsRef.current;\n\n    let tabsMeta;\n\n    if (tabsNode) {\n      const rect = tabsNode.getBoundingClientRect();\n\n      tabsMeta = {\n        clientWidth: tabsNode.clientWidth,\n        scrollLeft: tabsNode.scrollLeft,\n        scrollTop: tabsNode.scrollTop,\n        scrollWidth: tabsNode.scrollWidth,\n        top: rect.top,\n        bottom: rect.bottom,\n        left: rect.left,\n        right: rect.right,\n      };\n    }\n\n    let tabMeta: DOMRect | null = null;\n    let tabContentMeta: DOMRect | null = null;\n\n    if (!tabListRef.current) {\n      console.error(\"tabListRef.current is undefined\");\n    }\n    if (tabsNode && tabListRef.current) {\n      const children = tabListRef.current.children;\n\n      if (children.length > 0) {\n        const tab = children[value];\n\n        tabMeta = tab ? tab.getBoundingClientRect() : null;\n\n        if (indicatorContent) {\n          tabContentMeta = contentTabsRef.current[value] ? contentTabsRef.current[value].getBoundingClientRect() : null;\n        }\n      }\n    }\n    return { tabsMeta, tabMeta, tabContentMeta };\n  };\n\n  const updateIndicatorState = useEventCallback(() => {\n    const { tabsMeta, tabMeta, tabContentMeta } = getTabsMeta();\n    let startValue = 0;\n\n    if (tabMeta && tabsMeta) {\n      startValue = 1 * (tabMeta.left - tabsMeta.left + tabsMeta.scrollLeft);\n    }\n\n    const newIndicatorStyle: IndicatorStyle = {\n      root: {\n        left: startValue,\n        width: tabMeta ? tabMeta.width : 0,\n      },\n    };\n\n    if (indicatorContent && tabContentMeta) {\n      newIndicatorStyle.content = {\n        width: tabContentMeta.width,\n      };\n    }\n\n    if (isNaN(indicatorStyle.root.left) || isNaN(indicatorStyle.root.width)) {\n      setIndicatorStyle(newIndicatorStyle);\n    } else {\n      const dStart = Math.abs(indicatorStyle.root.left - newIndicatorStyle.root.left);\n      const dSize = Math.abs(indicatorStyle.root.width - newIndicatorStyle.root.width);\n\n      if (dStart >= 1 || dSize >= 1) {\n        setIndicatorStyle(newIndicatorStyle);\n      }\n    }\n  });\n\n  const scroll = (scrollValue: number, { animation = true } = {}) => {\n    if (!tabsRef.current) {\n      return;\n    }\n    if (animation) {\n      animate(tabsRef.current, \"scrollLeft\", scrollValue, {\n        duration: 300,\n      });\n    } else {\n      tabsRef.current.scrollLeft = scrollValue;\n    }\n  };\n\n  const updateOverflow = useEventCallback(() => {\n    const node = tabsRef.current;\n    const max = node ? node.scrollWidth - node.clientWidth : 0;\n    const next: Overflow =\n      node && scrollable\n        ? { start: node.scrollLeft > 1, end: node.scrollLeft < max - 1 }\n        : { start: false, end: false };\n    setOverflow((prev) => (prev.start === next.start && prev.end === next.end ? prev : next));\n  });\n\n  const scrollByPage = (direction: -1 | 1) => {\n    const node = tabsRef.current;\n    if (node) {\n      scroll(node.scrollLeft + direction * node.clientWidth * SCROLL_PAGE);\n    }\n  };\n\n  const scrollSelectedIntoView = useEventCallback((animation: boolean) => {\n    const { tabsMeta, tabMeta } = getTabsMeta();\n\n    if (!tabMeta || !tabsMeta) {\n      return;\n    }\n\n    if (tabMeta.left < tabsMeta.left) {\n      // Левая сторона таба не видна.\n      const nextScrollStart = tabsMeta.scrollLeft + (tabMeta.left - tabsMeta.left);\n      scroll(nextScrollStart - viewNextTabInPixels, { animation });\n    } else if (tabMeta.right > tabsMeta.right) {\n      // Правая сторона таба не видна.\n      const nextScrollStart = tabsMeta.scrollLeft + (tabMeta.right - tabsMeta.right);\n      scroll(nextScrollStart + viewNextTabInPixels, { animation });\n    }\n  });\n\n  React.useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  React.useEffect(() => {\n    updateIndicatorState();\n  });\n\n  React.useEffect(() => {\n    const onResize = debounce(() => {\n      if (tabsRef.current) {\n        updateIndicatorState();\n        updateOverflow();\n      }\n    }, 166);\n    if (!tabsRef.current || !tabsRef.current.ownerDocument.defaultView) {\n      console.error(`tabsRef.current.ownerDocument.defaultView is undefined`);\n      return;\n    }\n    const window: Window & typeof globalThis = tabsRef.current.ownerDocument.defaultView;\n\n    window.addEventListener(\"resize\", onResize);\n    const scroller = tabsRef.current;\n    scroller.addEventListener(\"scroll\", updateOverflow, { passive: true });\n\n    let resizeObserver: ResizeObserver;\n\n    // The row and each tab: a label can grow with its data while the row keeps\n    // its width.\n    if (typeof ResizeObserver !== \"undefined\") {\n      resizeObserver = new ResizeObserver(onResize);\n      resizeObserver.observe(scroller);\n\n      Array.from(tabListRef.current?.children ?? []).forEach((child) => {\n        resizeObserver.observe(child);\n      });\n    }\n    updateOverflow();\n\n    return () => {\n      onResize.cancel();\n\n      window.removeEventListener(\"resize\", onResize);\n      scroller.removeEventListener(\"scroll\", updateOverflow);\n\n      if (resizeObserver) {\n        resizeObserver.disconnect();\n      }\n    };\n  }, [updateIndicatorState, updateOverflow]);\n\n  React.useEffect(() => {\n    // Не анимировать при первом рендере\n    scrollSelectedIntoView(defaultIndicatorStyle !== indicatorStyle);\n  }, [scrollSelectedIntoView, indicatorStyle]);\n\n  const tabs = React.Children.map(\n    children as React.ReactElement<TabProps>[],\n    (child: React.ReactElement<TabProps>, index) =>\n      React.cloneElement(child, {\n        isActive: value === index,\n        onClick: (event: React.MouseEvent<HTMLButtonElement>) => {\n          onChange(event, index);\n        },\n        ...(indicatorContent && {\n          contentRef: (ref: HTMLSpanElement) => {\n            const { contentRef } = child.props;\n\n            contentTabsRef.current.push(ref);\n\n            if (contentRef) {\n              setRef(contentRef as React.Ref<unknown>, ref);\n            }\n          },\n        }),\n      } as TabProps)\n  );\n\n  const showScrollButtons = scrollable && scrollButtons && (overflow.start || overflow.end);\n\n  return (\n    <div\n      className={cn(\n        \"smwb-tabs\",\n        {\n          \"smwb-tabs--dense\": dense,\n          \"smwb-tabs--overflow-start\": overflow.start,\n          \"smwb-tabs--overflow-end\": overflow.end,\n        },\n        className\n      )}\n      role={\"tabpanel\"}\n      ref={ref}\n      {...rest}\n    >\n      {showScrollButtons && (\n        <button\n          type=\"button\"\n          className=\"smwb-tabs__scroll-button smwb-tabs__scroll-button--start\"\n          aria-label={scrollBackAriaLabel}\n          disabled={!overflow.start}\n          onClick={() => scrollByPage(-1)}\n        >\n          <Icon name=\"chevron_left\" size={20} />\n        </button>\n      )}\n      <div\n        className={cn(\"smwb-tabs__scroller\", {\n          \"smwb-tabs__scroller--scrollable\": scrollable,\n        })}\n        ref={tabsRef}\n      >\n        <div className=\"smwb-tabs__scroll-area\" ref={tabListRef} role=\"tablist\" aria-label={ariaLabel}>\n          {tabs}\n        </div>\n        {mounted && (\n          <span className=\"smwb-tabs__indicator\" style={indicatorStyle.root}>\n            <span className=\"smwb-tabs__indicator-content\" style={indicatorStyle.content} />\n          </span>\n        )}\n      </div>\n      {showScrollButtons && (\n        <button\n          type=\"button\"\n          className=\"smwb-tabs__scroll-button smwb-tabs__scroll-button--end\"\n          aria-label={scrollForwardAriaLabel}\n          disabled={!overflow.end}\n          onClick={() => scrollByPage(1)}\n        >\n          <Icon name=\"chevron_right\" size={20} />\n        </button>\n      )}\n    </div>\n  );\n});\n\nexport { Tab };\nexport type { TabProps };\n"],"names":["defaultIndicatorStyle","SCROLL_PAGE","Tabs","React","props","ref","className","children","onChange","value","indicatorContent","scrollable","scrollButtons","dense","scrollBackAriaLabel","scrollForwardAriaLabel","ariaLabel","rest","mounted","setMounted","indicatorStyle","setIndicatorStyle","overflow","setOverflow","tabsRef","tabListRef","contentTabsRef","viewNextTabInPixels","getTabsMeta","tabsNode","tabsMeta","rect","tabMeta","tabContentMeta","tab","updateIndicatorState","useEventCallback","startValue","newIndicatorStyle","dStart","dSize","scroll","scrollValue","animation","animate","updateOverflow","node","max","next","prev","scrollByPage","direction","scrollSelectedIntoView","nextScrollStart","onResize","debounce","window","scroller","resizeObserver","_b","_a","child","tabs","index","event","contentRef","setRef","showScrollButtons","jsxs","cn","jsx","Icon"],"mappings":"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"}

package/dist/connects/rt/table/draggableHeader.d.ts

@@ -10,4 +10,4 @@ export declare function DraggableColumnHeader<T>({ header, table, children, onCo
 export type DraggableColumnHeaderWrapperProps<T> = DraggableColumnHeaderProps<T> & {
     draggableColumn?: boolean | null;
 };
-export declare function DraggableColumnHeaderWrapper<T>({ onColumnOrderChange, header, table, children, draggableColumn, }: DraggableColumnHeaderWrapperProps<T>): string | number | boolean | Iterable<ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
+export declare function DraggableColumnHeaderWrapper<T>({ onColumnOrderChange, header, table, children, draggableColumn, }: DraggableColumnHeaderWrapperProps<T>): string | number | boolean | import("react/jsx-runtime").JSX.Element | Iterable<ReactNode> | null | undefined;

package/dist/connects/rt/table/draggableHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"draggableHeader.js","sources":["../../../../src/connects/rt/table/draggableHeader.tsx"],"sourcesContent":["import { Table, Header, Column, ColumnOrderState } from \"@tanstack/react-table\";\n\nimport { useDrag, useDrop } from \"react-dnd\";\nimport { ReactNode } from \"react\";\n\nexport interface DraggableColumnHeaderProps<T> {\n  onColumnOrderChange?: (oldValue: ColumnOrderState, newValue: ColumnOrderState) => void;\n  header: Header<T, unknown>;\n  table: Table<T>;\n  children: ReactNode;\n}\n\nconst reorderColumn = (draggedColumnId: string, targetColumnId: string, columnOrder: string[]): ColumnOrderState => {\n  columnOrder.splice(\n    columnOrder.indexOf(targetColumnId),\n    0,\n    columnOrder.splice(columnOrder.indexOf(draggedColumnId), 1)[0]\n  );\n  return [...columnOrder];\n};\nexport function DraggableColumnHeader<T>({\n  header,\n  table,\n  children,\n  onColumnOrderChange,\n}: DraggableColumnHeaderProps<T>) {\n  const { getState, setColumnOrder } = table;\n  const { columnOrder } = getState();\n  const { column } = header;\n\n  const [, dropRef] = useDrop({\n    accept: \"column\",\n    drop: (draggedColumn: Column<T>) => {\n      const newColumnOrder = reorderColumn(draggedColumn.id, column.id, columnOrder);\n      setColumnOrder(newColumnOrder);\n      setTimeout(() => {\n        onColumnOrderChange?.(columnOrder, newColumnOrder);\n      });\n    },\n  });\n\n  const [{ isDragging }, dragRef, previewRef] = useDrag({\n    collect: (monitor) => ({\n      isDragging: monitor.isDragging(),\n    }),\n    item: () => column,\n    type: \"column\",\n  });\n\n  return (\n    <div ref={dropRef} style={{ opacity: isDragging ? 0.3 : 1 }}>\n      <span ref={previewRef}>\n        <span ref={dragRef}>{children}</span>\n      </span>\n    </div>\n  );\n}\n\nexport type DraggableColumnHeaderWrapperProps<T> = DraggableColumnHeaderProps<T> & {\n  draggableColumn?: boolean | null;\n};\nexport function DraggableColumnHeaderWrapper<T>({\n  onColumnOrderChange,\n  header,\n  table,\n  children,\n  draggableColumn,\n}: DraggableColumnHeaderWrapperProps<T>) {\n  if (!draggableColumn) {\n    return children;\n  }\n  return (\n    <DraggableColumnHeader header={header} table={table} onColumnOrderChange={onColumnOrderChange}>\n      {children}\n    </DraggableColumnHeader>\n  );\n}\n"],"names":["reorderColumn","draggedColumnId","targetColumnId","columnOrder","DraggableColumnHeader","header","table","children","onColumnOrderChange","getState","setColumnOrder","column","dropRef","useDrop","draggedColumn","newColumnOrder","isDragging","dragRef","previewRef","useDrag","monitor","jsx","DraggableColumnHeaderWrapper","draggableColumn"],"mappings":";;AAYA,MAAMA,IAAgB,CAACC,GAAyBC,GAAwBC,OACtEA,EAAY;AAAA,EACVA,EAAY,QAAQD,CAAc;AAAA,EAClC;AAAA,EACAC,EAAY,OAAOA,EAAY,QAAQF,CAAe,GAAG,CAAC,EAAE,CAAC;AAAA,GAExD,CAAC,GAAGE,CAAW;AAEjB,SAASC,EAAyB;AAAA,EACvC,QAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,qBAAAC;AACF,GAAkC;AAChC,QAAM,EAAE,UAAAC,GAAU,gBAAAC,EAAA,IAAmBJ,GAC/B,EAAE,aAAAH,EAAA,IAAgBM,EAAA,GAClB,EAAE,QAAAE,MAAWN,GAEb,CAAA,EAAGO,CAAO,IAAIC,EAAQ;AAAA,IAC1B,QAAQ;AAAA,IACR,MAAM,CAACC,MAA6B;AAClC,YAAMC,IAAiBf,EAAcc,EAAc,IAAIH,EAAO,IAAIR,CAAW;AAC7E,MAAAO,EAAeK,CAAc,GAC7B,WAAW,MAAM;AACf,QAAAP,KAAA,QAAAA,EAAsBL,GAAaY;AAAA,MACrC,CAAC;AAAA,IACH;AAAA,EAAA,CACD,GAEK,CAAC,EAAE,YAAAC,EAAA,GAAcC,GAASC,CAAU,IAAIC,EAAQ;AAAA,IACpD,SAAS,CAACC,OAAa;AAAA,MACrB,YAAYA,EAAQ,WAAA;AAAA,IAAW;AAAA,IAEjC,MAAM,MAAMT;AAAA,IACZ,MAAM;AAAA,EAAA,CACP;AAED,SACE,gBAAAU,EAAC,SAAI,KAAKT,GAAS,OAAO,EAAE,SAASI,IAAa,MAAM,EAAA,GACtD,UAAA,gBAAAK,EAAC,QAAA,EAAK,KAAKH,GACT,UAAA,gBAAAG,EAAC,UAAK,KAAKJ,GAAU,UAAAV,GAAS,EAAA,CAChC,EAAA,CACF;AAEJ;AAKO,SAASe,EAAgC;AAAA,EAC9C,qBAAAd;AAAA,EACA,QAAAH;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,iBAAAgB;AACF,GAAyC;AACvC,SAAKA,IAIH,gBAAAF,EAACjB,GAAA,EAAsB,QAAAC,GAAgB,OAAAC,GAAc,qBAAAE,GAClD,UAAAD,GACH,IALOA;AAOX;"}

package/dist/connects/rt/table/headerCellRenderer.d.ts

@@ -4,5 +4,11 @@ export interface HeaderCellRendererProps<T extends object> {
     header?: Header<T, unknown>;
     onChange?: (e: React.ChangeEvent<HTMLInputElement>, header: Header<T, unknown>) => void;
 }
+/**
+ * Header text that turns into a text field on click, to rename the column.
+ *
+ * In a sortable table the click on the text only opens the field; the sort
+ * marker, and Enter or Space on the focused header, sort the column.
+ */
 declare const HeaderCellRenderer: <T extends object>({ header, onChange }: HeaderCellRendererProps<T>) => import("react/jsx-runtime").JSX.Element;
 export default HeaderCellRenderer;

package/dist/connects/rt/table/headerCellRenderer.js

@@ -0,0 +1,21 @@
+import { jsx as r, Fragment as d } from "react/jsx-runtime";
+import { useState as i, useRef as p, useEffect as v } from "react";
+import { TextField as x } from "../../../components/inputs/textField/textField.js";
+const k = ({ header: e, onChange: l }) => {
+  var o;
+  const [c, s] = i(((o = e == null ? void 0 : e.column.columnDef.header) == null ? void 0 : o.toString()) || ""), [n, u] = i(!1), f = p(null);
+  v(() => {
+    var t;
+    n && ((t = f.current) == null || t.focus());
+  }, [n]);
+  const m = (t) => {
+    e && (s(t.target.value), l == null || l(t, e));
+  }, a = (t) => {
+    t.preventDefault(), u(!0);
+  };
+  return e ? /* @__PURE__ */ r("div", { onClick: a, children: n ? /* @__PURE__ */ r(x, { ref: f, value: c, onChange: m, inline: !0, onBlur: () => u(!1) }) : e.column.columnDef.header }) : /* @__PURE__ */ r(d, {});
+};
+export {
+  k as default
+};
+//# sourceMappingURL=headerCellRenderer.js.map

package/dist/connects/rt/table/headerCellRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"headerCellRenderer.js","sources":["../../../../src/connects/rt/table/headerCellRenderer.tsx"],"sourcesContent":["import { Header } from \"@tanstack/react-table\";\nimport React, { useEffect, useRef, useState } from \"react\";\nimport { TextField } from \"../../../components/inputs/textField\";\n\nexport interface HeaderCellRendererProps<T extends object> {\n  header?: Header<T, unknown>;\n  onChange?: (e: React.ChangeEvent<HTMLInputElement>, header: Header<T, unknown>) => void;\n}\n\n/**\n * Header text that turns into a text field on click, to rename the column.\n *\n * In a sortable table the click on the text only opens the field; the sort\n * marker, and Enter or Space on the focused header, sort the column.\n */\nconst HeaderCellRenderer = <T extends object>({ header, onChange }: HeaderCellRendererProps<T>) => {\n  const [value, setValue] = useState<string>(header?.column.columnDef.header?.toString() || \"\");\n  const [editable, setEditable] = useState(false);\n  const fieldRef = useRef<HTMLInputElement>(null);\n\n  // The click that opens the field leaves focus on the header's sort control,\n  // where Space and Enter would sort instead of typing.\n  useEffect(() => {\n    if (editable) fieldRef.current?.focus();\n  }, [editable]);\n\n  const handleChangeCell = (e: React.ChangeEvent<HTMLInputElement>) => {\n    if (!header) return;\n    setValue(e.target.value);\n    onChange?.(e, header);\n  };\n\n  // A sortable header draws this inside its sort control, and a click here is\n  // for editing: preventDefault() tells the control not to sort on it.\n  const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {\n    e.preventDefault();\n    setEditable(true);\n  };\n\n  if (!header) return <></>;\n\n  return (\n    <div onClick={handleClick}>\n      {editable ? (\n        <TextField ref={fieldRef} value={value} onChange={handleChangeCell} inline onBlur={() => setEditable(false)} />\n      ) : (\n        (header.column.columnDef.header as string)\n      )}\n    </div>\n  );\n};\n\nexport default HeaderCellRenderer;\n"],"names":["HeaderCellRenderer","header","onChange","value","setValue","useState","_a","editable","setEditable","fieldRef","useRef","useEffect","handleChangeCell","e","handleClick","jsx","TextField","Fragment"],"mappings":";;;AAeA,MAAMA,IAAqB,CAAmB,EAAE,QAAAC,GAAQ,UAAAC,QAA2C;;AACjG,QAAM,CAACC,GAAOC,CAAQ,IAAIC,IAAiBC,IAAAL,KAAA,gBAAAA,EAAQ,OAAO,UAAU,WAAzB,gBAAAK,EAAiC,eAAc,EAAE,GACtF,CAACC,GAAUC,CAAW,IAAIH,EAAS,EAAK,GACxCI,IAAWC,EAAyB,IAAI;AAI9C,EAAAC,EAAU,MAAM;;AACd,IAAIJ,OAAUD,IAAAG,EAAS,YAAT,QAAAH,EAAkB;AAAA,EAClC,GAAG,CAACC,CAAQ,CAAC;AAEb,QAAMK,IAAmB,CAACC,MAA2C;AACnE,IAAKZ,MACLG,EAASS,EAAE,OAAO,KAAK,GACvBX,KAAA,QAAAA,EAAWW,GAAGZ;AAAA,EAChB,GAIMa,IAAc,CAACD,MAAwC;AAC3D,IAAAA,EAAE,eAAA,GACFL,EAAY,EAAI;AAAA,EAClB;AAEA,SAAKP,IAGH,gBAAAc,EAAC,SAAI,SAASD,GACX,cACC,gBAAAC,EAACC,GAAA,EAAU,KAAKP,GAAU,OAAAN,GAAc,UAAUS,GAAkB,QAAM,IAAC,QAAQ,MAAMJ,EAAY,EAAK,GAAG,IAE5GP,EAAO,OAAO,UAAU,OAAA,CAE7B,IATkB,gBAAAc,EAAAE,GAAA,CAAA,CAAE;AAWxB;"}

package/dist/connects/rt/table/table.d.ts

@@ -4,6 +4,8 @@ declare module "@tanstack/table-core" {
     interface ColumnMeta<TData extends RowData, TValue> {
         cellProps?: TdHTMLAttributes<HTMLTableCellElement>;
         draggableColumn?: boolean;
+        /** The column's name on each cell when rows stack as cards (`stackBelow`); a string `header` is used by default. */
+        label?: string;
     }
 }
 import { TableProps as SMWBTableProps } from "../../../components/dataDisplay/table";

package/dist/connects/rt/table/table.js

@@ -0,0 +1,200 @@
+import { jsxs as x, jsx as o, Fragment as le } from "react/jsx-runtime";
+import '../../../assets/styles/less/connects/rt/table.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
+/* empty css                                                */
+import D, { useState as p, useRef as ae, useEffect as re } from "react";
+import { getCoreRowModel as se, getPaginationRowModel as me, getSortedRowModel as ce, getExpandedRowModel as ge, useReactTable as fe, flexRender as F } from "@tanstack/react-table";
+import { getColumnName as g, getDefaultColumnSizingState as de, columnSizingStateReducer as ue } from "./utils.js";
+import { ProgressIndicator as pe } from "../../../components/feedBack/progressIndicator/progressIndicator.js";
+import Se from "../../../components/feedBack/message/message.js";
+import { DraggableColumnHeaderWrapper as ze } from "./draggableHeader.js";
+import be from "../../../components/dataDisplay/table/table.js";
+import he from "../../../components/dataDisplay/table/tableHead.js";
+import d from "../../../components/dataDisplay/table/tableRow.js";
+import Ce from "../../../components/dataDisplay/table/tableHeadCell.js";
+import Re from "../../../components/dataDisplay/table/tableBody.js";
+import S from "../../../components/dataDisplay/table/tableCell.js";
+const He = ({
+  data: z,
+  columns: i,
+  withPagination: _,
+  isInfinite: T,
+  limit: M = 5,
+  limitOptions: $ = [5, 10, 15],
+  dense: L,
+  sortable: v,
+  expandable: q,
+  draggableColumns: G,
+  columnResizeMode: J = "onChange",
+  enableColumnResizing: K,
+  onColumnSizingChange: I,
+  onColumnOrderChange: Q,
+  getRowCanExpand: U,
+  renderSubComponent: w,
+  cellAlign: E,
+  isLoading: N = !1,
+  onNextPage: b,
+  onPrevPage: h,
+  error: O,
+  onHeadCellClick: C,
+  headerCellInnerRenderer: W,
+  onBodyRowClick: u,
+  ...V
+}) => {
+  const [X, Y] = p([]), [Z, y] = D.useState(
+    i.map((n) => g(n))
+  ), [f, A] = p(null), [s, j] = p(de(i)), [P, B] = p({
+    startOffset: null,
+    startSize: null,
+    deltaOffset: null,
+    deltaPercentage: null,
+    isResizingColumn: !1,
+    columnSizingStart: []
+  }), R = ae(!1);
+  re(() => {
+    if (f) {
+      const n = (f == null ? void 0 : f.offsetWidth) || 0, e = i.filter((t) => t.size), r = n - i.reduce((t, ie) => t + (ie.size || 0), 0), l = i.length - e.length, a = l ? r / l : 10;
+      j(
+        i.map((t) => ({
+          size: t.size ? t.size : a,
+          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+          name: g(t)
+        })).reduce(ue, {})
+      ), y(i.map((t) => g(t)));
+    }
+  }, [f, i]);
+  const m = {
+    data: z,
+    columns: i,
+    state: { sorting: X, columnSizing: s, columnSizingInfo: P, columnOrder: Z },
+    initialState: { pagination: { pageIndex: 0, pageSize: M } },
+    manualPagination: T,
+    columnResizeMode: J,
+    onColumnOrderChange: y,
+    getCoreRowModel: se(),
+    onColumnSizingChange: (n) => {
+      const e = typeof n == "function" ? n(s) : n, r = {};
+      Object.keys(e).forEach((t) => {
+        e[t] !== s[t] && (r[t] = e[t]);
+      });
+      const l = Object.keys(r)[0], a = i.findIndex((t) => g(t) === l);
+      if (a >= 0 && a < i.length - 1) {
+        const t = g(i[a + 1]);
+        e[t] = s[t] - (e[l] - s[l]);
+      } else if (a === i.length - 1) {
+        const t = g(i[a - 1]);
+        e[t] = s[t] - (e[l] - s[l]);
+      }
+      j(e), I && setTimeout(() => I(s, e));
+    },
+    onColumnSizingInfoChange: (n) => {
+      B(typeof n == "function" ? n(P) : n);
+    }
+  };
+  m.enableColumnResizing = !!K, _ && (m.getPaginationRowModel = me()), v && (m.getSortedRowModel = ce(), m.onSortingChange = Y), q && (m.getRowCanExpand = U, m.getExpandedRowModel = ge());
+  const c = fe({
+    ...m
+  }), k = () => {
+    c.nextPage(), b == null || b();
+  }, ee = () => {
+    c.previousPage(), h == null || h();
+  }, te = (n) => (e) => {
+    u == null || u(n, e);
+  }, {
+    pagination: { pageIndex: ne, pageSize: oe }
+  } = c.getState();
+  let H;
+  return _ && (H = {
+    limit: oe,
+    page: ne + 1,
+    limitOptions: $,
+    onNext: k,
+    onPrev: ee,
+    onLimitChange: c.setPageSize,
+    ...T ? { hasNextPage: z.length >= M } : { totalCount: z.length }
+  }), /* @__PURE__ */ x(
+    be,
+    {
+      paginationSettings: H,
+      dense: L,
+      isLoading: N,
+      hovered: !!u,
+      ...V,
+      ref: A,
+      children: [
+        /* @__PURE__ */ o(he, { children: c.getHeaderGroups().map((n) => /* @__PURE__ */ o(d, { children: n.headers.map((e) => {
+          var a;
+          const r = !!v && e.column.getCanSort(), l = e.getResizeHandler();
+          return /* @__PURE__ */ o(
+            Ce,
+            {
+              cellAlign: E,
+              sortable: r,
+              sortDirection: e.column.getIsSorted(),
+              onSort: () => {
+                R.current || e.column.toggleSorting();
+              },
+              onClick: () => {
+                C == null || C(e.column.columnDef);
+              },
+              style: {
+                cursor: r ? "pointer" : "default",
+                width: e.getSize()
+              },
+              children: /* @__PURE__ */ o(
+                ze,
+                {
+                  draggableColumn: G && ((a = e.column.columnDef.meta) == null ? void 0 : a.draggableColumn),
+                  table: c,
+                  onColumnOrderChange: Q,
+                  header: e,
+                  children: /* @__PURE__ */ x(le, { children: [
+                    /* @__PURE__ */ o("div", { children: e.isPlaceholder ? null : W ? D.cloneElement(W, { header: e }) : F(e.column.columnDef.header, e.getContext()) }),
+                    e.column.getCanResize() && /* @__PURE__ */ o(
+                      "div",
+                      {
+                        onMouseDown: (t) => {
+                          t.preventDefault(), t.stopPropagation(), R.current = !0, document.addEventListener(
+                            "mouseup",
+                            () => setTimeout(() => {
+                              R.current = !1;
+                            }),
+                            { once: !0 }
+                          ), l(t);
+                        },
+                        onTouchStart: e.getResizeHandler(),
+                        className: `smwb-rt-table--resizer ${e.column.getIsResizing() ? "smwb-rt-table--isResizing" : ""}`
+                      }
+                    )
+                  ] })
+                },
+                e.id
+              )
+            },
+            e.id
+          );
+        }) }, n.id)) }),
+        /* @__PURE__ */ o(Re, { children: N ? /* @__PURE__ */ o(d, { className: "smwb-table__loader__row", children: /* @__PURE__ */ o(S, { className: "smwb-table__loader", children: /* @__PURE__ */ o(pe, { variant: "circular", type: "indeterminate" }) }) }) : O ? /* @__PURE__ */ o(d, { className: "smwb-table__loader__row", children: /* @__PURE__ */ o(S, { className: "smwb-table__loader", children: /* @__PURE__ */ o(Se, { variant: "filled", type: "error", children: O }) }) }) : c.getRowModel().rows.map((n) => /* @__PURE__ */ x(D.Fragment, { children: [
+          /* @__PURE__ */ o(d, { onClick: te(n), children: n.getVisibleCells().map((e) => {
+            var r, l, a;
+            return /* @__PURE__ */ o(
+              S,
+              {
+                cellAlign: E,
+                label: (l = (r = e.column.columnDef.meta) == null ? void 0 : r.label) != null ? l : typeof e.column.columnDef.header == "string" ? e.column.columnDef.header : void 0,
+                ...(a = e.column.columnDef.meta) == null ? void 0 : a.cellProps,
+                children: F(e.column.columnDef.cell, e.getContext())
+              },
+              e.id
+            );
+          }) }, n.id),
+          n.getIsExpanded() && w && /* @__PURE__ */ o(d, { children: /* @__PURE__ */ o(S, { colSpan: n.getVisibleCells().length, children: w({ row: n }) }) }, `${n.id}_expand`)
+        ] }, n.id)) })
+      ]
+    }
+  );
+};
+export {
+  He as TableWrapper,
+  He as default
+};
+//# sourceMappingURL=table.js.map

package/dist/connects/rt/table/table.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table.js","sources":["../../../../src/connects/rt/table/table.tsx"],"sourcesContent":["import React, { TdHTMLAttributes, useState, useEffect, useRef } from \"react\";\nimport {\n  flexRender,\n  getCoreRowModel,\n  useReactTable,\n  ColumnDef,\n  getPaginationRowModel,\n  getExpandedRowModel,\n  TableOptions,\n  SortingState,\n  getSortedRowModel,\n  RowData,\n  Row,\n  ColumnResizeMode,\n  ColumnSizingState,\n  ColumnSizingInfoState,\n  ColumnOrderState,\n} from \"@tanstack/react-table\";\n\nimport { getColumnName, getDefaultColumnSizingState, columnSizingStateReducer } from \"./utils\";\n\ndeclare module \"@tanstack/table-core\" {\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  interface ColumnMeta<TData extends RowData, TValue> {\n    cellProps?: TdHTMLAttributes<HTMLTableCellElement>;\n    draggableColumn?: boolean;\n    /** The column's name on each cell when rows stack as cards (`stackBelow`); a string `header` is used by default. */\n    label?: string;\n  }\n}\n\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeadCell,\n  TableRow,\n  TableProps as SMWBTableProps,\n} from \"../../../components/dataDisplay/table\";\nimport { TablePaginationProps } from \"../../../components/dataDisplay/table\";\nimport ProgressIndicator from \"../../../components/feedBack/progressIndicator/progressIndicator\";\nimport Message from \"../../../components/feedBack/message/message\";\nimport { DraggableColumnHeaderWrapper } from \"./draggableHeader\";\n\nexport type TableProps<TData extends RowData, TValue = unknown> = SMWBTableProps & {\n  withPagination?: boolean;\n  isInfinite?: boolean;\n  dense?: boolean;\n  limit?: number;\n  limitOptions?: number[];\n  sortable?: boolean;\n  expandable?: boolean;\n  draggableColumns?: boolean;\n  enableColumnResizing?: boolean;\n  onColumnSizingChange?: (oldValue: ColumnSizingState, newValue: ColumnSizingState) => void;\n  onColumnOrderChange?: (oldValue: ColumnOrderState, newValue: ColumnOrderState) => void;\n  getRowCanExpand?: (row: Row<TData>) => boolean;\n  renderSubComponent?: (props: { row: Row<TData> }) => React.ReactElement;\n  cellAlign?: \"left\" | \"right\" | \"center\";\n  isLoading?: boolean;\n  onNextPage?: () => void;\n  onPrevPage?: () => void;\n  error?: string;\n  onHeadCellClick?: (colDef?: ColumnDef<TData, TValue>) => void;\n  headerCellInnerRenderer?: React.ReactElement;\n  onBodyRowClick?: (row: Row<TData>, event: React.MouseEvent<HTMLTableRowElement>) => void;\n  data: TData[];\n  columns: ColumnDef<TData, TValue>[];\n  columnResizeMode?: ColumnResizeMode;\n};\n\nexport const TableWrapper = <TData extends RowData, TValue = unknown>({\n  data,\n  columns,\n  withPagination,\n  isInfinite,\n  limit = 5,\n  limitOptions = [5, 10, 15],\n  dense,\n  sortable,\n  expandable,\n  draggableColumns,\n  columnResizeMode = \"onChange\",\n  enableColumnResizing,\n  onColumnSizingChange,\n  onColumnOrderChange,\n  getRowCanExpand,\n  renderSubComponent,\n  cellAlign,\n  isLoading = false,\n  onNextPage,\n  onPrevPage,\n  error,\n  onHeadCellClick,\n  headerCellInnerRenderer,\n  onBodyRowClick,\n  ...props\n}: TableProps<TData, TValue>) => {\n  const [sorting, setSorting] = useState<SortingState>([]);\n  const [columnOrder, setColumnOrder] = React.useState<ColumnOrderState>(\n    columns.map((column) => getColumnName(column))\n  );\n  const [tableRef, setTableRef] = useState<HTMLDivElement | null>(null);\n  const [columnSizing, setColumnSizing] = useState<ColumnSizingState>(getDefaultColumnSizingState(columns));\n  const [columnSizingInfo, setColumnSizingInfo] = useState<ColumnSizingInfoState>({\n    startOffset: null,\n    startSize: null,\n    deltaOffset: null,\n    deltaPercentage: null,\n    isResizingColumn: false,\n    columnSizingStart: [],\n  });\n  // TableHeadCell renders its children inside its sort control, so the column\n  // resizer sits there too, and the click that ends a press on it would sort.\n  // That click lands on the resizer or, once the column stops at its minimum\n  // width and the pointer moves on over the header, on the sort control itself\n  // (the nearest common ancestor of press and release). The flag is up from the\n  // press until the release has been handled; sorting skips clicks meanwhile.\n  const resizePressed = useRef(false);\n  useEffect(() => {\n    if (tableRef) {\n      const totalSize: number = tableRef?.offsetWidth || 0;\n      const columnWithSize = columns.filter((el) => el.size);\n      const totalSizeWithoutConst = totalSize - columns.reduce((sum, el) => sum + (el.size || 0), 0);\n      const columnCountWithoutConstSize = columns.length - columnWithSize.length;\n      const avgSize = columnCountWithoutConstSize ? totalSizeWithoutConst / columnCountWithoutConstSize : 10;\n      setColumnSizing(\n        columns\n          .map((el) => ({\n            size: el.size ? el.size : avgSize,\n            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n            name: getColumnName(el),\n          }))\n          .reduce(columnSizingStateReducer, {})\n      );\n      setColumnOrder(columns.map((column) => getColumnName(column)));\n    }\n  }, [tableRef, columns]);\n\n  const options: TableOptions<TData> = {\n    data,\n    columns,\n    state: { sorting, columnSizing, columnSizingInfo, columnOrder },\n    initialState: { pagination: { pageIndex: 0, pageSize: limit } },\n    manualPagination: isInfinite,\n    columnResizeMode,\n    onColumnOrderChange: setColumnOrder,\n    getCoreRowModel: getCoreRowModel(),\n    onColumnSizingChange: (updater) => {\n      const newValue = typeof updater === \"function\" ? updater(columnSizing) : updater;\n      const diff: ColumnSizingState = {};\n      Object.keys(newValue).forEach((newValueColumn) => {\n        if (newValue[newValueColumn] !== columnSizing[newValueColumn]) {\n          diff[newValueColumn] = newValue[newValueColumn];\n        }\n      });\n      // Алгоритм не учитывает, что колонки могут меняться местами и что может измениться сразу несколько колонок\n      // двигаем соседнюю колонку на столько же, на сколько изменили ширину текущей\n      const diffColumnName = Object.keys(diff)[0];\n      const columnIndex = columns.findIndex((el) => getColumnName(el) === diffColumnName);\n      if (columnIndex >= 0 && columnIndex < columns.length - 1) {\n        const rightColumnName = getColumnName(columns[columnIndex + 1]);\n        newValue[rightColumnName] =\n          columnSizing[rightColumnName] - (newValue[diffColumnName] - columnSizing[diffColumnName]);\n      } else if (columnIndex === columns.length - 1) {\n        const leftColumnName = getColumnName(columns[columnIndex - 1]);\n        newValue[leftColumnName] =\n          columnSizing[leftColumnName] - (newValue[diffColumnName] - columnSizing[diffColumnName]);\n      }\n      setColumnSizing(newValue);\n      if (onColumnSizingChange) {\n        setTimeout(() => onColumnSizingChange(columnSizing, newValue));\n      }\n    },\n    onColumnSizingInfoChange: (updater) => {\n      setColumnSizingInfo(typeof updater === \"function\" ? updater(columnSizingInfo) : updater);\n    },\n  };\n\n  options.enableColumnResizing = !!enableColumnResizing;\n\n  if (withPagination) {\n    options.getPaginationRowModel = getPaginationRowModel();\n  }\n  if (sortable) {\n    options.getSortedRowModel = getSortedRowModel();\n    options.onSortingChange = setSorting;\n  }\n  if (expandable) {\n    options.getRowCanExpand = getRowCanExpand;\n    options.getExpandedRowModel = getExpandedRowModel();\n  }\n\n  const table = useReactTable({\n    ...options,\n  });\n\n  const handleNextPage = () => {\n    table.nextPage();\n    onNextPage?.();\n  };\n\n  const handlePrevPage = () => {\n    table.previousPage();\n    onPrevPage?.();\n  };\n\n  const handleBodyRowClick = (row: Row<TData>) => (event: React.MouseEvent<HTMLTableRowElement>) => {\n    onBodyRowClick?.(row, event);\n  };\n\n  const {\n    pagination: { pageIndex: page, pageSize },\n  } = table.getState();\n\n  let paginationSettings: TablePaginationProps | undefined = undefined;\n  if (withPagination) {\n    paginationSettings = {\n      limit: pageSize,\n      page: page + 1,\n      limitOptions,\n      onNext: handleNextPage,\n      onPrev: handlePrevPage,\n      onLimitChange: table.setPageSize,\n      ...(isInfinite ? { hasNextPage: data.length >= limit } : { totalCount: data.length }),\n    };\n  }\n\n  return (\n    <Table\n      paginationSettings={paginationSettings}\n      dense={dense}\n      isLoading={isLoading}\n      hovered={!!onBodyRowClick}\n      {...props}\n      ref={setTableRef}\n    >\n      <TableHead>\n        {table.getHeaderGroups().map((headerGroup) => (\n          <TableRow key={headerGroup.id}>\n            {headerGroup.headers.map((header) => {\n              const canSort = !!sortable && header.column.getCanSort();\n              const resizeHandler = header.getResizeHandler();\n              return (\n                <TableHeadCell\n                  key={header.id}\n                  cellAlign={cellAlign}\n                  sortable={canSort}\n                  sortDirection={header.column.getIsSorted()}\n                  onSort={() => {\n                    if (!resizePressed.current) header.column.toggleSorting();\n                  }}\n                  onClick={() => {\n                    onHeadCellClick?.(header.column.columnDef);\n                  }}\n                  style={{\n                    cursor: canSort ? \"pointer\" : \"default\",\n                    width: header.getSize(),\n                  }}\n                >\n                  <DraggableColumnHeaderWrapper<TData>\n                    key={header.id}\n                    draggableColumn={draggableColumns && header.column.columnDef.meta?.draggableColumn}\n                    table={table}\n                    onColumnOrderChange={onColumnOrderChange}\n                    // https://github.com/TanStack/table/issues/4241\n                    header={header}\n                  >\n                    <>\n                      <div>\n                        {header.isPlaceholder\n                          ? null\n                          : headerCellInnerRenderer\n                            ? React.cloneElement(headerCellInnerRenderer, { header })\n                            : flexRender(header.column.columnDef.header, header.getContext())}\n                      </div>\n                      {header.column.getCanResize() && (\n                        <div\n                          {...{\n                            onMouseDown: (e) => {\n                              e.preventDefault();\n                              e.stopPropagation();\n                              resizePressed.current = true;\n                              // Cleared a task later: the click, if any, follows the mouseup in the same task.\n                              document.addEventListener(\n                                \"mouseup\",\n                                () =>\n                                  setTimeout(() => {\n                                    resizePressed.current = false;\n                                  }),\n                                { once: true }\n                              );\n                              resizeHandler(e);\n                            },\n                            onTouchStart: header.getResizeHandler(),\n                            className: `smwb-rt-table--resizer ${\n                              header.column.getIsResizing() ? \"smwb-rt-table--isResizing\" : \"\"\n                            }`,\n                          }}\n                        />\n                      )}\n                    </>\n                  </DraggableColumnHeaderWrapper>\n                </TableHeadCell>\n              );\n            })}\n          </TableRow>\n        ))}\n      </TableHead>\n      <TableBody>\n        {isLoading ? (\n          <TableRow className=\"smwb-table__loader__row\">\n            <TableCell className=\"smwb-table__loader\">\n              <ProgressIndicator variant=\"circular\" type=\"indeterminate\" />\n            </TableCell>\n          </TableRow>\n        ) : error ? (\n          <TableRow className=\"smwb-table__loader__row\">\n            <TableCell className=\"smwb-table__loader\">\n              <Message variant=\"filled\" type=\"error\">\n                {error}\n              </Message>\n            </TableCell>\n          </TableRow>\n        ) : (\n          table.getRowModel().rows.map((row) => (\n            <React.Fragment key={row.id}>\n              <TableRow key={row.id} onClick={handleBodyRowClick(row)}>\n                {row.getVisibleCells().map((cell) => {\n                  return (\n                    <TableCell\n                      key={cell.id}\n                      cellAlign={cellAlign}\n                      label={\n                        cell.column.columnDef.meta?.label ??\n                        (typeof cell.column.columnDef.header === \"string\" ? cell.column.columnDef.header : undefined)\n                      }\n                      {...cell.column.columnDef.meta?.cellProps}\n                    >\n                      {flexRender(cell.column.columnDef.cell, cell.getContext())}\n                    </TableCell>\n                  );\n                })}\n              </TableRow>\n              {row.getIsExpanded() && renderSubComponent && (\n                <TableRow key={`${row.id}_expand`}>\n                  <TableCell colSpan={row.getVisibleCells().length}>{renderSubComponent({ row })}</TableCell>\n                </TableRow>\n              )}\n            </React.Fragment>\n          ))\n        )}\n      </TableBody>\n    </Table>\n  );\n};\n\nexport default TableWrapper;\n"],"names":["TableWrapper","data","columns","withPagination","isInfinite","limit","limitOptions","dense","sortable","expandable","draggableColumns","columnResizeMode","enableColumnResizing","onColumnSizingChange","onColumnOrderChange","getRowCanExpand","renderSubComponent","cellAlign","isLoading","onNextPage","onPrevPage","error","onHeadCellClick","headerCellInnerRenderer","onBodyRowClick","props","sorting","setSorting","useState","columnOrder","setColumnOrder","React","column","getColumnName","tableRef","setTableRef","columnSizing","setColumnSizing","getDefaultColumnSizingState","columnSizingInfo","setColumnSizingInfo","resizePressed","useRef","useEffect","totalSize","columnWithSize","el","totalSizeWithoutConst","sum","columnCountWithoutConstSize","avgSize","columnSizingStateReducer","options","getCoreRowModel","updater","newValue","diff","newValueColumn","diffColumnName","columnIndex","rightColumnName","leftColumnName","getPaginationRowModel","getSortedRowModel","getExpandedRowModel","table","useReactTable","handleNextPage","handlePrevPage","handleBodyRowClick","row","event","page","pageSize","paginationSettings","jsxs","Table","jsx","TableHead","headerGroup","TableRow","header","canSort","resizeHandler","TableHeadCell","DraggableColumnHeaderWrapper","_a","Fragment","flexRender","e","TableBody","TableCell","ProgressIndicator","Message","cell","_b","_c"],"mappings":"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"}

package/dist/connects/rt/table/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sources":["../../../../src/connects/rt/table/utils.ts"],"sourcesContent":["import { AccessorKeyColumnDef, ColumnDef, ColumnSizingState } from \"@tanstack/react-table\";\n\nexport function columnSizingStateReducer(\n  sum: ColumnSizingState,\n  el: { name: string; size?: number }\n): ColumnSizingState {\n  sum[el.name] = el.size || 0;\n  return sum;\n}\n\nexport function getDefaultColumnSizingState<T, K>(columnDef: ColumnDef<T, K>[]): ColumnSizingState {\n  return columnDef\n    .map((el) => ({\n      size: el.size,\n      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n      name: typeof el.header === \"string\" ? el.header : el.id!,\n    }))\n    .filter((el) => !!el.size)\n    .reduce<ColumnSizingState>(columnSizingStateReducer, {});\n}\n\nexport function getColumnName<T, K>(column: ColumnDef<T, K>): string {\n  return (\n    (column as AccessorKeyColumnDef<T>).accessorKey\n      ? (column as AccessorKeyColumnDef<T>).accessorKey\n      : typeof column.header === \"string\"\n        ? column.header\n        : // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n          column.id!\n  ).toString();\n}\n"],"names":["columnSizingStateReducer","sum","el","getDefaultColumnSizingState","columnDef","getColumnName","column"],"mappings":"AAEO,SAASA,EACdC,GACAC,GACmB;AACnB,SAAAD,EAAIC,EAAG,IAAI,IAAIA,EAAG,QAAQ,GACnBD;AACT;AAEO,SAASE,EAAkCC,GAAiD;AACjG,SAAOA,EACJ,IAAI,CAACF,OAAQ;AAAA,IACZ,MAAMA,EAAG;AAAA;AAAA,IAET,MAAM,OAAOA,EAAG,UAAW,WAAWA,EAAG,SAASA,EAAG;AAAA,EAAA,EACrD,EACD,OAAO,CAACA,MAAO,CAAC,CAACA,EAAG,IAAI,EACxB,OAA0BF,GAA0B,EAAE;AAC3D;AAEO,SAASK,EAAoBC,GAAiC;AACnE,UACGA,EAAmC,cAC/BA,EAAmC,cACpC,OAAOA,EAAO,UAAW,WACvBA,EAAO;AAAA;AAAA,IAEPA,EAAO;AAAA,KACb,SAAA;AACJ;"}

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

@@ -1,61 +1,83 @@
-import { jsxs as _, jsx as r } from "react/jsx-runtime";
-import { forwardRef as z, useState as H } from "react";
-import b from "clsx";
-import R from "../../base/animateHeight/animateHeight.js";
-import { Icon as S } from "../../base/icon/icon.js";
-import { useId as q } from "../../../hooks/useId.js";
-const L = z(function({
-  className: u,
-  title: w,
-  isOpenByDefault: I = !1,
-  open: n,
-  disabled: a,
-  icon: e,
-  id: x,
-  children: t,
-  startAdornment: s,
-  noIcon: N,
-  onToggleClick: c,
+import { jsxs as d, jsx as e } from "react/jsx-runtime";
+import { forwardRef as J, useState as y } from "react";
+import O from "clsx";
+import K from "../../base/animateHeight/animateHeight.js";
+import { Icon as L } from "../../base/icon/icon.js";
+import { useId as M } from "../../../hooks/useId.js";
+const A = J(function({
+  className: $,
+  title: j,
+  subtitle: l,
+  variant: B = "filled",
+  isOpenByDefault: H = !1,
+  open: m,
+  disabled: s,
+  icon: a,
+  id: z,
+  children: c,
+  startAdornment: n,
+  endAdornment: p,
+  noIcon: P,
+  lazy: R,
+  unmountOnExit: _,
+  onToggleClick: r,
   onChange: i
-}, h) {
-  const d = n !== void 0, [v, O] = H(I), o = d ? !!n : v, m = q(x), p = `${m}-content`, f = `${m}-header`, y = b("smwb-accordion__arrow-icon", { "smwb-accordion__arrow-icon_opened": o }), j = ($) => {
-    if (a)
+}, S) {
+  const f = m !== void 0, [q, D] = y(H), o = f ? !!m : q, b = M(z), w = `${b}-content`, u = `${b}-header`, h = !!(R || _), [N, I] = y(o);
+  o && !N && I(!0);
+  const E = (t) => {
+    t === 0 && _ && !o && I(!1);
+  }, v = h ? c !== void 0 : !!c, F = O("smwb-accordion__arrow-icon", { "smwb-accordion__arrow-icon_opened": o }), G = (t) => {
+    if (s)
       return;
-    const l = !o;
-    d || O(l), i == null || i(l), c == null || c($);
+    const x = !o;
+    f || D(x), i == null || i(x), r == null || r(t);
   };
-  return /* @__PURE__ */ _("div", { ref: h, className: b("smwb-accordion", { "smwb-disabled": a }, u), "data-testid": "accordion", children: [
-    /* @__PURE__ */ _(
-      "button",
-      {
-        id: f,
-        className: "smwb-accordion__header",
-        onClick: j,
-        type: "button",
-        disabled: a,
-        "aria-expanded": o,
-        "aria-controls": t ? p : void 0,
-        children: [
-          s == null ? void 0 : s(o),
-          /* @__PURE__ */ r("span", { className: "smwb-accordion__title", children: w }),
-          !N && (e != null ? e : /* @__PURE__ */ r(S, { className: y, name: "expand_more", size: 24 }))
-        ]
-      }
-    ),
-    t && /* @__PURE__ */ r("div", { id: p, role: "region", "aria-labelledby": f, children: /* @__PURE__ */ r(
-      R,
-      {
-        height: o ? "auto" : 0,
-        animateOpacity: !0,
-        duration: 300,
-        className: "smwb-accordion__content",
-        children: t
-      }
-    ) })
-  ] });
+  return /* @__PURE__ */ d(
+    "div",
+    {
+      ref: S,
+      className: O("smwb-accordion", `smwb-accordion_${B}`, { "smwb-disabled": s }, $),
+      "data-testid": "accordion",
+      children: [
+        /* @__PURE__ */ d(
+          "button",
+          {
+            id: u,
+            className: "smwb-accordion__header",
+            onClick: G,
+            type: "button",
+            disabled: s,
+            "aria-expanded": o,
+            "aria-controls": v ? w : void 0,
+            children: [
+              n == null ? void 0 : n(o),
+              /* @__PURE__ */ d("span", { className: "smwb-accordion__heading", children: [
+                /* @__PURE__ */ e("span", { className: "smwb-accordion__title", children: j }),
+                l ? /* @__PURE__ */ e("span", { className: "smwb-accordion__subtitle", children: l }) : null
+              ] }),
+              p ? /* @__PURE__ */ e("span", { className: "smwb-accordion__end", children: p(o) }) : null,
+              !P && (a != null ? a : /* @__PURE__ */ e(L, { className: F, name: "expand_more", size: 24 }))
+            ]
+          }
+        ),
+        v && /* @__PURE__ */ e("div", { id: w, role: "region", "aria-labelledby": u, children: /* @__PURE__ */ e(
+          K,
+          {
+            height: o ? "auto" : 0,
+            animateOpacity: !0,
+            duration: 300,
+            className: "smwb-accordion__content",
+            onHeightAnimationEnd: E,
+            children: !h || N ? c : null
+          }
+        ) })
+      ]
+    }
+  );
 });
 export {
-  L as Accordion,
-  L as default
+  A as Accordion,
+  A as default
 };
 //# sourceMappingURL=accordion.js.map

package/dist/headless/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":";;;;;;AAyBO,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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"}