@dhis2/analytics 24.10.1 → 25.1.0

package/build/cjs/components/DataDimension/Calculation/DataElementSelector.js

@@ -0,0 +1,309 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _style = _interopRequireDefault(require("styled-jsx/style"));
+
+var _appRuntime = require("@dhis2/app-runtime");
+
+var _ui = require("@dhis2/ui");
+
+var _sortable = require("@dnd-kit/sortable");
+
+var _debounce = require("@react-hook/debounce");
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _dimensions = require("../../../api/dimensions.js");
+
+var _index = _interopRequireDefault(require("../../../locales/index.js"));
+
+var _dataTypes = require("../../../modules/dataTypes.js");
+
+var _DataElementOption = _interopRequireDefault(require("./DataElementOption.js"));
+
+var _DataElementSelectorStyle = _interopRequireDefault(require("./styles/DataElementSelector.style.js"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const getOptions = () => ({
+  [_dataTypes.TOTALS]: _index.default.t('Totals only'),
+  [_dataTypes.DETAIL]: _index.default.t('Details only')
+});
+
+const GroupSelector = _ref => {
+  var _dataTypes$DIMENSION_;
+
+  let {
+    currentValue,
+    onChange,
+    displayNameProp
+  } = _ref;
+  const dataEngine = (0, _appRuntime.useDataEngine)();
+  const [loading, setLoading] = (0, _react.useState)(true);
+  const [groups, setGroups] = (0, _react.useState)([]);
+  const defaultGroup = (_dataTypes$DIMENSION_ = _dataTypes.dataTypeMap[_dataTypes.DIMENSION_TYPE_DATA_ELEMENT]) === null || _dataTypes$DIMENSION_ === void 0 ? void 0 : _dataTypes$DIMENSION_.defaultGroup;
+  (0, _react.useEffect)(() => {
+    const fetchGroups = async () => {
+      setLoading(true);
+      const result = await (0, _dimensions.apiFetchGroups)(dataEngine, _dataTypes.DIMENSION_TYPE_DATA_ELEMENT, displayNameProp);
+      setGroups(result);
+      setLoading(false);
+    };
+
+    fetchGroups();
+  }, [dataEngine, displayNameProp]);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "jsx-".concat(_DataElementSelectorStyle.default.__hash) + " " + "group-select"
+  }, /*#__PURE__*/_react.default.createElement(_ui.SingleSelectField, {
+    selected: currentValue,
+    onChange: ref => onChange(ref.selected),
+    dense: true,
+    loading: loading,
+    loadingText: _index.default.t('Loading'),
+    dataTest: 'data-element-group-select'
+  }, defaultGroup ? /*#__PURE__*/_react.default.createElement(_ui.SingleSelectOption, {
+    value: defaultGroup.id,
+    key: defaultGroup.id,
+    label: defaultGroup.getName(),
+    dataTest: "data-element-group-select-option-".concat(defaultGroup.id)
+  }) : null, !loading ? groups.map(group => /*#__PURE__*/_react.default.createElement(_ui.SingleSelectOption, {
+    value: group.id,
+    key: group.id,
+    label: group.name,
+    dataTest: "data-element-group-select-option-".concat(group.id)
+  })) : null), /*#__PURE__*/_react.default.createElement(_style.default, {
+    id: _DataElementSelectorStyle.default.__hash
+  }, _DataElementSelectorStyle.default));
+};
+
+GroupSelector.propTypes = {
+  currentValue: _propTypes.default.string.isRequired,
+  displayNameProp: _propTypes.default.string.isRequired,
+  onChange: _propTypes.default.func.isRequired
+};
+
+const DisaggregationSelector = _ref2 => {
+  let {
+    currentValue,
+    onChange
+  } = _ref2;
+  const options = getOptions();
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "jsx-".concat(_DataElementSelectorStyle.default.__hash) + " " + "group-select"
+  }, /*#__PURE__*/_react.default.createElement(_ui.SingleSelectField, {
+    selected: currentValue,
+    onChange: ref => onChange(ref.selected),
+    dense: true,
+    dataTest: 'data-element-disaggregation-select'
+  }, Object.entries(options).map(option => /*#__PURE__*/_react.default.createElement(_ui.SingleSelectOption, {
+    value: option[0],
+    key: option[0],
+    label: option[1],
+    dataTest: "data-element-disaggregation-select-option-".concat(option[0])
+  }))), /*#__PURE__*/_react.default.createElement(_style.default, {
+    id: _DataElementSelectorStyle.default.__hash
+  }, _DataElementSelectorStyle.default));
+};
+
+DisaggregationSelector.propTypes = {
+  currentValue: _propTypes.default.string.isRequired,
+  onChange: _propTypes.default.func.isRequired
+};
+
+const DataElementSelector = _ref3 => {
+  let {
+    displayNameProp,
+    onDoubleClick
+  } = _ref3;
+  const dataEngine = (0, _appRuntime.useDataEngine)();
+  const [searchTerm, setSearchTerm] = (0, _react.useState)('');
+  const [group, setGroup] = (0, _react.useState)(_dataTypes.DIMENSION_TYPE_ALL);
+  const [subGroup, setSubGroup] = (0, _react.useState)(_dataTypes.TOTALS);
+  const [options, setOptions] = (0, _react.useState)([]);
+  const [loading, setLoading] = (0, _react.useState)(true);
+  const {
+    isSorting
+  } = (0, _sortable.useSortable)({});
+  const rootRef = (0, _react.useRef)();
+  const hasNextPageRef = (0, _react.useRef)(false);
+  const searchTermRef = (0, _react.useRef)(searchTerm);
+  const pageRef = (0, _react.useRef)(0);
+  const filterRef = (0, _react.useRef)({
+    dataType: _dataTypes.DIMENSION_TYPE_DATA_ELEMENT,
+    group,
+    subGroup
+  });
+
+  const fetchData = async scrollToTop => {
+    try {
+      setLoading(true);
+      const result = await (0, _dimensions.apiFetchOptions)({
+        dataEngine,
+        nameProp: displayNameProp,
+        filter: filterRef.current,
+        searchTerm: searchTermRef.current,
+        page: pageRef.current
+      });
+
+      if (result !== null && result !== void 0 && result.dimensionItems) {
+        const newOptions = result.dimensionItems.map(item => ({
+          label: item.name,
+          value: item.id,
+          type: item.dimensionItemType,
+          expression: item.expression
+        }));
+        setOptions(prevOptions => pageRef.current > 1 ? [...prevOptions, ...newOptions] : newOptions);
+        setLoading(false);
+      }
+
+      hasNextPageRef.current = result !== null && result !== void 0 && result.nextPage ? true : false;
+    } catch (error) {
+      // TODO handle errors
+      console.log('apiFetchOptions error: ', error);
+    } finally {
+      if (scrollToTop) {
+        rootRef.current.scrollTo({
+          top: 0
+        });
+      }
+    }
+  };
+
+  const debouncedFetchData = (0, _debounce.useDebounceCallback)(newSearchTerm => {
+    hasNextPageRef.current = false;
+    pageRef.current = 1;
+    searchTermRef.current = newSearchTerm;
+    fetchData(true);
+  }, 500);
+
+  const onSearchChange = _ref4 => {
+    let {
+      value
+    } = _ref4;
+    const newSearchTerm = value;
+    setSearchTerm(newSearchTerm); // debounce the fetch
+
+    debouncedFetchData(newSearchTerm);
+  };
+
+  const onFilterChange = newFilter => {
+    if (newFilter.group) {
+      setGroup(newFilter.group);
+      filterRef.current.group = newFilter.group;
+    }
+
+    if (newFilter.subGroup) {
+      setSubGroup(newFilter.subGroup);
+      filterRef.current.subGroup = newFilter.subGroup;
+    }
+
+    hasNextPageRef.current = false;
+    pageRef.current = 1;
+    fetchData(true);
+  };
+
+  const onEndReached = _ref5 => {
+    let {
+      isIntersecting
+    } = _ref5;
+
+    if (isIntersecting) {
+      // if hasNextPage is set it means at least 1 request already happened and there is
+      // another page, fetch the next page
+      if (hasNextPageRef.current) {
+        pageRef.current += 1;
+        fetchData();
+      } else if (pageRef.current === 0) {
+        // this is for fetching the initial page
+        pageRef.current = 1;
+        fetchData();
+      }
+    }
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "jsx-".concat(_DataElementSelectorStyle.default.__hash) + " " + "filter-wrapper"
+  }, /*#__PURE__*/_react.default.createElement("h4", {
+    className: "jsx-".concat(_DataElementSelectorStyle.default.__hash) + " " + "sub-header"
+  }, _index.default.t('Data elements')), /*#__PURE__*/_react.default.createElement(_ui.InputField, {
+    value: searchTerm,
+    onChange: onSearchChange,
+    placeholder: _index.default.t('Search by data element name'),
+    dense: true,
+    type: 'search',
+    dataTest: 'data-element-search'
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "jsx-".concat(_DataElementSelectorStyle.default.__hash) + " " + "selector-wrapper"
+  }, /*#__PURE__*/_react.default.createElement(GroupSelector, {
+    currentValue: group,
+    onChange: group => onFilterChange({
+      group
+    }),
+    displayNameProp: displayNameProp
+  }), /*#__PURE__*/_react.default.createElement(DisaggregationSelector, {
+    currentValue: subGroup,
+    onChange: subGroup => onFilterChange({
+      subGroup
+    })
+  }))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "jsx-".concat(_DataElementSelectorStyle.default.__hash) + " " + "dimension-list-container"
+  }, loading && /*#__PURE__*/_react.default.createElement("div", {
+    className: "jsx-".concat(_DataElementSelectorStyle.default.__hash) + " " + "dimension-list-overlay"
+  }, /*#__PURE__*/_react.default.createElement(_ui.CircularLoader, null)), /*#__PURE__*/_react.default.createElement("div", {
+    ref: rootRef,
+    onScroll: () => {
+      if (isSorting) {
+        rootRef.current.scrollTo({
+          top: 0
+        });
+      }
+    },
+    className: "jsx-".concat(_DataElementSelectorStyle.default.__hash) + " " + "dimension-list-scrollbox"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    "data-test": "dimension-list",
+    className: "jsx-".concat(_DataElementSelectorStyle.default.__hash) + " " + ((0, _classnames.default)('dimension-list-scroller', {
+      loading
+    }) || "")
+  }, Boolean(options.length) && options.map(_ref6 => {
+    let {
+      label,
+      value
+    } = _ref6;
+    return /*#__PURE__*/_react.default.createElement(_DataElementOption.default, {
+      key: value,
+      label: label,
+      value: value,
+      onDoubleClick: onDoubleClick
+    });
+  }), !loading && !options.length && /*#__PURE__*/_react.default.createElement("div", {
+    className: "jsx-".concat(_DataElementSelectorStyle.default.__hash) + " " + "empty-list"
+  }, searchTermRef.current ? _index.default.t('No data elements found for "{{- searchTerm}}"', {
+    searchTerm: searchTermRef.current
+  }) : _index.default.t('No data elements found')), /*#__PURE__*/_react.default.createElement("div", {
+    className: "jsx-".concat(_DataElementSelectorStyle.default.__hash) + " " + "scroll-detector"
+  }, /*#__PURE__*/_react.default.createElement(_ui.IntersectionDetector, {
+    onChange: onEndReached,
+    rootRef: rootRef
+  }))))), /*#__PURE__*/_react.default.createElement(_style.default, {
+    id: _DataElementSelectorStyle.default.__hash
+  }, _DataElementSelectorStyle.default));
+};
+
+DataElementSelector.propTypes = {
+  displayNameProp: _propTypes.default.string.isRequired,
+  onDoubleClick: _propTypes.default.func.isRequired
+};
+var _default = DataElementSelector;
+exports.default = _default;

package/build/cjs/components/DataDimension/Calculation/DndContext.js

@@ -0,0 +1,213 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.OPTIONS_PANEL = void 0;
+
+var _core = require("@dnd-kit/core");
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _DraggingItem = _interopRequireDefault(require("./DraggingItem.js"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+const OPTIONS_PANEL = 'Sortable';
+exports.OPTIONS_PANEL = OPTIONS_PANEL;
+
+const getIntersectionRatio = (entry, target) => {
+  const top = Math.max(target.top, entry.top);
+  const left = Math.max(target.left, entry.left);
+  const right = Math.min(target.left + target.width, entry.left + entry.width);
+  const bottom = Math.min(target.top + target.height, entry.top + entry.height);
+  const width = right - left;
+  const height = bottom - top;
+
+  if (left < right && top < bottom) {
+    const targetArea = target.width * target.height;
+    const entryArea = entry.width * entry.height;
+    const intersectionArea = width * height;
+    const intersectionRatio = intersectionArea / (targetArea + entryArea - intersectionArea);
+    return Number(intersectionRatio.toFixed(4));
+  } // Rectangles do not overlap, or overlap has an area of zero (edge/corner overlap)
+
+
+  return 0;
+};
+
+const sortCollisionsDesc = (_ref, _ref2) => {
+  let {
+    data: {
+      value: a
+    }
+  } = _ref;
+  let {
+    data: {
+      value: b
+    }
+  } = _ref2;
+  return b - a;
+};
+
+const rectIntersectionCustom = _ref3 => {
+  let {
+    pointerCoordinates,
+    droppableContainers
+  } = _ref3;
+  // create a rect around the pointerCoords for calculating the intersection
+  const pointerRectWidth = 40;
+  const pointerRectHeight = 40;
+  const pointerRect = {
+    width: pointerRectWidth,
+    height: pointerRectHeight,
+    top: pointerCoordinates.y - pointerRectHeight / 2,
+    bottom: pointerCoordinates.y + pointerRectHeight / 2,
+    left: pointerCoordinates.x - pointerRectWidth / 2,
+    right: pointerCoordinates.x + pointerRectWidth / 2
+  };
+  const collisions = [];
+
+  for (const droppableContainer of droppableContainers) {
+    const {
+      id,
+      rect: {
+        current: rect
+      }
+    } = droppableContainer;
+
+    if (rect) {
+      const intersectionRatio = getIntersectionRatio(rect, pointerRect);
+
+      if (intersectionRatio > 0) {
+        collisions.push({
+          id,
+          data: {
+            droppableContainer,
+            value: intersectionRatio
+          }
+        });
+      }
+    }
+  }
+
+  return collisions.sort(sortCollisionsDesc);
+};
+
+const isInteractiveElement = el => {
+  const interactiveElements = ['button', 'input', 'textarea', 'select', 'option'];
+
+  if (interactiveElements.includes(el.tagName.toLowerCase())) {
+    return true;
+  }
+
+  return false;
+}; // disable dragging if user is in an input
+
+
+class PointerSensor extends _core.PointerSensor {}
+
+_defineProperty(PointerSensor, "activators", [{
+  eventName: 'onPointerDown',
+  handler: _ref7 => {
+    let {
+      nativeEvent: event
+    } = _ref7;
+
+    if (!event.isPrimary || event.button !== 0 || isInteractiveElement(event.target)) {
+      return false;
+    }
+
+    return true;
+  }
+}]);
+
+const OuterDndContext = _ref4 => {
+  let {
+    children,
+    onDragEnd,
+    onDragStart
+  } = _ref4;
+  const [draggingItem, setDraggingItem] = (0, _react.useState)(null);
+  const sensor = (0, _core.useSensor)(PointerSensor, {
+    activationConstraint: {
+      distance: 15
+    }
+  });
+  const sensors = (0, _core.useSensors)(sensor);
+
+  const handleDragStart = _ref5 => {
+    let {
+      active
+    } = _ref5;
+    setDraggingItem(active.data.current);
+    onDragStart && onDragStart();
+  };
+
+  const handleDragCancel = () => {
+    setDraggingItem(null);
+  };
+
+  const handleDragEnd = _ref6 => {
+    var _over$data, _over$data$current, _over$data$current$so, _over$data$current2, _over$data$current3;
+
+    let {
+      active,
+      over
+    } = _ref6;
+
+    if (!(over !== null && over !== void 0 && over.id) || (over === null || over === void 0 ? void 0 : (_over$data = over.data) === null || _over$data === void 0 ? void 0 : (_over$data$current = _over$data.current) === null || _over$data$current === void 0 ? void 0 : (_over$data$current$so = _over$data$current.sortable) === null || _over$data$current$so === void 0 ? void 0 : _over$data$current$so.containerId) === OPTIONS_PANEL || !active.data.current) {
+      // dropped over non-droppable or over options panel
+      handleDragCancel();
+      return;
+    }
+
+    const item = {
+      id: active.id,
+      sourceContainerId: active.data.current.sortable.containerId,
+      sourceIndex: active.data.current.sortable.index,
+      data: {
+        label: active.data.current.label,
+        value: active.data.current.value,
+        type: active.data.current.type
+      }
+    };
+    const destination = {
+      containerId: ((_over$data$current2 = over.data.current) === null || _over$data$current2 === void 0 ? void 0 : _over$data$current2.sortable.containerId) || over.id,
+      index: (_over$data$current3 = over.data.current) === null || _over$data$current3 === void 0 ? void 0 : _over$data$current3.sortable.index
+    };
+    onDragEnd({
+      item,
+      destination
+    });
+    setDraggingItem(null);
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_core.DndContext, {
+    collisionDetection: rectIntersectionCustom,
+    onDragStart: handleDragStart,
+    onDragEnd: handleDragEnd,
+    onDragCancel: handleDragCancel,
+    sensors: sensors
+  }, children, /*#__PURE__*/_react.default.createElement(_core.DragOverlay, {
+    dropAnimation: null
+  }, draggingItem ? /*#__PURE__*/_react.default.createElement("span", {
+    className: "dragOverlay"
+  }, /*#__PURE__*/_react.default.createElement(_DraggingItem.default, draggingItem)) : null));
+};
+
+OuterDndContext.propTypes = {
+  onDragEnd: _propTypes.default.func.isRequired,
+  children: _propTypes.default.node,
+  onDragStart: _propTypes.default.func
+};
+var _default = OuterDndContext;
+exports.default = _default;

package/build/cjs/components/DataDimension/Calculation/DragHandleIcon.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = /*#__PURE__*/_react.default.createElement("svg", {
+  height: "16",
+  viewBox: "0 0 16 16",
+  width: "16",
+  xmlns: "http://www.w3.org/2000/svg"
+}, /*#__PURE__*/_react.default.createElement("path", {
+  d: "M6 11a1 1 0 110 2 1 1 0 010-2zm4 0a1 1 0 110 2 1 1 0 010-2zM6 7a1 1 0 110 2 1 1 0 010-2zm4 0a1 1 0 110 2 1 1 0 010-2zM6 3a1 1 0 110 2 1 1 0 010-2zm4 0a1 1 0 110 2 1 1 0 010-2z",
+  fill: "#A0ADBA",
+  fillRule: "evenodd"
+}));
+
+exports.default = _default;

package/build/cjs/components/DataDimension/Calculation/DraggingItem.js

@@ -0,0 +1,58 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _style = _interopRequireDefault(require("styled-jsx/style"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _dataTypes = require("../../../modules/dataTypes.js");
+
+var _dimensionListItem = require("../../../modules/dimensionListItem.js");
+
+var _expressions = require("../../../modules/expressions.js");
+
+var _DraggingItemStyle = _interopRequireDefault(require("./styles/DraggingItem.style.js"));
+
+var _FormulaItemStyle = _interopRequireDefault(require("./styles/FormulaItem.style.js"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const DraggingItem = _ref => {
+  let {
+    label,
+    type,
+    value
+  } = _ref;
+  const displayLabel = type === _expressions.EXPRESSION_TYPE_NUMBER ? value || label : label;
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "jsx-".concat(_DraggingItemStyle.default.__hash, " jsx-").concat(_FormulaItemStyle.default.__hash) + " " + ((0, _classnames.default)('dragging', 'content', {
+      operator: type === _expressions.EXPRESSION_TYPE_OPERATOR,
+      number: type === _expressions.EXPRESSION_TYPE_NUMBER,
+      data: type === _expressions.EXPRESSION_TYPE_DATA
+    }) || "")
+  }, type === _expressions.EXPRESSION_TYPE_DATA && /*#__PURE__*/_react.default.createElement("span", {
+    className: "jsx-".concat(_DraggingItemStyle.default.__hash, " jsx-").concat(_FormulaItemStyle.default.__hash) + " " + "icon"
+  }, (0, _dimensionListItem.getIcon)(_dataTypes.DIMENSION_TYPE_DATA_ELEMENT)), /*#__PURE__*/_react.default.createElement("span", {
+    className: "jsx-".concat(_DraggingItemStyle.default.__hash, " jsx-").concat(_FormulaItemStyle.default.__hash) + " " + "label"
+  }, displayLabel)), /*#__PURE__*/_react.default.createElement(_style.default, {
+    id: _DraggingItemStyle.default.__hash
+  }, _DraggingItemStyle.default), /*#__PURE__*/_react.default.createElement(_style.default, {
+    id: _FormulaItemStyle.default.__hash
+  }, _FormulaItemStyle.default));
+};
+
+DraggingItem.propTypes = {
+  label: _propTypes.default.string,
+  type: _propTypes.default.string,
+  value: _propTypes.default.string
+};
+var _default = DraggingItem;
+exports.default = _default;

package/build/cjs/components/DataDimension/Calculation/DropZone.js

@@ -0,0 +1,58 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _style = _interopRequireDefault(require("styled-jsx/style"));
+
+var _core = require("@dnd-kit/core");
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _DropZoneStyle = _interopRequireDefault(require("./styles/DropZone.style.js"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const DropZone = _ref => {
+  let {
+    firstElementId,
+    overLastDropZone
+  } = _ref;
+  const {
+    isOver,
+    setNodeRef,
+    active
+  } = (0, _core.useDroppable)({
+    id: 'firstdropzone'
+  });
+  let draggingOver = false;
+
+  if (overLastDropZone && !firstElementId) {
+    draggingOver = true;
+  } else {
+    draggingOver = firstElementId === (active === null || active === void 0 ? void 0 : active.id) ? false : isOver;
+  }
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    ref: setNodeRef,
+    className: "jsx-".concat(_DropZoneStyle.default.__hash) + " " + ((0, _classnames.default)('first-dropzone', {
+      'dragging-over': draggingOver,
+      empty: !firstElementId
+    }) || "")
+  }), /*#__PURE__*/_react.default.createElement(_style.default, {
+    id: _DropZoneStyle.default.__hash
+  }, _DropZoneStyle.default));
+};
+
+DropZone.propTypes = {
+  firstElementId: _propTypes.default.string,
+  overLastDropZone: _propTypes.default.bool
+};
+var _default = DropZone;
+exports.default = _default;