npm - @salt-ds/lab - Versions diffs - 1.0.0-alpha.13 → 1.0.0-alpha.15 - Mend

@salt-ds/lab 1.0.0-alpha.13 → 1.0.0-alpha.15

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

Files changed (416) hide show

package/dist-cjs/switch/Switch.css.js CHANGED Viewed

@@ -1,6 +1,6 @@
 'use strict';
-var css_248z = "/* Styles applied to root element */\n.salt-density-touch {\n  --switch-width: 44px;\n  --switch-thumb-margin: 3px 0 0 3px;\n  --switch-thumb-size: 18px;\n  --switch-thumb-translate: 20px;\n  --switch-height: 24px;\n}\n\n.salt-density-low {\n  --switch-width: 38px;\n  --switch-thumb-margin: 2px 0 0 2px;\n  --switch-thumb-size: 16px;\n  --switch-thumb-translate: 18px;\n  --switch-height: 20px;\n}\n\n.salt-density-medium {\n  --switch-width: 34px;\n  --switch-thumb-margin: 2px 0 0 2px;\n  --switch-thumb-size: 14px;\n  --switch-thumb-translate: 16px;\n  --switch-height: 18px;\n}\n\n.salt-density-high {\n  --switch-width: 30px;\n  --switch-thumb-margin: 2px 0 0 2px;\n  --switch-thumb-size: 12px;\n  --switch-thumb-translate: 14px;\n  --switch-height: 16px;\n}\n\n.saltSwitch {\n  --switch-label-color: var(--salt-text-secondary-foreground);\n  --switch-thumb-background: var(--salt-selectable-primary-foreground-selected);\n  --switch-track-color: var(--salt-selectable-borderColor);\n  --switch-track-color-hover: var(--salt-selectable-borderColor-hover);\n  --switch-track-color-disabled: var(--salt-selectable-borderColor-disabled);\n  --switch-track-color-checked: var(--salt-selectable-borderColor-selected);\n  --switch-track-color-checked-disabled: var(--salt-selectable-borderColor-selectedDisabled);\n  --switch-tick-color: var(--salt-selectable-borderColor-selected);\n  --switch-tick-color-disabled: var(--salt-selectable-borderColor-selectedDisabled);\n}\n\n.saltSwitch {\n  box-sizing: content-box;\n  display: inline-flex;\n  flex-shrink: 0;\n  height: var(--saltSwitch-height, var(--switch-height));\n  margin-left: 0;\n  overflow: visible;\n  padding: 0;\n  position: relative;\n  vertical-align: middle;\n  width: var(--saltSwitch-width, var(--switch-width));\n  z-index: 0;\n}\n\n/* Styles applied to outer ControlLabel component */\n.saltSwitch-label {\n  position: relative;\n  margin-left: 0;\n  margin-right: 0;\n  vertical-align: middle;\n}\n\n/* Styles applied to outer ControlLabel component's text */\n.saltSwitch-label .saltControlLabel-text {\n  color: var(--saltSwitch-label-color, var(--switch-label-color));\n  line-height: var(--saltSwitch-label-lineHeight, var(--salt-text-lineHeight));\n  text-align: right;\n}\n\n/* Styles applied to track on hover  */\n.saltSwitch-label:hover .saltSwitch-track {\n  background: var(--saltSwitch-track-color-hover, var(--switch-track-color-hover));\n}\n\n/* Styles applied to track on hover if `disabled={true}` */\n.saltSwitch-label.saltSwitch-disabled:hover .saltSwitch-track {\n  background: var(--saltSwitch-track-color-disabled, var(--switch-track-color-disabled));\n}\n\n/* Styles applied to track on hover when checked  */\n.saltSwitch-label:hover .saltSwitch-checked + .saltSwitch-track {\n  background: var(--saltSwitch-track-color-checked-hover, var(--switch-track-color-checked));\n}\n\n/* Styles applied to base */\n.saltSwitch-base {\n  background: transparent;\n  display: inline-flex;\n  flex: 0 0 auto;\n  height: var(--saltSwitch-base-height, var(--switch-thumb-size));\n  justify-content: flex-start;\n  margin: var(--saltSwitch-base-margin, var(--switch-thumb-margin));\n  overflow: visible;\n  padding: 0;\n  position: absolute;\n  text-align: center;\n  transition: left 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n  width: var(--saltSwitch-base-width, var(--switch-thumb-size));\n  z-index: var(--salt-zIndex-default);\n}\n\n/* Styles applied to track */\n.saltSwitch-track {\n  background: var(--saltSwitch-track-color, var(--switch-track-color));\n  border-radius: var(--saltSwitch-track-borderRadius, 0);\n  height: var(--saltSwitch-track-height, var(--switch-height));\n  min-height: var(--saltSwitch-track-minHeight, 16px);\n  margin-top: 0;\n  margin-left: 0;\n  opacity: 1;\n  position: absolute;\n  transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n  transform: var(--saltSwitch-track-transform, none);\n  width: var(--saltSwitch-track-width, var(--switch-width));\n  z-index: -1;\n}\n\n/* Styles applied to input element and icon container */\n.saltSwitch-inputContainer {\n  align-items: inherit;\n  display: flex;\n  justify-content: inherit;\n  transform: translateX(var(--saltSwitch-inputContainer-translate-x, 0px));\n  transition: transform 0.15s;\n  width: 100%;\n}\n\n/* Styles applied to input element */\n.saltSwitch-input {\n  cursor: inherit;\n  height: 100%;\n  left: -100%;\n  margin: 0;\n  opacity: 0;\n  padding: 0;\n  position: absolute;\n  top: 0;\n  width: 100%;\n  z-index: var(--salt-zIndex-default);\n}\n\n/* Styles applied to thumb, and icon if `checked={true}` */\n.saltSwitch-thumb,\n.saltSwitch-checked .saltSwitch-icon {\n  background: var(--saltSwitch-thumb-background, var(--switch-thumb-background));\n  border-radius: var(--saltSwitch-thumb-borderRadius, 0);\n  border: var(--saltSwitch-thumb-border, none);\n  box-shadow: none;\n  width: var(--saltSwitch-thumb-width, var(--switch-thumb-size));\n  height: var(--saltSwitch-thumb-height, var(--switch-thumb-size));\n  fill: var(--saltSwitch-thumb-background, var(--switch-thumb-background));\n  outline: 1px solid transparent;\n}\n\n/* Styles applied to base if `checked={true}` */\n.saltSwitch-base.saltSwitch-checked {\n  transform: none;\n}\n\n/* Styles applied to input container if `checked={true}` */\n.saltSwitch-base.saltSwitch-checked .saltSwitch-inputContainer {\n  transform: translateX(var(--saltSwitch-thumb-translate, var(--switch-thumb-translate)));\n}\n\n/* Styles applied to tracks where `checked={true}` */\n.saltSwitch-base.saltSwitch-checked + .saltSwitch-track {\n  background: var(--saltSwitch-track-color-checked, var(--switch-track-color-checked));\n  border: var(--saltSwitch-track-border-checked, 1px solid var(--switch-track-color-checked));\n}\n\n/* Styles applied to icon tick shown when `checked={true}` */\n.saltSwitch-iconTick {\n  fill: var(--saltSwitch-icon-color-checked, var(--switch-tick-color));\n}\n\n/* Styles applied to icon tick shown when `checked={true}` and `disabled={true}` */\n.saltSwitch-disabled .saltSwitch-iconTick {\n  fill: var(--saltSwitch-icon-color-checked-disabled, var(--switch-tick-color-disabled));\n}\n\n/* Styles applied when `focusVisible={true}` */\n.saltSwitch-focusVisible:before {\n  background: transparent;\n  content: \"\";\n  display: block;\n  height: var(--saltSwitch-focused-height, var(--switch-height));\n  left: var(--saltSwitch-focused-left, -2px);\n  outline-style: var(--salt-focused-outlineStyle);\n  outline-width: var(--salt-focused-outlineWidth);\n  outline-color: var(--salt-focused-outlineColor);\n  outline-offset: var(--salt-focused-outlineOffset);\n  position: absolute;\n  top: var(--saltSwitch-focused-top, -2px);\n  width: var(--saltSwitch-focused-width, var(--switch-width));\n}\n\n/* Styles applied to tracks when `focusVisible={true}` */\n.saltSwitch-focusVisible + .saltSwitch-track {\n  background: var(--saltSwitch-track-color-hover, var(--switch-track-color-hover));\n}\n\n/* Styles applied to track if `disabled={true}` */\n.saltSwitch-disabled .saltSwitch-base + .saltSwitch-track {\n  background: var(--switch-track-color-disabled);\n  border: transparent;\n}\n\n/* Styles applied to track if `disabled={true}` and `checked={true}` */\n.saltSwitch-disabled .saltSwitch-base.saltSwitch-checked + .saltSwitch-track,\n.saltSwitch-label.saltSwitch-disabled:hover .saltSwitch-checked + .saltSwitch-track {\n  background: var(--saltSwitch-track-color-checked-disabled, var(--switch-track-color-checked-disabled));\n  border: transparent;\n}\n\n/* Styles applied to thumb and icon if `disabled={true}`  */\n.saltSwitch-disabled .saltSwitch-thumb,\n.saltSwitch-disabled:hover .saltSwitch-thumb,\n.saltSwitch-disabled .saltSwitch-checked .saltSwitch-icon,\n.saltSwitch-disabled:hover .saltSwitch-checked .saltSwitch-icon,\n.saltSwitch-disabled,\n.saltSwitch-disabled:hover {\n  --switch-thumb-background: var(--salt-selectable-primary-foreground-selectedDisabled);\n}\n";
+var css_248z = ".saltSwitch {\n  display: flex;\n  gap: var(--salt-spacing-100);\n  position: relative;\n  cursor: var(--salt-selectable-cursor-hover);\n  color: var(--salt-text-primary-foreground);\n}\n\n.saltSwitch-disabled {\n  color: var(--salt-text-primary-foreground-disabled);\n  cursor: var(--salt-selectable-cursor-disabled);\n}\n\n.saltSwitch-track {\n  border: var(--salt-size-border) var(--salt-selectable-borderStyle) var(--salt-selectable-borderColor);\n  --saltIcon-color: currentColor;\n  --saltIcon-size: 100%;\n  display: flex;\n  flex-shrink: 0;\n  height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n  width: calc((var(--salt-size-selectable) + var(--salt-spacing-25) + var(--salt-size-border)) * 2);\n  align-items: center;\n  color: var(--salt-selectable-foreground);\n  background: var(--salt-container-primary-background);\n}\n\n/* Styles applied to the icon component if focused */\n.saltSwitch-input:focus-visible + .saltSwitch-track {\n  outline-offset: var(--salt-focused-outlineOffset);\n  outline: var(--salt-focused-outline);\n  border-color: var(--salt-selectable-borderColor-hover);\n  color: var(--salt-selectable-foreground-hover);\n}\n\n.saltSwitch:hover .saltSwitch-track {\n  border-color: var(--salt-selectable-borderColor-hover);\n  color: var(--salt-selectable-foreground-hover);\n}\n\n.saltSwitch-checked .saltSwitch-track,\n.saltSwitch-checked:hover .saltSwitch-track {\n  border-color: var(--salt-selectable-borderColor-selected);\n  color: var(--salt-selectable-foreground-selected);\n}\n\n.saltSwitch-disabled .saltSwitch-track,\n.saltSwitch-disabled:hover .saltSwitch-track {\n  border-color: var(--salt-selectable-borderColor-disabled);\n  color: var(--salt-selectable-foreground-disabled);\n  background: var(--salt-container-primary-background-disabled);\n}\n\n.saltSwitch-checked.saltSwitch-disabled .saltSwitch-track,\n.saltSwitch-checked.saltSwitch-disabled:hover .saltSwitch-track {\n  border-color: var(--salt-selectable-borderColor-selectedDisabled);\n  color: var(--salt-selectable-foreground-selectedDisabled);\n}\n\n.saltSwitch-thumb {\n  display: flex;\n  aspect-ratio: 1;\n  height: var(--salt-size-selectable);\n  background: currentColor;\n  margin: var(--salt-spacing-25);\n  border: var(--salt-size-border) var(--salt-selectable-borderStyle) var(--salt-selectable-borderColor);\n  transition: transform var(--salt-duration-perceptible) ease-in-out;\n}\n\n.saltSwitch-input:focus-visible + .saltSwitch-track .saltSwitch-thumb,\n.saltSwitch:hover .saltSwitch-thumb {\n  border-color: var(--salt-selectable-borderColor-hover);\n}\n\n.saltSwitch-checked .saltSwitch-thumb,\n.saltSwitch-checked:hover .saltSwitch-thumb {\n  background: transparent;\n  border-color: var(--salt-selectable-borderColor-selected);\n  transform: translateX(100%);\n}\n\n.saltSwitch-disabled .saltSwitch-thumb,\n.saltSwitch-disabled:hover .saltSwitch-thumb {\n  border: 0;\n}\n\n/* Styles applied to input element */\n.saltSwitch-input {\n  cursor: inherit;\n  left: 0;\n  margin: 0;\n  opacity: 0;\n  padding: 0;\n  position: absolute;\n  top: 0;\n  z-index: var(--salt-zIndex-default);\n  height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n  width: calc((var(--salt-size-selectable) + var(--salt-spacing-25) + var(--salt-size-border)) * 2);\n}\n\n@media (prefers-reduced-motion) {\n  .saltSwitch-thumb {\n    transition: none;\n  }\n}\n\n.salt-density-high .saltSwitch-thumb {\n  border: 0;\n}\n";
 module.exports = css_248z;
 //# sourceMappingURL=Switch.css.js.map

package/dist-cjs/switch/Switch.js CHANGED Viewed

@@ -6,28 +6,34 @@ var jsxRuntime = require('react/jsx-runtime');
 var clsx = require('clsx');
 var React = require('react');
 var core = require('@salt-ds/core');
-var ControlLabel = require('../control-label/ControlLabel.js');
-require('../form-field-context-legacy/FormFieldLegacyContext.js');
-var useFormFieldLegacyProps = require('../form-field-context-legacy/useFormFieldLegacyProps.js');
-var CheckedIcon = require('./assets/CheckedIcon.js');
 var window = require('@salt-ds/window');
 var styles = require('@salt-ds/styles');
 var Switch$1 = require('./Switch.css.js');
+var icons = require('@salt-ds/icons');
 const withBaseName = core.makePrefixer("saltSwitch");
+function CheckedIcon(props) {
+  const density = core.useDensity();
+  return density === "high" ? /* @__PURE__ */ jsxRuntime.jsx(icons.SuccessSmallSolidIcon, {
+    ...props
+  }) : /* @__PURE__ */ jsxRuntime.jsx(icons.SuccessSolidIcon, {
+    ...props
+  });
+}
 const Switch = React.forwardRef(function Switch2(props, ref) {
-  const { a11yProps } = useFormFieldLegacyProps.useFormFieldLegacyProps();
   const {
     checked: checkedProp,
     className,
     color,
     defaultChecked,
-    disabled,
+    disabled: disabledProp,
+    inputProps = {},
     label,
-    LabelProps,
+    name,
     onBlur,
     onChange,
     onFocus,
+    value,
     ...rest
   } = props;
   const targetWindow = window.useWindow();
@@ -36,85 +42,74 @@ const Switch = React.forwardRef(function Switch2(props, ref) {
     css: Switch$1,
     window: targetWindow
   });
-  const inputRef = React.useRef(null);
+  const {
+    "aria-describedby": inputDescribedBy,
+    "aria-labelledby": inputLabelledBy,
+    className: inputClassName,
+    onChange: inputOnChange,
+    ...restInputProps
+  } = inputProps;
   const [checked, setChecked] = core.useControlled({
     controlled: checkedProp,
     default: Boolean(defaultChecked),
     name: "Switch",
     state: "checked"
   });
-  const [focusVisible, setFocusVisible] = React.useState(false);
+  const { a11yProps: formFieldA11yProps, disabled: formFieldDisabled } = core.useFormFieldProps();
+  const disabled = formFieldDisabled != null ? formFieldDisabled : disabledProp;
   const handleChange = (event) => {
-    const value = event.target.checked;
-    setChecked(value);
-    onChange == null ? void 0 : onChange(event, value);
+    if (event.nativeEvent.defaultPrevented) {
+      return;
+    }
+    const value2 = event.target.checked;
+    setChecked(value2);
+    onChange == null ? void 0 : onChange(event);
+    inputOnChange == null ? void 0 : inputOnChange(event);
   };
-  const handleFocus = React.useCallback(
-    (event) => {
-      var _a;
-      if (!inputRef.current) {
-        inputRef.current = event.currentTarget;
-      }
-      if ((_a = inputRef.current) == null ? void 0 : _a.matches(":focus-visible")) {
-        setFocusVisible(true);
-      }
-      onFocus == null ? void 0 : onFocus(event);
-    },
-    [onFocus]
-  );
-  const handleBlur = React.useCallback(
-    (event) => {
-      setFocusVisible(false);
-      onBlur == null ? void 0 : onBlur(event);
-    },
-    [onBlur]
-  );
-  return /* @__PURE__ */ jsxRuntime.jsx(ControlLabel.ControlLabel, {
-    ...LabelProps,
+  return /* @__PURE__ */ jsxRuntime.jsxs("label", {
     className: clsx.clsx(
-      withBaseName("label"),
-      { [withBaseName("disabled")]: disabled },
+      withBaseName(),
+      {
+        [withBaseName("disabled")]: disabled,
+        [withBaseName("checked")]: checked
+      },
       className
     ),
-    disabled,
-    label,
     ref,
-    children: /* @__PURE__ */ jsxRuntime.jsxs("span", {
-      className: clsx.clsx(withBaseName(), className),
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", {
-          className: clsx.clsx(withBaseName("base"), {
-            [withBaseName("checked")]: checked,
-            [withBaseName("focusVisible")]: focusVisible
-          }),
-          children: /* @__PURE__ */ jsxRuntime.jsxs("span", {
-            className: withBaseName("inputContainer"),
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx("input", {
-                className: withBaseName("input"),
-                checked,
-                disabled,
-                onBlur: handleBlur,
-                onChange: handleChange,
-                onFocus: handleFocus,
-                ref: inputRef,
-                type: "checkbox",
-                ...a11yProps,
-                ...rest
-              }),
-              checked ? /* @__PURE__ */ jsxRuntime.jsx(CheckedIcon.CheckedIcon, {
-                className: withBaseName("icon")
-              }) : /* @__PURE__ */ jsxRuntime.jsx("span", {
-                className: withBaseName("thumb")
-              })
-            ]
+    ...rest,
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx("input", {
+        "aria-describedby": clsx.clsx(
+          formFieldA11yProps == null ? void 0 : formFieldA11yProps["aria-describedby"],
+          inputDescribedBy
+        ),
+        "aria-labelledby": clsx.clsx(
+          formFieldA11yProps == null ? void 0 : formFieldA11yProps["aria-labelledby"],
+          inputLabelledBy
+        ),
+        name,
+        value,
+        checked,
+        className: clsx.clsx(withBaseName("input"), inputClassName),
+        defaultChecked,
+        disabled,
+        onBlur,
+        onChange: handleChange,
+        onFocus,
+        type: "checkbox",
+        ...restInputProps
+      }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", {
+        className: withBaseName("track"),
+        children: /* @__PURE__ */ jsxRuntime.jsx("span", {
+          className: withBaseName("thumb"),
+          children: checked && /* @__PURE__ */ jsxRuntime.jsx(CheckedIcon, {
+            className: withBaseName("icon")
           })
-        }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", {
-          className: withBaseName("track")
         })
-      ]
-    })
+      }),
+      label
+    ]
   });
 });

package/dist-cjs/switch/Switch.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Switch.js","sources":["../src/switch/Switch.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n ~~ChangeEvent~~,\n ~~FocusEvent~~,\n ~~forwardRef~~,\n ~~InputHTMLAttributes~~,\n ~~useCallback~~,\n ~~useRef,\n useState,\n~~} from \"react\";\nimport { makePrefixer, useControlled } from \"@salt-ds/core\";\nimport { ~~ControlLabel,~~ ~~ControlLabelProps~~ } from \"~~../control~~-~~label~~\";\nimport { ~~useFormFieldLegacyProps~~ } from \"~~../form~~-~~field-context-legacy~~\";\nimport { ~~CheckedIcon }~~ from \"./~~assets/CheckedIcon~~\";\n\nimport { ~~useWindow~~ } from \"@salt-ds/~~window~~\";\~~nimport~~ { ~~useComponentCssInjection~~ ~~} from \~~"~~@salt-ds/styles~~\";\n\~~nimport~~ ~~switchCss~~ ~~from~~ \"~~./Switch.css~~\"~~;\n\nexport~~ ~~interface~~ ~~SwitchProps~~\~~n extends~~ ~~Omit<InputHTMLAttributes<HTMLInputElement>,~~ \"onChange\"> {\n ~~label~~?: ~~ControlLabelProps[~~\"~~label~~\"];\n ~~LabelProps~~?: ~~Partial~~<~~ControlLabelProps~~>;\n onChange?: ~~(event:~~ ~~ChangeEvent~~<HTMLInputElement>, ~~checked:~~ ~~boolean)~~ => ~~void~~;\n}\n\nconst withBaseName = makePrefixer(\"saltSwitch\");\n\nexport const Switch = forwardRef<HTMLLabelElement, SwitchProps>(function Switch(\n props,\n ref\n) {\n const { ~~a11yProps } = useFormFieldLegacyProps();\n~~\n ~~const {\n~~ checked: checkedProp,\n className,\n color,\n defaultChecked,\n disabled,\n label,\n ~~LabelProps~~,\n onBlur,\n onChange,\n onFocus,\n ...rest\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-switch\",\n css: switchCss,\n window: targetWindow,\n });\n\n const ~~inputRef~~ = ~~useRef<HTMLInputElement~~ \| ~~null>(null)~~;\n\n const [checked, setChecked] = useControlled({\n controlled: checkedProp,\n default: Boolean(defaultChecked),\n name: \"Switch\",\n state: \"checked\",\n });\n\n const ~~[focusVisible~~, ~~setFocusVisible]~~ = ~~useState~~(~~false~~);\n\n const ~~handleChange~~ = ~~(event:~~ ~~ChangeEvent<HTMLInputElement>)~~ ~~=> {\n const value = event.target.checked~~;\n ~~setChecked(value);\n onChange?.(event, value);\n };\n~~\n const ~~handleFocus~~ = ~~useCallback~~(~~\n (~~event~~: FocusEvent<HTMLInputElement>~~) => {\n // ~~Fix~~ for https://github.com/facebook/react/issues/~~7769~~\n if (~~!inputRef.current) {\n inputRef.current =~~ event.~~currentTarget;\n }\n\n // TODO :focus-visible not yet supported on Safari, so we'll need to use the\n // useIsFocusVisible polyfill\n if (inputRef~~.~~current?.matches(\":focus-visible\"~~)) {\n ~~setFocusVisible(true);\n~~ ~~}\n\n onFocus?.(event)~~;\n }~~,\n [onFocus]~~\n ~~);\n~~\n const ~~handleBlur~~ = ~~useCallback(\~~n (~~event: FocusEvent<HTMLInputElement>~~) ~~=> {\~~n ~~setFocusVisible~~(~~false~~);\n ~~onBlur~~?.(event);\n }~~,\n [onBlur]\n )~~;\n\n return (\n <~~ControlLabel~~\n ~~{...LabelProps}\n~~ className={clsx(\n withBaseName(~~\"label\"~~),\n { [withBaseName(\"disabled\")]: disabled },\n className\n )}\n ~~disabled~~={~~disabled~~}\n ~~label=~~{~~label~~}\n ~~ref={ref}\n~~ >\n <~~span className~~={clsx(~~withBaseName(), className)}>\n <span~~\n ~~className={clsx(withBaseName(~~\"~~base~~\")~~, {~~\n ~~[withBaseName~~(\~~"checked\")]: checked,\~~n [~~withBaseName(~~\"~~focusVisible~~\")]~~: focusVisible~~,\n })}\n >\n ~~<span className~~={~~withBaseName(~~\~~"inputContainer\")~~}~~>\n <input~~\n className={withBaseName(\"input\")}\n ~~checked~~={~~checked~~}\n disabled={disabled}\n onBlur={~~handleBlur~~}\n onChange={handleChange}\n onFocus={~~handleFocus~~}\n ~~ref={inputRef}\n~~ type=\"checkbox\"\n {...~~a11yProps~~}\n ~~{...rest}\n~~ />\n ~~{checked ? (\n~~ <~~CheckedIcon~~ className={withBaseName(\"~~icon~~\")} ~~/>\~~n ~~) : (\n~~ <span className={withBaseName(\"thumb\")} ~~/>\~~n ~~)}\n~~ ~~</span>\n </span>\n~~ <~~span~~ className={withBaseName(\"~~track~~\")} ~~/>\~~n </span>\n </~~ControlLabel~~>\n );\n});\n"],"names":["makePrefixer","~~forwardRef~~","~~Switch~~","~~useFormFieldLegacyProps~~","~~useWindow~~","~~useComponentCssInjection~~","~~switchCss~~","~~useRef~~","~~useControlled~~","~~useState~~","~~useCallback~~","~~jsx~~","~~ControlLabel~~","~~clsx","~~jsxs","~~CheckedIcon~~"],"mappings":"~~;;;;;;;;;;;;;;;;AA2BA~~,MAAM,YAAA,GAAeA,kBAAa,YAAY,CAAA,CAAA;~~AAEvC~~,MAAM,~~MAAS~~,~~GAAAC~~,~~gBAAA~~,~~CAA0C~~,~~SAASC~~,~~OAAAA~~,~~CACvE~~,~~OACA~~,~~GACA~~,EAAA;~~AACA~~,~~EAAM~~,~~MAAA~~,~~EAAE~~,~~SAAU~~,~~EAAA~~,~~GAAIC,+CAAwB~~,EAAA,CAAA;~~AAE9C~~,EAAM,MAAA;AAAA,IACJ,OAAS,EAAA,WAAA;AAAA,IACT,SAAA;AAAA,IACA,KAAA;AAAA,IACA,cAAA;AAAA,IACA,~~QAAA~~;AAAA,~~IACA~~,KAAA;AAAA,IACA,~~UAAA~~;AAAA,IACA,MAAA;AAAA,IACA,QAAA;AAAA,IACA,OAAA;AAAA,IACG,GAAA,IAAA;AAAA,GACD,GAAA,KAAA,CAAA;AAEJ,EAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,aAAA;AAAA,IACR,GAAK,EAAAC,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAM,MAAA,~~QAAA~~,~~GAAWC~~,~~aAAgC~~,~~IAAI~~,~~CAAA~~,CAAA;~~AAErD~~,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAIC,kBAAc,CAAA;AAAA,IAC1C,UAAY,EAAA,WAAA;AAAA,IACZ,OAAA,EAAS,QAAQ,cAAc,CAAA;AAAA,IAC/B,IAAM,EAAA,QAAA;AAAA,IACN,KAAO,EAAA,SAAA;AAAA,GACR,CAAA,CAAA;AAED,EAAA,MAAM,~~CAAC~~,~~YAAA~~,~~EAAc~~,~~eAAe~~,~~CAAA~~,~~GAAIC~~,~~eAAS~~,~~KAAK~~,~~CAAA~~,~~CAAA;AAEtD~~,~~EAAM~~,~~MAAA,YAAA,GAAe,CAAC,KAAyC,KAAA~~;~~AAC7D~~,~~IAAM~~,~~MAAA,KAAA,GAAQ,~~MAAM,~~MAAO~~,~~CAAA~~,~~OAAA,CAAA;AAC3B,~~IAAA,~~UAAA,CAAW,KAAK,CAAA,CAAA;AAChB,~~IAAA,~~QAAA,IAAA,IAAA,~~GAAA,~~KAAA~~,~~CAAA,~~GAAA,~~QAAA~~,~~CAAW,KAAO,EAAA,KAAA,~~CAAA~~,CAAA~~;~~AAAA~~,~~GACpB~~,~~CAAA;AAEA~~,~~EAAA~~,~~MAAM~~,~~WAAc,GAAAC,iBAAA;AAAA,IAClB,~~CAAC,~~KAAwC~~,KAAA;~~AA1E7C~~,~~MAAA~~,IAAA,~~EAAA~~,~~CAAA;AA4EM~~,~~MAAI~~,~~IAAA~~,~~CAAC,SAAS,OAAS,~~EAAA;~~AACrB~~,~~QAAA~~,~~QAAA,CAAS,UAAU,KAAM,CAAA,aAAA,CAAA~~;AAAA,~~OAC3B~~;~~AAIA~~,~~MAAA~~,~~IAAA~~,~~CAAI~~,~~EAAS~~,~~GAAA~~,~~QAAA~~,CAAA,OAAA,~~KAAT,IAAkB,GAAA,KAAA,~~CAAA~~,GAAA,EAAA,CAAA,OAAA,CAAQ,gBAAmB,CAAA,EAAA~~;~~AAC/C~~,~~QAAA~~,~~eAAA~~,~~CAAgB~~,~~IAAI~~,CAAA,CAAA;~~AAAA~~,~~OACtB;AAEA~~,~~MAAU~~,~~OAAA,~~IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,~~OAAA~~,CAAA,KAAA,CAAA,CAAA;~~AAAA~~,~~KACZ;AAAA~~,~~IACA~~,~~CAAC,OAAO,CAAA;AAAA,GACV,CAAA;AAEA,EAAA,MAAM,UAAa,GAAAA,iBAAA;AAAA,IACjB,CAAC,KAAwC,KAAA;AACvC,MAAA,eAAA,CAAgB,KAAK,CAAA,CAAA;AACrB,MAAS,MAAA,~~IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,~~MAAA~~,CAAA,KAAA,CAAA,CAAA;AAAA,~~KACX;AAAA~~,~~IACA,CAAC,MAAM,~~CAAA;~~AAAA,GACT,CAAA;~~AAEA,EAAA,uBACGC,~~cAAA~~,~~CAAAC~~,~~yBAAA~~,EAAA;AAAA,~~IACE~~,~~GAAG,UAAA;AAAA,IACJ,~~SAAW,EAAAC,SAAA;AAAA,MACT,~~aAAa~~,~~OAAO~~,~~CAAA~~;AAAA,~~MACpB~~,~~EAAE,~~CAAC,YAAa,CAAA,UAAU,~~IAAI~~,~~QAAS~~,~~EAAA~~;AAAA,~~MACvC~~,~~SAAA~~;AAAA,~~KACF~~;AAAA,~~IACA~~,~~QAAA~~;AAAA,~~IACA,KAAA~~;AAAA,IACA,GAAA;AAAA,~~IAEA~~,~~QAAC~~,~~kBAAAC,eAAA,CAAA,MAAA,EAAA~~;AAAA,~~MAAK~~,~~SAAW,EAAAD,SAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MAC7C,~~QAAA,EAAA;AAAA,~~wBAACF~~,cAAA,CAAA,~~MAAA~~,EAAA;AAAA,~~UACC~~,~~SAAW~~,~~EAAAE~~,SAAA,~~CAAK~~,~~YAAa~~,~~CAAA~~,~~MAAM~~,~~CAAG~~,~~EAAA;AAAA~~,~~YACpC~~,~~CAAC~~,~~YAAa~~,CAAA,~~SAAS~~,~~CAAI~~,~~GAAA~~,~~OAAA~~;AAAA,~~YAC3B~~,~~CAAC~~,~~YAAa~~,~~CAAA~~,~~cAAc~~,~~CAAI~~,~~GAAA~~,~~YAAA;AAAA~~,~~WACjC~~,~~CAAA;AAAA~~,~~UAED~~,~~QAAC~~,~~kBAAAC~~,~~eAAA~~,CAAA,~~MAAA~~,~~EAAA~~;AAAA,~~YAAK~~,~~SAAA~~,~~EAAW~~,~~aAAa~~,~~gBAAgB,CAAA~~;AAAA,~~YAC5C~~,~~QAAA,EAAA~~;AAAA,~~8BAACH~~,~~cAAA,CAAA,~~OAAA~~,EAAA~~;AAAA,~~gBACC~~,SAAA,~~EAAW~~,~~aAAa~~,OAAO,CAAA;AAAA,~~gBAC/B~~,~~OAAA~~;AAAA,~~gBACA~~,QAAA;AAAA,~~gBACA~~,~~MAAQ,EAAA,UAAA~~;AAAA,~~gBACR~~,QAAU,EAAA,YAAA;AAAA,~~gBACV~~,~~OAAS,EAAA,WAAA~~;AAAA,~~gBACT~~,~~GAAK,EAAA,QAAA;AAAA,gBACL,~~IAAK,EAAA,UAAA;AAAA,~~gBACJ~~,GAAG,~~SAAA~~;AAAA,~~gBACH~~,~~GAAG,IAAA;AAAA,eACN,~~CAAA;AAAA,~~cACC~~,~~0BACEA,~~cAAA,~~CAAAI~~,~~uBAAA~~,EAAA;AAAA,~~gBAAY~~,SAAA,EAAW,aAAa,~~MAAM~~,CAAA;AAAA,~~eAAG~~,~~oBAE7CJ~~,cAAA,CAAA,MAAA,EAAA;AAAA,~~gBAAK~~,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,~~eAAG~~,~~CAAA;AAAA~~,~~aAAA;AAAA,WAE5C,CAAA;AAAA,SACF,CAAA;AAAA,wBACCA,~~cAAA,CAAA,~~MAAA~~,EAAA;AAAA,~~UAAK~~,SAAA,EAAW,aAAa,~~OAAO~~,CAAA;AAAA,~~SAAG~~,CAAA;AAAA,~~OAAA~~;AAAA,~~KAC1C~~,CAAA;AAAA,~~GACF~~,CAAA,CAAA;AAEJ,CAAC;;;;"}
1	+ {"version":3,"file":"Switch.js","sources":["../src/switch/Switch.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n ChangeEventHandler,\n ComponentPropsWithoutRef,\n FocusEventHandler,\n forwardRef,\n ReactNode,\n} from \"react\";\nimport {\n makePrefixer,\n useControlled,\n useDensity,\n useFormFieldProps,\n} from \"@salt-ds/core\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport switchCss from \"./Switch.css\";\nimport {\n IconProps,\n SuccessSmallSolidIcon,\n SuccessSolidIcon,\n} from \"@salt-ds/icons\";\n\nexport interface SwitchProps\n extends Omit<\n ComponentPropsWithoutRef<\"label\">,\n \"children\" \| \"onFocus\" \| \"onBlur\" \| \"onChange\"\n > {\n /*\n If `true`, the checkbox will be checked.\n /\n checked?: boolean;\n /\n Whether the checkbox component is checked by default\n * This will be disregarded if checked is already set.\n /\n defaultChecked?: boolean;\n /\n If `true`, the checkbox will be disabled.\n /\n disabled?: boolean;\n /\n Properties applied to the input element.\n /\n inputProps?: Partial<ComponentPropsWithoutRef<\"input\">>;\n /\n The label to be shown next to the checkbox.\n /\n label?: ReactNode;\n /\n The name applied to the input.\n /\n name?: string;\n /\n Callback when checkbox loses focus.\n /\n onBlur?: FocusEventHandler<HTMLInputElement>;\n /\n Callback when checked state is changed.\n /\n onChange?: ChangeEventHandler<HTMLInputElement>;\n /\n Callback when checkbox gains focus.\n /\n onFocus?: FocusEventHandler<HTMLInputElement>;\n /\n The value of the checkbox.\n */\n value?: string;\n}\n\nconst withBaseName = makePrefixer(\"saltSwitch\");\n\nfunction CheckedIcon(props: IconProps) {\n const density = useDensity();\n return density === \"high\" ? (\n <SuccessSmallSolidIcon {...props} />\n ) : (\n <SuccessSolidIcon {...props} />\n );\n}\n\nexport const Switch = forwardRef<HTMLLabelElement, SwitchProps>(function Switch(\n props,\n ref\n) {\n const {\n checked: checkedProp,\n className,\n color,\n defaultChecked,\n disabled: disabledProp,\n inputProps = {},\n label,\n name,\n onBlur,\n onChange,\n onFocus,\n value,\n ...rest\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-switch\",\n css: switchCss,\n window: targetWindow,\n });\n\n const {\n \"aria-describedby\": inputDescribedBy,\n \"aria-labelledby\": inputLabelledBy,\n className: inputClassName,\n onChange: inputOnChange,\n ...restInputProps\n } = inputProps;\n\n const [checked, setChecked] = useControlled({\n controlled: checkedProp,\n default: Boolean(defaultChecked),\n name: \"Switch\",\n state: \"checked\",\n });\n\n const { a11yProps: formFieldA11yProps, disabled: formFieldDisabled } =\n useFormFieldProps();\n\n const disabled = formFieldDisabled ?? disabledProp;\n\n const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n // Workaround for https://github.com/facebook/react/issues/9023\n if (event.nativeEvent.defaultPrevented) {\n return;\n }\n\n const value = event.target.checked;\n setChecked(value);\n onChange?.(event);\n inputOnChange?.(event);\n };\n\n return (\n <label\n className={clsx(\n withBaseName(),\n {\n [withBaseName(\"disabled\")]: disabled,\n [withBaseName(\"checked\")]: checked,\n },\n className\n )}\n ref={ref}\n {...rest}\n >\n <input\n aria-describedby={clsx(\n formFieldA11yProps?.[\"aria-describedby\"],\n inputDescribedBy\n )}\n aria-labelledby={clsx(\n formFieldA11yProps?.[\"aria-labelledby\"],\n inputLabelledBy\n )}\n name={name}\n value={value}\n checked={checked}\n className={clsx(withBaseName(\"input\"), inputClassName)}\n defaultChecked={defaultChecked}\n disabled={disabled}\n onBlur={onBlur}\n onChange={handleChange}\n onFocus={onFocus}\n type=\"checkbox\"\n {...restInputProps}\n />\n <span className={withBaseName(\"track\")}>\n <span className={withBaseName(\"thumb\")}>\n {checked && <CheckedIcon className={withBaseName(\"icon\")} />}\n </span>\n </span>\n {label}\n </label>\n );\n});\n"],"names":["makePrefixer","useDensity","jsx","SuccessSmallSolidIcon","SuccessSolidIcon","forwardRef","Switch","useWindow","useComponentCssInjection","switchCss","useControlled","useFormFieldProps","value","jsxs","clsx"],"mappings":"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"}

package/dist-cjs/tabs/Tabstrip.js CHANGED Viewed

@@ -11,7 +11,6 @@ require('../dropdown/DropdownBase.js');
 require('../dropdown/DropdownButton.js');
 var Dropdown = require('../dropdown/Dropdown.js');
 require('../responsive/useResizeObserver.js');
-require('../utils/useFloatingUI.js');
 var useOverflowCollectionItems = require('../responsive/useOverflowCollectionItems.js');
 var useOverflowLayout = require('../responsive/useOverflowLayout.js');
 require('../form-field-context-legacy/FormFieldLegacyContext.js');

package/dist-cjs/tabs/Tabstrip.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Tabstrip.js","sources":["../src/tabs/Tabstrip.tsx"],"sourcesContent":["import {\n Button,\n makePrefixer,\n Tooltip,\n useIdMemo,\n useIsomorphicLayoutEffect,\n} from \"@salt-ds/core\";\nimport { AddIcon, OverflowMenuIcon } from \"@salt-ds/icons\";\nimport { clsx } from \"clsx\";\nimport React, {\n ForwardedRef,\n forwardRef,\n KeyboardEvent,\n MouseEvent,\n RefObject,\n useCallback,\n useImperativeHandle,\n useRef,\n useState,\n} from \"react\";\nimport { SelectionChangeHandler } from \"../common-hooks\";\n\nimport { Dropdown } from \"../dropdown\";\nimport {\n InjectedSourceItem,\n OverflowItem,\n useOverflowLayout,\n} from \"../responsive\";\nimport { useOverflowCollectionItems } from \"../responsive/useOverflowCollectionItems\";\nimport { Tab } from \"./Tab\";\nimport { TabActivationIndicator } from \"./TabActivationIndicator\";\nimport {\n FocusAPI,\n responsiveDataAttributes,\n TabDescriptor,\n TabElement,\n TabProps,\n TabsSource,\n TabstripProps,\n} from \"./TabsTypes\";\nimport { useTabstrip } from \"./useTabstrip\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport themeTabstripCss from \"./ThemeTabstrip.css\";\nimport tabstripCss from \"./Tabstrip.css\";\n\nconst withBaseName = makePrefixer(\"saltTabstrip\");\n\nconst ADD_TAB_LABEL = \"Create Tab\";\n\n// Simple strings for tab labels are accepted as input, convert to TabDescriptors internally\nconst tabDescriptors = (\n tabs: TabsSource \| undefined\n): TabDescriptor[] \| undefined =>\n tabs &&\n tabs.map((tab: string \| TabDescriptor) =>\n typeof tab === \"string\" ? { label: tab } : tab\n );\n\nexport const Tabstrip = forwardRef(function Tabstrip(\n {\n activeTabIndex: activeTabIndexProp,\n allowDragDrop = false,\n centered = false,\n children,\n className: classNameProp,\n defaultSource,\n defaultActiveTabIndex,\n editing,\n variant,\n enableAddTab = false,\n enableCloseTab,\n enableRenameTab,\n id: idProp,\n keyBoardActivation = \"manual\",\n onAddTab,\n onActiveChange,\n onCloseTab,\n onEnterEditMode,\n onExitEditMode,\n onMouseDown,\n onMoveTab,\n orientation = \"horizontal\",\n overflowMenu: overflowMenuProp = true,\n promptForNewTabName = true,\n showActivationIndicator = true,\n source,\n title,\n ...htmlAttributes\n }: TabstripProps,\n forwardedRef: ForwardedRef<FocusAPI>\n) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-tab-strip\",\n css: tabstripCss,\n window: targetWindow,\n });\n useComponentCssInjection({\n testId: \"salt-theme-tab-strip\",\n css: themeTabstripCss,\n window: targetWindow,\n });\n\n const root = useRef<HTMLDivElement>(null);\n // can't use forwardedRef here, can we ?\n // const setForkRef = useForkRef(root, forwardedRef);\n const activeRef = useRef<number \| null>(\n activeTabIndexProp \|\| defaultActiveTabIndex \|\| 0\n );\n\n const overflowItemsRef = useRef<OverflowItem[]>([]);\n const [showOverflowMenu, _setShowOverflowMenu] = useState(false);\n\n const setShowOverflowMenu = useCallback((value: boolean) => {\n _setShowOverflowMenu(value);\n }, []);\n\n const tabstripId = useIdMemo(idProp);\n\n const injectedItems = enableAddTab\n ? [\n {\n source: { label: \"Add Tab\", position: -1, priority: 1 },\n } as InjectedSourceItem,\n ]\n : undefined;\n\n const collectionHook = useOverflowCollectionItems({\n children,\n defaultSource: tabDescriptors(defaultSource),\n id: tabstripId,\n injectedItems,\n label: \"Tabstrip\",\n orientation,\n source: tabDescriptors(source),\n options: {\n closeable: enableCloseTab,\n editable: enableRenameTab,\n getPriority: (item, index) => {\n return index === activeRef.current ? 1 : undefined;\n },\n },\n });\n\n const childCount = useRef(React.Children.count(children));\n\n const getChildren = (): TabElement[] \| undefined => {\n if (React.Children.count(children) === 0) {\n return undefined;\n } else {\n return React.Children.toArray(children) as TabElement[];\n }\n };\n\n const [innerContainerRef, switchOverflowPriorities] = useOverflowLayout({\n collectionHook,\n disableOverflow: overflowMenuProp === false,\n id: tabstripId,\n orientation,\n label: \"Tabstrip\",\n });\n overflowItemsRef.current = collectionHook.data;\n const overflowedItems = collectionHook.data.filter((item) => item.overflowed);\n\n const tabMovedHandler = useCallback(\n (fromIndex: number, toIndex: number) => {\n onMoveTab?.(fromIndex, toIndex);\n setTimeout(() => {\n collectionHook.dispatch({\n type: \"reset\",\n });\n }, 50);\n },\n [collectionHook, onMoveTab]\n );\n\n const handleTabSelectionChange = useCallback(\n (tabIndex: number) => {\n const selectedItem = collectionHook.data[tabIndex];\n const prevSelectedItem = collectionHook.data.find(\n (item) => item.priority === 1 && !item.isOverflowIndicator\n );\n if (selectedItem && prevSelectedItem && overflowMenuProp) {\n switchOverflowPriorities(selectedItem, prevSelectedItem);\n }\n onActiveChange?.(tabIndex);\n setShowOverflowMenu(false);\n },\n [\n collectionHook.data,\n onActiveChange,\n overflowMenuProp,\n setShowOverflowMenu,\n switchOverflowPriorities,\n ]\n );\n\n const {\n activeTabIndex,\n activateTab,\n addTab,\n onMouseDown: tabstripHookMouseDown,\n ...tabstripHook\n } = useTabstrip({\n activeTabIndex: activeTabIndexProp,\n allowDragDrop,\n collectionHook,\n defaultTabs: tabDescriptors(defaultSource),\n defaultActiveTabIndex,\n editing,\n enableAddTab,\n idRoot: tabstripId,\n innerContainerRef,\n keyBoardActivation,\n onActiveChange: handleTabSelectionChange,\n onCloseTab,\n onEnterEditMode,\n onExitEditMode,\n onMoveTab: tabMovedHandler,\n orientation,\n promptForNewTabName,\n tabs: tabDescriptors(source) ?? getChildren(),\n });\n\n activeRef.current = activeTabIndex;\n\n useImperativeHandle(\n forwardedRef,\n () =>\n ({\n focus: () => {\n const { current: tabstrip } = root;\n if (tabstrip) {\n const selectedTab = tabstrip.querySelector(\n '.saltTab[aria-selected=\"true\"]'\n ) as HTMLElement;\n if (selectedTab) {\n selectedTab.focus();\n }\n }\n },\n } as FocusAPI),\n []\n );\n\n const handleAddTabClick = useCallback(() => {\n if (!collectionHook.isControlled) {\n addTab();\n }\n onAddTab?.();\n }, [collectionHook.isControlled, onAddTab, addTab]);\n\n const selectedIndex = useRef(activeTabIndex);\n const focusedTabIndex = tabstripHook.highlightedIdx;\n const handleOverflowSelectionChange: SelectionChangeHandler<OverflowItem> =\n useCallback(\n (e, tab) => {\n if (tab !== null) {\n activateTab(tab.index);\n }\n },\n [activateTab]\n );\n\n const handleKeydownOverflowMenu = useCallback(\n (e: KeyboardEvent<HTMLElement>) => {\n tabstripHook.navigationProps?.onKeyDown?.(e);\n },\n [tabstripHook.navigationProps]\n );\n\n const handleOverflowMenuOpen = useCallback(\n (open: boolean) => {\n setShowOverflowMenu(open);\n },\n [setShowOverflowMenu]\n );\n\n const handleMouseDown = useCallback(\n (evt: MouseEvent<HTMLDivElement>) => {\n onMouseDown?.(evt);\n tabstripHookMouseDown?.(evt);\n },\n [onMouseDown, tabstripHookMouseDown]\n );\n\n // shouldn't we use ref for this ?\n useIsomorphicLayoutEffect(() => {\n // We don't care about changes to overflowedItems here, the overflowObserver\n // always does the right thing. We only care about changes to selected tab\n if (selectedIndex.current !== activeTabIndex && overflowMenuProp) {\n // We might want to do this only if the selected tab is overflowed ?\n // TODO\n // resetOverflow();\n selectedIndex.current = activeTabIndex;\n }\n }, [overflowMenuProp, activeTabIndex]);\n\n useIsomorphicLayoutEffect(() => {\n if (React.Children.count(children) !== childCount.current) {\n childCount.current = React.Children.count(children);\n // TODO\n // resetOverflow();\n }\n }, [children]);\n\n useIsomorphicLayoutEffect(() => {\n if (\n activeTabIndex !== null &&\n focusedTabIndex !== activeTabIndex &&\n focusedTabIndex !== -1\n ) {\n tabstripHook.focusTab(activeTabIndex);\n }\n\n // We only want the effect to run when value changes, not every time focusedTabIndex changes.\n // It doesn't matter if focusedTabIndex is stale in between calls - it will be correct when\n // value changes.\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [activeTabIndex]);\n\n const renderContent = () => {\n const content = collectionHook.data\n .filter((item) => !item.isOverflowIndicator && !item.isInjectedItem)\n .map((item: OverflowItem, index: number) => {\n // TODO sort out typoing\n const tab = item.source as unknown as TabDescriptor;\n const element = item.element as TabElement;\n\n const selected = index === activeTabIndex;\n const focusVisible = tabstripHook.focusVisible === index;\n const overflowed =\n overflowedItems.findIndex(\n (item: OverflowItem) => item.index === index\n ) !== -1;\n\n const tabIsBeingEdited = tabstripHook.editing && selected;\n const tabIndex = tabIsBeingEdited\n ? undefined\n : selected && !tabstripHook.focusIsWithinComponent\n ? 0\n : -1;\n\n const baseProps: Partial<TabProps> &\n responsiveDataAttributes & {\n ref?: RefObject<HTMLDivElement>;\n key: string \| number;\n } = {\n \"data-index\": index,\n \"data-priority\": item.priority,\n \"data-overflowed\": overflowed ? true : undefined,\n ...tabstripHook.navigationProps,\n id: item.id,\n key: index,\n onMouseDown: handleMouseDown,\n tabIndex,\n };\n\n const tabProps = {\n ...tabstripHook.tabProps,\n closeable: item.closeable,\n dragging: tabstripHook.draggedItemIndex === index,\n editable: item.editable,\n editing: tabIsBeingEdited,\n focusVisible,\n index,\n onClose: item.closeable ? tabstripHook.closeTab : undefined,\n orientation,\n selected,\n } as Partial<TabProps>;\n\n if (React.isValidElement(element)) {\n if (element.type === Tab) {\n return React.cloneElement(element, { ...baseProps, ...tabProps });\n } else {\n return React.cloneElement(element, baseProps);\n }\n } else {\n //@ts-ignore tab can only be a TabDescriptor here, but TypeScript seems to think it can be a number\n return React.createElement(Tab, {\n ...baseProps,\n ...tabProps,\n label: tab.label,\n });\n }\n });\n\n const overflowCount = overflowedItems.length;\n const draggingActiveTab = tabstripHook.draggedItemIndex === activeTabIndex;\n const showOverflow =\n (tabstripHook.revealOverflowedItems && !draggingActiveTab) \|\|\n showOverflowMenu;\n const showTooltip = tabstripHook.revealOverflowedItems && draggingActiveTab;\n const overflowIndicator = collectionHook.data.find(\n (i) => i.isOverflowIndicator\n );\n const [injectedItem] = collectionHook.data.filter((i) => i.isInjectedItem);\n\n if (overflowIndicator) {\n content.push(\n <Tooltip\n content=\"Active Tab cannot be moved into overflow list\"\n open\n disabled={!showTooltip}\n status=\"warning\"\n key=\"tooltip\"\n hideArrow\n >\n <Dropdown<OverflowItem>\n className={clsx(withBaseName(\"overflowMenu\"), {\n [withBaseName(\"overflowMenu-open\")]: showOverflow,\n })}\n ListProps={{\n className: clsx({\n [withBaseName(\"overflowMenu-dropTarget\")]:\n tabstripHook.revealOverflowedItems,\n }),\n }}\n data-overflow-indicator\n data-priority={0}\n id={overflowIndicator.id}\n isOpen={showOverflow}\n key=\"overflow\"\n onOpenChange={handleOverflowMenuOpen}\n onKeyDown={handleKeydownOverflowMenu}\n onSelectionChange={handleOverflowSelectionChange}\n placement=\"bottom-end\"\n source={overflowedItems}\n selected={null}\n triggerComponent={\n <Button\n aria-label={`Tabs overflow menu ${overflowCount} item${\n overflowCount === 1 ? \"\" : \"s\"\n }`}\n variant=\"secondary\"\n tabIndex={-1}\n >\n <OverflowMenuIcon />\n </Button>\n }\n width=\"auto\"\n />\n </Tooltip>\n );\n }\n\n if (injectedItem) {\n content.push(\n <Button\n {...tabstripHook.navigationProps}\n aria-label={ADD_TAB_LABEL}\n data-priority={injectedItem.priority}\n data-overflowed={injectedItem.overflowed}\n id={injectedItem.id}\n key=\"addButton\"\n onClick={handleAddTabClick}\n variant=\"secondary\"\n tabIndex={-1}\n >\n <AddIcon />\n </Button>\n );\n }\n\n return content;\n };\n\n const selectedTabOverflowed = overflowedItems.some(\n (item: OverflowItem) => item.index === activeTabIndex\n );\n const className = clsx(\n withBaseName(),\n withBaseName(orientation),\n classNameProp,\n {\n [withBaseName(\"centered\")]: centered,\n [withBaseName(\"draggingTab\")]: tabstripHook.isDragging,\n [withBaseName(\"tertiary\")]: variant === \"tertiary\",\n }\n );\n\n const selectedTabId =\n activeTabIndex !== null ? collectionHook.data[activeTabIndex].id : null;\n\n return (\n <div\n {...htmlAttributes}\n {...tabstripHook.containerProps}\n className={className}\n id={tabstripId}\n ref={root}\n role=\"tablist\"\n >\n <div className={withBaseName(\"inner\")} ref={innerContainerRef}>\n {renderContent()}\n </div>\n {showActivationIndicator ? (\n <TabActivationIndicator\n hideThumb={selectedTabOverflowed \|\| tabstripHook.isDragging}\n orientation={orientation}\n tabId={selectedTabId}\n />\n ) : null}\n {tabstripHook.draggable}\n </div>\n );\n});\n\nTabstrip.displayName = \"Tabstrip\";\n"],"names":["makePrefixer","forwardRef","Tabstrip","useWindow","useComponentCssInjection","tabstripCss","themeTabstripCss","useRef","useState","useCallback","useIdMemo","useOverflowCollectionItems","React","useOverflowLayout","useTabstrip","useImperativeHandle","_a","useIsomorphicLayoutEffect","item","Tab","jsx","Tooltip","Dropdown","clsx","Button","OverflowMenuIcon","createElement","AddIcon","jsxs","TabActivationIndicator"],"mappings":"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"}
1	+ {"version":3,"file":"Tabstrip.js","sources":["../src/tabs/Tabstrip.tsx"],"sourcesContent":["import {\n Button,\n makePrefixer,\n Tooltip,\n useIdMemo,\n useIsomorphicLayoutEffect,\n} from \"@salt-ds/core\";\nimport { AddIcon, OverflowMenuIcon } from \"@salt-ds/icons\";\nimport { clsx } from \"clsx\";\nimport React, {\n ForwardedRef,\n forwardRef,\n KeyboardEvent,\n MouseEvent,\n RefObject,\n useCallback,\n useImperativeHandle,\n useRef,\n useState,\n} from \"react\";\nimport { SelectionChangeHandler } from \"../common-hooks\";\n\nimport { Dropdown } from \"../dropdown\";\nimport {\n InjectedSourceItem,\n OverflowItem,\n useOverflowLayout,\n} from \"../responsive\";\nimport { useOverflowCollectionItems } from \"../responsive/useOverflowCollectionItems\";\nimport { Tab } from \"./Tab\";\nimport { TabActivationIndicator } from \"./TabActivationIndicator\";\nimport {\n FocusAPI,\n responsiveDataAttributes,\n TabDescriptor,\n TabElement,\n TabProps,\n TabsSource,\n TabstripProps,\n} from \"./TabsTypes\";\nimport { useTabstrip } from \"./useTabstrip\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport themeTabstripCss from \"./ThemeTabstrip.css\";\nimport tabstripCss from \"./Tabstrip.css\";\n\nconst withBaseName = makePrefixer(\"saltTabstrip\");\n\nconst ADD_TAB_LABEL = \"Create Tab\";\n\n// Simple strings for tab labels are accepted as input, convert to TabDescriptors internally\nconst tabDescriptors = (\n tabs: TabsSource \| undefined\n): TabDescriptor[] \| undefined =>\n tabs &&\n tabs.map((tab: string \| TabDescriptor) =>\n typeof tab === \"string\" ? { label: tab } : tab\n );\n\nexport const Tabstrip = forwardRef(function Tabstrip(\n {\n activeTabIndex: activeTabIndexProp,\n allowDragDrop = false,\n centered = false,\n children,\n className: classNameProp,\n defaultSource,\n defaultActiveTabIndex,\n editing,\n variant,\n enableAddTab = false,\n enableCloseTab,\n enableRenameTab,\n id: idProp,\n keyBoardActivation = \"manual\",\n onAddTab,\n onActiveChange,\n onCloseTab,\n onEnterEditMode,\n onExitEditMode,\n onMouseDown,\n onMoveTab,\n orientation = \"horizontal\",\n overflowMenu: overflowMenuProp = true,\n promptForNewTabName = true,\n showActivationIndicator = true,\n source,\n title,\n ...htmlAttributes\n }: TabstripProps,\n forwardedRef: ForwardedRef<FocusAPI>\n) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-tab-strip\",\n css: tabstripCss,\n window: targetWindow,\n });\n useComponentCssInjection({\n testId: \"salt-theme-tab-strip\",\n css: themeTabstripCss,\n window: targetWindow,\n });\n\n const root = useRef<HTMLDivElement>(null);\n // can't use forwardedRef here, can we ?\n // const setForkRef = useForkRef(root, forwardedRef);\n const activeRef = useRef<number \| null>(\n activeTabIndexProp \|\| defaultActiveTabIndex \|\| 0\n );\n\n const overflowItemsRef = useRef<OverflowItem[]>([]);\n const [showOverflowMenu, _setShowOverflowMenu] = useState(false);\n\n const setShowOverflowMenu = useCallback((value: boolean) => {\n _setShowOverflowMenu(value);\n }, []);\n\n const tabstripId = useIdMemo(idProp);\n\n const injectedItems = enableAddTab\n ? [\n {\n source: { label: \"Add Tab\", position: -1, priority: 1 },\n } as InjectedSourceItem,\n ]\n : undefined;\n\n const collectionHook = useOverflowCollectionItems({\n children,\n defaultSource: tabDescriptors(defaultSource),\n id: tabstripId,\n injectedItems,\n label: \"Tabstrip\",\n orientation,\n source: tabDescriptors(source),\n options: {\n closeable: enableCloseTab,\n editable: enableRenameTab,\n getPriority: (item, index) => {\n return index === activeRef.current ? 1 : undefined;\n },\n },\n });\n\n const childCount = useRef(React.Children.count(children));\n\n const getChildren = (): TabElement[] \| undefined => {\n if (React.Children.count(children) === 0) {\n return undefined;\n } else {\n return React.Children.toArray(children) as TabElement[];\n }\n };\n\n const [innerContainerRef, switchOverflowPriorities] = useOverflowLayout({\n collectionHook,\n disableOverflow: overflowMenuProp === false,\n id: tabstripId,\n orientation,\n label: \"Tabstrip\",\n });\n overflowItemsRef.current = collectionHook.data;\n const overflowedItems = collectionHook.data.filter((item) => item.overflowed);\n\n const tabMovedHandler = useCallback(\n (fromIndex: number, toIndex: number) => {\n onMoveTab?.(fromIndex, toIndex);\n setTimeout(() => {\n collectionHook.dispatch({\n type: \"reset\",\n });\n }, 50);\n },\n [collectionHook, onMoveTab]\n );\n\n const handleTabSelectionChange = useCallback(\n (tabIndex: number) => {\n const selectedItem = collectionHook.data[tabIndex];\n const prevSelectedItem = collectionHook.data.find(\n (item) => item.priority === 1 && !item.isOverflowIndicator\n );\n if (selectedItem && prevSelectedItem && overflowMenuProp) {\n switchOverflowPriorities(selectedItem, prevSelectedItem);\n }\n onActiveChange?.(tabIndex);\n setShowOverflowMenu(false);\n },\n [\n collectionHook.data,\n onActiveChange,\n overflowMenuProp,\n setShowOverflowMenu,\n switchOverflowPriorities,\n ]\n );\n\n const {\n activeTabIndex,\n activateTab,\n addTab,\n onMouseDown: tabstripHookMouseDown,\n ...tabstripHook\n } = useTabstrip({\n activeTabIndex: activeTabIndexProp,\n allowDragDrop,\n collectionHook,\n defaultTabs: tabDescriptors(defaultSource),\n defaultActiveTabIndex,\n editing,\n enableAddTab,\n idRoot: tabstripId,\n innerContainerRef,\n keyBoardActivation,\n onActiveChange: handleTabSelectionChange,\n onCloseTab,\n onEnterEditMode,\n onExitEditMode,\n onMoveTab: tabMovedHandler,\n orientation,\n promptForNewTabName,\n tabs: tabDescriptors(source) ?? getChildren(),\n });\n\n activeRef.current = activeTabIndex;\n\n useImperativeHandle(\n forwardedRef,\n () =>\n ({\n focus: () => {\n const { current: tabstrip } = root;\n if (tabstrip) {\n const selectedTab = tabstrip.querySelector(\n '.saltTab[aria-selected=\"true\"]'\n ) as HTMLElement;\n if (selectedTab) {\n selectedTab.focus();\n }\n }\n },\n } as FocusAPI),\n []\n );\n\n const handleAddTabClick = useCallback(() => {\n if (!collectionHook.isControlled) {\n addTab();\n }\n onAddTab?.();\n }, [collectionHook.isControlled, onAddTab, addTab]);\n\n const selectedIndex = useRef(activeTabIndex);\n const focusedTabIndex = tabstripHook.highlightedIdx;\n const handleOverflowSelectionChange: SelectionChangeHandler<OverflowItem> =\n useCallback(\n (e, tab) => {\n if (tab !== null) {\n activateTab(tab.index);\n }\n },\n [activateTab]\n );\n\n const handleKeydownOverflowMenu = useCallback(\n (e: KeyboardEvent<HTMLElement>) => {\n tabstripHook.navigationProps?.onKeyDown?.(e);\n },\n [tabstripHook.navigationProps]\n );\n\n const handleOverflowMenuOpen = useCallback(\n (open: boolean) => {\n setShowOverflowMenu(open);\n },\n [setShowOverflowMenu]\n );\n\n const handleMouseDown = useCallback(\n (evt: MouseEvent<HTMLDivElement>) => {\n onMouseDown?.(evt);\n tabstripHookMouseDown?.(evt);\n },\n [onMouseDown, tabstripHookMouseDown]\n );\n\n // shouldn't we use ref for this ?\n useIsomorphicLayoutEffect(() => {\n // We don't care about changes to overflowedItems here, the overflowObserver\n // always does the right thing. We only care about changes to selected tab\n if (selectedIndex.current !== activeTabIndex && overflowMenuProp) {\n // We might want to do this only if the selected tab is overflowed ?\n // TODO\n // resetOverflow();\n selectedIndex.current = activeTabIndex;\n }\n }, [overflowMenuProp, activeTabIndex]);\n\n useIsomorphicLayoutEffect(() => {\n if (React.Children.count(children) !== childCount.current) {\n childCount.current = React.Children.count(children);\n // TODO\n // resetOverflow();\n }\n }, [children]);\n\n useIsomorphicLayoutEffect(() => {\n if (\n activeTabIndex !== null &&\n focusedTabIndex !== activeTabIndex &&\n focusedTabIndex !== -1\n ) {\n tabstripHook.focusTab(activeTabIndex);\n }\n\n // We only want the effect to run when value changes, not every time focusedTabIndex changes.\n // It doesn't matter if focusedTabIndex is stale in between calls - it will be correct when\n // value changes.\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [activeTabIndex]);\n\n const renderContent = () => {\n const content = collectionHook.data\n .filter((item) => !item.isOverflowIndicator && !item.isInjectedItem)\n .map((item: OverflowItem, index: number) => {\n // TODO sort out typoing\n const tab = item.source as unknown as TabDescriptor;\n const element = item.element as TabElement;\n\n const selected = index === activeTabIndex;\n const focusVisible = tabstripHook.focusVisible === index;\n const overflowed =\n overflowedItems.findIndex(\n (item: OverflowItem) => item.index === index\n ) !== -1;\n\n const tabIsBeingEdited = tabstripHook.editing && selected;\n const tabIndex = tabIsBeingEdited\n ? undefined\n : selected && !tabstripHook.focusIsWithinComponent\n ? 0\n : -1;\n\n const baseProps: Partial<TabProps> &\n responsiveDataAttributes & {\n ref?: RefObject<HTMLDivElement>;\n key: string \| number;\n } = {\n \"data-index\": index,\n \"data-priority\": item.priority,\n \"data-overflowed\": overflowed ? true : undefined,\n ...tabstripHook.navigationProps,\n id: item.id,\n key: index,\n onMouseDown: handleMouseDown,\n tabIndex,\n };\n\n const tabProps = {\n ...tabstripHook.tabProps,\n closeable: item.closeable,\n dragging: tabstripHook.draggedItemIndex === index,\n editable: item.editable,\n editing: tabIsBeingEdited,\n focusVisible,\n index,\n onClose: item.closeable ? tabstripHook.closeTab : undefined,\n orientation,\n selected,\n } as Partial<TabProps>;\n\n if (React.isValidElement(element)) {\n if (element.type === Tab) {\n return React.cloneElement(element, { ...baseProps, ...tabProps });\n } else {\n return React.cloneElement(element, baseProps);\n }\n } else {\n //@ts-ignore tab can only be a TabDescriptor here, but TypeScript seems to think it can be a number\n return React.createElement(Tab, {\n ...baseProps,\n ...tabProps,\n label: tab.label,\n });\n }\n });\n\n const overflowCount = overflowedItems.length;\n const draggingActiveTab = tabstripHook.draggedItemIndex === activeTabIndex;\n const showOverflow =\n (tabstripHook.revealOverflowedItems && !draggingActiveTab) \|\|\n showOverflowMenu;\n const showTooltip = tabstripHook.revealOverflowedItems && draggingActiveTab;\n const overflowIndicator = collectionHook.data.find(\n (i) => i.isOverflowIndicator\n );\n const [injectedItem] = collectionHook.data.filter((i) => i.isInjectedItem);\n\n if (overflowIndicator) {\n content.push(\n <Tooltip\n content=\"Active Tab cannot be moved into overflow list\"\n open\n disabled={!showTooltip}\n status=\"warning\"\n key=\"tooltip\"\n hideArrow\n >\n <Dropdown<OverflowItem>\n className={clsx(withBaseName(\"overflowMenu\"), {\n [withBaseName(\"overflowMenu-open\")]: showOverflow,\n })}\n ListProps={{\n className: clsx({\n [withBaseName(\"overflowMenu-dropTarget\")]:\n tabstripHook.revealOverflowedItems,\n }),\n }}\n data-overflow-indicator\n data-priority={0}\n id={overflowIndicator.id}\n isOpen={showOverflow}\n key=\"overflow\"\n onOpenChange={handleOverflowMenuOpen}\n onKeyDown={handleKeydownOverflowMenu}\n onSelectionChange={handleOverflowSelectionChange}\n placement=\"bottom-end\"\n source={overflowedItems}\n selected={null}\n triggerComponent={\n <Button\n aria-label={`Tabs overflow menu ${overflowCount} item${\n overflowCount === 1 ? \"\" : \"s\"\n }`}\n variant=\"secondary\"\n tabIndex={-1}\n >\n <OverflowMenuIcon />\n </Button>\n }\n width=\"auto\"\n />\n </Tooltip>\n );\n }\n\n if (injectedItem) {\n content.push(\n <Button\n {...tabstripHook.navigationProps}\n aria-label={ADD_TAB_LABEL}\n data-priority={injectedItem.priority}\n data-overflowed={injectedItem.overflowed}\n id={injectedItem.id}\n key=\"addButton\"\n onClick={handleAddTabClick}\n variant=\"secondary\"\n tabIndex={-1}\n >\n <AddIcon />\n </Button>\n );\n }\n\n return content;\n };\n\n const selectedTabOverflowed = overflowedItems.some(\n (item: OverflowItem) => item.index === activeTabIndex\n );\n const className = clsx(\n withBaseName(),\n withBaseName(orientation),\n classNameProp,\n {\n [withBaseName(\"centered\")]: centered,\n [withBaseName(\"draggingTab\")]: tabstripHook.isDragging,\n [withBaseName(\"tertiary\")]: variant === \"tertiary\",\n }\n );\n\n const selectedTabId =\n activeTabIndex !== null ? collectionHook.data[activeTabIndex].id : null;\n\n return (\n <div\n {...htmlAttributes}\n {...tabstripHook.containerProps}\n className={className}\n id={tabstripId}\n ref={root}\n role=\"tablist\"\n >\n <div className={withBaseName(\"inner\")} ref={innerContainerRef}>\n {renderContent()}\n </div>\n {showActivationIndicator ? (\n <TabActivationIndicator\n hideThumb={selectedTabOverflowed \|\| tabstripHook.isDragging}\n orientation={orientation}\n tabId={selectedTabId}\n />\n ) : null}\n {tabstripHook.draggable}\n </div>\n );\n});\n\nTabstrip.displayName = \"Tabstrip\";\n"],"names":["makePrefixer","forwardRef","Tabstrip","useWindow","useComponentCssInjection","tabstripCss","themeTabstripCss","useRef","useState","useCallback","useIdMemo","useOverflowCollectionItems","React","useOverflowLayout","useTabstrip","useImperativeHandle","_a","useIsomorphicLayoutEffect","item","Tab","jsx","Tooltip","Dropdown","clsx","Button","OverflowMenuIcon","createElement","AddIcon","jsxs","TabActivationIndicator"],"mappings":"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"}

package/dist-cjs/tabs/useActivationIndicator.js CHANGED Viewed

@@ -6,7 +6,6 @@ var React = require('react');
 require('@salt-ds/core');
 require('react/jsx-runtime');
 var useResizeObserver = require('../responsive/useResizeObserver.js');
-require('../utils/useFloatingUI.js');
 const MEASUREMENTS = {
   horizontal: {

package/dist-cjs/tabs/useActivationIndicator.js.map CHANGED Viewed

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

package/dist-cjs/tabs/useKeyboardNavigation.js CHANGED Viewed

@@ -6,7 +6,6 @@ var core = require('@salt-ds/core');
 var React = require('react');
 require('../common-hooks/collectionProvider.js');
 var keyUtils = require('../common-hooks/keyUtils.js');
-require('../utils/useFloatingUI.js');
 require('react/jsx-runtime');
 require('../responsive/useResizeObserver.js');

package/dist-cjs/tabs/useKeyboardNavigation.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useKeyboardNavigation.js","sources":["../src/tabs/useKeyboardNavigation.ts"],"sourcesContent":["import { useControlled, useIsomorphicLayoutEffect } from \"@salt-ds/core\";\nimport {\n FocusEvent,\n FocusEventHandler,\n KeyboardEvent,\n MouseEvent,\n MouseEventHandler,\n useCallback,\n useRef,\n useState,\n} from \"react\";\nimport { OverflowItem } from \"../responsive\";\nimport {\n ArrowDown,\n ArrowUp,\n ArrowLeft,\n ArrowRight,\n Home,\n End,\n} from \"../common-hooks\";\n\ntype orientationType = \"horizontal\" \| \"vertical\";\ntype directionType = \"bwd\" \| \"fwd\" \| \"start\" \| \"end\";\ntype directionMap = { [key: string]: directionType };\nconst navigation = {\n horizontal: {\n [Home]: \"start\",\n [End]: \"end\",\n [ArrowLeft]: \"bwd\",\n [ArrowRight]: \"fwd\",\n } as directionMap,\n vertical: {\n [Home]: \"start\",\n [End]: \"end\",\n [ArrowUp]: \"bwd\",\n [ArrowDown]: \"fwd\",\n } as directionMap,\n};\n\nconst isNavigationKey = (\n key: string,\n orientation: orientationType = \"horizontal\"\n) => navigation[orientation][key] !== undefined;\n\nfunction nextItemIdx(count: number, direction: directionType, idx: number) {\n if (direction === \"start\") {\n return 0;\n } else if (direction === \"end\") {\n return count - 1;\n } else if (direction === \"bwd\") {\n if (idx > 0) {\n return idx - 1;\n } else {\n return idx;\n }\n } else {\n if (idx === null) {\n return 0;\n } else if (idx === count - 1) {\n return idx;\n } else {\n return idx + 1;\n }\n }\n}\n\nconst isFocusable = (item: OverflowItem) => !item.overflowed;\nconst getFocusableElement = (el: HTMLElement \| null) =>\n el\n ? el.hasAttribute(\"tabindex\")\n ? el\n : (el.querySelector(\"[tabindex]\") as HTMLElement)\n : null;\n\nexport interface ContainerNavigationProps {\n onBlur: FocusEventHandler;\n onFocus: FocusEventHandler;\n onMouseDownCapture: MouseEventHandler;\n onMouseLeave: MouseEventHandler;\n}\n\ninterface TabstripNavigationHookProps {\n defaultHighlightedIdx?: number;\n highlightedIdx?: number;\n indexPositions: OverflowItem[];\n keyBoardActivation?: \"manual\" \| \"automatic\";\n orientation: orientationType;\n selectedIndex: number \| null;\n}\n\ninterface TabstripNavigationHookResult {\n containerProps: ContainerNavigationProps;\n highlightedIdx: number;\n focusTab: (\n tabIndex: number,\n immediateFocus?: boolean,\n withKeyboard?: boolean\n ) => void;\n focusVisible: number;\n focusIsWithinComponent: boolean;\n onClick: (evt: MouseEvent, tabIndex: number) => void;\n onFocus: (evt: FocusEvent<HTMLElement>) => void;\n onKeyDown: (evt: KeyboardEvent) => void;\n}\n\nexport const useKeyboardNavigation = ({\n defaultHighlightedIdx = -1,\n highlightedIdx: highlightedIdxProp,\n indexPositions,\n keyBoardActivation,\n orientation,\n selectedIndex: selectedTabIndex = 0,\n}: TabstripNavigationHookProps): TabstripNavigationHookResult => {\n const manualActivation = keyBoardActivation === \"manual\";\n const mouseClickPending = useRef(false);\n const focusedRef = useRef<number>(-1);\n const [hasFocus, setHasFocus] = useState(false);\n const [, forceRefresh] = useState({});\n const [highlightedIdx, _setHighlightedIdx] = useControlled({\n controlled: highlightedIdxProp,\n default: defaultHighlightedIdx,\n name: \"UseKeyboardNavigation\",\n });\n\n const setHighlightedIdx = useCallback(\n (value: number) => {\n _setHighlightedIdx((focusedRef.current = value));\n },\n [_setHighlightedIdx]\n );\n\n const keyboardNavigation = useRef(false);\n\n const focusTab = useCallback(\n (tabIndex: number, immediateFocus = false, withKeyboard?: boolean) => {\n // The timeout is important in two scenarios:\n // 1) where tab has overflowed and is being selected from overflow menu.\n // We must not focus it until the overflow mechanism + render has restored\n // it to the main display.\n // 2) when we are focussing a new tab\n // We MUST NOT delay focus when using keyboard nav, else when focus moves from\n // close button (focus ring styled by :focus-visible) to Tab label (focus ring\n // styled by css class) focus style will briefly linger on both.\n setHighlightedIdx(tabIndex);\n\n if (withKeyboard === true && !keyboardNavigation.current) {\n keyboardNavigation.current = true;\n }\n\n const setFocus = () => {\n const item = indexPositions.find((i) => i.index === tabIndex);\n\n if (item) {\n const focussableElement = getFocusableElement(\n document.getElementById(item.id)\n );\n focussableElement?.focus();\n }\n };\n if (immediateFocus) {\n setFocus();\n } else {\n setTimeout(setFocus, 70);\n }\n },\n [indexPositions, setHighlightedIdx]\n );\n\n const onFocus = (e: FocusEvent<HTMLElement>) => {\n // If focus is received by keyboard navigation, item with tabindex 0 will receive\n // focus. If the item receiving focus has tabindex -1, then focus has been set\n // programatically. We must respect this and not reset focus to selected tab.\n if (focusedRef.current === -1) {\n // Focus is entering tabstrip. Assume keyboard - if it'a actually mouse-driven,\n // the click event will have set correct value.\n if (e.target.tabIndex === -1) {\n // Do nothing, assume focus is being passed back to button by closing dialog. Might need\n // to revisit this and add code here if we may get focus set programatically in other ways.\n } else {\n setTimeout(() => {\n // The selected tab will have tabIndex 0 make sure our internal state is aligned.\n if (focusedRef.current === -1 && selectedTabIndex !== null) {\n setHighlightedIdx(selectedTabIndex);\n }\n }, 200);\n }\n }\n };\n\n const nextFocusableItemIdx = useCallback(\n (\n direction: directionType = \"fwd\",\n idx = direction === \"fwd\" ? -1 : indexPositions.length\n ) => {\n let nextIdx = nextItemIdx(indexPositions.length, direction, idx);\n const nextDirection =\n direction === \"start\" ? \"fwd\" : direction === \"end\" ? \"bwd\" : direction;\n while (\n ((nextDirection === \"fwd\" && nextIdx < indexPositions.length) \|\|\n (nextDirection === \"bwd\" && nextIdx > 0)) &&\n !isFocusable(indexPositions[nextIdx])\n ) {\n const newIdx = nextItemIdx(\n indexPositions.length,\n nextDirection,\n nextIdx\n );\n if (newIdx === nextIdx) {\n break;\n } else {\n nextIdx = newIdx;\n }\n }\n return nextIdx;\n },\n [indexPositions]\n );\n\n // forceFocusVisible supports an edge case - first or last Tab are clicked\n // then Left or Right Arrow keys are pressed, There will be no navigation\n // but focusVisible must be applied\n const navigateChildItems = useCallback(\n (e: React.KeyboardEvent, forceFocusVisible = false) => {\n const direction = navigation[orientation][e.key];\n const nextIdx = nextFocusableItemIdx(direction, highlightedIdx);\n if (nextIdx !== highlightedIdx) {\n const immediateFocus = true;\n if (manualActivation) {\n focusTab(nextIdx, immediateFocus);\n } else {\n // activateTab(newTabIndex);\n }\n } else if (forceFocusVisible) {\n forceRefresh({});\n }\n },\n [\n highlightedIdx,\n manualActivation,\n nextFocusableItemIdx,\n focusTab,\n orientation,\n ]\n );\n\n const handleKeyDown = useCallback(\n (e: KeyboardEvent) => {\n if (indexPositions.length > 0 && isNavigationKey(e.key, orientation)) {\n e.preventDefault();\n if (keyboardNavigation.current) {\n navigateChildItems(e);\n } else {\n keyboardNavigation.current = true;\n navigateChildItems(e, true);\n }\n }\n },\n [indexPositions, navigateChildItems, orientation]\n );\n\n // TODO, in common hooks, we use mouse movement to track current highlighted\n // index, rather than rely on component item reporting it\n const handleItemClick = (_: MouseEvent, tabIndex: number) => {\n setHighlightedIdx(tabIndex);\n };\n\n const handleFocus = useCallback(\n (evt: FocusEvent) => {\n if (!hasFocus) {\n setHasFocus(true);\n if (!mouseClickPending.current) {\n keyboardNavigation.current = true;\n } else {\n mouseClickPending.current = false;\n }\n }\n },\n [hasFocus]\n );\n\n const handleContainerMouseDown = useCallback(\n (evt: MouseEvent) => {\n if (!hasFocus) {\n mouseClickPending.current = true;\n }\n keyboardNavigation.current = false;\n },\n [hasFocus]\n );\n\n const containerProps = {\n onBlur: (e: FocusEvent) => {\n const sourceTarget = (e.target as HTMLElement).closest(\".saltTabstrip\");\n const destTarget = e.relatedTarget as HTMLElement;\n if (sourceTarget && !sourceTarget?.contains(destTarget)) {\n setHighlightedIdx(-1);\n setHasFocus(false);\n }\n },\n onMouseDownCapture: handleContainerMouseDown,\n onFocus: handleFocus,\n onMouseLeave: () => {\n keyboardNavigation.current = true;\n setHighlightedIdx(-1);\n mouseClickPending.current = false;\n },\n };\n\n useIsomorphicLayoutEffect(() => {\n if (\n hasFocus &&\n selectedTabIndex !== undefined &&\n selectedTabIndex !== null\n ) {\n focusTab(selectedTabIndex);\n }\n }, [focusTab, hasFocus, selectedTabIndex]);\n\n return {\n containerProps,\n focusVisible: keyboardNavigation.current ? highlightedIdx : -1,\n focusIsWithinComponent: hasFocus,\n highlightedIdx,\n focusTab,\n onClick: handleItemClick,\n onFocus,\n onKeyDown: handleKeyDown,\n };\n};\n"],"names":["Home","End","ArrowLeft","ArrowRight","ArrowUp","ArrowDown","useRef","useState","useControlled","useCallback","useIsomorphicLayoutEffect"],"mappings":"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"}
1	+ {"version":3,"file":"useKeyboardNavigation.js","sources":["../src/tabs/useKeyboardNavigation.ts"],"sourcesContent":["import { useControlled, useIsomorphicLayoutEffect } from \"@salt-ds/core\";\nimport {\n FocusEvent,\n FocusEventHandler,\n KeyboardEvent,\n MouseEvent,\n MouseEventHandler,\n useCallback,\n useRef,\n useState,\n} from \"react\";\nimport { OverflowItem } from \"../responsive\";\nimport {\n ArrowDown,\n ArrowUp,\n ArrowLeft,\n ArrowRight,\n Home,\n End,\n} from \"../common-hooks\";\n\ntype orientationType = \"horizontal\" \| \"vertical\";\ntype directionType = \"bwd\" \| \"fwd\" \| \"start\" \| \"end\";\ntype directionMap = { [key: string]: directionType };\nconst navigation = {\n horizontal: {\n [Home]: \"start\",\n [End]: \"end\",\n [ArrowLeft]: \"bwd\",\n [ArrowRight]: \"fwd\",\n } as directionMap,\n vertical: {\n [Home]: \"start\",\n [End]: \"end\",\n [ArrowUp]: \"bwd\",\n [ArrowDown]: \"fwd\",\n } as directionMap,\n};\n\nconst isNavigationKey = (\n key: string,\n orientation: orientationType = \"horizontal\"\n) => navigation[orientation][key] !== undefined;\n\nfunction nextItemIdx(count: number, direction: directionType, idx: number) {\n if (direction === \"start\") {\n return 0;\n } else if (direction === \"end\") {\n return count - 1;\n } else if (direction === \"bwd\") {\n if (idx > 0) {\n return idx - 1;\n } else {\n return idx;\n }\n } else {\n if (idx === null) {\n return 0;\n } else if (idx === count - 1) {\n return idx;\n } else {\n return idx + 1;\n }\n }\n}\n\nconst isFocusable = (item: OverflowItem) => !item.overflowed;\nconst getFocusableElement = (el: HTMLElement \| null) =>\n el\n ? el.hasAttribute(\"tabindex\")\n ? el\n : (el.querySelector(\"[tabindex]\") as HTMLElement)\n : null;\n\nexport interface ContainerNavigationProps {\n onBlur: FocusEventHandler;\n onFocus: FocusEventHandler;\n onMouseDownCapture: MouseEventHandler;\n onMouseLeave: MouseEventHandler;\n}\n\ninterface TabstripNavigationHookProps {\n defaultHighlightedIdx?: number;\n highlightedIdx?: number;\n indexPositions: OverflowItem[];\n keyBoardActivation?: \"manual\" \| \"automatic\";\n orientation: orientationType;\n selectedIndex: number \| null;\n}\n\ninterface TabstripNavigationHookResult {\n containerProps: ContainerNavigationProps;\n highlightedIdx: number;\n focusTab: (\n tabIndex: number,\n immediateFocus?: boolean,\n withKeyboard?: boolean\n ) => void;\n focusVisible: number;\n focusIsWithinComponent: boolean;\n onClick: (evt: MouseEvent, tabIndex: number) => void;\n onFocus: (evt: FocusEvent<HTMLElement>) => void;\n onKeyDown: (evt: KeyboardEvent) => void;\n}\n\nexport const useKeyboardNavigation = ({\n defaultHighlightedIdx = -1,\n highlightedIdx: highlightedIdxProp,\n indexPositions,\n keyBoardActivation,\n orientation,\n selectedIndex: selectedTabIndex = 0,\n}: TabstripNavigationHookProps): TabstripNavigationHookResult => {\n const manualActivation = keyBoardActivation === \"manual\";\n const mouseClickPending = useRef(false);\n const focusedRef = useRef<number>(-1);\n const [hasFocus, setHasFocus] = useState(false);\n const [, forceRefresh] = useState({});\n const [highlightedIdx, _setHighlightedIdx] = useControlled({\n controlled: highlightedIdxProp,\n default: defaultHighlightedIdx,\n name: \"UseKeyboardNavigation\",\n });\n\n const setHighlightedIdx = useCallback(\n (value: number) => {\n _setHighlightedIdx((focusedRef.current = value));\n },\n [_setHighlightedIdx]\n );\n\n const keyboardNavigation = useRef(false);\n\n const focusTab = useCallback(\n (tabIndex: number, immediateFocus = false, withKeyboard?: boolean) => {\n // The timeout is important in two scenarios:\n // 1) where tab has overflowed and is being selected from overflow menu.\n // We must not focus it until the overflow mechanism + render has restored\n // it to the main display.\n // 2) when we are focussing a new tab\n // We MUST NOT delay focus when using keyboard nav, else when focus moves from\n // close button (focus ring styled by :focus-visible) to Tab label (focus ring\n // styled by css class) focus style will briefly linger on both.\n setHighlightedIdx(tabIndex);\n\n if (withKeyboard === true && !keyboardNavigation.current) {\n keyboardNavigation.current = true;\n }\n\n const setFocus = () => {\n const item = indexPositions.find((i) => i.index === tabIndex);\n\n if (item) {\n const focussableElement = getFocusableElement(\n document.getElementById(item.id)\n );\n focussableElement?.focus();\n }\n };\n if (immediateFocus) {\n setFocus();\n } else {\n setTimeout(setFocus, 70);\n }\n },\n [indexPositions, setHighlightedIdx]\n );\n\n const onFocus = (e: FocusEvent<HTMLElement>) => {\n // If focus is received by keyboard navigation, item with tabindex 0 will receive\n // focus. If the item receiving focus has tabindex -1, then focus has been set\n // programatically. We must respect this and not reset focus to selected tab.\n if (focusedRef.current === -1) {\n // Focus is entering tabstrip. Assume keyboard - if it'a actually mouse-driven,\n // the click event will have set correct value.\n if (e.target.tabIndex === -1) {\n // Do nothing, assume focus is being passed back to button by closing dialog. Might need\n // to revisit this and add code here if we may get focus set programatically in other ways.\n } else {\n setTimeout(() => {\n // The selected tab will have tabIndex 0 make sure our internal state is aligned.\n if (focusedRef.current === -1 && selectedTabIndex !== null) {\n setHighlightedIdx(selectedTabIndex);\n }\n }, 200);\n }\n }\n };\n\n const nextFocusableItemIdx = useCallback(\n (\n direction: directionType = \"fwd\",\n idx = direction === \"fwd\" ? -1 : indexPositions.length\n ) => {\n let nextIdx = nextItemIdx(indexPositions.length, direction, idx);\n const nextDirection =\n direction === \"start\" ? \"fwd\" : direction === \"end\" ? \"bwd\" : direction;\n while (\n ((nextDirection === \"fwd\" && nextIdx < indexPositions.length) \|\|\n (nextDirection === \"bwd\" && nextIdx > 0)) &&\n !isFocusable(indexPositions[nextIdx])\n ) {\n const newIdx = nextItemIdx(\n indexPositions.length,\n nextDirection,\n nextIdx\n );\n if (newIdx === nextIdx) {\n break;\n } else {\n nextIdx = newIdx;\n }\n }\n return nextIdx;\n },\n [indexPositions]\n );\n\n // forceFocusVisible supports an edge case - first or last Tab are clicked\n // then Left or Right Arrow keys are pressed, There will be no navigation\n // but focusVisible must be applied\n const navigateChildItems = useCallback(\n (e: React.KeyboardEvent, forceFocusVisible = false) => {\n const direction = navigation[orientation][e.key];\n const nextIdx = nextFocusableItemIdx(direction, highlightedIdx);\n if (nextIdx !== highlightedIdx) {\n const immediateFocus = true;\n if (manualActivation) {\n focusTab(nextIdx, immediateFocus);\n } else {\n // activateTab(newTabIndex);\n }\n } else if (forceFocusVisible) {\n forceRefresh({});\n }\n },\n [\n highlightedIdx,\n manualActivation,\n nextFocusableItemIdx,\n focusTab,\n orientation,\n ]\n );\n\n const handleKeyDown = useCallback(\n (e: KeyboardEvent) => {\n if (indexPositions.length > 0 && isNavigationKey(e.key, orientation)) {\n e.preventDefault();\n if (keyboardNavigation.current) {\n navigateChildItems(e);\n } else {\n keyboardNavigation.current = true;\n navigateChildItems(e, true);\n }\n }\n },\n [indexPositions, navigateChildItems, orientation]\n );\n\n // TODO, in common hooks, we use mouse movement to track current highlighted\n // index, rather than rely on component item reporting it\n const handleItemClick = (_: MouseEvent, tabIndex: number) => {\n setHighlightedIdx(tabIndex);\n };\n\n const handleFocus = useCallback(\n (evt: FocusEvent) => {\n if (!hasFocus) {\n setHasFocus(true);\n if (!mouseClickPending.current) {\n keyboardNavigation.current = true;\n } else {\n mouseClickPending.current = false;\n }\n }\n },\n [hasFocus]\n );\n\n const handleContainerMouseDown = useCallback(\n (evt: MouseEvent) => {\n if (!hasFocus) {\n mouseClickPending.current = true;\n }\n keyboardNavigation.current = false;\n },\n [hasFocus]\n );\n\n const containerProps = {\n onBlur: (e: FocusEvent) => {\n const sourceTarget = (e.target as HTMLElement).closest(\".saltTabstrip\");\n const destTarget = e.relatedTarget as HTMLElement;\n if (sourceTarget && !sourceTarget?.contains(destTarget)) {\n setHighlightedIdx(-1);\n setHasFocus(false);\n }\n },\n onMouseDownCapture: handleContainerMouseDown,\n onFocus: handleFocus,\n onMouseLeave: () => {\n keyboardNavigation.current = true;\n setHighlightedIdx(-1);\n mouseClickPending.current = false;\n },\n };\n\n useIsomorphicLayoutEffect(() => {\n if (\n hasFocus &&\n selectedTabIndex !== undefined &&\n selectedTabIndex !== null\n ) {\n focusTab(selectedTabIndex);\n }\n }, [focusTab, hasFocus, selectedTabIndex]);\n\n return {\n containerProps,\n focusVisible: keyboardNavigation.current ? highlightedIdx : -1,\n focusIsWithinComponent: hasFocus,\n highlightedIdx,\n focusTab,\n onClick: handleItemClick,\n onFocus,\n onKeyDown: handleKeyDown,\n };\n};\n"],"names":["Home","End","ArrowLeft","ArrowRight","ArrowUp","ArrowDown","useRef","useState","useControlled","useCallback","useIsomorphicLayoutEffect"],"mappings":"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"}

package/dist-cjs/tabs-next/OverflowMenu.js CHANGED Viewed

@@ -11,7 +11,6 @@ require('../dropdown/DropdownBase.js');
 require('../dropdown/DropdownButton.js');
 var Dropdown = require('../dropdown/Dropdown.js');
 require('../responsive/useResizeObserver.js');
-require('../utils/useFloatingUI.js');
 require('../form-field-context-legacy/FormFieldLegacyContext.js');
 const OverflowMenu = React.forwardRef(

package/dist-cjs/tabs-next/OverflowMenu.js.map CHANGED Viewed

	@@ -1 +1 @@
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":["forwardRef","OverflowMenu","useOverflowMenu","useForkRef","useOverflowContext","jsx","Dropdown","Button","OverflowMenuIcon"],"mappings":"~~;;;;;;;;;;;;;;;;~~AAgBO,MAAM,YAAe,GAAAA,gBAAA;AAAA,EAC1B,SAASC,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,KAC1BC,6BAAgC,EAAA,CAAA;AAClC,IAAM,MAAA,SAAA,GAAYC,eAAW,CAAA,GAAA,EAAK,YAAY,CAAA,CAAA;AAC9C,IAAA,MAAM,cAAiB,GAAAC,gCAAA;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,uBACGC,cAAA,CAAAC,iBAAA,EAAA;AAAA,MACC,cAAY,CAAG,EAAA,aAAA,CAAA,UAAA,CAAA;AAAA,MACf,kCACGD,cAAA,CAAAE,WAAA,EAAA;AAAA,QAAO,YAAW,EAAA,WAAA;AAAA,QAAY,OAAQ,EAAA,WAAA;AAAA,QAAY,IAAK,EAAA,UAAA;AAAA,QACtD,QAAC,kBAAAF,cAAA,CAAAG,sBAAA,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;;;;"}
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":["forwardRef","OverflowMenu","useOverflowMenu","useForkRef","useOverflowContext","jsx","Dropdown","Button","OverflowMenuIcon"],"mappings":";;;;;;;;;;;;;;;AAgBO,MAAM,YAAe,GAAAA,gBAAA;AAAA,EAC1B,SAASC,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,KAC1BC,6BAAgC,EAAA,CAAA;AAClC,IAAM,MAAA,SAAA,GAAYC,eAAW,CAAA,GAAA,EAAK,YAAY,CAAA,CAAA;AAC9C,IAAA,MAAM,cAAiB,GAAAC,gCAAA;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,uBACGC,cAAA,CAAAC,iBAAA,EAAA;AAAA,MACC,cAAY,CAAG,EAAA,aAAA,CAAA,UAAA,CAAA;AAAA,MACf,kCACGD,cAAA,CAAAE,WAAA,EAAA;AAAA,QAAO,YAAW,EAAA,WAAA;AAAA,QAAY,OAAQ,EAAA,WAAA;AAAA,QAAY,IAAK,EAAA,UAAA;AAAA,QACtD,QAAC,kBAAAF,cAAA,CAAAG,sBAAA,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-cjs/toast-group/ToastGroup.css.js ADDED Viewed

@@ -0,0 +1,6 @@
+'use strict';
+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";
+module.exports = css_248z;
+//# sourceMappingURL=ToastGroup.css.js.map

package/dist-cjs/toast-group/ToastGroup.css.js.map ADDED Viewed

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