hrm_ui_lib 2.1.0 → 2.2.0

package/components/Collapse/CollapseGroup/CollapseGroup.js

@@ -1,76 +1,25 @@
-import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
-import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import React, { forwardRef, useState } from 'react';
-import { CollapseItem } from '../CollapseItem/CollapseItem.js';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useState } from 'react';
+import { CollapseItem } from '../CollapseItem/CollapseItem';
 import classNames from 'classnames';
-import '@babel/runtime/helpers/extends';
-import 'framer-motion';
-import '../../Text/Text.js';
-import '../../../utils/helpers.js';
-import 'dayjs';
-import '../../SVGIcons/IconChevronRight.js';
-import '@babel/runtime/helpers/defineProperty';
-import '../../Divider/Divider.js';
-import '../../../helperComponents/AnimatePresenceWrapper/AnimatePresenceWrapper.js';
-import '../../SVGIcons/IconChevronDown.js';
-
-var CollapseGroup = /*#__PURE__*/forwardRef(function (props, ref) {
-  var items = props.items,
-    singleSelection = props.singleSelection,
-    _props$titleProps = props.titleProps,
-    titleProps = _props$titleProps === void 0 ? {} : _props$titleProps,
-    className = props.className;
-  var size = titleProps.size,
-    color = titleProps.color;
-  var _useState = useState(items.filter(function (item) {
-      return item.isOpen;
-    }).map(function (item) {
-      return item.value;
-    })),
-    _useState2 = _slicedToArray(_useState, 2),
-    openValues = _useState2[0],
-    setOpenValues = _useState2[1];
-  var onCollapseSelect = function onCollapseSelect(value) {
-    if (singleSelection) {
-      setOpenValues([value]);
-    } else {
-      setOpenValues([].concat(_toConsumableArray(openValues), [value]));
-    }
-  };
-  var onCollapseDeselect = function onCollapseDeselect(value) {
-    setOpenValues(openValues.filter(function (item) {
-      return item !== value;
-    }));
-  };
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames('collapse-group', className),
-    ref: ref
-  }, items.map(function (_ref) {
-    var id = _ref.id,
-      title = _ref.title,
-      value = _ref.value,
-      content = _ref.content,
-      dataId = _ref.dataId,
-      iconProps = _ref.iconProps;
-    var isOpen = openValues.indexOf(value) !== -1;
-    return /*#__PURE__*/React.createElement(CollapseItem, {
-      className: 'collapse-group__item',
-      id: id,
-      isOpen: isOpen,
-      key: value,
-      dataId: dataId,
-      title: {
-        size: size,
-        color: color,
-        text: title
-      },
-      toggle: function toggle() {
-        return isOpen ? onCollapseDeselect(value) : onCollapseSelect(value);
-      },
-      labelLeftIconProps: iconProps
-    }, content);
-  }));
+export const CollapseGroup = forwardRef((props, ref) => {
+    const { items, singleSelection, titleProps = {}, className } = props;
+    const { size, color } = titleProps;
+    const [openValues, setOpenValues] = useState(items.filter((item) => item.isOpen).map((item) => item.value));
+    const onCollapseSelect = (value) => {
+        if (singleSelection) {
+            setOpenValues([value]);
+        }
+        else {
+            setOpenValues([...openValues, value]);
+        }
+    };
+    const onCollapseDeselect = (value) => {
+        setOpenValues(openValues.filter((item) => item !== value));
+    };
+    return (_jsx("div", { className: classNames('collapse-group', className), ref: ref, children: items.map(({ id, title, value, content, dataId, iconProps }) => {
+            const isOpen = openValues.indexOf(value) !== -1;
+            return (_jsx(CollapseItem, { className: 'collapse-group__item', id: id, isOpen: isOpen, dataId: dataId, title: { size, color, text: title }, toggle: () => (isOpen ? onCollapseDeselect(value) : onCollapseSelect(value)), labelLeftIconProps: iconProps, children: content }, value));
+        }) }));
 });
 CollapseGroup.displayName = 'CollapseGroup';
-
-export { CollapseGroup };

package/components/Collapse/CollapseItem/CollapseItem.js

@@ -1,89 +1,14 @@
-import _extends from '@babel/runtime/helpers/extends';
-import React from 'react';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { motion } from 'framer-motion';
-import { Text } from '../../Text/Text.js';
-import { IconChevronRight } from '../../SVGIcons/IconChevronRight.js';
-import { Divider } from '../../Divider/Divider.js';
-import { AnimatePresenceWrapper } from '../../../helperComponents/AnimatePresenceWrapper/AnimatePresenceWrapper.js';
+import { Text } from '../../Text';
+import { IconChevronRight } from '../../SVGIcons/IconChevronRight';
+import { Divider } from '../../Divider';
+import { AnimatePresenceWrapper } from '../../../helperComponents/AnimatePresenceWrapper';
 import classNames from 'classnames';
-import { IconChevronDown } from '../../SVGIcons/IconChevronDown.js';
-import { generateDataTestId } from '../../../utils/helpers.js';
-import 'dayjs';
-import '@babel/runtime/helpers/defineProperty';
-
-var CollapseItem = function CollapseItem(props) {
-  var _props$title = props.title,
-    text = _props$title.text,
-    _props$title$weight = _props$title.weight,
-    weight = _props$title$weight === void 0 ? 'bolder' : _props$title$weight,
-    _props$title$size = _props$title.size,
-    size = _props$title$size === void 0 ? 'medium' : _props$title$size,
-    color = _props$title.color,
-    className = props.className,
-    isOpen = props.isOpen,
-    toggle = props.toggle,
-    dataId = props.dataId,
-    children = props.children,
-    _props$reverse = props.reverse,
-    reverse = _props$reverse === void 0 ? false : _props$reverse,
-    additionalInfo = props.additionalInfo,
-    labelLeftIconProps = props.labelLeftIconProps,
-    id = props.id;
-  var title = typeof text === 'string' ? /*#__PURE__*/React.createElement(Text, {
-    size: size,
-    type: color,
-    weight: weight,
-    dataId: generateDataTestId('title', dataId)
-  }, text) : text;
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames('collapse', {
-      'collapse--opened': isOpen
-    }, className),
-    id: "".concat(id || ''),
-    "data-id": generateDataTestId('collapse-item', dataId)
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "collapse__header flexbox justify-content--between",
-    onClick: toggle
-  }, reverse ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    className: "collapse__header__inner flexbox align-items--center"
-  }, /*#__PURE__*/React.createElement(IconChevronDown, {
-    className: 'collapse__header__icon',
-    size: 'small'
-  }), additionalInfo), title) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    className: "flexbox align-items--center"
-  }, labelLeftIconProps !== null && labelLeftIconProps !== void 0 && labelLeftIconProps.Component ? /*#__PURE__*/React.createElement(labelLeftIconProps.Component, _extends({
-    size: "small",
-    type: "primary",
-    className: "mr-16"
-  }, labelLeftIconProps)) : null, title), /*#__PURE__*/React.createElement("div", {
-    className: "collapse__header__inner flexbox align-items--center"
-  }, additionalInfo, /*#__PURE__*/React.createElement(IconChevronRight, {
-    className: 'collapse__header__icon',
-    size: 'small'
-  })))), /*#__PURE__*/React.createElement(AnimatePresenceWrapper, {
-    initial: false
-  }, isOpen && /*#__PURE__*/React.createElement(motion.div, {
-    initial: {
-      height: 0
-    },
-    animate: {
-      height: 'auto'
-    },
-    exit: {
-      height: 0
-    },
-    transition: {
-      type: 'spring',
-      duration: 0.5,
-      bounce: 0
-    }
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "collapse__content"
-  }, /*#__PURE__*/React.createElement(Divider, {
-    type: "primary",
-    isHorizontal: true,
-    className: 'collapse__divider'
-  }), children))));
+import IconChevronDown from '../../SVGIcons/IconChevronDown';
+import { generateDataTestId } from '../../../utils/helpers';
+export const CollapseItem = (props) => {
+    const { title: { text, weight = 'bolder', size = 'medium', color }, className, isOpen, toggle, dataId, children, reverse = false, additionalInfo, labelLeftIconProps, id } = props;
+    const title = typeof text === 'string' ? (_jsx(Text, { size: size, type: color, weight: weight, dataId: generateDataTestId('title', dataId), children: text })) : (text);
+    return (_jsxs("div", { className: classNames('collapse', { 'collapse--opened': isOpen }, className), id: `${id || ''}`, "data-id": generateDataTestId('collapse-item', dataId), children: [_jsx("div", { className: "collapse__header flexbox justify-content--between", onClick: toggle, children: reverse ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "collapse__header__inner flexbox align-items--center", children: [_jsx(IconChevronDown, { className: 'collapse__header__icon', size: 'small' }), additionalInfo] }), title] })) : (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flexbox align-items--center", children: [(labelLeftIconProps === null || labelLeftIconProps === void 0 ? void 0 : labelLeftIconProps.Component) ? (_jsx(labelLeftIconProps.Component, Object.assign({ size: "small", type: "primary", className: "mr-16" }, labelLeftIconProps))) : null, title] }), _jsxs("div", { className: "collapse__header__inner flexbox align-items--center", children: [additionalInfo, _jsx(IconChevronRight, { className: 'collapse__header__icon', size: 'small' })] })] })) }), _jsx(AnimatePresenceWrapper, { initial: false, children: isOpen && (_jsx(motion.div, { initial: { height: 0 }, animate: { height: 'auto' }, exit: { height: 0 }, transition: { type: 'spring', duration: 0.5, bounce: 0 }, children: _jsxs("div", { className: "collapse__content", children: [_jsx(Divider, { type: "primary", isHorizontal: true, className: 'collapse__divider' }), children] }) })) })] }));
 };
-
-export { CollapseItem };

package/components/Collapse/index.js

@@ -1,16 +1,2 @@
-export { CollapseItem } from './CollapseItem/CollapseItem.js';
-export { CollapseGroup } from './CollapseGroup/CollapseGroup.js';
-import '@babel/runtime/helpers/extends';
-import 'react';
-import 'framer-motion';
-import '../Text/Text.js';
-import 'classnames';
-import '../../utils/helpers.js';
-import 'dayjs';
-import '../SVGIcons/IconChevronRight.js';
-import '@babel/runtime/helpers/defineProperty';
-import '../Divider/Divider.js';
-import '../../helperComponents/AnimatePresenceWrapper/AnimatePresenceWrapper.js';
-import '../SVGIcons/IconChevronDown.js';
-import '@babel/runtime/helpers/toConsumableArray';
-import '@babel/runtime/helpers/slicedToArray';
+export * from './CollapseItem/CollapseItem';
+export * from './CollapseGroup/CollapseGroup';

package/components/Collapse/types.js

@@ -1 +1 @@
-
+export {};

package/components/Container/Container.js

@@ -1,10 +1,5 @@
-import React from 'react';
-
-var Container = function Container(props) {
-  var children = props.children;
-  return /*#__PURE__*/React.createElement("div", {
-    className: "container"
-  }, children);
+import { jsx as _jsx } from "react/jsx-runtime";
+export const Container = (props) => {
+    const { children } = props;
+    return _jsx("div", { className: "container", children: children });
 };
-
-export { Container };

package/components/Container/index.js

@@ -1,2 +1 @@
-export { Container } from './Container.js';
-import 'react';
+export * from './Container';

package/components/Container/types.js

@@ -1 +1 @@
-
+export {};

package/components/Copy/Copy.js

@@ -1,94 +1,16 @@
-import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import React, { useState, useRef } from 'react';
-import { B as Button, P as Popover } from '../../Alert-BslI0aA0.js';
-import { IconCopy } from '../SVGIcons/IconCopy.js';
-import '@babel/runtime/helpers/extends';
-import '../Alert/consts.js';
-import 'classnames';
-import '../Text/Text.js';
-import '../../utils/helpers.js';
-import 'dayjs';
-import '@babel/runtime/helpers/defineProperty';
-import '@babel/runtime/helpers/objectWithoutProperties';
-import '../../helperComponents/Loader/Loader.js';
-import '@babel/runtime/helpers/toConsumableArray';
-import '../../consts/index.js';
-import '../../type/file-upload.js';
-import '../../hooks/useScreenSize.js';
-import 'react-hook-form';
-import 'react-dropzone';
-import '../SVGIcons/IconUpload.js';
-import '../FileUpload/types.js';
-import '../../helpers/format-date.js';
-import '../../helpers/locale.js';
-import '../../type/locale.js';
-import '../../helpers/storage.js';
-import 'react-toastify';
-import '../../hooks/useGetIsMobile.js';
-import 'framer-motion';
-import '../../helperComponents/AnimatePresenceWrapper/AnimatePresenceWrapper.js';
-import '../../hooks/useOnOutsideClick.js';
-import '../../hooks/useHideBodyScroll.js';
-import '../SVGIcons/IconDismiss.js';
-import '../Tooltip/types.js';
-import '../Tooltip/Tooltip.js';
-import '../../hooks/useGetTooltipStyles.js';
-import '../../hooks/useGetElemSizes.js';
-import '../../hooks/useGetElemPositions.js';
-import '../../hooks/useGetTooltipPosition.js';
-import '../../hooks/useHideOnScroll.js';
-import 'react-syntax-highlighter';
-import '../Link/Link.js';
-import '../Popover/PopoverDesktop.js';
-import '../SVGIcons/IconInfo.js';
-import '../../helperComponents/IconDynamicComponent/IconDynamicComponent.js';
-import '../../helperComponents/IconDynamicComponent/constants.js';
-import '@babel/runtime/helpers/typeof';
-import '../SVGIcons/IconDismissFilled.js';
-import '../SVGIcons/IconDelete.js';
-import '../FileUpload/DropzoneFileUpload/FilePreview.js';
-import '../Progress/Progress.js';
-import '../SVGIcons/IconArrowDownloadFilled.js';
-import '../../helpers/download-file.js';
-import '../Button/consts.js';
-
-var Copy = function Copy(_ref) {
-  var textAfterCopy = _ref.textAfterCopy,
-    _ref$className = _ref.className,
-    className = _ref$className === void 0 ? '' : _ref$className,
-    text = _ref.text,
-    dataId = _ref.dataId;
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    isTooltipVisible = _useState2[0],
-    setTooltipVisibility = _useState2[1];
-  var copyIconRef = useRef(null);
-  var copy = function copy(e) {
-    e.stopPropagation();
-    navigator.clipboard.writeText(text);
-    setTooltipVisibility(true);
-    setTimeout(function () {
-      return setTooltipVisibility(false);
-    }, 3000);
-  };
-  return /*#__PURE__*/React.createElement("div", {
-    ref: copyIconRef,
-    className: "copy-icon"
-  }, /*#__PURE__*/React.createElement(Button, {
-    dataId: dataId,
-    type: "tertiary",
-    iconProps: {
-      Component: IconCopy
-    },
-    size: "small",
-    className: className,
-    onClick: copy
-  }), isTooltipVisible ? /*#__PURE__*/React.createElement(Popover, {
-    clicked: true,
-    elemRef: copyIconRef.current,
-    text: textAfterCopy || 'Copied',
-    position: 'top-center'
-  }) : null);
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useRef } from 'react';
+import { Button } from '../Button';
+import { Popover } from '../Popover';
+import { IconCopy } from '../SVGIcons/IconCopy';
+export const Copy = ({ textAfterCopy, className = '', text, dataId }) => {
+    const [isTooltipVisible, setTooltipVisibility] = useState(false);
+    const copyIconRef = useRef(null);
+    const copy = (e) => {
+        e.stopPropagation();
+        navigator.clipboard.writeText(text);
+        setTooltipVisibility(true);
+        setTimeout(() => setTooltipVisibility(false), 3000);
+    };
+    return (_jsxs("div", { ref: copyIconRef, className: "copy-icon", children: [_jsx(Button, { dataId: dataId, type: "tertiary", iconProps: { Component: IconCopy }, size: "small", className: className, onClick: copy }), isTooltipVisible ? (_jsx(Popover, { clicked: true, elemRef: copyIconRef.current, text: textAfterCopy || 'Copied', position: 'top-center' })) : null] }));
 };
-
-export { Copy };

package/components/Copy/index.js

@@ -1,54 +1 @@
-export { Copy } from './Copy.js';
-import '@babel/runtime/helpers/slicedToArray';
-import 'react';
-import '../../Alert-BslI0aA0.js';
-import '@babel/runtime/helpers/extends';
-import '../Alert/consts.js';
-import 'classnames';
-import '../Text/Text.js';
-import '../../utils/helpers.js';
-import 'dayjs';
-import '@babel/runtime/helpers/defineProperty';
-import '@babel/runtime/helpers/objectWithoutProperties';
-import '../../helperComponents/Loader/Loader.js';
-import '@babel/runtime/helpers/toConsumableArray';
-import '../../consts/index.js';
-import '../../type/file-upload.js';
-import '../../hooks/useScreenSize.js';
-import 'react-hook-form';
-import 'react-dropzone';
-import '../SVGIcons/IconUpload.js';
-import '../FileUpload/types.js';
-import '../../helpers/format-date.js';
-import '../../helpers/locale.js';
-import '../../type/locale.js';
-import '../../helpers/storage.js';
-import 'react-toastify';
-import '../../hooks/useGetIsMobile.js';
-import 'framer-motion';
-import '../../helperComponents/AnimatePresenceWrapper/AnimatePresenceWrapper.js';
-import '../../hooks/useOnOutsideClick.js';
-import '../../hooks/useHideBodyScroll.js';
-import '../SVGIcons/IconDismiss.js';
-import '../Tooltip/types.js';
-import '../Tooltip/Tooltip.js';
-import '../../hooks/useGetTooltipStyles.js';
-import '../../hooks/useGetElemSizes.js';
-import '../../hooks/useGetElemPositions.js';
-import '../../hooks/useGetTooltipPosition.js';
-import '../../hooks/useHideOnScroll.js';
-import 'react-syntax-highlighter';
-import '../Link/Link.js';
-import '../Popover/PopoverDesktop.js';
-import '../SVGIcons/IconInfo.js';
-import '../../helperComponents/IconDynamicComponent/IconDynamicComponent.js';
-import '../../helperComponents/IconDynamicComponent/constants.js';
-import '@babel/runtime/helpers/typeof';
-import '../SVGIcons/IconDismissFilled.js';
-import '../SVGIcons/IconDelete.js';
-import '../FileUpload/DropzoneFileUpload/FilePreview.js';
-import '../Progress/Progress.js';
-import '../SVGIcons/IconArrowDownloadFilled.js';
-import '../../helpers/download-file.js';
-import '../Button/consts.js';
-import '../SVGIcons/IconCopy.js';
+export * from './Copy';

package/components/Copy/types.js

@@ -1 +1 @@
-
+export {};

package/components/Counter/Counter.js

@@ -1,137 +1,57 @@
-import _extends from '@babel/runtime/helpers/extends';
-import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import React, { forwardRef } from 'react';
-import { Input } from '../Input/Input.js';
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { Input } from '../Input';
 import classNames from 'classnames';
-import { noop } from '../../utils/helpers.js';
-import { IconAdd } from '../SVGIcons/IconAdd.js';
-import { IconSubtract } from '../SVGIcons/IconSubtract.js';
-import '@babel/runtime/helpers/defineProperty';
-import 'react-input-mask';
-import 'react-number-format';
-import '../../helperComponents/Label/Label.js';
-import '../Text/Text.js';
-import 'dayjs';
-import '../../helperComponents/ErrorMessage/ErrorMessage.js';
-import '../../helperComponents/IconDynamicComponent/IconDynamicComponent.js';
-import '../../helperComponents/IconDynamicComponent/constants.js';
-import '@babel/runtime/helpers/slicedToArray';
-import '@babel/runtime/helpers/toConsumableArray';
-import '../../consts/index.js';
-import '../../type/file-upload.js';
-import '../../hooks/useScreenSize.js';
-import 'react-hook-form';
-import '../../Alert-BslI0aA0.js';
-import '../Alert/consts.js';
-import '../../helperComponents/Loader/Loader.js';
-import 'react-dropzone';
-import '../SVGIcons/IconUpload.js';
-import '../FileUpload/types.js';
-import '../../helpers/format-date.js';
-import '../../helpers/locale.js';
-import '../../type/locale.js';
-import '../../helpers/storage.js';
-import 'react-toastify';
-import '../../hooks/useGetIsMobile.js';
-import 'framer-motion';
-import '../../helperComponents/AnimatePresenceWrapper/AnimatePresenceWrapper.js';
-import '../../hooks/useOnOutsideClick.js';
-import '../../hooks/useHideBodyScroll.js';
-import '../SVGIcons/IconDismiss.js';
-import '../Tooltip/types.js';
-import '../Tooltip/Tooltip.js';
-import '../../hooks/useGetTooltipStyles.js';
-import '../../hooks/useGetElemSizes.js';
-import '../../hooks/useGetElemPositions.js';
-import '../../hooks/useGetTooltipPosition.js';
-import '../../hooks/useHideOnScroll.js';
-import 'react-syntax-highlighter';
-import '../Link/Link.js';
-import '../Popover/PopoverDesktop.js';
-import '../SVGIcons/IconInfo.js';
-import '@babel/runtime/helpers/typeof';
-import '../SVGIcons/IconDismissFilled.js';
-import '../SVGIcons/IconDelete.js';
-import '../FileUpload/DropzoneFileUpload/FilePreview.js';
-import '../Progress/Progress.js';
-import '../SVGIcons/IconArrowDownloadFilled.js';
-import '../../helpers/download-file.js';
-import '../Button/consts.js';
-import '../SVGIcons/IconCheckmarkCircleFilled.js';
-
-var _excluded = ["max", "min", "handleChange", "name", "counter", "setFieldValue", "customError", "label", "required", "value", "hasError"];
-var Counter = /*#__PURE__*/forwardRef(function (props, ref) {
-  var _props$max = props.max,
-    max = _props$max === void 0 ? 99999999 : _props$max,
-    _props$min = props.min,
-    min = _props$min === void 0 ? 0 : _props$min,
-    handleChange = props.handleChange,
-    name = props.name,
-    _props$counter = props.counter,
-    counter = _props$counter === void 0 ? 0 : _props$counter,
-    setFieldValue = props.setFieldValue,
-    customError = props.customError,
-    label = props.label,
-    _props$required = props.required,
-    required = _props$required === void 0 ? false : _props$required,
-    value = props.value,
-    _props$hasError = props.hasError,
-    hasError = _props$hasError === void 0 ? false : _props$hasError,
-    rest = _objectWithoutProperties(props, _excluded);
-  var counterValue = value !== undefined ? parseInt(value) : counter;
-  var isFormField = value !== undefined;
-  var customChangeHandler = function customChangeHandler(inputedValue) {
-    if (handleChange) {
-      +inputedValue > max ? handleChange(max) : +inputedValue < min ? handleChange(min) : handleChange(inputedValue);
-    }
-    if (setFieldValue && name) {
-      setFieldValue(name, inputedValue, {
-        shouldValidate: hasError
-      });
-    }
-  };
-  var increase = function increase() {
-    return customChangeHandler(counterValue - 1);
-  };
-  var decrease = function decrease() {
-    return customChangeHandler(counterValue + 1);
-  };
-  var onInputChange = function onInputChange(e) {
-    return customChangeHandler(parseInt(e.target.value));
-  };
-  var isIncreaseIconDisabled = counterValue <= min;
-  var isDecreaseIconDisabled = counterValue === undefined || counterValue >= max;
-  return /*#__PURE__*/React.createElement(Input, _extends({}, rest, {
-    className: "counter",
-    error: isFormField ? '' : customError,
-    label: label,
-    required: required,
-    leftIconProps: {
-      dataId: "".concat(rest.dataId, "-decrement"),
-      size: 'small',
-      Component: IconSubtract,
-      className: classNames({
-        action_active: !isIncreaseIconDisabled
-      }),
-      type: isIncreaseIconDisabled ? 'disabled' : 'primary',
-      onClick: isIncreaseIconDisabled ? noop : increase
-    },
-    rightIconProps: {
-      dataId: "".concat(rest.dataId, "-increment"),
-      Component: IconAdd,
-      size: 'small',
-      className: classNames({
-        action_active: !isDecreaseIconDisabled
-      }),
-      onClick: isDecreaseIconDisabled ? noop : decrease,
-      type: isDecreaseIconDisabled ? 'disabled' : 'primary'
-    },
-    type: "number",
-    name: name,
-    value: counterValue,
-    onChange: onInputChange
-  }));
+import { noop } from '../../utils/helpers';
+import IconAdd from '../SVGIcons/IconAdd';
+import IconSubtract from '../SVGIcons/IconSubtract';
+export const Counter = forwardRef((props, ref) => {
+    const { max = 99999999, min = 0, handleChange, name, counter = 0, setFieldValue, customError, label, required = false, value, hasError = false } = props, rest = __rest(props, ["max", "min", "handleChange", "name", "counter", "setFieldValue", "customError", "label", "required", "value", "hasError"]);
+    const counterValue = value !== undefined ? parseInt(value) : counter;
+    const isFormField = value !== undefined;
+    const customChangeHandler = (inputedValue) => {
+        if (handleChange) {
+            ;
+            +inputedValue > max
+                ? handleChange(max)
+                : +inputedValue < min
+                    ? handleChange(min)
+                    : handleChange(inputedValue);
+        }
+        if (setFieldValue && name) {
+            setFieldValue(name, inputedValue, { shouldValidate: hasError });
+        }
+    };
+    const increase = () => customChangeHandler(counterValue - 1);
+    const decrease = () => customChangeHandler(counterValue + 1);
+    const onInputChange = (e) => customChangeHandler(parseInt(e.target.value));
+    const isIncreaseIconDisabled = counterValue <= min;
+    const isDecreaseIconDisabled = counterValue === undefined || counterValue >= max;
+    return (_jsx(Input, Object.assign({}, rest, { className: "counter", error: isFormField ? '' : customError, label: label, required: required, leftIconProps: {
+            dataId: `${rest.dataId}-decrement`,
+            size: 'small',
+            Component: IconSubtract,
+            className: classNames({ action_active: !isIncreaseIconDisabled }),
+            type: isIncreaseIconDisabled ? 'disabled' : 'primary',
+            onClick: isIncreaseIconDisabled ? noop : increase
+        }, rightIconProps: {
+            dataId: `${rest.dataId}-increment`,
+            Component: IconAdd,
+            size: 'small',
+            className: classNames({ action_active: !isDecreaseIconDisabled }),
+            onClick: isDecreaseIconDisabled ? noop : decrease,
+            type: isDecreaseIconDisabled ? 'disabled' : 'primary'
+        }, type: "number", name: name, value: counterValue, onChange: onInputChange })));
 });
 Counter.displayName = 'Counter';
-
-export { Counter };