@astral/ui 0.6.2 → 0.7.1-test.10

package/Select/Select.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { SelectProps } from './types';
+export declare const Select: ({ multiple, loading, placeholder, helperText, success, children, label, error, ...props }: SelectProps) => JSX.Element;

package/Select/Select.js

@@ -0,0 +1,53 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Select = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = __importDefault(require("react"));
+var icons_1 = require("@astral/icons");
+var TextField_1 = require("../TextField");
+var Tag_1 = require("../Tag");
+var CircularProgress_1 = require("../CircularProgress");
+var MenuItem_1 = require("../MenuItem");
+var styled_1 = require("./styled");
+var Select = function (_a) {
+    var multiple = _a.multiple, loading = _a.loading, placeholder = _a.placeholder, helperText = _a.helperText, success = _a.success, children = _a.children, label = _a.label, error = _a.error, props = __rest(_a, ["multiple", "loading", "placeholder", "helperText", "success", "children", "label", "error"]);
+    // unknown, т.к. ts ругается на несоответствие типов. По-умолчанию в selectedOptions string или string[].
+    var renderValue = function (selectedOptions) {
+        if (Array.isArray(selectedOptions) && selectedOptions.length) {
+            return ((0, jsx_runtime_1.jsx)(styled_1.TagsWrapper, { children: selectedOptions.map(function (option) { return ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { color: "grey", label: option }, option)); }) }, void 0));
+        }
+        if ((Array.isArray(selectedOptions) || typeof selectedOptions === 'string') &&
+            !selectedOptions.length) {
+            return placeholder;
+        }
+        return selectedOptions;
+    };
+    var isNoData = !Boolean(react_1.default.Children.count(children));
+    return ((0, jsx_runtime_1.jsxs)(TextField_1.TextField, __assign({ select: true, label: label, helperText: helperText, error: error, success: success, SelectProps: __assign(__assign({}, props), { multiple: multiple, renderValue: renderValue, displayEmpty: true, IconComponent: icons_1.ChevronDOutlineMd }) }, { children: [(0, jsx_runtime_1.jsx)(styled_1.Placeholder, __assign({ value: "" }, { children: "placeholder" }), void 0), loading && ((0, jsx_runtime_1.jsx)(styled_1.ProgressWrapper, { children: (0, jsx_runtime_1.jsx)(CircularProgress_1.CircularProgress, { color: "primary" }, void 0) }, void 0)), !loading && children, !loading && isNoData && (0, jsx_runtime_1.jsx)(MenuItem_1.MenuItem, __assign({ disabled: true }, { children: "\u041D\u0435\u0442 \u0434\u0430\u043D\u043D\u044B\u0445" }), void 0)] }), void 0));
+};
+exports.Select = Select;

package/Select/index.d.ts

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

package/Select/index.js

@@ -0,0 +1,14 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Select"), exports);
+__exportStar(require("./types"), exports);

package/Select/styled.d.ts

@@ -0,0 +1,39 @@
+/// <reference types="react" />
+export declare const TagsWrapper: 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<{
+    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<{
+    autoFocus?: boolean | undefined;
+    classes?: Partial<import("@mui/material").MenuItemClasses> | undefined;
+    dense?: boolean | undefined;
+    disabled?: boolean | undefined;
+    disableGutters?: boolean | undefined;
+    divider?: boolean | undefined;
+    selected?: boolean | undefined;
+    sx?: import("@mui/system").SxProps<import("@mui/material").Theme> | undefined;
+} & Omit<{
+    action?: import("react").Ref<import("@mui/material").ButtonBaseActions> | undefined;
+    centerRipple?: boolean | undefined;
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").ButtonBaseClasses> | undefined;
+    disabled?: boolean | undefined;
+    disableRipple?: boolean | undefined;
+    disableTouchRipple?: boolean | undefined;
+    focusRipple?: boolean | undefined;
+    focusVisibleClassName?: string | undefined;
+    LinkComponent?: import("react").ElementType<any> | undefined;
+    onFocusVisible?: import("react").FocusEventHandler<any> | undefined;
+    sx?: import("@mui/system").SxProps<import("@mui/material").Theme> | undefined;
+    tabIndex?: number | undefined;
+    TouchRippleProps?: Partial<import("@mui/material/ButtonBase/TouchRipple").TouchRippleProps> | undefined;
+    touchRippleRef?: import("react").Ref<import("@mui/material/ButtonBase/TouchRipple").TouchRippleActions> | undefined;
+}, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "key" | keyof import("react").LiHTMLAttributes<HTMLLIElement>> & {
+    ref?: ((instance: HTMLLIElement | null) => void) | import("react").RefObject<HTMLLIElement> | null | undefined;
+}, "disabled" | "divider" | "action" | keyof import("@mui/material/OverridableComponent").CommonProps | "tabIndex" | "children" | "sx" | "autoFocus" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "dense" | "selected" | "disableGutters"> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;

package/Select/styled.js

@@ -0,0 +1,34 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Placeholder = exports.ProgressWrapper = exports.TagsWrapper = void 0;
+var styles_1 = require("../styles");
+var MenuItem_1 = require("../MenuItem");
+exports.TagsWrapper = styles_1.styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-wrap: wrap;\n  margin-bottom: -", ";\n\n  .MuiChip-root {\n    margin-bottom: ", ";\n    background-color: ", ";\n  }\n\n  .MuiChip-root:hover {\n    background-color: ", ";\n  }\n\n  .MuiChip-root:not(:last-of-type) {\n    margin-right: ", ";\n  }\n"], ["\n  display: flex;\n  flex-wrap: wrap;\n  margin-bottom: -", ";\n\n  .MuiChip-root {\n    margin-bottom: ", ";\n    background-color: ", ";\n  }\n\n  .MuiChip-root:hover {\n    background-color: ", ";\n  }\n\n  .MuiChip-root:not(:last-of-type) {\n    margin-right: ", ";\n  }\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing(1);
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing(1);
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.palette.grey['300'];
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.palette.grey['300'];
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing(1);
+});
+exports.ProgressWrapper = styles_1.styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  min-height: 64px;\n  align-items: center;\n\n  .MuiCircularProgress-root {\n    margin-top: ", ";\n    color: ", ";\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n  min-height: 64px;\n  align-items: center;\n\n  .MuiCircularProgress-root {\n    margin-top: ", ";\n    color: ", ";\n  }\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing(5);
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.palette.grey['900'];
+});
+exports.Placeholder = (0, styles_1.styled)(MenuItem_1.MenuItem)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: none;\n"], ["\n  display: none;\n"])));
+var templateObject_1, templateObject_2, templateObject_3;

package/Select/types.d.ts

@@ -0,0 +1,6 @@
+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;
+};

package/Select/types.js

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

package/esm/Select/Select.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { SelectProps } from './types';
+export declare const Select: ({ multiple, loading, placeholder, helperText, success, children, label, error, ...props }: SelectProps) => JSX.Element;

package/esm/Select/Select.js

@@ -0,0 +1,46 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { ChevronDOutlineMd } from '@astral/icons';
+import { TextField } from '../TextField';
+import { Tag } from '../Tag';
+import { CircularProgress } from '../CircularProgress';
+import { MenuItem } from '../MenuItem';
+import { Placeholder, ProgressWrapper, TagsWrapper } from './styled';
+export var Select = function (_a) {
+    var multiple = _a.multiple, loading = _a.loading, placeholder = _a.placeholder, helperText = _a.helperText, success = _a.success, children = _a.children, label = _a.label, error = _a.error, props = __rest(_a, ["multiple", "loading", "placeholder", "helperText", "success", "children", "label", "error"]);
+    // unknown, т.к. ts ругается на несоответствие типов. По-умолчанию в selectedOptions string или string[].
+    var renderValue = function (selectedOptions) {
+        if (Array.isArray(selectedOptions) && selectedOptions.length) {
+            return (_jsx(TagsWrapper, { children: selectedOptions.map(function (option) { return (_jsx(Tag, { color: "grey", label: option }, option)); }) }, void 0));
+        }
+        if ((Array.isArray(selectedOptions) || typeof selectedOptions === 'string') &&
+            !selectedOptions.length) {
+            return placeholder;
+        }
+        return selectedOptions;
+    };
+    var isNoData = !Boolean(React.Children.count(children));
+    return (_jsxs(TextField, __assign({ select: true, label: label, helperText: helperText, error: error, success: success, SelectProps: __assign(__assign({}, props), { multiple: multiple, renderValue: renderValue, displayEmpty: true, IconComponent: ChevronDOutlineMd }) }, { children: [_jsx(Placeholder, __assign({ value: "" }, { children: "placeholder" }), void 0), loading && (_jsx(ProgressWrapper, { children: _jsx(CircularProgress, { color: "primary" }, void 0) }, void 0)), !loading && children, !loading && isNoData && _jsx(MenuItem, __assign({ disabled: true }, { children: "\u041D\u0435\u0442 \u0434\u0430\u043D\u043D\u044B\u0445" }), void 0)] }), void 0));
+};

package/esm/Select/index.d.ts

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

package/esm/Select/index.js

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

package/esm/Select/styled.d.ts

@@ -0,0 +1,39 @@
+/// <reference types="react" />
+export declare const TagsWrapper: 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<{
+    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<{
+    autoFocus?: boolean | undefined;
+    classes?: Partial<import("@mui/material").MenuItemClasses> | undefined;
+    dense?: boolean | undefined;
+    disabled?: boolean | undefined;
+    disableGutters?: boolean | undefined;
+    divider?: boolean | undefined;
+    selected?: boolean | undefined;
+    sx?: import("@mui/system").SxProps<import("@mui/material").Theme> | undefined;
+} & Omit<{
+    action?: import("react").Ref<import("@mui/material").ButtonBaseActions> | undefined;
+    centerRipple?: boolean | undefined;
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").ButtonBaseClasses> | undefined;
+    disabled?: boolean | undefined;
+    disableRipple?: boolean | undefined;
+    disableTouchRipple?: boolean | undefined;
+    focusRipple?: boolean | undefined;
+    focusVisibleClassName?: string | undefined;
+    LinkComponent?: import("react").ElementType<any> | undefined;
+    onFocusVisible?: import("react").FocusEventHandler<any> | undefined;
+    sx?: import("@mui/system").SxProps<import("@mui/material").Theme> | undefined;
+    tabIndex?: number | undefined;
+    TouchRippleProps?: Partial<import("@mui/material/ButtonBase/TouchRipple").TouchRippleProps> | undefined;
+    touchRippleRef?: import("react").Ref<import("@mui/material/ButtonBase/TouchRipple").TouchRippleActions> | undefined;
+}, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "key" | keyof import("react").LiHTMLAttributes<HTMLLIElement>> & {
+    ref?: ((instance: HTMLLIElement | null) => void) | import("react").RefObject<HTMLLIElement> | null | undefined;
+}, "disabled" | "divider" | "action" | keyof import("@mui/material/OverridableComponent").CommonProps | "tabIndex" | "children" | "sx" | "autoFocus" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "dense" | "selected" | "disableGutters"> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;

package/esm/Select/styled.js

@@ -0,0 +1,31 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { styled } from '../styles';
+import { MenuItem } from '../MenuItem';
+export var TagsWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-wrap: wrap;\n  margin-bottom: -", ";\n\n  .MuiChip-root {\n    margin-bottom: ", ";\n    background-color: ", ";\n  }\n\n  .MuiChip-root:hover {\n    background-color: ", ";\n  }\n\n  .MuiChip-root:not(:last-of-type) {\n    margin-right: ", ";\n  }\n"], ["\n  display: flex;\n  flex-wrap: wrap;\n  margin-bottom: -", ";\n\n  .MuiChip-root {\n    margin-bottom: ", ";\n    background-color: ", ";\n  }\n\n  .MuiChip-root:hover {\n    background-color: ", ";\n  }\n\n  .MuiChip-root:not(:last-of-type) {\n    margin-right: ", ";\n  }\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing(1);
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing(1);
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.palette.grey['300'];
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.palette.grey['300'];
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing(1);
+});
+export var ProgressWrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  min-height: 64px;\n  align-items: center;\n\n  .MuiCircularProgress-root {\n    margin-top: ", ";\n    color: ", ";\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n  min-height: 64px;\n  align-items: center;\n\n  .MuiCircularProgress-root {\n    margin-top: ", ";\n    color: ", ";\n  }\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing(5);
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.palette.grey['900'];
+});
+export var Placeholder = styled(MenuItem)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: none;\n"], ["\n  display: none;\n"])));
+var templateObject_1, templateObject_2, templateObject_3;

package/esm/Select/types.d.ts

@@ -0,0 +1,6 @@
+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;
+};

package/esm/Select/types.js

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

package/esm/index.d.ts

@@ -21,3 +21,4 @@ export * from './Tooltip';
 export * from './TextArea';
 export * from './DashboardLayout';
 export * from './Autocomplete';
+export * from './Select';

package/esm/index.js

@@ -21,3 +21,4 @@ export * from './Tooltip';
 export * from './TextArea';
 export * from './DashboardLayout';
 export * from './Autocomplete';
+export * from './Select';

package/index.d.ts

@@ -21,3 +21,4 @@ export * from './Tooltip';
 export * from './TextArea';
 export * from './DashboardLayout';
 export * from './Autocomplete';
+export * from './Select';

package/index.js

@@ -33,3 +33,4 @@ __exportStar(require("./Tooltip"), exports);
 __exportStar(require("./TextArea"), exports);
 __exportStar(require("./DashboardLayout"), exports);
 __exportStar(require("./Autocomplete"), exports);
+__exportStar(require("./Select"), exports);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astral/ui",
-  "version": "0.6.2",
+  "version": "0.7.1-test.10",
   "browser": "./src/index.ts",
   "jest": {
     "moduleNameMapper": {
@@ -8,7 +8,7 @@
     }
   },
   "dependencies": {
-    "@astral/icons": "^0.5.1",
+    "@astral/icons": "^0.6.2",
     "@emotion/cache": "11.7.1",
     "@emotion/react": "11.8.1",
     "@emotion/server": "11.4.0",