npm - @salt-ds/lab - Versions diffs - 1.0.0-alpha.17 → 1.0.0-alpha.19 - Mend

@salt-ds/lab 1.0.0-alpha.17 → 1.0.0-alpha.19

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (182) hide show

package/dist-es/tabs/Tab.js CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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":"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"}
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":["Tab","tabCss","editable"],"mappings":"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"}

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

@@ -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  -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";
+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  gap: var(--salt-spacing-100);\n  border: none;\n  border-left: var(--salt-size-border) var(--salt-container-borderStyle) transparent;\n  border-right: var(--salt-size-border) var(--salt-container-borderStyle) transparent;\n  border-radius: 0;\n  white-space: pre;\n  min-width: 4em;\n  padding: var(--salt-spacing-50) var(--salt-spacing-100);\n  position: relative;\n  flex-shrink: 0;\n\n  cursor: var(--salt-navigable-cursor-hover);\n  color: var(--salt-text-primary-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-primary {\n  --tabNext-background-active: var(--salt-container-primary-background);\n}\n\n.saltTabNext-secondary {\n  --tabNext-background-active: var(--salt-container-secondary-background);\n}\n\n.saltTabNext::after {\n  content: \"\";\n  position: absolute;\n  left: calc(var(--salt-size-border) * -1);\n  right: calc(var(--salt-size-border) * -1);\n  height: var(--salt-size-indicator);\n}\n\n.saltTabNext-main {\n  min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n}\n\n.saltTabNext-inline {\n  min-height: var(--salt-size-base);\n}\n\n.saltTabNext-main::after {\n  top: 0;\n}\n\n.saltTabNext-inline::after {\n  bottom: 0;\n}\n\n.saltTabNext:hover::after,\n.saltTabNext:focus-visible::after {\n  background: var(--salt-navigable-indicator-hover);\n}\n\n.saltTabNext:disabled:hover::after,\n.saltTabNext:disabled:focus-visible::after {\n  background: none;\n}\n\n.saltTabNext:focus-visible {\n  outline: var(--salt-focused-outline);\n}\n\n.saltTabNext-main[aria-selected=\"true\"] {\n  background: var(--tabNext-background-active);\n  border-left: var(--salt-size-border) var(--salt-container-borderStyle) var(--salt-container-primary-borderColor);\n  border-right: var(--salt-size-border) var(--salt-container-borderStyle) var(--salt-container-primary-borderColor);\n}\n\n.saltTabNext[aria-selected=\"true\"]::after {\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}\n";
 export { css_248z as default };
 //# sourceMappingURL=TabNext.css.js.map

package/dist-es/tabs-next/TabNext.js CHANGED Viewed

@@ -26,19 +26,21 @@ const TabNext = forwardRef(function Tab(props, ref) {
     window: targetWindow
   });
   const {
-    isSelected,
-    select,
+    activeColor,
+    isActive,
+    activate,
     isFocusable,
     setFocusable,
     disabled: tabstripDisabled,
     unregisterTab,
-    registerTab
+    registerTab,
+    variant
   } = useTabs();
-  const selected = isSelected(value);
+  const active = isActive(value);
   const focusable = isFocusable(value);
   const disabled = tabstripDisabled || disabledProp;
   const handleClick = (event) => {
-    select(event);
+    activate(event);
     onClick == null ? void 0 : onClick(event);
   };
   const handleFocus = (event) => {
@@ -51,13 +53,18 @@ const TabNext = forwardRef(function Tab(props, ref) {
   }, [children, registerTab, unregisterTab, value]);
   return /* @__PURE__ */ jsx(OverflowItem, {
     id: value,
-    priority: selected ? 2 : 1,
+    priority: active ? 2 : 1,
     children: /* @__PURE__ */ jsx("div", {
       className: withBaseName("wrapper"),
       children: /* @__PURE__ */ jsx("button", {
-        className: clsx(withBaseName(), className),
+        className: clsx(
+          withBaseName(),
+          withBaseName(variant),
+          withBaseName(activeColor),
+          className
+        ),
         "data-value": value,
-        "aria-selected": selected,
+        "aria-selected": active,
         disabled,
         value,
         ref,
@@ -66,10 +73,7 @@ const TabNext = forwardRef(function Tab(props, ref) {
         onFocus: handleFocus,
         tabIndex: focusable && !disabled ? 0 : -1,
         ...rest,
-        children: /* @__PURE__ */ jsx("span", {
-          className: withBaseName("label"),
-          children
-        })
+        children
       })
     })
   });

package/dist-es/tabs-next/TabNext.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TabNext.js","sources":["../src/tabs-next/TabNext.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport {\n forwardRef,\n ReactElement,\n ComponentPropsWithoutRef,\n MouseEvent,\n FocusEvent,\n useEffect,\n} from \"react\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport tabCss from \"./TabNext.css\";\nimport clsx from \"clsx\";\nimport { OverflowItem } from \"@fluentui/react-overflow\";\nimport { useTabs } from \"./TabNextContext\";\n\nconst withBaseName = makePrefixer(\"saltTabNext\");\n\nexport interface TabNextProps extends ComponentPropsWithoutRef<\"button\"> {\n /* Value prop is mandatory and must be unique in order for overflow to work. */\n value: string;\n}\n\nexport const TabNext = forwardRef<HTMLButtonElement, TabNextProps>(function Tab(\n props,\n ref\n): ReactElement<TabNextProps> {\n const {\n children,\n className,\n disabled: disabledProp,\n onClick,\n onFocus,\n value,\n ...rest\n } = props;\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-tab-next\",\n css: tabCss,\n window: targetWindow,\n });\n const {\n ~~isSelected~~,\n ~~select~~,\n isFocusable,\n setFocusable,\n disabled: tabstripDisabled,\n unregisterTab,\n registerTab,\n } = useTabs();\n const ~~selected~~ = ~~isSelected~~(value);\n const focusable = isFocusable(value);\n const disabled = tabstripDisabled \|\| disabledProp;\n\n const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n ~~select~~(event);\n onClick?.(event);\n };\n\n const handleFocus = (event: FocusEvent<HTMLButtonElement>) => {\n setFocusable(value);\n onFocus?.(event);\n };\n\n useEffect(() => {\n registerTab({ value, label: children });\n return () => unregisterTab(value);\n }, [children, registerTab, unregisterTab, value]);\n\n return (\n <OverflowItem id={value} priority={~~selected~~ ? 2 : 1}>\n <div className={withBaseName(\"wrapper\")}>\n <button\n className={clsx(withBaseName(), className)}\n data-value={value}\n aria-selected={~~selected~~}\n disabled={disabled}\n value={value}\n ref={ref}\n role=\"tab\"\n onClick={handleClick}\n onFocus={handleFocus}\n tabIndex={focusable && !disabled ? 0 : -1}\n {...rest}\n >\n ~~<span className=~~{~~withBaseName(\"label\")}>{~~children}~~</span>\~~n </button>\n </div>\n </OverflowItem>\n );\n});\n"],"names":["tabCss"],"mappings":";;;;;;;;;;AAiBA,MAAM,YAAA,GAAe,aAAa,aAAa,CAAA,CAAA;AAOxC,MAAM,OAAU,GAAA,UAAA,CAA4C,SAAS,GAAA,CAC1E,OACA,GAC4B,EAAA;AAC5B,EAAM,MAAA;AAAA,IACJ,QAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAU,EAAA,YAAA;AAAA,IACV,OAAA;AAAA,IACA,OAAA;AAAA,IACA,KAAA;AAAA,IACG,GAAA,IAAA;AAAA,GACD,GAAA,KAAA,CAAA;AACJ,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,eAAA;AAAA,IACR,GAAK,EAAAA,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AACD,EAAM,MAAA;AAAA,IACJ,~~UAAA~~;AAAA,IACA,~~MAAA~~;AAAA,IACA,WAAA;AAAA,IACA,YAAA;AAAA,IACA,QAAU,EAAA,gBAAA;AAAA,IACV,aAAA;AAAA,IACA,WAAA;AAAA,MACE,OAAQ,EAAA,CAAA;AACZ,EAAM,MAAA,~~QAAA~~,~~GAAW~~,~~WAAW~~,KAAK,CAAA,CAAA;~~AACjC~~,EAAM,MAAA,SAAA,GAAY,YAAY,KAAK,CAAA,CAAA;AACnC,EAAA,MAAM,WAAW,gBAAoB,IAAA,YAAA,CAAA;AAErC,EAAM,MAAA,WAAA,GAAc,CAAC,KAAyC,KAAA;AAC5D,IAAA,~~MAAA~~,~~CAAO~~,KAAK,CAAA,CAAA;~~AACZ~~,IAAU,OAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,OAAA,CAAA,KAAA,CAAA,CAAA;AAAA,GACZ,CAAA;AAEA,EAAM,MAAA,WAAA,GAAc,CAAC,KAAyC,KAAA;AAC5D,IAAA,YAAA,CAAa,KAAK,CAAA,CAAA;AAClB,IAAU,OAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,OAAA,CAAA,KAAA,CAAA,CAAA;AAAA,GACZ,CAAA;AAEA,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,WAAA,CAAY,EAAE,KAAA,EAAO,KAAO,EAAA,QAAA,EAAU,CAAA,CAAA;AACtC,IAAO,OAAA,MAAM,cAAc,KAAK,CAAA,CAAA;AAAA,KAC/B,CAAC,QAAA,EAAU,WAAa,EAAA,aAAA,EAAe,KAAK,CAAC,CAAA,CAAA;AAEhD,EAAA,uBACG,GAAA,CAAA,YAAA,EAAA;AAAA,IAAa,EAAI,EAAA,KAAA;AAAA,IAAO,QAAA,EAAU,~~WAAW~~,CAAI,GAAA,CAAA;AAAA,~~IAChD~~,QAAC,kBAAA,GAAA,CAAA,KAAA,EAAA;AAAA,MAAI,SAAA,EAAW,aAAa,SAAS,CAAA;AAAA,MACpC,QAAC,kBAAA,GAAA,CAAA,QAAA,EAAA;AAAA,QACC,SAAW,EAAA,IAAA,~~CAAK~~,YAAa,EAAA,~~EAAG~~,~~SAAS~~,CAAA;AAAA,~~QACzC~~,YAAY,EAAA,KAAA;AAAA,QACZ,eAAe,EAAA,~~QAAA~~;AAAA,QACf,QAAA;AAAA,QACA,KAAA;AAAA,QACA,GAAA;AAAA,QACA,IAAK,EAAA,KAAA;AAAA,QACL,OAAS,EAAA,WAAA;AAAA,QACT,OAAS,EAAA,WAAA;AAAA,QACT,QAAU,EAAA,SAAA,IAAa,CAAC,QAAA,GAAW,CAAI,GAAA,CAAA,CAAA;AAAA,QACtC,GAAG,IAAA;AAAA,~~QAEJ~~,~~QAAC,kBAAA,GAAA,CAAA,MAAA,EAAA;AAAA,UAAK,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,UAAI,~~QAAA;AAAA,~~SAAS~~,CAAA;AAAA,~~OACpD,CAAA;AAAA,~~KACF,CAAA;AAAA,GACF,CAAA,CAAA;AAEJ,CAAC;;;;"}
1	+ {"version":3,"file":"TabNext.js","sources":["../src/tabs-next/TabNext.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport {\n forwardRef,\n ReactElement,\n ComponentPropsWithoutRef,\n MouseEvent,\n FocusEvent,\n useEffect,\n} from \"react\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport tabCss from \"./TabNext.css\";\nimport clsx from \"clsx\";\nimport { OverflowItem } from \"@fluentui/react-overflow\";\nimport { useTabs } from \"./TabNextContext\";\n\nconst withBaseName = makePrefixer(\"saltTabNext\");\n\nexport interface TabNextProps extends ComponentPropsWithoutRef<\"button\"> {\n /* Value prop is mandatory and must be unique in order for overflow to work. */\n value: string;\n}\n\nexport const TabNext = forwardRef<HTMLButtonElement, TabNextProps>(function Tab(\n props,\n ref\n): ReactElement<TabNextProps> {\n const {\n children,\n className,\n disabled: disabledProp,\n onClick,\n onFocus,\n value,\n ...rest\n } = props;\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-tab-next\",\n css: tabCss,\n window: targetWindow,\n });\n const {\n activeColor,\n isActive,\n activate,\n isFocusable,\n setFocusable,\n disabled: tabstripDisabled,\n unregisterTab,\n registerTab,\n variant,\n } = useTabs();\n const active = isActive(value);\n const focusable = isFocusable(value);\n const disabled = tabstripDisabled \|\| disabledProp;\n\n const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n activate(event);\n onClick?.(event);\n };\n\n const handleFocus = (event: FocusEvent<HTMLButtonElement>) => {\n setFocusable(value);\n onFocus?.(event);\n };\n\n useEffect(() => {\n registerTab({ value, label: children });\n return () => unregisterTab(value);\n }, [children, registerTab, unregisterTab, value]);\n\n return (\n <OverflowItem id={value} priority={active ? 2 : 1}>\n <div className={withBaseName(\"wrapper\")}>\n <button\n className={clsx(\n withBaseName(),\n withBaseName(variant),\n withBaseName(activeColor),\n className\n )}\n data-value={value}\n aria-selected={active}\n disabled={disabled}\n value={value}\n ref={ref}\n role=\"tab\"\n onClick={handleClick}\n onFocus={handleFocus}\n tabIndex={focusable && !disabled ? 0 : -1}\n {...rest}\n >\n {children}\n </button>\n </div>\n </OverflowItem>\n );\n});\n"],"names":["tabCss"],"mappings":";;;;;;;;;;AAiBA,MAAM,YAAA,GAAe,aAAa,aAAa,CAAA,CAAA;AAOxC,MAAM,OAAU,GAAA,UAAA,CAA4C,SAAS,GAAA,CAC1E,OACA,GAC4B,EAAA;AAC5B,EAAM,MAAA;AAAA,IACJ,QAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAU,EAAA,YAAA;AAAA,IACV,OAAA;AAAA,IACA,OAAA;AAAA,IACA,KAAA;AAAA,IACG,GAAA,IAAA;AAAA,GACD,GAAA,KAAA,CAAA;AACJ,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,eAAA;AAAA,IACR,GAAK,EAAAA,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AACD,EAAM,MAAA;AAAA,IACJ,WAAA;AAAA,IACA,QAAA;AAAA,IACA,QAAA;AAAA,IACA,WAAA;AAAA,IACA,YAAA;AAAA,IACA,QAAU,EAAA,gBAAA;AAAA,IACV,aAAA;AAAA,IACA,WAAA;AAAA,IACA,OAAA;AAAA,MACE,OAAQ,EAAA,CAAA;AACZ,EAAM,MAAA,MAAA,GAAS,SAAS,KAAK,CAAA,CAAA;AAC7B,EAAM,MAAA,SAAA,GAAY,YAAY,KAAK,CAAA,CAAA;AACnC,EAAA,MAAM,WAAW,gBAAoB,IAAA,YAAA,CAAA;AAErC,EAAM,MAAA,WAAA,GAAc,CAAC,KAAyC,KAAA;AAC5D,IAAA,QAAA,CAAS,KAAK,CAAA,CAAA;AACd,IAAU,OAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,OAAA,CAAA,KAAA,CAAA,CAAA;AAAA,GACZ,CAAA;AAEA,EAAM,MAAA,WAAA,GAAc,CAAC,KAAyC,KAAA;AAC5D,IAAA,YAAA,CAAa,KAAK,CAAA,CAAA;AAClB,IAAU,OAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,OAAA,CAAA,KAAA,CAAA,CAAA;AAAA,GACZ,CAAA;AAEA,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,WAAA,CAAY,EAAE,KAAA,EAAO,KAAO,EAAA,QAAA,EAAU,CAAA,CAAA;AACtC,IAAO,OAAA,MAAM,cAAc,KAAK,CAAA,CAAA;AAAA,KAC/B,CAAC,QAAA,EAAU,WAAa,EAAA,aAAA,EAAe,KAAK,CAAC,CAAA,CAAA;AAEhD,EAAA,uBACG,GAAA,CAAA,YAAA,EAAA;AAAA,IAAa,EAAI,EAAA,KAAA;AAAA,IAAO,QAAA,EAAU,SAAS,CAAI,GAAA,CAAA;AAAA,IAC9C,QAAC,kBAAA,GAAA,CAAA,KAAA,EAAA;AAAA,MAAI,SAAA,EAAW,aAAa,SAAS,CAAA;AAAA,MACpC,QAAC,kBAAA,GAAA,CAAA,QAAA,EAAA;AAAA,QACC,SAAW,EAAA,IAAA;AAAA,UACT,YAAa,EAAA;AAAA,UACb,aAAa,OAAO,CAAA;AAAA,UACpB,aAAa,WAAW,CAAA;AAAA,UACxB,SAAA;AAAA,SACF;AAAA,QACA,YAAY,EAAA,KAAA;AAAA,QACZ,eAAe,EAAA,MAAA;AAAA,QACf,QAAA;AAAA,QACA,KAAA;AAAA,QACA,GAAA;AAAA,QACA,IAAK,EAAA,KAAA;AAAA,QACL,OAAS,EAAA,WAAA;AAAA,QACT,OAAS,EAAA,WAAA;AAAA,QACT,QAAU,EAAA,SAAA,IAAa,CAAC,QAAA,GAAW,CAAI,GAAA,CAAA,CAAA;AAAA,QACtC,GAAG,IAAA;AAAA,QAEH,QAAA;AAAA,OACH,CAAA;AAAA,KACF,CAAA;AAAA,GACF,CAAA,CAAA;AAEJ,CAAC;;;;"}

package/dist-es/tabs-next/TabNextContext.js CHANGED Viewed

@@ -2,13 +2,15 @@ import { createContext } from '@salt-ds/core';
 import { useContext } from 'react';
 const TabsContext = createContext("TabsContext", {
+  activeColor: "primary",
   disabled: false,
-  select: () => void 0,
-  isSelected: () => false,
+  activate: () => void 0,
+  isActive: () => false,
   setFocusable: () => void 0,
   isFocusable: () => false,
   registerTab: () => void 0,
-  unregisterTab: () => void 0
+  unregisterTab: () => void 0,
+  variant: "main"
 });
 function useTabs() {
   return useContext(TabsContext);

package/dist-es/tabs-next/TabNextContext.js.map CHANGED Viewed

	@@ -1 +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 disabled?: boolean;\n ~~select~~: (event: SyntheticEvent<HTMLButtonElement>) => void;\n ~~isSelected~~: (id: string) => boolean;\n setFocusable: (id: string) => void;\n isFocusable: (id: string) => boolean;\n registerTab: (tab: TabValue) => void;\n unregisterTab: (id: string) => void;\n}\n\nexport const TabsContext = createContext<TabsContextValue>(\"TabsContext\", {\n disabled: false,\n ~~select~~: () => undefined,\n ~~isSelected~~: () => false,\n setFocusable: () => undefined,\n isFocusable: () => false,\n registerTab: () => undefined,\n unregisterTab: () => undefined,\n});\n\nexport function useTabs() {\n return useContext(TabsContext);\n}\n"],"names":[],"mappings":";;;~~AAkBa~~,MAAA,WAAA,GAAc,cAAgC,aAAe,EAAA;AAAA,EACxE,QAAU,EAAA,KAAA;AAAA,EACV,~~QAAQ~~,MAAM,KAAA,CAAA;AAAA,~~EACd~~,~~YAAY~~,MAAM,KAAA;AAAA,~~EAClB~~,cAAc,MAAM,KAAA,CAAA;AAAA,EACpB,aAAa,MAAM,KAAA;AAAA,EACnB,aAAa,MAAM,KAAA,CAAA;AAAA,EACnB,eAAe,MAAM,KAAA,CAAA;~~AACvB~~,CAAC,EAAA;AAEM,SAAS,OAAU,GAAA;AACxB,EAAA,OAAO,WAAW,WAAW,CAAA,CAAA;AAC/B;;;;"}
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":[],"mappings":";;;AAoBa,MAAA,WAAA,GAAc,cAAgC,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,OAAO,WAAW,WAAW,CAAA,CAAA;AAC/B;;;;"}

package/dist-es/tabs-next/TabstripNext.css.js CHANGED Viewed

@@ -1,4 +1,4 @@
-var css_248z = "/* Component class applied to the root element */\n.saltTabstripNext {\n  display: flex;\n  flex-wrap: nowrap;\n  align-items: center;\n  position: relative;\n  background: transparent;\n  width: 100%;\n}\n\n.saltTabstripNext::before {\n  content: \"\";\n  position: absolute;\n  inset: auto 0 0 0;\n  height: var(--salt-size-border);\n  background: var(--salt-container-primary-borderColor);\n}\n\n.saltTabstripNext .saltTabNext-wrapper {\n  padding-right: var(--salt-spacing-50);\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  padding-left: var(--salt-spacing-300);\n  padding-right: var(--salt-spacing-300);\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-container-borderStyle) var(--salt-container-primary-borderColor);\n}\n\n.saltTabstripNext .saltTabNext-wrapper:not(:last-child) {\n  padding-right: var(--salt-spacing-100);\n}\n";
 export { css_248z as default };
 //# sourceMappingURL=TabstripNext.css.js.map

package/dist-es/tabs-next/TabstripNext.js CHANGED Viewed

@@ -13,13 +13,16 @@ const withBaseName = makePrefixer("saltTabstripNext");
 const TabstripNext = forwardRef(
   function TabstripNext2(props, ref) {
     const {
+      activeColor = "primary",
+      align = "left",
       children,
       className,
-      disabled,
-      selected: selectedProp,
-      defaultSelected,
+      value: valueProp,
+      defaultValue,
       onChange,
       onKeyDown,
+      style,
+      variant = "main",
       ...rest
     } = props;
     const targetWindow = useWindow();
@@ -30,31 +33,29 @@ const TabstripNext = forwardRef(
     });
     const tabstripRef = useRef(null);
     const handleRef = useForkRef(tabstripRef, ref);
-    const [selected, setSelected] = useControlled({
-      controlled: selectedProp,
-      default: defaultSelected,
+    const [value, setValue] = useControlled({
+      controlled: valueProp,
+      default: defaultValue,
       name: "TabstripNext",
       state: "selected"
     });
-    const [focusable, setFocusableState] = useState(
-      selected
-    );
+    const [focusable, setFocusableState] = useState(value);
     const [overflowOpen, setOverflowOpen] = useState(false);
-    const select = useCallback(
+    const activate = useCallback(
       (event) => {
         const newValue = event.currentTarget.value;
-        setSelected(newValue);
-        if (selected !== newValue) {
+        setValue(newValue);
+        if (value !== newValue) {
           onChange == null ? void 0 : onChange(event, { value: newValue });
         }
       },
-      [onChange, selected, setSelected]
+      [onChange, value, setValue]
     );
-    const isSelected = useCallback(
+    const isActive = useCallback(
       (id) => {
-        return selected === id;
+        return value === id;
       },
-      [selected]
+      [value]
     );
     const setFocusable = useCallback((id) => {
       setFocusableState(id);
@@ -105,7 +106,7 @@ const TabstripNext = forwardRef(
     };
     const handleOverflowItemClick = (event, item) => {
       if (item) {
-        setSelected(item.value);
+        setValue(item.value);
         requestAnimationFrame(() => {
           var _a;
           const element = (_a = tabstripRef.current) == null ? void 0 : _a.querySelector(
@@ -115,7 +116,7 @@ const TabstripNext = forwardRef(
             element == null ? void 0 : element.focus();
           }
         });
-        if (selected !== item.value) {
+        if (value !== item.value) {
           onChange == null ? void 0 : onChange(event, { value: item.value });
         }
       }
@@ -123,26 +124,34 @@ const TabstripNext = forwardRef(
     const handleOverflowOpenChange = (isOpen) => {
       setOverflowOpen(isOpen);
     };
-    const value = useMemo(
+    const contextValue = useMemo(
       () => ({
-        select,
-        isSelected,
+        activate,
+        isActive,
         setFocusable,
         isFocusable,
         registerTab,
-        unregisterTab
+        unregisterTab,
+        variant,
+        activeColor
       }),
       [
-        select,
-        isSelected,
+        activate,
+        isActive,
         setFocusable,
         isFocusable,
         registerTab,
-        unregisterTab
+        unregisterTab,
+        variant,
+        activeColor
       ]
     );
+    const tabstripStyle = {
+      "--tabstripNext-justifyContent": align,
+      ...style
+    };
     return /* @__PURE__ */ jsx(TabsContext.Provider, {
-      value,
+      value: contextValue,
       children: /* @__PURE__ */ jsx(Overflow, {
         ref: handleRef,
         children: /* @__PURE__ */ jsxs("div", {
@@ -150,9 +159,11 @@ const TabstripNext = forwardRef(
           className: clsx(
             withBaseName(),
             withBaseName("horizontal"),
+            withBaseName(variant),
             className
           ),
           onKeyDown: handleKeyDown,
+          style: tabstripStyle,
           ...rest,
           children: [
             children,

package/dist-es/tabs-next/TabstripNext.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TabstripNext.js","sources":["../src/tabs-next/TabstripNext.tsx"],"sourcesContent":["import { makePrefixer, useControlled, useForkRef } from \"@salt-ds/core\";\nimport clsx from \"clsx\";\nimport {\n ComponentPropsWithoutRef,\n forwardRef,\n ReactNode,\n SyntheticEvent,\n KeyboardEvent,\n useCallback,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { Overflow } from \"@fluentui/react-overflow\";\nimport { OverflowMenu } from \"./OverflowMenu\";\nimport tabstripCss from \"./TabstripNext.css\";\nimport { TabsContext } from \"./TabNextContext\";\nimport { SelectionChangeHandler } from \"../common-hooks\";\n\nconst withBaseName = makePrefixer(\"saltTabstripNext\");\n\nexport interface TabstripNextProps\n extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\"> {\n disabled?: boolean;\n /* Value for the uncontrolled version. /\n selected?: string;\n / Callback for the controlled version. /\n onChange?: (e: SyntheticEvent, data: { value: string }) => void;\n / Initial value for the uncontrolled version. */\n defaultSelected?: string;\n}\n\ntype TabValue = {\n value: string;\n label: ReactNode;\n};\n\nexport const TabstripNext = forwardRef<HTMLDivElement, TabstripNextProps>(\n function TabstripNext(props, ref) {\n const {\n children,\n className,\n disabled,\n selected: selectedProp,\n defaultSelected,\n onChange,\n onKeyDown,\n ...rest\n } = props;\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-tabstrip-next\",\n css: tabstripCss,\n window: targetWindow,\n });\n\n const tabstripRef = useRef<HTMLDivElement>(null);\n const handleRef = useForkRef(tabstripRef, ref);\n\n const [selected, setSelected] = useControlled({\n controlled: selectedProp,\n default: defaultSelected,\n name: \"TabstripNext\",\n state: \"selected\",\n });\n const [focusable, setFocusableState] = useState<string \| undefined>(\n selected\n );\n const [overflowOpen, setOverflowOpen] = useState(false);\n\n const select = useCallback(\n (event: SyntheticEvent<HTMLButtonElement>) => {\n const newValue = event.currentTarget.value;\n setSelected(newValue);\n if (selected !== newValue) {\n onChange?.(event, { value: newValue });\n }\n },\n [onChange, selected, setSelected]\n );\n\n const isSelected = useCallback(\n (id: string \| undefined) => {\n return selected === id;\n },\n [selected]\n );\n\n const setFocusable = useCallback((id: string \| undefined) => {\n setFocusableState(id);\n }, []);\n\n const isFocusable = useCallback(\n (id: string \| undefined) => {\n return focusable === id \|\| !focusable;\n },\n [focusable]\n );\n\n const [tabList, setTabList] = useState<TabValue[]>([]);\n const registerTab = useCallback((tab: TabValue) => {\n setTabList((list) => list.concat([tab]));\n }, []);\n\n const unregisterTab = useCallback((id: string) => {\n setTabList((list) => list.filter((item) => item.value !== id));\n }, []);\n\n const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n if (overflowOpen) return;\n\n const elements: HTMLElement[] = Array.from(\n tabstripRef.current?.querySelectorAll(\n `div:not([data-overflowing]) > [role=\"tab\"]:not([disabled])`\n ) ?? []\n );\n\n const currentIndex = elements.findIndex(\n (element) => element === targetWindow?.document.activeElement\n );\n\n if (currentIndex < 0) return;\n\n switch (event.key) {\n case \"ArrowDown\":\n case \"ArrowRight\":\n elements[Math.min(currentIndex + 1, elements.length)]?.focus();\n break;\n case \"ArrowUp\":\n case \"ArrowLeft\":\n elements[Math.max(0, currentIndex - 1)]?.focus();\n break;\n case \"Home\":\n elements[0]?.focus();\n break;\n case \"End\":\n elements[elements.length - 1]?.focus();\n }\n\n onKeyDown?.(event);\n };\n\n const handleOverflowItemClick: SelectionChangeHandler<TabValue> = (\n event,\n item\n ) => {\n if (item) {\n setSelected(item.value);\n requestAnimationFrame(() => {\n const element = tabstripRef.current?.querySelector(\n `[value=\"${item.value}\"]`\n );\n if (element instanceof HTMLElement) {\n element?.focus();\n }\n });\n if (selected !== item.value) {\n onChange?.(event, { value: item.value });\n }\n }\n };\n\n const handleOverflowOpenChange = (isOpen: boolean) => {\n setOverflowOpen(isOpen);\n };\n\n const value = useMemo(\n () => ({\n select,\n isSelected,\n setFocusable,\n isFocusable,\n registerTab,\n unregisterTab,\n }),\n [\n select,\n isSelected,\n setFocusable,\n isFocusable,\n registerTab,\n unregisterTab,\n ]\n );\n\n return (\n <TabsContext.Provider value={value}>\n <Overflow ref={handleRef}>\n <div\n role=\"tablist\"\n className={clsx(\n withBaseName(),\n withBaseName(\"horizontal\"),\n className\n )}\n onKeyDown={handleKeyDown}\n {...rest}\n >\n {children}\n <OverflowMenu\n tabs={tabList}\n onOpenChange={handleOverflowOpenChange}\n onSelectionChange={handleOverflowItemClick}\n />\n </div>\n </Overflow>\n </TabsContext.Provider>\n );\n }\n);\n"],"names":["TabstripNext","tabstripCss"],"mappings":"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"}
1	+ {"version":3,"file":"TabstripNext.js","sources":["../src/tabs-next/TabstripNext.tsx"],"sourcesContent":["import { makePrefixer, useControlled, useForkRef } from \"@salt-ds/core\";\nimport clsx from \"clsx\";\nimport {\n ComponentPropsWithoutRef,\n forwardRef,\n ReactNode,\n SyntheticEvent,\n KeyboardEvent,\n useCallback,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { Overflow } from \"@fluentui/react-overflow\";\nimport { OverflowMenu } from \"./OverflowMenu\";\nimport tabstripCss from \"./TabstripNext.css\";\nimport { TabsContext } from \"./TabNextContext\";\nimport { SelectionChangeHandler } from \"../common-hooks\";\n\nconst withBaseName = makePrefixer(\"saltTabstripNext\");\n\nexport interface TabstripNextProps\n extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\"> {\n /* Styling active color variant. Defaults to \"primary\". /\n activeColor?: \"primary\" \| \"secondary\";\n / Tabs alignment. Defaults to \"left\" /\n align?: \"left\" \| \"center\" \| \"right\";\n / Value for the uncontrolled version. /\n value?: string;\n / Callback for the controlled version. /\n onChange?: (e: SyntheticEvent, data: { value: string }) => void;\n / Initial value for the uncontrolled version. /\n defaultValue?: string;\n / The Tabs variant */\n variant?: \"main\" \| \"inline\";\n}\n\ninterface TabValue {\n value: string;\n label: ReactNode;\n}\n\nexport const TabstripNext = forwardRef<HTMLDivElement, TabstripNextProps>(\n function TabstripNext(props, ref) {\n const {\n activeColor = \"primary\",\n align = \"left\",\n children,\n className,\n value: valueProp,\n defaultValue,\n onChange,\n onKeyDown,\n style,\n variant = \"main\",\n ...rest\n } = props;\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-tabstrip-next\",\n css: tabstripCss,\n window: targetWindow,\n });\n\n const tabstripRef = useRef<HTMLDivElement>(null);\n const handleRef = useForkRef(tabstripRef, ref);\n\n const [value, setValue] = useControlled({\n controlled: valueProp,\n default: defaultValue,\n name: \"TabstripNext\",\n state: \"selected\",\n });\n const [focusable, setFocusableState] = useState<string \| undefined>(value);\n const [overflowOpen, setOverflowOpen] = useState(false);\n\n const activate = useCallback(\n (event: SyntheticEvent<HTMLButtonElement>) => {\n const newValue = event.currentTarget.value;\n setValue(newValue);\n if (value !== newValue) {\n onChange?.(event, { value: newValue });\n }\n },\n [onChange, value, setValue]\n );\n\n const isActive = useCallback(\n (id: string \| undefined) => {\n return value === id;\n },\n [value]\n );\n\n const setFocusable = useCallback((id: string \| undefined) => {\n setFocusableState(id);\n }, []);\n\n const isFocusable = useCallback(\n (id: string \| undefined) => {\n return focusable === id \|\| !focusable;\n },\n [focusable]\n );\n\n const [tabList, setTabList] = useState<TabValue[]>([]);\n const registerTab = useCallback((tab: TabValue) => {\n setTabList((list) => list.concat([tab]));\n }, []);\n\n const unregisterTab = useCallback((id: string) => {\n setTabList((list) => list.filter((item) => item.value !== id));\n }, []);\n\n const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n if (overflowOpen) return;\n\n const elements: HTMLElement[] = Array.from(\n tabstripRef.current?.querySelectorAll(\n `div:not([data-overflowing]) > [role=\"tab\"]:not([disabled])`\n ) ?? []\n );\n\n const currentIndex = elements.findIndex(\n (element) => element === targetWindow?.document.activeElement\n );\n\n if (currentIndex < 0) return;\n\n switch (event.key) {\n case \"ArrowDown\":\n case \"ArrowRight\":\n elements[Math.min(currentIndex + 1, elements.length)]?.focus();\n break;\n case \"ArrowUp\":\n case \"ArrowLeft\":\n elements[Math.max(0, currentIndex - 1)]?.focus();\n break;\n case \"Home\":\n elements[0]?.focus();\n break;\n case \"End\":\n elements[elements.length - 1]?.focus();\n }\n\n onKeyDown?.(event);\n };\n\n const handleOverflowItemClick: SelectionChangeHandler<TabValue> = (\n event,\n item\n ) => {\n if (item) {\n setValue(item.value);\n requestAnimationFrame(() => {\n const element = tabstripRef.current?.querySelector(\n `[value=\"${item.value}\"]`\n );\n if (element instanceof HTMLElement) {\n element?.focus();\n }\n });\n if (value !== item.value) {\n onChange?.(event, { value: item.value });\n }\n }\n };\n\n const handleOverflowOpenChange = (isOpen: boolean) => {\n setOverflowOpen(isOpen);\n };\n\n const contextValue = useMemo(\n () => ({\n activate,\n isActive,\n setFocusable,\n isFocusable,\n registerTab,\n unregisterTab,\n variant,\n activeColor,\n }),\n [\n activate,\n isActive,\n setFocusable,\n isFocusable,\n registerTab,\n unregisterTab,\n variant,\n activeColor,\n ]\n );\n\n const tabstripStyle = {\n \"--tabstripNext-justifyContent\": align,\n ...style,\n };\n\n return (\n <TabsContext.Provider value={contextValue}>\n <Overflow ref={handleRef}>\n <div\n role=\"tablist\"\n className={clsx(\n withBaseName(),\n withBaseName(\"horizontal\"),\n withBaseName(variant),\n className\n )}\n onKeyDown={handleKeyDown}\n style={tabstripStyle}\n {...rest}\n >\n {children}\n <OverflowMenu\n tabs={tabList}\n onOpenChange={handleOverflowOpenChange}\n onSelectionChange={handleOverflowItemClick}\n />\n </div>\n </Overflow>\n </TabsContext.Provider>\n );\n }\n);\n"],"names":["TabstripNext","tabstripCss"],"mappings":"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"}

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

@@ -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 CHANGED Viewed

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

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

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

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

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

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

@@ -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 CHANGED Viewed

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

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

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

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

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

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

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

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

@@ -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 CHANGED Viewed

@@ -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/useComboBox.d.ts CHANGED Viewed

@@ -21,6 +21,13 @@ export declare const useComboBox: ({ defaultInputValue, onFocus, onBlur, onMouse
         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;
+        };
     };
     selectedItem: string | undefined;
     setSelectedItem: import("react").Dispatch<import("react").SetStateAction<string | undefined>>;

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

@@ -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 CHANGED Viewed

@@ -1,4 +1,3 @@
-/// <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"> {