kui-complex 0.0.10 → 0.0.11

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, ReactNode } from 'react';
 import * as kui_basic from 'kui-basic';
-import { InputWithAdornmentsProps, GridProps, SwitchProps, CaptionProps } from 'kui-basic';
+import { InputWithAdornmentsProps, GridProps, SwitchProps, CaptionProps, InputWithCountryDropdownProps } from 'kui-basic';
 import { UseFormReturn, FieldValues } from 'react-hook-form';
 import * as react_datepicker from 'react-datepicker';
 import { ReactDatePickerProps } from 'react-datepicker';
@@ -244,6 +244,13 @@ type UndefinedAvatarProps = {
 
 declare const UndefinedAvatar: ({ label, ...otherProps }: UndefinedAvatarProps) => JSX.Element;
 
-declare const TestForm: () => JSX.Element;
+interface InputPhoneWithFormProps<T>
+  extends Omit<InputWithCountryDropdownProps, "form"> {
+  form: UseFormReturn<T>
+  name?: string
+  error?: string | null
+}
+
+declare const InputPhoneWithForm: React__default.ForwardRefExoticComponent<Pick<InputPhoneWithFormProps<FieldValues>, "label" | "size" | "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" | "form" | "pattern" | "height" | "width" | "list" | "step" | "alt" | "crossOrigin" | "src" | "type" | "endIcon" | "startIcon" | "disabled" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "value" | "error" | "inputRef" | "cornerLabel" | "isTextArea" | "inputStyles" | "labelStyles" | "messageClassName" | "labelInlineStyles" | "errorMessage" | "inputValue" | "accept" | "autoComplete" | "capture" | "checked" | "enterKeyHint" | "max" | "maxLength" | "min" | "minLength" | "multiple" | "readOnly" | "required" | "onSelectCountry" | "hiddenInputProps"> & React__default.RefAttributes<HTMLInputElement>>;
 
-export { Avatar, ButtonTab, ButtonsPanel, CalendarHeaderWithSelect, CalendarStandardContainer, CalendarStandardHeader, DesktopInputWithMonthPicker, DesktopMenuPanel, InputDropdown, InputForDatepicker, InputPassword, InputSelect, InputSelectDropdown, InputTextAreaMobile, InputWithController, InputWithDatePicker, InputWithMonthPicker, MenuItem, MenuPanel, MobileInputWithMonthPicker, MobileMenuPanel, MonthPickerContainer, MonthPickerHeader, PassportStrengthBar, SelectMonth, SelectYear, Switch, TestForm, UndefinedAvatar };
+export { Avatar, ButtonTab, ButtonsPanel, CalendarHeaderWithSelect, CalendarStandardContainer, CalendarStandardHeader, DesktopInputWithMonthPicker, DesktopMenuPanel, InputDropdown, InputForDatepicker, InputPassword, InputPhoneWithForm, InputSelect, InputSelectDropdown, InputTextAreaMobile, InputWithController, InputWithDatePicker, InputWithMonthPicker, MenuItem, MenuPanel, MobileInputWithMonthPicker, MobileMenuPanel, MonthPickerContainer, MonthPickerHeader, PassportStrengthBar, SelectMonth, SelectYear, Switch, UndefinedAvatar };

package/dist/index.es.js

@@ -4,21 +4,19 @@ import { jsx as jsx$1, jsxs, Fragment } from '@emotion/react/jsx-runtime';
 import styled from '@emotion/styled';
 import { css } 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, LinearProgress, Divider, Modal, Switch as Switch$1, InputWithCountryDropdown, InputWithMask as InputWithMask$1 } from 'kui-basic';
+import { theme, Caption, Button, Container, Grid, InputWithAdornments, Heading, IconButton, LinearProgress, Divider, Modal, Switch as Switch$1, InputWithCountryDropdown } from 'kui-basic';
 import * as React from 'react';
 import { useEffect, useRef, forwardRef, 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';
 import DatePicker, { registerLocale } from 'react-datepicker';
-import { Controller, useController, useForm } from 'react-hook-form';
+import { Controller, useController } from 'react-hook-form';
 import InputMask from 'react-input-mask';
 import { scroller, Events, Link, animateScroll, Element } from 'react-scroll';
 import ru from 'date-fns/locale/ru';
 import { DateTime } from 'luxon';
 import Swiper from 'react-id-swiper';
-import * as yup from 'yup';
-import { yupResolver } from '@hookform/resolvers/yup';
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -775,80 +773,5 @@ InputPhoneWithForm.defaultProps = {
     name: "phone",
 };
 
-var InputWithMask = forwardRef(function (_a, ref) {
-    var form = _a.form, name = _a.name, error = _a.error, inputProps = __rest(_a, ["form", "name", "error"]);
-    var handleChange = function (e, field) {
-        field.onChange(e);
-        if (inputProps.onChange) {
-            inputProps.onChange(e);
-        }
-    };
-    var forwardedRef = function (elem, field) {
-        if (ref) {
-            // eslint-disable-next-line no-param-reassign
-            // @ts-ignore
-            ref.current = elem;
-        }
-        field.ref(elem);
-    };
-    var getError = function (fieldState) {
-        var _a;
-        return typeof error !== "undefined" && String(error).length > 0
-            ? error
-            : (_a = fieldState.error) === null || _a === void 0 ? void 0 : _a.message;
-    };
-    return (jsx(Controller, { control: form === null || form === void 0 ? void 0 : form.control, name: name, render: function (_a) {
-            var field = _a.field, fieldState = _a.fieldState;
-            return (jsx(InputWithMask$1, __assign({ errorMessage: getError(fieldState) }, field, inputProps, { onChange: function (e) {
-                    return handleChange(e, field);
-                }, value: field.value || "", ref: function (e) { return forwardedRef(e, field); } })));
-        } }));
-});
-
-var Schema = yup.object().shape({
-    fields: yup.object({
-        basic: yup.string().required("basic"),
-        withMask: yup.string().required("withMask"),
-        select: yup.string().required("select"),
-        withDatepicker: yup
-            .date()
-            .max(new Date("2022-10-15"), "date")
-            .required("withDatepicker")
-            .nullable(),
-        withMonthpicker: yup.date().required("withMonthpicker"),
-        phone: yup.object({
-            phoneNumber: yup.string().required("phone"),
-        }),
-        password: yup.string().required("password"),
-    }),
-});
-var TestForm = function () {
-    var form = useForm({
-        defaultValues: {
-            fields: {
-                basic: "Basic input",
-                withMask: "565-632",
-                select: "second",
-                withDatepicker: new Date(),
-                withMonthpicker: new Date(),
-                phone: {
-                    phoneNumber: "9123456987",
-                    phoneCode: "93",
-                },
-                switch: true,
-                password: "password",
-            },
-        },
-        resolver: yupResolver(Schema),
-    });
-    var handleSubmit = function (data) {
-        console.log(data);
-    };
-    return (jsxs$1("form", __assign({ onSubmit: form.handleSubmit(handleSubmit, handleSubmit) }, { children: [jsx("button", __assign({ type: "submit" }, { children: "Submit" })), jsx(InputWithController, { form: form, name: "fields.basic", label: "Basic" }), jsx(InputWithMask, { mask: "999-999", form: form, name: "fields.withMask", label: "With mask" }), jsx(InputSelect, { form: form, name: "fields.select", label: "Select", options: [
-                    { label: "First", value: "first" },
-                    { label: "Second", value: "second" },
-                ] }), jsx(InputWithDatePicker, { form: form, name: "fields.withDatepicker", label: "With Datepicker" }), jsx(InputWithMonthPicker, { form: form, name: "fields.withMonthpicker", label: "With Monthpicker" }), jsx(InputPhoneWithForm, { form: form, name: "fields.phone", label: "Phone" }), jsx(Switch, { form: form, name: "fields.switch", label: "Switch" }), jsx(InputPassword, { form: form, name: "fields.password", label: "Password" })] })));
-};
-
-export { Avatar, ButtonTab, ButtonsPanel, CalendarHeaderWithSelect, CalendarStandardContainer, CalendarStandardHeader, DesktopInputWithMonthPicker, DesktopMenuPanel, InputDropdown, InputForDatepicker, InputPassword, InputSelect, InputSelectDropdown, InputTextAreaMobile, InputWithController, InputWithDatePicker, InputWithMonthPicker, MenuItem, MenuPanel, MobileInputWithMonthPicker, MobileMenuPanel, MonthPickerContainer, MonthPickerHeader, PassportStrengthBar, SelectMonth, SelectYear, Switch, TestForm, UndefinedAvatar };
+export { Avatar, ButtonTab, ButtonsPanel, CalendarHeaderWithSelect, CalendarStandardContainer, CalendarStandardHeader, DesktopInputWithMonthPicker, DesktopMenuPanel, InputDropdown, InputForDatepicker, InputPassword, InputPhoneWithForm, InputSelect, InputSelectDropdown, InputTextAreaMobile, InputWithController, InputWithDatePicker, InputWithMonthPicker, MenuItem, MenuPanel, MobileInputWithMonthPicker, MobileMenuPanel, MonthPickerContainer, MonthPickerHeader, PassportStrengthBar, SelectMonth, SelectYear, Switch, UndefinedAvatar };
 //# sourceMappingURL=index.es.js.map