@expcat/tigercat-react 2.1.2 → 2.1.4

package/dist/chunk-73OFTRG5.mjs

@@ -0,0 +1,550 @@
+import {
+  Calendar
+} from "./chunk-IR45LOEZ.mjs";
+import {
+  useInputGroupContext
+} from "./chunk-2AVQQGL2.mjs";
+import {
+  useFormItemControlContext
+} from "./chunk-F6T3OLTQ.mjs";
+import {
+  useControlledState
+} from "./chunk-UJTAHHQT.mjs";
+import {
+  renderOverlayPortal,
+  useAnchoredOverlay,
+  useFocusTrap
+} from "./chunk-OU2AV7DY.mjs";
+import {
+  useTigerConfig
+} from "./chunk-RUIFGSVN.mjs";
+
+// src/components/DatePicker.tsx
+import { forwardRef, useEffect as useEffect2, useImperativeHandle } from "react";
+import {
+  calendarSolidIcon20PathD,
+  classNames,
+  closeSolidIcon20PathD,
+  datePickerFooterButtonClasses,
+  datePickerFooterClasses,
+  datePickerPanelClasses,
+  datePickerSheetScrimClasses,
+  datePickerShortcutButtonClasses,
+  datePickerShortcutListClasses,
+  getInputClearButtonClasses,
+  getInputPasswordToggleClasses,
+  icon20ViewBox
+} from "@expcat/tigercat-core";
+
+// src/components/DatePicker/state.ts
+import { useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
+import {
+  SHAKE_CLASS,
+  TIGER_CHROME_ATTR,
+  coerceDatePickerRange,
+  coerceDatePickerSingle,
+  commitDatePickerDay,
+  commitDatePickerToday,
+  emptyDatePickerValue,
+  formatDatePickerDisplay,
+  formDatePickerValue,
+  getDatePickerLabels,
+  getDatePickerLocaleCode,
+  getInputFieldClasses,
+  getInputWrapperClasses,
+  getLocaleDirection,
+  getWeekStartsOn,
+  isDatePickerValueEmpty,
+  mergeAriaDescribedBy,
+  mergeTigerLocale,
+  parseDatePickerShortcut,
+  parseTypedDatePickerValue,
+  resolveDatePickerDisabled,
+  resolveInputTrailingLayout,
+  resolveReadOnlyFlag,
+  runShakeAnimation,
+  toCalendarDate
+} from "@expcat/tigercat-core";
+
+// src/components/DatePicker/types.ts
+var isRangeDatePicker = (props) => props.range === true;
+
+// src/components/DatePicker/state.ts
+function useDatePickerController(props) {
+  const isRangeMode = isRangeDatePicker(props);
+  const {
+    size = "md",
+    disabled = false,
+    readonly: readonlyProp,
+    required = false,
+    clearable = true,
+    format = "yyyy-MM-dd",
+    open,
+    defaultOpen = false,
+    onOpenChange,
+    status: statusProp,
+    name,
+    id,
+    locale,
+    labels: labelsOverride,
+    className,
+    onClear,
+    onBlur
+  } = props;
+  const isReadOnly = resolveReadOnlyFlag(readonlyProp, props.readOnly);
+  const config = useTigerConfig();
+  const inputGroup = useInputGroupContext();
+  const formItemControl = useFormItemControlContext();
+  const inGroup = inputGroup != null;
+  const effectiveSize = size ?? inputGroup?.size ?? "md";
+  const effectiveDisabled = Boolean(disabled || formItemControl?.disabled);
+  const status = statusProp ?? formItemControl?.status ?? "default";
+  const shakeTrigger = formItemControl?.shakeTrigger;
+  const effectiveId = id ?? formItemControl?.id;
+  const effectiveName = name ?? formItemControl?.name;
+  const describedBy = mergeAriaDescribedBy(
+    typeof props["aria-describedby"] === "string" ? props["aria-describedby"] : void 0,
+    formItemControl?.describedBy
+  );
+  const labelledby = typeof props["aria-labelledby"] === "string" && props["aria-labelledby"].trim() ? props["aria-labelledby"] : formItemControl?.labelId;
+  const ariaLabel = typeof props["aria-label"] === "string" && props["aria-label"].trim() ? props["aria-label"] : void 0;
+  const mergedLocale = useMemo(
+    () => mergeTigerLocale(config.locale, locale),
+    [config.locale, locale]
+  );
+  const localeCode = getDatePickerLocaleCode(mergedLocale);
+  const labels = useMemo(
+    () => getDatePickerLabels(mergedLocale, labelsOverride),
+    [mergedLocale, labelsOverride]
+  );
+  const weekStartsOn = props.weekStartsOn ?? getWeekStartsOn(localeCode);
+  const dir = getLocaleDirection(mergedLocale);
+  const parsedValue = useMemo(() => {
+    if (isRangeMode) {
+      if (props.value === void 0) {
+        return coerceDatePickerRange(formItemControl?.value);
+      }
+      return coerceDatePickerRange(props.value);
+    }
+    if (props.value === void 0) {
+      return coerceDatePickerSingle(formItemControl?.value);
+    }
+    return coerceDatePickerSingle(props.value);
+  }, [formItemControl?.value, isRangeMode, props.value]);
+  const parsedDefault = useMemo(
+    () => isRangeMode ? coerceDatePickerRange(props.defaultValue) : coerceDatePickerSingle(props.defaultValue),
+    [isRangeMode, props.defaultValue]
+  );
+  const [committed, setCommitted] = useControlledState({
+    value: props.value !== void 0 || formItemControl?.value !== void 0 ? parsedValue : void 0,
+    defaultValue: parsedDefault ?? emptyDatePickerValue(isRangeMode),
+    onChange: (next) => {
+      if (isRangeMode) {
+        ;
+        props.onChange?.(
+          next
+        );
+      } else {
+        ;
+        props.onChange?.(next);
+      }
+      formItemControl?.onChange?.(formDatePickerValue(isRangeMode, next, null));
+    }
+  });
+  const [isOpen, setOpen] = useControlledState({
+    value: open,
+    defaultValue: defaultOpen,
+    onChange: onOpenChange
+  });
+  const [previewRange, setPreviewRange] = useState(null);
+  const [draftText, setDraftText] = useState(null);
+  const displaySource = isRangeMode ? previewRange ?? committed : committed;
+  const displayValue = draftText ?? formatDatePickerDisplay(isRangeMode, displaySource, format, localeCode);
+  const placeholder = props.placeholder ?? (isRangeMode ? labels.rangePlaceholder : labels.placeholder);
+  const minDate = useMemo(() => toCalendarDate(props.minDate ?? null), [props.minDate]);
+  const maxDate = useMemo(() => toCalendarDate(props.maxDate ?? null), [props.maxDate]);
+  const now = props.now;
+  const calendarValue = isRangeMode ? previewRange?.[0] ?? committed[0] ?? null : committed;
+  const rangeHighlight = isRangeMode ? previewRange ?? committed : void 0;
+  const rangeSelectingEnd = Boolean(
+    isRangeMode && previewRange && previewRange[0] && !previewRange[1]
+  );
+  const isDateDisabled = useCallback(
+    (date) => resolveDatePickerDisabled(date, {
+      minDate,
+      maxDate,
+      disabledDate: props.disabledDate,
+      rangeStart: previewRange?.[0] ?? null,
+      rangeSelectingEnd
+    }),
+    [minDate, maxDate, previewRange, props.disabledDate, rangeSelectingEnd]
+  );
+  const showClear = Boolean(
+    clearable && !effectiveDisabled && !isReadOnly && !isDatePickerValueEmpty(isRangeMode, committed)
+  );
+  const trailing = resolveInputTrailingLayout({
+    clearable,
+    disabled: effectiveDisabled,
+    readOnly: isReadOnly,
+    valueLength: showClear ? 1 : 0,
+    hasCustomSuffix: true
+  });
+  const rootRef = useRef(null);
+  const inputRef = useRef(null);
+  const panelRef = useRef(null);
+  const inputWrapperRef = useRef(null);
+  const instanceId = useId();
+  const panelId = `tiger-datepicker-panel-${instanceId}`;
+  const mountedRef = useRef(false);
+  useEffect(() => {
+    if (!mountedRef.current) {
+      mountedRef.current = true;
+      return;
+    }
+    if (status === "error") runShakeAnimation(rootRef.current);
+  }, [status, shakeTrigger]);
+  const setOpenSafe = useCallback(
+    (next) => {
+      if (effectiveDisabled || isReadOnly) return;
+      setOpen(next);
+      if (!next) setPreviewRange(null);
+    },
+    [effectiveDisabled, isReadOnly, setOpen]
+  );
+  const commit = useCallback(
+    (next, preview) => {
+      setCommitted(next);
+      setPreviewRange(preview);
+      setDraftText(null);
+    },
+    [setCommitted]
+  );
+  const selectDay = useCallback(
+    (date) => {
+      const result = commitDatePickerDay({
+        range: isRangeMode,
+        picked: date,
+        committed,
+        preview: previewRange
+      });
+      commit(result.nextCommitted, result.nextPreview);
+      if (result.close) setOpenSafe(false);
+    },
+    [commit, committed, isRangeMode, previewRange, setOpenSafe]
+  );
+  const selectToday = useCallback(() => {
+    const today = now ?? /* @__PURE__ */ new Date();
+    if (isDateDisabled(today)) return;
+    const result = commitDatePickerToday(isRangeMode, today);
+    commit(result.nextCommitted, null);
+    if (result.close) setOpenSafe(false);
+  }, [commit, isDateDisabled, isRangeMode, now, setOpenSafe]);
+  const applyShortcut = useCallback(
+    (shortcut) => {
+      const parsed = parseDatePickerShortcut(shortcut, isRangeMode);
+      if (parsed == null) return;
+      commit(parsed, null);
+      if (!isRangeMode) setOpenSafe(false);
+    },
+    [commit, isRangeMode, setOpenSafe]
+  );
+  const clearValue = useCallback(() => {
+    commit(emptyDatePickerValue(isRangeMode), null);
+    onClear?.();
+    inputRef.current?.focus();
+  }, [commit, isRangeMode, onClear]);
+  const confirmOpen = useCallback(() => {
+    setOpenSafe(false);
+  }, [setOpenSafe]);
+  const parseDraft = useCallback(() => {
+    if (draftText == null) return;
+    const parsed = parseTypedDatePickerValue(draftText, format, isRangeMode);
+    if (isRangeMode) {
+      const tuple = parsed ?? [null, null];
+      commit(tuple, null);
+    } else {
+      commit(parsed ?? null, null);
+    }
+  }, [commit, draftText, format, isRangeMode]);
+  const handleFocusOut = (event) => {
+    const next = event.relatedTarget;
+    if (rootRef.current && next && rootRef.current.contains(next) || panelRef.current && next && panelRef.current.contains(next)) {
+      return;
+    }
+    parseDraft();
+    formItemControl?.onBlur?.();
+    onBlur?.(event);
+  };
+  const handleInputKeyDown = (event) => {
+    if (effectiveDisabled || isReadOnly) return;
+    if (event.key === "ArrowDown") {
+      event.preventDefault();
+      setOpenSafe(true);
+      return;
+    }
+    if (event.key === "Enter") {
+      event.preventDefault();
+      if (isOpen) {
+        parseDraft();
+        return;
+      }
+      if (draftText != null) parseDraft();
+      else setOpenSafe(true);
+    }
+  };
+  const inputClasses = getInputFieldClasses({
+    size: effectiveSize,
+    status,
+    hasSuffix: trailing.hasSuffix,
+    hasDualSuffix: trailing.hasDualSuffix
+  });
+  const wrapperClasses = getInputWrapperClasses(status, { inGroup });
+  return {
+    rootRef,
+    inputRef,
+    panelRef,
+    inputWrapperRef,
+    isOpen,
+    setOpenSafe,
+    isRangeMode,
+    labels,
+    mergedLocale,
+    localeCode,
+    weekStartsOn,
+    dir,
+    format,
+    displayValue,
+    placeholder,
+    effectiveDisabled,
+    isReadOnly,
+    required: required || Boolean(formItemControl?.required),
+    effectiveId,
+    effectiveName,
+    describedBy,
+    labelledby,
+    ariaLabel,
+    status,
+    panelId,
+    calendarValue,
+    rangeHighlight,
+    isDateDisabled,
+    now,
+    showClear,
+    trailing,
+    inputClasses,
+    wrapperClasses,
+    chromeAttr: TIGER_CHROME_ATTR,
+    shakeClass: SHAKE_CLASS,
+    className,
+    size: effectiveSize,
+    shortcuts: props.shortcuts,
+    selectDay,
+    selectToday,
+    applyShortcut,
+    clearValue,
+    confirmOpen,
+    handleFocusOut,
+    handleInputKeyDown,
+    onDraftChange: (text) => setDraftText(text),
+    parseDraft,
+    placement: props.placement ?? "bottom-start",
+    offset: props.offset ?? 4,
+    dropdownClassName: props.dropdownClassName,
+    getPopupContainer: props.getPopupContainer
+  };
+}
+
+// src/components/DatePicker.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function ChromeIcon({ path, className }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className,
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: icon20ViewBox,
+      fill: "currentColor",
+      "aria-hidden": "true",
+      focusable: "false",
+      children: /* @__PURE__ */ jsx("path", { fillRule: "evenodd", d: path, clipRule: "evenodd" })
+    }
+  );
+}
+var DatePicker = forwardRef(
+  function DatePicker2(props, ref) {
+    const ctx = useDatePickerController(props);
+    const overlay = useAnchoredOverlay({
+      enabled: ctx.isOpen,
+      referenceRef: ctx.inputWrapperRef,
+      floatingRef: ctx.panelRef,
+      placement: ctx.placement,
+      offset: ctx.offset,
+      layout: "bottom-sheet-sm",
+      dismissOnOutside: true,
+      dismissOnEscape: true,
+      restoreFocusOnDismiss: true,
+      getContainer: ctx.getPopupContainer,
+      onDismiss: () => ctx.setOpenSafe(false)
+    });
+    useFocusTrap({ enabled: ctx.isOpen, containerRef: ctx.panelRef, inert: true });
+    useImperativeHandle(
+      ref,
+      () => ({
+        focus: () => ctx.inputRef.current?.focus(),
+        open: () => ctx.setOpenSafe(true),
+        close: () => ctx.setOpenSafe(false)
+      }),
+      [ctx]
+    );
+    useEffect2(() => {
+      if (!ctx.isOpen) return;
+      ctx.panelRef.current?.querySelector('[role="gridcell"][tabindex="0"]')?.focus();
+    }, [ctx.isOpen, ctx.panelRef]);
+    const panel = ctx.isOpen ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: datePickerSheetScrimClasses,
+          tabIndex: -1,
+          "aria-hidden": "true",
+          onClick: () => ctx.setOpenSafe(false)
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref: ctx.panelRef,
+          id: ctx.panelId,
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-label": ctx.labels.calendar,
+          className: classNames(
+            datePickerPanelClasses,
+            overlay.floatingClasses,
+            ctx.dropdownClassName
+          ),
+          style: overlay.floatingStyles,
+          "data-positioned": overlay.positioned,
+          "data-tiger": "datepicker-panel",
+          onBlur: ctx.handleFocusOut,
+          children: [
+            /* @__PURE__ */ jsx(
+              Calendar,
+              {
+                value: ctx.calendarValue,
+                now: ctx.now,
+                locale: ctx.mergedLocale,
+                weekStartsOn: ctx.weekStartsOn,
+                disabledDate: ctx.isDateDisabled,
+                rangeValue: ctx.rangeHighlight,
+                onChange: ctx.selectDay
+              }
+            ),
+            ctx.shortcuts && ctx.shortcuts.length > 0 ? /* @__PURE__ */ jsx("div", { className: datePickerShortcutListClasses, children: ctx.shortcuts.map((shortcut) => /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: datePickerShortcutButtonClasses,
+                onClick: () => ctx.applyShortcut(shortcut),
+                children: shortcut.label
+              },
+              shortcut.label
+            )) }) : null,
+            /* @__PURE__ */ jsxs("div", { className: datePickerFooterClasses, children: [
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: datePickerFooterButtonClasses,
+                  onClick: ctx.selectToday,
+                  children: ctx.labels.today
+                }
+              ),
+              ctx.isRangeMode ? /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: datePickerFooterButtonClasses,
+                  onClick: ctx.confirmOpen,
+                  children: ctx.labels.ok
+                }
+              ) : null
+            ] })
+          ]
+        }
+      )
+    ] }) : null;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: ctx.rootRef,
+        className: classNames("relative inline-block w-full", props.className),
+        ...{ [ctx.chromeAttr]: "" },
+        onAnimationEnd: () => ctx.rootRef.current?.classList.remove(ctx.shakeClass),
+        onBlur: ctx.handleFocusOut,
+        children: [
+          /* @__PURE__ */ jsxs("div", { ref: ctx.inputWrapperRef, className: ctx.wrapperClasses, children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                ref: ctx.inputRef,
+                type: "text",
+                className: ctx.inputClasses,
+                value: ctx.displayValue,
+                placeholder: ctx.placeholder,
+                disabled: ctx.effectiveDisabled,
+                readOnly: ctx.isReadOnly,
+                required: ctx.required,
+                name: ctx.effectiveName,
+                id: ctx.effectiveId,
+                autoComplete: "off",
+                "aria-label": ctx.ariaLabel ?? (ctx.labelledby ? void 0 : ctx.placeholder),
+                "aria-labelledby": ctx.labelledby,
+                "aria-describedby": ctx.describedBy,
+                "aria-invalid": ctx.status === "error" ? true : void 0,
+                "aria-required": ctx.required ? true : void 0,
+                "aria-controls": ctx.isOpen ? ctx.panelId : void 0,
+                onChange: (event) => ctx.onDraftChange(event.target.value),
+                onClick: () => ctx.setOpenSafe(true),
+                onKeyDown: ctx.handleInputKeyDown,
+                onBlur: ctx.parseDraft
+              }
+            ),
+            ctx.showClear ? /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: getInputClearButtonClasses(ctx.size, {
+                  offsetSlots: ctx.trailing.clearOffsetSlots
+                }),
+                "aria-label": ctx.labels.clearDate,
+                onMouseDown: (event) => event.preventDefault(),
+                onClick: ctx.clearValue,
+                children: /* @__PURE__ */ jsx(ChromeIcon, { path: closeSolidIcon20PathD, className: "w-4 h-4" })
+              }
+            ) : null,
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: getInputPasswordToggleClasses(ctx.size, { offsetSlots: 0 }),
+                disabled: ctx.effectiveDisabled || ctx.isReadOnly,
+                "aria-label": ctx.labels.toggleCalendar,
+                onMouseDown: (event) => event.preventDefault(),
+                onClick: () => ctx.setOpenSafe(!ctx.isOpen),
+                children: /* @__PURE__ */ jsx(ChromeIcon, { path: calendarSolidIcon20PathD, className: "w-5 h-5" })
+              }
+            )
+          ] }),
+          renderOverlayPortal(panel, overlay.target)
+        ]
+      }
+    );
+  }
+);
+DatePicker.displayName = "DatePicker";
+
+export {
+  DatePicker
+};

package/dist/chunk-7H7EKANG.mjs

@@ -0,0 +1,145 @@
+// src/hooks/useChartInteraction.ts
+import { useState, useMemo, useCallback, useEffect } from "react";
+import {
+  createChartPointerMoveScheduler,
+  getChartElementOpacity,
+  getChartLegendShellClasses,
+  isChartActivationKey,
+  nextChartSelectedIndex,
+  resolveChartActiveIndex,
+  resolveChartIndex,
+  shouldTrackChartPointer,
+  tooltipPositionFromEvent
+} from "@expcat/tigercat-core";
+function useChartInteraction(options) {
+  const {
+    hoverable,
+    showTooltip = true,
+    hoveredIndexProp,
+    selectable,
+    selectedIndexProp,
+    activeOpacity,
+    inactiveOpacity,
+    legendPosition = "bottom",
+    onHoveredIndexChange,
+    onSelectedIndexChange,
+    getData,
+    onHover,
+    onClick
+  } = options;
+  const [localHoveredIndex, setLocalHoveredIndex] = useState(null);
+  const [localSelectedIndex, setLocalSelectedIndex] = useState(null);
+  const [tooltipPosition, setTooltipPosition] = useState({ x: 0, y: 0 });
+  const [tooltipScheduler] = useState(
+    () => createChartPointerMoveScheduler({
+      onPositionChange: setTooltipPosition
+    })
+  );
+  useEffect(() => {
+    return () => tooltipScheduler.cancel();
+  }, [tooltipScheduler]);
+  const resolvedHoveredIndex = resolveChartIndex(hoveredIndexProp, localHoveredIndex);
+  const resolvedSelectedIndex = resolveChartIndex(selectedIndexProp, localSelectedIndex);
+  const activeIndex = useMemo(
+    () => resolveChartActiveIndex(resolvedSelectedIndex, resolvedHoveredIndex, hoverable),
+    [resolvedSelectedIndex, resolvedHoveredIndex, hoverable]
+  );
+  const getElementOpacity = useCallback(
+    (index) => {
+      return getChartElementOpacity(index, activeIndex, {
+        activeOpacity,
+        inactiveOpacity
+      });
+    },
+    [activeIndex, activeOpacity, inactiveOpacity]
+  );
+  const applyHover = useCallback(
+    (index, position) => {
+      if (!shouldTrackChartPointer(hoverable, showTooltip)) return;
+      if (hoveredIndexProp === void 0) {
+        setLocalHoveredIndex(index);
+      }
+      if (position) setTooltipPosition(position);
+      if (!hoverable) return;
+      onHoveredIndexChange?.(index);
+      onHover?.(index, index !== null ? getData?.(index) ?? null : null);
+    },
+    [hoverable, showTooltip, hoveredIndexProp, onHoveredIndexChange, onHover, getData]
+  );
+  const handleMouseEnter = useCallback(
+    (index, event) => {
+      applyHover(index, tooltipPositionFromEvent(event));
+    },
+    [applyHover]
+  );
+  const handleMouseMove = useCallback(
+    (event) => {
+      if (!shouldTrackChartPointer(hoverable, showTooltip)) return;
+      tooltipScheduler.schedule({ x: event.clientX, y: event.clientY });
+    },
+    [hoverable, showTooltip, tooltipScheduler]
+  );
+  const handleMouseLeave = useCallback(() => {
+    tooltipScheduler.cancel();
+    applyHover(null);
+  }, [tooltipScheduler, applyHover]);
+  const handleClick = useCallback(
+    (index) => {
+      onClick?.(index, getData?.(index));
+      if (!selectable) return;
+      const nextIndex = nextChartSelectedIndex(resolvedSelectedIndex, index);
+      if (selectedIndexProp === void 0) {
+        setLocalSelectedIndex(nextIndex);
+      }
+      onSelectedIndexChange?.(nextIndex);
+    },
+    [selectable, resolvedSelectedIndex, selectedIndexProp, onSelectedIndexChange, onClick, getData]
+  );
+  const handleKeyDown = useCallback(
+    (event, index) => {
+      if (!isChartActivationKey(event.key)) return;
+      event.preventDefault();
+      if (shouldTrackChartPointer(hoverable, showTooltip)) {
+        applyHover(index, tooltipPositionFromEvent(event));
+      }
+      handleClick(index);
+    },
+    [hoverable, showTooltip, applyHover, handleClick]
+  );
+  const handleLegendClick = useCallback(
+    (index) => {
+      handleClick(index);
+    },
+    [handleClick]
+  );
+  const handleLegendHover = useCallback(
+    (index, _item, event) => {
+      applyHover(index, event ? tooltipPositionFromEvent(event) : void 0);
+    },
+    [applyHover]
+  );
+  const handleLegendLeave = useCallback(() => {
+    handleMouseLeave();
+  }, [handleMouseLeave]);
+  const wrapperClasses = useMemo(() => getChartLegendShellClasses(legendPosition), [legendPosition]);
+  return {
+    tooltipPosition,
+    resolvedHoveredIndex,
+    resolvedSelectedIndex,
+    activeIndex,
+    getElementOpacity,
+    handleMouseEnter,
+    handleMouseMove,
+    handleMouseLeave,
+    handleClick,
+    handleKeyDown,
+    handleLegendClick,
+    handleLegendHover,
+    handleLegendLeave,
+    wrapperClasses
+  };
+}
+
+export {
+  useChartInteraction
+};