@dhis2/analytics 24.10.0 → 25.0.0

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

@@ -0,0 +1,280 @@
+import _JSXStyle from "styled-jsx/style";
+import { useDataEngine } from '@dhis2/app-runtime';
+import { CircularLoader, InputField, IntersectionDetector, SingleSelectField, SingleSelectOption } from '@dhis2/ui';
+import { useSortable } from '@dnd-kit/sortable';
+import { useDebounceCallback } from '@react-hook/debounce';
+import cx from 'classnames';
+import PropTypes from 'prop-types';
+import React, { useEffect, useRef, useState } from 'react';
+import { apiFetchOptions, apiFetchGroups } from '../../../api/dimensions.js';
+import i18n from '../../../locales/index.js';
+import { TOTALS, DETAIL, DIMENSION_TYPE_ALL, DIMENSION_TYPE_DATA_ELEMENT, dataTypeMap as dataTypes } from '../../../modules/dataTypes.js';
+import DataElementOption from './DataElementOption.js';
+import styles from './styles/DataElementSelector.style.js';
+
+const getOptions = () => ({
+  [TOTALS]: i18n.t('Totals only'),
+  [DETAIL]: i18n.t('Details only')
+});
+
+const GroupSelector = _ref => {
+  var _dataTypes$DIMENSION_;
+
+  let {
+    currentValue,
+    onChange,
+    displayNameProp
+  } = _ref;
+  const dataEngine = useDataEngine();
+  const [loading, setLoading] = useState(true);
+  const [groups, setGroups] = useState([]);
+  const defaultGroup = (_dataTypes$DIMENSION_ = dataTypes[DIMENSION_TYPE_DATA_ELEMENT]) === null || _dataTypes$DIMENSION_ === void 0 ? void 0 : _dataTypes$DIMENSION_.defaultGroup;
+  useEffect(() => {
+    const fetchGroups = async () => {
+      setLoading(true);
+      const result = await apiFetchGroups(dataEngine, DIMENSION_TYPE_DATA_ELEMENT, displayNameProp);
+      setGroups(result);
+      setLoading(false);
+    };
+
+    fetchGroups();
+  }, [dataEngine, displayNameProp]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "jsx-".concat(styles.__hash) + " " + "group-select"
+  }, /*#__PURE__*/React.createElement(SingleSelectField, {
+    selected: currentValue,
+    onChange: ref => onChange(ref.selected),
+    dense: true,
+    loading: loading,
+    loadingText: i18n.t('Loading'),
+    dataTest: 'data-element-group-select'
+  }, defaultGroup ? /*#__PURE__*/React.createElement(SingleSelectOption, {
+    value: defaultGroup.id,
+    key: defaultGroup.id,
+    label: defaultGroup.getName()
+  }) : null, !loading ? groups.map(group => /*#__PURE__*/React.createElement(SingleSelectOption, {
+    value: group.id,
+    key: group.id,
+    label: group.name
+  })) : null), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: styles.__hash
+  }, styles));
+};
+
+GroupSelector.propTypes = {
+  currentValue: PropTypes.string.isRequired,
+  displayNameProp: PropTypes.string.isRequired,
+  onChange: PropTypes.func.isRequired
+};
+
+const DisaggregationSelector = _ref2 => {
+  let {
+    currentValue,
+    onChange
+  } = _ref2;
+  const options = getOptions();
+  return /*#__PURE__*/React.createElement("div", {
+    className: "jsx-".concat(styles.__hash) + " " + "group-select"
+  }, /*#__PURE__*/React.createElement(SingleSelectField, {
+    selected: currentValue,
+    onChange: ref => onChange(ref.selected),
+    dense: true,
+    dataTest: 'data-element-disaggregation-select'
+  }, Object.entries(options).map(option => /*#__PURE__*/React.createElement(SingleSelectOption, {
+    value: option[0],
+    key: option[0],
+    label: option[1]
+  }))), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: styles.__hash
+  }, styles));
+};
+
+DisaggregationSelector.propTypes = {
+  currentValue: PropTypes.string.isRequired,
+  onChange: PropTypes.func.isRequired
+};
+
+const DataElementSelector = _ref3 => {
+  let {
+    displayNameProp,
+    onDoubleClick
+  } = _ref3;
+  const dataEngine = useDataEngine();
+  const [searchTerm, setSearchTerm] = useState('');
+  const [group, setGroup] = useState(DIMENSION_TYPE_ALL);
+  const [subGroup, setSubGroup] = useState(TOTALS);
+  const [options, setOptions] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const {
+    isSorting
+  } = useSortable({});
+  const rootRef = useRef();
+  const hasNextPageRef = useRef(false);
+  const searchTermRef = useRef(searchTerm);
+  const pageRef = useRef(0);
+  const filterRef = useRef({
+    dataType: DIMENSION_TYPE_DATA_ELEMENT,
+    group,
+    subGroup
+  });
+
+  const fetchData = async scrollToTop => {
+    try {
+      setLoading(true);
+      const result = await 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 = 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.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: "jsx-".concat(styles.__hash) + " " + "filter-wrapper"
+  }, /*#__PURE__*/React.createElement("h4", {
+    className: "jsx-".concat(styles.__hash) + " " + "sub-header"
+  }, i18n.t('Data elements')), /*#__PURE__*/React.createElement(InputField, {
+    value: searchTerm,
+    onChange: onSearchChange,
+    placeholder: i18n.t('Search by data element name'),
+    dense: true,
+    type: 'search',
+    dataTest: 'data-element-search'
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "jsx-".concat(styles.__hash) + " " + "selector-wrapper"
+  }, /*#__PURE__*/React.createElement(GroupSelector, {
+    currentValue: group,
+    onChange: group => onFilterChange({
+      group
+    }),
+    displayNameProp: displayNameProp
+  }), /*#__PURE__*/React.createElement(DisaggregationSelector, {
+    currentValue: subGroup,
+    onChange: subGroup => onFilterChange({
+      subGroup
+    })
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: "jsx-".concat(styles.__hash) + " " + "dimension-list-container"
+  }, loading && /*#__PURE__*/React.createElement("div", {
+    className: "jsx-".concat(styles.__hash) + " " + "dimension-list-overlay"
+  }, /*#__PURE__*/React.createElement(CircularLoader, null)), /*#__PURE__*/React.createElement("div", {
+    ref: rootRef,
+    onScroll: () => {
+      if (isSorting) {
+        rootRef.current.scrollTo({
+          top: 0
+        });
+      }
+    },
+    className: "jsx-".concat(styles.__hash) + " " + "dimension-list-scrollbox"
+  }, /*#__PURE__*/React.createElement("div", {
+    "data-test": "dimension-list",
+    className: "jsx-".concat(styles.__hash) + " " + (cx('dimension-list-scroller', {
+      loading
+    }) || "")
+  }, Boolean(options.length) && options.map(_ref6 => {
+    let {
+      label,
+      value
+    } = _ref6;
+    return /*#__PURE__*/React.createElement(DataElementOption, {
+      key: value,
+      label: label,
+      value: value,
+      onDoubleClick: onDoubleClick
+    });
+  }), !loading && !options.length && /*#__PURE__*/React.createElement("div", {
+    className: "jsx-".concat(styles.__hash) + " " + "empty-list"
+  }, searchTermRef.current ? i18n.t('No data elements found for "{{- searchTerm}}"', {
+    searchTerm: searchTermRef.current
+  }) : i18n.t('No data elements found')), /*#__PURE__*/React.createElement("div", {
+    className: "jsx-".concat(styles.__hash) + " " + "scroll-detector"
+  }, /*#__PURE__*/React.createElement(IntersectionDetector, {
+    onChange: onEndReached,
+    rootRef: rootRef
+  }))))), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: styles.__hash
+  }, styles));
+};
+
+DataElementSelector.propTypes = {
+  displayNameProp: PropTypes.string.isRequired,
+  onDoubleClick: PropTypes.func.isRequired
+};
+export default DataElementSelector;

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

@@ -0,0 +1,194 @@
+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; }
+
+import { DndContext, DragOverlay, useSensor, useSensors, PointerSensor as DndKitPointerSensor } from '@dnd-kit/core';
+import PropTypes from 'prop-types';
+import React, { useState } from 'react';
+import DraggingItem from './DraggingItem.js';
+export const OPTIONS_PANEL = 'Sortable';
+
+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 DndKitPointerSensor {}
+
+_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] = useState(null);
+  const sensor = useSensor(PointerSensor, {
+    activationConstraint: {
+      distance: 15
+    }
+  });
+  const sensors = 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.createElement(DndContext, {
+    collisionDetection: rectIntersectionCustom,
+    onDragStart: handleDragStart,
+    onDragEnd: handleDragEnd,
+    onDragCancel: handleDragCancel,
+    sensors: sensors
+  }, children, /*#__PURE__*/React.createElement(DragOverlay, {
+    dropAnimation: null
+  }, draggingItem ? /*#__PURE__*/React.createElement("span", {
+    className: "dragOverlay"
+  }, /*#__PURE__*/React.createElement(DraggingItem, draggingItem)) : null));
+};
+
+OuterDndContext.propTypes = {
+  onDragEnd: PropTypes.func.isRequired,
+  children: PropTypes.node,
+  onDragStart: PropTypes.func
+};
+export default OuterDndContext;

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

@@ -0,0 +1,11 @@
+import React from 'react';
+export default /*#__PURE__*/React.createElement("svg", {
+  height: "16",
+  viewBox: "0 0 16 16",
+  width: "16",
+  xmlns: "http://www.w3.org/2000/svg"
+}, /*#__PURE__*/React.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"
+}));

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

@@ -0,0 +1,40 @@
+import _JSXStyle from "styled-jsx/style";
+import cx from 'classnames';
+import PropTypes from 'prop-types';
+import React from 'react';
+import { DIMENSION_TYPE_DATA_ELEMENT } from '../../../modules/dataTypes.js';
+import { getIcon } from '../../../modules/dimensionListItem.js';
+import { EXPRESSION_TYPE_DATA, EXPRESSION_TYPE_NUMBER, EXPRESSION_TYPE_OPERATOR } from '../../../modules/expressions.js';
+import styles from './styles/DraggingItem.style.js';
+import formulaItemStyles from './styles/FormulaItem.style.js';
+
+const DraggingItem = _ref => {
+  let {
+    label,
+    type,
+    value
+  } = _ref;
+  const displayLabel = type === EXPRESSION_TYPE_NUMBER ? value || label : label;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: "jsx-".concat(styles.__hash, " jsx-").concat(formulaItemStyles.__hash) + " " + (cx('dragging', 'content', {
+      operator: type === EXPRESSION_TYPE_OPERATOR,
+      number: type === EXPRESSION_TYPE_NUMBER,
+      data: type === EXPRESSION_TYPE_DATA
+    }) || "")
+  }, type === EXPRESSION_TYPE_DATA && /*#__PURE__*/React.createElement("span", {
+    className: "jsx-".concat(styles.__hash, " jsx-").concat(formulaItemStyles.__hash) + " " + "icon"
+  }, getIcon(DIMENSION_TYPE_DATA_ELEMENT)), /*#__PURE__*/React.createElement("span", {
+    className: "jsx-".concat(styles.__hash, " jsx-").concat(formulaItemStyles.__hash) + " " + "label"
+  }, displayLabel)), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: styles.__hash
+  }, styles), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: formulaItemStyles.__hash
+  }, formulaItemStyles));
+};
+
+DraggingItem.propTypes = {
+  label: PropTypes.string,
+  type: PropTypes.string,
+  value: PropTypes.string
+};
+export default DraggingItem;

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

@@ -0,0 +1,43 @@
+import _JSXStyle from "styled-jsx/style";
+import { useDroppable } from '@dnd-kit/core';
+import cx from 'classnames';
+import PropTypes from 'prop-types';
+import React from 'react';
+import styles from './styles/DropZone.style.js';
+
+const DropZone = _ref => {
+  let {
+    firstElementId,
+    overLastDropZone
+  } = _ref;
+  const {
+    isOver,
+    setNodeRef,
+    active
+  } = 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.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    ref: setNodeRef,
+    className: "jsx-".concat(styles.__hash) + " " + (cx('first-dropzone', {
+      'dragging-over': draggingOver,
+      empty: !firstElementId
+    }) || "")
+  }), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: styles.__hash
+  }, styles));
+};
+
+DropZone.propTypes = {
+  firstElementId: PropTypes.string,
+  overLastDropZone: PropTypes.bool
+};
+export default DropZone;

package/build/es/components/DataDimension/Calculation/FormulaField.js

@@ -0,0 +1,98 @@
+import _JSXStyle from "styled-jsx/style";
+import i18n from '@dhis2/d2-i18n';
+import { Center, CircularLoader } from '@dhis2/ui';
+import { useDroppable } from '@dnd-kit/core';
+import { SortableContext } from '@dnd-kit/sortable';
+import PropTypes from 'prop-types';
+import React from 'react';
+import FormulaIcon from '../../../assets/FormulaIcon.js';
+import DropZone from './DropZone.js';
+import FormulaItem from './FormulaItem.js';
+import styles from './styles/FormulaField.style.js';
+export const LAST_DROPZONE_ID = 'lastdropzone';
+export const FORMULA_BOX_ID = 'formulabox';
+
+const Placeholder = () => /*#__PURE__*/React.createElement("div", {
+  "data-test": 'placeholder',
+  className: "jsx-".concat(styles.__hash) + " " + "placeholder"
+}, /*#__PURE__*/React.createElement(FormulaIcon, null), /*#__PURE__*/React.createElement("span", {
+  className: "jsx-".concat(styles.__hash) + " " + "help-text"
+}, i18n.t('Drag items here, or double click in the list, to start building a calculation formula')), /*#__PURE__*/React.createElement(_JSXStyle, {
+  id: styles.__hash
+}, styles));
+
+const FormulaField = _ref => {
+  let {
+    items = [],
+    selectedItemId,
+    focusItemId,
+    onChange,
+    onClick,
+    onDoubleClick,
+    loading
+  } = _ref;
+  const {
+    over,
+    setNodeRef: setLastDropzoneRef
+  } = useDroppable({
+    id: LAST_DROPZONE_ID
+  });
+  const itemIds = items.map(item => item.id);
+  const overLastDropZone = (over === null || over === void 0 ? void 0 : over.id) === LAST_DROPZONE_ID;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "jsx-".concat(styles.__hash) + " " + "container"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "jsx-".concat(styles.__hash) + " " + "border"
+  }), /*#__PURE__*/React.createElement("div", {
+    ref: setLastDropzoneRef,
+    "data-test": 'formula-field',
+    className: "jsx-".concat(styles.__hash) + " " + "formula-field"
+  }, loading && /*#__PURE__*/React.createElement(Center, null, /*#__PURE__*/React.createElement(CircularLoader, {
+    small: true
+  })), !loading && itemIds && /*#__PURE__*/React.createElement(SortableContext, {
+    id: FORMULA_BOX_ID,
+    items: itemIds
+  }, /*#__PURE__*/React.createElement(DropZone, {
+    firstElementId: itemIds[0],
+    overLastDropZone: overLastDropZone
+  }), !items.length && /*#__PURE__*/React.createElement(Placeholder, null), Boolean(items.length) && items.map((_ref2, index) => {
+    let {
+      id,
+      label,
+      type,
+      value
+    } = _ref2;
+    return /*#__PURE__*/React.createElement(FormulaItem, {
+      key: id,
+      id: id,
+      label: label,
+      type: type,
+      value: value,
+      hasFocus: focusItemId === id,
+      isHighlighted: selectedItemId === id,
+      isLast: index === items.length - 1,
+      onChange: onChange,
+      onClick: onClick,
+      onDoubleClick: onDoubleClick,
+      overLastDropZone: overLastDropZone
+    });
+  }))), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: styles.__hash
+  }, styles));
+};
+
+FormulaField.propTypes = {
+  onChange: PropTypes.func.isRequired,
+  onClick: PropTypes.func.isRequired,
+  onDoubleClick: PropTypes.func.isRequired,
+  focusItemId: PropTypes.string,
+  items: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.string,
+    label: PropTypes.string,
+    type: PropTypes.string,
+    value: PropTypes.string
+  })),
+  loading: PropTypes.bool,
+  selectedItemId: PropTypes.string
+};
+export default FormulaField;