@vuu-ui/vuu-ui-controls 0.8.63 → 0.8.64

package/cjs/dropdown-base/useClickAway.js

@@ -32,7 +32,6 @@ const useClickAway = ({
   React.useEffect(() => {
     const [clickHandler, escapeKeyHandler] = isOpen ? [
       (evt) => {
-        console.log("click away");
         const targetElement = evt.target;
         if (!popperRef.current?.contains(targetElement) && !rootRef.current?.contains(targetElement)) {
           if (!targetWithinSubPopup(popperRef.current, targetElement)) {

package/cjs/dropdown-base/useClickAway.js.map

@@ -1 +1 @@
-{"version":3,"file":"useClickAway.js","sources":["../../src/dropdown-base/useClickAway.ts"],"sourcesContent":["import { queryClosest } from \"@vuu-ui/vuu-utils\";\nimport { RefObject, useEffect, useRef } from \"react\";\nimport { CloseReason } from \"./dropdownTypes\";\n\nexport type ClickawayHook = (props: {\n  popperRef: RefObject<HTMLElement>;\n  rootRef: RefObject<HTMLElement>;\n  isOpen: boolean;\n  onClose: (reason: CloseReason) => void;\n}) => void;\n\ntype MouseEventHandler = (e: MouseEvent) => void;\ntype KeyboardEventHandler = (e: KeyboardEvent) => void;\n\nconst NO_HANDLERS: [MouseEventHandler?, KeyboardEventHandler?] = [];\n\nexport const targetWithinSubPopup = (\n  source: HTMLElement | null,\n  target: HTMLElement\n) => {\n  if (source === null) {\n    return false;\n  }\n\n  const sourcePortal = queryClosest(source, \".vuuPortal\");\n  const targetPortal = queryClosest(target, \".vuuPortal\");\n\n  if (sourcePortal && targetPortal) {\n    // If we have two portals, this can only be a popup launched from a popup.\n    // There will be a relationship, described by aria attributes.\n    const targetWithId = targetPortal.querySelector(\"[id]\");\n    const targetOwner = sourcePortal.querySelector(\n      `[aria-owns=\"${targetWithId?.id}\"]`\n    );\n    return targetOwner !== null;\n  }\n\n  return false;\n};\n\nexport const useClickAway: ClickawayHook = ({\n  popperRef,\n  rootRef,\n  isOpen,\n  onClose,\n}) => {\n  //TODO usePropBackedRef\n  const openRef = useRef(isOpen);\n  useEffect(() => {\n    openRef.current = isOpen;\n  }, [isOpen]);\n\n  useEffect(() => {\n    const [clickHandler, escapeKeyHandler] = isOpen\n      ? [\n          (evt: MouseEvent) => {\n            console.log(\"click away\");\n            const targetElement = evt.target as HTMLElement;\n            if (\n              !popperRef.current?.contains(targetElement) &&\n              !rootRef.current?.contains(targetElement)\n            ) {\n              if (!targetWithinSubPopup(popperRef.current, targetElement)) {\n                onClose(\"click-away\");\n              }\n            }\n          },\n          (e: KeyboardEvent) => {\n            if (e.key === \"Escape\") {\n              if (openRef.current) {\n                onClose(\"Escape\");\n                e.stopPropagation();\n              }\n            }\n          },\n        ]\n      : NO_HANDLERS;\n\n    if (clickHandler && escapeKeyHandler) {\n      document.body.addEventListener(\"mousedown\", clickHandler, true);\n      document.body.addEventListener(\"keydown\", escapeKeyHandler, true);\n    }\n\n    return () => {\n      if (clickHandler && escapeKeyHandler) {\n        document.body.removeEventListener(\"mousedown\", clickHandler, true);\n        document.body.removeEventListener(\"keydown\", escapeKeyHandler, true);\n      }\n    };\n  }, [isOpen, onClose, popperRef, rootRef]);\n};\n"],"names":["queryClosest","useRef","useEffect"],"mappings":";;;;;AAcA,MAAM,cAA2D,EAAC,CAAA;AAErD,MAAA,oBAAA,GAAuB,CAClC,MAAA,EACA,MACG,KAAA;AACH,EAAA,IAAI,WAAW,IAAM,EAAA;AACnB,IAAO,OAAA,KAAA,CAAA;AAAA,GACT;AAEA,EAAM,MAAA,YAAA,GAAeA,qBAAa,CAAA,MAAA,EAAQ,YAAY,CAAA,CAAA;AACtD,EAAM,MAAA,YAAA,GAAeA,qBAAa,CAAA,MAAA,EAAQ,YAAY,CAAA,CAAA;AAEtD,EAAA,IAAI,gBAAgB,YAAc,EAAA;AAGhC,IAAM,MAAA,YAAA,GAAe,YAAa,CAAA,aAAA,CAAc,MAAM,CAAA,CAAA;AACtD,IAAA,MAAM,cAAc,YAAa,CAAA,aAAA;AAAA,MAC/B,CAAA,YAAA,EAAe,cAAc,EAAE,CAAA,EAAA,CAAA;AAAA,KACjC,CAAA;AACA,IAAA,OAAO,WAAgB,KAAA,IAAA,CAAA;AAAA,GACzB;AAEA,EAAO,OAAA,KAAA,CAAA;AACT,EAAA;AAEO,MAAM,eAA8B,CAAC;AAAA,EAC1C,SAAA;AAAA,EACA,OAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA;AACF,CAAM,KAAA;AAEJ,EAAM,MAAA,OAAA,GAAUC,aAAO,MAAM,CAAA,CAAA;AAC7B,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,OAAA,CAAQ,OAAU,GAAA,MAAA,CAAA;AAAA,GACpB,EAAG,CAAC,MAAM,CAAC,CAAA,CAAA;AAEX,EAAAA,eAAA,CAAU,MAAM;AACd,IAAA,MAAM,CAAC,YAAA,EAAc,gBAAgB,CAAA,GAAI,MACrC,GAAA;AAAA,MACE,CAAC,GAAoB,KAAA;AACnB,QAAA,OAAA,CAAQ,IAAI,YAAY,CAAA,CAAA;AACxB,QAAA,MAAM,gBAAgB,GAAI,CAAA,MAAA,CAAA;AAC1B,QACE,IAAA,CAAC,SAAU,CAAA,OAAA,EAAS,QAAS,CAAA,aAAa,CAC1C,IAAA,CAAC,OAAQ,CAAA,OAAA,EAAS,QAAS,CAAA,aAAa,CACxC,EAAA;AACA,UAAA,IAAI,CAAC,oBAAA,CAAqB,SAAU,CAAA,OAAA,EAAS,aAAa,CAAG,EAAA;AAC3D,YAAA,OAAA,CAAQ,YAAY,CAAA,CAAA;AAAA,WACtB;AAAA,SACF;AAAA,OACF;AAAA,MACA,CAAC,CAAqB,KAAA;AACpB,QAAI,IAAA,CAAA,CAAE,QAAQ,QAAU,EAAA;AACtB,UAAA,IAAI,QAAQ,OAAS,EAAA;AACnB,YAAA,OAAA,CAAQ,QAAQ,CAAA,CAAA;AAChB,YAAA,CAAA,CAAE,eAAgB,EAAA,CAAA;AAAA,WACpB;AAAA,SACF;AAAA,OACF;AAAA,KAEF,GAAA,WAAA,CAAA;AAEJ,IAAA,IAAI,gBAAgB,gBAAkB,EAAA;AACpC,MAAA,QAAA,CAAS,IAAK,CAAA,gBAAA,CAAiB,WAAa,EAAA,YAAA,EAAc,IAAI,CAAA,CAAA;AAC9D,MAAA,QAAA,CAAS,IAAK,CAAA,gBAAA,CAAiB,SAAW,EAAA,gBAAA,EAAkB,IAAI,CAAA,CAAA;AAAA,KAClE;AAEA,IAAA,OAAO,MAAM;AACX,MAAA,IAAI,gBAAgB,gBAAkB,EAAA;AACpC,QAAA,QAAA,CAAS,IAAK,CAAA,mBAAA,CAAoB,WAAa,EAAA,YAAA,EAAc,IAAI,CAAA,CAAA;AACjE,QAAA,QAAA,CAAS,IAAK,CAAA,mBAAA,CAAoB,SAAW,EAAA,gBAAA,EAAkB,IAAI,CAAA,CAAA;AAAA,OACrE;AAAA,KACF,CAAA;AAAA,KACC,CAAC,MAAA,EAAQ,OAAS,EAAA,SAAA,EAAW,OAAO,CAAC,CAAA,CAAA;AAC1C;;;;;"}
+{"version":3,"file":"useClickAway.js","sources":["../../src/dropdown-base/useClickAway.ts"],"sourcesContent":["import { queryClosest } from \"@vuu-ui/vuu-utils\";\nimport { RefObject, useEffect, useRef } from \"react\";\nimport { CloseReason } from \"./dropdownTypes\";\n\nexport type ClickawayHook = (props: {\n  popperRef: RefObject<HTMLElement>;\n  rootRef: RefObject<HTMLElement>;\n  isOpen: boolean;\n  onClose: (reason: CloseReason) => void;\n}) => void;\n\ntype MouseEventHandler = (e: MouseEvent) => void;\ntype KeyboardEventHandler = (e: KeyboardEvent) => void;\n\nconst NO_HANDLERS: [MouseEventHandler?, KeyboardEventHandler?] = [];\n\nexport const targetWithinSubPopup = (\n  source: HTMLElement | null,\n  target: HTMLElement\n) => {\n  if (source === null) {\n    return false;\n  }\n\n  const sourcePortal = queryClosest(source, \".vuuPortal\");\n  const targetPortal = queryClosest(target, \".vuuPortal\");\n\n  if (sourcePortal && targetPortal) {\n    // If we have two portals, this can only be a popup launched from a popup.\n    // There will be a relationship, described by aria attributes.\n    const targetWithId = targetPortal.querySelector(\"[id]\");\n    const targetOwner = sourcePortal.querySelector(\n      `[aria-owns=\"${targetWithId?.id}\"]`\n    );\n    return targetOwner !== null;\n  }\n\n  return false;\n};\n\nexport const useClickAway: ClickawayHook = ({\n  popperRef,\n  rootRef,\n  isOpen,\n  onClose,\n}) => {\n  //TODO usePropBackedRef\n  const openRef = useRef(isOpen);\n  useEffect(() => {\n    openRef.current = isOpen;\n  }, [isOpen]);\n\n  useEffect(() => {\n    const [clickHandler, escapeKeyHandler] = isOpen\n      ? [\n          (evt: MouseEvent) => {\n            const targetElement = evt.target as HTMLElement;\n            if (\n              !popperRef.current?.contains(targetElement) &&\n              !rootRef.current?.contains(targetElement)\n            ) {\n              if (!targetWithinSubPopup(popperRef.current, targetElement)) {\n                onClose(\"click-away\");\n              }\n            }\n          },\n          (e: KeyboardEvent) => {\n            if (e.key === \"Escape\") {\n              if (openRef.current) {\n                onClose(\"Escape\");\n                e.stopPropagation();\n              }\n            }\n          },\n        ]\n      : NO_HANDLERS;\n\n    if (clickHandler && escapeKeyHandler) {\n      document.body.addEventListener(\"mousedown\", clickHandler, true);\n      document.body.addEventListener(\"keydown\", escapeKeyHandler, true);\n    }\n\n    return () => {\n      if (clickHandler && escapeKeyHandler) {\n        document.body.removeEventListener(\"mousedown\", clickHandler, true);\n        document.body.removeEventListener(\"keydown\", escapeKeyHandler, true);\n      }\n    };\n  }, [isOpen, onClose, popperRef, rootRef]);\n};\n"],"names":["queryClosest","useRef","useEffect"],"mappings":";;;;;AAcA,MAAM,cAA2D,EAAC,CAAA;AAErD,MAAA,oBAAA,GAAuB,CAClC,MAAA,EACA,MACG,KAAA;AACH,EAAA,IAAI,WAAW,IAAM,EAAA;AACnB,IAAO,OAAA,KAAA,CAAA;AAAA,GACT;AAEA,EAAM,MAAA,YAAA,GAAeA,qBAAa,CAAA,MAAA,EAAQ,YAAY,CAAA,CAAA;AACtD,EAAM,MAAA,YAAA,GAAeA,qBAAa,CAAA,MAAA,EAAQ,YAAY,CAAA,CAAA;AAEtD,EAAA,IAAI,gBAAgB,YAAc,EAAA;AAGhC,IAAM,MAAA,YAAA,GAAe,YAAa,CAAA,aAAA,CAAc,MAAM,CAAA,CAAA;AACtD,IAAA,MAAM,cAAc,YAAa,CAAA,aAAA;AAAA,MAC/B,CAAA,YAAA,EAAe,cAAc,EAAE,CAAA,EAAA,CAAA;AAAA,KACjC,CAAA;AACA,IAAA,OAAO,WAAgB,KAAA,IAAA,CAAA;AAAA,GACzB;AAEA,EAAO,OAAA,KAAA,CAAA;AACT,EAAA;AAEO,MAAM,eAA8B,CAAC;AAAA,EAC1C,SAAA;AAAA,EACA,OAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA;AACF,CAAM,KAAA;AAEJ,EAAM,MAAA,OAAA,GAAUC,aAAO,MAAM,CAAA,CAAA;AAC7B,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,OAAA,CAAQ,OAAU,GAAA,MAAA,CAAA;AAAA,GACpB,EAAG,CAAC,MAAM,CAAC,CAAA,CAAA;AAEX,EAAAA,eAAA,CAAU,MAAM;AACd,IAAA,MAAM,CAAC,YAAA,EAAc,gBAAgB,CAAA,GAAI,MACrC,GAAA;AAAA,MACE,CAAC,GAAoB,KAAA;AACnB,QAAA,MAAM,gBAAgB,GAAI,CAAA,MAAA,CAAA;AAC1B,QACE,IAAA,CAAC,SAAU,CAAA,OAAA,EAAS,QAAS,CAAA,aAAa,CAC1C,IAAA,CAAC,OAAQ,CAAA,OAAA,EAAS,QAAS,CAAA,aAAa,CACxC,EAAA;AACA,UAAA,IAAI,CAAC,oBAAA,CAAqB,SAAU,CAAA,OAAA,EAAS,aAAa,CAAG,EAAA;AAC3D,YAAA,OAAA,CAAQ,YAAY,CAAA,CAAA;AAAA,WACtB;AAAA,SACF;AAAA,OACF;AAAA,MACA,CAAC,CAAqB,KAAA;AACpB,QAAI,IAAA,CAAA,CAAE,QAAQ,QAAU,EAAA;AACtB,UAAA,IAAI,QAAQ,OAAS,EAAA;AACnB,YAAA,OAAA,CAAQ,QAAQ,CAAA,CAAA;AAChB,YAAA,CAAA,CAAE,eAAgB,EAAA,CAAA;AAAA,WACpB;AAAA,SACF;AAAA,OACF;AAAA,KAEF,GAAA,WAAA,CAAA;AAEJ,IAAA,IAAI,gBAAgB,gBAAkB,EAAA;AACpC,MAAA,QAAA,CAAS,IAAK,CAAA,gBAAA,CAAiB,WAAa,EAAA,YAAA,EAAc,IAAI,CAAA,CAAA;AAC9D,MAAA,QAAA,CAAS,IAAK,CAAA,gBAAA,CAAiB,SAAW,EAAA,gBAAA,EAAkB,IAAI,CAAA,CAAA;AAAA,KAClE;AAEA,IAAA,OAAO,MAAM;AACX,MAAA,IAAI,gBAAgB,gBAAkB,EAAA;AACpC,QAAA,QAAA,CAAS,IAAK,CAAA,mBAAA,CAAoB,WAAa,EAAA,YAAA,EAAc,IAAI,CAAA,CAAA;AACjE,QAAA,QAAA,CAAS,IAAK,CAAA,mBAAA,CAAoB,SAAW,EAAA,gBAAA,EAAkB,IAAI,CAAA,CAAA;AAAA,OACrE;AAAA,KACF,CAAA;AAAA,KACC,CAAC,MAAA,EAAQ,OAAS,EAAA,SAAA,EAAW,OAAO,CAAC,CAAA,CAAA;AAC1C;;;;;"}

package/cjs/editable-label/EditableLabel.js

@@ -70,31 +70,31 @@ const EditableLabel = React.forwardRef(function EditableLabel2({
     }),
     [beginEdit]
   );
-  const exitEditMode = ({
-    cancelEdit = false,
-    allowDeactivation = false
-  } = {}) => {
-    setEditing(false);
-    const originalValue = initialValue.current;
-    if (originalValue !== value) {
-      if (cancelEdit) {
-        setValue(originalValue);
-      } else {
-        initialValue.current = value;
+  const exitEditMode = React.useCallback(
+    ({ cancelEdit = false, allowDeactivation = false } = {}) => {
+      setEditing(false);
+      const originalValue = initialValue.current;
+      if (originalValue !== value) {
+        if (cancelEdit) {
+          setValue(originalValue);
+        } else {
+          initialValue.current = value;
+        }
       }
-    }
-    onExitEditMode && onExitEditMode(originalValue, value, allowDeactivation, cancelEdit);
-  };
+      onExitEditMode && onExitEditMode(originalValue, value, allowDeactivation, cancelEdit);
+    },
+    [onExitEditMode, setEditing, setValue, value]
+  );
   const handleChange = (evt) => {
     const { value: value2 } = evt.target;
     setValue(value2);
     onChange && onChange(value2);
   };
-  const handleBlur = () => {
-    if (editingRef.current) {
+  const handleBlur = React.useCallback(() => {
+    if (editing || editingRef.current) {
       exitEditMode({ allowDeactivation: true });
     }
-  };
+  }, [editing, exitEditMode]);
   const handleKeyDown = (evt) => {
     if (editing && evt.key === "Enter") {
       evt.stopPropagation();

package/cjs/editable-label/EditableLabel.js.map

@@ -1 +1 @@
-{"version":3,"file":"EditableLabel.js","sources":["../../src/editable-label/EditableLabel.tsx"],"sourcesContent":["import cx from \"clsx\";\nimport {\n  ChangeEvent,\n  KeyboardEvent,\n  useCallback,\n  useLayoutEffect,\n  forwardRef,\n  ForwardedRef,\n  ReactElement,\n  useRef,\n  HTMLAttributes,\n  useImperativeHandle,\n} from \"react\";\nimport { Input, useControlled } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport editableLabelCss from \"./EditableLabel.css\";\n\nconst classBase = \"vuuEditableLabel\";\n\nexport type ExitEditModeHandler = (\n  originalLabel: string | undefined,\n  editedLabel: string | undefined,\n  allowDeactivation?: boolean,\n  editCancelled?: boolean\n) => void;\n\nexport interface EditAPI {\n  beginEdit: () => void;\n}\n\nexport const NullEditAPI: EditAPI = {\n  beginEdit: () => undefined,\n};\n\nexport interface EditableLabelProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n  className?: string;\n  defaultEditing?: boolean;\n  defaultValue?: string;\n  editLabelApiRef?: ForwardedRef<EditAPI>;\n  editing?: boolean;\n  onEnterEditMode: () => void;\n  onChange?: (value: string) => void;\n  onExitEditMode: ExitEditModeHandler;\n  defaultIsEditing?: boolean;\n  value?: string;\n}\n\nexport const EditableLabel = forwardRef(function EditableLabel(\n  {\n    className: classNameProp,\n    defaultEditing,\n    defaultValue,\n    editLabelApiRef,\n    editing: editingProp,\n    onChange,\n    onEnterEditMode,\n    onExitEditMode,\n    value: valueProp,\n    ...restProps\n  }: EditableLabelProps,\n  forwardedRef: ForwardedRef<HTMLDivElement>\n): ReactElement<EditableLabelProps> {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-editable-label\",\n    css: editableLabelCss,\n    window: targetWindow,\n  });\n\n  const inputRef = useRef<HTMLInputElement | null>(null);\n  const editingRef = useRef<boolean>(false);\n\n  const [value, setValue] = useControlled({\n    controlled: valueProp,\n    default: defaultValue ?? \"\",\n    name: \"EditableLabel\",\n    state: \"value\",\n  });\n\n  const [editing, _setEditing] = useControlled({\n    controlled: editingProp,\n    default: defaultEditing ?? false,\n    name: \"EditableLabel\",\n    state: \"editing\",\n  });\n\n  const setEditing = useCallback(\n    (value: boolean) => {\n      _setEditing((editingRef.current = value));\n    },\n    [_setEditing]\n  );\n\n  const initialValue = useRef(value);\n\n  useLayoutEffect(() => {\n    if (editing) {\n      if (inputRef.current !== null) {\n        inputRef.current.select();\n        inputRef.current.focus();\n      }\n    }\n  }, [editing, inputRef]);\n\n  const beginEdit = useCallback(() => {\n    setEditing(true);\n    onEnterEditMode?.();\n  }, [onEnterEditMode, setEditing]);\n\n  useImperativeHandle(\n    editLabelApiRef,\n    () => ({\n      beginEdit,\n    }),\n    [beginEdit]\n  );\n\n  const exitEditMode = ({\n    cancelEdit = false,\n    allowDeactivation = false,\n  } = {}) => {\n    setEditing(false);\n    const originalValue = initialValue.current;\n    if (originalValue !== value) {\n      if (cancelEdit) {\n        setValue(originalValue);\n      } else {\n        initialValue.current = value;\n      }\n    }\n    onExitEditMode &&\n      onExitEditMode(originalValue, value, allowDeactivation, cancelEdit);\n  };\n\n  const handleChange = (evt: ChangeEvent<HTMLInputElement>) => {\n    const { value } = evt.target;\n    setValue(value);\n    onChange && onChange(value);\n  };\n\n  // We need the ref here as the blur fires before setEditing has taken effect,\n  // so we get a double call to exitEditMode if edit is cancelled.\n  const handleBlur = () => {\n    if (editingRef.current) {\n      exitEditMode({ allowDeactivation: true });\n    }\n  };\n\n  const handleKeyDown = (evt: KeyboardEvent<HTMLInputElement>) => {\n    if (editing && evt.key === \"Enter\") {\n      evt.stopPropagation();\n      // we are likely to lose focus as a consequence of user response\n      // to exitEdit transition, don't want it to trigger another\n      //shouldn't we call setEditing here in case we are in uncontrolled mode ?\n      exitEditMode();\n    } else if (evt.key === \"ArrowRight\" || evt.key === \"ArrowLeft\") {\n      evt.stopPropagation();\n    } else if (evt.key === \"Escape\") {\n      exitEditMode({ cancelEdit: true });\n    }\n  };\n\n  const className = cx(classBase, classNameProp, {\n    [`${classBase}-editing`]: editing,\n  });\n  return (\n    <div\n      {...restProps}\n      className={className}\n      data-text={value}\n      ref={forwardedRef}\n    >\n      {editing ? (\n        <Input\n          inputProps={{ className: `${classBase}-input`, spellCheck: false }}\n          value={value}\n          onBlur={handleBlur}\n          onChange={handleChange}\n          onKeyDown={handleKeyDown}\n          inputRef={inputRef}\n          style={{ padding: 0 }}\n          textAlign=\"left\"\n          variant=\"secondary\"\n        />\n      ) : (\n        <span className={`${classBase}-label`}>{value}</span>\n      )}\n    </div>\n  );\n});\n"],"names":["forwardRef","EditableLabel","useWindow","useComponentCssInjection","editableLabelCss","useRef","useControlled","useCallback","value","useLayoutEffect","useImperativeHandle","jsx","Input"],"mappings":"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"}
+{"version":3,"file":"EditableLabel.js","sources":["../../src/editable-label/EditableLabel.tsx"],"sourcesContent":["import cx from \"clsx\";\nimport {\n  ChangeEvent,\n  KeyboardEvent,\n  useCallback,\n  useLayoutEffect,\n  forwardRef,\n  ForwardedRef,\n  ReactElement,\n  useRef,\n  HTMLAttributes,\n  useImperativeHandle,\n} from \"react\";\nimport { Input, useControlled } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport editableLabelCss from \"./EditableLabel.css\";\n\nconst classBase = \"vuuEditableLabel\";\n\nexport type ExitEditModeHandler = (\n  originalLabel: string | undefined,\n  editedLabel: string | undefined,\n  allowDeactivation?: boolean,\n  editCancelled?: boolean\n) => void;\n\nexport interface EditAPI {\n  beginEdit: () => void;\n}\n\nexport const NullEditAPI: EditAPI = {\n  beginEdit: () => undefined,\n};\n\nexport interface EditableLabelProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n  className?: string;\n  defaultEditing?: boolean;\n  defaultValue?: string;\n  editLabelApiRef?: ForwardedRef<EditAPI>;\n  editing?: boolean;\n  onEnterEditMode: () => void;\n  onChange?: (value: string) => void;\n  onExitEditMode: ExitEditModeHandler;\n  defaultIsEditing?: boolean;\n  value?: string;\n}\n\nexport const EditableLabel = forwardRef(function EditableLabel(\n  {\n    className: classNameProp,\n    defaultEditing,\n    defaultValue,\n    editLabelApiRef,\n    editing: editingProp,\n    onChange,\n    onEnterEditMode,\n    onExitEditMode,\n    value: valueProp,\n    ...restProps\n  }: EditableLabelProps,\n  forwardedRef: ForwardedRef<HTMLDivElement>\n): ReactElement<EditableLabelProps> {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-editable-label\",\n    css: editableLabelCss,\n    window: targetWindow,\n  });\n\n  const inputRef = useRef<HTMLInputElement | null>(null);\n  const editingRef = useRef<boolean>(false);\n\n  const [value, setValue] = useControlled({\n    controlled: valueProp,\n    default: defaultValue ?? \"\",\n    name: \"EditableLabel\",\n    state: \"value\",\n  });\n\n  const [editing, _setEditing] = useControlled({\n    controlled: editingProp,\n    default: defaultEditing ?? false,\n    name: \"EditableLabel\",\n    state: \"editing\",\n  });\n\n  const setEditing = useCallback(\n    (value: boolean) => {\n      _setEditing((editingRef.current = value));\n    },\n    [_setEditing]\n  );\n\n  const initialValue = useRef(value);\n\n  useLayoutEffect(() => {\n    if (editing) {\n      if (inputRef.current !== null) {\n        inputRef.current.select();\n        inputRef.current.focus();\n      }\n    }\n  }, [editing, inputRef]);\n\n  const beginEdit = useCallback(() => {\n    setEditing(true);\n    onEnterEditMode?.();\n  }, [onEnterEditMode, setEditing]);\n\n  useImperativeHandle(\n    editLabelApiRef,\n    () => ({\n      beginEdit,\n    }),\n    [beginEdit]\n  );\n\n  const exitEditMode = useCallback(\n    ({ cancelEdit = false, allowDeactivation = false } = {}) => {\n      setEditing(false);\n      const originalValue = initialValue.current;\n      if (originalValue !== value) {\n        if (cancelEdit) {\n          setValue(originalValue);\n        } else {\n          initialValue.current = value;\n        }\n      }\n      onExitEditMode &&\n        onExitEditMode(originalValue, value, allowDeactivation, cancelEdit);\n    },\n    [onExitEditMode, setEditing, setValue, value]\n  );\n\n  const handleChange = (evt: ChangeEvent<HTMLInputElement>) => {\n    const { value } = evt.target;\n    setValue(value);\n    onChange && onChange(value);\n  };\n\n  // We need the ref here as the blur fires before setEditing has taken effect,\n  // so we get a double call to exitEditMode if edit is cancelled.\n  const handleBlur = useCallback(() => {\n    if (editing || editingRef.current) {\n      exitEditMode({ allowDeactivation: true });\n    }\n  }, [editing, exitEditMode]);\n\n  const handleKeyDown = (evt: KeyboardEvent<HTMLInputElement>) => {\n    if (editing && evt.key === \"Enter\") {\n      evt.stopPropagation();\n      // we are likely to lose focus as a consequence of user response\n      // to exitEdit transition, don't want it to trigger another\n      //shouldn't we call setEditing here in case we are in uncontrolled mode ?\n      exitEditMode();\n    } else if (evt.key === \"ArrowRight\" || evt.key === \"ArrowLeft\") {\n      evt.stopPropagation();\n    } else if (evt.key === \"Escape\") {\n      exitEditMode({ cancelEdit: true });\n    }\n  };\n\n  const className = cx(classBase, classNameProp, {\n    [`${classBase}-editing`]: editing,\n  });\n  return (\n    <div\n      {...restProps}\n      className={className}\n      data-text={value}\n      ref={forwardedRef}\n    >\n      {editing ? (\n        <Input\n          inputProps={{ className: `${classBase}-input`, spellCheck: false }}\n          value={value}\n          onBlur={handleBlur}\n          onChange={handleChange}\n          onKeyDown={handleKeyDown}\n          inputRef={inputRef}\n          style={{ padding: 0 }}\n          textAlign=\"left\"\n          variant=\"secondary\"\n        />\n      ) : (\n        <span className={`${classBase}-label`}>{value}</span>\n      )}\n    </div>\n  );\n});\n"],"names":["forwardRef","EditableLabel","useWindow","useComponentCssInjection","editableLabelCss","useRef","useControlled","useCallback","value","useLayoutEffect","useImperativeHandle","jsx","Input"],"mappings":"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"}

package/cjs/tabstrip/Tabstrip.js

@@ -45,10 +45,11 @@ const Tabstrip = ({
   const rootRef = React.useRef(null);
   const {
     activeTabIndex,
-    focusVisible,
     containerStyle,
+    focusVisible,
     draggedItemIndex,
     onClickAddTab,
+    interactedTabState,
     tabProps,
     ...tabstripHook
   } = useTabstrip.useTabstrip({
@@ -89,6 +90,7 @@ const Tabstrip = ({
         "data-overflow-priority": selected ? "1" : void 0,
         dragging: draggedItemIndex === index,
         editable,
+        editing: interactedTabState?.index === index,
         focusVisible: focusVisible === index,
         id: tabId,
         index,
@@ -128,6 +130,7 @@ const Tabstrip = ({
       tabProps,
       tabClassName,
       draggedItemIndex,
+      interactedTabState,
       focusVisible,
       location
     ]

package/cjs/tabstrip/Tabstrip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tabstrip.js","sources":["../../src/tabstrip/Tabstrip.tsx"],"sourcesContent":["import { asReactElements, useId } from \"@vuu-ui/vuu-utils\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport React, { useMemo, useRef } from \"react\";\nimport { TabProps, TabstripProps } from \"./TabsTypes\";\nimport { useTabstrip } from \"./useTabstrip\";\nimport { IconButton } from \"../icon-button\";\nimport { OverflowContainer } from \"../overflow-container\";\n\nimport tabstripCss from \"./Tabstrip.css\";\n\nconst classBase = \"vuuTabstrip\";\n\nexport const Tabstrip = ({\n  activeTabIndex: activeTabIndexProp,\n  allowAddTab,\n  allowCloseTab,\n  allowDragDrop = false,\n  allowRenameTab = false,\n  animateSelectionThumb = false,\n  children,\n  className: classNameProp,\n  id: idProp,\n  keyBoardActivation = \"manual\",\n  location,\n  onActiveChange,\n  onAddTab,\n  onCloseTab,\n  onExitEditMode,\n  onMoveTab,\n  orientation = \"horizontal\",\n  showTabMenuButton,\n  style: styleProp,\n  tabClassName,\n  variant = \"secondary\",\n  ...htmlAttributes\n}: TabstripProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-tabstrip\",\n    css: tabstripCss,\n    window: targetWindow,\n  });\n\n  const rootRef = useRef<HTMLDivElement>(null);\n  const {\n    activeTabIndex,\n    focusVisible,\n    containerStyle,\n    draggedItemIndex,\n    onClickAddTab,\n    tabProps,\n    ...tabstripHook\n  } = useTabstrip({\n    activeTabIndex: activeTabIndexProp,\n    allowDragDrop,\n    animateSelectionThumb,\n    containerRef: rootRef,\n    keyBoardActivation,\n    onActiveChange,\n    onAddTab,\n    onCloseTab,\n    onExitEditMode,\n    onMoveTab,\n    orientation,\n  });\n  const id = useId(idProp);\n  const className = cx(classBase, classNameProp);\n  const style =\n    styleProp || containerStyle\n      ? {\n          ...styleProp,\n          ...containerStyle,\n        }\n      : undefined;\n\n  const tabs = useMemo(\n    () =>\n      asReactElements(children)\n        .map((child, index) => {\n          const {\n            id: tabId = `${id}-tab-${index}`,\n            className,\n            closeable = allowCloseTab,\n            editable = allowRenameTab,\n            location: tabLocation,\n            showMenuButton = showTabMenuButton,\n          } = child.props;\n          const selected = index === activeTabIndex;\n          return React.cloneElement(child, {\n            ...tabProps,\n            ...tabstripHook.navigationProps,\n            className: cx(className, tabClassName),\n            closeable,\n            \"data-overflow-priority\": selected ? \"1\" : undefined,\n            dragging: draggedItemIndex === index,\n            editable,\n            focusVisible: focusVisible === index,\n            id: tabId,\n            index,\n            key: index,\n            location: cx(location, tabLocation),\n            selected,\n            showMenuButton,\n            tabIndex: selected ? 0 : -1,\n          } as Partial<TabProps>);\n        })\n        .concat(\n          allowAddTab ? (\n            <IconButton\n              {...tabstripHook.navigationProps}\n              aria-label=\"Create Tab\"\n              className={`${classBase}-addTabButton`}\n              data-embedded\n              icon=\"add\"\n              data-overflow-priority=\"1\"\n              key=\"addButton\"\n              onClick={onClickAddTab}\n              variant=\"secondary\"\n              tabIndex={-1}\n            />\n          ) : (\n            []\n          )\n        ),\n    [\n      children,\n      allowAddTab,\n      tabstripHook.navigationProps,\n      onClickAddTab,\n      id,\n      allowCloseTab,\n      allowRenameTab,\n      showTabMenuButton,\n      activeTabIndex,\n      tabProps,\n      tabClassName,\n      draggedItemIndex,\n      focusVisible,\n      location,\n    ]\n  );\n\n  return (\n    <>\n      <OverflowContainer\n        {...htmlAttributes}\n        {...tabstripHook.containerProps}\n        className={cx(className, `${classBase}-${variant}`)}\n        id={id}\n        orientation={orientation}\n        overflowIcon=\"more-horiz\"\n        ref={rootRef}\n        style={style}\n        role=\"tablist\"\n      >\n        {tabs}\n      </OverflowContainer>\n      {tabstripHook.draggable}\n    </>\n  );\n};\n"],"names":["useWindow","useComponentCssInjection","tabstripCss","useRef","useTabstrip","useId","useMemo","asReactElements","className","createElement","IconButton","jsxs","Fragment","jsx","OverflowContainer"],"mappings":"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"}
+{"version":3,"file":"Tabstrip.js","sources":["../../src/tabstrip/Tabstrip.tsx"],"sourcesContent":["import { asReactElements, useId } from \"@vuu-ui/vuu-utils\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport React, { useMemo, useRef } from \"react\";\nimport { TabProps, TabstripProps } from \"./TabsTypes\";\nimport { useTabstrip } from \"./useTabstrip\";\nimport { IconButton } from \"../icon-button\";\nimport { OverflowContainer } from \"../overflow-container\";\n\nimport tabstripCss from \"./Tabstrip.css\";\n\nconst classBase = \"vuuTabstrip\";\n\nexport const Tabstrip = ({\n  activeTabIndex: activeTabIndexProp,\n  allowAddTab,\n  allowCloseTab,\n  allowDragDrop = false,\n  allowRenameTab = false,\n  animateSelectionThumb = false,\n  children,\n  className: classNameProp,\n  id: idProp,\n  keyBoardActivation = \"manual\",\n  location,\n  onActiveChange,\n  onAddTab,\n  onCloseTab,\n  onExitEditMode,\n  onMoveTab,\n  orientation = \"horizontal\",\n  showTabMenuButton,\n  style: styleProp,\n  tabClassName,\n  variant = \"secondary\",\n  ...htmlAttributes\n}: TabstripProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-tabstrip\",\n    css: tabstripCss,\n    window: targetWindow,\n  });\n\n  const rootRef = useRef<HTMLDivElement>(null);\n  const {\n    activeTabIndex,\n    containerStyle,\n    focusVisible,\n    draggedItemIndex,\n    onClickAddTab,\n    interactedTabState,\n    tabProps,\n    ...tabstripHook\n  } = useTabstrip({\n    activeTabIndex: activeTabIndexProp,\n    allowDragDrop,\n    animateSelectionThumb,\n    containerRef: rootRef,\n    keyBoardActivation,\n    onActiveChange,\n    onAddTab,\n    onCloseTab,\n    onExitEditMode,\n    onMoveTab,\n    orientation,\n  });\n  const id = useId(idProp);\n  const className = cx(classBase, classNameProp);\n  const style =\n    styleProp || containerStyle\n      ? {\n          ...styleProp,\n          ...containerStyle,\n        }\n      : undefined;\n\n  const tabs = useMemo(\n    () =>\n      asReactElements(children)\n        .map((child, index) => {\n          const {\n            id: tabId = `${id}-tab-${index}`,\n            className,\n            closeable = allowCloseTab,\n            editable = allowRenameTab,\n            location: tabLocation,\n            showMenuButton = showTabMenuButton,\n          } = child.props;\n          const selected = index === activeTabIndex;\n          return React.cloneElement(child, {\n            ...tabProps,\n            ...tabstripHook.navigationProps,\n            className: cx(className, tabClassName),\n            closeable,\n            \"data-overflow-priority\": selected ? \"1\" : undefined,\n            dragging: draggedItemIndex === index,\n            editable,\n            editing: interactedTabState?.index === index,\n            focusVisible: focusVisible === index,\n            id: tabId,\n            index,\n            key: index,\n            location: cx(location, tabLocation),\n            selected,\n            showMenuButton,\n            tabIndex: selected ? 0 : -1,\n          } as Partial<TabProps>);\n        })\n        .concat(\n          allowAddTab ? (\n            <IconButton\n              {...tabstripHook.navigationProps}\n              aria-label=\"Create Tab\"\n              className={`${classBase}-addTabButton`}\n              data-embedded\n              icon=\"add\"\n              data-overflow-priority=\"1\"\n              key=\"addButton\"\n              onClick={onClickAddTab}\n              variant=\"secondary\"\n              tabIndex={-1}\n            />\n          ) : (\n            []\n          )\n        ),\n    [\n      children,\n      allowAddTab,\n      tabstripHook.navigationProps,\n      onClickAddTab,\n      id,\n      allowCloseTab,\n      allowRenameTab,\n      showTabMenuButton,\n      activeTabIndex,\n      tabProps,\n      tabClassName,\n      draggedItemIndex,\n      interactedTabState,\n      focusVisible,\n      location,\n    ]\n  );\n\n  return (\n    <>\n      <OverflowContainer\n        {...htmlAttributes}\n        {...tabstripHook.containerProps}\n        className={cx(className, `${classBase}-${variant}`)}\n        id={id}\n        orientation={orientation}\n        overflowIcon=\"more-horiz\"\n        ref={rootRef}\n        style={style}\n        role=\"tablist\"\n      >\n        {tabs}\n      </OverflowContainer>\n      {tabstripHook.draggable}\n    </>\n  );\n};\n"],"names":["useWindow","useComponentCssInjection","tabstripCss","useRef","useTabstrip","useId","useMemo","asReactElements","className","createElement","IconButton","jsxs","Fragment","jsx","OverflowContainer"],"mappings":"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"}

package/cjs/tabstrip/useTabstrip.js

@@ -1,9 +1,9 @@
 'use strict';
 
-var vuuUtils = require('@vuu-ui/vuu-utils');
 var React = require('react');
 require('../drag-drop/DragDropProvider.js');
 var useDragDrop = require('../drag-drop/useDragDrop.js');
+require('@vuu-ui/vuu-utils');
 var TabMenuOptions = require('./TabMenuOptions.js');
 var tabstripDomUtils = require('./tabstrip-dom-utils.js');
 var useAnimatedSelectionThumb = require('./useAnimatedSelectionThumb.js');
@@ -12,13 +12,6 @@ var useSelection = require('./useSelection.js');
 
 const editKeys = /* @__PURE__ */ new Set(["Enter", " "]);
 const isEditKey = (key) => editKeys.has(key);
-const getElementWithIndex = (container, index) => {
-  if (container) {
-    return container.querySelector(`[data-index="${index}"]`);
-  } else {
-    return null;
-  }
-};
 const useTabstrip = ({
   activeTabIndex: activeTabIndexProp,
   allowDragDrop,
@@ -33,6 +26,7 @@ const useTabstrip = ({
   keyBoardActivation
 }) => {
   const lastSelection = React.useRef(activeTabIndexProp);
+  const [interactedTabState, setInteractedTabState] = React.useState();
   const {
     focusTab: keyboardHookFocusTab,
     highlightedIdx,
@@ -106,9 +100,7 @@ const useTabstrip = ({
   });
   const handleExitEditMode = React.useCallback(
     (originalValue, editedValue, allowDeactivation, tabIndex) => {
-      console.log(
-        `handleExitEditMode ${originalValue} ${editedValue} ${allowDeactivation} ${tabIndex}`
-      );
+      setInteractedTabState(void 0);
       onExitEditMode?.(originalValue, editedValue, allowDeactivation, tabIndex);
       if (!allowDeactivation) {
         keyboardHookFocusTab(tabIndex, false, true);
@@ -124,33 +116,12 @@ const useTabstrip = ({
     // [dragDropHook.isDragging, keyboardHook, selectionHook]
     [keyboardHookHandleClick, selectionHookHandleClick]
   );
-  const getEditableLabel = React.useCallback(
-    (tabIndex = highlightedIdx) => {
-      const targetEl = getElementWithIndex(containerRef.current, tabIndex);
-      if (targetEl) {
-        return targetEl.querySelector(".vuuEditableLabel");
-      }
-    },
-    [containerRef, highlightedIdx]
-  );
-  const tabInEditMode = React.useCallback(
-    (tabIndex = highlightedIdx) => {
-      const editableLabel = getEditableLabel(tabIndex);
-      if (editableLabel) {
-        return editableLabel.classList.contains("vuuEditableLabel-editing");
-      }
-      return false;
-    },
-    [getEditableLabel, highlightedIdx]
-  );
   const editTab = React.useCallback(
     (tabIndex = highlightedIdx) => {
-      const editableLabelEl = getEditableLabel(tabIndex);
-      if (editableLabelEl) {
-        vuuUtils.dispatchMouseEvent(editableLabelEl, "dblclick");
-      }
+      console.log(`set interacted tab state ${tabIndex}`);
+      setInteractedTabState({ index: tabIndex, state: "rename" });
     },
-    [getEditableLabel, highlightedIdx]
+    [highlightedIdx]
   );
   const handleKeyDown = React.useCallback(
     (evt) => {
@@ -201,16 +172,16 @@ const useTabstrip = ({
     [handleCloseTabFromMenu, handleRenameTabFromMenu]
   );
   const handleTabMenuClose = React.useCallback(() => {
-    if (!tabInEditMode()) {
-      keyboardHookFocusTab(highlightedIdx);
-    } else {
+    if (interactedTabState?.index === highlightedIdx) {
       keyboardHookSetHighlightedIndex(highlightedIdx);
+    } else {
+      keyboardHookFocusTab(highlightedIdx);
     }
   }, [
     highlightedIdx,
+    interactedTabState?.index,
     keyboardHookFocusTab,
-    keyboardHookSetHighlightedIndex,
-    tabInEditMode
+    keyboardHookSetHighlightedIndex
   ]);
   const onSwitchWrappedItemIntoView = React.useCallback(
     (item) => {
@@ -244,12 +215,13 @@ const useTabstrip = ({
   };
   return {
     activeTabIndex: selectionHookSelected,
-    containerStyle,
-    focusVisible: keyboardHook.focusVisible,
     containerProps: {
       ...keyboardHook.containerProps,
       onSwitchWrappedItemIntoView
     },
+    containerStyle,
+    focusVisible: keyboardHook.focusVisible,
+    interactedTabState,
     navigationProps,
     onClickAddTab: handleAddTabClick,
     tabProps,

package/cjs/tabstrip/useTabstrip.js.map

@@ -1 +1 @@
-{"version":3,"file":"useTabstrip.js","sources":["../../src/tabstrip/useTabstrip.ts"],"sourcesContent":["import type { MenuActionHandler } from \"@vuu-ui/vuu-data-types\";\nimport type { OverflowItem } from \"@vuu-ui/vuu-ui-controls\";\nimport { dispatchMouseEvent, orientationType } from \"@vuu-ui/vuu-utils\";\nimport {\n  KeyboardEvent,\n  MouseEvent as ReactMouseEvent,\n  RefObject,\n  useCallback,\n  useRef,\n} from \"react\";\nimport { DropOptions, useDragDrop as useDragDrop } from \"../drag-drop\";\nimport { isTabMenuOptions } from \"./TabMenuOptions\";\nimport { getIndexOfSelectedTab } from \"./tabstrip-dom-utils\";\nimport { useAnimatedSelectionThumb } from \"./useAnimatedSelectionThumb\";\nimport { useKeyboardNavigation } from \"./useKeyboardNavigation\";\nimport { useSelection } from \"./useSelection\";\n\nexport type ExitEditModeHandler = (\n  originalValue: string,\n  editedValue: string,\n  allowDeactivation: boolean,\n  tabIndex: number\n) => void;\n\nexport interface TabstripHookProps {\n  activeTabIndex: number;\n  allowDragDrop: boolean;\n  animateSelectionThumb: boolean;\n  containerRef: RefObject<HTMLElement>;\n  onActiveChange?: (tabIndex: number) => void;\n  onAddTab?: () => void;\n  onCloseTab?: (tabIndex: number, newActiveTabIndex: number) => void;\n  onExitEditMode?: ExitEditModeHandler;\n  onMoveTab?: (fromIndex: number, toIndex: number) => void;\n  orientation: orientationType;\n  keyBoardActivation?: \"manual\" | \"automatic\";\n}\n\nconst editKeys = new Set([\"Enter\", \" \"]);\nconst isEditKey = (key: string) => editKeys.has(key);\n\nconst getElementWithIndex = (container: HTMLElement | null, index: number) => {\n  if (container) {\n    return container.querySelector(`[data-index=\"${index}\"]`) as HTMLElement;\n  } else {\n    return null;\n  }\n};\n\nexport const useTabstrip = ({\n  activeTabIndex: activeTabIndexProp,\n  allowDragDrop,\n  animateSelectionThumb,\n  containerRef,\n  onActiveChange,\n  onAddTab,\n  onCloseTab,\n  onExitEditMode,\n  onMoveTab,\n  orientation,\n  keyBoardActivation,\n}: TabstripHookProps) => {\n  const lastSelection = useRef(activeTabIndexProp);\n\n  const {\n    focusTab: keyboardHookFocusTab,\n    highlightedIdx,\n    onClick: keyboardHookHandleClick,\n    onKeyDown: keyboardHookHandleKeyDown,\n    setHighlightedIdx: keyboardHookSetHighlightedIndex,\n    ...keyboardHook\n  } = useKeyboardNavigation({\n    containerRef,\n    keyBoardActivation,\n    orientation,\n    selectedIndex: lastSelection.current,\n  });\n\n  const {\n    activateTab: selectionHookActivateTab,\n    onClick: selectionHookHandleClick,\n    onKeyDown: selectionHookHandleKeyDown,\n    selected: selectionHookSelected,\n  } = useSelection({\n    highlightedIdx,\n    onSelectionChange: onActiveChange,\n    selected: activeTabIndexProp,\n  });\n  // We need this on reEntry for navigation hook to handle focus and for dragDropHook\n  // to re-apply selection after drag drop. For some reason the value is stale if we\n  // directly use selectionHookSelected within the drag, even though all dependencies\n  //appear to be correctly declared.\n  lastSelection.current = selectionHookSelected;\n\n  const { containerStyle, resumeAnimation, suspendAnimation } =\n    useAnimatedSelectionThumb(\n      containerRef,\n      animateSelectionThumb ? selectionHookSelected : -1,\n      orientation\n    );\n\n  const handleDrop = useCallback(\n    ({ fromIndex, toIndex }: DropOptions) => {\n      const { current: selected } = lastSelection;\n      console.log(\n        `useTabstrip handleDrop ${fromIndex} - ${toIndex}  ${selected}`\n      );\n      onMoveTab?.(fromIndex, toIndex);\n      let nextSelectedTab = -1;\n      if (toIndex !== -1) {\n        if (selected === fromIndex) {\n          nextSelectedTab = toIndex;\n        } else if (fromIndex > selected && toIndex <= selected) {\n          nextSelectedTab = selected + 1;\n        } else if (fromIndex < selected && toIndex >= selected) {\n          nextSelectedTab = selected - 1;\n        }\n        if (nextSelectedTab !== -1) {\n          suspendAnimation();\n          selectionHookActivateTab(nextSelectedTab);\n          requestAnimationFrame(resumeAnimation);\n        }\n        keyboardHookFocusTab(toIndex, false, false, 350);\n      }\n    },\n    [\n      keyboardHookFocusTab,\n      onMoveTab,\n      resumeAnimation,\n      selectionHookActivateTab,\n      suspendAnimation,\n    ]\n  );\n\n  const { onMouseDown: dragDropHookHandleMouseDown, ...dragDropHook } =\n    useDragDrop({\n      allowDragDrop,\n      containerRef,\n      // this is for useDragDropNext\n      draggableClassName: `tabstrip-${orientation}`,\n      // extendedDropZone: overflowedItems.length > 0,\n      onDrop: handleDrop,\n      orientation: \"horizontal\",\n      itemQuery: \".vuuOverflowContainer-item\",\n    });\n\n  const handleExitEditMode = useCallback<ExitEditModeHandler>(\n    (originalValue, editedValue, allowDeactivation, tabIndex) => {\n      console.log(\n        `handleExitEditMode ${originalValue} ${editedValue} ${allowDeactivation} ${tabIndex}`\n      );\n      onExitEditMode?.(originalValue, editedValue, allowDeactivation, tabIndex);\n      if (!allowDeactivation) {\n        // this indicates that Enter or Esc key has been pressed, hence we\n        // want to make sure keyboardHook treats this as a keyboard event\n        // (and applies focusVisible). The last parameter here does that.\n        keyboardHookFocusTab(tabIndex, false, true);\n      }\n    },\n    [keyboardHookFocusTab, onExitEditMode]\n  );\n\n  const handleClick = useCallback(\n    (evt: ReactMouseEvent<HTMLElement>, tabIndex: number) => {\n      // releasing the mouse at end of drag will trigger a click, ignore those\n      // if (!dragDropHook.isDragging) {\n      keyboardHookHandleClick(evt, tabIndex);\n      selectionHookHandleClick(evt, tabIndex);\n      // }\n    },\n    // [dragDropHook.isDragging, keyboardHook, selectionHook]\n    [keyboardHookHandleClick, selectionHookHandleClick]\n  );\n\n  const getEditableLabel = useCallback(\n    (tabIndex = highlightedIdx) => {\n      const targetEl = getElementWithIndex(containerRef.current, tabIndex);\n      if (targetEl) {\n        return targetEl.querySelector(\".vuuEditableLabel\") as HTMLElement;\n      }\n    },\n    [containerRef, highlightedIdx]\n  );\n\n  const tabInEditMode = useCallback(\n    (tabIndex = highlightedIdx) => {\n      const editableLabel = getEditableLabel(tabIndex);\n      if (editableLabel) {\n        return editableLabel.classList.contains(\"vuuEditableLabel-editing\");\n      }\n      return false;\n    },\n    [getEditableLabel, highlightedIdx]\n  );\n\n  const editTab = useCallback(\n    (tabIndex = highlightedIdx) => {\n      const editableLabelEl = getEditableLabel(tabIndex);\n      if (editableLabelEl) {\n        dispatchMouseEvent(editableLabelEl, \"dblclick\");\n      }\n    },\n    [getEditableLabel, highlightedIdx]\n  );\n\n  const handleKeyDown = useCallback(\n    (evt: KeyboardEvent) => {\n      keyboardHookHandleKeyDown(evt);\n      if (!evt.defaultPrevented) {\n        selectionHookHandleKeyDown(evt);\n      }\n      if (!evt.defaultPrevented && isEditKey(evt.key)) {\n        editTab();\n      }\n    },\n    [editTab, keyboardHookHandleKeyDown, selectionHookHandleKeyDown]\n  );\n\n  const handleCloseTabFromMenu = useCallback(\n    (tabIndex: number) => {\n      const selectedTabIndex = getIndexOfSelectedTab(containerRef.current);\n      const newActiveTabIndex =\n        selectedTabIndex > tabIndex\n          ? selectedTabIndex - 1\n          : selectedTabIndex === tabIndex\n          ? 0\n          : selectedTabIndex;\n      suspendAnimation();\n      // containerRef.current?.classList.add(\"vuuTabThumb-noTransition\");\n      onCloseTab?.(tabIndex, newActiveTabIndex);\n      setTimeout(() => {\n        resumeAnimation();\n        // containerRef.current?.classList.remove(\"vuuTabThumb-noTransition\");\n      }, 200);\n      return true;\n    },\n    [containerRef, onCloseTab, resumeAnimation, suspendAnimation]\n  );\n\n  const handleRenameTabFromMenu = useCallback(\n    (tabIndex: number) => {\n      editTab(tabIndex);\n      return true;\n    },\n    [editTab]\n  );\n\n  const handleTabMenuAction = useCallback<MenuActionHandler>(\n    (action) => {\n      if (isTabMenuOptions(action.options)) {\n        switch (action.menuId) {\n          case \"close-tab\":\n            return handleCloseTabFromMenu(action.options.tabIndex);\n          case \"rename-tab\":\n            return handleRenameTabFromMenu(action.options.tabIndex);\n          default:\n            console.log(`tab menu action ${action.menuId}`);\n        }\n      }\n      return false;\n    },\n    [handleCloseTabFromMenu, handleRenameTabFromMenu]\n  );\n\n  //TODO( why do we sometimes see this fired twice  eg following rename)\n  const handleTabMenuClose = useCallback(() => {\n    if (!tabInEditMode()) {\n      keyboardHookFocusTab(highlightedIdx);\n    } else {\n      keyboardHookSetHighlightedIndex(highlightedIdx);\n    }\n  }, [\n    highlightedIdx,\n    keyboardHookFocusTab,\n    keyboardHookSetHighlightedIndex,\n    tabInEditMode,\n  ]);\n\n  const onSwitchWrappedItemIntoView = useCallback(\n    (item: OverflowItem) => {\n      const index = parseInt(item.index);\n      if (!isNaN(index)) {\n        selectionHookActivateTab(index);\n      }\n    },\n    [selectionHookActivateTab]\n  );\n\n  const navigationProps = {\n    onFocus: keyboardHook.onFocus,\n    onKeyDown: handleKeyDown,\n  };\n\n  const handleAddTabClick = useCallback(() => {\n    onAddTab?.();\n    requestAnimationFrame(() => {\n      const selectedTabIndex = getIndexOfSelectedTab(containerRef.current);\n      if (selectedTabIndex !== -1) {\n        keyboardHookFocusTab(selectedTabIndex);\n      }\n    });\n  }, [containerRef, keyboardHookFocusTab, onAddTab]);\n\n  const tabProps = {\n    onClick: handleClick,\n    onKeyDown: handleKeyDown,\n    onExitEditMode: handleExitEditMode,\n    onMenuAction: handleTabMenuAction,\n    onMenuClose: handleTabMenuClose,\n    onMouseDown: dragDropHookHandleMouseDown,\n  };\n\n  return {\n    activeTabIndex: selectionHookSelected,\n    containerStyle,\n    focusVisible: keyboardHook.focusVisible,\n    containerProps: {\n      ...keyboardHook.containerProps,\n      onSwitchWrappedItemIntoView,\n    },\n    navigationProps,\n    onClickAddTab: handleAddTabClick,\n    tabProps,\n    ...dragDropHook,\n  };\n};\n"],"names":["useRef","useKeyboardNavigation","useSelection","useAnimatedSelectionThumb","useCallback","useDragDrop","dispatchMouseEvent","getIndexOfSelectedTab","isTabMenuOptions"],"mappings":"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"}
+{"version":3,"file":"useTabstrip.js","sources":["../../src/tabstrip/useTabstrip.ts"],"sourcesContent":["import type { MenuActionHandler } from \"@vuu-ui/vuu-data-types\";\nimport type { OverflowItem } from \"@vuu-ui/vuu-ui-controls\";\nimport { orientationType } from \"@vuu-ui/vuu-utils\";\nimport {\n  KeyboardEvent,\n  MouseEvent as ReactMouseEvent,\n  RefObject,\n  useCallback,\n  useRef,\n  useState,\n} from \"react\";\nimport { DropOptions, useDragDrop as useDragDrop } from \"../drag-drop\";\nimport { isTabMenuOptions } from \"./TabMenuOptions\";\nimport { getIndexOfSelectedTab } from \"./tabstrip-dom-utils\";\nimport { useAnimatedSelectionThumb } from \"./useAnimatedSelectionThumb\";\nimport { useKeyboardNavigation } from \"./useKeyboardNavigation\";\nimport { useSelection } from \"./useSelection\";\n\nexport type ExitEditModeHandler = (\n  originalValue: string,\n  editedValue: string,\n  allowDeactivation: boolean,\n  tabIndex: number\n) => void;\n\nexport interface TabstripHookProps {\n  activeTabIndex: number;\n  allowDragDrop: boolean;\n  animateSelectionThumb: boolean;\n  containerRef: RefObject<HTMLElement>;\n  onActiveChange?: (tabIndex: number) => void;\n  onAddTab?: () => void;\n  onCloseTab?: (tabIndex: number, newActiveTabIndex: number) => void;\n  onExitEditMode?: ExitEditModeHandler;\n  onMoveTab?: (fromIndex: number, toIndex: number) => void;\n  orientation: orientationType;\n  keyBoardActivation?: \"manual\" | \"automatic\";\n}\n\nconst editKeys = new Set([\"Enter\", \" \"]);\nconst isEditKey = (key: string) => editKeys.has(key);\n\ntype InteractedTabState = {\n  index: number;\n  state: \"rename\";\n};\n\nexport const useTabstrip = ({\n  activeTabIndex: activeTabIndexProp,\n  allowDragDrop,\n  animateSelectionThumb,\n  containerRef,\n  onActiveChange,\n  onAddTab,\n  onCloseTab,\n  onExitEditMode,\n  onMoveTab,\n  orientation,\n  keyBoardActivation,\n}: TabstripHookProps) => {\n  const lastSelection = useRef(activeTabIndexProp);\n  const [interactedTabState, setInteractedTabState] = useState<\n    InteractedTabState | undefined\n  >();\n\n  const {\n    focusTab: keyboardHookFocusTab,\n    highlightedIdx,\n    onClick: keyboardHookHandleClick,\n    onKeyDown: keyboardHookHandleKeyDown,\n    setHighlightedIdx: keyboardHookSetHighlightedIndex,\n    ...keyboardHook\n  } = useKeyboardNavigation({\n    containerRef,\n    keyBoardActivation,\n    orientation,\n    selectedIndex: lastSelection.current,\n  });\n\n  const {\n    activateTab: selectionHookActivateTab,\n    onClick: selectionHookHandleClick,\n    onKeyDown: selectionHookHandleKeyDown,\n    selected: selectionHookSelected,\n  } = useSelection({\n    highlightedIdx,\n    onSelectionChange: onActiveChange,\n    selected: activeTabIndexProp,\n  });\n  // We need this on reEntry for navigation hook to handle focus and for dragDropHook\n  // to re-apply selection after drag drop. For some reason the value is stale if we\n  // directly use selectionHookSelected within the drag, even though all dependencies\n  //appear to be correctly declared.\n  lastSelection.current = selectionHookSelected;\n\n  const { containerStyle, resumeAnimation, suspendAnimation } =\n    useAnimatedSelectionThumb(\n      containerRef,\n      animateSelectionThumb ? selectionHookSelected : -1,\n      orientation\n    );\n\n  const handleDrop = useCallback(\n    ({ fromIndex, toIndex }: DropOptions) => {\n      const { current: selected } = lastSelection;\n      console.log(\n        `useTabstrip handleDrop ${fromIndex} - ${toIndex}  ${selected}`\n      );\n      onMoveTab?.(fromIndex, toIndex);\n      let nextSelectedTab = -1;\n      if (toIndex !== -1) {\n        if (selected === fromIndex) {\n          nextSelectedTab = toIndex;\n        } else if (fromIndex > selected && toIndex <= selected) {\n          nextSelectedTab = selected + 1;\n        } else if (fromIndex < selected && toIndex >= selected) {\n          nextSelectedTab = selected - 1;\n        }\n        if (nextSelectedTab !== -1) {\n          suspendAnimation();\n          selectionHookActivateTab(nextSelectedTab);\n          requestAnimationFrame(resumeAnimation);\n        }\n        keyboardHookFocusTab(toIndex, false, false, 350);\n      }\n    },\n    [\n      keyboardHookFocusTab,\n      onMoveTab,\n      resumeAnimation,\n      selectionHookActivateTab,\n      suspendAnimation,\n    ]\n  );\n\n  const { onMouseDown: dragDropHookHandleMouseDown, ...dragDropHook } =\n    useDragDrop({\n      allowDragDrop,\n      containerRef,\n      // this is for useDragDropNext\n      draggableClassName: `tabstrip-${orientation}`,\n      // extendedDropZone: overflowedItems.length > 0,\n      onDrop: handleDrop,\n      orientation: \"horizontal\",\n      itemQuery: \".vuuOverflowContainer-item\",\n    });\n\n  const handleExitEditMode = useCallback<ExitEditModeHandler>(\n    (originalValue, editedValue, allowDeactivation, tabIndex) => {\n      setInteractedTabState(undefined);\n      onExitEditMode?.(originalValue, editedValue, allowDeactivation, tabIndex);\n      if (!allowDeactivation) {\n        // this indicates that Enter or Esc key has been pressed, hence we\n        // want to make sure keyboardHook treats this as a keyboard event\n        // (and applies focusVisible). The last parameter here does that.\n        keyboardHookFocusTab(tabIndex, false, true);\n      }\n    },\n    [keyboardHookFocusTab, onExitEditMode]\n  );\n\n  const handleClick = useCallback(\n    (evt: ReactMouseEvent<HTMLElement>, tabIndex: number) => {\n      // releasing the mouse at end of drag will trigger a click, ignore those\n      // if (!dragDropHook.isDragging) {\n      keyboardHookHandleClick(evt, tabIndex);\n      selectionHookHandleClick(evt, tabIndex);\n      // }\n    },\n    // [dragDropHook.isDragging, keyboardHook, selectionHook]\n    [keyboardHookHandleClick, selectionHookHandleClick]\n  );\n\n  const editTab = useCallback(\n    (tabIndex = highlightedIdx) => {\n      console.log(`set interacted tab state ${tabIndex}`);\n      setInteractedTabState({ index: tabIndex, state: \"rename\" });\n    },\n    [highlightedIdx]\n  );\n\n  const handleKeyDown = useCallback(\n    (evt: KeyboardEvent) => {\n      keyboardHookHandleKeyDown(evt);\n      if (!evt.defaultPrevented) {\n        selectionHookHandleKeyDown(evt);\n      }\n      if (!evt.defaultPrevented && isEditKey(evt.key)) {\n        editTab();\n      }\n    },\n    [editTab, keyboardHookHandleKeyDown, selectionHookHandleKeyDown]\n  );\n\n  const handleCloseTabFromMenu = useCallback(\n    (tabIndex: number) => {\n      const selectedTabIndex = getIndexOfSelectedTab(containerRef.current);\n      const newActiveTabIndex =\n        selectedTabIndex > tabIndex\n          ? selectedTabIndex - 1\n          : selectedTabIndex === tabIndex\n          ? 0\n          : selectedTabIndex;\n      suspendAnimation();\n      // containerRef.current?.classList.add(\"vuuTabThumb-noTransition\");\n      onCloseTab?.(tabIndex, newActiveTabIndex);\n      setTimeout(() => {\n        resumeAnimation();\n        // containerRef.current?.classList.remove(\"vuuTabThumb-noTransition\");\n      }, 200);\n      return true;\n    },\n    [containerRef, onCloseTab, resumeAnimation, suspendAnimation]\n  );\n\n  const handleRenameTabFromMenu = useCallback(\n    (tabIndex: number) => {\n      editTab(tabIndex);\n      return true;\n    },\n    [editTab]\n  );\n\n  const handleTabMenuAction = useCallback<MenuActionHandler>(\n    (action) => {\n      if (isTabMenuOptions(action.options)) {\n        switch (action.menuId) {\n          case \"close-tab\":\n            return handleCloseTabFromMenu(action.options.tabIndex);\n          case \"rename-tab\":\n            return handleRenameTabFromMenu(action.options.tabIndex);\n          default:\n            console.log(`tab menu action ${action.menuId}`);\n        }\n      }\n      return false;\n    },\n    [handleCloseTabFromMenu, handleRenameTabFromMenu]\n  );\n\n  //TODO( why do we sometimes see this fired twice  eg following rename)\n  const handleTabMenuClose = useCallback(() => {\n    if (interactedTabState?.index === highlightedIdx) {\n      keyboardHookSetHighlightedIndex(highlightedIdx);\n    } else {\n      keyboardHookFocusTab(highlightedIdx);\n    }\n  }, [\n    highlightedIdx,\n    interactedTabState?.index,\n    keyboardHookFocusTab,\n    keyboardHookSetHighlightedIndex,\n  ]);\n\n  const onSwitchWrappedItemIntoView = useCallback(\n    (item: OverflowItem) => {\n      const index = parseInt(item.index);\n      if (!isNaN(index)) {\n        selectionHookActivateTab(index);\n      }\n    },\n    [selectionHookActivateTab]\n  );\n\n  const navigationProps = {\n    onFocus: keyboardHook.onFocus,\n    onKeyDown: handleKeyDown,\n  };\n\n  const handleAddTabClick = useCallback(() => {\n    onAddTab?.();\n    requestAnimationFrame(() => {\n      const selectedTabIndex = getIndexOfSelectedTab(containerRef.current);\n      if (selectedTabIndex !== -1) {\n        keyboardHookFocusTab(selectedTabIndex);\n      }\n    });\n  }, [containerRef, keyboardHookFocusTab, onAddTab]);\n\n  const tabProps = {\n    onClick: handleClick,\n    onKeyDown: handleKeyDown,\n    onExitEditMode: handleExitEditMode,\n    onMenuAction: handleTabMenuAction,\n    onMenuClose: handleTabMenuClose,\n    onMouseDown: dragDropHookHandleMouseDown,\n  };\n\n  return {\n    activeTabIndex: selectionHookSelected,\n    containerProps: {\n      ...keyboardHook.containerProps,\n      onSwitchWrappedItemIntoView,\n    },\n    containerStyle,\n    focusVisible: keyboardHook.focusVisible,\n    interactedTabState,\n    navigationProps,\n    onClickAddTab: handleAddTabClick,\n    tabProps,\n    ...dragDropHook,\n  };\n};\n"],"names":["useRef","useState","useKeyboardNavigation","useSelection","useAnimatedSelectionThumb","useCallback","useDragDrop","getIndexOfSelectedTab","isTabMenuOptions"],"mappings":"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"}

package/esm/dropdown-base/useClickAway.js

@@ -30,7 +30,6 @@ const useClickAway = ({
   useEffect(() => {
     const [clickHandler, escapeKeyHandler] = isOpen ? [
       (evt) => {
-        console.log("click away");
         const targetElement = evt.target;
         if (!popperRef.current?.contains(targetElement) && !rootRef.current?.contains(targetElement)) {
           if (!targetWithinSubPopup(popperRef.current, targetElement)) {

package/esm/dropdown-base/useClickAway.js.map

@@ -1 +1 @@
-{"version":3,"file":"useClickAway.js","sources":["../../src/dropdown-base/useClickAway.ts"],"sourcesContent":["import { queryClosest } from \"@vuu-ui/vuu-utils\";\nimport { RefObject, useEffect, useRef } from \"react\";\nimport { CloseReason } from \"./dropdownTypes\";\n\nexport type ClickawayHook = (props: {\n  popperRef: RefObject<HTMLElement>;\n  rootRef: RefObject<HTMLElement>;\n  isOpen: boolean;\n  onClose: (reason: CloseReason) => void;\n}) => void;\n\ntype MouseEventHandler = (e: MouseEvent) => void;\ntype KeyboardEventHandler = (e: KeyboardEvent) => void;\n\nconst NO_HANDLERS: [MouseEventHandler?, KeyboardEventHandler?] = [];\n\nexport const targetWithinSubPopup = (\n  source: HTMLElement | null,\n  target: HTMLElement\n) => {\n  if (source === null) {\n    return false;\n  }\n\n  const sourcePortal = queryClosest(source, \".vuuPortal\");\n  const targetPortal = queryClosest(target, \".vuuPortal\");\n\n  if (sourcePortal && targetPortal) {\n    // If we have two portals, this can only be a popup launched from a popup.\n    // There will be a relationship, described by aria attributes.\n    const targetWithId = targetPortal.querySelector(\"[id]\");\n    const targetOwner = sourcePortal.querySelector(\n      `[aria-owns=\"${targetWithId?.id}\"]`\n    );\n    return targetOwner !== null;\n  }\n\n  return false;\n};\n\nexport const useClickAway: ClickawayHook = ({\n  popperRef,\n  rootRef,\n  isOpen,\n  onClose,\n}) => {\n  //TODO usePropBackedRef\n  const openRef = useRef(isOpen);\n  useEffect(() => {\n    openRef.current = isOpen;\n  }, [isOpen]);\n\n  useEffect(() => {\n    const [clickHandler, escapeKeyHandler] = isOpen\n      ? [\n          (evt: MouseEvent) => {\n            console.log(\"click away\");\n            const targetElement = evt.target as HTMLElement;\n            if (\n              !popperRef.current?.contains(targetElement) &&\n              !rootRef.current?.contains(targetElement)\n            ) {\n              if (!targetWithinSubPopup(popperRef.current, targetElement)) {\n                onClose(\"click-away\");\n              }\n            }\n          },\n          (e: KeyboardEvent) => {\n            if (e.key === \"Escape\") {\n              if (openRef.current) {\n                onClose(\"Escape\");\n                e.stopPropagation();\n              }\n            }\n          },\n        ]\n      : NO_HANDLERS;\n\n    if (clickHandler && escapeKeyHandler) {\n      document.body.addEventListener(\"mousedown\", clickHandler, true);\n      document.body.addEventListener(\"keydown\", escapeKeyHandler, true);\n    }\n\n    return () => {\n      if (clickHandler && escapeKeyHandler) {\n        document.body.removeEventListener(\"mousedown\", clickHandler, true);\n        document.body.removeEventListener(\"keydown\", escapeKeyHandler, true);\n      }\n    };\n  }, [isOpen, onClose, popperRef, rootRef]);\n};\n"],"names":[],"mappings":";;;AAcA,MAAM,cAA2D,EAAC,CAAA;AAErD,MAAA,oBAAA,GAAuB,CAClC,MAAA,EACA,MACG,KAAA;AACH,EAAA,IAAI,WAAW,IAAM,EAAA;AACnB,IAAO,OAAA,KAAA,CAAA;AAAA,GACT;AAEA,EAAM,MAAA,YAAA,GAAe,YAAa,CAAA,MAAA,EAAQ,YAAY,CAAA,CAAA;AACtD,EAAM,MAAA,YAAA,GAAe,YAAa,CAAA,MAAA,EAAQ,YAAY,CAAA,CAAA;AAEtD,EAAA,IAAI,gBAAgB,YAAc,EAAA;AAGhC,IAAM,MAAA,YAAA,GAAe,YAAa,CAAA,aAAA,CAAc,MAAM,CAAA,CAAA;AACtD,IAAA,MAAM,cAAc,YAAa,CAAA,aAAA;AAAA,MAC/B,CAAA,YAAA,EAAe,cAAc,EAAE,CAAA,EAAA,CAAA;AAAA,KACjC,CAAA;AACA,IAAA,OAAO,WAAgB,KAAA,IAAA,CAAA;AAAA,GACzB;AAEA,EAAO,OAAA,KAAA,CAAA;AACT,EAAA;AAEO,MAAM,eAA8B,CAAC;AAAA,EAC1C,SAAA;AAAA,EACA,OAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA;AACF,CAAM,KAAA;AAEJ,EAAM,MAAA,OAAA,GAAU,OAAO,MAAM,CAAA,CAAA;AAC7B,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,OAAA,CAAQ,OAAU,GAAA,MAAA,CAAA;AAAA,GACpB,EAAG,CAAC,MAAM,CAAC,CAAA,CAAA;AAEX,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,MAAM,CAAC,YAAA,EAAc,gBAAgB,CAAA,GAAI,MACrC,GAAA;AAAA,MACE,CAAC,GAAoB,KAAA;AACnB,QAAA,OAAA,CAAQ,IAAI,YAAY,CAAA,CAAA;AACxB,QAAA,MAAM,gBAAgB,GAAI,CAAA,MAAA,CAAA;AAC1B,QACE,IAAA,CAAC,SAAU,CAAA,OAAA,EAAS,QAAS,CAAA,aAAa,CAC1C,IAAA,CAAC,OAAQ,CAAA,OAAA,EAAS,QAAS,CAAA,aAAa,CACxC,EAAA;AACA,UAAA,IAAI,CAAC,oBAAA,CAAqB,SAAU,CAAA,OAAA,EAAS,aAAa,CAAG,EAAA;AAC3D,YAAA,OAAA,CAAQ,YAAY,CAAA,CAAA;AAAA,WACtB;AAAA,SACF;AAAA,OACF;AAAA,MACA,CAAC,CAAqB,KAAA;AACpB,QAAI,IAAA,CAAA,CAAE,QAAQ,QAAU,EAAA;AACtB,UAAA,IAAI,QAAQ,OAAS,EAAA;AACnB,YAAA,OAAA,CAAQ,QAAQ,CAAA,CAAA;AAChB,YAAA,CAAA,CAAE,eAAgB,EAAA,CAAA;AAAA,WACpB;AAAA,SACF;AAAA,OACF;AAAA,KAEF,GAAA,WAAA,CAAA;AAEJ,IAAA,IAAI,gBAAgB,gBAAkB,EAAA;AACpC,MAAA,QAAA,CAAS,IAAK,CAAA,gBAAA,CAAiB,WAAa,EAAA,YAAA,EAAc,IAAI,CAAA,CAAA;AAC9D,MAAA,QAAA,CAAS,IAAK,CAAA,gBAAA,CAAiB,SAAW,EAAA,gBAAA,EAAkB,IAAI,CAAA,CAAA;AAAA,KAClE;AAEA,IAAA,OAAO,MAAM;AACX,MAAA,IAAI,gBAAgB,gBAAkB,EAAA;AACpC,QAAA,QAAA,CAAS,IAAK,CAAA,mBAAA,CAAoB,WAAa,EAAA,YAAA,EAAc,IAAI,CAAA,CAAA;AACjE,QAAA,QAAA,CAAS,IAAK,CAAA,mBAAA,CAAoB,SAAW,EAAA,gBAAA,EAAkB,IAAI,CAAA,CAAA;AAAA,OACrE;AAAA,KACF,CAAA;AAAA,KACC,CAAC,MAAA,EAAQ,OAAS,EAAA,SAAA,EAAW,OAAO,CAAC,CAAA,CAAA;AAC1C;;;;"}
+{"version":3,"file":"useClickAway.js","sources":["../../src/dropdown-base/useClickAway.ts"],"sourcesContent":["import { queryClosest } from \"@vuu-ui/vuu-utils\";\nimport { RefObject, useEffect, useRef } from \"react\";\nimport { CloseReason } from \"./dropdownTypes\";\n\nexport type ClickawayHook = (props: {\n  popperRef: RefObject<HTMLElement>;\n  rootRef: RefObject<HTMLElement>;\n  isOpen: boolean;\n  onClose: (reason: CloseReason) => void;\n}) => void;\n\ntype MouseEventHandler = (e: MouseEvent) => void;\ntype KeyboardEventHandler = (e: KeyboardEvent) => void;\n\nconst NO_HANDLERS: [MouseEventHandler?, KeyboardEventHandler?] = [];\n\nexport const targetWithinSubPopup = (\n  source: HTMLElement | null,\n  target: HTMLElement\n) => {\n  if (source === null) {\n    return false;\n  }\n\n  const sourcePortal = queryClosest(source, \".vuuPortal\");\n  const targetPortal = queryClosest(target, \".vuuPortal\");\n\n  if (sourcePortal && targetPortal) {\n    // If we have two portals, this can only be a popup launched from a popup.\n    // There will be a relationship, described by aria attributes.\n    const targetWithId = targetPortal.querySelector(\"[id]\");\n    const targetOwner = sourcePortal.querySelector(\n      `[aria-owns=\"${targetWithId?.id}\"]`\n    );\n    return targetOwner !== null;\n  }\n\n  return false;\n};\n\nexport const useClickAway: ClickawayHook = ({\n  popperRef,\n  rootRef,\n  isOpen,\n  onClose,\n}) => {\n  //TODO usePropBackedRef\n  const openRef = useRef(isOpen);\n  useEffect(() => {\n    openRef.current = isOpen;\n  }, [isOpen]);\n\n  useEffect(() => {\n    const [clickHandler, escapeKeyHandler] = isOpen\n      ? [\n          (evt: MouseEvent) => {\n            const targetElement = evt.target as HTMLElement;\n            if (\n              !popperRef.current?.contains(targetElement) &&\n              !rootRef.current?.contains(targetElement)\n            ) {\n              if (!targetWithinSubPopup(popperRef.current, targetElement)) {\n                onClose(\"click-away\");\n              }\n            }\n          },\n          (e: KeyboardEvent) => {\n            if (e.key === \"Escape\") {\n              if (openRef.current) {\n                onClose(\"Escape\");\n                e.stopPropagation();\n              }\n            }\n          },\n        ]\n      : NO_HANDLERS;\n\n    if (clickHandler && escapeKeyHandler) {\n      document.body.addEventListener(\"mousedown\", clickHandler, true);\n      document.body.addEventListener(\"keydown\", escapeKeyHandler, true);\n    }\n\n    return () => {\n      if (clickHandler && escapeKeyHandler) {\n        document.body.removeEventListener(\"mousedown\", clickHandler, true);\n        document.body.removeEventListener(\"keydown\", escapeKeyHandler, true);\n      }\n    };\n  }, [isOpen, onClose, popperRef, rootRef]);\n};\n"],"names":[],"mappings":";;;AAcA,MAAM,cAA2D,EAAC,CAAA;AAErD,MAAA,oBAAA,GAAuB,CAClC,MAAA,EACA,MACG,KAAA;AACH,EAAA,IAAI,WAAW,IAAM,EAAA;AACnB,IAAO,OAAA,KAAA,CAAA;AAAA,GACT;AAEA,EAAM,MAAA,YAAA,GAAe,YAAa,CAAA,MAAA,EAAQ,YAAY,CAAA,CAAA;AACtD,EAAM,MAAA,YAAA,GAAe,YAAa,CAAA,MAAA,EAAQ,YAAY,CAAA,CAAA;AAEtD,EAAA,IAAI,gBAAgB,YAAc,EAAA;AAGhC,IAAM,MAAA,YAAA,GAAe,YAAa,CAAA,aAAA,CAAc,MAAM,CAAA,CAAA;AACtD,IAAA,MAAM,cAAc,YAAa,CAAA,aAAA;AAAA,MAC/B,CAAA,YAAA,EAAe,cAAc,EAAE,CAAA,EAAA,CAAA;AAAA,KACjC,CAAA;AACA,IAAA,OAAO,WAAgB,KAAA,IAAA,CAAA;AAAA,GACzB;AAEA,EAAO,OAAA,KAAA,CAAA;AACT,EAAA;AAEO,MAAM,eAA8B,CAAC;AAAA,EAC1C,SAAA;AAAA,EACA,OAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA;AACF,CAAM,KAAA;AAEJ,EAAM,MAAA,OAAA,GAAU,OAAO,MAAM,CAAA,CAAA;AAC7B,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,OAAA,CAAQ,OAAU,GAAA,MAAA,CAAA;AAAA,GACpB,EAAG,CAAC,MAAM,CAAC,CAAA,CAAA;AAEX,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,MAAM,CAAC,YAAA,EAAc,gBAAgB,CAAA,GAAI,MACrC,GAAA;AAAA,MACE,CAAC,GAAoB,KAAA;AACnB,QAAA,MAAM,gBAAgB,GAAI,CAAA,MAAA,CAAA;AAC1B,QACE,IAAA,CAAC,SAAU,CAAA,OAAA,EAAS,QAAS,CAAA,aAAa,CAC1C,IAAA,CAAC,OAAQ,CAAA,OAAA,EAAS,QAAS,CAAA,aAAa,CACxC,EAAA;AACA,UAAA,IAAI,CAAC,oBAAA,CAAqB,SAAU,CAAA,OAAA,EAAS,aAAa,CAAG,EAAA;AAC3D,YAAA,OAAA,CAAQ,YAAY,CAAA,CAAA;AAAA,WACtB;AAAA,SACF;AAAA,OACF;AAAA,MACA,CAAC,CAAqB,KAAA;AACpB,QAAI,IAAA,CAAA,CAAE,QAAQ,QAAU,EAAA;AACtB,UAAA,IAAI,QAAQ,OAAS,EAAA;AACnB,YAAA,OAAA,CAAQ,QAAQ,CAAA,CAAA;AAChB,YAAA,CAAA,CAAE,eAAgB,EAAA,CAAA;AAAA,WACpB;AAAA,SACF;AAAA,OACF;AAAA,KAEF,GAAA,WAAA,CAAA;AAEJ,IAAA,IAAI,gBAAgB,gBAAkB,EAAA;AACpC,MAAA,QAAA,CAAS,IAAK,CAAA,gBAAA,CAAiB,WAAa,EAAA,YAAA,EAAc,IAAI,CAAA,CAAA;AAC9D,MAAA,QAAA,CAAS,IAAK,CAAA,gBAAA,CAAiB,SAAW,EAAA,gBAAA,EAAkB,IAAI,CAAA,CAAA;AAAA,KAClE;AAEA,IAAA,OAAO,MAAM;AACX,MAAA,IAAI,gBAAgB,gBAAkB,EAAA;AACpC,QAAA,QAAA,CAAS,IAAK,CAAA,mBAAA,CAAoB,WAAa,EAAA,YAAA,EAAc,IAAI,CAAA,CAAA;AACjE,QAAA,QAAA,CAAS,IAAK,CAAA,mBAAA,CAAoB,SAAW,EAAA,gBAAA,EAAkB,IAAI,CAAA,CAAA;AAAA,OACrE;AAAA,KACF,CAAA;AAAA,KACC,CAAC,MAAA,EAAQ,OAAS,EAAA,SAAA,EAAW,OAAO,CAAC,CAAA,CAAA;AAC1C;;;;"}

package/esm/editable-label/EditableLabel.js

@@ -68,31 +68,31 @@ const EditableLabel = forwardRef(function EditableLabel2({
     }),
     [beginEdit]
   );
-  const exitEditMode = ({
-    cancelEdit = false,
-    allowDeactivation = false
-  } = {}) => {
-    setEditing(false);
-    const originalValue = initialValue.current;
-    if (originalValue !== value) {
-      if (cancelEdit) {
-        setValue(originalValue);
-      } else {
-        initialValue.current = value;
+  const exitEditMode = useCallback(
+    ({ cancelEdit = false, allowDeactivation = false } = {}) => {
+      setEditing(false);
+      const originalValue = initialValue.current;
+      if (originalValue !== value) {
+        if (cancelEdit) {
+          setValue(originalValue);
+        } else {
+          initialValue.current = value;
+        }
       }
-    }
-    onExitEditMode && onExitEditMode(originalValue, value, allowDeactivation, cancelEdit);
-  };
+      onExitEditMode && onExitEditMode(originalValue, value, allowDeactivation, cancelEdit);
+    },
+    [onExitEditMode, setEditing, setValue, value]
+  );
   const handleChange = (evt) => {
     const { value: value2 } = evt.target;
     setValue(value2);
     onChange && onChange(value2);
   };
-  const handleBlur = () => {
-    if (editingRef.current) {
+  const handleBlur = useCallback(() => {
+    if (editing || editingRef.current) {
       exitEditMode({ allowDeactivation: true });
     }
-  };
+  }, [editing, exitEditMode]);
   const handleKeyDown = (evt) => {
     if (editing && evt.key === "Enter") {
       evt.stopPropagation();

package/esm/editable-label/EditableLabel.js.map

@@ -1 +1 @@
-{"version":3,"file":"EditableLabel.js","sources":["../../src/editable-label/EditableLabel.tsx"],"sourcesContent":["import cx from \"clsx\";\nimport {\n  ChangeEvent,\n  KeyboardEvent,\n  useCallback,\n  useLayoutEffect,\n  forwardRef,\n  ForwardedRef,\n  ReactElement,\n  useRef,\n  HTMLAttributes,\n  useImperativeHandle,\n} from \"react\";\nimport { Input, useControlled } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport editableLabelCss from \"./EditableLabel.css\";\n\nconst classBase = \"vuuEditableLabel\";\n\nexport type ExitEditModeHandler = (\n  originalLabel: string | undefined,\n  editedLabel: string | undefined,\n  allowDeactivation?: boolean,\n  editCancelled?: boolean\n) => void;\n\nexport interface EditAPI {\n  beginEdit: () => void;\n}\n\nexport const NullEditAPI: EditAPI = {\n  beginEdit: () => undefined,\n};\n\nexport interface EditableLabelProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n  className?: string;\n  defaultEditing?: boolean;\n  defaultValue?: string;\n  editLabelApiRef?: ForwardedRef<EditAPI>;\n  editing?: boolean;\n  onEnterEditMode: () => void;\n  onChange?: (value: string) => void;\n  onExitEditMode: ExitEditModeHandler;\n  defaultIsEditing?: boolean;\n  value?: string;\n}\n\nexport const EditableLabel = forwardRef(function EditableLabel(\n  {\n    className: classNameProp,\n    defaultEditing,\n    defaultValue,\n    editLabelApiRef,\n    editing: editingProp,\n    onChange,\n    onEnterEditMode,\n    onExitEditMode,\n    value: valueProp,\n    ...restProps\n  }: EditableLabelProps,\n  forwardedRef: ForwardedRef<HTMLDivElement>\n): ReactElement<EditableLabelProps> {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-editable-label\",\n    css: editableLabelCss,\n    window: targetWindow,\n  });\n\n  const inputRef = useRef<HTMLInputElement | null>(null);\n  const editingRef = useRef<boolean>(false);\n\n  const [value, setValue] = useControlled({\n    controlled: valueProp,\n    default: defaultValue ?? \"\",\n    name: \"EditableLabel\",\n    state: \"value\",\n  });\n\n  const [editing, _setEditing] = useControlled({\n    controlled: editingProp,\n    default: defaultEditing ?? false,\n    name: \"EditableLabel\",\n    state: \"editing\",\n  });\n\n  const setEditing = useCallback(\n    (value: boolean) => {\n      _setEditing((editingRef.current = value));\n    },\n    [_setEditing]\n  );\n\n  const initialValue = useRef(value);\n\n  useLayoutEffect(() => {\n    if (editing) {\n      if (inputRef.current !== null) {\n        inputRef.current.select();\n        inputRef.current.focus();\n      }\n    }\n  }, [editing, inputRef]);\n\n  const beginEdit = useCallback(() => {\n    setEditing(true);\n    onEnterEditMode?.();\n  }, [onEnterEditMode, setEditing]);\n\n  useImperativeHandle(\n    editLabelApiRef,\n    () => ({\n      beginEdit,\n    }),\n    [beginEdit]\n  );\n\n  const exitEditMode = ({\n    cancelEdit = false,\n    allowDeactivation = false,\n  } = {}) => {\n    setEditing(false);\n    const originalValue = initialValue.current;\n    if (originalValue !== value) {\n      if (cancelEdit) {\n        setValue(originalValue);\n      } else {\n        initialValue.current = value;\n      }\n    }\n    onExitEditMode &&\n      onExitEditMode(originalValue, value, allowDeactivation, cancelEdit);\n  };\n\n  const handleChange = (evt: ChangeEvent<HTMLInputElement>) => {\n    const { value } = evt.target;\n    setValue(value);\n    onChange && onChange(value);\n  };\n\n  // We need the ref here as the blur fires before setEditing has taken effect,\n  // so we get a double call to exitEditMode if edit is cancelled.\n  const handleBlur = () => {\n    if (editingRef.current) {\n      exitEditMode({ allowDeactivation: true });\n    }\n  };\n\n  const handleKeyDown = (evt: KeyboardEvent<HTMLInputElement>) => {\n    if (editing && evt.key === \"Enter\") {\n      evt.stopPropagation();\n      // we are likely to lose focus as a consequence of user response\n      // to exitEdit transition, don't want it to trigger another\n      //shouldn't we call setEditing here in case we are in uncontrolled mode ?\n      exitEditMode();\n    } else if (evt.key === \"ArrowRight\" || evt.key === \"ArrowLeft\") {\n      evt.stopPropagation();\n    } else if (evt.key === \"Escape\") {\n      exitEditMode({ cancelEdit: true });\n    }\n  };\n\n  const className = cx(classBase, classNameProp, {\n    [`${classBase}-editing`]: editing,\n  });\n  return (\n    <div\n      {...restProps}\n      className={className}\n      data-text={value}\n      ref={forwardedRef}\n    >\n      {editing ? (\n        <Input\n          inputProps={{ className: `${classBase}-input`, spellCheck: false }}\n          value={value}\n          onBlur={handleBlur}\n          onChange={handleChange}\n          onKeyDown={handleKeyDown}\n          inputRef={inputRef}\n          style={{ padding: 0 }}\n          textAlign=\"left\"\n          variant=\"secondary\"\n        />\n      ) : (\n        <span className={`${classBase}-label`}>{value}</span>\n      )}\n    </div>\n  );\n});\n"],"names":["EditableLabel","value"],"mappings":"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"}
+{"version":3,"file":"EditableLabel.js","sources":["../../src/editable-label/EditableLabel.tsx"],"sourcesContent":["import cx from \"clsx\";\nimport {\n  ChangeEvent,\n  KeyboardEvent,\n  useCallback,\n  useLayoutEffect,\n  forwardRef,\n  ForwardedRef,\n  ReactElement,\n  useRef,\n  HTMLAttributes,\n  useImperativeHandle,\n} from \"react\";\nimport { Input, useControlled } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport editableLabelCss from \"./EditableLabel.css\";\n\nconst classBase = \"vuuEditableLabel\";\n\nexport type ExitEditModeHandler = (\n  originalLabel: string | undefined,\n  editedLabel: string | undefined,\n  allowDeactivation?: boolean,\n  editCancelled?: boolean\n) => void;\n\nexport interface EditAPI {\n  beginEdit: () => void;\n}\n\nexport const NullEditAPI: EditAPI = {\n  beginEdit: () => undefined,\n};\n\nexport interface EditableLabelProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n  className?: string;\n  defaultEditing?: boolean;\n  defaultValue?: string;\n  editLabelApiRef?: ForwardedRef<EditAPI>;\n  editing?: boolean;\n  onEnterEditMode: () => void;\n  onChange?: (value: string) => void;\n  onExitEditMode: ExitEditModeHandler;\n  defaultIsEditing?: boolean;\n  value?: string;\n}\n\nexport const EditableLabel = forwardRef(function EditableLabel(\n  {\n    className: classNameProp,\n    defaultEditing,\n    defaultValue,\n    editLabelApiRef,\n    editing: editingProp,\n    onChange,\n    onEnterEditMode,\n    onExitEditMode,\n    value: valueProp,\n    ...restProps\n  }: EditableLabelProps,\n  forwardedRef: ForwardedRef<HTMLDivElement>\n): ReactElement<EditableLabelProps> {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-editable-label\",\n    css: editableLabelCss,\n    window: targetWindow,\n  });\n\n  const inputRef = useRef<HTMLInputElement | null>(null);\n  const editingRef = useRef<boolean>(false);\n\n  const [value, setValue] = useControlled({\n    controlled: valueProp,\n    default: defaultValue ?? \"\",\n    name: \"EditableLabel\",\n    state: \"value\",\n  });\n\n  const [editing, _setEditing] = useControlled({\n    controlled: editingProp,\n    default: defaultEditing ?? false,\n    name: \"EditableLabel\",\n    state: \"editing\",\n  });\n\n  const setEditing = useCallback(\n    (value: boolean) => {\n      _setEditing((editingRef.current = value));\n    },\n    [_setEditing]\n  );\n\n  const initialValue = useRef(value);\n\n  useLayoutEffect(() => {\n    if (editing) {\n      if (inputRef.current !== null) {\n        inputRef.current.select();\n        inputRef.current.focus();\n      }\n    }\n  }, [editing, inputRef]);\n\n  const beginEdit = useCallback(() => {\n    setEditing(true);\n    onEnterEditMode?.();\n  }, [onEnterEditMode, setEditing]);\n\n  useImperativeHandle(\n    editLabelApiRef,\n    () => ({\n      beginEdit,\n    }),\n    [beginEdit]\n  );\n\n  const exitEditMode = useCallback(\n    ({ cancelEdit = false, allowDeactivation = false } = {}) => {\n      setEditing(false);\n      const originalValue = initialValue.current;\n      if (originalValue !== value) {\n        if (cancelEdit) {\n          setValue(originalValue);\n        } else {\n          initialValue.current = value;\n        }\n      }\n      onExitEditMode &&\n        onExitEditMode(originalValue, value, allowDeactivation, cancelEdit);\n    },\n    [onExitEditMode, setEditing, setValue, value]\n  );\n\n  const handleChange = (evt: ChangeEvent<HTMLInputElement>) => {\n    const { value } = evt.target;\n    setValue(value);\n    onChange && onChange(value);\n  };\n\n  // We need the ref here as the blur fires before setEditing has taken effect,\n  // so we get a double call to exitEditMode if edit is cancelled.\n  const handleBlur = useCallback(() => {\n    if (editing || editingRef.current) {\n      exitEditMode({ allowDeactivation: true });\n    }\n  }, [editing, exitEditMode]);\n\n  const handleKeyDown = (evt: KeyboardEvent<HTMLInputElement>) => {\n    if (editing && evt.key === \"Enter\") {\n      evt.stopPropagation();\n      // we are likely to lose focus as a consequence of user response\n      // to exitEdit transition, don't want it to trigger another\n      //shouldn't we call setEditing here in case we are in uncontrolled mode ?\n      exitEditMode();\n    } else if (evt.key === \"ArrowRight\" || evt.key === \"ArrowLeft\") {\n      evt.stopPropagation();\n    } else if (evt.key === \"Escape\") {\n      exitEditMode({ cancelEdit: true });\n    }\n  };\n\n  const className = cx(classBase, classNameProp, {\n    [`${classBase}-editing`]: editing,\n  });\n  return (\n    <div\n      {...restProps}\n      className={className}\n      data-text={value}\n      ref={forwardedRef}\n    >\n      {editing ? (\n        <Input\n          inputProps={{ className: `${classBase}-input`, spellCheck: false }}\n          value={value}\n          onBlur={handleBlur}\n          onChange={handleChange}\n          onKeyDown={handleKeyDown}\n          inputRef={inputRef}\n          style={{ padding: 0 }}\n          textAlign=\"left\"\n          variant=\"secondary\"\n        />\n      ) : (\n        <span className={`${classBase}-label`}>{value}</span>\n      )}\n    </div>\n  );\n});\n"],"names":["EditableLabel","value"],"mappings":"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"}

package/esm/tabstrip/Tabstrip.js

@@ -43,10 +43,11 @@ const Tabstrip = ({
   const rootRef = useRef(null);
   const {
     activeTabIndex,
-    focusVisible,
     containerStyle,
+    focusVisible,
     draggedItemIndex,
     onClickAddTab,
+    interactedTabState,
     tabProps,
     ...tabstripHook
   } = useTabstrip({
@@ -87,6 +88,7 @@ const Tabstrip = ({
         "data-overflow-priority": selected ? "1" : void 0,
         dragging: draggedItemIndex === index,
         editable,
+        editing: interactedTabState?.index === index,
         focusVisible: focusVisible === index,
         id: tabId,
         index,
@@ -126,6 +128,7 @@ const Tabstrip = ({
       tabProps,
       tabClassName,
       draggedItemIndex,
+      interactedTabState,
       focusVisible,
       location
     ]

package/esm/tabstrip/Tabstrip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tabstrip.js","sources":["../../src/tabstrip/Tabstrip.tsx"],"sourcesContent":["import { asReactElements, useId } from \"@vuu-ui/vuu-utils\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport React, { useMemo, useRef } from \"react\";\nimport { TabProps, TabstripProps } from \"./TabsTypes\";\nimport { useTabstrip } from \"./useTabstrip\";\nimport { IconButton } from \"../icon-button\";\nimport { OverflowContainer } from \"../overflow-container\";\n\nimport tabstripCss from \"./Tabstrip.css\";\n\nconst classBase = \"vuuTabstrip\";\n\nexport const Tabstrip = ({\n  activeTabIndex: activeTabIndexProp,\n  allowAddTab,\n  allowCloseTab,\n  allowDragDrop = false,\n  allowRenameTab = false,\n  animateSelectionThumb = false,\n  children,\n  className: classNameProp,\n  id: idProp,\n  keyBoardActivation = \"manual\",\n  location,\n  onActiveChange,\n  onAddTab,\n  onCloseTab,\n  onExitEditMode,\n  onMoveTab,\n  orientation = \"horizontal\",\n  showTabMenuButton,\n  style: styleProp,\n  tabClassName,\n  variant = \"secondary\",\n  ...htmlAttributes\n}: TabstripProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-tabstrip\",\n    css: tabstripCss,\n    window: targetWindow,\n  });\n\n  const rootRef = useRef<HTMLDivElement>(null);\n  const {\n    activeTabIndex,\n    focusVisible,\n    containerStyle,\n    draggedItemIndex,\n    onClickAddTab,\n    tabProps,\n    ...tabstripHook\n  } = useTabstrip({\n    activeTabIndex: activeTabIndexProp,\n    allowDragDrop,\n    animateSelectionThumb,\n    containerRef: rootRef,\n    keyBoardActivation,\n    onActiveChange,\n    onAddTab,\n    onCloseTab,\n    onExitEditMode,\n    onMoveTab,\n    orientation,\n  });\n  const id = useId(idProp);\n  const className = cx(classBase, classNameProp);\n  const style =\n    styleProp || containerStyle\n      ? {\n          ...styleProp,\n          ...containerStyle,\n        }\n      : undefined;\n\n  const tabs = useMemo(\n    () =>\n      asReactElements(children)\n        .map((child, index) => {\n          const {\n            id: tabId = `${id}-tab-${index}`,\n            className,\n            closeable = allowCloseTab,\n            editable = allowRenameTab,\n            location: tabLocation,\n            showMenuButton = showTabMenuButton,\n          } = child.props;\n          const selected = index === activeTabIndex;\n          return React.cloneElement(child, {\n            ...tabProps,\n            ...tabstripHook.navigationProps,\n            className: cx(className, tabClassName),\n            closeable,\n            \"data-overflow-priority\": selected ? \"1\" : undefined,\n            dragging: draggedItemIndex === index,\n            editable,\n            focusVisible: focusVisible === index,\n            id: tabId,\n            index,\n            key: index,\n            location: cx(location, tabLocation),\n            selected,\n            showMenuButton,\n            tabIndex: selected ? 0 : -1,\n          } as Partial<TabProps>);\n        })\n        .concat(\n          allowAddTab ? (\n            <IconButton\n              {...tabstripHook.navigationProps}\n              aria-label=\"Create Tab\"\n              className={`${classBase}-addTabButton`}\n              data-embedded\n              icon=\"add\"\n              data-overflow-priority=\"1\"\n              key=\"addButton\"\n              onClick={onClickAddTab}\n              variant=\"secondary\"\n              tabIndex={-1}\n            />\n          ) : (\n            []\n          )\n        ),\n    [\n      children,\n      allowAddTab,\n      tabstripHook.navigationProps,\n      onClickAddTab,\n      id,\n      allowCloseTab,\n      allowRenameTab,\n      showTabMenuButton,\n      activeTabIndex,\n      tabProps,\n      tabClassName,\n      draggedItemIndex,\n      focusVisible,\n      location,\n    ]\n  );\n\n  return (\n    <>\n      <OverflowContainer\n        {...htmlAttributes}\n        {...tabstripHook.containerProps}\n        className={cx(className, `${classBase}-${variant}`)}\n        id={id}\n        orientation={orientation}\n        overflowIcon=\"more-horiz\"\n        ref={rootRef}\n        style={style}\n        role=\"tablist\"\n      >\n        {tabs}\n      </OverflowContainer>\n      {tabstripHook.draggable}\n    </>\n  );\n};\n"],"names":["className"],"mappings":";;;;;;;;;;;AAYA,MAAM,SAAY,GAAA,aAAA,CAAA;AAEX,MAAM,WAAW,CAAC;AAAA,EACvB,cAAgB,EAAA,kBAAA;AAAA,EAChB,WAAA;AAAA,EACA,aAAA;AAAA,EACA,aAAgB,GAAA,KAAA;AAAA,EAChB,cAAiB,GAAA,KAAA;AAAA,EACjB,qBAAwB,GAAA,KAAA;AAAA,EACxB,QAAA;AAAA,EACA,SAAW,EAAA,aAAA;AAAA,EACX,EAAI,EAAA,MAAA;AAAA,EACJ,kBAAqB,GAAA,QAAA;AAAA,EACrB,QAAA;AAAA,EACA,cAAA;AAAA,EACA,QAAA;AAAA,EACA,UAAA;AAAA,EACA,cAAA;AAAA,EACA,SAAA;AAAA,EACA,WAAc,GAAA,YAAA;AAAA,EACd,iBAAA;AAAA,EACA,KAAO,EAAA,SAAA;AAAA,EACP,YAAA;AAAA,EACA,OAAU,GAAA,WAAA;AAAA,EACV,GAAG,cAAA;AACL,CAAqB,KAAA;AACnB,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,cAAA;AAAA,IACR,GAAK,EAAA,WAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAM,MAAA,OAAA,GAAU,OAAuB,IAAI,CAAA,CAAA;AAC3C,EAAM,MAAA;AAAA,IACJ,cAAA;AAAA,IACA,YAAA;AAAA,IACA,cAAA;AAAA,IACA,gBAAA;AAAA,IACA,aAAA;AAAA,IACA,QAAA;AAAA,IACA,GAAG,YAAA;AAAA,MACD,WAAY,CAAA;AAAA,IACd,cAAgB,EAAA,kBAAA;AAAA,IAChB,aAAA;AAAA,IACA,qBAAA;AAAA,IACA,YAAc,EAAA,OAAA;AAAA,IACd,kBAAA;AAAA,IACA,cAAA;AAAA,IACA,QAAA;AAAA,IACA,UAAA;AAAA,IACA,cAAA;AAAA,IACA,SAAA;AAAA,IACA,WAAA;AAAA,GACD,CAAA,CAAA;AACD,EAAM,MAAA,EAAA,GAAK,MAAM,MAAM,CAAA,CAAA;AACvB,EAAM,MAAA,SAAA,GAAY,EAAG,CAAA,SAAA,EAAW,aAAa,CAAA,CAAA;AAC7C,EAAM,MAAA,KAAA,GACJ,aAAa,cACT,GAAA;AAAA,IACE,GAAG,SAAA;AAAA,IACH,GAAG,cAAA;AAAA,GAEL,GAAA,KAAA,CAAA,CAAA;AAEN,EAAA,MAAM,IAAO,GAAA,OAAA;AAAA,IACX,MACE,eAAgB,CAAA,QAAQ,EACrB,GAAI,CAAA,CAAC,OAAO,KAAU,KAAA;AACrB,MAAM,MAAA;AAAA,QACJ,EAAI,EAAA,KAAA,GAAQ,CAAG,EAAA,EAAE,QAAQ,KAAK,CAAA,CAAA;AAAA,QAC9B,SAAAA,EAAAA,UAAAA;AAAA,QACA,SAAY,GAAA,aAAA;AAAA,QACZ,QAAW,GAAA,cAAA;AAAA,QACX,QAAU,EAAA,WAAA;AAAA,QACV,cAAiB,GAAA,iBAAA;AAAA,UACf,KAAM,CAAA,KAAA,CAAA;AACV,MAAA,MAAM,WAAW,KAAU,KAAA,cAAA,CAAA;AAC3B,MAAO,OAAA,KAAA,CAAM,aAAa,KAAO,EAAA;AAAA,QAC/B,GAAG,QAAA;AAAA,QACH,GAAG,YAAa,CAAA,eAAA;AAAA,QAChB,SAAA,EAAW,EAAGA,CAAAA,UAAAA,EAAW,YAAY,CAAA;AAAA,QACrC,SAAA;AAAA,QACA,wBAAA,EAA0B,WAAW,GAAM,GAAA,KAAA,CAAA;AAAA,QAC3C,UAAU,gBAAqB,KAAA,KAAA;AAAA,QAC/B,QAAA;AAAA,QACA,cAAc,YAAiB,KAAA,KAAA;AAAA,QAC/B,EAAI,EAAA,KAAA;AAAA,QACJ,KAAA;AAAA,QACA,GAAK,EAAA,KAAA;AAAA,QACL,QAAA,EAAU,EAAG,CAAA,QAAA,EAAU,WAAW,CAAA;AAAA,QAClC,QAAA;AAAA,QACA,cAAA;AAAA,QACA,QAAA,EAAU,WAAW,CAAI,GAAA,CAAA,CAAA;AAAA,OACL,CAAA,CAAA;AAAA,KACvB,CACA,CAAA,MAAA;AAAA,MACC,WACE,mBAAA,aAAA;AAAA,QAAC,UAAA;AAAA,QAAA;AAAA,UACE,GAAG,YAAa,CAAA,eAAA;AAAA,UACjB,YAAW,EAAA,YAAA;AAAA,UACX,SAAA,EAAW,GAAG,SAAS,CAAA,aAAA,CAAA;AAAA,UACvB,eAAa,EAAA,IAAA;AAAA,UACb,IAAK,EAAA,KAAA;AAAA,UACL,wBAAuB,EAAA,GAAA;AAAA,UACvB,GAAI,EAAA,WAAA;AAAA,UACJ,OAAS,EAAA,aAAA;AAAA,UACT,OAAQ,EAAA,WAAA;AAAA,UACR,QAAU,EAAA,CAAA,CAAA;AAAA,SAAA;AAAA,UAGZ,EAAC;AAAA,KAEL;AAAA,IACJ;AAAA,MACE,QAAA;AAAA,MACA,WAAA;AAAA,MACA,YAAa,CAAA,eAAA;AAAA,MACb,aAAA;AAAA,MACA,EAAA;AAAA,MACA,aAAA;AAAA,MACA,cAAA;AAAA,MACA,iBAAA;AAAA,MACA,cAAA;AAAA,MACA,QAAA;AAAA,MACA,YAAA;AAAA,MACA,gBAAA;AAAA,MACA,YAAA;AAAA,MACA,QAAA;AAAA,KACF;AAAA,GACF,CAAA;AAEA,EAAA,uBAEI,IAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,iBAAA;AAAA,MAAA;AAAA,QACE,GAAG,cAAA;AAAA,QACH,GAAG,YAAa,CAAA,cAAA;AAAA,QACjB,WAAW,EAAG,CAAA,SAAA,EAAW,GAAG,SAAS,CAAA,CAAA,EAAI,OAAO,CAAE,CAAA,CAAA;AAAA,QAClD,EAAA;AAAA,QACA,WAAA;AAAA,QACA,YAAa,EAAA,YAAA;AAAA,QACb,GAAK,EAAA,OAAA;AAAA,QACL,KAAA;AAAA,QACA,IAAK,EAAA,SAAA;AAAA,QAEJ,QAAA,EAAA,IAAA;AAAA,OAAA;AAAA,KACH;AAAA,IACC,YAAa,CAAA,SAAA;AAAA,GAChB,EAAA,CAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"Tabstrip.js","sources":["../../src/tabstrip/Tabstrip.tsx"],"sourcesContent":["import { asReactElements, useId } from \"@vuu-ui/vuu-utils\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport React, { useMemo, useRef } from \"react\";\nimport { TabProps, TabstripProps } from \"./TabsTypes\";\nimport { useTabstrip } from \"./useTabstrip\";\nimport { IconButton } from \"../icon-button\";\nimport { OverflowContainer } from \"../overflow-container\";\n\nimport tabstripCss from \"./Tabstrip.css\";\n\nconst classBase = \"vuuTabstrip\";\n\nexport const Tabstrip = ({\n  activeTabIndex: activeTabIndexProp,\n  allowAddTab,\n  allowCloseTab,\n  allowDragDrop = false,\n  allowRenameTab = false,\n  animateSelectionThumb = false,\n  children,\n  className: classNameProp,\n  id: idProp,\n  keyBoardActivation = \"manual\",\n  location,\n  onActiveChange,\n  onAddTab,\n  onCloseTab,\n  onExitEditMode,\n  onMoveTab,\n  orientation = \"horizontal\",\n  showTabMenuButton,\n  style: styleProp,\n  tabClassName,\n  variant = \"secondary\",\n  ...htmlAttributes\n}: TabstripProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-tabstrip\",\n    css: tabstripCss,\n    window: targetWindow,\n  });\n\n  const rootRef = useRef<HTMLDivElement>(null);\n  const {\n    activeTabIndex,\n    containerStyle,\n    focusVisible,\n    draggedItemIndex,\n    onClickAddTab,\n    interactedTabState,\n    tabProps,\n    ...tabstripHook\n  } = useTabstrip({\n    activeTabIndex: activeTabIndexProp,\n    allowDragDrop,\n    animateSelectionThumb,\n    containerRef: rootRef,\n    keyBoardActivation,\n    onActiveChange,\n    onAddTab,\n    onCloseTab,\n    onExitEditMode,\n    onMoveTab,\n    orientation,\n  });\n  const id = useId(idProp);\n  const className = cx(classBase, classNameProp);\n  const style =\n    styleProp || containerStyle\n      ? {\n          ...styleProp,\n          ...containerStyle,\n        }\n      : undefined;\n\n  const tabs = useMemo(\n    () =>\n      asReactElements(children)\n        .map((child, index) => {\n          const {\n            id: tabId = `${id}-tab-${index}`,\n            className,\n            closeable = allowCloseTab,\n            editable = allowRenameTab,\n            location: tabLocation,\n            showMenuButton = showTabMenuButton,\n          } = child.props;\n          const selected = index === activeTabIndex;\n          return React.cloneElement(child, {\n            ...tabProps,\n            ...tabstripHook.navigationProps,\n            className: cx(className, tabClassName),\n            closeable,\n            \"data-overflow-priority\": selected ? \"1\" : undefined,\n            dragging: draggedItemIndex === index,\n            editable,\n            editing: interactedTabState?.index === index,\n            focusVisible: focusVisible === index,\n            id: tabId,\n            index,\n            key: index,\n            location: cx(location, tabLocation),\n            selected,\n            showMenuButton,\n            tabIndex: selected ? 0 : -1,\n          } as Partial<TabProps>);\n        })\n        .concat(\n          allowAddTab ? (\n            <IconButton\n              {...tabstripHook.navigationProps}\n              aria-label=\"Create Tab\"\n              className={`${classBase}-addTabButton`}\n              data-embedded\n              icon=\"add\"\n              data-overflow-priority=\"1\"\n              key=\"addButton\"\n              onClick={onClickAddTab}\n              variant=\"secondary\"\n              tabIndex={-1}\n            />\n          ) : (\n            []\n          )\n        ),\n    [\n      children,\n      allowAddTab,\n      tabstripHook.navigationProps,\n      onClickAddTab,\n      id,\n      allowCloseTab,\n      allowRenameTab,\n      showTabMenuButton,\n      activeTabIndex,\n      tabProps,\n      tabClassName,\n      draggedItemIndex,\n      interactedTabState,\n      focusVisible,\n      location,\n    ]\n  );\n\n  return (\n    <>\n      <OverflowContainer\n        {...htmlAttributes}\n        {...tabstripHook.containerProps}\n        className={cx(className, `${classBase}-${variant}`)}\n        id={id}\n        orientation={orientation}\n        overflowIcon=\"more-horiz\"\n        ref={rootRef}\n        style={style}\n        role=\"tablist\"\n      >\n        {tabs}\n      </OverflowContainer>\n      {tabstripHook.draggable}\n    </>\n  );\n};\n"],"names":["className"],"mappings":"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"}

package/esm/tabstrip/useTabstrip.js

@@ -1,7 +1,7 @@
-import { dispatchMouseEvent } from '@vuu-ui/vuu-utils';
-import { useRef, useCallback } from 'react';
+import { useRef, useState, useCallback } from 'react';
 import '../drag-drop/DragDropProvider.js';
 import { useDragDrop } from '../drag-drop/useDragDrop.js';
+import '@vuu-ui/vuu-utils';
 import { isTabMenuOptions } from './TabMenuOptions.js';
 import { getIndexOfSelectedTab } from './tabstrip-dom-utils.js';
 import { useAnimatedSelectionThumb } from './useAnimatedSelectionThumb.js';
@@ -10,13 +10,6 @@ import { useSelection } from './useSelection.js';
 
 const editKeys = /* @__PURE__ */ new Set(["Enter", " "]);
 const isEditKey = (key) => editKeys.has(key);
-const getElementWithIndex = (container, index) => {
-  if (container) {
-    return container.querySelector(`[data-index="${index}"]`);
-  } else {
-    return null;
-  }
-};
 const useTabstrip = ({
   activeTabIndex: activeTabIndexProp,
   allowDragDrop,
@@ -31,6 +24,7 @@ const useTabstrip = ({
   keyBoardActivation
 }) => {
   const lastSelection = useRef(activeTabIndexProp);
+  const [interactedTabState, setInteractedTabState] = useState();
   const {
     focusTab: keyboardHookFocusTab,
     highlightedIdx,
@@ -104,9 +98,7 @@ const useTabstrip = ({
   });
   const handleExitEditMode = useCallback(
     (originalValue, editedValue, allowDeactivation, tabIndex) => {
-      console.log(
-        `handleExitEditMode ${originalValue} ${editedValue} ${allowDeactivation} ${tabIndex}`
-      );
+      setInteractedTabState(void 0);
       onExitEditMode?.(originalValue, editedValue, allowDeactivation, tabIndex);
       if (!allowDeactivation) {
         keyboardHookFocusTab(tabIndex, false, true);
@@ -122,33 +114,12 @@ const useTabstrip = ({
     // [dragDropHook.isDragging, keyboardHook, selectionHook]
     [keyboardHookHandleClick, selectionHookHandleClick]
   );
-  const getEditableLabel = useCallback(
-    (tabIndex = highlightedIdx) => {
-      const targetEl = getElementWithIndex(containerRef.current, tabIndex);
-      if (targetEl) {
-        return targetEl.querySelector(".vuuEditableLabel");
-      }
-    },
-    [containerRef, highlightedIdx]
-  );
-  const tabInEditMode = useCallback(
-    (tabIndex = highlightedIdx) => {
-      const editableLabel = getEditableLabel(tabIndex);
-      if (editableLabel) {
-        return editableLabel.classList.contains("vuuEditableLabel-editing");
-      }
-      return false;
-    },
-    [getEditableLabel, highlightedIdx]
-  );
   const editTab = useCallback(
     (tabIndex = highlightedIdx) => {
-      const editableLabelEl = getEditableLabel(tabIndex);
-      if (editableLabelEl) {
-        dispatchMouseEvent(editableLabelEl, "dblclick");
-      }
+      console.log(`set interacted tab state ${tabIndex}`);
+      setInteractedTabState({ index: tabIndex, state: "rename" });
     },
-    [getEditableLabel, highlightedIdx]
+    [highlightedIdx]
   );
   const handleKeyDown = useCallback(
     (evt) => {
@@ -199,16 +170,16 @@ const useTabstrip = ({
     [handleCloseTabFromMenu, handleRenameTabFromMenu]
   );
   const handleTabMenuClose = useCallback(() => {
-    if (!tabInEditMode()) {
-      keyboardHookFocusTab(highlightedIdx);
-    } else {
+    if (interactedTabState?.index === highlightedIdx) {
       keyboardHookSetHighlightedIndex(highlightedIdx);
+    } else {
+      keyboardHookFocusTab(highlightedIdx);
     }
   }, [
     highlightedIdx,
+    interactedTabState?.index,
     keyboardHookFocusTab,
-    keyboardHookSetHighlightedIndex,
-    tabInEditMode
+    keyboardHookSetHighlightedIndex
   ]);
   const onSwitchWrappedItemIntoView = useCallback(
     (item) => {
@@ -242,12 +213,13 @@ const useTabstrip = ({
   };
   return {
     activeTabIndex: selectionHookSelected,
-    containerStyle,
-    focusVisible: keyboardHook.focusVisible,
     containerProps: {
       ...keyboardHook.containerProps,
       onSwitchWrappedItemIntoView
     },
+    containerStyle,
+    focusVisible: keyboardHook.focusVisible,
+    interactedTabState,
     navigationProps,
     onClickAddTab: handleAddTabClick,
     tabProps,

package/esm/tabstrip/useTabstrip.js.map

@@ -1 +1 @@
-{"version":3,"file":"useTabstrip.js","sources":["../../src/tabstrip/useTabstrip.ts"],"sourcesContent":["import type { MenuActionHandler } from \"@vuu-ui/vuu-data-types\";\nimport type { OverflowItem } from \"@vuu-ui/vuu-ui-controls\";\nimport { dispatchMouseEvent, orientationType } from \"@vuu-ui/vuu-utils\";\nimport {\n  KeyboardEvent,\n  MouseEvent as ReactMouseEvent,\n  RefObject,\n  useCallback,\n  useRef,\n} from \"react\";\nimport { DropOptions, useDragDrop as useDragDrop } from \"../drag-drop\";\nimport { isTabMenuOptions } from \"./TabMenuOptions\";\nimport { getIndexOfSelectedTab } from \"./tabstrip-dom-utils\";\nimport { useAnimatedSelectionThumb } from \"./useAnimatedSelectionThumb\";\nimport { useKeyboardNavigation } from \"./useKeyboardNavigation\";\nimport { useSelection } from \"./useSelection\";\n\nexport type ExitEditModeHandler = (\n  originalValue: string,\n  editedValue: string,\n  allowDeactivation: boolean,\n  tabIndex: number\n) => void;\n\nexport interface TabstripHookProps {\n  activeTabIndex: number;\n  allowDragDrop: boolean;\n  animateSelectionThumb: boolean;\n  containerRef: RefObject<HTMLElement>;\n  onActiveChange?: (tabIndex: number) => void;\n  onAddTab?: () => void;\n  onCloseTab?: (tabIndex: number, newActiveTabIndex: number) => void;\n  onExitEditMode?: ExitEditModeHandler;\n  onMoveTab?: (fromIndex: number, toIndex: number) => void;\n  orientation: orientationType;\n  keyBoardActivation?: \"manual\" | \"automatic\";\n}\n\nconst editKeys = new Set([\"Enter\", \" \"]);\nconst isEditKey = (key: string) => editKeys.has(key);\n\nconst getElementWithIndex = (container: HTMLElement | null, index: number) => {\n  if (container) {\n    return container.querySelector(`[data-index=\"${index}\"]`) as HTMLElement;\n  } else {\n    return null;\n  }\n};\n\nexport const useTabstrip = ({\n  activeTabIndex: activeTabIndexProp,\n  allowDragDrop,\n  animateSelectionThumb,\n  containerRef,\n  onActiveChange,\n  onAddTab,\n  onCloseTab,\n  onExitEditMode,\n  onMoveTab,\n  orientation,\n  keyBoardActivation,\n}: TabstripHookProps) => {\n  const lastSelection = useRef(activeTabIndexProp);\n\n  const {\n    focusTab: keyboardHookFocusTab,\n    highlightedIdx,\n    onClick: keyboardHookHandleClick,\n    onKeyDown: keyboardHookHandleKeyDown,\n    setHighlightedIdx: keyboardHookSetHighlightedIndex,\n    ...keyboardHook\n  } = useKeyboardNavigation({\n    containerRef,\n    keyBoardActivation,\n    orientation,\n    selectedIndex: lastSelection.current,\n  });\n\n  const {\n    activateTab: selectionHookActivateTab,\n    onClick: selectionHookHandleClick,\n    onKeyDown: selectionHookHandleKeyDown,\n    selected: selectionHookSelected,\n  } = useSelection({\n    highlightedIdx,\n    onSelectionChange: onActiveChange,\n    selected: activeTabIndexProp,\n  });\n  // We need this on reEntry for navigation hook to handle focus and for dragDropHook\n  // to re-apply selection after drag drop. For some reason the value is stale if we\n  // directly use selectionHookSelected within the drag, even though all dependencies\n  //appear to be correctly declared.\n  lastSelection.current = selectionHookSelected;\n\n  const { containerStyle, resumeAnimation, suspendAnimation } =\n    useAnimatedSelectionThumb(\n      containerRef,\n      animateSelectionThumb ? selectionHookSelected : -1,\n      orientation\n    );\n\n  const handleDrop = useCallback(\n    ({ fromIndex, toIndex }: DropOptions) => {\n      const { current: selected } = lastSelection;\n      console.log(\n        `useTabstrip handleDrop ${fromIndex} - ${toIndex}  ${selected}`\n      );\n      onMoveTab?.(fromIndex, toIndex);\n      let nextSelectedTab = -1;\n      if (toIndex !== -1) {\n        if (selected === fromIndex) {\n          nextSelectedTab = toIndex;\n        } else if (fromIndex > selected && toIndex <= selected) {\n          nextSelectedTab = selected + 1;\n        } else if (fromIndex < selected && toIndex >= selected) {\n          nextSelectedTab = selected - 1;\n        }\n        if (nextSelectedTab !== -1) {\n          suspendAnimation();\n          selectionHookActivateTab(nextSelectedTab);\n          requestAnimationFrame(resumeAnimation);\n        }\n        keyboardHookFocusTab(toIndex, false, false, 350);\n      }\n    },\n    [\n      keyboardHookFocusTab,\n      onMoveTab,\n      resumeAnimation,\n      selectionHookActivateTab,\n      suspendAnimation,\n    ]\n  );\n\n  const { onMouseDown: dragDropHookHandleMouseDown, ...dragDropHook } =\n    useDragDrop({\n      allowDragDrop,\n      containerRef,\n      // this is for useDragDropNext\n      draggableClassName: `tabstrip-${orientation}`,\n      // extendedDropZone: overflowedItems.length > 0,\n      onDrop: handleDrop,\n      orientation: \"horizontal\",\n      itemQuery: \".vuuOverflowContainer-item\",\n    });\n\n  const handleExitEditMode = useCallback<ExitEditModeHandler>(\n    (originalValue, editedValue, allowDeactivation, tabIndex) => {\n      console.log(\n        `handleExitEditMode ${originalValue} ${editedValue} ${allowDeactivation} ${tabIndex}`\n      );\n      onExitEditMode?.(originalValue, editedValue, allowDeactivation, tabIndex);\n      if (!allowDeactivation) {\n        // this indicates that Enter or Esc key has been pressed, hence we\n        // want to make sure keyboardHook treats this as a keyboard event\n        // (and applies focusVisible). The last parameter here does that.\n        keyboardHookFocusTab(tabIndex, false, true);\n      }\n    },\n    [keyboardHookFocusTab, onExitEditMode]\n  );\n\n  const handleClick = useCallback(\n    (evt: ReactMouseEvent<HTMLElement>, tabIndex: number) => {\n      // releasing the mouse at end of drag will trigger a click, ignore those\n      // if (!dragDropHook.isDragging) {\n      keyboardHookHandleClick(evt, tabIndex);\n      selectionHookHandleClick(evt, tabIndex);\n      // }\n    },\n    // [dragDropHook.isDragging, keyboardHook, selectionHook]\n    [keyboardHookHandleClick, selectionHookHandleClick]\n  );\n\n  const getEditableLabel = useCallback(\n    (tabIndex = highlightedIdx) => {\n      const targetEl = getElementWithIndex(containerRef.current, tabIndex);\n      if (targetEl) {\n        return targetEl.querySelector(\".vuuEditableLabel\") as HTMLElement;\n      }\n    },\n    [containerRef, highlightedIdx]\n  );\n\n  const tabInEditMode = useCallback(\n    (tabIndex = highlightedIdx) => {\n      const editableLabel = getEditableLabel(tabIndex);\n      if (editableLabel) {\n        return editableLabel.classList.contains(\"vuuEditableLabel-editing\");\n      }\n      return false;\n    },\n    [getEditableLabel, highlightedIdx]\n  );\n\n  const editTab = useCallback(\n    (tabIndex = highlightedIdx) => {\n      const editableLabelEl = getEditableLabel(tabIndex);\n      if (editableLabelEl) {\n        dispatchMouseEvent(editableLabelEl, \"dblclick\");\n      }\n    },\n    [getEditableLabel, highlightedIdx]\n  );\n\n  const handleKeyDown = useCallback(\n    (evt: KeyboardEvent) => {\n      keyboardHookHandleKeyDown(evt);\n      if (!evt.defaultPrevented) {\n        selectionHookHandleKeyDown(evt);\n      }\n      if (!evt.defaultPrevented && isEditKey(evt.key)) {\n        editTab();\n      }\n    },\n    [editTab, keyboardHookHandleKeyDown, selectionHookHandleKeyDown]\n  );\n\n  const handleCloseTabFromMenu = useCallback(\n    (tabIndex: number) => {\n      const selectedTabIndex = getIndexOfSelectedTab(containerRef.current);\n      const newActiveTabIndex =\n        selectedTabIndex > tabIndex\n          ? selectedTabIndex - 1\n          : selectedTabIndex === tabIndex\n          ? 0\n          : selectedTabIndex;\n      suspendAnimation();\n      // containerRef.current?.classList.add(\"vuuTabThumb-noTransition\");\n      onCloseTab?.(tabIndex, newActiveTabIndex);\n      setTimeout(() => {\n        resumeAnimation();\n        // containerRef.current?.classList.remove(\"vuuTabThumb-noTransition\");\n      }, 200);\n      return true;\n    },\n    [containerRef, onCloseTab, resumeAnimation, suspendAnimation]\n  );\n\n  const handleRenameTabFromMenu = useCallback(\n    (tabIndex: number) => {\n      editTab(tabIndex);\n      return true;\n    },\n    [editTab]\n  );\n\n  const handleTabMenuAction = useCallback<MenuActionHandler>(\n    (action) => {\n      if (isTabMenuOptions(action.options)) {\n        switch (action.menuId) {\n          case \"close-tab\":\n            return handleCloseTabFromMenu(action.options.tabIndex);\n          case \"rename-tab\":\n            return handleRenameTabFromMenu(action.options.tabIndex);\n          default:\n            console.log(`tab menu action ${action.menuId}`);\n        }\n      }\n      return false;\n    },\n    [handleCloseTabFromMenu, handleRenameTabFromMenu]\n  );\n\n  //TODO( why do we sometimes see this fired twice  eg following rename)\n  const handleTabMenuClose = useCallback(() => {\n    if (!tabInEditMode()) {\n      keyboardHookFocusTab(highlightedIdx);\n    } else {\n      keyboardHookSetHighlightedIndex(highlightedIdx);\n    }\n  }, [\n    highlightedIdx,\n    keyboardHookFocusTab,\n    keyboardHookSetHighlightedIndex,\n    tabInEditMode,\n  ]);\n\n  const onSwitchWrappedItemIntoView = useCallback(\n    (item: OverflowItem) => {\n      const index = parseInt(item.index);\n      if (!isNaN(index)) {\n        selectionHookActivateTab(index);\n      }\n    },\n    [selectionHookActivateTab]\n  );\n\n  const navigationProps = {\n    onFocus: keyboardHook.onFocus,\n    onKeyDown: handleKeyDown,\n  };\n\n  const handleAddTabClick = useCallback(() => {\n    onAddTab?.();\n    requestAnimationFrame(() => {\n      const selectedTabIndex = getIndexOfSelectedTab(containerRef.current);\n      if (selectedTabIndex !== -1) {\n        keyboardHookFocusTab(selectedTabIndex);\n      }\n    });\n  }, [containerRef, keyboardHookFocusTab, onAddTab]);\n\n  const tabProps = {\n    onClick: handleClick,\n    onKeyDown: handleKeyDown,\n    onExitEditMode: handleExitEditMode,\n    onMenuAction: handleTabMenuAction,\n    onMenuClose: handleTabMenuClose,\n    onMouseDown: dragDropHookHandleMouseDown,\n  };\n\n  return {\n    activeTabIndex: selectionHookSelected,\n    containerStyle,\n    focusVisible: keyboardHook.focusVisible,\n    containerProps: {\n      ...keyboardHook.containerProps,\n      onSwitchWrappedItemIntoView,\n    },\n    navigationProps,\n    onClickAddTab: handleAddTabClick,\n    tabProps,\n    ...dragDropHook,\n  };\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"useTabstrip.js","sources":["../../src/tabstrip/useTabstrip.ts"],"sourcesContent":["import type { MenuActionHandler } from \"@vuu-ui/vuu-data-types\";\nimport type { OverflowItem } from \"@vuu-ui/vuu-ui-controls\";\nimport { orientationType } from \"@vuu-ui/vuu-utils\";\nimport {\n  KeyboardEvent,\n  MouseEvent as ReactMouseEvent,\n  RefObject,\n  useCallback,\n  useRef,\n  useState,\n} from \"react\";\nimport { DropOptions, useDragDrop as useDragDrop } from \"../drag-drop\";\nimport { isTabMenuOptions } from \"./TabMenuOptions\";\nimport { getIndexOfSelectedTab } from \"./tabstrip-dom-utils\";\nimport { useAnimatedSelectionThumb } from \"./useAnimatedSelectionThumb\";\nimport { useKeyboardNavigation } from \"./useKeyboardNavigation\";\nimport { useSelection } from \"./useSelection\";\n\nexport type ExitEditModeHandler = (\n  originalValue: string,\n  editedValue: string,\n  allowDeactivation: boolean,\n  tabIndex: number\n) => void;\n\nexport interface TabstripHookProps {\n  activeTabIndex: number;\n  allowDragDrop: boolean;\n  animateSelectionThumb: boolean;\n  containerRef: RefObject<HTMLElement>;\n  onActiveChange?: (tabIndex: number) => void;\n  onAddTab?: () => void;\n  onCloseTab?: (tabIndex: number, newActiveTabIndex: number) => void;\n  onExitEditMode?: ExitEditModeHandler;\n  onMoveTab?: (fromIndex: number, toIndex: number) => void;\n  orientation: orientationType;\n  keyBoardActivation?: \"manual\" | \"automatic\";\n}\n\nconst editKeys = new Set([\"Enter\", \" \"]);\nconst isEditKey = (key: string) => editKeys.has(key);\n\ntype InteractedTabState = {\n  index: number;\n  state: \"rename\";\n};\n\nexport const useTabstrip = ({\n  activeTabIndex: activeTabIndexProp,\n  allowDragDrop,\n  animateSelectionThumb,\n  containerRef,\n  onActiveChange,\n  onAddTab,\n  onCloseTab,\n  onExitEditMode,\n  onMoveTab,\n  orientation,\n  keyBoardActivation,\n}: TabstripHookProps) => {\n  const lastSelection = useRef(activeTabIndexProp);\n  const [interactedTabState, setInteractedTabState] = useState<\n    InteractedTabState | undefined\n  >();\n\n  const {\n    focusTab: keyboardHookFocusTab,\n    highlightedIdx,\n    onClick: keyboardHookHandleClick,\n    onKeyDown: keyboardHookHandleKeyDown,\n    setHighlightedIdx: keyboardHookSetHighlightedIndex,\n    ...keyboardHook\n  } = useKeyboardNavigation({\n    containerRef,\n    keyBoardActivation,\n    orientation,\n    selectedIndex: lastSelection.current,\n  });\n\n  const {\n    activateTab: selectionHookActivateTab,\n    onClick: selectionHookHandleClick,\n    onKeyDown: selectionHookHandleKeyDown,\n    selected: selectionHookSelected,\n  } = useSelection({\n    highlightedIdx,\n    onSelectionChange: onActiveChange,\n    selected: activeTabIndexProp,\n  });\n  // We need this on reEntry for navigation hook to handle focus and for dragDropHook\n  // to re-apply selection after drag drop. For some reason the value is stale if we\n  // directly use selectionHookSelected within the drag, even though all dependencies\n  //appear to be correctly declared.\n  lastSelection.current = selectionHookSelected;\n\n  const { containerStyle, resumeAnimation, suspendAnimation } =\n    useAnimatedSelectionThumb(\n      containerRef,\n      animateSelectionThumb ? selectionHookSelected : -1,\n      orientation\n    );\n\n  const handleDrop = useCallback(\n    ({ fromIndex, toIndex }: DropOptions) => {\n      const { current: selected } = lastSelection;\n      console.log(\n        `useTabstrip handleDrop ${fromIndex} - ${toIndex}  ${selected}`\n      );\n      onMoveTab?.(fromIndex, toIndex);\n      let nextSelectedTab = -1;\n      if (toIndex !== -1) {\n        if (selected === fromIndex) {\n          nextSelectedTab = toIndex;\n        } else if (fromIndex > selected && toIndex <= selected) {\n          nextSelectedTab = selected + 1;\n        } else if (fromIndex < selected && toIndex >= selected) {\n          nextSelectedTab = selected - 1;\n        }\n        if (nextSelectedTab !== -1) {\n          suspendAnimation();\n          selectionHookActivateTab(nextSelectedTab);\n          requestAnimationFrame(resumeAnimation);\n        }\n        keyboardHookFocusTab(toIndex, false, false, 350);\n      }\n    },\n    [\n      keyboardHookFocusTab,\n      onMoveTab,\n      resumeAnimation,\n      selectionHookActivateTab,\n      suspendAnimation,\n    ]\n  );\n\n  const { onMouseDown: dragDropHookHandleMouseDown, ...dragDropHook } =\n    useDragDrop({\n      allowDragDrop,\n      containerRef,\n      // this is for useDragDropNext\n      draggableClassName: `tabstrip-${orientation}`,\n      // extendedDropZone: overflowedItems.length > 0,\n      onDrop: handleDrop,\n      orientation: \"horizontal\",\n      itemQuery: \".vuuOverflowContainer-item\",\n    });\n\n  const handleExitEditMode = useCallback<ExitEditModeHandler>(\n    (originalValue, editedValue, allowDeactivation, tabIndex) => {\n      setInteractedTabState(undefined);\n      onExitEditMode?.(originalValue, editedValue, allowDeactivation, tabIndex);\n      if (!allowDeactivation) {\n        // this indicates that Enter or Esc key has been pressed, hence we\n        // want to make sure keyboardHook treats this as a keyboard event\n        // (and applies focusVisible). The last parameter here does that.\n        keyboardHookFocusTab(tabIndex, false, true);\n      }\n    },\n    [keyboardHookFocusTab, onExitEditMode]\n  );\n\n  const handleClick = useCallback(\n    (evt: ReactMouseEvent<HTMLElement>, tabIndex: number) => {\n      // releasing the mouse at end of drag will trigger a click, ignore those\n      // if (!dragDropHook.isDragging) {\n      keyboardHookHandleClick(evt, tabIndex);\n      selectionHookHandleClick(evt, tabIndex);\n      // }\n    },\n    // [dragDropHook.isDragging, keyboardHook, selectionHook]\n    [keyboardHookHandleClick, selectionHookHandleClick]\n  );\n\n  const editTab = useCallback(\n    (tabIndex = highlightedIdx) => {\n      console.log(`set interacted tab state ${tabIndex}`);\n      setInteractedTabState({ index: tabIndex, state: \"rename\" });\n    },\n    [highlightedIdx]\n  );\n\n  const handleKeyDown = useCallback(\n    (evt: KeyboardEvent) => {\n      keyboardHookHandleKeyDown(evt);\n      if (!evt.defaultPrevented) {\n        selectionHookHandleKeyDown(evt);\n      }\n      if (!evt.defaultPrevented && isEditKey(evt.key)) {\n        editTab();\n      }\n    },\n    [editTab, keyboardHookHandleKeyDown, selectionHookHandleKeyDown]\n  );\n\n  const handleCloseTabFromMenu = useCallback(\n    (tabIndex: number) => {\n      const selectedTabIndex = getIndexOfSelectedTab(containerRef.current);\n      const newActiveTabIndex =\n        selectedTabIndex > tabIndex\n          ? selectedTabIndex - 1\n          : selectedTabIndex === tabIndex\n          ? 0\n          : selectedTabIndex;\n      suspendAnimation();\n      // containerRef.current?.classList.add(\"vuuTabThumb-noTransition\");\n      onCloseTab?.(tabIndex, newActiveTabIndex);\n      setTimeout(() => {\n        resumeAnimation();\n        // containerRef.current?.classList.remove(\"vuuTabThumb-noTransition\");\n      }, 200);\n      return true;\n    },\n    [containerRef, onCloseTab, resumeAnimation, suspendAnimation]\n  );\n\n  const handleRenameTabFromMenu = useCallback(\n    (tabIndex: number) => {\n      editTab(tabIndex);\n      return true;\n    },\n    [editTab]\n  );\n\n  const handleTabMenuAction = useCallback<MenuActionHandler>(\n    (action) => {\n      if (isTabMenuOptions(action.options)) {\n        switch (action.menuId) {\n          case \"close-tab\":\n            return handleCloseTabFromMenu(action.options.tabIndex);\n          case \"rename-tab\":\n            return handleRenameTabFromMenu(action.options.tabIndex);\n          default:\n            console.log(`tab menu action ${action.menuId}`);\n        }\n      }\n      return false;\n    },\n    [handleCloseTabFromMenu, handleRenameTabFromMenu]\n  );\n\n  //TODO( why do we sometimes see this fired twice  eg following rename)\n  const handleTabMenuClose = useCallback(() => {\n    if (interactedTabState?.index === highlightedIdx) {\n      keyboardHookSetHighlightedIndex(highlightedIdx);\n    } else {\n      keyboardHookFocusTab(highlightedIdx);\n    }\n  }, [\n    highlightedIdx,\n    interactedTabState?.index,\n    keyboardHookFocusTab,\n    keyboardHookSetHighlightedIndex,\n  ]);\n\n  const onSwitchWrappedItemIntoView = useCallback(\n    (item: OverflowItem) => {\n      const index = parseInt(item.index);\n      if (!isNaN(index)) {\n        selectionHookActivateTab(index);\n      }\n    },\n    [selectionHookActivateTab]\n  );\n\n  const navigationProps = {\n    onFocus: keyboardHook.onFocus,\n    onKeyDown: handleKeyDown,\n  };\n\n  const handleAddTabClick = useCallback(() => {\n    onAddTab?.();\n    requestAnimationFrame(() => {\n      const selectedTabIndex = getIndexOfSelectedTab(containerRef.current);\n      if (selectedTabIndex !== -1) {\n        keyboardHookFocusTab(selectedTabIndex);\n      }\n    });\n  }, [containerRef, keyboardHookFocusTab, onAddTab]);\n\n  const tabProps = {\n    onClick: handleClick,\n    onKeyDown: handleKeyDown,\n    onExitEditMode: handleExitEditMode,\n    onMenuAction: handleTabMenuAction,\n    onMenuClose: handleTabMenuClose,\n    onMouseDown: dragDropHookHandleMouseDown,\n  };\n\n  return {\n    activeTabIndex: selectionHookSelected,\n    containerProps: {\n      ...keyboardHook.containerProps,\n      onSwitchWrappedItemIntoView,\n    },\n    containerStyle,\n    focusVisible: keyboardHook.focusVisible,\n    interactedTabState,\n    navigationProps,\n    onClickAddTab: handleAddTabClick,\n    tabProps,\n    ...dragDropHook,\n  };\n};\n"],"names":[],"mappings":"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"}

package/package.json

@@ -1,17 +1,17 @@
 {
-  "version": "0.8.63",
+  "version": "0.8.64",
   "description": "VUU UI Controls",
   "author": "heswell",
   "license": "Apache-2.0",
   "devDependencies": {
-    "@vuu-ui/vuu-data-types": "0.8.63",
-    "@vuu-ui/vuu-table-types": "0.8.63"
+    "@vuu-ui/vuu-data-types": "0.8.64",
+    "@vuu-ui/vuu-table-types": "0.8.64"
   },
   "dependencies": {
-    "@vuu-ui/vuu-layout": "0.8.63",
-    "@vuu-ui/vuu-popups": "0.8.63",
-    "@vuu-ui/vuu-table": "0.8.63",
-    "@vuu-ui/vuu-utils": "0.8.63",
+    "@vuu-ui/vuu-layout": "0.8.64",
+    "@vuu-ui/vuu-popups": "0.8.64",
+    "@vuu-ui/vuu-table": "0.8.64",
+    "@vuu-ui/vuu-utils": "0.8.64",
     "@floating-ui/react": "0.26.5",
     "@salt-ds/core": "1.27.1",
     "@salt-ds/icons": "1.9.1",

package/types/tabstrip/useTabstrip.d.ts

@@ -16,6 +16,10 @@ export interface TabstripHookProps {
     orientation: orientationType;
     keyBoardActivation?: "manual" | "automatic";
 }
+type InteractedTabState = {
+    index: number;
+    state: "rename";
+};
 export declare const useTabstrip: ({ activeTabIndex: activeTabIndexProp, allowDragDrop, animateSelectionThumb, containerRef, onActiveChange, onAddTab, onCloseTab, onExitEditMode, onMoveTab, orientation, keyBoardActivation, }: TabstripHookProps) => {
     draggable?: JSX.Element | undefined;
     dropIndicator?: JSX.Element | undefined;
@@ -24,8 +28,6 @@ export declare const useTabstrip: ({ activeTabIndex: activeTabIndexProp, allowDr
     isScrolling: RefObject<boolean>;
     revealOverflowedItems?: boolean | undefined;
     activeTabIndex: number;
-    containerStyle: import("react").CSSProperties;
-    focusVisible: number;
     containerProps: {
         onSwitchWrappedItemIntoView: (item: OverflowItem) => void;
         onBlur: import("react").FocusEventHandler;
@@ -33,6 +35,9 @@ export declare const useTabstrip: ({ activeTabIndex: activeTabIndexProp, allowDr
         onMouseDownCapture: import("react").MouseEventHandler;
         onMouseLeave: import("react").MouseEventHandler;
     };
+    containerStyle: import("react").CSSProperties;
+    focusVisible: number;
+    interactedTabState: InteractedTabState | undefined;
     navigationProps: {
         onFocus: (evt: import("react").FocusEvent<HTMLElement, Element>) => void;
         onKeyDown: (evt: KeyboardEvent) => void;
@@ -47,3 +52,4 @@ export declare const useTabstrip: ({ activeTabIndex: activeTabIndexProp, allowDr
         onMouseDown: import("react").MouseEventHandler | undefined;
     };
 };
+export {};