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

package/cjs/overflow-container/overflow-utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"overflow-utils.js","sources":["../../src/overflow-container/overflow-utils.ts"],"sourcesContent":["import { getElementByDataIndex, orientationType } from \"@vuu-ui/vuu-utils\";\n\nconst NON_WRAPPED_ITEM = \".vuuOverflowContainer-item:not(.wrapped)\";\n\nexport type OverflowItem = {\n  index: string;\n  label: string;\n  overflowPriority: string;\n};\n\nexport const sortByScreenOrder = (elements: HTMLElement[]): HTMLElement[] =>\n  elements.sort((e1, e2) => {\n    const {\n      dataset: { index: idx1 = \"?\" },\n    } = e1;\n    const {\n      dataset: { index: idx2 = \"?\" },\n    } = e2;\n    const isOverflowed1 = e1.classList.contains(\"wrapped\");\n    const isOverflowed2 = e2.classList.contains(\"wrapped\");\n    const isOverflowedIndicator1 = idx1 === \"overflow\";\n    const isOverflowedIndicator2 = idx2 === \"overflow\";\n    if (isOverflowed1 && !isOverflowed2) {\n      return 1;\n    } else if (!isOverflowed1 && isOverflowed2) {\n      return -1;\n    }\n    if (isOverflowedIndicator1) {\n      return 1;\n    } else if (isOverflowedIndicator2) {\n      return -1;\n    }\n    return parseInt(idx1) > parseInt(idx2) ? 1 : -1;\n  });\n\nexport const NO_WRAPPED_ITEMS: OverflowItem[] = [];\n\n/**\n    Identify wrapped items by comparing position of each item. Any item\n    not to the right of preceeding item has wrapped. Note: on-screen \n    position of items does not necessarily match document position, due\n    to use of css order. This is taken into account by sorting. \n    TODO support Vertical orientation\n */\nexport const getNonWrappedAndWrappedItems = (\n  container: HTMLElement,\n  orientation: orientationType,\n): [OverflowItem[], OverflowItem[]] => {\n  const nonWrappedItems: OverflowItem[] = [];\n  const wrappedItems: OverflowItem[] = [];\n  let currentPosition = -1;\n  let overflowed = false;\n  const sortedChildren = sortByScreenOrder(\n    Array.from(container.children) as HTMLElement[],\n  );\n  const positionAttribute = orientation === \"vertical\" ? \"top\" : \"left\";\n  for (const child of sortedChildren) {\n    const element = child as HTMLElement;\n    const {\n      dataset: { index = \"?\", label = \"?\", overflowPriority = \"0\" },\n    } = element;\n    const { [positionAttribute]: position } = element.getBoundingClientRect();\n    if (position <= currentPosition) {\n      if (index === \"overflow\") {\n        wrappedItems.push(nonWrappedItems.pop() as OverflowItem);\n      } else {\n        wrappedItems.push({ index, label, overflowPriority });\n      }\n      overflowed = true;\n    } else if (overflowed) {\n      wrappedItems.push({ index, label, overflowPriority });\n    } else {\n      nonWrappedItems.push({ index, label, overflowPriority });\n    }\n    currentPosition = position;\n  }\n  return [nonWrappedItems, wrappedItems];\n};\n\nexport const applyOverflowClassToWrappedItems = (\n  container: HTMLElement,\n  overflowedItems: OverflowItem[],\n  classBase?: string,\n) => {\n  let ignoreOverflow = false;\n  const className = classBase ? `${classBase}-overflowed` : \"overflow\";\n  if (overflowedItems.find(({ index }) => index === \"overflow\")) {\n    if (overflowedItems.length === 1) {\n      ignoreOverflow = true;\n    }\n  }\n  for (const element of container.children) {\n    const {\n      dataset: { index = \"?\" },\n    } = element as HTMLElement;\n    if (overflowedItems.length === 0 || ignoreOverflow) {\n      container.classList.remove(className);\n    } else {\n      container.classList.add(className);\n    }\n    if (\n      index !== \"overflow\" &&\n      overflowedItems.find((item) => item.index === index)\n    ) {\n      element.classList.add(\"wrapped\");\n    } else {\n      element.classList.remove(\"wrapped\");\n    }\n  }\n};\n\nconst maxPriority = (priority: number, { overflowPriority }: OverflowItem) =>\n  Math.max(priority, parseInt(overflowPriority));\n\nconst minPriority = (priority: number, { overflowPriority }: OverflowItem) =>\n  Math.min(priority, parseInt(overflowPriority));\n\nexport const overflowIndicatorHasWrappedButShouldNotHave = (\n  wrappedItems: OverflowItem[],\n) => wrappedItems.length > 1 && wrappedItems.at(-1)?.index === \"overflow\";\n\nconst getHighestPriorityItem = (overflowItems: OverflowItem[]) => {\n  let [highestPriorityItem] = overflowItems;\n  for (let i = 1; i < overflowItems.length; i++) {\n    const item = overflowItems[i];\n    if (\n      parseInt(item.overflowPriority) >\n      parseInt(highestPriorityItem.overflowPriority)\n    ) {\n      highestPriorityItem = item;\n    }\n  }\n  return highestPriorityItem;\n};\n\nexport const highPriorityItemsHaveWrappedButShouldNotHave = (\n  nonWrappedItems: OverflowItem[],\n  wrappedItems: OverflowItem[],\n) => {\n  const minNonwrappedPriority = nonWrappedItems.reduce<number>(\n    minPriority,\n    Number.MAX_SAFE_INTEGER,\n  );\n  const maxwrappedPriority = wrappedItems.reduce<number>(maxPriority, 0);\n  if (maxwrappedPriority > minNonwrappedPriority) {\n    return true;\n  } else {\n    return wrappedItems.length > 1 && wrappedItems.at(-1)?.index === \"overflow\";\n  }\n};\n\n/** \n  An edge case that may occur when reducing width from unwrapped to\n  wrapped, or on first render.\n  We overflow one or more items. Then, when the overflowIndicator assumes\n  full width, it may itself overflow.\n*/\nexport const correctForWrappedOverflowIndicator = (\n  container: HTMLElement,\n  overflowedItems: OverflowItem[],\n  orientation: orientationType,\n): Promise<OverflowItem[]> =>\n  new Promise((resolve) => {\n    requestAnimationFrame(() => {\n      const [, o2] = getNonWrappedAndWrappedItems(container, orientation);\n      const newlyOverflowed = getNewItems(overflowedItems, o2);\n      newlyOverflowed.forEach((item) => markElementAsWrapped(container, item));\n      resolve(o2);\n    });\n  });\n\n/** \n  An edge case that may occur when reducing width from unwrapped to\n  wrapped, or on first render.\n  We overflow one or more items. Then, when the overflowIndicator assumes\n  full width, it may itself overflow.\n*/\nexport const correctForWrappedHighPriorityItems = (\n  container: HTMLElement,\n  nonWrapped: OverflowItem[],\n  wrapped: OverflowItem[],\n  orientation: orientationType,\n): Promise<[OverflowItem[], OverflowItem[]]> =>\n  new Promise((resolve) => {\n    requestAnimationFrame(() => {\n      const [, o2] = getNonWrappedAndWrappedItems(container, orientation);\n      const highPriorityWrappedItem = getHighestPriorityItem(o2);\n      if (highPriorityWrappedItem) {\n        const [nonWrappedItems, wrappedItems] = switchWrappedItemIntoView(\n          container,\n          highPriorityWrappedItem,\n          orientation,\n        );\n        resolve([nonWrappedItems, wrappedItems]);\n      } else {\n        resolve([nonWrapped, wrapped]);\n      }\n    });\n  });\n\nexport const markElementAsWrapped = (\n  container: HTMLElement,\n  item: OverflowItem,\n) => {\n  const el = getElementByDataIndex(container, item.index);\n  if (el) {\n    el.classList.add(\"wrapped\");\n  } else {\n    throw Error(\n      `markElementAsWrapped element item with index ${item.index} not found`,\n    );\n  }\n};\n\nexport const getElementsMarkedAsWrapped = (container: HTMLElement) =>\n  Array.from(container.querySelectorAll(\".wrapped\")) as HTMLElement[];\n\nconst getNewItems = (items1: OverflowItem[], items2: OverflowItem[]) => {\n  const newItems: OverflowItem[] = [];\n  for (const item of items2) {\n    if (!items1.find(({ index }) => index === item.index)) {\n      newItems.push(item);\n    }\n  }\n  return newItems;\n};\n\nexport const unmarkItemsWhichAreNoLongerWrapped = (\n  container: HTMLElement,\n  wrappedItems: OverflowItem[],\n) => {\n  const elementssMarkedAsWrapped = getElementsMarkedAsWrapped(container);\n  elementssMarkedAsWrapped.forEach((el) => {\n    const {\n      dataset: { index = \"?\" },\n    } = el;\n    if (!wrappedItems.find((i) => i.index === index)) {\n      el.classList.remove(\"wrapped\");\n    }\n  });\n};\n\nconst getOverflowIndicator = (container: HTMLElement) =>\n  container.querySelector('[data-index=\"overflow\"]') as HTMLElement;\nconst getOverflowedItem = (container: HTMLElement) =>\n  container.querySelector(\".wrapped\") as HTMLElement;\nconst getElementSize = (el: HTMLElement, sizeProperty: \"width\" | \"height\") => {\n  const size = parseInt(getComputedStyle(el).getPropertyValue(sizeProperty));\n  const margin =\n    sizeProperty === \"width\"\n      ? parseInt(getComputedStyle(el).getPropertyValue(\"margin-left\")) +\n        parseInt(getComputedStyle(el).getPropertyValue(\"margin-right\"))\n      : parseInt(getComputedStyle(el).getPropertyValue(\"margin-top\")) +\n        parseInt(getComputedStyle(el).getPropertyValue(\"margin-bottom\"));\n\n  return size + margin;\n};\n\nconst getAvailableSpace = (\n  container: HTMLElement,\n  overflowIndicator: HTMLElement,\n  orientation: orientationType,\n) => {\n  if (orientation === \"horizontal\") {\n    const { right: containerRight } = container.getBoundingClientRect();\n    const paddingRight = parseInt(\n      getComputedStyle(container).getPropertyValue(\"padding-right\"),\n    );\n    const { right: indicatorRight } = overflowIndicator.getBoundingClientRect();\n    return containerRight - paddingRight - indicatorRight;\n  } else {\n    const { bottom: containerBottom } = container.getBoundingClientRect();\n    const paddingBottom = parseInt(\n      getComputedStyle(container).getPropertyValue(\"padding-bottom\"),\n    );\n    const { bottom: indicatorBottom } =\n      overflowIndicator.getBoundingClientRect();\n    return containerBottom - paddingBottom - indicatorBottom;\n  }\n};\n\n/**\n    An edge case. If container has grown but we still have one\n    wrapped item - could the wrapped item return to the fold if the overflow\n    indicaor were removed ?\n */\nexport const removeOverflowIndicatorIfNoLongerNeeded = (\n  container: HTMLElement,\n  orientation: orientationType,\n): boolean => {\n  const sizeProperty = orientation === \"horizontal\" ? \"width\" : \"height\";\n  const overflowIndicator = getOverflowIndicator(container);\n  const availableSpace = getAvailableSpace(\n    container,\n    overflowIndicator,\n    orientation,\n  );\n  const indicatorWidth = getElementSize(overflowIndicator, sizeProperty);\n  const overflowedItem = getOverflowedItem(container);\n  const overflowWidth = getElementSize(overflowedItem, sizeProperty);\n\n  if (overflowWidth <= availableSpace + indicatorWidth) {\n    container.classList.remove(\"vuuOverflowContainer-wrapContainer-overflowed\");\n    overflowedItem.classList.remove(\"wrapped\");\n    return true;\n  }\n  return false;\n};\n\nconst byPriorityDescending = (h1: Element, h2: Element) => {\n  const {\n    dataset: { index: i1 = \"0\", overflowPriority: p1 = \"0\" },\n  } = h1 as HTMLElement;\n  const {\n    dataset: { index: i2 = \"0\", overflowPriority: p2 = \"0\" },\n  } = h2 as HTMLElement;\n\n  if (p1 > p2) {\n    return -1;\n  } else if (p1 < p2) {\n    return 1;\n  } else {\n    return parseInt(i1) - parseInt(i2);\n  }\n};\n\nconst getNonwrappedItemsByPriority = (container: HTMLElement) =>\n  Array.from(container.querySelectorAll(NON_WRAPPED_ITEM)).sort(\n    byPriorityDescending,\n  ) as HTMLElement[];\n\n/**\n * This is used both when an overflow menu is used to select an overflowed item\n * and when a high priority item has overflowed, whilst lower priority items\n * remain in view.\n */\nexport const switchWrappedItemIntoView = (\n  container: HTMLElement,\n  overflowItem: OverflowItem,\n  orientation: orientationType,\n): [OverflowItem[], OverflowItem[]] => {\n  const unwrappedItems = getNonwrappedItemsByPriority(container);\n  const targetElement = getElementByDataIndex(\n    container,\n    overflowItem.index,\n    true,\n  );\n  let pos = -1;\n  let unwrappedItem = unwrappedItems.at(pos) as HTMLElement;\n  const sizeProperty = orientation === \"horizontal\" ? \"width\" : \"height\";\n  const itemWidth = getElementSize(unwrappedItem, sizeProperty);\n  const targetWidth = getElementSize(targetElement, sizeProperty);\n  const overflowIndicator = getOverflowIndicator(container);\n  let availableSpace =\n    getAvailableSpace(container, overflowIndicator, orientation) + itemWidth;\n  if (availableSpace >= targetWidth) {\n    switchWrapOnElements(targetElement, unwrappedItem);\n  } else {\n    // we need to wrap multiple items to make space for the switched item\n    const { left: lastLeft } = unwrappedItem.getBoundingClientRect();\n    const baseAvailableSpace = availableSpace;\n    const wrapTargets = [unwrappedItem];\n    while (availableSpace < targetWidth) {\n      pos -= 1;\n      unwrappedItem = unwrappedItems.at(pos) as HTMLElement;\n      wrapTargets.push(unwrappedItem);\n      const { left: nextLeft } = unwrappedItem.getBoundingClientRect();\n      const extraSpace = lastLeft - nextLeft;\n      availableSpace = baseAvailableSpace + extraSpace;\n    }\n\n    targetElement?.classList.remove(\"wrapped\");\n    wrapTargets.forEach((item) => {\n      item.classList.add(\"wrapped\");\n    });\n  }\n  const [nonWrappedItems, wrappedItems] = getNonWrappedAndWrappedItems(\n    container,\n    orientation,\n  );\n  unmarkItemsWhichAreNoLongerWrapped(container, wrappedItems);\n  return [nonWrappedItems, wrappedItems];\n};\n\nconst switchWrapOnElements = (\n  wrappedElement?: HTMLElement | null,\n  nonWrappedElement?: HTMLElement,\n) => {\n  if (!wrappedElement || !nonWrappedElement) {\n    throw Error(\"switchWrapOnElements, element undefined\");\n  }\n  wrappedElement.classList.remove(\"wrapped\");\n  nonWrappedElement.classList.add(\"wrapped\");\n};\n"],"names":["getElementByDataIndex"],"mappings":"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"}
+{"version":3,"file":"overflow-utils.js","sources":["../../../../packages/vuu-ui-controls/src/overflow-container/overflow-utils.ts"],"sourcesContent":["import { getElementByDataIndex, orientationType } from \"@vuu-ui/vuu-utils\";\n\nconst NON_WRAPPED_ITEM = \".vuuOverflowContainer-item:not(.wrapped)\";\n\nexport type OverflowItem = {\n  index: string;\n  label: string;\n  overflowPriority: string;\n};\n\nexport const sortByScreenOrder = (elements: HTMLElement[]): HTMLElement[] =>\n  elements.sort((e1, e2) => {\n    const {\n      dataset: { index: idx1 = \"?\" },\n    } = e1;\n    const {\n      dataset: { index: idx2 = \"?\" },\n    } = e2;\n    const isOverflowed1 = e1.classList.contains(\"wrapped\");\n    const isOverflowed2 = e2.classList.contains(\"wrapped\");\n    const isOverflowedIndicator1 = idx1 === \"overflow\";\n    const isOverflowedIndicator2 = idx2 === \"overflow\";\n    if (isOverflowed1 && !isOverflowed2) {\n      return 1;\n    } else if (!isOverflowed1 && isOverflowed2) {\n      return -1;\n    }\n    if (isOverflowedIndicator1) {\n      return 1;\n    } else if (isOverflowedIndicator2) {\n      return -1;\n    }\n    return parseInt(idx1) > parseInt(idx2) ? 1 : -1;\n  });\n\nexport const NO_WRAPPED_ITEMS: OverflowItem[] = [];\n\n/**\n    Identify wrapped items by comparing position of each item. Any item\n    not to the right of preceeding item has wrapped. Note: on-screen \n    position of items does not necessarily match document position, due\n    to use of css order. This is taken into account by sorting. \n    TODO support Vertical orientation\n */\nexport const getNonWrappedAndWrappedItems = (\n  container: HTMLElement,\n  orientation: orientationType,\n): [OverflowItem[], OverflowItem[]] => {\n  const nonWrappedItems: OverflowItem[] = [];\n  const wrappedItems: OverflowItem[] = [];\n  let currentPosition = -1;\n  let overflowed = false;\n  const sortedChildren = sortByScreenOrder(\n    Array.from(container.children) as HTMLElement[],\n  );\n  const positionAttribute = orientation === \"vertical\" ? \"top\" : \"left\";\n  for (const child of sortedChildren) {\n    const element = child as HTMLElement;\n    const {\n      dataset: { index = \"?\", label = \"?\", overflowPriority = \"0\" },\n    } = element;\n    const { [positionAttribute]: position } = element.getBoundingClientRect();\n    if (position <= currentPosition) {\n      if (index === \"overflow\") {\n        wrappedItems.push(nonWrappedItems.pop() as OverflowItem);\n      } else {\n        wrappedItems.push({ index, label, overflowPriority });\n      }\n      overflowed = true;\n    } else if (overflowed) {\n      wrappedItems.push({ index, label, overflowPriority });\n    } else {\n      nonWrappedItems.push({ index, label, overflowPriority });\n    }\n    currentPosition = position;\n  }\n  return [nonWrappedItems, wrappedItems];\n};\n\nexport const applyOverflowClassToWrappedItems = (\n  container: HTMLElement,\n  overflowedItems: OverflowItem[],\n  classBase?: string,\n) => {\n  let ignoreOverflow = false;\n  const className = classBase ? `${classBase}-overflowed` : \"overflow\";\n  if (overflowedItems.find(({ index }) => index === \"overflow\")) {\n    if (overflowedItems.length === 1) {\n      ignoreOverflow = true;\n    }\n  }\n  for (const element of container.children) {\n    const {\n      dataset: { index = \"?\" },\n    } = element as HTMLElement;\n    if (overflowedItems.length === 0 || ignoreOverflow) {\n      container.classList.remove(className);\n    } else {\n      container.classList.add(className);\n    }\n    if (\n      index !== \"overflow\" &&\n      overflowedItems.find((item) => item.index === index)\n    ) {\n      element.classList.add(\"wrapped\");\n    } else {\n      element.classList.remove(\"wrapped\");\n    }\n  }\n};\n\nconst maxPriority = (priority: number, { overflowPriority }: OverflowItem) =>\n  Math.max(priority, parseInt(overflowPriority));\n\nconst minPriority = (priority: number, { overflowPriority }: OverflowItem) =>\n  Math.min(priority, parseInt(overflowPriority));\n\nexport const overflowIndicatorHasWrappedButShouldNotHave = (\n  wrappedItems: OverflowItem[],\n) => wrappedItems.length > 1 && wrappedItems.at(-1)?.index === \"overflow\";\n\nconst getHighestPriorityItem = (overflowItems: OverflowItem[]) => {\n  let [highestPriorityItem] = overflowItems;\n  for (let i = 1; i < overflowItems.length; i++) {\n    const item = overflowItems[i];\n    if (\n      parseInt(item.overflowPriority) >\n      parseInt(highestPriorityItem.overflowPriority)\n    ) {\n      highestPriorityItem = item;\n    }\n  }\n  return highestPriorityItem;\n};\n\nexport const highPriorityItemsHaveWrappedButShouldNotHave = (\n  nonWrappedItems: OverflowItem[],\n  wrappedItems: OverflowItem[],\n) => {\n  const minNonwrappedPriority = nonWrappedItems.reduce<number>(\n    minPriority,\n    Number.MAX_SAFE_INTEGER,\n  );\n  const maxwrappedPriority = wrappedItems.reduce<number>(maxPriority, 0);\n  if (maxwrappedPriority > minNonwrappedPriority) {\n    return true;\n  } else {\n    return wrappedItems.length > 1 && wrappedItems.at(-1)?.index === \"overflow\";\n  }\n};\n\n/** \n  An edge case that may occur when reducing width from unwrapped to\n  wrapped, or on first render.\n  We overflow one or more items. Then, when the overflowIndicator assumes\n  full width, it may itself overflow.\n*/\nexport const correctForWrappedOverflowIndicator = (\n  container: HTMLElement,\n  overflowedItems: OverflowItem[],\n  orientation: orientationType,\n): Promise<OverflowItem[]> =>\n  new Promise((resolve) => {\n    requestAnimationFrame(() => {\n      const [, o2] = getNonWrappedAndWrappedItems(container, orientation);\n      const newlyOverflowed = getNewItems(overflowedItems, o2);\n      newlyOverflowed.forEach((item) => markElementAsWrapped(container, item));\n      resolve(o2);\n    });\n  });\n\n/** \n  An edge case that may occur when reducing width from unwrapped to\n  wrapped, or on first render.\n  We overflow one or more items. Then, when the overflowIndicator assumes\n  full width, it may itself overflow.\n*/\nexport const correctForWrappedHighPriorityItems = (\n  container: HTMLElement,\n  nonWrapped: OverflowItem[],\n  wrapped: OverflowItem[],\n  orientation: orientationType,\n): Promise<[OverflowItem[], OverflowItem[]]> =>\n  new Promise((resolve) => {\n    requestAnimationFrame(() => {\n      const [, o2] = getNonWrappedAndWrappedItems(container, orientation);\n      const highPriorityWrappedItem = getHighestPriorityItem(o2);\n      if (highPriorityWrappedItem) {\n        const [nonWrappedItems, wrappedItems] = switchWrappedItemIntoView(\n          container,\n          highPriorityWrappedItem,\n          orientation,\n        );\n        resolve([nonWrappedItems, wrappedItems]);\n      } else {\n        resolve([nonWrapped, wrapped]);\n      }\n    });\n  });\n\nexport const markElementAsWrapped = (\n  container: HTMLElement,\n  item: OverflowItem,\n) => {\n  const el = getElementByDataIndex(container, item.index);\n  if (el) {\n    el.classList.add(\"wrapped\");\n  } else {\n    throw Error(\n      `markElementAsWrapped element item with index ${item.index} not found`,\n    );\n  }\n};\n\nexport const getElementsMarkedAsWrapped = (container: HTMLElement) =>\n  Array.from(container.querySelectorAll(\".wrapped\")) as HTMLElement[];\n\nconst getNewItems = (items1: OverflowItem[], items2: OverflowItem[]) => {\n  const newItems: OverflowItem[] = [];\n  for (const item of items2) {\n    if (!items1.find(({ index }) => index === item.index)) {\n      newItems.push(item);\n    }\n  }\n  return newItems;\n};\n\nexport const unmarkItemsWhichAreNoLongerWrapped = (\n  container: HTMLElement,\n  wrappedItems: OverflowItem[],\n) => {\n  const elementssMarkedAsWrapped = getElementsMarkedAsWrapped(container);\n  elementssMarkedAsWrapped.forEach((el) => {\n    const {\n      dataset: { index = \"?\" },\n    } = el;\n    if (!wrappedItems.find((i) => i.index === index)) {\n      el.classList.remove(\"wrapped\");\n    }\n  });\n};\n\nconst getOverflowIndicator = (container: HTMLElement) =>\n  container.querySelector('[data-index=\"overflow\"]') as HTMLElement;\nconst getOverflowedItem = (container: HTMLElement) =>\n  container.querySelector(\".wrapped\") as HTMLElement;\nconst getElementSize = (el: HTMLElement, sizeProperty: \"width\" | \"height\") => {\n  const size = parseInt(getComputedStyle(el).getPropertyValue(sizeProperty));\n  const margin =\n    sizeProperty === \"width\"\n      ? parseInt(getComputedStyle(el).getPropertyValue(\"margin-left\")) +\n        parseInt(getComputedStyle(el).getPropertyValue(\"margin-right\"))\n      : parseInt(getComputedStyle(el).getPropertyValue(\"margin-top\")) +\n        parseInt(getComputedStyle(el).getPropertyValue(\"margin-bottom\"));\n\n  return size + margin;\n};\n\nconst getAvailableSpace = (\n  container: HTMLElement,\n  overflowIndicator: HTMLElement,\n  orientation: orientationType,\n) => {\n  if (orientation === \"horizontal\") {\n    const { right: containerRight } = container.getBoundingClientRect();\n    const paddingRight = parseInt(\n      getComputedStyle(container).getPropertyValue(\"padding-right\"),\n    );\n    const { right: indicatorRight } = overflowIndicator.getBoundingClientRect();\n    return containerRight - paddingRight - indicatorRight;\n  } else {\n    const { bottom: containerBottom } = container.getBoundingClientRect();\n    const paddingBottom = parseInt(\n      getComputedStyle(container).getPropertyValue(\"padding-bottom\"),\n    );\n    const { bottom: indicatorBottom } =\n      overflowIndicator.getBoundingClientRect();\n    return containerBottom - paddingBottom - indicatorBottom;\n  }\n};\n\n/**\n    An edge case. If container has grown but we still have one\n    wrapped item - could the wrapped item return to the fold if the overflow\n    indicaor were removed ?\n */\nexport const removeOverflowIndicatorIfNoLongerNeeded = (\n  container: HTMLElement,\n  orientation: orientationType,\n): boolean => {\n  const sizeProperty = orientation === \"horizontal\" ? \"width\" : \"height\";\n  const overflowIndicator = getOverflowIndicator(container);\n  const availableSpace = getAvailableSpace(\n    container,\n    overflowIndicator,\n    orientation,\n  );\n  const indicatorWidth = getElementSize(overflowIndicator, sizeProperty);\n  const overflowedItem = getOverflowedItem(container);\n  const overflowWidth = getElementSize(overflowedItem, sizeProperty);\n\n  if (overflowWidth <= availableSpace + indicatorWidth) {\n    container.classList.remove(\"vuuOverflowContainer-wrapContainer-overflowed\");\n    overflowedItem.classList.remove(\"wrapped\");\n    return true;\n  }\n  return false;\n};\n\nconst byPriorityDescending = (h1: Element, h2: Element) => {\n  const {\n    dataset: { index: i1 = \"0\", overflowPriority: p1 = \"0\" },\n  } = h1 as HTMLElement;\n  const {\n    dataset: { index: i2 = \"0\", overflowPriority: p2 = \"0\" },\n  } = h2 as HTMLElement;\n\n  if (p1 > p2) {\n    return -1;\n  } else if (p1 < p2) {\n    return 1;\n  } else {\n    return parseInt(i1) - parseInt(i2);\n  }\n};\n\nconst getNonwrappedItemsByPriority = (container: HTMLElement) =>\n  Array.from(container.querySelectorAll(NON_WRAPPED_ITEM)).sort(\n    byPriorityDescending,\n  ) as HTMLElement[];\n\n/**\n * This is used both when an overflow menu is used to select an overflowed item\n * and when a high priority item has overflowed, whilst lower priority items\n * remain in view.\n */\nexport const switchWrappedItemIntoView = (\n  container: HTMLElement,\n  overflowItem: OverflowItem,\n  orientation: orientationType,\n): [OverflowItem[], OverflowItem[]] => {\n  const unwrappedItems = getNonwrappedItemsByPriority(container);\n  const targetElement = getElementByDataIndex(\n    container,\n    overflowItem.index,\n    true,\n  );\n  let pos = -1;\n  let unwrappedItem = unwrappedItems.at(pos) as HTMLElement;\n  const sizeProperty = orientation === \"horizontal\" ? \"width\" : \"height\";\n  const itemWidth = getElementSize(unwrappedItem, sizeProperty);\n  const targetWidth = getElementSize(targetElement, sizeProperty);\n  const overflowIndicator = getOverflowIndicator(container);\n  let availableSpace =\n    getAvailableSpace(container, overflowIndicator, orientation) + itemWidth;\n  if (availableSpace >= targetWidth) {\n    switchWrapOnElements(targetElement, unwrappedItem);\n  } else {\n    // we need to wrap multiple items to make space for the switched item\n    const { left: lastLeft } = unwrappedItem.getBoundingClientRect();\n    const baseAvailableSpace = availableSpace;\n    const wrapTargets = [unwrappedItem];\n    while (availableSpace < targetWidth) {\n      pos -= 1;\n      unwrappedItem = unwrappedItems.at(pos) as HTMLElement;\n      wrapTargets.push(unwrappedItem);\n      const { left: nextLeft } = unwrappedItem.getBoundingClientRect();\n      const extraSpace = lastLeft - nextLeft;\n      availableSpace = baseAvailableSpace + extraSpace;\n    }\n\n    targetElement?.classList.remove(\"wrapped\");\n    wrapTargets.forEach((item) => {\n      item.classList.add(\"wrapped\");\n    });\n  }\n  const [nonWrappedItems, wrappedItems] = getNonWrappedAndWrappedItems(\n    container,\n    orientation,\n  );\n  unmarkItemsWhichAreNoLongerWrapped(container, wrappedItems);\n  return [nonWrappedItems, wrappedItems];\n};\n\nconst switchWrapOnElements = (\n  wrappedElement?: HTMLElement | null,\n  nonWrappedElement?: HTMLElement,\n) => {\n  if (!wrappedElement || !nonWrappedElement) {\n    throw Error(\"switchWrapOnElements, element undefined\");\n  }\n  wrappedElement.classList.remove(\"wrapped\");\n  nonWrappedElement.classList.add(\"wrapped\");\n};\n"],"names":["getElementByDataIndex"],"mappings":"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"}

package/cjs/overflow-container/useOverflowContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"useOverflowContainer.js","sources":["../../src/overflow-container/useOverflowContainer.ts"],"sourcesContent":["import {\n  isValidNumber,\n  MEASURES,\n  useLayoutEffectSkipFirst,\n} from \"@vuu-ui/vuu-utils\";\nimport { useCallback, useMemo, useRef, useState } from \"react\";\nimport {\n  applyOverflowClassToWrappedItems,\n  removeOverflowIndicatorIfNoLongerNeeded,\n  correctForWrappedHighPriorityItems,\n  getNonWrappedAndWrappedItems,\n  NO_WRAPPED_ITEMS,\n  highPriorityItemsHaveWrappedButShouldNotHave,\n  switchWrappedItemIntoView,\n  OverflowItem,\n  overflowIndicatorHasWrappedButShouldNotHave,\n  correctForWrappedOverflowIndicator,\n} from \"./overflow-utils\";\nimport { OverflowContainerProps } from \"./OverflowContainer\";\nimport { DropOptions, useDragDrop } from \"../drag-drop\";\nimport { MenuActionHandler, MenuBuilder } from \"@vuu-ui/vuu-context-menu\";\n\nexport interface OverflowContainerHookProps\n  extends Pick<OverflowContainerProps, \"allowDragDrop\" | \"onMoveItem\">,\n    Required<Pick<OverflowContainerProps, \"orientation\">> {\n  itemCount: number;\n  onSwitchWrappedItemIntoView?: (overflowItem: OverflowItem) => void;\n}\n\nexport const useOverflowContainer = ({\n  allowDragDrop = false,\n  itemCount,\n  onMoveItem,\n  onSwitchWrappedItemIntoView,\n  orientation,\n}: OverflowContainerHookProps) => {\n  const [container, setContainer] = useState<HTMLDivElement | null>(null);\n  const wrappedItemsRef = useRef<OverflowItem[]>(NO_WRAPPED_ITEMS);\n  // Drag drop needs a ref to container\n  const containerRef = useRef<HTMLDivElement | null>(null);\n\n  const setOverflowTabIndex = useCallback((tabIndex: \"0\" | \"-1\") => {\n    if (containerRef.current) {\n      containerRef.current\n        .querySelector(\".vuuOverflowContainer-OverflowIndicator button\")\n        ?.setAttribute(\"tabindex\", tabIndex);\n    }\n  }, []);\n\n  const handleResize = useCallback(async () => {\n    if (container) {\n      let [nonWrapped, wrapped] = getNonWrappedAndWrappedItems(\n        container,\n        orientation,\n      );\n      applyOverflowClassToWrappedItems(\n        container,\n        wrapped,\n        \"vuuOverflowContainer-wrapContainer\",\n      );\n      if (overflowIndicatorHasWrappedButShouldNotHave(wrapped)) {\n        wrapped = await correctForWrappedOverflowIndicator(\n          container,\n          wrapped,\n          orientation,\n        );\n      }\n      while (\n        highPriorityItemsHaveWrappedButShouldNotHave(nonWrapped, wrapped)\n      ) {\n        [nonWrapped, wrapped] = await correctForWrappedHighPriorityItems(\n          container,\n          nonWrapped,\n          wrapped,\n          orientation,\n        );\n      }\n      if (wrapped.length === 1) {\n        if (removeOverflowIndicatorIfNoLongerNeeded(container, orientation)) {\n          wrapped = NO_WRAPPED_ITEMS;\n        }\n      }\n\n      if (wrappedItemsRef.current.length === 0 && wrapped.length > 0) {\n        setOverflowTabIndex(\"0\");\n      } else if (wrappedItemsRef.current.length > 0 && wrapped.length === 0) {\n        setOverflowTabIndex(\"-1\");\n      }\n\n      wrappedItemsRef.current = wrapped;\n    }\n  }, [container, orientation, setOverflowTabIndex]);\n\n  const hasOverflowItem = (\n    opt: unknown,\n  ): opt is {\n    overflowItem: OverflowItem;\n  } => typeof opt === \"object\" && opt !== null && \"overflowItem\" in opt;\n\n  const [menuBuilder, menuActionHandler] = useMemo((): [\n    MenuBuilder,\n    MenuActionHandler,\n  ] => {\n    return [\n      () => {\n        const { current: menuItems } = wrappedItemsRef;\n        return menuItems.map((item: OverflowItem) => {\n          return {\n            label: item.label,\n            id: `activate-item-${item.index}`,\n            options: { overflowItem: item },\n          };\n        });\n      },\n      // The menu items are our overflowed items, selecting one by default\n      // brings it back onto the toolbar - TODO is this right ?\n      (menuItemId, options) => {\n        if (container && hasOverflowItem(options)) {\n          // TODO do we always want to switch it into view - leave that to caller\n          const [, wrappedItems] = switchWrappedItemIntoView(\n            container,\n            options.overflowItem,\n            orientation,\n          );\n          wrappedItemsRef.current = wrappedItems;\n          onSwitchWrappedItemIntoView?.(options.overflowItem);\n        }\n        return true;\n      },\n    ];\n  }, [container, onSwitchWrappedItemIntoView, orientation]);\n\n  const resizeObserver = useMemo(() => {\n    const { sizeProp } = MEASURES[orientation];\n    let currentSize = 0;\n    return new ResizeObserver((entries: ResizeObserverEntry[]) => {\n      for (const entry of entries) {\n        const { [sizeProp]: actualSize } = entry.contentRect;\n        // This is important. Sometimes tiny sub-pixel differeces\n        // can be reported, which break the layout assumptions\n        const size = Math.round(actualSize as number);\n        if (isValidNumber(size) && currentSize !== size) {\n          currentSize = size;\n          handleResize();\n        }\n      }\n    });\n  }, [handleResize, orientation]);\n\n  useLayoutEffectSkipFirst(() => {\n    handleResize();\n  }, [handleResize, itemCount]);\n\n  useMemo(() => {\n    if (container) {\n      resizeObserver.observe(container);\n    }\n  }, [container, resizeObserver]);\n\n  const callbackRef = useCallback((el: HTMLDivElement | null) => {\n    setContainer((containerRef.current = el));\n  }, []);\n\n  const handleDrop = useCallback(\n    ({ fromIndex, toIndex }: DropOptions) => {\n      onMoveItem?.(fromIndex, toIndex);\n    },\n    [onMoveItem],\n  );\n\n  const { onMouseDown: dragDropHookHandleMouseDown, ...dragDropHook } =\n    useDragDrop({\n      allowDragDrop,\n      containerRef,\n      // this is for useDragDropNext\n      draggableClassName: `vuuOverflowContainer`,\n      // extendedDropZone: overflowedItems.length > 0,\n      onDrop: handleDrop,\n      orientation: \"horizontal\",\n      itemQuery: \".vuuOverflowContainer-item\",\n    });\n\n  return {\n    menuActionHandler,\n    menuBuilder,\n    onItemMouseDown: dragDropHookHandleMouseDown,\n    rootRef: callbackRef,\n    ...dragDropHook,\n  };\n};\n"],"names":["useState","useRef","NO_WRAPPED_ITEMS","useCallback","getNonWrappedAndWrappedItems","applyOverflowClassToWrappedItems","overflowIndicatorHasWrappedButShouldNotHave","correctForWrappedOverflowIndicator","highPriorityItemsHaveWrappedButShouldNotHave","correctForWrappedHighPriorityItems","removeOverflowIndicatorIfNoLongerNeeded","useMemo","switchWrappedItemIntoView","MEASURES","isValidNumber","useLayoutEffectSkipFirst","useDragDrop"],"mappings":";;;;;;;;AA6BO,MAAM,uBAAuB,CAAC;AAAA,EACnC,aAAgB,GAAA,KAAA;AAAA,EAChB,SAAA;AAAA,EACA,UAAA;AAAA,EACA,2BAAA;AAAA,EACA;AACF,CAAkC,KAAA;AAChC,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAIA,eAAgC,IAAI,CAAA;AACtE,EAAM,MAAA,eAAA,GAAkBC,aAAuBC,8BAAgB,CAAA;AAE/D,EAAM,MAAA,YAAA,GAAeD,aAA8B,IAAI,CAAA;AAEvD,EAAM,MAAA,mBAAA,GAAsBE,iBAAY,CAAA,CAAC,QAAyB,KAAA;AAChE,IAAA,IAAI,aAAa,OAAS,EAAA;AACxB,MAAA,YAAA,CAAa,QACV,aAAc,CAAA,gDAAgD,CAC7D,EAAA,YAAA,CAAa,YAAY,QAAQ,CAAA;AAAA;AACvC,GACF,EAAG,EAAE,CAAA;AAEL,EAAM,MAAA,YAAA,GAAeA,kBAAY,YAAY;AAC3C,IAAA,IAAI,SAAW,EAAA;AACb,MAAI,IAAA,CAAC,UAAY,EAAA,OAAO,CAAI,GAAAC,0CAAA;AAAA,QAC1B,SAAA;AAAA,QACA;AAAA,OACF;AACA,MAAAC,8CAAA;AAAA,QACE,SAAA;AAAA,QACA,OAAA;AAAA,QACA;AAAA,OACF;AACA,MAAI,IAAAC,yDAAA,CAA4C,OAAO,CAAG,EAAA;AACxD,QAAA,OAAA,GAAU,MAAMC,gDAAA;AAAA,UACd,SAAA;AAAA,UACA,OAAA;AAAA,UACA;AAAA,SACF;AAAA;AAEF,MACE,OAAAC,0DAAA,CAA6C,UAAY,EAAA,OAAO,CAChE,EAAA;AACA,QAAC,CAAA,UAAA,EAAY,OAAO,CAAA,GAAI,MAAMC,gDAAA;AAAA,UAC5B,SAAA;AAAA,UACA,UAAA;AAAA,UACA,OAAA;AAAA,UACA;AAAA,SACF;AAAA;AAEF,MAAI,IAAA,OAAA,CAAQ,WAAW,CAAG,EAAA;AACxB,QAAI,IAAAC,qDAAA,CAAwC,SAAW,EAAA,WAAW,CAAG,EAAA;AACnE,UAAU,OAAA,GAAAR,8BAAA;AAAA;AACZ;AAGF,MAAA,IAAI,gBAAgB,OAAQ,CAAA,MAAA,KAAW,CAAK,IAAA,OAAA,CAAQ,SAAS,CAAG,EAAA;AAC9D,QAAA,mBAAA,CAAoB,GAAG,CAAA;AAAA,iBACd,eAAgB,CAAA,OAAA,CAAQ,SAAS,CAAK,IAAA,OAAA,CAAQ,WAAW,CAAG,EAAA;AACrE,QAAA,mBAAA,CAAoB,IAAI,CAAA;AAAA;AAG1B,MAAA,eAAA,CAAgB,OAAU,GAAA,OAAA;AAAA;AAC5B,GACC,EAAA,CAAC,SAAW,EAAA,WAAA,EAAa,mBAAmB,CAAC,CAAA;AAEhD,EAAM,MAAA,eAAA,GAAkB,CACtB,GAGG,KAAA,OAAO,QAAQ,QAAY,IAAA,GAAA,KAAQ,QAAQ,cAAkB,IAAA,GAAA;AAElE,EAAA,MAAM,CAAC,WAAA,EAAa,iBAAiB,CAAA,GAAIS,cAAQ,MAG5C;AACH,IAAO,OAAA;AAAA,MACL,MAAM;AACJ,QAAM,MAAA,EAAE,OAAS,EAAA,SAAA,EAAc,GAAA,eAAA;AAC/B,QAAO,OAAA,SAAA,CAAU,GAAI,CAAA,CAAC,IAAuB,KAAA;AAC3C,UAAO,OAAA;AAAA,YACL,OAAO,IAAK,CAAA,KAAA;AAAA,YACZ,EAAA,EAAI,CAAiB,cAAA,EAAA,IAAA,CAAK,KAAK,CAAA,CAAA;AAAA,YAC/B,OAAA,EAAS,EAAE,YAAA,EAAc,IAAK;AAAA,WAChC;AAAA,SACD,CAAA;AAAA,OACH;AAAA;AAAA;AAAA,MAGA,CAAC,YAAY,OAAY,KAAA;AACvB,QAAI,IAAA,SAAA,IAAa,eAAgB,CAAA,OAAO,CAAG,EAAA;AAEzC,UAAM,MAAA,GAAG,YAAY,CAAI,GAAAC,uCAAA;AAAA,YACvB,SAAA;AAAA,YACA,OAAQ,CAAA,YAAA;AAAA,YACR;AAAA,WACF;AACA,UAAA,eAAA,CAAgB,OAAU,GAAA,YAAA;AAC1B,UAAA,2BAAA,GAA8B,QAAQ,YAAY,CAAA;AAAA;AAEpD,QAAO,OAAA,IAAA;AAAA;AACT,KACF;AAAA,GACC,EAAA,CAAC,SAAW,EAAA,2BAAA,EAA6B,WAAW,CAAC,CAAA;AAExD,EAAM,MAAA,cAAA,GAAiBD,cAAQ,MAAM;AACnC,IAAA,MAAM,EAAE,QAAA,EAAa,GAAAE,iBAAA,CAAS,WAAW,CAAA;AACzC,IAAA,IAAI,WAAc,GAAA,CAAA;AAClB,IAAO,OAAA,IAAI,cAAe,CAAA,CAAC,OAAmC,KAAA;AAC5D,MAAA,KAAA,MAAW,SAAS,OAAS,EAAA;AAC3B,QAAA,MAAM,EAAE,CAAC,QAAQ,GAAG,UAAA,KAAe,KAAM,CAAA,WAAA;AAGzC,QAAM,MAAA,IAAA,GAAO,IAAK,CAAA,KAAA,CAAM,UAAoB,CAAA;AAC5C,QAAA,IAAIC,sBAAc,CAAA,IAAI,CAAK,IAAA,WAAA,KAAgB,IAAM,EAAA;AAC/C,UAAc,WAAA,GAAA,IAAA;AACd,UAAa,YAAA,EAAA;AAAA;AACf;AACF,KACD,CAAA;AAAA,GACA,EAAA,CAAC,YAAc,EAAA,WAAW,CAAC,CAAA;AAE9B,EAAAC,iCAAA,CAAyB,MAAM;AAC7B,IAAa,YAAA,EAAA;AAAA,GACZ,EAAA,CAAC,YAAc,EAAA,SAAS,CAAC,CAAA;AAE5B,EAAAJ,aAAA,CAAQ,MAAM;AACZ,IAAA,IAAI,SAAW,EAAA;AACb,MAAA,cAAA,CAAe,QAAQ,SAAS,CAAA;AAAA;AAClC,GACC,EAAA,CAAC,SAAW,EAAA,cAAc,CAAC,CAAA;AAE9B,EAAM,MAAA,WAAA,GAAcR,iBAAY,CAAA,CAAC,EAA8B,KAAA;AAC7D,IAAc,YAAA,CAAA,YAAA,CAAa,UAAU,EAAG,CAAA;AAAA,GAC1C,EAAG,EAAE,CAAA;AAEL,EAAA,MAAM,UAAa,GAAAA,iBAAA;AAAA,IACjB,CAAC,EAAE,SAAW,EAAA,OAAA,EAA2B,KAAA;AACvC,MAAA,UAAA,GAAa,WAAW,OAAO,CAAA;AAAA,KACjC;AAAA,IACA,CAAC,UAAU;AAAA,GACb;AAEA,EAAA,MAAM,EAAE,WAAa,EAAA,2BAAA,EAA6B,GAAG,YAAA,KACnDa,uBAAY,CAAA;AAAA,IACV,aAAA;AAAA,IACA,YAAA;AAAA;AAAA,IAEA,kBAAoB,EAAA,CAAA,oBAAA,CAAA;AAAA;AAAA,IAEpB,MAAQ,EAAA,UAAA;AAAA,IACR,WAAa,EAAA,YAAA;AAAA,IACb,SAAW,EAAA;AAAA,GACZ,CAAA;AAEH,EAAO,OAAA;AAAA,IACL,iBAAA;AAAA,IACA,WAAA;AAAA,IACA,eAAiB,EAAA,2BAAA;AAAA,IACjB,OAAS,EAAA,WAAA;AAAA,IACT,GAAG;AAAA,GACL;AACF;;;;"}
+{"version":3,"file":"useOverflowContainer.js","sources":["../../../../packages/vuu-ui-controls/src/overflow-container/useOverflowContainer.ts"],"sourcesContent":["import {\n  isValidNumber,\n  MEASURES,\n  useLayoutEffectSkipFirst,\n} from \"@vuu-ui/vuu-utils\";\nimport { useCallback, useMemo, useRef, useState } from \"react\";\nimport {\n  applyOverflowClassToWrappedItems,\n  removeOverflowIndicatorIfNoLongerNeeded,\n  correctForWrappedHighPriorityItems,\n  getNonWrappedAndWrappedItems,\n  NO_WRAPPED_ITEMS,\n  highPriorityItemsHaveWrappedButShouldNotHave,\n  switchWrappedItemIntoView,\n  OverflowItem,\n  overflowIndicatorHasWrappedButShouldNotHave,\n  correctForWrappedOverflowIndicator,\n} from \"./overflow-utils\";\nimport { OverflowContainerProps } from \"./OverflowContainer\";\nimport { DropOptions, useDragDrop } from \"../drag-drop\";\nimport { MenuActionHandler, MenuBuilder } from \"@vuu-ui/vuu-context-menu\";\n\nexport interface OverflowContainerHookProps\n  extends Pick<OverflowContainerProps, \"allowDragDrop\" | \"onMoveItem\">,\n    Required<Pick<OverflowContainerProps, \"orientation\">> {\n  itemCount: number;\n  onSwitchWrappedItemIntoView?: (overflowItem: OverflowItem) => void;\n}\n\nexport const useOverflowContainer = ({\n  allowDragDrop = false,\n  itemCount,\n  onMoveItem,\n  onSwitchWrappedItemIntoView,\n  orientation,\n}: OverflowContainerHookProps) => {\n  const [container, setContainer] = useState<HTMLDivElement | null>(null);\n  const wrappedItemsRef = useRef<OverflowItem[]>(NO_WRAPPED_ITEMS);\n  // Drag drop needs a ref to container\n  const containerRef = useRef<HTMLDivElement | null>(null);\n\n  const setOverflowTabIndex = useCallback((tabIndex: \"0\" | \"-1\") => {\n    if (containerRef.current) {\n      containerRef.current\n        .querySelector(\".vuuOverflowContainer-OverflowIndicator button\")\n        ?.setAttribute(\"tabindex\", tabIndex);\n    }\n  }, []);\n\n  const handleResize = useCallback(async () => {\n    if (container) {\n      let [nonWrapped, wrapped] = getNonWrappedAndWrappedItems(\n        container,\n        orientation,\n      );\n      applyOverflowClassToWrappedItems(\n        container,\n        wrapped,\n        \"vuuOverflowContainer-wrapContainer\",\n      );\n      if (overflowIndicatorHasWrappedButShouldNotHave(wrapped)) {\n        wrapped = await correctForWrappedOverflowIndicator(\n          container,\n          wrapped,\n          orientation,\n        );\n      }\n      while (\n        highPriorityItemsHaveWrappedButShouldNotHave(nonWrapped, wrapped)\n      ) {\n        [nonWrapped, wrapped] = await correctForWrappedHighPriorityItems(\n          container,\n          nonWrapped,\n          wrapped,\n          orientation,\n        );\n      }\n      if (wrapped.length === 1) {\n        if (removeOverflowIndicatorIfNoLongerNeeded(container, orientation)) {\n          wrapped = NO_WRAPPED_ITEMS;\n        }\n      }\n\n      if (wrappedItemsRef.current.length === 0 && wrapped.length > 0) {\n        setOverflowTabIndex(\"0\");\n      } else if (wrappedItemsRef.current.length > 0 && wrapped.length === 0) {\n        setOverflowTabIndex(\"-1\");\n      }\n\n      wrappedItemsRef.current = wrapped;\n    }\n  }, [container, orientation, setOverflowTabIndex]);\n\n  const hasOverflowItem = (\n    opt: unknown,\n  ): opt is {\n    overflowItem: OverflowItem;\n  } => typeof opt === \"object\" && opt !== null && \"overflowItem\" in opt;\n\n  const [menuBuilder, menuActionHandler] = useMemo((): [\n    MenuBuilder,\n    MenuActionHandler,\n  ] => {\n    return [\n      () => {\n        const { current: menuItems } = wrappedItemsRef;\n        return menuItems.map((item: OverflowItem) => {\n          return {\n            label: item.label,\n            id: `activate-item-${item.index}`,\n            options: { overflowItem: item },\n          };\n        });\n      },\n      // The menu items are our overflowed items, selecting one by default\n      // brings it back onto the toolbar - TODO is this right ?\n      (menuItemId, options) => {\n        if (container && hasOverflowItem(options)) {\n          // TODO do we always want to switch it into view - leave that to caller\n          const [, wrappedItems] = switchWrappedItemIntoView(\n            container,\n            options.overflowItem,\n            orientation,\n          );\n          wrappedItemsRef.current = wrappedItems;\n          onSwitchWrappedItemIntoView?.(options.overflowItem);\n        }\n        return true;\n      },\n    ];\n  }, [container, onSwitchWrappedItemIntoView, orientation]);\n\n  const resizeObserver = useMemo(() => {\n    const { sizeProp } = MEASURES[orientation];\n    let currentSize = 0;\n    return new ResizeObserver((entries: ResizeObserverEntry[]) => {\n      for (const entry of entries) {\n        const { [sizeProp]: actualSize } = entry.contentRect;\n        // This is important. Sometimes tiny sub-pixel differeces\n        // can be reported, which break the layout assumptions\n        const size = Math.round(actualSize as number);\n        if (isValidNumber(size) && currentSize !== size) {\n          currentSize = size;\n          handleResize();\n        }\n      }\n    });\n  }, [handleResize, orientation]);\n\n  useLayoutEffectSkipFirst(() => {\n    handleResize();\n  }, [handleResize, itemCount]);\n\n  useMemo(() => {\n    if (container) {\n      resizeObserver.observe(container);\n    }\n  }, [container, resizeObserver]);\n\n  const callbackRef = useCallback((el: HTMLDivElement | null) => {\n    setContainer((containerRef.current = el));\n  }, []);\n\n  const handleDrop = useCallback(\n    ({ fromIndex, toIndex }: DropOptions) => {\n      onMoveItem?.(fromIndex, toIndex);\n    },\n    [onMoveItem],\n  );\n\n  const { onMouseDown: dragDropHookHandleMouseDown, ...dragDropHook } =\n    useDragDrop({\n      allowDragDrop,\n      containerRef,\n      // this is for useDragDropNext\n      draggableClassName: `vuuOverflowContainer`,\n      // extendedDropZone: overflowedItems.length > 0,\n      onDrop: handleDrop,\n      orientation: \"horizontal\",\n      itemQuery: \".vuuOverflowContainer-item\",\n    });\n\n  return {\n    menuActionHandler,\n    menuBuilder,\n    onItemMouseDown: dragDropHookHandleMouseDown,\n    rootRef: callbackRef,\n    ...dragDropHook,\n  };\n};\n"],"names":["useState","useRef","NO_WRAPPED_ITEMS","useCallback","getNonWrappedAndWrappedItems","applyOverflowClassToWrappedItems","overflowIndicatorHasWrappedButShouldNotHave","correctForWrappedOverflowIndicator","highPriorityItemsHaveWrappedButShouldNotHave","correctForWrappedHighPriorityItems","removeOverflowIndicatorIfNoLongerNeeded","useMemo","switchWrappedItemIntoView","MEASURES","isValidNumber","useLayoutEffectSkipFirst","useDragDrop"],"mappings":"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"}

package/cjs/price-ticker/PriceTicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"PriceTicker.js","sources":["../../src/price-ticker/PriceTicker.tsx"],"sourcesContent":["import {\n  getMovingValueDirection,\n  isValidNumber,\n  numericFormatter,\n  valueChangeDirection,\n} from \"@vuu-ui/vuu-utils\";\nimport { HTMLAttributes, memo, useMemo, useRef } from \"react\";\nimport cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nconst classBase = \"vuuPriceTicker\";\n\nimport priceTickerCss from \"./PriceTicker.css\";\n\nconst getValueFormatter = (decimals: number) =>\n  numericFormatter({\n    type: {\n      name: \"number\",\n      formatting: {\n        decimals,\n        zeroPad: true,\n      },\n    },\n  });\n\ntype State = [number | undefined, valueChangeDirection | undefined];\nconst INITIAL_VALUE: State = [undefined, undefined];\n\nexport interface PriceTickerProps extends HTMLAttributes<HTMLDivElement> {\n  decimals?: number;\n  price?: number;\n  showArrow?: boolean;\n}\n\nexport const PriceTicker = memo(\n  ({\n    className,\n    decimals = 2,\n    price,\n    showArrow,\n    ...htmlAttributes\n  }: PriceTickerProps) => {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"vuu-price-ticker\",\n      css: priceTickerCss,\n      window: targetWindow,\n    });\n\n    const ref = useRef<State>(INITIAL_VALUE);\n    const [prevValue, prevDirection] = ref.current;\n    const formatNumber = useMemo(() => getValueFormatter(decimals), [decimals]);\n\n    const direction = isValidNumber(prevValue)\n      ? getMovingValueDirection(price, prevDirection, prevValue, decimals)\n      : \"\";\n\n    ref.current = [price, direction];\n\n    return (\n      <div {...htmlAttributes} className={cx(classBase, className, direction)}>\n        {formatNumber(price)}\n        {showArrow ? <span data-icon=\"price-arrow\" /> : null}\n      </div>\n    );\n  },\n);\nPriceTicker.displayName = \"PriceTicker\";\n"],"names":["numericFormatter","memo","useWindow","useComponentCssInjection","priceTickerCss","useRef","useMemo","isValidNumber","getMovingValueDirection","jsxs","jsx"],"mappings":";;;;;;;;;;AAWA,MAAM,SAAY,GAAA,gBAAA;AAIlB,MAAM,iBAAA,GAAoB,CAAC,QAAA,KACzBA,yBAAiB,CAAA;AAAA,EACf,IAAM,EAAA;AAAA,IACJ,IAAM,EAAA,QAAA;AAAA,IACN,UAAY,EAAA;AAAA,MACV,QAAA;AAAA,MACA,OAAS,EAAA;AAAA;AACX;AAEJ,CAAC,CAAA;AAGH,MAAM,aAAA,GAAuB,CAAC,KAAA,CAAA,EAAW,KAAS,CAAA,CAAA;AAQ3C,MAAM,WAAc,GAAAC,UAAA;AAAA,EACzB,CAAC;AAAA,IACC,SAAA;AAAA,IACA,QAAW,GAAA,CAAA;AAAA,IACX,KAAA;AAAA,IACA,SAAA;AAAA,IACA,GAAG;AAAA,GACmB,KAAA;AACtB,IAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,kBAAA;AAAA,MACR,GAAK,EAAAC,aAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IAAM,MAAA,GAAA,GAAMC,aAAc,aAAa,CAAA;AACvC,IAAA,MAAM,CAAC,SAAA,EAAW,aAAa,CAAA,GAAI,GAAI,CAAA,OAAA;AACvC,IAAM,MAAA,YAAA,GAAeC,cAAQ,MAAM,iBAAA,CAAkB,QAAQ,CAAG,EAAA,CAAC,QAAQ,CAAC,CAAA;AAE1E,IAAM,MAAA,SAAA,GAAYC,uBAAc,SAAS,CAAA,GACrCC,iCAAwB,KAAO,EAAA,aAAA,EAAe,SAAW,EAAA,QAAQ,CACjE,GAAA,EAAA;AAEJ,IAAI,GAAA,CAAA,OAAA,GAAU,CAAC,KAAA,EAAO,SAAS,CAAA;AAE/B,IACE,uBAAAC,eAAA,CAAC,SAAK,GAAG,cAAA,EAAgB,WAAW,EAAG,CAAA,SAAA,EAAW,SAAW,EAAA,SAAS,CACnE,EAAA,QAAA,EAAA;AAAA,MAAA,YAAA,CAAa,KAAK,CAAA;AAAA,MAClB,SAAY,mBAAAC,cAAA,CAAC,MAAK,EAAA,EAAA,WAAA,EAAU,eAAc,CAAK,GAAA;AAAA,KAClD,EAAA,CAAA;AAAA;AAGN;AACA,WAAA,CAAY,WAAc,GAAA,aAAA;;;;"}
+{"version":3,"file":"PriceTicker.js","sources":["../../../../packages/vuu-ui-controls/src/price-ticker/PriceTicker.tsx"],"sourcesContent":["import {\n  getMovingValueDirection,\n  isValidNumber,\n  numericFormatter,\n  valueChangeDirection,\n} from \"@vuu-ui/vuu-utils\";\nimport { HTMLAttributes, memo, useMemo, useRef } from \"react\";\nimport cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nconst classBase = \"vuuPriceTicker\";\n\nimport priceTickerCss from \"./PriceTicker.css\";\n\nconst getValueFormatter = (decimals: number) =>\n  numericFormatter({\n    type: {\n      name: \"number\",\n      formatting: {\n        decimals,\n        zeroPad: true,\n      },\n    },\n  });\n\ntype State = [number | undefined, valueChangeDirection | undefined];\nconst INITIAL_VALUE: State = [undefined, undefined];\n\nexport interface PriceTickerProps extends HTMLAttributes<HTMLDivElement> {\n  decimals?: number;\n  price?: number;\n  showArrow?: boolean;\n}\n\nexport const PriceTicker = memo(\n  ({\n    className,\n    decimals = 2,\n    price,\n    showArrow,\n    ...htmlAttributes\n  }: PriceTickerProps) => {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"vuu-price-ticker\",\n      css: priceTickerCss,\n      window: targetWindow,\n    });\n\n    const ref = useRef<State>(INITIAL_VALUE);\n    const [prevValue, prevDirection] = ref.current;\n    const formatNumber = useMemo(() => getValueFormatter(decimals), [decimals]);\n\n    const direction = isValidNumber(prevValue)\n      ? getMovingValueDirection(price, prevDirection, prevValue, decimals)\n      : \"\";\n\n    ref.current = [price, direction];\n\n    return (\n      <div {...htmlAttributes} className={cx(classBase, className, direction)}>\n        {formatNumber(price)}\n        {showArrow ? <span data-icon=\"price-arrow\" /> : null}\n      </div>\n    );\n  },\n);\nPriceTicker.displayName = \"PriceTicker\";\n"],"names":["numericFormatter","memo","useWindow","useComponentCssInjection","priceTickerCss","useRef","useMemo","isValidNumber","getMovingValueDirection","jsxs","jsx"],"mappings":";;;;;;;;;;AAWA,MAAM,SAAY,GAAA,gBAAA;AAIlB,MAAM,iBAAA,GAAoB,CAAC,QAAA,KACzBA,yBAAiB,CAAA;AAAA,EACf,IAAM,EAAA;AAAA,IACJ,IAAM,EAAA,QAAA;AAAA,IACN,UAAY,EAAA;AAAA,MACV,QAAA;AAAA,MACA,OAAS,EAAA;AAAA;AACX;AAEJ,CAAC,CAAA;AAGH,MAAM,aAAA,GAAuB,CAAC,KAAA,CAAA,EAAW,KAAS,CAAA,CAAA;AAQ3C,MAAM,WAAc,GAAAC,UAAA;AAAA,EACzB,CAAC;AAAA,IACC,SAAA;AAAA,IACA,QAAW,GAAA,CAAA;AAAA,IACX,KAAA;AAAA,IACA,SAAA;AAAA,IACA,GAAG;AAAA,GACmB,KAAA;AACtB,IAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,kBAAA;AAAA,MACR,GAAK,EAAAC,aAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IAAM,MAAA,GAAA,GAAMC,aAAc,aAAa,CAAA;AACvC,IAAA,MAAM,CAAC,SAAA,EAAW,aAAa,CAAA,GAAI,GAAI,CAAA,OAAA;AACvC,IAAM,MAAA,YAAA,GAAeC,cAAQ,MAAM,iBAAA,CAAkB,QAAQ,CAAG,EAAA,CAAC,QAAQ,CAAC,CAAA;AAE1E,IAAM,MAAA,SAAA,GAAYC,uBAAc,SAAS,CAAA,GACrCC,iCAAwB,KAAO,EAAA,aAAA,EAAe,SAAW,EAAA,QAAQ,CACjE,GAAA,EAAA;AAEJ,IAAI,GAAA,CAAA,OAAA,GAAU,CAAC,KAAA,EAAO,SAAS,CAAA;AAE/B,IACE,uBAAAC,eAAA,CAAC,SAAK,GAAG,cAAA,EAAgB,WAAW,EAAG,CAAA,SAAA,EAAW,SAAW,EAAA,SAAS,CACnE,EAAA,QAAA,EAAA;AAAA,MAAA,YAAA,CAAa,KAAK,CAAA;AAAA,MAClB,SAAY,mBAAAC,cAAA,CAAC,MAAK,EAAA,EAAA,WAAA,EAAU,eAAc,CAAK,GAAA;AAAA,KAClD,EAAA,CAAA;AAAA;AAGN;AACA,WAAA,CAAY,WAAc,GAAA,aAAA;;;;"}

package/cjs/sortable-list/SortableList.js.map

@@ -1 +1 @@
-{"version":3,"file":"SortableList.js","sources":["../../src/sortable-list/SortableList.tsx"],"sourcesContent":["import { ListBox, ListBoxProps, Option, OptionProps } from \"@salt-ds/core\";\nimport { DragDropProvider, useSortable } from \"@vuu-ui/vuu-utils\";\nimport { useCallback, useRef } from \"react\";\n\nexport const SortableOption = ({\n  id,\n  index,\n  value,\n  ...optionProps\n}: OptionProps & { id: string; index: number }) => {\n  const { ref } = useSortable({ id, index });\n  return <Option {...optionProps} id={id} ref={ref} value={value} />;\n};\n\nexport const SortableList = ({\n  children,\n  onReorderListItems,\n  ...listBoxProps\n}: ListBoxProps & {\n  onReorderListItems?: (listItems: unknown[]) => void;\n}) => {\n  const listRef = useRef<HTMLDivElement>(null);\n  const handleDragEnd = useCallback(() => {\n    setTimeout(() => {\n      const listItems = listRef.current?.querySelectorAll(\".saltOption\");\n      if (listItems) {\n        const items = Array.from(listItems).map(({ id }) => id);\n        onReorderListItems?.(items);\n      }\n    }, 300);\n  }, [onReorderListItems]);\n\n  return (\n    <DragDropProvider onDragEnd={handleDragEnd}>\n      <ListBox {...listBoxProps} ref={listRef}>\n        {children}\n      </ListBox>\n    </DragDropProvider>\n  );\n};\n"],"names":["useSortable","Option","useRef","useCallback","jsx","DragDropProvider","ListBox"],"mappings":";;;;;;;AAIO,MAAM,iBAAiB,CAAC;AAAA,EAC7B,EAAA;AAAA,EACA,KAAA;AAAA,EACA,KAAA;AAAA,EACA,GAAG;AACL,CAAmD,KAAA;AACjD,EAAA,MAAM,EAAE,GAAI,EAAA,GAAIA,qBAAY,EAAE,EAAA,EAAI,OAAO,CAAA;AACzC,EAAA,sCAAQC,WAAQ,EAAA,EAAA,GAAG,WAAa,EAAA,EAAA,EAAQ,KAAU,KAAc,EAAA,CAAA;AAClE;AAEO,MAAM,eAAe,CAAC;AAAA,EAC3B,QAAA;AAAA,EACA,kBAAA;AAAA,EACA,GAAG;AACL,CAEM,KAAA;AACJ,EAAM,MAAA,OAAA,GAAUC,aAAuB,IAAI,CAAA;AAC3C,EAAM,MAAA,aAAA,GAAgBC,kBAAY,MAAM;AACtC,IAAA,UAAA,CAAW,MAAM;AACf,MAAA,MAAM,SAAY,GAAA,OAAA,CAAQ,OAAS,EAAA,gBAAA,CAAiB,aAAa,CAAA;AACjE,MAAA,IAAI,SAAW,EAAA;AACb,QAAM,MAAA,KAAA,GAAQ,KAAM,CAAA,IAAA,CAAK,SAAS,CAAA,CAAE,IAAI,CAAC,EAAE,EAAG,EAAA,KAAM,EAAE,CAAA;AACtD,QAAA,kBAAA,GAAqB,KAAK,CAAA;AAAA;AAC5B,OACC,GAAG,CAAA;AAAA,GACR,EAAG,CAAC,kBAAkB,CAAC,CAAA;AAEvB,EACE,uBAAAC,cAAA,CAACC,yBAAiB,EAAA,EAAA,SAAA,EAAW,aAC3B,EAAA,QAAA,kBAAAD,cAAA,CAACE,YAAS,EAAA,EAAA,GAAG,YAAc,EAAA,GAAA,EAAK,OAC7B,EAAA,QAAA,EACH,CACF,EAAA,CAAA;AAEJ;;;;;"}
+{"version":3,"file":"SortableList.js","sources":["../../../../packages/vuu-ui-controls/src/sortable-list/SortableList.tsx"],"sourcesContent":["import { ListBox, ListBoxProps, Option, OptionProps } from \"@salt-ds/core\";\nimport { DragDropProvider, useSortable } from \"@vuu-ui/vuu-utils\";\nimport { useCallback, useRef } from \"react\";\n\nexport const SortableOption = ({\n  id,\n  index,\n  value,\n  ...optionProps\n}: OptionProps & { id: string; index: number }) => {\n  const { ref } = useSortable({ id, index });\n  return <Option {...optionProps} id={id} ref={ref} value={value} />;\n};\n\nexport const SortableList = ({\n  children,\n  onReorderListItems,\n  ...listBoxProps\n}: ListBoxProps & {\n  onReorderListItems?: (listItems: unknown[]) => void;\n}) => {\n  const listRef = useRef<HTMLDivElement>(null);\n  const handleDragEnd = useCallback(() => {\n    setTimeout(() => {\n      const listItems = listRef.current?.querySelectorAll(\".saltOption\");\n      if (listItems) {\n        const items = Array.from(listItems).map(({ id }) => id);\n        onReorderListItems?.(items);\n      }\n    }, 300);\n  }, [onReorderListItems]);\n\n  return (\n    <DragDropProvider onDragEnd={handleDragEnd}>\n      <ListBox {...listBoxProps} ref={listRef}>\n        {children}\n      </ListBox>\n    </DragDropProvider>\n  );\n};\n"],"names":["useSortable","Option","useRef","useCallback","jsx","DragDropProvider","ListBox"],"mappings":";;;;;;;AAIO,MAAM,iBAAiB,CAAC;AAAA,EAC7B,EAAA;AAAA,EACA,KAAA;AAAA,EACA,KAAA;AAAA,EACA,GAAG;AACL,CAAmD,KAAA;AACjD,EAAA,MAAM,EAAE,GAAI,EAAA,GAAIA,qBAAY,EAAE,EAAA,EAAI,OAAO,CAAA;AACzC,EAAA,sCAAQC,WAAQ,EAAA,EAAA,GAAG,WAAa,EAAA,EAAA,EAAQ,KAAU,KAAc,EAAA,CAAA;AAClE;AAEO,MAAM,eAAe,CAAC;AAAA,EAC3B,QAAA;AAAA,EACA,kBAAA;AAAA,EACA,GAAG;AACL,CAEM,KAAA;AACJ,EAAM,MAAA,OAAA,GAAUC,aAAuB,IAAI,CAAA;AAC3C,EAAM,MAAA,aAAA,GAAgBC,kBAAY,MAAM;AACtC,IAAA,UAAA,CAAW,MAAM;AACf,MAAA,MAAM,SAAY,GAAA,OAAA,CAAQ,OAAS,EAAA,gBAAA,CAAiB,aAAa,CAAA;AACjE,MAAA,IAAI,SAAW,EAAA;AACb,QAAM,MAAA,KAAA,GAAQ,KAAM,CAAA,IAAA,CAAK,SAAS,CAAA,CAAE,IAAI,CAAC,EAAE,EAAG,EAAA,KAAM,EAAE,CAAA;AACtD,QAAA,kBAAA,GAAqB,KAAK,CAAA;AAAA;AAC5B,OACC,GAAG,CAAA;AAAA,GACR,EAAG,CAAC,kBAAkB,CAAC,CAAA;AAEvB,EACE,uBAAAC,cAAA,CAACC,yBAAiB,EAAA,EAAA,SAAA,EAAW,aAC3B,EAAA,QAAA,kBAAAD,cAAA,CAACE,YAAS,EAAA,EAAA,GAAG,YAAc,EAAA,GAAA,EAAK,OAC7B,EAAA,QAAA,EACH,CACF,EAAA,CAAA;AAEJ;;;;;"}

package/cjs/split-button/SplitButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"SplitButton.js","sources":["../../src/split-button/SplitButton.tsx"],"sourcesContent":["import { PopupMenu, PopupMenuProps } from \"@vuu-ui/vuu-popups\";\nimport { Button, ButtonProps, useForkRef } from \"@salt-ds/core\";\nimport { forwardRef, HTMLAttributes } from \"react\";\nimport { useSplitButton } from \"./useSplitButton\";\nimport cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport splitButtonCss from \"./SplitButton.css\";\nimport { ContextMenuProvider } from \"@vuu-ui/vuu-context-menu\";\n\nexport interface SplitButtonProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"onClick\">,\n    Pick<ButtonProps, \"onClick\"> {\n  ButtonProps?: Partial<Omit<ButtonProps, \"onClick\" | \"variant\">>;\n  PopupMenuProps?: Partial<PopupMenuProps>;\n  disabled?: boolean;\n  segmented?: boolean;\n  variant?: ButtonProps[\"variant\"];\n}\n\nconst classBase = \"vuuSplitButton\";\n\nexport const SplitButton = forwardRef<HTMLDivElement, SplitButtonProps>(\n  function SplitButton(\n    {\n      ButtonProps: ButtonPropsProp,\n      PopupMenuProps: PopupMenuPropsProp,\n      children,\n      className,\n      disabled = false,\n      onClick,\n      segmented = false,\n      variant = \"primary\",\n      ...htmlAttributes\n    },\n    forwardedRef,\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"vuu-split-button\",\n      css: splitButtonCss,\n      window: targetWindow,\n    });\n\n    const { ButtonProps, buttonRef, rootRef, PopupMenuProps, ...rootProps } =\n      useSplitButton({\n        ButtonProps: ButtonPropsProp,\n        PopupMenuProps: PopupMenuPropsProp,\n        classBase,\n        onClick,\n        segmented,\n      });\n\n    return (\n      <ContextMenuProvider>\n        <div\n          {...htmlAttributes}\n          {...rootProps}\n          className={cx(classBase, `${classBase}-${variant}`, className, {\n            [`${classBase}-disabled`]: disabled,\n            [`${classBase}-segmented`]: segmented,\n          })}\n          ref={useForkRef(forwardedRef, rootRef)}\n          data-showcase-center\n          tabIndex={-1}\n        >\n          <Button\n            {...ButtonProps}\n            className={`${classBase}-main`}\n            disabled={disabled}\n            ref={buttonRef}\n            variant={variant}\n          >\n            {children}\n          </Button>\n          <PopupMenu\n            {...PopupMenuProps}\n            className={`${classBase}-trigger`}\n            disabled={disabled}\n            icon={PopupMenuProps?.icon ?? \"chevron-down\"}\n            tabIndex={segmented ? 0 : -1}\n            variant={variant}\n          />\n        </div>\n      </ContextMenuProvider>\n    );\n  },\n);\n"],"names":["forwardRef","SplitButton","useWindow","useComponentCssInjection","splitButtonCss","ButtonProps","PopupMenuProps","useSplitButton","ContextMenuProvider","jsxs","useForkRef","jsx","Button","PopupMenu"],"mappings":";;;;;;;;;;;;;AAqBA,MAAM,SAAY,GAAA,gBAAA;AAEX,MAAM,WAAc,GAAAA,gBAAA;AAAA,EACzB,SAASC,YACP,CAAA;AAAA,IACE,WAAa,EAAA,eAAA;AAAA,IACb,cAAgB,EAAA,kBAAA;AAAA,IAChB,QAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAW,GAAA,KAAA;AAAA,IACX,OAAA;AAAA,IACA,SAAY,GAAA,KAAA;AAAA,IACZ,OAAU,GAAA,SAAA;AAAA,IACV,GAAG;AAAA,KAEL,YACA,EAAA;AACA,IAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,kBAAA;AAAA,MACR,GAAK,EAAAC,aAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IAAM,MAAA,EAAE,WAAAC,EAAAA,YAAAA,EAAa,SAAW,EAAA,OAAA,EAAS,gBAAAC,eAAgB,EAAA,GAAG,SAAU,EAAA,GACpEC,6BAAe,CAAA;AAAA,MACb,WAAa,EAAA,eAAA;AAAA,MACb,cAAgB,EAAA,kBAAA;AAAA,MAChB,SAAA;AAAA,MACA,OAAA;AAAA,MACA;AAAA,KACD,CAAA;AAEH,IAAA,sCACGC,kCACC,EAAA,EAAA,QAAA,kBAAAC,eAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACE,GAAG,cAAA;AAAA,QACH,GAAG,SAAA;AAAA,QACJ,SAAA,EAAW,GAAG,SAAW,EAAA,CAAA,EAAG,SAAS,CAAI,CAAA,EAAA,OAAO,IAAI,SAAW,EAAA;AAAA,UAC7D,CAAC,CAAA,EAAG,SAAS,CAAA,SAAA,CAAW,GAAG,QAAA;AAAA,UAC3B,CAAC,CAAA,EAAG,SAAS,CAAA,UAAA,CAAY,GAAG;AAAA,SAC7B,CAAA;AAAA,QACD,GAAA,EAAKC,eAAW,CAAA,YAAA,EAAc,OAAO,CAAA;AAAA,QACrC,sBAAoB,EAAA,IAAA;AAAA,QACpB,QAAU,EAAA,CAAA,CAAA;AAAA,QAEV,QAAA,EAAA;AAAA,0BAAAC,cAAA;AAAA,YAACC,WAAA;AAAA,YAAA;AAAA,cACE,GAAGP,YAAAA;AAAA,cACJ,SAAA,EAAW,GAAG,SAAS,CAAA,KAAA,CAAA;AAAA,cACvB,QAAA;AAAA,cACA,GAAK,EAAA,SAAA;AAAA,cACL,OAAA;AAAA,cAEC;AAAA;AAAA,WACH;AAAA,0BACAM,cAAA;AAAA,YAACE,mBAAA;AAAA,YAAA;AAAA,cACE,GAAGP,eAAAA;AAAA,cACJ,SAAA,EAAW,GAAG,SAAS,CAAA,QAAA,CAAA;AAAA,cACvB,QAAA;AAAA,cACA,IAAA,EAAMA,iBAAgB,IAAQ,IAAA,cAAA;AAAA,cAC9B,QAAA,EAAU,YAAY,CAAI,GAAA,CAAA,CAAA;AAAA,cAC1B;AAAA;AAAA;AACF;AAAA;AAAA,KAEJ,EAAA,CAAA;AAAA;AAGN;;;;"}
+{"version":3,"file":"SplitButton.js","sources":["../../../../packages/vuu-ui-controls/src/split-button/SplitButton.tsx"],"sourcesContent":["import { PopupMenu, PopupMenuProps } from \"@vuu-ui/vuu-popups\";\nimport { Button, ButtonProps, useForkRef } from \"@salt-ds/core\";\nimport { forwardRef, HTMLAttributes } from \"react\";\nimport { useSplitButton } from \"./useSplitButton\";\nimport cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport splitButtonCss from \"./SplitButton.css\";\nimport { ContextMenuProvider } from \"@vuu-ui/vuu-context-menu\";\n\nexport interface SplitButtonProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"onClick\">,\n    Pick<ButtonProps, \"onClick\"> {\n  ButtonProps?: Partial<Omit<ButtonProps, \"onClick\" | \"variant\">>;\n  PopupMenuProps?: Partial<PopupMenuProps>;\n  disabled?: boolean;\n  segmented?: boolean;\n  variant?: ButtonProps[\"variant\"];\n}\n\nconst classBase = \"vuuSplitButton\";\n\nexport const SplitButton = forwardRef<HTMLDivElement, SplitButtonProps>(\n  function SplitButton(\n    {\n      ButtonProps: ButtonPropsProp,\n      PopupMenuProps: PopupMenuPropsProp,\n      children,\n      className,\n      disabled = false,\n      onClick,\n      segmented = false,\n      variant = \"primary\",\n      ...htmlAttributes\n    },\n    forwardedRef,\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"vuu-split-button\",\n      css: splitButtonCss,\n      window: targetWindow,\n    });\n\n    const { ButtonProps, buttonRef, rootRef, PopupMenuProps, ...rootProps } =\n      useSplitButton({\n        ButtonProps: ButtonPropsProp,\n        PopupMenuProps: PopupMenuPropsProp,\n        classBase,\n        onClick,\n        segmented,\n      });\n\n    return (\n      <ContextMenuProvider>\n        <div\n          {...htmlAttributes}\n          {...rootProps}\n          className={cx(classBase, `${classBase}-${variant}`, className, {\n            [`${classBase}-disabled`]: disabled,\n            [`${classBase}-segmented`]: segmented,\n          })}\n          ref={useForkRef(forwardedRef, rootRef)}\n          data-showcase-center\n          tabIndex={-1}\n        >\n          <Button\n            {...ButtonProps}\n            className={`${classBase}-main`}\n            disabled={disabled}\n            ref={buttonRef}\n            variant={variant}\n          >\n            {children}\n          </Button>\n          <PopupMenu\n            {...PopupMenuProps}\n            className={`${classBase}-trigger`}\n            disabled={disabled}\n            icon={PopupMenuProps?.icon ?? \"chevron-down\"}\n            tabIndex={segmented ? 0 : -1}\n            variant={variant}\n          />\n        </div>\n      </ContextMenuProvider>\n    );\n  },\n);\n"],"names":["forwardRef","SplitButton","useWindow","useComponentCssInjection","splitButtonCss","ButtonProps","PopupMenuProps","useSplitButton","ContextMenuProvider","jsxs","useForkRef","jsx","Button","PopupMenu"],"mappings":";;;;;;;;;;;;;AAqBA,MAAM,SAAY,GAAA,gBAAA;AAEX,MAAM,WAAc,GAAAA,gBAAA;AAAA,EACzB,SAASC,YACP,CAAA;AAAA,IACE,WAAa,EAAA,eAAA;AAAA,IACb,cAAgB,EAAA,kBAAA;AAAA,IAChB,QAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAW,GAAA,KAAA;AAAA,IACX,OAAA;AAAA,IACA,SAAY,GAAA,KAAA;AAAA,IACZ,OAAU,GAAA,SAAA;AAAA,IACV,GAAG;AAAA,KAEL,YACA,EAAA;AACA,IAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,kBAAA;AAAA,MACR,GAAK,EAAAC,aAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IAAM,MAAA,EAAE,WAAAC,EAAAA,YAAAA,EAAa,SAAW,EAAA,OAAA,EAAS,gBAAAC,eAAgB,EAAA,GAAG,SAAU,EAAA,GACpEC,6BAAe,CAAA;AAAA,MACb,WAAa,EAAA,eAAA;AAAA,MACb,cAAgB,EAAA,kBAAA;AAAA,MAChB,SAAA;AAAA,MACA,OAAA;AAAA,MACA;AAAA,KACD,CAAA;AAEH,IAAA,sCACGC,kCACC,EAAA,EAAA,QAAA,kBAAAC,eAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACE,GAAG,cAAA;AAAA,QACH,GAAG,SAAA;AAAA,QACJ,SAAA,EAAW,GAAG,SAAW,EAAA,CAAA,EAAG,SAAS,CAAI,CAAA,EAAA,OAAO,IAAI,SAAW,EAAA;AAAA,UAC7D,CAAC,CAAA,EAAG,SAAS,CAAA,SAAA,CAAW,GAAG,QAAA;AAAA,UAC3B,CAAC,CAAA,EAAG,SAAS,CAAA,UAAA,CAAY,GAAG;AAAA,SAC7B,CAAA;AAAA,QACD,GAAA,EAAKC,eAAW,CAAA,YAAA,EAAc,OAAO,CAAA;AAAA,QACrC,sBAAoB,EAAA,IAAA;AAAA,QACpB,QAAU,EAAA,CAAA,CAAA;AAAA,QAEV,QAAA,EAAA;AAAA,0BAAAC,cAAA;AAAA,YAACC,WAAA;AAAA,YAAA;AAAA,cACE,GAAGP,YAAAA;AAAA,cACJ,SAAA,EAAW,GAAG,SAAS,CAAA,KAAA,CAAA;AAAA,cACvB,QAAA;AAAA,cACA,GAAK,EAAA,SAAA;AAAA,cACL,OAAA;AAAA,cAEC;AAAA;AAAA,WACH;AAAA,0BACAM,cAAA;AAAA,YAACE,mBAAA;AAAA,YAAA;AAAA,cACE,GAAGP,eAAAA;AAAA,cACJ,SAAA,EAAW,GAAG,SAAS,CAAA,QAAA,CAAA;AAAA,cACvB,QAAA;AAAA,cACA,IAAA,EAAMA,iBAAgB,IAAQ,IAAA,cAAA;AAAA,cAC9B,QAAA,EAAU,YAAY,CAAI,GAAA,CAAA,CAAA;AAAA,cAC1B;AAAA;AAAA;AACF;AAAA;AAAA,KAEJ,EAAA,CAAA;AAAA;AAGN;;;;"}

package/cjs/split-button/SplitStateButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"SplitStateButton.js","sources":["../../src/split-button/SplitStateButton.tsx"],"sourcesContent":["import { SplitButton, SplitButtonProps } from \"./SplitButton\";\nimport cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { forwardRef } from \"react\";\n\nimport splitStateButtonCss from \"./SplitStateButton.css\";\n\nconst classBase = \"vuuSplitStateButton\";\n\nexport interface SplitStateButtonProps extends SplitButtonProps {\n  selected: boolean;\n}\n\nexport const SplitStateButton = forwardRef<\n  HTMLDivElement,\n  SplitStateButtonProps\n>(function SplitStateButton(\n  { className, selected, ...splitButtonProps },\n  forwardedRef\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-split-state-button\",\n    css: splitStateButtonCss,\n    window: targetWindow,\n  });\n\n  return (\n    <SplitButton\n      {...splitButtonProps}\n      aria-checked={selected}\n      className={cx(classBase, className)}\n      ref={forwardedRef}\n    />\n  );\n});\n"],"names":["forwardRef","SplitStateButton","useWindow","useComponentCssInjection","splitStateButtonCss","jsx","SplitButton"],"mappings":";;;;;;;;;;AAQA,MAAM,SAAY,GAAA,qBAAA;AAML,MAAA,gBAAA,GAAmBA,gBAG9B,CAAA,SAASC,iBACT,CAAA,EAAE,WAAW,QAAU,EAAA,GAAG,gBAAiB,EAAA,EAC3C,YACA,EAAA;AACA,EAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,wBAAA;AAAA,IACR,GAAK,EAAAC,kBAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EACE,uBAAAC,cAAA;AAAA,IAACC,uBAAA;AAAA,IAAA;AAAA,MACE,GAAG,gBAAA;AAAA,MACJ,cAAc,EAAA,QAAA;AAAA,MACd,SAAA,EAAW,EAAG,CAAA,SAAA,EAAW,SAAS,CAAA;AAAA,MAClC,GAAK,EAAA;AAAA;AAAA,GACP;AAEJ,CAAC;;;;"}
+{"version":3,"file":"SplitStateButton.js","sources":["../../../../packages/vuu-ui-controls/src/split-button/SplitStateButton.tsx"],"sourcesContent":["import { SplitButton, SplitButtonProps } from \"./SplitButton\";\nimport cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { forwardRef } from \"react\";\n\nimport splitStateButtonCss from \"./SplitStateButton.css\";\n\nconst classBase = \"vuuSplitStateButton\";\n\nexport interface SplitStateButtonProps extends SplitButtonProps {\n  selected: boolean;\n}\n\nexport const SplitStateButton = forwardRef<\n  HTMLDivElement,\n  SplitStateButtonProps\n>(function SplitStateButton(\n  { className, selected, ...splitButtonProps },\n  forwardedRef\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-split-state-button\",\n    css: splitStateButtonCss,\n    window: targetWindow,\n  });\n\n  return (\n    <SplitButton\n      {...splitButtonProps}\n      aria-checked={selected}\n      className={cx(classBase, className)}\n      ref={forwardedRef}\n    />\n  );\n});\n"],"names":["forwardRef","SplitStateButton","useWindow","useComponentCssInjection","splitStateButtonCss","jsx","SplitButton"],"mappings":";;;;;;;;;;AAQA,MAAM,SAAY,GAAA,qBAAA;AAML,MAAA,gBAAA,GAAmBA,gBAG9B,CAAA,SAASC,iBACT,CAAA,EAAE,WAAW,QAAU,EAAA,GAAG,gBAAiB,EAAA,EAC3C,YACA,EAAA;AACA,EAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,wBAAA;AAAA,IACR,GAAK,EAAAC,kBAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EACE,uBAAAC,cAAA;AAAA,IAACC,uBAAA;AAAA,IAAA;AAAA,MACE,GAAG,gBAAA;AAAA,MACJ,cAAc,EAAA,QAAA;AAAA,MACd,SAAA,EAAW,EAAG,CAAA,SAAA,EAAW,SAAS,CAAA;AAAA,MAClC,GAAK,EAAA;AAAA;AAAA,GACP;AAEJ,CAAC;;;;"}

package/cjs/split-button/useSplitButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"useSplitButton.js","sources":["../../src/split-button/useSplitButton.ts"],"sourcesContent":["import { MenuCloseHandler, PopupMenuProps } from \"@vuu-ui/vuu-popups\";\nimport { dispatchMouseEvent } from \"@vuu-ui/vuu-utils\";\nimport {\n  FocusEventHandler,\n  KeyboardEventHandler,\n  useCallback,\n  useRef,\n} from \"react\";\nimport { SplitButtonProps } from \"./SplitButton\";\n\nexport interface SplitButtonHookProps\n  extends Pick<\n    SplitButtonProps,\n    \"PopupMenuProps\" | \"ButtonProps\" | \"onClick\" | \"segmented\"\n  > {\n  classBase: string;\n}\n\nconst focusTargetIsEditableLabel = (target: EventTarget) => {\n  if ((target as HTMLElement).tagName === \"INPUT\") {\n    return true;\n  }\n  return false;\n};\n\nexport const useSplitButton = ({\n  ButtonProps: ButtonPropsProp,\n  PopupMenuProps,\n  classBase,\n  onClick,\n}: // segmented,\nSplitButtonHookProps) => {\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  const rootRef = useRef<HTMLDivElement>(null);\n\n  const onMenuClose = useCallback<MenuCloseHandler>((reason) => {\n    if (reason?.type !== \"tab-away\") {\n      const buttonMain = rootRef.current?.querySelector(\n        \".vuuSplitButton-main\",\n      ) as HTMLElement;\n      buttonMain?.focus();\n    }\n  }, []);\n\n  const menuProps: PopupMenuProps = {\n    ...PopupMenuProps,\n    anchorElement: rootRef,\n    menuClassName: `${classBase}-menu`,\n    onMenuClose,\n    popupPlacement: \"below-full-width\",\n  };\n\n  const handleRootFocus = useCallback<FocusEventHandler>((evt) => {\n    const { current: splitButton } = rootRef;\n    if (!splitButton?.classList.contains(\"vuuFocusVisible\")) {\n      splitButton?.classList.add(\"vuuFocusVisible\");\n      if (!focusTargetIsEditableLabel(evt.target)) {\n        requestAnimationFrame(() => {\n          buttonRef.current?.focus();\n        });\n      }\n    }\n  }, []);\n\n  const handleRootBlur = useCallback<FocusEventHandler>((evt) => {\n    const { current: splitButton } = rootRef;\n    const target = evt.relatedTarget as HTMLElement;\n    if (!splitButton?.contains(target)) {\n      if (splitButton?.classList.contains(\"vuuFocusVisible\")) {\n        splitButton.classList.remove(\"vuuFocusVisible\");\n      }\n    }\n  }, []);\n\n  const handleButtonKeyDown = useCallback<\n    KeyboardEventHandler<HTMLButtonElement>\n  >(\n    (evt) => {\n      if (evt.key === \"ArrowDown\") {\n        const popupTrigger = rootRef.current?.querySelector(\n          `.${classBase}-trigger`,\n        ) as HTMLElement;\n        if (popupTrigger) {\n          dispatchMouseEvent(popupTrigger, \"click\");\n        }\n      }\n    },\n    [classBase],\n  );\n\n  const ButtonProps = {\n    ...ButtonPropsProp,\n    onClick,\n    onKeyDown: handleButtonKeyDown,\n  };\n\n  return {\n    ButtonProps,\n    PopupMenuProps: menuProps,\n    buttonRef,\n    rootRef,\n    onBlur: handleRootBlur,\n    onFocus: handleRootFocus,\n  };\n};\n"],"names":["PopupMenuProps","useRef","useCallback","dispatchMouseEvent"],"mappings":"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"}
+{"version":3,"file":"useSplitButton.js","sources":["../../../../packages/vuu-ui-controls/src/split-button/useSplitButton.ts"],"sourcesContent":["import { MenuCloseHandler, PopupMenuProps } from \"@vuu-ui/vuu-popups\";\nimport { dispatchMouseEvent } from \"@vuu-ui/vuu-utils\";\nimport {\n  FocusEventHandler,\n  KeyboardEventHandler,\n  useCallback,\n  useRef,\n} from \"react\";\nimport { SplitButtonProps } from \"./SplitButton\";\n\nexport interface SplitButtonHookProps\n  extends Pick<\n    SplitButtonProps,\n    \"PopupMenuProps\" | \"ButtonProps\" | \"onClick\" | \"segmented\"\n  > {\n  classBase: string;\n}\n\nconst focusTargetIsEditableLabel = (target: EventTarget) => {\n  if ((target as HTMLElement).tagName === \"INPUT\") {\n    return true;\n  }\n  return false;\n};\n\nexport const useSplitButton = ({\n  ButtonProps: ButtonPropsProp,\n  PopupMenuProps,\n  classBase,\n  onClick,\n}: // segmented,\nSplitButtonHookProps) => {\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  const rootRef = useRef<HTMLDivElement>(null);\n\n  const onMenuClose = useCallback<MenuCloseHandler>((reason) => {\n    if (reason?.type !== \"tab-away\") {\n      const buttonMain = rootRef.current?.querySelector(\n        \".vuuSplitButton-main\",\n      ) as HTMLElement;\n      buttonMain?.focus();\n    }\n  }, []);\n\n  const menuProps: PopupMenuProps = {\n    ...PopupMenuProps,\n    anchorElement: rootRef,\n    menuClassName: `${classBase}-menu`,\n    onMenuClose,\n    popupPlacement: \"below-full-width\",\n  };\n\n  const handleRootFocus = useCallback<FocusEventHandler>((evt) => {\n    const { current: splitButton } = rootRef;\n    if (!splitButton?.classList.contains(\"vuuFocusVisible\")) {\n      splitButton?.classList.add(\"vuuFocusVisible\");\n      if (!focusTargetIsEditableLabel(evt.target)) {\n        requestAnimationFrame(() => {\n          buttonRef.current?.focus();\n        });\n      }\n    }\n  }, []);\n\n  const handleRootBlur = useCallback<FocusEventHandler>((evt) => {\n    const { current: splitButton } = rootRef;\n    const target = evt.relatedTarget as HTMLElement;\n    if (!splitButton?.contains(target)) {\n      if (splitButton?.classList.contains(\"vuuFocusVisible\")) {\n        splitButton.classList.remove(\"vuuFocusVisible\");\n      }\n    }\n  }, []);\n\n  const handleButtonKeyDown = useCallback<\n    KeyboardEventHandler<HTMLButtonElement>\n  >(\n    (evt) => {\n      if (evt.key === \"ArrowDown\") {\n        const popupTrigger = rootRef.current?.querySelector(\n          `.${classBase}-trigger`,\n        ) as HTMLElement;\n        if (popupTrigger) {\n          dispatchMouseEvent(popupTrigger, \"click\");\n        }\n      }\n    },\n    [classBase],\n  );\n\n  const ButtonProps = {\n    ...ButtonPropsProp,\n    onClick,\n    onKeyDown: handleButtonKeyDown,\n  };\n\n  return {\n    ButtonProps,\n    PopupMenuProps: menuProps,\n    buttonRef,\n    rootRef,\n    onBlur: handleRootBlur,\n    onFocus: handleRootFocus,\n  };\n};\n"],"names":["PopupMenuProps","useRef","useCallback","dispatchMouseEvent"],"mappings":"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"}

package/cjs/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":["useWindow","useComponentCssInjection","searchCellCss","useHighlighting","jsxs","jsx"],"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,eAAeA,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,iBAAA;AAAA,IACR,GAAK,EAAAC,YAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAID,EAAM,MAAA,GAAA,GAAM,SAAU,CAAA,MAAA,CAAO,IAAI,CAAA;AACjC,EAAA,MAAM,qBAAwB,GAAAC,wBAAA;AAAA,IAC5B,MAAO,CAAA,cAAA,CAAe,GAAI,CAAA,GAAG,CAAC,CAAA;AAAA,IAC9B;AAAA,GACF;AAEA,EAAA,uBACGC,eAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,SAAA,EAAW,UAAU,CACnC,CAAA,EAAA,QAAA,EAAA;AAAA,oBAACC,cAAA,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":["useWindow","useComponentCssInjection","searchCellCss","useHighlighting","jsxs","jsx"],"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,eAAeA,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,iBAAA;AAAA,IACR,GAAK,EAAAC,YAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAID,EAAM,MAAA,GAAA,GAAM,SAAU,CAAA,MAAA,CAAO,IAAI,CAAA;AACjC,EAAA,MAAM,qBAAwB,GAAAC,wBAAA;AAAA,IAC5B,MAAO,CAAA,cAAA,CAAe,GAAI,CAAA,GAAG,CAAC,CAAA;AAAA,IAC9B;AAAA,GACF;AAEA,EAAA,uBACGC,eAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,SAAA,EAAW,UAAU,CACnC,CAAA,EAAA,QAAA,EAAA;AAAA,oBAACC,cAAA,CAAA,MAAA,EAAA,EAAK,aAAU,WAAY,EAAA,CAAA;AAAA,IAC3B;AAAA,GACH,EAAA,CAAA;AAEJ;;;;"}

package/cjs/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":["jsx","TableProps","useWindow","useComponentCssInjection","instrumentSearchCss","useMemo","useTableSearch","useControlledTableNavigation","useCallback","jsxs","Input","Table","registerComponent","SearchCell"],"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":["jsx","TableProps","useWindow","useComponentCssInjection","instrumentSearchCss","useMemo","useTableSearch","useControlledTableNavigation","useCallback","jsxs","Input","Table","registerComponent","SearchCell"],"mappings":"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"}

package/cjs/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":["useState","useMemo","useCallback"],"mappings":";;;;AAUO,MAAM,iBAAiB,CAAC;AAAA,EAC7B,UAAA;AAAA,EACA;AACF,CAA4B,KAAA;AAC1B,EAAM,MAAA,CAAC,WAAa,EAAA,cAAc,CAAI,GAAAA,cAAA,CAGnC,EAAE,UAAY,EAAA,EAAA,EAAI,MAAQ,EAAA,EAAA,EAAI,CAAA;AAEjC,EAAA,MAAM,iBAAoB,GAAAC,aAAA;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,GAAAC,iBAAA;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":["useState","useMemo","useCallback"],"mappings":";;;;AAUO,MAAM,iBAAiB,CAAC;AAAA,EAC7B,UAAA;AAAA,EACA;AACF,CAA4B,KAAA;AAC1B,EAAM,MAAA,CAAC,WAAa,EAAA,cAAc,CAAI,GAAAA,cAAA,CAGnC,EAAE,UAAY,EAAA,EAAA,EAAI,MAAQ,EAAA,EAAA,EAAI,CAAA;AAEjC,EAAA,MAAM,iBAAoB,GAAAC,aAAA;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,GAAAC,iBAAA;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/cjs/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":["makePrefixer","forwardRef","TabBar","useWindow","useComponentCssInjection","tabBarCss","jsx","clsx"],"mappings":";;;;;;;;;;AAmBA,MAAM,YAAA,GAAeA,kBAAa,YAAY,CAAA;AAEvC,MAAM,MAAS,GAAAC,gBAAA;AAAA,EACpB,SAASC,OAAO,CAAA,KAAA,EAAO,GAAK,EAAA;AAC1B,IAAA,MAAM,EAAE,SAAW,EAAA,QAAA,EAAU,SAAS,KAAO,EAAA,GAAG,MAAS,GAAA,KAAA;AAEzD,IAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,cAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IACE,uBAAAC,cAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAW,EAAAC,OAAA;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":["makePrefixer","forwardRef","TabBar","useWindow","useComponentCssInjection","tabBarCss","jsx","clsx"],"mappings":";;;;;;;;;;AAmBA,MAAM,YAAA,GAAeA,kBAAa,YAAY,CAAA;AAEvC,MAAM,MAAS,GAAAC,gBAAA;AAAA,EACpB,SAASC,OAAO,CAAA,KAAA,EAAO,GAAK,EAAA;AAC1B,IAAA,MAAM,EAAE,SAAW,EAAA,QAAA,EAAU,SAAS,KAAO,EAAA,GAAG,MAAS,GAAA,KAAA;AAEzD,IAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,cAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IACE,uBAAAC,cAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAW,EAAAC,OAAA;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/cjs/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":["makePrefixer","forwardRef","useWindow","useComponentCssInjection","tablistNextCss","useTabsNext","useRef","useForkRef","useOverflow","useIsomorphicLayoutEffect","jsxs","clsx","capitalize","jsx","TabOverflowList"],"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":["makePrefixer","forwardRef","useWindow","useComponentCssInjection","tablistNextCss","useTabsNext","useRef","useForkRef","useOverflow","useIsomorphicLayoutEffect","jsxs","clsx","capitalize","jsx","TabOverflowList"],"mappings":"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"}

package/cjs/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":["makePrefixer","forwardRef","useWindow","useComponentCssInjection","tabCss","useTabsNext","useId","useRef","useState","useCallback","id","useMemo","jsx","TabNextContext","clsx"],"mappings":"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"}
+{"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":["makePrefixer","forwardRef","useWindow","useComponentCssInjection","tabCss","useTabsNext","useId","useRef","useState","useCallback","id","useMemo","jsx","TabNextContext","clsx"],"mappings":"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"}

package/cjs/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":["forwardRef","TabNextAction","useId","useTabNext","useIsomorphicLayoutEffect","jsx","Button","clsx"],"mappings":";;;;;;;;AAcO,MAAM,aAAgB,GAAAA,gBAAA;AAAA,EAC3B,SAASC,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,GAAKC,WAAM,MAAM,CAAA;AACvB,IAAA,MAAM,EAAE,OAAS,EAAA,QAAA,EAAU,KAAO,EAAA,cAAA,KAAmBC,yBAAW,EAAA;AAEhE,IAAAC,8BAAA,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,uBAAAC,cAAA;AAAA,MAACC,WAAA;AAAA,MAAA;AAAA,QACC,EAAA;AAAA,QACA,iBAAiB,EAAAC,OAAA,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":["forwardRef","TabNextAction","useId","useTabNext","useIsomorphicLayoutEffect","jsx","Button","clsx"],"mappings":";;;;;;;;AAcO,MAAM,aAAgB,GAAAA,gBAAA;AAAA,EAC3B,SAASC,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,GAAKC,WAAM,MAAM,CAAA;AACvB,IAAA,MAAM,EAAE,OAAS,EAAA,QAAA,EAAU,KAAO,EAAA,cAAA,KAAmBC,yBAAW,EAAA;AAEhE,IAAAC,8BAAA,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,uBAAAC,cAAA;AAAA,MAACC,WAAA;AAAA,MAAA;AAAA,QACC,EAAA;AAAA,QACA,iBAAiB,EAAAC,OAAA,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/cjs/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":["createContext","useContext"],"mappings":";;;;;AAaO,MAAM,cAAiB,GAAAA,kBAAA;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,OAAOC,iBAAW,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":["createContext","useContext"],"mappings":";;;;;AAaO,MAAM,cAAiB,GAAAA,kBAAA;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,OAAOC,iBAAW,cAAc,CAAA;AAClC;;;;;"}

package/cjs/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":["makePrefixer","forwardRef","TabNextPanel","useWindow","useComponentCssInjection","tabPanelCss","useId","useTabsNext","useRef","useForkRef","useIsomorphicLayoutEffect","useState","useEffect","tabbable","jsx","clsx"],"mappings":";;;;;;;;;;;;AA2BA,MAAM,YAAA,GAAeA,kBAAa,kBAAkB,CAAA;AAE7C,MAAM,YAAe,GAAAC,gBAAA;AAAA,EAC1B,SAASC,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,eAAeC,gBAAU,EAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,qBAAA;AAAA,MACR,GAAK,EAAAC,cAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AACD,IAAM,MAAA,EAAA,GAAKC,WAAM,MAAM,CAAA;AACvB,IAAA,MAAM,EAAE,aAAA,EAAe,QAAU,EAAA,QAAA,KAAaC,2BAAY,EAAA;AAE1D,IAAM,MAAA,QAAA,GAAWC,aAAuB,IAAI,CAAA;AAC5C,IAAM,MAAA,SAAA,GAAYC,eAAW,CAAA,QAAA,EAAU,GAAG,CAAA;AAE1C,IAAAC,8BAAA,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,GAAIC,eAAS,KAAK,CAAA;AACtE,IAAAC,eAAA,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,GAAWC,iBAAS,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,uBAAAC,cAAA;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,EAAAC,OAAA,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":["makePrefixer","forwardRef","TabNextPanel","useWindow","useComponentCssInjection","tabPanelCss","useId","useTabsNext","useRef","useForkRef","useIsomorphicLayoutEffect","useState","useEffect","tabbable","jsx","clsx"],"mappings":";;;;;;;;;;;;AA2BA,MAAM,YAAA,GAAeA,kBAAa,kBAAkB,CAAA;AAE7C,MAAM,YAAe,GAAAC,gBAAA;AAAA,EAC1B,SAASC,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,eAAeC,gBAAU,EAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,qBAAA;AAAA,MACR,GAAK,EAAAC,cAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AACD,IAAM,MAAA,EAAA,GAAKC,WAAM,MAAM,CAAA;AACvB,IAAA,MAAM,EAAE,aAAA,EAAe,QAAU,EAAA,QAAA,KAAaC,2BAAY,EAAA;AAE1D,IAAM,MAAA,QAAA,GAAWC,aAAuB,IAAI,CAAA;AAC5C,IAAM,MAAA,SAAA,GAAYC,eAAW,CAAA,QAAA,EAAU,GAAG,CAAA;AAE1C,IAAAC,8BAAA,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,GAAIC,eAAS,KAAK,CAAA;AACtE,IAAAC,eAAA,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,GAAWC,iBAAS,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,uBAAAC,cAAA;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,EAAAC,OAAA,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/cjs/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":["makePrefixer","forwardRef","TabNextTrigger","useWindow","useComponentCssInjection","tabTriggerCss","useTabsNext","useTabNext","useRef","useIsomorphicLayoutEffect","useForkRef","jsx","clsx"],"mappings":";;;;;;;;;;;;AAwBA,MAAM,YAAA,GAAeA,kBAAa,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,GAAAC,gBAAA,CAG5B,SAASC,eAAAA,CAAe,OAAO,GAAK,EAAA;AACpC,EAAM,MAAA,EAAE,UAAU,EAAI,EAAA,MAAA,EAAQ,SAAS,SAAW,EAAA,GAAG,MAAS,GAAA,KAAA;AAE9D,EAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,uBAAA;AAAA,IACR,GAAK,EAAAC,gBAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAA,MAAM,EAAE,WAAA,EAAa,WAAa,EAAA,UAAA,KAAeC,2BAAY,EAAA;AAC7D,EAAM,MAAA,EAAE,UAAU,KAAO,EAAA,OAAA,EAAS,UAAU,KAAO,EAAA,OAAA,KAAYC,yBAAW,EAAA;AAE1E,EAAM,MAAA,MAAA,GAASC,aAA0B,IAAI,CAAA;AAE7C,EAAA,MAAM,EAAK,GAAA,KAAA;AAEX,EAAAC,8BAAA,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,GAAYC,eAA8B,CAAA,MAAA,EAAQ,GAAG,CAAA;AAC3D,EAAM,MAAA,OAAA,GAAU,WAAW,KAAK,CAAA;AAEhC,EACE,uBAAAC,cAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,eAAe,EAAA,QAAA;AAAA,MACf,eAAe,EAAA,QAAA;AAAA,MACf,eAAe,EAAA,OAAA;AAAA,MAEf,cAAA,EAAcC,OAAK,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":["makePrefixer","forwardRef","TabNextTrigger","useWindow","useComponentCssInjection","tabTriggerCss","useTabsNext","useTabNext","useRef","useIsomorphicLayoutEffect","useForkRef","jsx","clsx"],"mappings":";;;;;;;;;;;;AAwBA,MAAM,YAAA,GAAeA,kBAAa,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,GAAAC,gBAAA,CAG5B,SAASC,eAAAA,CAAe,OAAO,GAAK,EAAA;AACpC,EAAM,MAAA,EAAE,UAAU,EAAI,EAAA,MAAA,EAAQ,SAAS,SAAW,EAAA,GAAG,MAAS,GAAA,KAAA;AAE9D,EAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,uBAAA;AAAA,IACR,GAAK,EAAAC,gBAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAA,MAAM,EAAE,WAAA,EAAa,WAAa,EAAA,UAAA,KAAeC,2BAAY,EAAA;AAC7D,EAAM,MAAA,EAAE,UAAU,KAAO,EAAA,OAAA,EAAS,UAAU,KAAO,EAAA,OAAA,KAAYC,yBAAW,EAAA;AAE1E,EAAM,MAAA,MAAA,GAASC,aAA0B,IAAI,CAAA;AAE7C,EAAA,MAAM,EAAK,GAAA,KAAA;AAEX,EAAAC,8BAAA,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,GAAYC,eAA8B,CAAA,MAAA,EAAQ,GAAG,CAAA;AAC3D,EAAM,MAAA,OAAA,GAAU,WAAW,KAAK,CAAA;AAEhC,EACE,uBAAAC,cAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,eAAe,EAAA,QAAA;AAAA,MACf,eAAe,EAAA,QAAA;AAAA,MACf,eAAe,EAAA,OAAA;AAAA,MAEf,cAAA,EAAcC,OAAK,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/cjs/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":["makePrefixer","forwardRef","TabOverflowList","useWindow","useComponentCssInjection","tabOverflowListCss","useIcon","useFloatingUI","open","offset","size","useInteractions","useDismiss","useRef","useForkRef","useCallback","useFocusOutside","useId","Children","jsx","Button","FloatingTree"],"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":["makePrefixer","forwardRef","TabOverflowList","useWindow","useComponentCssInjection","tabOverflowListCss","useIcon","useFloatingUI","open","offset","size","useInteractions","useDismiss","useRef","useForkRef","useCallback","useFocusOutside","useId","Children","jsx","Button","FloatingTree"],"mappings":"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"}