@salt-ds/lab 1.0.0-alpha.1 → 1.0.0-alpha.11

package/dist-cjs/packages/lab/src/tabs/TabActivationIndicator.css.js

@@ -1,9 +0,0 @@
-'use strict';
-
-var styleInject_es = require('../../../../node_modules/style-inject/dist/style-inject.es.js');
-
-var css_248z = ".saltTabActivationIndicator-no-background {\n  --tabs-activationIndicator-background: transparent !important;\n}\n\n.saltTabActivationIndicator {\n  --tabs-activationIndicator-background: var(--salt-container-primary-borderColor);\n\n  background: var(--saltTabs-activationIndicator-background, var(--tabs-activationIndicator-background));\n  bottom: 0;\n  height: var(--tabs-activationIndicator-height, auto);\n  inset: var(--tabs-activationIndicator-inset);\n  position: absolute;\n  width: var(--tabs-activationIndicator-width, auto);\n}\n\n/* the Active Tab indicator, uses navigable styles */\n.saltTabActivationIndicator-thumb {\n  inset: var(--tabs-activationIndicator-thumb-inset);\n  position: absolute;\n  height: var(--tabs-activationIndicator-thumb-height, auto);\n  background: var(--salt-navigable-indicator-active);\n  transition: var(--saltTabs-activationIndicator-transition, var(--tabs-activationIndicator-transition, left 0.3s ease));\n  width: var(--tabs-activationIndicator-thumb-width, auto);\n  z-index: 1;\n}\n";
-styleInject_es(css_248z);
-
-module.exports = css_248z;
-//# sourceMappingURL=TabActivationIndicator.css.js.map

package/dist-cjs/packages/lab/src/tabs/TabActivationIndicator.css.js.map

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

package/dist-cjs/packages/lab/src/tabs/TabActivationIndicator.js

@@ -1,34 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var jsxRuntime = require('react/jsx-runtime');
-var core = require('@salt-ds/core');
-var React = require('react');
-var useActivationIndicator = require('./useActivationIndicator.js');
-require('./TabActivationIndicator.css.js');
-
-const withBaseName = core.makePrefixer("saltTabActivationIndicator");
-const TabActivationIndicator = ({
-  hideThumb = false,
-  orientation = "horizontal",
-  tabId
-}) => {
-  const rootRef = React.useRef(null);
-  const style = useActivationIndicator.useActivationIndicator({
-    rootRef,
-    tabId,
-    orientation
-  });
-  return /* @__PURE__ */ jsxRuntime.jsx("div", {
-    className: withBaseName(),
-    ref: rootRef,
-    children: hideThumb === false ? /* @__PURE__ */ jsxRuntime.jsx("div", {
-      className: withBaseName("thumb"),
-      style
-    }) : null
-  });
-};
-
-exports.TabActivationIndicator = TabActivationIndicator;
-//# sourceMappingURL=TabActivationIndicator.js.map

package/dist-cjs/packages/lab/src/tabs/TabActivationIndicator.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"TabActivationIndicator.js","sources":["../src/tabs/TabActivationIndicator.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport React, { useRef } from \"react\";\n\nimport { useActivationIndicator } from \"./useActivationIndicator\";\n\nimport \"./TabActivationIndicator.css\";\n\ninterface TabActivationIndicatorProps {\n  hideThumb?: boolean;\n  orientation?: \"horizontal\" | \"vertical\";\n  disableAnimation?: boolean;\n  tabId?: string;\n}\n\nconst withBaseName = makePrefixer(\"saltTabActivationIndicator\");\n\nexport const TabActivationIndicator = ({\n  hideThumb = false,\n  orientation = \"horizontal\",\n  tabId,\n}: TabActivationIndicatorProps) => {\n  const rootRef = useRef<HTMLDivElement | null>(null);\n  const style = useActivationIndicator({\n    rootRef,\n    tabId,\n    orientation,\n  });\n\n  return (\n    <div className={withBaseName()} ref={rootRef}>\n      {hideThumb === false ? (\n        <div className={withBaseName(\"thumb\")} style={style} />\n      ) : null}\n    </div>\n  );\n};\n"],"names":["makePrefixer","useRef","useActivationIndicator","jsx"],"mappings":";;;;;;;;;;AAcA,MAAM,YAAA,GAAeA,kBAAa,4BAA4B,CAAA,CAAA;AAEvD,MAAM,yBAAyB,CAAC;AAAA,EACrC,SAAY,GAAA,KAAA;AAAA,EACZ,WAAc,GAAA,YAAA;AAAA,EACd,KAAA;AACF,CAAmC,KAAA;AACjC,EAAM,MAAA,OAAA,GAAUC,aAA8B,IAAI,CAAA,CAAA;AAClD,EAAA,MAAM,QAAQC,6CAAuB,CAAA;AAAA,IACnC,OAAA;AAAA,IACA,KAAA;AAAA,IACA,WAAA;AAAA,GACD,CAAA,CAAA;AAED,EAAA,uBACGC,cAAA,CAAA,KAAA,EAAA;AAAA,IAAI,WAAW,YAAa,EAAA;AAAA,IAAG,GAAK,EAAA,OAAA;AAAA,IAClC,QAAA,EAAA,SAAA,KAAc,wBACZA,cAAA,CAAA,KAAA,EAAA;AAAA,MAAI,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,MAAG,KAAA;AAAA,KAAc,CACnD,GAAA,IAAA;AAAA,GACN,CAAA,CAAA;AAEJ;;;;"}

package/dist-cjs/packages/lab/src/tabs/TabPanel.css.js

@@ -1,9 +0,0 @@
-'use strict';
-
-var styleInject_es = require('../../../../node_modules/style-inject/dist/style-inject.es.js');
-
-var css_248z = ".saltTabPanel {\n  flex: 1 1 auto;\n}\n";
-styleInject_es(css_248z);
-
-module.exports = css_248z;
-//# sourceMappingURL=TabPanel.css.js.map

package/dist-cjs/packages/lab/src/tabs/TabPanel.css.js.map

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

package/dist-cjs/packages/lab/src/tabs/TabPanel.js

@@ -1,24 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
-var clsx = require('clsx');
-var core = require('@salt-ds/core');
-require('./TabPanel.css.js');
-
-const withBaseName = core.makePrefixer("saltTabPanel");
-const TabPanel = React.forwardRef(function TabPanel2({ children, className, enableClose, ...htmlAttributes }, forwardedRef) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", {
-    ...htmlAttributes,
-    className: clsx.clsx(withBaseName(), className),
-    ref: forwardedRef,
-    role: "tabpanel",
-    tabIndex: 0,
-    children
-  });
-});
-
-exports.TabPanel = TabPanel;
-//# sourceMappingURL=TabPanel.js.map

package/dist-cjs/packages/lab/src/tabs/TabPanel.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"TabPanel.js","sources":["../src/tabs/TabPanel.tsx"],"sourcesContent":["import { forwardRef, ForwardedRef, HTMLAttributes } from \"react\";\nimport { clsx } from \"clsx\";\nimport { makePrefixer } from \"@salt-ds/core\";\n\nimport \"./TabPanel.css\";\n\nconst withBaseName = makePrefixer(\"saltTabPanel\");\n\nexport interface TabPanelProps extends HTMLAttributes<HTMLDivElement> {\n  enableClose?: boolean;\n  label: string;\n}\n\nexport const TabPanel = forwardRef(function TabPanel(\n  { children, className, enableClose, ...htmlAttributes }: TabPanelProps,\n  forwardedRef: ForwardedRef<HTMLDivElement>\n) {\n  return (\n    <div\n      {...htmlAttributes}\n      className={clsx(withBaseName(), className)}\n      ref={forwardedRef}\n      role=\"tabpanel\"\n      tabIndex={0}\n    >\n      {children}\n    </div>\n  );\n});\n"],"names":["makePrefixer","forwardRef","TabPanel","jsx","clsx"],"mappings":";;;;;;;;;;AAMA,MAAM,YAAA,GAAeA,kBAAa,cAAc,CAAA,CAAA;AAOnC,MAAA,QAAA,GAAWC,gBAAW,CAAA,SAASC,SAC1C,CAAA,EAAE,UAAU,SAAW,EAAA,WAAA,EAAA,GAAgB,cAAe,EAAA,EACtD,YACA,EAAA;AACA,EAAA,uBACGC,cAAA,CAAA,KAAA,EAAA;AAAA,IACE,GAAG,cAAA;AAAA,IACJ,SAAW,EAAAC,SAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,IACzC,GAAK,EAAA,YAAA;AAAA,IACL,IAAK,EAAA,UAAA;AAAA,IACL,QAAU,EAAA,CAAA;AAAA,IAET,QAAA;AAAA,GACH,CAAA,CAAA;AAEJ,CAAC;;;;"}

package/dist-cjs/packages/lab/src/tabs/Tabs.css.js

@@ -1,9 +0,0 @@
-'use strict';
-
-var styleInject_es = require('../../../../node_modules/style-inject/dist/style-inject.es.js');
-
-var css_248z = ".saltTabs {\n  display: flex;\n  flex-direction: column;\n}\n";
-styleInject_es(css_248z);
-
-module.exports = css_248z;
-//# sourceMappingURL=Tabs.css.js.map

package/dist-cjs/packages/lab/src/tabs/Tabs.css.js.map

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

package/dist-cjs/packages/lab/src/tabs/Tabs.js

@@ -1,94 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
-var clsx = require('clsx');
-var core = require('@salt-ds/core');
-var useTabs = require('./useTabs.js');
-var Tabstrip = require('./Tabstrip.js');
-require('./Tabs.css.js');
-
-const withBaseName = core.makePrefixer("saltTabs");
-const Tabs = React.forwardRef(function Tabs2({
-  activeTabIndex: activeTabIndexProp,
-  allowDragDrop,
-  centered,
-  children,
-  className,
-  defaultActiveTabIndex,
-  editing,
-  enableAddTab,
-  enableCloseTab,
-  enableRenameTab,
-  onActiveChange: onActiveChangeProp,
-  onAddTab,
-  onCloseTab,
-  onEnterEditMode,
-  onExitEditMode,
-  onMoveTab,
-  overflowMenu,
-  variant,
-  ...htmlAttributes
-}, forwardedRef) {
-  const tabstripRef = React.useRef(null);
-  React.useImperativeHandle(
-    forwardedRef,
-    () => ({
-      focus: () => {
-        var _a;
-        return (_a = tabstripRef.current) == null ? void 0 : _a.focus();
-      }
-    }),
-    []
-  );
-  const { id, onActiveChange, activeTabIndex, tabPanel, tabs } = useTabs.useTabs({
-    activeTabIndex: activeTabIndexProp,
-    children,
-    defaultActiveTabIndex,
-    onActiveChange: onActiveChangeProp
-  });
-  const tabstripProps = {
-    activeTabIndex,
-    allowDragDrop,
-    centered,
-    editing,
-    variant,
-    enableAddTab,
-    enableCloseTab,
-    enableRenameTab,
-    onAddTab,
-    onCloseTab,
-    onEnterEditMode,
-    onExitEditMode,
-    onMoveTab,
-    overflowMenu
-  };
-  React.useCallback(
-    (tabIndex) => {
-      if (tabIndex === activeTabIndex) {
-        return `${id}-${tabIndex}-panel`;
-      }
-    },
-    [id, activeTabIndex]
-  );
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", {
-    ...htmlAttributes,
-    className: clsx.clsx(withBaseName(), className),
-    id: `${id}-tabs`,
-    children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Tabstrip.Tabstrip, {
-        ...tabstripProps,
-        id,
-        onActiveChange,
-        ref: tabstripRef,
-        source: tabs
-      }),
-      tabPanel
-    ]
-  });
-});
-
-exports.Tabs = Tabs;
-//# sourceMappingURL=Tabs.js.map

package/dist-cjs/packages/lab/src/tabs/Tabs.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Tabs.js","sources":["../src/tabs/Tabs.tsx"],"sourcesContent":["import {\n  forwardRef,\n  ForwardedRef,\n  useCallback,\n  useImperativeHandle,\n  useRef,\n} from \"react\";\nimport { clsx } from \"clsx\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { useTabs } from \"./useTabs\";\nimport { Tabstrip } from \"./Tabstrip\";\nimport { FocusAPI, TabstripProps } from \"./TabsTypes\";\n\nimport \"./Tabs.css\";\n\nconst withBaseName = makePrefixer(\"saltTabs\");\n\nexport type TabsProps = Omit<TabstripProps, \"defaultSource\">;\n\nexport const Tabs = forwardRef(function Tabs(\n  {\n    activeTabIndex: activeTabIndexProp,\n    allowDragDrop,\n    centered,\n    children,\n    className,\n    defaultActiveTabIndex,\n    editing,\n    enableAddTab,\n    enableCloseTab,\n    enableRenameTab,\n    onActiveChange: onActiveChangeProp,\n    onAddTab,\n    onCloseTab,\n    onEnterEditMode,\n    onExitEditMode,\n    onMoveTab,\n    overflowMenu,\n    variant,\n    ...htmlAttributes\n  }: TabsProps,\n  forwardedRef: ForwardedRef<FocusAPI>\n) {\n  const tabstripRef = useRef<HTMLDivElement>(null);\n  useImperativeHandle(\n    forwardedRef,\n    () =>\n      ({\n        focus: () => tabstripRef.current?.focus(),\n      } as FocusAPI),\n    []\n  );\n\n  const { id, onActiveChange, activeTabIndex, tabPanel, tabs } = useTabs({\n    activeTabIndex: activeTabIndexProp,\n    children,\n    defaultActiveTabIndex,\n    onActiveChange: onActiveChangeProp,\n  });\n\n  const tabstripProps = {\n    activeTabIndex,\n    allowDragDrop,\n    centered,\n    editing,\n    variant,\n    enableAddTab,\n    enableCloseTab,\n    enableRenameTab,\n    onAddTab,\n    onCloseTab,\n    onEnterEditMode,\n    onExitEditMode,\n    onMoveTab,\n    overflowMenu,\n  };\n  const getTabPanelId = useCallback(\n    (tabIndex: number) => {\n      if (tabIndex === activeTabIndex) {\n        return `${id}-${tabIndex}-panel`;\n      }\n    },\n    [id, activeTabIndex]\n  );\n\n  // TODO need to inject aria-controls\n  return (\n    <div\n      {...htmlAttributes}\n      className={clsx(withBaseName(), className)}\n      id={`${id}-tabs`}\n    >\n      <Tabstrip\n        {...tabstripProps}\n        id={id}\n        onActiveChange={onActiveChange}\n        ref={tabstripRef}\n        source={tabs}\n      />\n      {tabPanel}\n    </div>\n  );\n});\n"],"names":["makePrefixer","forwardRef","Tabs","useRef","useImperativeHandle","useTabs","useCallback","jsxs","clsx","jsx","Tabstrip"],"mappings":";;;;;;;;;;;;AAeA,MAAM,YAAA,GAAeA,kBAAa,UAAU,CAAA,CAAA;AAI/B,MAAA,IAAA,GAAOC,gBAAW,CAAA,SAASC,KACtC,CAAA;AAAA,EACE,cAAgB,EAAA,kBAAA;AAAA,EAChB,aAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,qBAAA;AAAA,EACA,OAAA;AAAA,EACA,YAAA;AAAA,EACA,cAAA;AAAA,EACA,eAAA;AAAA,EACA,cAAgB,EAAA,kBAAA;AAAA,EAChB,QAAA;AAAA,EACA,UAAA;AAAA,EACA,eAAA;AAAA,EACA,cAAA;AAAA,EACA,SAAA;AAAA,EACA,YAAA;AAAA,EACA,OAAA;AAAA,EACG,GAAA,cAAA;AACL,CAAA,EACA,YACA,EAAA;AACA,EAAM,MAAA,WAAA,GAAcC,aAAuB,IAAI,CAAA,CAAA;AAC/C,EAAAC,yBAAA;AAAA,IACE,YAAA;AAAA,IACA,OACG;AAAA,MACC,OAAO,MAAG;AAhDlB,QAAA,IAAA,EAAA,CAAA;AAgDqB,QAAA,OAAA,CAAA,EAAA,GAAA,WAAA,CAAY,YAAZ,IAAqB,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,KAAA,EAAA,CAAA;AAAA,OAAA;AAAA,KACpC,CAAA;AAAA,IACF,EAAC;AAAA,GACH,CAAA;AAEA,EAAA,MAAM,EAAE,EAAI,EAAA,cAAA,EAAgB,gBAAgB,QAAU,EAAA,IAAA,KAASC,eAAQ,CAAA;AAAA,IACrE,cAAgB,EAAA,kBAAA;AAAA,IAChB,QAAA;AAAA,IACA,qBAAA;AAAA,IACA,cAAgB,EAAA,kBAAA;AAAA,GACjB,CAAA,CAAA;AAED,EAAA,MAAM,aAAgB,GAAA;AAAA,IACpB,cAAA;AAAA,IACA,aAAA;AAAA,IACA,QAAA;AAAA,IACA,OAAA;AAAA,IACA,OAAA;AAAA,IACA,YAAA;AAAA,IACA,cAAA;AAAA,IACA,eAAA;AAAA,IACA,QAAA;AAAA,IACA,UAAA;AAAA,IACA,eAAA;AAAA,IACA,cAAA;AAAA,IACA,SAAA;AAAA,IACA,YAAA;AAAA,GACF,CAAA;AACA,EAAsBC,iBAAA;AAAA,IACpB,CAAC,QAAqB,KAAA;AACpB,MAAA,IAAI,aAAa,cAAgB,EAAA;AAC/B,QAAA,OAAO,GAAG,EAAM,CAAA,CAAA,EAAA,QAAA,CAAA,MAAA,CAAA,CAAA;AAAA,OAClB;AAAA,KACF;AAAA,IACA,CAAC,IAAI,cAAc,CAAA;AAAA,IACrB;AAGA,EAAA,uBACGC,eAAA,CAAA,KAAA,EAAA;AAAA,IACE,GAAG,cAAA;AAAA,IACJ,SAAW,EAAAC,SAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,IACzC,IAAI,CAAG,EAAA,EAAA,CAAA,KAAA,CAAA;AAAA,IAEP,QAAA,EAAA;AAAA,sBAACC,cAAA,CAAAC,iBAAA,EAAA;AAAA,QACE,GAAG,aAAA;AAAA,QACJ,EAAA;AAAA,QACA,cAAA;AAAA,QACA,GAAK,EAAA,WAAA;AAAA,QACL,MAAQ,EAAA,IAAA;AAAA,OACV,CAAA;AAAA,MACC,QAAA;AAAA,KAAA;AAAA,GACH,CAAA,CAAA;AAEJ,CAAC;;;;"}

package/dist-cjs/packages/lab/src/tabs/Tabstrip.css.js

@@ -1,9 +0,0 @@
-'use strict';
-
-var styleInject_es = require('../../../../node_modules/style-inject/dist/style-inject.es.js');
-
-var css_248z = "/* Component class applied to the root element */\n.saltTabstrip {\n  --tabs-tabstrip-height: var(--saltTabs-tabstrip-height, var(--salt-size-stackable));\n  --tabs-tabstrip-dragging-display: none;\n  --tabs-tabstrip-display: inline-flex;\n  --tabs-tabstrip-background: transparent;\n\n  align-items: flex-start;\n  align-self: var(--saltTabs-tabstrip-alignSelf, stretch);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight);\n  position: relative;\n  overflow: hidden;\n  display: flex;\n  min-width: 28px;\n  width: 100%;\n}\n\n/* Tabstrip orientation is horizontal */\n.saltTabstrip-horizontal {\n  --tabs-activationIndicator-borderStyle: none none solid none;\n  --tabs-activationIndicator-height: 1px;\n  --tabs-activationIndicator-inset: auto 0px 0px 0px;\n  --tabs-activationIndicator-transitionProperty: left;\n  --tabs-activationIndicator-thumb-height: 2px;\n  --tabs-activationIndicator-thumb-inset: -1px 0 0 0;\n}\n\n/* Tabstrip orientation is vertical */\n.saltTabstrip-vertical {\n  --tabs-activationIndicator-transition: top 0.3s ease;\n  --tabs-activationIndicator-borderStyle: none solid none none;\n  --tabs-activationIndicator-inset: 0px 0px 0px auto;\n  --tabs-activationIndicator-transitionProperty: top;\n  --tabs-activationIndicator-width: 1px;\n  --tabs-activationIndicator-thumb-inset: 0 0 0 -1px;\n  --tabs-activationIndicator-thumb-width: 2px;\n\n  align-self: flex-start;\n  display: inline-flex;\n}\n\n.saltTabstrip-draggingTab {\n  --saltTabs-activationIndicator-transition: none;\n}\n\n.saltTabstrip-draggingTab .saltTab {\n  pointer-events: none;\n}\n\n/* Tabstrip orientation is horizontal */\n.saltTabstrip-horizontal {\n  height: var(--tabs-tabstrip-height);\n}\n\n.saltTabstrip-addButton,\n.saltDropdown.saltTabstrip-overflowMenu {\n  margin-left: var(--salt-size-unit);\n}\n\n.saltTabstrip-overflowMenu.saltDropdown {\n  --saltIcon-margin: 2px 0 0 0px;\n}\n\n.saltTabstrip-overflowMenu-open {\n  --saltButton-background: var(--salt-actionable-secondary-background-active);\n  --saltButton-text-color: var(--salt-actionable-secondary-text-color-active);\n}\n\n.saltTabstrip-overflowMenu-open .saltButton {\n  --saltIcon-color: var(--salt-actionable-secondary-foreground-active);\n}\n\n.saltTabstrip-inner {\n  width: 100%;\n  align-items: center;\n  display: flex;\n  flex-basis: auto;\n  flex-grow: 0;\n  flex-shrink: 1;\n  flex-wrap: wrap;\n  justify-content: flex-start;\n  line-height: var(--tabs-tabstrip-height);\n}\n\n.saltTabstrip-vertical .saltTabstrip-inner {\n  flex-direction: column;\n  height: auto;\n}\n\n.saltTabstrip-centered .saltTabstrip-inner {\n  justify-content: center;\n}\n\n/* Styling applied to Draggable wrapper when used to drag a Tab */\n.saltDraggable[class*=\"tabstrip\"] {\n  --tabs-tabstrip-display: flex;\n  --tabs-tabstrip-height: var(--saltTabs-tabstrip-height, var(--salt-size-stackable));\n  --tabs-tabstrip-dragging-display: block;\n\n  --tabs-tab-background: var(--salt-navigable-primary-background-hover);\n  --tabs-tab-before-content: \"\";\n  --tabs-tab-before-background: var(--salt-navigable-indicator-hover);\n  --tabs-tab-before-height: var(--tabs-activationIndicator-thumb-height);\n  --tabs-tab-before-inset: var(--tabs-activationIndicator-inset);\n  --tabs-tab-before-width: var(--tabs-activationIndicator-thumb-width);\n  --tabs-tab-cursor: var(--salt-draggable-grab-cursor-active);\n  --tabs-tab-position: static;\n\n  font-size: 12px;\n}\n\n.saltDraggable-tabstrip-horizontal {\n  --tabs-tabstrip-height: var(--saltTabs-tabstrip-height, var(--salt-size-stackable));\n  --tabs-activationIndicator-thumb-height: 2px;\n  --tabs-activationIndicator-inset: auto 0px 0px 0px;\n\n  line-height: var(--tabs-tabstrip-height);\n}\n.saltDraggable-tabstrip-vertical {\n  --tabs-activationIndicator-inset: 0px 0px 0px auto;\n  --tabs-activationIndicator-thumb-width: 2px;\n}\n\n.saltDraggable[class*=\"tabstrip\"] .saltTab[aria-selected=\"true\"]:before {\n  --tabs-tab-before-background: var(--salt-navigable-indicator-active);\n}\n\n.saltDraggable[class*=\"tabstrip\"] .saltTab {\n  box-shadow: var(--salt-overlayable-shadow-drag);\n}\n\n[data-overflowed] {\n  order: 99;\n  visibility: hidden;\n}\n\n.saltTabstrip-overflowMenu-dropTarget:after {\n  background: var(--salt-palette-interact-background-active);\n  content: \"\";\n  position: absolute;\n  height: 2px;\n  left: 0;\n  right: 0;\n  bottom: 0;\n}\n";
-styleInject_es(css_248z);
-
-module.exports = css_248z;
-//# sourceMappingURL=Tabstrip.css.js.map

package/dist-cjs/packages/lab/src/tabs/Tabstrip.css.js.map

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

package/dist-cjs/packages/lab/src/tabs/Tabstrip.js

@@ -1,397 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
-var core = require('@salt-ds/core');
-var icons = require('@salt-ds/icons');
-var clsx = require('clsx');
-require('../dropdown/DropdownBase.js');
-require('../dropdown/DropdownButton.js');
-var Dropdown = require('../dropdown/Dropdown.js');
-require('../responsive/useResizeObserver.js');
-var useOverflowCollectionItems = require('../responsive/useOverflowCollectionItems.js');
-var useOverflowLayout = require('../responsive/useOverflowLayout.js');
-require('../form-field-context/FormFieldContext.js');
-var Tab = require('./Tab.js');
-var TabActivationIndicator = require('./TabActivationIndicator.js');
-var useTabstrip = require('./useTabstrip.js');
-var Tooltip = require('../tooltip/Tooltip.js');
-require('../tooltip/TooltipContext.js');
-var useTooltip = require('../tooltip/useTooltip.js');
-require('./Tabstrip.css.js');
-require('./ThemeTabstrip.css.js');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-
-const withBaseName = core.makePrefixer("saltTabstrip");
-const ADD_TAB_LABEL = "Create Tab";
-const tabDescriptors = (tabs) => tabs && tabs.map(
-  (tab) => typeof tab === "string" ? { label: tab } : tab
-);
-const Tabstrip = React.forwardRef(function Tabstrip2({
-  activeTabIndex: activeTabIndexProp,
-  allowDragDrop = false,
-  centered = false,
-  children,
-  className: classNameProp,
-  defaultSource,
-  defaultActiveTabIndex,
-  editing,
-  variant,
-  enableAddTab = false,
-  enableCloseTab,
-  enableRenameTab,
-  id: idProp,
-  keyBoardActivation = "manual",
-  onAddTab,
-  onActiveChange,
-  onCloseTab,
-  onEnterEditMode,
-  onExitEditMode,
-  onMouseDown,
-  onMoveTab,
-  orientation = "horizontal",
-  overflowMenu: overflowMenuProp = true,
-  promptForNewTabName = true,
-  showActivationIndicator = true,
-  source,
-  title,
-  ...htmlAttributes
-}, forwardedRef) {
-  var _a;
-  const root = React.useRef(null);
-  const activeRef = React.useRef(
-    activeTabIndexProp || defaultActiveTabIndex || 0
-  );
-  const overflowItemsRef = React.useRef([]);
-  const [showOverflowMenu, _setShowOverflowMenu] = React.useState(false);
-  const setShowOverflowMenu = React.useCallback((value) => {
-    _setShowOverflowMenu(value);
-  }, []);
-  const tabstripId = core.useIdMemo(idProp);
-  const injectedItems = enableAddTab ? [
-    {
-      source: { label: "Add Tab", position: -1, priority: 1 }
-    }
-  ] : void 0;
-  const collectionHook = useOverflowCollectionItems.useOverflowCollectionItems({
-    children,
-    defaultSource: tabDescriptors(defaultSource),
-    id: tabstripId,
-    injectedItems,
-    label: "Tabstrip",
-    orientation,
-    source: tabDescriptors(source),
-    options: {
-      closeable: enableCloseTab,
-      editable: enableRenameTab,
-      getPriority: (item, index) => {
-        return index === activeRef.current ? 1 : void 0;
-      }
-    }
-  });
-  const childCount = React.useRef(React__default["default"].Children.count(children));
-  const getChildren = () => {
-    if (React__default["default"].Children.count(children) === 0) {
-      return void 0;
-    } else {
-      return React__default["default"].Children.toArray(children);
-    }
-  };
-  const [innerContainerRef, switchOverflowPriorities] = useOverflowLayout.useOverflowLayout({
-    collectionHook,
-    disableOverflow: overflowMenuProp === false,
-    id: tabstripId,
-    orientation,
-    label: "Tabstrip"
-  });
-  overflowItemsRef.current = collectionHook.data;
-  const overflowedItems = collectionHook.data.filter((item) => item.overflowed);
-  const tabMovedHandler = React.useCallback(
-    (fromIndex, toIndex) => {
-      onMoveTab == null ? void 0 : onMoveTab(fromIndex, toIndex);
-      setTimeout(() => {
-        collectionHook.dispatch({
-          type: "reset"
-        });
-      }, 50);
-    },
-    [collectionHook, onMoveTab]
-  );
-  const handleTabSelectionChange = React.useCallback(
-    (tabIndex) => {
-      const selectedItem = collectionHook.data[tabIndex];
-      const prevSelectedItem = collectionHook.data.find(
-        (item) => item.priority === 1 && !item.isOverflowIndicator
-      );
-      if (selectedItem && prevSelectedItem && overflowMenuProp) {
-        switchOverflowPriorities(selectedItem, prevSelectedItem);
-      }
-      onActiveChange == null ? void 0 : onActiveChange(tabIndex);
-      setShowOverflowMenu(false);
-    },
-    [
-      collectionHook.data,
-      onActiveChange,
-      overflowMenuProp,
-      setShowOverflowMenu,
-      switchOverflowPriorities
-    ]
-  );
-  const { getTriggerProps, getTooltipProps } = useTooltip.useTooltip({});
-  const {
-    activeTabIndex,
-    activateTab,
-    addTab,
-    onMouseDown: tabstripHookMouseDown,
-    ...tabstripHook
-  } = useTabstrip.useTabstrip({
-    activeTabIndex: activeTabIndexProp,
-    allowDragDrop,
-    collectionHook,
-    defaultTabs: tabDescriptors(defaultSource),
-    defaultActiveTabIndex,
-    editing,
-    enableAddTab,
-    idRoot: tabstripId,
-    innerContainerRef,
-    keyBoardActivation,
-    onActiveChange: handleTabSelectionChange,
-    onCloseTab,
-    onEnterEditMode,
-    onExitEditMode,
-    onMoveTab: tabMovedHandler,
-    orientation,
-    promptForNewTabName,
-    tabs: (_a = tabDescriptors(source)) != null ? _a : getChildren()
-  });
-  activeRef.current = activeTabIndex;
-  React.useImperativeHandle(
-    forwardedRef,
-    () => ({
-      focus: () => {
-        const { current: tabstrip } = root;
-        if (tabstrip) {
-          const selectedTab = tabstrip.querySelector(
-            '.saltTab[aria-selected="true"]'
-          );
-          if (selectedTab) {
-            selectedTab.focus();
-          }
-        }
-      }
-    }),
-    []
-  );
-  const handleAddTabClick = React.useCallback(() => {
-    if (!collectionHook.isControlled) {
-      addTab();
-    }
-    onAddTab == null ? void 0 : onAddTab();
-  }, [collectionHook.isControlled, onAddTab, addTab]);
-  const selectedIndex = React.useRef(activeTabIndex);
-  const focusedTabIndex = tabstripHook.highlightedIdx;
-  const handleOverflowSelectionChange = React.useCallback(
-    (e, tab) => {
-      if (tab !== null) {
-        activateTab(tab.index);
-      }
-    },
-    [activateTab]
-  );
-  const handleKeydownOverflowMenu = React.useCallback(
-    (e) => {
-      var _a2, _b;
-      (_b = (_a2 = tabstripHook.navigationProps) == null ? void 0 : _a2.onKeyDown) == null ? void 0 : _b.call(_a2, e);
-    },
-    [tabstripHook.navigationProps]
-  );
-  const handleOverflowMenuOpen = React.useCallback(
-    (open) => {
-      setShowOverflowMenu(open);
-    },
-    [setShowOverflowMenu]
-  );
-  const handleMouseDown = React.useCallback(
-    (evt) => {
-      onMouseDown == null ? void 0 : onMouseDown(evt);
-      tabstripHookMouseDown == null ? void 0 : tabstripHookMouseDown(evt);
-    },
-    [onMouseDown, tabstripHookMouseDown]
-  );
-  core.useIsomorphicLayoutEffect(() => {
-    if (selectedIndex.current !== activeTabIndex && overflowMenuProp) {
-      selectedIndex.current = activeTabIndex;
-    }
-  }, [overflowMenuProp, activeTabIndex]);
-  core.useIsomorphicLayoutEffect(() => {
-    if (React__default["default"].Children.count(children) !== childCount.current) {
-      childCount.current = React__default["default"].Children.count(children);
-    }
-  }, [children]);
-  core.useIsomorphicLayoutEffect(() => {
-    if (focusedTabIndex !== activeTabIndex && focusedTabIndex !== -1) {
-      tabstripHook.focusTab(activeTabIndex);
-    }
-  }, [activeTabIndex]);
-  const renderContent = () => {
-    const content = collectionHook.data.filter((item) => !item.isOverflowIndicator && !item.isInjectedItem).map((item, index) => {
-      const tab = item.source;
-      const element = item.element;
-      const selected = index === activeTabIndex;
-      const focusVisible = tabstripHook.focusVisible === index;
-      const overflowed = overflowedItems.findIndex(
-        (item2) => item2.index === index
-      ) !== -1;
-      const tabIsBeingEdited = tabstripHook.editing && selected;
-      const tabIndex = tabIsBeingEdited ? void 0 : selected && !tabstripHook.focusIsWithinComponent ? 0 : -1;
-      const baseProps = {
-        "data-index": index,
-        "data-priority": item.priority,
-        "data-overflowed": overflowed ? true : void 0,
-        ...tabstripHook.navigationProps,
-        id: item.id,
-        key: index,
-        onMouseDown: handleMouseDown,
-        tabIndex
-      };
-      const tabProps = {
-        ...tabstripHook.tabProps,
-        closeable: item.closeable,
-        dragging: tabstripHook.draggedItemIndex === index,
-        editable: item.editable,
-        editing: tabIsBeingEdited,
-        focusVisible,
-        index,
-        onClose: item.closeable ? tabstripHook.closeTab : void 0,
-        orientation,
-        selected
-      };
-      if (React__default["default"].isValidElement(element)) {
-        if (element.type === Tab.Tab) {
-          return React__default["default"].cloneElement(element, { ...baseProps, ...tabProps });
-        } else {
-          return React__default["default"].cloneElement(element, baseProps);
-        }
-      } else {
-        return React__default["default"].createElement(Tab.Tab, {
-          ...baseProps,
-          ...tabProps,
-          label: tab.label
-        });
-      }
-    });
-    const overflowCount = overflowedItems.length;
-    const draggingActiveTab = tabstripHook.draggedItemIndex === activeTabIndex;
-    const showOverflow = tabstripHook.revealOverflowedItems && !draggingActiveTab || showOverflowMenu;
-    const showTooltip = tabstripHook.revealOverflowedItems && draggingActiveTab;
-    const overflowIndicator = collectionHook.data.find(
-      (i) => i.isOverflowIndicator
-    );
-    const [injectedItem] = collectionHook.data.filter((i) => i.isInjectedItem);
-    if (overflowIndicator) {
-      const triggerProps = getTriggerProps();
-      content.push(
-        /* @__PURE__ */ jsxRuntime.jsx(Dropdown.Dropdown, {
-          className: clsx.clsx(withBaseName("overflowMenu"), {
-            [withBaseName("overflowMenu-open")]: showOverflow
-          }),
-          ListProps: {
-            className: clsx.clsx({
-              [withBaseName("overflowMenu-dropTarget")]: tabstripHook.revealOverflowedItems
-            })
-          },
-          "data-overflow-indicator": true,
-          "data-priority": 0,
-          id: overflowIndicator.id,
-          isOpen: showOverflow,
-          onOpenChange: handleOverflowMenuOpen,
-          onKeyDown: handleKeydownOverflowMenu,
-          onSelectionChange: handleOverflowSelectionChange,
-          placement: "bottom-end",
-          source: overflowedItems,
-          selected: null,
-          triggerComponent: /* @__PURE__ */ jsxRuntime.jsx(core.Button, {
-            ...triggerProps,
-            "aria-label": `Tabs overflow menu ${overflowCount} item${overflowCount === 1 ? "" : "s"}`,
-            variant: "secondary",
-            tabIndex: -1,
-            children: /* @__PURE__ */ jsxRuntime.jsx(icons.OverflowMenuIcon, {})
-          }),
-          width: "auto"
-        }, "overflow")
-      );
-      if (showTooltip) {
-        content.push(
-          /* @__PURE__ */ React.createElement(Tooltip.Tooltip, {
-            ...getTooltipProps({
-              title: "Active Tab cannot be moved into overflow list",
-              open: true,
-              status: "warning"
-            }),
-            key: "tooltip"
-          })
-        );
-      }
-    }
-    if (injectedItem) {
-      content.push(
-        /* @__PURE__ */ React.createElement(core.Button, {
-          ...tabstripHook.navigationProps,
-          "aria-label": ADD_TAB_LABEL,
-          "data-priority": injectedItem.priority,
-          "data-overflowed": injectedItem.overflowed,
-          id: injectedItem.id,
-          key: "addButton",
-          onClick: handleAddTabClick,
-          variant: "secondary",
-          tabIndex: -1
-        }, /* @__PURE__ */ jsxRuntime.jsx(icons.AddIcon, {}))
-      );
-    }
-    return content;
-  };
-  const selectedTabOverflowed = overflowedItems.some(
-    (item) => item.index === activeTabIndex
-  );
-  const className = clsx.clsx(
-    withBaseName(),
-    withBaseName(orientation),
-    classNameProp,
-    {
-      [withBaseName("centered")]: centered,
-      [withBaseName("draggingTab")]: tabstripHook.isDragging,
-      [withBaseName("tertiary")]: variant === "tertiary"
-    }
-  );
-  const { id: selectedTabId } = collectionHook.data[activeTabIndex];
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", {
-    ...htmlAttributes,
-    ...tabstripHook.containerProps,
-    className,
-    id: tabstripId,
-    ref: root,
-    role: "tablist",
-    children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", {
-        className: withBaseName("inner"),
-        ref: innerContainerRef,
-        children: renderContent()
-      }),
-      showActivationIndicator ? /* @__PURE__ */ jsxRuntime.jsx(TabActivationIndicator.TabActivationIndicator, {
-        hideThumb: selectedTabOverflowed || tabstripHook.isDragging,
-        orientation,
-        tabId: selectedTabId
-      }) : null,
-      tabstripHook.draggable
-    ]
-  });
-});
-Tabstrip.displayName = "Tabstrip";
-
-exports.Tabstrip = Tabstrip;
-//# sourceMappingURL=Tabstrip.js.map