@vuu-ui/vuu-ui-controls 0.11.2 → 0.12.0

package/cjs/cycle-state-button/CycleStateButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"CycleStateButton.js","sources":["../../src/cycle-state-button/CycleStateButton.tsx"],"sourcesContent":["import { Button, ButtonProps } from \"@salt-ds/core\";\nimport cx from \"clsx\";\nimport type {\n  VuuColumnDataType,\n  VuuRowDataItemType,\n} from \"@vuu-ui/vuu-protocol-types\";\nimport { ForwardedRef, forwardRef, SyntheticEvent, useCallback } from \"react\";\nimport { CommitHandler } from \"@vuu-ui/vuu-utils\";\n\nconst classBase = \"vuuCycleStateButton\";\n\nexport type CycleStateButtonChangeHandler = (value: VuuRowDataItemType) => void;\n\nexport interface CycleStateButtonProps extends Omit<ButtonProps, \"onChange\"> {\n  onChange?: CycleStateButtonChangeHandler;\n  onCommit?: CommitHandler<HTMLButtonElement>;\n  values: string[];\n  value: string;\n}\n\nconst getNextValue = (value: string, valueList: string[]) => {\n  const index = valueList\n    .map((v) => v.toUpperCase())\n    .indexOf(value.toUpperCase());\n  if (index === valueList.length - 1) {\n    return valueList[0];\n  } else {\n    return valueList[index + 1];\n  }\n};\n\nexport const CycleStateButton = forwardRef(function CycleStateButton(\n  {\n    className,\n    onChange,\n    onCommit,\n    value = \"\",\n    values,\n    ...buttonProps\n  }: CycleStateButtonProps,\n  forwardedRef: ForwardedRef<HTMLButtonElement>,\n) {\n  const handleClick = useCallback(\n    async (evt: SyntheticEvent<HTMLButtonElement>) => {\n      const nextValue = getNextValue(value, values);\n      onChange?.(nextValue);\n      onCommit?.(evt, nextValue as VuuColumnDataType);\n    },\n    [onChange, onCommit, value, values],\n  );\n\n  return (\n    <Button\n      {...buttonProps}\n      className={cx(\n        classBase,\n        className,\n        `${classBase}-${value.toLowerCase()}`,\n      )}\n      onClick={handleClick}\n      ref={forwardedRef}\n    >\n      {value}\n    </Button>\n  );\n});\n"],"names":["forwardRef","CycleStateButton","useCallback","jsx","Button"],"mappings":";;;;;;;AASA,MAAM,SAAY,GAAA,qBAAA;AAWlB,MAAM,YAAA,GAAe,CAAC,KAAA,EAAe,SAAwB,KAAA;AAC3D,EAAA,MAAM,KAAQ,GAAA,SAAA,CACX,GAAI,CAAA,CAAC,CAAM,KAAA,CAAA,CAAE,WAAY,EAAC,CAC1B,CAAA,OAAA,CAAQ,KAAM,CAAA,WAAA,EAAa,CAAA;AAC9B,EAAI,IAAA,KAAA,KAAU,SAAU,CAAA,MAAA,GAAS,CAAG,EAAA;AAClC,IAAA,OAAO,UAAU,CAAC,CAAA;AAAA,GACb,MAAA;AACL,IAAO,OAAA,SAAA,CAAU,QAAQ,CAAC,CAAA;AAAA;AAE9B,CAAA;AAEa,MAAA,gBAAA,GAAmBA,gBAAW,CAAA,SAASC,iBAClD,CAAA;AAAA,EACE,SAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA;AAAA,EACA,KAAQ,GAAA,EAAA;AAAA,EACR,MAAA;AAAA,EACA,GAAG;AACL,CAAA,EACA,YACA,EAAA;AACA,EAAA,MAAM,WAAc,GAAAC,iBAAA;AAAA,IAClB,OAAO,GAA2C,KAAA;AAChD,MAAM,MAAA,SAAA,GAAY,YAAa,CAAA,KAAA,EAAO,MAAM,CAAA;AAC5C,MAAA,QAAA,GAAW,SAAS,CAAA;AACpB,MAAA,QAAA,GAAW,KAAK,SAA8B,CAAA;AAAA,KAChD;AAAA,IACA,CAAC,QAAA,EAAU,QAAU,EAAA,KAAA,EAAO,MAAM;AAAA,GACpC;AAEA,EACE,uBAAAC,cAAA;AAAA,IAACC,WAAA;AAAA,IAAA;AAAA,MACE,GAAG,WAAA;AAAA,MACJ,SAAW,EAAA,EAAA;AAAA,QACT,SAAA;AAAA,QACA,SAAA;AAAA,QACA,CAAG,EAAA,SAAS,CAAI,CAAA,EAAA,KAAA,CAAM,aAAa,CAAA;AAAA,OACrC;AAAA,MACA,OAAS,EAAA,WAAA;AAAA,MACT,GAAK,EAAA,YAAA;AAAA,MAEJ,QAAA,EAAA;AAAA;AAAA,GACH;AAEJ,CAAC;;;;"}
+{"version":3,"file":"CycleStateButton.js","sources":["../../src/cycle-state-button/CycleStateButton.tsx"],"sourcesContent":["import { Button, ButtonProps } from \"@salt-ds/core\";\nimport cx from \"clsx\";\nimport type {\n  VuuColumnDataType,\n  VuuRowDataItemType,\n} from \"@vuu-ui/vuu-protocol-types\";\nimport { ForwardedRef, forwardRef, SyntheticEvent, useCallback } from \"react\";\nimport type { CommitHandler } from \"@vuu-ui/vuu-utils\";\n\nconst classBase = \"vuuCycleStateButton\";\n\nexport type CycleStateButtonChangeHandler = (value: VuuRowDataItemType) => void;\n\nexport interface CycleStateButtonProps extends Omit<ButtonProps, \"onChange\"> {\n  onChange?: CycleStateButtonChangeHandler;\n  onCommit?: CommitHandler<HTMLButtonElement>;\n  values: string[];\n  value: string;\n}\n\nconst getNextValue = (value: string, valueList: string[]) => {\n  const index = valueList\n    .map((v) => v.toUpperCase())\n    .indexOf(value.toUpperCase());\n  if (index === valueList.length - 1) {\n    return valueList[0];\n  } else {\n    return valueList[index + 1];\n  }\n};\n\nexport const CycleStateButton = forwardRef(function CycleStateButton(\n  {\n    className,\n    onChange,\n    onCommit,\n    value = \"\",\n    values,\n    ...buttonProps\n  }: CycleStateButtonProps,\n  forwardedRef: ForwardedRef<HTMLButtonElement>,\n) {\n  const handleClick = useCallback(\n    async (evt: SyntheticEvent<HTMLButtonElement>) => {\n      const nextValue = getNextValue(value, values);\n      onChange?.(nextValue);\n      onCommit?.(evt, nextValue as VuuColumnDataType);\n    },\n    [onChange, onCommit, value, values],\n  );\n\n  return (\n    <Button\n      {...buttonProps}\n      className={cx(\n        classBase,\n        className,\n        `${classBase}-${value.toLowerCase()}`,\n      )}\n      onClick={handleClick}\n      ref={forwardedRef}\n    >\n      {value}\n    </Button>\n  );\n});\n"],"names":["forwardRef","CycleStateButton","useCallback","jsx","Button"],"mappings":";;;;;;;AASA,MAAM,SAAY,GAAA,qBAAA;AAWlB,MAAM,YAAA,GAAe,CAAC,KAAA,EAAe,SAAwB,KAAA;AAC3D,EAAA,MAAM,KAAQ,GAAA,SAAA,CACX,GAAI,CAAA,CAAC,CAAM,KAAA,CAAA,CAAE,WAAY,EAAC,CAC1B,CAAA,OAAA,CAAQ,KAAM,CAAA,WAAA,EAAa,CAAA;AAC9B,EAAI,IAAA,KAAA,KAAU,SAAU,CAAA,MAAA,GAAS,CAAG,EAAA;AAClC,IAAA,OAAO,UAAU,CAAC,CAAA;AAAA,GACb,MAAA;AACL,IAAO,OAAA,SAAA,CAAU,QAAQ,CAAC,CAAA;AAAA;AAE9B,CAAA;AAEa,MAAA,gBAAA,GAAmBA,gBAAW,CAAA,SAASC,iBAClD,CAAA;AAAA,EACE,SAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA;AAAA,EACA,KAAQ,GAAA,EAAA;AAAA,EACR,MAAA;AAAA,EACA,GAAG;AACL,CAAA,EACA,YACA,EAAA;AACA,EAAA,MAAM,WAAc,GAAAC,iBAAA;AAAA,IAClB,OAAO,GAA2C,KAAA;AAChD,MAAM,MAAA,SAAA,GAAY,YAAa,CAAA,KAAA,EAAO,MAAM,CAAA;AAC5C,MAAA,QAAA,GAAW,SAAS,CAAA;AACpB,MAAA,QAAA,GAAW,KAAK,SAA8B,CAAA;AAAA,KAChD;AAAA,IACA,CAAC,QAAA,EAAU,QAAU,EAAA,KAAA,EAAO,MAAM;AAAA,GACpC;AAEA,EACE,uBAAAC,cAAA;AAAA,IAACC,WAAA;AAAA,IAAA;AAAA,MACE,GAAG,WAAA;AAAA,MACJ,SAAW,EAAA,EAAA;AAAA,QACT,SAAA;AAAA,QACA,SAAA;AAAA,QACA,CAAG,EAAA,SAAS,CAAI,CAAA,EAAA,KAAA,CAAM,aAAa,CAAA;AAAA,OACrC;AAAA,MACA,OAAS,EAAA,WAAA;AAAA,MACT,GAAK,EAAA,YAAA;AAAA,MAEJ,QAAA,EAAA;AAAA;AAAA,GACH;AAEJ,CAAC;;;;"}

package/cjs/drag-drop/dragDropTypes.js.map

@@ -1 +1 @@
-{"version":3,"file":"dragDropTypes.js","sources":["../../src/drag-drop/dragDropTypes.ts"],"sourcesContent":["import { MouseEventHandler, RefObject } from \"react\";\nimport { orientationType } from \"@vuu-ui/vuu-utils\";\nimport { DragDropState } from \"./DragDropState\";\n\n//-----------------------------------\n// From useScrollPosition in List\nexport type ViewportRange = {\n  atEnd: boolean;\n  atStart: boolean;\n  from: number;\n  to: number;\n};\n\n// From overflow types - probably don't need\ntype dimension = \"width\" | \"height\" | \"scrollWidth\" | \"scrollHeight\";\n\ntype dimensions = {\n  size: dimension;\n  depth: dimension;\n  scrollDepth: dimension;\n};\n\nexport type dimensionsType = {\n  horizontal: dimensions;\n  vertical: dimensions;\n};\n\n//-----------------------------------\n\nexport type dragStrategy =\n  | \"drop-indicator\"\n  | \"natural-movement\"\n  | \"drag-copy\"\n  | \"drop-only\";\n\nexport type Direction = \"fwd\" | \"bwd\";\nexport const FWD: Direction = \"fwd\";\nexport const BWD: Direction = \"bwd\";\n\nexport interface MousePosition {\n  clientX: number;\n  clientY: number;\n}\n\nexport interface MouseOffset {\n  x: number;\n  y: number;\n}\n\nexport type Rect = {\n  height: number;\n  left: number;\n  top: number;\n  width: number;\n};\n\nexport interface DragHookResult {\n  draggable?: JSX.Element;\n  dropIndicator?: JSX.Element;\n  draggedItemIndex?: number;\n  isDragging: boolean;\n  isScrolling: RefObject<boolean>;\n  onMouseDown?: MouseEventHandler;\n  revealOverflowedItems?: boolean;\n}\n\nexport interface InternalDragHookResult\n  extends Omit<DragHookResult, \"isDragging\" | \"isScrolling\"> {\n  beginDrag: (dragElement: HTMLElement) => void;\n  drag: (dragPos: number, mouseMoveDirection: \"fwd\" | \"bwd\") => void;\n  drop: () => DropOptions;\n  handleScrollStart?: (scrollDirection: \"fwd\" | \"bwd\") => void;\n  handleScrollStop?: (\n    scrollDirection: \"fwd\" | \"bwd\",\n    _scrollPos: number,\n    atEnd: boolean,\n  ) => void;\n  /**\n   * Draggable item has been dragged out of container. Remove any local drop\n   * indicators. Dragged element itself should not yet be removed from DOM.\n   */\n  releaseDrag?: () => void;\n}\n\nexport interface DropOptions {\n  fromIndex: number;\n  toIndex: number;\n  isExternal?: boolean;\n  payload?: unknown;\n}\n\nexport type DragStartHandler = (dragDropState: DragDropState) => void;\n\nexport type DropHandler = (options: DropOptions) => void;\n\nexport interface DragDropProps {\n  allowDragDrop?: boolean | dragStrategy;\n  containerRef: RefObject<HTMLElement>;\n  /** this is the className that will be assigned during drag to the dragged element  */\n  draggableClassName: string;\n  extendedDropZone?: boolean;\n  getDragPayload?: (dragElement: HTMLElement) => unknown;\n  id?: string;\n  isDragSource?: boolean;\n  isDropTarget?: boolean;\n  itemQuery?: string;\n  onDragStart?: DragStartHandler;\n  onDrop: DropHandler;\n  onDropSettle?: (toIndex: number) => void;\n  orientation: orientationType;\n  /**\n   * The scrolling container does not necessarily have to be a\n   * descendant of the container, it may be an ancestor element;\n   */\n  scrollingContainerRef?: RefObject<HTMLElement>;\n  // selected?: CollectionItem<unknown> | CollectionItem<unknown>[] | null;\n  viewportRange?: ViewportRange;\n}\n\nexport type DragDropHook = (props: DragDropProps) => DragHookResult;\n\nexport interface InternalDragDropProps\n  extends Omit<DragDropProps, \"draggableClassName\" | \"id\" | \"onDrop\"> {\n  isDragSource?: boolean;\n  isDropTarget?: boolean;\n  selected?: unknown;\n}\n\nexport type DragDropContext = {\n  dragElement: HTMLElement;\n  dragPayload: unknown;\n  mouseOffset: MouseOffset;\n};\n"],"names":[],"mappings":";;AAoCO,MAAM,GAAiB,GAAA;AACvB,MAAM,GAAiB,GAAA;;;;;"}
+{"version":3,"file":"dragDropTypes.js","sources":["../../src/drag-drop/dragDropTypes.ts"],"sourcesContent":["import { MouseEventHandler, RefObject } from \"react\";\nimport type { orientationType } from \"@vuu-ui/vuu-utils\";\nimport { DragDropState } from \"./DragDropState\";\n\n//-----------------------------------\n// From useScrollPosition in List\nexport type ViewportRange = {\n  atEnd: boolean;\n  atStart: boolean;\n  from: number;\n  to: number;\n};\n\n// From overflow types - probably don't need\ntype dimension = \"width\" | \"height\" | \"scrollWidth\" | \"scrollHeight\";\n\ntype dimensions = {\n  size: dimension;\n  depth: dimension;\n  scrollDepth: dimension;\n};\n\nexport type dimensionsType = {\n  horizontal: dimensions;\n  vertical: dimensions;\n};\n\n//-----------------------------------\n\nexport type dragStrategy =\n  | \"drop-indicator\"\n  | \"natural-movement\"\n  | \"drag-copy\"\n  | \"drop-only\";\n\nexport type Direction = \"fwd\" | \"bwd\";\nexport const FWD: Direction = \"fwd\";\nexport const BWD: Direction = \"bwd\";\n\nexport interface MousePosition {\n  clientX: number;\n  clientY: number;\n}\n\nexport interface MouseOffset {\n  x: number;\n  y: number;\n}\n\nexport type Rect = {\n  height: number;\n  left: number;\n  top: number;\n  width: number;\n};\n\nexport interface DragHookResult {\n  draggable?: JSX.Element;\n  dropIndicator?: JSX.Element;\n  draggedItemIndex?: number;\n  isDragging: boolean;\n  isScrolling: RefObject<boolean>;\n  onMouseDown?: MouseEventHandler;\n  revealOverflowedItems?: boolean;\n}\n\nexport interface InternalDragHookResult\n  extends Omit<DragHookResult, \"isDragging\" | \"isScrolling\"> {\n  beginDrag: (dragElement: HTMLElement) => void;\n  drag: (dragPos: number, mouseMoveDirection: \"fwd\" | \"bwd\") => void;\n  drop: () => DropOptions;\n  handleScrollStart?: (scrollDirection: \"fwd\" | \"bwd\") => void;\n  handleScrollStop?: (\n    scrollDirection: \"fwd\" | \"bwd\",\n    _scrollPos: number,\n    atEnd: boolean,\n  ) => void;\n  /**\n   * Draggable item has been dragged out of container. Remove any local drop\n   * indicators. Dragged element itself should not yet be removed from DOM.\n   */\n  releaseDrag?: () => void;\n}\n\nexport interface DropOptions {\n  fromIndex: number;\n  toIndex: number;\n  isExternal?: boolean;\n  payload?: unknown;\n}\n\nexport type DragStartHandler = (dragDropState: DragDropState) => void;\n\nexport type DropHandler = (options: DropOptions) => void;\n\nexport interface DragDropProps {\n  allowDragDrop?: boolean | dragStrategy;\n  containerRef: RefObject<HTMLElement>;\n  /** this is the className that will be assigned during drag to the dragged element  */\n  draggableClassName: string;\n  extendedDropZone?: boolean;\n  getDragPayload?: (dragElement: HTMLElement) => unknown;\n  id?: string;\n  isDragSource?: boolean;\n  isDropTarget?: boolean;\n  itemQuery?: string;\n  onDragStart?: DragStartHandler;\n  onDrop: DropHandler;\n  onDropSettle?: (toIndex: number) => void;\n  orientation: orientationType;\n  /**\n   * The scrolling container does not necessarily have to be a\n   * descendant of the container, it may be an ancestor element;\n   */\n  scrollingContainerRef?: RefObject<HTMLElement>;\n  // selected?: CollectionItem<unknown> | CollectionItem<unknown>[] | null;\n  viewportRange?: ViewportRange;\n}\n\nexport type DragDropHook = (props: DragDropProps) => DragHookResult;\n\nexport interface InternalDragDropProps\n  extends Omit<DragDropProps, \"draggableClassName\" | \"id\" | \"onDrop\"> {\n  isDragSource?: boolean;\n  isDropTarget?: boolean;\n  selected?: unknown;\n}\n\nexport type DragDropContext = {\n  dragElement: HTMLElement;\n  dragPayload: unknown;\n  mouseOffset: MouseOffset;\n};\n"],"names":[],"mappings":";;AAoCO,MAAM,GAAiB,GAAA;AACvB,MAAM,GAAiB,GAAA;;;;;"}

package/cjs/editable/useEditableText.js.map

@@ -1 +1 @@
-{"version":3,"file":"useEditableText.js","sources":["../../src/editable/useEditableText.ts"],"sourcesContent":["import { DataValueValidationChecker } from \"@vuu-ui/vuu-data-types\";\nimport { VuuRowDataItemType } from \"@vuu-ui/vuu-protocol-types\";\nimport { DataItemEditHandler } from \"@vuu-ui/vuu-table-types\";\nimport { dispatchCustomEvent, getTypedValue } from \"@vuu-ui/vuu-utils\";\nimport {\n  FocusEventHandler,\n  FormEventHandler,\n  KeyboardEvent,\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\n\nexport interface EditableTextHookProps<\n  T extends VuuRowDataItemType = VuuRowDataItemType,\n> {\n  clientSideEditValidationCheck?: DataValueValidationChecker;\n  value?: T;\n  onEdit?: DataItemEditHandler;\n  type?: \"string\" | \"number\" | \"boolean\";\n}\n\ntype EditState = {\n  message?: string;\n  value: string;\n};\n\nconst stringValueOf = (value?: VuuRowDataItemType) => value?.toString() ?? \"\";\n\nexport const useEditableText = <T extends string | number | boolean = string>({\n  clientSideEditValidationCheck,\n  value,\n  onEdit,\n  type = \"string\",\n}: EditableTextHookProps<T>) => {\n  // console.log(\"initial value: \", initialValue);\n  const [editState, setEditState] = useState<EditState>({\n    value: stringValueOf(value),\n  });\n  // console.log(\"edit state: \", editState);\n  const initialValueRef = useRef<string>(value?.toString() ?? \"\");\n  const isDirtyRef = useRef(false);\n\n  useMemo(() => {\n    if (initialValueRef.current !== value?.toString()) {\n      initialValueRef.current = stringValueOf(value);\n      setEditState({ message: \"\", value: stringValueOf(value) });\n      console.log(\"initial value changed to: \", value);\n    }\n  }, [value]);\n\n  const commit = useCallback(\n    async (target: HTMLElement) => {\n      const { value } = editState;\n      if (isDirtyRef.current) {\n        const result = clientSideEditValidationCheck?.(value, \"*\");\n        if (result?.ok === false) {\n          setEditState((state) => ({\n            ...state,\n            message: result?.messages?.join(\",\"),\n          }));\n        } else {\n          setEditState((state) => ({ ...state, message: undefined }));\n          const response = await onEdit?.(\n            { editType: \"commit\", value, isValid: true },\n            \"commit\",\n          );\n          if (response === true) {\n            isDirtyRef.current = false;\n            initialValueRef.current = value;\n            dispatchCustomEvent(target, \"vuu-commit\");\n          } else if (typeof response === \"string\") {\n            setEditState((state) => ({ ...state, message: response }));\n          }\n        }\n      } else {\n        // why, if not dirty ?\n        dispatchCustomEvent(target, \"vuu-commit\");\n      }\n    },\n    [clientSideEditValidationCheck, editState, onEdit],\n  );\n\n  const handleKeyDown = useCallback(\n    (evt: KeyboardEvent<HTMLElement>) => {\n      if (evt.key === \"Enter\") {\n        commit(evt.target as HTMLElement);\n      } else if (\n        evt.key === \"ArrowRight\" ||\n        evt.key === \"ArrowLeft\" ||\n        evt.key === \"ArrowUp\" ||\n        evt.key === \"ArrowDown\"\n      ) {\n        evt.stopPropagation();\n      } else if (evt.key === \"Escape\") {\n        if (isDirtyRef.current) {\n          const { value: previousValue } = editState;\n          isDirtyRef.current = false;\n          setEditState({ value: initialValueRef.current, message: undefined });\n          // this assumes the original value was valid, is that safe ?\n          onEdit?.(\n            {\n              editType: \"cancel\",\n              isValid: true,\n              previousValue,\n              value: initialValueRef.current,\n            },\n            \"cancel\",\n          );\n        }\n      }\n    },\n    [commit, editState, onEdit],\n  );\n\n  const handleBlur = useCallback<FocusEventHandler<HTMLElement>>(\n    (evt) => {\n      if (isDirtyRef.current) {\n        commit(evt.target as HTMLElement);\n      }\n    },\n    [commit],\n  );\n\n  const handleChange = useCallback<FormEventHandler>(\n    (evt) => {\n      const { value } = evt.target as HTMLInputElement;\n      const typedValue = getTypedValue(value, type);\n      console.log(\n        `[useEditableText] handleChange '${value}' typedValue ${typedValue}\n          initial value ${initialValueRef.current}\n        `,\n      );\n      isDirtyRef.current = value !== initialValueRef.current;\n      const result = clientSideEditValidationCheck?.(value, \"change\");\n      console.log({ result, value });\n      setEditState({ value });\n\n      onEdit?.(\n        { editType: \"change\", isValid: result?.ok !== false, value },\n        \"change\",\n      );\n      if (result?.ok === false) {\n        console.log(\"cell fails validation\");\n        setEditState({ value, message: result.messages?.join(\",\") });\n      }\n    },\n    [clientSideEditValidationCheck, onEdit, type],\n  );\n\n  return {\n    //TODO why are we detecting commit here, why not use VuuInput ?\n    inputProps: {\n      onBlur: handleBlur,\n      onKeyDown: handleKeyDown,\n    },\n    onChange: handleChange,\n    value: editState.value,\n    warningMessage: editState.message,\n  };\n};\n"],"names":["useState","useRef","useMemo","useCallback","value","dispatchCustomEvent","getTypedValue"],"mappings":"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"}
+{"version":3,"file":"useEditableText.js","sources":["../../src/editable/useEditableText.ts"],"sourcesContent":["import type { DataValueValidationChecker } from \"@vuu-ui/vuu-data-types\";\nimport { VuuRowDataItemType } from \"@vuu-ui/vuu-protocol-types\";\nimport type { DataItemEditHandler } from \"@vuu-ui/vuu-table-types\";\nimport { dispatchCustomEvent, getTypedValue } from \"@vuu-ui/vuu-utils\";\nimport {\n  FocusEventHandler,\n  FormEventHandler,\n  KeyboardEvent,\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\n\nexport interface EditableTextHookProps<\n  T extends VuuRowDataItemType = VuuRowDataItemType,\n> {\n  clientSideEditValidationCheck?: DataValueValidationChecker;\n  value?: T;\n  onEdit?: DataItemEditHandler;\n  type?: \"string\" | \"number\" | \"boolean\";\n}\n\ntype EditState = {\n  message?: string;\n  value: string;\n};\n\nconst stringValueOf = (value?: VuuRowDataItemType) => value?.toString() ?? \"\";\n\nexport const useEditableText = <T extends string | number | boolean = string>({\n  clientSideEditValidationCheck,\n  value,\n  onEdit,\n  type = \"string\",\n}: EditableTextHookProps<T>) => {\n  // console.log(\"initial value: \", initialValue);\n  const [editState, setEditState] = useState<EditState>({\n    value: stringValueOf(value),\n  });\n  // console.log(\"edit state: \", editState);\n  const initialValueRef = useRef<string>(value?.toString() ?? \"\");\n  const isDirtyRef = useRef(false);\n\n  useMemo(() => {\n    if (initialValueRef.current !== value?.toString()) {\n      initialValueRef.current = stringValueOf(value);\n      setEditState({ message: \"\", value: stringValueOf(value) });\n      console.log(\"initial value changed to: \", value);\n    }\n  }, [value]);\n\n  const commit = useCallback(\n    async (target: HTMLElement) => {\n      const { value } = editState;\n      if (isDirtyRef.current) {\n        const result = clientSideEditValidationCheck?.(value, \"*\");\n        if (result?.ok === false) {\n          setEditState((state) => ({\n            ...state,\n            message: result?.messages?.join(\",\"),\n          }));\n        } else {\n          setEditState((state) => ({ ...state, message: undefined }));\n          const response = await onEdit?.(\n            { editType: \"commit\", value, isValid: true },\n            \"commit\",\n          );\n          if (response === true) {\n            isDirtyRef.current = false;\n            initialValueRef.current = value;\n            dispatchCustomEvent(target, \"vuu-commit\");\n          } else if (typeof response === \"string\") {\n            setEditState((state) => ({ ...state, message: response }));\n          }\n        }\n      } else {\n        // why, if not dirty ?\n        dispatchCustomEvent(target, \"vuu-commit\");\n      }\n    },\n    [clientSideEditValidationCheck, editState, onEdit],\n  );\n\n  const handleKeyDown = useCallback(\n    (evt: KeyboardEvent<HTMLElement>) => {\n      if (evt.key === \"Enter\") {\n        commit(evt.target as HTMLElement);\n      } else if (\n        evt.key === \"ArrowRight\" ||\n        evt.key === \"ArrowLeft\" ||\n        evt.key === \"ArrowUp\" ||\n        evt.key === \"ArrowDown\"\n      ) {\n        evt.stopPropagation();\n      } else if (evt.key === \"Escape\") {\n        if (isDirtyRef.current) {\n          const { value: previousValue } = editState;\n          isDirtyRef.current = false;\n          setEditState({ value: initialValueRef.current, message: undefined });\n          // this assumes the original value was valid, is that safe ?\n          onEdit?.(\n            {\n              editType: \"cancel\",\n              isValid: true,\n              previousValue,\n              value: initialValueRef.current,\n            },\n            \"cancel\",\n          );\n        }\n      }\n    },\n    [commit, editState, onEdit],\n  );\n\n  const handleBlur = useCallback<FocusEventHandler<HTMLElement>>(\n    (evt) => {\n      if (isDirtyRef.current) {\n        commit(evt.target as HTMLElement);\n      }\n    },\n    [commit],\n  );\n\n  const handleChange = useCallback<FormEventHandler>(\n    (evt) => {\n      const { value } = evt.target as HTMLInputElement;\n      const typedValue = getTypedValue(value, type);\n      console.log(\n        `[useEditableText] handleChange '${value}' typedValue ${typedValue}\n          initial value ${initialValueRef.current}\n        `,\n      );\n      isDirtyRef.current = value !== initialValueRef.current;\n      const result = clientSideEditValidationCheck?.(value, \"change\");\n      console.log({ result, value });\n      setEditState({ value });\n\n      onEdit?.(\n        { editType: \"change\", isValid: result?.ok !== false, value },\n        \"change\",\n      );\n      if (result?.ok === false) {\n        console.log(\"cell fails validation\");\n        setEditState({ value, message: result.messages?.join(\",\") });\n      }\n    },\n    [clientSideEditValidationCheck, onEdit, type],\n  );\n\n  return {\n    //TODO why are we detecting commit here, why not use VuuInput ?\n    inputProps: {\n      onBlur: handleBlur,\n      onKeyDown: handleKeyDown,\n    },\n    onChange: handleChange,\n    value: editState.value,\n    warningMessage: editState.message,\n  };\n};\n"],"names":["useState","useRef","useMemo","useCallback","value","dispatchCustomEvent","getTypedValue"],"mappings":"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"}

package/cjs/instrument-picker/useTablePicker.js

@@ -14,7 +14,7 @@ const useTablePicker = ({
   schema,
   searchColumns = schema.columns.filter(vuuUtils.isStringColumn).map(vuuUtils.toColumnName)
 }) => {
-  const { VuuDataSource } = vuuUtils.useDataSource();
+  const { VuuDataSource } = vuuUtils.useData();
   const [value, setValue] = React.useState("");
   const [open, setOpen] = React.useState(false);
   const widthRef = React.useRef(-1);

package/cjs/instrument-picker/useTablePicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"useTablePicker.js","sources":["../../src/instrument-picker/useTablePicker.ts"],"sourcesContent":["import {\n  flip,\n  size,\n  useClick,\n  useDismiss,\n  useInteractions,\n} from \"@floating-ui/react\";\nimport { useFloatingUI } from \"@salt-ds/core\";\nimport {\n  ChangeEvent,\n  KeyboardEventHandler,\n  RefCallback,\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\n\nimport type { DataSourceRowObject } from \"@vuu-ui/vuu-data-types\";\nimport type {\n  TableConfig,\n  TableRowSelectHandler,\n} from \"@vuu-ui/vuu-table-types\";\nimport { isStringColumn, toColumnName, useDataSource } from \"@vuu-ui/vuu-utils\";\nimport type { TablePickerProps } from \"./TablePicker\";\nimport {\n  isNavigationKey,\n  isRowSelectionKey,\n  useControlledTableNavigation,\n} from \"@vuu-ui/vuu-table\";\n\nexport interface TablePickerHookProps\n  extends Pick<\n    TablePickerProps,\n    \"TableProps\" | \"onSelect\" | \"rowToString\" | \"schema\" | \"searchColumns\"\n  > {\n  defaultIsOpen?: boolean;\n  isOpen?: boolean;\n}\n\nconst defaultRowToString = (row: DataSourceRowObject) =>\n  Object.values(row.data).join(\" \");\n\nexport const useTablePicker = ({\n  TableProps,\n  onSelect,\n  rowToString = defaultRowToString,\n  schema,\n  searchColumns = schema.columns.filter(isStringColumn).map(toColumnName),\n}: TablePickerHookProps) => {\n  const { VuuDataSource } = useDataSource();\n  const [value, setValue] = useState(\"\");\n  const [open, setOpen] = useState(false);\n\n  const widthRef = useRef(-1);\n\n  const tableColumns = TableProps?.config.columns;\n\n  const containerRef = useCallback<RefCallback<HTMLDivElement>>((el) => {\n    widthRef.current = el?.clientWidth ?? -1;\n  }, []);\n\n  const dataSource = useMemo(() => {\n    const columns = tableColumns ?? schema.columns;\n\n    return new VuuDataSource({\n      columns: columns.map((c) => c.name),\n      table: schema.table,\n    });\n  }, [tableColumns, VuuDataSource, schema]);\n\n  const navigation = useControlledTableNavigation(-1, dataSource.size);\n\n  const baseFilterPattern = useMemo(\n    // TODO make this contains once server supports it\n    () => searchColumns.map((col) => `${col} starts \"__VALUE__\"`).join(\" or \"),\n    [searchColumns],\n  );\n\n  // const handleOpenChange = useCallback<OpenChangeHandler>(\n  //   (open, closeReason) => {\n  //     setIsOpen(open);\n  //     onOpenChange?.(open, closeReason);\n  //   },\n  //   [onOpenChange, setIsOpen],\n  // );\n\n  const { context, elements, ...floatingUIProps } = useFloatingUI({\n    open,\n    onOpenChange: setOpen,\n    placement: \"bottom-end\",\n    strategy: \"fixed\",\n    middleware: [\n      size({\n        apply({ rects, elements, availableHeight }) {\n          Object.assign(elements.floating.style, {\n            minWidth: `${rects.reference.width}px`,\n            maxHeight: `max(calc(${availableHeight}px - var(--salt-spacing-100)), calc((var(--salt-size-base) + var(--salt-spacing-100)) * 5))`,\n          });\n        },\n      }),\n      flip({ fallbackStrategy: \"initialPlacement\" }),\n    ],\n  });\n\n  const interactionPropGetters = useInteractions([\n    useDismiss(context),\n    useClick(context, { keyboardHandlers: false, toggle: false }),\n  ]);\n\n  const handleInputChange = useCallback(\n    (evt: ChangeEvent<HTMLInputElement>) => {\n      const { value } = evt.target;\n      setValue(value);\n\n      console.log(`input changed ${value}`);\n\n      if (value && value.trim().length) {\n        const filter = baseFilterPattern.replaceAll(\"__VALUE__\", value);\n        dataSource.filter = {\n          filter,\n        };\n      } else {\n        dataSource.filter = {\n          filter: \"\",\n        };\n      }\n    },\n    [baseFilterPattern, dataSource],\n  );\n\n  const handleSelectRow = useCallback<TableRowSelectHandler>(\n    (row) => {\n      const value = row === null ? \"\" : rowToString(row);\n      setValue(value);\n      onSelect?.(row);\n      // TODO do we need to include a reason ?\n      requestAnimationFrame(() => {\n        setOpen(false);\n      });\n    },\n    [onSelect, rowToString],\n  );\n\n  const handleKeyDown = useCallback<KeyboardEventHandler<HTMLElement>>(\n    (evt) => {\n      if (open) {\n        if (isNavigationKey(evt.key, \"row\") || isRowSelectionKey(evt.key)) {\n          navigation.onKeyDown(evt);\n        }\n      } else {\n        if (evt.key === \"ArrowDown\" || evt.key === \"Enter\") {\n          setOpen(true);\n        }\n      }\n    },\n    [navigation, open],\n  );\n\n  const inputProps = {\n    inputProps: {\n      autoComplete: \"off\",\n      onKeyDown: handleKeyDown,\n    },\n    onChange: handleInputChange,\n  };\n  const tableHandlers = {\n    onSelect: handleSelectRow,\n  };\n\n  const tableConfig = useMemo<TableConfig>(() => {\n    const config = TableProps?.config;\n    if (config) {\n      const {\n        columns = schema.columns,\n        columnLayout = \"fit\",\n        ...rest\n      } = config;\n      return {\n        columns,\n        columnLayout,\n        ...rest,\n      };\n    } else {\n      return {\n        columnLayout: \"fit\",\n        columns: schema.columns,\n      };\n    }\n  }, [TableProps, schema]);\n\n  return {\n    containerRef,\n    dataSource,\n    highlightedIndex: navigation.highlightedIndexRef.current,\n    floatingUIProps,\n    inputProps,\n    interactionPropGetters,\n    onKeyDown: handleKeyDown,\n    open,\n    tableConfig,\n    tableHandlers,\n    tableRef: navigation.tableRef,\n    value,\n    width: widthRef.current,\n  };\n};\n"],"names":["isStringColumn","toColumnName","useDataSource","useState","useRef","useCallback","useMemo","useControlledTableNavigation","useFloatingUI","size","elements","flip","useInteractions","useDismiss","useClick","value","isNavigationKey","isRowSelectionKey"],"mappings":"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"}
+{"version":3,"file":"useTablePicker.js","sources":["../../src/instrument-picker/useTablePicker.ts"],"sourcesContent":["import {\n  flip,\n  size,\n  useClick,\n  useDismiss,\n  useInteractions,\n} from \"@floating-ui/react\";\nimport { useFloatingUI } from \"@salt-ds/core\";\nimport {\n  ChangeEvent,\n  KeyboardEventHandler,\n  RefCallback,\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\n\nimport type { DataSourceRowObject } from \"@vuu-ui/vuu-data-types\";\nimport type {\n  TableConfig,\n  TableRowSelectHandler,\n} from \"@vuu-ui/vuu-table-types\";\nimport { isStringColumn, toColumnName, useData } from \"@vuu-ui/vuu-utils\";\nimport type { TablePickerProps } from \"./TablePicker\";\nimport {\n  isNavigationKey,\n  isRowSelectionKey,\n  useControlledTableNavigation,\n} from \"@vuu-ui/vuu-table\";\n\nexport interface TablePickerHookProps\n  extends Pick<\n    TablePickerProps,\n    \"TableProps\" | \"onSelect\" | \"rowToString\" | \"schema\" | \"searchColumns\"\n  > {\n  defaultIsOpen?: boolean;\n  isOpen?: boolean;\n}\n\nconst defaultRowToString = (row: DataSourceRowObject) =>\n  Object.values(row.data).join(\" \");\n\nexport const useTablePicker = ({\n  TableProps,\n  onSelect,\n  rowToString = defaultRowToString,\n  schema,\n  searchColumns = schema.columns.filter(isStringColumn).map(toColumnName),\n}: TablePickerHookProps) => {\n  const { VuuDataSource } = useData();\n  const [value, setValue] = useState(\"\");\n  const [open, setOpen] = useState(false);\n\n  const widthRef = useRef(-1);\n\n  const tableColumns = TableProps?.config.columns;\n\n  const containerRef = useCallback<RefCallback<HTMLDivElement>>((el) => {\n    widthRef.current = el?.clientWidth ?? -1;\n  }, []);\n\n  const dataSource = useMemo(() => {\n    const columns = tableColumns ?? schema.columns;\n\n    return new VuuDataSource({\n      columns: columns.map((c) => c.name),\n      table: schema.table,\n    });\n  }, [tableColumns, VuuDataSource, schema]);\n\n  const navigation = useControlledTableNavigation(-1, dataSource.size);\n\n  const baseFilterPattern = useMemo(\n    // TODO make this contains once server supports it\n    () => searchColumns.map((col) => `${col} starts \"__VALUE__\"`).join(\" or \"),\n    [searchColumns],\n  );\n\n  // const handleOpenChange = useCallback<OpenChangeHandler>(\n  //   (open, closeReason) => {\n  //     setIsOpen(open);\n  //     onOpenChange?.(open, closeReason);\n  //   },\n  //   [onOpenChange, setIsOpen],\n  // );\n\n  const { context, elements, ...floatingUIProps } = useFloatingUI({\n    open,\n    onOpenChange: setOpen,\n    placement: \"bottom-end\",\n    strategy: \"fixed\",\n    middleware: [\n      size({\n        apply({ rects, elements, availableHeight }) {\n          Object.assign(elements.floating.style, {\n            minWidth: `${rects.reference.width}px`,\n            maxHeight: `max(calc(${availableHeight}px - var(--salt-spacing-100)), calc((var(--salt-size-base) + var(--salt-spacing-100)) * 5))`,\n          });\n        },\n      }),\n      flip({ fallbackStrategy: \"initialPlacement\" }),\n    ],\n  });\n\n  const interactionPropGetters = useInteractions([\n    useDismiss(context),\n    useClick(context, { keyboardHandlers: false, toggle: false }),\n  ]);\n\n  const handleInputChange = useCallback(\n    (evt: ChangeEvent<HTMLInputElement>) => {\n      const { value } = evt.target;\n      setValue(value);\n\n      console.log(`input changed ${value}`);\n\n      if (value && value.trim().length) {\n        const filter = baseFilterPattern.replaceAll(\"__VALUE__\", value);\n        dataSource.filter = {\n          filter,\n        };\n      } else {\n        dataSource.filter = {\n          filter: \"\",\n        };\n      }\n    },\n    [baseFilterPattern, dataSource],\n  );\n\n  const handleSelectRow = useCallback<TableRowSelectHandler>(\n    (row) => {\n      const value = row === null ? \"\" : rowToString(row);\n      setValue(value);\n      onSelect?.(row);\n      // TODO do we need to include a reason ?\n      requestAnimationFrame(() => {\n        setOpen(false);\n      });\n    },\n    [onSelect, rowToString],\n  );\n\n  const handleKeyDown = useCallback<KeyboardEventHandler<HTMLElement>>(\n    (evt) => {\n      if (open) {\n        if (isNavigationKey(evt.key, \"row\") || isRowSelectionKey(evt.key)) {\n          navigation.onKeyDown(evt);\n        }\n      } else {\n        if (evt.key === \"ArrowDown\" || evt.key === \"Enter\") {\n          setOpen(true);\n        }\n      }\n    },\n    [navigation, open],\n  );\n\n  const inputProps = {\n    inputProps: {\n      autoComplete: \"off\",\n      onKeyDown: handleKeyDown,\n    },\n    onChange: handleInputChange,\n  };\n  const tableHandlers = {\n    onSelect: handleSelectRow,\n  };\n\n  const tableConfig = useMemo<TableConfig>(() => {\n    const config = TableProps?.config;\n    if (config) {\n      const {\n        columns = schema.columns,\n        columnLayout = \"fit\",\n        ...rest\n      } = config;\n      return {\n        columns,\n        columnLayout,\n        ...rest,\n      };\n    } else {\n      return {\n        columnLayout: \"fit\",\n        columns: schema.columns,\n      };\n    }\n  }, [TableProps, schema]);\n\n  return {\n    containerRef,\n    dataSource,\n    highlightedIndex: navigation.highlightedIndexRef.current,\n    floatingUIProps,\n    inputProps,\n    interactionPropGetters,\n    onKeyDown: handleKeyDown,\n    open,\n    tableConfig,\n    tableHandlers,\n    tableRef: navigation.tableRef,\n    value,\n    width: widthRef.current,\n  };\n};\n"],"names":["isStringColumn","toColumnName","useData","useState","useRef","useCallback","useMemo","useControlledTableNavigation","useFloatingUI","size","elements","flip","useInteractions","useDismiss","useClick","value","isNavigationKey","isRowSelectionKey"],"mappings":"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"}

package/cjs/list/useListHeight.js.map

@@ -1 +1 @@
-{"version":3,"file":"useListHeight.js","sources":["../../src/list/useListHeight.ts"],"sourcesContent":["import { MeasuredSize } from \"@vuu-ui/vuu-ui-controls\";\nimport { RefCallback, useCallback, useMemo, useRef, useState } from \"react\";\nimport { HeightOnly, ResizeHandler, useResizeObserver } from \"../common-hooks\";\n\nexport interface ListHeightHookProps {\n  displayedItemCount: number;\n  getItemHeight?: (index: number) => number;\n  height?: number | string;\n  itemCount: number;\n  itemGapSize: number;\n  itemHeight?: number;\n  size: MeasuredSize | undefined;\n}\n\nexport interface HeightHookResult {\n  computedListHeight: number | undefined;\n  contentHeight: number;\n  listClientHeight?: number;\n  listItemHeight: number;\n  rowHeightProxyRef: RefCallback<HTMLDivElement>;\n}\n\nconst getContentHeight = (\n  itemCount: number,\n  itemHeight: number,\n  itemGapSize = 0,\n) => {\n  if (itemCount === 0) {\n    return 0;\n  } else if (itemGapSize === 0) {\n    return itemCount * itemHeight;\n  } else {\n    return itemCount - 1 * (itemHeight + itemGapSize) + itemHeight;\n  }\n};\n\nexport const useListHeight = ({\n  displayedItemCount,\n  getItemHeight,\n  // TODO no need to incur the cost of a resizeObserver if height is explicit\n  height,\n  itemCount,\n  itemGapSize,\n  itemHeight: itemHeightProp = 36,\n  size,\n}: ListHeightHookProps): HeightHookResult => {\n  // TODO default by density\n  const [measuredItemHeight, setMeasuredItemHeight] =\n    useState<number>(itemHeightProp);\n  // Not 100% sure why we need this forceUpdate\n  const [, forceUpdate] = useState({});\n  // This is a ref to the 'item proxy' a hiden list item used to detect css driven\n  // size changes (e.g. runtime density switch)\n  const proxyItemRef = useRef<HTMLDivElement | null>(null);\n\n  const [contentHeight, computedListHeight] = useMemo(() => {\n    let result = 0;\n    const itemHeight = measuredItemHeight ?? itemHeightProp;\n    const contentHeight = getContentHeight(itemCount, itemHeight, itemGapSize);\n    if (height !== undefined) {\n      // TODO if this is a percentage, convert to number\n      return [contentHeight, undefined];\n    }\n\n    // if there are 0 items we render with the preferred count\n    const preferredItemCount =\n      Math.min(displayedItemCount, itemCount) || displayedItemCount;\n\n    if (typeof getItemHeight === \"function\") {\n      result +=\n        Array(preferredItemCount)\n          .fill(0)\n          .reduce<number>(\n            (total, _, index) => total + getItemHeight(index) + itemGapSize,\n            0,\n          ) -\n        // We don't want gap after the last item\n        itemGapSize;\n    } else {\n      result +=\n        preferredItemCount * Number(itemHeight) +\n        (preferredItemCount - 1) * itemGapSize;\n    }\n\n    const listHeight = result;\n\n    return [contentHeight, listHeight];\n  }, [\n    displayedItemCount,\n    getItemHeight,\n    height,\n    itemCount,\n    itemGapSize,\n    itemHeightProp,\n    measuredItemHeight,\n  ]);\n\n  const handleRowHeight: ResizeHandler = useCallback(({ height }) => {\n    if (typeof height === \"number\") {\n      setMeasuredItemHeight(height);\n    }\n  }, []);\n\n  const rowHeightProxyRef = useCallback<RefCallback<HTMLDivElement>>((el) => {\n    proxyItemRef.current = el;\n    forceUpdate({});\n  }, []);\n\n  useResizeObserver(proxyItemRef, HeightOnly, handleRowHeight, true);\n\n  return {\n    computedListHeight,\n    contentHeight,\n    listClientHeight: size?.height,\n    listItemHeight: measuredItemHeight,\n    rowHeightProxyRef,\n  };\n};\n"],"names":["useState","useRef","useMemo","contentHeight","useCallback","height","useResizeObserver","HeightOnly"],"mappings":"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"}
+{"version":3,"file":"useListHeight.js","sources":["../../src/list/useListHeight.ts"],"sourcesContent":["import { RefCallback, useCallback, useMemo, useRef, useState } from \"react\";\nimport { HeightOnly, ResizeHandler, useResizeObserver } from \"../common-hooks\";\nimport { MeasuredSize } from \"../measured-container\";\n\nexport interface ListHeightHookProps {\n  displayedItemCount: number;\n  getItemHeight?: (index: number) => number;\n  height?: number | string;\n  itemCount: number;\n  itemGapSize: number;\n  itemHeight?: number;\n  size: MeasuredSize | undefined;\n}\n\nexport interface HeightHookResult {\n  computedListHeight: number | undefined;\n  contentHeight: number;\n  listClientHeight?: number;\n  listItemHeight: number;\n  rowHeightProxyRef: RefCallback<HTMLDivElement>;\n}\n\nconst getContentHeight = (\n  itemCount: number,\n  itemHeight: number,\n  itemGapSize = 0,\n) => {\n  if (itemCount === 0) {\n    return 0;\n  } else if (itemGapSize === 0) {\n    return itemCount * itemHeight;\n  } else {\n    return itemCount - 1 * (itemHeight + itemGapSize) + itemHeight;\n  }\n};\n\nexport const useListHeight = ({\n  displayedItemCount,\n  getItemHeight,\n  // TODO no need to incur the cost of a resizeObserver if height is explicit\n  height,\n  itemCount,\n  itemGapSize,\n  itemHeight: itemHeightProp = 36,\n  size,\n}: ListHeightHookProps): HeightHookResult => {\n  // TODO default by density\n  const [measuredItemHeight, setMeasuredItemHeight] =\n    useState<number>(itemHeightProp);\n  // Not 100% sure why we need this forceUpdate\n  const [, forceUpdate] = useState({});\n  // This is a ref to the 'item proxy' a hiden list item used to detect css driven\n  // size changes (e.g. runtime density switch)\n  const proxyItemRef = useRef<HTMLDivElement | null>(null);\n\n  const [contentHeight, computedListHeight] = useMemo(() => {\n    let result = 0;\n    const itemHeight = measuredItemHeight ?? itemHeightProp;\n    const contentHeight = getContentHeight(itemCount, itemHeight, itemGapSize);\n    if (height !== undefined) {\n      // TODO if this is a percentage, convert to number\n      return [contentHeight, undefined];\n    }\n\n    // if there are 0 items we render with the preferred count\n    const preferredItemCount =\n      Math.min(displayedItemCount, itemCount) || displayedItemCount;\n\n    if (typeof getItemHeight === \"function\") {\n      result +=\n        Array(preferredItemCount)\n          .fill(0)\n          .reduce<number>(\n            (total, _, index) => total + getItemHeight(index) + itemGapSize,\n            0,\n          ) -\n        // We don't want gap after the last item\n        itemGapSize;\n    } else {\n      result +=\n        preferredItemCount * Number(itemHeight) +\n        (preferredItemCount - 1) * itemGapSize;\n    }\n\n    const listHeight = result;\n\n    return [contentHeight, listHeight];\n  }, [\n    displayedItemCount,\n    getItemHeight,\n    height,\n    itemCount,\n    itemGapSize,\n    itemHeightProp,\n    measuredItemHeight,\n  ]);\n\n  const handleRowHeight: ResizeHandler = useCallback(({ height }) => {\n    if (typeof height === \"number\") {\n      setMeasuredItemHeight(height);\n    }\n  }, []);\n\n  const rowHeightProxyRef = useCallback<RefCallback<HTMLDivElement>>((el) => {\n    proxyItemRef.current = el;\n    forceUpdate({});\n  }, []);\n\n  useResizeObserver(proxyItemRef, HeightOnly, handleRowHeight, true);\n\n  return {\n    computedListHeight,\n    contentHeight,\n    listClientHeight: size?.height,\n    listItemHeight: measuredItemHeight,\n    rowHeightProxyRef,\n  };\n};\n"],"names":["useState","useRef","useMemo","contentHeight","useCallback","height","useResizeObserver","HeightOnly"],"mappings":"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"}

package/cjs/overflow-container/useOverflowContainer.js

@@ -68,14 +68,14 @@ const useOverflowContainer = ({
         return menuItems.map((item) => {
           return {
             label: item.label,
-            action: `activate-item-${item.index}`,
+            id: `activate-item-${item.index}`,
             options: { overflowItem: item }
           };
         });
       },
       // The menu items are our overflowed items, selecting one by default
       // brings it back onto the toolbar - TODO is this right ?
-      ({ options }) => {
+      (menuItemId, options) => {
         if (container && hasOverflowItem(options)) {
           const [, wrappedItems] = overflowUtils.switchWrappedItemIntoView(
             container,

package/cjs/overflow-container/useOverflowContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"useOverflowContainer.js","sources":["../../src/overflow-container/useOverflowContainer.ts"],"sourcesContent":["import { MenuActionHandler, MenuBuilder } from \"@vuu-ui/vuu-data-types\";\nimport {\n  isValidNumber,\n  MEASURES,\n  useLayoutEffectSkipFirst,\n} from \"@vuu-ui/vuu-utils\";\nimport { useCallback, useMemo, useRef, useState } from \"react\";\nimport {\n  applyOverflowClassToWrappedItems,\n  removeOverflowIndicatorIfNoLongerNeeded,\n  correctForWrappedHighPriorityItems,\n  getNonWrappedAndWrappedItems,\n  NO_WRAPPED_ITEMS,\n  highPriorityItemsHaveWrappedButShouldNotHave,\n  switchWrappedItemIntoView,\n  OverflowItem,\n  overflowIndicatorHasWrappedButShouldNotHave,\n  correctForWrappedOverflowIndicator,\n} from \"./overflow-utils\";\nimport { OverflowContainerProps } from \"./OverflowContainer\";\nimport { DropOptions, useDragDrop } from \"../drag-drop\";\n\nexport interface OverflowContainerHookProps\n  extends Pick<OverflowContainerProps, \"allowDragDrop\" | \"onMoveItem\">,\n    Required<Pick<OverflowContainerProps, \"orientation\">> {\n  itemCount: number;\n  onSwitchWrappedItemIntoView?: (overflowItem: OverflowItem) => void;\n}\n\nexport const useOverflowContainer = ({\n  allowDragDrop = false,\n  itemCount,\n  onMoveItem,\n  onSwitchWrappedItemIntoView,\n  orientation,\n}: OverflowContainerHookProps) => {\n  const [container, setContainer] = useState<HTMLDivElement | null>(null);\n  const wrappedItemsRef = useRef<OverflowItem[]>(NO_WRAPPED_ITEMS);\n  // Drag drop needs a ref to container\n  const containerRef = useRef<HTMLDivElement | null>(null);\n\n  const setOverflowTabIndex = useCallback((tabIndex: \"0\" | \"-1\") => {\n    if (containerRef.current) {\n      containerRef.current\n        .querySelector(\".vuuOverflowContainer-OverflowIndicator button\")\n        ?.setAttribute(\"tabindex\", tabIndex);\n    }\n  }, []);\n\n  const handleResize = useCallback(async () => {\n    if (container) {\n      let [nonWrapped, wrapped] = getNonWrappedAndWrappedItems(\n        container,\n        orientation,\n      );\n      applyOverflowClassToWrappedItems(\n        container,\n        wrapped,\n        \"vuuOverflowContainer-wrapContainer\",\n      );\n      if (overflowIndicatorHasWrappedButShouldNotHave(wrapped)) {\n        wrapped = await correctForWrappedOverflowIndicator(\n          container,\n          wrapped,\n          orientation,\n        );\n      }\n      while (\n        highPriorityItemsHaveWrappedButShouldNotHave(nonWrapped, wrapped)\n      ) {\n        [nonWrapped, wrapped] = await correctForWrappedHighPriorityItems(\n          container,\n          nonWrapped,\n          wrapped,\n          orientation,\n        );\n      }\n      if (wrapped.length === 1) {\n        if (removeOverflowIndicatorIfNoLongerNeeded(container, orientation)) {\n          wrapped = NO_WRAPPED_ITEMS;\n        }\n      }\n\n      if (wrappedItemsRef.current.length === 0 && wrapped.length > 0) {\n        setOverflowTabIndex(\"0\");\n      } else if (wrappedItemsRef.current.length > 0 && wrapped.length === 0) {\n        setOverflowTabIndex(\"-1\");\n      }\n\n      wrappedItemsRef.current = wrapped;\n    }\n  }, [container, orientation, setOverflowTabIndex]);\n\n  const hasOverflowItem = (\n    opt: unknown,\n  ): opt is {\n    overflowItem: OverflowItem;\n  } => typeof opt === \"object\" && opt !== null && \"overflowItem\" in opt;\n\n  const [menuBuilder, menuActionHandler] = useMemo((): [\n    MenuBuilder,\n    MenuActionHandler,\n  ] => {\n    return [\n      () => {\n        const { current: menuItems } = wrappedItemsRef;\n        return menuItems.map((item: OverflowItem) => {\n          return {\n            label: item.label,\n            action: `activate-item-${item.index}`,\n            options: { overflowItem: item },\n          };\n        });\n      },\n      // The menu items are our overflowed items, selecting one by default\n      // brings it back onto the toolbar - TODO is this right ?\n      ({ options }) => {\n        if (container && hasOverflowItem(options)) {\n          // TODO do we always want to switch it into view - leave that to caller\n          const [, wrappedItems] = switchWrappedItemIntoView(\n            container,\n            options.overflowItem,\n            orientation,\n          );\n          wrappedItemsRef.current = wrappedItems;\n          onSwitchWrappedItemIntoView?.(options.overflowItem);\n        }\n        return true;\n      },\n    ];\n  }, [container, onSwitchWrappedItemIntoView, orientation]);\n\n  const resizeObserver = useMemo(() => {\n    const { sizeProp } = MEASURES[orientation];\n    let currentSize = 0;\n    return new ResizeObserver((entries: ResizeObserverEntry[]) => {\n      for (const entry of entries) {\n        const { [sizeProp]: actualSize } = entry.contentRect;\n        // This is important. Sometimes tiny sub-pixel differeces\n        // can be reported, which break the layout assumptions\n        const size = Math.round(actualSize as number);\n        if (isValidNumber(size) && currentSize !== size) {\n          currentSize = size;\n          handleResize();\n        }\n      }\n    });\n  }, [handleResize, orientation]);\n\n  useLayoutEffectSkipFirst(() => {\n    handleResize();\n  }, [handleResize, itemCount]);\n\n  useMemo(() => {\n    if (container) {\n      resizeObserver.observe(container);\n    }\n  }, [container, resizeObserver]);\n\n  const callbackRef = useCallback((el: HTMLDivElement | null) => {\n    setContainer((containerRef.current = el));\n  }, []);\n\n  const handleDrop = useCallback(\n    ({ fromIndex, toIndex }: DropOptions) => {\n      onMoveItem?.(fromIndex, toIndex);\n    },\n    [onMoveItem],\n  );\n\n  const { onMouseDown: dragDropHookHandleMouseDown, ...dragDropHook } =\n    useDragDrop({\n      allowDragDrop,\n      containerRef,\n      // this is for useDragDropNext\n      draggableClassName: `vuuOverflowContainer`,\n      // extendedDropZone: overflowedItems.length > 0,\n      onDrop: handleDrop,\n      orientation: \"horizontal\",\n      itemQuery: \".vuuOverflowContainer-item\",\n    });\n\n  return {\n    menuActionHandler,\n    menuBuilder,\n    onItemMouseDown: dragDropHookHandleMouseDown,\n    rootRef: callbackRef,\n    ...dragDropHook,\n  };\n};\n"],"names":["useState","useRef","NO_WRAPPED_ITEMS","useCallback","getNonWrappedAndWrappedItems","applyOverflowClassToWrappedItems","overflowIndicatorHasWrappedButShouldNotHave","correctForWrappedOverflowIndicator","highPriorityItemsHaveWrappedButShouldNotHave","correctForWrappedHighPriorityItems","removeOverflowIndicatorIfNoLongerNeeded","useMemo","switchWrappedItemIntoView","MEASURES","isValidNumber","useLayoutEffectSkipFirst","useDragDrop"],"mappings":"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"}
+{"version":3,"file":"useOverflowContainer.js","sources":["../../src/overflow-container/useOverflowContainer.ts"],"sourcesContent":["import {\n  isValidNumber,\n  MEASURES,\n  useLayoutEffectSkipFirst,\n} from \"@vuu-ui/vuu-utils\";\nimport { useCallback, useMemo, useRef, useState } from \"react\";\nimport {\n  applyOverflowClassToWrappedItems,\n  removeOverflowIndicatorIfNoLongerNeeded,\n  correctForWrappedHighPriorityItems,\n  getNonWrappedAndWrappedItems,\n  NO_WRAPPED_ITEMS,\n  highPriorityItemsHaveWrappedButShouldNotHave,\n  switchWrappedItemIntoView,\n  OverflowItem,\n  overflowIndicatorHasWrappedButShouldNotHave,\n  correctForWrappedOverflowIndicator,\n} from \"./overflow-utils\";\nimport { OverflowContainerProps } from \"./OverflowContainer\";\nimport { DropOptions, useDragDrop } from \"../drag-drop\";\nimport { MenuActionHandler, MenuBuilder } from \"@vuu-ui/vuu-context-menu\";\n\nexport interface OverflowContainerHookProps\n  extends Pick<OverflowContainerProps, \"allowDragDrop\" | \"onMoveItem\">,\n    Required<Pick<OverflowContainerProps, \"orientation\">> {\n  itemCount: number;\n  onSwitchWrappedItemIntoView?: (overflowItem: OverflowItem) => void;\n}\n\nexport const useOverflowContainer = ({\n  allowDragDrop = false,\n  itemCount,\n  onMoveItem,\n  onSwitchWrappedItemIntoView,\n  orientation,\n}: OverflowContainerHookProps) => {\n  const [container, setContainer] = useState<HTMLDivElement | null>(null);\n  const wrappedItemsRef = useRef<OverflowItem[]>(NO_WRAPPED_ITEMS);\n  // Drag drop needs a ref to container\n  const containerRef = useRef<HTMLDivElement | null>(null);\n\n  const setOverflowTabIndex = useCallback((tabIndex: \"0\" | \"-1\") => {\n    if (containerRef.current) {\n      containerRef.current\n        .querySelector(\".vuuOverflowContainer-OverflowIndicator button\")\n        ?.setAttribute(\"tabindex\", tabIndex);\n    }\n  }, []);\n\n  const handleResize = useCallback(async () => {\n    if (container) {\n      let [nonWrapped, wrapped] = getNonWrappedAndWrappedItems(\n        container,\n        orientation,\n      );\n      applyOverflowClassToWrappedItems(\n        container,\n        wrapped,\n        \"vuuOverflowContainer-wrapContainer\",\n      );\n      if (overflowIndicatorHasWrappedButShouldNotHave(wrapped)) {\n        wrapped = await correctForWrappedOverflowIndicator(\n          container,\n          wrapped,\n          orientation,\n        );\n      }\n      while (\n        highPriorityItemsHaveWrappedButShouldNotHave(nonWrapped, wrapped)\n      ) {\n        [nonWrapped, wrapped] = await correctForWrappedHighPriorityItems(\n          container,\n          nonWrapped,\n          wrapped,\n          orientation,\n        );\n      }\n      if (wrapped.length === 1) {\n        if (removeOverflowIndicatorIfNoLongerNeeded(container, orientation)) {\n          wrapped = NO_WRAPPED_ITEMS;\n        }\n      }\n\n      if (wrappedItemsRef.current.length === 0 && wrapped.length > 0) {\n        setOverflowTabIndex(\"0\");\n      } else if (wrappedItemsRef.current.length > 0 && wrapped.length === 0) {\n        setOverflowTabIndex(\"-1\");\n      }\n\n      wrappedItemsRef.current = wrapped;\n    }\n  }, [container, orientation, setOverflowTabIndex]);\n\n  const hasOverflowItem = (\n    opt: unknown,\n  ): opt is {\n    overflowItem: OverflowItem;\n  } => typeof opt === \"object\" && opt !== null && \"overflowItem\" in opt;\n\n  const [menuBuilder, menuActionHandler] = useMemo((): [\n    MenuBuilder,\n    MenuActionHandler,\n  ] => {\n    return [\n      () => {\n        const { current: menuItems } = wrappedItemsRef;\n        return menuItems.map((item: OverflowItem) => {\n          return {\n            label: item.label,\n            id: `activate-item-${item.index}`,\n            options: { overflowItem: item },\n          };\n        });\n      },\n      // The menu items are our overflowed items, selecting one by default\n      // brings it back onto the toolbar - TODO is this right ?\n      (menuItemId, options) => {\n        if (container && hasOverflowItem(options)) {\n          // TODO do we always want to switch it into view - leave that to caller\n          const [, wrappedItems] = switchWrappedItemIntoView(\n            container,\n            options.overflowItem,\n            orientation,\n          );\n          wrappedItemsRef.current = wrappedItems;\n          onSwitchWrappedItemIntoView?.(options.overflowItem);\n        }\n        return true;\n      },\n    ];\n  }, [container, onSwitchWrappedItemIntoView, orientation]);\n\n  const resizeObserver = useMemo(() => {\n    const { sizeProp } = MEASURES[orientation];\n    let currentSize = 0;\n    return new ResizeObserver((entries: ResizeObserverEntry[]) => {\n      for (const entry of entries) {\n        const { [sizeProp]: actualSize } = entry.contentRect;\n        // This is important. Sometimes tiny sub-pixel differeces\n        // can be reported, which break the layout assumptions\n        const size = Math.round(actualSize as number);\n        if (isValidNumber(size) && currentSize !== size) {\n          currentSize = size;\n          handleResize();\n        }\n      }\n    });\n  }, [handleResize, orientation]);\n\n  useLayoutEffectSkipFirst(() => {\n    handleResize();\n  }, [handleResize, itemCount]);\n\n  useMemo(() => {\n    if (container) {\n      resizeObserver.observe(container);\n    }\n  }, [container, resizeObserver]);\n\n  const callbackRef = useCallback((el: HTMLDivElement | null) => {\n    setContainer((containerRef.current = el));\n  }, []);\n\n  const handleDrop = useCallback(\n    ({ fromIndex, toIndex }: DropOptions) => {\n      onMoveItem?.(fromIndex, toIndex);\n    },\n    [onMoveItem],\n  );\n\n  const { onMouseDown: dragDropHookHandleMouseDown, ...dragDropHook } =\n    useDragDrop({\n      allowDragDrop,\n      containerRef,\n      // this is for useDragDropNext\n      draggableClassName: `vuuOverflowContainer`,\n      // extendedDropZone: overflowedItems.length > 0,\n      onDrop: handleDrop,\n      orientation: \"horizontal\",\n      itemQuery: \".vuuOverflowContainer-item\",\n    });\n\n  return {\n    menuActionHandler,\n    menuBuilder,\n    onItemMouseDown: dragDropHookHandleMouseDown,\n    rootRef: callbackRef,\n    ...dragDropHook,\n  };\n};\n"],"names":["useState","useRef","NO_WRAPPED_ITEMS","useCallback","getNonWrappedAndWrappedItems","applyOverflowClassToWrappedItems","overflowIndicatorHasWrappedButShouldNotHave","correctForWrappedOverflowIndicator","highPriorityItemsHaveWrappedButShouldNotHave","correctForWrappedHighPriorityItems","removeOverflowIndicatorIfNoLongerNeeded","useMemo","switchWrappedItemIntoView","MEASURES","isValidNumber","useLayoutEffectSkipFirst","useDragDrop"],"mappings":"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"}

package/cjs/split-button/SplitButton.js

@@ -9,6 +9,7 @@ var cx = require('clsx');
 var styles = require('@salt-ds/styles');
 var window = require('@salt-ds/window');
 var SplitButton$1 = require('./SplitButton.css.js');
+var vuuContextMenu = require('@vuu-ui/vuu-context-menu');
 
 const classBase = "vuuSplitButton";
 const SplitButton = React.forwardRef(
@@ -36,7 +37,7 @@ const SplitButton = React.forwardRef(
       onClick,
       segmented
     });
-    return /* @__PURE__ */ jsxRuntime.jsxs(
+    return /* @__PURE__ */ jsxRuntime.jsx(vuuContextMenu.ContextMenuProvider, { children: /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
         ...htmlAttributes,
@@ -73,7 +74,7 @@ const SplitButton = React.forwardRef(
           )
         ]
       }
-    );
+    ) });
   }
 );
 

package/cjs/split-button/SplitButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"SplitButton.js","sources":["../../src/split-button/SplitButton.tsx"],"sourcesContent":["import { PopupMenu, PopupMenuProps } from \"@vuu-ui/vuu-popups\";\nimport { Button, ButtonProps, useForkRef } from \"@salt-ds/core\";\nimport { forwardRef, HTMLAttributes } from \"react\";\nimport { useSplitButton } from \"./useSplitButton\";\nimport cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport splitButtonCss from \"./SplitButton.css\";\n\nexport interface SplitButtonProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"onClick\">,\n    Pick<ButtonProps, \"onClick\"> {\n  ButtonProps?: Partial<Omit<ButtonProps, \"onClick\" | \"variant\">>;\n  PopupMenuProps?: Partial<PopupMenuProps>;\n  disabled?: boolean;\n  segmented?: boolean;\n  variant?: ButtonProps[\"variant\"];\n}\n\nconst classBase = \"vuuSplitButton\";\n\nexport const SplitButton = forwardRef<HTMLDivElement, SplitButtonProps>(\n  function SplitButton(\n    {\n      ButtonProps: ButtonPropsProp,\n      PopupMenuProps: PopupMenuPropsProp,\n      children,\n      className,\n      disabled = false,\n      onClick,\n      segmented = false,\n      variant = \"primary\",\n      ...htmlAttributes\n    },\n    forwardedRef,\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"vuu-split-button\",\n      css: splitButtonCss,\n      window: targetWindow,\n    });\n\n    const { ButtonProps, buttonRef, rootRef, PopupMenuProps, ...rootProps } =\n      useSplitButton({\n        ButtonProps: ButtonPropsProp,\n        PopupMenuProps: PopupMenuPropsProp,\n        classBase,\n        onClick,\n        segmented,\n      });\n\n    return (\n      <div\n        {...htmlAttributes}\n        {...rootProps}\n        className={cx(classBase, `${classBase}-${variant}`, className, {\n          [`${classBase}-disabled`]: disabled,\n          [`${classBase}-segmented`]: segmented,\n        })}\n        ref={useForkRef(forwardedRef, rootRef)}\n        data-showcase-center\n        tabIndex={-1}\n      >\n        <Button\n          {...ButtonProps}\n          className={`${classBase}-main`}\n          disabled={disabled}\n          ref={buttonRef}\n          variant={variant}\n        >\n          {children}\n        </Button>\n        <PopupMenu\n          {...PopupMenuProps}\n          className={`${classBase}-trigger`}\n          disabled={disabled}\n          icon={PopupMenuProps?.icon ?? \"chevron-down\"}\n          tabIndex={segmented ? 0 : -1}\n          variant={variant}\n        />\n      </div>\n    );\n  },\n);\n"],"names":["forwardRef","SplitButton","useWindow","useComponentCssInjection","splitButtonCss","ButtonProps","PopupMenuProps","useSplitButton","jsxs","useForkRef","jsx","Button","PopupMenu"],"mappings":";;;;;;;;;;;;AAoBA,MAAM,SAAY,GAAA,gBAAA;AAEX,MAAM,WAAc,GAAAA,gBAAA;AAAA,EACzB,SAASC,YACP,CAAA;AAAA,IACE,WAAa,EAAA,eAAA;AAAA,IACb,cAAgB,EAAA,kBAAA;AAAA,IAChB,QAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAW,GAAA,KAAA;AAAA,IACX,OAAA;AAAA,IACA,SAAY,GAAA,KAAA;AAAA,IACZ,OAAU,GAAA,SAAA;AAAA,IACV,GAAG;AAAA,KAEL,YACA,EAAA;AACA,IAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,kBAAA;AAAA,MACR,GAAK,EAAAC,aAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IAAM,MAAA,EAAE,WAAAC,EAAAA,YAAAA,EAAa,SAAW,EAAA,OAAA,EAAS,gBAAAC,eAAgB,EAAA,GAAG,SAAU,EAAA,GACpEC,6BAAe,CAAA;AAAA,MACb,WAAa,EAAA,eAAA;AAAA,MACb,cAAgB,EAAA,kBAAA;AAAA,MAChB,SAAA;AAAA,MACA,OAAA;AAAA,MACA;AAAA,KACD,CAAA;AAEH,IACE,uBAAAC,eAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACE,GAAG,cAAA;AAAA,QACH,GAAG,SAAA;AAAA,QACJ,SAAA,EAAW,GAAG,SAAW,EAAA,CAAA,EAAG,SAAS,CAAI,CAAA,EAAA,OAAO,IAAI,SAAW,EAAA;AAAA,UAC7D,CAAC,CAAA,EAAG,SAAS,CAAA,SAAA,CAAW,GAAG,QAAA;AAAA,UAC3B,CAAC,CAAA,EAAG,SAAS,CAAA,UAAA,CAAY,GAAG;AAAA,SAC7B,CAAA;AAAA,QACD,GAAA,EAAKC,eAAW,CAAA,YAAA,EAAc,OAAO,CAAA;AAAA,QACrC,sBAAoB,EAAA,IAAA;AAAA,QACpB,QAAU,EAAA,CAAA,CAAA;AAAA,QAEV,QAAA,EAAA;AAAA,0BAAAC,cAAA;AAAA,YAACC,WAAA;AAAA,YAAA;AAAA,cACE,GAAGN,YAAAA;AAAA,cACJ,SAAA,EAAW,GAAG,SAAS,CAAA,KAAA,CAAA;AAAA,cACvB,QAAA;AAAA,cACA,GAAK,EAAA,SAAA;AAAA,cACL,OAAA;AAAA,cAEC;AAAA;AAAA,WACH;AAAA,0BACAK,cAAA;AAAA,YAACE,mBAAA;AAAA,YAAA;AAAA,cACE,GAAGN,eAAAA;AAAA,cACJ,SAAA,EAAW,GAAG,SAAS,CAAA,QAAA,CAAA;AAAA,cACvB,QAAA;AAAA,cACA,IAAA,EAAMA,iBAAgB,IAAQ,IAAA,cAAA;AAAA,cAC9B,QAAA,EAAU,YAAY,CAAI,GAAA,CAAA,CAAA;AAAA,cAC1B;AAAA;AAAA;AACF;AAAA;AAAA,KACF;AAAA;AAGN;;;;"}
+{"version":3,"file":"SplitButton.js","sources":["../../src/split-button/SplitButton.tsx"],"sourcesContent":["import { PopupMenu, PopupMenuProps } from \"@vuu-ui/vuu-popups\";\nimport { Button, ButtonProps, useForkRef } from \"@salt-ds/core\";\nimport { forwardRef, HTMLAttributes } from \"react\";\nimport { useSplitButton } from \"./useSplitButton\";\nimport cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport splitButtonCss from \"./SplitButton.css\";\nimport { ContextMenuProvider } from \"@vuu-ui/vuu-context-menu\";\n\nexport interface SplitButtonProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"onClick\">,\n    Pick<ButtonProps, \"onClick\"> {\n  ButtonProps?: Partial<Omit<ButtonProps, \"onClick\" | \"variant\">>;\n  PopupMenuProps?: Partial<PopupMenuProps>;\n  disabled?: boolean;\n  segmented?: boolean;\n  variant?: ButtonProps[\"variant\"];\n}\n\nconst classBase = \"vuuSplitButton\";\n\nexport const SplitButton = forwardRef<HTMLDivElement, SplitButtonProps>(\n  function SplitButton(\n    {\n      ButtonProps: ButtonPropsProp,\n      PopupMenuProps: PopupMenuPropsProp,\n      children,\n      className,\n      disabled = false,\n      onClick,\n      segmented = false,\n      variant = \"primary\",\n      ...htmlAttributes\n    },\n    forwardedRef,\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"vuu-split-button\",\n      css: splitButtonCss,\n      window: targetWindow,\n    });\n\n    const { ButtonProps, buttonRef, rootRef, PopupMenuProps, ...rootProps } =\n      useSplitButton({\n        ButtonProps: ButtonPropsProp,\n        PopupMenuProps: PopupMenuPropsProp,\n        classBase,\n        onClick,\n        segmented,\n      });\n\n    return (\n      <ContextMenuProvider>\n        <div\n          {...htmlAttributes}\n          {...rootProps}\n          className={cx(classBase, `${classBase}-${variant}`, className, {\n            [`${classBase}-disabled`]: disabled,\n            [`${classBase}-segmented`]: segmented,\n          })}\n          ref={useForkRef(forwardedRef, rootRef)}\n          data-showcase-center\n          tabIndex={-1}\n        >\n          <Button\n            {...ButtonProps}\n            className={`${classBase}-main`}\n            disabled={disabled}\n            ref={buttonRef}\n            variant={variant}\n          >\n            {children}\n          </Button>\n          <PopupMenu\n            {...PopupMenuProps}\n            className={`${classBase}-trigger`}\n            disabled={disabled}\n            icon={PopupMenuProps?.icon ?? \"chevron-down\"}\n            tabIndex={segmented ? 0 : -1}\n            variant={variant}\n          />\n        </div>\n      </ContextMenuProvider>\n    );\n  },\n);\n"],"names":["forwardRef","SplitButton","useWindow","useComponentCssInjection","splitButtonCss","ButtonProps","PopupMenuProps","useSplitButton","ContextMenuProvider","jsxs","useForkRef","jsx","Button","PopupMenu"],"mappings":";;;;;;;;;;;;;AAqBA,MAAM,SAAY,GAAA,gBAAA;AAEX,MAAM,WAAc,GAAAA,gBAAA;AAAA,EACzB,SAASC,YACP,CAAA;AAAA,IACE,WAAa,EAAA,eAAA;AAAA,IACb,cAAgB,EAAA,kBAAA;AAAA,IAChB,QAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAW,GAAA,KAAA;AAAA,IACX,OAAA;AAAA,IACA,SAAY,GAAA,KAAA;AAAA,IACZ,OAAU,GAAA,SAAA;AAAA,IACV,GAAG;AAAA,KAEL,YACA,EAAA;AACA,IAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,kBAAA;AAAA,MACR,GAAK,EAAAC,aAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IAAM,MAAA,EAAE,WAAAC,EAAAA,YAAAA,EAAa,SAAW,EAAA,OAAA,EAAS,gBAAAC,eAAgB,EAAA,GAAG,SAAU,EAAA,GACpEC,6BAAe,CAAA;AAAA,MACb,WAAa,EAAA,eAAA;AAAA,MACb,cAAgB,EAAA,kBAAA;AAAA,MAChB,SAAA;AAAA,MACA,OAAA;AAAA,MACA;AAAA,KACD,CAAA;AAEH,IAAA,sCACGC,kCACC,EAAA,EAAA,QAAA,kBAAAC,eAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACE,GAAG,cAAA;AAAA,QACH,GAAG,SAAA;AAAA,QACJ,SAAA,EAAW,GAAG,SAAW,EAAA,CAAA,EAAG,SAAS,CAAI,CAAA,EAAA,OAAO,IAAI,SAAW,EAAA;AAAA,UAC7D,CAAC,CAAA,EAAG,SAAS,CAAA,SAAA,CAAW,GAAG,QAAA;AAAA,UAC3B,CAAC,CAAA,EAAG,SAAS,CAAA,UAAA,CAAY,GAAG;AAAA,SAC7B,CAAA;AAAA,QACD,GAAA,EAAKC,eAAW,CAAA,YAAA,EAAc,OAAO,CAAA;AAAA,QACrC,sBAAoB,EAAA,IAAA;AAAA,QACpB,QAAU,EAAA,CAAA,CAAA;AAAA,QAEV,QAAA,EAAA;AAAA,0BAAAC,cAAA;AAAA,YAACC,WAAA;AAAA,YAAA;AAAA,cACE,GAAGP,YAAAA;AAAA,cACJ,SAAA,EAAW,GAAG,SAAS,CAAA,KAAA,CAAA;AAAA,cACvB,QAAA;AAAA,cACA,GAAK,EAAA,SAAA;AAAA,cACL,OAAA;AAAA,cAEC;AAAA;AAAA,WACH;AAAA,0BACAM,cAAA;AAAA,YAACE,mBAAA;AAAA,YAAA;AAAA,cACE,GAAGP,eAAAA;AAAA,cACJ,SAAA,EAAW,GAAG,SAAS,CAAA,QAAA,CAAA;AAAA,cACvB,QAAA;AAAA,cACA,IAAA,EAAMA,iBAAgB,IAAQ,IAAA,cAAA;AAAA,cAC9B,QAAA,EAAU,YAAY,CAAI,GAAA,CAAA,CAAA;AAAA,cAC1B;AAAA;AAAA;AACF;AAAA;AAAA,KAEJ,EAAA,CAAA;AAAA;AAGN;;;;"}

package/cjs/tabstrip/Tab.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tab.js","sources":["../../src/tabstrip/Tab.tsx"],"sourcesContent":["// TODO close button needs to be a button. Hence tab needs to include 2 buttons\nimport { MenuActionHandler } from \"@vuu-ui/vuu-data-types\";\nimport { useForkRef } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport {\n  FocusEvent,\n  ForwardedRef,\n  forwardRef,\n  KeyboardEvent,\n  MouseEvent,\n  ReactElement,\n  useCallback,\n  useRef,\n} from \"react\";\nimport { EditableLabel, EditableLabelProps } from \"../editable-label\";\nimport { TabMenu } from \"./TabMenu\";\nimport { TabProps } from \"./TabsTypes\";\n\nimport tabCss from \"./Tab.css\";\n\nconst classBase = \"vuuTab\";\n\nconst noop = () => undefined;\n\nexport const Tab = forwardRef(function Tab(\n  {\n    ariaControls,\n    children,\n    className,\n    closeable = false,\n    dragging,\n    editable = false,\n    editing,\n    focusVisible,\n    index = -1,\n    label,\n    location,\n    onClick,\n    onClose,\n    onEnterEditMode = noop,\n    onExitEditMode = noop,\n    onFocus: onFocusProp,\n    onKeyUp,\n    onMenuAction,\n    onMenuClose,\n    orientation,\n    selected,\n    showMenuButton = closeable || editable || Boolean(location),\n    tabIndex,\n    ...props\n  }: TabProps,\n  ref: ForwardedRef<HTMLDivElement>,\n): ReactElement<TabProps> {\n  if (showMenuButton && typeof onMenuAction !== \"function\") {\n    throw Error(\"Tab onMenuAction must be provided if showMenuButton is set\");\n  }\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-tabstrip-tab\",\n    css: tabCss,\n    window: targetWindow,\n  });\n\n  const rootRef = useRef<HTMLDivElement>(null);\n  const editableRef = useRef<HTMLDivElement>(null);\n  const setForkRef = useForkRef(ref, rootRef);\n  const handleClick = useCallback(\n    (e: MouseEvent<HTMLElement>) => {\n      if (!editing) {\n        e.preventDefault();\n        onClick?.(e, index);\n      }\n    },\n    [editing, index, onClick],\n  );\n\n  const handleOnExitEditMode: EditableLabelProps[\"onExitEditMode\"] = (\n    originalValue = \"\",\n    editedValue = \"\",\n    allowDeactivation = true,\n  ) => onExitEditMode(originalValue, editedValue, allowDeactivation, index);\n\n  const handleKeyUp = (e: KeyboardEvent) => {\n    switch (e.key) {\n      case \"Backspace\":\n      case \"Delete\":\n        if (closeable) {\n          e.stopPropagation();\n          onClose && onClose(index);\n        }\n        break;\n      default:\n        onKeyUp && onKeyUp(e, index);\n    }\n  };\n\n  const getLabel = () => {\n    if (editable) {\n      return (\n        <EditableLabel\n          data-embedded\n          editing={editing}\n          defaultValue={label}\n          // Create a fresh instance after each edit, so it can be uncontrolled ...\n          key={label}\n          onEnterEditMode={onEnterEditMode}\n          onExitEditMode={handleOnExitEditMode}\n          ref={editableRef}\n        />\n      );\n    } else {\n      return label;\n    }\n  };\n\n  const handleFocus = (evt: FocusEvent<HTMLElement>) => {\n    if (editableRef.current) {\n      const editable = editableRef.current as HTMLElement;\n      const input = editable.querySelector(\n        \".vuuEditableLabel-input\",\n      ) as HTMLInputElement;\n      input?.focus();\n    }\n    onFocusProp?.(evt);\n  };\n\n  return (\n    <div\n      {...props}\n      aria-controls={ariaControls}\n      aria-label={label}\n      aria-selected={selected}\n      className={cx(classBase, className, {\n        [`${classBase}-closeable`]: closeable,\n        \"vuuDraggable-dragAway\": dragging,\n        [`${classBase}-editing`]: editing,\n        [`${classBase}-selected`]: selected || undefined,\n        [`${classBase}-vertical`]: orientation === \"vertical\",\n        [`vuuFocusVisible`]: focusVisible,\n      })}\n      onClick={handleClick}\n      onFocus={handleFocus}\n      onKeyUp={handleKeyUp}\n      ref={setForkRef}\n      role=\"tab\"\n      tabIndex={tabIndex}\n    >\n      <div className={`${classBase}-main`}>\n        <span\n          className={`${classBase}-text`}\n          // data-text is important, it determines the width of the tab. A pseudo\n          // element assigns data-text as content. This is styled as selected tab\n          // text. That means width of tab always corresponds to its selected state,\n          // so tabs do not change size when selected (ie when the text is bolded).\n          // Do not include if we have editable content, EditableLabel will determine\n          // the width\n          data-text={editable ? undefined : label}\n        >\n          {children ?? getLabel()}\n        </span>\n      </div>\n      {showMenuButton ? (\n        <TabMenu\n          allowClose={closeable}\n          allowRename={editable}\n          controlledComponentId={ariaControls}\n          controlledComponentTitle={label}\n          location={location}\n          onMenuAction={onMenuAction as MenuActionHandler}\n          onMenuClose={onMenuClose}\n          index={index}\n        />\n      ) : null}\n    </div>\n  );\n});\n"],"names":["forwardRef","Tab","useWindow","useComponentCssInjection","tabCss","useRef","useForkRef","useCallback","jsx","EditableLabel","editable","jsxs","TabMenu"],"mappings":"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"}
+{"version":3,"file":"Tab.js","sources":["../../src/tabstrip/Tab.tsx"],"sourcesContent":["// TODO close button needs to be a button. Hence tab needs to include 2 buttons\nimport { useForkRef } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport {\n  FocusEvent,\n  ForwardedRef,\n  forwardRef,\n  KeyboardEvent,\n  MouseEvent,\n  ReactElement,\n  useCallback,\n  useRef,\n} from \"react\";\nimport { EditableLabel, EditableLabelProps } from \"../editable-label\";\nimport { TabMenu } from \"./TabMenu\";\nimport { TabProps } from \"./TabsTypes\";\n\nimport tabCss from \"./Tab.css\";\nimport { MenuActionHandler } from \"@vuu-ui/vuu-context-menu\";\n\nconst classBase = \"vuuTab\";\n\nconst noop = () => undefined;\n\nexport const Tab = forwardRef(function Tab(\n  {\n    ariaControls,\n    children,\n    className,\n    closeable = false,\n    dragging,\n    editable = false,\n    editing,\n    focusVisible,\n    index = -1,\n    label,\n    location,\n    onClick,\n    onClose,\n    onEnterEditMode = noop,\n    onExitEditMode = noop,\n    onFocus: onFocusProp,\n    onKeyUp,\n    onMenuAction,\n    onMenuClose,\n    orientation,\n    selected,\n    showMenuButton = closeable || editable || Boolean(location),\n    tabIndex,\n    ...props\n  }: TabProps,\n  ref: ForwardedRef<HTMLDivElement>,\n): ReactElement<TabProps> {\n  if (showMenuButton && typeof onMenuAction !== \"function\") {\n    throw Error(\"Tab onMenuAction must be provided if showMenuButton is set\");\n  }\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-tabstrip-tab\",\n    css: tabCss,\n    window: targetWindow,\n  });\n\n  const rootRef = useRef<HTMLDivElement>(null);\n  const editableRef = useRef<HTMLDivElement>(null);\n  const setForkRef = useForkRef(ref, rootRef);\n  const handleClick = useCallback(\n    (e: MouseEvent<HTMLElement>) => {\n      if (!editing) {\n        e.preventDefault();\n        onClick?.(e, index);\n      }\n    },\n    [editing, index, onClick],\n  );\n\n  const handleOnExitEditMode: EditableLabelProps[\"onExitEditMode\"] = (\n    originalValue = \"\",\n    editedValue = \"\",\n    allowDeactivation = true,\n  ) => onExitEditMode(originalValue, editedValue, allowDeactivation, index);\n\n  const handleKeyUp = (e: KeyboardEvent) => {\n    switch (e.key) {\n      case \"Backspace\":\n      case \"Delete\":\n        if (closeable) {\n          e.stopPropagation();\n          onClose && onClose(index);\n        }\n        break;\n      default:\n        onKeyUp && onKeyUp(e, index);\n    }\n  };\n\n  const getLabel = () => {\n    if (editable) {\n      return (\n        <EditableLabel\n          data-embedded\n          editing={editing}\n          defaultValue={label}\n          // Create a fresh instance after each edit, so it can be uncontrolled ...\n          key={label}\n          onEnterEditMode={onEnterEditMode}\n          onExitEditMode={handleOnExitEditMode}\n          ref={editableRef}\n        />\n      );\n    } else {\n      return label;\n    }\n  };\n\n  const handleFocus = (evt: FocusEvent<HTMLElement>) => {\n    if (editableRef.current) {\n      const editable = editableRef.current as HTMLElement;\n      const input = editable.querySelector(\n        \".vuuEditableLabel-input\",\n      ) as HTMLInputElement;\n      input?.focus();\n    }\n    onFocusProp?.(evt);\n  };\n\n  return (\n    <div\n      {...props}\n      aria-controls={ariaControls}\n      aria-label={label}\n      aria-selected={selected}\n      className={cx(classBase, className, {\n        [`${classBase}-closeable`]: closeable,\n        \"vuuDraggable-dragAway\": dragging,\n        [`${classBase}-editing`]: editing,\n        [`${classBase}-selected`]: selected || undefined,\n        [`${classBase}-vertical`]: orientation === \"vertical\",\n        [`vuuFocusVisible`]: focusVisible,\n      })}\n      onClick={handleClick}\n      onFocus={handleFocus}\n      onKeyUp={handleKeyUp}\n      ref={setForkRef}\n      role=\"tab\"\n      tabIndex={tabIndex}\n    >\n      <div className={`${classBase}-main`}>\n        <span\n          className={`${classBase}-text`}\n          // data-text is important, it determines the width of the tab. A pseudo\n          // element assigns data-text as content. This is styled as selected tab\n          // text. That means width of tab always corresponds to its selected state,\n          // so tabs do not change size when selected (ie when the text is bolded).\n          // Do not include if we have editable content, EditableLabel will determine\n          // the width\n          data-text={editable ? undefined : label}\n        >\n          {children ?? getLabel()}\n        </span>\n      </div>\n      {showMenuButton ? (\n        <TabMenu\n          allowClose={closeable}\n          allowRename={editable}\n          controlledComponentId={ariaControls}\n          controlledComponentTitle={label}\n          location={location}\n          onMenuAction={onMenuAction as MenuActionHandler}\n          onMenuClose={onMenuClose}\n          index={index}\n        />\n      ) : null}\n    </div>\n  );\n});\n"],"names":["forwardRef","Tab","useWindow","useComponentCssInjection","tabCss","useRef","useForkRef","useCallback","jsx","EditableLabel","editable","jsxs","TabMenu"],"mappings":"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"}

package/cjs/tabstrip/TabMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabMenu.js","sources":["../../src/tabstrip/TabMenu.tsx"],"sourcesContent":["import {\n  ContextMenuItemDescriptor,\n  MenuActionHandler,\n  MenuBuilder,\n} from \"@vuu-ui/vuu-data-types\";\nimport { PopupMenu } from \"@vuu-ui/vuu-popups\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport { useMemo } from \"react\";\nimport { MenuOptions, closeCommand, renameCommand } from \"./TabMenuOptions\";\n\nimport tabMenuCss from \"./TabMenu.css\";\n\nconst classBase = \"vuuTabMenu\";\n\nexport interface TabMenuProps {\n  allowClose: boolean;\n  allowRename: boolean;\n  index: number;\n  location?: string;\n  onMenuAction: MenuActionHandler;\n  onMenuClose?: () => void;\n  /**\n   * The id of associated component, if available\n   */\n  controlledComponentId?: string;\n  /**\n   * The label of Tab, if available\n   */\n  controlledComponentTitle?: string;\n}\n\nexport const TabMenu = ({\n  allowClose,\n  allowRename,\n  controlledComponentId,\n  controlledComponentTitle,\n  location,\n  onMenuAction,\n  onMenuClose,\n  index,\n}: TabMenuProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-tab-menu\",\n    css: tabMenuCss,\n    window: targetWindow,\n  });\n\n  const [menuBuilder, menuOptions] = useMemo(\n    (): [MenuBuilder, MenuOptions] => [\n      (_location, options) => {\n        const menuItems: ContextMenuItemDescriptor[] = [];\n        if (allowRename) {\n          menuItems.push(renameCommand(options as MenuOptions));\n        }\n        if (allowClose) {\n          menuItems.push(closeCommand(options as MenuOptions));\n        }\n        return menuItems;\n      },\n      {\n        controlledComponentId,\n        controlledComponentTitle,\n        tabIndex: index,\n      },\n    ],\n    [\n      allowClose,\n      allowRename,\n      controlledComponentId,\n      controlledComponentTitle,\n      index,\n    ],\n  );\n\n  return (\n    <PopupMenu\n      aria-label=\"context menu\"\n      className={classBase}\n      data-embedded\n      menuBuilder={menuBuilder}\n      menuActionHandler={onMenuAction}\n      menuLocation={cx(\"tab\", location)}\n      menuOptions={menuOptions}\n      onMenuClose={onMenuClose}\n      tabIndex={-1}\n    />\n  );\n};\n"],"names":["useWindow","useComponentCssInjection","tabMenuCss","useMemo","renameCommand","closeCommand","jsx","PopupMenu"],"mappings":";;;;;;;;;;;AAcA,MAAM,SAAY,GAAA,YAAA;AAmBX,MAAM,UAAU,CAAC;AAAA,EACtB,UAAA;AAAA,EACA,WAAA;AAAA,EACA,qBAAA;AAAA,EACA,wBAAA;AAAA,EACA,QAAA;AAAA,EACA,YAAA;AAAA,EACA,WAAA;AAAA,EACA;AACF,CAAoB,KAAA;AAClB,EAAA,MAAM,eAAeA,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,cAAA;AAAA,IACR,GAAK,EAAAC,SAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAM,MAAA,CAAC,WAAa,EAAA,WAAW,CAAI,GAAAC,aAAA;AAAA,IACjC,MAAkC;AAAA,MAChC,CAAC,WAAW,OAAY,KAAA;AACtB,QAAA,MAAM,YAAyC,EAAC;AAChD,QAAA,IAAI,WAAa,EAAA;AACf,UAAU,SAAA,CAAA,IAAA,CAAKC,4BAAc,CAAA,OAAsB,CAAC,CAAA;AAAA;AAEtD,QAAA,IAAI,UAAY,EAAA;AACd,UAAU,SAAA,CAAA,IAAA,CAAKC,2BAAa,CAAA,OAAsB,CAAC,CAAA;AAAA;AAErD,QAAO,OAAA,SAAA;AAAA,OACT;AAAA,MACA;AAAA,QACE,qBAAA;AAAA,QACA,wBAAA;AAAA,QACA,QAAU,EAAA;AAAA;AACZ,KACF;AAAA,IACA;AAAA,MACE,UAAA;AAAA,MACA,WAAA;AAAA,MACA,qBAAA;AAAA,MACA,wBAAA;AAAA,MACA;AAAA;AACF,GACF;AAEA,EACE,uBAAAC,cAAA;AAAA,IAACC,mBAAA;AAAA,IAAA;AAAA,MACC,YAAW,EAAA,cAAA;AAAA,MACX,SAAW,EAAA,SAAA;AAAA,MACX,eAAa,EAAA,IAAA;AAAA,MACb,WAAA;AAAA,MACA,iBAAmB,EAAA,YAAA;AAAA,MACnB,YAAA,EAAc,EAAG,CAAA,KAAA,EAAO,QAAQ,CAAA;AAAA,MAChC,WAAA;AAAA,MACA,WAAA;AAAA,MACA,QAAU,EAAA,CAAA;AAAA;AAAA,GACZ;AAEJ;;;;"}
+{"version":3,"file":"TabMenu.js","sources":["../../src/tabstrip/TabMenu.tsx"],"sourcesContent":["import { PopupMenu } from \"@vuu-ui/vuu-popups\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport { useMemo } from \"react\";\nimport { MenuOptions, closeCommand, renameCommand } from \"./TabMenuOptions\";\n\nimport tabMenuCss from \"./TabMenu.css\";\nimport {\n  ContextMenuItemDescriptor,\n  MenuActionHandler,\n  MenuBuilder,\n} from \"@vuu-ui/vuu-context-menu\";\n\nconst classBase = \"vuuTabMenu\";\n\nexport type TabContextMenuOptions = {\n  controlledComponentId?: string;\n  controlledComponentTitle?: string;\n  tabIndex: number;\n};\n\nexport interface TabMenuProps {\n  allowClose: boolean;\n  allowRename: boolean;\n  index: number;\n  location?: string;\n  onMenuAction: MenuActionHandler;\n  onMenuClose?: () => void;\n  /**\n   * The id of associated component, if available\n   */\n  controlledComponentId?: string;\n  /**\n   * The label of Tab, if available\n   */\n  controlledComponentTitle?: string;\n}\n\nexport const TabMenu = ({\n  allowClose,\n  allowRename,\n  controlledComponentId,\n  controlledComponentTitle,\n  location,\n  onMenuAction,\n  onMenuClose,\n  index,\n}: TabMenuProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-tab-menu\",\n    css: tabMenuCss,\n    window: targetWindow,\n  });\n\n  const [menuBuilder, menuOptions] = useMemo(\n    (): [MenuBuilder, TabContextMenuOptions] => [\n      (_location, options) => {\n        const menuItems: ContextMenuItemDescriptor[] = [];\n        if (allowRename) {\n          menuItems.push(renameCommand(options as MenuOptions));\n        }\n        if (allowClose) {\n          menuItems.push(closeCommand(options as MenuOptions));\n        }\n        return menuItems;\n      },\n      {\n        controlledComponentId,\n        controlledComponentTitle,\n        tabIndex: index,\n      },\n    ],\n    [\n      allowClose,\n      allowRename,\n      controlledComponentId,\n      controlledComponentTitle,\n      index,\n    ],\n  );\n\n  return (\n    <PopupMenu\n      aria-label=\"context menu\"\n      className={classBase}\n      data-embedded\n      menuBuilder={menuBuilder}\n      menuActionHandler={onMenuAction}\n      menuLocation={cx(\"tab\", location)}\n      menuOptions={menuOptions}\n      onMenuClose={onMenuClose}\n      tabIndex={-1}\n    />\n  );\n};\n"],"names":["useWindow","useComponentCssInjection","tabMenuCss","useMemo","renameCommand","closeCommand","jsx","PopupMenu"],"mappings":";;;;;;;;;;;AAcA,MAAM,SAAY,GAAA,YAAA;AAyBX,MAAM,UAAU,CAAC;AAAA,EACtB,UAAA;AAAA,EACA,WAAA;AAAA,EACA,qBAAA;AAAA,EACA,wBAAA;AAAA,EACA,QAAA;AAAA,EACA,YAAA;AAAA,EACA,WAAA;AAAA,EACA;AACF,CAAoB,KAAA;AAClB,EAAA,MAAM,eAAeA,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,cAAA;AAAA,IACR,GAAK,EAAAC,SAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAM,MAAA,CAAC,WAAa,EAAA,WAAW,CAAI,GAAAC,aAAA;AAAA,IACjC,MAA4C;AAAA,MAC1C,CAAC,WAAW,OAAY,KAAA;AACtB,QAAA,MAAM,YAAyC,EAAC;AAChD,QAAA,IAAI,WAAa,EAAA;AACf,UAAU,SAAA,CAAA,IAAA,CAAKC,4BAAc,CAAA,OAAsB,CAAC,CAAA;AAAA;AAEtD,QAAA,IAAI,UAAY,EAAA;AACd,UAAU,SAAA,CAAA,IAAA,CAAKC,2BAAa,CAAA,OAAsB,CAAC,CAAA;AAAA;AAErD,QAAO,OAAA,SAAA;AAAA,OACT;AAAA,MACA;AAAA,QACE,qBAAA;AAAA,QACA,wBAAA;AAAA,QACA,QAAU,EAAA;AAAA;AACZ,KACF;AAAA,IACA;AAAA,MACE,UAAA;AAAA,MACA,WAAA;AAAA,MACA,qBAAA;AAAA,MACA,wBAAA;AAAA,MACA;AAAA;AACF,GACF;AAEA,EACE,uBAAAC,cAAA;AAAA,IAACC,mBAAA;AAAA,IAAA;AAAA,MACC,YAAW,EAAA,cAAA;AAAA,MACX,SAAW,EAAA,SAAA;AAAA,MACX,eAAa,EAAA,IAAA;AAAA,MACb,WAAA;AAAA,MACA,iBAAmB,EAAA,YAAA;AAAA,MACnB,YAAA,EAAc,EAAG,CAAA,KAAA,EAAO,QAAQ,CAAA;AAAA,MAChC,WAAA;AAAA,MACA,WAAA;AAAA,MACA,QAAU,EAAA,CAAA;AAAA;AAAA,GACZ;AAEJ;;;;"}

package/cjs/tabstrip/TabMenuOptions.js

@@ -4,13 +4,13 @@ const isTabMenuOptions = (options) => typeof options === "object" && options !==
 const closeCommand = (options) => ({
   label: `Close`,
   location: "tab",
-  action: `close-tab`,
+  id: `close-tab`,
   options
 });
 const renameCommand = (options) => ({
   label: `Rename`,
   location: "tab",
-  action: `rename-tab`,
+  id: `rename-tab`,
   options
 });
 

package/cjs/tabstrip/TabMenuOptions.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabMenuOptions.js","sources":["../../src/tabstrip/TabMenuOptions.ts"],"sourcesContent":["import { ContextMenuItemDescriptor } from \"@vuu-ui/vuu-data-types\";\n\nexport type MenuOptions = { [key: string]: unknown };\n\nexport interface TabMenuOptions {\n  tabIndex: number;\n}\n\nexport const isTabMenuOptions = (options: unknown): options is TabMenuOptions =>\n  typeof options === \"object\" &&\n  options !== null &&\n  \"tabIndex\" in options &&\n  typeof options.tabIndex === \"number\";\n\nexport const closeCommand = (options?: MenuOptions) =>\n  ({\n    label: `Close`,\n    location: \"tab\",\n    action: `close-tab`,\n    options,\n  }) as ContextMenuItemDescriptor;\n\nexport const renameCommand = (options?: MenuOptions) =>\n  ({\n    label: `Rename`,\n    location: \"tab\",\n    action: `rename-tab`,\n    options,\n  }) as ContextMenuItemDescriptor;\n"],"names":[],"mappings":";;AAQO,MAAM,gBAAmB,GAAA,CAAC,OAC/B,KAAA,OAAO,OAAY,KAAA,QAAA,IACnB,OAAY,KAAA,IAAA,IACZ,UAAc,IAAA,OAAA,IACd,OAAO,OAAA,CAAQ,QAAa,KAAA;AAEjB,MAAA,YAAA,GAAe,CAAC,OAC1B,MAAA;AAAA,EACC,KAAO,EAAA,CAAA,KAAA,CAAA;AAAA,EACP,QAAU,EAAA,KAAA;AAAA,EACV,MAAQ,EAAA,CAAA,SAAA,CAAA;AAAA,EACR;AACF,CAAA;AAEW,MAAA,aAAA,GAAgB,CAAC,OAC3B,MAAA;AAAA,EACC,KAAO,EAAA,CAAA,MAAA,CAAA;AAAA,EACP,QAAU,EAAA,KAAA;AAAA,EACV,MAAQ,EAAA,CAAA,UAAA,CAAA;AAAA,EACR;AACF,CAAA;;;;;;"}
+{"version":3,"file":"TabMenuOptions.js","sources":["../../src/tabstrip/TabMenuOptions.ts"],"sourcesContent":["import { ContextMenuItemDescriptor } from \"@vuu-ui/vuu-context-menu\";\n\nexport type MenuOptions = { [key: string]: unknown };\n\nexport interface TabMenuOptions {\n  tabIndex: number;\n}\n\nexport const isTabMenuOptions = (options: unknown): options is TabMenuOptions =>\n  typeof options === \"object\" &&\n  options !== null &&\n  \"tabIndex\" in options &&\n  typeof options.tabIndex === \"number\";\n\nexport const closeCommand = (options?: MenuOptions) =>\n  ({\n    label: `Close`,\n    location: \"tab\",\n    id: `close-tab`,\n    options,\n  }) as ContextMenuItemDescriptor;\n\nexport const renameCommand = (options?: MenuOptions) =>\n  ({\n    label: `Rename`,\n    location: \"tab\",\n    id: `rename-tab`,\n    options,\n  }) as ContextMenuItemDescriptor;\n"],"names":[],"mappings":";;AAQO,MAAM,gBAAmB,GAAA,CAAC,OAC/B,KAAA,OAAO,OAAY,KAAA,QAAA,IACnB,OAAY,KAAA,IAAA,IACZ,UAAc,IAAA,OAAA,IACd,OAAO,OAAA,CAAQ,QAAa,KAAA;AAEjB,MAAA,YAAA,GAAe,CAAC,OAC1B,MAAA;AAAA,EACC,KAAO,EAAA,CAAA,KAAA,CAAA;AAAA,EACP,QAAU,EAAA,KAAA;AAAA,EACV,EAAI,EAAA,CAAA,SAAA,CAAA;AAAA,EACJ;AACF,CAAA;AAEW,MAAA,aAAA,GAAgB,CAAC,OAC3B,MAAA;AAAA,EACC,KAAO,EAAA,CAAA,MAAA,CAAA;AAAA,EACP,QAAU,EAAA,KAAA;AAAA,EACV,EAAI,EAAA,CAAA,UAAA,CAAA;AAAA,EACJ;AACF,CAAA;;;;;;"}

package/cjs/tabstrip/useTabstrip.js

@@ -156,15 +156,15 @@ const useTabstrip = ({
     [editTab]
   );
   const handleTabMenuAction = React.useCallback(
-    (action) => {
-      if (TabMenuOptions.isTabMenuOptions(action.options)) {
-        switch (action.menuId) {
+    (menuItemId, options) => {
+      if (TabMenuOptions.isTabMenuOptions(options)) {
+        switch (menuItemId) {
           case "close-tab":
-            return handleCloseTabFromMenu(action.options.tabIndex);
+            return handleCloseTabFromMenu(options.tabIndex);
           case "rename-tab":
-            return handleRenameTabFromMenu(action.options.tabIndex);
+            return handleRenameTabFromMenu(options.tabIndex);
           default:
-            console.log(`tab menu action ${action.menuId}`);
+            console.log(`tab menu action ${menuItemId}`);
         }
       }
       return false;

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 { 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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"}
+{"version":3,"file":"useTabstrip.js","sources":["../../src/tabstrip/useTabstrip.ts"],"sourcesContent":["import 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\";\nimport { MenuActionHandler } from \"@vuu-ui/vuu-context-menu\";\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    (menuItemId, options) => {\n      if (isTabMenuOptions(options)) {\n        switch (menuItemId) {\n          case \"close-tab\":\n            return handleCloseTabFromMenu(options.tabIndex);\n          case \"rename-tab\":\n            return handleRenameTabFromMenu(options.tabIndex);\n          default:\n            console.log(`tab menu action ${menuItemId}`);\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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"}