@gooddata/sdk-ui-analytical-designer 0.0.0-stage → 11.65.0-alpha.7

package/esm/components/buckets/AttributeDisplayFormDropdown.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// (C) 2021-2026 GoodData Corporation
+import { areObjRefsEqual } from "@gooddata/sdk-model";
+import { Dropdown, DropdownList } from "@gooddata/sdk-ui-kit";
+import { AttributeDisplayFormButton } from "./AttributeDisplayFormDropdownButton.js";
+import { AttributeDisplayFormDropdownItem } from "./AttributeDisplayFormDropdownItem.js";
+const ITEM_HEIGHT = 23;
+const ALIGN_POINTS = [
+    {
+        align: "bl tl",
+        offset: { x: 0, y: 1 },
+    },
+    {
+        align: "tl bl",
+        offset: { x: 0, y: -1 },
+    },
+];
+export function AttributeDisplayFormDropdown({ displayForms, selectedDisplayForm, onSelect, alignPoints, }) {
+    const getButtonLabel = () => displayForms.find((displayForm) => areObjRefsEqual(displayForm.ref, selectedDisplayForm)).title;
+    return (_jsx(Dropdown, { alignPoints: alignPoints ?? ALIGN_POINTS, closeOnMouseDrag: true, closeOnParentScroll: true, renderButton: ({ isOpen, toggleDropdown }) => (_jsx(AttributeDisplayFormButton, { text: getButtonLabel(), isOpened: isOpen, toggleDropdown: toggleDropdown })), renderBody: ({ closeDropdown }) => (_jsx(DropdownList, { className: "gd-attribute-display-form-dropdown-body s-attribute-display-form-dropdown-body", items: displayForms, itemHeight: ITEM_HEIGHT, renderItem: ({ item }) => {
+                const selected = areObjRefsEqual(item.ref, selectedDisplayForm);
+                const onClick = (displayForm) => {
+                    closeDropdown();
+                    if (!selected) {
+                        onSelect(displayForm);
+                    }
+                };
+                return (_jsx(AttributeDisplayFormDropdownItem, { displayForm: item, onClick: onClick, selected: selected }, item.id));
+            } })) }));
+}

package/esm/components/buckets/AttributeDisplayFormDropdownButton.d.ts

@@ -0,0 +1,9 @@
+import { type SyntheticEvent } from "react";
+export interface IToggleButtonProps {
+    text: string;
+    isOpened: boolean;
+    toggleDropdown: (e: SyntheticEvent) => void;
+}
+export type ToggleButtonProps = IToggleButtonProps;
+export declare function AttributeDisplayFormButton({ isOpened, text: title, toggleDropdown }: ToggleButtonProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=AttributeDisplayFormDropdownButton.d.ts.map

package/esm/components/buckets/AttributeDisplayFormDropdownButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AttributeDisplayFormDropdownButton.d.ts","sourceRoot":"","sources":["../../../src/components/buckets/AttributeDisplayFormDropdownButton.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AAO5C,MAAM,WAAW,kBAAkB;IAC/B,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,OAAO,CAAC;IAClB,cAAc,EAAE,CAAC,CAAC,EAAE,cAAc,KAAK,IAAI,CAAC;CAC/C;AAED,MAAM,MAAM,iBAAiB,GAAG,kBAAkB,CAAC;AAEnD,wBAAgB,0BAA0B,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,cAAc,EAAE,EAAE,iBAAiB,2CAyBtG"}

package/esm/components/buckets/AttributeDisplayFormDropdownButton.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import classNames from "classnames";
+import { useIntl } from "react-intl";
+import { Button } from "@gooddata/sdk-ui-kit";
+export function AttributeDisplayFormButton({ isOpened, text: title, toggleDropdown }) {
+    const intl = useIntl();
+    const buttonClassNames = classNames("gd-button-primary", "gd-button-small", "button-dropdown", "dropdown-button", "adi-attribute-display-form-button", "s-attribute-display-form-button", {
+        "is-active": isOpened,
+    });
+    const iconRight = isOpened ? "gd-icon-navigateup" : "gd-icon-navigatedown";
+    const buttonTitle = intl.formatMessage({ id: "dashboard.bucket_item.display_form" }, { title });
+    return (_jsx(Button, { className: buttonClassNames, title: buttonTitle, value: buttonTitle, onClick: toggleDropdown, iconRight: iconRight }));
+}

package/esm/components/buckets/AttributeDisplayFormDropdownItem.d.ts

@@ -0,0 +1,9 @@
+import { type ObjRef } from "@gooddata/sdk-model";
+import { type ICacheItemDisplayForm } from "../../typings/state_objects.js";
+export interface IDisplayFormDropdownItemProps {
+    displayForm: ICacheItemDisplayForm;
+    onClick: (displayForm: ObjRef) => void;
+    selected: boolean;
+}
+export declare function AttributeDisplayFormDropdownItem(props: IDisplayFormDropdownItemProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=AttributeDisplayFormDropdownItem.d.ts.map

package/esm/components/buckets/AttributeDisplayFormDropdownItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AttributeDisplayFormDropdownItem.d.ts","sourceRoot":"","sources":["../../../src/components/buckets/AttributeDisplayFormDropdownItem.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAiC,KAAK,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAIjF,OAAO,EAAE,KAAK,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;AAuB5E,MAAM,WAAW,6BAA6B;IAC1C,WAAW,EAAE,qBAAqB,CAAC;IACnC,OAAO,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,QAAQ,EAAE,OAAO,CAAC;CACrB;AAED,wBAAgB,gCAAgC,CAAC,KAAK,EAAE,6BAA6B,2CA6BpF"}

package/esm/components/buckets/AttributeDisplayFormDropdownItem.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import classNames from "classnames";
+import { ShortenedText } from "@gooddata/sdk-ui-kit";
+import { simplifyText } from "@gooddata/util";
+const getDisplayFormIcon = (type) => {
+    switch (type) {
+        case "GDC.link":
+            return "gd-icon-hyperlink-warning";
+        case "GDC.image":
+            return "gd-icon-image";
+        case "GDC.geo.pin":
+        case "GDC.geo.pin_latitude":
+        case "GDC.geo.pin_longitude":
+        case "GDC.geo.area":
+            return "gd-icon-earth";
+        default:
+            return "gd-icon-label-warning";
+    }
+};
+const tooltipAlignPoints = [
+    { align: "cl cr", offset: { x: -10, y: 0 } },
+    { align: "cr cl", offset: { x: 10, y: 0 } },
+];
+export function AttributeDisplayFormDropdownItem(props) {
+    const { displayForm, selected } = props;
+    const { title } = displayForm;
+    const className = classNames("gd-list-item", "gd-attribute-display-form", "s-attribute-display-form-name", `s-attribute-display-form-name-${simplifyText(title)}`, getDisplayFormIcon(displayForm.type), {
+        "is-selected": selected,
+    });
+    const handleOnClick = (e) => {
+        const { displayForm, onClick } = props;
+        onClick(displayForm.ref);
+        e.preventDefault();
+    };
+    return (_jsx("div", { className: className, onClick: handleOnClick, children: _jsx(ShortenedText, { className: "gd-attribute-display-form-name", tooltipAlignPoints: tooltipAlignPoints, children: title }) }));
+}

package/esm/components/buckets/Bucket.d.ts

@@ -0,0 +1,13 @@
+import { type IVisualizationClass } from "@gooddata/sdk-model";
+import { type IDecoratedBucket, type IDecoratedBuckets } from "../../typings/buckets.js";
+interface IBucketProps {
+    buckets: IDecoratedBuckets;
+    bucket: IDecoratedBucket;
+    visualizationClass: IVisualizationClass;
+    configurationPanelCollapsed: boolean;
+    setConfigurationPanelCollapsed: (state: boolean) => void;
+    localIdentifier?: string;
+}
+export declare const Bucket: import("react").MemoExoticComponent<({ buckets, bucket, visualizationClass, configurationPanelCollapsed, setConfigurationPanelCollapsed, localIdentifier, }: IBucketProps) => import("react/jsx-runtime").JSX.Element>;
+export {};
+//# sourceMappingURL=Bucket.d.ts.map

package/esm/components/buckets/Bucket.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Bucket.d.ts","sourceRoot":"","sources":["../../../src/components/buckets/Bucket.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,KAAK,mBAAmB,EAAE,MAAM,qBAAqB,CAAC;AAQ/D,OAAO,EAAE,KAAK,gBAAgB,EAAE,KAAK,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAQzF,UAAU,YAAY;IAClB,OAAO,EAAE,iBAAiB,CAAC;IAC3B,MAAM,EAAE,gBAAgB,CAAC;IACzB,kBAAkB,EAAE,mBAAmB,CAAC;IACxC,2BAA2B,EAAE,OAAO,CAAC;IACrC,8BAA8B,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACzD,eAAe,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED,eAAO,MAAM,MAAM,+JAOhB,YAAY,6CA+Kb,CAAC"}

package/esm/components/buckets/Bucket.js

@@ -0,0 +1,120 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// (C) 2007-2026 GoodData Corporation
+import { memo, useEffect, useRef, useState } from "react";
+import classNames from "classnames";
+import { useSelector } from "react-redux";
+import { Bubble, BubbleHoverTrigger } from "@gooddata/sdk-ui-kit";
+import { STACK } from "../../constants/bucket.js";
+import { canAddItems, isWithinLimit } from "../../models/bucket_rules.js";
+import { EMPTY_BUCKET_LABEL } from "../../models/decorated_bucket.js";
+import { isOptionalStackingCheckboxVisible as isOptionalStackingCheckboxVisibleSelector } from "../../selectors/optional_stacking_selector.js";
+import { getVisualizationClassType } from "../../services/visualization_class_service.js";
+import { BucketContent } from "./BucketContent.js";
+import { BucketIcon } from "./BucketIcon.js";
+import { MeasureConfiguration } from "./MeasureConfiguration.js";
+import { OptionalStacking } from "./OptionalStacking.js";
+export const Bucket = memo(function Bucket({ buckets, bucket, visualizationClass, configurationPanelCollapsed, setConfigurationPanelCollapsed, localIdentifier = "", }) {
+    const { isOptionalStackingCheckboxVisible } = useSelector(isOptionalStackingCheckboxVisibleSelector);
+    const containerRef = useRef(null);
+    const [shouldRenderBubble, setShouldRenderBubble] = useState(false);
+    const checkBucketOverflow = () => {
+        const containerWidth = Math.ceil(containerRef.current.getBoundingClientRect().width);
+        if (containerWidth > 0 && containerWidth < containerRef.current.scrollWidth) {
+            setShouldRenderBubble(true);
+        }
+        else {
+            setShouldRenderBubble(false);
+        }
+    };
+    useEffect(() => {
+        checkBucketOverflow();
+    });
+    const getItemDropContextForBucket = (bucket) => {
+        return {
+            bucket,
+            type: "BUCKET_ITEM",
+            bucketItem: null,
+            item: null,
+            index: -1,
+            to: null,
+            dragged: null,
+            from: null,
+            renderDraggedItemElement: null,
+        };
+    };
+    const getBucketClasses = () => {
+        const isEmpty = bucket.items.length === 0;
+        const bucketDropContext = getItemDropContextForBucket(bucket);
+        const canAddMetricsStacks = canAddItems(bucketDropContext);
+        const canAdd = canAddMetricsStacks && isWithinLimit(bucketDropContext);
+        return classNames("adi-bucket", {
+            "bucket-with-warn-message": !canAddMetricsStacks,
+            "s-bucket-empty": isEmpty,
+            "s-bucket-not-empty": !isEmpty,
+            "has-rounded-corners": !canAdd,
+            "bucket-collapsed": !configurationPanelCollapsed,
+        }, nameClass());
+    };
+    const getHeaderClasses = () => {
+        return classNames("bucket-title", "s-bucket-title", `${nameClass()}-title`, `bucket-title-${transformedLocalIdentifier()}-${localVisualizationType()}`);
+    };
+    const getWarningMessageClasses = () => {
+        return classNames("adi-stack-warn", "s-stack-warn", {
+            "optional-stacking-checkbox-visible": isOptionalStackingCheckboxVisible,
+        });
+    };
+    const localVisualizationType = () => {
+        return getVisualizationClassType(visualizationClass);
+    };
+    const transformedLocalIdentifier = () => {
+        const localIdent = localIdentifier;
+        switch (localIdent) {
+            case "measures":
+                return "metrics";
+            case "secondary_measures":
+                return "secondary-metrics";
+            case "view":
+            case "trend":
+            case "attribute":
+                return "categories";
+            case "stack":
+            case "segment":
+                return "stacks";
+            default:
+                return localIdent;
+        }
+    };
+    const nameClass = () => {
+        return `s-bucket-${localIdentifier}`;
+    };
+    const collapseConfigurationPanel = () => {
+        if (!configurationPanelCollapsed) {
+            setConfigurationPanelCollapsed(true);
+        }
+    };
+    const renderHeader = () => {
+        const title = bucket.title;
+        const itemsCount = bucket.items.length;
+        const subtitle = bucket.subtitle;
+        const icon = bucket.icon;
+        // Buckets without a subtitle keep the EMPTY_BUCKET_LABEL sentinel default; treat
+        // it as "no subtitle" so the raw key never leaks into the panel (e.g. the rows and
+        // columns buckets of a pivot table, which never get a subtitle from the uiConfig).
+        const hasSubtitle = !!subtitle && subtitle !== EMPTY_BUCKET_LABEL;
+        return (_jsxs("div", { className: getHeaderClasses(), onClick: () => collapseConfigurationPanel(), children: [_jsx(BucketIcon, { icon: icon }), _jsxs(BubbleHoverTrigger, { showDelay: 0, hideDelay: 0, children: [_jsxs("h3", { ref: containerRef, children: [title, buckets.length > 1 && hasSubtitle ? (_jsxs("span", { className: "s-bucket-subtitle bucket-subtitle", title: subtitle, children: [" ", "(", subtitle, ")"] })) : null, !configurationPanelCollapsed && itemsCount > 0 ? ` (${itemsCount})` : null] }), shouldRenderBubble ? (_jsxs(Bubble, { className: "bubble-primary", alignPoints: [{ align: "cr cl" }], children: [title, hasSubtitle ? ` (${subtitle})` : null] })) : null] }), _jsx(MeasureConfiguration, { localIdentifier: localIdentifier })] }));
+    };
+    const renderWarning = () => {
+        const warningMessage = bucket.warningMessage;
+        if (!warningMessage) {
+            return null;
+        }
+        return (_jsx("div", { className: getWarningMessageClasses(), dangerouslySetInnerHTML: { __html: warningMessage } }));
+    };
+    const renderOptionalStacking = () => {
+        if (localIdentifier === STACK) {
+            return _jsx(OptionalStacking, {});
+        }
+        return null;
+    };
+    return (_jsxs("div", { className: getBucketClasses(), children: [renderHeader(), configurationPanelCollapsed ? (_jsxs("div", { className: "bucket-container", children: [_jsx(BucketContent, { buckets: buckets, bucket: bucket }), renderWarning(), renderOptionalStacking()] })) : (_jsx("div", { className: "bucket-contents" }))] }));
+});

package/esm/components/buckets/BucketContent.d.ts

@@ -0,0 +1,9 @@
+import { type IDecoratedBucket, type IDecoratedBuckets } from "../../typings/buckets.js";
+interface IBucketContentOwnProps {
+    buckets: IDecoratedBuckets;
+    bucket: IDecoratedBucket;
+}
+type BucketContentProps = IBucketContentOwnProps;
+export declare const BucketContent: import("react").MemoExoticComponent<({ buckets, bucket }: BucketContentProps) => import("react/jsx-runtime").JSX.Element>;
+export {};
+//# sourceMappingURL=BucketContent.d.ts.map

package/esm/components/buckets/BucketContent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BucketContent.d.ts","sourceRoot":"","sources":["../../../src/components/buckets/BucketContent.tsx"],"names":[],"mappings":"AAeA,OAAO,EACH,KAAK,gBAAgB,EAErB,KAAK,iBAAiB,EACzB,MAAM,0BAA0B,CAAC;AAOlC,UAAU,sBAAsB;IAC5B,OAAO,EAAE,iBAAiB,CAAC;IAC3B,MAAM,EAAE,gBAAgB,CAAC;CAC5B;AAED,KAAK,kBAAkB,GAAG,sBAAsB,CAAC;AAUjD,eAAO,MAAM,aAAa,4DAAoD,kBAAkB,6CAkF9F,CAAC"}

package/esm/components/buckets/BucketContent.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// (C) 2007-2026 GoodData Corporation
+import { memo } from "react";
+import { shallowEqual, useSelector } from "react-redux";
+import { canAddItems, isAllowedToAdd, isAllowedToReorder, isAllowedToReplace, isWithinLimit, } from "../../models/bucket_rules.js";
+import { bucketContentSelector } from "../../selectors/buckets_selector.js";
+import { BucketDropTarget } from "./BucketDropTarget.js";
+import { BucketItem } from "./BucketItem.js";
+import { BucketReorderableItem } from "./BucketReorderableItem.js";
+const itemStyle = { position: "relative" };
+export const BucketContent = memo(function BucketContent({ buckets, bucket }) {
+    const { showAddItemButton = false } = useSelector((state) => bucketContentSelector(state, { bucket }), shallowEqual);
+    const ruleFunc = (func, { buckets, to, bucket }) => {
+        // an empty drag hands over a PARTIAL context; the rules probe the optional fields
+        return (draggedData) => func({ ...draggedData, to, bucket }, buckets);
+    };
+    const itemIsAllowedToDrop = (params) => {
+        return ruleFunc(isAllowedToAdd, params);
+    };
+    const itemIsAllowedToReorder = (params) => {
+        return ruleFunc(isAllowedToReorder, params);
+    };
+    const itemIsAllowedToReplace = (params) => {
+        return ruleFunc(isAllowedToReplace, params);
+    };
+    const items = bucket.items;
+    const dropProps = {
+        buckets,
+        bucket,
+        to: bucket.original?.localIdentifier,
+    };
+    const allowedToDrop = itemIsAllowedToDrop(dropProps);
+    const allowedToReorder = itemIsAllowedToReorder(dropProps);
+    const allowedToReplace = itemIsAllowedToReplace(dropProps);
+    const canDropMoreItems = ruleFunc(canAddItems, dropProps)();
+    const isWithinLimitFn = ruleFunc(isWithinLimit, dropProps);
+    return (_jsxs("div", { className: "bucket-contents", children: [items.length ? (_jsx("ul", { children: items.map((item, idx) => (_jsx("li", { style: itemStyle, children: bucket.allowsReordering && canDropMoreItems ? (_jsx(BucketReorderableItem, { index: idx, bucketItem: item, bucket: bucket, bucketPosition: idx, itemIsAllowedToReorder: allowedToReorder, itemIsAllowedToReplace: allowedToReplace, isWithinLimit: isWithinLimitFn, dragHandle: true })) : (_jsx(BucketItem, { index: idx, bucketItem: item, bucket: bucket, bucketPosition: idx, itemIsAllowedToDrop: allowedToReplace, dragHandle: true })) }, idx))) })) : (_jsx("div", { className: "empty" })), canDropMoreItems ? (_jsx(BucketDropTarget, { bucket: bucket, itemIsAllowedToDrop: allowedToDrop, showAddItemButton: showAddItemButton })) : null] }));
+});

package/esm/components/buckets/BucketDropTarget.d.ts

@@ -0,0 +1,22 @@
+import { type DropTargetMonitor } from "@evil-internetmann/react-dnd";
+import { type IDecoratedBucket, type IRawBucketItem } from "../../typings/buckets.js";
+import { type IInjectedDropTargetProps, type IIsAllowedToDrop } from "../../typings/drag_and_drop.js";
+import { type ICatalogEntry } from "../../typings/state_objects.js";
+interface IBucketDropTargetOwnProps {
+    bucket: IDecoratedBucket;
+    itemIsAllowedToDrop?: IIsAllowedToDrop;
+    showAddItemButton?: boolean;
+}
+interface IBucketDropTargetDropConfigProps extends IBucketDropTargetOwnProps {
+    onCatalogItemDropped: (localIdentifier: string, catalogItem: ICatalogEntry) => void;
+    onItemSwapped: (localIdentifier: string, from: IRawBucketItem, to: IRawBucketItem) => void;
+}
+export interface IBucketDropTargetProps extends IBucketDropTargetOwnProps, IInjectedDropTargetProps {
+}
+export declare const BucketDropTarget: import("react").MemoExoticComponent<({ bucket, showAddItemButton, canDrop: canDropProp, isOver: isOverProp, itemIsAllowedToDrop, }: IBucketDropTargetProps) => import("react/jsx-runtime").JSX.Element>;
+export declare const dropConfig: {
+    drop(props: IBucketDropTargetDropConfigProps, monitor: DropTargetMonitor): void;
+    canDrop(props: Partial<IBucketDropTargetDropConfigProps>, monitor: DropTargetMonitor): boolean;
+};
+export {};
+//# sourceMappingURL=BucketDropTarget.d.ts.map

package/esm/components/buckets/BucketDropTarget.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BucketDropTarget.d.ts","sourceRoot":"","sources":["../../../src/components/buckets/BucketDropTarget.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,iBAAiB,EAAW,MAAM,8BAA8B,CAAC;AAc/E,OAAO,EAAE,KAAK,gBAAgB,EAAmB,KAAK,cAAc,EAAE,MAAM,0BAA0B,CAAC;AACvG,OAAO,EAEH,KAAK,wBAAwB,EAC7B,KAAK,gBAAgB,EACxB,MAAM,gCAAgC,CAAC;AACxC,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,gCAAgC,CAAC;AAgDpE,UAAU,yBAAyB;IAC/B,MAAM,EAAE,gBAAgB,CAAC;IACzB,mBAAmB,CAAC,EAAE,gBAAgB,CAAC;IACvC,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC/B;AAED,UAAU,gCAAiC,SAAQ,yBAAyB;IACxE,oBAAoB,EAAE,CAAC,eAAe,EAAE,MAAM,EAAE,WAAW,EAAE,aAAa,KAAK,IAAI,CAAC;IACpF,aAAa,EAAE,CAAC,eAAe,EAAE,MAAM,EAAE,IAAI,EAAE,cAAc,EAAE,EAAE,EAAE,cAAc,KAAK,IAAI,CAAC;CAC9F;AAED,MAAM,WAAW,sBAAuB,SAAQ,yBAAyB,EAAE,wBAAwB;CAAG;AAEtG,eAAO,MAAM,gBAAgB,sIAM1B,sBAAsB,6CAiLvB,CAAC;AAEH,eAAO,MAAM,UAAU;IACnB,IAAI,QAAQ,gCAAgC,WAAW,iBAAiB,GAAG,IAAI;IAoB/E,OAAO,QAAQ,OAAO,CAAC,gCAAgC,CAAC,WAAW,iBAAiB,GAAG,OAAO;CAMjG,CAAC"}

package/esm/components/buckets/BucketDropTarget.js

@@ -0,0 +1,186 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// (C) 2007-2026 GoodData Corporation
+import { memo, useCallback } from "react";
+import { useDrop } from "@evil-internetmann/react-dnd";
+import classNames from "classnames";
+import { FormattedMessage, defineMessage } from "react-intl";
+import { useDispatch, useSelector } from "react-redux";
+import { Bubble, BubbleHoverTrigger } from "@gooddata/sdk-ui-kit";
+import { dropCatalogItem, swapBucketItem } from "../../actions/dnd_actions.js";
+import { COLOR, LOCATION, METRIC_IDENTIFIERS, SEGMENT, SIZE } from "../../constants/bucket.js";
+import { GEO_ATTRIBUTE } from "../../constants/catalog_filters.js";
+import { BUCKET_ITEM, CATALOG_LIST_ITEM } from "../../constants/drag_item_types.js";
+import { isLocationIconEnabled as isLocationIconEnabledSelector } from "../../services/reference_point_service.js";
+import { addArithmeticMeasure } from "../../store/arithmetic_measures/arithmetic_measures_actions.js";
+const bucketAddPlaceholderMessageIds = {
+    "metric.fact.attribute": defineMessage({ id: "dashboard.bucket.metric.fact.attribute.add_placeholder" })
+        .id,
+    "metric.attribute": defineMessage({ id: "dashboard.bucket.metric.attribute.add_placeholder" }).id,
+    "metric.fact.attribute.geo_attribute": defineMessage({
+        id: "dashboard.bucket.metric.fact.attribute.geo_attribute.add_placeholder",
+    }).id,
+    "attribute.date": defineMessage({ id: "dashboard.bucket.attribute.date.add_placeholder" }).id,
+    "attribute.metric.date": defineMessage({ id: "dashboard.bucket.attribute.metric.date.add_placeholder" })
+        .id,
+    "geo_attribute.attribute.date": defineMessage({
+        id: "dashboard.bucket.geo_attribute.attribute.date.add_placeholder",
+    }).id,
+    "geo_attribute.attribute.metric.date": defineMessage({
+        id: "dashboard.bucket.geo_attribute.attribute.metric.date.add_placeholder",
+    }).id,
+    geo_attribute: defineMessage({ id: "dashboard.bucket.geo_attribute.add_placeholder" }).id,
+    "attribute.geo_attribute": defineMessage({
+        id: "dashboard.bucket.attribute.geo_attribute.add_placeholder",
+    }).id,
+    "metric.fact": defineMessage({ id: "dashboard.bucket.metric.fact.add_placeholder" }).id,
+    date: defineMessage({ id: "dashboard.bucket.date.add_placeholder" }).id,
+    attribute: defineMessage({ id: "dashboard.bucket.attribute.add_placeholder" }).id,
+};
+const bucketDropzoneHintMessageIds = {
+    "metric.fact.attribute": defineMessage({ id: "dashboard.bucket.metric.fact.attribute.dropzone_hint" }).id,
+    "attribute.date": defineMessage({ id: "dashboard.bucket.attribute.date.dropzone_hint" }).id,
+    geo_attribute: defineMessage({ id: "dashboard.bucket.geo_attribute.dropzone_hint" }).id,
+    "attribute.geo_attribute": defineMessage({ id: "dashboard.bucket.attribute.geo_attribute.dropzone_hint" })
+        .id,
+    "metric.attribute": defineMessage({ id: "dashboard.bucket.metric.attribute.dropzone_hint" }).id,
+    "metric.fact.attribute.geo_attribute": defineMessage({
+        id: "dashboard.bucket.metric.fact.attribute.geo_attribute.dropzone_hint",
+    }).id,
+    "metric.fact": defineMessage({ id: "dashboard.bucket.metric.fact.dropzone_hint" }).id,
+    date: defineMessage({ id: "dashboard.bucket.date.dropzone_hint" }).id,
+    attribute: defineMessage({ id: "dashboard.bucket.attribute.dropzone_hint" }).id,
+};
+const bucketMetricAddButtonPlaceholderMessageIds = {
+    "metric.fact.attribute": defineMessage({
+        id: "dashboard.bucket.metric.fact.attribute.add_metric_button.add_placeholder",
+    }).id,
+};
+export const BucketDropTarget = memo(function BucketDropTarget({ bucket, showAddItemButton = false, canDrop: canDropProp, isOver: isOverProp, itemIsAllowedToDrop, }) {
+    const isLocationIconEnabled = useSelector(isLocationIconEnabledSelector);
+    const dispatch = useDispatch();
+    const onCatalogItemDropped = useCallback((localIdentifier, catalogItem) => {
+        dispatch(dropCatalogItem(localIdentifier, catalogItem));
+    }, [dispatch]);
+    const onItemSwapped = useCallback((localIdentifier, from, to) => {
+        dispatch(swapBucketItem(localIdentifier, from, to));
+    }, [dispatch]);
+    const onAddArithmeticMeasureClick = useCallback((bucketLocalIdentifier) => {
+        dispatch(addArithmeticMeasure(bucketLocalIdentifier));
+    }, [dispatch]);
+    const [{ canDrop, isOver }, dropRef] = useDrop(() => ({
+        accept: [CATALOG_LIST_ITEM, BUCKET_ITEM],
+        drop: (_item, monitor) => {
+            dropConfig.drop({
+                bucket,
+                showAddItemButton,
+                onCatalogItemDropped,
+                onItemSwapped,
+            }, monitor);
+        },
+        canDrop: (_item, monitor) => dropConfig.canDrop({ bucket, itemIsAllowedToDrop }, monitor),
+        collect: (monitor) => ({
+            canDrop: monitor.canDrop(),
+            isOver: monitor.isOver(),
+        }),
+    }), [bucket, showAddItemButton, isLocationIconEnabled, itemIsAllowedToDrop]);
+    const effectiveCanDrop = canDropProp ?? canDrop;
+    const effectiveIsOver = isOverProp ?? isOver;
+    const getBucketLocalIdentifier = () => {
+        return bucket.localIdentifier;
+    };
+    const handleAddArithmeticMeasureClick = () => {
+        onAddArithmeticMeasureClick(bucket.localIdentifier);
+    };
+    const getAcceptsInBucket = () => {
+        const localIdentifier = getBucketLocalIdentifier();
+        const accepts = bucket.accepts ?? [];
+        if (!isLocationIconEnabled)
+            return accepts;
+        switch (localIdentifier) {
+            case LOCATION:
+                return [GEO_ATTRIBUTE];
+            case SIZE:
+            case COLOR:
+            case SEGMENT:
+                return [...accepts, GEO_ATTRIBUTE];
+            default:
+                return accepts;
+        }
+    };
+    const renderInvitation = () => {
+        const accepts = getAcceptsInBucket();
+        const acceptsJoinedStr = accepts.join(".");
+        const localIdentifier = getBucketLocalIdentifier();
+        let dropzoneMessageId = "";
+        if (canDrop) {
+            dropzoneMessageId = defineMessage({ id: "dashboard.bucket.drop" }).id;
+        }
+        else if (accepts.length) {
+            const acceptsKey = acceptsJoinedStr;
+            if (showAddItemButton && METRIC_IDENTIFIERS.includes(localIdentifier)) {
+                dropzoneMessageId =
+                    bucketMetricAddButtonPlaceholderMessageIds[acceptsJoinedStr] ??
+                        bucketAddPlaceholderMessageIds[acceptsKey] ??
+                        `dashboard.bucket.${acceptsJoinedStr}.add_metric_button.add_placeholder`;
+            }
+            else {
+                dropzoneMessageId =
+                    bucketAddPlaceholderMessageIds[acceptsKey] ??
+                        `dashboard.bucket.${acceptsJoinedStr}.add_placeholder`;
+            }
+        }
+        else {
+            return null;
+        }
+        const invitationsClassNames = classNames("adi-bucket-invitation", {
+            "adi-bucket-invitation-with-button": showAddItemButton,
+        }, `s-bucket-invitation-${localIdentifier}`);
+        const bubbleMessageId = bucketDropzoneHintMessageIds[acceptsJoinedStr] ??
+            `dashboard.bucket.${acceptsJoinedStr}.dropzone_hint`;
+        return (_jsxs(BubbleHoverTrigger, { showDelay: 0, hideDelay: 0, children: [_jsx("div", { className: invitationsClassNames, children: _jsx("div", { className: "adi-bucket-invitation-inner", children: _jsx(FormattedMessage, { id: dropzoneMessageId, values: {
+                                factIcon: _jsx("span", { className: "fact-field-icon" }),
+                                metricIcon: _jsx("span", { className: "metric-field-icon" }),
+                                attrIcon: _jsx("span", { className: "attr-field-icon" }),
+                                geoAttrIcon: _jsx("span", { className: "geo-attr-field-icon" }),
+                                dateIcon: _jsx("span", { className: "date-field-icon" }),
+                            } }) }) }), _jsx(Bubble, { className: "bubble-primary", alignPoints: [{ align: "cr cl" }], children: _jsx(FormattedMessage, { id: bubbleMessageId }) })] }));
+    };
+    const renderAddItemButton = () => {
+        const plusButtonClass = classNames("adi-bucket-add-item-button", "gd-icon-add", {
+            "adi-bucket-add-item-button-active": showAddItemButton,
+        }, "s-bucket-add-arithmetic-measure-button", `s-bucket-add-arithmetic-measure-button-${getBucketLocalIdentifier()}`);
+        return (_jsx("div", { className: plusButtonClass, onClick: handleAddArithmeticMeasureClick, children: _jsx(FormattedMessage, { id: "dashboard.bucket.create_arithmetic_measure", tagName: "span" }) }));
+    };
+    const items = bucket.items ?? [];
+    const canAcceptMoreItems = (bucket.itemsLimit ?? Infinity) > items.length;
+    const dropZoneClassNames = classNames("adi-bucket-dropzone", "s-bucket-dropzone", {
+        "adi-droppable-active": effectiveCanDrop,
+        "adi-droppable-hover": effectiveIsOver && effectiveCanDrop,
+    });
+    return (_jsxs("div", { className: classNames({ invisible: !canAcceptMoreItems }), ref: dropRef, children: [_jsx("hr", { className: "adi-bucket-invitation-separator" }), _jsx("div", { className: dropZoneClassNames, "data-bubbletitlealignpoints": "cr cl", children: _jsxs("div", { className: "adi-bucket-invitation-outer", children: [renderInvitation(), renderAddItemButton()] }) })] }));
+});
+export const dropConfig = {
+    drop(props, monitor) {
+        const bucketOriginal = props.bucket.original;
+        const localIdentifier = bucketOriginal?.localIdentifier;
+        switch (monitor.getItemType()) {
+            case BUCKET_ITEM: {
+                const bucketItem = monitor.getItem().bucketItem;
+                props.onItemSwapped(localIdentifier, bucketItem, null);
+                break;
+            }
+            case CATALOG_LIST_ITEM: {
+                const catalogItem = monitor.getItem().item;
+                props.onCatalogItemDropped(localIdentifier, catalogItem);
+                break;
+            }
+            default:
+                break;
+        }
+    },
+    canDrop(props, monitor) {
+        const isAllowed = props.itemIsAllowedToDrop || (() => true);
+        const draggedItem = monitor.getItem();
+        return isAllowed(draggedItem);
+    },
+};

package/esm/components/buckets/BucketIcon.d.ts

@@ -0,0 +1,6 @@
+interface IBucketIconProps {
+    icon: string;
+}
+export declare function BucketIcon({ icon }: IBucketIconProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=BucketIcon.d.ts.map

package/esm/components/buckets/BucketIcon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BucketIcon.d.ts","sourceRoot":"","sources":["../../../src/components/buckets/BucketIcon.tsx"],"names":[],"mappings":"AAqKA,UAAU,gBAAgB;IACtB,IAAI,EAAE,MAAM,CAAC;CAChB;AAED,wBAAgB,UAAU,CAAC,EAAE,IAAI,EAAE,EAAE,gBAAgB,2CAYpD"}