hrm_ui_lib 1.4.2 → 1.4.4

package/{Button-028f6f93.js → Button-2f532776.js}

@@ -1,16 +1,17 @@
-import { _ as _extends } from './extends-acf19b4c.js';
-import { _ as _defineProperty } from './defineProperty-fdfb938c.js';
-import { _ as _objectWithoutProperties } from './objectWithoutProperties-c5575e26.js';
-import React__default, { useState, useId, useEffect, forwardRef, useRef, useMemo } from 'react';
+import { _ as _extends } from './extends-50177a50.js';
+import { _ as _defineProperty } from './defineProperty-6b97a267.js';
+import { _ as _objectWithoutProperties } from './objectWithoutProperties-6b5c8df6.js';
+import React, { useState, useId, useEffect, forwardRef, useRef, useMemo } from 'react';
 import classNames from 'classnames';
 import 'dayjs';
 import { Loader } from './helperComponents/Loader/Loader.js';
 import './consts/index.js';
 import './hooks/useScreenSize.js';
 import 'react-hook-form';
-import { _ as _slicedToArray } from './slicedToArray-72c4258c.js';
+import { _ as _slicedToArray } from './slicedToArray-9decae19.js';
 import { useIsMobile } from './hooks/useGetIsMobile.js';
-import { A as AnimatePresenceWrapper } from './AnimatePresenceWrapper-cf3daece.js';
+import { motion } from 'framer-motion';
+import { AnimatePresenceWrapper } from './helperComponents/AnimatePresenceWrapper/AnimatePresenceWrapper.js';
 import { useOnOutsideClick } from './hooks/useOnOutsideClick.js';
 import { useHideBodyScroll } from './hooks/useHideBodyScroll.js';
 import 'react-syntax-highlighter';
@@ -19,7 +20,6 @@ import { Positions } from './components/Tooltip/types.js';
 import { Text } from './components/Text/Text.js';
 import { Tooltip } from './components/Tooltip/Tooltip.js';
 import { noop } from './utils/helpers.js';
-import { m as motion } from './proxy-3b995879.js';
 import { Link } from './components/Link/Link.js';
 import { PopoverDesktop } from './components/Popover/PopoverDesktop.js';
 import { IconInfo } from './components/SVGIcons/IconInfo.js';
@@ -44,7 +44,7 @@ var ButtonIcon = function ButtonIcon(props) {
     _props$refHandler = props.refHandler,
     refHandler = _props$refHandler === void 0 ? null : _props$refHandler,
     rest = _objectWithoutProperties(props, _excluded$3);
-  return /*#__PURE__*/React__default.createElement("button", _extends({
+  return /*#__PURE__*/React.createElement("button", _extends({
     ref: refHandler,
     "data-id": dataId,
     disabled: disabled,
@@ -52,10 +52,10 @@ var ButtonIcon = function ButtonIcon(props) {
     className: classNames('btn-icon', "btn-icon--".concat(size), className),
     onClick: onClick,
     form: formId
-  }, rest), isLoading ? /*#__PURE__*/React__default.createElement(Loader, {
+  }, rest), isLoading ? /*#__PURE__*/React.createElement(Loader, {
     size: size,
     type: 'dark'
-  }) : /*#__PURE__*/React__default.createElement(iconProps.Component, {
+  }) : /*#__PURE__*/React.createElement(iconProps.Component, {
     size: size,
     type: disabled ? 'disabled' : 'tertiary'
   }));
@@ -73,37 +73,37 @@ var ModalContent = function ModalContent(_ref) {
     confirmBtnTooltipText = _ref.confirmBtnTooltipText,
     buttonProps = _ref.buttonProps,
     onSubmit = _ref.onSubmit;
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, title ? /*#__PURE__*/React__default.createElement("div", {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, title ? /*#__PURE__*/React.createElement("div", {
     className: "modal__header"
-  }, /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(Text, {
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Text, {
     lineHeight: "large",
     size: "large",
     weight: 'bolder',
     dataId: dataIdPrefix ? "".concat(dataIdPrefix, "-modal-title") : ''
-  }, title), subtitle ? /*#__PURE__*/React__default.createElement(Text, {
+  }, title), subtitle ? /*#__PURE__*/React.createElement(Text, {
     className: 'mt-12',
     dataId: dataIdPrefix ? "".concat(dataIdPrefix, "-modal-title") : ''
-  }, subtitle) : null), closeIcon ? /*#__PURE__*/React__default.createElement(ButtonIcon, {
+  }, subtitle) : null), closeIcon ? /*#__PURE__*/React.createElement(ButtonIcon, {
     className: 'modal__close ml-16',
     dataId: dataIdPrefix ? "".concat(dataIdPrefix, "-modal-close-button") : '',
     iconProps: {
       Component: IconDismiss
     },
     onClick: onClose
-  }) : null) : null, /*#__PURE__*/React__default.createElement("div", {
+  }) : null) : null, /*#__PURE__*/React.createElement("div", {
     className: "modal__content scrollbar scrollbar--vertical"
-  }, children), withFooter && buttonProps ? /*#__PURE__*/React__default.createElement("div", {
+  }, children), withFooter && buttonProps ? /*#__PURE__*/React.createElement("div", {
     className: "modal__footer"
-  }, buttonProps.cancel && /*#__PURE__*/React__default.createElement(Button, _extends({
+  }, buttonProps.cancel && /*#__PURE__*/React.createElement(Button, _extends({
     type: "tertiary",
     className: "modal__footer__btn mr-16",
     onClick: onClose,
     dataId: dataIdPrefix ? "".concat(dataIdPrefix, "-modal-cancel-button") : ''
-  }, buttonProps.cancel || {})), confirmBtnTooltipText ? /*#__PURE__*/React__default.createElement(Tooltip, {
+  }, buttonProps.cancel || {})), confirmBtnTooltipText ? /*#__PURE__*/React.createElement(Tooltip, {
     text: confirmBtnTooltipText,
     id: 'confirm-btn-tooltip',
     position: Positions.TOP_CENTER
-  }) : null, /*#__PURE__*/React__default.createElement(Button, _extends({
+  }) : null, /*#__PURE__*/React.createElement(Button, _extends({
     id: 'confirm-btn-tooltip',
     className: 'modal__footer__btn',
     type: "primary",
@@ -170,7 +170,7 @@ var Modal = function Modal(props) {
     setContainerRef = _useState2[1];
   useOnOutsideClick(containerRef, onClose, closeOnOutsideClick && isOpen, useId());
   useHideBodyScroll(isOpen);
-  return /*#__PURE__*/React__default.createElement(AnimatePresenceWrapper, null, isOpen ? /*#__PURE__*/React__default.createElement(motion.div, {
+  return /*#__PURE__*/React.createElement(AnimatePresenceWrapper, null, isOpen ? /*#__PURE__*/React.createElement(motion.div, {
     className: classNames('modal', "modal--".concat(size), className),
     initial: {
       opacity: 0
@@ -184,12 +184,12 @@ var Modal = function Modal(props) {
     transition: {
       duration: 0.4
     }
-  }, /*#__PURE__*/React__default.createElement(motion.div, _extends({
+  }, /*#__PURE__*/React.createElement(motion.div, _extends({
     className: classNames('modal__container', {
       modal__container_mobile: isMobile
     }),
     ref: setContainerRef
-  }, isMobile ? MOBILE_ANIMATION : DESKTOP_ANIMATION), /*#__PURE__*/React__default.createElement(ModalContent, _extends({}, rest, {
+  }, isMobile ? MOBILE_ANIMATION : DESKTOP_ANIMATION), /*#__PURE__*/React.createElement(ModalContent, _extends({}, rest, {
     onClose: onClose
   })))) : null);
 };
@@ -203,19 +203,19 @@ var PopoverMobile = function PopoverMobile(props) {
     _props$clicked = props.clicked,
     clicked = _props$clicked === void 0 ? false : _props$clicked,
     children = props.children;
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Modal, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Modal, {
     closeIcon: true,
     title: mobileTitle,
     onClose: hideMessage,
     isOpen: clicked
-  }, clicked && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, linkAddons ? /*#__PURE__*/React__default.createElement(Link, {
+  }, clicked && /*#__PURE__*/React.createElement(React.Fragment, null, linkAddons ? /*#__PURE__*/React.createElement(Link, {
     dataId: linkAddons.dataId,
     url: linkAddons.url,
     beforeLink: linkAddons.beforeLink,
     afterLink: linkAddons.afterLink,
     target: linkAddons.target,
     className: 'popover__link'
-  }, text) : /*#__PURE__*/React__default.createElement(Text, {
+  }, text) : /*#__PURE__*/React.createElement(Text, {
     dataId: "".concat(dataId, "-text"),
     type: "primary",
     weight: "regular",
@@ -261,10 +261,10 @@ var Popover = function Popover(props) {
       setIsClicked(clicked);
     }
   }, [clicked, isClicked]);
-  return isMobile ? /*#__PURE__*/React__default.createElement(PopoverMobile, _extends({}, rest, {
+  return isMobile ? /*#__PURE__*/React.createElement(PopoverMobile, _extends({}, rest, {
     clicked: isClicked,
     hideMessage: hideMessage
-  })) : /*#__PURE__*/React__default.createElement(PopoverDesktop, _extends({}, rest, {
+  })) : /*#__PURE__*/React.createElement(PopoverDesktop, _extends({}, rest, {
     parent: parent,
     clicked: isClicked,
     showMessage: showMessage,
@@ -310,11 +310,11 @@ var Checkbox = /*#__PURE__*/forwardRef(function (props, ref) {
       onClick(!isChecked);
     }
   };
-  var checkboxLabelPopover = popoverAddons ? /*#__PURE__*/React__default.createElement(Popover, _extends({
+  var checkboxLabelPopover = popoverAddons ? /*#__PURE__*/React.createElement(Popover, _extends({
     id: "".concat(popoverAddons.id)
-  }, popoverAddons), /*#__PURE__*/React__default.createElement("div", {
+  }, popoverAddons), /*#__PURE__*/React.createElement("div", {
     id: "".concat(popoverAddons.id)
-  }, /*#__PURE__*/React__default.createElement(IconInfo, {
+  }, /*#__PURE__*/React.createElement(IconInfo, {
     dataId: "".concat(dataId, "-icon"),
     type: "information",
     size: "xsmall",
@@ -332,31 +332,31 @@ var Checkbox = /*#__PURE__*/forwardRef(function (props, ref) {
       return label;
     }
     if (!link) {
-      return /*#__PURE__*/React__default.createElement(Text, {
+      return /*#__PURE__*/React.createElement(Text, {
         type: disabled ? 'disabled' : 'primary',
         className: "controller__label"
-      }, /*#__PURE__*/React__default.createElement(React__default.Fragment, null, label, required && /*#__PURE__*/React__default.createElement("sup", null, "*")));
+      }, /*#__PURE__*/React.createElement(React.Fragment, null, label, required && /*#__PURE__*/React.createElement("sup", null, "*")));
     }
-    return /*#__PURE__*/React__default.createElement(Text, {
+    return /*#__PURE__*/React.createElement(Text, {
       type: disabled ? 'disabled' : 'primary',
       className: "controller__label"
-    }, /*#__PURE__*/React__default.createElement(React__default.Fragment, null, beforeLink && /*#__PURE__*/React__default.createElement("span", {
+    }, /*#__PURE__*/React.createElement(React.Fragment, null, beforeLink && /*#__PURE__*/React.createElement("span", {
       className: "mr-4"
-    }, beforeLink), /*#__PURE__*/React__default.createElement(Link, {
+    }, beforeLink), /*#__PURE__*/React.createElement(Link, {
       dataId: dataId,
       url: link,
       target: "_blank"
-    }, label), afterLink && /*#__PURE__*/React__default.createElement("span", {
+    }, label), afterLink && /*#__PURE__*/React.createElement("span", {
       className: "ml-4"
-    }, afterLink), required && /*#__PURE__*/React__default.createElement("sup", null, "*")));
+    }, afterLink), required && /*#__PURE__*/React.createElement("sup", null, "*")));
   }, [label, link]);
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("label", {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("label", {
     className: classNames('controller', _defineProperty({
       'controller--checkbox': true,
       'controller--disabled': disabled,
       'controller--error': isInvalid
     }, className, !!className))
-  }, /*#__PURE__*/React__default.createElement("input", {
+  }, /*#__PURE__*/React.createElement("input", {
     "data-id": dataId,
     type: "checkbox",
     ref: inputRef,
@@ -364,18 +364,18 @@ var Checkbox = /*#__PURE__*/forwardRef(function (props, ref) {
     onChange: changeHandler,
     checked: Boolean(isChecked),
     disabled: disabled
-  }), /*#__PURE__*/React__default.createElement("span", {
+  }), /*#__PURE__*/React.createElement("span", {
     className: "controller__icon"
-  }, /*#__PURE__*/React__default.createElement(IconDynamicComponent, {
+  }, /*#__PURE__*/React.createElement(IconDynamicComponent, {
     componentName: iconProps.name,
     size: "xxsmall",
     type: disabled ? 'disabled' : 'inverse',
     className: "controller__mark"
-  })), checkboxLabel ? /*#__PURE__*/React__default.createElement("div", {
+  })), checkboxLabel ? /*#__PURE__*/React.createElement("div", {
     className: "controller__right"
-  }, /*#__PURE__*/React__default.createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
     className: "flexbox"
-  }, checkboxLabel, checkboxLabelPopover), helperText ? /*#__PURE__*/React__default.createElement(Text, {
+  }, checkboxLabel, checkboxLabelPopover), helperText ? /*#__PURE__*/React.createElement(Text, {
     size: "small",
     type: disabled ? 'disabled' : 'secondary'
   }, helperText) : null) : null));
@@ -411,7 +411,7 @@ var Button = function Button(props) {
     }
     onClick === null || onClick === void 0 || onClick(e);
   };
-  return /*#__PURE__*/React__default.createElement("button", _extends({
+  return /*#__PURE__*/React.createElement("button", _extends({
     ref: refHandler,
     "data-id": dataId,
     disabled: disabled,
@@ -421,14 +421,14 @@ var Button = function Button(props) {
     }, "btn--icon-".concat((iconProps === null || iconProps === void 0 ? void 0 : iconProps.alignment) || 'left'), !isLoading && !justIcon && (iconProps === null || iconProps === void 0 ? void 0 : iconProps.Component)), className),
     onClick: clickHandler,
     form: formId
-  }, rest), isLoading ? /*#__PURE__*/React__default.createElement(Loader, {
+  }, rest), isLoading ? /*#__PURE__*/React.createElement(Loader, {
     size: size,
     type: LITE_LOADER_TYPES.indexOf(type) === -1 ? 'dark' : 'lite'
-  }) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, iconProps !== null && iconProps !== void 0 && iconProps.Component ? /*#__PURE__*/React__default.createElement(iconProps.Component, {
+  }) : /*#__PURE__*/React.createElement(React.Fragment, null, iconProps !== null && iconProps !== void 0 && iconProps.Component ? /*#__PURE__*/React.createElement(iconProps.Component, {
     size: ICON_SIZE_MAPPING[size],
     type: ICON_TYPE_MAPPING[iconProps.type || type],
     className: "btn__icon"
-  }) : null, buttonText || children ? /*#__PURE__*/React__default.createElement("span", {
+  }) : null, buttonText || children ? /*#__PURE__*/React.createElement("span", {
     className: "btn__text"
   }, buttonText || children) : null));
 };

package/assets/styles/styles.css

@@ -4946,6 +4946,29 @@ body {
   flex-direction: column;
 }
 
+.custom_header_container {
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: var(--ds-space-10);
+  width: 100%;
+}
+
+.custom_header_container .selects_container {
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+  min-width: 170px;
+}
+
+.custom_header_container .cursor-pointer {
+  cursor: pointer;
+}
+
+.custom_header_container .date_picker_select .select__options {
+  max-height: 200px;
+}
+
 .divider {
   --ds-divider-bg-color:var(--ds-color-divider);
   border: none;
@@ -8012,6 +8035,70 @@ body {
   gap: var(--ds-space-16);
 }
 
+.profile-dropdown {
+  background-color: var(--ds-color-bg-white);
+  border-radius: var(--ds-border-radius-lg);
+  bottom: unset;
+  box-shadow: var(--ds-shadow-2);
+  left: unset;
+  position: absolute;
+  right: 0;
+  top: calc(100% + var(--ds-space-8));
+  width: 360px;
+}
+
+.profile-dropdown__top {
+  -webkit-box-align: center;
+  -moz-box-align: center;
+  -ms-flex-align: center;
+  -webkit-align-items: center;
+  align-items: center;
+  border-bottom: 1px solid var(--grey-50);
+  display: -webkit-box;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  display: flex;
+  padding: var(--ds-space-16);
+}
+
+.profile-dropdown__nav {
+  list-style: none;
+}
+
+.profile-dropdown__nav li {
+  padding: var(--ds-space-10) var(--ds-space-16);
+}
+
+.profile-dropdown__nav__link {
+  -webkit-box-align: center;
+  -moz-box-align: center;
+  -ms-flex-align: center;
+  -webkit-align-items: center;
+  align-items: center;
+  color: var(--ds-color-text-primary);
+  display: -webkit-inline-box;
+  display: -moz-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
+.profile-dropdown__nav__link:hover {
+  color: var(--ds-color-text-brand);
+  cursor: pointer;
+  text-decoration: none;
+  transition: none;
+}
+
+.profile-dropdown__nav__link:hover .svg-icon path {
+  fill: var(--ds-color-text-brand);
+}
+
+.profile-dropdown__bottom {
+  border-top: 1px solid var(--grey-50);
+}
+
 :root {
   --toastify-color-light:#fff;
   --toastify-color-dark:#121212;
@@ -8753,90 +8840,4 @@ body {
   to {
     transform: rotate(1turn);
   }
-}
-.custom_header_container {
-  align-items: center;
-  display: flex;
-  justify-content: space-between;
-  margin-bottom: var(--ds-space-10);
-  width: 100%;
-}
-
-.custom_header_container .selects_container {
-  align-items: center;
-  display: flex;
-  justify-content: space-between;
-  min-width: 170px;
-}
-
-.custom_header_container .cursor-pointer {
-  cursor: pointer;
-}
-
-.custom_header_container .date_picker_select .select__options {
-  max-height: 200px;
-}
-
-.profile-dropdown {
-  background-color: var(--ds-color-bg-white);
-  border-radius: var(--ds-border-radius-lg);
-  bottom: unset;
-  box-shadow: var(--ds-shadow-2);
-  left: unset;
-  position: absolute;
-  right: 0;
-  top: calc(100% + var(--ds-space-8));
-  width: 360px;
-}
-
-.profile-dropdown__top {
-  -webkit-box-align: center;
-  -moz-box-align: center;
-  -ms-flex-align: center;
-  -webkit-align-items: center;
-  align-items: center;
-  border-bottom: 1px solid var(--grey-50);
-  display: -webkit-box;
-  display: -moz-box;
-  display: -ms-flexbox;
-  display: -webkit-flex;
-  display: flex;
-  padding: var(--ds-space-16);
-}
-
-.profile-dropdown__nav {
-  list-style: none;
-}
-
-.profile-dropdown__nav li {
-  padding: var(--ds-space-10) var(--ds-space-16);
-}
-
-.profile-dropdown__nav__link {
-  -webkit-box-align: center;
-  -moz-box-align: center;
-  -ms-flex-align: center;
-  -webkit-align-items: center;
-  align-items: center;
-  color: var(--ds-color-text-primary);
-  display: -webkit-inline-box;
-  display: -moz-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-}
-
-.profile-dropdown__nav__link:hover {
-  color: var(--ds-color-text-brand);
-  cursor: pointer;
-  text-decoration: none;
-  transition: none;
-}
-
-.profile-dropdown__nav__link:hover .svg-icon path {
-  fill: var(--ds-color-text-brand);
-}
-
-.profile-dropdown__bottom {
-  border-top: 1px solid var(--grey-50);
 }