armtek-uikit-react 1.0.96 → 1.0.98

package/package.json

@@ -1 +1 @@
-{"name":"armtek-uikit-react","version":"1.0.96","description":"Armtek UIKit for React","repository":{"type":"git","url":"ssh://git@gl.corp:10022/int/uikit/uikit_react.git"},"author":"","license":"ISC","dependencies":{"build":"^0.1.4","clsx":"^2.0.0","rc-slider":"^10.2.1","react":"*","react-datepicker":"^4.16.0","react-dom":"*","react-transition-group":"^4.4.5"},"peerDependencies":{"react":"*","react-dom":"*"},"scripts":{"pub":"npm version patch && npm publish"}}
+{"name":"armtek-uikit-react","version":"1.0.98","description":"Armtek UIKit for React","repository":{"type":"git","url":"ssh://git@gl.corp:10022/int/uikit/uikit_react.git"},"author":"","license":"ISC","dependencies":{"build":"^0.1.4","clsx":"^2.0.0","rc-slider":"^10.2.1","react":"*","react-datepicker":"^4.16.0","react-dom":"*","react-transition-group":"^4.4.5"},"peerDependencies":{"react":"*","react-dom":"*"},"scripts":{"pub":"npm version patch && npm publish"}}

package/ui/Form/DateField/DateField.d.ts

@@ -3,7 +3,9 @@ import { ChangeEvent } from 'react';
 export type DateFieldProps = {
     format?: string;
     onInput?: (e: ChangeEvent<HTMLInputElement>) => void;
-    onChange?: (value: Date | null) => void;
+    onChange?: (e: ChangeEvent<HTMLInputElement> & {
+        value: Date | null;
+    }) => void;
     value?: Date | string | null;
     showTime?: boolean;
     showTimeOnly?: boolean;
@@ -11,7 +13,9 @@ export type DateFieldProps = {
 export declare const DateField: import("react").ForwardRefExoticComponent<{
     format?: string | undefined;
     onInput?: ((e: ChangeEvent<HTMLInputElement>) => void) | undefined;
-    onChange?: ((value: Date | null) => void) | undefined;
+    onChange?: ((e: ChangeEvent<HTMLInputElement> & {
+        value: Date | null;
+    }) => void) | undefined;
     value?: string | Date | null | undefined;
     showTime?: boolean | undefined;
     showTimeOnly?: boolean | undefined;

package/ui/Form/DateField/DateField.js

@@ -27,7 +27,19 @@ export const DateField = /*#__PURE__*/forwardRef((props, ref) => {
   const handleChange = d => {
     setDate(d);
     setOpen(false);
-    if (onChange) onChange(d);
+    if (onChange) {
+      const e = new Event('input', {
+        bubbles: true
+      });
+      Object.defineProperty(e, 'target', {
+        writable: false,
+        value: {
+          name: props.name,
+          value: d
+        }
+      });
+      onChange(e);
+    }
   };
   const handleClick = e => {
     setOpen(prev => !prev);
@@ -37,11 +49,14 @@ export const DateField = /*#__PURE__*/forwardRef((props, ref) => {
   const btnRef = useRef();
   const inputIcon = showTime && showTimeOnly ? 'schedule' : 'calendar_today';
   let dateValue = typeof realValue === 'string' ? new Date(realValue) : realValue;
+
+  //TODO Подключение Popover ломает тесты, разобраться почему
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(TextField, {
       ref: ref,
       ...restProps,
       value: (dateValue == null ? void 0 : dateValue.toLocaleDateString('ru-RU')) || '',
+      onChange: () => null,
       endAdornment: /*#__PURE__*/_jsx(ButtonIcon, {
         size: 'medium',
         variant: 'transparent',

package/ui/Form/Period/Period.d.ts

@@ -1,7 +1,13 @@
 import { TextFieldProps } from '../TextField/TextField';
+export type PeriodChangeEvent = (Event & {
+    target: {
+        value: [Date | null, Date | null];
+        name: string;
+    };
+});
 declare const Period: import("react").ForwardRefExoticComponent<{
     format?: string | undefined;
-    onChange?: ((value: [Date | null, Date | null]) => void) | undefined;
+    onChange?: ((e: PeriodChangeEvent) => void) | undefined;
     value?: [Date | null, Date | null] | undefined;
 } & Omit<TextFieldProps, "value" | "onChange"> & import("react").RefAttributes<unknown>>;
 export default Period;

package/ui/Form/Period/Period.js

@@ -29,7 +29,19 @@ const Period = /*#__PURE__*/forwardRef((props, ref) => {
   const handleChange = date => {
     setValue(date);
     if (date[0] && date[1]) setActive(false);
-    if (onChange) onChange(date);
+    if (onChange) {
+      const e = new Event('input', {
+        bubbles: true
+      });
+      Object.defineProperty(e, 'target', {
+        writable: false,
+        value: {
+          name: props.name,
+          value: date
+        }
+      });
+      onChange(e);
+    }
   };
   let realValue = Array.isArray(props.value) ? props.value : value;
   let displayValue = '';
@@ -42,6 +54,7 @@ const Period = /*#__PURE__*/forwardRef((props, ref) => {
         placeholder: 'дд.мм.гггг - дд.мм.гггг',
         ...restProps,
         value: displayValue,
+        onChange: () => null,
         onFocus: handleClick,
         endAdornment: /*#__PURE__*/_jsx(ButtonIcon, {
           size: 'medium',

package/ui/Form/Select/Select.d.ts

@@ -1,5 +1,6 @@
 import { OptionType } from '../../../types/theme';
 import { TextFieldProps } from '../TextField/TextField';
+import { MouseEvent } from 'react';
 type SelectBaseProps = {
     options: OptionType[];
     inline?: boolean;
@@ -10,28 +11,27 @@ type SelectBaseProps = {
     onClearAll?: () => void;
     onSubmit?: () => void;
 };
-type SelectSingleProps = {
-    multiple?: false;
-    value?: string;
-    defaultValue?: string;
-    onChange?: (option: string) => void;
+type MultipleType<M extends boolean = false> = {
+    multiple?: M;
+    value?: M extends false ? string : string[];
+    defaultValue?: M extends false ? string : string[];
+    onChange?: (e: SelectChangeEvent<M extends false ? string : string[]>) => void;
 };
-type SelectMultipleProps = {
-    multiple?: true;
-    value?: string[];
-    defaultValue?: string[];
-    onChange?: (option: string[]) => void;
-};
-type SelectPropsType = SelectMultipleProps | SelectSingleProps;
-export type SelectProps = SelectBaseProps & SelectPropsType & Omit<TextFieldProps, 'value' | 'defaultValue' | 'onChange'>;
+export type SelectProps<M extends boolean = false> = SelectBaseProps & MultipleType<M> & Omit<TextFieldProps, keyof SelectBaseProps | keyof MultipleType<M>>;
 export declare const getOptionValue: (option: OptionType) => string;
-declare function Select(props: SelectProps): import("react/jsx-runtime").JSX.Element;
+export type SelectChangeEvent<Value = string> = (Event & {
+    target: {
+        value: Value;
+        name: string;
+    };
+});
+declare function Select<M extends boolean = false>(props: SelectProps<M>): import("react/jsx-runtime").JSX.Element;
 type SelectOptionsType<T extends boolean> = {
     options: OptionType[];
     value?: T extends true ? string[] : string;
     inline?: boolean;
     multiple?: T;
-    onClick: (option: OptionType) => void;
+    onClick: (e: MouseEvent, option: OptionType) => void;
     listStyle?: 'checkbox' | 'default';
     onSelectAll?: () => void;
     onClearAll?: () => void;

package/ui/Form/Select/Select.js

@@ -1,7 +1,7 @@
 "use client";
 
 import TextField from "../TextField/TextField";
-import { forwardRef, useRef, useState } from 'react';
+import { forwardRef, useState } from 'react';
 import clsx from 'clsx';
 import ListItem from "../../List/ListItem";
 import css from "./Select.module.scss";
@@ -17,6 +17,9 @@ const CssClasses = ['select', 'select__input_wrapper', 'select__input', 'options
 // const css = getCssPrefix(CssClasses)
 
 export const getOptionValue = option => option.value || option.text;
+
+// let selectEl!: HTMLSelectElement
+
 function Select(props) {
   var _options$find;
   let {
@@ -40,44 +43,33 @@ function Select(props) {
   let [selected, setSelected] = useState(defaultValue || (multiple ? [] : ''));
   let [focused, setFocused] = useState(false);
   let [q, setQ] = useState('');
-  let selectRef = useRef(null);
   const [anchorEl, setAnchorEl] = useState(null);
-
-  // let selectEl!: HTMLSelectElement
-  //
-  // useEffect(() => {
-  // 	selectEl = document.createElement('select')
-  // 	selectEl.onchange = (e) => {
-  // 		console.log(e)
-  // 	}
-  // 	return () => {
-  // 		selectEl.remove()
-  // 	}
-  // }, [])
-
   const handleOpen = e => {
     if (!inputProps.disabled) {
       setActive(true);
       if (e.target instanceof HTMLDivElement) setAnchorEl(e.currentTarget);
     }
   };
-  const handleSelect = option => {
-    // selectEl.sele = option.value
-    // selectEl?.dispatchEvent(new Event('change', { bubbles: true }))
-
+  const handleSelect = (e, option) => {
     let v = getOptionValue(option);
     let mSelected = Array.isArray(selected) ? selected : [selected];
     let newValueS = v;
     let newValueM = mSelected.includes(v) ? mSelected.filter(item => item !== v) : mSelected.concat(v);
     setSelected(multiple ? newValueM : newValueS);
-    if (onChange) onChange(multiple ? newValueM : newValueS);
+    if (onChange) {
+      Object.defineProperty(e, 'target', {
+        writable: false,
+        value: {
+          name: props.name,
+          value: multiple ? newValueM : newValueS
+        }
+      });
+      onChange(e);
+    }
     if (search && !multiple) {
       setQ(options.find(item => getOptionValue(item) === newValueS).text);
     }
     if (!multiple) setActive(false);
-
-    // if(selectRef.current)
-    // 	selectRef.current.dispatchEvent(new Event('change', { bubbles: true }))
   };
   const handleSearch = e => {
     setQ(e.target.value);
@@ -88,18 +80,6 @@ function Select(props) {
   const handleBlur = !!search ? () => {
     setFocused(false);
   } : undefined;
-
-  // const handleChange = (e: ChangeEvent<HTMLSelectElement>) => {
-  // let option = options.find(item => getOptionValue(item) === e.target.value)
-  // if( option )
-  // {
-  // 	let v = getOptionValue(option)
-  // 	setSelected(!multiple ? v : prev => prev?.concat(v) || [v])
-  // 	if( !multiple )
-  // 		setActive(false)
-  // }
-  // }
-
   let selectEndAdornment = /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(Adornment, {
       children: endAdornment
@@ -113,13 +93,6 @@ function Select(props) {
       })
     })]
   });
-  let selectProps = {};
-  // if( value !== undefined )
-  // {
-  // 	selectProps.value = value
-  // 	selectProps.onChange = handleChange
-  // }
-
   const handleSelectAll = () => {
     let value = options.map(item => getOptionValue(item));
     setSelected(value);
@@ -143,20 +116,10 @@ function Select(props) {
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsxs("div", {
       className: css.select,
-      children: [/*#__PURE__*/_jsxs("div", {
+      children: [/*#__PURE__*/_jsx("div", {
         className: css.select__input_wrapper,
         onClick: handleOpen,
-        children: [/*#__PURE__*/_jsx("select", {
-          multiple: multiple,
-          ref: selectRef,
-          ...selectProps,
-          style: {
-            display: 'none'
-          },
-          children: options.map(item => /*#__PURE__*/_jsx("option", {
-            children: item.text
-          }, item.text))
-        }), /*#__PURE__*/_jsx(TextField, {
+        children: /*#__PURE__*/_jsx(TextField, {
           ...inputProps,
           onChange: handleSearch,
           focused: focused,
@@ -169,13 +132,14 @@ function Select(props) {
             pointerEvents: 'none'
           },
           editable: !!search
-        })]
+        })
       }), multiple && !realActive && /*#__PURE__*/_jsx(SelectSummaryChips, {
         options: selectedOptions,
         disabled: inputProps.disabled,
         onDelete: handleSelect
       })]
     }), anchorEl && /*#__PURE__*/_jsx(Popover, {
+      matchWidth: true,
       anchorEl: anchorEl,
       open: realActive,
       onClose: () => setActive(false),
@@ -220,7 +184,7 @@ const SelectOptions = /*#__PURE__*/forwardRef((props, ref) => {
           disabled: disabled,
           checked: checked,
           active: active,
-          onClick: () => onClick(item),
+          onClick: e => onClick(e, item),
           children: item.text
         }, index);
       }), listStyle === 'checkbox' && !!multiple && /*#__PURE__*/_jsx("div", {

package/ui/Form/Select/SelectSummary.d.ts

@@ -1,9 +1,10 @@
+import { MouseEvent } from 'react';
 import { OptionType } from '../../../types/theme';
 export type SelectSummaryProps = {
     label_check_all?: string;
     label_uncheck_all?: string;
     label_submit?: string;
-    onClose: (option: OptionType) => void;
+    onClose: (e: MouseEvent, option: OptionType) => void;
     onSelectAll?: () => void;
     onClearAll?: () => void;
     onSubmit?: () => void;
@@ -15,7 +16,7 @@ export declare const SelectSummary: (props: SelectSummaryProps) => import("react
 type SelectSummaryChipsProps = {
     options: OptionType[];
     disabled?: boolean;
-    onDelete: (option: OptionType) => void;
+    onDelete: (e: MouseEvent, option: OptionType) => void;
 };
 export declare const SelectSummaryChips: (props: SelectSummaryChipsProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/ui/Form/Select/SelectSummary.js

@@ -96,7 +96,7 @@ export const SelectSummaryChips = props => {
           disabled: disabled,
           className: css.selectSummary__option,
           text: option.text,
-          onClose: () => onDelete(option)
+          onClose: e => onDelete(e, option)
         }, getOptionValue(option));
       })
     })

package/ui/Icon/Mi.js

@@ -13,12 +13,12 @@ export const Mi = props => {
       ...tooltipProps,
       text: title,
       children: /*#__PURE__*/_jsx(Icon, {
-        ...iconProps,
-        variant: 'outlined'
+        variant: 'outlined',
+        ...iconProps
       })
     }) : /*#__PURE__*/_jsx(Icon, {
-      ...iconProps,
-      variant: 'outlined'
+      variant: 'outlined',
+      ...iconProps
     })
   });
 };

package/ui/Popover/Popover.js

@@ -5,7 +5,7 @@ import { Fragment as _Fragment } from "react/jsx-runtime";
 export const Popover = props => {
   const {
     onClose,
-    matchWidth = true,
+    matchWidth = false,
     children,
     ...poperProps
   } = props;

package/ui/Popover/index.d.ts

@@ -1 +1,2 @@
 export { default } from './Popover';
+export * from './Popover';

package/ui/Popover/index.js

@@ -1 +1,2 @@
-export { default } from "./Popover";
+export { default } from "./Popover";
+export * from "./Popover";