@salt-ds/lab 1.0.0-alpha.16 → 1.0.0-alpha.18

package/dist-es/tabs/Tab.css.js

@@ -1,4 +1,4 @@
-var css_248z = "/* Class applied to root Tab element */\n.saltTab {\n  --saltEditableLabel-padding: 0;\n  --saltEditableLabel-height: var(--tabs-tabstrip-height);\n  --saltInputLegacy-minWidth: 4em;\n\n  --tabs-tab-background: var(--salt-navigable-primary-background);\n  --tabs-tab-cursor: pointer;\n  --tabs-tab-spacing: var(--salt-size-unit);\n  --tabs-tab-position: relative;\n}\n\n.saltTab {\n  align-items: center;\n  align-self: stretch;\n  background: var(--saltTabs-tab-background, var(--tabs-tab-background));\n  border: none;\n  border-radius: 0;\n  color: var(--salt-text-primary-foreground);\n  cursor: var(--saltTabs-tab-cursor, var(--tabs-tab-cursor));\n  display: var(--tabs-tabstrip-display);\n  height: var(--saltTabs-tab-height, var(--tabs-tabstrip-height));\n  letter-spacing: var(--saltTabs-tab-letterSpacing, var(--tabs-tab-letterSpacing, 0));\n  min-width: var(--saltTabs-tab-minWidth, 40px);\n  outline: none;\n  position: var(--saltTabs-tab-position, var(--tabs-tab-position));\n  user-select: none;\n}\n\n/* Overrides characteristic used in saltFocusVisible */\n.saltTab.saltFocusVisible:after {\n  inset: 2px 2px 4px 2px;\n}\n\n.saltTab:not(.saltTab-vertical) {\n  margin: 0 var(--tabs-tab-spacing) 0 0;\n}\n\n.saltTab[aria-selected=\"true\"] {\n  color: var(--salt-text-primary-foreground);\n  font-weight: var(--salt-navigable-fontWeight-active);\n}\n\n.saltTab-dragAway {\n  display: none;\n}\n\n/* main content aria of Tab */\n.saltTab-main {\n  background: inherit;\n  border: none;\n  color: inherit;\n  cursor: inherit;\n  font-family: inherit;\n  font-size: inherit;\n  font-weight: inherit;\n  height: var(--saltTabs-tabstrip-height, var(--salt-size-stackable));\n  outline: none;\n  padding: 0 var(--tabs-tab-spacing);\n  position: relative;\n}\n\n.saltTab-closeable .saltTab-main {\n  border-right: solid transparent var(--salt-size-unit);\n}\n\n.saltTab .saltTab-closeButton {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n/* the close Button on a closeable Tab*/\n.saltTab-close-icon {\n  display: none;\n}\n\n.salt-density-touch .saltTab-close-icon,\n.salt-density-low .saltTab-close-icon {\n  display: block;\n}\n\n.salt-density-touch .saltTab-close-icon-small,\n.salt-density-low .saltTab-close-icon-small {\n  display: none;\n}\n\n.saltTab .saltTab-text {\n  display: inline-block;\n  position: relative;\n  overflow: hidden;\n  text-align: var(--salt-text-textAlign-embedded);\n  text-overflow: ellipsis;\n  top: var(--saltTabs-tab-top, var(--tabs-tab-top, auto));\n  white-space: nowrap;\n  /* ensure content sits above focus ring */\n  z-index: var(--salt-zIndex-default);\n}\n\n.saltTab-vertical .saltTab-text {\n  text-align: var(--salt-text-textAlign);\n}\n\n.saltTab .saltTab-text:before {\n  height: 0;\n  content: attr(data-text);\n  display: block;\n  visibility: hidden;\n  font-weight: var(--salt-navigable-fontWeight-active);\n}\n\n/* FIXME: these are all focusVisible styles, but with a bespoke inset */\n.saltTab-editing:after {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 2px;\n  outline-color: var(--salt-focused-outlineColor);\n  outline-style: var(--salt-focused-outlineStyle);\n  outline-width: var(--salt-focused-outlineWidth);\n  outline-offset: -2px;\n}\n\n.saltTab-vertical.saltTab-editing:after {\n  right: 2px;\n  bottom: 0;\n}\n\n.saltTab-vertical .saltFocusVisible:not([aria-selected=\"true\"]):before {\n  left: auto;\n  height: auto;\n  top: 0;\n  width: 2px;\n}\n\n.saltTab.saltFocusVisible {\n  background: var(--saltTabs-tab-hover-background, var(--salt-navigable-primary-background-hover));\n}\n\n.saltTab:before {\n  content: var(--tabs-tab-before-content, none);\n  background: var(--tabs-tab-before-background);\n  height: var(--tabs-tab-before-height);\n  inset: var(--tabs-tab-before-inset);\n  position: absolute;\n  width: var(--tabs-tab-before-width);\n  z-index: 1;\n}\n\n.saltTabstrip-draggingTab .saltTab[aria-selected=\"true\"]:before {\n  --tabs-tab-before-content: \"\";\n  --tabs-tab-before-background: var(--salt-navigable-indicator-color-active);\n  --tabs-tab-before-height: var(--tabs-activationIndicator-thumb-height);\n  --tabs-tab-before-inset: var(--tabs-activationIndicator-inset);\n  --tabs-tab-before-width: var(--tabs-activationIndicator-thumb-width);\n}\n\n/* Hover styling */\n.saltTab:not([aria-selected=\"true\"]).saltFocusVisible:before,\n.saltTab:hover:not([aria-selected=\"true\"]):before {\n  --tabs-tab-before-content: \"\";\n  --tabs-tab-before-background: var(--salt-navigable-indicator-hover);\n  --tabs-tab-before-height: var(--tabs-activationIndicator-thumb-height);\n  --tabs-tab-before-inset: var(--tabs-activationIndicator-inset);\n  --tabs-tab-before-width: var(--tabs-activationIndicator-thumb-width);\n}\n\n.saltTab:hover:not(.saltTab-closeHover) {\n  background: var(--saltTabs-tab-hover-background, var(--salt-navigable-primary-background-hover));\n}\n";
+var css_248z = "/* Class applied to root Tab element */\n.saltTab {\n  --saltEditableLabel-padding: 0;\n  --saltEditableLabel-height: var(--tabs-tabstrip-height);\n  --saltInputLegacy-minWidth: 4em;\n\n  --tabs-tab-background: var(--salt-navigable-primary-background);\n  --tabs-tab-cursor: pointer;\n  --tabs-tab-spacing: var(--salt-size-unit);\n  --tabs-tab-position: relative;\n}\n\n.saltTab {\n  align-items: center;\n  align-self: stretch;\n  background: var(--saltTabs-tab-background, var(--tabs-tab-background));\n  border: none;\n  border-radius: 0;\n  color: var(--salt-text-primary-foreground);\n  cursor: var(--saltTabs-tab-cursor, var(--tabs-tab-cursor));\n  display: var(--tabs-tabstrip-display);\n  height: var(--saltTabs-tab-height, var(--tabs-tabstrip-height));\n  letter-spacing: var(--saltTabs-tab-letterSpacing, var(--tabs-tab-letterSpacing, 0));\n  min-width: var(--saltTabs-tab-minWidth, 40px);\n  outline: none;\n  position: var(--saltTabs-tab-position, var(--tabs-tab-position));\n  user-select: none;\n}\n\n/* Overrides characteristic used in saltFocusVisible */\n.saltTab.saltFocusVisible:after {\n  inset: 2px 2px 4px 2px;\n}\n\n.saltTab:not(.saltTab-vertical) {\n  margin: 0 var(--tabs-tab-spacing) 0 0;\n}\n\n.saltTab[aria-selected=\"true\"] {\n  color: var(--salt-text-primary-foreground);\n  font-weight: var(--salt-navigable-fontWeight-active);\n}\n\n.saltTab-dragAway {\n  display: none;\n}\n\n/* main content aria of Tab */\n.saltTab-main {\n  background: inherit;\n  border: none;\n  color: inherit;\n  cursor: inherit;\n  font-family: inherit;\n  font-size: inherit;\n  font-weight: inherit;\n  height: var(--saltTabs-tabstrip-height, var(--salt-size-stackable));\n  outline: none;\n  padding: 0 var(--tabs-tab-spacing);\n  position: relative;\n}\n\n.saltTab-closeable .saltTab-main {\n  border-right: solid transparent var(--salt-size-unit);\n}\n\n.saltTab .saltTab-closeButton {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n/* the close Button on a closeable Tab*/\n.saltTab-close-icon {\n  display: block;\n}\n\n.saltTab .saltTab-text {\n  display: inline-block;\n  position: relative;\n  overflow: hidden;\n  text-align: var(--salt-text-textAlign-embedded);\n  text-overflow: ellipsis;\n  top: var(--saltTabs-tab-top, var(--tabs-tab-top, auto));\n  white-space: nowrap;\n  /* ensure content sits above focus ring */\n  z-index: var(--salt-zIndex-default);\n}\n\n.saltTab-vertical .saltTab-text {\n  text-align: var(--salt-text-textAlign);\n}\n\n.saltTab .saltTab-text:before {\n  height: 0;\n  content: attr(data-text);\n  display: block;\n  visibility: hidden;\n  font-weight: var(--salt-navigable-fontWeight-active);\n}\n\n/* FIXME: these are all focusVisible styles, but with a bespoke inset */\n.saltTab-editing:after {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 2px;\n  outline-color: var(--salt-focused-outlineColor);\n  outline-style: var(--salt-focused-outlineStyle);\n  outline-width: var(--salt-focused-outlineWidth);\n  outline-offset: -2px;\n}\n\n.saltTab-vertical.saltTab-editing:after {\n  right: 2px;\n  bottom: 0;\n}\n\n.saltTab-vertical .saltFocusVisible:not([aria-selected=\"true\"]):before {\n  left: auto;\n  height: auto;\n  top: 0;\n  width: 2px;\n}\n\n.saltTab.saltFocusVisible {\n  background: var(--saltTabs-tab-hover-background, var(--salt-navigable-primary-background-hover));\n}\n\n.saltTab:before {\n  content: var(--tabs-tab-before-content, none);\n  background: var(--tabs-tab-before-background);\n  height: var(--tabs-tab-before-height);\n  inset: var(--tabs-tab-before-inset);\n  position: absolute;\n  width: var(--tabs-tab-before-width);\n  z-index: 1;\n}\n\n.saltTabstrip-draggingTab .saltTab[aria-selected=\"true\"]:before {\n  --tabs-tab-before-content: \"\";\n  --tabs-tab-before-background: var(--salt-navigable-indicator-color-active);\n  --tabs-tab-before-height: var(--tabs-activationIndicator-thumb-height);\n  --tabs-tab-before-inset: var(--tabs-activationIndicator-inset);\n  --tabs-tab-before-width: var(--tabs-activationIndicator-thumb-width);\n}\n\n/* Hover styling */\n.saltTab:not([aria-selected=\"true\"]).saltFocusVisible:before,\n.saltTab:hover:not([aria-selected=\"true\"]):before {\n  --tabs-tab-before-content: \"\";\n  --tabs-tab-before-background: var(--salt-navigable-indicator-hover);\n  --tabs-tab-before-height: var(--tabs-activationIndicator-thumb-height);\n  --tabs-tab-before-inset: var(--tabs-activationIndicator-inset);\n  --tabs-tab-before-width: var(--tabs-activationIndicator-thumb-width);\n}\n\n.saltTab:hover:not(.saltTab-closeHover) {\n  background: var(--saltTabs-tab-hover-background, var(--salt-navigable-primary-background-hover));\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=Tab.css.js.map

package/dist-es/tabs/Tab.js

@@ -1,32 +1,26 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { makePrefixer, useForkRef, Button } from '@salt-ds/core';
-import { CloseIcon, CloseSmallIcon } from '@salt-ds/icons';
+import { CloseIcon } from '@salt-ds/icons';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
 import { clsx } from 'clsx';
 import { forwardRef, useRef, useState, useCallback } from 'react';
 import { EditableLabel } from '../editable-label/EditableLabel.js';
-import { useWindow } from '@salt-ds/window';
-import { useComponentCssInjection } from '@salt-ds/styles';
 import css_248z from './Tab.css.js';
 
 const noop = () => void 0;
 const withBaseName = makePrefixer("saltTab");
-const CloseTabButton = (props) => /* @__PURE__ */ jsxs(Button, {
+const CloseTabButton = (props) => /* @__PURE__ */ jsx(Button, {
   ...props,
   "aria-label": "Close Tab (Delete or Backspace)",
   className: withBaseName("closeButton"),
   tabIndex: void 0,
   title: "Close Tab (Delete or Backspace)",
   variant: "secondary",
-  children: [
-    /* @__PURE__ */ jsx(CloseIcon, {
-      "aria-label": "Close Tab (Delete or Backspace)",
-      className: withBaseName("close-icon")
-    }),
-    /* @__PURE__ */ jsx(CloseSmallIcon, {
-      "aria-label": "Close Tab (Delete or Backspace)",
-      className: withBaseName("close-icon-small")
-    })
-  ]
+  children: /* @__PURE__ */ jsx(CloseIcon, {
+    "aria-label": "Close Tab (Delete or Backspace)",
+    className: withBaseName("close-icon")
+  })
 });
 const Tab = forwardRef(function Tab2({
   ariaControls,

package/dist-es/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, CloseSmallIcon } from \"@salt-ds/icons\";\nimport { clsx } from \"clsx\";\nimport {\n  FocusEvent,\n  ForwardedRef,\n  forwardRef,\n  KeyboardEvent,\n  MouseEvent,\n  ReactElement,\n  useCallback,\n  useRef,\n  useState,\n} from \"react\";\nimport { TabProps } from \"./TabsTypes\";\nimport { EditableLabel, EditableLabelProps } from \"../editable-label\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport tabCss from \"./Tab.css\";\n\nconst noop = () => undefined;\n\nconst withBaseName = makePrefixer(\"saltTab\");\n\n//TODO not ideal - duplicating the Icon then hiding one in css based on density - is there a nicer way ?\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    <CloseSmallIcon\n      aria-label=\"Close Tab (Delete or Backspace)\"\n      className={withBaseName(\"close-icon-small\")}\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":["Tab","tabCss","editable"],"mappings":";;;;;;;;;;AAuBA,MAAM,OAAO,MAAM,KAAA,CAAA,CAAA;AAEnB,MAAM,YAAA,GAAe,aAAa,SAAS,CAAA,CAAA;AAG3C,MAAM,cAAA,GAAiB,CAAC,KAAA,qBAErB,IAAA,CAAA,MAAA,EAAA;AAAA,EACE,GAAG,KAAA;AAAA,EACJ,YAAW,EAAA,iCAAA;AAAA,EACX,SAAA,EAAW,aAAa,aAAa,CAAA;AAAA,EACrC,QAAU,EAAA,KAAA,CAAA;AAAA,EACV,KAAM,EAAA,iCAAA;AAAA,EACN,OAAQ,EAAA,WAAA;AAAA,EAER,QAAA,EAAA;AAAA,oBAAC,GAAA,CAAA,SAAA,EAAA;AAAA,MACC,YAAW,EAAA,iCAAA;AAAA,MACX,SAAA,EAAW,aAAa,YAAY,CAAA;AAAA,KACtC,CAAA;AAAA,oBACC,GAAA,CAAA,cAAA,EAAA;AAAA,MACC,YAAW,EAAA,iCAAA;AAAA,MACX,SAAA,EAAW,aAAa,kBAAkB,CAAA;AAAA,KAC5C,CAAA;AAAA,GAAA;AAAA,CACF,CAAA,CAAA;AAGW,MAAA,GAAA,GAAM,UAAW,CAAA,SAASA,IACrC,CAAA;AAAA,EACE,YAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA;AAAA,EACA,OAAA;AAAA,EACA,YAAA;AAAA,EACA,KAAA;AAAA,EACA,KAAA;AAAA,EACA,OAAA;AAAA,EACA,OAAA;AAAA,EACA,eAAkB,GAAA,IAAA;AAAA,EAClB,cAAiB,GAAA,IAAA;AAAA,EACjB,OAAS,EAAA,WAAA;AAAA,EACT,SAAA;AAAA,EACA,OAAA;AAAA,EACA,WAAA;AAAA,EACA,WAAA;AAAA,EACA,QAAA;AAAA,EACA,aAAgB,GAAA,CAAA;AAAA,EAChB,QAAA;AAAA,EACG,GAAA,KAAA;AACL,CAAA,EACA,GACwB,EAAA;AACxB,EAAA,IAAI,KAAU,KAAA,KAAA,CAAA,IAAa,OAAY,KAAA,KAAA,CAAA,IAAa,cAAc,KAAW,CAAA,EAAA;AAC3E,IAAM,MAAA,KAAA;AAAA,MACJ,kJAAA;AAAA,KACF,CAAA;AAAA,GACF;AACA,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,UAAA;AAAA,IACR,GAAK,EAAAC,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAM,MAAA,IAAA,GAAO,OAAuB,IAAI,CAAA,CAAA;AACxC,EAAM,MAAA,WAAA,GAAc,OAAuB,IAAI,CAAA,CAAA;AAC/C,EAAM,MAAA,UAAA,GAAa,UAAW,CAAA,GAAA,EAAK,IAAI,CAAA,CAAA;AACvC,EAAA,MAAM,CAAC,UAAA,EAAY,aAAa,CAAA,GAAI,SAAS,KAAK,CAAA,CAAA;AAClD,EAAA,MAAM,WAAc,GAAA,WAAA;AAAA,IAClB,CAAC,CAAkB,KAAA;AACjB,MAAA,IAAI,CAAC,OAAS,EAAA;AACZ,QAAA,CAAA,CAAE,cAAe,EAAA,CAAA;AACjB,QAAA,OAAA,CAAQ,GAAG,KAAK,CAAA,CAAA;AAAA,OAClB;AAAA,KACF;AAAA,IACA,CAAC,OAAS,EAAA,KAAA,EAAO,OAAO,CAAA;AAAA,GAC1B,CAAA;AACA,EAAM,MAAA,iBAAA,GAAoB,CAAC,CAAkC,KAAA;AAC3D,IAAA,SAAA,CAAU,CAAC,CAAA,CAAA;AAAA,GACb,CAAA;AAEA,EAAA,MAAM,oBAA6D,GAAA,CACjE,aAAgB,GAAA,EAAA,EAChB,WAAc,GAAA,EAAA,EACd,iBAAoB,GAAA,IAAA,KACjB,cAAe,CAAA,aAAA,EAAe,WAAa,EAAA,iBAAA,EAAmB,KAAK,CAAA,CAAA;AAExE,EAAM,MAAA,WAAA,GAAc,CAAC,CAAqB,KAAA;AACxC,IAAA,QAAQ,CAAE,CAAA,GAAA;AAAA,MACH,KAAA,WAAA,CAAA;AAAA,MACA,KAAA,QAAA;AACH,QAAA,IAAI,SAAW,EAAA;AACb,UAAA,CAAA,CAAE,eAAgB,EAAA,CAAA;AAClB,UAAA,OAAA,IAAW,QAAQ,KAAK,CAAA,CAAA;AAAA,SAC1B;AACA,QAAA,MAAA;AAAA,MAAA;AAEA,QAAW,OAAA,IAAA,OAAA,CAAQ,GAAG,KAAK,CAAA,CAAA;AAAA,KAAA;AAAA,GAEjC,CAAA;AAEA,EAAM,MAAA,sBAAA,GAAyB,CAAC,CAAqC,KAAA;AACnE,IAAA,CAAA,CAAE,eAAgB,EAAA,CAAA;AAClB,IAAA,OAAA,IAAW,QAAQ,KAAK,CAAA,CAAA;AAAA,GAC1B,CAAA;AAEA,EAAA,MAAM,yBAAyB,MAAM;AACnC,IAAA,aAAA,CAAc,IAAI,CAAA,CAAA;AAAA,GACpB,CAAA;AAEA,EAAA,MAAM,yBAAyB,MAAM;AACnC,IAAA,aAAA,CAAc,KAAK,CAAA,CAAA;AAAA,GACrB,CAAA;AAEA,EAAM,MAAA,eAAA,GAAkB,CAAC,CAAqC,KAAA;AAC5D,IAAc,WAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,WAAA,CAAA,CAAA,CAAA,CAAA;AAAA,GAChB,CAAA;AAEA,EAAA,MAAM,WAAW,MAAM;AACrB,IAAA,IAAI,QAAU,EAAA;AACZ,MAAA,uBACG,GAAA,CAAA,aAAA,EAAA;AAAA,QACC,OAAA;AAAA,QACA,YAAc,EAAA,KAAA;AAAA,QAGd,eAAA;AAAA,QACA,cAAgB,EAAA,oBAAA;AAAA,QAChB,GAAK,EAAA,WAAA;AAAA,OAAA,EAHA,KAIP,CAAA,CAAA;AAAA,KAEG,MAAA;AACL,MAAO,OAAA,KAAA,CAAA;AAAA,KACT;AAAA,GACF,CAAA;AAEA,EAAM,MAAA,WAAA,GAAc,CAAC,GAAiC,KAAA;AACpD,IAAA,IAAI,YAAY,OAAS,EAAA;AACvB,MAAA,MAAMC,YAAW,WAAY,CAAA,OAAA,CAAA;AAC7B,MAAA,MAAM,QAAQA,SAAS,CAAA,aAAA;AAAA,QACrB,0BAAA;AAAA,OACF,CAAA;AACA,MAAO,KAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,KAAA,CAAA,KAAA,EAAA,CAAA;AAAA,KACT;AACA,IAAc,WAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,WAAA,CAAA,GAAA,CAAA,CAAA;AAAA,GAChB,CAAA;AAEA,EAAA,uBACG,IAAA,CAAA,KAAA,EAAA;AAAA,IACE,GAAG,KAAA;AAAA,IACJ,eAAe,EAAA,YAAA;AAAA,IACf,eAAe,EAAA,QAAA;AAAA,IACf,SAAA,EAAW,IAAK,CAAA,YAAA,EAAgB,EAAA;AAAA,MAC9B,CAAC,YAAa,CAAA,WAAW,CAAI,GAAA,SAAA;AAAA,MAC7B,CAAC,YAAa,CAAA,YAAY,CAAI,GAAA,UAAA;AAAA,MAC9B,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,QAAA;AAAA,MAC5B,CAAC,YAAa,CAAA,SAAS,CAAI,GAAA,OAAA;AAAA,MAC3B,CAAC,YAAA,CAAa,UAAU,CAAA,GAAI,WAAgB,KAAA,UAAA;AAAA,MAC5C,CAAC,CAAqB,gBAAA,CAAA,GAAA,YAAA;AAAA,KACvB,CAAA;AAAA,IACD,iBAAe,QAAY,IAAA,KAAA,CAAA;AAAA,IAC3B,OAAS,EAAA,WAAA;AAAA,IACT,OAAS,EAAA,WAAA;AAAA,IACT,SAAW,EAAA,iBAAA;AAAA,IACX,OAAS,EAAA,WAAA;AAAA,IACT,WAAa,EAAA,eAAA;AAAA,IACb,GAAK,EAAA,UAAA;AAAA,IACL,IAAK,EAAA,KAAA;AAAA,IACL,QAAA;AAAA,IAEA,QAAA,EAAA;AAAA,sBAAC,GAAA,CAAA,KAAA,EAAA;AAAA,QAAI,SAAA,EAAW,aAAa,MAAM,CAAA;AAAA,QACjC,QAAC,kBAAA,GAAA,CAAA,MAAA,EAAA;AAAA,UACC,SAAA,EAAW,aAAa,MAAM,CAAA;AAAA,UAO9B,WAAA,EAAW,WAAW,KAAY,CAAA,GAAA,KAAA;AAAA,UAEjC,wCAAY,QAAS,EAAA;AAAA,SACxB,CAAA;AAAA,OACF,CAAA;AAAA,MACC,4BACE,GAAA,CAAA,cAAA,EAAA;AAAA,QACC,OAAS,EAAA,sBAAA;AAAA,QACT,YAAc,EAAA,sBAAA;AAAA,QACd,YAAc,EAAA,sBAAA;AAAA,OAChB,CACE,GAAA,IAAA;AAAA,KAAA;AAAA,GACN,CAAA,CAAA;AAEJ,CAAC;;;;"}
+{"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":["Tab","tabCss","editable"],"mappings":"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"}

package/dist-es/tabs/useActivationIndicator.js.map

@@ -1 +1 @@
-{"version":3,"file":"useActivationIndicator.js","sources":["../src/tabs/useActivationIndicator.ts"],"sourcesContent":["import { RefObject, useCallback, useEffect, useRef, useState } from \"react\";\nimport { orientationType } from \"../responsive\";\nimport { useResizeObserver, WidthOnly } from \"../responsive\";\n\ntype activationIndicatorStyles = {\n  height?: number;\n  left?: number;\n  top?: number;\n  width?: number;\n  hasChanged?: boolean;\n};\n\nconst MEASUREMENTS = {\n  horizontal: {\n    pos: \"left\" as keyof activationIndicatorStyles,\n    size: \"width\" as keyof activationIndicatorStyles,\n  },\n  vertical: {\n    pos: \"top\" as keyof activationIndicatorStyles,\n    size: \"height\" as keyof activationIndicatorStyles,\n  },\n};\n\n// Overflow can affect tab positions, so we recalculate when it changes\nexport function useActivationIndicator({\n  rootRef,\n  tabId,\n  orientation,\n}: {\n  rootRef: RefObject<HTMLDivElement | null>;\n  tabId?: string | null;\n  orientation: orientationType;\n}): activationIndicatorStyles {\n  const [style, setStyle] = useState<activationIndicatorStyles>({\n    left: 0,\n    width: 0,\n  });\n  // Keep style in a ref, so style is not a dependency for createIndicatorStyle, which in turn\n  // means our useEffect below will re-run only when the tab changes, not after every style change\n  // as well.\n\n  const styleRef = useRef(style);\n\n  const getTabPos = useCallback(() => {\n    const { pos, size } = MEASUREMENTS[orientation];\n    return [pos, size];\n  }, [orientation]);\n\n  const createIndicatorStyle = useCallback(\n    (tabElement: HTMLElement | null): activationIndicatorStyles => {\n      if (tabElement) {\n        const tabRect = tabElement.getBoundingClientRect() as any;\n        if (rootRef.current && tabRect) {\n          const rootRect = rootRef.current.getBoundingClientRect() as any;\n          const [pos, size] = getTabPos();\n          const { [pos]: existingPos, [size]: existingSize } = styleRef.current;\n          const newPos = tabRect[pos] - rootRect[pos];\n          const newSize = tabRect[size];\n\n          return {\n            [pos]: newPos,\n            [size]: newSize,\n            hasChanged: newPos !== existingPos || newSize !== existingSize,\n          };\n        }\n      }\n      return {};\n    },\n    [orientation, rootRef]\n  );\n\n  const onResize = useCallback(() => {\n    requestAnimationFrame(() => {\n      if (tabId) {\n        const tabEl = document.getElementById(tabId);\n        const { hasChanged, ...newStyle } = createIndicatorStyle(tabEl);\n        if (hasChanged) {\n          setStyle(newStyle);\n        }\n      }\n    });\n  }, [createIndicatorStyle, tabId]);\n\n  useEffect(() => {\n    if (tabId) {\n      // The timeout is employed in case selectedTab has been selected from\n      // overflow menu. In this case, the tab is only restored to visibility\n      // in the render cycle after selection.\n      setTimeout(() => {\n        const tabEl = document.getElementById(tabId);\n        const { hasChanged, ...newStyle } = createIndicatorStyle(tabEl);\n        if (hasChanged) {\n          setStyle((styleRef.current = newStyle));\n        }\n      }, 50);\n    }\n  }, [createIndicatorStyle, tabId]);\n\n  useResizeObserver(rootRef, WidthOnly, onResize);\n\n  return style;\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"useActivationIndicator.js","sources":["../src/tabs/useActivationIndicator.ts"],"sourcesContent":["import { RefObject, useCallback, useEffect, useRef, useState } from \"react\";\nimport { orientationType, useResizeObserver, WidthOnly } from \"../responsive\";\n\ntype activationIndicatorStyles = {\n  height?: number;\n  left?: number;\n  top?: number;\n  width?: number;\n  hasChanged?: boolean;\n};\n\nconst MEASUREMENTS = {\n  horizontal: {\n    pos: \"left\" as keyof activationIndicatorStyles,\n    size: \"width\" as keyof activationIndicatorStyles,\n  },\n  vertical: {\n    pos: \"top\" as keyof activationIndicatorStyles,\n    size: \"height\" as keyof activationIndicatorStyles,\n  },\n};\n\n// Overflow can affect tab positions, so we recalculate when it changes\nexport function useActivationIndicator({\n  rootRef,\n  tabId,\n  orientation,\n}: {\n  rootRef: RefObject<HTMLDivElement | null>;\n  tabId?: string | null;\n  orientation: orientationType;\n}): activationIndicatorStyles {\n  const [style, setStyle] = useState<activationIndicatorStyles>({\n    left: 0,\n    width: 0,\n  });\n  // Keep style in a ref, so style is not a dependency for createIndicatorStyle, which in turn\n  // means our useEffect below will re-run only when the tab changes, not after every style change\n  // as well.\n\n  const styleRef = useRef(style);\n\n  const getTabPos = useCallback(() => {\n    const { pos, size } = MEASUREMENTS[orientation];\n    return [pos, size];\n  }, [orientation]);\n\n  const createIndicatorStyle = useCallback(\n    (tabElement: HTMLElement | null): activationIndicatorStyles => {\n      if (tabElement) {\n        const tabRect = tabElement.getBoundingClientRect() as any;\n        if (rootRef.current && tabRect) {\n          const rootRect = rootRef.current.getBoundingClientRect() as any;\n          const [pos, size] = getTabPos();\n          const { [pos]: existingPos, [size]: existingSize } = styleRef.current;\n          const newPos = tabRect[pos] - rootRect[pos];\n          const newSize = tabRect[size];\n\n          return {\n            [pos]: newPos,\n            [size]: newSize,\n            hasChanged: newPos !== existingPos || newSize !== existingSize,\n          };\n        }\n      }\n      return {};\n    },\n    [orientation, rootRef]\n  );\n\n  const onResize = useCallback(() => {\n    requestAnimationFrame(() => {\n      if (tabId) {\n        const tabEl = document.getElementById(tabId);\n        const { hasChanged, ...newStyle } = createIndicatorStyle(tabEl);\n        if (hasChanged) {\n          setStyle(newStyle);\n        }\n      }\n    });\n  }, [createIndicatorStyle, tabId]);\n\n  useEffect(() => {\n    if (tabId) {\n      // The timeout is employed in case selectedTab has been selected from\n      // overflow menu. In this case, the tab is only restored to visibility\n      // in the render cycle after selection.\n      setTimeout(() => {\n        const tabEl = document.getElementById(tabId);\n        const { hasChanged, ...newStyle } = createIndicatorStyle(tabEl);\n        if (hasChanged) {\n          setStyle((styleRef.current = newStyle));\n        }\n      }, 50);\n    }\n  }, [createIndicatorStyle, tabId]);\n\n  useResizeObserver(rootRef, WidthOnly, onResize);\n\n  return style;\n}\n"],"names":[],"mappings":"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"}

package/dist-es/tabs-next/TabNext.css.js

@@ -1,4 +1,4 @@
-var css_248z = "/* Class applied to root Tab element */\n.saltTabNext {\n  align-items: center;\n  justify-content: center;\n  appearance: none;\n  display: inline-flex;\n  background: var(--salt-navigable-primary-background);\n  border: 0 solid transparent;\n  border-radius: 0;\n  white-space: pre;\n  min-width: 4em;\n  min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n  padding-inline: var(--salt-spacing-100);\n  padding-block: var(--salt-spacing-50);\n  position: relative;\n  flex-shrink: 0;\n\n  color: var(--salt-text-secondary-foreground);\n  font-weight: var(--salt-navigable-fontWeight);\n  font-family: var(--salt-text-fontFamily);\n  text-align: var(--salt-text-textAlign);\n  letter-spacing: var(--salt-text-letterSpacing);\n  line-height: var(--salt-text-lineHeight);\n  font-size: var(--salt-text-fontSize);\n}\n\n.saltTabNext:hover {\n  cursor: var(--salt-navigable-cursor-hover);\n  background: var(--salt-navigable-primary-background-hover);\n  color: var(--salt-text-primary-foreground);\n}\n\n.saltTabNext:hover::before,\n.saltTabNext:focus-visible::before {\n  content: \"\";\n  position: absolute;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  height: var(--salt-size-bar);\n  background: var(--salt-navigable-indicator-hover);\n}\n\n.saltTabNext:focus-visible {\n  outline: var(--salt-focused-outline);\n  background: var(--salt-navigable-primary-background-hover);\n  color: var(--salt-text-primary-foreground);\n}\n\n.saltTabNext[aria-selected=\"true\"] {\n  color: var(--salt-text-primary-foreground);\n}\n\n.saltTabNext[aria-selected=\"true\"]::after {\n  content: \"\";\n  position: absolute;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  height: var(--salt-size-bar);\n  background: var(--salt-navigable-indicator-active);\n}\n\n.saltTabNext:disabled {\n  cursor: var(--salt-navigable-cursor-disabled);\n  color: var(--salt-text-primary-foreground-disabled);\n  background: var(--salt-navigable-primary-background);\n}\n\n.saltTabNext:disabled:before {\n  background: transparent;\n}\n";
+var css_248z = "/* Class applied to root Tab element */\n.saltTabNext {\n  align-items: center;\n  justify-content: center;\n  appearance: none;\n  -webkit-appearance: none;\n  display: inline-flex;\n  background: var(--salt-navigable-primary-background);\n  border: 0 solid transparent;\n  border-radius: 0;\n  white-space: pre;\n  min-width: 4em;\n  min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n  padding: var(--salt-spacing-50) var(--salt-spacing-100);\n  position: relative;\n  flex-shrink: 0;\n\n  color: var(--salt-text-secondary-foreground);\n  font-weight: var(--salt-navigable-fontWeight);\n  font-family: var(--salt-text-fontFamily);\n  text-align: var(--salt-text-textAlign);\n  letter-spacing: var(--salt-text-letterSpacing);\n  line-height: var(--salt-text-lineHeight);\n  font-size: var(--salt-text-fontSize);\n}\n\n.saltTabNext:hover {\n  cursor: var(--salt-navigable-cursor-hover);\n  background: var(--salt-navigable-primary-background-hover);\n  color: var(--salt-text-primary-foreground);\n}\n\n.saltTabNext:hover::before,\n.saltTabNext:focus-visible::before {\n  content: \"\";\n  position: absolute;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  height: var(--salt-size-bar);\n  background: var(--salt-navigable-indicator-hover);\n}\n\n.saltTabNext:focus-visible {\n  outline: var(--salt-focused-outline);\n  background: var(--salt-navigable-primary-background-hover);\n  color: var(--salt-text-primary-foreground);\n}\n\n.saltTabNext[aria-selected=\"true\"] {\n  color: var(--salt-text-primary-foreground);\n}\n\n.saltTabNext[aria-selected=\"true\"]::after {\n  content: \"\";\n  position: absolute;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  height: var(--salt-size-bar);\n  background: var(--salt-navigable-indicator-active);\n}\n\n.saltTabNext:disabled {\n  cursor: var(--salt-navigable-cursor-disabled);\n  color: var(--salt-text-primary-foreground-disabled);\n  background: var(--salt-navigable-primary-background);\n}\n\n.saltTabNext:disabled:before {\n  background: transparent;\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=TabNext.css.js.map

package/dist-es/tokenized-input/TokenizedInput.css.js

@@ -1,4 +1,4 @@
-var css_248z = "/* Styles applied to root component (TokenizedInput) */\n.salt-density-medium {\n  --tokenizedInput-gutter-size: var(--salt-size-basis-unit);\n  --tokenizedInput-pill-group-y-padding: calc(var(--salt-size-unit) / 2);\n  --tokenizedInput-last-pill-margin: var(--salt-size-unit);\n}\n.salt-density-touch {\n  --tokenizedInput-gutter-size: var(--salt-size-basis-unit);\n  --tokenizedInput-pill-group-y-padding: calc(var(--salt-size-unit) / 2 + 2px);\n  --tokenizedInput-last-pill-margin: calc(var(--salt-size-unit) / 2);\n}\n\n.salt-density-low {\n  --tokenizedInput-gutter-size: var(--salt-size-basis-unit);\n  --tokenizedInput-pill-group-y-padding: calc(var(--salt-size-unit) / 2 + 1px);\n  --tokenizedInput-last-pill-margin: calc(var(--salt-size-unit) / 2);\n}\n\n.salt-density-high {\n  --tokenizedInput-gutter-size: calc(var(--salt-size-basis-unit) - 1px);\n  --tokenizedInput-pill-group-y-padding: calc(var(--salt-size-unit) / 2 + 1px);\n  --tokenizedInput-last-pill-margin: var(--salt-size-unit);\n}\n\n.saltTokenizedInput {\n  --tokenizedInput-spacing: var(--salt-size-unit);\n  --tokenizedInput-height: var(--salt-size-base);\n}\n\n.saltTokenizedInput {\n  display: inline-flex;\n  justify-content: space-between;\n  min-width: 8em; /* same min-width as Input component */\n  width: 100%;\n}\n\n/* Styles applied to root component on hover state  */\n.saltTokenizedInput:hover {\n  cursor: var(--salt-selectable-cursor-hover);\n}\n\n/* Styles applied to root component on hover state if `disabled={true}` */\n.saltTokenizedInput.saltTokenizedInput-disabled:hover {\n  cursor: var(--salt-selectable-cursor-disabled);\n}\n\n/* Styles applied to container of pills */\n.saltTokenizedInput-pillGroup {\n  align-content: flex-start;\n  display: flex;\n  flex: 1;\n  flex-wrap: wrap;\n  min-height: var(--tokenizedInput-height);\n  padding: var(--tokenizedInput-pill-group-y-padding) var(--tokenizedInput-spacing);\n}\n\n/* Styles applied to root component if `disabled={true}` */\n.saltTokenizedInput-disabled {\n  cursor: var(--salt-editable-cursor-disabled);\n  opacity: var(--saltTokenizedInput-disabled-opacity, var(--salt-palette-opacity-disabled));\n}\n\n/* Styles applied to root component if `focused={true}` */\n.saltTokenizedInput-focused {\n  outline: var(--saltTokenizedInput-focused-outline, var(--salt-focused-outline));\n}\n\n/* Styles applied to root component if `expanded={true}` */\n.saltTokenizedInput-expanded {\n  height: auto;\n\n  /* Pill CSS API */\n  --saltPill-maxWidth: calc(100px - var(--salt-size-unit));\n}\n\n/* Styles applied to Input and Clear Button if `expanded={false}` */\n.saltTokenizedInput-hidden,\n.saltTokenizedInput-input.saltTokenizedInput-hidden,\n.saltButton.saltTokenizedInput-hidden {\n  display: none;\n}\n\n/**\n  Styles applied to inner Input component\n  Used to be .inputRoot\n**/\n.saltInputLegacy.saltTokenizedInput-input {\n  align-items: flex-start;\n  cursor: text;\n  flex-grow: 1;\n  padding: 0;\n  outline: none;\n  width: auto;\n  height: auto;\n  min-width: 0;\n  min-height: 0;\n}\n\n/* Styles applied to Clear Button  */\n.saltTokenizedInput-clearButton {\n  flex: none;\n  align-self: flex-end;\n}\n\n/* Styles applied to Expand Button  */\n.saltTokenizedInput-expandButton {\n  padding: 0 calc(var(--tokenizedInput-spacing) / 4);\n}\n\n/* Styles applied to root component and pill container if `expanded={true}` */\n.saltTokenizedInput-expanded,\n.saltTokenizedInput-expanded .saltTokenizedInput-pillGroup {\n  height: auto;\n}\n\n/* TODO: Adjust specificity of .InputPill depending on styling solution.\n  This is an example of internal sub-component naming convension. */\n.saltTokenizedInput .saltInputPill,\n.saltTokenizedInput-expandButton,\n.saltInputLegacy.saltTokenizedInput-input,\n.saltTokenizedInput-inputField.saltTokenizedInput-inputMultiline .saltTokenizedInput-input {\n  margin: calc(var(--tokenizedInput-gutter-size) / 2) 0;\n  height: calc(var(--tokenizedInput-height) - var(--tokenizedInput-spacing) * 1.5);\n}\n\n/* Styles applied to inner Pills */\n.saltTokenizedInput .saltInputPill {\n  min-width: 0;\n  margin-right: var(--tokenizedInput-gutter-size);\n  --saltPill-maxWidth: 100px;\n}\n\n.saltTokenizedInput .saltInputPill > * {\n  min-width: 0;\n}\n\n/* Styles applied to a Pill if `expanded={false} && index >= firstHiddenIndex` */\n.saltTokenizedInput .saltInputPill.saltInputPill-hidden {\n  display: none;\n}\n\n/* Styles applied to the last visible Pill when all visible */\n.saltTokenizedInput .saltInputPill-pillLastVisible {\n  margin-right: var(--saltTokenizedInput-pill-last-visible-marginRight, var(--tokenizedInput-last-pill-margin));\n}\n\n/* Styles applied to a Pill when active */\n.saltTokenizedInput .saltInputPill-pillActive {\n  background: var(--saltTokenizedInput-pill-background-active, var(--salt-selectable-background-hover));\n}\n\n/* Styles applied to a Pills delete icon */\n.saltTokenizedInput .saltInputPill-pillActive .saltPill-deleteIcon {\n  color: var(--saltTokenizedInput-pill-delete-icon-color, var(--salt-actionable-cta-foreground-hover));\n}\n\n/* Styles applied to a Pills delete button */\n.saltTokenizedInput .saltInputPill-pillActive .saltPill-deleteButton {\n  color: var(--saltTokenizedInput-pill-delete-button-color-active, var(--salt-actionable-cta-foreground-hover));\n  background: var(--saltTokenizedInput-pill-delete-button-background-active, var(--salt-actionable-cta-background-hover));\n}\n";
+var css_248z = "/* Styles applied to root component (TokenizedInput) */\n.salt-density-medium {\n  --tokenizedInput-gutter-size: var(--salt-size-basis-unit);\n  --tokenizedInput-pill-group-y-padding: calc(var(--salt-size-unit) / 2);\n  --tokenizedInput-last-pill-margin: var(--salt-size-unit);\n}\n.salt-density-touch {\n  --tokenizedInput-gutter-size: var(--salt-size-basis-unit);\n  --tokenizedInput-pill-group-y-padding: calc(var(--salt-size-unit) / 2 + 2px);\n  --tokenizedInput-last-pill-margin: calc(var(--salt-size-unit) / 2);\n}\n\n.salt-density-low {\n  --tokenizedInput-gutter-size: var(--salt-size-basis-unit);\n  --tokenizedInput-pill-group-y-padding: calc(var(--salt-size-unit) / 2 + 1px);\n  --tokenizedInput-last-pill-margin: calc(var(--salt-size-unit) / 2);\n}\n\n.salt-density-high {\n  --tokenizedInput-gutter-size: calc(var(--salt-size-basis-unit) - 1px);\n  --tokenizedInput-pill-group-y-padding: calc(var(--salt-size-unit) / 2 + 1px);\n  --tokenizedInput-last-pill-margin: var(--salt-size-unit);\n}\n\n.saltTokenizedInput {\n  --tokenizedInput-spacing: var(--salt-size-unit);\n  --tokenizedInput-height: var(--salt-size-base);\n}\n\n.saltTokenizedInput {\n  display: inline-flex;\n  justify-content: space-between;\n  min-width: 8em; /* same min-width as Input component */\n  width: 100%;\n}\n\n/* Styles applied to root component on hover state  */\n.saltTokenizedInput:hover {\n  cursor: var(--salt-selectable-cursor-hover);\n}\n\n/* Styles applied to root component on hover state if `disabled={true}` */\n.saltTokenizedInput.saltTokenizedInput-disabled:hover {\n  cursor: var(--salt-selectable-cursor-disabled);\n}\n\n/* Styles applied to container of pills */\n.saltTokenizedInput-pillGroup {\n  align-content: flex-start;\n  display: flex;\n  flex: 1;\n  flex-wrap: wrap;\n  min-height: var(--tokenizedInput-height);\n  padding: var(--tokenizedInput-pill-group-y-padding) var(--tokenizedInput-spacing);\n}\n\n/* Styles applied to root component if `disabled={true}` */\n.saltTokenizedInput-disabled {\n  cursor: var(--salt-editable-cursor-disabled);\n  opacity: var(--saltTokenizedInput-disabled-opacity, var(--salt-palette-opacity-disabled));\n}\n\n/* Styles applied to root component if `focused={true}` */\n.saltTokenizedInput-focused {\n  outline: var(--saltTokenizedInput-focused-outline, var(--salt-focused-outline));\n}\n\n/* Styles applied to root component if `expanded={true}` */\n.saltTokenizedInput-expanded {\n  height: auto;\n\n  /* Pill CSS API */\n  --saltPill-maxWidth: calc(100px - var(--salt-size-unit));\n}\n\n/* Styles applied to Input and Clear Button if `expanded={false}` */\n.saltTokenizedInput-hidden,\n.saltTokenizedInput-input.saltTokenizedInput-hidden,\n.saltButton.saltTokenizedInput-hidden {\n  display: none;\n}\n\n/**\n  Styles applied to inner Input component\n  Used to be .inputRoot\n**/\n.saltInputLegacy.saltTokenizedInput-input {\n  align-items: flex-start;\n  cursor: text;\n  flex-grow: 1;\n  padding: 0;\n  outline: none;\n  width: auto;\n  height: auto;\n  min-width: 0;\n  min-height: 0;\n}\n\n/* Styles applied to Clear Button  */\n.saltTokenizedInput-clearButton {\n  flex: none;\n  align-self: flex-end;\n}\n\n/* Styles applied to Expand Button  */\n.saltTokenizedInput-expandButton.saltButton {\n  padding: 0 calc(var(--tokenizedInput-spacing) / 4);\n  --saltButton-height: calc(var(--tokenizedInput-height) - var(--tokenizedInput-spacing) * 1.5);\n  --saltButton-margin: calc(var(--tokenizedInput-gutter-size) / 2) 0;\n}\n\n/* Styles applied to root component and pill container if `expanded={true}` */\n.saltTokenizedInput-expanded,\n.saltTokenizedInput-expanded .saltTokenizedInput-pillGroup {\n  height: auto;\n}\n\n/* TODO: Adjust specificity of .InputPill depending on styling solution.\n  This is an example of internal sub-component naming convension. */\n.saltTokenizedInput .saltInputPill,\n.saltInputLegacy.saltTokenizedInput-input,\n.saltTokenizedInput-inputField.saltTokenizedInput-inputMultiline .saltTokenizedInput-input {\n  margin: calc(var(--tokenizedInput-gutter-size) / 2) 0;\n  height: calc(var(--tokenizedInput-height) - var(--tokenizedInput-spacing) * 1.5);\n}\n\n/* Styles applied to inner Pills */\n.saltTokenizedInput .saltInputPill {\n  min-width: 0;\n  margin-right: var(--tokenizedInput-gutter-size);\n  --saltPill-maxWidth: 100px;\n}\n\n.saltTokenizedInput .saltInputPill > * {\n  min-width: 0;\n}\n\n/* Styles applied to a Pill if `expanded={false} && index >= firstHiddenIndex` */\n.saltTokenizedInput .saltInputPill.saltInputPill-hidden {\n  display: none;\n}\n\n/* Styles applied to the last visible Pill when all visible */\n.saltTokenizedInput .saltInputPill-pillLastVisible {\n  margin-right: var(--saltTokenizedInput-pill-last-visible-marginRight, var(--tokenizedInput-last-pill-margin));\n}\n\n/* Styles applied to a Pill when active */\n.saltTokenizedInput .saltInputPill-pillActive {\n  background: var(--saltTokenizedInput-pill-background-active, var(--salt-selectable-background-hover));\n}\n\n/* Styles applied to a Pills delete icon */\n.saltTokenizedInput .saltInputPill-pillActive .saltPill-deleteIcon {\n  color: var(--saltTokenizedInput-pill-delete-icon-color, var(--salt-actionable-cta-foreground-hover));\n}\n\n/* Styles applied to a Pills delete button */\n.saltTokenizedInput .saltInputPill-pillActive .saltPill-deleteButton {\n  color: var(--saltTokenizedInput-pill-delete-button-color-active, var(--salt-actionable-cta-foreground-hover));\n  background: var(--saltTokenizedInput-pill-delete-button-background-active, var(--salt-actionable-cta-background-hover));\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=TokenizedInput.css.js.map

package/dist-types/breadcrumbs/internal/BreadcrumbsContext.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export interface BreadcrumbsContext {
     wrap?: boolean;
     itemsMaxWidth?: number | string;

package/dist-types/breadcrumbs/internal/BreadcrumbsSeparator.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import { IconProps } from "@salt-ds/icons";
 export declare const BreadcrumbsSeparator: (props: IconProps) => JSX.Element;

package/dist-types/breadcrumbs/internal/useFocusMenuRemount.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare function useFocusMenuRemount<T extends HTMLElement>(key: string): {
     ref: import("react").RefObject<T>;
     shouldFocusOnMount: import("react").MutableRefObject<boolean>;

package/dist-types/button-bar/OrderedButton.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ButtonProps } from "@salt-ds/core";
 export interface OrderedButtonProps extends ButtonProps {
     /**

package/dist-types/button-bar/internal/ButtonBarContext.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export interface ButtonBarContextValue {
     matches: boolean;
     alignedIndex?: number;

package/dist-types/calendar/Calendar.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { CalendarNavigationProps } from "./internal/CalendarNavigation";
 import { CalendarCarouselProps } from "./internal/CalendarCarousel";
 import { useCalendarProps } from "./useCalendar";

package/dist-types/calendar/internal/CalendarCarousel.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { CalendarMonthProps } from "./CalendarMonth";
 export declare type CalendarCarouselProps = Omit<CalendarMonthProps, "date">;
 export declare const CalendarCarousel: import("react").ForwardRefExoticComponent<Omit<CalendarCarouselProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist-types/calendar/internal/CalendarContext.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { useCalendar } from "../useCalendar";
 declare type CalendarState = {
     state: ReturnType<typeof useCalendar>["state"];

package/dist-types/cascading-menu/CascadingMenu.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import { CascadingMenuProps } from "./CascadingMenuProps";
 export declare const CascadingMenu: import("react").ForwardRefExoticComponent<CascadingMenuProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist-types/cascading-menu/CascadingMenuList.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { UseFloatingUIProps } from "@salt-ds/core";
 import { ListProps } from "../list-deprecated";
 import { MenuItemProps } from "./CascadingMenuItem";

package/dist-types/cascading-menu/internal/useMountedRef.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 /**
  * Used to know if the component is mounted or not
  */

package/dist-types/color-chooser/AlphaInputField.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 interface AlphaInputProps {
     alphaValue: number;
     showAsOpacity?: boolean;

package/dist-types/color-chooser/DictTabs.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { TabstripProps } from "../tabs";
 import { ColorPicker, ColorPickerProps } from "./ColorPicker";
 import { Swatches, SwatchesTabProps } from "./Swatches";

package/dist-types/color-chooser/HexInput.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 interface HexInputProps {
     hexValue: string | undefined;
     disableAlphaChooser: boolean;

package/dist-types/color-chooser/HexInputField.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 interface HexInputProps {
     hexValue: string | undefined;
     disableAlphaChooser: boolean;

package/dist-types/color-chooser/RGBAInputField.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { RGBAValue } from "./Color";
 interface RGBInputProps {
     rgbaValue: RGBAValue;

package/dist-types/color-chooser/Swatches.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { Color } from "./Color";
 export interface SwatchesTabProps {
     allColors: string[][];

package/dist-types/color-chooser/SwatchesPicker.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { Color } from "./Color";
 interface SwatchesPickerProps {
     allColors: string[][];

package/dist-types/combo-box-deprecated/internal/MultiSelectComboBox.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { TokenizedInputProps } from "../../tokenized-input";
 import { BaseComboBoxProps } from "./DefaultComboBox";
 export declare type MultiSelectComboBoxProps<Item> = BaseComboBoxProps<Item, "multiple"> & Pick<TokenizedInputProps<Item>, "onFocus" | "onBlur" | "onInputFocus" | "onInputBlur" | "onInputChange" | "onInputSelect" | "stringToItem"> & {

package/dist-types/combo-box-next/ComboBoxNext.d.ts

@@ -1,13 +1,8 @@
-import { ComponentPropsWithoutRef, FocusEvent, KeyboardEvent, ReactElement, Ref, SyntheticEvent } from "react";
-import { InputProps } from "@salt-ds/core";
+import { ComponentPropsWithoutRef, ReactElement, Ref, SyntheticEvent } from "react";
 import { ListNextProps } from "../list-next";
 import { ComboBoxItemProps } from "./utils";
 import { UseComboBoxPortalProps } from "./useComboboxPortal";
-export interface ComboBoxNextProps<T> extends Omit<ComponentPropsWithoutRef<"input">, "onChange"> {
-    /**
-     * Additional props for the input component.
-     */
-    InputProps?: InputProps;
+export interface ComboBoxNextProps<T> extends Omit<ComponentPropsWithoutRef<"input">, "onChange" | "onSelect"> {
     /**
      * Additional props for the list component.
      */
@@ -17,36 +12,38 @@ export interface ComboBoxNextProps<T> extends Omit<ComponentPropsWithoutRef<"inp
      */
     PortalProps?: UseComboBoxPortalProps;
     /**
-     * If `true`, the component will be disabled.
+     * Controlled prop. Controls the Input value in the Combo Box Input.
+     */
+    inputValue?: string;
+    /**
+     * Controlled prop. Controls the Highlighted item in the Combo Box list.
      */
-    disabled: boolean;
     highlightedItem?: string;
-    selected?: string;
-    defaultSelected?: string;
     /**
-     * The source of combobox items.
+     * Controlled prop. Controls the Selected value in the Combo Box list.
      */
-    source: T[];
+    selected?: string;
     /**
-     * Callback for blur event
+     * Initial input value for when the list is uncontrolled.
      */
-    onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
+    defaultInputValue?: string;
     /**
-     * Callback for focus event
+     * Initial selected value for when the list is uncontrolled.
      */
-    onFocus?: (event: FocusEvent<HTMLInputElement>) => void;
+    defaultSelected?: string;
     /**
-     * Callback for keyDown event
+     * If `true`, the component will be disabled.
      */
-    onKeyDown?: (event: KeyboardEvent<HTMLInputElement>) => void;
+    disabled?: boolean;
     /**
-     * Callback for mouse over event
+     * Styling variant. Defaults to "primary".
      */
-    onMouseOver?: (event: SyntheticEvent) => void;
+    variant?: "primary" | "secondary";
     /**
-     * Optional ref for the input component
+    /**
+     * The source of combobox items.
      */
-    inputRef?: Ref<HTMLInputElement>;
+    source: T[];
     /**
      * Optional ref for the list component
      */
@@ -54,17 +51,33 @@ export interface ComboBoxNextProps<T> extends Omit<ComponentPropsWithoutRef<"inp
     /**
      * The component used for item instead of the default.
      */
-    ListItem: (props: ComboBoxItemProps<T>) => ReactElement<ComboBoxItemProps<T>>;
+    ListItem?: (props: ComboBoxItemProps<T>) => ReactElement<ComboBoxItemProps<T>>;
     /**
      * Function to be used as filter.
      */
     itemFilter?: (source: T[], filterValue?: string) => T[];
-    onChange?: (event: SyntheticEvent, data: {
+    /**
+     * Callback for mouse over event
+     */
+    onMouseOver?: (event: SyntheticEvent) => void;
+    /**
+     * Callback for list selection event
+     */
+    onSelect?: (event: SyntheticEvent, data: {
         value: string;
     }) => void;
     /**
-     * Styling variant. Defaults to "primary".
+    /**
+     * Callback for list change event
      */
-    variant?: "primary" | "secondary";
+    onListChange?: (event: SyntheticEvent, data: {
+        value: string | undefined;
+    }) => void;
+    /**
+     * Callback for input change event
+     */
+    onChange?: (event: SyntheticEvent, data: {
+        value: string;
+    }) => void;
 }
 export declare const ComboBoxNext: import("react").ForwardRefExoticComponent<ComboBoxNextProps<unknown> & import("react").RefAttributes<HTMLInputElement>>;

package/dist-types/combo-box-next/useComboBox.d.ts

@@ -2,6 +2,8 @@ import { FocusEvent, KeyboardEvent, SyntheticEvent } from "react";
 import { UseListProps } from "../list-next/useList";
 import { UseComboBoxPortalProps } from "./useComboboxPortal";
 interface UseComboBoxProps {
+    inputValue?: string;
+    defaultInputValue?: string;
     onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
     onFocus?: (event: FocusEvent<HTMLInputElement>) => void;
     onMouseOver?: (event: SyntheticEvent) => void;
@@ -9,7 +11,9 @@ interface UseComboBoxProps {
     PortalProps?: UseComboBoxPortalProps;
     listProps: UseListProps;
 }
-export declare const useComboBox: ({ onFocus, onBlur, onMouseOver, onKeyDown, PortalProps, listProps, }: UseComboBoxProps) => {
+export declare const useComboBox: ({ defaultInputValue, onFocus, onBlur, onMouseOver, onKeyDown, inputValue: inputValueProp, PortalProps, listProps, }: UseComboBoxProps) => {
+    inputValue: string | undefined;
+    setInputValue: import("react").Dispatch<import("react").SetStateAction<string | undefined>>;
     portalProps: {
         open: boolean;
         setOpen: import("react").Dispatch<import("react").SetStateAction<boolean>>;
@@ -17,9 +21,14 @@ export declare const useComboBox: ({ onFocus, onBlur, onMouseOver, onKeyDown, Po
         reference: (node: import("@floating-ui/react").ReferenceType | null) => void;
         getTriggerProps: () => Record<string, unknown>;
         getPortalProps: () => import("react").HTMLProps<HTMLDivElement>;
+        getPosition: () => {
+            top: number;
+            left: number;
+            position: import("@floating-ui/utils").Strategy;
+            width: number | undefined;
+            height: number | undefined;
+        };
     };
-    inputValue: string | undefined;
-    setInputValue: import("react").Dispatch<import("react").SetStateAction<string | undefined>>;
     selectedItem: string | undefined;
     setSelectedItem: import("react").Dispatch<import("react").SetStateAction<string | undefined>>;
     highlightedItem: string | undefined;

package/dist-types/combo-box-next/useComboboxPortal.d.ts

@@ -12,4 +12,11 @@ export declare function useComboboxPortal(props?: UseComboBoxPortalProps): {
     reference: (node: import("@floating-ui/react").ReferenceType | null) => void;
     getPortalProps: () => HTMLProps<HTMLDivElement>;
     getTriggerProps: () => Record<string, unknown>;
+    getPosition: () => {
+        top: number;
+        left: number;
+        position: import("@floating-ui/utils").Strategy;
+        width: number | undefined;
+        height: number | undefined;
+    };
 };

package/dist-types/combo-box-next/utils.d.ts

@@ -1,8 +1,7 @@
-/// <reference types="react" />
 import { ListItemNextProps } from "../list-next";
 export declare const defaultFilter: (source: string[], filterValue?: string | undefined) => string[];
 export interface ComboBoxItemProps<T> extends Omit<ListItemNextProps, "value"> {
     value: T;
     matchPattern?: RegExp | string;
 }
-export declare const DefaultListItem: ({ value, matchPattern, onMouseDown, ...rest }: ComboBoxItemProps<string>) => JSX.Element;
+export declare const DefaultListItem: import("react").ForwardRefExoticComponent<ComboBoxItemProps<string> & import("react").RefAttributes<unknown>>;

package/dist-types/common-hooks/useTypeahead.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { CollectionItem } from "./collectionTypes";
 interface TypeaheadHookProps<Item> {
     disableTypeToSelect?: boolean;

package/dist-types/contact-details/ContactAvatar.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { AvatarProps } from "@salt-ds/core";
 export declare type ContactAvatarProps = AvatarProps;
 export declare const ContactAvatar: import("react").ForwardRefExoticComponent<AvatarProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist-types/contact-details/ContactFavoriteToggle.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { TooltipProps } from "@salt-ds/core";
 import { FavoriteToggleWithTooltipProps } from "./internal";
 export interface ContactFavoriteToggleProps extends FavoriteToggleWithTooltipProps {

package/dist-types/contact-details/MailLinkComponent.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import { ValueComponentProps } from "./types";
 export declare const MailLinkComponent: (props: ValueComponentProps) => JSX.Element;

package/dist-types/contact-details/internal/ContactDetailsContext.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ContactDetailsVariant } from "../ContactDetails";
 export interface ContactDetailsContext {
     variant: ContactDetailsVariant;

package/dist-types/contact-details/internal/FavoriteToggleWithTooltip.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { TooltipProps } from "@salt-ds/core";
 import { FavoriteToggleProps } from "./FavoriteToggle";
 export interface FavoriteToggleWithTooltipProps extends FavoriteToggleProps {

package/dist-types/dialog/DialogActions.d.ts

@@ -1,2 +1,8 @@
-import { HTMLAttributes } from "react";
-export declare const DialogActions: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+import { HTMLAttributes, ReactNode } from "react";
+export interface DialogActionsProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * The content of Dialog Actions
+     */
+    children?: ReactNode;
+}
+export declare const DialogActions: import("react").ForwardRefExoticComponent<DialogActionsProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist-types/dialog/DialogCloseButton.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import { ButtonProps } from "@salt-ds/core";
 export declare const DialogCloseButton: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist-types/dialog/DialogContent.d.ts

@@ -1,2 +1,8 @@
-import { HTMLAttributes } from "react";
-export declare const DialogContent: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+import { HTMLAttributes, ReactNode } from "react";
+export interface DialogContentProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * The content of Dialog Content
+     */
+    children?: ReactNode;
+}
+export declare const DialogContent: import("react").ForwardRefExoticComponent<DialogContentProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist-types/dialog/DialogContext.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const DialogContext: import("react").Context<{
     dialogId?: string | undefined;
     status?: "error" | "warning" | "success" | "info" | undefined;

package/dist-types/dialog/useDialog.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { UseFloatingUIProps } from "@salt-ds/core";
 export declare type UseDialogProps = Partial<Pick<UseFloatingUIProps, "onOpenChange" | "open">>;
 export declare function useDialog(props: UseDialogProps): {
@@ -8,12 +7,12 @@ export declare function useDialog(props: UseDialogProps): {
     context: {
         x: number | null;
         y: number | null;
-        placement: import("@floating-ui/react").Placement;
-        strategy: import("@floating-ui/react").Strategy;
-        middlewareData: import("@floating-ui/react").MiddlewareData;
-        update: () => void;
+        placement: import("@floating-ui/utils").Placement;
+        strategy: import("@floating-ui/utils").Strategy;
+        middlewareData: import("@floating-ui/core").MiddlewareData;
         reference: (node: import("@floating-ui/react").ReferenceType | null) => void;
         floating: (node: HTMLElement | null) => void;
+        update: () => void;
         isPositioned: boolean;
         open: boolean;
         onOpenChange: (open: boolean) => void;

package/dist-types/drawer/Drawer.d.ts

@@ -1,6 +1,6 @@
 import { HTMLAttributes } from "react";
 export declare const DRAWER_POSITIONS: readonly ["left", "top", "right", "bottom"];
-export declare type DrawerPositions = typeof DRAWER_POSITIONS[number];
+export declare type DrawerPositions = (typeof DRAWER_POSITIONS)[number];
 export interface DrawerProps extends HTMLAttributes<HTMLDivElement> {
     /**
      * Defines the drawer position within the screen.