hrm_ui_lib 1.4.4-alpha.4 → 1.4.4-alpha.8

package/Button-25ab81f4.js

@@ -1,431 +0,0 @@
-import { _ as _extends } from './extends-55c1eb58.js';
-import { _ as _defineProperty } from './defineProperty-e792ed98.js';
-import { _ as _objectWithoutProperties } from './objectWithoutProperties-a75356ce.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-211b6284.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() {
-    return 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]);
-  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 };