hrm_ui_lib 1.4.4-alpha.2 → 1.4.4-alpha.20

package/{Button-6e16c797.js → Button-2daac908.js}

@@ -1,6 +1,6 @@
-import { _ as _extends } from './extends-0166c96c.js';
-import { _ as _defineProperty } from './defineProperty-c0de2685.js';
-import { _ as _objectWithoutProperties } from './objectWithoutProperties-8770803c.js';
+import { _ as _extends } from './extends-3298120e.js';
+import { _ as _defineProperty } from './defineProperty-1ecacfbc.js';
+import { _ as _objectWithoutProperties } from './objectWithoutProperties-951f9528.js';
 import React, { useState, useId, useEffect, forwardRef, useRef, useMemo } from 'react';
 import classNames from 'classnames';
 import 'dayjs';
@@ -8,59 +8,24 @@ import { Loader } from './helperComponents/Loader/Loader.js';
 import './consts/index.js';
 import './hooks/useScreenSize.js';
 import 'react-hook-form';
-import { _ as _slicedToArray } from './slicedToArray-5c7da176.js';
+import { _ as _slicedToArray } from './slicedToArray-66f01db8.js';
 import { useIsMobile } from './hooks/useGetIsMobile.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';
 import { IconDismiss } from './components/SVGIcons/IconDismiss.js';
 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 'react-syntax-highlighter';
 import { Link } from './components/Link/Link.js';
 import { PopoverDesktop } from './components/Popover/PopoverDesktop.js';
 import { IconInfo } from './components/SVGIcons/IconInfo.js';
 import { IconDynamicComponent } from './helperComponents/IconDynamicComponent/IconDynamicComponent.js';
 import { LITE_LOADER_TYPES, ICON_SIZE_MAPPING, ICON_TYPE_MAPPING } from './components/Button/consts.js';
 
-var _excluded$3 = ["size", "className", "iconProps", "buttonActionType", "disabled", "isLoading", "formId", "dataId", "onClick", "refHandler"];
-var ButtonIcon = function ButtonIcon(props) {
-  var _props$size = props.size,
-    size = _props$size === void 0 ? 'medium' : _props$size,
-    _props$className = props.className,
-    className = _props$className === void 0 ? '' : _props$className,
-    iconProps = props.iconProps,
-    _props$buttonActionTy = props.buttonActionType,
-    buttonActionType = _props$buttonActionTy === void 0 ? 'button' : _props$buttonActionTy,
-    disabled = props.disabled,
-    isLoading = props.isLoading,
-    formId = props.formId,
-    _props$dataId = props.dataId,
-    dataId = _props$dataId === void 0 ? '' : _props$dataId,
-    onClick = props.onClick,
-    _props$refHandler = props.refHandler,
-    refHandler = _props$refHandler === void 0 ? null : _props$refHandler,
-    rest = _objectWithoutProperties(props, _excluded$3);
-  return /*#__PURE__*/React.createElement("button", _extends({
-    ref: refHandler,
-    "data-id": dataId,
-    disabled: disabled,
-    type: buttonActionType,
-    className: classNames('btn-icon', "btn-icon--".concat(size), className),
-    onClick: onClick,
-    form: formId
-  }, rest), isLoading ? /*#__PURE__*/React.createElement(Loader, {
-    size: size,
-    type: 'dark'
-  }) : /*#__PURE__*/React.createElement(iconProps.Component, {
-    size: size,
-    type: disabled ? 'disabled' : 'tertiary'
-  }));
-};
-
 var ModalContent = function ModalContent(_ref) {
   var title = _ref.title,
     subtitle = _ref.subtitle,
@@ -83,13 +48,14 @@ var ModalContent = function ModalContent(_ref) {
   }, title), subtitle ? /*#__PURE__*/React.createElement(Text, {
     className: 'mt-12',
     dataId: dataIdPrefix ? "".concat(dataIdPrefix, "-modal-title") : ''
-  }, subtitle) : null), closeIcon ? /*#__PURE__*/React.createElement(ButtonIcon, {
+  }, subtitle) : null), closeIcon ? /*#__PURE__*/React.createElement(Button, {
     className: 'modal__close ml-16',
     dataId: dataIdPrefix ? "".concat(dataIdPrefix, "-modal-close-button") : '',
     iconProps: {
       Component: IconDismiss
     },
-    onClick: onClose
+    onClick: onClose,
+    type: "tertiary"
   }) : null) : null, /*#__PURE__*/React.createElement("div", {
     className: "modal__content scrollbar scrollbar--vertical"
   }, children), withFooter && buttonProps ? /*#__PURE__*/React.createElement("div", {
@@ -112,7 +78,7 @@ var ModalContent = function ModalContent(_ref) {
   }, buttonProps.confirm))) : null);
 };
 
-var _excluded$2 = ["isOpen", "onClose", "className", "size", "closeOnOutsideClick"];
+var _excluded$2 = ["isOpen", "onClose", "className", "size", "closeOnOutsideClick", "isMobileFullScreen"];
 var DESKTOP_ANIMATION = {
   initial: {
     opacity: 0.5,
@@ -136,22 +102,24 @@ var DESKTOP_ANIMATION = {
     stiffness: 700
   }
 };
-var MOBILE_ANIMATION = {
-  initial: {
-    height: 0,
-    bottom: 0
-  },
-  animate: {
-    height: 'auto',
-    bottom: 10
-  },
-  exit: {
-    height: 0,
-    bottom: 0
-  },
-  transition: {
-    duration: 0.6
-  }
+var MOBILE_ANIMATION = function MOBILE_ANIMATION(isFullScreen) {
+  return {
+    initial: {
+      height: 0,
+      bottom: 0
+    },
+    animate: {
+      height: isFullScreen ? '100vh' : 'auto',
+      bottom: 10
+    },
+    exit: {
+      height: 0,
+      bottom: 0
+    },
+    transition: {
+      duration: 0.6
+    }
+  };
 };
 var Modal = function Modal(props) {
   var isOpen = props.isOpen,
@@ -162,6 +130,7 @@ var Modal = function Modal(props) {
     size = _props$size === void 0 ? 'medium' : _props$size,
     _props$closeOnOutside = props.closeOnOutsideClick,
     closeOnOutsideClick = _props$closeOnOutside === void 0 ? true : _props$closeOnOutside,
+    isMobileFullScreen = props.isMobileFullScreen,
     rest = _objectWithoutProperties(props, _excluded$2);
   var isMobile = useIsMobile();
   var _useState = useState(null),
@@ -186,10 +155,10 @@ var Modal = function Modal(props) {
     }
   }, /*#__PURE__*/React.createElement(motion.div, _extends({
     className: classNames('modal__container', {
-      modal__container_mobile: isMobile
+      modal__container_fullScreen: isMobile && isMobileFullScreen
     }),
     ref: setContainerRef
-  }, isMobile ? MOBILE_ANIMATION : DESKTOP_ANIMATION), /*#__PURE__*/React.createElement(ModalContent, _extends({}, rest, {
+  }, isMobile ? MOBILE_ANIMATION(isMobileFullScreen) : DESKTOP_ANIMATION), /*#__PURE__*/React.createElement(ModalContent, _extends({}, rest, {
     onClose: onClose
   })))) : null);
 };
@@ -231,7 +200,7 @@ var Popover = function Popover(props) {
     clicked = props.clicked,
     rest = _objectWithoutProperties(props, _excluded$1);
   var isMobile = useIsMobile();
-  var _useState = useState(clicked),
+  var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isClicked = _useState2[0],
     setIsClicked = _useState2[1];
@@ -257,10 +226,10 @@ var Popover = function Popover(props) {
     }
   }, [id]);
   useEffect(function () {
-    if (clicked !== undefined && clicked !== isClicked && clicked) {
+    if (clicked === false) {
       setIsClicked(clicked);
     }
-  }, [clicked, isClicked]);
+  }, [clicked]);
   return isMobile ? /*#__PURE__*/React.createElement(PopoverMobile, _extends({}, rest, {
     clicked: isClicked,
     hideMessage: hideMessage
@@ -433,4 +402,4 @@ var Button = function Button(props) {
   }, buttonText || children) : null));
 };
 
-export { Button as B, Checkbox as C, Modal as M, Popover as P, ButtonIcon as a, MOBILE_ANIMATION as b, ModalContent as c, PopoverMobile as d };
+export { Button as B, Checkbox as C, Modal as M, Popover as P, MOBILE_ANIMATION as a, ModalContent as b, PopoverMobile as c };

package/assets/styles/helpers/_mixin.scss

@@ -1,5 +1,7 @@
 @use "sass:map";
 @use "sass:meta";
+@use "sass:list";
+@use "sass:string";
 
 
 $fontFamilyMap: (
@@ -167,7 +169,7 @@ $tokens: (
 
 @mixin font-face($font-name, $file-name, $weight: normal, $style: normal) {
         @font-face {
-                font-family: quote($font-name);
+                font-family: string.quote($font-name);
                 src: url($file-name + '.ttf')  format('truetype');
                 font-weight: $weight;
                 font-style: $style;
@@ -179,8 +181,8 @@ $tokens: (
 /********SPACE******/
 /*******************/
 @function getSize($size) {
-        $spaceTokens: map-get($tokens, 'space');
-        @return map-get($spaceTokens, $size);
+        $spaceTokens: map.get($tokens, 'space');
+        @return map.get($spaceTokens, $size);
 }
 
 /**padding**/
@@ -236,9 +238,9 @@ $tokens: (
 /********COLOR******/
 /*******************/
 @function getColor($color, $size: 'base') {
-        $colorTokens: map-get($tokens, 'color');
-        $selected: map-get($colorTokens, $color);
-        @return map-get($selected, $size)
+        $colorTokens: map.get($tokens, 'color');
+        $selected: map.get($colorTokens, $color);
+        @return map.get($selected, $size)
 }
 
 /**color**/
@@ -257,16 +259,16 @@ $tokens: (
 
 /**font-size**/
 @function getFontSize($size) {
-        $fontSizeTokens: map-get($tokens, 'fontSize');
-        @return map-get($fontSizeTokens, $size);
+        $fontSizeTokens: map.get($tokens, 'fontSize');
+        @return map.get($fontSizeTokens, $size);
 }
 @mixin font($size) {
         font-size: getFontSize($size);
 }
 /**font-weight**/
 @function getFontWeight($size) {
-        $fontWeightTokens: map-get($tokens, 'fontWeight');
-        @return map-get($fontWeightTokens, $size);
+        $fontWeightTokens: map.get($tokens, 'fontWeight');
+        @return map.get($fontWeightTokens, $size);
 }
 @mixin font-weight($size) {
         font-weight: getFontWeight($size);
@@ -359,17 +361,17 @@ div.logo {
 @function parseDirections($directions){
         $top: 0; $bottom: 0; $left: 0; $right: 0;
 
-        @if length($directions) > 0{
-                $d1: nth($directions,1);
+        @if list.length($directions) > 0{
+                $d1: list.nth($directions,1);
                 $top: $d1; $bottom: $d1; $left: $d1; $right: $d1;
-        }@if length($directions) > 1 {
-        $d2: nth($directions,2);
+        }@if list.length($directions) > 1 {
+        $d2: list.nth($directions,2);
         $left: $d2; $right: $d2;
-}@if length($directions) > 2 {
-        $d3: nth($directions,3);
+}@if list.length($directions) > 2 {
+        $d3: list.nth($directions,3);
         $bottom: $d3;
-}@if length($directions) > 3 {
-        $d4: nth($directions,4);
+}@if list.length($directions) > 3 {
+        $d4: list.nth($directions,4);
         $left: $d4
 }
 
@@ -383,10 +385,10 @@ div.logo {
 
 @mixin position($positions...){
         $positions: parseDirections($positions);
-        top: map-get($positions,'top');
-        right: map-get($positions,'right');
-        bottom: map-get($positions,'bottom');
-        left: map-get($positions,'left');
+        top: map.get($positions,'top');
+        right: map.get($positions,'right');
+        bottom: map.get($positions,'bottom');
+        left: map.get($positions,'left');
 }
 @mixin absolute($positions...){
         position: absolute;
@@ -469,8 +471,8 @@ $breakpoints: (
         "desktop-wide": 1440px
 );
 @mixin screen($width, $type: min) {
-        @if map_has_key($breakpoints, $width) {
-                $width: map_get($breakpoints, $width);
+        @if map.has-key($breakpoints, $width) {
+                $width: map.get($breakpoints, $width);
                 @if $type == max {
                         $width: $width - 1px;
                 }
@@ -514,7 +516,6 @@ $breakpoints: (
 
 // Inline flex display
 @mixin inline-flex {
-        display: -webkit-inline-box;
         display: -moz-inline-box;
         display: -webkit-inline-flex;
         display: -ms-inline-flexbox;
@@ -531,8 +532,8 @@ $breakpoints: (
 
         // Box-Flex only supports a flex-grow value so lets grab the
         // first item in the list and just return that.
-        @if type-of($fg) == 'list' {
-                $fg-boxflex: nth($fg, 1);
+        @if meta.type-of($fg) == 'list' {
+                $fg-boxflex: list.nth($fg, 1);
         }
 
         -webkit-box: $fg-boxflex;
@@ -579,7 +580,7 @@ $breakpoints: (
         // No Webkit/FF Box fallback.
         -webkit-flex-wrap: $value;
         @if $value == nowrap {
-                -ms-flex-wrap: none;
+                -ms-flex-wrap: nowrap;
         } @else {
                 -ms-flex-wrap: $value;
         }

package/assets/styles/styles.css

@@ -1993,7 +1993,7 @@ body {
 
 .flex-wrap--nowrap {
   -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: none;
+  -ms-flex-wrap: nowrap;
   flex-wrap: nowrap;
 }
 
@@ -2126,6 +2126,22 @@ body {
   white-space: nowrap;
 }
 
+.gap-4 {
+  gap: var(--ds-space-4);
+}
+
+.gap-8 {
+  gap: var(--ds-space-8);
+}
+
+.gap-12 {
+  gap: var(--ds-space-12);
+}
+
+.gap-16 {
+  gap: var(--ds-space-16);
+}
+
 :root {
   --brand-900:#31531c;
   --brand-800:#416e26;
@@ -2879,7 +2895,6 @@ body {
   -webkit-align-items: center;
   align-items: center;
   border-radius: var(--ds-badge-border-radius);
-  display: -webkit-inline-box;
   display: -moz-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -3597,7 +3612,6 @@ body {
   -webkit-align-items: center;
   align-items: center;
   border-radius: var(--ds-chips-border-radius);
-  display: -webkit-inline-box;
   display: -moz-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -3918,7 +3932,6 @@ body {
   -webkit-align-items: flex-start;
   align-items: flex-start;
   cursor: pointer;
-  display: -webkit-inline-box;
   display: -moz-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -5061,7 +5074,6 @@ body {
   display: -ms-flexbox;
   display: -webkit-flex;
   display: flex;
-  display: -webkit-inline-box;
   display: -moz-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -5842,10 +5854,15 @@ body {
   max-height: calc(100vh - var(--ds-modal-overlay-padding) * 2);
 }
 
-.modal__container_mobile {
-  border-radius: var(--ds-modal-border-radius-mobile) var(--ds-modal-border-radius-mobile) 0 0;
+@media screen and (max-width: 768px) {
+  .modal__container {
+    border-radius: var(--ds-modal-border-radius-mobile) var(--ds-modal-border-radius-mobile) 0 0;
+    max-height: 70%;
+    position: absolute;
+  }
+}
+.modal__container_fullScreen {
   max-height: 100vh;
-  position: absolute;
 }
 
 .modal__header {
@@ -5916,6 +5933,16 @@ body {
   cursor: pointer;
 }
 
+@media screen and (max-width: 768px) {
+  .modal__footer {
+    flex-direction: column-reverse;
+    gap: var(--ds-space-8);
+  }
+  .modal__footer__btn {
+    margin: 0;
+    width: 100%;
+  }
+}
 .expand_button {
   color: #72bf44;
   cursor: pointer;
@@ -6521,7 +6548,6 @@ body {
 }
 
 .radio-group__inner {
-  display: -webkit-inline-box;
   display: -moz-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -6601,8 +6627,10 @@ body {
   --ds-select-options-margin:var(--ds-space-4);
   --ds-select-options-padding:0;
   --ds-select-options-height:var(--ds-size-32);
+  --ds-select-options-height-large:var(--ds-size-40);
   --ds-select-option-bg-hover:var(--grey-20);
   --ds-select-option-margin:var(--ds-space-4);
+  --ds-select-option-margin-large:var(--ds-space-16);
   --ds-select-option-padding:0 var(--ds-space-16);
   --ds-select-option-font:var(--ds-font-weight-default) var(--ds-paragraph-sm)/var(--ds-line-height-tight) var(--ds-font-family);
   --ds-select-scroll-max-height:300px;
@@ -6632,7 +6660,7 @@ body {
   position: relative;
 }
 
-.select .tabs-container {
+.select, .select .tabs-container {
   width: 100%;
 }
 
@@ -6674,6 +6702,12 @@ body {
   min-height: var(--ds-select-scroll-min-height);
 }
 
+@media screen and (max-width: 768px) {
+  .select__options__scroll {
+    max-height: 100%;
+    overflow-y: auto;
+  }
+}
 .select__option, .select__option__content, .select__option__inner {
   -webkit-box-align: center;
   -moz-box-align: center;
@@ -6721,6 +6755,11 @@ body {
   justify-content: flex-start;
 }
 
+.select__option__content__large {
+  align-items: flex-start;
+  flex-direction: column;
+}
+
 .select__option__text {
   max-width: 100%;
   overflow: hidden;
@@ -6728,6 +6767,10 @@ body {
   white-space: nowrap;
 }
 
+.select__option__text__large {
+  font-size: var(--ds-paragraph-std);
+}
+
 .select__option__meta {
   color: var(--ds-color-text-tertiary);
   white-space: nowrap;
@@ -6737,6 +6780,10 @@ body {
   content: "- ";
 }
 
+.select__option__meta__large:before {
+  content: "";
+}
+
 .select__top {
   border-bottom: var(--ds-select-top-border-bottom);
   margin: var(--ds-select-top-margin);
@@ -6869,6 +6916,18 @@ body {
   width: 100%;
 }
 
+@media screen and (max-width: 768px) {
+  .content-top {
+    padding: 0 var(--space-16) 0 0;
+  }
+  .content-top .search-container {
+    align-items: center;
+  }
+}
+.content-top .input {
+  width: 100%;
+}
+
 .content-top__label {
   margin: var(--ds-space-10) 0;
 }
@@ -6904,6 +6963,30 @@ body {
   box-shadow: none !important;
 }
 
+.select__modal .modal__content {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+  padding-bottom: 0;
+  padding-right: 0;
+}
+
+.select__modal .modal__content .mobile_top_content {
+  align-items: center;
+  display: flex;
+  padding-right: var(--ds-space-24);
+  width: 100%;
+}
+
+.select__modal .modal__content .mobile_top_content .input {
+  width: 100%;
+}
+
+.mobile_options_content__label {
+  padding: 8px 0;
+}
+
 .side--navigation {
   border-right: 1px solid var(--border-ds-color-border-tertiary, #ddd);
   display: flex;
@@ -7344,7 +7427,6 @@ body {
   -ms-flex-align: center;
   -webkit-align-items: center;
   align-items: center;
-  display: -webkit-inline-box;
   display: -moz-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -7453,7 +7535,6 @@ body {
   border-style: solid;
   border-width: var(--ds-tab-border-size);
   color: var(--ds-tab-color-default);
-  display: -webkit-inline-box;
   display: -moz-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -7575,7 +7656,6 @@ body {
   border-color: var(--ds-tabs-border-default);
   border-style: solid;
   border-width: var(--ds-tabs-border-size);
-  display: -webkit-inline-box;
   display: -moz-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -7803,6 +7883,11 @@ body {
   text-align: right;
 }
 
+@media screen and (max-width: 768px) {
+  textarea {
+    font-size: var(--ds-paragraph-md) !important;
+  }
+}
 .tooltip {
   --ds-tooltip-bg:var(--ds-color-bg-white);
   --ds-tooltip-color:var(--ds-color-text-inverse);
@@ -8077,7 +8162,6 @@ body {
   -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;