kamotive_ui 1.2.20 → 1.2.21

package/dist/components/DateInput/DateInput.js

@@ -11,7 +11,7 @@ import { ChevronRight } from '../../Icons/ChevronRight/ChevronRight';
 import { ChevronLeft } from '../../Icons/ChevronLeft/ChevronLeft';
 import { Button } from '../Button/Button';
 registerLocale('ru', ru);
-const CustomInput = forwardRef(({ value = '', onClick, onDateChange, onClose, className }, ref) => {
+const CustomInput = forwardRef(({ value = '', onClick, onDateChange, onClose, className, disabled = false, readOnly = false }, ref) => {
     const inputRef = useRef(null);
     const [selectedPart, setSelectedPart] = useState(null);
     const [tempInput, setTempInput] = useState('');
@@ -38,7 +38,9 @@ const CustomInput = forwardRef(({ value = '', onClick, onDateChange, onClose, cl
     };
     const updateInputValue = (char, position) => {
         setShouldReselect(true);
-        setInput(input.substring(0, position) + char + input.substring(position + char.length));
+        if (!readOnly) {
+            setInput(input.substring(0, position) + char + input.substring(position + char.length));
+        }
     };
     const handleClick = (e) => {
         e.preventDefault();
@@ -174,7 +176,9 @@ const CustomInput = forwardRef(({ value = '', onClick, onDateChange, onClose, cl
         }
     }, []);
     useEffect(() => {
-        setInput(value);
+        if (!readOnly) {
+            setInput(value);
+        }
     }, [value]);
     useEffect(() => {
         setTempInput('');
@@ -185,9 +189,9 @@ const CustomInput = forwardRef(({ value = '', onClick, onDateChange, onClose, cl
     useImperativeHandle(ref, () => ({
         removeSelection,
     }), [removeSelection]);
-    return (React.createElement("input", { ref: inputRef, value: input, onClick: handleClick, onKeyDown: handleKeyDown, onFocus: handleFocus, onBlur: handleBlur, readOnly: true, className: className }));
+    return (React.createElement("input", { ref: inputRef, value: input, onClick: handleClick, onKeyDown: handleKeyDown, onFocus: handleFocus, onBlur: handleBlur, readOnly: readOnly, disabled: disabled, className: className }));
 });
-export const DateInput = ({ id, label = 'Выберите дату', size = 'lg', value, style, className, disabled = false, readOnly = disabled, isLeftLabel = false, icon, error = false, helperText, onChange, onBlur, required = false, minDate = new Date('1975-12-31'), maxDate = new Date('2074-12-31'), inputClassName, calendarClassName, dateFormat = 'dd.MM.yyyy', }) => {
+export const DateInput = ({ id, label = 'Выберите дату', size = 'lg', value, style, className, disabled = false, readOnly = false, isLeftLabel = false, icon, error = false, helperText, onChange, onBlur, required = false, minDate = new Date('1975-12-31'), maxDate = new Date('2074-12-31'), inputClassName, calendarClassName, dateFormat = 'dd.MM.yyyy', }) => {
     const wrapperClassess = classNames(styles['wrapper--input'], className, {
         [styles['wrapper--left']]: isLeftLabel,
         [styles['wrapper--input-label']]: label && !isLeftLabel && !required,
@@ -322,7 +326,7 @@ export const DateInput = ({ id, label = 'Выберите дату', size = 'lg'
     return (React.createElement("div", { className: wrapperClassess, style: style },
         label && (React.createElement(Typography, { variant: "Caption", className: labelClasses }, label)),
         React.createElement("div", { className: styles.icon, onClick: () => { var _a; return (_a = datePickerRef.current) === null || _a === void 0 ? void 0 : _a.setOpen(true); } }, icon || React.createElement(IconCalendar10, null)),
-        React.createElement(DatePicker, Object.assign({ id: id, ref: datePickerRef, selected: selectedDate, onChange: handleDateChange, onBlur: onBlur, dateFormat: dateFormat, locale: "ru", readOnly: readOnly, showPopperArrow: false, calendarClassName: classNames(styles.calendar, calendarClassName), popperClassName: styles.calendarPopper, onCalendarClose: () => setIsMonthPickerOpen(false), minDate: minDate, maxDate: maxDate, inline: false, calendarStartDay: 1, dayClassName: (date) => {
+        React.createElement(DatePicker, Object.assign({ id: id, ref: datePickerRef, selected: selectedDate, onChange: handleDateChange, onBlur: onBlur, dateFormat: dateFormat, locale: "ru", readOnly: readOnly, disabled: disabled, showPopperArrow: false, calendarClassName: classNames(styles.calendar, calendarClassName), popperClassName: styles.calendarPopper, onCalendarClose: () => setIsMonthPickerOpen(false), minDate: minDate, maxDate: maxDate, inline: false, calendarStartDay: 1, dayClassName: (date) => {
                 return date.getMonth() === (selectedDate === null || selectedDate === void 0 ? void 0 : selectedDate.getMonth()) && date.getFullYear() === (selectedDate === null || selectedDate === void 0 ? void 0 : selectedDate.getFullYear())
                     ? 'current-month-day'
                     : '';
@@ -331,6 +335,6 @@ export const DateInput = ({ id, label = 'Выберите дату', size = 'lg'
             : {
                 renderCustomHeader: renderCustomHeader,
                 renderDayContents: renderDayContents,
-            }), { customInput: React.createElement(CustomInput, { ref: inputRef, className: classNames(inputClassess, inputClassName), onDateChange: handleCustomInputChange, onClose: handleCloseDatePicker }) })),
+            }), { customInput: React.createElement(CustomInput, { ref: inputRef, className: classNames(inputClassess, inputClassName), onDateChange: handleCustomInputChange, onClose: handleCloseDatePicker, disabled: disabled, readOnly: readOnly }) })),
         error && helperText && (React.createElement(Typography, { variant: "Caption", className: classNames(styles.helperText, styles[size]) }, helperText))));
 };

package/dist/components/Tab/Tab.js

@@ -2,15 +2,16 @@ import React from 'react';
 import styles from './Tab.module.css';
 import classNames from 'classnames';
 import { Typography } from '../Typography/Typography';
-export const Tab = ({ value, onClick, onMouseEnter, label, selected, disabled = false }) => {
+export const Tab = ({ value, onClick, onMouseEnter, label, selected, disabled = false, style, className }) => {
     const handleClick = (e) => {
         if (onClick && value && !disabled) {
             onClick(value);
         }
     };
     return (React.createElement("button", { role: "tab", "aria-selected": selected, "aria-disabled": disabled, value: value, className: classNames(styles.tab, {
-            [styles['selected']]: selected,
-            [styles['disabled']]: disabled,
-        }), onClick: handleClick, onMouseEnter: onMouseEnter },
+            [styles.selected]: selected,
+            [styles.disabled]: disabled,
+            [className || '']: className,
+        }), onClick: handleClick, onMouseEnter: onMouseEnter, style: style },
         React.createElement(Typography, { variant: selected ? 'Body1-SemiBold' : 'Body1' }, label)));
 };

package/dist/components/Tab/Tab.module.css

@@ -1,5 +1,7 @@
 .tab {
-  width: 126px;
+  /* width: 126px; */
+  width: 100%;
+  white-space: nowrap;
   height: 24px;
   padding: 3px 10px;
   display: flex;

package/dist/components/Tabs/Tabs.js

@@ -1,7 +1,7 @@
 ;
 import React from 'react';
 import styles from './Tabs.module.css';
-export const Tabs = ({ value, onChange, children }) => {
+export const Tabs = ({ value, onChange, children, style, className }) => {
     var _a;
     const selectedTabContent = (_a = children === null || children === void 0 ? void 0 : children.find((child) => child.props.value === value)) === null || _a === void 0 ? void 0 : _a.props.children;
     const handleTabChange = (newValue) => {
@@ -10,7 +10,7 @@ export const Tabs = ({ value, onChange, children }) => {
         }
     };
     return (React.createElement(React.Fragment, null,
-        React.createElement("div", { role: "tablist", className: styles.tabs }, children === null || children === void 0 ? void 0 : children.map((child, index) => React.cloneElement(child, {
+        React.createElement("div", { role: "tablist", className: styles.tabs + ' ' + (className || ''), style: style }, children === null || children === void 0 ? void 0 : children.map((child, index) => React.cloneElement(child, {
             key: index,
             selected: child.props.value === value,
             disabled: child.props.disabled,

package/dist/components/Tabs/Tabs.module.css

@@ -9,7 +9,9 @@
 }
 
 .tab {
-  width: 126px;
+  /* width: 126px; */
+  width: 100%;
+  white-space: nowrap;
   height: 24px;
   padding: 3px 10px;
   display: flex;

package/dist/types/index.d.ts

@@ -315,6 +315,10 @@ export interface TabProps {
     disabled?: boolean;
     /** Табы */
     children?: React.ReactNode;
+    /** Стили передаваемые напрямую */
+    style?: CSSProperties;
+    /** Дополнительный класс */
+    className?: string;
 }
 export interface TabsProps {
     /** Табы */
@@ -323,6 +327,10 @@ export interface TabsProps {
     value?: string;
     /** Обработчик изменения значения */
     onChange?: (value: string) => void;
+    /** Стили передаваемые напрямую */
+    style?: CSSProperties;
+    /** Дополнительный класс */
+    className?: string;
 }
 export interface ColorPickerProps {
     /** Цвет выбранный пользователем */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kamotive_ui",
-  "version": "1.2.20",
+  "version": "1.2.21",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "files": [