@datarobot/design-system 28.2.2

package/cjs/datetime-range-picker/datetime-range-picker.js

@@ -0,0 +1,143 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.VIEW_MODE_TYPE = exports.VIEW_MODE = exports.INITIAL_DIRECTION = exports.ANCHOR_TYPES = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _dropdown = require("../dropdown");
+var _useTranslation = require("../hooks/use-translation");
+var _datetimeRangePickerButton = _interopRequireDefault(require("./datetime-range-picker-button"));
+var _datetimeRangePickerPanel = _interopRequireWildcard(require("./datetime-range-picker-panel"));
+var _datetimeRangePickerInput = _interopRequireDefault(require("./datetime-range-picker-input"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const ANCHOR_TYPES = exports.ANCHOR_TYPES = {
+  BUTTON: 'button',
+  INPUT: 'input'
+};
+const VIEW_MODE_TYPE = exports.VIEW_MODE_TYPE = {
+  DAYS: 'days',
+  MONTHS: 'months',
+  TIME: 'time',
+  YEARS: 'years'
+};
+const VIEW_MODE = exports.VIEW_MODE = [VIEW_MODE_TYPE.DAYS, VIEW_MODE_TYPE.MONTHS, VIEW_MODE_TYPE.TIME, VIEW_MODE_TYPE.YEARS];
+const INITIAL_DIRECTION = exports.INITIAL_DIRECTION = {
+  PAST: 'past',
+  FUTURE: 'future'
+};
+/**
+ * Display two datetime pickers side-by-side for selecting a range
+ * @midnight-gray-supported
+ * @alpine-light-supported
+ * */
+function DateRangePicker({
+  onUpdate,
+  validateOnChange,
+  validateOnClick,
+  start,
+  end,
+  minStart,
+  maxEnd,
+  labelFormat,
+  anchorType = ANCHOR_TYPES.BUTTON,
+  buttonText,
+  cancelButtonText,
+  resetText,
+  dateFormat = 'YYYY-MM-DD',
+  timeFormat = 'HH:mm',
+  initialDirection = INITIAL_DIRECTION.PAST,
+  initialViewMode = VIEW_MODE_TYPE.DAYS,
+  placement = _dropdown.DROPDOWN_PLACEMENT_TYPES.TOP_START,
+  showTimeZoneSuffix = true,
+  isDisabled,
+  utcSuffix,
+  dateStartInputAriaLabel,
+  dateEndInputAriaLabel
+}) {
+  const {
+    t
+  } = (0, _useTranslation.useTranslation)();
+  const utcSuffixValue = utcSuffix ?? t('UTC');
+  const dateStartInputAriaLabelValue = dateStartInputAriaLabel ?? t('Start date');
+  const dateEndInputAriaLabelValue = dateEndInputAriaLabel ?? t('End date');
+  function handleSuccessfulUpdate(updatedStart, updatedEnd) {
+    onUpdate(updatedStart, updatedEnd);
+  }
+  const [initialTargetInput, setInitialTargetInput] = (0, _react.useState)(_datetimeRangePickerPanel.DATE_RANGE_INPUT_TYPES.START);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_dropdown.Dropdown, {
+    contentClassName: "datetime-range-picker-panel",
+    placement: placement,
+    hasCustomFocusHandling: true,
+    shouldCloseDropdownOnEsc: true,
+    renderAnchor: ({
+      ref,
+      onClick,
+      isOpen
+    }) => anchorType === ANCHOR_TYPES.INPUT ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_datetimeRangePickerInput.default, {
+      ref: ref,
+      onClick: ({
+        originalEvent,
+        targetInput = _datetimeRangePickerPanel.DATE_RANGE_INPUT_TYPES.START,
+        openedWithKeyboard
+      }) => {
+        if (isDisabled) {
+          return;
+        }
+        setInitialTargetInput(targetInput);
+        onClick(originalEvent, openedWithKeyboard);
+      },
+      start: start,
+      end: end,
+      labelFormat: labelFormat,
+      dateFormat: dateFormat,
+      timeFormat: timeFormat,
+      showTimeZoneSuffix: showTimeZoneSuffix,
+      isDisabled: isOpen || isDisabled,
+      utcSuffix: utcSuffixValue,
+      dateStartInputAriaLabel: dateStartInputAriaLabelValue,
+      dateEndInputAriaLabel: dateEndInputAriaLabelValue
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_datetimeRangePickerButton.default, {
+      ref: ref,
+      onClick: onClick,
+      isOpen: isOpen,
+      isDisabled: isDisabled,
+      start: start,
+      end: end,
+      labelFormat: labelFormat,
+      dateFormat: dateFormat,
+      timeFormat: timeFormat,
+      showTimeZoneSuffix: showTimeZoneSuffix,
+      utcSuffix: utcSuffixValue
+    }),
+    children: ({
+      closeDropdown
+    }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_datetimeRangePickerPanel.default, {
+      buttonText: buttonText ?? t('Update window'),
+      defaultStart: start,
+      defaultEnd: end,
+      minStart: minStart,
+      maxEnd: maxEnd,
+      dateFormat: dateFormat,
+      timeFormat: timeFormat,
+      initialViewMode: initialViewMode,
+      initialDirection: initialDirection,
+      onSubmit: (newStart, newEnd) => {
+        handleSuccessfulUpdate(newStart, newEnd);
+        closeDropdown();
+      },
+      onDismiss: closeDropdown,
+      validateOnClick: validateOnClick,
+      validateOnChange: validateOnChange,
+      resetText: resetText ?? t('Reset to initial value'),
+      cancelButtonText: cancelButtonText ?? t('Cancel'),
+      utcSuffix: utcSuffixValue,
+      initialTargetInput: initialTargetInput,
+      dateStartInputAriaLabel: dateStartInputAriaLabelValue,
+      dateEndInputAriaLabel: dateEndInputAriaLabelValue
+    })
+  });
+}
+var _default = exports.default = DateRangePicker;

package/cjs/datetime-range-picker/helpers.d.ts

@@ -0,0 +1,50 @@
+import React, { RefObject } from 'react';
+import moment, { MomentInput, Moment, unitOfTime } from 'moment';
+import Datetime from 'react-datetime';
+import { InitialDirection } from './datetime-range-picker';
+export interface StringToMomentParams {
+    dateTimeFormat?: string;
+    strictParse?: boolean;
+    allowNil?: boolean;
+}
+export declare function getValidityFromErrors(errorMapping: Record<string, string>): {
+    type: "error";
+    value: string | string[];
+    displayLocation: "summary";
+};
+export declare function customizeCalendarView(selectedDate: Moment, start: Moment | null, end: Moment | null, className: string, viewMode: unitOfTime.Base): string;
+export declare function customizeRenderCalendarView(mode: string, pickerRef: RefObject<Datetime>, value: MomentInput, dateTimeFormat: string, timeFormat: string | boolean, renderDefault: () => React.ReactElement): React.ReactElement;
+export declare function isNavigationAvailableForMonthsView(currentView: string, leftPickerRef: RefObject<Datetime>, rightPickerRef: RefObject<Datetime>, quantity: number): boolean;
+export declare function isNavigationAvailableForYearsView(currentView: string, leftPickerRef: RefObject<Datetime>, rightPickerRef: RefObject<Datetime>, quantity: number): boolean;
+export declare function isMonthRelatedToTimePicker(pickerRef: RefObject<Datetime & {
+    state?: {
+        currentView?: string;
+    };
+}>, selectedValue: Moment): boolean;
+export declare function getLeftCalendarInitialView(initialDirection: InitialDirection, start: Moment | null, end: Moment | null, viewMode: unitOfTime.Base): moment.Moment;
+export declare function getRightCalendarInitialView(initialDirection: InitialDirection, start: Moment | null, end: Moment | null, viewMode: unitOfTime.Base): moment.Moment;
+/** Strictly parses a string using a provided datetime format and returns a moment object
+ *
+ * @param {string|null} datetimeString - A string-representation of a datetime
+ * @param {string} [dateTimeFormat=DEFAULT_DATETIME_FORMAT] - The datetime format used to parse the datetime string
+ * @param {boolean} [strictParse=true] - If true and the string does not conform to the provided dateFormat,
+ *    then an error will be thrown
+ * @param {boolean} [allowNil=false] - If false and the string is actually null or undefined, then an error is thrown
+ * @returns {moment.Moment|null} - Will return a moment object if the datetime string was successfully parsed as a valid
+ *    datetime. May return null if a null datetime-string was passed in and allowNil ===  true.
+ */
+export declare function convertStringToMoment(datetimeString: string, params: StringToMomentParams): Moment;
+/** Takes a moment object and returns a copy, but following the provided datetime format
+ *
+ * @param {moment.Moment} dateTime
+ * @param {string} dateTimeFormat
+ * @returns {moment.Moment}
+ */
+export declare function truncateDateTimeToFormat(dateTime: Moment, dateTimeFormat: string): Moment;
+/** Takes a date format and a time format (both strings) and returns their concatenation with a space in-between
+ *
+ * @param {string} dateFormat
+ * @param {string} timeFormat
+ * @returns {string}
+ */
+export declare function getDateTimeFormat(dateFormat: string | boolean, timeFormat: string | boolean): string;

package/cjs/datetime-range-picker/helpers.js

@@ -0,0 +1,165 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.convertStringToMoment = convertStringToMoment;
+exports.customizeCalendarView = customizeCalendarView;
+exports.customizeRenderCalendarView = customizeRenderCalendarView;
+exports.getDateTimeFormat = getDateTimeFormat;
+exports.getLeftCalendarInitialView = getLeftCalendarInitialView;
+exports.getRightCalendarInitialView = getRightCalendarInitialView;
+exports.getValidityFromErrors = getValidityFromErrors;
+exports.isMonthRelatedToTimePicker = isMonthRelatedToTimePicker;
+exports.isNavigationAvailableForMonthsView = isNavigationAvailableForMonthsView;
+exports.isNavigationAvailableForYearsView = isNavigationAvailableForYearsView;
+exports.truncateDateTimeToFormat = truncateDateTimeToFormat;
+var _react = _interopRequireDefault(require("react"));
+var _moment = _interopRequireDefault(require("moment"));
+var _isEmpty = _interopRequireDefault(require("lodash-es/isEmpty"));
+var _formField = require("../form-field");
+var _message = require("../message");
+var _button = require("../button");
+var _datetimeRangePicker = require("./datetime-range-picker");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const DEFAULT_DATETIME_FORMAT = 'YYYY-MM-DDTHH:mm:ss.SSSSSSZ';
+function getValidityFromErrors(errorMapping) {
+  let validityValues;
+  if ((0, _isEmpty.default)(errorMapping)) {
+    validityValues = '';
+  } else {
+    validityValues = Object.values(errorMapping);
+  }
+  return {
+    type: _message.MESSAGE_TYPES.ERROR,
+    value: validityValues,
+    displayLocation: _formField.MESSAGE_DISPLAY_LOCATION.SUMMARY
+  };
+}
+function customizeCalendarView(selectedDate, start, end, className, viewMode) {
+  let classes = selectedDate.isBetween(start, end, viewMode) ? `${className} in-selecting-range` : className;
+  classes = selectedDate.isSame(start, viewMode) || selectedDate.isSame(end, viewMode) ? `${classes} rdtActive` : classes.replace('rdtActive', '');
+  return classes;
+}
+function customizeRenderCalendarView(mode, pickerRef, value, dateTimeFormat, timeFormat, renderDefault) {
+  if (mode === 'time') {
+    const setDayView = () => pickerRef.current?.setState({
+      // We are hacking the Datetime pickers setState function here
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      currentView: 'days'
+    });
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_button.Button, {
+        testId: "apply-button-time-view",
+        className: "apply-button",
+        accentType: _button.ACCENT_TYPES.SECONDARY,
+        onClick: setDayView,
+        children: (0, _moment.default)(value).format(dateTimeFormat)
+      }), renderDefault()]
+    });
+  }
+  if (mode === 'days') {
+    const setTimeView = () => pickerRef.current?.setState({
+      // We are hacking the Datetime pickers setState function here
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      currentView: 'time'
+    });
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [renderDefault(), timeFormat && /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.Button, {
+        testId: "apply-button-month-view",
+        className: "apply-button",
+        accentType: _button.ACCENT_TYPES.SECONDARY,
+        onClick: setTimeView,
+        children: (0, _moment.default)(value).format(timeFormat)
+      })]
+    });
+  }
+  return renderDefault();
+}
+function isNavigationAvailableForMonthsView(currentView, leftPickerRef, rightPickerRef, quantity) {
+  const leftPickerViewDate = leftPickerRef?.current?.state?.viewDate;
+  const rightPickerViewDate = rightPickerRef?.current?.state?.viewDate;
+  const minLeftMonth = (0, _moment.default)(leftPickerViewDate).add(quantity, 'month');
+  return currentView === 'months' && minLeftMonth.month() === rightPickerViewDate?.month() && minLeftMonth.year() === rightPickerViewDate?.year();
+}
+function isNavigationAvailableForYearsView(currentView, leftPickerRef, rightPickerRef, quantity) {
+  const leftPickerViewDate = leftPickerRef?.current?.state?.viewDate;
+  const rightPickerViewDate = rightPickerRef?.current?.state?.viewDate;
+  const minLeftYear = (0, _moment.default)(leftPickerViewDate).add(quantity, 'year');
+  return currentView === 'years' && minLeftYear.year() === rightPickerViewDate?.year();
+}
+function isMonthRelatedToTimePicker(pickerRef, selectedValue) {
+  return pickerRef?.current?.state?.currentView === 'time' && pickerRef?.current?.state?.viewDate.isSame(selectedValue, 'month');
+}
+function getLeftCalendarInitialView(initialDirection, start, end, viewMode) {
+  if (start?.isSame(end, viewMode)) {
+    return initialDirection === _datetimeRangePicker.INITIAL_DIRECTION.PAST ? (0, _moment.default)(start).subtract(1, viewMode) : (0, _moment.default)(start);
+  }
+  return (0, _moment.default)(start);
+}
+function getRightCalendarInitialView(initialDirection, start, end, viewMode) {
+  if (start?.isSame(end, viewMode)) {
+    return initialDirection === _datetimeRangePicker.INITIAL_DIRECTION.PAST ? (0, _moment.default)(start) : (0, _moment.default)(start).add(1, viewMode);
+  }
+  return (0, _moment.default)(start).add(1, viewMode);
+}
+
+/** Strictly parses a string using a provided datetime format and returns a moment object
+ *
+ * @param {string|null} datetimeString - A string-representation of a datetime
+ * @param {string} [dateTimeFormat=DEFAULT_DATETIME_FORMAT] - The datetime format used to parse the datetime string
+ * @param {boolean} [strictParse=true] - If true and the string does not conform to the provided dateFormat,
+ *    then an error will be thrown
+ * @param {boolean} [allowNil=false] - If false and the string is actually null or undefined, then an error is thrown
+ * @returns {moment.Moment|null} - Will return a moment object if the datetime string was successfully parsed as a valid
+ *    datetime. May return null if a null datetime-string was passed in and allowNil ===  true.
+ */
+
+function convertStringToMoment(datetimeString, {
+  dateTimeFormat = DEFAULT_DATETIME_FORMAT,
+  strictParse = true,
+  allowNil = false
+} = {}) {
+  if (datetimeString == null) {
+    if (allowNil) {
+      return null;
+    }
+    throw Error(`datetime string cannot be null`);
+  }
+  const dateTime = _moment.default.utc(datetimeString, dateTimeFormat, strictParse);
+  if (!dateTime.isValid()) {
+    throw Error(`Could not create a valid moment object from ${datetimeString}`);
+  }
+  return dateTime;
+}
+
+/** Takes a moment object and returns a copy, but following the provided datetime format
+ *
+ * @param {moment.Moment} dateTime
+ * @param {string} dateTimeFormat
+ * @returns {moment.Moment}
+ */
+function truncateDateTimeToFormat(dateTime, dateTimeFormat) {
+  return convertStringToMoment(dateTime.format(dateTimeFormat), {
+    dateTimeFormat
+  });
+}
+
+/** Takes a date format and a time format (both strings) and returns their concatenation with a space in-between
+ *
+ * @param {string} dateFormat
+ * @param {string} timeFormat
+ * @returns {string}
+ */
+function getDateTimeFormat(dateFormat, timeFormat) {
+  if (!timeFormat) {
+    return dateFormat;
+  }
+  if (!dateFormat) {
+    return timeFormat;
+  }
+  return `${dateFormat} ${timeFormat}`;
+}

package/cjs/datetime-range-picker/index.d.ts

@@ -0,0 +1,5 @@
+export { default as DateRangePicker, ANCHOR_TYPES, INITIAL_DIRECTION, VIEW_MODE_TYPE, } from './datetime-range-picker';
+export type { AnchorType, ViewModeType, InitialDirection, } from './datetime-range-picker';
+export type { ValidateOnClick, ValidateOnChange, } from './datetime-range-picker-panel';
+export { DATE_RANGE_ERROR_TYPES } from './datetime-range-picker-panel';
+export { truncateDateTimeToFormat } from './helpers';

package/cjs/datetime-range-picker/index.js

@@ -0,0 +1,45 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ANCHOR_TYPES", {
+  enumerable: true,
+  get: function () {
+    return _datetimeRangePicker.ANCHOR_TYPES;
+  }
+});
+Object.defineProperty(exports, "DATE_RANGE_ERROR_TYPES", {
+  enumerable: true,
+  get: function () {
+    return _datetimeRangePickerPanel.DATE_RANGE_ERROR_TYPES;
+  }
+});
+Object.defineProperty(exports, "DateRangePicker", {
+  enumerable: true,
+  get: function () {
+    return _datetimeRangePicker.default;
+  }
+});
+Object.defineProperty(exports, "INITIAL_DIRECTION", {
+  enumerable: true,
+  get: function () {
+    return _datetimeRangePicker.INITIAL_DIRECTION;
+  }
+});
+Object.defineProperty(exports, "VIEW_MODE_TYPE", {
+  enumerable: true,
+  get: function () {
+    return _datetimeRangePicker.VIEW_MODE_TYPE;
+  }
+});
+Object.defineProperty(exports, "truncateDateTimeToFormat", {
+  enumerable: true,
+  get: function () {
+    return _helpers.truncateDateTimeToFormat;
+  }
+});
+var _datetimeRangePicker = _interopRequireWildcard(require("./datetime-range-picker"));
+var _datetimeRangePickerPanel = require("./datetime-range-picker-panel");
+var _helpers = require("./helpers");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }

package/cjs/drag-and-drop-list/drag-and-drop-list-item-content.d.ts

@@ -0,0 +1,7 @@
+import './drag-and-drop-list-item-content.less';
+export type DragNDropListItemContentProps = {
+    listItem: {
+        name: string;
+    };
+};
+export declare function DragNDropListItemContent({ listItem, }: DragNDropListItemContentProps): import("react/jsx-runtime").JSX.Element;

package/cjs/drag-and-drop-list/drag-and-drop-list-item-content.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DragNDropListItemContent = DragNDropListItemContent;
+var _react = _interopRequireDefault(require("react"));
+var _faGripVertical = require("@fortawesome/free-solid-svg-icons/faGripVertical");
+var _fontAwesomeIcon = require("../font-awesome-icon");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function DragNDropListItemContent({
+  listItem
+}) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: "drag-n-drop-list-item-content",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_fontAwesomeIcon.FontAwesomeIcon, {
+      icon: _faGripVertical.faGripVertical,
+      className: "drag-n-drop-list-item-drag-icon"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      className: "drag-n-drop-list-item-name",
+      children: listItem.name
+    })]
+  });
+}

package/cjs/drag-and-drop-list/drag-and-drop-list-item.d.ts

@@ -0,0 +1,29 @@
+import './drag-and-drop-list-item.less';
+export type DragNDropItem = {
+    index?: number;
+    id: string | number;
+    name: string;
+};
+export type DragNDropListItemProps = {
+    id: string | number;
+    index: number;
+    listItem: DragNDropItem;
+    getIndexById: (id: string | number) => number;
+    onItemMove: (dragIndex: number, hoverIndex: number) => any;
+    canDrag?: (listItem: DragNDropItem, index?: number) => boolean;
+    canDrop?: (listItem: DragNDropItem, index?: number) => boolean;
+    onDragEnd?: (listItem: DragNDropItem, index: number) => any;
+    ListItemComponent?: (...args: any[]) => any;
+    isActive?: boolean;
+    isError?: string[];
+    ListItemContent?: (...args: any[]) => any;
+    setIsAnyItemDragging: (isAnyItemDragging: boolean) => any;
+    isAnyItemDragging: boolean;
+    listItemClassName?: string;
+    shouldUseSeparateDragRef: boolean;
+    dragItemType?: string;
+    additionalListItemProps?: {
+        [key: string]: unknown;
+    };
+};
+export declare function DragNDropListItem({ id, index, listItem, getIndexById, onItemMove, canDrag, canDrop, onDragEnd, ListItemComponent, isAnyItemDragging, setIsAnyItemDragging, listItemClassName, shouldUseSeparateDragRef, isActive, isError, ListItemContent, dragItemType, additionalListItemProps, }: DragNDropListItemProps): import("react/jsx-runtime").JSX.Element;

package/cjs/drag-and-drop-list/drag-and-drop-list-item.js

@@ -0,0 +1,152 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DragNDropListItem = DragNDropListItem;
+var _react = _interopRequireWildcard(require("react"));
+var _reactDnd = require("react-dnd");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _hooks = require("../hooks");
+var _dragAndDropListItemContent = require("./drag-and-drop-list-item-content");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const DND_ITEM_TYPE = 'DND_ITEM_TYPE';
+function DragNDropListItem({
+  id,
+  index,
+  listItem,
+  getIndexById,
+  onItemMove,
+  canDrag,
+  canDrop,
+  onDragEnd,
+  ListItemComponent,
+  isAnyItemDragging,
+  setIsAnyItemDragging,
+  listItemClassName,
+  shouldUseSeparateDragRef,
+  isActive,
+  isError,
+  ListItemContent = _dragAndDropListItemContent.DragNDropListItemContent,
+  dragItemType = DND_ITEM_TYPE,
+  additionalListItemProps = {}
+}) {
+  // this is needed as a workaround for WebKit bug with drag n drop and hovering:
+  // https://bugs.webkit.org/show_bug.cgi?id=134555
+  const [isHovered, setIsHovered] = (0, _react.useState)(false);
+  const dropRef = (0, _react.useRef)(null);
+  const dragRef = (0, _react.useRef)(null);
+  const [, drop] = (0, _reactDnd.useDrop)({
+    accept: dragItemType,
+    hover(item, monitor) {
+      if (!dropRef.current) {
+        return;
+      }
+      // To avoid wrong ordering with too fast dragging and updates during dragging
+      item.index = getIndexById(item.id);
+      const dragIndex = item.index;
+      const hoverIndex = index;
+      if (!isAnyItemDragging) {
+        setIsAnyItemDragging(true);
+      }
+
+      // Don't replace items with themselves
+      if (dragIndex === hoverIndex) {
+        return;
+      }
+
+      // Determine rectangle on screen
+      const hoverBoundingRect = dropRef.current.getBoundingClientRect();
+      // Get vertical middle
+      const hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;
+      // Determine mouse position
+      const clientOffset = monitor.getClientOffset();
+      // Get pixels to the top
+      const hoverClientY = (clientOffset?.y || 0) - hoverBoundingRect.top;
+      // Only perform the move when the mouse has crossed half of the items height
+      // When dragging downwards, only move when the cursor is below 50%
+      // When dragging upwards, only move when the cursor is above 50%
+      // Dragging downwards
+      if (dragIndex < hoverIndex && hoverClientY < hoverMiddleY) {
+        return;
+      }
+      // Dragging upwards
+      if (dragIndex > hoverIndex && hoverClientY > hoverMiddleY) {
+        return;
+      }
+      // Time to actually perform the action
+      onItemMove(dragIndex, hoverIndex);
+      item.index = hoverIndex;
+    },
+    canDrop: item => {
+      return canDrop?.(listItem, item.index) ?? true;
+    }
+  });
+  const [collected, drag] = (0, _reactDnd.useDrag)({
+    type: dragItemType,
+    item: {
+      id,
+      index
+    },
+    collect: monitor => {
+      const isDragging = !!monitor.isDragging();
+      return {
+        isDragging
+      };
+    },
+    canDrag() {
+      return canDrag?.(listItem, index) ?? true;
+    },
+    end(item) {
+      setIsAnyItemDragging(false);
+      if (onDragEnd) {
+        onDragEnd(listItem, item.index);
+      }
+    }
+  });
+
+  // if the whole list component is provided - render only it with appropriate props
+  if (ListItemComponent) {
+    const draggableRef = shouldUseSeparateDragRef ? dragRef : dropRef;
+    drag(draggableRef);
+    drop(dropRef);
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(ListItemComponent, {
+      listItem: listItem,
+      index: index,
+      isDragging: collected.isDragging,
+      dropRef: dropRef,
+      dragRef: dragRef,
+      isAnyItemDragging: isAnyItemDragging,
+      ...additionalListItemProps
+    });
+  }
+  drag(dropRef);
+  drop(dropRef);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    ref: dropRef,
+    className: (0, _classnames.default)('drag-n-drop-list-item', listItemClassName, {
+      'drag-n-drop-list-item-active': isActive,
+      'drag-n-drop-list-item-error': isError,
+      'drag-n-drop-list-item-dragging': collected.isDragging,
+      'drag-n-drop-list-item-hovered': isHovered && !isAnyItemDragging
+    }),
+    ...(0, _hooks.getNonNativeButtonAttrs)({
+      onClick: () => setIsHovered(true),
+      onKeyDown: () => setIsHovered(true)
+    }),
+    onMouseEnter: () => !isAnyItemDragging && setIsHovered(true),
+    onMouseLeave: () => setIsHovered(false),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "drag-n-drop-list-content-wrapper",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ListItemContent, {
+        listItem: listItem,
+        index: index,
+        isDragging: collected.isDragging,
+        isAnyItemDragging: isAnyItemDragging,
+        ...additionalListItemProps
+      })
+    })
+  });
+}