@vuu-ui/vuu-ui-controls 0.13.13 → 0.13.15

package/esm/table-search/SearchCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchCell.js","sources":["../../src/table-search/SearchCell.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { TableCellRendererProps } from \"@vuu-ui/vuu-table-types\";\nimport { useHighlighting } from \"@vuu-ui/vuu-table\";\n\nimport searchCellCss from \"./SearchCell.css\";\n\nconst classBase = \"vuuSearchCell\";\n\nexport const SearchCell = ({\n  column,\n  columnMap,\n  row,\n  searchPattern = \"\",\n}: TableCellRendererProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-search-cell\",\n    css: searchCellCss,\n    window: targetWindow,\n  });\n\n  //TODO what about click handling\n\n  const key = columnMap[column.name];\n  const valueWithHighlighting = useHighlighting(\n    column.valueFormatter(row[key]),\n    searchPattern,\n  );\n\n  return (\n    <div className={classBase} tabIndex={-1}>\n      <span data-icon=\"draggable\" />\n      {valueWithHighlighting}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;AAOA,MAAM,SAAY,GAAA,eAAA;AAEX,MAAM,aAAa,CAAC;AAAA,EACzB,MAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAA;AAAA,EACA,aAAgB,GAAA;AAClB,CAA8B,KAAA;AAC5B,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,iBAAA;AAAA,IACR,GAAK,EAAA,aAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAID,EAAM,MAAA,GAAA,GAAM,SAAU,CAAA,MAAA,CAAO,IAAI,CAAA;AACjC,EAAA,MAAM,qBAAwB,GAAA,eAAA;AAAA,IAC5B,MAAO,CAAA,cAAA,CAAe,GAAI,CAAA,GAAG,CAAC,CAAA;AAAA,IAC9B;AAAA,GACF;AAEA,EAAA,uBACG,IAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,SAAA,EAAW,UAAU,CACnC,CAAA,EAAA,QAAA,EAAA;AAAA,oBAAC,GAAA,CAAA,MAAA,EAAA,EAAK,aAAU,WAAY,EAAA,CAAA;AAAA,IAC3B;AAAA,GACH,EAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"SearchCell.js","sources":["../../../../packages/vuu-ui-controls/src/table-search/SearchCell.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { TableCellRendererProps } from \"@vuu-ui/vuu-table-types\";\nimport { useHighlighting } from \"@vuu-ui/vuu-table\";\n\nimport searchCellCss from \"./SearchCell.css\";\n\nconst classBase = \"vuuSearchCell\";\n\nexport const SearchCell = ({\n  column,\n  columnMap,\n  row,\n  searchPattern = \"\",\n}: TableCellRendererProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-search-cell\",\n    css: searchCellCss,\n    window: targetWindow,\n  });\n\n  //TODO what about click handling\n\n  const key = columnMap[column.name];\n  const valueWithHighlighting = useHighlighting(\n    column.valueFormatter(row[key]),\n    searchPattern,\n  );\n\n  return (\n    <div className={classBase} tabIndex={-1}>\n      <span data-icon=\"draggable\" />\n      {valueWithHighlighting}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;AAOA,MAAM,SAAY,GAAA,eAAA;AAEX,MAAM,aAAa,CAAC;AAAA,EACzB,MAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAA;AAAA,EACA,aAAgB,GAAA;AAClB,CAA8B,KAAA;AAC5B,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,iBAAA;AAAA,IACR,GAAK,EAAA,aAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAID,EAAM,MAAA,GAAA,GAAM,SAAU,CAAA,MAAA,CAAO,IAAI,CAAA;AACjC,EAAA,MAAM,qBAAwB,GAAA,eAAA;AAAA,IAC5B,MAAO,CAAA,cAAA,CAAe,GAAI,CAAA,GAAG,CAAC,CAAA;AAAA,IAC9B;AAAA,GACF;AAEA,EAAA,uBACG,IAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,SAAA,EAAW,UAAU,CACnC,CAAA,EAAA,QAAA,EAAA;AAAA,oBAAC,GAAA,CAAA,MAAA,EAAA,EAAK,aAAU,WAAY,EAAA,CAAA;AAAA,IAC3B;AAAA,GACH,EAAA,CAAA;AAEJ;;;;"}

package/esm/table-search/TableSearch.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableSearch.js","sources":["../../src/table-search/TableSearch.tsx"],"sourcesContent":["import {\n  Table,\n  TableProps,\n  useControlledTableNavigation,\n} from \"@vuu-ui/vuu-table\";\nimport { registerComponent } from \"@vuu-ui/vuu-utils\";\nimport { Input } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport { HTMLAttributes, RefCallback, useCallback, useMemo } from \"react\";\nimport { SearchCell } from \"./SearchCell\";\nimport { useTableSearch } from \"./useTableSearch\";\n\nimport instrumentSearchCss from \"./TableSearch.css\";\n\nconst classBase = \"vuuTableSearch\";\n\nconst defaultConfig = {\n  rowSeparators: true,\n};\n\nexport interface TableSearchProps extends HTMLAttributes<HTMLDivElement> {\n  TableProps: TableProps;\n  autoFocus?: boolean;\n  placeHolder?: string;\n  searchColumns: string[];\n}\n\nconst searchIcon = <span data-icon=\"search\" />;\n\nexport const TableSearch = ({\n  TableProps: { dataSource: dataSourceProp, ...TableProps },\n  autoFocus = false,\n  className,\n  placeHolder,\n  searchColumns,\n  ...htmlAttributes\n}: TableSearchProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-table-search\",\n    css: instrumentSearchCss,\n    window: targetWindow,\n  });\n\n  const config = useMemo(\n    () => ({\n      ...defaultConfig,\n      ...TableProps?.config,\n    }),\n\n    [TableProps?.config],\n  );\n\n  const { dataSource, onChange, searchState } = useTableSearch({\n    dataSource: dataSourceProp,\n    searchColumns,\n  });\n\n  const { highlightedIndexRef, onHighlight, onKeyDown, tableRef } =\n    useControlledTableNavigation(-1, dataSource?.size ?? 0);\n\n  const searchCallbackRef = useCallback<RefCallback<HTMLElement>>((el) => {\n    setTimeout(() => {\n      el?.querySelector(\"input\")?.focus();\n    }, 100);\n  }, []);\n\n  return (\n    <div {...htmlAttributes} className={cx(classBase, className)}>\n      <div className={`${classBase}-inputField`}>\n        <Input\n          inputProps={{ onKeyDown }}\n          endAdornment={searchIcon}\n          placeholder={placeHolder}\n          ref={autoFocus ? searchCallbackRef : null}\n          value={searchState.searchText}\n          onChange={onChange}\n        />\n      </div>\n\n      {dataSource ? (\n        <Table\n          disableFocus\n          id=\"instrument-search\"\n          rowHeight={25}\n          highlightedIndex={highlightedIndexRef.current}\n          renderBufferSize={100}\n          {...TableProps}\n          className={`${classBase}-list`}\n          config={config}\n          dataSource={dataSource}\n          navigationStyle=\"row\"\n          onHighlight={onHighlight}\n          ref={tableRef}\n          searchPattern={searchState.searchText}\n          showColumnHeaders={false}\n        />\n      ) : null}\n    </div>\n  );\n};\n\nregisterComponent(\"search-cell\", SearchCell, \"cell-renderer\", {\n  serverDataType: \"private\",\n});\n"],"names":["TableProps"],"mappings":"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"}
+{"version":3,"file":"TableSearch.js","sources":["../../../../packages/vuu-ui-controls/src/table-search/TableSearch.tsx"],"sourcesContent":["import {\n  Table,\n  TableProps,\n  useControlledTableNavigation,\n} from \"@vuu-ui/vuu-table\";\nimport { registerComponent } from \"@vuu-ui/vuu-utils\";\nimport { Input } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport { HTMLAttributes, RefCallback, useCallback, useMemo } from \"react\";\nimport { SearchCell } from \"./SearchCell\";\nimport { useTableSearch } from \"./useTableSearch\";\n\nimport instrumentSearchCss from \"./TableSearch.css\";\n\nconst classBase = \"vuuTableSearch\";\n\nconst defaultConfig = {\n  rowSeparators: true,\n};\n\nexport interface TableSearchProps extends HTMLAttributes<HTMLDivElement> {\n  TableProps: TableProps;\n  autoFocus?: boolean;\n  placeHolder?: string;\n  searchColumns: string[];\n}\n\nconst searchIcon = <span data-icon=\"search\" />;\n\nexport const TableSearch = ({\n  TableProps: { dataSource: dataSourceProp, ...TableProps },\n  autoFocus = false,\n  className,\n  placeHolder,\n  searchColumns,\n  ...htmlAttributes\n}: TableSearchProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-table-search\",\n    css: instrumentSearchCss,\n    window: targetWindow,\n  });\n\n  const config = useMemo(\n    () => ({\n      ...defaultConfig,\n      ...TableProps?.config,\n    }),\n\n    [TableProps?.config],\n  );\n\n  const { dataSource, onChange, searchState } = useTableSearch({\n    dataSource: dataSourceProp,\n    searchColumns,\n  });\n\n  const { highlightedIndexRef, onHighlight, onKeyDown, tableRef } =\n    useControlledTableNavigation(-1, dataSource?.size ?? 0);\n\n  const searchCallbackRef = useCallback<RefCallback<HTMLElement>>((el) => {\n    setTimeout(() => {\n      el?.querySelector(\"input\")?.focus();\n    }, 100);\n  }, []);\n\n  return (\n    <div {...htmlAttributes} className={cx(classBase, className)}>\n      <div className={`${classBase}-inputField`}>\n        <Input\n          inputProps={{ onKeyDown }}\n          endAdornment={searchIcon}\n          placeholder={placeHolder}\n          ref={autoFocus ? searchCallbackRef : null}\n          value={searchState.searchText}\n          onChange={onChange}\n        />\n      </div>\n\n      {dataSource ? (\n        <Table\n          disableFocus\n          id=\"instrument-search\"\n          rowHeight={25}\n          highlightedIndex={highlightedIndexRef.current}\n          renderBufferSize={100}\n          {...TableProps}\n          className={`${classBase}-list`}\n          config={config}\n          dataSource={dataSource}\n          navigationStyle=\"row\"\n          onHighlight={onHighlight}\n          ref={tableRef}\n          searchPattern={searchState.searchText}\n          showColumnHeaders={false}\n        />\n      ) : null}\n    </div>\n  );\n};\n\nregisterComponent(\"search-cell\", SearchCell, \"cell-renderer\", {\n  serverDataType: \"private\",\n});\n"],"names":["TableProps"],"mappings":"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"}

package/esm/table-search/useTableSearch.js.map

@@ -1 +1 @@
-{"version":3,"file":"useTableSearch.js","sources":["../../src/table-search/useTableSearch.ts"],"sourcesContent":["import { FormEventHandler, useCallback, useMemo, useState } from \"react\";\nimport { TableSearchProps } from \"./TableSearch\";\nimport { DataSource } from \"@vuu-ui/vuu-data-types\";\n\nexport interface TableSearchHookProps\n  extends Pick<TableSearchProps, \"searchColumns\"> {\n  dataSource: DataSource;\n  label?: string;\n}\n\nexport const useTableSearch = ({\n  dataSource,\n  searchColumns,\n}: TableSearchHookProps) => {\n  const [searchState, setSearchState] = useState<{\n    searchText: string;\n    filter: string;\n  }>({ searchText: \"\", filter: \"\" });\n\n  const baseFilterPattern = useMemo(\n    // TODO make this contains once server supports it\n    () =>\n      searchColumns.map((col) => `${col} contains \"__VALUE__\"`).join(\" or \"),\n    [searchColumns],\n  );\n\n  const handleChange = useCallback<FormEventHandler>(\n    (evt) => {\n      const { value } = evt.target as HTMLInputElement;\n      const filter = baseFilterPattern.replaceAll(\"__VALUE__\", value);\n      setSearchState({\n        searchText: value,\n        filter,\n      });\n      if (dataSource) {\n        dataSource.filter = {\n          filter,\n        };\n      }\n    },\n    [baseFilterPattern, dataSource],\n  );\n\n  return {\n    dataSource,\n    onChange: handleChange,\n    searchState,\n  };\n};\n"],"names":[],"mappings":";;AAUO,MAAM,iBAAiB,CAAC;AAAA,EAC7B,UAAA;AAAA,EACA;AACF,CAA4B,KAAA;AAC1B,EAAM,MAAA,CAAC,WAAa,EAAA,cAAc,CAAI,GAAA,QAAA,CAGnC,EAAE,UAAY,EAAA,EAAA,EAAI,MAAQ,EAAA,EAAA,EAAI,CAAA;AAEjC,EAAA,MAAM,iBAAoB,GAAA,OAAA;AAAA;AAAA,IAExB,MACE,aAAc,CAAA,GAAA,CAAI,CAAC,GAAA,KAAQ,GAAG,GAAG,CAAA,qBAAA,CAAuB,CAAE,CAAA,IAAA,CAAK,MAAM,CAAA;AAAA,IACvE,CAAC,aAAa;AAAA,GAChB;AAEA,EAAA,MAAM,YAAe,GAAA,WAAA;AAAA,IACnB,CAAC,GAAQ,KAAA;AACP,MAAM,MAAA,EAAE,KAAM,EAAA,GAAI,GAAI,CAAA,MAAA;AACtB,MAAA,MAAM,MAAS,GAAA,iBAAA,CAAkB,UAAW,CAAA,WAAA,EAAa,KAAK,CAAA;AAC9D,MAAe,cAAA,CAAA;AAAA,QACb,UAAY,EAAA,KAAA;AAAA,QACZ;AAAA,OACD,CAAA;AACD,MAAA,IAAI,UAAY,EAAA;AACd,QAAA,UAAA,CAAW,MAAS,GAAA;AAAA,UAClB;AAAA,SACF;AAAA;AACF,KACF;AAAA,IACA,CAAC,mBAAmB,UAAU;AAAA,GAChC;AAEA,EAAO,OAAA;AAAA,IACL,UAAA;AAAA,IACA,QAAU,EAAA,YAAA;AAAA,IACV;AAAA,GACF;AACF;;;;"}
+{"version":3,"file":"useTableSearch.js","sources":["../../../../packages/vuu-ui-controls/src/table-search/useTableSearch.ts"],"sourcesContent":["import { FormEventHandler, useCallback, useMemo, useState } from \"react\";\nimport { TableSearchProps } from \"./TableSearch\";\nimport { DataSource } from \"@vuu-ui/vuu-data-types\";\n\nexport interface TableSearchHookProps\n  extends Pick<TableSearchProps, \"searchColumns\"> {\n  dataSource: DataSource;\n  label?: string;\n}\n\nexport const useTableSearch = ({\n  dataSource,\n  searchColumns,\n}: TableSearchHookProps) => {\n  const [searchState, setSearchState] = useState<{\n    searchText: string;\n    filter: string;\n  }>({ searchText: \"\", filter: \"\" });\n\n  const baseFilterPattern = useMemo(\n    // TODO make this contains once server supports it\n    () =>\n      searchColumns.map((col) => `${col} contains \"__VALUE__\"`).join(\" or \"),\n    [searchColumns],\n  );\n\n  const handleChange = useCallback<FormEventHandler>(\n    (evt) => {\n      const { value } = evt.target as HTMLInputElement;\n      const filter = baseFilterPattern.replaceAll(\"__VALUE__\", value);\n      setSearchState({\n        searchText: value,\n        filter,\n      });\n      if (dataSource) {\n        dataSource.filter = {\n          filter,\n        };\n      }\n    },\n    [baseFilterPattern, dataSource],\n  );\n\n  return {\n    dataSource,\n    onChange: handleChange,\n    searchState,\n  };\n};\n"],"names":[],"mappings":";;AAUO,MAAM,iBAAiB,CAAC;AAAA,EAC7B,UAAA;AAAA,EACA;AACF,CAA4B,KAAA;AAC1B,EAAM,MAAA,CAAC,WAAa,EAAA,cAAc,CAAI,GAAA,QAAA,CAGnC,EAAE,UAAY,EAAA,EAAA,EAAI,MAAQ,EAAA,EAAA,EAAI,CAAA;AAEjC,EAAA,MAAM,iBAAoB,GAAA,OAAA;AAAA;AAAA,IAExB,MACE,aAAc,CAAA,GAAA,CAAI,CAAC,GAAA,KAAQ,GAAG,GAAG,CAAA,qBAAA,CAAuB,CAAE,CAAA,IAAA,CAAK,MAAM,CAAA;AAAA,IACvE,CAAC,aAAa;AAAA,GAChB;AAEA,EAAA,MAAM,YAAe,GAAA,WAAA;AAAA,IACnB,CAAC,GAAQ,KAAA;AACP,MAAM,MAAA,EAAE,KAAM,EAAA,GAAI,GAAI,CAAA,MAAA;AACtB,MAAA,MAAM,MAAS,GAAA,iBAAA,CAAkB,UAAW,CAAA,WAAA,EAAa,KAAK,CAAA;AAC9D,MAAe,cAAA,CAAA;AAAA,QACb,UAAY,EAAA,KAAA;AAAA,QACZ;AAAA,OACD,CAAA;AACD,MAAA,IAAI,UAAY,EAAA;AACd,QAAA,UAAA,CAAW,MAAS,GAAA;AAAA,UAClB;AAAA,SACF;AAAA;AACF,KACF;AAAA,IACA,CAAC,mBAAmB,UAAU;AAAA,GAChC;AAEA,EAAO,OAAA;AAAA,IACL,UAAA;AAAA,IACA,QAAU,EAAA,YAAA;AAAA,IACV;AAAA,GACF;AACF;;;;"}

package/esm/tabs-next/TabBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabBar.js","sources":["../../src/tabs-next/TabBar.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { type ComponentPropsWithRef, forwardRef } from \"react\";\n\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport tabBarCss from \"./TabBar.css\";\n\nexport interface TabBarProps extends ComponentPropsWithRef<\"div\"> {\n  /**\n   * Styling variant with a bottom separator. Defaults to false\n   */\n  divider?: boolean;\n  /**\n   * Styling variant with left and right padding. Defaults to false\n   */\n  inset?: boolean;\n}\n\nconst withBaseName = makePrefixer(\"saltTabBar\");\n\nexport const TabBar = forwardRef<HTMLDivElement, TabBarProps>(\n  function TabBar(props, ref) {\n    const { className, children, divider, inset, ...rest } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-tab-bar\",\n      css: tabBarCss,\n      window: targetWindow,\n    });\n\n    return (\n      <div\n        className={clsx(\n          withBaseName(),\n          {\n            [withBaseName(\"divider\")]: divider,\n            [withBaseName(\"inset\")]: inset,\n          },\n          className,\n        )}\n        {...rest}\n        ref={ref}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n"],"names":["TabBar"],"mappings":";;;;;;;;AAmBA,MAAM,YAAA,GAAe,aAAa,YAAY,CAAA;AAEvC,MAAM,MAAS,GAAA,UAAA;AAAA,EACpB,SAASA,OAAO,CAAA,KAAA,EAAO,GAAK,EAAA;AAC1B,IAAA,MAAM,EAAE,SAAW,EAAA,QAAA,EAAU,SAAS,KAAO,EAAA,GAAG,MAAS,GAAA,KAAA;AAEzD,IAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,cAAA;AAAA,MACR,GAAK,EAAA,SAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IACE,uBAAA,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAW,EAAA,IAAA;AAAA,UACT,YAAa,EAAA;AAAA,UACb;AAAA,YACE,CAAC,YAAA,CAAa,SAAS,CAAC,GAAG,OAAA;AAAA,YAC3B,CAAC,YAAA,CAAa,OAAO,CAAC,GAAG;AAAA,WAC3B;AAAA,UACA;AAAA,SACF;AAAA,QACC,GAAG,IAAA;AAAA,QACJ,GAAA;AAAA,QAEC;AAAA;AAAA,KACH;AAAA;AAGN;;;;"}
+{"version":3,"file":"TabBar.js","sources":["../../../../packages/vuu-ui-controls/src/tabs-next/TabBar.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { type ComponentPropsWithRef, forwardRef } from \"react\";\n\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport tabBarCss from \"./TabBar.css\";\n\nexport interface TabBarProps extends ComponentPropsWithRef<\"div\"> {\n  /**\n   * Styling variant with a bottom separator. Defaults to false\n   */\n  divider?: boolean;\n  /**\n   * Styling variant with left and right padding. Defaults to false\n   */\n  inset?: boolean;\n}\n\nconst withBaseName = makePrefixer(\"saltTabBar\");\n\nexport const TabBar = forwardRef<HTMLDivElement, TabBarProps>(\n  function TabBar(props, ref) {\n    const { className, children, divider, inset, ...rest } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-tab-bar\",\n      css: tabBarCss,\n      window: targetWindow,\n    });\n\n    return (\n      <div\n        className={clsx(\n          withBaseName(),\n          {\n            [withBaseName(\"divider\")]: divider,\n            [withBaseName(\"inset\")]: inset,\n          },\n          className,\n        )}\n        {...rest}\n        ref={ref}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n"],"names":["TabBar"],"mappings":";;;;;;;;AAmBA,MAAM,YAAA,GAAe,aAAa,YAAY,CAAA;AAEvC,MAAM,MAAS,GAAA,UAAA;AAAA,EACpB,SAASA,OAAO,CAAA,KAAA,EAAO,GAAK,EAAA;AAC1B,IAAA,MAAM,EAAE,SAAW,EAAA,QAAA,EAAU,SAAS,KAAO,EAAA,GAAG,MAAS,GAAA,KAAA;AAEzD,IAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,cAAA;AAAA,MACR,GAAK,EAAA,SAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IACE,uBAAA,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAW,EAAA,IAAA;AAAA,UACT,YAAa,EAAA;AAAA,UACb;AAAA,YACE,CAAC,YAAA,CAAa,SAAS,CAAC,GAAG,OAAA;AAAA,YAC3B,CAAC,YAAA,CAAa,OAAO,CAAC,GAAG;AAAA,WAC3B;AAAA,UACA;AAAA,SACF;AAAA,QACC,GAAG,IAAA;AAAA,QACJ,GAAA;AAAA,QAEC;AAAA;AAAA,KACH;AAAA;AAGN;;;;"}

package/esm/tabs-next/TabListNext.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabListNext.js","sources":["../../src/tabs-next/TabListNext.tsx"],"sourcesContent":["import {\n  capitalize,\n  makePrefixer,\n  useForkRef,\n  useIsomorphicLayoutEffect,\n} from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  type KeyboardEvent,\n  forwardRef,\n  useRef,\n} from \"react\";\n\nimport tablistNextCss from \"./TabListNext.css\";\nimport { TabOverflowList } from \"./TabOverflowList\";\nimport { useTabsNext } from \"./TabsNextContext\";\nimport { useOverflow } from \"./hooks/useOverflow\";\n\nconst withBaseName = makePrefixer(\"saltTabListNext\");\n\nexport interface TabListNextProps\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\"> {\n  /**\n   * Styling active color variant. Defaults to \"primary\".\n   */\n  activeColor?: \"primary\" | \"secondary\" | \"tertiary\";\n  /**\n   * The appearance of the tabs. Defaults to \"bordered\".\n   */\n  appearance?: \"bordered\" | \"transparent\";\n}\n\nexport const TabListNext = forwardRef<HTMLDivElement, TabListNextProps>(\n  function TabstripNext(props, ref) {\n    const {\n      appearance = \"bordered\",\n      activeColor = \"primary\",\n      children,\n      className,\n      onKeyDown,\n      ...rest\n    } = props;\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-tablist-next\",\n      css: tablistNextCss,\n      window: targetWindow,\n    });\n\n    const {\n      selected,\n      getNext,\n      getPrevious,\n      getFirst,\n      getLast,\n      items,\n      activeTab,\n      menuOpen,\n      setMenuOpen,\n      returnFocus,\n    } = useTabsNext();\n\n    const tabstripRef = useRef<HTMLDivElement>(null);\n    const handleRef = useForkRef(tabstripRef, ref);\n    const overflowButtonRef = useRef<HTMLButtonElement>(null);\n\n    const [visible, hidden, isMeasuring] = useOverflow({\n      container: tabstripRef,\n      tabs: items,\n      children,\n      selected,\n      overflowButton: overflowButtonRef,\n    });\n\n    const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n      onKeyDown?.(event);\n\n      const actionMap = {\n        ArrowRight: getNext,\n        ArrowLeft: getPrevious,\n        Home: getFirst,\n        End: getLast,\n        ArrowUp: menuOpen ? getPrevious : undefined,\n        ArrowDown: menuOpen ? getNext : undefined,\n      };\n\n      const action = actionMap[event.key as keyof typeof actionMap];\n\n      if (action) {\n        event.preventDefault();\n        const activeTabId = activeTab.current?.id;\n        if (!activeTabId) return;\n        const nextItem = action(activeTabId);\n        if (nextItem) {\n          nextItem.element?.scrollIntoView({\n            block: \"nearest\",\n            inline: \"nearest\",\n          });\n          nextItem.element?.focus({ preventScroll: true });\n        }\n      }\n    };\n\n    useIsomorphicLayoutEffect(() => {\n      if (!returnFocus.current || visible.length < 1 || selected === undefined)\n        return;\n\n      const itemToFocus = items.find((i) => i.value === returnFocus.current);\n      itemToFocus?.element?.focus({ preventScroll: true });\n\n      requestAnimationFrame(() => {\n        if (targetWindow?.document?.activeElement === itemToFocus?.element) {\n          returnFocus.current = undefined;\n        }\n      });\n    }, [visible, returnFocus, targetWindow, items, selected]);\n\n    return (\n      <div\n        role=\"tablist\"\n        className={clsx(\n          withBaseName(),\n          withBaseName(appearance),\n          withBaseName(\"horizontal\"),\n          withBaseName(`activeColor${capitalize(activeColor)}`),\n          className,\n        )}\n        data-ismeasuring={isMeasuring ? true : undefined}\n        ref={handleRef}\n        onKeyDown={handleKeyDown}\n        {...rest}\n      >\n        {visible}\n        <TabOverflowList\n          isMeasuring={isMeasuring}\n          buttonRef={overflowButtonRef}\n          tabstripRef={tabstripRef}\n          open={menuOpen}\n          setOpen={setMenuOpen}\n        >\n          {hidden}\n        </TabOverflowList>\n      </div>\n    );\n  },\n);\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"TabListNext.js","sources":["../../../../packages/vuu-ui-controls/src/tabs-next/TabListNext.tsx"],"sourcesContent":["import {\n  capitalize,\n  makePrefixer,\n  useForkRef,\n  useIsomorphicLayoutEffect,\n} from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  type KeyboardEvent,\n  forwardRef,\n  useRef,\n} from \"react\";\n\nimport tablistNextCss from \"./TabListNext.css\";\nimport { TabOverflowList } from \"./TabOverflowList\";\nimport { useTabsNext } from \"./TabsNextContext\";\nimport { useOverflow } from \"./hooks/useOverflow\";\n\nconst withBaseName = makePrefixer(\"saltTabListNext\");\n\nexport interface TabListNextProps\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\"> {\n  /**\n   * Styling active color variant. Defaults to \"primary\".\n   */\n  activeColor?: \"primary\" | \"secondary\" | \"tertiary\";\n  /**\n   * The appearance of the tabs. Defaults to \"bordered\".\n   */\n  appearance?: \"bordered\" | \"transparent\";\n}\n\nexport const TabListNext = forwardRef<HTMLDivElement, TabListNextProps>(\n  function TabstripNext(props, ref) {\n    const {\n      appearance = \"bordered\",\n      activeColor = \"primary\",\n      children,\n      className,\n      onKeyDown,\n      ...rest\n    } = props;\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-tablist-next\",\n      css: tablistNextCss,\n      window: targetWindow,\n    });\n\n    const {\n      selected,\n      getNext,\n      getPrevious,\n      getFirst,\n      getLast,\n      items,\n      activeTab,\n      menuOpen,\n      setMenuOpen,\n      returnFocus,\n    } = useTabsNext();\n\n    const tabstripRef = useRef<HTMLDivElement>(null);\n    const handleRef = useForkRef(tabstripRef, ref);\n    const overflowButtonRef = useRef<HTMLButtonElement>(null);\n\n    const [visible, hidden, isMeasuring] = useOverflow({\n      container: tabstripRef,\n      tabs: items,\n      children,\n      selected,\n      overflowButton: overflowButtonRef,\n    });\n\n    const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n      onKeyDown?.(event);\n\n      const actionMap = {\n        ArrowRight: getNext,\n        ArrowLeft: getPrevious,\n        Home: getFirst,\n        End: getLast,\n        ArrowUp: menuOpen ? getPrevious : undefined,\n        ArrowDown: menuOpen ? getNext : undefined,\n      };\n\n      const action = actionMap[event.key as keyof typeof actionMap];\n\n      if (action) {\n        event.preventDefault();\n        const activeTabId = activeTab.current?.id;\n        if (!activeTabId) return;\n        const nextItem = action(activeTabId);\n        if (nextItem) {\n          nextItem.element?.scrollIntoView({\n            block: \"nearest\",\n            inline: \"nearest\",\n          });\n          nextItem.element?.focus({ preventScroll: true });\n        }\n      }\n    };\n\n    useIsomorphicLayoutEffect(() => {\n      if (!returnFocus.current || visible.length < 1 || selected === undefined)\n        return;\n\n      const itemToFocus = items.find((i) => i.value === returnFocus.current);\n      itemToFocus?.element?.focus({ preventScroll: true });\n\n      requestAnimationFrame(() => {\n        if (targetWindow?.document?.activeElement === itemToFocus?.element) {\n          returnFocus.current = undefined;\n        }\n      });\n    }, [visible, returnFocus, targetWindow, items, selected]);\n\n    return (\n      <div\n        role=\"tablist\"\n        className={clsx(\n          withBaseName(),\n          withBaseName(appearance),\n          withBaseName(\"horizontal\"),\n          withBaseName(`activeColor${capitalize(activeColor)}`),\n          className,\n        )}\n        data-ismeasuring={isMeasuring ? true : undefined}\n        ref={handleRef}\n        onKeyDown={handleKeyDown}\n        {...rest}\n      >\n        {visible}\n        <TabOverflowList\n          isMeasuring={isMeasuring}\n          buttonRef={overflowButtonRef}\n          tabstripRef={tabstripRef}\n          open={menuOpen}\n          setOpen={setMenuOpen}\n        >\n          {hidden}\n        </TabOverflowList>\n      </div>\n    );\n  },\n);\n"],"names":[],"mappings":"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"}

package/esm/tabs-next/TabNext.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabNext.js","sources":["../../src/tabs-next/TabNext.tsx"],"sourcesContent":["import { makePrefixer, useId } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  type FocusEvent,\n  type MouseEvent,\n  type ReactElement,\n  forwardRef,\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\n\nimport tabCss from \"./TabNext.css\";\nimport { TabNextContext } from \"./TabNextContext\";\nimport { useTabsNext } from \"./TabsNextContext\";\n\nconst withBaseName = makePrefixer(\"saltTabNext\");\n\nexport interface TabNextProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * If `true`, the tab will be disabled.\n   */\n  disabled?: boolean;\n  /**\n   * The value of the tab.\n   */\n  value: string;\n}\n\nexport const TabNext = forwardRef<HTMLDivElement, TabNextProps>(\n  function Tab(props, ref): ReactElement<TabNextProps> {\n    const {\n      \"aria-labelledby\": ariaLabelledBy,\n      children,\n      className,\n      disabled: disabledProp,\n      onBlur,\n      onMouseDown,\n      onFocus,\n      onFocusCapture,\n      value,\n      id: idProp,\n      ...rest\n    } = props;\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-tab-next\",\n      css: tabCss,\n      window: targetWindow,\n    });\n\n    const { selected, activeTab } = useTabsNext();\n\n    const disabled = !!disabledProp;\n\n    const id = useId(idProp);\n\n    const wasMouseDown = useRef(false);\n    const [focusVisible, setFocusVisible] = useState(false);\n    const [focused, setFocused] = useState(false);\n\n    const handleFocusCapture = (event: FocusEvent<HTMLDivElement>) => {\n      onFocusCapture?.(event);\n      if (value && id) {\n        activeTab.current = { value, id };\n      }\n    };\n\n    const handleFocus = (event: FocusEvent<HTMLDivElement>) => {\n      onFocus?.(event);\n\n      setFocused(true);\n\n      if (\n        !wasMouseDown.current &&\n        event.target.getAttribute(\"role\") === \"tab\"\n      ) {\n        setFocusVisible(true);\n      }\n\n      wasMouseDown.current = false;\n    };\n\n    const handleBlur = (event: FocusEvent<HTMLDivElement>) => {\n      onBlur?.(event);\n      setFocused(false);\n      setFocusVisible(false);\n    };\n\n    const handleMouseDown = (event: MouseEvent<HTMLDivElement>) => {\n      onMouseDown?.(event);\n      wasMouseDown.current = true;\n    };\n\n    const [actions, setActions] = useState<string[]>([]);\n\n    const registerAction = useCallback((id: string) => {\n      setActions((old) => old.concat(id));\n\n      return () => {\n        setActions((old) => old.filter((action) => action !== id));\n      };\n    }, []);\n\n    const context = useMemo(\n      () => ({\n        tabId: id,\n        selected: selected === value,\n        focused,\n        value,\n        disabled,\n        actions,\n        registerAction,\n      }),\n      [id, selected, value, focused, disabled, actions, registerAction],\n    );\n\n    return (\n      <TabNextContext.Provider value={context}>\n        <div\n          className={clsx(\n            withBaseName(),\n            {\n              [withBaseName(\"selected\")]: selected === value,\n              [withBaseName(\"disabled\")]: disabled,\n              [withBaseName(\"focusVisible\")]: focusVisible,\n            },\n            className,\n          )}\n          data-overflowitem=\"true\"\n          ref={ref}\n          onMouseDown={handleMouseDown}\n          onFocusCapture={handleFocusCapture}\n          onFocus={handleFocus}\n          onBlur={handleBlur}\n          role=\"presentation\"\n          {...rest}\n        >\n          {children}\n        </div>\n      </TabNextContext.Provider>\n    );\n  },\n);\n"],"names":["id"],"mappings":";;;;;;;;;;AAoBA,MAAM,YAAA,GAAe,aAAa,aAAa,CAAA;AAaxC,MAAM,OAAU,GAAA,UAAA;AAAA,EACrB,SAAS,GAAI,CAAA,KAAA,EAAO,GAAiC,EAAA;AACnD,IAAM,MAAA;AAAA,MACJ,iBAAmB,EAAA,cAAA;AAAA,MACnB,QAAA;AAAA,MACA,SAAA;AAAA,MACA,QAAU,EAAA,YAAA;AAAA,MACV,MAAA;AAAA,MACA,WAAA;AAAA,MACA,OAAA;AAAA,MACA,cAAA;AAAA,MACA,KAAA;AAAA,MACA,EAAI,EAAA,MAAA;AAAA,MACJ,GAAG;AAAA,KACD,GAAA,KAAA;AACJ,IAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,eAAA;AAAA,MACR,GAAK,EAAA,MAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IAAA,MAAM,EAAE,QAAA,EAAU,SAAU,EAAA,GAAI,WAAY,EAAA;AAE5C,IAAM,MAAA,QAAA,GAAW,CAAC,CAAC,YAAA;AAEnB,IAAM,MAAA,EAAA,GAAK,MAAM,MAAM,CAAA;AAEvB,IAAM,MAAA,YAAA,GAAe,OAAO,KAAK,CAAA;AACjC,IAAA,MAAM,CAAC,YAAA,EAAc,eAAe,CAAA,GAAI,SAAS,KAAK,CAAA;AACtD,IAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAI,SAAS,KAAK,CAAA;AAE5C,IAAM,MAAA,kBAAA,GAAqB,CAAC,KAAsC,KAAA;AAChE,MAAA,cAAA,GAAiB,KAAK,CAAA;AACtB,MAAA,IAAI,SAAS,EAAI,EAAA;AACf,QAAU,SAAA,CAAA,OAAA,GAAU,EAAE,KAAA,EAAO,EAAG,EAAA;AAAA;AAClC,KACF;AAEA,IAAM,MAAA,WAAA,GAAc,CAAC,KAAsC,KAAA;AACzD,MAAA,OAAA,GAAU,KAAK,CAAA;AAEf,MAAA,UAAA,CAAW,IAAI,CAAA;AAEf,MACE,IAAA,CAAC,aAAa,OACd,IAAA,KAAA,CAAM,OAAO,YAAa,CAAA,MAAM,MAAM,KACtC,EAAA;AACA,QAAA,eAAA,CAAgB,IAAI,CAAA;AAAA;AAGtB,MAAA,YAAA,CAAa,OAAU,GAAA,KAAA;AAAA,KACzB;AAEA,IAAM,MAAA,UAAA,GAAa,CAAC,KAAsC,KAAA;AACxD,MAAA,MAAA,GAAS,KAAK,CAAA;AACd,MAAA,UAAA,CAAW,KAAK,CAAA;AAChB,MAAA,eAAA,CAAgB,KAAK,CAAA;AAAA,KACvB;AAEA,IAAM,MAAA,eAAA,GAAkB,CAAC,KAAsC,KAAA;AAC7D,MAAA,WAAA,GAAc,KAAK,CAAA;AACnB,MAAA,YAAA,CAAa,OAAU,GAAA,IAAA;AAAA,KACzB;AAEA,IAAA,MAAM,CAAC,OAAS,EAAA,UAAU,CAAI,GAAA,QAAA,CAAmB,EAAE,CAAA;AAEnD,IAAM,MAAA,cAAA,GAAiB,WAAY,CAAA,CAACA,GAAe,KAAA;AACjD,MAAA,UAAA,CAAW,CAAC,GAAA,KAAQ,GAAI,CAAA,MAAA,CAAOA,GAAE,CAAC,CAAA;AAElC,MAAA,OAAO,MAAM;AACX,QAAW,UAAA,CAAA,CAAC,QAAQ,GAAI,CAAA,MAAA,CAAO,CAAC,MAAW,KAAA,MAAA,KAAWA,GAAE,CAAC,CAAA;AAAA,OAC3D;AAAA,KACF,EAAG,EAAE,CAAA;AAEL,IAAA,MAAM,OAAU,GAAA,OAAA;AAAA,MACd,OAAO;AAAA,QACL,KAAO,EAAA,EAAA;AAAA,QACP,UAAU,QAAa,KAAA,KAAA;AAAA,QACvB,OAAA;AAAA,QACA,KAAA;AAAA,QACA,QAAA;AAAA,QACA,OAAA;AAAA,QACA;AAAA,OACF,CAAA;AAAA,MACA,CAAC,EAAI,EAAA,QAAA,EAAU,OAAO,OAAS,EAAA,QAAA,EAAU,SAAS,cAAc;AAAA,KAClE;AAEA,IAAA,uBACG,GAAA,CAAA,cAAA,CAAe,QAAf,EAAA,EAAwB,OAAO,OAC9B,EAAA,QAAA,kBAAA,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAW,EAAA,IAAA;AAAA,UACT,YAAa,EAAA;AAAA,UACb;AAAA,YACE,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG,QAAa,KAAA,KAAA;AAAA,YACzC,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG,QAAA;AAAA,YAC5B,CAAC,YAAA,CAAa,cAAc,CAAC,GAAG;AAAA,WAClC;AAAA,UACA;AAAA,SACF;AAAA,QACA,mBAAkB,EAAA,MAAA;AAAA,QAClB,GAAA;AAAA,QACA,WAAa,EAAA,eAAA;AAAA,QACb,cAAgB,EAAA,kBAAA;AAAA,QAChB,OAAS,EAAA,WAAA;AAAA,QACT,MAAQ,EAAA,UAAA;AAAA,QACR,IAAK,EAAA,cAAA;AAAA,QACJ,GAAG,IAAA;AAAA,QAEH;AAAA;AAAA,KAEL,EAAA,CAAA;AAAA;AAGN;;;;"}
+{"version":3,"file":"TabNext.js","sources":["../../../../packages/vuu-ui-controls/src/tabs-next/TabNext.tsx"],"sourcesContent":["import { makePrefixer, useId } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  type FocusEvent,\n  type MouseEvent,\n  type ReactElement,\n  forwardRef,\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\n\nimport tabCss from \"./TabNext.css\";\nimport { TabNextContext } from \"./TabNextContext\";\nimport { useTabsNext } from \"./TabsNextContext\";\n\nconst withBaseName = makePrefixer(\"saltTabNext\");\n\nexport interface TabNextProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * If `true`, the tab will be disabled.\n   */\n  disabled?: boolean;\n  /**\n   * The value of the tab.\n   */\n  value: string;\n}\n\nexport const TabNext = forwardRef<HTMLDivElement, TabNextProps>(\n  function Tab(props, ref): ReactElement<TabNextProps> {\n    const {\n      \"aria-labelledby\": ariaLabelledBy,\n      children,\n      className,\n      disabled: disabledProp,\n      onBlur,\n      onMouseDown,\n      onFocus,\n      onFocusCapture,\n      value,\n      id: idProp,\n      ...rest\n    } = props;\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-tab-next\",\n      css: tabCss,\n      window: targetWindow,\n    });\n\n    const { selected, activeTab } = useTabsNext();\n\n    const disabled = !!disabledProp;\n\n    const id = useId(idProp);\n\n    const wasMouseDown = useRef(false);\n    const [focusVisible, setFocusVisible] = useState(false);\n    const [focused, setFocused] = useState(false);\n\n    const handleFocusCapture = (event: FocusEvent<HTMLDivElement>) => {\n      onFocusCapture?.(event);\n      if (value && id) {\n        activeTab.current = { value, id };\n      }\n    };\n\n    const handleFocus = (event: FocusEvent<HTMLDivElement>) => {\n      onFocus?.(event);\n\n      setFocused(true);\n\n      if (\n        !wasMouseDown.current &&\n        event.target.getAttribute(\"role\") === \"tab\"\n      ) {\n        setFocusVisible(true);\n      }\n\n      wasMouseDown.current = false;\n    };\n\n    const handleBlur = (event: FocusEvent<HTMLDivElement>) => {\n      onBlur?.(event);\n      setFocused(false);\n      setFocusVisible(false);\n    };\n\n    const handleMouseDown = (event: MouseEvent<HTMLDivElement>) => {\n      onMouseDown?.(event);\n      wasMouseDown.current = true;\n    };\n\n    const [actions, setActions] = useState<string[]>([]);\n\n    const registerAction = useCallback((id: string) => {\n      setActions((old) => old.concat(id));\n\n      return () => {\n        setActions((old) => old.filter((action) => action !== id));\n      };\n    }, []);\n\n    const context = useMemo(\n      () => ({\n        tabId: id,\n        selected: selected === value,\n        focused,\n        value,\n        disabled,\n        actions,\n        registerAction,\n      }),\n      [id, selected, value, focused, disabled, actions, registerAction],\n    );\n\n    return (\n      <TabNextContext.Provider value={context}>\n        <div\n          className={clsx(\n            withBaseName(),\n            {\n              [withBaseName(\"selected\")]: selected === value,\n              [withBaseName(\"disabled\")]: disabled,\n              [withBaseName(\"focusVisible\")]: focusVisible,\n            },\n            className,\n          )}\n          data-overflowitem=\"true\"\n          ref={ref}\n          onMouseDown={handleMouseDown}\n          onFocusCapture={handleFocusCapture}\n          onFocus={handleFocus}\n          onBlur={handleBlur}\n          role=\"presentation\"\n          {...rest}\n        >\n          {children}\n        </div>\n      </TabNextContext.Provider>\n    );\n  },\n);\n"],"names":["id"],"mappings":";;;;;;;;;;AAoBA,MAAM,YAAA,GAAe,aAAa,aAAa,CAAA;AAaxC,MAAM,OAAU,GAAA,UAAA;AAAA,EACrB,SAAS,GAAI,CAAA,KAAA,EAAO,GAAiC,EAAA;AACnD,IAAM,MAAA;AAAA,MACJ,iBAAmB,EAAA,cAAA;AAAA,MACnB,QAAA;AAAA,MACA,SAAA;AAAA,MACA,QAAU,EAAA,YAAA;AAAA,MACV,MAAA;AAAA,MACA,WAAA;AAAA,MACA,OAAA;AAAA,MACA,cAAA;AAAA,MACA,KAAA;AAAA,MACA,EAAI,EAAA,MAAA;AAAA,MACJ,GAAG;AAAA,KACD,GAAA,KAAA;AACJ,IAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,eAAA;AAAA,MACR,GAAK,EAAA,MAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IAAA,MAAM,EAAE,QAAA,EAAU,SAAU,EAAA,GAAI,WAAY,EAAA;AAE5C,IAAM,MAAA,QAAA,GAAW,CAAC,CAAC,YAAA;AAEnB,IAAM,MAAA,EAAA,GAAK,MAAM,MAAM,CAAA;AAEvB,IAAM,MAAA,YAAA,GAAe,OAAO,KAAK,CAAA;AACjC,IAAA,MAAM,CAAC,YAAA,EAAc,eAAe,CAAA,GAAI,SAAS,KAAK,CAAA;AACtD,IAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAI,SAAS,KAAK,CAAA;AAE5C,IAAM,MAAA,kBAAA,GAAqB,CAAC,KAAsC,KAAA;AAChE,MAAA,cAAA,GAAiB,KAAK,CAAA;AACtB,MAAA,IAAI,SAAS,EAAI,EAAA;AACf,QAAU,SAAA,CAAA,OAAA,GAAU,EAAE,KAAA,EAAO,EAAG,EAAA;AAAA;AAClC,KACF;AAEA,IAAM,MAAA,WAAA,GAAc,CAAC,KAAsC,KAAA;AACzD,MAAA,OAAA,GAAU,KAAK,CAAA;AAEf,MAAA,UAAA,CAAW,IAAI,CAAA;AAEf,MACE,IAAA,CAAC,aAAa,OACd,IAAA,KAAA,CAAM,OAAO,YAAa,CAAA,MAAM,MAAM,KACtC,EAAA;AACA,QAAA,eAAA,CAAgB,IAAI,CAAA;AAAA;AAGtB,MAAA,YAAA,CAAa,OAAU,GAAA,KAAA;AAAA,KACzB;AAEA,IAAM,MAAA,UAAA,GAAa,CAAC,KAAsC,KAAA;AACxD,MAAA,MAAA,GAAS,KAAK,CAAA;AACd,MAAA,UAAA,CAAW,KAAK,CAAA;AAChB,MAAA,eAAA,CAAgB,KAAK,CAAA;AAAA,KACvB;AAEA,IAAM,MAAA,eAAA,GAAkB,CAAC,KAAsC,KAAA;AAC7D,MAAA,WAAA,GAAc,KAAK,CAAA;AACnB,MAAA,YAAA,CAAa,OAAU,GAAA,IAAA;AAAA,KACzB;AAEA,IAAA,MAAM,CAAC,OAAS,EAAA,UAAU,CAAI,GAAA,QAAA,CAAmB,EAAE,CAAA;AAEnD,IAAM,MAAA,cAAA,GAAiB,WAAY,CAAA,CAACA,GAAe,KAAA;AACjD,MAAA,UAAA,CAAW,CAAC,GAAA,KAAQ,GAAI,CAAA,MAAA,CAAOA,GAAE,CAAC,CAAA;AAElC,MAAA,OAAO,MAAM;AACX,QAAW,UAAA,CAAA,CAAC,QAAQ,GAAI,CAAA,MAAA,CAAO,CAAC,MAAW,KAAA,MAAA,KAAWA,GAAE,CAAC,CAAA;AAAA,OAC3D;AAAA,KACF,EAAG,EAAE,CAAA;AAEL,IAAA,MAAM,OAAU,GAAA,OAAA;AAAA,MACd,OAAO;AAAA,QACL,KAAO,EAAA,EAAA;AAAA,QACP,UAAU,QAAa,KAAA,KAAA;AAAA,QACvB,OAAA;AAAA,QACA,KAAA;AAAA,QACA,QAAA;AAAA,QACA,OAAA;AAAA,QACA;AAAA,OACF,CAAA;AAAA,MACA,CAAC,EAAI,EAAA,QAAA,EAAU,OAAO,OAAS,EAAA,QAAA,EAAU,SAAS,cAAc;AAAA,KAClE;AAEA,IAAA,uBACG,GAAA,CAAA,cAAA,CAAe,QAAf,EAAA,EAAwB,OAAO,OAC9B,EAAA,QAAA,kBAAA,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAW,EAAA,IAAA;AAAA,UACT,YAAa,EAAA;AAAA,UACb;AAAA,YACE,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG,QAAa,KAAA,KAAA;AAAA,YACzC,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG,QAAA;AAAA,YAC5B,CAAC,YAAA,CAAa,cAAc,CAAC,GAAG;AAAA,WAClC;AAAA,UACA;AAAA,SACF;AAAA,QACA,mBAAkB,EAAA,MAAA;AAAA,QAClB,GAAA;AAAA,QACA,WAAa,EAAA,eAAA;AAAA,QACb,cAAgB,EAAA,kBAAA;AAAA,QAChB,OAAS,EAAA,WAAA;AAAA,QACT,MAAQ,EAAA,UAAA;AAAA,QACR,IAAK,EAAA,cAAA;AAAA,QACJ,GAAG,IAAA;AAAA,QAEH;AAAA;AAAA,KAEL,EAAA,CAAA;AAAA;AAGN;;;;"}

package/esm/tabs-next/TabNextAction.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabNextAction.js","sources":["../../src/tabs-next/TabNextAction.tsx"],"sourcesContent":["import {\n  Button,\n  type ButtonProps,\n  useId,\n  useIsomorphicLayoutEffect,\n} from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { forwardRef } from \"react\";\nimport { useTabNext } from \"./TabNextContext\";\n\nexport interface TabNextActionProps extends ButtonProps {\n  debugLabel?: string;\n}\n\nexport const TabNextAction = forwardRef<HTMLButtonElement, TabNextActionProps>(\n  function TabNextAction(props, ref) {\n    const { \"aria-labelledby\": ariaLabelledBy, id: idProp, ...rest } = props;\n\n    const id = useId(idProp);\n    const { focused, selected, tabId, registerAction } = useTabNext();\n\n    useIsomorphicLayoutEffect(() => {\n      if (id) {\n        return registerAction(id);\n      }\n    }, [registerAction, id]);\n\n    return (\n      <Button\n        id={id}\n        aria-labelledby={clsx(ariaLabelledBy, tabId, id)}\n        tabIndex={focused || selected ? undefined : -1}\n        appearance=\"transparent\"\n        sentiment=\"neutral\"\n        ref={ref}\n        {...rest}\n      />\n    );\n  },\n);\n"],"names":["TabNextAction"],"mappings":";;;;;;AAcO,MAAM,aAAgB,GAAA,UAAA;AAAA,EAC3B,SAASA,cAAc,CAAA,KAAA,EAAO,GAAK,EAAA;AACjC,IAAA,MAAM,EAAE,iBAAmB,EAAA,cAAA,EAAgB,IAAI,MAAQ,EAAA,GAAG,MAAS,GAAA,KAAA;AAEnE,IAAM,MAAA,EAAA,GAAK,MAAM,MAAM,CAAA;AACvB,IAAA,MAAM,EAAE,OAAS,EAAA,QAAA,EAAU,KAAO,EAAA,cAAA,KAAmB,UAAW,EAAA;AAEhE,IAAA,yBAAA,CAA0B,MAAM;AAC9B,MAAA,IAAI,EAAI,EAAA;AACN,QAAA,OAAO,eAAe,EAAE,CAAA;AAAA;AAC1B,KACC,EAAA,CAAC,cAAgB,EAAA,EAAE,CAAC,CAAA;AAEvB,IACE,uBAAA,GAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,EAAA;AAAA,QACA,iBAAiB,EAAA,IAAA,CAAK,cAAgB,EAAA,KAAA,EAAO,EAAE,CAAA;AAAA,QAC/C,QAAA,EAAU,OAAW,IAAA,QAAA,GAAW,KAAY,CAAA,GAAA,CAAA,CAAA;AAAA,QAC5C,UAAW,EAAA,aAAA;AAAA,QACX,SAAU,EAAA,SAAA;AAAA,QACV,GAAA;AAAA,QACC,GAAG;AAAA;AAAA,KACN;AAAA;AAGN;;;;"}
+{"version":3,"file":"TabNextAction.js","sources":["../../../../packages/vuu-ui-controls/src/tabs-next/TabNextAction.tsx"],"sourcesContent":["import {\n  Button,\n  type ButtonProps,\n  useId,\n  useIsomorphicLayoutEffect,\n} from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { forwardRef } from \"react\";\nimport { useTabNext } from \"./TabNextContext\";\n\nexport interface TabNextActionProps extends ButtonProps {\n  debugLabel?: string;\n}\n\nexport const TabNextAction = forwardRef<HTMLButtonElement, TabNextActionProps>(\n  function TabNextAction(props, ref) {\n    const { \"aria-labelledby\": ariaLabelledBy, id: idProp, ...rest } = props;\n\n    const id = useId(idProp);\n    const { focused, selected, tabId, registerAction } = useTabNext();\n\n    useIsomorphicLayoutEffect(() => {\n      if (id) {\n        return registerAction(id);\n      }\n    }, [registerAction, id]);\n\n    return (\n      <Button\n        id={id}\n        aria-labelledby={clsx(ariaLabelledBy, tabId, id)}\n        tabIndex={focused || selected ? undefined : -1}\n        appearance=\"transparent\"\n        sentiment=\"neutral\"\n        ref={ref}\n        {...rest}\n      />\n    );\n  },\n);\n"],"names":["TabNextAction"],"mappings":";;;;;;AAcO,MAAM,aAAgB,GAAA,UAAA;AAAA,EAC3B,SAASA,cAAc,CAAA,KAAA,EAAO,GAAK,EAAA;AACjC,IAAA,MAAM,EAAE,iBAAmB,EAAA,cAAA,EAAgB,IAAI,MAAQ,EAAA,GAAG,MAAS,GAAA,KAAA;AAEnE,IAAM,MAAA,EAAA,GAAK,MAAM,MAAM,CAAA;AACvB,IAAA,MAAM,EAAE,OAAS,EAAA,QAAA,EAAU,KAAO,EAAA,cAAA,KAAmB,UAAW,EAAA;AAEhE,IAAA,yBAAA,CAA0B,MAAM;AAC9B,MAAA,IAAI,EAAI,EAAA;AACN,QAAA,OAAO,eAAe,EAAE,CAAA;AAAA;AAC1B,KACC,EAAA,CAAC,cAAgB,EAAA,EAAE,CAAC,CAAA;AAEvB,IACE,uBAAA,GAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,EAAA;AAAA,QACA,iBAAiB,EAAA,IAAA,CAAK,cAAgB,EAAA,KAAA,EAAO,EAAE,CAAA;AAAA,QAC/C,QAAA,EAAU,OAAW,IAAA,QAAA,GAAW,KAAY,CAAA,GAAA,CAAA,CAAA;AAAA,QAC5C,UAAW,EAAA,aAAA;AAAA,QACX,SAAU,EAAA,SAAA;AAAA,QACV,GAAA;AAAA,QACC,GAAG;AAAA;AAAA,KACN;AAAA;AAGN;;;;"}

package/esm/tabs-next/TabNextContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabNextContext.js","sources":["../../src/tabs-next/TabNextContext.tsx"],"sourcesContent":["import { createContext } from \"@salt-ds/core\";\nimport { useContext } from \"react\";\n\ninterface TabNextContextValue {\n  tabId?: string;\n  focused: boolean;\n  selected: boolean;\n  value: string;\n  disabled: boolean;\n  actions: string[];\n  registerAction: (id: string) => () => void;\n}\n\nexport const TabNextContext = createContext<TabNextContextValue>(\n  \"TabNextContext\",\n  {\n    focused: false,\n    selected: false,\n    disabled: false,\n    value: \"\",\n    actions: [],\n    registerAction: () => () => undefined,\n  },\n);\n\nexport function useTabNext() {\n  return useContext(TabNextContext);\n}\n"],"names":[],"mappings":";;;AAaO,MAAM,cAAiB,GAAA,aAAA;AAAA,EAC5B,gBAAA;AAAA,EACA;AAAA,IACE,OAAS,EAAA,KAAA;AAAA,IACT,QAAU,EAAA,KAAA;AAAA,IACV,QAAU,EAAA,KAAA;AAAA,IACV,KAAO,EAAA,EAAA;AAAA,IACP,SAAS,EAAC;AAAA,IACV,cAAA,EAAgB,MAAM,MAAM,KAAA;AAAA;AAEhC;AAEO,SAAS,UAAa,GAAA;AAC3B,EAAA,OAAO,WAAW,cAAc,CAAA;AAClC;;;;"}
+{"version":3,"file":"TabNextContext.js","sources":["../../../../packages/vuu-ui-controls/src/tabs-next/TabNextContext.tsx"],"sourcesContent":["import { createContext } from \"@salt-ds/core\";\nimport { useContext } from \"react\";\n\ninterface TabNextContextValue {\n  tabId?: string;\n  focused: boolean;\n  selected: boolean;\n  value: string;\n  disabled: boolean;\n  actions: string[];\n  registerAction: (id: string) => () => void;\n}\n\nexport const TabNextContext = createContext<TabNextContextValue>(\n  \"TabNextContext\",\n  {\n    focused: false,\n    selected: false,\n    disabled: false,\n    value: \"\",\n    actions: [],\n    registerAction: () => () => undefined,\n  },\n);\n\nexport function useTabNext() {\n  return useContext(TabNextContext);\n}\n"],"names":[],"mappings":";;;AAaO,MAAM,cAAiB,GAAA,aAAA;AAAA,EAC5B,gBAAA;AAAA,EACA;AAAA,IACE,OAAS,EAAA,KAAA;AAAA,IACT,QAAU,EAAA,KAAA;AAAA,IACV,QAAU,EAAA,KAAA;AAAA,IACV,KAAO,EAAA,EAAA;AAAA,IACP,SAAS,EAAC;AAAA,IACV,cAAA,EAAgB,MAAM,MAAM,KAAA;AAAA;AAEhC;AAEO,SAAS,UAAa,GAAA;AAC3B,EAAA,OAAO,WAAW,cAAc,CAAA;AAClC;;;;"}

package/esm/tabs-next/TabNextPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabNextPanel.js","sources":["../../src/tabs-next/TabNextPanel.tsx"],"sourcesContent":["import {\n  makePrefixer,\n  useForkRef,\n  useId,\n  useIsomorphicLayoutEffect,\n} from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  forwardRef,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport { tabbable } from \"tabbable\";\nimport tabPanelCss from \"./TabNextPanel.css\";\nimport { useTabsNext } from \"./TabsNextContext\";\n\nexport interface TabNextPanelProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * The value of the panel, this should map to the corresponding tab.\n   */\n  value: string;\n}\n\nconst withBaseName = makePrefixer(\"saltTabNextPanel\");\n\nexport const TabNextPanel = forwardRef<HTMLDivElement, TabNextPanelProps>(\n  function TabNextPanel(props, ref) {\n    const { className, children, id: idProp, value, ...rest } = props;\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-tab-next-panel\",\n      css: tabPanelCss,\n      window: targetWindow,\n    });\n    const id = useId(idProp);\n    const { registerPanel, getTabId, selected } = useTabsNext();\n\n    const panelRef = useRef<HTMLDivElement>(null);\n    const handleRef = useForkRef(panelRef, ref);\n\n    useIsomorphicLayoutEffect(() => {\n      if (value && id) {\n        return registerPanel(id, value);\n      }\n    }, [value, id, registerPanel]);\n\n    const [hasFocusableChildren, setHasFocusableChildren] = useState(false);\n    useEffect(() => {\n      if (!panelRef.current) return;\n\n      const detectFocusableChildren = () => {\n        requestAnimationFrame(() => {\n          if (!panelRef.current) return;\n          const elements = tabbable(panelRef.current);\n          setHasFocusableChildren(elements.length > 0);\n        });\n      };\n\n      const observer = new MutationObserver(() => {\n        detectFocusableChildren();\n      });\n\n      requestAnimationFrame(() => {\n        detectFocusableChildren();\n      });\n\n      observer.observe(panelRef.current, {\n        childList: true,\n        subtree: true,\n        attributes: true,\n      });\n\n      return () => {\n        observer.disconnect();\n      };\n    }, []);\n\n    const hidden = selected !== value;\n    const tabId = getTabId(value);\n\n    return (\n      <div\n        id={id}\n        ref={handleRef}\n        role=\"tabpanel\"\n        aria-labelledby={tabId}\n        className={clsx(withBaseName(), className)}\n        hidden={hidden || undefined}\n        tabIndex={hidden || hasFocusableChildren ? undefined : 0}\n        {...rest}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n"],"names":["TabNextPanel"],"mappings":";;;;;;;;;;AA2BA,MAAM,YAAA,GAAe,aAAa,kBAAkB,CAAA;AAE7C,MAAM,YAAe,GAAA,UAAA;AAAA,EAC1B,SAASA,aAAa,CAAA,KAAA,EAAO,GAAK,EAAA;AAChC,IAAM,MAAA,EAAE,WAAW,QAAU,EAAA,EAAA,EAAI,QAAQ,KAAO,EAAA,GAAG,MAAS,GAAA,KAAA;AAC5D,IAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,qBAAA;AAAA,MACR,GAAK,EAAA,WAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AACD,IAAM,MAAA,EAAA,GAAK,MAAM,MAAM,CAAA;AACvB,IAAA,MAAM,EAAE,aAAA,EAAe,QAAU,EAAA,QAAA,KAAa,WAAY,EAAA;AAE1D,IAAM,MAAA,QAAA,GAAW,OAAuB,IAAI,CAAA;AAC5C,IAAM,MAAA,SAAA,GAAY,UAAW,CAAA,QAAA,EAAU,GAAG,CAAA;AAE1C,IAAA,yBAAA,CAA0B,MAAM;AAC9B,MAAA,IAAI,SAAS,EAAI,EAAA;AACf,QAAO,OAAA,aAAA,CAAc,IAAI,KAAK,CAAA;AAAA;AAChC,KACC,EAAA,CAAC,KAAO,EAAA,EAAA,EAAI,aAAa,CAAC,CAAA;AAE7B,IAAA,MAAM,CAAC,oBAAA,EAAsB,uBAAuB,CAAA,GAAI,SAAS,KAAK,CAAA;AACtE,IAAA,SAAA,CAAU,MAAM;AACd,MAAI,IAAA,CAAC,SAAS,OAAS,EAAA;AAEvB,MAAA,MAAM,0BAA0B,MAAM;AACpC,QAAA,qBAAA,CAAsB,MAAM;AAC1B,UAAI,IAAA,CAAC,SAAS,OAAS,EAAA;AACvB,UAAM,MAAA,QAAA,GAAW,QAAS,CAAA,QAAA,CAAS,OAAO,CAAA;AAC1C,UAAwB,uBAAA,CAAA,QAAA,CAAS,SAAS,CAAC,CAAA;AAAA,SAC5C,CAAA;AAAA,OACH;AAEA,MAAM,MAAA,QAAA,GAAW,IAAI,gBAAA,CAAiB,MAAM;AAC1C,QAAwB,uBAAA,EAAA;AAAA,OACzB,CAAA;AAED,MAAA,qBAAA,CAAsB,MAAM;AAC1B,QAAwB,uBAAA,EAAA;AAAA,OACzB,CAAA;AAED,MAAS,QAAA,CAAA,OAAA,CAAQ,SAAS,OAAS,EAAA;AAAA,QACjC,SAAW,EAAA,IAAA;AAAA,QACX,OAAS,EAAA,IAAA;AAAA,QACT,UAAY,EAAA;AAAA,OACb,CAAA;AAED,MAAA,OAAO,MAAM;AACX,QAAA,QAAA,CAAS,UAAW,EAAA;AAAA,OACtB;AAAA,KACF,EAAG,EAAE,CAAA;AAEL,IAAA,MAAM,SAAS,QAAa,KAAA,KAAA;AAC5B,IAAM,MAAA,KAAA,GAAQ,SAAS,KAAK,CAAA;AAE5B,IACE,uBAAA,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,EAAA;AAAA,QACA,GAAK,EAAA,SAAA;AAAA,QACL,IAAK,EAAA,UAAA;AAAA,QACL,iBAAiB,EAAA,KAAA;AAAA,QACjB,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,QACzC,QAAQ,MAAU,IAAA,KAAA,CAAA;AAAA,QAClB,QAAA,EAAU,MAAU,IAAA,oBAAA,GAAuB,KAAY,CAAA,GAAA,CAAA;AAAA,QACtD,GAAG,IAAA;AAAA,QAEH;AAAA;AAAA,KACH;AAAA;AAGN;;;;"}
+{"version":3,"file":"TabNextPanel.js","sources":["../../../../packages/vuu-ui-controls/src/tabs-next/TabNextPanel.tsx"],"sourcesContent":["import {\n  makePrefixer,\n  useForkRef,\n  useId,\n  useIsomorphicLayoutEffect,\n} from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  forwardRef,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport { tabbable } from \"tabbable\";\nimport tabPanelCss from \"./TabNextPanel.css\";\nimport { useTabsNext } from \"./TabsNextContext\";\n\nexport interface TabNextPanelProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * The value of the panel, this should map to the corresponding tab.\n   */\n  value: string;\n}\n\nconst withBaseName = makePrefixer(\"saltTabNextPanel\");\n\nexport const TabNextPanel = forwardRef<HTMLDivElement, TabNextPanelProps>(\n  function TabNextPanel(props, ref) {\n    const { className, children, id: idProp, value, ...rest } = props;\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-tab-next-panel\",\n      css: tabPanelCss,\n      window: targetWindow,\n    });\n    const id = useId(idProp);\n    const { registerPanel, getTabId, selected } = useTabsNext();\n\n    const panelRef = useRef<HTMLDivElement>(null);\n    const handleRef = useForkRef(panelRef, ref);\n\n    useIsomorphicLayoutEffect(() => {\n      if (value && id) {\n        return registerPanel(id, value);\n      }\n    }, [value, id, registerPanel]);\n\n    const [hasFocusableChildren, setHasFocusableChildren] = useState(false);\n    useEffect(() => {\n      if (!panelRef.current) return;\n\n      const detectFocusableChildren = () => {\n        requestAnimationFrame(() => {\n          if (!panelRef.current) return;\n          const elements = tabbable(panelRef.current);\n          setHasFocusableChildren(elements.length > 0);\n        });\n      };\n\n      const observer = new MutationObserver(() => {\n        detectFocusableChildren();\n      });\n\n      requestAnimationFrame(() => {\n        detectFocusableChildren();\n      });\n\n      observer.observe(panelRef.current, {\n        childList: true,\n        subtree: true,\n        attributes: true,\n      });\n\n      return () => {\n        observer.disconnect();\n      };\n    }, []);\n\n    const hidden = selected !== value;\n    const tabId = getTabId(value);\n\n    return (\n      <div\n        id={id}\n        ref={handleRef}\n        role=\"tabpanel\"\n        aria-labelledby={tabId}\n        className={clsx(withBaseName(), className)}\n        hidden={hidden || undefined}\n        tabIndex={hidden || hasFocusableChildren ? undefined : 0}\n        {...rest}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n"],"names":["TabNextPanel"],"mappings":";;;;;;;;;;AA2BA,MAAM,YAAA,GAAe,aAAa,kBAAkB,CAAA;AAE7C,MAAM,YAAe,GAAA,UAAA;AAAA,EAC1B,SAASA,aAAa,CAAA,KAAA,EAAO,GAAK,EAAA;AAChC,IAAM,MAAA,EAAE,WAAW,QAAU,EAAA,EAAA,EAAI,QAAQ,KAAO,EAAA,GAAG,MAAS,GAAA,KAAA;AAC5D,IAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,qBAAA;AAAA,MACR,GAAK,EAAA,WAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AACD,IAAM,MAAA,EAAA,GAAK,MAAM,MAAM,CAAA;AACvB,IAAA,MAAM,EAAE,aAAA,EAAe,QAAU,EAAA,QAAA,KAAa,WAAY,EAAA;AAE1D,IAAM,MAAA,QAAA,GAAW,OAAuB,IAAI,CAAA;AAC5C,IAAM,MAAA,SAAA,GAAY,UAAW,CAAA,QAAA,EAAU,GAAG,CAAA;AAE1C,IAAA,yBAAA,CAA0B,MAAM;AAC9B,MAAA,IAAI,SAAS,EAAI,EAAA;AACf,QAAO,OAAA,aAAA,CAAc,IAAI,KAAK,CAAA;AAAA;AAChC,KACC,EAAA,CAAC,KAAO,EAAA,EAAA,EAAI,aAAa,CAAC,CAAA;AAE7B,IAAA,MAAM,CAAC,oBAAA,EAAsB,uBAAuB,CAAA,GAAI,SAAS,KAAK,CAAA;AACtE,IAAA,SAAA,CAAU,MAAM;AACd,MAAI,IAAA,CAAC,SAAS,OAAS,EAAA;AAEvB,MAAA,MAAM,0BAA0B,MAAM;AACpC,QAAA,qBAAA,CAAsB,MAAM;AAC1B,UAAI,IAAA,CAAC,SAAS,OAAS,EAAA;AACvB,UAAM,MAAA,QAAA,GAAW,QAAS,CAAA,QAAA,CAAS,OAAO,CAAA;AAC1C,UAAwB,uBAAA,CAAA,QAAA,CAAS,SAAS,CAAC,CAAA;AAAA,SAC5C,CAAA;AAAA,OACH;AAEA,MAAM,MAAA,QAAA,GAAW,IAAI,gBAAA,CAAiB,MAAM;AAC1C,QAAwB,uBAAA,EAAA;AAAA,OACzB,CAAA;AAED,MAAA,qBAAA,CAAsB,MAAM;AAC1B,QAAwB,uBAAA,EAAA;AAAA,OACzB,CAAA;AAED,MAAS,QAAA,CAAA,OAAA,CAAQ,SAAS,OAAS,EAAA;AAAA,QACjC,SAAW,EAAA,IAAA;AAAA,QACX,OAAS,EAAA,IAAA;AAAA,QACT,UAAY,EAAA;AAAA,OACb,CAAA;AAED,MAAA,OAAO,MAAM;AACX,QAAA,QAAA,CAAS,UAAW,EAAA;AAAA,OACtB;AAAA,KACF,EAAG,EAAE,CAAA;AAEL,IAAA,MAAM,SAAS,QAAa,KAAA,KAAA;AAC5B,IAAM,MAAA,KAAA,GAAQ,SAAS,KAAK,CAAA;AAE5B,IACE,uBAAA,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,EAAA;AAAA,QACA,GAAK,EAAA,SAAA;AAAA,QACL,IAAK,EAAA,UAAA;AAAA,QACL,iBAAiB,EAAA,KAAA;AAAA,QACjB,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,QACzC,QAAQ,MAAU,IAAA,KAAA,CAAA;AAAA,QAClB,QAAA,EAAU,MAAU,IAAA,oBAAA,GAAuB,KAAY,CAAA,GAAA,CAAA;AAAA,QACtD,GAAG,IAAA;AAAA,QAEH;AAAA;AAAA,KACH;AAAA;AAGN;;;;"}

package/esm/tabs-next/TabNextTrigger.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabNextTrigger.js","sources":["../../src/tabs-next/TabNextTrigger.tsx"],"sourcesContent":["import {\n  makePrefixer,\n  useForkRef,\n  useIsomorphicLayoutEffect,\n} from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  type KeyboardEvent,\n  type MouseEvent,\n  forwardRef,\n  useRef,\n} from \"react\";\nimport { useTabNext } from \"./TabNextContext\";\nimport tabTriggerCss from \"./TabNextTrigger.css\";\nimport { useTabsNext } from \"./TabsNextContext\";\n\nexport interface TabNextTriggerProps\n  extends ComponentPropsWithoutRef<\"button\"> {\n  debugLabel?: string;\n}\n\nconst withBaseName = makePrefixer(\"saltTabNextTrigger\");\n\nfunction getAriaDescription(count: number) {\n  if (count < 1) {\n    return undefined;\n  }\n\n  if (count === 1) {\n    return \"1 action available\";\n  }\n\n  return `${count} actions available`;\n}\n\nexport const TabNextTrigger = forwardRef<\n  HTMLButtonElement,\n  TabNextTriggerProps\n>(function TabNextTrigger(props, ref) {\n  const { children, id: idProp, onClick, onKeyDown, ...rest } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-tab-next-trigger\",\n    css: tabTriggerCss,\n    window: targetWindow,\n  });\n\n  const { setSelected, registerTab, getPanelId } = useTabsNext();\n  const { selected, value, focused, disabled, tabId, actions } = useTabNext();\n\n  const tabRef = useRef<HTMLButtonElement>(null);\n\n  const id = tabId;\n\n  useIsomorphicLayoutEffect(() => {\n    if (value && id && tabRef.current) {\n      return registerTab({ id, value, element: tabRef.current });\n    }\n  }, [value, id, registerTab]);\n\n  const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n    setSelected(event, value);\n  };\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {\n    onKeyDown?.(event);\n\n    if (event.key === \"Enter\" || event.key === \" \") {\n      setSelected(event, value);\n    }\n  };\n\n  const handleRef = useForkRef<HTMLButtonElement>(tabRef, ref);\n  const panelId = getPanelId(value);\n\n  return (\n    <button\n      aria-selected={selected}\n      aria-disabled={disabled}\n      aria-controls={panelId}\n      // eslint-disable-next-line react/no-unknown-property\n      aria-actions={clsx(actions) || undefined}\n      aria-description={getAriaDescription(actions.length)}\n      tabIndex={focused || selected ? undefined : -1}\n      role=\"tab\"\n      type=\"button\"\n      onClick={!disabled ? handleClick : undefined}\n      onKeyDown={!disabled ? handleKeyDown : undefined}\n      className={withBaseName()}\n      id={id}\n      ref={handleRef}\n      {...rest}\n    >\n      {children}\n    </button>\n  );\n});\n"],"names":["TabNextTrigger"],"mappings":";;;;;;;;;;AAwBA,MAAM,YAAA,GAAe,aAAa,oBAAoB,CAAA;AAEtD,SAAS,mBAAmB,KAAe,EAAA;AACzC,EAAA,IAAI,QAAQ,CAAG,EAAA;AACb,IAAO,OAAA,KAAA,CAAA;AAAA;AAGT,EAAA,IAAI,UAAU,CAAG,EAAA;AACf,IAAO,OAAA,oBAAA;AAAA;AAGT,EAAA,OAAO,GAAG,KAAK,CAAA,kBAAA,CAAA;AACjB;AAEO,MAAM,cAAiB,GAAA,UAAA,CAG5B,SAASA,eAAAA,CAAe,OAAO,GAAK,EAAA;AACpC,EAAM,MAAA,EAAE,UAAU,EAAI,EAAA,MAAA,EAAQ,SAAS,SAAW,EAAA,GAAG,MAAS,GAAA,KAAA;AAE9D,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,uBAAA;AAAA,IACR,GAAK,EAAA,aAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAA,MAAM,EAAE,WAAA,EAAa,WAAa,EAAA,UAAA,KAAe,WAAY,EAAA;AAC7D,EAAM,MAAA,EAAE,UAAU,KAAO,EAAA,OAAA,EAAS,UAAU,KAAO,EAAA,OAAA,KAAY,UAAW,EAAA;AAE1E,EAAM,MAAA,MAAA,GAAS,OAA0B,IAAI,CAAA;AAE7C,EAAA,MAAM,EAAK,GAAA,KAAA;AAEX,EAAA,yBAAA,CAA0B,MAAM;AAC9B,IAAI,IAAA,KAAA,IAAS,EAAM,IAAA,MAAA,CAAO,OAAS,EAAA;AACjC,MAAA,OAAO,YAAY,EAAE,EAAA,EAAI,OAAO,OAAS,EAAA,MAAA,CAAO,SAAS,CAAA;AAAA;AAC3D,GACC,EAAA,CAAC,KAAO,EAAA,EAAA,EAAI,WAAW,CAAC,CAAA;AAE3B,EAAM,MAAA,WAAA,GAAc,CAAC,KAAyC,KAAA;AAC5D,IAAA,WAAA,CAAY,OAAO,KAAK,CAAA;AAAA,GAC1B;AAEA,EAAM,MAAA,aAAA,GAAgB,CAAC,KAA4C,KAAA;AACjE,IAAA,SAAA,GAAY,KAAK,CAAA;AAEjB,IAAA,IAAI,KAAM,CAAA,GAAA,KAAQ,OAAW,IAAA,KAAA,CAAM,QAAQ,GAAK,EAAA;AAC9C,MAAA,WAAA,CAAY,OAAO,KAAK,CAAA;AAAA;AAC1B,GACF;AAEA,EAAM,MAAA,SAAA,GAAY,UAA8B,CAAA,MAAA,EAAQ,GAAG,CAAA;AAC3D,EAAM,MAAA,OAAA,GAAU,WAAW,KAAK,CAAA;AAEhC,EACE,uBAAA,GAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,eAAe,EAAA,QAAA;AAAA,MACf,eAAe,EAAA,QAAA;AAAA,MACf,eAAe,EAAA,OAAA;AAAA,MAEf,cAAA,EAAc,IAAK,CAAA,OAAO,CAAK,IAAA,KAAA,CAAA;AAAA,MAC/B,kBAAA,EAAkB,kBAAmB,CAAA,OAAA,CAAQ,MAAM,CAAA;AAAA,MACnD,QAAA,EAAU,OAAW,IAAA,QAAA,GAAW,KAAY,CAAA,GAAA,CAAA,CAAA;AAAA,MAC5C,IAAK,EAAA,KAAA;AAAA,MACL,IAAK,EAAA,QAAA;AAAA,MACL,OAAA,EAAS,CAAC,QAAA,GAAW,WAAc,GAAA,KAAA,CAAA;AAAA,MACnC,SAAA,EAAW,CAAC,QAAA,GAAW,aAAgB,GAAA,KAAA,CAAA;AAAA,MACvC,WAAW,YAAa,EAAA;AAAA,MACxB,EAAA;AAAA,MACA,GAAK,EAAA,SAAA;AAAA,MACJ,GAAG,IAAA;AAAA,MAEH;AAAA;AAAA,GACH;AAEJ,CAAC;;;;"}
+{"version":3,"file":"TabNextTrigger.js","sources":["../../../../packages/vuu-ui-controls/src/tabs-next/TabNextTrigger.tsx"],"sourcesContent":["import {\n  makePrefixer,\n  useForkRef,\n  useIsomorphicLayoutEffect,\n} from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  type KeyboardEvent,\n  type MouseEvent,\n  forwardRef,\n  useRef,\n} from \"react\";\nimport { useTabNext } from \"./TabNextContext\";\nimport tabTriggerCss from \"./TabNextTrigger.css\";\nimport { useTabsNext } from \"./TabsNextContext\";\n\nexport interface TabNextTriggerProps\n  extends ComponentPropsWithoutRef<\"button\"> {\n  debugLabel?: string;\n}\n\nconst withBaseName = makePrefixer(\"saltTabNextTrigger\");\n\nfunction getAriaDescription(count: number) {\n  if (count < 1) {\n    return undefined;\n  }\n\n  if (count === 1) {\n    return \"1 action available\";\n  }\n\n  return `${count} actions available`;\n}\n\nexport const TabNextTrigger = forwardRef<\n  HTMLButtonElement,\n  TabNextTriggerProps\n>(function TabNextTrigger(props, ref) {\n  const { children, id: idProp, onClick, onKeyDown, ...rest } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-tab-next-trigger\",\n    css: tabTriggerCss,\n    window: targetWindow,\n  });\n\n  const { setSelected, registerTab, getPanelId } = useTabsNext();\n  const { selected, value, focused, disabled, tabId, actions } = useTabNext();\n\n  const tabRef = useRef<HTMLButtonElement>(null);\n\n  const id = tabId;\n\n  useIsomorphicLayoutEffect(() => {\n    if (value && id && tabRef.current) {\n      return registerTab({ id, value, element: tabRef.current });\n    }\n  }, [value, id, registerTab]);\n\n  const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n    setSelected(event, value);\n  };\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {\n    onKeyDown?.(event);\n\n    if (event.key === \"Enter\" || event.key === \" \") {\n      setSelected(event, value);\n    }\n  };\n\n  const handleRef = useForkRef<HTMLButtonElement>(tabRef, ref);\n  const panelId = getPanelId(value);\n\n  return (\n    <button\n      aria-selected={selected}\n      aria-disabled={disabled}\n      aria-controls={panelId}\n      // eslint-disable-next-line react/no-unknown-property\n      aria-actions={clsx(actions) || undefined}\n      aria-description={getAriaDescription(actions.length)}\n      tabIndex={focused || selected ? undefined : -1}\n      role=\"tab\"\n      type=\"button\"\n      onClick={!disabled ? handleClick : undefined}\n      onKeyDown={!disabled ? handleKeyDown : undefined}\n      className={withBaseName()}\n      id={id}\n      ref={handleRef}\n      {...rest}\n    >\n      {children}\n    </button>\n  );\n});\n"],"names":["TabNextTrigger"],"mappings":";;;;;;;;;;AAwBA,MAAM,YAAA,GAAe,aAAa,oBAAoB,CAAA;AAEtD,SAAS,mBAAmB,KAAe,EAAA;AACzC,EAAA,IAAI,QAAQ,CAAG,EAAA;AACb,IAAO,OAAA,KAAA,CAAA;AAAA;AAGT,EAAA,IAAI,UAAU,CAAG,EAAA;AACf,IAAO,OAAA,oBAAA;AAAA;AAGT,EAAA,OAAO,GAAG,KAAK,CAAA,kBAAA,CAAA;AACjB;AAEO,MAAM,cAAiB,GAAA,UAAA,CAG5B,SAASA,eAAAA,CAAe,OAAO,GAAK,EAAA;AACpC,EAAM,MAAA,EAAE,UAAU,EAAI,EAAA,MAAA,EAAQ,SAAS,SAAW,EAAA,GAAG,MAAS,GAAA,KAAA;AAE9D,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,uBAAA;AAAA,IACR,GAAK,EAAA,aAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAA,MAAM,EAAE,WAAA,EAAa,WAAa,EAAA,UAAA,KAAe,WAAY,EAAA;AAC7D,EAAM,MAAA,EAAE,UAAU,KAAO,EAAA,OAAA,EAAS,UAAU,KAAO,EAAA,OAAA,KAAY,UAAW,EAAA;AAE1E,EAAM,MAAA,MAAA,GAAS,OAA0B,IAAI,CAAA;AAE7C,EAAA,MAAM,EAAK,GAAA,KAAA;AAEX,EAAA,yBAAA,CAA0B,MAAM;AAC9B,IAAI,IAAA,KAAA,IAAS,EAAM,IAAA,MAAA,CAAO,OAAS,EAAA;AACjC,MAAA,OAAO,YAAY,EAAE,EAAA,EAAI,OAAO,OAAS,EAAA,MAAA,CAAO,SAAS,CAAA;AAAA;AAC3D,GACC,EAAA,CAAC,KAAO,EAAA,EAAA,EAAI,WAAW,CAAC,CAAA;AAE3B,EAAM,MAAA,WAAA,GAAc,CAAC,KAAyC,KAAA;AAC5D,IAAA,WAAA,CAAY,OAAO,KAAK,CAAA;AAAA,GAC1B;AAEA,EAAM,MAAA,aAAA,GAAgB,CAAC,KAA4C,KAAA;AACjE,IAAA,SAAA,GAAY,KAAK,CAAA;AAEjB,IAAA,IAAI,KAAM,CAAA,GAAA,KAAQ,OAAW,IAAA,KAAA,CAAM,QAAQ,GAAK,EAAA;AAC9C,MAAA,WAAA,CAAY,OAAO,KAAK,CAAA;AAAA;AAC1B,GACF;AAEA,EAAM,MAAA,SAAA,GAAY,UAA8B,CAAA,MAAA,EAAQ,GAAG,CAAA;AAC3D,EAAM,MAAA,OAAA,GAAU,WAAW,KAAK,CAAA;AAEhC,EACE,uBAAA,GAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,eAAe,EAAA,QAAA;AAAA,MACf,eAAe,EAAA,QAAA;AAAA,MACf,eAAe,EAAA,OAAA;AAAA,MAEf,cAAA,EAAc,IAAK,CAAA,OAAO,CAAK,IAAA,KAAA,CAAA;AAAA,MAC/B,kBAAA,EAAkB,kBAAmB,CAAA,OAAA,CAAQ,MAAM,CAAA;AAAA,MACnD,QAAA,EAAU,OAAW,IAAA,QAAA,GAAW,KAAY,CAAA,GAAA,CAAA,CAAA;AAAA,MAC5C,IAAK,EAAA,KAAA;AAAA,MACL,IAAK,EAAA,QAAA;AAAA,MACL,OAAA,EAAS,CAAC,QAAA,GAAW,WAAc,GAAA,KAAA,CAAA;AAAA,MACnC,SAAA,EAAW,CAAC,QAAA,GAAW,aAAgB,GAAA,KAAA,CAAA;AAAA,MACvC,WAAW,YAAa,EAAA;AAAA,MACxB,EAAA;AAAA,MACA,GAAK,EAAA,SAAA;AAAA,MACJ,GAAG,IAAA;AAAA,MAEH;AAAA;AAAA,GACH;AAEJ,CAAC;;;;"}

package/esm/tabs-next/TabOverflowList.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabOverflowList.js","sources":["../../src/tabs-next/TabOverflowList.tsx"],"sourcesContent":["import {\n  FloatingTree,\n  offset,\n  size,\n  useDismiss,\n  useInteractions,\n} from \"@floating-ui/react\";\nimport {\n  Button,\n  makePrefixer,\n  useFloatingUI,\n  useForkRef,\n  useIcon,\n  useId,\n} from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport {\n  Children,\n  type ComponentPropsWithoutRef,\n  type Dispatch,\n  type ReactNode,\n  type Ref,\n  type RefObject,\n  type SetStateAction,\n  forwardRef,\n  useCallback,\n  useRef,\n} from \"react\";\nimport tabOverflowListCss from \"./TabOverflowList.css\";\nimport { useFocusOutside } from \"./hooks/useFocusOutside\";\n\ninterface TabOverflowListProps extends ComponentPropsWithoutRef<\"button\"> {\n  buttonRef?: Ref<HTMLButtonElement | null>;\n  tabstripRef: RefObject<HTMLDivElement | null>;\n  children?: ReactNode;\n  isMeasuring?: boolean;\n  open: boolean;\n  setOpen: Dispatch<SetStateAction<boolean>>;\n}\n\nconst withBaseName = makePrefixer(\"saltTabOverflow\");\n\nexport const TabOverflowList = forwardRef<HTMLDivElement, TabOverflowListProps>(\n  function TabOverflowList(props, ref) {\n    const {\n      buttonRef,\n      tabstripRef,\n      children,\n      isMeasuring,\n      open,\n      setOpen,\n      ...rest\n    } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-tabs-next-overflow-list\",\n      css: tabOverflowListCss,\n      window: targetWindow,\n    });\n\n    const { OverflowIcon } = useIcon();\n\n    const { refs, x, y, strategy, context } = useFloatingUI({\n      open: open,\n      onOpenChange(open, _, reason) {\n        if (reason === \"escape-key\") {\n          queueMicrotask(() => {\n            const allTabs =\n              tabstripRef.current?.querySelectorAll<HTMLElement>(\n                '[role=\"tab\"]:not([aria-hidden])',\n              ) ?? [];\n            const numberOfTabsInOverflow =\n              listRef.current?.querySelectorAll<HTMLElement>('[role=\"tab\"]')\n                .length ?? 0;\n\n            allTabs[allTabs.length - numberOfTabsInOverflow - 1]?.focus({\n              preventScroll: true,\n            });\n          });\n        }\n\n        setOpen(open);\n      },\n      placement: \"bottom-start\",\n      middleware: [\n        offset(1),\n        size({\n          apply({ elements, availableHeight }) {\n            Object.assign(elements.floating.style, {\n              maxHeight: `max(calc((var(--salt-size-base) + var(--salt-spacing-100)) * 5), calc(${availableHeight}px - var(--salt-spacing-100)))`,\n            });\n          },\n        }),\n      ],\n    });\n\n    const { getFloatingProps } = useInteractions([useDismiss(context)]);\n\n    const rootRef = useRef<HTMLDivElement>(null);\n    const handleRootRef = useForkRef(rootRef, ref);\n    const listRef = useRef<HTMLDivElement>(null);\n    const handleListRef = useForkRef<HTMLDivElement>(listRef, refs.setFloating);\n\n    const handleFocusOutside = useCallback(() => {\n      setOpen(false);\n    }, [setOpen]);\n\n    useFocusOutside(\n      rootRef,\n      handleFocusOutside,\n      open,\n      \"[data-floating-ui-portal]\",\n    );\n\n    const handleClick = () => {\n      if (!open) {\n        listRef.current\n          ?.querySelectorAll<HTMLElement>('[role=\"tab\"]')[0]\n          ?.focus({ preventScroll: true });\n      } else {\n        setOpen(false);\n      }\n    };\n\n    const handleFocus = () => {\n      setOpen(true);\n    };\n\n    const handleButtonRef = useForkRef<HTMLButtonElement>(\n      buttonRef,\n      refs.setReference,\n    );\n\n    const listId = useId();\n\n    const childCount = Children.count(children);\n    if (childCount === 0 && !isMeasuring) return null;\n\n    return (\n      <div className={withBaseName()} ref={handleRootRef}>\n        <Button\n          data-overflowbutton\n          tabIndex={-1}\n          appearance=\"transparent\"\n          sentiment=\"neutral\"\n          onClick={handleClick}\n          ref={handleButtonRef}\n          aria-label={`Overflow menu. ${childCount} tabs hidden`}\n          aria-expanded={open}\n          aria-controls={listId}\n          aria-hidden=\"true\"\n          role=\"tab\"\n          aria-haspopup\n          {...rest}\n        >\n          <OverflowIcon aria-hidden />\n        </Button>\n        <FloatingTree>\n          <div\n            ref={handleListRef}\n            {...getFloatingProps({\n              onFocus: handleFocus,\n              role: \"presentation\",\n            })}\n            className={withBaseName(\"list\")}\n            data-hidden={!open}\n            style={\n              open\n                ? { left: x ?? 0, top: y ?? 0, position: strategy }\n                : undefined\n            }\n            id={listId}\n          >\n            <div className={withBaseName(\"listContainer\")}>{children}</div>\n          </div>\n        </FloatingTree>\n      </div>\n    );\n  },\n);\n"],"names":["TabOverflowList","open"],"mappings":"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"}
+{"version":3,"file":"TabOverflowList.js","sources":["../../../../packages/vuu-ui-controls/src/tabs-next/TabOverflowList.tsx"],"sourcesContent":["import {\n  FloatingTree,\n  offset,\n  size,\n  useDismiss,\n  useInteractions,\n} from \"@floating-ui/react\";\nimport {\n  Button,\n  makePrefixer,\n  useFloatingUI,\n  useForkRef,\n  useIcon,\n  useId,\n} from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport {\n  Children,\n  type ComponentPropsWithoutRef,\n  type Dispatch,\n  type ReactNode,\n  type Ref,\n  type RefObject,\n  type SetStateAction,\n  forwardRef,\n  useCallback,\n  useRef,\n} from \"react\";\nimport tabOverflowListCss from \"./TabOverflowList.css\";\nimport { useFocusOutside } from \"./hooks/useFocusOutside\";\n\ninterface TabOverflowListProps extends ComponentPropsWithoutRef<\"button\"> {\n  buttonRef?: Ref<HTMLButtonElement | null>;\n  tabstripRef: RefObject<HTMLDivElement | null>;\n  children?: ReactNode;\n  isMeasuring?: boolean;\n  open: boolean;\n  setOpen: Dispatch<SetStateAction<boolean>>;\n}\n\nconst withBaseName = makePrefixer(\"saltTabOverflow\");\n\nexport const TabOverflowList = forwardRef<HTMLDivElement, TabOverflowListProps>(\n  function TabOverflowList(props, ref) {\n    const {\n      buttonRef,\n      tabstripRef,\n      children,\n      isMeasuring,\n      open,\n      setOpen,\n      ...rest\n    } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-tabs-next-overflow-list\",\n      css: tabOverflowListCss,\n      window: targetWindow,\n    });\n\n    const { OverflowIcon } = useIcon();\n\n    const { refs, x, y, strategy, context } = useFloatingUI({\n      open: open,\n      onOpenChange(open, _, reason) {\n        if (reason === \"escape-key\") {\n          queueMicrotask(() => {\n            const allTabs =\n              tabstripRef.current?.querySelectorAll<HTMLElement>(\n                '[role=\"tab\"]:not([aria-hidden])',\n              ) ?? [];\n            const numberOfTabsInOverflow =\n              listRef.current?.querySelectorAll<HTMLElement>('[role=\"tab\"]')\n                .length ?? 0;\n\n            allTabs[allTabs.length - numberOfTabsInOverflow - 1]?.focus({\n              preventScroll: true,\n            });\n          });\n        }\n\n        setOpen(open);\n      },\n      placement: \"bottom-start\",\n      middleware: [\n        offset(1),\n        size({\n          apply({ elements, availableHeight }) {\n            Object.assign(elements.floating.style, {\n              maxHeight: `max(calc((var(--salt-size-base) + var(--salt-spacing-100)) * 5), calc(${availableHeight}px - var(--salt-spacing-100)))`,\n            });\n          },\n        }),\n      ],\n    });\n\n    const { getFloatingProps } = useInteractions([useDismiss(context)]);\n\n    const rootRef = useRef<HTMLDivElement>(null);\n    const handleRootRef = useForkRef(rootRef, ref);\n    const listRef = useRef<HTMLDivElement>(null);\n    const handleListRef = useForkRef<HTMLDivElement>(listRef, refs.setFloating);\n\n    const handleFocusOutside = useCallback(() => {\n      setOpen(false);\n    }, [setOpen]);\n\n    useFocusOutside(\n      rootRef,\n      handleFocusOutside,\n      open,\n      \"[data-floating-ui-portal]\",\n    );\n\n    const handleClick = () => {\n      if (!open) {\n        listRef.current\n          ?.querySelectorAll<HTMLElement>('[role=\"tab\"]')[0]\n          ?.focus({ preventScroll: true });\n      } else {\n        setOpen(false);\n      }\n    };\n\n    const handleFocus = () => {\n      setOpen(true);\n    };\n\n    const handleButtonRef = useForkRef<HTMLButtonElement>(\n      buttonRef,\n      refs.setReference,\n    );\n\n    const listId = useId();\n\n    const childCount = Children.count(children);\n    if (childCount === 0 && !isMeasuring) return null;\n\n    return (\n      <div className={withBaseName()} ref={handleRootRef}>\n        <Button\n          data-overflowbutton\n          tabIndex={-1}\n          appearance=\"transparent\"\n          sentiment=\"neutral\"\n          onClick={handleClick}\n          ref={handleButtonRef}\n          aria-label={`Overflow menu. ${childCount} tabs hidden`}\n          aria-expanded={open}\n          aria-controls={listId}\n          aria-hidden=\"true\"\n          role=\"tab\"\n          aria-haspopup\n          {...rest}\n        >\n          <OverflowIcon aria-hidden />\n        </Button>\n        <FloatingTree>\n          <div\n            ref={handleListRef}\n            {...getFloatingProps({\n              onFocus: handleFocus,\n              role: \"presentation\",\n            })}\n            className={withBaseName(\"list\")}\n            data-hidden={!open}\n            style={\n              open\n                ? { left: x ?? 0, top: y ?? 0, position: strategy }\n                : undefined\n            }\n            id={listId}\n          >\n            <div className={withBaseName(\"listContainer\")}>{children}</div>\n          </div>\n        </FloatingTree>\n      </div>\n    );\n  },\n);\n"],"names":["TabOverflowList","open"],"mappings":"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"}

package/esm/tabs-next/TabsNext.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabsNext.js","sources":["../../src/tabs-next/TabsNext.tsx"],"sourcesContent":["import {\n  type ComponentPropsWithoutRef,\n  type ReactNode,\n  type SyntheticEvent,\n  forwardRef,\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\n\nimport {\n  makePrefixer,\n  useControlled,\n  useEventCallback,\n  useIsomorphicLayoutEffect,\n} from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { type Item, TabsNextContext } from \"./TabsNextContext\";\nimport { useCollection } from \"./hooks/useCollection\";\n\nexport interface TabsNextProps\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\"> {\n  children?: ReactNode;\n  /**\n   * The default value. Use when the component is not controlled.\n   */\n  defaultValue?: string;\n  /**\n   * The value. Use when the component is controlled.\n   */\n  value?: string;\n  /**\n   * Callback fired when the selection changes. The event will be null when selection is moved automatically.\n   */\n  onChange?: (event: SyntheticEvent | null, value: string) => void;\n}\n\nconst withBaseName = makePrefixer(\"saltTabsNext\");\n\nexport const TabsNext = forwardRef<HTMLDivElement, TabsNextProps>(\n  function TabsNext(props, ref) {\n    const { className, children, value, defaultValue, onChange, ...rest } =\n      props;\n\n    const [valueToTabIdMap, setValueToIdMap] = useState({\n      map: new Map<string, string>(),\n    });\n    const [valueToPanelIdMap, setValueToPanelIdMap] = useState({\n      map: new Map<string, string>(),\n    });\n\n    const {\n      registerItem,\n      item,\n      getNext,\n      getPrevious,\n      getFirst,\n      getLast,\n      items,\n    } = useCollection({ wrap: true });\n\n    const activeTab = useRef<Pick<Item, \"id\" | \"value\">>(undefined);\n    const returnFocus = useRef<string | undefined>(undefined);\n\n    const [menuOpen, setMenuOpen] = useState(false);\n\n    const [selected, setSelectedState] = useControlled({\n      controlled: value,\n      default: defaultValue,\n      name: \"TabListNext\",\n      state: \"selected\",\n    });\n\n    // This ref is needed so we can read the current selected item in the containFocus() function.\n    const selectedRef = useRef<string | undefined>(undefined);\n    useIsomorphicLayoutEffect(() => {\n      selectedRef.current = selected;\n    }, [selected]);\n\n    const setSelected = useCallback(\n      (event: SyntheticEvent | null, value: string) => {\n        setMenuOpen(false);\n        setSelectedState(value);\n        onChange?.(event, value);\n      },\n      [onChange],\n    );\n\n    const registerTab = useEventCallback((item: Item) => {\n      const cleanup = registerItem(item);\n      setValueToIdMap(({ map }) => {\n        map.set(item.value, item.id);\n        return { map };\n      });\n\n      return () => {\n        const items = cleanup();\n        setValueToIdMap(({ map }) => {\n          map.delete(item.value);\n          return { map };\n        });\n\n        if (activeTab.current?.value !== item.value) {\n          return;\n        }\n\n        returnFocus.current = item.value;\n\n        const containFocus = () => {\n          const activeIndex = items.current.findIndex(\n            (i) => item.value === i.value,\n          );\n\n          const nextIndex =\n            activeIndex === items.current.length - 1\n              ? items.current.length - 2\n              : activeIndex + 1;\n\n          const nextActive = items.current[nextIndex];\n\n          returnFocus.current = nextActive.value;\n\n          if (selectedRef.current === item.value) {\n            setSelected(null, nextActive.value);\n          }\n\n          nextActive?.element?.focus();\n        };\n\n        if (document.activeElement === document.body) {\n          requestAnimationFrame(() => {\n            if (document.activeElement === document.body) {\n              containFocus();\n            }\n          });\n        } else {\n          const handleFocusOut = (event: FocusEvent) => {\n            if (!event.relatedTarget) {\n              requestAnimationFrame(() => {\n                if (document.activeElement === document.body) {\n                  containFocus();\n                }\n              });\n            }\n          };\n\n          item.element.ownerDocument.addEventListener(\n            \"focusout\",\n            handleFocusOut,\n            {\n              once: true,\n            },\n          );\n\n          setTimeout(() => {\n            item.element.ownerDocument.removeEventListener(\n              \"focusout\",\n              handleFocusOut,\n            );\n          }, 1000);\n        }\n      };\n    });\n\n    const registerPanel = useCallback((id: string, value: string) => {\n      setValueToPanelIdMap(({ map }) => {\n        map.set(value, id);\n        return { map };\n      });\n      return () => {\n        setValueToIdMap(({ map }) => {\n          map.delete(value);\n          return { map };\n        });\n      };\n    }, []);\n\n    const getPanelId = useCallback(\n      (value: string) => {\n        return valueToPanelIdMap.map.get(value);\n      },\n      [valueToPanelIdMap],\n    );\n\n    const getTabId = useCallback(\n      (value: string) => {\n        return valueToTabIdMap.map.get(value);\n      },\n      [valueToTabIdMap],\n    );\n\n    const context = useMemo(\n      () => ({\n        registerTab,\n        registerPanel,\n        getPanelId,\n        getTabId,\n        selected,\n        setSelected,\n        item,\n        getNext,\n        getPrevious,\n        getFirst,\n        getLast,\n        items,\n        activeTab,\n        menuOpen,\n        setMenuOpen,\n        returnFocus,\n      }),\n      [\n        registerPanel,\n        registerTab,\n        getPanelId,\n        getTabId,\n        selected,\n        setSelected,\n        item,\n        getNext,\n        getPrevious,\n        getFirst,\n        getLast,\n        items,\n        menuOpen,\n      ],\n    );\n\n    return (\n      <TabsNextContext.Provider value={context}>\n        <div className={clsx(withBaseName(), className)} ref={ref} {...rest}>\n          {children}\n        </div>\n      </TabsNextContext.Provider>\n    );\n  },\n);\n"],"names":["TabsNext","value","item","items"],"mappings":"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"}
+{"version":3,"file":"TabsNext.js","sources":["../../../../packages/vuu-ui-controls/src/tabs-next/TabsNext.tsx"],"sourcesContent":["import {\n  type ComponentPropsWithoutRef,\n  type ReactNode,\n  type SyntheticEvent,\n  forwardRef,\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\n\nimport {\n  makePrefixer,\n  useControlled,\n  useEventCallback,\n  useIsomorphicLayoutEffect,\n} from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { type Item, TabsNextContext } from \"./TabsNextContext\";\nimport { useCollection } from \"./hooks/useCollection\";\n\nexport interface TabsNextProps\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\"> {\n  children?: ReactNode;\n  /**\n   * The default value. Use when the component is not controlled.\n   */\n  defaultValue?: string;\n  /**\n   * The value. Use when the component is controlled.\n   */\n  value?: string;\n  /**\n   * Callback fired when the selection changes. The event will be null when selection is moved automatically.\n   */\n  onChange?: (event: SyntheticEvent | null, value: string) => void;\n}\n\nconst withBaseName = makePrefixer(\"saltTabsNext\");\n\nexport const TabsNext = forwardRef<HTMLDivElement, TabsNextProps>(\n  function TabsNext(props, ref) {\n    const { className, children, value, defaultValue, onChange, ...rest } =\n      props;\n\n    const [valueToTabIdMap, setValueToIdMap] = useState({\n      map: new Map<string, string>(),\n    });\n    const [valueToPanelIdMap, setValueToPanelIdMap] = useState({\n      map: new Map<string, string>(),\n    });\n\n    const {\n      registerItem,\n      item,\n      getNext,\n      getPrevious,\n      getFirst,\n      getLast,\n      items,\n    } = useCollection({ wrap: true });\n\n    const activeTab = useRef<Pick<Item, \"id\" | \"value\">>(undefined);\n    const returnFocus = useRef<string | undefined>(undefined);\n\n    const [menuOpen, setMenuOpen] = useState(false);\n\n    const [selected, setSelectedState] = useControlled({\n      controlled: value,\n      default: defaultValue,\n      name: \"TabListNext\",\n      state: \"selected\",\n    });\n\n    // This ref is needed so we can read the current selected item in the containFocus() function.\n    const selectedRef = useRef<string | undefined>(undefined);\n    useIsomorphicLayoutEffect(() => {\n      selectedRef.current = selected;\n    }, [selected]);\n\n    const setSelected = useCallback(\n      (event: SyntheticEvent | null, value: string) => {\n        setMenuOpen(false);\n        setSelectedState(value);\n        onChange?.(event, value);\n      },\n      [onChange],\n    );\n\n    const registerTab = useEventCallback((item: Item) => {\n      const cleanup = registerItem(item);\n      setValueToIdMap(({ map }) => {\n        map.set(item.value, item.id);\n        return { map };\n      });\n\n      return () => {\n        const items = cleanup();\n        setValueToIdMap(({ map }) => {\n          map.delete(item.value);\n          return { map };\n        });\n\n        if (activeTab.current?.value !== item.value) {\n          return;\n        }\n\n        returnFocus.current = item.value;\n\n        const containFocus = () => {\n          const activeIndex = items.current.findIndex(\n            (i) => item.value === i.value,\n          );\n\n          const nextIndex =\n            activeIndex === items.current.length - 1\n              ? items.current.length - 2\n              : activeIndex + 1;\n\n          const nextActive = items.current[nextIndex];\n\n          returnFocus.current = nextActive.value;\n\n          if (selectedRef.current === item.value) {\n            setSelected(null, nextActive.value);\n          }\n\n          nextActive?.element?.focus();\n        };\n\n        if (document.activeElement === document.body) {\n          requestAnimationFrame(() => {\n            if (document.activeElement === document.body) {\n              containFocus();\n            }\n          });\n        } else {\n          const handleFocusOut = (event: FocusEvent) => {\n            if (!event.relatedTarget) {\n              requestAnimationFrame(() => {\n                if (document.activeElement === document.body) {\n                  containFocus();\n                }\n              });\n            }\n          };\n\n          item.element.ownerDocument.addEventListener(\n            \"focusout\",\n            handleFocusOut,\n            {\n              once: true,\n            },\n          );\n\n          setTimeout(() => {\n            item.element.ownerDocument.removeEventListener(\n              \"focusout\",\n              handleFocusOut,\n            );\n          }, 1000);\n        }\n      };\n    });\n\n    const registerPanel = useCallback((id: string, value: string) => {\n      setValueToPanelIdMap(({ map }) => {\n        map.set(value, id);\n        return { map };\n      });\n      return () => {\n        setValueToIdMap(({ map }) => {\n          map.delete(value);\n          return { map };\n        });\n      };\n    }, []);\n\n    const getPanelId = useCallback(\n      (value: string) => {\n        return valueToPanelIdMap.map.get(value);\n      },\n      [valueToPanelIdMap],\n    );\n\n    const getTabId = useCallback(\n      (value: string) => {\n        return valueToTabIdMap.map.get(value);\n      },\n      [valueToTabIdMap],\n    );\n\n    const context = useMemo(\n      () => ({\n        registerTab,\n        registerPanel,\n        getPanelId,\n        getTabId,\n        selected,\n        setSelected,\n        item,\n        getNext,\n        getPrevious,\n        getFirst,\n        getLast,\n        items,\n        activeTab,\n        menuOpen,\n        setMenuOpen,\n        returnFocus,\n      }),\n      [\n        registerPanel,\n        registerTab,\n        getPanelId,\n        getTabId,\n        selected,\n        setSelected,\n        item,\n        getNext,\n        getPrevious,\n        getFirst,\n        getLast,\n        items,\n        menuOpen,\n      ],\n    );\n\n    return (\n      <TabsNextContext.Provider value={context}>\n        <div className={clsx(withBaseName(), className)} ref={ref} {...rest}>\n          {children}\n        </div>\n      </TabsNextContext.Provider>\n    );\n  },\n);\n"],"names":["TabsNext","value","item","items"],"mappings":";;;;;;;AAsCA,MAAM,YAAA,GAAe,aAAa,cAAc,CAAA;AAEzC,MAAM,QAAW,GAAA,UAAA;AAAA,EACtB,SAASA,SAAS,CAAA,KAAA,EAAO,GAAK,EAAA;AAC5B,IAAM,MAAA,EAAE,WAAW,QAAU,EAAA,KAAA,EAAO,cAAc,QAAU,EAAA,GAAG,MAC7D,GAAA,KAAA;AAEF,IAAA,MAAM,CAAC,eAAA,EAAiB,eAAe,CAAA,GAAI,QAAS,CAAA;AAAA,MAClD,GAAA,sBAAS,GAAoB;AAAA,KAC9B,CAAA;AACD,IAAA,MAAM,CAAC,iBAAA,EAAmB,oBAAoB,CAAA,GAAI,QAAS,CAAA;AAAA,MACzD,GAAA,sBAAS,GAAoB;AAAA,KAC9B,CAAA;AAED,IAAM,MAAA;AAAA,MACJ,YAAA;AAAA,MACA,IAAA;AAAA,MACA,OAAA;AAAA,MACA,WAAA;AAAA,MACA,QAAA;AAAA,MACA,OAAA;AAAA,MACA;AAAA,KACE,GAAA,aAAA,CAAc,EAAE,IAAA,EAAM,MAAM,CAAA;AAEhC,IAAM,MAAA,SAAA,GAAY,OAAmC,KAAS,CAAA,CAAA;AAC9D,IAAM,MAAA,WAAA,GAAc,OAA2B,KAAS,CAAA,CAAA;AAExD,IAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAI,SAAS,KAAK,CAAA;AAE9C,IAAA,MAAM,CAAC,QAAA,EAAU,gBAAgB,CAAA,GAAI,aAAc,CAAA;AAAA,MACjD,UAAY,EAAA,KAAA;AAAA,MACZ,OAAS,EAAA,YAAA;AAAA,MACT,IAAM,EAAA,aAAA;AAAA,MACN,KAAO,EAAA;AAAA,KACR,CAAA;AAGD,IAAM,MAAA,WAAA,GAAc,OAA2B,KAAS,CAAA,CAAA;AACxD,IAAA,yBAAA,CAA0B,MAAM;AAC9B,MAAA,WAAA,CAAY,OAAU,GAAA,QAAA;AAAA,KACxB,EAAG,CAAC,QAAQ,CAAC,CAAA;AAEb,IAAA,MAAM,WAAc,GAAA,WAAA;AAAA,MAClB,CAAC,OAA8BC,MAAkB,KAAA;AAC/C,QAAA,WAAA,CAAY,KAAK,CAAA;AACjB,QAAA,gBAAA,CAAiBA,MAAK,CAAA;AACtB,QAAA,QAAA,GAAW,OAAOA,MAAK,CAAA;AAAA,OACzB;AAAA,MACA,CAAC,QAAQ;AAAA,KACX;AAEA,IAAM,MAAA,WAAA,GAAc,gBAAiB,CAAA,CAACC,KAAe,KAAA;AACnD,MAAM,MAAA,OAAA,GAAU,aAAaA,KAAI,CAAA;AACjC,MAAgB,eAAA,CAAA,CAAC,EAAE,GAAA,EAAU,KAAA;AAC3B,QAAA,GAAA,CAAI,GAAIA,CAAAA,KAAAA,CAAK,KAAOA,EAAAA,KAAAA,CAAK,EAAE,CAAA;AAC3B,QAAA,OAAO,EAAE,GAAI,EAAA;AAAA,OACd,CAAA;AAED,MAAA,OAAO,MAAM;AACX,QAAA,MAAMC,SAAQ,OAAQ,EAAA;AACtB,QAAgB,eAAA,CAAA,CAAC,EAAE,GAAA,EAAU,KAAA;AAC3B,UAAI,GAAA,CAAA,MAAA,CAAOD,MAAK,KAAK,CAAA;AACrB,UAAA,OAAO,EAAE,GAAI,EAAA;AAAA,SACd,CAAA;AAED,QAAA,IAAI,SAAU,CAAA,OAAA,EAAS,KAAUA,KAAAA,KAAAA,CAAK,KAAO,EAAA;AAC3C,UAAA;AAAA;AAGF,QAAA,WAAA,CAAY,UAAUA,KAAK,CAAA,KAAA;AAE3B,QAAA,MAAM,eAAe,MAAM;AACzB,UAAM,MAAA,WAAA,GAAcC,OAAM,OAAQ,CAAA,SAAA;AAAA,YAChC,CAAC,CAAA,KAAMD,KAAK,CAAA,KAAA,KAAU,CAAE,CAAA;AAAA,WAC1B;AAEA,UAAM,MAAA,SAAA,GACJ,WAAgBC,KAAAA,MAAAA,CAAM,OAAQ,CAAA,MAAA,GAAS,IACnCA,MAAM,CAAA,OAAA,CAAQ,MAAS,GAAA,CAAA,GACvB,WAAc,GAAA,CAAA;AAEpB,UAAM,MAAA,UAAA,GAAaA,MAAM,CAAA,OAAA,CAAQ,SAAS,CAAA;AAE1C,UAAA,WAAA,CAAY,UAAU,UAAW,CAAA,KAAA;AAEjC,UAAI,IAAA,WAAA,CAAY,OAAYD,KAAAA,KAAAA,CAAK,KAAO,EAAA;AACtC,YAAY,WAAA,CAAA,IAAA,EAAM,WAAW,KAAK,CAAA;AAAA;AAGpC,UAAA,UAAA,EAAY,SAAS,KAAM,EAAA;AAAA,SAC7B;AAEA,QAAI,IAAA,QAAA,CAAS,aAAkB,KAAA,QAAA,CAAS,IAAM,EAAA;AAC5C,UAAA,qBAAA,CAAsB,MAAM;AAC1B,YAAI,IAAA,QAAA,CAAS,aAAkB,KAAA,QAAA,CAAS,IAAM,EAAA;AAC5C,cAAa,YAAA,EAAA;AAAA;AACf,WACD,CAAA;AAAA,SACI,MAAA;AACL,UAAM,MAAA,cAAA,GAAiB,CAAC,KAAsB,KAAA;AAC5C,YAAI,IAAA,CAAC,MAAM,aAAe,EAAA;AACxB,cAAA,qBAAA,CAAsB,MAAM;AAC1B,gBAAI,IAAA,QAAA,CAAS,aAAkB,KAAA,QAAA,CAAS,IAAM,EAAA;AAC5C,kBAAa,YAAA,EAAA;AAAA;AACf,eACD,CAAA;AAAA;AACH,WACF;AAEA,UAAAA,KAAAA,CAAK,QAAQ,aAAc,CAAA,gBAAA;AAAA,YACzB,UAAA;AAAA,YACA,cAAA;AAAA,YACA;AAAA,cACE,IAAM,EAAA;AAAA;AACR,WACF;AAEA,UAAA,UAAA,CAAW,MAAM;AACf,YAAAA,KAAAA,CAAK,QAAQ,aAAc,CAAA,mBAAA;AAAA,cACzB,UAAA;AAAA,cACA;AAAA,aACF;AAAA,aACC,GAAI,CAAA;AAAA;AACT,OACF;AAAA,KACD,CAAA;AAED,IAAA,MAAM,aAAgB,GAAA,WAAA,CAAY,CAAC,EAAA,EAAYD,MAAkB,KAAA;AAC/D,MAAqB,oBAAA,CAAA,CAAC,EAAE,GAAA,EAAU,KAAA;AAChC,QAAI,GAAA,CAAA,GAAA,CAAIA,QAAO,EAAE,CAAA;AACjB,QAAA,OAAO,EAAE,GAAI,EAAA;AAAA,OACd,CAAA;AACD,MAAA,OAAO,MAAM;AACX,QAAgB,eAAA,CAAA,CAAC,EAAE,GAAA,EAAU,KAAA;AAC3B,UAAA,GAAA,CAAI,OAAOA,MAAK,CAAA;AAChB,UAAA,OAAO,EAAE,GAAI,EAAA;AAAA,SACd,CAAA;AAAA,OACH;AAAA,KACF,EAAG,EAAE,CAAA;AAEL,IAAA,MAAM,UAAa,GAAA,WAAA;AAAA,MACjB,CAACA,MAAkB,KAAA;AACjB,QAAO,OAAA,iBAAA,CAAkB,GAAI,CAAA,GAAA,CAAIA,MAAK,CAAA;AAAA,OACxC;AAAA,MACA,CAAC,iBAAiB;AAAA,KACpB;AAEA,IAAA,MAAM,QAAW,GAAA,WAAA;AAAA,MACf,CAACA,MAAkB,KAAA;AACjB,QAAO,OAAA,eAAA,CAAgB,GAAI,CAAA,GAAA,CAAIA,MAAK,CAAA;AAAA,OACtC;AAAA,MACA,CAAC,eAAe;AAAA,KAClB;AAEA,IAAA,MAAM,OAAU,GAAA,OAAA;AAAA,MACd,OAAO;AAAA,QACL,WAAA;AAAA,QACA,aAAA;AAAA,QACA,UAAA;AAAA,QACA,QAAA;AAAA,QACA,QAAA;AAAA,QACA,WAAA;AAAA,QACA,IAAA;AAAA,QACA,OAAA;AAAA,QACA,WAAA;AAAA,QACA,QAAA;AAAA,QACA,OAAA;AAAA,QACA,KAAA;AAAA,QACA,SAAA;AAAA,QACA,QAAA;AAAA,QACA,WAAA;AAAA,QACA;AAAA,OACF,CAAA;AAAA,MACA;AAAA,QACE,aAAA;AAAA,QACA,WAAA;AAAA,QACA,UAAA;AAAA,QACA,QAAA;AAAA,QACA,QAAA;AAAA,QACA,WAAA;AAAA,QACA,IAAA;AAAA,QACA,OAAA;AAAA,QACA,WAAA;AAAA,QACA,QAAA;AAAA,QACA,OAAA;AAAA,QACA,KAAA;AAAA,QACA;AAAA;AACF,KACF;AAEA,IAAA,2BACG,eAAgB,CAAA,QAAA,EAAhB,EAAyB,KAAO,EAAA,OAAA,EAC/B,8BAAC,KAAI,EAAA,EAAA,SAAA,EAAW,IAAK,CAAA,YAAA,IAAgB,SAAS,CAAA,EAAG,KAAW,GAAG,IAAA,EAC5D,UACH,CACF,EAAA,CAAA;AAAA;AAGN;;;;"}

package/esm/tabs-next/TabsNextContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabsNextContext.js","sources":["../../src/tabs-next/TabsNextContext.tsx"],"sourcesContent":["import { createContext } from \"@salt-ds/core\";\nimport {\n  type Dispatch,\n  type MutableRefObject,\n  type SetStateAction,\n  type SyntheticEvent,\n  useContext,\n} from \"react\";\nimport type { useCollection } from \"./hooks/useCollection\";\n\nexport interface Item {\n  id: string;\n  value: string;\n  element: HTMLElement;\n}\n\nexport interface TabsNextContextValue\n  extends Omit<ReturnType<typeof useCollection>, \"registerItem\"> {\n  registerTab: (item: Item) => () => void;\n  registerPanel: (id: string, value: string) => () => void;\n  getPanelId: (value: string) => string | undefined;\n  getTabId: (value: string) => string | undefined;\n  selected?: string;\n  setSelected: (event: SyntheticEvent, value: string) => void;\n  activeTab: MutableRefObject<Pick<Item, \"id\" | \"value\"> | undefined>;\n  returnFocus: MutableRefObject<string | undefined>;\n  menuOpen: boolean;\n  setMenuOpen: Dispatch<SetStateAction<boolean>>;\n}\n\nexport const TabsNextContext = createContext<TabsNextContextValue>(\n  \"TabsNextContext\",\n  {\n    getFirst: () => null,\n    getLast: () => null,\n    getNext: () => null,\n    getPrevious: () => null,\n    item: () => null,\n    items: [],\n    selected: undefined,\n    registerTab: () => () => undefined,\n    registerPanel: () => () => undefined,\n    getPanelId: () => undefined,\n    getTabId: () => undefined,\n    setSelected: () => undefined,\n    activeTab: { current: undefined },\n    returnFocus: { current: undefined },\n    menuOpen: false,\n    setMenuOpen: () => undefined,\n  },\n);\n\nexport function useTabsNext() {\n  return useContext(TabsNextContext);\n}\n"],"names":[],"mappings":";;;AA8BO,MAAM,eAAkB,GAAA,aAAA;AAAA,EAC7B,iBAAA;AAAA,EACA;AAAA,IACE,UAAU,MAAM,IAAA;AAAA,IAChB,SAAS,MAAM,IAAA;AAAA,IACf,SAAS,MAAM,IAAA;AAAA,IACf,aAAa,MAAM,IAAA;AAAA,IACnB,MAAM,MAAM,IAAA;AAAA,IACZ,OAAO,EAAC;AAAA,IACR,QAAU,EAAA,KAAA,CAAA;AAAA,IACV,WAAA,EAAa,MAAM,MAAM,KAAA,CAAA;AAAA,IACzB,aAAA,EAAe,MAAM,MAAM,KAAA,CAAA;AAAA,IAC3B,YAAY,MAAM,KAAA,CAAA;AAAA,IAClB,UAAU,MAAM,KAAA,CAAA;AAAA,IAChB,aAAa,MAAM,KAAA,CAAA;AAAA,IACnB,SAAA,EAAW,EAAE,OAAA,EAAS,KAAU,CAAA,EAAA;AAAA,IAChC,WAAA,EAAa,EAAE,OAAA,EAAS,KAAU,CAAA,EAAA;AAAA,IAClC,QAAU,EAAA,KAAA;AAAA,IACV,aAAa,MAAM,KAAA;AAAA;AAEvB;AAEO,SAAS,WAAc,GAAA;AAC5B,EAAA,OAAO,WAAW,eAAe,CAAA;AACnC;;;;"}
+{"version":3,"file":"TabsNextContext.js","sources":["../../../../packages/vuu-ui-controls/src/tabs-next/TabsNextContext.tsx"],"sourcesContent":["import { createContext } from \"@salt-ds/core\";\nimport {\n  type Dispatch,\n  type MutableRefObject,\n  type SetStateAction,\n  type SyntheticEvent,\n  useContext,\n} from \"react\";\nimport type { useCollection } from \"./hooks/useCollection\";\n\nexport interface Item {\n  id: string;\n  value: string;\n  element: HTMLElement;\n}\n\nexport interface TabsNextContextValue\n  extends Omit<ReturnType<typeof useCollection>, \"registerItem\"> {\n  registerTab: (item: Item) => () => void;\n  registerPanel: (id: string, value: string) => () => void;\n  getPanelId: (value: string) => string | undefined;\n  getTabId: (value: string) => string | undefined;\n  selected?: string;\n  setSelected: (event: SyntheticEvent, value: string) => void;\n  activeTab: MutableRefObject<Pick<Item, \"id\" | \"value\"> | undefined>;\n  returnFocus: MutableRefObject<string | undefined>;\n  menuOpen: boolean;\n  setMenuOpen: Dispatch<SetStateAction<boolean>>;\n}\n\nexport const TabsNextContext = createContext<TabsNextContextValue>(\n  \"TabsNextContext\",\n  {\n    getFirst: () => null,\n    getLast: () => null,\n    getNext: () => null,\n    getPrevious: () => null,\n    item: () => null,\n    items: [],\n    selected: undefined,\n    registerTab: () => () => undefined,\n    registerPanel: () => () => undefined,\n    getPanelId: () => undefined,\n    getTabId: () => undefined,\n    setSelected: () => undefined,\n    activeTab: { current: undefined },\n    returnFocus: { current: undefined },\n    menuOpen: false,\n    setMenuOpen: () => undefined,\n  },\n);\n\nexport function useTabsNext() {\n  return useContext(TabsNextContext);\n}\n"],"names":[],"mappings":";;;AA8BO,MAAM,eAAkB,GAAA,aAAA;AAAA,EAC7B,iBAAA;AAAA,EACA;AAAA,IACE,UAAU,MAAM,IAAA;AAAA,IAChB,SAAS,MAAM,IAAA;AAAA,IACf,SAAS,MAAM,IAAA;AAAA,IACf,aAAa,MAAM,IAAA;AAAA,IACnB,MAAM,MAAM,IAAA;AAAA,IACZ,OAAO,EAAC;AAAA,IACR,QAAU,EAAA,KAAA,CAAA;AAAA,IACV,WAAA,EAAa,MAAM,MAAM,KAAA,CAAA;AAAA,IACzB,aAAA,EAAe,MAAM,MAAM,KAAA,CAAA;AAAA,IAC3B,YAAY,MAAM,KAAA,CAAA;AAAA,IAClB,UAAU,MAAM,KAAA,CAAA;AAAA,IAChB,aAAa,MAAM,KAAA,CAAA;AAAA,IACnB,SAAA,EAAW,EAAE,OAAA,EAAS,KAAU,CAAA,EAAA;AAAA,IAChC,WAAA,EAAa,EAAE,OAAA,EAAS,KAAU,CAAA,EAAA;AAAA,IAClC,QAAU,EAAA,KAAA;AAAA,IACV,aAAa,MAAM,KAAA;AAAA;AAEvB;AAEO,SAAS,WAAc,GAAA;AAC5B,EAAA,OAAO,WAAW,eAAe,CAAA;AACnC;;;;"}

package/esm/tabs-next/hooks/useCollection.js.map

@@ -1 +1 @@
-{"version":3,"file":"useCollection.js","sources":["../../../src/tabs-next/hooks/useCollection.tsx"],"sourcesContent":["import { useCallback, useRef, useState } from \"react\";\n\nexport interface Item {\n  id: string;\n  element?: HTMLElement | null;\n  value: string;\n}\n\nfunction sortBasedOnDOMPosition(items: Item[]): Item[] {\n  const indexedItems = items.map((item, index) => [index, item] as const);\n  let orderChanged = false;\n  indexedItems.sort(([itemAIndex, itemA], [itemBIndex, itemB]) => {\n    const itemAElement = itemA.element;\n    const itemBElement = itemB.element;\n    if (itemAElement === itemBElement) return 0;\n    if (!itemAElement || !itemBElement) return 0;\n\n    if (\n      itemAElement.compareDocumentPosition(itemBElement) &\n      Node.DOCUMENT_POSITION_FOLLOWING\n    ) {\n      if (itemAIndex > itemBIndex) {\n        orderChanged = true;\n      }\n      return -1;\n    }\n\n    if (itemAIndex < itemBIndex) {\n      orderChanged = true;\n    }\n    return 1;\n  });\n\n  if (orderChanged) {\n    return indexedItems.map(([_, item]) => item);\n  }\n  return items;\n}\n\ninterface UseCollectionProps {\n  wrap: boolean;\n}\n\nexport function useCollection({ wrap }: UseCollectionProps) {\n  const [items, setItems] = useState<Item[]>([]);\n  const itemsRef = useRef<Item[]>([]);\n  const itemMap = useRef<Map<string, Item>>(new Map());\n\n  const registerItem = useCallback((item: Item) => {\n    setItems((old) => {\n      const newItems = old.slice();\n      const index = newItems.findIndex(({ id }) => id === item.id);\n      if (index !== -1) {\n        const newItem = { ...newItems[index], ...item };\n        newItems[index] = newItem;\n        itemMap.current.set(item.id, newItem);\n      } else {\n        newItems.push(item);\n        itemMap.current.set(item.id, item);\n      }\n      const value = sortBasedOnDOMPosition(newItems);\n      itemsRef.current = value;\n      return value;\n    });\n\n    return () => {\n      setItems((old) => {\n        itemMap.current.delete(item.id);\n        return old.filter(({ id }) => id !== item.id);\n      });\n      return itemsRef;\n    };\n  }, []);\n\n  return {\n    registerItem,\n    item: (id?: string | null): Item | null => {\n      if (!id) return null;\n      let item = itemMap.current.get(id);\n      if (!item) {\n        item = items.find((item) => item.id === id);\n        if (item) {\n          itemMap.current.set(item.id, item);\n        }\n      }\n      return item ?? null;\n    },\n    getNext: (current: string): Item | null => {\n      const index = items.findIndex(({ id }) => id === current);\n\n      const newIndex = wrap\n        ? (index + 1) % items.length\n        : Math.min(index + 1, items.length - 1);\n\n      return items[newIndex] ?? null;\n    },\n    getPrevious: (current: string): Item | null => {\n      const index = items.findIndex(({ id }) => id === current);\n\n      const newIndex = wrap\n        ? (index - 1 + items.length) % items.length\n        : Math.max(index - 1, 0);\n\n      return items[newIndex] ?? null;\n    },\n    getFirst: (): Item | null => {\n      return items[0] ?? null;\n    },\n    getLast: (): Item | null => {\n      return items[items.length - 1] ?? null;\n    },\n    items,\n  };\n}\n"],"names":["item"],"mappings":"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"}
+{"version":3,"file":"useCollection.js","sources":["../../../../../packages/vuu-ui-controls/src/tabs-next/hooks/useCollection.tsx"],"sourcesContent":["import { useCallback, useRef, useState } from \"react\";\n\nexport interface Item {\n  id: string;\n  element?: HTMLElement | null;\n  value: string;\n}\n\nfunction sortBasedOnDOMPosition(items: Item[]): Item[] {\n  const indexedItems = items.map((item, index) => [index, item] as const);\n  let orderChanged = false;\n  indexedItems.sort(([itemAIndex, itemA], [itemBIndex, itemB]) => {\n    const itemAElement = itemA.element;\n    const itemBElement = itemB.element;\n    if (itemAElement === itemBElement) return 0;\n    if (!itemAElement || !itemBElement) return 0;\n\n    if (\n      itemAElement.compareDocumentPosition(itemBElement) &\n      Node.DOCUMENT_POSITION_FOLLOWING\n    ) {\n      if (itemAIndex > itemBIndex) {\n        orderChanged = true;\n      }\n      return -1;\n    }\n\n    if (itemAIndex < itemBIndex) {\n      orderChanged = true;\n    }\n    return 1;\n  });\n\n  if (orderChanged) {\n    return indexedItems.map(([_, item]) => item);\n  }\n  return items;\n}\n\ninterface UseCollectionProps {\n  wrap: boolean;\n}\n\nexport function useCollection({ wrap }: UseCollectionProps) {\n  const [items, setItems] = useState<Item[]>([]);\n  const itemsRef = useRef<Item[]>([]);\n  const itemMap = useRef<Map<string, Item>>(new Map());\n\n  const registerItem = useCallback((item: Item) => {\n    setItems((old) => {\n      const newItems = old.slice();\n      const index = newItems.findIndex(({ id }) => id === item.id);\n      if (index !== -1) {\n        const newItem = { ...newItems[index], ...item };\n        newItems[index] = newItem;\n        itemMap.current.set(item.id, newItem);\n      } else {\n        newItems.push(item);\n        itemMap.current.set(item.id, item);\n      }\n      const value = sortBasedOnDOMPosition(newItems);\n      itemsRef.current = value;\n      return value;\n    });\n\n    return () => {\n      setItems((old) => {\n        itemMap.current.delete(item.id);\n        return old.filter(({ id }) => id !== item.id);\n      });\n      return itemsRef;\n    };\n  }, []);\n\n  return {\n    registerItem,\n    item: (id?: string | null): Item | null => {\n      if (!id) return null;\n      let item = itemMap.current.get(id);\n      if (!item) {\n        item = items.find((item) => item.id === id);\n        if (item) {\n          itemMap.current.set(item.id, item);\n        }\n      }\n      return item ?? null;\n    },\n    getNext: (current: string): Item | null => {\n      const index = items.findIndex(({ id }) => id === current);\n\n      const newIndex = wrap\n        ? (index + 1) % items.length\n        : Math.min(index + 1, items.length - 1);\n\n      return items[newIndex] ?? null;\n    },\n    getPrevious: (current: string): Item | null => {\n      const index = items.findIndex(({ id }) => id === current);\n\n      const newIndex = wrap\n        ? (index - 1 + items.length) % items.length\n        : Math.max(index - 1, 0);\n\n      return items[newIndex] ?? null;\n    },\n    getFirst: (): Item | null => {\n      return items[0] ?? null;\n    },\n    getLast: (): Item | null => {\n      return items[items.length - 1] ?? null;\n    },\n    items,\n  };\n}\n"],"names":["item"],"mappings":"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"}

package/esm/tabs-next/hooks/useFocusOutside.js.map

@@ -1 +1 @@
-{"version":3,"file":"useFocusOutside.js","sources":["../../../src/tabs-next/hooks/useFocusOutside.ts"],"sourcesContent":["import { useWindow } from \"@salt-ds/window\";\nimport { type RefObject, useEffect } from \"react\";\n\nexport function useFocusOutside(\n  elementRef: RefObject<HTMLElement | null>,\n  onFocusOutside: () => void,\n  enabled: boolean,\n  ignore?: string,\n) {\n  const targetWindow = useWindow();\n\n  useEffect(() => {\n    if (!enabled) return;\n\n    const handleFocus = (event: FocusEvent) => {\n      const ignoreElement = ignore\n        ? elementRef.current?.ownerDocument?.querySelector<HTMLElement>(ignore)\n        : undefined;\n\n      // If focus is outside the tabstrip (including the list) then close the list.\n      if (\n        event.target instanceof HTMLElement &&\n        !elementRef.current?.contains(event.target) &&\n        !ignoreElement?.contains(event.target)\n      ) {\n        onFocusOutside();\n      }\n    };\n\n    targetWindow?.addEventListener(\"focusin\", handleFocus);\n\n    return () => {\n      targetWindow?.removeEventListener(\"focusin\", handleFocus);\n    };\n  }, [targetWindow, onFocusOutside, elementRef, enabled, ignore]);\n}\n"],"names":[],"mappings":";;;AAGO,SAAS,eACd,CAAA,UAAA,EACA,cACA,EAAA,OAAA,EACA,MACA,EAAA;AACA,EAAA,MAAM,eAAe,SAAU,EAAA;AAE/B,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,CAAC,OAAS,EAAA;AAEd,IAAM,MAAA,WAAA,GAAc,CAAC,KAAsB,KAAA;AACzC,MAAA,MAAM,gBACF,UAAA,CAAW,SAAS,aAAe,EAAA,aAAA,CAA2B,MAAM,CACpE,CAAA;AAGJ,MAAA,IACE,KAAM,CAAA,MAAA,YAAkB,WACxB,IAAA,CAAC,WAAW,OAAS,EAAA,QAAA,CAAS,KAAM,CAAA,MAAM,KAC1C,CAAC,aAAA,EAAe,QAAS,CAAA,KAAA,CAAM,MAAM,CACrC,EAAA;AACA,QAAe,cAAA,EAAA;AAAA;AACjB,KACF;AAEA,IAAc,YAAA,EAAA,gBAAA,CAAiB,WAAW,WAAW,CAAA;AAErD,IAAA,OAAO,MAAM;AACX,MAAc,YAAA,EAAA,mBAAA,CAAoB,WAAW,WAAW,CAAA;AAAA,KAC1D;AAAA,KACC,CAAC,YAAA,EAAc,gBAAgB,UAAY,EAAA,OAAA,EAAS,MAAM,CAAC,CAAA;AAChE;;;;"}
+{"version":3,"file":"useFocusOutside.js","sources":["../../../../../packages/vuu-ui-controls/src/tabs-next/hooks/useFocusOutside.ts"],"sourcesContent":["import { useWindow } from \"@salt-ds/window\";\nimport { type RefObject, useEffect } from \"react\";\n\nexport function useFocusOutside(\n  elementRef: RefObject<HTMLElement | null>,\n  onFocusOutside: () => void,\n  enabled: boolean,\n  ignore?: string,\n) {\n  const targetWindow = useWindow();\n\n  useEffect(() => {\n    if (!enabled) return;\n\n    const handleFocus = (event: FocusEvent) => {\n      const ignoreElement = ignore\n        ? elementRef.current?.ownerDocument?.querySelector<HTMLElement>(ignore)\n        : undefined;\n\n      // If focus is outside the tabstrip (including the list) then close the list.\n      if (\n        event.target instanceof HTMLElement &&\n        !elementRef.current?.contains(event.target) &&\n        !ignoreElement?.contains(event.target)\n      ) {\n        onFocusOutside();\n      }\n    };\n\n    targetWindow?.addEventListener(\"focusin\", handleFocus);\n\n    return () => {\n      targetWindow?.removeEventListener(\"focusin\", handleFocus);\n    };\n  }, [targetWindow, onFocusOutside, elementRef, enabled, ignore]);\n}\n"],"names":[],"mappings":";;;AAGO,SAAS,eACd,CAAA,UAAA,EACA,cACA,EAAA,OAAA,EACA,MACA,EAAA;AACA,EAAA,MAAM,eAAe,SAAU,EAAA;AAE/B,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,CAAC,OAAS,EAAA;AAEd,IAAM,MAAA,WAAA,GAAc,CAAC,KAAsB,KAAA;AACzC,MAAA,MAAM,gBACF,UAAA,CAAW,SAAS,aAAe,EAAA,aAAA,CAA2B,MAAM,CACpE,CAAA;AAGJ,MAAA,IACE,KAAM,CAAA,MAAA,YAAkB,WACxB,IAAA,CAAC,WAAW,OAAS,EAAA,QAAA,CAAS,KAAM,CAAA,MAAM,KAC1C,CAAC,aAAA,EAAe,QAAS,CAAA,KAAA,CAAM,MAAM,CACrC,EAAA;AACA,QAAe,cAAA,EAAA;AAAA;AACjB,KACF;AAEA,IAAc,YAAA,EAAA,gBAAA,CAAiB,WAAW,WAAW,CAAA;AAErD,IAAA,OAAO,MAAM;AACX,MAAc,YAAA,EAAA,mBAAA,CAAoB,WAAW,WAAW,CAAA;AAAA,KAC1D;AAAA,KACC,CAAC,YAAA,EAAc,gBAAgB,UAAY,EAAA,OAAA,EAAS,MAAM,CAAC,CAAA;AAChE;;;;"}

package/esm/tabs-next/hooks/useOverflow.js.map

@@ -1 +1 @@
-{"version":3,"file":"useOverflow.js","sources":["../../../src/tabs-next/hooks/useOverflow.ts"],"sourcesContent":["import {\n  ownerWindow,\n  useEventCallback,\n  useIsomorphicLayoutEffect,\n  useValueEffect,\n} from \"@salt-ds/core\";\nimport { useWindow } from \"@salt-ds/window\";\nimport {\n  Children,\n  type ReactNode,\n  type RefObject,\n  useEffect,\n  useMemo,\n} from \"react\";\nimport type { Item } from \"./useCollection\";\n\ninterface UseOverflowProps {\n  container: RefObject<HTMLElement | null>;\n  selected?: string;\n  children: ReactNode;\n  tabs: Item[];\n  overflowButton: RefObject<HTMLButtonElement | null>;\n}\n\nfunction getTabWidth(element: HTMLElement) {\n  const { width } = element.getBoundingClientRect();\n  return Math.ceil(width);\n}\n\nexport function useOverflow({\n  tabs,\n  container,\n  overflowButton,\n  children,\n  selected,\n}: UseOverflowProps) {\n  const [{ visibleCount, isMeasuring }, setVisibleItems] = useValueEffect({\n    visibleCount: tabs.length,\n    isMeasuring: false,\n  });\n  const targetWindow = useWindow();\n\n  const updateOverflow = useEventCallback(() => {\n    const computeVisible = (visibleCount: number) => {\n      if (container.current && targetWindow) {\n        const items = Array.from(\n          container.current.querySelectorAll<HTMLElement>(\n            \"[data-overflowitem]\",\n          ),\n        );\n        const selectedTab = container.current.querySelector<HTMLElement>(\n          \"[role=tab][aria-selected=true]\",\n        )?.parentElement;\n\n        let maxWidth = container.current.clientWidth ?? 0;\n\n        const containerStyles = targetWindow.getComputedStyle(\n          container.current,\n        );\n        const gap = Number.parseInt(containerStyles.gap || \"0\");\n\n        let currentWidth = 0;\n        let newVisibleCount = 0;\n\n        const visible = [];\n\n        while (newVisibleCount < items.length) {\n          const element = items[newVisibleCount];\n          if (element) {\n            if (currentWidth + getTabWidth(element) + gap > maxWidth) {\n              break;\n            }\n            currentWidth += getTabWidth(element) + gap;\n            visible.push(element);\n          }\n          newVisibleCount++;\n        }\n\n        if (newVisibleCount >= items.length) {\n          return newVisibleCount;\n        }\n\n        const overflowButtonWidth = overflowButton.current\n          ? overflowButton.current.offsetWidth + gap\n          : 0;\n        maxWidth -= overflowButtonWidth;\n\n        while (currentWidth > maxWidth) {\n          const removed = visible.pop();\n          if (!removed) break;\n          currentWidth -= getTabWidth(removed) + gap;\n          newVisibleCount--;\n        }\n\n        if (selectedTab && !visible.includes(selectedTab)) {\n          const selectedTabWidth = getTabWidth(selectedTab) + gap;\n          while (currentWidth + selectedTabWidth > maxWidth) {\n            const removed = visible.pop();\n            if (!removed) break;\n            currentWidth -= getTabWidth(selectedTab) + gap;\n            newVisibleCount--;\n          }\n        }\n\n        return Math.max(1, newVisibleCount);\n      }\n      return visibleCount;\n    };\n\n    setVisibleItems(function* () {\n      // Show all\n      yield {\n        visibleCount: tabs.length,\n        isMeasuring: true,\n      };\n\n      // Measure the visible count\n      const newVisibleCount = computeVisible(tabs.length);\n      const isMeasuring = newVisibleCount < tabs.length && newVisibleCount > 0;\n      yield {\n        visibleCount: newVisibleCount,\n        isMeasuring,\n      };\n\n      // ensure the visible count is correct\n      if (isMeasuring) {\n        yield {\n          visibleCount: computeVisible(newVisibleCount),\n          isMeasuring: false,\n        };\n      }\n    });\n  });\n\n  // biome-ignore lint/correctness/useExhaustiveDependencies: we want to update when selected changes.\n  useIsomorphicLayoutEffect(() => {\n    updateOverflow();\n  }, [selected]);\n\n  useEffect(() => {\n    const element = container?.current;\n    if (!element) return;\n\n    const win = ownerWindow(element);\n\n    const resizeObserver = new win.ResizeObserver((entries) => {\n      requestAnimationFrame(() => {\n        if (entries.length === 0) return;\n\n        updateOverflow();\n      });\n    });\n    resizeObserver.observe(element);\n    if (element.parentElement) {\n      resizeObserver.observe(element.parentElement);\n    }\n\n    return () => {\n      if (element) {\n        resizeObserver.unobserve(element);\n      }\n    };\n  }, [container, updateOverflow]);\n\n  const childArray = useMemo(() => Children.toArray(children), [children]);\n  const visible = childArray.slice(0, visibleCount || 1);\n  const hidden = childArray.slice(visibleCount || 1);\n\n  const hiddenSelectedIndex = hidden.findIndex(\n    // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n    // @ts-ignore\n    (child) => child?.props?.value === selected,\n  );\n\n  if (selected && hiddenSelectedIndex !== -1) {\n    const removed = hidden.splice(hiddenSelectedIndex, 1);\n    visible.push(removed[0]);\n  }\n\n  if (isMeasuring) {\n    return [childArray, [], isMeasuring] as const;\n  }\n\n  return [visible, hidden, isMeasuring] as const;\n}\n"],"names":["visibleCount","visible","isMeasuring"],"mappings":"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"}
+{"version":3,"file":"useOverflow.js","sources":["../../../../../packages/vuu-ui-controls/src/tabs-next/hooks/useOverflow.ts"],"sourcesContent":["import {\n  ownerWindow,\n  useEventCallback,\n  useIsomorphicLayoutEffect,\n  useValueEffect,\n} from \"@salt-ds/core\";\nimport { useWindow } from \"@salt-ds/window\";\nimport {\n  Children,\n  type ReactNode,\n  type RefObject,\n  useEffect,\n  useMemo,\n} from \"react\";\nimport type { Item } from \"./useCollection\";\n\ninterface UseOverflowProps {\n  container: RefObject<HTMLElement | null>;\n  selected?: string;\n  children: ReactNode;\n  tabs: Item[];\n  overflowButton: RefObject<HTMLButtonElement | null>;\n}\n\nfunction getTabWidth(element: HTMLElement) {\n  const { width } = element.getBoundingClientRect();\n  return Math.ceil(width);\n}\n\nexport function useOverflow({\n  tabs,\n  container,\n  overflowButton,\n  children,\n  selected,\n}: UseOverflowProps) {\n  const [{ visibleCount, isMeasuring }, setVisibleItems] = useValueEffect({\n    visibleCount: tabs.length,\n    isMeasuring: false,\n  });\n  const targetWindow = useWindow();\n\n  const updateOverflow = useEventCallback(() => {\n    const computeVisible = (visibleCount: number) => {\n      if (container.current && targetWindow) {\n        const items = Array.from(\n          container.current.querySelectorAll<HTMLElement>(\n            \"[data-overflowitem]\",\n          ),\n        );\n        const selectedTab = container.current.querySelector<HTMLElement>(\n          \"[role=tab][aria-selected=true]\",\n        )?.parentElement;\n\n        let maxWidth = container.current.clientWidth ?? 0;\n\n        const containerStyles = targetWindow.getComputedStyle(\n          container.current,\n        );\n        const gap = Number.parseInt(containerStyles.gap || \"0\");\n\n        let currentWidth = 0;\n        let newVisibleCount = 0;\n\n        const visible = [];\n\n        while (newVisibleCount < items.length) {\n          const element = items[newVisibleCount];\n          if (element) {\n            if (currentWidth + getTabWidth(element) + gap > maxWidth) {\n              break;\n            }\n            currentWidth += getTabWidth(element) + gap;\n            visible.push(element);\n          }\n          newVisibleCount++;\n        }\n\n        if (newVisibleCount >= items.length) {\n          return newVisibleCount;\n        }\n\n        const overflowButtonWidth = overflowButton.current\n          ? overflowButton.current.offsetWidth + gap\n          : 0;\n        maxWidth -= overflowButtonWidth;\n\n        while (currentWidth > maxWidth) {\n          const removed = visible.pop();\n          if (!removed) break;\n          currentWidth -= getTabWidth(removed) + gap;\n          newVisibleCount--;\n        }\n\n        if (selectedTab && !visible.includes(selectedTab)) {\n          const selectedTabWidth = getTabWidth(selectedTab) + gap;\n          while (currentWidth + selectedTabWidth > maxWidth) {\n            const removed = visible.pop();\n            if (!removed) break;\n            currentWidth -= getTabWidth(selectedTab) + gap;\n            newVisibleCount--;\n          }\n        }\n\n        return Math.max(1, newVisibleCount);\n      }\n      return visibleCount;\n    };\n\n    setVisibleItems(function* () {\n      // Show all\n      yield {\n        visibleCount: tabs.length,\n        isMeasuring: true,\n      };\n\n      // Measure the visible count\n      const newVisibleCount = computeVisible(tabs.length);\n      const isMeasuring = newVisibleCount < tabs.length && newVisibleCount > 0;\n      yield {\n        visibleCount: newVisibleCount,\n        isMeasuring,\n      };\n\n      // ensure the visible count is correct\n      if (isMeasuring) {\n        yield {\n          visibleCount: computeVisible(newVisibleCount),\n          isMeasuring: false,\n        };\n      }\n    });\n  });\n\n  // biome-ignore lint/correctness/useExhaustiveDependencies: we want to update when selected changes.\n  useIsomorphicLayoutEffect(() => {\n    updateOverflow();\n  }, [selected]);\n\n  useEffect(() => {\n    const element = container?.current;\n    if (!element) return;\n\n    const win = ownerWindow(element);\n\n    const resizeObserver = new win.ResizeObserver((entries) => {\n      requestAnimationFrame(() => {\n        if (entries.length === 0) return;\n\n        updateOverflow();\n      });\n    });\n    resizeObserver.observe(element);\n    if (element.parentElement) {\n      resizeObserver.observe(element.parentElement);\n    }\n\n    return () => {\n      if (element) {\n        resizeObserver.unobserve(element);\n      }\n    };\n  }, [container, updateOverflow]);\n\n  const childArray = useMemo(() => Children.toArray(children), [children]);\n  const visible = childArray.slice(0, visibleCount || 1);\n  const hidden = childArray.slice(visibleCount || 1);\n\n  const hiddenSelectedIndex = hidden.findIndex(\n    // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n    // @ts-ignore\n    (child) => child?.props?.value === selected,\n  );\n\n  if (selected && hiddenSelectedIndex !== -1) {\n    const removed = hidden.splice(hiddenSelectedIndex, 1);\n    visible.push(removed[0]);\n  }\n\n  if (isMeasuring) {\n    return [childArray, [], isMeasuring] as const;\n  }\n\n  return [visible, hidden, isMeasuring] as const;\n}\n"],"names":["visibleCount","visible","isMeasuring"],"mappings":"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"}

package/esm/tabstrip/Tab.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tab.js","sources":["../../src/tabstrip/Tab.tsx"],"sourcesContent":["// TODO close button needs to be a button. Hence tab needs to include 2 buttons\nimport { useForkRef } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport {\n  FocusEvent,\n  ForwardedRef,\n  forwardRef,\n  KeyboardEvent,\n  MouseEvent,\n  ReactElement,\n  useCallback,\n  useRef,\n} from \"react\";\nimport { EditableLabel, EditableLabelProps } from \"../editable-label\";\nimport { TabMenu } from \"./TabMenu\";\nimport { TabProps } from \"./TabsTypes\";\n\nimport tabCss from \"./Tab.css\";\nimport { MenuActionHandler } from \"@vuu-ui/vuu-context-menu\";\n\nconst classBase = \"vuuTab\";\n\nconst noop = () => undefined;\n\nexport const Tab = forwardRef(function Tab(\n  {\n    ariaControls,\n    children,\n    className,\n    closeable = false,\n    dragging,\n    editable = false,\n    editing,\n    focusVisible,\n    index = -1,\n    label,\n    location,\n    onClick,\n    onClose,\n    onEnterEditMode = noop,\n    onExitEditMode = noop,\n    onFocus: onFocusProp,\n    onKeyUp,\n    onMenuAction,\n    onMenuClose,\n    orientation,\n    selected,\n    showMenuButton = closeable || editable || Boolean(location),\n    tabIndex,\n    ...props\n  }: TabProps,\n  ref: ForwardedRef<HTMLDivElement>,\n): ReactElement<TabProps> {\n  if (showMenuButton && typeof onMenuAction !== \"function\") {\n    throw Error(\"Tab onMenuAction must be provided if showMenuButton is set\");\n  }\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-tabstrip-tab\",\n    css: tabCss,\n    window: targetWindow,\n  });\n\n  const rootRef = useRef<HTMLDivElement>(null);\n  const editableRef = useRef<HTMLDivElement>(null);\n  const setForkRef = useForkRef(ref, rootRef);\n  const handleClick = useCallback(\n    (e: MouseEvent<HTMLElement>) => {\n      if (!editing) {\n        e.preventDefault();\n        onClick?.(e, index);\n      }\n    },\n    [editing, index, onClick],\n  );\n\n  const handleOnExitEditMode: EditableLabelProps[\"onExitEditMode\"] = (\n    originalValue = \"\",\n    editedValue = \"\",\n    allowDeactivation = true,\n  ) => onExitEditMode(originalValue, editedValue, allowDeactivation, index);\n\n  const handleKeyUp = (e: KeyboardEvent) => {\n    switch (e.key) {\n      case \"Backspace\":\n      case \"Delete\":\n        if (closeable) {\n          e.stopPropagation();\n          onClose && onClose(index);\n        }\n        break;\n      default:\n        onKeyUp && onKeyUp(e, index);\n    }\n  };\n\n  const getLabel = () => {\n    if (editable) {\n      return (\n        <EditableLabel\n          data-embedded\n          editing={editing}\n          defaultValue={label}\n          // Create a fresh instance after each edit, so it can be uncontrolled ...\n          key={label}\n          onEnterEditMode={onEnterEditMode}\n          onExitEditMode={handleOnExitEditMode}\n          ref={editableRef}\n        />\n      );\n    } else {\n      return label;\n    }\n  };\n\n  const handleFocus = (evt: FocusEvent<HTMLElement>) => {\n    if (editableRef.current) {\n      const editable = editableRef.current as HTMLElement;\n      const input = editable.querySelector(\n        \".vuuEditableLabel-input\",\n      ) as HTMLInputElement;\n      input?.focus();\n    }\n    onFocusProp?.(evt);\n  };\n\n  return (\n    <div\n      {...props}\n      aria-controls={ariaControls}\n      aria-label={label}\n      aria-selected={selected}\n      className={cx(classBase, className, {\n        [`${classBase}-closeable`]: closeable,\n        \"vuuDraggable-dragAway\": dragging,\n        [`${classBase}-editing`]: editing,\n        [`${classBase}-selected`]: selected || undefined,\n        [`${classBase}-vertical`]: orientation === \"vertical\",\n        [`vuuFocusVisible`]: focusVisible,\n      })}\n      onClick={handleClick}\n      onFocus={handleFocus}\n      onKeyUp={handleKeyUp}\n      ref={setForkRef}\n      role=\"tab\"\n      tabIndex={tabIndex}\n    >\n      <div className={`${classBase}-main`}>\n        <span\n          className={`${classBase}-text`}\n          // data-text is important, it determines the width of the tab. A pseudo\n          // element assigns data-text as content. This is styled as selected tab\n          // text. That means width of tab always corresponds to its selected state,\n          // so tabs do not change size when selected (ie when the text is bolded).\n          // Do not include if we have editable content, EditableLabel will determine\n          // the width\n          data-text={editable ? undefined : label}\n        >\n          {children ?? getLabel()}\n        </span>\n      </div>\n      {showMenuButton ? (\n        <TabMenu\n          allowClose={closeable}\n          allowRename={editable}\n          controlledComponentId={ariaControls}\n          controlledComponentTitle={label}\n          location={location}\n          onMenuAction={onMenuAction as MenuActionHandler}\n          onMenuClose={onMenuClose}\n          index={index}\n        />\n      ) : null}\n    </div>\n  );\n});\n"],"names":["Tab","editable"],"mappings":"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"}
+{"version":3,"file":"Tab.js","sources":["../../../../packages/vuu-ui-controls/src/tabstrip/Tab.tsx"],"sourcesContent":["// TODO close button needs to be a button. Hence tab needs to include 2 buttons\nimport { useForkRef } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport {\n  FocusEvent,\n  ForwardedRef,\n  forwardRef,\n  KeyboardEvent,\n  MouseEvent,\n  ReactElement,\n  useCallback,\n  useRef,\n} from \"react\";\nimport { EditableLabel, EditableLabelProps } from \"../editable-label\";\nimport { TabMenu } from \"./TabMenu\";\nimport { TabProps } from \"./TabsTypes\";\n\nimport tabCss from \"./Tab.css\";\nimport { MenuActionHandler } from \"@vuu-ui/vuu-context-menu\";\n\nconst classBase = \"vuuTab\";\n\nconst noop = () => undefined;\n\nexport const Tab = forwardRef(function Tab(\n  {\n    ariaControls,\n    children,\n    className,\n    closeable = false,\n    dragging,\n    editable = false,\n    editing,\n    focusVisible,\n    index = -1,\n    label,\n    location,\n    onClick,\n    onClose,\n    onEnterEditMode = noop,\n    onExitEditMode = noop,\n    onFocus: onFocusProp,\n    onKeyUp,\n    onMenuAction,\n    onMenuClose,\n    orientation,\n    selected,\n    showMenuButton = closeable || editable || Boolean(location),\n    tabIndex,\n    ...props\n  }: TabProps,\n  ref: ForwardedRef<HTMLDivElement>,\n): ReactElement<TabProps> {\n  if (showMenuButton && typeof onMenuAction !== \"function\") {\n    throw Error(\"Tab onMenuAction must be provided if showMenuButton is set\");\n  }\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-tabstrip-tab\",\n    css: tabCss,\n    window: targetWindow,\n  });\n\n  const rootRef = useRef<HTMLDivElement>(null);\n  const editableRef = useRef<HTMLDivElement>(null);\n  const setForkRef = useForkRef(ref, rootRef);\n  const handleClick = useCallback(\n    (e: MouseEvent<HTMLElement>) => {\n      if (!editing) {\n        e.preventDefault();\n        onClick?.(e, index);\n      }\n    },\n    [editing, index, onClick],\n  );\n\n  const handleOnExitEditMode: EditableLabelProps[\"onExitEditMode\"] = (\n    originalValue = \"\",\n    editedValue = \"\",\n    allowDeactivation = true,\n  ) => onExitEditMode(originalValue, editedValue, allowDeactivation, index);\n\n  const handleKeyUp = (e: KeyboardEvent) => {\n    switch (e.key) {\n      case \"Backspace\":\n      case \"Delete\":\n        if (closeable) {\n          e.stopPropagation();\n          onClose && onClose(index);\n        }\n        break;\n      default:\n        onKeyUp && onKeyUp(e, index);\n    }\n  };\n\n  const getLabel = () => {\n    if (editable) {\n      return (\n        <EditableLabel\n          data-embedded\n          editing={editing}\n          defaultValue={label}\n          // Create a fresh instance after each edit, so it can be uncontrolled ...\n          key={label}\n          onEnterEditMode={onEnterEditMode}\n          onExitEditMode={handleOnExitEditMode}\n          ref={editableRef}\n        />\n      );\n    } else {\n      return label;\n    }\n  };\n\n  const handleFocus = (evt: FocusEvent<HTMLElement>) => {\n    if (editableRef.current) {\n      const editable = editableRef.current as HTMLElement;\n      const input = editable.querySelector(\n        \".vuuEditableLabel-input\",\n      ) as HTMLInputElement;\n      input?.focus();\n    }\n    onFocusProp?.(evt);\n  };\n\n  return (\n    <div\n      {...props}\n      aria-controls={ariaControls}\n      aria-label={label}\n      aria-selected={selected}\n      className={cx(classBase, className, {\n        [`${classBase}-closeable`]: closeable,\n        \"vuuDraggable-dragAway\": dragging,\n        [`${classBase}-editing`]: editing,\n        [`${classBase}-selected`]: selected || undefined,\n        [`${classBase}-vertical`]: orientation === \"vertical\",\n        [`vuuFocusVisible`]: focusVisible,\n      })}\n      onClick={handleClick}\n      onFocus={handleFocus}\n      onKeyUp={handleKeyUp}\n      ref={setForkRef}\n      role=\"tab\"\n      tabIndex={tabIndex}\n    >\n      <div className={`${classBase}-main`}>\n        <span\n          className={`${classBase}-text`}\n          // data-text is important, it determines the width of the tab. A pseudo\n          // element assigns data-text as content. This is styled as selected tab\n          // text. That means width of tab always corresponds to its selected state,\n          // so tabs do not change size when selected (ie when the text is bolded).\n          // Do not include if we have editable content, EditableLabel will determine\n          // the width\n          data-text={editable ? undefined : label}\n        >\n          {children ?? getLabel()}\n        </span>\n      </div>\n      {showMenuButton ? (\n        <TabMenu\n          allowClose={closeable}\n          allowRename={editable}\n          controlledComponentId={ariaControls}\n          controlledComponentTitle={label}\n          location={location}\n          onMenuAction={onMenuAction as MenuActionHandler}\n          onMenuClose={onMenuClose}\n          index={index}\n        />\n      ) : null}\n    </div>\n  );\n});\n"],"names":["Tab","editable"],"mappings":"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"}

package/esm/tabstrip/TabMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabMenu.js","sources":["../../src/tabstrip/TabMenu.tsx"],"sourcesContent":["import { PopupMenu } from \"@vuu-ui/vuu-popups\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport { useMemo } from \"react\";\nimport { MenuOptions, closeCommand, renameCommand } from \"./TabMenuOptions\";\n\nimport tabMenuCss from \"./TabMenu.css\";\nimport {\n  ContextMenuItemDescriptor,\n  MenuActionHandler,\n  MenuBuilder,\n} from \"@vuu-ui/vuu-context-menu\";\n\nconst classBase = \"vuuTabMenu\";\n\nexport type TabContextMenuOptions = {\n  controlledComponentId?: string;\n  controlledComponentTitle?: string;\n  tabIndex: number;\n};\n\nexport interface TabMenuProps {\n  allowClose: boolean;\n  allowRename: boolean;\n  index: number;\n  location?: string;\n  onMenuAction: MenuActionHandler;\n  onMenuClose?: () => void;\n  /**\n   * The id of associated component, if available\n   */\n  controlledComponentId?: string;\n  /**\n   * The label of Tab, if available\n   */\n  controlledComponentTitle?: string;\n}\n\nexport const TabMenu = ({\n  allowClose,\n  allowRename,\n  controlledComponentId,\n  controlledComponentTitle,\n  location,\n  onMenuAction,\n  onMenuClose,\n  index,\n}: TabMenuProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-tab-menu\",\n    css: tabMenuCss,\n    window: targetWindow,\n  });\n\n  const [menuBuilder, menuOptions] = useMemo(\n    (): [MenuBuilder, TabContextMenuOptions] => [\n      (_location, options) => {\n        const menuItems: ContextMenuItemDescriptor[] = [];\n        if (allowRename) {\n          menuItems.push(renameCommand(options as MenuOptions));\n        }\n        if (allowClose) {\n          menuItems.push(closeCommand(options as MenuOptions));\n        }\n        return menuItems;\n      },\n      {\n        controlledComponentId,\n        controlledComponentTitle,\n        tabIndex: index,\n      },\n    ],\n    [\n      allowClose,\n      allowRename,\n      controlledComponentId,\n      controlledComponentTitle,\n      index,\n    ],\n  );\n\n  return (\n    <PopupMenu\n      aria-label=\"context menu\"\n      className={classBase}\n      data-embedded\n      menuBuilder={menuBuilder}\n      menuActionHandler={onMenuAction}\n      menuLocation={cx(\"tab\", location)}\n      menuOptions={menuOptions}\n      onMenuClose={onMenuClose}\n      tabIndex={-1}\n    />\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AAcA,MAAM,SAAY,GAAA,YAAA;AAyBX,MAAM,UAAU,CAAC;AAAA,EACtB,UAAA;AAAA,EACA,WAAA;AAAA,EACA,qBAAA;AAAA,EACA,wBAAA;AAAA,EACA,QAAA;AAAA,EACA,YAAA;AAAA,EACA,WAAA;AAAA,EACA;AACF,CAAoB,KAAA;AAClB,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,cAAA;AAAA,IACR,GAAK,EAAA,UAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAM,MAAA,CAAC,WAAa,EAAA,WAAW,CAAI,GAAA,OAAA;AAAA,IACjC,MAA4C;AAAA,MAC1C,CAAC,WAAW,OAAY,KAAA;AACtB,QAAA,MAAM,YAAyC,EAAC;AAChD,QAAA,IAAI,WAAa,EAAA;AACf,UAAU,SAAA,CAAA,IAAA,CAAK,aAAc,CAAA,OAAsB,CAAC,CAAA;AAAA;AAEtD,QAAA,IAAI,UAAY,EAAA;AACd,UAAU,SAAA,CAAA,IAAA,CAAK,YAAa,CAAA,OAAsB,CAAC,CAAA;AAAA;AAErD,QAAO,OAAA,SAAA;AAAA,OACT;AAAA,MACA;AAAA,QACE,qBAAA;AAAA,QACA,wBAAA;AAAA,QACA,QAAU,EAAA;AAAA;AACZ,KACF;AAAA,IACA;AAAA,MACE,UAAA;AAAA,MACA,WAAA;AAAA,MACA,qBAAA;AAAA,MACA,wBAAA;AAAA,MACA;AAAA;AACF,GACF;AAEA,EACE,uBAAA,GAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,YAAW,EAAA,cAAA;AAAA,MACX,SAAW,EAAA,SAAA;AAAA,MACX,eAAa,EAAA,IAAA;AAAA,MACb,WAAA;AAAA,MACA,iBAAmB,EAAA,YAAA;AAAA,MACnB,YAAA,EAAc,EAAG,CAAA,KAAA,EAAO,QAAQ,CAAA;AAAA,MAChC,WAAA;AAAA,MACA,WAAA;AAAA,MACA,QAAU,EAAA,CAAA;AAAA;AAAA,GACZ;AAEJ;;;;"}
+{"version":3,"file":"TabMenu.js","sources":["../../../../packages/vuu-ui-controls/src/tabstrip/TabMenu.tsx"],"sourcesContent":["import { PopupMenu } from \"@vuu-ui/vuu-popups\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport { useMemo } from \"react\";\nimport { MenuOptions, closeCommand, renameCommand } from \"./TabMenuOptions\";\n\nimport tabMenuCss from \"./TabMenu.css\";\nimport {\n  ContextMenuItemDescriptor,\n  MenuActionHandler,\n  MenuBuilder,\n} from \"@vuu-ui/vuu-context-menu\";\n\nconst classBase = \"vuuTabMenu\";\n\nexport type TabContextMenuOptions = {\n  controlledComponentId?: string;\n  controlledComponentTitle?: string;\n  tabIndex: number;\n};\n\nexport interface TabMenuProps {\n  allowClose: boolean;\n  allowRename: boolean;\n  index: number;\n  location?: string;\n  onMenuAction: MenuActionHandler;\n  onMenuClose?: () => void;\n  /**\n   * The id of associated component, if available\n   */\n  controlledComponentId?: string;\n  /**\n   * The label of Tab, if available\n   */\n  controlledComponentTitle?: string;\n}\n\nexport const TabMenu = ({\n  allowClose,\n  allowRename,\n  controlledComponentId,\n  controlledComponentTitle,\n  location,\n  onMenuAction,\n  onMenuClose,\n  index,\n}: TabMenuProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-tab-menu\",\n    css: tabMenuCss,\n    window: targetWindow,\n  });\n\n  const [menuBuilder, menuOptions] = useMemo(\n    (): [MenuBuilder, TabContextMenuOptions] => [\n      (_location, options) => {\n        const menuItems: ContextMenuItemDescriptor[] = [];\n        if (allowRename) {\n          menuItems.push(renameCommand(options as MenuOptions));\n        }\n        if (allowClose) {\n          menuItems.push(closeCommand(options as MenuOptions));\n        }\n        return menuItems;\n      },\n      {\n        controlledComponentId,\n        controlledComponentTitle,\n        tabIndex: index,\n      },\n    ],\n    [\n      allowClose,\n      allowRename,\n      controlledComponentId,\n      controlledComponentTitle,\n      index,\n    ],\n  );\n\n  return (\n    <PopupMenu\n      aria-label=\"context menu\"\n      className={classBase}\n      data-embedded\n      menuBuilder={menuBuilder}\n      menuActionHandler={onMenuAction}\n      menuLocation={cx(\"tab\", location)}\n      menuOptions={menuOptions}\n      onMenuClose={onMenuClose}\n      tabIndex={-1}\n    />\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AAcA,MAAM,SAAY,GAAA,YAAA;AAyBX,MAAM,UAAU,CAAC;AAAA,EACtB,UAAA;AAAA,EACA,WAAA;AAAA,EACA,qBAAA;AAAA,EACA,wBAAA;AAAA,EACA,QAAA;AAAA,EACA,YAAA;AAAA,EACA,WAAA;AAAA,EACA;AACF,CAAoB,KAAA;AAClB,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,cAAA;AAAA,IACR,GAAK,EAAA,UAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAM,MAAA,CAAC,WAAa,EAAA,WAAW,CAAI,GAAA,OAAA;AAAA,IACjC,MAA4C;AAAA,MAC1C,CAAC,WAAW,OAAY,KAAA;AACtB,QAAA,MAAM,YAAyC,EAAC;AAChD,QAAA,IAAI,WAAa,EAAA;AACf,UAAU,SAAA,CAAA,IAAA,CAAK,aAAc,CAAA,OAAsB,CAAC,CAAA;AAAA;AAEtD,QAAA,IAAI,UAAY,EAAA;AACd,UAAU,SAAA,CAAA,IAAA,CAAK,YAAa,CAAA,OAAsB,CAAC,CAAA;AAAA;AAErD,QAAO,OAAA,SAAA;AAAA,OACT;AAAA,MACA;AAAA,QACE,qBAAA;AAAA,QACA,wBAAA;AAAA,QACA,QAAU,EAAA;AAAA;AACZ,KACF;AAAA,IACA;AAAA,MACE,UAAA;AAAA,MACA,WAAA;AAAA,MACA,qBAAA;AAAA,MACA,wBAAA;AAAA,MACA;AAAA;AACF,GACF;AAEA,EACE,uBAAA,GAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,YAAW,EAAA,cAAA;AAAA,MACX,SAAW,EAAA,SAAA;AAAA,MACX,eAAa,EAAA,IAAA;AAAA,MACb,WAAA;AAAA,MACA,iBAAmB,EAAA,YAAA;AAAA,MACnB,YAAA,EAAc,EAAG,CAAA,KAAA,EAAO,QAAQ,CAAA;AAAA,MAChC,WAAA;AAAA,MACA,WAAA;AAAA,MACA,QAAU,EAAA,CAAA;AAAA;AAAA,GACZ;AAEJ;;;;"}

package/esm/tabstrip/TabMenuOptions.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabMenuOptions.js","sources":["../../src/tabstrip/TabMenuOptions.ts"],"sourcesContent":["import { ContextMenuItemDescriptor } from \"@vuu-ui/vuu-context-menu\";\n\nexport type MenuOptions = { [key: string]: unknown };\n\nexport interface TabMenuOptions {\n  tabIndex: number;\n}\n\nexport const isTabMenuOptions = (options: unknown): options is TabMenuOptions =>\n  typeof options === \"object\" &&\n  options !== null &&\n  \"tabIndex\" in options &&\n  typeof options.tabIndex === \"number\";\n\nexport const closeCommand = (options?: MenuOptions) =>\n  ({\n    label: `Close`,\n    location: \"tab\",\n    id: `close-tab`,\n    options,\n  }) as ContextMenuItemDescriptor;\n\nexport const renameCommand = (options?: MenuOptions) =>\n  ({\n    label: `Rename`,\n    location: \"tab\",\n    id: `rename-tab`,\n    options,\n  }) as ContextMenuItemDescriptor;\n"],"names":[],"mappings":"AAQO,MAAM,gBAAmB,GAAA,CAAC,OAC/B,KAAA,OAAO,OAAY,KAAA,QAAA,IACnB,OAAY,KAAA,IAAA,IACZ,UAAc,IAAA,OAAA,IACd,OAAO,OAAA,CAAQ,QAAa,KAAA;AAEjB,MAAA,YAAA,GAAe,CAAC,OAC1B,MAAA;AAAA,EACC,KAAO,EAAA,CAAA,KAAA,CAAA;AAAA,EACP,QAAU,EAAA,KAAA;AAAA,EACV,EAAI,EAAA,CAAA,SAAA,CAAA;AAAA,EACJ;AACF,CAAA;AAEW,MAAA,aAAA,GAAgB,CAAC,OAC3B,MAAA;AAAA,EACC,KAAO,EAAA,CAAA,MAAA,CAAA;AAAA,EACP,QAAU,EAAA,KAAA;AAAA,EACV,EAAI,EAAA,CAAA,UAAA,CAAA;AAAA,EACJ;AACF,CAAA;;;;"}
+{"version":3,"file":"TabMenuOptions.js","sources":["../../../../packages/vuu-ui-controls/src/tabstrip/TabMenuOptions.ts"],"sourcesContent":["import { ContextMenuItemDescriptor } from \"@vuu-ui/vuu-context-menu\";\n\nexport type MenuOptions = { [key: string]: unknown };\n\nexport interface TabMenuOptions {\n  tabIndex: number;\n}\n\nexport const isTabMenuOptions = (options: unknown): options is TabMenuOptions =>\n  typeof options === \"object\" &&\n  options !== null &&\n  \"tabIndex\" in options &&\n  typeof options.tabIndex === \"number\";\n\nexport const closeCommand = (options?: MenuOptions) =>\n  ({\n    label: `Close`,\n    location: \"tab\",\n    id: `close-tab`,\n    options,\n  }) as ContextMenuItemDescriptor;\n\nexport const renameCommand = (options?: MenuOptions) =>\n  ({\n    label: `Rename`,\n    location: \"tab\",\n    id: `rename-tab`,\n    options,\n  }) as ContextMenuItemDescriptor;\n"],"names":[],"mappings":"AAQO,MAAM,gBAAmB,GAAA,CAAC,OAC/B,KAAA,OAAO,OAAY,KAAA,QAAA,IACnB,OAAY,KAAA,IAAA,IACZ,UAAc,IAAA,OAAA,IACd,OAAO,OAAA,CAAQ,QAAa,KAAA;AAEjB,MAAA,YAAA,GAAe,CAAC,OAC1B,MAAA;AAAA,EACC,KAAO,EAAA,CAAA,KAAA,CAAA;AAAA,EACP,QAAU,EAAA,KAAA;AAAA,EACV,EAAI,EAAA,CAAA,SAAA,CAAA;AAAA,EACJ;AACF,CAAA;AAEW,MAAA,aAAA,GAAgB,CAAC,OAC3B,MAAA;AAAA,EACC,KAAO,EAAA,CAAA,MAAA,CAAA;AAAA,EACP,QAAU,EAAA,KAAA;AAAA,EACV,EAAI,EAAA,CAAA,UAAA,CAAA;AAAA,EACJ;AACF,CAAA;;;;"}

package/esm/tabstrip/Tabstrip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tabstrip.js","sources":["../../src/tabstrip/Tabstrip.tsx"],"sourcesContent":["import { asReactElements, useId } from \"@vuu-ui/vuu-utils\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport React, { useMemo, useRef } from \"react\";\nimport { TabProps, TabstripProps } from \"./TabsTypes\";\nimport { useTabstrip } from \"./useTabstrip\";\nimport { IconButton } from \"../icon-button\";\nimport { OverflowContainer } from \"../overflow-container\";\n\nimport tabstripCss from \"./Tabstrip.css\";\n\nconst classBase = \"vuuTabstrip\";\n\nexport const Tabstrip = ({\n  activeTabIndex: activeTabIndexProp,\n  allowAddTab,\n  allowCloseTab,\n  allowDragDrop = false,\n  allowRenameTab = false,\n  animateSelectionThumb = false,\n  children,\n  className: classNameProp,\n  id: idProp,\n  keyBoardActivation = \"manual\",\n  location,\n  onActiveChange,\n  onAddTab,\n  onCloseTab,\n  onExitEditMode,\n  onMoveTab,\n  orientation = \"horizontal\",\n  showTabMenuButton,\n  style: styleProp,\n  tabClassName,\n  variant = \"secondary\",\n  ...htmlAttributes\n}: TabstripProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-tabstrip\",\n    css: tabstripCss,\n    window: targetWindow,\n  });\n\n  const rootRef = useRef<HTMLDivElement>(null);\n  const {\n    activeTabIndex,\n    containerStyle,\n    focusVisible,\n    draggedItemIndex,\n    onClickAddTab,\n    interactedTabState,\n    tabProps,\n    ...tabstripHook\n  } = useTabstrip({\n    activeTabIndex: activeTabIndexProp,\n    allowDragDrop,\n    animateSelectionThumb,\n    containerRef: rootRef,\n    keyBoardActivation,\n    onActiveChange,\n    onAddTab,\n    onCloseTab,\n    onExitEditMode,\n    onMoveTab,\n    orientation,\n  });\n  const id = useId(idProp);\n  const className = cx(classBase, classNameProp);\n  const style =\n    styleProp || containerStyle\n      ? {\n          ...styleProp,\n          ...containerStyle,\n        }\n      : undefined;\n\n  const tabs = useMemo(\n    () =>\n      asReactElements(children)\n        .map((child, index) => {\n          const {\n            id: tabId = `${id}-tab-${index}`,\n            className,\n            closeable = allowCloseTab,\n            editable = allowRenameTab,\n            location: tabLocation,\n            showMenuButton = showTabMenuButton,\n            // eslint-disable-next-line @typescript-eslint/no-explicit-any\n          } = child.props as any;\n          const selected = index === activeTabIndex;\n          return React.cloneElement(child, {\n            ...tabProps,\n            ...tabstripHook.navigationProps,\n            className: cx(className, tabClassName),\n            closeable,\n            \"data-overflow-priority\": selected ? \"1\" : undefined,\n            dragging: draggedItemIndex === index,\n            editable,\n            editing: interactedTabState?.index === index,\n            focusVisible: focusVisible === index,\n            id: tabId,\n            index,\n            key: index,\n            location: cx(location, tabLocation),\n            selected,\n            showMenuButton,\n            tabIndex: selected ? 0 : -1,\n          } as Partial<TabProps>);\n        })\n        .concat(\n          allowAddTab ? (\n            <IconButton\n              {...tabstripHook.navigationProps}\n              aria-label=\"Create Tab\"\n              className={`${classBase}-addTabButton`}\n              data-embedded\n              icon=\"add\"\n              data-overflow-priority=\"1\"\n              key=\"addButton\"\n              onClick={onClickAddTab}\n              variant=\"secondary\"\n              tabIndex={-1}\n            />\n          ) : (\n            []\n          ),\n        ),\n    [\n      children,\n      allowAddTab,\n      tabstripHook.navigationProps,\n      onClickAddTab,\n      id,\n      allowCloseTab,\n      allowRenameTab,\n      showTabMenuButton,\n      activeTabIndex,\n      tabProps,\n      tabClassName,\n      draggedItemIndex,\n      interactedTabState,\n      focusVisible,\n      location,\n    ],\n  );\n\n  return (\n    <>\n      <OverflowContainer\n        {...htmlAttributes}\n        {...tabstripHook.containerProps}\n        className={cx(className, `${classBase}-${variant}`)}\n        id={id}\n        orientation={orientation}\n        overflowIcon=\"more-horiz\"\n        ref={rootRef}\n        style={style}\n        role=\"tablist\"\n      >\n        {tabs}\n      </OverflowContainer>\n      {tabstripHook.draggable}\n    </>\n  );\n};\n"],"names":["className"],"mappings":"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"}
+{"version":3,"file":"Tabstrip.js","sources":["../../../../packages/vuu-ui-controls/src/tabstrip/Tabstrip.tsx"],"sourcesContent":["import { asReactElements, useId } from \"@vuu-ui/vuu-utils\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport React, { useMemo, useRef } from \"react\";\nimport { TabProps, TabstripProps } from \"./TabsTypes\";\nimport { useTabstrip } from \"./useTabstrip\";\nimport { IconButton } from \"../icon-button\";\nimport { OverflowContainer } from \"../overflow-container\";\n\nimport tabstripCss from \"./Tabstrip.css\";\n\nconst classBase = \"vuuTabstrip\";\n\nexport const Tabstrip = ({\n  activeTabIndex: activeTabIndexProp,\n  allowAddTab,\n  allowCloseTab,\n  allowDragDrop = false,\n  allowRenameTab = false,\n  animateSelectionThumb = false,\n  children,\n  className: classNameProp,\n  id: idProp,\n  keyBoardActivation = \"manual\",\n  location,\n  onActiveChange,\n  onAddTab,\n  onCloseTab,\n  onExitEditMode,\n  onMoveTab,\n  orientation = \"horizontal\",\n  showTabMenuButton,\n  style: styleProp,\n  tabClassName,\n  variant = \"secondary\",\n  ...htmlAttributes\n}: TabstripProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-tabstrip\",\n    css: tabstripCss,\n    window: targetWindow,\n  });\n\n  const rootRef = useRef<HTMLDivElement>(null);\n  const {\n    activeTabIndex,\n    containerStyle,\n    focusVisible,\n    draggedItemIndex,\n    onClickAddTab,\n    interactedTabState,\n    tabProps,\n    ...tabstripHook\n  } = useTabstrip({\n    activeTabIndex: activeTabIndexProp,\n    allowDragDrop,\n    animateSelectionThumb,\n    containerRef: rootRef,\n    keyBoardActivation,\n    onActiveChange,\n    onAddTab,\n    onCloseTab,\n    onExitEditMode,\n    onMoveTab,\n    orientation,\n  });\n  const id = useId(idProp);\n  const className = cx(classBase, classNameProp);\n  const style =\n    styleProp || containerStyle\n      ? {\n          ...styleProp,\n          ...containerStyle,\n        }\n      : undefined;\n\n  const tabs = useMemo(\n    () =>\n      asReactElements(children)\n        .map((child, index) => {\n          const {\n            id: tabId = `${id}-tab-${index}`,\n            className,\n            closeable = allowCloseTab,\n            editable = allowRenameTab,\n            location: tabLocation,\n            showMenuButton = showTabMenuButton,\n            // eslint-disable-next-line @typescript-eslint/no-explicit-any\n          } = child.props as any;\n          const selected = index === activeTabIndex;\n          return React.cloneElement(child, {\n            ...tabProps,\n            ...tabstripHook.navigationProps,\n            className: cx(className, tabClassName),\n            closeable,\n            \"data-overflow-priority\": selected ? \"1\" : undefined,\n            dragging: draggedItemIndex === index,\n            editable,\n            editing: interactedTabState?.index === index,\n            focusVisible: focusVisible === index,\n            id: tabId,\n            index,\n            key: index,\n            location: cx(location, tabLocation),\n            selected,\n            showMenuButton,\n            tabIndex: selected ? 0 : -1,\n          } as Partial<TabProps>);\n        })\n        .concat(\n          allowAddTab ? (\n            <IconButton\n              {...tabstripHook.navigationProps}\n              aria-label=\"Create Tab\"\n              className={`${classBase}-addTabButton`}\n              data-embedded\n              icon=\"add\"\n              data-overflow-priority=\"1\"\n              key=\"addButton\"\n              onClick={onClickAddTab}\n              variant=\"secondary\"\n              tabIndex={-1}\n            />\n          ) : (\n            []\n          ),\n        ),\n    [\n      children,\n      allowAddTab,\n      tabstripHook.navigationProps,\n      onClickAddTab,\n      id,\n      allowCloseTab,\n      allowRenameTab,\n      showTabMenuButton,\n      activeTabIndex,\n      tabProps,\n      tabClassName,\n      draggedItemIndex,\n      interactedTabState,\n      focusVisible,\n      location,\n    ],\n  );\n\n  return (\n    <>\n      <OverflowContainer\n        {...htmlAttributes}\n        {...tabstripHook.containerProps}\n        className={cx(className, `${classBase}-${variant}`)}\n        id={id}\n        orientation={orientation}\n        overflowIcon=\"more-horiz\"\n        ref={rootRef}\n        style={style}\n        role=\"tablist\"\n      >\n        {tabs}\n      </OverflowContainer>\n      {tabstripHook.draggable}\n    </>\n  );\n};\n"],"names":["className"],"mappings":"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"}

package/esm/tabstrip/tabstrip-dom-utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabstrip-dom-utils.js","sources":["../../src/tabstrip/tabstrip-dom-utils.ts"],"sourcesContent":["import { getElementDataIndex } from \"@vuu-ui/vuu-utils\";\n\nconst getIndexOfItem = (container: HTMLElement | null, query: string) => {\n  if (container) {\n    const targetTab = container.querySelector(\n      `[data-index]:has(${query})`,\n    ) as HTMLElement;\n    return getElementDataIndex(targetTab);\n  }\n  return -1;\n};\n\nexport const getIndexOfSelectedTab = (container: HTMLElement | null) =>\n  getIndexOfItem(container, '[aria-selected=\"true\"]');\n\nexport const getIndexOfEditedItem = (container: HTMLElement | null) =>\n  getIndexOfItem(container, \".vuuEditableLabel-editing\");\n"],"names":[],"mappings":";;AAEA,MAAM,cAAA,GAAiB,CAAC,SAAA,EAA+B,KAAkB,KAAA;AACvE,EAAA,IAAI,SAAW,EAAA;AACb,IAAA,MAAM,YAAY,SAAU,CAAA,aAAA;AAAA,MAC1B,oBAAoB,KAAK,CAAA,CAAA;AAAA,KAC3B;AACA,IAAA,OAAO,oBAAoB,SAAS,CAAA;AAAA;AAEtC,EAAO,OAAA,CAAA,CAAA;AACT,CAAA;AAEO,MAAM,qBAAwB,GAAA,CAAC,SACpC,KAAA,cAAA,CAAe,WAAW,wBAAwB;AAE7C,MAAM,oBAAuB,GAAA,CAAC,SACnC,KAAA,cAAA,CAAe,WAAW,2BAA2B;;;;"}
+{"version":3,"file":"tabstrip-dom-utils.js","sources":["../../../../packages/vuu-ui-controls/src/tabstrip/tabstrip-dom-utils.ts"],"sourcesContent":["import { getElementDataIndex } from \"@vuu-ui/vuu-utils\";\n\nconst getIndexOfItem = (container: HTMLElement | null, query: string) => {\n  if (container) {\n    const targetTab = container.querySelector(\n      `[data-index]:has(${query})`,\n    ) as HTMLElement;\n    return getElementDataIndex(targetTab);\n  }\n  return -1;\n};\n\nexport const getIndexOfSelectedTab = (container: HTMLElement | null) =>\n  getIndexOfItem(container, '[aria-selected=\"true\"]');\n\nexport const getIndexOfEditedItem = (container: HTMLElement | null) =>\n  getIndexOfItem(container, \".vuuEditableLabel-editing\");\n"],"names":[],"mappings":";;AAEA,MAAM,cAAA,GAAiB,CAAC,SAAA,EAA+B,KAAkB,KAAA;AACvE,EAAA,IAAI,SAAW,EAAA;AACb,IAAA,MAAM,YAAY,SAAU,CAAA,aAAA;AAAA,MAC1B,oBAAoB,KAAK,CAAA,CAAA;AAAA,KAC3B;AACA,IAAA,OAAO,oBAAoB,SAAS,CAAA;AAAA;AAEtC,EAAO,OAAA,CAAA,CAAA;AACT,CAAA;AAEO,MAAM,qBAAwB,GAAA,CAAC,SACpC,KAAA,cAAA,CAAe,WAAW,wBAAwB;AAE7C,MAAM,oBAAuB,GAAA,CAAC,SACnC,KAAA,cAAA,CAAe,WAAW,2BAA2B;;;;"}