@levi-gemcommerce/analytics 2.0.5-dev.1 → 2.1.0-test.0

package/dist/esm/shared/charts/components/GFunnelChart/components/FunnelChartAction.mjs

@@ -0,0 +1,74 @@
+import { jsx } from 'react/jsx-runtime';
+import { FunnelChartActionWrapper } from './FunnelChartActionWrapper.mjs';
+import { useChartContext } from '@shopify/polaris-viz-core';
+import 'react';
+import '../../GPolarisViz/hooks/useResizeObserver.mjs';
+import '../../../../../stores/currencyRatesStore.mjs';
+import '@tanstack/react-query';
+import '../../../../../core/gemxql/constants/row-reader-mode.mjs';
+import '../../../../../utils/dayjs.mjs';
+import '../../../../../utils/analytics.mjs';
+import '../../../../../types/template.mjs';
+import '../../../../../core/gemxql/types/analytic-data.mjs';
+import '../../../../../core/gemxql/types/analytic-source.mjs';
+import '../../../../../core/gemxql/types/extra-condition.mjs';
+import '../../../../../core/gemxql/types/field-filters.mjs';
+import '../../../../../core/gemxql/types/field-operators.mjs';
+import '../../../../../core/gemxql/types/group-with-clause.mjs';
+import '../../../../../core/gemxql/types/order-by.mjs';
+import '../../../../../core/gemxql/types/page-fields.mjs';
+import '../../../../../core/gemxql/types/row-reader-mode.mjs';
+import '../../../../../core/gemxql/types/time-dimension.mjs';
+import '../../../../../providers/ConvertMoneyProvider.mjs';
+import '../../../../components/GPagination/GPagination.mjs';
+import '@react-spring/web';
+import '../../GPolarisViz/constants.mjs';
+import 'd3-shape';
+import '../../GPolarisViz/shared/Bar/Bar.mjs';
+import 'react-dom';
+import { scaleBand } from 'd3-scale';
+import * as constants from '../../GPolarisViz/components/FunnelChartNext/constants.mjs';
+import { Box, InlineGrid } from '@shopify/polaris';
+import '../../GPolarisViz/components/TooltipWrapper/constants.mjs';
+import '../../GPolarisViz/components/TooltipWrapper/types.mjs';
+import '@shopify/polaris-viz/build/esm/styles.css?url';
+import '@shopify/polaris-viz';
+import 'react-i18next';
+import '@shopify/polaris-icons';
+import '../../../../components/GTooltip/components/GTooltipCard.mjs';
+import '../../../../components/GDiv/GDiv.mjs';
+import '../../../../components/GFeatureLocked/constants.mjs';
+import '../../../../components/GFeatureLocked/types.mjs';
+import '../../../constants/chart.mjs';
+
+const FunnelChartAction = ({ dataSeries, actionProps, }) => {
+    const fixedLevel = actionProps?.fixedLevel ?? 0;
+    const { containerBounds } = useChartContext();
+    const { LINE_OFFSET, LINE_WIDTH, SEGMENT_WIDTH_RATIO, GAP } = constants;
+    const drawableWidth = containerBounds?.width ?? 0;
+    const dataPoints = dataSeries[0]?.data ?? [];
+    // Layout math below relies on at least two steps (rectX[0]/rectX[1]); bail out on loading/empty/single-step.
+    if (dataPoints.length < 2)
+        return null;
+    const xValues = dataPoints.map(({ key }) => key);
+    const totalStepWidth = drawableWidth / xValues.length;
+    const connectorWidth = totalStepWidth * (1 - SEGMENT_WIDTH_RATIO);
+    const drawableWidthWithLastConnector = drawableWidth + connectorWidth;
+    const xScale = scaleBand().domain(xValues).range([0, drawableWidthWithLastConnector]);
+    const sectionWidth = xScale.bandwidth();
+    const barWidth = sectionWidth * SEGMENT_WIDTH_RATIO;
+    const rectX = dataPoints.map((dataPoint) => {
+        const xPosition = xScale(dataPoint.key.toString());
+        const x = xPosition == null ? 0 : xPosition;
+        const rectX = x - (LINE_OFFSET - LINE_WIDTH);
+        const startX = x + barWidth + GAP;
+        return { rectX, startX };
+    });
+    const columnWrapper = dataPoints.map(() => `${rectX[1].rectX}px`).join(' ');
+    const columnItem = `${rectX[0].startX}px ${rectX[1].rectX - rectX[0].startX}px`;
+    return (jsx(Box, { children: jsx(InlineGrid, { columns: columnWrapper, gap: '050', children: dataPoints.map((dataPoint, index) => {
+                return (jsx(InlineGrid, { columns: columnItem, alignItems: "center", children: jsx(FunnelChartActionWrapper, { level: index, dataPoint: dataPoint, isLastLevel: index === dataPoints.length - 1, isFinalFixedLevel: index >= dataPoints.length - fixedLevel, actionProps: actionProps }) }, `${dataPoint.key}-${index}`));
+            }) }) }));
+};
+
+export { FunnelChartAction };

package/dist/esm/shared/charts/components/GFunnelChart/components/FunnelChartActionIcon.js

@@ -0,0 +1,50 @@
+import { jsx } from 'react/jsx-runtime';
+import { ArrowRightIcon, PlusIcon } from '@shopify/polaris-icons';
+import { FunnelSelectionPopover } from './FunnelSelection/FunnelSelectionPopover.js';
+import { Icon, Button } from '@shopify/polaris';
+import { useState } from 'react';
+import '../../../../../utils/dayjs.js';
+import '../../../../../utils/analytics.js';
+import '../../../../../types/template.js';
+import { GTooltip } from '../../../../components/GTooltip/GTooltip.js';
+import '../../../../components/GTooltip/components/GTooltipCard.js';
+import '../../../../components/GDiv/GDiv.js';
+import { useTranslation } from 'react-i18next';
+import '../../../../components/GFeatureLocked/constants.js';
+import '../../../../components/GFeatureLocked/types.js';
+import '../../../../components/GPagination/GPagination.js';
+import '../../GPolarisViz/hooks/useResizeObserver.js';
+import '../../../../../stores/currencyRatesStore.js';
+import '@tanstack/react-query';
+import '../../../../../core/gemxql/constants/row-reader-mode.js';
+import '../../../../../core/gemxql/types/analytic-data.js';
+import '../../../../../core/gemxql/types/analytic-source.js';
+import '../../../../../core/gemxql/types/extra-condition.js';
+import '../../../../../core/gemxql/types/field-filters.js';
+import '../../../../../core/gemxql/types/field-operators.js';
+import '../../../../../core/gemxql/types/group-with-clause.js';
+import '../../../../../core/gemxql/types/order-by.js';
+import '../../../../../core/gemxql/types/page-fields.js';
+import '../../../../../core/gemxql/types/row-reader-mode.js';
+import '../../../../../core/gemxql/types/time-dimension.js';
+import '../../../../../providers/ConvertMoneyProvider.js';
+import { useWindowSize } from '../../../../../hooks/publish/useWindowSize.js';
+
+const FunnelChartActionIcon = ({ level, isLastLevel, isFinalFixedLevel, actionProps, }) => {
+    const { t } = useTranslation();
+    const { isMobileView } = useWindowSize();
+    const { listFunnelSelection, onAddNextFunnel, onNotify, isDisabledAddICon, hideAddIcon } = actionProps || {};
+    const lengthDisplayedLevels = actionProps?.lengthDisplayedLevels || 0;
+    const [isOpenPathSelectionPopover, setIsOpenPathSelectionPopover] = useState(false);
+    if (isLastLevel)
+        return;
+    if (level < lengthDisplayedLevels || isFinalFixedLevel) {
+        return jsx(Icon, { source: ArrowRightIcon });
+    }
+    if (isMobileView || hideAddIcon)
+        return null;
+    const tooltip = isDisabledAddICon ? t('Funnel step limit reached.') : t('Add funnel step');
+    return (jsx(FunnelSelectionPopover, { open: isOpenPathSelectionPopover, onClose: () => setIsOpenPathSelectionPopover(false), listFunnelSelection: listFunnelSelection, onAddNextFunnel: onAddNextFunnel, onNotify: onNotify, activator: jsx(GTooltip, { content: tooltip, children: jsx(Button, { icon: jsx(Icon, { source: PlusIcon }), onClick: () => setIsOpenPathSelectionPopover((prev) => !prev), disabled: isDisabledAddICon }) }) }));
+};
+
+export { FunnelChartActionIcon };

package/dist/esm/shared/charts/components/GFunnelChart/components/FunnelChartActionIcon.mjs

@@ -0,0 +1,50 @@
+import { jsx } from 'react/jsx-runtime';
+import { ArrowRightIcon, PlusIcon } from '@shopify/polaris-icons';
+import { FunnelSelectionPopover } from './FunnelSelection/FunnelSelectionPopover.mjs';
+import { Icon, Button } from '@shopify/polaris';
+import { useState } from 'react';
+import '../../../../../utils/dayjs.mjs';
+import '../../../../../utils/analytics.mjs';
+import '../../../../../types/template.mjs';
+import { GTooltip } from '../../../../components/GTooltip/GTooltip.mjs';
+import '../../../../components/GTooltip/components/GTooltipCard.mjs';
+import '../../../../components/GDiv/GDiv.mjs';
+import { useTranslation } from 'react-i18next';
+import '../../../../components/GFeatureLocked/constants.mjs';
+import '../../../../components/GFeatureLocked/types.mjs';
+import '../../../../components/GPagination/GPagination.mjs';
+import '../../GPolarisViz/hooks/useResizeObserver.mjs';
+import '../../../../../stores/currencyRatesStore.mjs';
+import '@tanstack/react-query';
+import '../../../../../core/gemxql/constants/row-reader-mode.mjs';
+import '../../../../../core/gemxql/types/analytic-data.mjs';
+import '../../../../../core/gemxql/types/analytic-source.mjs';
+import '../../../../../core/gemxql/types/extra-condition.mjs';
+import '../../../../../core/gemxql/types/field-filters.mjs';
+import '../../../../../core/gemxql/types/field-operators.mjs';
+import '../../../../../core/gemxql/types/group-with-clause.mjs';
+import '../../../../../core/gemxql/types/order-by.mjs';
+import '../../../../../core/gemxql/types/page-fields.mjs';
+import '../../../../../core/gemxql/types/row-reader-mode.mjs';
+import '../../../../../core/gemxql/types/time-dimension.mjs';
+import '../../../../../providers/ConvertMoneyProvider.mjs';
+import { useWindowSize } from '../../../../../hooks/publish/useWindowSize.mjs';
+
+const FunnelChartActionIcon = ({ level, isLastLevel, isFinalFixedLevel, actionProps, }) => {
+    const { t } = useTranslation();
+    const { isMobileView } = useWindowSize();
+    const { listFunnelSelection, onAddNextFunnel, onNotify, isDisabledAddICon, hideAddIcon } = actionProps || {};
+    const lengthDisplayedLevels = actionProps?.lengthDisplayedLevels || 0;
+    const [isOpenPathSelectionPopover, setIsOpenPathSelectionPopover] = useState(false);
+    if (isLastLevel)
+        return;
+    if (level < lengthDisplayedLevels || isFinalFixedLevel) {
+        return jsx(Icon, { source: ArrowRightIcon });
+    }
+    if (isMobileView || hideAddIcon)
+        return null;
+    const tooltip = isDisabledAddICon ? t('Funnel step limit reached.') : t('Add funnel step');
+    return (jsx(FunnelSelectionPopover, { open: isOpenPathSelectionPopover, onClose: () => setIsOpenPathSelectionPopover(false), listFunnelSelection: listFunnelSelection, onAddNextFunnel: onAddNextFunnel, onNotify: onNotify, activator: jsx(GTooltip, { content: tooltip, children: jsx(Button, { icon: jsx(Icon, { source: PlusIcon }), onClick: () => setIsOpenPathSelectionPopover((prev) => !prev), disabled: isDisabledAddICon }) }) }));
+};
+
+export { FunnelChartActionIcon };

package/dist/esm/shared/charts/components/GFunnelChart/components/FunnelChartActionWrapper.d.ts

@@ -1,5 +1,5 @@
-import type { GDataPoint } from '@/shared/charts/types';
-import type { GTooltipCardData } from '@/shared/components';
+import type { GTooltipCardData } from '../../../../components';
+import type { GDataPoint } from '../../../types';
 import type { IFunnelChartAction } from './types';
 interface FunnelChartActionWrapperProps {
     dataPoint: GDataPoint;
@@ -8,7 +8,7 @@ interface FunnelChartActionWrapperProps {
     isFinalFixedLevel: boolean;
     actionProps?: IFunnelChartAction;
 }
-export declare const ActionLabel: ({ labelTooltip, title }: {
+export declare const ActionLabel: ({ labelTooltip, title, }: {
     labelTooltip?: GTooltipCardData;
     title: string;
 }) => import("react/jsx-runtime").JSX.Element;

package/dist/esm/shared/charts/components/GFunnelChart/components/FunnelChartActionWrapper.js

@@ -0,0 +1,51 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { ChevronUpIcon, ChevronDownIcon } from '@shopify/polaris-icons';
+import { InlineStack, Text, Icon, BlockStack } from '@shopify/polaris';
+import { FunnelChartActionIcon } from './FunnelChartActionIcon.js';
+import { FunnelSelectionPopover } from './FunnelSelection/FunnelSelectionPopover.js';
+import { useMemo, useState, Fragment } from 'react';
+import '../../../../../utils/dayjs.js';
+import '../../../../../utils/analytics.js';
+import '../../../../../types/template.js';
+import { GTooltipCard } from '../../../../components/GTooltip/components/GTooltipCard.js';
+import '../../../../components/GDiv/GDiv.js';
+import 'react-i18next';
+import '../../../../components/GFeatureLocked/constants.js';
+import '../../../../components/GFeatureLocked/types.js';
+import '../../../../components/GPagination/GPagination.js';
+import '../../GPolarisViz/hooks/useResizeObserver.js';
+import '../../../../../stores/currencyRatesStore.js';
+import '@tanstack/react-query';
+import '../../../../../core/gemxql/constants/row-reader-mode.js';
+import '../../../../../core/gemxql/types/analytic-data.js';
+import '../../../../../core/gemxql/types/analytic-source.js';
+import '../../../../../core/gemxql/types/extra-condition.js';
+import '../../../../../core/gemxql/types/field-filters.js';
+import '../../../../../core/gemxql/types/field-operators.js';
+import '../../../../../core/gemxql/types/group-with-clause.js';
+import '../../../../../core/gemxql/types/order-by.js';
+import '../../../../../core/gemxql/types/page-fields.js';
+import '../../../../../core/gemxql/types/row-reader-mode.js';
+import '../../../../../core/gemxql/types/time-dimension.js';
+import '../../../../../providers/ConvertMoneyProvider.js';
+
+const ActionLabel = ({ labelTooltip, title, }) => {
+    const content = (jsx(Text, { alignment: "center", as: "p", fontWeight: "medium", truncate: true, children: title }));
+    if (!labelTooltip) {
+        return content;
+    }
+    return (jsx("div", { className: "min-w-0", children: jsx(GTooltipCard, { tooltip: labelTooltip, children: content }) }));
+};
+const FunnelChartActionWrapper = (props) => {
+    const { dataPoint, actionProps, level, isLastLevel, isFinalFixedLevel } = props;
+    const { parentID, id } = dataPoint;
+    const { getListFunnelByID, onChangeFunnel } = actionProps || {};
+    const availableChildPages = useMemo(() => getListFunnelByID?.({ level, parentID }), [level, parentID, getListFunnelByID]);
+    const [isOpenPathSelectionPopover, setIsOpenPathSelectionPopover] = useState(false);
+    const title = useMemo(() => {
+        return dataPoint.title || dataPoint.key.toString().split('-')[0];
+    }, [dataPoint.key, dataPoint.title]);
+    return (jsxs(Fragment, { children: [jsx(InlineStack, { align: "center", children: availableChildPages && availableChildPages.length > 1 ? (jsx("div", { className: "overflow-hidden", children: jsx(FunnelSelectionPopover, { open: isOpenPathSelectionPopover, listFunnelSelection: availableChildPages, selectedID: id, onClose: () => setIsOpenPathSelectionPopover(false), onChangeFunnel: (data) => onChangeFunnel?.({ ...data, level }), activator: jsx("div", { className: "cursor-pointer", onClick: () => setIsOpenPathSelectionPopover(!isOpenPathSelectionPopover), children: jsxs(InlineStack, { blockAlign: "center", gap: "100", children: [jsx("div", { className: "min-w-0 flex-1", children: jsx(Text, { as: "p", fontWeight: "medium", truncate: true, children: `${title}` }) }), jsx(Icon, { source: isOpenPathSelectionPopover ? ChevronUpIcon : ChevronDownIcon })] }) }), level: level }) })) : (jsx(ActionLabel, { labelTooltip: dataPoint.labelTooltip, title: title })) }), jsx(BlockStack, { align: "center", inlineAlign: "center", children: jsx(InlineStack, { gap: "200", children: jsx(FunnelChartActionIcon, { level: level, isLastLevel: isLastLevel, isFinalFixedLevel: isFinalFixedLevel, actionProps: actionProps }) }) })] }));
+};
+
+export { ActionLabel, FunnelChartActionWrapper };

package/dist/esm/shared/charts/components/GFunnelChart/components/FunnelChartActionWrapper.mjs

@@ -0,0 +1,51 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { ChevronUpIcon, ChevronDownIcon } from '@shopify/polaris-icons';
+import { InlineStack, Text, Icon, BlockStack } from '@shopify/polaris';
+import { FunnelChartActionIcon } from './FunnelChartActionIcon.mjs';
+import { FunnelSelectionPopover } from './FunnelSelection/FunnelSelectionPopover.mjs';
+import { useMemo, useState, Fragment } from 'react';
+import '../../../../../utils/dayjs.mjs';
+import '../../../../../utils/analytics.mjs';
+import '../../../../../types/template.mjs';
+import { GTooltipCard } from '../../../../components/GTooltip/components/GTooltipCard.mjs';
+import '../../../../components/GDiv/GDiv.mjs';
+import 'react-i18next';
+import '../../../../components/GFeatureLocked/constants.mjs';
+import '../../../../components/GFeatureLocked/types.mjs';
+import '../../../../components/GPagination/GPagination.mjs';
+import '../../GPolarisViz/hooks/useResizeObserver.mjs';
+import '../../../../../stores/currencyRatesStore.mjs';
+import '@tanstack/react-query';
+import '../../../../../core/gemxql/constants/row-reader-mode.mjs';
+import '../../../../../core/gemxql/types/analytic-data.mjs';
+import '../../../../../core/gemxql/types/analytic-source.mjs';
+import '../../../../../core/gemxql/types/extra-condition.mjs';
+import '../../../../../core/gemxql/types/field-filters.mjs';
+import '../../../../../core/gemxql/types/field-operators.mjs';
+import '../../../../../core/gemxql/types/group-with-clause.mjs';
+import '../../../../../core/gemxql/types/order-by.mjs';
+import '../../../../../core/gemxql/types/page-fields.mjs';
+import '../../../../../core/gemxql/types/row-reader-mode.mjs';
+import '../../../../../core/gemxql/types/time-dimension.mjs';
+import '../../../../../providers/ConvertMoneyProvider.mjs';
+
+const ActionLabel = ({ labelTooltip, title, }) => {
+    const content = (jsx(Text, { alignment: "center", as: "p", fontWeight: "medium", truncate: true, children: title }));
+    if (!labelTooltip) {
+        return content;
+    }
+    return (jsx("div", { className: "min-w-0", children: jsx(GTooltipCard, { tooltip: labelTooltip, children: content }) }));
+};
+const FunnelChartActionWrapper = (props) => {
+    const { dataPoint, actionProps, level, isLastLevel, isFinalFixedLevel } = props;
+    const { parentID, id } = dataPoint;
+    const { getListFunnelByID, onChangeFunnel } = actionProps || {};
+    const availableChildPages = useMemo(() => getListFunnelByID?.({ level, parentID }), [level, parentID, getListFunnelByID]);
+    const [isOpenPathSelectionPopover, setIsOpenPathSelectionPopover] = useState(false);
+    const title = useMemo(() => {
+        return dataPoint.title || dataPoint.key.toString().split('-')[0];
+    }, [dataPoint.key, dataPoint.title]);
+    return (jsxs(Fragment, { children: [jsx(InlineStack, { align: "center", children: availableChildPages && availableChildPages.length > 1 ? (jsx("div", { className: "overflow-hidden", children: jsx(FunnelSelectionPopover, { open: isOpenPathSelectionPopover, listFunnelSelection: availableChildPages, selectedID: id, onClose: () => setIsOpenPathSelectionPopover(false), onChangeFunnel: (data) => onChangeFunnel?.({ ...data, level }), activator: jsx("div", { className: "cursor-pointer", onClick: () => setIsOpenPathSelectionPopover(!isOpenPathSelectionPopover), children: jsxs(InlineStack, { blockAlign: "center", gap: "100", children: [jsx("div", { className: "min-w-0 flex-1", children: jsx(Text, { as: "p", fontWeight: "medium", truncate: true, children: `${title}` }) }), jsx(Icon, { source: isOpenPathSelectionPopover ? ChevronUpIcon : ChevronDownIcon })] }) }), level: level }) })) : (jsx(ActionLabel, { labelTooltip: dataPoint.labelTooltip, title: title })) }), jsx(BlockStack, { align: "center", inlineAlign: "center", children: jsx(InlineStack, { gap: "200", children: jsx(FunnelChartActionIcon, { level: level, isLastLevel: isLastLevel, isFinalFixedLevel: isFinalFixedLevel, actionProps: actionProps }) }) })] }));
+};
+
+export { ActionLabel, FunnelChartActionWrapper };

package/dist/esm/shared/charts/components/GFunnelChart/components/FunnelSelection/FunnelSelectionContent.js

@@ -0,0 +1,68 @@
+import { jsx } from 'react/jsx-runtime';
+import { FunnelSelectionItem } from './FunnelSelectionItem.js';
+import { Scrollable, Box, Text } from '@shopify/polaris';
+import { useState, useEffect } from 'react';
+import '../../../../../../stores/currencyRatesStore.js';
+import '@tanstack/react-query';
+import '../../../../../../core/gemxql/constants/row-reader-mode.js';
+import '../../../../../../utils/dayjs.js';
+import '../../../../../../utils/analytics.js';
+import '../../../../../../types/template.js';
+import '../../../../../../core/gemxql/types/analytic-data.js';
+import '../../../../../../core/gemxql/types/analytic-source.js';
+import '../../../../../../core/gemxql/types/extra-condition.js';
+import '../../../../../../core/gemxql/types/field-filters.js';
+import '../../../../../../core/gemxql/types/field-operators.js';
+import '../../../../../../core/gemxql/types/group-with-clause.js';
+import '../../../../../../core/gemxql/types/order-by.js';
+import '../../../../../../core/gemxql/types/page-fields.js';
+import '../../../../../../core/gemxql/types/row-reader-mode.js';
+import '../../../../../../core/gemxql/types/time-dimension.js';
+import '../../../../../../providers/ConvertMoneyProvider.js';
+import '../../../../../components/GPagination/GPagination.js';
+import { usePopoverResizeObserver } from '../../../../../../hooks/usePopoverResizeObserver.js';
+import { useTranslation } from 'react-i18next';
+
+const FunnelSelectionContent = ({ open, selectedID, onClose, onAddNextFunnel, onChangeFunnel, onNotify, searchQuery, listFunnelSelection, }) => {
+    const { t } = useTranslation();
+    const [maxHeight, setMaxHeight] = useState(218);
+    const isChangeFunnel = !!selectedID;
+    const filteredListFunnelSelection = listFunnelSelection?.filter((link) => link.title?.toLowerCase().includes(searchQuery.toLowerCase()) ||
+        link.path?.toLowerCase().includes(searchQuery.toLowerCase()));
+    usePopoverResizeObserver({
+        active: open,
+        onHeightChange: (PopoverHeight) => {
+            const headerAndFooterHeight = 110;
+            const contentHeight = PopoverHeight - headerAndFooterHeight;
+            if (contentHeight < 218) {
+                setMaxHeight(contentHeight);
+            }
+        },
+    });
+    const onSelectRow = (id, parentID, locationPath) => {
+        if (selectedID === id) {
+            onClose();
+            return;
+        }
+        if (isChangeFunnel) {
+            onChangeFunnel?.({ id, parentID, selectedID, locationPath });
+            onNotify?.(t('Link changed'));
+        }
+        else {
+            onAddNextFunnel?.(id);
+        }
+        onClose();
+    };
+    useEffect(() => {
+        if (!open)
+            return;
+        const popoverPane = document.querySelector('.Polaris-Popover__Pane.Polaris-Scrollable');
+        if (popoverPane) {
+            popoverPane.style.overflowY = 'hidden';
+            popoverPane.style.overflowX = 'hidden';
+        }
+    }, [open]);
+    return (jsx(Scrollable, { vertical: true, scrollbarWidth: "thin", style: { maxHeight: `${maxHeight}px` }, children: jsx(Box, { children: filteredListFunnelSelection && filteredListFunnelSelection.length > 0 ? (filteredListFunnelSelection.map((item, index) => (jsx(FunnelSelectionItem, { item: item, isSelected: selectedID === item.id, onSelectRow: onSelectRow, isChangeFunnel: isChangeFunnel }, index)))) : (jsx(Box, { padding: "300", children: jsx(Text, { variant: "bodyMd", tone: "subdued", alignment: "center", as: "p", children: searchQuery ? t('No links found') : t('No links available') }) })) }) }));
+};
+
+export { FunnelSelectionContent };

package/dist/esm/shared/charts/components/GFunnelChart/components/FunnelSelection/FunnelSelectionContent.mjs

@@ -0,0 +1,68 @@
+import { jsx } from 'react/jsx-runtime';
+import { FunnelSelectionItem } from './FunnelSelectionItem.mjs';
+import { Scrollable, Box, Text } from '@shopify/polaris';
+import { useState, useEffect } from 'react';
+import '../../../../../../stores/currencyRatesStore.mjs';
+import '@tanstack/react-query';
+import '../../../../../../core/gemxql/constants/row-reader-mode.mjs';
+import '../../../../../../utils/dayjs.mjs';
+import '../../../../../../utils/analytics.mjs';
+import '../../../../../../types/template.mjs';
+import '../../../../../../core/gemxql/types/analytic-data.mjs';
+import '../../../../../../core/gemxql/types/analytic-source.mjs';
+import '../../../../../../core/gemxql/types/extra-condition.mjs';
+import '../../../../../../core/gemxql/types/field-filters.mjs';
+import '../../../../../../core/gemxql/types/field-operators.mjs';
+import '../../../../../../core/gemxql/types/group-with-clause.mjs';
+import '../../../../../../core/gemxql/types/order-by.mjs';
+import '../../../../../../core/gemxql/types/page-fields.mjs';
+import '../../../../../../core/gemxql/types/row-reader-mode.mjs';
+import '../../../../../../core/gemxql/types/time-dimension.mjs';
+import '../../../../../../providers/ConvertMoneyProvider.mjs';
+import '../../../../../components/GPagination/GPagination.mjs';
+import { usePopoverResizeObserver } from '../../../../../../hooks/usePopoverResizeObserver.mjs';
+import { useTranslation } from 'react-i18next';
+
+const FunnelSelectionContent = ({ open, selectedID, onClose, onAddNextFunnel, onChangeFunnel, onNotify, searchQuery, listFunnelSelection, }) => {
+    const { t } = useTranslation();
+    const [maxHeight, setMaxHeight] = useState(218);
+    const isChangeFunnel = !!selectedID;
+    const filteredListFunnelSelection = listFunnelSelection?.filter((link) => link.title?.toLowerCase().includes(searchQuery.toLowerCase()) ||
+        link.path?.toLowerCase().includes(searchQuery.toLowerCase()));
+    usePopoverResizeObserver({
+        active: open,
+        onHeightChange: (PopoverHeight) => {
+            const headerAndFooterHeight = 110;
+            const contentHeight = PopoverHeight - headerAndFooterHeight;
+            if (contentHeight < 218) {
+                setMaxHeight(contentHeight);
+            }
+        },
+    });
+    const onSelectRow = (id, parentID, locationPath) => {
+        if (selectedID === id) {
+            onClose();
+            return;
+        }
+        if (isChangeFunnel) {
+            onChangeFunnel?.({ id, parentID, selectedID, locationPath });
+            onNotify?.(t('Link changed'));
+        }
+        else {
+            onAddNextFunnel?.(id);
+        }
+        onClose();
+    };
+    useEffect(() => {
+        if (!open)
+            return;
+        const popoverPane = document.querySelector('.Polaris-Popover__Pane.Polaris-Scrollable');
+        if (popoverPane) {
+            popoverPane.style.overflowY = 'hidden';
+            popoverPane.style.overflowX = 'hidden';
+        }
+    }, [open]);
+    return (jsx(Scrollable, { vertical: true, scrollbarWidth: "thin", style: { maxHeight: `${maxHeight}px` }, children: jsx(Box, { children: filteredListFunnelSelection && filteredListFunnelSelection.length > 0 ? (filteredListFunnelSelection.map((item, index) => (jsx(FunnelSelectionItem, { item: item, isSelected: selectedID === item.id, onSelectRow: onSelectRow, isChangeFunnel: isChangeFunnel }, index)))) : (jsx(Box, { padding: "300", children: jsx(Text, { variant: "bodyMd", tone: "subdued", alignment: "center", as: "p", children: searchQuery ? t('No links found') : t('No links available') }) })) }) }));
+};
+
+export { FunnelSelectionContent };

package/dist/esm/shared/charts/components/GFunnelChart/components/FunnelSelection/FunnelSelectionHeader.js

@@ -0,0 +1,30 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { InlineGrid, Text, Icon } from '@shopify/polaris';
+import { ArrowDownIcon } from '@shopify/polaris-icons';
+import { useTranslation } from 'react-i18next';
+import { cls } from '../../../../../../utils/cls.js';
+import '../../../../../../utils/dayjs.js';
+import '../../../../../../utils/analytics.js';
+import '../../../../../../types/template.js';
+
+const FunnelSelectionHeader = () => {
+    const { t } = useTranslation();
+    const getHeaderItems = () => {
+        return [
+            { title: t('Page title'), align: 'start' },
+            {
+                title: t('Sessions'),
+                align: 'end',
+                icon: ArrowDownIcon,
+            },
+        ];
+    };
+    return (jsx(InlineGrid, { columns: '1fr 1fr', children: getHeaderItems().map((item) => (jsx(HeaderItem, { ...item }, item.title))) }));
+};
+const HeaderItem = ({ title, align, icon }) => {
+    return (jsxs("div", { className: cls('py-2.5 px-3 bg-[#f7f7f7] flex items-center gap-1', {
+            'pr-[5px]': !!icon,
+        }), style: { justifyContent: align }, children: [jsx(Text, { as: "span", variant: "bodySm", fontWeight: "medium", tone: "subdued", children: title }), icon && (jsx("span", { children: jsx(Icon, { tone: 'subdued', source: icon }) }))] }));
+};
+
+export { FunnelSelectionHeader };

package/dist/esm/shared/charts/components/GFunnelChart/components/FunnelSelection/FunnelSelectionHeader.mjs

@@ -0,0 +1,30 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { InlineGrid, Text, Icon } from '@shopify/polaris';
+import { ArrowDownIcon } from '@shopify/polaris-icons';
+import { useTranslation } from 'react-i18next';
+import { cls } from '../../../../../../utils/cls.mjs';
+import '../../../../../../utils/dayjs.mjs';
+import '../../../../../../utils/analytics.mjs';
+import '../../../../../../types/template.mjs';
+
+const FunnelSelectionHeader = () => {
+    const { t } = useTranslation();
+    const getHeaderItems = () => {
+        return [
+            { title: t('Page title'), align: 'start' },
+            {
+                title: t('Sessions'),
+                align: 'end',
+                icon: ArrowDownIcon,
+            },
+        ];
+    };
+    return (jsx(InlineGrid, { columns: '1fr 1fr', children: getHeaderItems().map((item) => (jsx(HeaderItem, { ...item }, item.title))) }));
+};
+const HeaderItem = ({ title, align, icon }) => {
+    return (jsxs("div", { className: cls('py-2.5 px-3 bg-[#f7f7f7] flex items-center gap-1', {
+            'pr-[5px]': !!icon,
+        }), style: { justifyContent: align }, children: [jsx(Text, { as: "span", variant: "bodySm", fontWeight: "medium", tone: "subdued", children: title }), icon && (jsx("span", { children: jsx(Icon, { tone: 'subdued', source: icon }) }))] }));
+};
+
+export { FunnelSelectionHeader };

package/dist/esm/shared/charts/components/GFunnelChart/components/FunnelSelection/FunnelSelectionItem.d.ts

@@ -5,5 +5,5 @@ interface FunnelSelectionItemProps {
     isChangeFunnel: boolean;
     onSelectRow: (id: string, parentID: string, locationPath?: string) => void;
 }
-export declare const FunnelSelectionItem: ({ item, isSelected, isChangeFunnel, onSelectRow }: FunnelSelectionItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const FunnelSelectionItem: ({ item, isSelected, isChangeFunnel, onSelectRow, }: FunnelSelectionItemProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/esm/shared/charts/components/GFunnelChart/components/FunnelSelection/FunnelSelectionItem.js

@@ -0,0 +1,13 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { InlineStack, Icon, BlockStack, Text } from '@shopify/polaris';
+import { CheckIcon } from '@shopify/polaris-icons';
+import { cls } from '../../../../../../utils/cls.js';
+import '../../../../../../utils/dayjs.js';
+import '../../../../../../utils/analytics.js';
+import '../../../../../../types/template.js';
+
+const FunnelSelectionItem = ({ item, isSelected, isChangeFunnel, onSelectRow, }) => {
+    return (jsx("div", { className: `GPathSelectionItem ${isSelected ? 'GPathSelectionItem--selected' : ''}`, onClick: () => onSelectRow(item.id, item.parentID, item.path), children: jsxs(InlineStack, { align: "space-between", blockAlign: "center", gap: "400", children: [isChangeFunnel && (jsx("div", { className: cls('flex-shrink-0 opacity-0', { 'opacity-100': isSelected }), children: jsx(Icon, { source: CheckIcon, tone: "base" }) })), jsx("div", { className: "min-w-0 flex-1", children: jsxs(BlockStack, { children: [jsx("div", { className: "flex items-center h-7", children: jsx(Text, { variant: "bodyMd", fontWeight: "medium", as: "p", truncate: true, children: item.title }) }), jsx(Text, { variant: "bodyMd", tone: "subdued", as: "p", truncate: true, children: item.path })] }) }), jsx("div", { className: "w-[50px] text-right", children: jsx(Text, { variant: "bodySm", fontWeight: "medium", as: "p", children: item.percentage }) })] }) }));
+};
+
+export { FunnelSelectionItem };

package/dist/esm/shared/charts/components/GFunnelChart/components/FunnelSelection/FunnelSelectionItem.mjs

@@ -0,0 +1,13 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { InlineStack, Icon, BlockStack, Text } from '@shopify/polaris';
+import { CheckIcon } from '@shopify/polaris-icons';
+import { cls } from '../../../../../../utils/cls.mjs';
+import '../../../../../../utils/dayjs.mjs';
+import '../../../../../../utils/analytics.mjs';
+import '../../../../../../types/template.mjs';
+
+const FunnelSelectionItem = ({ item, isSelected, isChangeFunnel, onSelectRow, }) => {
+    return (jsx("div", { className: `GPathSelectionItem ${isSelected ? 'GPathSelectionItem--selected' : ''}`, onClick: () => onSelectRow(item.id, item.parentID, item.path), children: jsxs(InlineStack, { align: "space-between", blockAlign: "center", gap: "400", children: [isChangeFunnel && (jsx("div", { className: cls('flex-shrink-0 opacity-0', { 'opacity-100': isSelected }), children: jsx(Icon, { source: CheckIcon, tone: "base" }) })), jsx("div", { className: "min-w-0 flex-1", children: jsxs(BlockStack, { children: [jsx("div", { className: "flex items-center h-7", children: jsx(Text, { variant: "bodyMd", fontWeight: "medium", as: "p", truncate: true, children: item.title }) }), jsx(Text, { variant: "bodyMd", tone: "subdued", as: "p", truncate: true, children: item.path })] }) }), jsx("div", { className: "w-[50px] text-right", children: jsx(Text, { variant: "bodySm", fontWeight: "medium", as: "p", children: item.percentage }) })] }) }));
+};
+
+export { FunnelSelectionItem };

package/dist/esm/shared/charts/components/GFunnelChart/components/FunnelSelection/FunnelSelectionPopover.js

@@ -0,0 +1,29 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Popover, Box, BlockStack, Text, TextField, Icon } from '@shopify/polaris';
+import { FunnelSelectionContent } from './FunnelSelectionContent.js';
+import { FunnelSelectionHeader } from './FunnelSelectionHeader.js';
+import { SearchIcon } from '@shopify/polaris-icons';
+import { useTranslation } from 'react-i18next';
+import { useState, useEffect } from 'react';
+
+const FunnelSelectionPopover = (props) => {
+    const { open, activator, selectedID, onClose, level } = props;
+    const { t } = useTranslation();
+    const [searchQuery, setSearchQuery] = useState('');
+    const isChangeFunnel = !!selectedID;
+    const title = isChangeFunnel ? t('Change link') : t('Choose link to add');
+    useEffect(() => {
+        if (!open)
+            return;
+        const popoverPane = document.querySelector('.Polaris-Popover__Pane.Polaris-Scrollable');
+        if (popoverPane) {
+            popoverPane.style.overflowY = 'hidden';
+            popoverPane.style.overflowX = 'hidden';
+        }
+    }, [open]);
+    return (jsx(Popover, { active: open, activator: activator, onClose: onClose, preferredPosition: "below", preferredAlignment: "center", fluidContent: true, fullHeight: true, children: jsx(Popover.Pane, { children: jsx(Box, { paddingBlock: "200", width: "400px", children: jsxs(BlockStack, { gap: "300", children: [jsx(Box, { paddingInline: "300", children: jsxs(BlockStack, { gap: "300", children: [jsxs("div", { className: "flex flex-col gap-[2px]", children: [jsx(Text, { variant: "bodyMd", fontWeight: "semibold", as: "p", children: title }), jsx(Text, { variant: "bodyMd", tone: "subdued", fontWeight: "medium", as: "p", children: level !== 0
+                                                    ? t('Sorted by number of sessions')
+                                                    : t('Only links with sessions are shown') })] }), jsx(TextField, { label: t('Search link'), labelHidden: true, value: searchQuery, onChange: setSearchQuery, placeholder: t('Search link'), prefix: jsx(Icon, { source: SearchIcon }), clearButton: true, onClearButtonClick: () => setSearchQuery(''), autoComplete: "off" })] }) }), jsxs(Box, { children: [jsx(FunnelSelectionHeader, {}), jsx(FunnelSelectionContent, { ...props, searchQuery: searchQuery })] })] }) }) }) }));
+};
+
+export { FunnelSelectionPopover };

package/dist/esm/shared/charts/components/GFunnelChart/components/FunnelSelection/FunnelSelectionPopover.mjs

@@ -0,0 +1,29 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Popover, Box, BlockStack, Text, TextField, Icon } from '@shopify/polaris';
+import { FunnelSelectionContent } from './FunnelSelectionContent.mjs';
+import { FunnelSelectionHeader } from './FunnelSelectionHeader.mjs';
+import { SearchIcon } from '@shopify/polaris-icons';
+import { useTranslation } from 'react-i18next';
+import { useState, useEffect } from 'react';
+
+const FunnelSelectionPopover = (props) => {
+    const { open, activator, selectedID, onClose, level } = props;
+    const { t } = useTranslation();
+    const [searchQuery, setSearchQuery] = useState('');
+    const isChangeFunnel = !!selectedID;
+    const title = isChangeFunnel ? t('Change link') : t('Choose link to add');
+    useEffect(() => {
+        if (!open)
+            return;
+        const popoverPane = document.querySelector('.Polaris-Popover__Pane.Polaris-Scrollable');
+        if (popoverPane) {
+            popoverPane.style.overflowY = 'hidden';
+            popoverPane.style.overflowX = 'hidden';
+        }
+    }, [open]);
+    return (jsx(Popover, { active: open, activator: activator, onClose: onClose, preferredPosition: "below", preferredAlignment: "center", fluidContent: true, fullHeight: true, children: jsx(Popover.Pane, { children: jsx(Box, { paddingBlock: "200", width: "400px", children: jsxs(BlockStack, { gap: "300", children: [jsx(Box, { paddingInline: "300", children: jsxs(BlockStack, { gap: "300", children: [jsxs("div", { className: "flex flex-col gap-[2px]", children: [jsx(Text, { variant: "bodyMd", fontWeight: "semibold", as: "p", children: title }), jsx(Text, { variant: "bodyMd", tone: "subdued", fontWeight: "medium", as: "p", children: level !== 0
+                                                    ? t('Sorted by number of sessions')
+                                                    : t('Only links with sessions are shown') })] }), jsx(TextField, { label: t('Search link'), labelHidden: true, value: searchQuery, onChange: setSearchQuery, placeholder: t('Search link'), prefix: jsx(Icon, { source: SearchIcon }), clearButton: true, onClearButtonClick: () => setSearchQuery(''), autoComplete: "off" })] }) }), jsxs(Box, { children: [jsx(FunnelSelectionHeader, {}), jsx(FunnelSelectionContent, { ...props, searchQuery: searchQuery })] })] }) }) }) }));
+};
+
+export { FunnelSelectionPopover };

package/dist/esm/shared/charts/components/GFunnelChart/components/types.d.ts

@@ -10,6 +10,7 @@ export type OnChangeFunnelType = (data: IOnChangeFunnelParams) => void;
 export interface IFunnelChartAction {
     fixedLevel?: number;
     isDisabledAddICon?: boolean;
+    hideAddIcon?: boolean;
     lengthDisplayedLevels: number;
     listFunnelSelection?: IFunnelSelectionItem[];
     isFetchingNextPage?: boolean;