hrm_ui_lib 2.0.0-alpha.24 → 2.0.0-alpha.25

package/components/Select/MultiSelect/OptionsWrapper.js

@@ -1,179 +1 @@
-import _extends from '@babel/runtime/helpers/extends';
-import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
-import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import React, { useRef, useCallback, useMemo } from 'react';
-import '@babel/runtime/helpers/slicedToArray';
-import 'classnames';
-import { getStringWidth } from '../../../utils/helpers.js';
-import { useGetElemSizes } from '../../../hooks/useGetElemSizes.js';
-import '../../../consts/index.js';
-import '../../../hooks/useScreenSize.js';
-import { useGetHasBottomSpace, useGetHasTopSpace } from '../../../hooks/useGetHasBottomSpace.js';
-import 'react-hook-form';
-import '../../../Alert-C_U8td2x.js';
-import 'react-syntax-highlighter';
-import 'react-syntax-highlighter/dist/esm/styles/prism';
-import 'react-dom';
-import 'motion/react';
-import '../../Collapse/CollapseGroup/CollapseGroup.js';
-import '../SharedComponents/ContentTop.js';
-import { Loading } from '../SharedComponents/Loading.js';
-import '../../Input/Input.js';
-import { useIsMobile } from '../../../hooks/useGetIsMobile.js';
-import { MultiSelectGrouped } from './MultiSelectGrouped/MultiSelectGrouped.js';
-import { MultiBase } from './MultiBase/MultiBase.js';
-import { MultiSelectWithTabs } from './MultiSelectWithTabs/MultiSelectWithTabs.js';
-import { SELECTED_VISIBLE_MIN_COUNT } from '../constants.js';
-import 'dayjs';
-import '../../../type/file-upload.js';
-import '../../../hooks/useGetElemPositions.js';
-import '../../Alert/consts.js';
-import '../../Text/Text.js';
-import '../../../helperComponents/Loader/Loader.js';
-import 'react-dropzone';
-import '../../SVGIcons/IconUpload.js';
-import '../../FileUpload/types.js';
-import '../../../helpers/format-date.js';
-import 'dayjs/plugin/utc';
-import '../../../helpers/locale.js';
-import '../../../type/locale.js';
-import '../../../helpers/storage.js';
-import 'react-toastify';
-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/useGetTooltipPosition.js';
-import '../../../hooks/useHideOnScroll.js';
-import '../../Link/Link.js';
-import '../../Popover/PopoverDesktop.js';
-import '../../SVGIcons/IconInfo.js';
-import '../../IconDynamicComponent/IconDynamicComponent.js';
-import 'react-toastify/dist/ReactToastify.css';
-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 '../../Collapse/CollapseItem/CollapseItem.js';
-import '../../SVGIcons/IconChevronRight.js';
-import '../../Divider/Divider.js';
-import '../../SVGIcons/IconChevronDown.js';
-import '../SharedComponents/Actions.js';
-import '../../Menu/Menu.js';
-import '../../../helperComponents/OptionItem/OptionItem.js';
-import '../../Avatar/Avatar.js';
-import '../../FileUpload/FileUpload.js';
-import '../../../helperComponents/Label/Label.js';
-import '../../FileUpload/UploadItems.js';
-import '../../../hooks/useFormProps.js';
-import '../../../context/types.js';
-import '../../../helperComponents/ErrorMessage/ErrorMessage.js';
-import '../../SVGIcons/IconEditFilled.js';
-import '../../SVGIcons/IconEdit.js';
-import '../../SVGIcons/IconAttach.js';
-import '../../SVGIcons/IconCheckmark.js';
-import '../../SVGIcons/IconMore.js';
-import '../../SVGIcons/IconSearchFilled.js';
-import '../../SVGIcons/IconSelectAllOff.js';
-import '../../SVGIcons/IconChevronLeft.js';
-import 'react-input-mask';
-import 'react-number-format';
-import '../../SVGIcons/IconCheckmarkCircleFilled.js';
-import '../../Empty/Empty.js';
-import '../../Image/Image.js';
-import '../../SVGIcons/IconCaretDownFilled.js';
-import '../../SVGIcons/IconCaretUpFilled.js';
-import 'react-window';
-import '../../Tab/Tab.js';
-import '../../Tab/TabItem.js';
-import '../../Badge/Badge.js';
-
-var _excluded = ["isLoading", "withTabs", "isGrouped", "isOpen", "containerRef", "options", "selectedValues", "setSelectedValues", "setIsOpen", "dropdownRef", "isMobileFullScreen"];
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var OptionsWrapper = function OptionsWrapper(props) {
-  var isLoading = props.isLoading,
-    withTabs = props.withTabs,
-    isGrouped = props.isGrouped,
-    isOpen = props.isOpen,
-    containerRef = props.containerRef,
-    options = props.options,
-    selectedValues = props.selectedValues,
-    setSelectedValues = props.setSelectedValues,
-    setIsOpen = props.setIsOpen,
-    dropdownRef = props.dropdownRef,
-    isMobileFullScreen = props.isMobileFullScreen,
-    rest = _objectWithoutProperties(props, _excluded);
-  var _useGetElemSizes = useGetElemSizes(containerRef),
-    width = _useGetElemSizes.width;
-  var inputRef = useRef(null);
-  var SelectComp = withTabs ? MultiSelectWithTabs : isGrouped ? MultiSelectGrouped : MultiBase;
-  var checkIsValueOverflowed = useCallback(function (value) {
-    var elemWidth = getStringWidth(value, 14);
-    return elemWidth > width - 80; // padding and width of (+number)
-  }, [width]);
-  var onItemSelect = function onItemSelect(item) {
-    setSelectedValues([].concat(_toConsumableArray(selectedValues), [item]));
-  };
-  var onItemDeselect = function onItemDeselect(item) {
-    setSelectedValues(selectedValues.filter(function (optionValue) {
-      return optionValue.value !== item.value;
-    }));
-  };
-  var optionsCount = useMemo(function () {
-    if (isGrouped || withTabs) {
-      // @ts-ignore
-      var typed_options = options;
-      return typed_options.reduce(function (acc, option) {
-        var data = option.data;
-        return acc + data.length;
-      }, 0);
-    }
-    return options.length;
-  }, [options]);
-  var _useGetHasBottomSpace = useGetHasBottomSpace({
-      element: dropdownRef,
-      input: inputRef.current
-    }),
-    hasBottomSpace = _useGetHasBottomSpace.hasBottomSpace,
-    bottomSpace = _useGetHasBottomSpace.bottomSpace;
-  var hasTopSpace = useGetHasTopSpace({
-    element: dropdownRef,
-    input: inputRef.current
-  });
-  var _isMobile = useIsMobile();
-  var isMobile = _isMobile && isMobileFullScreen;
-  if (isLoading) {
-    return /*#__PURE__*/React.createElement(Loading, null);
-  }
-  return /*#__PURE__*/React.createElement(SelectComp
-  // @ts-ignore
-  , _extends({
-    options: options,
-    isOpen: isOpen,
-    isMobile: isMobile,
-    hasBottomSpace: hasBottomSpace,
-    selectedValues: selectedValues,
-    onItemSelect: onItemSelect,
-    onItemDeselect: onItemDeselect,
-    setSelectedValues: setSelectedValues,
-    closeDropdown: function closeDropdown() {
-      return setIsOpen(false);
-    },
-    checkIsValueOverflowed: checkIsValueOverflowed,
-    isSearchAvailable: optionsCount > SELECTED_VISIBLE_MIN_COUNT,
-    scrollableContentStyle: _objectSpread({}, !hasBottomSpace && !hasTopSpace ? {
-      maxHeight: bottomSpace - 65 - 56
-    } : {}) // 65 - height of the top content, 56 - height of the footer
-  }, rest));
-};
-
-export { OptionsWrapper };
+import{jsx as u}from"react/jsx-runtime";import{useRef as v,useCallback as B,useMemo as L}from"react";import"classnames";import"../../Checkbox/Checkbox.js";import"react-dom";import{useGetElemSizes as R}from"../../../hooks/useGetElemSizes.js";import"../../../consts/index.js";import"../../../context/types.js";import"../../../hooks/useScreenSize.js";import{useGetHasBottomSpace as V,useGetHasTopSpace as x}from"../../../hooks/useGetHasBottomSpace.js";import"react-hook-form";import{getStringWidth as y}from"../../../utils/helpers.js";import"../../FileUpload/DropzoneFileUpload/DropzoneFileUpload.js";import"motion/react";import"../../Collapse/CollapseGroup/CollapseGroup.js";import"../SharedComponents/ContentTop.js";import{Loading as D}from"../SharedComponents/Loading.js";import"../../Input/Input.js";import{useIsMobile as H}from"../../../hooks/useGetIsMobile.js";import{MultiSelectGrouped as k}from"./MultiSelectGrouped/MultiSelectGrouped.js";import{MultiBase as N}from"./MultiBase/MultiBase.js";import{MultiSelectWithTabs as j}from"./MultiSelectWithTabs/MultiSelectWithTabs.js";import{SELECTED_VISIBLE_MIN_COUNT as z}from"../constants.js";const at=e=>{const{isLoading:t,withTabs:o,isGrouped:s,isOpen:r,containerRef:a,options:i,selectedValues:l,setSelectedValues:p,setIsOpen:m,dropdownRef:n,isMobileFullScreen:c,...S}=e,{width:d}=R(a),h=v(null),f=o?j:s?k:N,M=B(e=>y(e,14)>d-80,[d]),b=L(()=>s||o?i.reduce((e,t)=>{const{data:o}=t;return e+o.length},0):i.length,[i]),{hasBottomSpace:C,bottomSpace:G}=V({element:n,input:h.current}),I=x({element:n,input:h.current}),g=H()&&c;return t?/* @__PURE__ */u(D,{}):/* @__PURE__ */u(f,{options:i,isOpen:r,isMobile:g,hasBottomSpace:C,selectedValues:l,onItemSelect:e=>{p([...l,e])},onItemDeselect:e=>{p(l.filter(t=>t.value!==e.value))},setSelectedValues:p,closeDropdown:()=>m(!1),checkIsValueOverflowed:M,isSearchAvailable:b>z,scrollableContentStyle:{...C||I?{}:{maxHeight:G-65-56}},...S})};export{at as OptionsWrapper};

package/components/Select/NestedSelect/NestedSelect.js

@@ -1,202 +1,4 @@
-import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
-import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import React, { useState, useRef, useId, useCallback } from 'react';
-import { Input } from '../../Input/Input.js';
-import 'classnames';
-import 'dayjs';
-import '@babel/runtime/helpers/objectWithoutProperties';
-import { OptionItem } from '../../../helperComponents/OptionItem/OptionItem.js';
-import 'react-syntax-highlighter';
-import 'react-syntax-highlighter/dist/esm/styles/prism';
-import { useGetElemSizes } from '../../../hooks/useGetElemSizes.js';
-import { useGetElemPositions } from '../../../hooks/useGetElemPositions.js';
-import '../../../consts/index.js';
-import { useOnOutsideClick } from '../../../hooks/useOnOutsideClick.js';
-import '../../../hooks/useScreenSize.js';
-import 'react-hook-form';
-import { IconChevronUp } from '../../SVGIcons/IconChevronUp.js';
-import { IconChevronDown } from '../../SVGIcons/IconChevronDown.js';
-import '@babel/runtime/helpers/defineProperty';
-import '@babel/runtime/helpers/extends';
-import 'react-input-mask';
-import 'react-number-format';
-import '../../../helperComponents/Label/Label.js';
-import '../../Text/Text.js';
-import '../../../utils/helpers.js';
-import '../../../helperComponents/ErrorMessage/ErrorMessage.js';
-import '../../IconDynamicComponent/IconDynamicComponent.js';
-import '../../../Alert-C_U8td2x.js';
-import '../../Alert/consts.js';
-import '../../../helperComponents/Loader/Loader.js';
-import 'react-dropzone';
-import '../../SVGIcons/IconUpload.js';
-import '../../../type/file-upload.js';
-import '../../FileUpload/types.js';
-import '../../../helpers/format-date.js';
-import 'dayjs/plugin/utc';
-import '../../../helpers/locale.js';
-import '../../../type/locale.js';
-import '../../../helpers/storage.js';
-import 'react-toastify';
-import '../../../hooks/useGetIsMobile.js';
-import 'motion/react';
-import '../../../helperComponents/AnimatePresenceWrapper/AnimatePresenceWrapper.js';
-import '../../../hooks/useHideBodyScroll.js';
-import '../../SVGIcons/IconDismiss.js';
-import '../../Tooltip/types.js';
-import '../../Tooltip/Tooltip.js';
-import '../../../hooks/useGetTooltipStyles.js';
-import '../../../hooks/useGetTooltipPosition.js';
-import '../../../hooks/useHideOnScroll.js';
-import '../../Link/Link.js';
-import '../../Popover/PopoverDesktop.js';
-import '../../SVGIcons/IconInfo.js';
-import 'react-toastify/dist/ReactToastify.css';
-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';
-import '../../Avatar/Avatar.js';
-import '../../FileUpload/FileUpload.js';
-import '../../FileUpload/UploadItems.js';
-import '../../../hooks/useFormProps.js';
-import '../../../context/types.js';
-import '../../SVGIcons/IconEditFilled.js';
-import '../../SVGIcons/IconEdit.js';
-import '../../SVGIcons/IconAttach.js';
-import '../../SVGIcons/IconCheckmark.js';
-
-var LEVEL_LEFT_MARGIN = 10;
-var NestedSelect = function NestedSelect(props) {
-  var label = props.label,
-    options = props.options,
-    selected = props.selected,
-    placeHolder = props.placeHolder,
-    isRequiredField = props.isRequiredField,
-    setSelectedValue = props.setSelectedValue,
-    initialSelectedFolderIds = props.initialSelectedFolderIds,
-    optionRightIconComponent = props.optionRightIconComponent,
-    labelRightIconComponent = props.labelRightIconComponent,
-    labelAddons = props.labelAddons;
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    isDropdownOpen = _useState2[0],
-    setIsOpen = _useState2[1];
-  var _useState3 = useState(null),
-    _useState4 = _slicedToArray(_useState3, 2),
-    containerRef = _useState4[0],
-    setContainerRef = _useState4[1];
-  var _useState5 = useState(initialSelectedFolderIds || []),
-    _useState6 = _slicedToArray(_useState5, 2),
-    selectedValues = _useState6[0],
-    setSelectedValues = _useState6[1];
-  var inputRef = useRef(null);
-  var _useGetElemPositions = useGetElemPositions(inputRef.current),
-    bottom = _useGetElemPositions.bottom,
-    left = _useGetElemPositions.left;
-  var _useGetElemSizes = useGetElemSizes(containerRef),
-    width = _useGetElemSizes.width;
-  var openDropdown = function openDropdown() {
-    return setIsOpen(true);
-  };
-  var closeDropdown = function closeDropdown() {
-    return setIsOpen(false);
-  };
-  var toggleDropdown = function toggleDropdown(e) {
-    var clickedElement = e === null || e === void 0 ? void 0 : e.target;
-    if (e && clickedElement.className && clickedElement.className.indexOf('icon-') !== -1) {
-      setIsOpen(!isDropdownOpen);
-      e.preventDefault();
-    } else {
-      openDropdown();
-    }
-  };
-  useOnOutsideClick(containerRef, closeDropdown, isDropdownOpen, useId());
-  var onSelect = useCallback(function (option, hasChildren) {
-    var optionValue = option.value;
-    if (!hasChildren) {
-      setSelectedValue(optionValue === (selected === null || selected === void 0 ? void 0 : selected.value) ? null : option);
-      return;
-    }
-    var isSelected = selectedValues.findIndex(function (i) {
-      return i === optionValue;
-    }) !== -1;
-    if (isSelected) {
-      setSelectedValues(selectedValues.filter(function (i) {
-        return i !== optionValue;
-      }));
-    } else {
-      setSelectedValues([].concat(_toConsumableArray(selectedValues), [optionValue]));
-    }
-  }, [selected, selectedValues]);
-  var _generateFolders = function generateFolders(foldersArr, level) {
-    return foldersArr.reduce(function (acc, option) {
-      var value = option.value,
-        children = option.children,
-        disabled = option.disabled;
-      var isOpen = selectedValues.indexOf(option.value) !== -1;
-      var isSelected = option.value === (selected === null || selected === void 0 ? void 0 : selected.value);
-      acc.push(/*#__PURE__*/React.createElement("div", {
-        style: {
-          paddingLeft: LEVEL_LEFT_MARGIN * level
-        }
-      }, /*#__PURE__*/React.createElement(OptionItem, {
-        data: option,
-        key: value,
-        isSelected: isSelected,
-        onClick: function onClick() {
-          return onSelect({
-            value: value,
-            label: option.label
-          }, !!children);
-        },
-        disabled: disabled,
-        OptionRightIconComponent: optionRightIconComponent,
-        LabelRightIconComponent: labelRightIconComponent,
-        labelLeftIconProps: children ? {
-          Component: IconChevronDown,
-          size: 'xsmall'
-        } : undefined
-      })));
-      if (isOpen && children) {
-        acc.push.apply(acc, _toConsumableArray(_generateFolders(children, level + 1)));
-      }
-      return acc;
-    }, []);
-  };
-  return /*#__PURE__*/React.createElement("div", {
-    className: "select select--multi",
-    ref: setContainerRef
-  }, /*#__PURE__*/React.createElement("div", {
-    onClick: toggleDropdown
-  }, /*#__PURE__*/React.createElement(Input, {
-    ref: inputRef,
-    className: "select__input",
-    label: label,
-    required: isRequiredField,
-    rightIconProps: {
-      Component: isDropdownOpen ? IconChevronUp : IconChevronDown,
-      size: 'small'
-    },
-    placeholder: placeHolder,
-    currentValue: (selected === null || selected === void 0 ? void 0 : selected.label.toString()) || '',
-    readonly: true,
-    labelAddons: labelAddons
-  })), isDropdownOpen && /*#__PURE__*/React.createElement("div", {
-    className: "select__options",
-    style: {
-      left: left,
-      width: width,
-      top: bottom
-    }
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "select__options__scroll scrollbar scrollbar--vertical"
-  }, _generateFolders(options, 0))));
-};
-
-export { NestedSelect };
+import{jsxs as j,jsx as r}from"react/jsx-runtime";import{useState as p,useRef as q,useId as A,useCallback as H}from"react";import{Input as M}from"../../Input/Input.js";import{OptionItem as T}from"../../../helperComponents/OptionItem/OptionItem.js";import{useGetElemSizes as U}from"../../../hooks/useGetElemSizes.js";import{useGetElemPositions as B}from"../../../hooks/useGetElemPositions.js";import"../../../consts/index.js";import"../../../context/types.js";import{useOnOutsideClick as J}from"../../../hooks/useOnOutsideClick.js";import"../../../hooks/useScreenSize.js";import"react-hook-form";import K from"../../SVGIcons/IconChevronUp.js";import v from"../../SVGIcons/IconChevronDown.js";const Q=10,ce=e=>{const{label:o,options:s,selected:t,placeHolder:l,isRequiredField:n,setSelectedValue:i,initialSelectedFolderIds:a,optionRightIconComponent:c,labelRightIconComponent:d,labelAddons:m}=e,[u,h]=p(!1),[f,I]=p(null),[b,C]=p(a||[]),S=q(null),{bottom:k,left:x}=B(S.current),{width:O}=U(f);J(f,()=>h(!1),u,A());const g=H((e,o)=>{const{value:s}=e;if(!o)return void i(s===(null==t?void 0:t.value)?null:e);const l=-1!==b.findIndex(e=>e===s);C(l?b.filter(e=>e!==s):[...b,s])},[t,b]),_=(e,o)=>e.reduce((e,s)=>{const{value:l,children:n,disabled:i}=s,a=-1!==b.indexOf(s.value),p=s.value===(null==t?void 0:t.value);return e.push(
+/* @__PURE__ */r("div",{style:{paddingLeft:Q*o},children:/* @__PURE__ */r(T,{data:s,isSelected:p,onClick:()=>g({value:l,label:s.label},!!n),disabled:i,OptionRightIconComponent:c,LabelRightIconComponent:d,labelLeftIconProps:n?{Component:v,size:"xsmall"}:void 0},l)})),a&&n&&e.push(..._(n,o+1)),e},[]);/* @__PURE__ */
+return j("div",{className:"select select--multi",ref:I,children:[
+/* @__PURE__ */r("div",{onClick:e=>{const o=null==e?void 0:e.target;e&&o.className&&-1!==o.className.indexOf("icon-")?(h(!u),e.preventDefault()):h(!0)},children:/* @__PURE__ */r(M,{ref:S,className:"select__input",label:o,required:n,rightIconProps:{Component:u?K:v,size:"small"},placeholder:l,currentValue:(null==t?void 0:t.label.toString())||"",readonly:!0,labelAddons:m})}),u&&/* @__PURE__ */r("div",{className:"select__options",style:{left:x,width:O,top:k},children:/* @__PURE__ */r("div",{className:"select__options__scroll scrollbar scrollbar--vertical",children:_(s,0)})})]})};export{ce as NestedSelect};

package/components/Select/ProfileDropdown/index.js

@@ -1,83 +1,10 @@
-import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import React, { useRef, useId } from 'react';
-import { Text } from '../../Text/Text.js';
-import '../../../consts/index.js';
-import 'dayjs';
-import { useOnOutsideClick } from '../../../hooks/useOnOutsideClick.js';
-import '../../../hooks/useScreenSize.js';
-import 'react-hook-form';
-import { Link } from '../../Link/Link.js';
-import 'classnames';
-import '../../../utils/helpers.js';
-import '@babel/runtime/helpers/defineProperty';
-import '../../../type/file-upload.js';
-
-var ProfileDropdown = function ProfileDropdown(props) {
-  var menuRef = useRef(null);
-  var avatar = props.avatar,
-    name = props.name,
-    email = props.email,
-    bodyItems = props.bodyItems,
-    footerItems = props.footerItems,
-    className = props.className;
-  var _React$useState = React.useState(false),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    isOpen = _React$useState2[0],
-    setIsOpen = _React$useState2[1];
-  var closeDropdown = function closeDropdown() {
-    return setIsOpen(false);
-  };
-  useOnOutsideClick(menuRef.current, closeDropdown, isOpen, useId());
-  return /*#__PURE__*/React.createElement("div", {
-    ref: menuRef,
-    className: "relative ".concat(className)
-  }, /*#__PURE__*/React.createElement("div", {
-    onClick: function onClick() {
-      return setIsOpen(!isOpen);
-    }
-  }, avatar), isOpen && /*#__PURE__*/React.createElement("div", {
-    className: "profile-dropdown"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "profile-dropdown__top"
-  }, avatar, /*#__PURE__*/React.createElement("div", {
-    className: 'pl-12'
-  }, /*#__PURE__*/React.createElement(Text, {
-    size: 'medium',
-    weight: 'bold',
-    lineHeight: 'large'
-  }, name), /*#__PURE__*/React.createElement(Text, {
-    type: 'tertiary'
-  }, email))), /*#__PURE__*/React.createElement("div", {
-    className: "profile-dropdown__menu"
-  }, /*#__PURE__*/React.createElement("ul", {
-    className: 'profile-dropdown__nav'
-  }, bodyItems === null || bodyItems === void 0 ? void 0 : bodyItems.map(function (item, index) {
-    return /*#__PURE__*/React.createElement("li", {
-      key: index
-    }, item.text ? /*#__PURE__*/React.createElement(Link, {
-      url: item.url,
-      onclick: item.onclick,
-      className: 'profile-dropdown__nav__link'
-    }, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
-      className: 'flexbox align-items--center'
-    }, /*#__PURE__*/React.createElement(React.Fragment, null, item.icon, item.text)), item.rightInfoProps)) : /*#__PURE__*/React.createElement("div", {
-      onClick: closeDropdown
-    }, item.children));
-  })), footerItems !== null && footerItems !== void 0 && footerItems.length ? /*#__PURE__*/React.createElement("div", {
-    className: 'profile-dropdown__bottom'
-  }, /*#__PURE__*/React.createElement("ul", {
-    className: 'profile-dropdown__nav'
-  }, footerItems === null || footerItems === void 0 ? void 0 : footerItems.map(function (item, index) {
-    return /*#__PURE__*/React.createElement("li", {
-      key: index
-    }, item.text ? /*#__PURE__*/React.createElement(Link, {
-      url: item.url,
-      onclick: item.onclick,
-      className: 'profile-dropdown__nav__link'
-    }, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
-      className: 'flexbox align-items--center'
-    }, /*#__PURE__*/React.createElement(React.Fragment, null, item.icon, item.text)), item.rightInfoProps)) : item.children);
-  }))) : null)));
-};
-
-export { ProfileDropdown };
+import{jsxs as e,jsx as r,Fragment as i}from"react/jsx-runtime";import N,{useRef as x,useId as w}from"react";import{Text as h}from"../../Text/Text.js";import"../../../consts/index.js";import"../../../context/types.js";import{useOnOutsideClick as k}from"../../../hooks/useOnOutsideClick.js";import"../../../hooks/useScreenSize.js";import"react-hook-form";import{Link as m}from"../../Link/Link.js";const z=l=>{const n=x(null),{avatar:o,name:s,email:c,bodyItems:a,footerItems:d,className:t}=l,[p,u]=N.useState(!1),f=()=>u(!1);return k(n.current,f,p,w()),/* @__PURE__ */e("div",{ref:n,className:`relative ${t}`,children:[
+/* @__PURE__ */r("div",{onClick:()=>u(!p),children:o}),p&&/* @__PURE__ */e("div",{className:"profile-dropdown",children:[
+/* @__PURE__ */e("div",{className:"profile-dropdown__top",children:[o,
+/* @__PURE__ */e("div",{className:"pl-12",children:[
+/* @__PURE__ */r(h,{size:"medium",weight:"bold",lineHeight:"large",children:s}),
+/* @__PURE__ */r(h,{type:"tertiary",children:c})]})]}),
+/* @__PURE__ */e("div",{className:"profile-dropdown__menu",children:[
+/* @__PURE__ */r("ul",{className:"profile-dropdown__nav",children:null==a?void 0:a.map((l,n)=>/* @__PURE__ */r("li",{children:l.text?/* @__PURE__ */r(m,{url:l.url,onclick:l.onclick,className:"profile-dropdown__nav__link",children:/* @__PURE__ */e(i,{children:[
+/* @__PURE__ */r("span",{className:"flexbox align-items--center",children:/* @__PURE__ */e(i,{children:[l.icon,l.text]})}),l.rightInfoProps]})}):/* @__PURE__ */r("div",{onClick:f,children:l.children})},n))}),null!=d&&d.length?/* @__PURE__ */r("div",{className:"profile-dropdown__bottom",children:/* @__PURE__ */r("ul",{className:"profile-dropdown__nav",children:null==d?void 0:d.map((l,n)=>/* @__PURE__ */r("li",{children:l.text?/* @__PURE__ */r(m,{url:l.url,onclick:l.onclick,className:"profile-dropdown__nav__link",children:/* @__PURE__ */e(i,{children:[
+/* @__PURE__ */r("span",{className:"flexbox align-items--center",children:/* @__PURE__ */e(i,{children:[l.icon,l.text]})}),l.rightInfoProps]})}):l.children},n))})}):null]})]})]})};export{z as ProfileDropdown};