@astral/ui 1.27.1 → 1.28.2

package/ButtonBase/styles.js

@@ -209,7 +209,7 @@ const getButtonPaddingMobile = ({ size, theme, variant, }) => {
 exports.getButtonPaddingMobile = getButtonPaddingMobile;
 const getButtonHeightMobile = ({ size, }) => {
     if (size === enums_1.ButtonSizes.Small) {
-        return '32px';
+        return '36px';
     }
     return '48px';
 };

package/DatePicker/DatePicker.d.ts

@@ -11,6 +11,7 @@ export declare type DatePickerProps = MondayFirst & Partial<MinMaxDate> & {
     onClose?: () => void;
     inputProps?: Omit<TextFieldProps, 'ref' | 'value' | 'onChange'>;
     disabled?: boolean;
+    value?: Date;
 };
 export declare const DatePicker: import("react").ForwardRefExoticComponent<MondayFirst & Partial<MinMaxDate> & {
     mask?: string | undefined;
@@ -20,4 +21,5 @@ export declare const DatePicker: import("react").ForwardRefExoticComponent<Monda
     onClose?: (() => void) | undefined;
     inputProps?: Omit<TextFieldProps, "ref" | "value" | "onChange"> | undefined;
     disabled?: boolean | undefined;
+    value?: Date | undefined;
 } & import("react").RefAttributes<HTMLInputElement>>;

package/DatePicker/DatePicker.js

@@ -24,20 +24,21 @@ const MinMaxDateContext_1 = require("./MinMaxDateContext");
 const YearMonthDayPicker_1 = require("./YearMonthDayPicker");
 const useBaseDateInRange_1 = require("./hooks/useBaseDateInRange");
 const useSelectedBaseDate_1 = require("./hooks/useSelectedBaseDate");
-const DatePickerInner = (0, react_1.forwardRef)(({ onChange, onOpen, onBlur, onClose, mask = 'DD.MM.YYYY', isMondayFirst, inputProps, disabled, }, forwardedRef) => {
+const DatePickerInner = (0, react_1.forwardRef)(({ onChange, onOpen, onBlur, onClose, mask = 'DD.MM.YYYY', isMondayFirst, inputProps, disabled, value: parentValue, }, forwardedRef) => {
     const { maxDate, minDate } = (0, react_1.useContext)(MinMaxDateContext_1.MinMaxDateContext);
     const ref = (0, useForwardedRef_1.useForwardedRef)(forwardedRef);
     const [isActive, openPopper, closePopper] = (0, useToggle_1.useToggle)({
         onActive: onOpen,
         onInactive: onClose,
     });
-    const [selectedDate, setSelectedDate] = (0, react_1.useState)();
+    const [selectedDate, setSelectedDate] = (0, react_1.useState)(parentValue);
     const [maskedDate, setMaskedDate] = (0, react_1.useState)('');
     const baseDate = (0, useBaseDateInRange_1.useBaseDateInRange)({ minDate, maxDate });
     const selectedBaseDate = (0, useSelectedBaseDate_1.useSelectedBaseDate)(selectedDate);
     const checkValue = (0, react_1.useCallback)((value) => {
-        setMaskedDate(value);
-        const date = (0, date_1.parseDate)(value, mask);
+        const isString = typeof value === 'string';
+        setMaskedDate(isString ? value : (0, date_1.formatDate)(value, mask));
+        const date = isString ? (0, date_1.parseDate)(value, mask) : value;
         if (value === '' || !(0, date_1.isDate)(date)) {
             setSelectedDate(null);
         }
@@ -51,6 +52,7 @@ const DatePickerInner = (0, react_1.forwardRef)(({ onChange, onOpen, onBlur, onC
         closePopper();
     };
     (0, react_1.useEffect)(() => onChange === null || onChange === void 0 ? void 0 : onChange(selectedDate || maskedDate), [selectedDate, maskedDate]);
+    (0, react_1.useEffect)(() => checkValue(parentValue || ''), [parentValue]);
     const blurHandler = (e) => {
         checkValue(e.target.value);
         onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);

package/Select/Select.d.ts

@@ -1,3 +1,12 @@
 /// <reference types="react" />
-import { SelectProps } from './types';
-export declare const Select: ({ multiple, loading, placeholder, getOptionLabel, helperText, success, children, label, error, ...props }: SelectProps) => JSX.Element;
+import { SelectProps as MuiSelectProps } from '@mui/material';
+export declare type SelectProps<Value> = MuiSelectProps<Value> & {
+    loading?: boolean;
+    placeholder?: string;
+    getOptionLabel?: (value: string | number) => string | number;
+    helperText?: string;
+    success?: boolean;
+    error?: boolean;
+    label: string;
+};
+export declare const Select: <Value>({ getOptionLabel, placeholder, helperText, loading, success, children, error, label, ...props }: SelectProps<Value>) => JSX.Element;

package/Select/Select.js

@@ -16,19 +16,19 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Select = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
 const react_1 = __importDefault(require("react"));
 const icons_1 = require("@astral/icons");
-const TextField_1 = require("../TextField");
 const Tag_1 = require("../Tag");
+const FormHelperText_1 = require("../FormHelperText");
 const CircularProgress_1 = require("../CircularProgress");
 const MenuItem_1 = require("../MenuItem");
-const styled_1 = require("./styled");
+const styles_1 = require("./styles");
 const Select = (_a) => {
-    var { multiple, loading, placeholder, getOptionLabel = (value) => value, helperText, success, children, label, error } = _a, props = __rest(_a, ["multiple", "loading", "placeholder", "getOptionLabel", "helperText", "success", "children", "label", "error"]);
-    // unknown, т.к. ts ругается на несоответствие типов. По-умолчанию в selectedOptions string или string[].
+    var { getOptionLabel = (value) => value, placeholder, helperText, loading, success, children, error, label } = _a, props = __rest(_a, ["getOptionLabel", "placeholder", "helperText", "loading", "success", "children", "error", "label"]);
     const renderValue = (selectedOptions) => {
         if (Array.isArray(selectedOptions) && selectedOptions.length) {
-            return ((0, jsx_runtime_1.jsx)(styled_1.TagsWrapper, { children: selectedOptions.map((option) => {
+            return ((0, jsx_runtime_1.jsx)(styles_1.SelectTagsWrapper, { children: selectedOptions.map((option) => {
                     const optionLabel = getOptionLabel(option);
                     return (0, jsx_runtime_1.jsx)(Tag_1.Tag, { color: "grey", label: optionLabel }, option);
                 }) }));
@@ -40,7 +40,6 @@ const Select = (_a) => {
         return getOptionLabel(selectedOptions);
     };
     const isNoData = !Boolean(react_1.default.Children.count(children));
-    return ((0, jsx_runtime_1.jsxs)(TextField_1.TextField, Object.assign({ select: true, label: label, helperText: helperText, error: error, success: success, SelectProps: Object.assign(Object.assign({}, props), { multiple,
-            renderValue, displayEmpty: true, IconComponent: icons_1.ChevronDOutlineMd }) }, { children: [(0, jsx_runtime_1.jsx)(styled_1.Placeholder, Object.assign({ value: "" }, { children: "placeholder" })), loading && ((0, jsx_runtime_1.jsx)(styled_1.ProgressWrapper, { children: (0, jsx_runtime_1.jsx)(CircularProgress_1.CircularProgress, { color: "primary" }) })), !loading && children, !loading && isNoData && (0, jsx_runtime_1.jsx)(MenuItem_1.MenuItem, Object.assign({ disabled: true }, { children: "\u041D\u0435\u0442 \u0434\u0430\u043D\u043D\u044B\u0445" }))] })));
+    return ((0, jsx_runtime_1.jsxs)(material_1.FormControl, Object.assign({ error: error }, { children: [(0, jsx_runtime_1.jsx)(material_1.InputLabel, Object.assign({ htmlFor: "grouped-select" }, { children: label })), (0, jsx_runtime_1.jsxs)(material_1.Select, Object.assign({}, props, { label: label, renderValue: renderValue, IconComponent: icons_1.ChevronDOutlineMd, displayEmpty: true }, { children: [(0, jsx_runtime_1.jsx)(styles_1.SelectPlaceholder, Object.assign({ value: "" }, { children: placeholder })), loading && ((0, jsx_runtime_1.jsx)(styles_1.SelectProgressWrapper, { children: (0, jsx_runtime_1.jsx)(CircularProgress_1.CircularProgress, { color: "primary" }) })), !loading && children, !loading && isNoData && (0, jsx_runtime_1.jsx)(MenuItem_1.MenuItem, Object.assign({ disabled: true }, { children: "\u041D\u0435\u0442 \u0434\u0430\u043D\u043D\u044B\u0445" }))] })), (0, jsx_runtime_1.jsx)(FormHelperText_1.FormHelperText, Object.assign({ error: error, success: success }, { children: helperText }))] })));
 };
 exports.Select = Select;

package/Select/index.d.ts

@@ -1,2 +1 @@
 export * from './Select';
-export * from './types';

package/Select/index.js

@@ -15,4 +15,3 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./Select"), exports);
-__exportStar(require("./types"), exports);

package/Select/{styled.d.ts → styles.d.ts}

@@ -1,13 +1,13 @@
 /// <reference types="react" />
-export declare const TagsWrapper: import("@emotion/styled").StyledComponent<{
+export declare const SelectTagsWrapper: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const ProgressWrapper: import("@emotion/styled").StyledComponent<{
+export declare const SelectProgressWrapper: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const Placeholder: import("@emotion/styled").StyledComponent<{
+export declare const SelectPlaceholder: import("@emotion/styled").StyledComponent<{
     autoFocus?: boolean | undefined;
     classes?: Partial<import("@mui/material").MenuItemClasses> | undefined;
     dense?: boolean | undefined;

package/Select/{styled.js → styles.js}

@@ -1,9 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Placeholder = exports.ProgressWrapper = exports.TagsWrapper = void 0;
+exports.SelectPlaceholder = exports.SelectProgressWrapper = exports.SelectTagsWrapper = void 0;
 const styles_1 = require("../styles");
 const MenuItem_1 = require("../MenuItem");
-exports.TagsWrapper = styles_1.styled.div `
+exports.SelectTagsWrapper = styles_1.styled.div `
   display: flex;
   flex-wrap: wrap;
   margin-bottom: -${({ theme }) => theme.spacing(1)};
@@ -22,7 +22,7 @@ exports.TagsWrapper = styles_1.styled.div `
     margin-right: ${({ theme }) => theme.spacing(1)};
   }
 `;
-exports.ProgressWrapper = styles_1.styled.div `
+exports.SelectProgressWrapper = styles_1.styled.div `
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -34,6 +34,6 @@ exports.ProgressWrapper = styles_1.styled.div `
     color: ${({ theme }) => theme.palette.grey['900']};
   }
 `;
-exports.Placeholder = (0, styles_1.styled)(MenuItem_1.MenuItem) `
+exports.SelectPlaceholder = (0, styles_1.styled)(MenuItem_1.MenuItem) `
   display: none;
 `;

package/esm/ButtonBase/styles.js

@@ -177,7 +177,7 @@ export const getButtonPaddingMobile = ({ size, theme, variant, }) => {
 };
 export const getButtonHeightMobile = ({ size, }) => {
     if (size === ButtonSizes.Small) {
-        return '32px';
+        return '36px';
     }
     return '48px';
 };

package/esm/DatePicker/DatePicker.d.ts

@@ -11,6 +11,7 @@ export declare type DatePickerProps = MondayFirst & Partial<MinMaxDate> & {
     onClose?: () => void;
     inputProps?: Omit<TextFieldProps, 'ref' | 'value' | 'onChange'>;
     disabled?: boolean;
+    value?: Date;
 };
 export declare const DatePicker: import("react").ForwardRefExoticComponent<MondayFirst & Partial<MinMaxDate> & {
     mask?: string | undefined;
@@ -20,4 +21,5 @@ export declare const DatePicker: import("react").ForwardRefExoticComponent<Monda
     onClose?: (() => void) | undefined;
     inputProps?: Omit<TextFieldProps, "ref" | "value" | "onChange"> | undefined;
     disabled?: boolean | undefined;
+    value?: Date | undefined;
 } & import("react").RefAttributes<HTMLInputElement>>;

package/esm/DatePicker/DatePicker.js

@@ -21,20 +21,21 @@ import { MinMaxDateContext, MinMaxDateContextProvider, } from './MinMaxDateConte
 import { YearMonthDayPicker } from './YearMonthDayPicker';
 import { useBaseDateInRange } from './hooks/useBaseDateInRange';
 import { useSelectedBaseDate } from './hooks/useSelectedBaseDate';
-const DatePickerInner = forwardRef(({ onChange, onOpen, onBlur, onClose, mask = 'DD.MM.YYYY', isMondayFirst, inputProps, disabled, }, forwardedRef) => {
+const DatePickerInner = forwardRef(({ onChange, onOpen, onBlur, onClose, mask = 'DD.MM.YYYY', isMondayFirst, inputProps, disabled, value: parentValue, }, forwardedRef) => {
     const { maxDate, minDate } = useContext(MinMaxDateContext);
     const ref = useForwardedRef(forwardedRef);
     const [isActive, openPopper, closePopper] = useToggle({
         onActive: onOpen,
         onInactive: onClose,
     });
-    const [selectedDate, setSelectedDate] = useState();
+    const [selectedDate, setSelectedDate] = useState(parentValue);
     const [maskedDate, setMaskedDate] = useState('');
     const baseDate = useBaseDateInRange({ minDate, maxDate });
     const selectedBaseDate = useSelectedBaseDate(selectedDate);
     const checkValue = useCallback((value) => {
-        setMaskedDate(value);
-        const date = parseDate(value, mask);
+        const isString = typeof value === 'string';
+        setMaskedDate(isString ? value : formatDate(value, mask));
+        const date = isString ? parseDate(value, mask) : value;
         if (value === '' || !isDate(date)) {
             setSelectedDate(null);
         }
@@ -48,6 +49,7 @@ const DatePickerInner = forwardRef(({ onChange, onOpen, onBlur, onClose, mask =
         closePopper();
     };
     useEffect(() => onChange === null || onChange === void 0 ? void 0 : onChange(selectedDate || maskedDate), [selectedDate, maskedDate]);
+    useEffect(() => checkValue(parentValue || ''), [parentValue]);
     const blurHandler = (e) => {
         checkValue(e.target.value);
         onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);

package/esm/Select/Select.d.ts

@@ -1,3 +1,12 @@
 /// <reference types="react" />
-import { SelectProps } from './types';
-export declare const Select: ({ multiple, loading, placeholder, getOptionLabel, helperText, success, children, label, error, ...props }: SelectProps) => JSX.Element;
+import { SelectProps as MuiSelectProps } from '@mui/material';
+export declare type SelectProps<Value> = MuiSelectProps<Value> & {
+    loading?: boolean;
+    placeholder?: string;
+    getOptionLabel?: (value: string | number) => string | number;
+    helperText?: string;
+    success?: boolean;
+    error?: boolean;
+    label: string;
+};
+export declare const Select: <Value>({ getOptionLabel, placeholder, helperText, loading, success, children, error, label, ...props }: SelectProps<Value>) => JSX.Element;

package/esm/Select/Select.js

@@ -10,19 +10,19 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FormControl, InputLabel, Select as MuiSelect, } from '@mui/material';
 import React from 'react';
 import { ChevronDOutlineMd } from '@astral/icons';
-import { TextField } from '../TextField';
 import { Tag } from '../Tag';
+import { FormHelperText } from '../FormHelperText';
 import { CircularProgress } from '../CircularProgress';
 import { MenuItem } from '../MenuItem';
-import { Placeholder, ProgressWrapper, TagsWrapper } from './styled';
+import { SelectPlaceholder, SelectProgressWrapper, SelectTagsWrapper, } from './styles';
 export const Select = (_a) => {
-    var { multiple, loading, placeholder, getOptionLabel = (value) => value, helperText, success, children, label, error } = _a, props = __rest(_a, ["multiple", "loading", "placeholder", "getOptionLabel", "helperText", "success", "children", "label", "error"]);
-    // unknown, т.к. ts ругается на несоответствие типов. По-умолчанию в selectedOptions string или string[].
+    var { getOptionLabel = (value) => value, placeholder, helperText, loading, success, children, error, label } = _a, props = __rest(_a, ["getOptionLabel", "placeholder", "helperText", "loading", "success", "children", "error", "label"]);
     const renderValue = (selectedOptions) => {
         if (Array.isArray(selectedOptions) && selectedOptions.length) {
-            return (_jsx(TagsWrapper, { children: selectedOptions.map((option) => {
+            return (_jsx(SelectTagsWrapper, { children: selectedOptions.map((option) => {
                     const optionLabel = getOptionLabel(option);
                     return _jsx(Tag, { color: "grey", label: optionLabel }, option);
                 }) }));
@@ -34,6 +34,5 @@ export const Select = (_a) => {
         return getOptionLabel(selectedOptions);
     };
     const isNoData = !Boolean(React.Children.count(children));
-    return (_jsxs(TextField, Object.assign({ select: true, label: label, helperText: helperText, error: error, success: success, SelectProps: Object.assign(Object.assign({}, props), { multiple,
-            renderValue, displayEmpty: true, IconComponent: ChevronDOutlineMd }) }, { children: [_jsx(Placeholder, Object.assign({ value: "" }, { children: "placeholder" })), loading && (_jsx(ProgressWrapper, { children: _jsx(CircularProgress, { color: "primary" }) })), !loading && children, !loading && isNoData && _jsx(MenuItem, Object.assign({ disabled: true }, { children: "\u041D\u0435\u0442 \u0434\u0430\u043D\u043D\u044B\u0445" }))] })));
+    return (_jsxs(FormControl, Object.assign({ error: error }, { children: [_jsx(InputLabel, Object.assign({ htmlFor: "grouped-select" }, { children: label })), _jsxs(MuiSelect, Object.assign({}, props, { label: label, renderValue: renderValue, IconComponent: ChevronDOutlineMd, displayEmpty: true }, { children: [_jsx(SelectPlaceholder, Object.assign({ value: "" }, { children: placeholder })), loading && (_jsx(SelectProgressWrapper, { children: _jsx(CircularProgress, { color: "primary" }) })), !loading && children, !loading && isNoData && _jsx(MenuItem, Object.assign({ disabled: true }, { children: "\u041D\u0435\u0442 \u0434\u0430\u043D\u043D\u044B\u0445" }))] })), _jsx(FormHelperText, Object.assign({ error: error, success: success }, { children: helperText }))] })));
 };

package/esm/Select/index.d.ts

@@ -1,2 +1 @@
 export * from './Select';
-export * from './types';

package/esm/Select/index.js

@@ -1,2 +1 @@
 export * from './Select';
-export * from './types';

package/esm/Select/{styled.d.ts → styles.d.ts}

@@ -1,13 +1,13 @@
 /// <reference types="react" />
-export declare const TagsWrapper: import("@emotion/styled").StyledComponent<{
+export declare const SelectTagsWrapper: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const ProgressWrapper: import("@emotion/styled").StyledComponent<{
+export declare const SelectProgressWrapper: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const Placeholder: import("@emotion/styled").StyledComponent<{
+export declare const SelectPlaceholder: import("@emotion/styled").StyledComponent<{
     autoFocus?: boolean | undefined;
     classes?: Partial<import("@mui/material").MenuItemClasses> | undefined;
     dense?: boolean | undefined;

package/esm/Select/{styled.js → styles.js}

@@ -1,6 +1,6 @@
 import { styled } from '../styles';
 import { MenuItem } from '../MenuItem';
-export const TagsWrapper = styled.div `
+export const SelectTagsWrapper = styled.div `
   display: flex;
   flex-wrap: wrap;
   margin-bottom: -${({ theme }) => theme.spacing(1)};
@@ -19,7 +19,7 @@ export const TagsWrapper = styled.div `
     margin-right: ${({ theme }) => theme.spacing(1)};
   }
 `;
-export const ProgressWrapper = styled.div `
+export const SelectProgressWrapper = styled.div `
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -31,6 +31,6 @@ export const ProgressWrapper = styled.div `
     color: ${({ theme }) => theme.palette.grey['900']};
   }
 `;
-export const Placeholder = styled(MenuItem) `
+export const SelectPlaceholder = styled(MenuItem) `
   display: none;
 `;

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@astral/ui",
-  "version": "1.27.1",
+  "version": "1.28.2",
   "browser": "./esm/index.js",
   "main": "./index.js",
   "dependencies": {
-    "@astral/icons": "^1.27.1",
+    "@astral/icons": "^1.28.2",
     "@emotion/cache": "11.7.1",
     "@emotion/react": "11.9.0",
     "@emotion/server": "11.4.0",

package/Select/types.d.ts

@@ -1,7 +0,0 @@
-import { SelectProps as MuiSelectProps } from '@mui/material';
-import { TextFieldProps } from '../TextField';
-export declare type SelectProps = MuiSelectProps & Pick<TextFieldProps, 'error' | 'success' | 'SelectProps' | 'helperText' | 'label'> & {
-    loading?: boolean;
-    placeholder?: string;
-    getOptionLabel?: (value: string | number) => string | number;
-};

package/Select/types.js

@@ -1,2 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });

package/esm/Select/types.d.ts

@@ -1,7 +0,0 @@
-import { SelectProps as MuiSelectProps } from '@mui/material';
-import { TextFieldProps } from '../TextField';
-export declare type SelectProps = MuiSelectProps & Pick<TextFieldProps, 'error' | 'success' | 'SelectProps' | 'helperText' | 'label'> & {
-    loading?: boolean;
-    placeholder?: string;
-    getOptionLabel?: (value: string | number) => string | number;
-};

package/esm/Select/types.js

@@ -1 +0,0 @@
-export {};