hrm_ui_lib 1.3.5-alpha.2 → 1.3.5-alpha.3

package/Button-68e7e4fd.js

@@ -0,0 +1,433 @@
+import { _ as _extends } from './extends-4eda19b2.js';
+import { _ as _defineProperty } from './defineProperty-a32ef981.js';
+import { _ as _objectWithoutProperties } from './objectWithoutProperties-2515685f.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-ac4628b7.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 { 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,
+    dataIdPrefix = _ref.dataIdPrefix,
+    closeIcon = _ref.closeIcon,
+    onClose = _ref.onClose,
+    children = _ref.children,
+    withFooter = _ref.withFooter,
+    confirmBtnTooltipText = _ref.confirmBtnTooltipText,
+    buttonProps = _ref.buttonProps,
+    onSubmit = _ref.onSubmit;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, title ? /*#__PURE__*/React.createElement("div", {
+    className: "modal__header"
+  }, /*#__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.createElement(Text, {
+    className: 'mt-12',
+    dataId: dataIdPrefix ? "".concat(dataIdPrefix, "-modal-title") : ''
+  }, 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.createElement("div", {
+    className: "modal__content scrollbar scrollbar--vertical"
+  }, children), withFooter && buttonProps ? /*#__PURE__*/React.createElement("div", {
+    className: "modal__footer"
+  }, /*#__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.createElement(Tooltip, {
+    text: confirmBtnTooltipText,
+    id: 'confirm-btn-tooltip',
+    position: Positions.TOP_CENTER
+  }) : null, /*#__PURE__*/React.createElement(Button, _extends({
+    id: 'confirm-btn-tooltip',
+    className: 'modal__footer__btn',
+    type: "primary",
+    onClick: onSubmit ? onSubmit : noop,
+    dataId: dataIdPrefix ? "".concat(dataIdPrefix, "-modal-confirm-button") : ''
+  }, buttonProps.confirm))) : null);
+};
+
+var _excluded$2 = ["isOpen", "onClose", "className", "size", "closeOnOutsideClick"];
+var DESKTOP_ANIMATION = {
+  initial: {
+    opacity: 0.5,
+    scale: 0.65
+  },
+  animate: {
+    opacity: 1,
+    scale: [0.95, 1]
+  },
+  exit: {
+    opacity: 0,
+    scale: 0.7,
+    transition: {
+      duration: 0.2
+    }
+  },
+  transition: {
+    duration: 0.4,
+    type: 'spring',
+    damping: 55,
+    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 Modal = function Modal(props) {
+  var isOpen = props.isOpen,
+    onClose = props.onClose,
+    _props$className = props.className,
+    className = _props$className === void 0 ? '' : _props$className,
+    _props$size = props.size,
+    size = _props$size === void 0 ? 'medium' : _props$size,
+    _props$closeOnOutside = props.closeOnOutsideClick,
+    closeOnOutsideClick = _props$closeOnOutside === void 0 ? true : _props$closeOnOutside,
+    rest = _objectWithoutProperties(props, _excluded$2);
+  var isMobile = useIsMobile();
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    containerRef = _useState2[0],
+    setContainerRef = _useState2[1];
+  useOnOutsideClick(containerRef, onClose, closeOnOutsideClick && isOpen, useId());
+  useHideBodyScroll(isOpen);
+  return /*#__PURE__*/React.createElement(AnimatePresenceWrapper, null, isOpen ? /*#__PURE__*/React.createElement(motion.div, {
+    className: classNames('modal', "modal--".concat(size), className),
+    initial: {
+      opacity: 0
+    },
+    animate: {
+      opacity: 1
+    },
+    exit: {
+      opacity: 0
+    },
+    transition: {
+      duration: 0.4
+    }
+  }, /*#__PURE__*/React.createElement(motion.div, _extends({
+    className: classNames('modal__container', {
+      modal__container_mobile: isMobile
+    }),
+    ref: setContainerRef
+  }, isMobile ? MOBILE_ANIMATION : DESKTOP_ANIMATION), /*#__PURE__*/React.createElement(ModalContent, _extends({}, rest, {
+    onClose: onClose
+  })))) : null);
+};
+
+var PopoverMobile = function PopoverMobile(props) {
+  var dataId = props.dataId,
+    text = props.text,
+    linkAddons = props.linkAddons,
+    mobileTitle = props.mobileTitle,
+    hideMessage = props.hideMessage,
+    _props$clicked = props.clicked,
+    clicked = _props$clicked === void 0 ? false : _props$clicked,
+    children = props.children;
+  console.log('clicked', clicked);
+  return /*#__PURE__*/React.createElement(Modal, {
+    closeIcon: true,
+    title: mobileTitle,
+    onClose: hideMessage,
+    isOpen: clicked
+  }, 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.createElement(Text, {
+    dataId: "".concat(dataId, "-text"),
+    type: "primary",
+    weight: "regular",
+    lineHeight: "medium",
+    size: "small"
+  }, text)), children);
+};
+
+var _excluded$1 = ["elemRef", "id", "clicked"];
+var Popover = function Popover(props) {
+  var elemRef = props.elemRef,
+    id = props.id,
+    clicked = props.clicked,
+    rest = _objectWithoutProperties(props, _excluded$1);
+  var isMobile = useIsMobile();
+  var _useState = useState(clicked),
+    _useState2 = _slicedToArray(_useState, 2),
+    isClicked = _useState2[0],
+    setIsClicked = _useState2[1];
+  var _useState3 = useState(elemRef || null),
+    _useState4 = _slicedToArray(_useState3, 2),
+    parent = _useState4[0],
+    setElement = _useState4[1];
+  var showMessage = function showMessage() {
+    console.log('showMessage');
+    setIsClicked(true);
+  };
+  var hideMessage = function hideMessage() {
+    return setIsClicked(false);
+  };
+  useEffect(function () {
+    if (parent) {
+      parent.addEventListener('click', showMessage);
+    }
+  }, [parent]);
+  useEffect(function () {
+    if (id) {
+      var element = document.getElementById(id.toString());
+      setElement(element);
+    }
+  }, [id]);
+  console.log('isClicked', isClicked);
+  return isMobile ? /*#__PURE__*/React.createElement(PopoverMobile, _extends({}, rest, {
+    clicked: isClicked,
+    hideMessage: hideMessage
+  })) : /*#__PURE__*/React.createElement(PopoverDesktop, _extends({}, rest, {
+    parent: parent,
+    clicked: isClicked,
+    showMessage: showMessage,
+    hideMessage: hideMessage
+  }));
+};
+
+var Checkbox = /*#__PURE__*/forwardRef(function (props, ref) {
+  var label = props.label,
+    disabled = props.disabled,
+    _props$required = props.required,
+    required = _props$required === void 0 ? false : _props$required,
+    link = props.link,
+    name = props.name,
+    setFieldValue = props.setFieldValue,
+    selectedValue = props.selectedValue,
+    value = props.value,
+    _props$className = props.className,
+    className = _props$className === void 0 ? '' : _props$className,
+    _props$iconProps = props.iconProps,
+    iconProps = _props$iconProps === void 0 ? {
+      name: 'checkmark'
+    } : _props$iconProps,
+    _props$dataId = props.dataId,
+    dataId = _props$dataId === void 0 ? '' : _props$dataId,
+    onClick = props.onClick,
+    beforeLink = props.beforeLink,
+    afterLink = props.afterLink,
+    _props$helperText = props.helperText,
+    helperText = _props$helperText === void 0 ? '' : _props$helperText,
+    popoverAddons = props.popoverAddons,
+    isInvalid = props.isInvalid;
+  var localRef = useRef(null);
+  var inputRef = ref && Object.keys(ref).length ? ref : localRef;
+  var isChecked = !!value || selectedValue;
+  var changeHandler = function changeHandler() {
+    if (name && setFieldValue) {
+      setFieldValue(name, !isChecked, {
+        shouldValidate: !isChecked
+      });
+    }
+    if (onClick) {
+      onClick(!isChecked);
+    }
+  };
+  var checkboxLabelPopover = popoverAddons ? /*#__PURE__*/React.createElement(Popover, _extends({
+    id: "".concat(popoverAddons.id)
+  }, popoverAddons), /*#__PURE__*/React.createElement("div", {
+    id: "".concat(popoverAddons.id)
+  }, /*#__PURE__*/React.createElement(IconInfo, {
+    dataId: "".concat(dataId, "-icon"),
+    type: "information",
+    size: "xsmall",
+    className: 'ml-4 pointer',
+    onClick: function onClick(e) {
+      e.stopPropagation();
+      changeHandler();
+    }
+  }))) : null;
+  var checkboxLabel = useMemo(function () {
+    if (!label) {
+      return null;
+    }
+    if (typeof label !== 'string') {
+      return label;
+    }
+    if (!link) {
+      return /*#__PURE__*/React.createElement(Text, {
+        type: disabled ? 'disabled' : 'primary',
+        className: "controller__label"
+      }, /*#__PURE__*/React.createElement(React.Fragment, null, label, required && /*#__PURE__*/React.createElement("sup", null, "*")));
+    }
+    return /*#__PURE__*/React.createElement(Text, {
+      type: disabled ? 'disabled' : 'primary',
+      className: "controller__label"
+    }, /*#__PURE__*/React.createElement(React.Fragment, null, beforeLink && /*#__PURE__*/React.createElement("span", {
+      className: "mr-4"
+    }, beforeLink), /*#__PURE__*/React.createElement(Link, {
+      dataId: dataId,
+      url: link,
+      target: "_blank"
+    }, label), afterLink && /*#__PURE__*/React.createElement("span", {
+      className: "ml-4"
+    }, afterLink), required && /*#__PURE__*/React.createElement("sup", null, "*")));
+  }, [label, link]);
+  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.createElement("input", {
+    "data-id": dataId,
+    type: "checkbox",
+    ref: inputRef,
+    tabIndex: 0,
+    onChange: changeHandler,
+    checked: Boolean(isChecked),
+    disabled: disabled
+  }), /*#__PURE__*/React.createElement("span", {
+    className: "controller__icon"
+  }, /*#__PURE__*/React.createElement(IconDynamicComponent, {
+    componentName: iconProps.name,
+    size: "xxsmall",
+    type: disabled ? 'disabled' : 'inverse',
+    className: "controller__mark"
+  })), checkboxLabel ? /*#__PURE__*/React.createElement("div", {
+    className: "controller__right"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "flexbox"
+  }, checkboxLabel, checkboxLabelPopover), helperText ? /*#__PURE__*/React.createElement(Text, {
+    size: "small",
+    type: disabled ? 'disabled' : 'secondary'
+  }, helperText) : null) : null));
+});
+Checkbox.displayName = 'Checkbox';
+
+var _excluded = ["buttonText", "type", "size", "className", "iconProps", "buttonActionType", "disabled", "isLoading", "formId", "dataId", "onClick", "refHandler", "children"];
+var Button = function Button(props) {
+  var buttonText = props.buttonText,
+    _props$type = props.type,
+    type = _props$type === void 0 ? 'primary' : _props$type,
+    _props$size = props.size,
+    size = _props$size === void 0 ? 'large' : _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,
+    children = props.children,
+    rest = _objectWithoutProperties(props, _excluded);
+  var justIcon = !buttonText && !children && iconProps !== undefined;
+  var clickHandler = function clickHandler(e) {
+    if (disabled || isLoading) {
+      return;
+    }
+    onClick === null || onClick === void 0 || onClick(e);
+  };
+  return /*#__PURE__*/React.createElement("button", _extends({
+    ref: refHandler,
+    "data-id": dataId,
+    disabled: disabled,
+    type: buttonActionType,
+    className: classNames('btn', "btn--".concat(type), "btn--".concat(size), _defineProperty({
+      'btn--icon': justIcon
+    }, "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.createElement(Loader, {
+    size: size,
+    type: LITE_LOADER_TYPES.indexOf(type) === -1 ? 'dark' : 'lite'
+  }) : /*#__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.createElement("span", {
+    className: "btn__text"
+  }, 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 };

package/assets/styles/styles.css

@@ -7986,6 +7986,28 @@ body {
   gap: var(--ds-space-16);
 }
 
+.custom_header_container {
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+  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;
+}
+
 :root {
   --toastify-color-light:#fff;
   --toastify-color-dark:#121212;
@@ -8790,26 +8812,4 @@ body {
 
 .profile-dropdown__bottom {
   border-top: 1px solid var(--grey-50);
-}
-
-.custom_header_container {
-  align-items: center;
-  display: flex;
-  justify-content: space-between;
-  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;
 }