@bigbinary/neetoui 7.0.2 → 7.0.4

package/dist/cjs/index-327e31a2.js

@@ -0,0 +1,647 @@
+'use strict';
+
+var _ConfigProvider = require('antd/lib/config-provider');
+var _extends = require('@babel/runtime/helpers/extends');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var React = require('react');
+var classnames = require('classnames');
+var neetoIcons = require('@bigbinary/neeto-icons');
+require('./Accordion.js');
+require('./ActionDropdown.js');
+require('./Button.js');
+require('./Modal.js');
+require('./Typography.js');
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+require('avvvatars-react');
+require('ramda');
+require('@tippyjs/react');
+require('tippy.js');
+require('./Checkbox.js');
+require('@babel/runtime/helpers/asyncToGenerator');
+require('@babel/runtime/regenerator');
+require('react-colorful');
+require('./tinycolor-b1e9a7b2.js');
+require('./Dropdown.js');
+var index$1 = require('./index-f2e36d91.js');
+var _DatePicker = require('antd/lib/date-picker');
+var neetoCist = require('@bigbinary/neeto-cist');
+var dayjs = require('dayjs');
+var customParseFormat = require('dayjs/plugin/customParseFormat');
+var Label = require('./Label.js');
+var TimePickerInput = require('./TimePickerInput.js');
+var useId = require('./useId-4e3deb5c.js');
+require('react-router-dom');
+require('@bigbinary/neeto-hotkeys');
+require('./overlayManager.js');
+require('qs');
+require('./Input.js');
+require('./MultiEmailInput.js');
+var Textarea = require('./Textarea-0975f6d6.js');
+require('@babel/runtime/helpers/toConsumableArray');
+require('./Pane.js');
+require('./Popover.js');
+require('framer-motion');
+require('./Radio.js');
+require('@babel/runtime/helpers/esm/objectSpread2');
+require('@babel/runtime/helpers/esm/slicedToArray');
+require('@babel/runtime/helpers/esm/objectWithoutProperties');
+require('@babel/runtime/helpers/esm/extends');
+require('./react-select-creatable.esm-23eddf9f.js');
+require('@babel/runtime/helpers/objectSpread2');
+require('@babel/runtime/helpers/classCallCheck');
+require('@babel/runtime/helpers/createClass');
+require('@babel/runtime/helpers/inherits');
+require('@babel/runtime/helpers/createSuper');
+require('@babel/runtime/helpers/taggedTemplateLiteral');
+require('@babel/runtime/helpers/typeof');
+require('react-dom');
+require('@babel/runtime/helpers/esm/defineProperty');
+require('@babel/runtime/helpers/esm/toConsumableArray');
+require('antd/lib/slider');
+require('./Switch.js');
+require('./Tab.js');
+require('antd/lib/table');
+require('react-drag-listview');
+require('./HeaderCellMenu-a3d12310.js');
+require('react-resizable');
+var Tag = require('./Tag.js');
+require('./Toastr.js');
+require('antd/lib/tree');
+require('./TreeSelect.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _ConfigProvider__default = /*#__PURE__*/_interopDefaultLegacy(_ConfigProvider);
+var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
+var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
+var _DatePicker__default = /*#__PURE__*/_interopDefaultLegacy(_DatePicker);
+var dayjs__default = /*#__PURE__*/_interopDefaultLegacy(dayjs);
+var customParseFormat__default = /*#__PURE__*/_interopDefaultLegacy(customParseFormat);
+
+var IconOverride = function IconOverride(_ref) {
+  var Icon = _ref.icon;
+  return /*#__PURE__*/React__default["default"].createElement("span", {
+    className: "neeto-ui-btn neeto-ui-btn--style-text neeto-ui-btn--size-medium neeto-ui-btn--icon-only"
+  }, /*#__PURE__*/React__default["default"].createElement(Icon, {
+    className: "neeto-ui-btn__icon",
+    size: 20
+  }));
+};
+
+function ownKeys$3(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$3(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$3(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var Provider = function Provider(_ref) {
+  var children = _ref.children;
+  return /*#__PURE__*/React__default["default"].createElement(_ConfigProvider__default["default"], {
+    theme: {
+      token: _objectSpread$3({}, index$1.ANT_DESIGN_GLOBAL_TOKEN_OVERRIDES),
+      components: {
+        DatePicker: {
+          activeBg: "rgb(var(--neeto-ui-white))",
+          activeBorderColor: "rgb(var(--neeto-ui-primary-500))",
+          addonBg: "rgb(var(--neeto-ui-gray-100))",
+          cellActiveWithRangeBg: "rgb(var(--neeto-ui-primary-100))",
+          cellBgDisabled: "rgb(var(--neeto-ui-gray-100))",
+          cellHoverBg: "rgb(var(--neeto-ui-gray-200))",
+          cellHoverWithRangeBg: "rgb(var(--neeto-ui-primary-100))",
+          cellRangeBorderColor: "rgb(var(--neeto-ui-primary-100))",
+          hoverBg: "rgb(var(--neeto-ui-white))",
+          hoverBorderColor: "rgb(var(--neeto-ui-primary-500))",
+          // Global overrides
+          colorBgContainer: "rgb(var(--neeto-ui-white))",
+          colorBgElevated: "rgb(var(--neeto-ui-white))",
+          colorPrimary: "rgb(var(--neeto-ui-primary-500))",
+          colorPrimaryBorder: "rgb(var(--neeto-ui-primary-100))",
+          colorPrimaryHover: "rgb(var(--neeto-ui-primary-600))",
+          colorBorder: "rgb(var(--neeto-ui-gray-300))",
+          colorError: "rgb(var(--neeto-ui-error-500))",
+          colorErrorHover: "rgb(var(--neeto-ui-error-600))",
+          colorErrorOutline: "rgb(var(--neeto-ui-error-100))",
+          colorFillAlter: "rgb(var(--neeto-ui-gray-100))",
+          colorIcon: "rgb(var(--neeto-ui-gray-700))",
+          colorIconHover: "rgb(var(--neeto-ui-gray-800))",
+          colorLink: "rgb(var(--neeto-ui-primary-500))",
+          colorLinkHover: "rgb(var(--neeto-ui-primary-600))",
+          colorLinkActive: "rgb(var(--neeto-ui-primary-800))",
+          colorSplit: "rgb(var(--neeto-ui-gray-200))",
+          colorText: "rgb(var(--neeto-ui-gray-800))",
+          colorTextDescription: "rgb(var(--neeto-ui-gray-700))",
+          colorTextDisabled: "rgb(var(--neeto-ui-gray-500))",
+          colorTextHeading: "rgb(var(--neeto-ui-black))",
+          colorTextLightSolid: "rgb(var(--neeto-ui-white))",
+          colorTextPlaceholder: "rgb(var(--neeto-ui-gray-400))",
+          colorTextQuaternary: "rgb(var(--neeto-ui-gray-400))",
+          colorWarning: "rgb(var(--neeto-ui-warning-500))",
+          colorWarningHover: "rgb(var(--neeto-ui-warning-600))",
+          colorWarningOutline: "rgb(var(--neeto-ui-warning-100))",
+          controlItemBgActive: "rgb(var(--neeto-ui-pastel-purple))",
+          controlItemBgHover: "rgb(var(--neeto-ui-gray-100))",
+          controlOutline: "rgb(var(--neeto-ui-gray-300))",
+          // Sizes
+          cellHeight: 32,
+          padding: 22
+        }
+      }
+    }
+  }, children);
+};
+
+var Today = function Today(_ref) {
+  var onClick = _ref.onClick;
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "text-center"
+  }, /*#__PURE__*/React__default["default"].createElement("button", {
+    onClick: onClick,
+    className: "neeto-ui-rounded-md hover:neeto-ui-bg-gray-200 px-2 py-1 text-xs font-medium transition duration-300 ease-in-out",
+    "data-cy": "year-month-mode-today"
+  }, "Today"));
+};
+
+var getAllowedDate = function getAllowedDate(date, minDate, maxDate) {
+  if (neetoCist.isPresent(minDate) && date !== null && date !== void 0 && date.isBefore(minDate)) {
+    return minDate;
+  }
+  if (neetoCist.isPresent(maxDate) && date !== null && date !== void 0 && date.isAfter(maxDate)) {
+    return maxDate;
+  }
+  return date;
+};
+var getAllowedRange = function getAllowedRange(dates, minDate, maxDate) {
+  return dates.map(function (item) {
+    return getAllowedDate(item, minDate, maxDate);
+  });
+};
+var getAllowed = function getAllowed(date, minDate, maxDate) {
+  return (Array.isArray(date) ? getAllowedRange : getAllowedDate)(date, minDate, maxDate);
+};
+var formattedString = function formattedString(date, dateFormat) {
+  return Array.isArray(date) ? date.map(function (item) {
+    return item === null || item === void 0 ? void 0 : item.format(dateFormat);
+  }) : date === null || date === void 0 ? void 0 : date.format(dateFormat);
+};
+
+var _excluded$1 = ["className", "label", "size", "dropdownClassName", "popupClassName", "dateFormat", "timeFormat", "placeholder", "onChange", "onOk", "picker", "mode", "showTime", "type", "nakedInput", "error", "defaultValue", "value", "labelProps", "required", "allowClear", "maxDate", "minDate", "timePickerProps", "timezone"];
+function ownKeys$2(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$2(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$2(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$2(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var INPUT_SIZES$1 = {
+  small: "small",
+  medium: "medium",
+  large: "large"
+};
+var RangePicker$1 = _DatePicker__default["default"].RangePicker;
+var datePickerTypes = {
+  range: RangePicker$1,
+  date: _DatePicker__default["default"]
+};
+var DatePicker = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var _ref$className = _ref.className,
+    className = _ref$className === void 0 ? "" : _ref$className,
+    _ref$label = _ref.label,
+    label = _ref$label === void 0 ? "" : _ref$label,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? INPUT_SIZES$1.medium : _ref$size,
+    _ref$dropdownClassNam = _ref.dropdownClassName,
+    dropdownClassName = _ref$dropdownClassNam === void 0 ? "" : _ref$dropdownClassNam,
+    _ref$popupClassName = _ref.popupClassName,
+    popupClassName = _ref$popupClassName === void 0 ? "" : _ref$popupClassName,
+    _ref$dateFormat = _ref.dateFormat,
+    dateFormat = _ref$dateFormat === void 0 ? "DD/MM/YYYY" : _ref$dateFormat,
+    _ref$timeFormat = _ref.timeFormat,
+    timeFormat = _ref$timeFormat === void 0 ? "HH:mm:ss" : _ref$timeFormat,
+    placeholder = _ref.placeholder,
+    _ref$onChange = _ref.onChange,
+    onChange = _ref$onChange === void 0 ? index$1.noop : _ref$onChange,
+    _ref$onOk = _ref.onOk,
+    onOk = _ref$onOk === void 0 ? index$1.noop : _ref$onOk,
+    _ref$picker = _ref.picker,
+    picker = _ref$picker === void 0 ? "date" : _ref$picker,
+    _ref$mode = _ref.mode,
+    inputMode = _ref$mode === void 0 ? "date" : _ref$mode,
+    _ref$showTime = _ref.showTime,
+    showTime = _ref$showTime === void 0 ? false : _ref$showTime,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? "date" : _ref$type,
+    _ref$nakedInput = _ref.nakedInput,
+    nakedInput = _ref$nakedInput === void 0 ? false : _ref$nakedInput,
+    _ref$error = _ref.error,
+    error = _ref$error === void 0 ? "" : _ref$error,
+    defaultValue = _ref.defaultValue,
+    inputValue = _ref.value,
+    labelProps = _ref.labelProps,
+    _ref$required = _ref.required,
+    required = _ref$required === void 0 ? false : _ref$required,
+    _ref$allowClear = _ref.allowClear,
+    allowClear = _ref$allowClear === void 0 ? true : _ref$allowClear,
+    maxDate = _ref.maxDate,
+    minDate = _ref.minDate,
+    timePickerProps = _ref.timePickerProps,
+    timezone = _ref.timezone,
+    otherProps = _objectWithoutProperties__default["default"](_ref, _excluded$1);
+  var _useState = React.useState(inputValue),
+    _useState2 = _slicedToArray__default["default"](_useState, 2),
+    value = _useState2[0],
+    setValue = _useState2[1];
+  var _useState3 = React.useState(inputMode),
+    _useState4 = _slicedToArray__default["default"](_useState3, 2),
+    mode = _useState4[0],
+    setMode = _useState4[1];
+  var _useState5 = React.useState(),
+    _useState6 = _slicedToArray__default["default"](_useState5, 2),
+    pickerValue = _useState6[0],
+    setPickerValue = _useState6[1];
+  var id = useId.useId(otherProps.id);
+  var datePickerRef = Textarea.useSyncedRef(ref);
+  var Component = datePickerTypes[type === null || type === void 0 ? void 0 : type.toLowerCase()];
+  var format = showTime ? "".concat(dateFormat, " ").concat(timeFormat) : dateFormat;
+  var errorId = "error_".concat(id);
+  React.useEffect(function () {
+    setValue(inputValue);
+  }, [inputValue]);
+  var handleOnChange = function handleOnChange(date, dateString) {
+    if (type === "range" && neetoCist.isNotPresent(date)) {
+      return onChange([], dateString);
+    }
+    var allowed = getAllowed(date, minDate, maxDate);
+    setValue(allowed);
+    return onChange(allowed, formattedString(allowed, dateFormat));
+  };
+  var renderExtraFooter = function renderExtraFooter() {
+    if (type === "range" || mode === "date") return null;
+    return /*#__PURE__*/React__default["default"].createElement(Today, {
+      onClick: function onClick() {
+        setMode("date");
+        setTimeout(function () {
+          document.querySelector(".ant-picker-now-btn").click();
+        });
+      }
+    });
+  };
+  return /*#__PURE__*/React__default["default"].createElement(Provider, null, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "neeto-ui-input__wrapper"
+  }, label && /*#__PURE__*/React__default["default"].createElement(Label, _objectSpread$2({
+    required: required
+  }, labelProps), label), /*#__PURE__*/React__default["default"].createElement(Component, _extends__default["default"]({
+    "data-cy": label ? "".concat(index$1.hyphenize(label), "-input") : "picker-input",
+    placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : format,
+    ref: datePickerRef,
+    showTime: showTime && _objectSpread$2({
+      format: timeFormat
+    }, timePickerProps),
+    value: getAllowed(index$1.convertToDayjsObjects(value), minDate, maxDate),
+    className: classnames__default["default"]("neeto-ui-date-input", [className], {
+      "neeto-ui-date-input--small": size === "small",
+      "neeto-ui-date-input--medium": size === "medium",
+      "neeto-ui-date-input--large": size === "large",
+      "neeto-ui-date-input--disabled": otherProps.disabled,
+      "neeto-ui-date-input--naked": nakedInput,
+      "neeto-ui-date-input--error": !!error
+    }),
+    defaultValue: getAllowed(index$1.convertToDayjsObjects(defaultValue), minDate, maxDate),
+    popupClassName: classnames__default["default"]("neeto-ui-date-time-dropdown", [dropdownClassName,
+    // Will be removed in the next major version
+    popupClassName]),
+    onChange: handleOnChange
+  }, _objectSpread$2(_objectSpread$2({
+    format: format,
+    maxDate: maxDate,
+    minDate: minDate,
+    onOk: onOk,
+    picker: picker
+  }, otherProps), type === "date" && {
+    mode: mode,
+    pickerValue: pickerValue,
+    renderExtraFooter: renderExtraFooter,
+    onPanelChange: function onPanelChange(pickerValue, mode) {
+      setPickerValue(pickerValue);
+      setMode(mode);
+    }
+  }), {
+    nextIcon: /*#__PURE__*/React__default["default"].createElement(IconOverride, {
+      icon: neetoIcons.Right
+    }),
+    prevIcon: /*#__PURE__*/React__default["default"].createElement(IconOverride, {
+      icon: neetoIcons.Left
+    }),
+    superNextIcon: /*#__PURE__*/React__default["default"].createElement(IconOverride, {
+      icon: neetoIcons.Right
+    }),
+    superPrevIcon: /*#__PURE__*/React__default["default"].createElement(IconOverride, {
+      icon: neetoIcons.Left
+    }),
+    allowClear: allowClear && {
+      clearIcon: /*#__PURE__*/React__default["default"].createElement(neetoIcons.Close, {
+        "data-cy": "date-time-clear-icon",
+        size: 16
+      })
+    },
+    suffixIcon: timezone ? /*#__PURE__*/React__default["default"].createElement(Tag, {
+      label: timezone
+    }) : /*#__PURE__*/React__default["default"].createElement(neetoIcons.Calendar, {
+      size: 16
+    })
+  })), !!error && typeof error === "string" && /*#__PURE__*/React__default["default"].createElement("p", {
+    className: "neeto-ui-input__error",
+    "data-cy": "".concat(index$1.hyphenize(label), "-input-error"),
+    id: errorId
+  }, error)));
+});
+DatePicker.displayName = "DatePicker";
+
+var DATE_FORMAT = "YYYY-MM-DD";
+var TIME_FORMAT = "HH:mm";
+var getDateTime = function getDateTime(date, time) {
+  if (neetoCist.isPresent(date) && neetoCist.isPresent(time)) {
+    return dayjs__default["default"]("".concat(date.format(DATE_FORMAT), " ").concat(time.format(TIME_FORMAT)));
+  }
+  return null;
+};
+var getAllowedTime = function getAllowedTime(date, time, minDateTime, maxDateTime) {
+  var newTime = getDateTime(date, time || dayjs__default["default"]());
+  if (neetoCist.isPresent(minDateTime) && date !== null && date !== void 0 && date.isSame(minDateTime, "day") && newTime !== null && newTime !== void 0 && newTime.isBefore(minDateTime)) {
+    return minDateTime;
+  }
+  if (neetoCist.isPresent(maxDateTime) && date !== null && date !== void 0 && date.isSame(maxDateTime, "day") && newTime !== null && newTime !== void 0 && newTime.isAfter(maxDateTime)) {
+    return maxDateTime;
+  }
+  return newTime;
+};
+var getTime = function getTime(date) {
+  return date === null || date === void 0 ? void 0 : date.format(TIME_FORMAT);
+};
+
+function ownKeys$1(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$1(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+dayjs__default["default"].extend(customParseFormat__default["default"]);
+var DateTimePicker = function DateTimePicker(_ref) {
+  var _ref$className = _ref.className,
+    className = _ref$className === void 0 ? "" : _ref$className,
+    _ref$label = _ref.label,
+    label = _ref$label === void 0 ? "" : _ref$label,
+    size = _ref.size,
+    dropdownClassName = _ref.dropdownClassName,
+    popupClassName = _ref.popupClassName,
+    dateFormat = _ref.dateFormat,
+    _ref$onChange = _ref.onChange,
+    onChange = _ref$onChange === void 0 ? index$1.noop : _ref$onChange,
+    _ref$nakedInput = _ref.nakedInput,
+    nakedInput = _ref$nakedInput === void 0 ? false : _ref$nakedInput,
+    _ref$error = _ref.error,
+    error = _ref$error === void 0 ? "" : _ref$error,
+    defaultValue = _ref.defaultValue,
+    value = _ref.value,
+    labelProps = _ref.labelProps,
+    _ref$required = _ref.required,
+    required = _ref$required === void 0 ? false : _ref$required,
+    id = _ref.id,
+    datePickerProps = _ref.datePickerProps,
+    timePickerProps = _ref.timePickerProps,
+    minDateTime = _ref.minDateTime,
+    maxDateTime = _ref.maxDateTime,
+    _ref$onTimeInputBlur = _ref.onTimeInputBlur,
+    onTimeInputBlur = _ref$onTimeInputBlur === void 0 ? index$1.noop : _ref$onTimeInputBlur,
+    _ref$onBlur = _ref.onBlur,
+    onBlur = _ref$onBlur === void 0 ? index$1.noop : _ref$onBlur;
+  var _useState = React.useState(null),
+    _useState2 = _slicedToArray__default["default"](_useState, 2),
+    date = _useState2[0],
+    setDate = _useState2[1];
+  var _useState3 = React.useState(null),
+    _useState4 = _slicedToArray__default["default"](_useState3, 2),
+    time = _useState4[0],
+    setTime = _useState4[1];
+  var _useState5 = React.useState(),
+    _useState6 = _slicedToArray__default["default"](_useState5, 2),
+    changedField = _useState6[0],
+    setChangedField = _useState6[1];
+  var timeRef = React__default["default"].useRef(null);
+  var defaultId = useId.useId(id);
+  var errorId = "error_".concat(defaultId);
+  React.useEffect(function () {
+    var inputValue = value || defaultValue;
+    if (neetoCist.isNotPresent(inputValue)) {
+      setDate(null);
+      setTime(null);
+      return;
+    }
+    if (dayjs__default["default"](inputValue).isValid()) {
+      var dateTime = dayjs__default["default"].isDayjs(inputValue) ? inputValue : dayjs__default["default"](inputValue);
+      setDate(dateTime);
+      setTime(dateTime);
+    }
+  }, [value, defaultValue]);
+  React.useEffect(function () {
+    if (neetoCist.isNotPresent(changedField)) return;
+    onChange(getDateTime(date, time), changedField);
+    setChangedField(); // reset to avoid unnecessary trigger on rerender
+  }, [date, time, changedField]);
+  var handleDateChange = function handleDateChange(newDate) {
+    var _timeRef$current;
+    (_timeRef$current = timeRef.current) === null || _timeRef$current === void 0 || (_timeRef$current = _timeRef$current.querySelector(".react-time-picker__inputGroup__hour")) === null || _timeRef$current === void 0 || _timeRef$current.focus();
+    setDate(newDate);
+    setTime(getAllowedTime(newDate, time, minDateTime, maxDateTime));
+    setChangedField("date");
+  };
+  var handleTimeChange = function handleTimeChange(newTime) {
+    setTime(newTime.isValid() ? newTime : null);
+    if (newTime.isValid() && !date) setDate(newTime);
+    setChangedField("time");
+  };
+  var handleTimeBlur = function handleTimeBlur() {
+    var dateTime = getDateTime(date, time);
+    onTimeInputBlur(dateTime);
+    onBlur(dateTime);
+  };
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "neeto-ui-input__wrapper"
+  }, label && /*#__PURE__*/React__default["default"].createElement(Label, _objectSpread$1({
+    required: required
+  }, labelProps), label), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: classnames__default["default"]("neeto-ui-date-time-input", className)
+  }, /*#__PURE__*/React__default["default"].createElement(DatePicker, _extends__default["default"]({
+    dateFormat: dateFormat,
+    dropdownClassName: dropdownClassName,
+    nakedInput: nakedInput,
+    popupClassName: popupClassName,
+    size: size,
+    error: !!error,
+    maxDate: maxDateTime,
+    minDate: minDateTime,
+    picker: "date",
+    showTime: false,
+    type: "date",
+    value: date,
+    onChange: handleDateChange
+  }, datePickerProps)), /*#__PURE__*/React__default["default"].createElement(TimePickerInput, _extends__default["default"](_defineProperty__default["default"](_defineProperty__default["default"](_defineProperty__default["default"](_defineProperty__default["default"](_defineProperty__default["default"](_defineProperty__default["default"](_defineProperty__default["default"]({
+    error: error,
+    nakedInput: nakedInput,
+    size: size
+  }, "error", !!error), "maxTime", (date === null || date === void 0 ? void 0 : date.isSame(maxDateTime, "day")) && getTime(maxDateTime)), "minTime", (date === null || date === void 0 ? void 0 : date.isSame(minDateTime, "day")) && getTime(minDateTime)), "ref", timeRef), "value", time), "onBlur", handleTimeBlur), "onChange", handleTimeChange), timePickerProps))), !!error && /*#__PURE__*/React__default["default"].createElement("p", {
+    className: "neeto-ui-input__error",
+    "data-cy": "".concat(index$1.hyphenize(label), "-input-error"),
+    id: errorId
+  }, error));
+};
+DateTimePicker.displayName = "DateTimePicker";
+var index = /*#__PURE__*/React__default["default"].memo(DateTimePicker);
+
+var RangePicker = _DatePicker__default["default"].RangePicker;
+var TIME_PICKER_TYPES = {
+  range: RangePicker,
+  time: _DatePicker__default["default"]
+};
+
+var _excluded = ["className", "label", "size", "dropdownClassName", "popupClassName", "format", "interval", "onChange", "type", "nakedInput", "disabled", "error", "defaultValue", "value", "labelProps", "required", "placeholder", "timezone"];
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var INPUT_SIZES = {
+  small: "small",
+  medium: "medium",
+  large: "large"
+};
+var TIME_PICKER_INTERVAL = {
+  hourStep: 1,
+  minuteStep: 1,
+  secondStep: 1
+};
+var TimePicker = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var _ref$className = _ref.className,
+    className = _ref$className === void 0 ? "" : _ref$className,
+    _ref$label = _ref.label,
+    label = _ref$label === void 0 ? "" : _ref$label,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? INPUT_SIZES.medium : _ref$size,
+    _ref$dropdownClassNam = _ref.dropdownClassName,
+    dropdownClassName = _ref$dropdownClassNam === void 0 ? "" : _ref$dropdownClassNam,
+    _ref$popupClassName = _ref.popupClassName,
+    popupClassName = _ref$popupClassName === void 0 ? "" : _ref$popupClassName,
+    _ref$format = _ref.format,
+    format = _ref$format === void 0 ? "HH:mm:ss" : _ref$format,
+    _ref$interval = _ref.interval,
+    interval = _ref$interval === void 0 ? TIME_PICKER_INTERVAL : _ref$interval,
+    _ref$onChange = _ref.onChange,
+    onChange = _ref$onChange === void 0 ? index$1.noop : _ref$onChange,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? "time" : _ref$type,
+    _ref$nakedInput = _ref.nakedInput,
+    nakedInput = _ref$nakedInput === void 0 ? false : _ref$nakedInput,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$error = _ref.error,
+    error = _ref$error === void 0 ? "" : _ref$error,
+    defaultValue = _ref.defaultValue,
+    value = _ref.value,
+    labelProps = _ref.labelProps,
+    _ref$required = _ref.required,
+    required = _ref$required === void 0 ? false : _ref$required,
+    placeholder = _ref.placeholder,
+    timezone = _ref.timezone,
+    otherProps = _objectWithoutProperties__default["default"](_ref, _excluded);
+  var id = useId.useId(otherProps.id);
+  var timePickerRef = Textarea.useSyncedRef(ref);
+  var Component = TIME_PICKER_TYPES[type.toLowerCase()];
+  var errorId = "error_".concat(id);
+  var showTimeLabels = {};
+  if (format.includes("s")) {
+    showTimeLabels.second = true;
+  }
+  if (format.includes("m")) {
+    showTimeLabels.minute = true;
+  }
+  if (format.includes("H") || format.includes("h")) {
+    showTimeLabels.hour = true;
+  }
+  var handleOnChange = function handleOnChange(time, timeString) {
+    type === "range" && !time ? onChange([], timeString) : onChange(time, timeString);
+  };
+  var panelRender = function panelRender(originalPanel) {
+    return /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "neeto-ui-date-input-custom-panel"
+    }, /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "neeto-ui-date-input-custom-panel__header"
+    }, /*#__PURE__*/React__default["default"].createElement("ul", {
+      className: "neeto-ui-date-input-custom-panel__header-cols"
+    }, showTimeLabels.hour && /*#__PURE__*/React__default["default"].createElement("li", {
+      className: "neeto-ui-date-input-custom-panel__header-col"
+    }, "Hour"), showTimeLabels.minute && /*#__PURE__*/React__default["default"].createElement("li", {
+      className: "neeto-ui-date-input-custom-panel__header-col"
+    }, "Minutes"), showTimeLabels.second && /*#__PURE__*/React__default["default"].createElement("li", {
+      className: "neeto-ui-date-input-custom-panel__header-col"
+    }, "Seconds"))), /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "neeto-ui-date-input-custom-panel__body"
+    }, originalPanel));
+  };
+  return /*#__PURE__*/React__default["default"].createElement(_ConfigProvider__default["default"], {
+    theme: {
+      token: _objectSpread({}, index$1.ANT_DESIGN_GLOBAL_TOKEN_OVERRIDES),
+      components: {
+        DatePicker: {
+          // Global overrides
+          colorBgElevated: "rgb(var(--neeto-ui-white))",
+          colorPrimary: "rgb(var(--neeto-ui-primary-500))",
+          colorPrimaryHover: "rgb(var(--neeto-ui-primary-600))",
+          colorBorder: "rgb(var(--neeto-ui-gray-300))",
+          colorLink: "rgb(var(--neeto-ui-primary-500))",
+          colorLinkHover: "rgb(var(--neeto-ui-primary-600))",
+          colorText: "rgb(var(--neeto-ui-gray-800))",
+          colorTextDisabled: "rgb(var(--neeto-ui-gray-500))",
+          colorTextPlaceholder: "rgb(var(--neeto-ui-gray-400))",
+          controlItemBgActive: "rgb(var(--neeto-ui-primary-800))",
+          controlItemBgHover: "rgb(var(--neeto-ui-gray-100))",
+          controlOutline: "rgb(var(--neeto-ui-gray-300))"
+        }
+      }
+    }
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "neeto-ui-input__wrapper"
+  }, label && /*#__PURE__*/React__default["default"].createElement(Label, _objectSpread({
+    required: required
+  }, labelProps), label), /*#__PURE__*/React__default["default"].createElement(Component, _extends__default["default"]({
+    hourStep: interval.hourStep,
+    minuteStep: interval.minuteStep,
+    ref: timePickerRef,
+    secondStep: interval.secondStep,
+    className: classnames__default["default"]("neeto-ui-time-input", [className], {
+      "neeto-ui-time-input--small": size === "small",
+      "neeto-ui-time-input--medium": size === "medium",
+      "neeto-ui-time-input--large": size === "large",
+      "neeto-ui-time-input--disabled": disabled,
+      "neeto-ui-time-input--naked": nakedInput,
+      "neeto-ui-time-input--error": error
+    }),
+    popupClassName: classnames__default["default"]("neeto-ui-date-time-dropdown", [dropdownClassName,
+    // Will be removed in the next major version
+    popupClassName]),
+    onChange: handleOnChange
+  }, _objectSpread(_objectSpread({
+    disabled: disabled,
+    format: format
+  }, otherProps), {}, {
+    panelRender: panelRender
+  }), {
+    defaultValue: index$1.convertToDayjsObjects(defaultValue),
+    mode: undefined,
+    picker: "time",
+    placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : format,
+    value: index$1.convertToDayjsObjects(value),
+    suffixIcon: timezone ? /*#__PURE__*/React__default["default"].createElement(Tag, {
+      label: timezone
+    }) : /*#__PURE__*/React__default["default"].createElement(neetoIcons.Clock, {
+      size: 16
+    })
+  })), !!error && /*#__PURE__*/React__default["default"].createElement("p", {
+    className: "neeto-ui-input__error",
+    "data-cy": "".concat(index$1.hyphenize(label), "-input-error"),
+    id: errorId
+  }, error)));
+});
+TimePicker.displayName = "TimePicker";
+
+exports.DatePicker = DatePicker;
+exports.TimePicker = TimePicker;
+exports.index = index;
+//# sourceMappingURL=index-327e31a2.js.map