@salt-ds/lab 1.0.0-alpha.0

package/dist-es/packages/lab/src/tabs/Tab.js.map

@@ -0,0 +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 cx from \"classnames\";\nimport {\n  forwardRef,\n  FocusEvent,\n  ForwardedRef,\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 \"./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 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={cx(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","editable"],"mappings":"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"}

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

@@ -0,0 +1,7 @@
+import styleInject from '../../../../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(css_248z);
+
+export { css_248z as default };
+//# sourceMappingURL=TabActivationIndicator.css.js.map

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

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

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

@@ -0,0 +1,30 @@
+import { jsx } from 'react/jsx-runtime';
+import { makePrefixer } from '@salt-ds/core';
+import { useRef } from 'react';
+import { useActivationIndicator } from './useActivationIndicator.js';
+import './TabActivationIndicator.css.js';
+
+const withBaseName = makePrefixer("saltTabActivationIndicator");
+const TabActivationIndicator = ({
+  hideThumb = false,
+  orientation = "horizontal",
+  tabId
+}) => {
+  const rootRef = useRef(null);
+  const style = useActivationIndicator({
+    rootRef,
+    tabId,
+    orientation
+  });
+  return /* @__PURE__ */ jsx("div", {
+    className: withBaseName(),
+    ref: rootRef,
+    children: hideThumb === false ? /* @__PURE__ */ jsx("div", {
+      className: withBaseName("thumb"),
+      style
+    }) : null
+  });
+};
+
+export { TabActivationIndicator };
+//# sourceMappingURL=TabActivationIndicator.js.map

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

@@ -0,0 +1 @@
+{"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":[],"mappings":";;;;;;AAcA,MAAM,YAAA,GAAe,aAAa,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,GAAU,OAA8B,IAAI,CAAA,CAAA;AAClD,EAAA,MAAM,QAAQ,sBAAuB,CAAA;AAAA,IACnC,OAAA;AAAA,IACA,KAAA;AAAA,IACA,WAAA;AAAA,GACD,CAAA,CAAA;AAED,EAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,IAAI,WAAW,YAAa,EAAA;AAAA,IAAG,GAAK,EAAA,OAAA;AAAA,IAClC,QAAA,EAAA,SAAA,KAAc,wBACZ,GAAA,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-es/packages/lab/src/tabs/TabPanel.css.js

@@ -0,0 +1,7 @@
+import styleInject from '../../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".saltTabPanel {\n  flex: 1 1 auto;\n}\n";
+styleInject(css_248z);
+
+export { css_248z as default };
+//# sourceMappingURL=TabPanel.css.js.map

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

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

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

@@ -0,0 +1,20 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import cx from 'classnames';
+import { makePrefixer } from '@salt-ds/core';
+import './TabPanel.css.js';
+
+const withBaseName = makePrefixer("saltTabPanel");
+const TabPanel = forwardRef(function TabPanel2({ children, className, enableClose, ...htmlAttributes }, forwardedRef) {
+  return /* @__PURE__ */ jsx("div", {
+    ...htmlAttributes,
+    className: cx(withBaseName(), className),
+    ref: forwardedRef,
+    role: "tabpanel",
+    tabIndex: 0,
+    children
+  });
+});
+
+export { TabPanel };
+//# sourceMappingURL=TabPanel.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TabPanel.js","sources":["../src/tabs/TabPanel.tsx"],"sourcesContent":["import { forwardRef, ForwardedRef, HTMLAttributes } from \"react\";\nimport cx from \"classnames\";\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={cx(withBaseName(), className)}\n      ref={forwardedRef}\n      role=\"tabpanel\"\n      tabIndex={0}\n    >\n      {children}\n    </div>\n  );\n});\n"],"names":["TabPanel"],"mappings":";;;;;;AAMA,MAAM,YAAA,GAAe,aAAa,cAAc,CAAA,CAAA;AAOnC,MAAA,QAAA,GAAW,UAAW,CAAA,SAASA,SAC1C,CAAA,EAAE,UAAU,SAAW,EAAA,WAAA,EAAA,GAAgB,cAAe,EAAA,EACtD,YACA,EAAA;AACA,EAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,IACE,GAAG,cAAA;AAAA,IACJ,SAAW,EAAA,EAAA,CAAG,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,IACvC,GAAK,EAAA,YAAA;AAAA,IACL,IAAK,EAAA,UAAA;AAAA,IACL,QAAU,EAAA,CAAA;AAAA,IAET,QAAA;AAAA,GACH,CAAA,CAAA;AAEJ,CAAC;;;;"}

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

@@ -0,0 +1,7 @@
+import styleInject from '../../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".saltTabs {\n  display: flex;\n  flex-direction: column;\n}\n";
+styleInject(css_248z);
+
+export { css_248z as default };
+//# sourceMappingURL=Tabs.css.js.map

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

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

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

@@ -0,0 +1,90 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef, useRef, useImperativeHandle, useCallback } from 'react';
+import cx from 'classnames';
+import { makePrefixer } from '@salt-ds/core';
+import { useTabs } from './useTabs.js';
+import { Tabstrip } from './Tabstrip.js';
+import './Tabs.css.js';
+
+const withBaseName = makePrefixer("saltTabs");
+const Tabs = 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 = useRef(null);
+  useImperativeHandle(
+    forwardedRef,
+    () => ({
+      focus: () => {
+        var _a;
+        return (_a = tabstripRef.current) == null ? void 0 : _a.focus();
+      }
+    }),
+    []
+  );
+  const { id, onActiveChange, activeTabIndex, tabPanel, tabs } = useTabs({
+    activeTabIndex: activeTabIndexProp,
+    children,
+    defaultActiveTabIndex,
+    onActiveChange: onActiveChangeProp
+  });
+  const tabstripProps = {
+    activeTabIndex,
+    allowDragDrop,
+    centered,
+    editing,
+    variant,
+    enableAddTab,
+    enableCloseTab,
+    enableRenameTab,
+    onAddTab,
+    onCloseTab,
+    onEnterEditMode,
+    onExitEditMode,
+    onMoveTab,
+    overflowMenu
+  };
+  useCallback(
+    (tabIndex) => {
+      if (tabIndex === activeTabIndex) {
+        return `${id}-${tabIndex}-panel`;
+      }
+    },
+    [id, activeTabIndex]
+  );
+  return /* @__PURE__ */ jsxs("div", {
+    ...htmlAttributes,
+    className: cx(withBaseName(), className),
+    id: `${id}-tabs`,
+    children: [
+      /* @__PURE__ */ jsx(Tabstrip, {
+        ...tabstripProps,
+        id,
+        onActiveChange,
+        ref: tabstripRef,
+        source: tabs
+      }),
+      tabPanel
+    ]
+  });
+});
+
+export { Tabs };
+//# sourceMappingURL=Tabs.js.map

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

@@ -0,0 +1 @@
+{"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 cx from \"classnames\";\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={cx(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":["Tabs"],"mappings":";;;;;;;;AAeA,MAAM,YAAA,GAAe,aAAa,UAAU,CAAA,CAAA;AAI/B,MAAA,IAAA,GAAO,UAAW,CAAA,SAASA,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,GAAc,OAAuB,IAAI,CAAA,CAAA;AAC/C,EAAA,mBAAA;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,KAAS,OAAQ,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,EAAsB,WAAA;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,uBACG,IAAA,CAAA,KAAA,EAAA;AAAA,IACE,GAAG,cAAA;AAAA,IACJ,SAAW,EAAA,EAAA,CAAG,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,IACvC,IAAI,CAAG,EAAA,EAAA,CAAA,KAAA,CAAA;AAAA,IAEP,QAAA,EAAA;AAAA,sBAAC,GAAA,CAAA,QAAA,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-es/packages/lab/src/tabs/Tabstrip.css.js

@@ -0,0 +1,7 @@
+import styleInject from '../../../../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(css_248z);
+
+export { css_248z as default };
+//# sourceMappingURL=Tabstrip.css.js.map

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

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

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

@@ -0,0 +1,389 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React, { forwardRef, useRef, useState, useCallback, useImperativeHandle, createElement } from 'react';
+import { makePrefixer, useIdMemo, useIsomorphicLayoutEffect, Button } from '@salt-ds/core';
+import { OverflowMenuIcon, AddIcon } from '@salt-ds/icons';
+import cx from 'classnames';
+import '../dropdown/DropdownBase.js';
+import '../dropdown/DropdownButton.js';
+import { Dropdown } from '../dropdown/Dropdown.js';
+import '../responsive/useResizeObserver.js';
+import { useOverflowCollectionItems } from '../responsive/useOverflowCollectionItems.js';
+import { useOverflowLayout } from '../responsive/useOverflowLayout.js';
+import '../form-field-context/FormFieldContext.js';
+import { Tab } from './Tab.js';
+import { TabActivationIndicator } from './TabActivationIndicator.js';
+import { useTabstrip } from './useTabstrip.js';
+import { Tooltip } from '../tooltip/Tooltip.js';
+import '../tooltip/TooltipContext.js';
+import { useTooltip } from '../tooltip/useTooltip.js';
+import './Tabstrip.css.js';
+import './ThemeTabstrip.css.js';
+
+const withBaseName = makePrefixer("saltTabstrip");
+const ADD_TAB_LABEL = "Create Tab";
+const tabDescriptors = (tabs) => tabs && tabs.map(
+  (tab) => typeof tab === "string" ? { label: tab } : tab
+);
+const Tabstrip = 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 = useRef(null);
+  const activeRef = useRef(
+    activeTabIndexProp || defaultActiveTabIndex || 0
+  );
+  const overflowItemsRef = useRef([]);
+  const [showOverflowMenu, _setShowOverflowMenu] = useState(false);
+  const setShowOverflowMenu = useCallback((value) => {
+    _setShowOverflowMenu(value);
+  }, []);
+  const tabstripId = useIdMemo(idProp);
+  const injectedItems = enableAddTab ? [
+    {
+      source: { label: "Add Tab", position: -1, priority: 1 }
+    }
+  ] : void 0;
+  const collectionHook = 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 = useRef(React.Children.count(children));
+  const getChildren = () => {
+    if (React.Children.count(children) === 0) {
+      return void 0;
+    } else {
+      return React.Children.toArray(children);
+    }
+  };
+  const [innerContainerRef, switchOverflowPriorities] = useOverflowLayout({
+    collectionHook,
+    disableOverflow: overflowMenuProp === false,
+    id: tabstripId,
+    orientation,
+    label: "Tabstrip"
+  });
+  overflowItemsRef.current = collectionHook.data;
+  const overflowedItems = collectionHook.data.filter((item) => item.overflowed);
+  const tabMovedHandler = useCallback(
+    (fromIndex, toIndex) => {
+      onMoveTab == null ? void 0 : onMoveTab(fromIndex, toIndex);
+      setTimeout(() => {
+        collectionHook.dispatch({
+          type: "reset"
+        });
+      }, 50);
+    },
+    [collectionHook, onMoveTab]
+  );
+  const handleTabSelectionChange = 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({});
+  const {
+    activeTabIndex,
+    activateTab,
+    addTab,
+    onMouseDown: tabstripHookMouseDown,
+    ...tabstripHook
+  } = 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;
+  useImperativeHandle(
+    forwardedRef,
+    () => ({
+      focus: () => {
+        const { current: tabstrip } = root;
+        if (tabstrip) {
+          const selectedTab = tabstrip.querySelector(
+            '.saltTab[aria-selected="true"]'
+          );
+          if (selectedTab) {
+            selectedTab.focus();
+          }
+        }
+      }
+    }),
+    []
+  );
+  const handleAddTabClick = useCallback(() => {
+    if (!collectionHook.isControlled) {
+      addTab();
+    }
+    onAddTab == null ? void 0 : onAddTab();
+  }, [collectionHook.isControlled, onAddTab, addTab]);
+  const selectedIndex = useRef(activeTabIndex);
+  const focusedTabIndex = tabstripHook.highlightedIdx;
+  const handleOverflowSelectionChange = useCallback(
+    (e, tab) => {
+      if (tab !== null) {
+        activateTab(tab.index);
+      }
+    },
+    [activateTab]
+  );
+  const handleKeydownOverflowMenu = 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 = useCallback(
+    (open) => {
+      setShowOverflowMenu(open);
+    },
+    [setShowOverflowMenu]
+  );
+  const handleMouseDown = useCallback(
+    (evt) => {
+      onMouseDown == null ? void 0 : onMouseDown(evt);
+      tabstripHookMouseDown == null ? void 0 : tabstripHookMouseDown(evt);
+    },
+    [onMouseDown, tabstripHookMouseDown]
+  );
+  useIsomorphicLayoutEffect(() => {
+    if (selectedIndex.current !== activeTabIndex && overflowMenuProp) {
+      selectedIndex.current = activeTabIndex;
+    }
+  }, [overflowMenuProp, activeTabIndex]);
+  useIsomorphicLayoutEffect(() => {
+    if (React.Children.count(children) !== childCount.current) {
+      childCount.current = React.Children.count(children);
+    }
+  }, [children]);
+  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.isValidElement(element)) {
+        if (element.type === Tab) {
+          return React.cloneElement(element, { ...baseProps, ...tabProps });
+        } else {
+          return React.cloneElement(element, baseProps);
+        }
+      } else {
+        return React.createElement(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__ */ jsx(Dropdown, {
+          className: cx(withBaseName("overflowMenu"), {
+            [withBaseName("overflowMenu-open")]: showOverflow
+          }),
+          ListProps: {
+            className: cx({
+              [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__ */ jsx(Button, {
+            ...triggerProps,
+            "aria-label": `Tabs overflow menu ${overflowCount} item${overflowCount === 1 ? "" : "s"}`,
+            variant: "secondary",
+            tabIndex: -1,
+            children: /* @__PURE__ */ jsx(OverflowMenuIcon, {})
+          }),
+          width: "auto"
+        }, "overflow")
+      );
+      if (showTooltip) {
+        content.push(
+          /* @__PURE__ */ createElement(Tooltip, {
+            ...getTooltipProps({
+              title: "Active Tab cannot be moved into overflow list",
+              open: true,
+              status: "warning"
+            }),
+            key: "tooltip"
+          })
+        );
+      }
+    }
+    if (injectedItem) {
+      content.push(
+        /* @__PURE__ */ createElement(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__ */ jsx(AddIcon, {}))
+      );
+    }
+    return content;
+  };
+  const selectedTabOverflowed = overflowedItems.some(
+    (item) => item.index === activeTabIndex
+  );
+  const className = cx(
+    withBaseName(),
+    withBaseName(orientation),
+    classNameProp,
+    {
+      [withBaseName("centered")]: centered,
+      [withBaseName("draggingTab")]: tabstripHook.isDragging,
+      [withBaseName("tertiary")]: variant === "tertiary"
+    }
+  );
+  const { id: selectedTabId } = collectionHook.data[activeTabIndex];
+  return /* @__PURE__ */ jsxs("div", {
+    ...htmlAttributes,
+    ...tabstripHook.containerProps,
+    className,
+    id: tabstripId,
+    ref: root,
+    role: "tablist",
+    children: [
+      /* @__PURE__ */ jsx("div", {
+        className: withBaseName("inner"),
+        ref: innerContainerRef,
+        children: renderContent()
+      }),
+      showActivationIndicator ? /* @__PURE__ */ jsx(TabActivationIndicator, {
+        hideThumb: selectedTabOverflowed || tabstripHook.isDragging,
+        orientation,
+        tabId: selectedTabId
+      }) : null,
+      tabstripHook.draggable
+    ]
+  });
+});
+Tabstrip.displayName = "Tabstrip";
+
+export { Tabstrip };
+//# sourceMappingURL=Tabstrip.js.map