@bigbinary/neetoui
Version:
neetoUI drives the experience at all neeto products
530 lines (520 loc) • 24.6 kB
JavaScript
'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');
var reactI18next = require('react-i18next');
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('./Callout.js');
require('./Checkbox.js');
require('@babel/runtime/helpers/toConsumableArray');
require('@babel/runtime/helpers/asyncToGenerator');
require('@babel/runtime/regenerator');
require('react-colorful');
require('./useRecentlyUsedColors-3cKx-eDH.js');
require('./Dropdown.js');
var index = require('./index--BeRLo6L.js');
var _DatePicker = require('antd/lib/date-picker');
var neetoCist = require('@bigbinary/neeto-cist');
require('./Input.js');
var Label = require('./Label.js');
require('./MultiEmailInput.js');
require('react-router-dom');
var useId = require('./useId-DXHUzdxd.js');
require('@bigbinary/neeto-hotkeys');
require('./overlayManager.js');
require('qs');
var Textarea = require('./Textarea-BVpw9Xq1.js');
require('./Pane.js');
require('./Popover.js');
require('framer-motion');
require('./Radio.js');
require('@babel/runtime/helpers/esm/extends');
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('antd/lib/slider');
require('antd/locale/de_DE');
require('antd/locale/en_US');
require('antd/locale/es_ES');
require('antd/locale/fr_FR');
require('antd/locale/nl_NL');
require('antd/locale/pl_PL');
require('antd/locale/pt_PT');
require('./Switch.js');
require('./Tab.js');
require('antd/lib/table');
require('react-drag-listview');
require('./useRestoreScrollPosition-PsoENtiB.js');
require('react-resizable');
var Tag = require('./Tag.js');
var constants = require('./constants.js');
require('./Toastr.js');
require('i18next');
require('antd/lib/tree');
require('./TreeSelect.js');
var IconOverride = function IconOverride(_ref) {
var Icon = _ref.icon;
return /*#__PURE__*/React.createElement("span", {
className: "neeto-ui-btn neeto-ui-btn--style-text neeto-ui-btn--size-medium neeto-ui-btn--icon-only"
}, /*#__PURE__*/React.createElement(Icon, {
className: "neeto-ui-btn__icon",
size: 20
}));
};
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(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 Provider = function Provider(_ref) {
var children = _ref.children;
var _useTranslation = reactI18next.useTranslation(),
i18n = _useTranslation.i18n;
return /*#__PURE__*/React.createElement(_ConfigProvider, {
locale: constants.ANTD_LOCALE[i18n.language || "en"],
theme: {
token: _objectSpread$2({}, index.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);
};
/* eslint-disable @bigbinary/neeto/no-dumb-components-with-use-translation */
var Today = function Today(_ref) {
var onClick = _ref.onClick;
var _useTranslation = reactI18next.useTranslation(),
t = _useTranslation.t,
i18n = _useTranslation.i18n;
return /*#__PURE__*/React.createElement("div", {
className: "text-center"
}, /*#__PURE__*/React.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"
}, index.getLocale(i18n, t, "neetoui.datePicker.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", "showTime", "type", "nakedInput", "error", "defaultValue", "value", "labelProps", "required", "allowClear", "maxDate", "minDate", "timePickerProps", "timezone", "onOpenChange", "onKeyDown"];
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(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; }
var INPUT_SIZES$1 = {
small: "small",
medium: "medium",
large: "large"
};
var RangePicker$1 = _DatePicker.RangePicker;
var datePickerTypes = {
range: RangePicker$1,
date: _DatePicker
};
var DatePicker = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
var _otherProps$open;
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.noop : _ref$onChange,
_ref$onOk = _ref.onOk,
onOk = _ref$onOk === void 0 ? index.noop : _ref$onOk,
_ref$picker = _ref.picker,
picker = _ref$picker === void 0 ? "date" : _ref$picker,
_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,
onOpenChange = _ref.onOpenChange,
onKeyDown = _ref.onKeyDown,
otherProps = _objectWithoutProperties(_ref, _excluded$1);
var _useState = React.useState(inputValue),
_useState2 = _slicedToArray(_useState, 2),
value = _useState2[0],
setValue = _useState2[1];
var _useState3 = React.useState(picker),
_useState4 = _slicedToArray(_useState3, 2),
mode = _useState4[0],
setMode = _useState4[1];
var _useState5 = React.useState(),
_useState6 = _slicedToArray(_useState5, 2),
pickerValue = _useState6[0],
setPickerValue = _useState6[1];
var id = useId.useId(otherProps.id);
var datePickerRef = Textarea.useSyncedRef(ref);
var isDatePickerOpen = React.useRef((_otherProps$open = otherProps.open) !== null && _otherProps$open !== void 0 ? _otherProps$open : false);
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]);
React.useEffect(function () {
setMode(picker);
}, [picker]);
var getAllowedValue = React.useCallback(function (date) {
return getAllowed(date, minDate, maxDate);
}, [minDate, maxDate]);
var handleOnChange = function handleOnChange(date, dateString) {
if (type === "range" && neetoCist.isNotPresent(date)) {
return onChange([], dateString);
}
var allowed = getAllowedValue(index.getTimezoneAppliedDateTime(date));
setValue(allowed);
return onChange(allowed, formattedString(allowed, dateFormat));
};
var handleOnOpenChange = function handleOnOpenChange(open) {
isDatePickerOpen.current = open;
onOpenChange === null || onOpenChange === void 0 || onOpenChange(open);
};
var handleOnKeyDown = function handleOnKeyDown(e) {
if (!isDatePickerOpen.current) return;
e.stopPropagation();
onKeyDown === null || onKeyDown === void 0 || onKeyDown(e);
};
var renderExtraFooter = function renderExtraFooter() {
if (type === "range" || mode === "date") return null;
return /*#__PURE__*/React.createElement(Today, {
onClick: function onClick() {
var today = index.dayjs();
setValue(today);
onChange(today, formattedString(today, dateFormat));
setMode(picker);
}
});
};
return /*#__PURE__*/React.createElement(Provider, null, /*#__PURE__*/React.createElement("div", {
className: "neeto-ui-input__wrapper"
}, label && /*#__PURE__*/React.createElement(Label, _objectSpread$1({
required: required
}, labelProps), label), /*#__PURE__*/React.createElement(Component, _extends({
"data-cy": label ? "".concat(index.hyphenize(label), "-input") : "picker-input",
defaultValue: index.convertToDayjsObjects(defaultValue),
placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : format,
ref: datePickerRef,
showTime: showTime && _objectSpread$1({
format: timeFormat
}, timePickerProps),
value: index.convertToDayjsObjects(value),
className: classnames("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
}),
popupClassName: classnames("neeto-ui-date-time-dropdown", [dropdownClassName,
// Will be removed in the next major version
popupClassName]),
onChange: handleOnChange,
onKeyDown: handleOnKeyDown,
onOpenChange: handleOnOpenChange
}, _objectSpread$1(_objectSpread$1({
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);
}
}), {
getNow: index.dayjs,
nextIcon: /*#__PURE__*/React.createElement(IconOverride, {
icon: neetoIcons.Right
}),
prevIcon: /*#__PURE__*/React.createElement(IconOverride, {
icon: neetoIcons.Left
}),
superNextIcon: /*#__PURE__*/React.createElement(IconOverride, {
icon: neetoIcons.Right
}),
superPrevIcon: /*#__PURE__*/React.createElement(IconOverride, {
icon: neetoIcons.Left
}),
allowClear: allowClear && {
clearIcon: /*#__PURE__*/React.createElement(neetoIcons.Close, {
"data-cy": "date-time-clear-icon",
size: 16
})
},
suffixIcon: timezone ? /*#__PURE__*/React.createElement(Tag, {
label: timezone
}) : /*#__PURE__*/React.createElement(neetoIcons.Calendar, {
size: 16
})
})), !!error && typeof error === "string" && /*#__PURE__*/React.createElement("p", {
className: "neeto-ui-input__error",
"data-cy": "".concat(index.hyphenize(label), "-input-error"),
id: errorId
}, error)));
});
DatePicker.displayName = "DatePicker";
var RangePicker = _DatePicker.RangePicker;
var TIME_PICKER_TYPES = {
range: RangePicker,
time: _DatePicker
};
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(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.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(_ref, _excluded);
var _useTranslation = reactI18next.useTranslation(),
t = _useTranslation.t,
i18n = _useTranslation.i18n;
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(index.getTimezoneAppliedDateTime(time), timeString);
};
var panelRender = function panelRender(originalPanel) {
return /*#__PURE__*/React.createElement("div", {
className: "neeto-ui-date-input-custom-panel"
}, /*#__PURE__*/React.createElement("div", {
className: "neeto-ui-date-input-custom-panel__header"
}, /*#__PURE__*/React.createElement("ul", {
className: "neeto-ui-date-input-custom-panel__header-cols"
}, showTimeLabels.hour && /*#__PURE__*/React.createElement("li", {
className: "neeto-ui-date-input-custom-panel__header-col"
}, index.getLocale(i18n, t, "neetoui.timePicker.hours")), showTimeLabels.minute && /*#__PURE__*/React.createElement("li", {
className: "neeto-ui-date-input-custom-panel__header-col"
}, index.getLocale(i18n, t, "neetoui.timePicker.minutes")), showTimeLabels.second && /*#__PURE__*/React.createElement("li", {
className: "neeto-ui-date-input-custom-panel__header-col"
}, index.getLocale(i18n, t, "neetoui.timePicker.seconds")))), /*#__PURE__*/React.createElement("div", {
className: "neeto-ui-date-input-custom-panel__body"
}, originalPanel));
};
return /*#__PURE__*/React.createElement(_ConfigProvider, {
locale: constants.ANTD_LOCALE[i18n.language || "en"],
theme: {
token: _objectSpread({}, index.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.createElement("div", {
className: "neeto-ui-input__wrapper"
}, label && /*#__PURE__*/React.createElement(Label, _objectSpread({
required: required
}, labelProps), label), /*#__PURE__*/React.createElement(Component, _extends({
hourStep: interval.hourStep,
minuteStep: interval.minuteStep,
ref: timePickerRef,
secondStep: interval.secondStep,
className: classnames("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("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.convertToDayjsObjects(defaultValue),
mode: undefined,
picker: "time",
placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : format,
value: index.convertToDayjsObjects(value),
suffixIcon: timezone ? /*#__PURE__*/React.createElement(Tag, {
label: timezone
}) : /*#__PURE__*/React.createElement(neetoIcons.Clock, {
size: 16
})
})), !!error && /*#__PURE__*/React.createElement("p", {
className: "neeto-ui-input__error",
"data-cy": "".concat(index.hyphenize(label), "-input-error"),
id: errorId
}, error)));
});
TimePicker.displayName = "TimePicker";
exports.DatePicker = DatePicker;
exports.TimePicker = TimePicker;
//# sourceMappingURL=index-DznzhU1z.js.map