kui-complex 0.0.25 → 0.0.27

package/dist/index.d.ts

@@ -2,7 +2,7 @@ import * as _emotion_react_jsx_runtime from '@emotion/react/jsx-runtime';
 import * as React from 'react';
 import React__default, { RefObject, SVGProps, ReactNode } from 'react';
 import * as kui_basic from 'kui-basic';
-import { InputWithAdornmentsProps, GridProps, InputWithMaskProps as InputWithMaskProps$1, SwitchProps, CaptionProps, InputWithCountryDropdownProps } from 'kui-basic';
+import { InputWithAdornmentsProps, InputWithMaskProps as InputWithMaskProps$1, SwitchProps, CaptionProps, InputWithCountryDropdownProps } from 'kui-basic';
 import { UseFormReturn, FieldValues } from 'react-hook-form';
 import * as react_datepicker from 'react-datepicker';
 import * as _emotion_styled from '@emotion/styled';
@@ -109,15 +109,13 @@ type DesktopMenuPanelProps = {
 
 declare const DesktopMenuPanel: ({ tabs, variant, ...other }: DesktopMenuPanelProps) => _emotion_react_jsx_runtime.JSX.Element;
 
-type InputDropdownProps = {
-  isOpen?: boolean
-  handleClose: () => void
-  buttonRef?: RefObject<HTMLDivElement>
-  className?: string
-  children: ReactNode | ReactNode[]
-} & GridProps
-
-declare const InputDropdown: ({ isOpen, handleClose, buttonRef, children, ...otherProps }: InputDropdownProps) => _emotion_react_jsx_runtime.JSX.Element | null;
+declare const InputDropdown: React.ForwardRefExoticComponent<Pick<{
+    isOpen?: boolean | undefined;
+    handleClose: () => void;
+    buttonRef?: React.RefObject<HTMLDivElement> | undefined;
+    className?: string | undefined;
+    children: React.ReactNode | React.ReactNode[];
+} & kui_basic.GridProps, "color" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "alignContent" | "alignItems" | "direction" | "xs" | "sm" | "lg" | "isOpen" | "handleClose" | "buttonRef" | "spacing" | "item" | "container" | "justify" | "wrap" | "md" | "xl"> & React.RefAttributes<HTMLDivElement>>;
 
 interface InputWithMaskProps
   extends Omit<InputWithMaskProps$1, "form"> {

package/dist/index.es.js

@@ -6,7 +6,7 @@ import { css, Global } from '@emotion/react';
 import { jsx, jsxs as jsxs$1, Fragment as Fragment$1 } from 'react/jsx-runtime';
 import { theme, Caption, Button, Container, Grid, InputWithAdornments, Heading, IconButton, InputWithMask as InputWithMask$1, LinearProgress, Divider, Modal, Switch as Switch$1, InputWithCountryDropdown } from 'kui-basic';
 import * as React from 'react';
-import { useEffect, useRef, forwardRef, useState } from 'react';
+import { useEffect, forwardRef, useRef, useState } from 'react';
 import { useHistory } from 'react-router-dom';
 import { HalfArrowIcon, PrevArrowIcon, NextArrowIcon, CalendarIcon, ArrowBackIcon, ArrowNextIcon, ClosedEyeIcon, OpenEyeIcon, CheckIcon } from 'kui-icon';
 import _ from 'lodash';
@@ -136,7 +136,7 @@ var dropdownStyles = function (_a) {
     var isOpen = _a.isOpen;
     return css(templateObject_1$p || (templateObject_1$p = __makeTemplateObject(["\n  width: 100%;\n  max-height: 389px;\n  display: ", ";\n  position: absolute;\n  background: ", ";\n  z-index: 3;\n  border: 1px solid ", ";\n  top: 64px;\n  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1);\n  border-radius: 8px;\n  overflow: auto;\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n  overflow-y: scroll;\n  user-select: none;\n  &::-webkit-scrollbar {\n    width: 0px;\n  },\n"], ["\n  width: 100%;\n  max-height: 389px;\n  display: ", ";\n  position: absolute;\n  background: ", ";\n  z-index: 3;\n  border: 1px solid ", ";\n  top: 64px;\n  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1);\n  border-radius: 8px;\n  overflow: auto;\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n  overflow-y: scroll;\n  user-select: none;\n  &::-webkit-scrollbar {\n    width: 0px;\n  },\n"])), isOpen ? "flex" : "none", theme.palette.grey.zero, theme.palette.grey.fifteenB);
 };
-var InputDropdown = function (_a) {
+var InputDropdown = forwardRef(function (_a, ref) {
     var isOpen = _a.isOpen, handleClose = _a.handleClose, buttonRef = _a.buttonRef, children = _a.children, otherProps = __rest(_a, ["isOpen", "handleClose", "buttonRef", "children"]);
     var dropdownRef = useRef(null);
     var closePopUp = function (e) {
@@ -156,20 +156,35 @@ var InputDropdown = function (_a) {
     if (!isOpen) {
         return null;
     }
-    return (jsx$1(Grid, __assign({ "data-testid": "input_dropdown", container: true, ref: dropdownRef, css: dropdownStyles({ isOpen: isOpen }) }, otherProps, { children: children })));
-};
+    var forwardedRef = function (elem) {
+        if (typeof ref === "function")
+            ref(elem);
+        else if (ref)
+            ref.current = elem;
+        dropdownRef.current = elem;
+    };
+    return (jsx$1(Grid, __assign({ "data-testid": "input_dropdown", container: true, ref: forwardedRef, css: dropdownStyles({ isOpen: isOpen }) }, otherProps, { children: children })));
+});
 var templateObject_1$p;
 
 var InputSelectDropdown = function (_a) {
     var options = _a.options, inputRef = _a.inputRef, isOpenDropdown = _a.isOpenDropdown, handleCloseDropdown = _a.handleCloseDropdown, handleSelect = _a.handleSelect, selectedValue = _a.selectedValue;
+    var dropdownRef = useRef(null);
     useEffect(function () {
         var _a;
         if (isOpenDropdown) {
-            (_a = document
-                .querySelector("[data-value=autocomplete_option_".concat(selectedValue, "]"))) === null || _a === void 0 ? void 0 : _a.scrollIntoView();
+            var element = document.querySelector("[data-value=autocomplete_option_".concat(selectedValue, "]"));
+            var coordinates = element === null || element === void 0 ? void 0 : element.getBoundingClientRect();
+            if (coordinates && inputRef.current && element) {
+                (_a = dropdownRef.current) === null || _a === void 0 ? void 0 : _a.scrollTo({
+                    top: coordinates.top -
+                        inputRef.current.clientHeight -
+                        element.clientHeight,
+                });
+            }
         }
     }, [isOpenDropdown]);
-    return (jsx$1(InputDropdown, __assign({ buttonRef: inputRef, isOpen: isOpenDropdown, handleClose: handleCloseDropdown, css: {
+    return (jsx$1(InputDropdown, __assign({ ref: dropdownRef, buttonRef: inputRef, isOpen: isOpenDropdown, handleClose: handleCloseDropdown, css: {
             maxHeight: "142px",
             padding: "4px",
         } }, { children: options.map(function (option, key) { return (jsx$1(OptionWrapper, __assign({ onClick: function () { return handleSelect(option); }, "data-value": "autocomplete_option_".concat(option.value), "data-testid": "autocomplete_option_".concat(key) }, { children: jsx$1(StyledOption, __assign({ css: selectedValue === option.value && selectedStyles }, { children: jsx$1(Caption, __assign({ size: "sm", weight: 500 }, { children: option.label })) })) }), option.label)); }) })));
@@ -925,10 +940,11 @@ var StyledWrapper = styled.div(templateObject_1$1 || (templateObject_1$1 = __mak
 var templateObject_1$1;
 
 var ButtonSelect = forwardRef(function (props, ref) {
+    var _a;
     var options = props.options, otherProps = __rest(props, ["options"]);
-    return (jsx(StyledInputSelect, __assign({ value: options === null || options === void 0 ? void 0 : options[0].value, options: options, iconProps: { width: 9, height: 5 } }, otherProps, { ref: ref })));
+    return (jsx(StyledInputSelect, __assign({ value: (_a = options === null || options === void 0 ? void 0 : options[0]) === null || _a === void 0 ? void 0 : _a.value, options: options, iconProps: { width: 9, height: 5 } }, otherProps, { ref: ref })));
 });
-var StyledInputSelect = styled(InputSelect)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  &.KUI-Input_container {\n    height: 40px;\n    width: fit-content;\n    input {\n      height: 40px;\n      border-radius: 66px;\n      padding: 0 12px;\n      transform: none;\n      font-size: 12px;\n      line-height: 14px;\n      margin: 0 !important;\n      width: auto !important;\n    }\n  }\n  & + div {\n    top: 48px;\n  }\n"], ["\n  &.KUI-Input_container {\n    height: 40px;\n    width: fit-content;\n    input {\n      height: 40px;\n      border-radius: 66px;\n      padding: 0 12px;\n      transform: none;\n      font-size: 12px;\n      line-height: 14px;\n      margin: 0 !important;\n      width: auto !important;\n    }\n  }\n  & + div {\n    top: 48px;\n  }\n"])));
+var StyledInputSelect = styled(InputSelect)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  &.KUI-Input_container {\n    height: 40px;\n    width: fit-content;\n    input {\n      height: 40px;\n      border-radius: 66px;\n      padding: 0 12px;\n      transform: none;\n      font-size: 12px;\n      line-height: 14px;\n      margin: 0 !important;\n      width: auto !important;\n    }\n\n    @media (max-width: ", "px) {\n      height: 32px;\n      input {\n        height: 32px;\n      }\n    }\n  }\n  & + div {\n    top: 48px;\n  }\n"], ["\n  &.KUI-Input_container {\n    height: 40px;\n    width: fit-content;\n    input {\n      height: 40px;\n      border-radius: 66px;\n      padding: 0 12px;\n      transform: none;\n      font-size: 12px;\n      line-height: 14px;\n      margin: 0 !important;\n      width: auto !important;\n    }\n\n    @media (max-width: ", "px) {\n      height: 32px;\n      input {\n        height: 32px;\n      }\n    }\n  }\n  & + div {\n    top: 48px;\n  }\n"])), theme.breakpoints.xs);
 var templateObject_1;
 
 export { Avatar, ButtonSelect, ButtonTab, ButtonsPanel, CalendarHeaderWithSelect, CalendarStandardContainer, CalendarStandardHeader, DesktopInputWithMonthPicker, DesktopMenuPanel, InputDropdown, InputForDatepicker, InputPassword, InputPhoneWithForm, InputSelect, InputSelectDropdown, InputTextAreaMobile, InputWithController, InputWithDatePicker, InputWithMask, InputWithMonthPicker, MenuItem, MenuPanel, MobileInputWithMonthPicker, MobileMenuPanel, MonthPickerContainer, MonthPickerHeader, PassportStrengthBar, SelectMonth, SelectYear, Switch, Table, TableCell, TableHeadCell, TableRow, Tooltip, UndefinedAvatar };