@salt-ds/lab 1.0.0-alpha.34 → 1.0.0-alpha.35

package/css/salt-lab.css

@@ -851,183 +851,6 @@
   transform: translateY(var(--deckLayout-transform-value));
 }
 
-/* src/dialog/Dialog.css */
-.saltDialog {
-  position: fixed;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  margin: auto;
-  display: flex;
-  flex-direction: column;
-  padding-top: var(--salt-spacing-300);
-  padding-bottom: var(--salt-spacing-300);
-  background: var(--salt-container-primary-background);
-  box-shadow: var(--salt-overlayable-shadow-modal);
-  overflow-y: auto;
-  z-index: var(--salt-zIndex-drawer);
-  height: min-content;
-  border: var(--salt-container-borderStyle) var(--salt-separable-tertiary-borderColor) var(--salt-size-border);
-  box-sizing: border-box;
-  border-radius: var(--salt-palette-corner, 0);
-}
-.saltDialog-info {
-  border-color: var(--salt-status-info-borderColor);
-}
-.saltDialog-error {
-  border-color: var(--salt-status-error-borderColor);
-}
-.saltDialog-warning {
-  border-color: var(--salt-status-warning-borderColor);
-}
-.saltDialog-success {
-  border-color: var(--salt-status-success-borderColor);
-}
-.saltDialog.saltDialog-enterAnimation {
-  animation: var(--salt-animation-fade-in-center);
-}
-.saltDialog.saltDialog-exitAnimation {
-  animation: var(--salt-animation-fade-out-back);
-}
-.saltDialog-small-xs {
-  width: 100%;
-  max-height: 48%;
-}
-.saltDialog-small-sm {
-  width: 56%;
-  max-height: 48%;
-}
-.saltDialog-small-md {
-  width: 36%;
-  max-height: 48%;
-}
-.saltDialog-small-lg {
-  width: 24%;
-  max-height: 48%;
-}
-.saltDialog-small-xl {
-  width: 24%;
-  max-height: 48%;
-}
-.saltDialog-medium-xs {
-  width: 100%;
-  max-height: 72%;
-}
-.saltDialog-medium-sm {
-  width: 84%;
-  max-height: 72%;
-}
-.saltDialog-medium-md {
-  width: 68%;
-  max-height: 72%;
-}
-.saltDialog-medium-lg {
-  width: 48%;
-  max-height: 72%;
-}
-.saltDialog-medium-xl {
-  width: 48%;
-  max-height: 72%;
-}
-.saltDialog-large-xs {
-  width: 100%;
-  max-height: 84%;
-}
-.saltDialog-large-sm {
-  width: 96%;
-  max-height: 84%;
-}
-.saltDialog-large-md {
-  width: 84%;
-  max-height: 84%;
-}
-.saltDialog-large-lg {
-  width: 72%;
-  max-height: 84%;
-}
-.saltDialog-large-xl {
-  width: 72%;
-  max-height: 84%;
-}
-
-/* src/dialog/DialogActions.css */
-.saltDialogActions {
-  padding: var(--salt-spacing-300);
-  padding-bottom: 0;
-  display: flex;
-  justify-content: flex-end;
-  gap: var(--salt-spacing-100);
-}
-
-/* src/dialog/DialogCloseButton.css */
-.saltButton.saltDialogCloseButton {
-  position: absolute;
-  top: 0;
-  right: 0;
-}
-
-/* src/dialog/DialogContent.css */
-.saltDialogContent {
-  color: var(--salt-content-primary-foreground);
-  min-height: var(--salt-text-lineHeight);
-  overflow-y: auto;
-  background: var(--salt-container-primary-background);
-  padding-bottom: var(--salt-spacing-50);
-  margin-left: var(--salt-spacing-200);
-  margin-right: var(--salt-spacing-300);
-  padding-right: var(--salt-spacing-300);
-  padding-left: var(--salt-spacing-100);
-  border-bottom: var(--salt-size-border) var(--salt-separable-borderStyle) transparent;
-  box-shadow: none;
-}
-.saltDialogContent-scroll {
-  border-bottom: var(--salt-size-border) var(--salt-separable-borderStyle) var(--salt-separable-tertiary-borderColor);
-  box-shadow: var(--salt-overlayable-shadow-scroll);
-}
-
-/* src/dialog/DialogHeader.css */
-.saltDialogHeader {
-  padding-bottom: var(--salt-spacing-100);
-  padding-left: var(--salt-spacing-300);
-  padding-right: var(--salt-spacing-300);
-  align-items: center;
-  display: flex;
-  flex-direction: row;
-  gap: var(--salt-spacing-100);
-  box-sizing: border-box;
-}
-.saltDialogHeader-header {
-  margin: 0;
-}
-.saltDialogHeader .saltStatusIndicator.saltIcon {
-  --icon-size: var(--salt-text-h2-lineHeight);
-}
-.saltDialogHeader-withAccent {
-  position: relative;
-}
-.saltDialogHeader-withAccent::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  bottom: var(--salt-spacing-100);
-  width: var(--salt-size-accent);
-  background: var(--salt-accent-background);
-}
-.saltDialogHeader-error::before {
-  background: var(--salt-status-error-borderColor);
-}
-.saltDialogHeader-info::before {
-  background: var(--salt-status-info-borderColor);
-}
-.saltDialogHeader-success::before {
-  background: var(--salt-status-success-borderColor);
-}
-.saltDialogHeader-warning::before {
-  background: var(--salt-status-warning-borderColor);
-}
-
 /* src/dropdown/Dropdown.css */
 .saltDropdown {
   --saltIcon-margin: 2px 0 0 8px;
@@ -2388,17 +2211,9 @@
   width: max-content;
 }
 .saltOverlayPanelBase-container {
-  animation: fade-in var(--salt-duration-perceptible) ease-in-out;
+  animation: var(--salt-animation-fade-in-center);
   position: relative;
 }
-@keyframes fade-in {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}
 .saltOverlayPanelBase-content {
   overflow: auto;
   padding: var(--saltOverlay-content-padding, var(--salt-spacing-100) 0 var(--salt-spacing-100) var(--salt-spacing-100));
@@ -3246,6 +3061,11 @@
   font-weight: var(--salt-text-fontWeight);
   line-height: var(--salt-text-lineHeight);
 }
+.saltTabstripNext-container {
+  display: inherit;
+  width: 100%;
+  position: relative;
+}
 .saltTabstripNext-main {
   padding-left: var(--salt-spacing-300);
   padding-right: var(--salt-spacing-300);
@@ -4319,4 +4139,4 @@
   margin: calc(var(--salt-size-unit) / 2) 0;
 }
 
-/* src/c6e1d4ac-675b-4241-bf4e-3d3c78a6ade3.css */
+/* src/f96ec07e-dc55-4df2-91fd-46b77d4db9c0.css */

package/dist-cjs/index.js

@@ -61,12 +61,6 @@ var MailLinkComponent = require('./contact-details/MailLinkComponent.js');
 var ContentStatus = require('./content-status/ContentStatus.js');
 var DeckItem = require('./deck-item/DeckItem.js');
 var DeckLayout = require('./deck-layout/DeckLayout.js');
-var Dialog = require('./dialog/Dialog.js');
-var DialogHeader = require('./dialog/DialogHeader.js');
-var DialogActions = require('./dialog/DialogActions.js');
-var DialogContent = require('./dialog/DialogContent.js');
-var DialogContext = require('./dialog/DialogContext.js');
-var DialogCloseButton = require('./dialog/DialogCloseButton.js');
 var DropdownBase = require('./dropdown/DropdownBase.js');
 var DropdownButton = require('./dropdown/DropdownButton.js');
 var Dropdown = require('./dropdown/Dropdown.js');
@@ -210,14 +204,6 @@ exports.MailLinkComponent = MailLinkComponent.MailLinkComponent;
 exports.ContentStatus = ContentStatus.ContentStatus;
 exports.DeckItem = DeckItem.DeckItem;
 exports.DeckLayout = DeckLayout.DeckLayout;
-exports.ConditionalScrimWrapper = Dialog.ConditionalScrimWrapper;
-exports.Dialog = Dialog.Dialog;
-exports.DialogHeader = DialogHeader.DialogHeader;
-exports.DialogActions = DialogActions.DialogActions;
-exports.DialogContent = DialogContent.DialogContent;
-exports.DialogContext = DialogContext.DialogContext;
-exports.useDialogContext = DialogContext.useDialogContext;
-exports.DialogCloseButton = DialogCloseButton.DialogCloseButton;
 exports.DropdownBase = DropdownBase.DropdownBase;
 exports.DropdownButton = DropdownButton.DropdownButton;
 exports.Dropdown = Dropdown.Dropdown;

package/dist-cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist-cjs/overlay/Overlay.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = ".saltOverlayPanel {\n  --overlay-borderColor: var(--saltOverlay-borderColor, var(--salt-container-primary-borderColor));\n  --overlay-background: var(--saltOverlay-background, var(--salt-container-primary-background));\n}\n\n.saltOverlayPanel {\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--saltOverlay-fontSize, var(--salt-text-fontSize));\n  font-weight: var(--saltOverlay-fontWeight, var(--salt-text-fontWeight));\n  line-height: var(--saltOverlay-lineHeight, var(--salt-text-lineHeight));\n\n  border-color: var(--overlay-borderColor);\n  border-style: var(--saltOverlay-borderStyle, var(--salt-container-borderStyle));\n  border-width: var(--saltOverlay-borderWidth, var(--salt-size-border));\n  border-radius: var(--saltOverlay-borderRadius, var(--salt-palette-corner, 0));\n\n  background: var(--overlay-background);\n  box-shadow: var(--saltOverlay-boxShadow, var(--salt-overlayable-shadow-popout));\n\n  color: var(--saltOverlay-text-color, var(--salt-text-primary-foreground));\n  z-index: var(--saltOverlay-zIndex, var(--salt-zIndex-flyover));\n  width: max-content;\n}\n\n.saltOverlayPanelBase-container {\n  animation: fade-in var(--salt-duration-perceptible) ease-in-out;\n  position: relative;\n}\n\n@keyframes fade-in {\n  0% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 1;\n  }\n}\n\n.saltOverlayPanelBase-content {\n  overflow: auto;\n  padding: var(--saltOverlay-content-padding, var(--salt-spacing-100) 0 var(--salt-spacing-100) var(--salt-spacing-100));\n}\n\n.saltButton-secondary.saltOverlayPanelBase-closeButton {\n  position: sticky;\n  top: 0;\n  float: right;\n}\n";
+var css_248z = ".saltOverlayPanel {\n  --overlay-borderColor: var(--saltOverlay-borderColor, var(--salt-container-primary-borderColor));\n  --overlay-background: var(--saltOverlay-background, var(--salt-container-primary-background));\n}\n\n.saltOverlayPanel {\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--saltOverlay-fontSize, var(--salt-text-fontSize));\n  font-weight: var(--saltOverlay-fontWeight, var(--salt-text-fontWeight));\n  line-height: var(--saltOverlay-lineHeight, var(--salt-text-lineHeight));\n\n  border-color: var(--overlay-borderColor);\n  border-style: var(--saltOverlay-borderStyle, var(--salt-container-borderStyle));\n  border-width: var(--saltOverlay-borderWidth, var(--salt-size-border));\n  border-radius: var(--saltOverlay-borderRadius, var(--salt-palette-corner, 0));\n\n  background: var(--overlay-background);\n  box-shadow: var(--saltOverlay-boxShadow, var(--salt-overlayable-shadow-popout));\n\n  color: var(--saltOverlay-text-color, var(--salt-text-primary-foreground));\n  z-index: var(--saltOverlay-zIndex, var(--salt-zIndex-flyover));\n  width: max-content;\n}\n\n.saltOverlayPanelBase-container {\n  animation: var(--salt-animation-fade-in-center);\n  position: relative;\n}\n\n.saltOverlayPanelBase-content {\n  overflow: auto;\n  padding: var(--saltOverlay-content-padding, var(--salt-spacing-100) 0 var(--salt-spacing-100) var(--salt-spacing-100));\n}\n\n.saltButton-secondary.saltOverlayPanelBase-closeButton {\n  position: sticky;\n  top: 0;\n  float: right;\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=Overlay.css.js.map

package/dist-cjs/overlay/Overlay.js

@@ -35,7 +35,6 @@ const Overlay = React.forwardRef(
       elements,
       floating,
       reference,
-      middlewareData: { arrow: { x: arrowX, y: arrowY } = {} },
       placement
     } = core.useFloatingUI({
       open: openState,
@@ -69,12 +68,7 @@ const Overlay = React.forwardRef(
     };
     const arrowProps = {
       ref: arrowRef,
-      context,
-      style: {
-        position: strategy,
-        left: arrowX != null ? arrowX : 0,
-        top: arrowY != null ? arrowY : 0
-      }
+      context
     };
     const handleCloseButton = (event) => {
       setOpen(event, false);

package/dist-cjs/overlay/Overlay.js.map

@@ -1 +1 @@
-{"version":3,"file":"Overlay.js","sources":["../src/overlay/Overlay.tsx"],"sourcesContent":["import {\n  ComponentPropsWithoutRef,\n  forwardRef,\n  SyntheticEvent,\n  useMemo,\n  useRef,\n} from \"react\";\nimport { OverlayContext } from \"./OverlayContext\";\nimport { useControlled, useFloatingUI, useId } from \"@salt-ds/core\";\nimport {\n  flip,\n  offset,\n  shift,\n  limitShift,\n  arrow,\n  useClick,\n  useDismiss,\n  useInteractions,\n  useRole,\n} from \"@floating-ui/react\";\n\nexport interface OverlayProps extends ComponentPropsWithoutRef<\"div\"> {\n  open?: boolean;\n  onOpenChange?: (event: SyntheticEvent, newOpen: boolean) => void;\n  /*\n   * Set the placement of the Overlay component relative to the trigger element. Defaults to `top`.\n   */\n  placement?: \"top\" | \"bottom\" | \"left\" | \"right\";\n  /*\n   * Use in controlled version to close Overlay.\n   */\n  onClose?: (event: SyntheticEvent) => void;\n}\n\nexport const Overlay = forwardRef<HTMLDivElement, OverlayProps>(\n  function Overlay(props, ref) {\n    const {\n      children,\n      open,\n      onOpenChange,\n      placement: placementProp = \"top\",\n      id: idProp,\n      onClose,\n      ...rest\n    } = props;\n\n    const id = useId(idProp);\n    const arrowRef = useRef<SVGSVGElement | null>(null);\n\n    const [openState, setOpenState] = useControlled({\n      controlled: open,\n      default: false,\n      name: \"Overlay\",\n      state: \"open\",\n    });\n\n    const {\n      x,\n      y,\n      strategy,\n      context,\n      elements,\n      floating,\n      reference,\n      middlewareData: { arrow: { x: arrowX, y: arrowY } = {} },\n      placement,\n    } = useFloatingUI({\n      open: openState,\n      onOpenChange: setOpenState,\n      placement: placementProp,\n      middleware: [\n        offset(11),\n        flip(),\n        shift({ limiter: limitShift() }),\n        arrow({ element: arrowRef }),\n      ],\n    });\n\n    const { getReferenceProps, getFloatingProps } = useInteractions([\n      useRole(context, { role: \"dialog\" }),\n      useClick(context),\n      useDismiss(context),\n    ]);\n\n    const floatingStyles = useMemo(() => {\n      return {\n        top: y ?? 0,\n        left: x ?? 0,\n        position: strategy,\n        width: elements.floating?.offsetWidth,\n        height: elements.floating?.offsetHeight,\n      };\n    }, [elements.floating, strategy, x, y]);\n\n    const setOpen = (event: SyntheticEvent, newOpen: boolean) => {\n      setOpenState(newOpen);\n      onOpenChange?.(event, newOpen);\n    };\n\n    const arrowProps = {\n      ref: arrowRef,\n      context,\n      style: {\n        position: strategy,\n        left: arrowX ?? 0,\n        top: arrowY ?? 0,\n      },\n    };\n\n    const handleCloseButton = (event: SyntheticEvent) => {\n      setOpen(event, false);\n      onClose?.(event);\n    };\n\n    return (\n      <OverlayContext.Provider\n        value={{\n          id: id ?? \"\",\n          openState,\n          setOpen,\n          floatingStyles,\n          placement,\n          context,\n          arrowProps,\n          floating,\n          reference,\n          handleCloseButton,\n          getFloatingProps,\n          getReferenceProps,\n        }}\n      >\n        <div ref={ref} {...rest}>\n          {children}\n        </div>\n      </OverlayContext.Provider>\n    );\n  }\n);\n"],"names":["forwardRef","Overlay","useId","useRef","useControlled","useFloatingUI","offset","flip","shift","limitShift","arrow","useInteractions","useRole","useClick","useDismiss","useMemo","jsx","OverlayContext"],"mappings":"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"}
+{"version":3,"file":"Overlay.js","sources":["../src/overlay/Overlay.tsx"],"sourcesContent":["import {\n  ComponentPropsWithoutRef,\n  forwardRef,\n  SyntheticEvent,\n  useMemo,\n  useRef,\n} from \"react\";\nimport { OverlayContext } from \"./OverlayContext\";\nimport { useControlled, useFloatingUI, useId } from \"@salt-ds/core\";\nimport {\n  flip,\n  offset,\n  shift,\n  limitShift,\n  arrow,\n  useClick,\n  useDismiss,\n  useInteractions,\n  useRole,\n} from \"@floating-ui/react\";\n\nexport interface OverlayProps extends ComponentPropsWithoutRef<\"div\"> {\n  open?: boolean;\n  onOpenChange?: (event: SyntheticEvent, newOpen: boolean) => void;\n  /*\n   * Set the placement of the Overlay component relative to the trigger element. Defaults to `top`.\n   */\n  placement?: \"top\" | \"bottom\" | \"left\" | \"right\";\n  /*\n   * Use in controlled version to close Overlay.\n   */\n  onClose?: (event: SyntheticEvent) => void;\n}\n\nexport const Overlay = forwardRef<HTMLDivElement, OverlayProps>(\n  function Overlay(props, ref) {\n    const {\n      children,\n      open,\n      onOpenChange,\n      placement: placementProp = \"top\",\n      id: idProp,\n      onClose,\n      ...rest\n    } = props;\n\n    const id = useId(idProp);\n    const arrowRef = useRef<SVGSVGElement | null>(null);\n\n    const [openState, setOpenState] = useControlled({\n      controlled: open,\n      default: false,\n      name: \"Overlay\",\n      state: \"open\",\n    });\n\n    const {\n      x,\n      y,\n      strategy,\n      context,\n      elements,\n      floating,\n      reference,\n      placement,\n    } = useFloatingUI({\n      open: openState,\n      onOpenChange: setOpenState,\n      placement: placementProp,\n      middleware: [\n        offset(11),\n        flip(),\n        shift({ limiter: limitShift() }),\n        arrow({ element: arrowRef }),\n      ],\n    });\n\n    const { getReferenceProps, getFloatingProps } = useInteractions([\n      useRole(context, { role: \"dialog\" }),\n      useClick(context),\n      useDismiss(context),\n    ]);\n\n    const floatingStyles = useMemo(() => {\n      return {\n        top: y ?? 0,\n        left: x ?? 0,\n        position: strategy,\n        width: elements.floating?.offsetWidth,\n        height: elements.floating?.offsetHeight,\n      };\n    }, [elements.floating, strategy, x, y]);\n\n    const setOpen = (event: SyntheticEvent, newOpen: boolean) => {\n      setOpenState(newOpen);\n      onOpenChange?.(event, newOpen);\n    };\n\n    const arrowProps = {\n      ref: arrowRef,\n      context,\n    };\n\n    const handleCloseButton = (event: SyntheticEvent) => {\n      setOpen(event, false);\n      onClose?.(event);\n    };\n\n    return (\n      <OverlayContext.Provider\n        value={{\n          id: id ?? \"\",\n          openState,\n          setOpen,\n          floatingStyles,\n          placement,\n          context,\n          arrowProps,\n          floating,\n          reference,\n          handleCloseButton,\n          getFloatingProps,\n          getReferenceProps,\n        }}\n      >\n        <div ref={ref} {...rest}>\n          {children}\n        </div>\n      </OverlayContext.Provider>\n    );\n  }\n);\n"],"names":["forwardRef","Overlay","useId","useRef","useControlled","useFloatingUI","offset","flip","shift","limitShift","arrow","useInteractions","useRole","useClick","useDismiss","useMemo","jsx","OverlayContext"],"mappings":"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"}

package/dist-cjs/overlay/OverlayPanel.js

@@ -7,13 +7,12 @@ var React = require('react');
 var core = require('@salt-ds/core');
 var clsx = require('clsx');
 var OverlayContext = require('./OverlayContext.js');
-var react = require('@floating-ui/react');
 var OverlayPanelBase = require('./OverlayPanelBase.js');
 
 const withBaseName = core.makePrefixer("saltOverlayPanel");
 const OverlayPanel = React.forwardRef(
   function OverlayPanel2(props, ref) {
-    const { className, ...rest } = props;
+    const { className, ["aria-labelledby"]: ariaLabelledby, ...rest } = props;
     const { Component: FloatingComponent } = core.useFloatingComponent();
     const {
       id,
@@ -33,28 +32,23 @@ const OverlayPanel = React.forwardRef(
         id: `${id}-panel`
       });
     };
-    if (!openState)
-      return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {});
-    return /* @__PURE__ */ jsxRuntime.jsx(react.FloatingOverlay, {
-      children: /* @__PURE__ */ jsxRuntime.jsx(FloatingComponent, {
-        open: openState,
-        className: clsx.clsx(withBaseName(), className),
-        "aria-modal": "true",
-        "aria-labelledby": `${id}-header`,
-        "aria-describedby": `${id}-content`,
-        ...getOverlayProps(),
-        ref: handleRef,
-        width,
-        height,
-        top,
-        left,
-        position,
-        focusManagerProps: {
-          context
-        },
-        children: /* @__PURE__ */ jsxRuntime.jsx(OverlayPanelBase.OverlayPanelBase, {
-          ...rest
-        })
+    return /* @__PURE__ */ jsxRuntime.jsx(FloatingComponent, {
+      open: openState,
+      className: clsx.clsx(withBaseName(), className),
+      "aria-modal": "true",
+      ...getOverlayProps(),
+      ref: handleRef,
+      width,
+      height,
+      top,
+      left,
+      position,
+      focusManagerProps: {
+        context
+      },
+      "aria-labelledby": ariaLabelledby,
+      children: /* @__PURE__ */ jsxRuntime.jsx(OverlayPanelBase.OverlayPanelBase, {
+        ...rest
       })
     });
   }

package/dist-cjs/overlay/OverlayPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"OverlayPanel.js","sources":["../src/overlay/OverlayPanel.tsx"],"sourcesContent":["import {\n  ComponentPropsWithoutRef,\n  ForwardedRef,\n  forwardRef,\n  HTMLProps,\n} from \"react\";\nimport { makePrefixer, useFloatingComponent, useForkRef } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { useOverlayContext } from \"./OverlayContext\";\nimport { FloatingOverlay } from \"@floating-ui/react\";\nimport { OverlayPanelBase } from \"./OverlayPanelBase\";\n\nconst withBaseName = makePrefixer(\"saltOverlayPanel\");\n\nexport interface OverlayPanelProps extends ComponentPropsWithoutRef<\"div\"> {}\n\nexport const OverlayPanel = forwardRef<HTMLDivElement, OverlayPanelProps>(\n  function OverlayPanel(props, ref: ForwardedRef<HTMLDivElement>) {\n    const { className, ...rest } = props;\n\n    const { Component: FloatingComponent } = useFloatingComponent();\n\n    const {\n      id,\n      openState,\n      floatingStyles,\n      placement,\n      context,\n      getFloatingProps,\n      floating,\n    } = useOverlayContext();\n\n    const handleRef = useForkRef<HTMLDivElement>(floating, ref);\n\n    const { top, left, width, height, position } = floatingStyles;\n\n    const getOverlayProps = (): HTMLProps<HTMLDivElement> => {\n      return getFloatingProps({\n        // @ts-ignore data-placement does not exist\n        \"data-placement\": placement,\n        ref: floating,\n        id: `${id}-panel`,\n      });\n    };\n\n    if (!openState) return <></>;\n\n    return (\n      <FloatingOverlay>\n        <FloatingComponent\n          open={openState}\n          className={clsx(withBaseName(), className)}\n          aria-modal=\"true\"\n          aria-labelledby={`${id}-header`}\n          aria-describedby={`${id}-content`}\n          {...getOverlayProps()}\n          ref={handleRef}\n          width={width}\n          height={height}\n          top={top}\n          left={left}\n          position={position}\n          focusManagerProps={{\n            context: context,\n          }}\n        >\n          <OverlayPanelBase {...rest} />\n        </FloatingComponent>\n      </FloatingOverlay>\n    );\n  }\n);\n"],"names":["makePrefixer","forwardRef","OverlayPanel","useFloatingComponent","useOverlayContext","useForkRef","jsx","Fragment","FloatingOverlay","clsx","OverlayPanelBase"],"mappings":";;;;;;;;;;;;AAYA,MAAM,YAAA,GAAeA,kBAAa,kBAAkB,CAAA,CAAA;AAI7C,MAAM,YAAe,GAAAC,gBAAA;AAAA,EAC1B,SAASC,aAAa,CAAA,KAAA,EAAO,GAAmC,EAAA;AAC9D,IAAM,MAAA,EAAE,SAAc,EAAA,GAAA,IAAA,EAAS,GAAA,KAAA,CAAA;AAE/B,IAAA,MAAM,EAAE,SAAA,EAAW,iBAAkB,EAAA,GAAIC,yBAAqB,EAAA,CAAA;AAE9D,IAAM,MAAA;AAAA,MACJ,EAAA;AAAA,MACA,SAAA;AAAA,MACA,cAAA;AAAA,MACA,SAAA;AAAA,MACA,OAAA;AAAA,MACA,gBAAA;AAAA,MACA,QAAA;AAAA,QACEC,gCAAkB,EAAA,CAAA;AAEtB,IAAM,MAAA,SAAA,GAAYC,eAA2B,CAAA,QAAA,EAAU,GAAG,CAAA,CAAA;AAE1D,IAAA,MAAM,EAAE,GAAK,EAAA,IAAA,EAAM,KAAO,EAAA,MAAA,EAAQ,UAAa,GAAA,cAAA,CAAA;AAE/C,IAAA,MAAM,kBAAkB,MAAiC;AACvD,MAAA,OAAO,gBAAiB,CAAA;AAAA,QAEtB,gBAAkB,EAAA,SAAA;AAAA,QAClB,GAAK,EAAA,QAAA;AAAA,QACL,IAAI,CAAG,EAAA,EAAA,CAAA,MAAA,CAAA;AAAA,OACR,CAAA,CAAA;AAAA,KACH,CAAA;AAEA,IAAA,IAAI,CAAC,SAAA;AAAW,MAAA,uBAASC,cAAA,CAAAC,mBAAA,EAAA,EAAA,CAAA,CAAA;AAEzB,IAAA,uBACGD,cAAA,CAAAE,qBAAA,EAAA;AAAA,MACC,QAAC,kBAAAF,cAAA,CAAA,iBAAA,EAAA;AAAA,QACC,IAAM,EAAA,SAAA;AAAA,QACN,SAAW,EAAAG,SAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,QACzC,YAAW,EAAA,MAAA;AAAA,QACX,mBAAiB,CAAG,EAAA,EAAA,CAAA,OAAA,CAAA;AAAA,QACpB,oBAAkB,CAAG,EAAA,EAAA,CAAA,QAAA,CAAA;AAAA,QACpB,GAAG,eAAgB,EAAA;AAAA,QACpB,GAAK,EAAA,SAAA;AAAA,QACL,KAAA;AAAA,QACA,MAAA;AAAA,QACA,GAAA;AAAA,QACA,IAAA;AAAA,QACA,QAAA;AAAA,QACA,iBAAmB,EAAA;AAAA,UACjB,OAAA;AAAA,SACF;AAAA,QAEA,QAAC,kBAAAH,cAAA,CAAAI,iCAAA,EAAA;AAAA,UAAkB,GAAG,IAAA;AAAA,SAAM,CAAA;AAAA,OAC9B,CAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
+{"version":3,"file":"OverlayPanel.js","sources":["../src/overlay/OverlayPanel.tsx"],"sourcesContent":["import {\n  ForwardedRef,\n  forwardRef,\n  HTMLProps,\n  ComponentPropsWithoutRef,\n} from \"react\";\nimport { makePrefixer, useFloatingComponent, useForkRef } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { useOverlayContext } from \"./OverlayContext\";\nimport { OverlayPanelBase } from \"./OverlayPanelBase\";\n\nconst withBaseName = makePrefixer(\"saltOverlayPanel\");\n\nexport interface OverlayPanelProps extends ComponentPropsWithoutRef<\"div\"> {}\n\nexport const OverlayPanel = forwardRef<HTMLDivElement, OverlayPanelProps>(\n  function OverlayPanel(props, ref: ForwardedRef<HTMLDivElement>) {\n    const { className, [\"aria-labelledby\"]: ariaLabelledby, ...rest } = props;\n\n    const { Component: FloatingComponent } = useFloatingComponent();\n\n    const {\n      id,\n      openState,\n      floatingStyles,\n      placement,\n      context,\n      getFloatingProps,\n      floating,\n    } = useOverlayContext();\n\n    const handleRef = useForkRef<HTMLDivElement>(floating, ref);\n\n    const { top, left, width, height, position } = floatingStyles;\n\n    const getOverlayProps = (): HTMLProps<HTMLDivElement> => {\n      return getFloatingProps({\n        // @ts-ignore data-placement does not exist\n        \"data-placement\": placement,\n        ref: floating,\n        id: `${id}-panel`,\n      });\n    };\n\n    return (\n      <FloatingComponent\n        open={openState}\n        className={clsx(withBaseName(), className)}\n        aria-modal=\"true\"\n        {...getOverlayProps()}\n        ref={handleRef}\n        width={width}\n        height={height}\n        top={top}\n        left={left}\n        position={position}\n        focusManagerProps={{\n          context: context,\n        }}\n        aria-labelledby={ariaLabelledby}\n      >\n        <OverlayPanelBase {...rest} />\n      </FloatingComponent>\n    );\n  }\n);\n"],"names":["makePrefixer","forwardRef","OverlayPanel","useFloatingComponent","useOverlayContext","useForkRef","jsx","clsx","OverlayPanelBase"],"mappings":";;;;;;;;;;;AAWA,MAAM,YAAA,GAAeA,kBAAa,kBAAkB,CAAA,CAAA;AAI7C,MAAM,YAAe,GAAAC,gBAAA;AAAA,EAC1B,SAASC,aAAa,CAAA,KAAA,EAAO,GAAmC,EAAA;AAC9D,IAAA,MAAM,EAAE,SAAA,EAAA,CAAY,iBAAoB,GAAA,cAAA,EAAA,GAAmB,MAAS,GAAA,KAAA,CAAA;AAEpE,IAAA,MAAM,EAAE,SAAA,EAAW,iBAAkB,EAAA,GAAIC,yBAAqB,EAAA,CAAA;AAE9D,IAAM,MAAA;AAAA,MACJ,EAAA;AAAA,MACA,SAAA;AAAA,MACA,cAAA;AAAA,MACA,SAAA;AAAA,MACA,OAAA;AAAA,MACA,gBAAA;AAAA,MACA,QAAA;AAAA,QACEC,gCAAkB,EAAA,CAAA;AAEtB,IAAM,MAAA,SAAA,GAAYC,eAA2B,CAAA,QAAA,EAAU,GAAG,CAAA,CAAA;AAE1D,IAAA,MAAM,EAAE,GAAK,EAAA,IAAA,EAAM,KAAO,EAAA,MAAA,EAAQ,UAAa,GAAA,cAAA,CAAA;AAE/C,IAAA,MAAM,kBAAkB,MAAiC;AACvD,MAAA,OAAO,gBAAiB,CAAA;AAAA,QAEtB,gBAAkB,EAAA,SAAA;AAAA,QAClB,GAAK,EAAA,QAAA;AAAA,QACL,IAAI,CAAG,EAAA,EAAA,CAAA,MAAA,CAAA;AAAA,OACR,CAAA,CAAA;AAAA,KACH,CAAA;AAEA,IAAA,uBACGC,cAAA,CAAA,iBAAA,EAAA;AAAA,MACC,IAAM,EAAA,SAAA;AAAA,MACN,SAAW,EAAAC,SAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MACzC,YAAW,EAAA,MAAA;AAAA,MACV,GAAG,eAAgB,EAAA;AAAA,MACpB,GAAK,EAAA,SAAA;AAAA,MACL,KAAA;AAAA,MACA,MAAA;AAAA,MACA,GAAA;AAAA,MACA,IAAA;AAAA,MACA,QAAA;AAAA,MACA,iBAAmB,EAAA;AAAA,QACjB,OAAA;AAAA,OACF;AAAA,MACA,iBAAiB,EAAA,cAAA;AAAA,MAEjB,QAAC,kBAAAD,cAAA,CAAAE,iCAAA,EAAA;AAAA,QAAkB,GAAG,IAAA;AAAA,OAAM,CAAA;AAAA,KAC9B,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist-cjs/overlay/OverlayPanelBase.js

@@ -52,10 +52,8 @@ const OverlayPanelBase = (props) => {
         strokeWidth: 1,
         fill: "var(--overlay-background)",
         stroke: "var(--overlay-borderColor)",
-        style: {
-          height: "calc(var(--salt-size-adornment) + 6px)",
-          width: "calc(var(--salt-size-adornment) + 8px)"
-        }
+        height: 5,
+        width: 10
       })
     ]
   });

package/dist-cjs/overlay/OverlayPanelBase.js.map

@@ -1 +1 @@
-{"version":3,"file":"OverlayPanelBase.js","sources":["../src/overlay/OverlayPanelBase.tsx"],"sourcesContent":["import { FloatingArrow } from \"@floating-ui/react\";\n\nimport overlayCss from \"./Overlay.css\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { Button, makePrefixer } from \"@salt-ds/core\";\nimport { CloseIcon } from \"@salt-ds/icons\";\nimport { ComponentPropsWithoutRef } from \"react\";\nimport { useOverlayContext } from \"./OverlayContext\";\nimport clsx from \"clsx\";\n\nconst withBaseName = makePrefixer(\"saltOverlayPanelBase\");\n\n// OverlayPanelBase component needed for CSS style injection\nexport const OverlayPanelBase = (props: ComponentPropsWithoutRef<\"div\">) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-overlay\",\n    css: overlayCss,\n    window: targetWindow,\n  });\n\n  const { arrowProps, handleCloseButton } = useOverlayContext();\n  const { children, className, ...rest } = props;\n\n  return (\n    <>\n      <div className={clsx(withBaseName(\"container\"), className)} {...rest}>\n        <Button\n          onClick={handleCloseButton}\n          variant=\"secondary\"\n          className={withBaseName(\"closeButton\")}\n          aria-label=\"Close Overlay\"\n        >\n          <CloseIcon aria-hidden />\n        </Button>\n        <div className={withBaseName(\"content\")}>{children}</div>\n      </div>\n\n      <FloatingArrow\n        {...arrowProps}\n        strokeWidth={1}\n        fill=\"var(--overlay-background)\"\n        stroke=\"var(--overlay-borderColor)\"\n        style={{\n          height: \"calc(var(--salt-size-adornment) + 6px)\", // FIXME: +6px to account for Floating UI's FloatingArrow positioning calculation\n          width: \"calc(var(--salt-size-adornment) + 8px)\", // FIXME: +8px to account for Floating UI's FloatingArrow positioning calculation\n        }}\n      />\n    </>\n  );\n};\n"],"names":["makePrefixer","useWindow","useComponentCssInjection","overlayCss","useOverlayContext","jsxs","Fragment","clsx","jsx","Button","CloseIcon","FloatingArrow"],"mappings":";;;;;;;;;;;;;;;;;;AAWA,MAAM,YAAA,GAAeA,kBAAa,sBAAsB,CAAA,CAAA;AAG3C,MAAA,gBAAA,GAAmB,CAAC,KAA2C,KAAA;AAC1E,EAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,cAAA;AAAA,IACR,GAAK,EAAAC,OAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,MAAM,EAAE,UAAA,EAAY,iBAAkB,EAAA,GAAIC,gCAAkB,EAAA,CAAA;AAC5D,EAAA,MAAM,EAAE,QAAA,EAAU,SAAc,EAAA,GAAA,IAAA,EAAS,GAAA,KAAA,CAAA;AAEzC,EACE,uBAAAC,eAAA,CAAAC,mBAAA,EAAA;AAAA,IACE,QAAA,EAAA;AAAA,sBAACD,eAAA,CAAA,KAAA,EAAA;AAAA,QAAI,SAAW,EAAAE,wBAAA,CAAK,YAAa,CAAA,WAAW,GAAG,SAAS,CAAA;AAAA,QAAI,GAAG,IAAA;AAAA,QAC9D,QAAA,EAAA;AAAA,0BAACC,cAAA,CAAAC,WAAA,EAAA;AAAA,YACC,OAAS,EAAA,iBAAA;AAAA,YACT,OAAQ,EAAA,WAAA;AAAA,YACR,SAAA,EAAW,aAAa,aAAa,CAAA;AAAA,YACrC,YAAW,EAAA,eAAA;AAAA,YAEX,QAAC,kBAAAD,cAAA,CAAAE,eAAA,EAAA;AAAA,cAAU,aAAW,EAAA,IAAA;AAAA,aAAC,CAAA;AAAA,WACzB,CAAA;AAAA,0BACCF,cAAA,CAAA,KAAA,EAAA;AAAA,YAAI,SAAA,EAAW,aAAa,SAAS,CAAA;AAAA,YAAI,QAAA;AAAA,WAAS,CAAA;AAAA,SAAA;AAAA,OACrD,CAAA;AAAA,sBAECA,cAAA,CAAAG,mBAAA,EAAA;AAAA,QACE,GAAG,UAAA;AAAA,QACJ,WAAa,EAAA,CAAA;AAAA,QACb,IAAK,EAAA,2BAAA;AAAA,QACL,MAAO,EAAA,4BAAA;AAAA,QACP,KAAO,EAAA;AAAA,UACL,MAAQ,EAAA,wCAAA;AAAA,UACR,KAAO,EAAA,wCAAA;AAAA,SACT;AAAA,OACF,CAAA;AAAA,KAAA;AAAA,GACF,CAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"OverlayPanelBase.js","sources":["../src/overlay/OverlayPanelBase.tsx"],"sourcesContent":["import { FloatingArrow } from \"@floating-ui/react\";\n\nimport overlayCss from \"./Overlay.css\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { Button, makePrefixer } from \"@salt-ds/core\";\nimport { CloseIcon } from \"@salt-ds/icons\";\nimport { ComponentPropsWithoutRef } from \"react\";\nimport { useOverlayContext } from \"./OverlayContext\";\nimport clsx from \"clsx\";\n\nconst withBaseName = makePrefixer(\"saltOverlayPanelBase\");\n\n// OverlayPanelBase component needed for CSS style injection\nexport const OverlayPanelBase = (props: ComponentPropsWithoutRef<\"div\">) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-overlay\",\n    css: overlayCss,\n    window: targetWindow,\n  });\n\n  const { arrowProps, handleCloseButton } = useOverlayContext();\n  const { children, className, ...rest } = props;\n\n  return (\n    <>\n      <div className={clsx(withBaseName(\"container\"), className)} {...rest}>\n        <Button\n          onClick={handleCloseButton}\n          variant=\"secondary\"\n          className={withBaseName(\"closeButton\")}\n          aria-label=\"Close Overlay\"\n        >\n          <CloseIcon aria-hidden />\n        </Button>\n        <div className={withBaseName(\"content\")}>{children}</div>\n      </div>\n      <FloatingArrow\n        {...arrowProps}\n        strokeWidth={1}\n        fill=\"var(--overlay-background)\"\n        stroke=\"var(--overlay-borderColor)\"\n        height={5}\n        width={10}\n      />\n    </>\n  );\n};\n"],"names":["makePrefixer","useWindow","useComponentCssInjection","overlayCss","useOverlayContext","jsxs","Fragment","clsx","jsx","Button","CloseIcon","FloatingArrow"],"mappings":";;;;;;;;;;;;;;;;;;AAWA,MAAM,YAAA,GAAeA,kBAAa,sBAAsB,CAAA,CAAA;AAG3C,MAAA,gBAAA,GAAmB,CAAC,KAA2C,KAAA;AAC1E,EAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,cAAA;AAAA,IACR,GAAK,EAAAC,OAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,MAAM,EAAE,UAAA,EAAY,iBAAkB,EAAA,GAAIC,gCAAkB,EAAA,CAAA;AAC5D,EAAA,MAAM,EAAE,QAAA,EAAU,SAAc,EAAA,GAAA,IAAA,EAAS,GAAA,KAAA,CAAA;AAEzC,EACE,uBAAAC,eAAA,CAAAC,mBAAA,EAAA;AAAA,IACE,QAAA,EAAA;AAAA,sBAACD,eAAA,CAAA,KAAA,EAAA;AAAA,QAAI,SAAW,EAAAE,wBAAA,CAAK,YAAa,CAAA,WAAW,GAAG,SAAS,CAAA;AAAA,QAAI,GAAG,IAAA;AAAA,QAC9D,QAAA,EAAA;AAAA,0BAACC,cAAA,CAAAC,WAAA,EAAA;AAAA,YACC,OAAS,EAAA,iBAAA;AAAA,YACT,OAAQ,EAAA,WAAA;AAAA,YACR,SAAA,EAAW,aAAa,aAAa,CAAA;AAAA,YACrC,YAAW,EAAA,eAAA;AAAA,YAEX,QAAC,kBAAAD,cAAA,CAAAE,eAAA,EAAA;AAAA,cAAU,aAAW,EAAA,IAAA;AAAA,aAAC,CAAA;AAAA,WACzB,CAAA;AAAA,0BACCF,cAAA,CAAA,KAAA,EAAA;AAAA,YAAI,SAAA,EAAW,aAAa,SAAS,CAAA;AAAA,YAAI,QAAA;AAAA,WAAS,CAAA;AAAA,SAAA;AAAA,OACrD,CAAA;AAAA,sBACCA,cAAA,CAAAG,mBAAA,EAAA;AAAA,QACE,GAAG,UAAA;AAAA,QACJ,WAAa,EAAA,CAAA;AAAA,QACb,IAAK,EAAA,2BAAA;AAAA,QACL,MAAO,EAAA,4BAAA;AAAA,QACP,MAAQ,EAAA,CAAA;AAAA,QACR,KAAO,EAAA,EAAA;AAAA,OACT,CAAA;AAAA,KAAA;AAAA,GACF,CAAA,CAAA;AAEJ;;;;"}

package/dist-cjs/tabs/Tab.js

@@ -83,7 +83,7 @@ const Tab = React.forwardRef(function Tab2({
     switch (e.key) {
       case "Backspace":
       case "Delete":
-        if (closeable) {
+        if (closeable && !editing) {
           e.stopPropagation();
           onClose && onClose(index);
         }

package/dist-cjs/tabs/Tab.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tab.js","sources":["../src/tabs/Tab.tsx"],"sourcesContent":["// TODO close button needs to be a button. Hence tab needs to include 2 buttons\nimport { Button, ButtonProps, makePrefixer, useForkRef } from \"@salt-ds/core\";\nimport { CloseIcon } from \"@salt-ds/icons\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  FocusEvent,\n  ForwardedRef,\n  KeyboardEvent,\n  MouseEvent,\n  ReactElement,\n  forwardRef,\n  useCallback,\n  useRef,\n  useState,\n} from \"react\";\nimport { EditableLabel, EditableLabelProps } from \"../editable-label\";\nimport { TabProps } from \"./TabsTypes\";\n\nimport tabCss from \"./Tab.css\";\n\nconst noop = () => undefined;\n\nconst withBaseName = makePrefixer(\"saltTab\");\n\nconst CloseTabButton = (props: ButtonProps) => (\n  // FIXME: use polymorphic button\n  <Button\n    {...props}\n    aria-label=\"Close Tab (Delete or Backspace)\"\n    className={withBaseName(\"closeButton\")}\n    tabIndex={undefined}\n    title=\"Close Tab (Delete or Backspace)\"\n    variant=\"secondary\"\n  >\n    <CloseIcon\n      aria-label=\"Close Tab (Delete or Backspace)\"\n      className={withBaseName(\"close-icon\")}\n    />\n  </Button>\n);\n\nexport const Tab = forwardRef(function Tab(\n  {\n    ariaControls,\n    children,\n    className,\n    closeable,\n    dragging,\n    editable,\n    editing,\n    focusVisible,\n    index,\n    label,\n    onClick,\n    onClose,\n    onEnterEditMode = noop,\n    onExitEditMode = noop,\n    onFocus: onFocusProp,\n    onKeyDown,\n    onKeyUp,\n    onMouseDown,\n    orientation,\n    selected,\n    tabChildIndex = 0,\n    tabIndex,\n    ...props\n  }: TabProps,\n  ref: ForwardedRef<HTMLDivElement>\n): ReactElement<TabProps> {\n  if (index === undefined || onClick === undefined || onKeyDown === undefined) {\n    throw Error(\n      \"index, onClick, onKeyUp, onKeyDown are required props, they would nornally be injected by Tabstrip, are you creating a Tab outside of a Tabstrip\"\n    );\n  }\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-tab\",\n    css: tabCss,\n    window: targetWindow,\n  });\n\n  const root = useRef<HTMLDivElement>(null);\n  const editableRef = useRef<HTMLDivElement>(null);\n  const setForkRef = useForkRef(ref, root);\n  const [closeHover, setCloseHover] = useState(false);\n  const handleClick = useCallback(\n    (e: MouseEvent) => {\n      if (!editing) {\n        e.preventDefault();\n        onClick(e, index);\n      }\n    },\n    [editing, index, onClick]\n  );\n  const handleKeyDownMain = (e: KeyboardEvent<HTMLElement>) => {\n    onKeyDown(e);\n  };\n\n  const handleOnExitEditMode: EditableLabelProps[\"onExitEditMode\"] = (\n    originalValue = \"\",\n    editedValue = \"\",\n    allowDeactivation = true\n  ) => onExitEditMode(originalValue, editedValue, allowDeactivation, index);\n\n  const handleKeyUp = (e: KeyboardEvent) => {\n    switch (e.key) {\n      case \"Backspace\":\n      case \"Delete\":\n        if (closeable) {\n          e.stopPropagation();\n          onClose && onClose(index);\n        }\n        break;\n      default:\n        onKeyUp && onKeyUp(e, index);\n    }\n  };\n\n  const handleCloseButtonClick = (e: MouseEvent<HTMLButtonElement>) => {\n    e.stopPropagation();\n    onClose && onClose(index);\n  };\n\n  const handleCloseButtonEnter = () => {\n    setCloseHover(true);\n  };\n\n  const handleCloseButtonLeave = () => {\n    setCloseHover(false);\n  };\n\n  const handleMouseDown = (e: MouseEvent<HTMLElement>): void => {\n    onMouseDown?.(e);\n  };\n\n  const getLabel = () => {\n    if (editable) {\n      return (\n        <EditableLabel\n          editing={editing}\n          defaultValue={label}\n          // Create a fresh instance after each edit, so it can be uncontrolled ...\n          key={label}\n          onEnterEditMode={onEnterEditMode}\n          onExitEditMode={handleOnExitEditMode}\n          ref={editableRef}\n        />\n      );\n    } else {\n      return label;\n    }\n  };\n\n  const handleFocus = (evt: FocusEvent<HTMLElement>) => {\n    if (editableRef.current) {\n      const editable = editableRef.current as HTMLElement;\n      const input = editable.querySelector(\n        \".saltEditableLabel-input\"\n      ) as HTMLInputElement;\n      input?.focus();\n    }\n    onFocusProp?.(evt);\n  };\n\n  return (\n    <div\n      {...props}\n      aria-controls={ariaControls}\n      aria-selected={selected}\n      className={clsx(withBaseName(), {\n        [withBaseName(\"closeable\")]: closeable,\n        [withBaseName(\"closeHover\")]: closeHover,\n        [withBaseName(\"dragAway\")]: dragging,\n        [withBaseName(\"editing\")]: editing,\n        [withBaseName(\"vertical\")]: orientation === \"vertical\",\n        [`saltFocusVisible`]: focusVisible,\n      })}\n      data-editable={editable || undefined}\n      onClick={handleClick}\n      onFocus={handleFocus}\n      onKeyDown={handleKeyDownMain}\n      onKeyUp={handleKeyUp}\n      onMouseDown={handleMouseDown}\n      ref={setForkRef}\n      role=\"tab\"\n      tabIndex={tabIndex}\n    >\n      <div className={withBaseName(\"main\")}>\n        <span\n          className={withBaseName(\"text\")}\n          // data-text is important, it determines the width of the tab. A pseudo\n          // element assigns data-text as content. This is styled as selected tab\n          // text. That means width of tab always corresponds to its selected state,\n          // so tabs do not change size when selected (ie when the text is bolded).\n          // Do not include if we have editable content, EditableLabel will determine\n          // the width\n          data-text={editable ? undefined : label}\n        >\n          {children ?? getLabel()}\n        </span>\n      </div>\n      {closeable ? (\n        <CloseTabButton\n          onClick={handleCloseButtonClick}\n          onMouseEnter={handleCloseButtonEnter}\n          onMouseLeave={handleCloseButtonLeave}\n        />\n      ) : null}\n    </div>\n  );\n});\n"],"names":["makePrefixer","jsx","Button","CloseIcon","forwardRef","Tab","useWindow","useComponentCssInjection","tabCss","useRef","useForkRef","useState","useCallback","EditableLabel","editable","jsxs","clsx"],"mappings":"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"}
+{"version":3,"file":"Tab.js","sources":["../src/tabs/Tab.tsx"],"sourcesContent":["// TODO close button needs to be a button. Hence tab needs to include 2 buttons\nimport { Button, ButtonProps, makePrefixer, useForkRef } from \"@salt-ds/core\";\nimport { CloseIcon } from \"@salt-ds/icons\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  FocusEvent,\n  ForwardedRef,\n  KeyboardEvent,\n  MouseEvent,\n  ReactElement,\n  forwardRef,\n  useCallback,\n  useRef,\n  useState,\n} from \"react\";\nimport { EditableLabel, EditableLabelProps } from \"../editable-label\";\nimport { TabProps } from \"./TabsTypes\";\n\nimport tabCss from \"./Tab.css\";\n\nconst noop = () => undefined;\n\nconst withBaseName = makePrefixer(\"saltTab\");\n\nconst CloseTabButton = (props: ButtonProps) => (\n  // FIXME: use polymorphic button\n  <Button\n    {...props}\n    aria-label=\"Close Tab (Delete or Backspace)\"\n    className={withBaseName(\"closeButton\")}\n    tabIndex={undefined}\n    title=\"Close Tab (Delete or Backspace)\"\n    variant=\"secondary\"\n  >\n    <CloseIcon\n      aria-label=\"Close Tab (Delete or Backspace)\"\n      className={withBaseName(\"close-icon\")}\n    />\n  </Button>\n);\n\nexport const Tab = forwardRef(function Tab(\n  {\n    ariaControls,\n    children,\n    className,\n    closeable,\n    dragging,\n    editable,\n    editing,\n    focusVisible,\n    index,\n    label,\n    onClick,\n    onClose,\n    onEnterEditMode = noop,\n    onExitEditMode = noop,\n    onFocus: onFocusProp,\n    onKeyDown,\n    onKeyUp,\n    onMouseDown,\n    orientation,\n    selected,\n    tabChildIndex = 0,\n    tabIndex,\n    ...props\n  }: TabProps,\n  ref: ForwardedRef<HTMLDivElement>\n): ReactElement<TabProps> {\n  if (index === undefined || onClick === undefined || onKeyDown === undefined) {\n    throw Error(\n      \"index, onClick, onKeyUp, onKeyDown are required props, they would nornally be injected by Tabstrip, are you creating a Tab outside of a Tabstrip\"\n    );\n  }\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-tab\",\n    css: tabCss,\n    window: targetWindow,\n  });\n\n  const root = useRef<HTMLDivElement>(null);\n  const editableRef = useRef<HTMLDivElement>(null);\n  const setForkRef = useForkRef(ref, root);\n  const [closeHover, setCloseHover] = useState(false);\n  const handleClick = useCallback(\n    (e: MouseEvent) => {\n      if (!editing) {\n        e.preventDefault();\n        onClick(e, index);\n      }\n    },\n    [editing, index, onClick]\n  );\n  const handleKeyDownMain = (e: KeyboardEvent<HTMLElement>) => {\n    onKeyDown(e);\n  };\n\n  const handleOnExitEditMode: EditableLabelProps[\"onExitEditMode\"] = (\n    originalValue = \"\",\n    editedValue = \"\",\n    allowDeactivation = true\n  ) => onExitEditMode(originalValue, editedValue, allowDeactivation, index);\n\n  const handleKeyUp = (e: KeyboardEvent) => {\n    switch (e.key) {\n      case \"Backspace\":\n      case \"Delete\":\n        if (closeable && !editing) {\n          e.stopPropagation();\n          onClose && onClose(index);\n        }\n        break;\n      default:\n        onKeyUp && onKeyUp(e, index);\n    }\n  };\n\n  const handleCloseButtonClick = (e: MouseEvent<HTMLButtonElement>) => {\n    e.stopPropagation();\n    onClose && onClose(index);\n  };\n\n  const handleCloseButtonEnter = () => {\n    setCloseHover(true);\n  };\n\n  const handleCloseButtonLeave = () => {\n    setCloseHover(false);\n  };\n\n  const handleMouseDown = (e: MouseEvent<HTMLElement>): void => {\n    onMouseDown?.(e);\n  };\n\n  const getLabel = () => {\n    if (editable) {\n      return (\n        <EditableLabel\n          editing={editing}\n          defaultValue={label}\n          // Create a fresh instance after each edit, so it can be uncontrolled ...\n          key={label}\n          onEnterEditMode={onEnterEditMode}\n          onExitEditMode={handleOnExitEditMode}\n          ref={editableRef}\n        />\n      );\n    } else {\n      return label;\n    }\n  };\n\n  const handleFocus = (evt: FocusEvent<HTMLElement>) => {\n    if (editableRef.current) {\n      const editable = editableRef.current as HTMLElement;\n      const input = editable.querySelector(\n        \".saltEditableLabel-input\"\n      ) as HTMLInputElement;\n      input?.focus();\n    }\n    onFocusProp?.(evt);\n  };\n\n  return (\n    <div\n      {...props}\n      aria-controls={ariaControls}\n      aria-selected={selected}\n      className={clsx(withBaseName(), {\n        [withBaseName(\"closeable\")]: closeable,\n        [withBaseName(\"closeHover\")]: closeHover,\n        [withBaseName(\"dragAway\")]: dragging,\n        [withBaseName(\"editing\")]: editing,\n        [withBaseName(\"vertical\")]: orientation === \"vertical\",\n        [`saltFocusVisible`]: focusVisible,\n      })}\n      data-editable={editable || undefined}\n      onClick={handleClick}\n      onFocus={handleFocus}\n      onKeyDown={handleKeyDownMain}\n      onKeyUp={handleKeyUp}\n      onMouseDown={handleMouseDown}\n      ref={setForkRef}\n      role=\"tab\"\n      tabIndex={tabIndex}\n    >\n      <div className={withBaseName(\"main\")}>\n        <span\n          className={withBaseName(\"text\")}\n          // data-text is important, it determines the width of the tab. A pseudo\n          // element assigns data-text as content. This is styled as selected tab\n          // text. That means width of tab always corresponds to its selected state,\n          // so tabs do not change size when selected (ie when the text is bolded).\n          // Do not include if we have editable content, EditableLabel will determine\n          // the width\n          data-text={editable ? undefined : label}\n        >\n          {children ?? getLabel()}\n        </span>\n      </div>\n      {closeable ? (\n        <CloseTabButton\n          onClick={handleCloseButtonClick}\n          onMouseEnter={handleCloseButtonEnter}\n          onMouseLeave={handleCloseButtonLeave}\n        />\n      ) : null}\n    </div>\n  );\n});\n"],"names":["makePrefixer","jsx","Button","CloseIcon","forwardRef","Tab","useWindow","useComponentCssInjection","tabCss","useRef","useForkRef","useState","useCallback","EditableLabel","editable","jsxs","clsx"],"mappings":"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"}

package/dist-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 { ReactNode, SyntheticEvent, useContext } from \"react\";\n\ntype TabValue = {\n  value: string;\n  label: ReactNode;\n};\n\nexport interface TabsContextValue {\n  activeColor: \"primary\" | \"secondary\";\n  disabled?: boolean;\n  activate: (event: SyntheticEvent<HTMLButtonElement>) => void;\n  isActive: (id: string) => boolean;\n  setFocusable: (id: string) => void;\n  isFocusable: (id: string) => boolean;\n  registerTab: (tab: TabValue) => void;\n  unregisterTab: (id: string) => void;\n  variant: \"main\" | \"inline\";\n}\n\nexport const TabsContext = createContext<TabsContextValue>(\"TabsContext\", {\n  activeColor: \"primary\",\n  disabled: false,\n  activate: () => undefined,\n  isActive: () => false,\n  setFocusable: () => undefined,\n  isFocusable: () => false,\n  registerTab: () => undefined,\n  unregisterTab: () => undefined,\n  variant: \"main\",\n});\n\nexport function useTabs() {\n  return useContext(TabsContext);\n}\n"],"names":["createContext","useContext"],"mappings":";;;;;;;AAoBa,MAAA,WAAA,GAAcA,mBAAgC,aAAe,EAAA;AAAA,EACxE,WAAa,EAAA,SAAA;AAAA,EACb,QAAU,EAAA,KAAA;AAAA,EACV,UAAU,MAAM,KAAA,CAAA;AAAA,EAChB,UAAU,MAAM,KAAA;AAAA,EAChB,cAAc,MAAM,KAAA,CAAA;AAAA,EACpB,aAAa,MAAM,KAAA;AAAA,EACnB,aAAa,MAAM,KAAA,CAAA;AAAA,EACnB,eAAe,MAAM,KAAA,CAAA;AAAA,EACrB,OAAS,EAAA,MAAA;AACX,CAAC,EAAA;AAEM,SAAS,OAAU,GAAA;AACxB,EAAA,OAAOC,iBAAW,WAAW,CAAA,CAAA;AAC/B;;;;;"}
+{"version":3,"file":"TabNextContext.js","sources":["../src/tabs-next/TabNextContext.tsx"],"sourcesContent":["import { createContext } from \"@salt-ds/core\";\nimport { ReactNode, SyntheticEvent, useContext } from \"react\";\n\ninterface TabValue {\n  value: string;\n  label: ReactNode;\n}\n\nexport interface TabsContextValue {\n  activeColor: \"primary\" | \"secondary\";\n  disabled?: boolean;\n  activate: (event: SyntheticEvent<HTMLButtonElement>) => void;\n  isActive: (id: string) => boolean;\n  setFocusable: (id: string) => void;\n  isFocusable: (id: string) => boolean;\n  registerTab: (tab: TabValue) => void;\n  unregisterTab: (id: string) => void;\n  variant: \"main\" | \"inline\";\n}\n\nexport const TabsContext = createContext<TabsContextValue>(\"TabsContext\", {\n  activeColor: \"primary\",\n  disabled: false,\n  activate: () => undefined,\n  isActive: () => false,\n  setFocusable: () => undefined,\n  isFocusable: () => false,\n  registerTab: () => undefined,\n  unregisterTab: () => undefined,\n  variant: \"main\",\n});\n\nexport function useTabs() {\n  return useContext(TabsContext);\n}\n"],"names":["createContext","useContext"],"mappings":";;;;;;;AAoBa,MAAA,WAAA,GAAcA,mBAAgC,aAAe,EAAA;AAAA,EACxE,WAAa,EAAA,SAAA;AAAA,EACb,QAAU,EAAA,KAAA;AAAA,EACV,UAAU,MAAM,KAAA,CAAA;AAAA,EAChB,UAAU,MAAM,KAAA;AAAA,EAChB,cAAc,MAAM,KAAA,CAAA;AAAA,EACpB,aAAa,MAAM,KAAA;AAAA,EACnB,aAAa,MAAM,KAAA,CAAA;AAAA,EACnB,eAAe,MAAM,KAAA,CAAA;AAAA,EACrB,OAAS,EAAA,MAAA;AACX,CAAC,EAAA;AAEM,SAAS,OAAU,GAAA;AACxB,EAAA,OAAOC,iBAAW,WAAW,CAAA,CAAA;AAC/B;;;;;"}

package/dist-cjs/tabs-next/TabstripNext.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = "/* Component class applied to the root element */\n.saltTabstripNext {\n  display: flex;\n  flex-wrap: nowrap;\n  justify-content: var(--tabstripNext-justifyContent);\n  align-items: center;\n  position: relative;\n  background: transparent;\n  width: 100%;\n\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight);\n  line-height: var(--salt-text-lineHeight);\n}\n\n.saltTabstripNext-main {\n  padding-left: var(--salt-spacing-300);\n  padding-right: var(--salt-spacing-300);\n  box-sizing: border-box;\n}\n\n.saltTabstripNext-main::before {\n  content: \"\";\n  position: absolute;\n  inset: auto 0 0 0;\n  height: var(--salt-size-border);\n  border-bottom: var(--salt-size-border) var(--salt-separable-borderStyle) var(--salt-separable-secondary-borderColor);\n}\n\n.saltTabstripNext .saltTabNext-wrapper:not(:last-child) {\n  padding-right: var(--salt-spacing-100);\n  box-sizing: border-box;\n}\n";
+var css_248z = "/* Component class applied to the root element */\n.saltTabstripNext {\n  display: flex;\n  flex-wrap: nowrap;\n  justify-content: var(--tabstripNext-justifyContent);\n  align-items: center;\n  position: relative;\n  background: transparent;\n  width: 100%;\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight);\n  line-height: var(--salt-text-lineHeight);\n}\n.saltTabstripNext-container {\n  display: inherit;\n  width: 100%;\n  position: relative;\n}\n\n.saltTabstripNext-main {\n  padding-left: var(--salt-spacing-300);\n  padding-right: var(--salt-spacing-300);\n  box-sizing: border-box;\n}\n\n.saltTabstripNext-main::before {\n  content: \"\";\n  position: absolute;\n  inset: auto 0 0 0;\n  height: var(--salt-size-border);\n  border-bottom: var(--salt-size-border) var(--salt-separable-borderStyle) var(--salt-separable-secondary-borderColor);\n}\n\n.saltTabstripNext .saltTabNext-wrapper:not(:last-child) {\n  padding-right: var(--salt-spacing-100);\n  box-sizing: border-box;\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=TabstripNext.css.js.map

package/dist-cjs/tabs-next/TabstripNext.js

@@ -160,27 +160,29 @@ const TabstripNext = React.forwardRef(
     };
     return /* @__PURE__ */ jsxRuntime.jsx(TabNextContext.TabsContext.Provider, {
       value: contextValue,
-      children: /* @__PURE__ */ jsxRuntime.jsx(reactOverflow.Overflow, {
-        ref: handleRef,
-        children: /* @__PURE__ */ jsxRuntime.jsxs("div", {
-          role: "tablist",
-          className: clsx__default["default"](
-            withBaseName(),
-            withBaseName("horizontal"),
-            withBaseName(variant),
-            className
-          ),
-          onKeyDown: handleKeyDown,
-          style: tabstripStyle,
-          ...rest,
-          children: [
-            children,
-            /* @__PURE__ */ jsxRuntime.jsx(OverflowMenu.OverflowMenu, {
-              tabs: tabList,
-              onOpenChange: handleOverflowOpenChange,
-              onSelectionChange: handleOverflowItemClick
-            })
-          ]
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", {
+        className: clsx__default["default"](withBaseName("container"), withBaseName(variant)),
+        children: /* @__PURE__ */ jsxRuntime.jsx(reactOverflow.Overflow, {
+          ref: handleRef,
+          children: /* @__PURE__ */ jsxRuntime.jsxs("div", {
+            role: "tablist",
+            className: clsx__default["default"](
+              withBaseName(),
+              withBaseName("horizontal"),
+              className
+            ),
+            onKeyDown: handleKeyDown,
+            style: tabstripStyle,
+            ...rest,
+            children: [
+              children,
+              /* @__PURE__ */ jsxRuntime.jsx(OverflowMenu.OverflowMenu, {
+                tabs: tabList,
+                onOpenChange: handleOverflowOpenChange,
+                onSelectionChange: handleOverflowItemClick
+              })
+            ]
+          })
         })
       })
     });