plataforma-fundacao-componentes 2.26.6 → 2.26.7

package/dist/assets/icons/Bell16Icon.d.ts

@@ -1,3 +1,3 @@
 import React, { SVGProps } from 'react';
 import './Icon.scss';
-export default function Bell16Icon({ className, ...props }: SVGProps<SVGSVGElement>): React.JSX.Element;
+export declare const Bell16Icon: ({ className, ...props }: SVGProps<SVGSVGElement>) => React.JSX.Element;

package/dist/assets/icons/BellIcon.d.ts

@@ -1,3 +1,3 @@
 import React, { SVGProps } from 'react';
 import './Icon.scss';
-export default function BellIcon({ className, ...props }: SVGProps<SVGSVGElement>): React.JSX.Element;
+export declare const BellIcon: ({ className, ...props }: SVGProps<SVGSVGElement>) => React.JSX.Element;

package/dist/components/container/Container.d.ts

@@ -12,8 +12,5 @@ interface ContainerProps extends React.HTMLAttributes<HTMLDivElement> {
     hasAdvancedHeader?: boolean;
 }
 declare function Container({ position, fluid, verticalPadding, hasMobileButton, hasHeader, hasAdvancedHeader, className, style, ...props }: ContainerProps): React.JSX.Element;
-declare namespace Container {
-    var defaultProps: Partial<ContainerProps>;
-}
 declare const _default: React.MemoExoticComponent<typeof Container>;
 export default _default;

package/dist/components/floatingPanel/FloatingPanel.d.ts

@@ -17,7 +17,8 @@ export interface FloatingPanelProps extends HTMLAttributes<HTMLDivElement> {
     offset?: number;
     closeOnOutClick?: boolean;
     closeOnEsc?: boolean;
+    heightAvaliableCallback?: (height: number) => void;
 }
-declare function FloatingPanel({ opened, setOpened, className, statedAnchorRef, matchWidth, placement, closeOnEsc, closeOnOutClick, style, fallbackPlacements, offset, ...props }: FloatingPanelProps): React.JSX.Element;
+declare function FloatingPanel({ opened, setOpened, className, statedAnchorRef, matchWidth, placement, closeOnEsc, closeOnOutClick, style, fallbackPlacements, offset, heightAvaliableCallback, ...props }: FloatingPanelProps): React.JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof FloatingPanel>;
 export default _default;

package/dist/components/header/Header.d.ts

@@ -1,4 +1,4 @@
-import React, { MouseEvent } from 'react';
+import React, { CSSProperties, MouseEvent } from 'react';
 import { HeaderType } from '../../libraries/HeaderThemes';
 import { TooltipPosition } from '../../libraries/Tooltips';
 import './Header.scss';
@@ -13,7 +13,7 @@ interface HeaderProps {
     onClick?: (event?: MouseEvent) => void;
     disabled?: boolean;
     className?: string;
-    position?: 'fixed' | 'static' | 'absolute' | 'relative' | 'sticky';
+    position?: CSSProperties['position'];
     blackBar?: {
         show: boolean;
         label: string;
@@ -29,7 +29,6 @@ interface HeaderProps {
 declare function Header(props: HeaderProps): React.JSX.Element;
 declare namespace Header {
     var defaultProps: {
-        position: string;
         theme: HeaderType;
     };
 }

package/dist/components/itemDropdownDownload/ItemDropdownDownload.d.ts

@@ -10,8 +10,8 @@ export interface ItemDropdownDownloadProps extends ButtonHTMLAttributes<HTMLButt
     label: string;
     opened: boolean;
     setOpened: (val: boolean) => void;
-    closeOnOutClick: boolean;
-    closeOnEsc: boolean;
+    closeOnOutClick?: boolean;
+    closeOnEsc?: boolean;
     downloads?: DownloadItem[];
 }
 declare function ItemDropdownDownload({ label, opened, setOpened, closeOnOutClick, closeOnEsc, downloads, ...props }: ItemDropdownDownloadProps): React.JSX.Element;

package/dist/components/select/Select.d.ts

@@ -24,7 +24,6 @@ export interface SelectProps {
     multiple?: boolean;
     panelFilter?: boolean;
     panelFilterPlaceholder?: string;
-    bottomPanel?: boolean;
     showPanelFooter?: boolean;
     options?: SelectOptionsType[];
     noOptionMessage?: string;

package/dist/components/select/Select.stories.d.ts

@@ -1,4 +1,6 @@
 import React from 'react';
+import Select from './Select';
+import { StoryObj } from '@storybook/react';
 declare const _default: {
     title: string;
 };
@@ -8,7 +10,7 @@ export declare const Single: () => React.JSX.Element;
 export declare const SingleWithoutClear: () => React.JSX.Element;
 export declare const SingleError: () => React.JSX.Element;
 export declare const SingleFilter: () => React.JSX.Element;
-export declare const SingleFilterBottomPanel: () => React.JSX.Element;
+export declare const SingleFilterModal: StoryObj<typeof Select>;
 export declare const SinglePreSelectUniqueOption: () => React.JSX.Element;
 export declare const SinglePreSelectUniqueOptionReadOnly: () => React.JSX.Element;
 export declare const Multiple: () => React.JSX.Element;

package/dist/hooks/useFloatingPanel/useFloatingPanel.d.ts

@@ -11,8 +11,9 @@ export interface FloatingPanelProps {
     placement?: Placement;
     strategy?: UseFloatingOptions['strategy'];
     fallbackPlacements?: Placement[];
+    heightAvaliableCallback?: (height: number) => void;
 }
-export default function useFloatingPanel({ stateOpened, matchWidth, offset, placement, strategy, fallbackPlacements, elements, }: FloatingPanelProps): {
+export default function useFloatingPanel({ stateOpened, matchWidth, offset, placement, strategy, fallbackPlacements, heightAvaliableCallback, elements, }: FloatingPanelProps): {
     panelRef: ((node: HTMLElement | null) => void) & ((node: HTMLElement | null) => void);
     panelStyles: import("react").CSSProperties;
     anchorRef: ((node: Element | import("@floating-ui/dom").VirtualElement | null) => void) & ((node: Element | import("@floating-ui/dom").VirtualElement | null) => void);

package/dist/index.css

@@ -2519,7 +2519,7 @@ h5 {
   warningDark: #765f00; }
 
 .component-container {
-  position: absolute;
+  position: relative;
   top: 0;
   left: 0;
   width: 100%;
@@ -4238,7 +4238,9 @@ header.component-header {
   flex-direction: column;
   justify-content: center;
   align-items: stretch;
-  -webkit-appearance: none; }
+  -webkit-appearance: none;
+  -moz-appearance: none;
+       appearance: none; }
   .component-input .component-input-label {
     color: #323c32;
     transition: color 0.3s ease;
@@ -4260,6 +4262,7 @@ header.component-header {
     border-color: #cdd3cd; }
     .component-input .component-input-input-container .component-input-input {
       color: #323c32;
+      caret-color: #33820d;
       border-radius: 0;
       transition: color 0.3s ease, border-color 0.3s ease;
       width: 100%;
@@ -4309,7 +4312,8 @@ header.component-header {
 .component-input.component-input-error .component-input-input-container {
   border-color: #e60000 !important; }
   .component-input.component-input-error .component-input-input-container .component-input-input {
-    color: #e60000 !important; }
+    color: #e60000 !important;
+    caret-color: #e60000; }
 
 .component-input.component-input-error .component-input-helper-text {
   color: #e60000 !important; }
@@ -4361,7 +4365,9 @@ header.component-header {
   .component-input-input:disabled::placeholder {
     color: #828a82 !important; }
 
-.component-input:not(.component-input-error):not(.force-focus):not(.component-input-disabled):not(.component-input-loading) .component-input-input-container:focus-within::before {
+.component-input:not(.component-input-error):not(.force-focus):not(.component-input-disabled):not(
+.component-input-loading
+) .component-input-input-container:focus-within::before {
   opacity: 1;
   visibility: visible;
   content: '';
@@ -4372,7 +4378,9 @@ header.component-header {
   background-color: #33820d;
   animation: inputFocus 0.3s ease forwards; }
 
-.component-input:not(.component-input-error):not(.force-focus):not(.component-input-disabled):not(.component-input-loading) .component-input-input-container:not(:focus-within):not(.force-focus)::before {
+.component-input:not(.component-input-error):not(.force-focus):not(.component-input-disabled):not(
+.component-input-loading
+) .component-input-input-container:not(:focus-within):not(.force-focus)::before {
   opacity: 0;
   content: '';
   height: 2px;
@@ -6130,21 +6138,23 @@ h5 {
   background-color: #fefefe;
   -webkit-user-select: none;
      -moz-user-select: none;
-          user-select: none; }
+          user-select: none;
+  overflow: visible;
+  height: -moz-fit-content;
+  height: fit-content; }
   .component-select-panel .component-select-panel-input {
     margin-bottom: 6px;
     padding: 0 16px;
     margin-top: 16px; }
   .component-select-panel .component-select-options {
     overflow-y: auto;
-    overflow-y: overlay;
-    max-height: 140px; }
+    max-height: calc(100% - 48px - 40px); }
     .component-select-panel .component-select-options:last-child .component-select-single-option,
     .component-select-panel .component-select-options:last-child .component-select-multiple-option {
       color: #323c32; }
       .component-select-panel .component-select-options:last-child .component-select-single-option:last-child,
       .component-select-panel .component-select-options:last-child .component-select-multiple-option:last-child {
-        border-radius: 0 0 8px 8px; }
+        border-radius: 0 0 4px 4px; }
     .component-select-panel .component-select-options .component-select-single-option {
       min-height: 40px;
       width: 100%;

package/dist/index.d.ts

@@ -170,8 +170,8 @@ import Tooltip from './components/tooltip/Tooltip';
 import TooltipManager from './components/tooltipManager/TooltipManager';
 import TopLoader from './components/topLoader/TopLoader';
 import VideoModal from './components/videoModal/VideoModal';
-import Bell16Icon from './assets/icons/Bell16Icon';
-import BellIcon from './assets/icons/BellIcon';
+import { Bell16Icon } from './assets/icons/Bell16Icon';
+import { BellIcon } from './assets/icons/BellIcon';
 import { MiniInformationIcon } from './assets/icons/MiniInformationIcon';
 import { PhonePlusIcon } from './assets/icons/PhonePlusIcon';
 import { Settings16Icon } from './assets/icons/Settings16Icon';

package/dist/index.js

@@ -169,12 +169,6 @@ var isMobile = function isMobile() {
     return navigator.userAgent.match(toMatchItem);
   });
 };
-var isiPhone = function isiPhone() {
-  var toMatch = [/iPhone/i, /iPad/i, /iPod/i];
-  return toMatch.some(function (toMatchItem) {
-    return navigator.userAgent.match(toMatchItem);
-  });
-};
 var Interval = /*#__PURE__*/function () {
   function Interval(callback, delay) {
     var _this = this;
@@ -7122,11 +7116,16 @@ var _excluded$8 = ["position", "fluid", "verticalPadding", "hasMobileButton", "h
 var rootClassName$1U = 'component-container';
 function Container(_ref) {
   var position = _ref.position,
-    fluid = _ref.fluid,
-    verticalPadding = _ref.verticalPadding,
-    hasMobileButton = _ref.hasMobileButton,
-    hasHeader = _ref.hasHeader,
-    hasAdvancedHeader = _ref.hasAdvancedHeader,
+    _ref$fluid = _ref.fluid,
+    fluid = _ref$fluid === void 0 ? false : _ref$fluid,
+    _ref$verticalPadding = _ref.verticalPadding,
+    verticalPadding = _ref$verticalPadding === void 0 ? false : _ref$verticalPadding,
+    _ref$hasMobileButton = _ref.hasMobileButton,
+    hasMobileButton = _ref$hasMobileButton === void 0 ? false : _ref$hasMobileButton,
+    _ref$hasHeader = _ref.hasHeader,
+    hasHeader = _ref$hasHeader === void 0 ? false : _ref$hasHeader,
+    _ref$hasAdvancedHeade = _ref.hasAdvancedHeader,
+    hasAdvancedHeader = _ref$hasAdvancedHeade === void 0 ? false : _ref$hasAdvancedHeade,
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? '' : _ref$className,
     _ref$style = _ref.style,
@@ -7143,13 +7142,6 @@ function Container(_ref) {
     className: rootClassName$1U + "-insider"
   }, props.children));
 }
-Container.defaultProps = {
-  fluid: false,
-  verticalPadding: false,
-  hasMobileButton: false,
-  hasAdvancedHeader: false,
-  hasHeader: false
-};
 var Container$1 = React.memo(Container);
 
 var _excluded$9 = ["control", "labelPosition", "labelGap", "label", "className"];
@@ -7180,7 +7172,7 @@ var formatHexadecimalColor = function formatHexadecimalColor(input) {
   return value;
 };
 var getStringWithoutSpecialChar = function getStringWithoutSpecialChar(input) {
-  var value = String(input).replace(/ã/g, 'a').replace(/Ã/g, 'A').replace(/á/g, 'a').replace(/Á/g, 'A').replace(/à/g, 'a').replace(/À/g, 'A').replace(/â/g, 'a').replace(/Â/g, 'A').replace(/é/g, 'e').replace(/ê/g, 'e').replace(/Ê/g, 'e').replace(/É/g, 'E').replace(/è/g, 'e').replace(/È/g, 'E').replace(/ì/g, 'i').replace(/Ì/g, 'I').replace(/í/g, 'i').replace(/Í/g, 'I').replace(/ó/g, 'o').replace(/Ó/g, 'o').replace(/ò/g, 'o').replace(/Ò/g, 'o').replace(/ô/g, 'o').replace(/Ô/g, 'O').replace(/õ/g, 'o').replace(/Õ/g, 'O').replace(/ç/g, 'c').replace(/Ç/g, 'C');
+  var value = String(input).normalize('NFD').replace(/(?:[\^`\xA8\xAF\xB4\xB7\xB8\u02B0-\u034E\u0350-\u0357\u035D-\u0362\u0374\u0375\u037A\u0384\u0385\u0483-\u0487\u0559\u0591-\u05A1\u05A3-\u05BD\u05BF\u05C1\u05C2\u05C4\u064B-\u0652\u0657\u0658\u06DF\u06E0\u06E5\u06E6\u06EA-\u06EC\u0730-\u074A\u07A6-\u07B0\u07EB-\u07F5\u0818\u0819\u0898-\u089F\u08C9-\u08D2\u08E3-\u08FE\u093C\u094D\u0951-\u0954\u0971\u09BC\u09CD\u0A3C\u0A4D\u0ABC\u0ACD\u0AFD-\u0AFF\u0B3C\u0B4D\u0B55\u0BCD\u0C3C\u0C4D\u0CBC\u0CCD\u0D3B\u0D3C\u0D4D\u0DCA\u0E47-\u0E4C\u0E4E\u0EBA\u0EC8-\u0ECC\u0F18\u0F19\u0F35\u0F37\u0F39\u0F3E\u0F3F\u0F82-\u0F84\u0F86\u0F87\u0FC6\u1037\u1039\u103A\u1063\u1064\u1069-\u106D\u1087-\u108D\u108F\u109A\u109B\u135D-\u135F\u1714\u1715\u17C9-\u17D3\u17DD\u1939-\u193B\u1A75-\u1A7C\u1A7F\u1AB0-\u1ABE\u1AC1-\u1ACB\u1B34\u1B44\u1B6B-\u1B73\u1BAA\u1BAB\u1C36\u1C37\u1C78-\u1C7D\u1CD0-\u1CE8\u1CED\u1CF4\u1CF7-\u1CF9\u1D2C-\u1D6A\u1DC4-\u1DCF\u1DF5-\u1DFF\u1FBD\u1FBF-\u1FC1\u1FCD-\u1FCF\u1FDD-\u1FDF\u1FED-\u1FEF\u1FFD\u1FFE\u2CEF-\u2CF1\u2E2F\u302A-\u302F\u3099-\u309C\u30FC\uA66F\uA67C\uA67D\uA67F\uA69C\uA69D\uA6F0\uA6F1\uA700-\uA721\uA788-\uA78A\uA7F8\uA7F9\uA8C4\uA8E0-\uA8F1\uA92B-\uA92E\uA953\uA9B3\uA9C0\uA9E5\uAA7B-\uAA7D\uAABF-\uAAC2\uAAF6\uAB5B-\uAB5F\uAB69-\uAB6B\uABEC\uABED\uFB1E\uFE20-\uFE2F\uFF3E\uFF40\uFF70\uFF9E\uFF9F\uFFE3]|\uD800\uDEE0|\uD801[\uDF80-\uDF85\uDF87-\uDFB0\uDFB2-\uDFBA]|\uD802[\uDEE5\uDEE6]|\uD803[\uDD22-\uDD27\uDEFD-\uDEFF\uDF46-\uDF50\uDF82-\uDF85]|\uD804[\uDC46\uDC70\uDCB9\uDCBA\uDD33\uDD34\uDD73\uDDC0\uDDCA-\uDDCC\uDE35\uDE36\uDEE9\uDEEA\uDF3C\uDF4D\uDF66-\uDF6C\uDF70-\uDF74]|\uD805[\uDC42\uDC46\uDCC2\uDCC3\uDDBF\uDDC0\uDE3F\uDEB6\uDEB7\uDF2B]|\uD806[\uDC39\uDC3A\uDD3D\uDD3E\uDD43\uDDE0\uDE34\uDE47\uDE99]|\uD807[\uDC3F\uDD42\uDD44\uDD45\uDD97]|\uD80D[\uDC47-\uDC55]|\uD81A[\uDEF0-\uDEF4\uDF30-\uDF36]|\uD81B[\uDF8F-\uDF9F\uDFF0\uDFF1]|\uD82B[\uDFF0-\uDFF3\uDFF5-\uDFFB\uDFFD\uDFFE]|\uD833[\uDF00-\uDF2D\uDF30-\uDF46]|\uD834[\uDD67-\uDD69\uDD6D-\uDD72\uDD7B-\uDD82\uDD85-\uDD8B\uDDAA-\uDDAD]|\uD838[\uDC30-\uDC6D\uDD30-\uDD36\uDEAE\uDEEC-\uDEEF]|\uD83A[\uDCD0-\uDCD6\uDD44-\uDD46\uDD48-\uDD4A])/g, '');
   return value;
 };
 
@@ -7622,6 +7614,7 @@ function useFloatingPanel(_ref) {
     strategy = _ref$strategy === void 0 ? 'fixed' : _ref$strategy,
     _ref$fallbackPlacemen = _ref.fallbackPlacements,
     fallbackPlacements = _ref$fallbackPlacemen === void 0 ? ['top', 'bottom', 'right-start', 'right'] : _ref$fallbackPlacemen,
+    heightAvaliableCallback = _ref.heightAvaliableCallback,
     elements = _ref.elements;
   var opened = stateOpened[0],
     setOpened = stateOpened[1];
@@ -7649,6 +7642,7 @@ function useFloatingPanel(_ref) {
             });
           }
           setMaxHeight(availableHeight);
+          heightAvaliableCallback === null || heightAvaliableCallback === void 0 ? void 0 : heightAvaliableCallback(availableHeight);
         }
       })]
     }),
@@ -7727,7 +7721,7 @@ function useOutsideClick(refs, handler, options) {
   }, [refs, handler, handleClickOutside, (_options3 = options) === null || _options3 === void 0 ? void 0 : _options3.events]);
 }
 
-var _excluded$c = ["opened", "setOpened", "className", "statedAnchorRef", "matchWidth", "placement", "closeOnEsc", "closeOnOutClick", "style", "fallbackPlacements", "offset"];
+var _excluded$c = ["opened", "setOpened", "className", "statedAnchorRef", "matchWidth", "placement", "closeOnEsc", "closeOnOutClick", "style", "fallbackPlacements", "offset", "heightAvaliableCallback"];
 var rootClassName$1_ = 'floating-panel';
 function FloatingPanel(_ref) {
   var opened = _ref.opened,
@@ -7748,6 +7742,7 @@ function FloatingPanel(_ref) {
     fallbackPlacements = _ref$fallbackPlacemen === void 0 ? ['bottom', 'bottom-end', 'bottom-start', 'top', 'top-start', 'top-end', 'left', 'right'] : _ref$fallbackPlacemen,
     _ref$offset = _ref.offset,
     offset = _ref$offset === void 0 ? 0 : _ref$offset,
+    heightAvaliableCallback = _ref.heightAvaliableCallback,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$c);
   var _useState = React.useState(),
     panelRef = _useState[0],
@@ -7762,6 +7757,7 @@ function FloatingPanel(_ref) {
         floating: panelRef,
         reference: statedAnchorRef
       },
+      heightAvaliableCallback: heightAvaliableCallback,
       offset: offset
     }),
     isMounted = _useFloatingPanel.isMounted,
@@ -8486,7 +8482,6 @@ function Header(props) {
   }));
 }
 Header.defaultProps = {
-  position: 'fixed',
   theme: exports.HeaderType.Verde
 };
 var Header$1 = React.memo(Header);
@@ -10097,6 +10092,7 @@ var Search$1 = React.memo(Search);
 var rootClassName$2r = 'component-select';
 function Select(props) {
   var _props$options4;
+  var systemInfo = useSystemInfo();
   var panelId = React.useMemo(function () {
     return getUniqueKey();
   }, []);
@@ -10143,13 +10139,12 @@ function Select(props) {
       className: rootClassName$2r + "-clear-button",
       icon: React__default.createElement(CloseIcon, null),
       onClick: function onClick() {
+        setPanelOpened(false);
         if (props.multiple) {
-          setPanelOpened(false);
           props.onChange([], {
             setPanelOpened: setPanelOpened
           });
         } else {
-          setPanelOpened(false);
           props.onChange(null, {
             setPanelOpened: setPanelOpened
           });
@@ -10175,7 +10170,7 @@ function Select(props) {
       onClick: function onClick() {
         var _wrapperRef$current;
         var selectFake = (_wrapperRef$current = wrapperRef.current) === null || _wrapperRef$current === void 0 ? void 0 : _wrapperRef$current.querySelector("." + rootClassName$2r + "-select-fake");
-        if (!props.multiple && isiPhone() && selectFake) {
+        if (!props.multiple && systemInfo.os === exports.OS.iOS && selectFake) {
           selectFake.focus();
         } else {
           setPanelOpened(!panelOpened);
@@ -10184,7 +10179,7 @@ function Select(props) {
       onFocus: function onFocus(evt) {
         var _wrapperRef$current2;
         var selectFake = (_wrapperRef$current2 = wrapperRef.current) === null || _wrapperRef$current2 === void 0 ? void 0 : _wrapperRef$current2.querySelector("." + rootClassName$2r + "-select-fake");
-        if (!props.multiple && isiPhone() && selectFake) {
+        if (!props.multiple && systemInfo.os === exports.OS.iOS && selectFake) {
           selectFake.focus();
         } else {
           evt.target.setSelectionRange(0, 0);
@@ -10216,7 +10211,6 @@ function Select(props) {
       })[0]
     });
     delete p.showPanelFooter;
-    delete p.bottomPanel;
     delete p.clearButton;
     delete p.multiplePlaceholder;
     delete p.multiple;
@@ -10380,9 +10374,10 @@ function Select(props) {
   var optionsFiltered = React.useMemo(function () {
     var _props$options2;
     return ((_props$options2 = props.options) === null || _props$options2 === void 0 ? void 0 : _props$options2.filter(function (op) {
-      return getStringWithoutSpecialChar(op.label).toLowerCase().match(getStringWithoutSpecialChar(filterInput).toLowerCase());
+      return getStringWithoutSpecialChar(String(op.label)).toLowerCase().includes(getStringWithoutSpecialChar(filterInput).toLowerCase());
     })) || [];
   }, [props.options, filterInput]);
+  var skipFirst = React.useRef(true);
   React.useLayoutEffect(function () {
     if (panelOpened) {
       var panel = document.querySelector("#" + panelId);
@@ -10391,7 +10386,7 @@ function Select(props) {
         panel.style.bottom = '0';
       }
       var firstInput = document.querySelector("#" + panelId + " ." + rootClassName$2r + "-panel-input input");
-      if (firstInput && !isiPhone()) {
+      if (firstInput && systemInfo.os !== exports.OS.iOS) {
         setTimeout(function () {
           firstInput.focus();
         }, 50);
@@ -10422,18 +10417,34 @@ function Select(props) {
           }
         }
       }
-    } else {
+    } else if (!skipFirst.current) {
       var _wrapperRef$current3;
       var inputElement = (_wrapperRef$current3 = wrapperRef.current) === null || _wrapperRef$current3 === void 0 ? void 0 : _wrapperRef$current3.querySelector("input");
-      if (inputElement && !isiPhone()) {
+      if (inputElement && systemInfo.os !== exports.OS.iOS) {
         inputElement.focus();
       }
+    } else if (skipFirst) {
+      skipFirst.current = false;
     }
   }, [panelOpened]);
+  var setMaxHeight = React.useCallback(function (h) {
+    var max = h - 12;
+    var el = document.querySelector("#" + panelId + " ." + rootClassName$2r + "-options");
+    if (props.showPanelFooter) {
+      max -= 40;
+    }
+    if (props.panelFilter) {
+      max -= 48;
+    }
+    if (window.innerHeight > 400) {
+      max = Math.min(max, 40 * 6);
+    }
+    el === null || el === void 0 ? void 0 : el.style.setProperty('max-height', max + "px");
+  }, [panelId, props.showPanelFooter, props.panelFilter]);
   return React__default.createElement("div", {
     ref: wrapperRef,
     className: rootClassName$2r + "-outer"
-  }, !props.multiple && isiPhone() && React__default.createElement("select", {
+  }, !props.multiple && systemInfo.os === exports.OS.iOS && React__default.createElement("select", {
     className: rootClassName$2r + "-select-fake",
     value: props.value ? String(props.value) : '',
     onChange: function onChange(evt) {
@@ -10467,10 +10478,10 @@ function Select(props) {
     matchWidth: true,
     placement: 'bottom',
     fallbackPlacements: ['top', 'left', 'right'],
-    offset: 1
-  }, React__default.createElement("div", {
+    offset: 1,
     id: panelId,
-    className: rootClassName$2r + "-panel " + (props.multiple ? 'multiple' : '')
+    className: rootClassName$2r + "-panel " + (props.multiple ? 'multiple' : ''),
+    heightAvaliableCallback: setMaxHeight
   }, props.panelFilter && props.options && !!props.options.length && React__default.createElement("div", {
     className: rootClassName$2r + "-panel-input"
   }, React__default.createElement(Input$1, {
@@ -10522,7 +10533,7 @@ function Select(props) {
         setPanelOpened: setPanelOpened
       });
     }
-  }, languageValues.components.select.clearAll))))));
+  }, languageValues.components.select.clearAll)))));
 }
 Select.defaultProps = {
   onChange: undefined,
@@ -12086,7 +12097,7 @@ VideoModal.defaultProps = {
 
 var _excluded$o = ["className"];
 var rootClassName$2N = 'icon-component';
-function Bell16Icon(_ref) {
+var Bell16Icon = function Bell16Icon(_ref) {
   var _ref$className = _ref.className,
     className = _ref$className === void 0 ? '' : _ref$className,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$o);
@@ -12104,11 +12115,11 @@ function Bell16Icon(_ref) {
     d: 'M12.2013 8.544C12.2073 10.042 12.7943 11.453 13.8541 12.516C13.9653 12.626 14.0144 12.78 13.9964 12.931C14.0074 13.042 13.9913 13.158 13.9443 13.266C13.8441 13.515 13.6317 13.669 13.3112 13.678H10.4643C10.3832 14.971 9.31538 16 8.00014 16C6.6859 16 5.61808 14.971 5.53594 13.678H2.68308H2.67406C2.4016 13.678 2.15518 13.512 2.05201 13.252C1.99391 13.121 1.98589 12.973 2.02095 12.834C2.02095 12.716 2.06102 12.603 2.14717 12.516C3.20697 11.453 3.79397 10.042 3.79998 8.542L3.79898 6.082C3.79698 4.199 5.06814 2.543 6.89025 2.055C6.99342 2.029 7.05453 2.016 7.11864 2.003C7.23884 1.978 7.36906 1.966 7.49929 1.957V0.5C7.49929 0.224 7.72367 0 8.00014 0C8.27761 0 8.50099 0.224 8.50099 0.5V1.957C8.63222 1.966 8.76244 1.978 8.89066 2.005C8.94675 2.016 9.00786 2.029 9.06996 2.044C10.9331 2.543 12.2043 4.199 12.2023 6.083L12.2013 8.544ZM9.47866 13.178C9.47866 12.902 9.70304 12.678 9.97951 12.678H12.6571C11.7175 11.508 11.2056 10.066 11.1996 8.546L11.2006 6.082C11.2026 4.651 10.2359 3.392 8.85059 3.022L8.68731 2.984C8.61038 2.9673 8.53764 2.96176 8.46617 2.95631C8.45203 2.95523 8.43793 2.95416 8.42386 2.953L8.30165 2.945C8.28562 2.944 8.20449 2.931 8.18846 2.928L8.04321 2.917C8.02759 2.91815 7.99794 2.91798 7.97065 2.91781C7.95069 2.91769 7.93201 2.91758 7.921 2.918L7.57742 2.953C7.56222 2.95425 7.54698 2.9554 7.53173 2.95656C7.46158 2.96187 7.3911 2.96721 7.32198 2.982L7.18174 3.013C5.76533 3.392 4.79868 4.651 4.80069 6.081L4.80169 8.544C4.79568 10.066 4.28281 11.508 3.34421 12.678H6.02177C6.29824 12.678 6.52262 12.902 6.52262 13.178V13.525C6.52262 14.338 7.18575 15 8.00014 15C8.81553 15 9.47866 14.338 9.47866 13.525V13.178Z',
     fill: 'currentColor'
   }));
-}
+};
 
 var _excluded$p = ["className"];
 var rootClassName$2O = 'icon-component';
-function BellIcon(_ref) {
+var BellIcon = function BellIcon(_ref) {
   var _ref$className = _ref.className,
     className = _ref$className === void 0 ? '' : _ref$className,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$p);
@@ -12126,7 +12137,7 @@ function BellIcon(_ref) {
     d: 'M20.8526 19.112C20.9707 19.229 21.0211 19.396 20.9919 19.555C21.01 19.693 20.9929 19.835 20.9343 19.967C20.8253 20.249 20.5095 20.431 20.2067 20.439H15.5633V20.469C15.5633 22.416 13.9648 24 12.0009 24C10.0359 24 8.43735 22.416 8.43735 20.469V20.439H3.78592H3.7728C3.46398 20.439 3.17434 20.244 3.05828 19.949C2.98965 19.793 2.98259 19.615 3.03204 19.448C3.02397 19.324 3.05626 19.203 3.1481 19.112C4.8365 17.432 5.77103 15.203 5.78112 12.833L5.7791 9.058C5.77607 6.292 7.65824 3.858 10.3558 3.141C10.4992 3.104 10.589 3.085 10.6778 3.067C10.8736 3.027 11.0653 3.011 11.2571 2.999L11.4256 2.986L11.4962 2.974V0.5C11.4962 0.223 11.7213 0 12.0009 0C12.2794 0 12.5055 0.223 12.5055 0.5V2.974C12.5103 2.97536 12.5146 2.97579 12.5191 2.97625C12.5212 2.97646 12.5234 2.97668 12.5256 2.977L12.7436 2.999C12.9354 3.011 13.1281 3.027 13.3169 3.066C13.4117 3.085 13.5015 3.104 13.5893 3.127C16.3425 3.858 18.2256 6.292 18.2226 9.059L18.2206 12.835C18.2307 15.203 19.1642 17.432 20.8526 19.112ZM14.5541 19.939C14.5541 19.663 14.7802 19.439 15.0587 19.439H19.7768C18.1277 17.622 17.2215 15.297 17.2114 12.836L17.2134 9.058C17.2164 6.743 15.6411 4.708 13.3835 4.108C13.2793 4.08031 13.2128 4.06599 13.1535 4.05324C13.1422 4.0508 13.1311 4.04841 13.1201 4.046C12.9782 4.01659 12.8431 4.00745 12.7094 3.99841C12.6976 3.99761 12.6858 3.99681 12.674 3.996L12.4883 3.982C12.4722 3.981 12.3551 3.963 12.3399 3.96L12.1906 3.946C12.0765 3.94 12.0412 3.935 12.0069 3.93C12.0059 3.93 12.0049 3.93025 12.0039 3.9305C12.0029 3.93075 12.0019 3.931 12.0009 3.931C11.9998 3.931 11.9988 3.93075 11.9978 3.9305C11.9968 3.93025 11.9958 3.93 11.9948 3.93L11.9912 3.93053C11.9581 3.93535 11.926 3.94004 11.8939 3.941C11.8898 3.941 11.7152 3.951 11.7122 3.952C11.6961 3.955 11.5316 3.98 11.5154 3.982L11.3277 3.996C11.316 3.9968 11.3042 3.99759 11.2925 3.99838C11.1581 4.00743 11.0245 4.01641 10.8927 4.044C10.8816 4.04635 10.8706 4.04864 10.8599 4.0509C10.7928 4.06495 10.7329 4.07749 10.6737 4.093C8.35964 4.708 6.78528 6.743 6.78831 9.057L6.79032 12.835C6.78023 15.297 5.87296 17.622 4.22492 19.439H8.94195C9.2215 19.439 9.44655 19.663 9.44655 19.939V20.469C9.44655 21.865 10.592 23 12.0009 23C13.4087 23 14.5541 21.865 14.5541 20.469V19.939Z',
     fill: 'currentColor'
   }));
-}
+};
 
 var _excluded$q = ["className"];
 var rootClassName$2P = 'icon-component';