@smwb/ui-react 2.7.0 → 2.9.0

package/dist/components/layout/sheet/sheet.js.map

@@ -1 +1 @@
-{"version":3,"file":"sheet.js","sources":["../../../../src/components/layout/sheet/sheet.tsx"],"sourcesContent":["import React, { CSSProperties, forwardRef, PropsWithChildren, useCallback, useEffect, useRef, useState } from \"react\";\nimport cn from \"clsx\";\nimport { CSSTransition } from \"react-transition-group\";\nimport { createPortal } from \"react-dom\";\nimport Button from \"../../inputs/button/button\";\nimport Icon from \"../../base/icon/icon\";\nimport { ClickAwayListener } from \"../../clickAwayListener\";\nimport { useForkRef } from \"../../../hooks/useForkRef\";\nimport { isTopOverlayLayer } from \"../../../utils/overlayLayer\";\n\nexport interface SheetProps extends React.HTMLAttributes<HTMLDivElement> {\n  className?: string;\n  placement?: \"top\" | \"bottom\" | \"right\" | \"left\";\n  isOpen: boolean;\n  onClose?: () => void;\n  variant?: \"default\" | \"modal\";\n  withSizeToggle?: boolean;\n  /** Hide built-in header actions; onClose still handles Esc and backdrop. */\n  hideHeaderActions?: boolean;\n  reverseHeaderActions?: boolean;\n  size?: string;\n  disableOutsideClick?: boolean;\n  /** Close the sheet when Escape is pressed. */\n  closeOnEsc?: boolean;\n  /**\n   * Allow the user to resize the sheet by dragging a grab handle with\n   * touch or mouse (mobile bottom-sheet style). Off by default.\n   */\n  resizable?: boolean;\n  /** Minimum size in px while resizing (default 80). */\n  minSize?: number;\n  /** Maximum size in px while resizing (default: viewport dimension). */\n  maxSize?: number;\n  /** Step in px for keyboard resizing (default 24). */\n  resizeStep?: number;\n  /** Accessible label for the resize handle. */\n  resizeHandleAriaLabel?: string;\n  /** Called with the new size in px while/after resizing. */\n  onResize?: (size: number) => void;\n  \"aria-label\"?: string;\n}\n\ntype Mode = \"small\" | \"expanded\" | null;\n\nexport const Sheet = forwardRef<HTMLDivElement, PropsWithChildren<SheetProps>>(function Sheet(\n  {\n    isOpen,\n    onClose,\n    variant = \"default\",\n    children,\n    placement = \"bottom\",\n    disableOutsideClick,\n    closeOnEsc = true,\n    ...props\n  },\n  ref\n) {\n  const [mode, setMode] = useState<Mode>(null);\n  const nodeRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    if (!isOpen || !closeOnEsc || !onClose) {\n      return;\n    }\n    const onKeyDown = (event: KeyboardEvent) => {\n      // Only the topmost overlay layer reacts to Escape.\n      if (event.key === \"Escape\" && isTopOverlayLayer(nodeRef.current)) {\n        onClose();\n      }\n    };\n    document.addEventListener(\"keydown\", onKeyDown);\n\n    return () => document.removeEventListener(\"keydown\", onKeyDown);\n  }, [isOpen, closeOnEsc, onClose]);\n\n  const handleSizeButton = () => {\n    if (mode === \"expanded\") {\n      setMode(\"small\");\n    } else if (!mode) {\n      setMode(\"expanded\");\n    } else {\n      setMode(null);\n    }\n  };\n\n  const handleClose = () => {\n    onClose?.();\n    setMode(null);\n  };\n\n  return createPortal(\n    <CSSTransition\n      in={isOpen}\n      timeout={70}\n      mountOnEnter\n      unmountOnExit\n      classNames={{ enterDone: \"smwb-entered\" }}\n      appear\n      nodeRef={nodeRef}\n    >\n      {variant === \"default\" ? (\n        <div\n          className={cn(disableOutsideClick ? \"smwb-sheet__overlay\" : \"smwb-sheet__default\")}\n          ref={nodeRef}\n          data-smwb-overlay-layer=\"\"\n        >\n          <SheetBlock\n            ref={ref}\n            onClose={onClose}\n            handleSizeButton={handleSizeButton}\n            handleClose={handleClose}\n            isOpen={isOpen}\n            mode={mode}\n            placement={placement}\n            variant={variant}\n            {...props}\n          >\n            {children}\n          </SheetBlock>\n        </div>\n      ) : (\n        <div\n          className={cn(\"smwb-sheet__overlay\", \"smwb-dark\", `smwb-${placement}`, `smwb-sheet_${variant}`)}\n          ref={nodeRef}\n          data-smwb-overlay-layer=\"\"\n        >\n          <ClickAwayListener onClickAway={() => !disableOutsideClick && handleClose()}>\n            <SheetBlock\n              ref={ref}\n              onClose={onClose}\n              handleSizeButton={handleSizeButton}\n              handleClose={handleClose}\n              isOpen={isOpen}\n              mode={mode}\n              placement={placement}\n              variant={variant}\n              {...props}\n            >\n              {children}\n            </SheetBlock>\n          </ClickAwayListener>\n        </div>\n      )}\n    </CSSTransition>,\n    document.body\n  );\n});\n\nexport default Sheet;\n\ninterface SheetBlockProps extends SheetProps {\n  mode: Mode;\n  handleSizeButton: () => void;\n  handleClose: () => void;\n}\n\n/** Sheets anchored to a horizontal edge resize on the Y axis, vertical edges on X. */\nconst isVerticalAxis = (placement: SheetProps[\"placement\"]) => placement === \"bottom\" || placement === \"top\";\n\nconst SheetBlock = React.forwardRef(function SheetBlock(props: SheetBlockProps, ref: React.Ref<HTMLDivElement>) {\n  const {\n    isOpen,\n    placement,\n    className,\n    mode,\n\n    size = \"60%\",\n    variant,\n    onClose,\n    withSizeToggle = true,\n    hideHeaderActions = false,\n    reverseHeaderActions = false,\n    resizable = false,\n    minSize = 80,\n    maxSize,\n    resizeStep = 24,\n    resizeHandleAriaLabel = \"Resize sheet\",\n    onResize,\n    style,\n    handleClose,\n    handleSizeButton,\n    children,\n    ...rest\n  } = props;\n  const showActions = !hideHeaderActions && (!!onClose || withSizeToggle);\n  const headerActionNodes: React.ReactNode[] = [];\n  if (withSizeToggle) {\n    headerActionNodes.push(\n      <Button variant={\"outlined\"} size=\"small\" onClick={handleSizeButton} key=\"size\">\n        <Icon name=\"open_in_full\" />\n      </Button>\n    );\n  }\n  if (onClose) {\n    headerActionNodes.push(\n      <Button variant={\"outlined\"} size=\"small\" onClick={handleClose} key=\"close\">\n        <Icon name=\"close\" />\n      </Button>\n    );\n  }\n  if (reverseHeaderActions) {\n    headerActionNodes.reverse();\n  }\n  const nodeRef = useRef<HTMLDivElement>(null);\n  const rootRef = useRef<HTMLDivElement>(null);\n  const forkRef = useForkRef(ref, nodeRef, rootRef);\n\n  // Drag-to-resize state. `dragSize` (px) wins over the CSS size when set\n  // (inline style beats the .smwb-expanded/.smwb-small rules).\n  const [dragSize, setDragSize] = useState<number | null>(null);\n  const vertical = isVerticalAxis(placement);\n\n  const clamp = useCallback(\n    (px: number) => {\n      const viewport = vertical ? window.innerHeight : window.innerWidth;\n      const max = maxSize ?? viewport;\n      return Math.max(minSize, Math.min(max, px));\n    },\n    [vertical, maxSize, minSize]\n  );\n\n  const currentSizePx = useCallback(() => {\n    const rect = rootRef.current?.getBoundingClientRect();\n    if (!rect) {\n      return minSize;\n    }\n    return vertical ? rect.height : rect.width;\n  }, [vertical, minSize]);\n\n  const applySize = useCallback(\n    (px: number) => {\n      const next = clamp(px);\n      setDragSize(next);\n      onResize?.(next);\n    },\n    [clamp, onResize]\n  );\n\n  const dragRef = useRef<{ start: number; size: number } | null>(null);\n\n  const onPointerDown = useCallback(\n    (event: React.PointerEvent<HTMLDivElement>) => {\n      event.preventDefault();\n      dragRef.current = {\n        start: vertical ? event.clientY : event.clientX,\n        size: currentSizePx(),\n      };\n      try {\n        event.currentTarget.setPointerCapture?.(event.pointerId);\n      } catch {\n        /* pointer capture is best-effort (unsupported in some envs) */\n      }\n    },\n    [vertical, currentSizePx]\n  );\n\n  const onPointerMove = useCallback(\n    (event: React.PointerEvent<HTMLDivElement>) => {\n      const drag = dragRef.current;\n      if (!drag) {\n        return;\n      }\n      const pos = vertical ? event.clientY : event.clientX;\n      const delta = pos - drag.start;\n      // Sign so dragging *away* from the anchored edge grows the sheet.\n      const grow = placement === \"bottom\" || placement === \"right\" ? -delta : delta;\n      applySize(drag.size + grow);\n    },\n    [vertical, placement, applySize]\n  );\n\n  const endDrag = useCallback((event: React.PointerEvent<HTMLDivElement>) => {\n    dragRef.current = null;\n    if (event.currentTarget.hasPointerCapture?.(event.pointerId)) {\n      event.currentTarget.releasePointerCapture?.(event.pointerId);\n    }\n  }, []);\n\n  const onHandleKeyDown = useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      const base = dragSize ?? currentSizePx();\n      const max = maxSize ?? (vertical ? window.innerHeight : window.innerWidth);\n      // Key that should make the sheet *bigger*, per anchored edge.\n      const incKey =\n        placement === \"bottom\"\n          ? \"ArrowUp\"\n          : placement === \"top\"\n            ? \"ArrowDown\"\n            : placement === \"left\"\n              ? \"ArrowRight\"\n              : \"ArrowLeft\";\n      const decKey =\n        placement === \"bottom\"\n          ? \"ArrowDown\"\n          : placement === \"top\"\n            ? \"ArrowUp\"\n            : placement === \"left\"\n              ? \"ArrowLeft\"\n              : \"ArrowRight\";\n      if (event.key === incKey) {\n        event.preventDefault();\n        applySize(base + resizeStep);\n      } else if (event.key === decKey) {\n        event.preventDefault();\n        applySize(base - resizeStep);\n      } else if (event.key === \"Home\") {\n        event.preventDefault();\n        applySize(minSize);\n      } else if (event.key === \"End\") {\n        event.preventDefault();\n        applySize(max);\n      }\n    },\n    [dragSize, currentSizePx, vertical, placement, applySize, resizeStep, minSize, maxSize]\n  );\n\n  React.useEffect(() => {\n    if (!isOpen) {\n      setDragSize(null);\n      return;\n    }\n\n    rootRef.current?.focus();\n  }, [isOpen]);\n\n  // While a drag size is applied, suppress the sheet's 0.2s size\n  // transition so the panel tracks the pointer in real time instead\n  // of lagging 200ms behind every move.\n  const sizeStyle: CSSProperties =\n    resizable && dragSize !== null\n      ? { ...(vertical ? { height: dragSize } : { width: dragSize }), transition: \"none\" }\n      : {};\n\n  return (\n    <CSSTransition in={isOpen} timeout={120} appear classNames={{ enterDone: \"smwb-sheet_entered\" }} nodeRef={nodeRef}>\n      <div\n        ref={forkRef}\n        data-testid=\"sheet\"\n        tabIndex={-1}\n        role=\"dialog\"\n        aria-modal={variant === \"modal\" || undefined}\n        {...rest}\n        className={cn(\"smwb-sheet\", className, `smwb-sheet_${variant}`, `smwb-${placement}`, {\n          \"smwb-expanded\": mode === \"expanded\",\n          \"smwb-small\": mode === \"small\",\n          \"smwb-sheet_resizable\": resizable,\n        })}\n        style={{ \"--sizeProp\": size, ...sizeStyle, ...style } as CSSProperties}\n      >\n        {resizable && (\n          <div\n            className=\"smwb-sheet__drag-handle\"\n            data-testid=\"sheet-drag-handle\"\n            role=\"separator\"\n            tabIndex={0}\n            aria-orientation={vertical ? \"horizontal\" : \"vertical\"}\n            aria-label={resizeHandleAriaLabel}\n            aria-valuemin={minSize}\n            aria-valuemax={Math.round(maxSize ?? (vertical ? window.innerHeight : window.innerWidth))}\n            aria-valuenow={Math.round(dragSize ?? currentSizePx())}\n            onPointerDown={onPointerDown}\n            onPointerMove={onPointerMove}\n            onPointerUp={endDrag}\n            onPointerCancel={endDrag}\n            onKeyDown={onHandleKeyDown}\n          >\n            <span className=\"smwb-sheet__drag-handle-bar\" />\n          </div>\n        )}\n        {showActions && <div className=\"smwb-sheet__header\">{headerActionNodes}</div>}\n        {isOpen && mode !== \"small\" && <div className=\"smwb-sheet__inner\">{children}</div>}\n      </div>\n    </CSSTransition>\n  );\n});\n"],"names":["Sheet","forwardRef","isOpen","onClose","variant","children","placement","disableOutsideClick","closeOnEsc","props","ref","mode","setMode","useState","nodeRef","useRef","useEffect","onKeyDown","event","isTopOverlayLayer","handleSizeButton","handleClose","createPortal","jsx","CSSTransition","cn","SheetBlock","ClickAwayListener","isVerticalAxis","React","className","size","withSizeToggle","hideHeaderActions","reverseHeaderActions","resizable","minSize","maxSize","resizeStep","resizeHandleAriaLabel","onResize","style","rest","showActions","headerActionNodes","Button","Icon","rootRef","forkRef","useForkRef","dragSize","setDragSize","vertical","clamp","useCallback","px","viewport","max","currentSizePx","rect","_a","applySize","next","dragRef","onPointerDown","_b","onPointerMove","drag","delta","grow","endDrag","_d","_c","onHandleKeyDown","base","incKey","decKey","sizeStyle","jsxs"],"mappings":"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"}
+{"version":3,"file":"sheet.js","sources":["../../../../src/components/layout/sheet/sheet.tsx"],"sourcesContent":["import React, { CSSProperties, forwardRef, PropsWithChildren, useCallback, useEffect, useRef, useState } from \"react\";\nimport cn from \"clsx\";\nimport { CSSTransition } from \"react-transition-group\";\nimport { createPortal } from \"react-dom\";\nimport Button from \"../../inputs/button/button\";\nimport Icon from \"../../base/icon/icon\";\nimport { ClickAwayListener } from \"../../clickAwayListener\";\nimport { useForkRef } from \"../../../hooks/useForkRef\";\nimport { isTopOverlayLayer } from \"../../../utils/overlayLayer\";\nimport { restoreFocus } from \"../../../utils/restoreFocus\";\n\nexport interface SheetProps extends React.HTMLAttributes<HTMLDivElement> {\n  className?: string;\n  placement?: \"top\" | \"bottom\" | \"right\" | \"left\";\n  isOpen: boolean;\n  onClose?: () => void;\n  variant?: \"default\" | \"modal\";\n  withSizeToggle?: boolean;\n  /** Hide built-in header actions; onClose still handles Esc and backdrop. */\n  hideHeaderActions?: boolean;\n  reverseHeaderActions?: boolean;\n  /** Accessible name of the header close button (default \"Close sheet\"). */\n  closeAriaLabel?: string;\n  /**\n   * Accessible name of the size toggle while the sheet is at its normal size (default \"Expand sheet\"). The toggle\n   * cycles normal, expanded, collapsed and back, and its name always says what the next press does; the\n   * name changing is how it exposes its state. It shows the `open_in_full` icon, and `close_fullscreen` while expanded.\n   */\n  expandAriaLabel?: string;\n  /** Accessible name of the size toggle while the sheet is expanded (default \"Collapse sheet\"). */\n  collapseAriaLabel?: string;\n  /** Accessible name of the size toggle while the sheet is collapsed to its header (default \"Restore sheet size\"). */\n  restoreAriaLabel?: string;\n  size?: string;\n  disableOutsideClick?: boolean;\n  /** Close the sheet when Escape is pressed. */\n  closeOnEsc?: boolean;\n  /**\n   * Allow the user to resize the sheet by dragging a grab handle with\n   * touch or mouse (mobile bottom-sheet style). Off by default.\n   */\n  resizable?: boolean;\n  /** Minimum size in px while resizing (default 80). */\n  minSize?: number;\n  /** Maximum size in px while resizing (default: viewport dimension). */\n  maxSize?: number;\n  /** Step in px for keyboard resizing (default 24). */\n  resizeStep?: number;\n  /** Accessible label for the resize handle. */\n  resizeHandleAriaLabel?: string;\n  /** Called with the new size in px while/after resizing. */\n  onResize?: (size: number) => void;\n  \"aria-label\"?: string;\n  /** Test id of the sheet panel (the dialog); `sheet` unless given. */\n  \"data-testid\"?: string;\n}\n\ntype Mode = \"small\" | \"expanded\" | null;\n\nexport const Sheet = forwardRef<HTMLDivElement, PropsWithChildren<SheetProps>>(function Sheet(\n  {\n    isOpen,\n    onClose,\n    variant = \"default\",\n    children,\n    placement = \"bottom\",\n    disableOutsideClick,\n    closeOnEsc = true,\n    ...props\n  },\n  ref\n) {\n  const [mode, setMode] = useState<Mode>(null);\n  const nodeRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    if (!isOpen || !closeOnEsc || !onClose) {\n      return;\n    }\n    const onKeyDown = (event: KeyboardEvent) => {\n      // Only the topmost overlay layer reacts to Escape, and not to one handled inside\n      // it, e.g. by a menu closing on it.\n      if (event.key === \"Escape\" && !event.defaultPrevented && isTopOverlayLayer(nodeRef.current)) {\n        onClose();\n      }\n    };\n    document.addEventListener(\"keydown\", onKeyDown);\n\n    return () => document.removeEventListener(\"keydown\", onKeyDown);\n  }, [isOpen, closeOnEsc, onClose]);\n\n  const handleSizeButton = () => {\n    if (mode === \"expanded\") {\n      setMode(\"small\");\n    } else if (!mode) {\n      setMode(\"expanded\");\n    } else {\n      setMode(null);\n    }\n  };\n\n  const handleClose = () => {\n    onClose?.();\n    setMode(null);\n  };\n\n  return createPortal(\n    <CSSTransition\n      in={isOpen}\n      timeout={70}\n      mountOnEnter\n      unmountOnExit\n      classNames={{ enterDone: \"smwb-entered\" }}\n      appear\n      nodeRef={nodeRef}\n    >\n      {variant === \"default\" ? (\n        <div\n          className={cn(disableOutsideClick ? \"smwb-sheet__overlay\" : \"smwb-sheet__default\")}\n          ref={nodeRef}\n          data-smwb-overlay-layer=\"\"\n        >\n          <SheetBlock\n            ref={ref}\n            onClose={onClose}\n            handleSizeButton={handleSizeButton}\n            handleClose={handleClose}\n            isOpen={isOpen}\n            mode={mode}\n            placement={placement}\n            variant={variant}\n            {...props}\n          >\n            {children}\n          </SheetBlock>\n        </div>\n      ) : (\n        <div\n          className={cn(\"smwb-sheet__overlay\", \"smwb-dark\", `smwb-${placement}`, `smwb-sheet_${variant}`)}\n          ref={nodeRef}\n          data-smwb-overlay-layer=\"\"\n        >\n          <ClickAwayListener onClickAway={() => !disableOutsideClick && handleClose()}>\n            <SheetBlock\n              ref={ref}\n              onClose={onClose}\n              handleSizeButton={handleSizeButton}\n              handleClose={handleClose}\n              isOpen={isOpen}\n              mode={mode}\n              placement={placement}\n              variant={variant}\n              {...props}\n            >\n              {children}\n            </SheetBlock>\n          </ClickAwayListener>\n        </div>\n      )}\n    </CSSTransition>,\n    document.body\n  );\n});\n\nexport default Sheet;\n\ninterface SheetBlockProps extends SheetProps {\n  mode: Mode;\n  handleSizeButton: () => void;\n  handleClose: () => void;\n}\n\n/** Sheets anchored to a horizontal edge resize on the Y axis, vertical edges on X. */\nconst isVerticalAxis = (placement: SheetProps[\"placement\"]) => placement === \"bottom\" || placement === \"top\";\n\nconst SheetBlock = React.forwardRef(function SheetBlock(props: SheetBlockProps, ref: React.Ref<HTMLDivElement>) {\n  const {\n    isOpen,\n    placement,\n    className,\n    mode,\n\n    size = \"60%\",\n    variant,\n    onClose,\n    withSizeToggle = true,\n    hideHeaderActions = false,\n    reverseHeaderActions = false,\n    closeAriaLabel = \"Close sheet\",\n    expandAriaLabel = \"Expand sheet\",\n    collapseAriaLabel = \"Collapse sheet\",\n    restoreAriaLabel = \"Restore sheet size\",\n    resizable = false,\n    minSize = 80,\n    maxSize,\n    resizeStep = 24,\n    resizeHandleAriaLabel = \"Resize sheet\",\n    onResize,\n    style,\n    handleClose,\n    handleSizeButton,\n    children,\n    \"data-testid\": dataTestId = \"sheet\",\n    ...rest\n  } = props;\n  const showActions = !hideHeaderActions && (!!onClose || withSizeToggle);\n  const headerActionNodes: React.ReactNode[] = [];\n  if (withSizeToggle) {\n    headerActionNodes.push(\n      <Button\n        variant={\"outlined\"}\n        size=\"small\"\n        onClick={handleSizeButton}\n        aria-label={mode === \"expanded\" ? collapseAriaLabel : mode === \"small\" ? restoreAriaLabel : expandAriaLabel}\n        key=\"size\"\n      >\n        <Icon name={mode === \"expanded\" ? \"close_fullscreen\" : \"open_in_full\"} />\n      </Button>\n    );\n  }\n  if (onClose) {\n    headerActionNodes.push(\n      <Button variant={\"outlined\"} size=\"small\" onClick={handleClose} aria-label={closeAriaLabel} key=\"close\">\n        <Icon name=\"close\" />\n      </Button>\n    );\n  }\n  if (reverseHeaderActions) {\n    headerActionNodes.reverse();\n  }\n  const nodeRef = useRef<HTMLDivElement>(null);\n  const rootRef = useRef<HTMLDivElement>(null);\n  const forkRef = useForkRef(ref, nodeRef, rootRef);\n\n  // Drag-to-resize state. `dragSize` (px) wins over the CSS size when set\n  // (inline style beats the .smwb-expanded/.smwb-small rules).\n  const [dragSize, setDragSize] = useState<number | null>(null);\n  const vertical = isVerticalAxis(placement);\n\n  const clamp = useCallback(\n    (px: number) => {\n      const viewport = vertical ? window.innerHeight : window.innerWidth;\n      const max = maxSize ?? viewport;\n      return Math.max(minSize, Math.min(max, px));\n    },\n    [vertical, maxSize, minSize]\n  );\n\n  const currentSizePx = useCallback(() => {\n    const rect = rootRef.current?.getBoundingClientRect();\n    if (!rect) {\n      return minSize;\n    }\n    return vertical ? rect.height : rect.width;\n  }, [vertical, minSize]);\n\n  const applySize = useCallback(\n    (px: number) => {\n      const next = clamp(px);\n      setDragSize(next);\n      onResize?.(next);\n    },\n    [clamp, onResize]\n  );\n\n  const dragRef = useRef<{ start: number; size: number } | null>(null);\n\n  const onPointerDown = useCallback(\n    (event: React.PointerEvent<HTMLDivElement>) => {\n      event.preventDefault();\n      dragRef.current = {\n        start: vertical ? event.clientY : event.clientX,\n        size: currentSizePx(),\n      };\n      try {\n        event.currentTarget.setPointerCapture?.(event.pointerId);\n      } catch {\n        /* pointer capture is best-effort (unsupported in some envs) */\n      }\n    },\n    [vertical, currentSizePx]\n  );\n\n  const onPointerMove = useCallback(\n    (event: React.PointerEvent<HTMLDivElement>) => {\n      const drag = dragRef.current;\n      if (!drag) {\n        return;\n      }\n      const pos = vertical ? event.clientY : event.clientX;\n      const delta = pos - drag.start;\n      // Sign so dragging *away* from the anchored edge grows the sheet.\n      const grow = placement === \"bottom\" || placement === \"right\" ? -delta : delta;\n      applySize(drag.size + grow);\n    },\n    [vertical, placement, applySize]\n  );\n\n  const endDrag = useCallback((event: React.PointerEvent<HTMLDivElement>) => {\n    dragRef.current = null;\n    if (event.currentTarget.hasPointerCapture?.(event.pointerId)) {\n      event.currentTarget.releasePointerCapture?.(event.pointerId);\n    }\n  }, []);\n\n  const onHandleKeyDown = useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      const base = dragSize ?? currentSizePx();\n      const max = maxSize ?? (vertical ? window.innerHeight : window.innerWidth);\n      // Key that should make the sheet *bigger*, per anchored edge.\n      const incKey =\n        placement === \"bottom\"\n          ? \"ArrowUp\"\n          : placement === \"top\"\n            ? \"ArrowDown\"\n            : placement === \"left\"\n              ? \"ArrowRight\"\n              : \"ArrowLeft\";\n      const decKey =\n        placement === \"bottom\"\n          ? \"ArrowDown\"\n          : placement === \"top\"\n            ? \"ArrowUp\"\n            : placement === \"left\"\n              ? \"ArrowLeft\"\n              : \"ArrowRight\";\n      if (event.key === incKey) {\n        event.preventDefault();\n        applySize(base + resizeStep);\n      } else if (event.key === decKey) {\n        event.preventDefault();\n        applySize(base - resizeStep);\n      } else if (event.key === \"Home\") {\n        event.preventDefault();\n        applySize(minSize);\n      } else if (event.key === \"End\") {\n        event.preventDefault();\n        applySize(max);\n      }\n    },\n    [dragSize, currentSizePx, vertical, placement, applySize, resizeStep, minSize, maxSize]\n  );\n\n  React.useEffect(() => {\n    if (!isOpen) {\n      setDragSize(null);\n      return;\n    }\n\n    const root = rootRef.current;\n    // The element that had focus when the sheet opened gets it back when it closes (or unmounts\n    // while open), unless the app has put focus somewhere else by then.\n    const opener = root?.contains(document.activeElement) ? null : document.activeElement;\n    root?.focus();\n    return () => restoreFocus(opener, root);\n  }, [isOpen]);\n\n  // While a drag size is applied, suppress the sheet's 0.2s size\n  // transition so the panel tracks the pointer in real time instead\n  // of lagging 200ms behind every move.\n  const sizeStyle: CSSProperties =\n    resizable && dragSize !== null\n      ? { ...(vertical ? { height: dragSize } : { width: dragSize }), transition: \"none\" }\n      : {};\n\n  return (\n    <CSSTransition in={isOpen} timeout={120} appear classNames={{ enterDone: \"smwb-sheet_entered\" }} nodeRef={nodeRef}>\n      <div\n        ref={forkRef}\n        data-testid={dataTestId}\n        {...rest}\n        // A sheet is a dialog, focused as a whole when it opens: its role and\n        // tabIndex win over the caller's, and so does aria-modal on a modal\n        // sheet. On another, the caller's aria-modal stays.\n        tabIndex={-1}\n        role=\"dialog\"\n        aria-modal={variant === \"modal\" || rest[\"aria-modal\"]}\n        className={cn(\"smwb-sheet\", className, `smwb-sheet_${variant}`, `smwb-${placement}`, {\n          \"smwb-expanded\": mode === \"expanded\",\n          \"smwb-small\": mode === \"small\",\n          \"smwb-sheet_resizable\": resizable,\n        })}\n        style={{ \"--sizeProp\": size, ...sizeStyle, ...style } as CSSProperties}\n      >\n        {resizable && (\n          <div\n            className=\"smwb-sheet__drag-handle\"\n            data-testid=\"sheet-drag-handle\"\n            role=\"separator\"\n            tabIndex={0}\n            aria-orientation={vertical ? \"horizontal\" : \"vertical\"}\n            aria-label={resizeHandleAriaLabel}\n            aria-valuemin={minSize}\n            aria-valuemax={Math.round(maxSize ?? (vertical ? window.innerHeight : window.innerWidth))}\n            aria-valuenow={Math.round(dragSize ?? currentSizePx())}\n            onPointerDown={onPointerDown}\n            onPointerMove={onPointerMove}\n            onPointerUp={endDrag}\n            onPointerCancel={endDrag}\n            onKeyDown={onHandleKeyDown}\n          >\n            <span className=\"smwb-sheet__drag-handle-bar\" />\n          </div>\n        )}\n        {showActions && <div className=\"smwb-sheet__header\">{headerActionNodes}</div>}\n        {isOpen && mode !== \"small\" && <div className=\"smwb-sheet__inner\">{children}</div>}\n      </div>\n    </CSSTransition>\n  );\n});\n"],"names":["Sheet","forwardRef","isOpen","onClose","variant","children","placement","disableOutsideClick","closeOnEsc","props","ref","mode","setMode","useState","nodeRef","useRef","useEffect","onKeyDown","event","isTopOverlayLayer","handleSizeButton","handleClose","createPortal","jsx","CSSTransition","cn","SheetBlock","ClickAwayListener","isVerticalAxis","React","className","size","withSizeToggle","hideHeaderActions","reverseHeaderActions","closeAriaLabel","expandAriaLabel","collapseAriaLabel","restoreAriaLabel","resizable","minSize","maxSize","resizeStep","resizeHandleAriaLabel","onResize","style","dataTestId","rest","showActions","headerActionNodes","Button","Icon","rootRef","forkRef","useForkRef","dragSize","setDragSize","vertical","clamp","useCallback","px","viewport","max","currentSizePx","rect","_a","applySize","next","dragRef","onPointerDown","_b","onPointerMove","drag","delta","grow","endDrag","_d","_c","onHandleKeyDown","base","incKey","decKey","root","opener","restoreFocus","sizeStyle","jsxs"],"mappings":"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"}

package/dist/components/layout/stack/stack.d.ts

@@ -10,6 +10,8 @@ export interface StackProps extends HTMLAttributes<HTMLDivElement> {
     /** Optional element rendered between each child. */
     divider?: ReactNode;
     className?: string;
+    /** Test id of the root `<div>`; `stack` unless given. */
+    "data-testid"?: string;
 }
 export declare const Stack: React.ForwardRefExoticComponent<StackProps & {
     children?: ReactNode | undefined;

package/dist/components/layout/stack/stack.js

@@ -1,35 +1,47 @@
-import { jsx as s, jsxs as k } from "react/jsx-runtime";
+import { jsx as s, jsxs as y } from "react/jsx-runtime";
 import '../../../assets/styles/less/components/stack/stack.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
 /* empty css                                                     */
-import y, { Children as w, isValidElement as b, Fragment as h } from "react";
-import j from "clsx";
-const i = (t) => t === "start" || t === "end" ? `flex-${t}` : t, v = (t) => typeof t == "number" ? `calc(var(--smui-spacing-unit, 4px) * ${t})` : t === "none" ? "0" : `var(--smui-space-${t})`, S = y.forwardRef(function({ direction: n = "column", spacing: l = "md", align: o, justify: c, wrap: m, divider: e, className: p, style: f, children: a, ...d }, u) {
-  const x = w.toArray(a).filter(b);
+import w, { Children as b, isValidElement as h, Fragment as j } from "react";
+import v from "clsx";
+const i = (t) => t === "start" || t === "end" ? `flex-${t}` : t, $ = (t) => typeof t == "number" ? `calc(var(--smui-spacing-unit, 4px) * ${t})` : t === "none" ? "0" : `var(--smui-space-${t})`, _ = w.forwardRef(function({
+  direction: n = "column",
+  spacing: l = "md",
+  align: o,
+  justify: c,
+  wrap: m,
+  divider: a,
+  className: d,
+  style: p,
+  children: e,
+  "data-testid": f = "stack",
+  ...u
+}, x) {
+  const g = b.toArray(e).filter(h);
   return /* @__PURE__ */ s(
     "div",
     {
-      ref: u,
-      "data-testid": "stack",
-      className: j("smwb-stack", p),
+      ref: x,
+      "data-testid": f,
+      className: v("smwb-stack", d),
       style: {
         display: "flex",
         flexDirection: n,
         flexWrap: m ? "wrap" : void 0,
         alignItems: i(o),
         justifyContent: i(c),
-        gap: v(l),
-        ...f
+        gap: $(l),
+        ...p
       },
-      ...d,
-      children: e ? x.map((g, r) => /* @__PURE__ */ k(h, { children: [
-        r > 0 ? /* @__PURE__ */ s("div", { className: "smwb-stack__divider", children: e }) : null,
-        g
-      ] }, r)) : a
+      ...u,
+      children: a ? g.map((k, r) => /* @__PURE__ */ y(j, { children: [
+        r > 0 ? /* @__PURE__ */ s("div", { className: "smwb-stack__divider", children: a }) : null,
+        k
+      ] }, r)) : e
     }
   );
 });
 export {
-  S as Stack,
-  S as default
+  _ as Stack,
+  _ as default
 };
 //# sourceMappingURL=stack.js.map

package/dist/components/layout/stack/stack.js.map

@@ -1 +1 @@
-{"version":3,"file":"stack.js","sources":["../../../../src/components/layout/stack/stack.tsx"],"sourcesContent":["import React, { Children, Fragment, HTMLAttributes, PropsWithChildren, ReactNode, isValidElement } from \"react\";\nimport cn from \"clsx\";\n\nexport type StackSpacing = number | \"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"xxl\" | \"xxxl\";\n\nexport interface StackProps extends HTMLAttributes<HTMLDivElement> {\n  direction?: \"row\" | \"row-reverse\" | \"column\" | \"column-reverse\";\n  /** Gap between items: scale keyword, or a number = N × spacing unit. */\n  spacing?: StackSpacing;\n  align?: \"start\" | \"center\" | \"end\" | \"stretch\" | \"baseline\";\n  justify?: \"start\" | \"center\" | \"end\" | \"space-between\" | \"space-around\" | \"space-evenly\";\n  wrap?: boolean;\n  /** Optional element rendered between each child. */\n  divider?: ReactNode;\n  className?: string;\n}\n\nconst flexAlign = (v?: string): string | undefined => (v === \"start\" || v === \"end\" ? `flex-${v}` : v);\n\nconst resolveGap = (s: StackSpacing): string =>\n  typeof s === \"number\" ? `calc(var(--smui-spacing-unit, 4px) * ${s})` : s === \"none\" ? \"0\" : `var(--smui-space-${s})`;\n\nexport const Stack = React.forwardRef<HTMLDivElement, PropsWithChildren<StackProps>>(function Stack(\n  { direction = \"column\", spacing = \"md\", align, justify, wrap, divider, className, style, children, ...rest },\n  ref\n) {\n  const items = Children.toArray(children).filter(isValidElement);\n  return (\n    <div\n      ref={ref}\n      data-testid=\"stack\"\n      className={cn(\"smwb-stack\", className)}\n      style={{\n        display: \"flex\",\n        flexDirection: direction,\n        flexWrap: wrap ? \"wrap\" : undefined,\n        alignItems: flexAlign(align),\n        justifyContent: flexAlign(justify),\n        gap: resolveGap(spacing),\n        ...style,\n      }}\n      {...rest}\n    >\n      {divider\n        ? items.map((child, i) => (\n            <Fragment key={i}>\n              {i > 0 ? <div className=\"smwb-stack__divider\">{divider}</div> : null}\n              {child}\n            </Fragment>\n          ))\n        : children}\n    </div>\n  );\n});\n\nexport default Stack;\n"],"names":["flexAlign","v","resolveGap","s","Stack","React","direction","spacing","align","justify","wrap","divider","className","style","children","rest","ref","items","Children","isValidElement","jsx","cn","child","i","Fragment"],"mappings":";;;;;AAmBA,MAAMA,IAAY,CAACC,MAAoCA,MAAM,WAAWA,MAAM,QAAQ,QAAQA,CAAC,KAAKA,GAE9FC,IAAa,CAACC,MAClB,OAAOA,KAAM,WAAW,wCAAwCA,CAAC,MAAMA,MAAM,SAAS,MAAM,oBAAoBA,CAAC,KAEtGC,IAAQC,EAAM,WAA0D,SACnF,EAAE,WAAAC,IAAY,UAAU,SAAAC,IAAU,MAAM,OAAAC,GAAO,SAAAC,GAAS,MAAAC,GAAM,SAAAC,GAAS,WAAAC,GAAW,OAAAC,GAAO,UAAAC,GAAU,GAAGC,EAAA,GACtGC,GACA;AACA,QAAMC,IAAQC,EAAS,QAAQJ,CAAQ,EAAE,OAAOK,CAAc;AAC9D,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAJ;AAAA,MACA,eAAY;AAAA,MACZ,WAAWK,EAAG,cAAcT,CAAS;AAAA,MACrC,OAAO;AAAA,QACL,SAAS;AAAA,QACT,eAAeN;AAAA,QACf,UAAUI,IAAO,SAAS;AAAA,QAC1B,YAAYV,EAAUQ,CAAK;AAAA,QAC3B,gBAAgBR,EAAUS,CAAO;AAAA,QACjC,KAAKP,EAAWK,CAAO;AAAA,QACvB,GAAGM;AAAA,MAAA;AAAA,MAEJ,GAAGE;AAAA,MAEH,cACGE,EAAM,IAAI,CAACK,GAAOC,wBACfC,GAAA,EACE,UAAA;AAAA,QAAAD,IAAI,IAAI,gBAAAH,EAAC,OAAA,EAAI,WAAU,uBAAuB,aAAQ,IAAS;AAAA,QAC/DE;AAAA,MAAA,EAAA,GAFYC,CAGf,CACD,IACDT;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC;"}
+{"version":3,"file":"stack.js","sources":["../../../../src/components/layout/stack/stack.tsx"],"sourcesContent":["import React, { Children, Fragment, HTMLAttributes, PropsWithChildren, ReactNode, isValidElement } from \"react\";\nimport cn from \"clsx\";\n\nexport type StackSpacing = number | \"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"xxl\" | \"xxxl\";\n\nexport interface StackProps extends HTMLAttributes<HTMLDivElement> {\n  direction?: \"row\" | \"row-reverse\" | \"column\" | \"column-reverse\";\n  /** Gap between items: scale keyword, or a number = N × spacing unit. */\n  spacing?: StackSpacing;\n  align?: \"start\" | \"center\" | \"end\" | \"stretch\" | \"baseline\";\n  justify?: \"start\" | \"center\" | \"end\" | \"space-between\" | \"space-around\" | \"space-evenly\";\n  wrap?: boolean;\n  /** Optional element rendered between each child. */\n  divider?: ReactNode;\n  className?: string;\n  /** Test id of the root `<div>`; `stack` unless given. */\n  \"data-testid\"?: string;\n}\n\nconst flexAlign = (v?: string): string | undefined => (v === \"start\" || v === \"end\" ? `flex-${v}` : v);\n\nconst resolveGap = (s: StackSpacing): string =>\n  typeof s === \"number\" ? `calc(var(--smui-spacing-unit, 4px) * ${s})` : s === \"none\" ? \"0\" : `var(--smui-space-${s})`;\n\nexport const Stack = React.forwardRef<HTMLDivElement, PropsWithChildren<StackProps>>(function Stack(\n  {\n    direction = \"column\",\n    spacing = \"md\",\n    align,\n    justify,\n    wrap,\n    divider,\n    className,\n    style,\n    children,\n    \"data-testid\": dataTestId = \"stack\",\n    ...rest\n  },\n  ref\n) {\n  const items = Children.toArray(children).filter(isValidElement);\n  return (\n    <div\n      ref={ref}\n      data-testid={dataTestId}\n      className={cn(\"smwb-stack\", className)}\n      style={{\n        display: \"flex\",\n        flexDirection: direction,\n        flexWrap: wrap ? \"wrap\" : undefined,\n        alignItems: flexAlign(align),\n        justifyContent: flexAlign(justify),\n        gap: resolveGap(spacing),\n        ...style,\n      }}\n      {...rest}\n    >\n      {divider\n        ? items.map((child, i) => (\n            <Fragment key={i}>\n              {i > 0 ? <div className=\"smwb-stack__divider\">{divider}</div> : null}\n              {child}\n            </Fragment>\n          ))\n        : children}\n    </div>\n  );\n});\n\nexport default Stack;\n"],"names":["flexAlign","v","resolveGap","s","Stack","React","direction","spacing","align","justify","wrap","divider","className","style","children","dataTestId","rest","ref","items","Children","isValidElement","jsx","cn","child","i","Fragment"],"mappings":";;;;;AAqBA,MAAMA,IAAY,CAACC,MAAoCA,MAAM,WAAWA,MAAM,QAAQ,QAAQA,CAAC,KAAKA,GAE9FC,IAAa,CAACC,MAClB,OAAOA,KAAM,WAAW,wCAAwCA,CAAC,MAAMA,MAAM,SAAS,MAAM,oBAAoBA,CAAC,KAEtGC,IAAQC,EAAM,WAA0D,SACnF;AAAA,EACE,WAAAC,IAAY;AAAA,EACZ,SAAAC,IAAU;AAAA,EACV,OAAAC;AAAA,EACA,SAAAC;AAAA,EACA,MAAAC;AAAA,EACA,SAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,eAAeC,IAAa;AAAA,EAC5B,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAAQC,EAAS,QAAQL,CAAQ,EAAE,OAAOM,CAAc;AAC9D,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAJ;AAAA,MACA,eAAaF;AAAA,MACb,WAAWO,EAAG,cAAcV,CAAS;AAAA,MACrC,OAAO;AAAA,QACL,SAAS;AAAA,QACT,eAAeN;AAAA,QACf,UAAUI,IAAO,SAAS;AAAA,QAC1B,YAAYV,EAAUQ,CAAK;AAAA,QAC3B,gBAAgBR,EAAUS,CAAO;AAAA,QACjC,KAAKP,EAAWK,CAAO;AAAA,QACvB,GAAGM;AAAA,MAAA;AAAA,MAEJ,GAAGG;AAAA,MAEH,cACGE,EAAM,IAAI,CAACK,GAAOC,wBACfC,GAAA,EACE,UAAA;AAAA,QAAAD,IAAI,IAAI,gBAAAH,EAAC,OAAA,EAAI,WAAU,uBAAuB,aAAQ,IAAS;AAAA,QAC/DE;AAAA,MAAA,EAAA,GAFYC,CAGf,CACD,IACDV;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC;"}

package/dist/components/layout/tabGroups/index.d.ts

@@ -0,0 +1,4 @@
+export { TabGroups } from "./tabGroups";
+export type { TabGroupsProps, TabGroupsTab } from "./tabGroups";
+export * as tabGroupsLayout from "./tabGroupsLayout";
+export type { TabGroupsChange, TabGroupsDropZone, TabGroupsEdge, TabGroupsGroup, TabGroupsLabels, TabGroupsLayout, TabGroupsMoveTarget, TabGroupsNode, TabGroupsSplit, } from "./tabGroupsLayout";

package/dist/components/layout/tabGroups/tabGroups.d.ts

@@ -0,0 +1,94 @@
+import React from "react";
+import { type TabCloseReason, type TabProps } from "../../navigation/tabs";
+import { type TabGroupsChange, type TabGroupsLabels, type TabGroupsLayout } from "./tabGroupsLayout";
+/** What one tab of `TabGroups` shows. The layout stores ids only; the app answers for the rest. */
+export interface TabGroupsTab {
+    /** The tab's label, as `Tab`'s own. */
+    label: React.ReactNode;
+    /**
+     * Plain text for the announcements: what a screen reader says the tab is called. `label` when it
+     * is a string, the tab id otherwise.
+     */
+    title?: string;
+    /** Content before the label: a status marker. Decorative, as in `Tab`. */
+    icon?: React.ReactNode;
+    /**
+     * Draw a close button and let Delete or Backspace close the tab; true by default. Pass `false`
+     * to keep the tab's item wrapper — and so the same drag surface — without a close button.
+     */
+    closable?: boolean;
+    /** Accessible label of the close button. English by default; set it to localise. */
+    closeLabel?: string;
+    /** Content after the tab: a trigger with a `Menu`, as `Tab`'s own `actions`. */
+    actions?: TabProps["actions"];
+    /** Shown and focusable, but not selectable, not closable and not draggable. */
+    disabled?: boolean;
+}
+/**
+ * A container of tab groups: the area splits right or down into groups, each group is a tab row
+ * with its panels, tabs move between groups by drag and drop or by keyboard, and the whole
+ * arrangement is a serialisable, versioned layout.
+ *
+ * The layout is controlled while `layout` is given and uncontrolled otherwise (seeded from
+ * `defaultLayout`); `onLayoutChange` is called in both modes with the new layout and what changed.
+ * Only ids and sizes are stored: `getTab` says what a tab shows and `renderPanel` what it contains,
+ * so the JSON stays small and survives a label rename. A panel is rendered from the first time its
+ * tab is selected and then stays mounted while hidden, so a tab keeps its state when it moves to
+ * another group. A move only changes where a panel is drawn — its node stays where it is in the
+ * DOM — so its scroll, an iframe in it and the focus inside it survive the move too.
+ *
+ * Everything is reachable without a mouse. In a tab row: the arrows, Home and End move focus,
+ * Enter or Space selects, Delete or Backspace and Mod+W close, Mod+Shift+[ and Mod+Shift+] switch
+ * (all of that is `Tabs`). On the focused tab: Alt+Shift+Arrow moves it into the group that way, or
+ * splits a new group there when the area ends, and Mod+Shift+ArrowLeft/Right moves it along the row.
+ * Each group's actions button opens a menu with the same actions, and each separator takes the
+ * arrow keys along its axis plus Home and End. Every move is announced in a status region.
+ *
+ * Dropping a tab on a group's body puts it in that group; dropping it within a quarter of the
+ * body's edge splits a new group there. The zones are drawn while dragging.
+ */
+export interface TabGroupsProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children" | "onChange"> {
+    /**
+     * The arrangement to draw: the split tree, the tabs of every group and which of them is
+     * selected. Controlled while it is not `undefined` — the component then draws what it is given
+     * and an owner that ignores `onLayoutChange` sees nothing move.
+     */
+    layout?: TabGroupsLayout | undefined;
+    /** The layout of the uncontrolled mode's first render: one empty group by default. */
+    defaultLayout?: TabGroupsLayout | undefined;
+    /**
+     * Called with the new layout and what changed (`select`, `activate`, `move`, `split`, `close`,
+     * `resize`) in the controlled and the uncontrolled mode alike. Store the layout here; the
+     * `change` says which of them are worth writing (an `activate` is a focus move, not an edit).
+     */
+    onLayoutChange?: ((layout: TabGroupsLayout, change: TabGroupsChange) => void) | undefined;
+    /** What a tab shows, by its id: `undefined` draws the id as the label. */
+    getTab: (tabId: string) => TabGroupsTab | undefined;
+    /**
+     * The content of a tab's panel, by its id. Called from the first time the tab is selected and
+     * kept mounted after that, so a panel keeps its state while hidden and while its tab moves.
+     */
+    renderPanel: (tabId: string) => React.ReactNode;
+    /**
+     * Asked before a tab closes (its close button, Delete or Backspace, a middle press or its
+     * `actions`), with what asked for it. Return `false` to keep the tab; anything else closes it.
+     */
+    onTabClose?: ((tabId: string, event: React.SyntheticEvent<HTMLElement>, reason: TabCloseReason) => boolean | void) | undefined;
+    /** Drawn, centred, when nothing is open: the only group has no tabs. */
+    empty?: React.ReactNode;
+    /** The smallest a group can be resized to, in px of its split; 120 by default. */
+    minGroupSize?: number;
+    /** A separator's arrow-key step, in percent of its split; 5 by default, as `ScreenDivider`. */
+    keyboardStep?: number;
+    /** Draw each group's actions button and its menu; true by default. */
+    groupActions?: boolean;
+    /** Compact tab rows (`Tabs`' `dense`); false by default. */
+    dense?: boolean;
+    /** The component's texts, to localise them. English by default. */
+    labels?: Partial<TabGroupsLabels> | undefined;
+    /** Base of the generated ids and the root's own id. Generated by default. */
+    id?: string;
+    /** Test id of the root element; "tab-groups" by default. */
+    "data-testid"?: string;
+}
+export declare const TabGroups: React.ForwardRefExoticComponent<TabGroupsProps & React.RefAttributes<HTMLDivElement>>;