@salt-ds/lab 1.0.0-alpha.2 → 1.0.0-alpha.21

package/dist-es/tabs-next/OverflowMenu.js

@@ -0,0 +1,44 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { useForkRef, Button } from '@salt-ds/core';
+import { OverflowMenuIcon } from '@salt-ds/icons';
+import { useOverflowMenu, useOverflowContext } from '@fluentui/react-overflow';
+import '../dropdown/DropdownBase.js';
+import '../dropdown/DropdownButton.js';
+import { Dropdown } from '../dropdown/Dropdown.js';
+import '../responsive/useResizeObserver.js';
+import '../form-field-context-legacy/FormFieldLegacyContext.js';
+
+const OverflowMenu = forwardRef(
+  function OverflowMenu2(props, forwardedRef) {
+    const { tabs, ...rest } = props;
+    const { ref, overflowCount, isOverflowing } = useOverflowMenu();
+    const handleRef = useForkRef(ref, forwardedRef);
+    const itemVisibility = useOverflowContext(
+      (context) => context.itemVisibility
+    );
+    const tabList = tabs.filter(({ value }) => !itemVisibility[value]);
+    if (!isOverflowing)
+      return null;
+    return /* @__PURE__ */ jsx(Dropdown, {
+      "aria-label": `${overflowCount} more tabs`,
+      triggerComponent: /* @__PURE__ */ jsx(Button, {
+        "aria-label": "More tabs",
+        variant: "secondary",
+        role: "combobox",
+        children: /* @__PURE__ */ jsx(OverflowMenuIcon, {
+          "aria-hidden": true,
+          style: { margin: 0 }
+        })
+      }),
+      width: "auto",
+      ref: handleRef,
+      source: tabList,
+      selected: null,
+      ...rest
+    });
+  }
+);
+
+export { OverflowMenu };
+//# sourceMappingURL=OverflowMenu.js.map

package/dist-es/tabs-next/OverflowMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OverflowMenu.js","sources":["../src/tabs-next/OverflowMenu.tsx"],"sourcesContent":["import { forwardRef, ReactNode } from \"react\";\nimport { Button, useForkRef } from \"@salt-ds/core\";\nimport { OverflowMenuIcon } from \"@salt-ds/icons\";\n\nimport { useOverflowContext, useOverflowMenu } from \"@fluentui/react-overflow\";\nimport { Dropdown, DropdownProps } from \"../dropdown\";\n\ntype TabValue = {\n  value: string;\n  label: ReactNode;\n};\n\nexport interface OverflowMenuProps extends DropdownProps<TabValue> {\n  tabs: TabValue[];\n}\n\nexport const OverflowMenu = forwardRef<HTMLDivElement, OverflowMenuProps>(\n  function OverflowMenu(props, forwardedRef) {\n    const { tabs, ...rest } = props;\n    const { ref, overflowCount, isOverflowing } =\n      useOverflowMenu<HTMLDivElement>();\n    const handleRef = useForkRef(ref, forwardedRef);\n    const itemVisibility = useOverflowContext(\n      (context) => context.itemVisibility\n    );\n\n    const tabList = tabs.filter(({ value }) => !itemVisibility[value]);\n\n    if (!isOverflowing) return null;\n\n    return (\n      <Dropdown<TabValue>\n        aria-label={`${overflowCount} more tabs`}\n        triggerComponent={\n          <Button aria-label=\"More tabs\" variant=\"secondary\" role=\"combobox\">\n            <OverflowMenuIcon aria-hidden style={{ margin: 0 }} />\n          </Button>\n        }\n        width=\"auto\"\n        ref={handleRef}\n        source={tabList}\n        selected={null}\n        {...rest}\n      />\n    );\n  }\n);\n"],"names":["OverflowMenu"],"mappings":";;;;;;;;;;;AAgBO,MAAM,YAAe,GAAA,UAAA;AAAA,EAC1B,SAASA,aAAa,CAAA,KAAA,EAAO,YAAc,EAAA;AACzC,IAAM,MAAA,EAAE,IAAS,EAAA,GAAA,IAAA,EAAS,GAAA,KAAA,CAAA;AAC1B,IAAA,MAAM,EAAE,GAAA,EAAK,aAAe,EAAA,aAAA,KAC1B,eAAgC,EAAA,CAAA;AAClC,IAAM,MAAA,SAAA,GAAY,UAAW,CAAA,GAAA,EAAK,YAAY,CAAA,CAAA;AAC9C,IAAA,MAAM,cAAiB,GAAA,kBAAA;AAAA,MACrB,CAAC,YAAY,OAAQ,CAAA,cAAA;AAAA,KACvB,CAAA;AAEA,IAAM,MAAA,OAAA,GAAU,KAAK,MAAO,CAAA,CAAC,EAAE,KAAM,EAAA,KAAM,CAAC,cAAA,CAAe,KAAM,CAAA,CAAA,CAAA;AAEjE,IAAA,IAAI,CAAC,aAAA;AAAe,MAAO,OAAA,IAAA,CAAA;AAE3B,IAAA,uBACG,GAAA,CAAA,QAAA,EAAA;AAAA,MACC,cAAY,CAAG,EAAA,aAAA,CAAA,UAAA,CAAA;AAAA,MACf,kCACG,GAAA,CAAA,MAAA,EAAA;AAAA,QAAO,YAAW,EAAA,WAAA;AAAA,QAAY,OAAQ,EAAA,WAAA;AAAA,QAAY,IAAK,EAAA,UAAA;AAAA,QACtD,QAAC,kBAAA,GAAA,CAAA,gBAAA,EAAA;AAAA,UAAiB,aAAW,EAAA,IAAA;AAAA,UAAC,KAAA,EAAO,EAAE,MAAA,EAAQ,CAAE,EAAA;AAAA,SAAG,CAAA;AAAA,OACtD,CAAA;AAAA,MAEF,KAAM,EAAA,MAAA;AAAA,MACN,GAAK,EAAA,SAAA;AAAA,MACL,MAAQ,EAAA,OAAA;AAAA,MACR,QAAU,EAAA,IAAA;AAAA,MACT,GAAG,IAAA;AAAA,KACN,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

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

@@ -0,0 +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  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-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\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::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.css.js.map

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

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

@@ -0,0 +1,83 @@
+import { jsx } from 'react/jsx-runtime';
+import { makePrefixer } from '@salt-ds/core';
+import { forwardRef, useEffect } from 'react';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import css_248z from './TabNext.css.js';
+import clsx from 'clsx';
+import { OverflowItem } from '@fluentui/react-overflow';
+import { useTabs } from './TabNextContext.js';
+
+const withBaseName = makePrefixer("saltTabNext");
+const TabNext = forwardRef(function Tab(props, ref) {
+  const {
+    children,
+    className,
+    disabled: disabledProp,
+    onClick,
+    onFocus,
+    value,
+    ...rest
+  } = props;
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "salt-tab-next",
+    css: css_248z,
+    window: targetWindow
+  });
+  const {
+    activeColor,
+    isActive,
+    activate,
+    isFocusable,
+    setFocusable,
+    disabled: tabstripDisabled,
+    unregisterTab,
+    registerTab,
+    variant
+  } = useTabs();
+  const active = isActive(value);
+  const focusable = isFocusable(value);
+  const disabled = tabstripDisabled || disabledProp;
+  const handleClick = (event) => {
+    activate(event);
+    onClick == null ? void 0 : onClick(event);
+  };
+  const handleFocus = (event) => {
+    setFocusable(value);
+    onFocus == null ? void 0 : onFocus(event);
+  };
+  useEffect(() => {
+    registerTab({ value, label: children });
+    return () => unregisterTab(value);
+  }, [children, registerTab, unregisterTab, value]);
+  return /* @__PURE__ */ jsx(OverflowItem, {
+    id: value,
+    priority: active ? 2 : 1,
+    children: /* @__PURE__ */ jsx("div", {
+      className: withBaseName("wrapper"),
+      children: /* @__PURE__ */ jsx("button", {
+        className: clsx(
+          withBaseName(),
+          withBaseName(variant),
+          withBaseName(activeColor),
+          className
+        ),
+        "data-value": value,
+        "aria-selected": active,
+        disabled,
+        value,
+        ref,
+        role: "tab",
+        onClick: handleClick,
+        onFocus: handleFocus,
+        tabIndex: focusable && !disabled ? 0 : -1,
+        ...rest,
+        children
+      })
+    })
+  });
+});
+
+export { TabNext };
+//# sourceMappingURL=TabNext.js.map

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

@@ -0,0 +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

@@ -0,0 +1,20 @@
+import { createContext } from '@salt-ds/core';
+import { useContext } from 'react';
+
+const TabsContext = createContext("TabsContext", {
+  activeColor: "primary",
+  disabled: false,
+  activate: () => void 0,
+  isActive: () => false,
+  setFocusable: () => void 0,
+  isFocusable: () => false,
+  registerTab: () => void 0,
+  unregisterTab: () => void 0,
+  variant: "main"
+});
+function useTabs() {
+  return useContext(TabsContext);
+}
+
+export { TabsContext, useTabs };
+//# sourceMappingURL=TabNextContext.js.map

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

@@ -0,0 +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

@@ -0,0 +1,4 @@
+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.css.js.map

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

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

@@ -0,0 +1,183 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { makePrefixer, useForkRef, useControlled } from '@salt-ds/core';
+import clsx from 'clsx';
+import { forwardRef, useRef, useState, useCallback, useMemo } from 'react';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import { Overflow } from '@fluentui/react-overflow';
+import { OverflowMenu } from './OverflowMenu.js';
+import css_248z from './TabstripNext.css.js';
+import { TabsContext } from './TabNextContext.js';
+
+const withBaseName = makePrefixer("saltTabstripNext");
+const TabstripNext = forwardRef(
+  function TabstripNext2(props, ref) {
+    const {
+      activeColor = "primary",
+      align = "left",
+      children,
+      className,
+      value: valueProp,
+      defaultValue,
+      onChange,
+      onKeyDown,
+      style,
+      variant = "main",
+      ...rest
+    } = props;
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+      testId: "salt-tabstrip-next",
+      css: css_248z,
+      window: targetWindow
+    });
+    const tabstripRef = useRef(null);
+    const handleRef = useForkRef(tabstripRef, ref);
+    const [value, setValue] = useControlled({
+      controlled: valueProp,
+      default: defaultValue,
+      name: "TabstripNext",
+      state: "selected"
+    });
+    const [focusable, setFocusableState] = useState(value);
+    const [overflowOpen, setOverflowOpen] = useState(false);
+    const activate = useCallback(
+      (event) => {
+        const newValue = event.currentTarget.value;
+        setValue(newValue);
+        if (value !== newValue) {
+          onChange == null ? void 0 : onChange(event, { value: newValue });
+        }
+      },
+      [onChange, value, setValue]
+    );
+    const isActive = useCallback(
+      (id) => {
+        return value === id;
+      },
+      [value]
+    );
+    const setFocusable = useCallback((id) => {
+      setFocusableState(id);
+    }, []);
+    const isFocusable = useCallback(
+      (id) => {
+        return focusable === id || !focusable;
+      },
+      [focusable]
+    );
+    const [tabList, setTabList] = useState([]);
+    const registerTab = useCallback((tab) => {
+      setTabList((list) => list.concat([tab]));
+    }, []);
+    const unregisterTab = useCallback((id) => {
+      setTabList((list) => list.filter((item) => item.value !== id));
+    }, []);
+    const handleKeyDown = (event) => {
+      var _a, _b, _c, _d, _e, _f;
+      if (overflowOpen)
+        return;
+      const elements = Array.from(
+        (_b = (_a = tabstripRef.current) == null ? void 0 : _a.querySelectorAll(
+          `div:not([data-overflowing]) > [role="tab"]:not([disabled])`
+        )) != null ? _b : []
+      );
+      const currentIndex = elements.findIndex(
+        (element) => element === (targetWindow == null ? void 0 : targetWindow.document.activeElement)
+      );
+      if (currentIndex < 0)
+        return;
+      switch (event.key) {
+        case "ArrowDown":
+        case "ArrowRight":
+          (_c = elements[Math.min(currentIndex + 1, elements.length)]) == null ? void 0 : _c.focus();
+          break;
+        case "ArrowUp":
+        case "ArrowLeft":
+          (_d = elements[Math.max(0, currentIndex - 1)]) == null ? void 0 : _d.focus();
+          break;
+        case "Home":
+          (_e = elements[0]) == null ? void 0 : _e.focus();
+          break;
+        case "End":
+          (_f = elements[elements.length - 1]) == null ? void 0 : _f.focus();
+      }
+      onKeyDown == null ? void 0 : onKeyDown(event);
+    };
+    const handleOverflowItemClick = (event, item) => {
+      if (item) {
+        setValue(item.value);
+        requestAnimationFrame(() => {
+          var _a;
+          const element = (_a = tabstripRef.current) == null ? void 0 : _a.querySelector(
+            `[value="${item.value}"]`
+          );
+          if (element instanceof HTMLElement) {
+            element == null ? void 0 : element.focus();
+          }
+        });
+        if (value !== item.value) {
+          onChange == null ? void 0 : onChange(event, { value: item.value });
+        }
+      }
+    };
+    const handleOverflowOpenChange = (isOpen) => {
+      setOverflowOpen(isOpen);
+    };
+    const contextValue = useMemo(
+      () => ({
+        activate,
+        isActive,
+        setFocusable,
+        isFocusable,
+        registerTab,
+        unregisterTab,
+        variant,
+        activeColor
+      }),
+      [
+        activate,
+        isActive,
+        setFocusable,
+        isFocusable,
+        registerTab,
+        unregisterTab,
+        variant,
+        activeColor
+      ]
+    );
+    const tabstripStyle = {
+      "--tabstripNext-justifyContent": align,
+      ...style
+    };
+    return /* @__PURE__ */ jsx(TabsContext.Provider, {
+      value: contextValue,
+      children: /* @__PURE__ */ jsx(Overflow, {
+        ref: handleRef,
+        children: /* @__PURE__ */ jsxs("div", {
+          role: "tablist",
+          className: clsx(
+            withBaseName(),
+            withBaseName("horizontal"),
+            withBaseName(variant),
+            className
+          ),
+          onKeyDown: handleKeyDown,
+          style: tabstripStyle,
+          ...rest,
+          children: [
+            children,
+            /* @__PURE__ */ jsx(OverflowMenu, {
+              tabs: tabList,
+              onOpenChange: handleOverflowOpenChange,
+              onSelectionChange: handleOverflowItemClick
+            })
+          ]
+        })
+      })
+    });
+  }
+);
+
+export { TabstripNext };
+//# sourceMappingURL=TabstripNext.js.map

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

@@ -0,0 +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/toast-group/ToastGroup.css.js

@@ -0,0 +1,4 @@
+var css_248z = ".saltToastGroup {\n  width: var(--toastGroup-width);\n  max-height: calc(100% - var(--salt-spacing-300) * 2);\n  margin: var(--salt-spacing-300) var(--salt-spacing-200) var(--salt-spacing-100) var(--salt-spacing-200);\n  overflow: auto;\n  display: flex-inline;\n  flex-direction: column;\n  position: fixed;\n  z-index: var(--salt-zIndex-flyover);\n}\n\n.saltToastGroup-bottom-right {\n  bottom: 0;\n  right: 0;\n  justify-content: flex-end;\n}\n\n.saltToastGroup-top-right {\n  top: 0;\n  right: 0;\n  justify-content: flex-start;\n}\n\n.salt-density-high {\n  --toastGroup-width: 210px;\n}\n\n.salt-density-medium {\n  --toastGroup-width: 260px;\n}\n\n.salt-density-low {\n  --toastGroup-width: 310px;\n}\n\n.salt-density-touch {\n  --toastGroup-width: 360px;\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=ToastGroup.css.js.map

package/dist-es/toast-group/ToastGroup.css.js.map

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

package/dist-es/toast-group/ToastGroup.js

@@ -0,0 +1,28 @@
+import { jsx } from 'react/jsx-runtime';
+import { clsx } from 'clsx';
+import { forwardRef } from 'react';
+import { makePrefixer } from '@salt-ds/core';
+import { useWindow } from '@salt-ds/window';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import css_248z from './ToastGroup.css.js';
+
+const withBaseName = makePrefixer("saltToastGroup");
+const ToastGroup = forwardRef(
+  function ToastGroup2(props, ref) {
+    const { children, className, placement = "bottom-right", ...rest } = props;
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+      testId: "salt-toast",
+      css: css_248z,
+      window: targetWindow
+    });
+    return /* @__PURE__ */ jsx("div", {
+      className: clsx(withBaseName(), withBaseName(placement), className),
+      ...rest,
+      children
+    });
+  }
+);
+
+export { ToastGroup };
+//# sourceMappingURL=ToastGroup.js.map

package/dist-es/toast-group/ToastGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToastGroup.js","sources":["../src/toast-group/ToastGroup.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { ComponentPropsWithoutRef, forwardRef } from \"react\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport toastGroupCss from \"./ToastGroup.css\";\n\nconst withBaseName = makePrefixer(\"saltToastGroup\");\n\nexport interface ToastGroupProps extends ComponentPropsWithoutRef<\"div\"> {\n  placement?: \"top-right\" | \"bottom-right\";\n}\n\nexport const ToastGroup = forwardRef<HTMLDivElement, ToastGroupProps>(\n  function ToastGroup(props, ref) {\n    const { children, className, placement = \"bottom-right\", ...rest } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-toast\",\n      css: toastGroupCss,\n      window: targetWindow,\n    });\n\n    return (\n      <div\n        className={clsx(withBaseName(), withBaseName(placement), className)}\n        {...rest}\n      >\n        {children}\n      </div>\n    );\n  }\n);\n"],"names":["ToastGroup","toastGroupCss"],"mappings":";;;;;;;;AAQA,MAAM,YAAA,GAAe,aAAa,gBAAgB,CAAA,CAAA;AAM3C,MAAM,UAAa,GAAA,UAAA;AAAA,EACxB,SAASA,WAAW,CAAA,KAAA,EAAO,GAAK,EAAA;AAC9B,IAAA,MAAM,EAAE,QAAU,EAAA,SAAA,EAAW,SAAY,GAAA,cAAA,EAAA,GAAmB,MAAS,GAAA,KAAA,CAAA;AAErE,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,YAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,MACC,WAAW,IAAK,CAAA,YAAA,IAAgB,YAAa,CAAA,SAAS,GAAG,SAAS,CAAA;AAAA,MACjE,GAAG,IAAA;AAAA,MAEH,QAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

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

@@ -0,0 +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.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-es/tokenized-input/TokenizedInput.css.js.map

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

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

@@ -0,0 +1,19 @@
+import { jsx } from 'react/jsx-runtime';
+import { useForkRef } from '@salt-ds/core';
+import { forwardRef } from 'react';
+import { TokenizedInputBase } from './TokenizedInputBase.js';
+import { useTokenizedInput } from './useTokenizedInput.js';
+
+const TokenizedInput = forwardRef(function TokenizedInput2(props, ref) {
+  const { inputRef: inputRefProp, ...restProps } = props;
+  const { inputRef, helpers, inputProps } = useTokenizedInput(restProps);
+  return /* @__PURE__ */ jsx(TokenizedInputBase, {
+    helpers,
+    inputRef: useForkRef(inputRef, inputRefProp),
+    ref,
+    ...inputProps
+  });
+});
+
+export { TokenizedInput };
+//# sourceMappingURL=TokenizedInput.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TokenizedInput.js","sources":["../src/tokenized-input/TokenizedInput.tsx"],"sourcesContent":["import { useForkRef, UseTooltipProps } from \"@salt-ds/core\";\nimport { ComponentType, ForwardedRef, forwardRef } from \"react\";\nimport {\n  TokenizedInputBase,\n  TokenizedInputBaseProps,\n} from \"./TokenizedInputBase\";\nimport { useTokenizedInput } from \"./useTokenizedInput\";\n\nexport type StringToItem<Item> = (\n  selectedItems: Array<Item>,\n  value: string\n) => Item | null | undefined;\n\nexport type ChangeHandler<Item> = (selectedItems: Item[] | undefined) => void;\n\nexport interface TokenizedInputProps<Item>\n  extends Omit<\n    TokenizedInputBaseProps<Item>,\n    | \"activeIndices\"\n    | \"focused\"\n    | \"highlightedIndex\"\n    | \"helpers\"\n    | \"onRemoveItem\"\n  > {\n  Tooltip?: ComponentType;\n  delimiter?: string | Array<string>;\n  disableAddOnBlur?: boolean;\n  initialSelectedItems?: Array<Item>;\n  onChange?: ChangeHandler<Item>;\n  onCollapse?: () => void;\n  onExpand?: () => void;\n  stringToItem?: StringToItem<Item>;\n  tooltipEnterDelay?: UseTooltipProps[\"enterDelay\"];\n  tooltipLeaveDelay?: UseTooltipProps[\"leaveDelay\"];\n  tooltipPlacement?: UseTooltipProps[\"placement\"];\n}\n\nexport const TokenizedInput = forwardRef(function TokenizedInput<Item>(\n  props: TokenizedInputProps<Item>,\n  ref: ForwardedRef<HTMLDivElement>\n) {\n  const { inputRef: inputRefProp, ...restProps } = props;\n\n  const { inputRef, helpers, inputProps } = useTokenizedInput(restProps);\n\n  return (\n    <TokenizedInputBase\n      helpers={helpers}\n      inputRef={useForkRef(inputRef, inputRefProp)}\n      ref={ref}\n      {...inputProps}\n    />\n  );\n});\n"],"names":["TokenizedInput"],"mappings":";;;;;;AAqCO,MAAM,cAAiB,GAAA,UAAA,CAAW,SAASA,eAAAA,CAChD,OACA,GACA,EAAA;AACA,EAAA,MAAM,EAAE,QAAA,EAAU,YAAiB,EAAA,GAAA,SAAA,EAAc,GAAA,KAAA,CAAA;AAEjD,EAAA,MAAM,EAAE,QAAU,EAAA,OAAA,EAAS,UAAW,EAAA,GAAI,kBAAkB,SAAS,CAAA,CAAA;AAErE,EAAA,uBACG,GAAA,CAAA,kBAAA,EAAA;AAAA,IACC,OAAA;AAAA,IACA,QAAA,EAAU,UAAW,CAAA,QAAA,EAAU,YAAY,CAAA;AAAA,IAC3C,GAAA;AAAA,IACC,GAAG,UAAA;AAAA,GACN,CAAA,CAAA;AAEJ,CAAC;;;;"}