ab-ui-library 1.0.1

package/components/DatePicker/RangeDatePicker.js

@@ -0,0 +1,161 @@
+import { _ as _extends } from '../../extends-e8ef956f.js';
+import { _ as _slicedToArray } from '../../slicedToArray-0c706912.js';
+import { _ as _objectWithoutProperties } from '../../objectWithoutProperties-fcd64cc7.js';
+import React, { forwardRef, useState, useRef, useEffect } from 'react';
+import dayjs from 'dayjs';
+import DatePicker from 'react-datepicker';
+import { Input } from '../Input/Input.js';
+import '../Input/InputPassword.js';
+import { DateFormat } from './types.js';
+import { useImportFilesDynamically } from './hooks.js';
+import { isSameDay } from '../../utils/helpers.js';
+import { Label } from '../../helperComponents/Label/Label.js';
+import 'classnames';
+import '../Checkbox/Checkbox.js';
+import '../../hooks/useScreenSize.js';
+import 'react-hook-form';
+import 'react-syntax-highlighter';
+import { IconCalendarRight } from '../SVGIcons/IconCalendarRight.js';
+import '../../defineProperty-7db32082.js';
+import '../../typeof-ecd92d7f.js';
+import 'react-input-mask';
+import 'react-number-format';
+import '../../helperComponents/ErrorMessage/ErrorMessage.js';
+import '../Text/Text.js';
+import '../../helperComponents/IconDynamicComponent/IconDynamicComponent.js';
+import '../../helperComponents/IconDynamicComponent/constants.js';
+import '../SVGIcons/IconCheckmarkCircleFilled.js';
+import '../Popover/Popover.js';
+import '../../hooks/useGetTooltipStyles.js';
+import '../../hooks/useGetElemSizes.js';
+import '../../hooks/useGetElemPositions.js';
+import '../../hooks/useGetTooltipPosition.js';
+import '../Tooltip/types.js';
+import '../../hooks/useHideOnScroll.js';
+import '../../consts/index.js';
+import '../../hooks/useOnOutsideClick.js';
+import '../Link/Link.js';
+import '../SVGIcons/IconInfo.js';
+import '../SVGIcons/IconDismissCircle.js';
+import '../SVGIcons/IconDismissCircleFilled.js';
+import '../SVGIcons/IconEyeOff.js';
+import '../SVGIcons/IconEyeOn.js';
+import '../Divider/Divider.js';
+import '../Tooltip/Tooltip.js';
+
+var _excluded = ["value", "currentDates", "setFieldValue", "name", "changeHandler", "dataId", "format", "maxDate", "minDate", "locale", "dayjsLocale", "disabled", "placeholderText", "label", "hasError", "required"];
+var RangeDatePicker = /*#__PURE__*/forwardRef(function (props) {
+  var value = props.value,
+    _props$currentDates = props.currentDates,
+    currentDates = _props$currentDates === void 0 ? [] : _props$currentDates,
+    setFieldValue = props.setFieldValue,
+    name = props.name,
+    changeHandler = props.changeHandler,
+    dataId = props.dataId,
+    _props$format = props.format,
+    format = _props$format === void 0 ? DateFormat.LongDate : _props$format,
+    maxDate = props.maxDate,
+    minDate = props.minDate,
+    _props$locale = props.locale,
+    locale = _props$locale === void 0 ? 'hy' : _props$locale,
+    _props$dayjsLocale = props.dayjsLocale,
+    dayjsLocale = _props$dayjsLocale === void 0 ? 'hy-am' : _props$dayjsLocale,
+    disabled = props.disabled,
+    placeholderText = props.placeholderText,
+    label = props.label,
+    hasError = props.hasError,
+    required = props.required,
+    rest = _objectWithoutProperties(props, _excluded);
+  useImportFilesDynamically(dayjsLocale);
+  var dateInitialValue = value !== undefined && Array.isArray(value) ? value : currentDates;
+  var _useState = useState(dateInitialValue),
+    _useState2 = _slicedToArray(_useState, 2),
+    rangeArray = _useState2[0],
+    setRangeDate = _useState2[1];
+  var calendarRef = useRef(null);
+  var onChange = function onChange(date) {
+    if (date && Array.isArray(date)) {
+      setRangeDate(date);
+      if (changeHandler) {
+        changeHandler(date);
+      }
+      if (setFieldValue && name) {
+        setFieldValue(name, date);
+      }
+    }
+  };
+  useEffect(function () {
+    setRangeDate(dateInitialValue);
+  }, [dateInitialValue]);
+  if (!Array.isArray(rangeArray)) {
+    return null;
+  }
+  var formatDate = function formatDate(date) {
+    return date ? dayjs(date).format(format) : '';
+  };
+  var checkRange = function checkRange() {
+    var _rangeArray = _slicedToArray(rangeArray, 2),
+      startDate = _rangeArray[0],
+      endDate = _rangeArray[1];
+    if (!startDate || !endDate) {
+      onChange([null, null]);
+    }
+  };
+  var renderCurrentSelectedDate = function renderCurrentSelectedDate(rangeArray) {
+    var _rangeArray2 = _slicedToArray(rangeArray, 2),
+      startDate = _rangeArray2[0],
+      endDate = _rangeArray2[1];
+    var startDateFormatted = formatDate(startDate);
+    var endDateFormatted = formatDate(endDate);
+    if (isSameDay(startDate, endDate) || !rangeArray[1]) {
+      return startDateFormatted;
+    }
+    return "".concat(startDateFormatted, " - ").concat(endDateFormatted);
+  };
+  var openDatepicker = function openDatepicker() {
+    if (calendarRef.current) {
+      var _calendarRef$current, _calendarRef$current2;
+      var isOpen = (_calendarRef$current = calendarRef.current) === null || _calendarRef$current === void 0 ? void 0 : _calendarRef$current.isCalendarOpen();
+      (_calendarRef$current2 = calendarRef.current) === null || _calendarRef$current2 === void 0 || _calendarRef$current2.setOpen(!isOpen);
+    }
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: "picker-container input__inner"
+  }, /*#__PURE__*/React.createElement(Label, {
+    text: label,
+    required: required,
+    invalid: hasError
+  }), /*#__PURE__*/React.createElement(DatePicker, _extends({}, rest, {
+    locale: locale,
+    minDate: minDate,
+    maxDate: maxDate,
+    startDate: rangeArray[0],
+    endDate: rangeArray[1],
+    selectsRange: true,
+    disabled: disabled,
+    onChange: onChange,
+    onClickOutside: checkRange
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    ,
+    ref: calendarRef,
+    customInput: /*#__PURE__*/React.createElement("div", {
+      className: "date-picker_input-container"
+    }, /*#__PURE__*/React.createElement(Input, {
+      dataId: dataId,
+      disabled: disabled,
+      placeholder: placeholderText
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      ,
+      currentValue: renderCurrentSelectedDate(rangeArray),
+      rightIconProps: {
+        Component: IconCalendarRight,
+        onClick: openDatepicker
+      }
+    }))
+  })));
+});
+RangeDatePicker.displayName = 'RangeDatePicker';
+
+export { RangeDatePicker };

package/components/DatePicker/SimpleDatePicker.d.ts

@@ -0,0 +1,3 @@
+import type { ReactElement } from 'react';
+import type { ISimpleDatePickerProps } from './types';
+export declare const SimpleDatePicker: (props: ISimpleDatePickerProps) => ReactElement;

package/components/DatePicker/SimpleDatePicker.js

@@ -0,0 +1,171 @@
+import { _ as _extends } from '../../extends-e8ef956f.js';
+import { _ as _objectWithoutProperties } from '../../objectWithoutProperties-fcd64cc7.js';
+import React, { useRef } from 'react';
+import dayjs from 'dayjs';
+import DatePicker from 'react-datepicker';
+import { Input } from '../Input/Input.js';
+import '../Input/InputPassword.js';
+import { Label } from '../../helperComponents/Label/Label.js';
+import 'classnames';
+import '../Checkbox/Checkbox.js';
+import { MONTHS } from '../../consts/index.js';
+import '../../hooks/useScreenSize.js';
+import 'react-hook-form';
+import 'react-syntax-highlighter';
+import { CustomHeader } from './CustomHeader/CustomHeader.js';
+import { useImportFilesDynamically } from './hooks.js';
+import { IconCalendarRight } from '../SVGIcons/IconCalendarRight.js';
+import '../../defineProperty-7db32082.js';
+import '../../typeof-ecd92d7f.js';
+import 'react-input-mask';
+import 'react-number-format';
+import '../../helperComponents/ErrorMessage/ErrorMessage.js';
+import '../Text/Text.js';
+import '../../utils/helpers.js';
+import '../../helperComponents/IconDynamicComponent/IconDynamicComponent.js';
+import '../../helperComponents/IconDynamicComponent/constants.js';
+import '../SVGIcons/IconCheckmarkCircleFilled.js';
+import '../Popover/Popover.js';
+import '../../slicedToArray-0c706912.js';
+import '../../hooks/useGetTooltipStyles.js';
+import '../../hooks/useGetElemSizes.js';
+import '../../hooks/useGetElemPositions.js';
+import '../../hooks/useGetTooltipPosition.js';
+import '../Tooltip/types.js';
+import '../../hooks/useHideOnScroll.js';
+import '../../hooks/useOnOutsideClick.js';
+import '../Link/Link.js';
+import '../SVGIcons/IconInfo.js';
+import '../SVGIcons/IconDismissCircle.js';
+import '../SVGIcons/IconDismissCircleFilled.js';
+import '../SVGIcons/IconEyeOff.js';
+import '../SVGIcons/IconEyeOn.js';
+import '../Divider/Divider.js';
+import '../Tooltip/Tooltip.js';
+import 'react-dom';
+import 'framer-motion';
+import '../SVGIcons/IconChevronRight.js';
+import '../Collapse/CollapseGroup/CollapseGroup.js';
+import '../../toConsumableArray-e0031ed3.js';
+import '../Collapse/CollapseItem/CollapseItem.js';
+import '../../helperComponents/AnimatePresenceWrapper/AnimatePresenceWrapper.js';
+import '../SVGIcons/IconChevronDown.js';
+import '../Select/SharedComponents/ContentTop.js';
+import '../Select/SharedComponents/Actions.js';
+import '../Button/Button.js';
+import '../../helperComponents/Loader/Loader.js';
+import '../Button/consts.js';
+import '../Menu/Menu.js';
+import '../../helperComponents/OptionItem/OptionItem.js';
+import '../Avatar/Avatar.js';
+import '../FileUpload/FileUpload.js';
+import '../FileUpload/types.js';
+import '../FileUpload/UploadItems.js';
+import '../../hooks/useFormProps.js';
+import '../../context/types.js';
+import '../SVGIcons/IconDelete.js';
+import '../SVGIcons/IconEditFilled.js';
+import '../SVGIcons/IconEdit.js';
+import '../SVGIcons/IconAttach.js';
+import '../SVGIcons/IconCheckmark.js';
+import '../SVGIcons/IconMore.js';
+import '../SVGIcons/IconDismissFilled.js';
+import '../SVGIcons/IconSearchFilled.js';
+import '../SVGIcons/IconSelectAllOff.js';
+import '../SVGIcons/IconChevronLeft.js';
+import '../Select/ButtonSelect/ButtonSelect.js';
+import '../Select/SharedComponents/Loading.js';
+import '../Select/SharedComponents/ButtonSelectWrapper/ButtonSelectWrapper.js';
+import '../Select/SharedComponents/ButtonSelectWrapper/Button/Button.js';
+import '../SVGIcons/IconCaretDownFilled.js';
+import '../SVGIcons/IconCaretUpFilled.js';
+import '../../hooks/useGetHasBottomSpace.js';
+import '../../hooks/useChangePositionsOnScroll.js';
+
+var _excluded = ["value", "currentDate", "setFieldValue", "name", "label", "size", "locale", "changeHandler", "format", "dayjsLocale", "required", "dataId", "hasError", "placeholderText", "months", "minDate", "maxDate", "dataIdPrefix", "helperText"];
+var SimpleDatePicker = function SimpleDatePicker(props) {
+  var value = props.value,
+    currentDate = props.currentDate,
+    setFieldValue = props.setFieldValue,
+    name = props.name,
+    label = props.label,
+    size = props.size,
+    _props$locale = props.locale,
+    locale = _props$locale === void 0 ? 'hy' : _props$locale,
+    changeHandler = props.changeHandler,
+    _props$format = props.format,
+    format = _props$format === void 0 ? 'M/D/YYYY' : _props$format,
+    _props$dayjsLocale = props.dayjsLocale,
+    dayjsLocale = _props$dayjsLocale === void 0 ? 'hy-am' : _props$dayjsLocale,
+    _props$required = props.required,
+    required = _props$required === void 0 ? false : _props$required,
+    dataId = props.dataId,
+    hasError = props.hasError,
+    placeholderText = props.placeholderText,
+    _props$months = props.months,
+    months = _props$months === void 0 ? MONTHS : _props$months,
+    minDate = props.minDate,
+    maxDate = props.maxDate,
+    dataIdPrefix = props.dataIdPrefix,
+    helperText = props.helperText,
+    rest = _objectWithoutProperties(props, _excluded);
+  var startYear = minDate ? minDate.getFullYear() : 1900;
+  var endYear = maxDate ? maxDate.getFullYear() : new Date().getFullYear() + 5;
+  var calendarRef = useRef(null);
+  useImportFilesDynamically(dayjsLocale);
+  var selectedDate = value !== undefined && Object.prototype.toString.call(value) === '[object Date]' ? value : currentDate;
+  var openDatepicker = function openDatepicker() {
+    if (calendarRef.current) {
+      var _calendarRef$current, _calendarRef$current2;
+      var isOpen = (_calendarRef$current = calendarRef.current) === null || _calendarRef$current === void 0 ? void 0 : _calendarRef$current.isCalendarOpen();
+      (_calendarRef$current2 = calendarRef.current) === null || _calendarRef$current2 === void 0 || _calendarRef$current2.setOpen(!isOpen);
+    }
+  };
+  var onChange = function onChange(date) {
+    if (setFieldValue && name) {
+      setFieldValue(name, date);
+    }
+    if (changeHandler) {
+      changeHandler(date);
+    }
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: "picker-container"
+  }, /*#__PURE__*/React.createElement(Label, {
+    text: label,
+    required: required,
+    invalid: hasError
+  }), /*#__PURE__*/React.createElement(DatePicker, _extends({
+    minDate: minDate,
+    maxDate: maxDate,
+    selected: dayjs(selectedDate).isValid() ? selectedDate : null,
+    locale: locale
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    ,
+    ref: calendarRef,
+    customInput: /*#__PURE__*/React.createElement(Input, {
+      size: size,
+      dataId: dataId,
+      helperText: helperText,
+      datePlaceHolderText: label ? '' : placeholderText,
+      rightIconProps: {
+        Component: IconCalendarRight,
+        onClick: openDatepicker
+      },
+      currentValue: selectedDate ? dayjs(selectedDate.toString()).format(format) : ''
+    })
+  }, rest, {
+    onChange: onChange,
+    renderCustomHeader: function renderCustomHeader(props) {
+      return /*#__PURE__*/React.createElement(CustomHeader, _extends({}, props, {
+        months: months,
+        startYear: startYear,
+        endYear: endYear,
+        dataPrefix: dataIdPrefix
+      }));
+    }
+  })));
+};
+
+export { SimpleDatePicker };

package/components/DatePicker/TimePicker.d.ts

@@ -0,0 +1,3 @@
+import type { JSX } from 'react';
+import type { ITimePickerProps } from './types';
+export declare const TimePicker: (props: ITimePickerProps) => JSX.Element;

package/components/DatePicker/TimePicker.js

@@ -0,0 +1,119 @@
+import { _ as _extends } from '../../extends-e8ef956f.js';
+import { _ as _slicedToArray } from '../../slicedToArray-0c706912.js';
+import { _ as _objectWithoutProperties } from '../../objectWithoutProperties-fcd64cc7.js';
+import React, { useState, useRef } from 'react';
+import dayjs from 'dayjs';
+import DatePicker from 'react-datepicker';
+import { Input } from '../Input/Input.js';
+import '../Input/InputPassword.js';
+import { Label } from '../../helperComponents/Label/Label.js';
+import 'classnames';
+import '../Checkbox/Checkbox.js';
+import '../../hooks/useScreenSize.js';
+import 'react-hook-form';
+import 'react-syntax-highlighter';
+import { useImportFilesDynamically } from './hooks.js';
+import { IconClock } from '../SVGIcons/IconClock.js';
+import '../../defineProperty-7db32082.js';
+import '../../typeof-ecd92d7f.js';
+import 'react-input-mask';
+import 'react-number-format';
+import '../../helperComponents/ErrorMessage/ErrorMessage.js';
+import '../Text/Text.js';
+import '../../utils/helpers.js';
+import '../../helperComponents/IconDynamicComponent/IconDynamicComponent.js';
+import '../../helperComponents/IconDynamicComponent/constants.js';
+import '../SVGIcons/IconCheckmarkCircleFilled.js';
+import '../Popover/Popover.js';
+import '../../hooks/useGetTooltipStyles.js';
+import '../../hooks/useGetElemSizes.js';
+import '../../hooks/useGetElemPositions.js';
+import '../../hooks/useGetTooltipPosition.js';
+import '../Tooltip/types.js';
+import '../../hooks/useHideOnScroll.js';
+import '../../consts/index.js';
+import '../../hooks/useOnOutsideClick.js';
+import '../Link/Link.js';
+import '../SVGIcons/IconInfo.js';
+import '../SVGIcons/IconDismissCircle.js';
+import '../SVGIcons/IconDismissCircleFilled.js';
+import '../SVGIcons/IconEyeOff.js';
+import '../SVGIcons/IconEyeOn.js';
+import '../Divider/Divider.js';
+import '../Tooltip/Tooltip.js';
+
+var _excluded = ["value", "currentTime", "name", "setFieldValue", "label", "size", "dataId", "changeHandler", "required", "format", "locale", "dayjsLocale", "placeholderText", "hasError"];
+var TimePicker = function TimePicker(props) {
+  var value = props.value,
+    currentTime = props.currentTime,
+    name = props.name,
+    setFieldValue = props.setFieldValue,
+    label = props.label,
+    size = props.size,
+    dataId = props.dataId,
+    changeHandler = props.changeHandler,
+    required = props.required,
+    _props$format = props.format,
+    format = _props$format === void 0 ? 'HH:mm' : _props$format,
+    _props$locale = props.locale,
+    locale = _props$locale === void 0 ? 'hy' : _props$locale,
+    _props$dayjsLocale = props.dayjsLocale,
+    dayjsLocale = _props$dayjsLocale === void 0 ? 'hy-am' : _props$dayjsLocale,
+    placeholderText = props.placeholderText,
+    hasError = props.hasError,
+    rest = _objectWithoutProperties(props, _excluded);
+  var dateInitialValue = value !== undefined && Object.prototype.toString.call(value) === '[object Date]' ? value : currentTime;
+  var _useState = useState(dateInitialValue),
+    _useState2 = _slicedToArray(_useState, 2),
+    selectedTime = _useState2[0],
+    setCurrentTime = _useState2[1];
+  var calendarRef = useRef(null);
+  useImportFilesDynamically(dayjsLocale);
+  var onChange = function onChange(date) {
+    setCurrentTime(date);
+    if (changeHandler) {
+      changeHandler(date);
+    }
+    if (setFieldValue && name) {
+      setFieldValue(name, date);
+    }
+  };
+  var openDatepicker = function openDatepicker() {
+    if (calendarRef.current) {
+      var _calendarRef$current, _calendarRef$current2;
+      var isOpen = (_calendarRef$current = calendarRef.current) === null || _calendarRef$current === void 0 ? void 0 : _calendarRef$current.isCalendarOpen();
+      (_calendarRef$current2 = calendarRef.current) === null || _calendarRef$current2 === void 0 || _calendarRef$current2.setOpen(!isOpen);
+    }
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: "picker-container input__inner"
+  }, /*#__PURE__*/React.createElement(Label, {
+    text: label,
+    required: required,
+    invalid: hasError
+  }), /*#__PURE__*/React.createElement(DatePicker, _extends({
+    selected: dayjs(selectedTime).isValid() ? selectedTime : null,
+    locale: locale,
+    showTimeSelect: true,
+    showTimeSelectOnly: true,
+    dateFormat: format
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    ,
+    ref: calendarRef
+  }, rest, {
+    onChange: onChange,
+    customInput: /*#__PURE__*/React.createElement(Input, {
+      disabled: rest.disabled,
+      dataId: dataId,
+      size: size,
+      placeholder: placeholderText,
+      rightIconProps: {
+        Component: IconClock,
+        onClick: openDatepicker
+      }
+    })
+  })));
+};
+
+export { TimePicker };

package/components/DatePicker/hooks.d.ts

@@ -0,0 +1,4 @@
+import 'dayjs/locale/hy-am';
+import 'dayjs/locale/ru';
+import 'dayjs/locale/en';
+export declare function useImportFilesDynamically(dayjsLocale: string): void;