@astral/ui 4.90.0 → 4.91.0

package/components/Badge/styles.js

@@ -1,4 +1,5 @@
 import Badge from '@mui/material/Badge';
+import { iconButtonClassnames } from '../IconButton';
 import { styled } from '../styled';
 import { badgeClassnames } from './constants';
 const getBgColor = ({ $customColor, theme, $variantColor, }) => {
@@ -53,6 +54,12 @@ export const StyledBadge = styled(Badge, {
     flex-grow: 1;
   }
 
+  /* Причина игнора: прогрессивное улучшение */
+  /* stylelint-disable plugin/no-unsupported-browser-features */
+  &:has(.${iconButtonClassnames.root}) {
+    width: max-content;
+  }
+
   .${badgeClassnames.content} {
     cursor: default;
     user-select: none;

package/components/DescriptionList/DescriptionList.js

@@ -6,9 +6,8 @@ import { Tag } from '../Tag';
 import { Typography } from '../Typography';
 import { cva } from '../utils/cva';
 import { descriptionListClassnames } from './constants';
-import { DescriptionWrapper, ListWrapper, StyledDescriptionName, StyledDescriptionValue, Title, Wrapper, } from './styles';
+import { DescriptionWrapper, ListWrapper, StyledDescriptionName, Title, Wrapper, } from './styles';
 import { useLogic } from './useLogic';
-import { getTooltipProps } from './utils';
 const descriptionList = cva(descriptionListClassnames.root, {
     variants: {
         variant: {
@@ -39,8 +38,7 @@ export const DescriptionList = ({ items, variant: listVariant = 'default', title
             return (_jsx(Description.Value, { isHidePersonalData: optionProps.isHidePersonalData, children: _jsx(Tag, { label: value, color: color, variant: "light" }) }));
         }
         if (variant === 'guid') {
-            const tooltipProps = getTooltipProps(canCopy);
-            return (_jsx(StyledDescriptionValue, { canCopy: canCopy, "$isCopy": canCopy, color: color, copyPosition: copyPosition, copyText: copyText, children: _jsx(GuidTypography, { tooltipProps: tooltipProps, children: value }) }));
+            return (_jsx(Description.Value, { isHidePersonalData: optionProps.isHidePersonalData, children: _jsx(GuidTypography, { copyParams: { copyText: copyText || String(value) }, canCopy: canCopy, children: value }) }));
         }
         return (_jsx(Description.Value, { canCopy: canCopy, color: color, copyPosition: copyPosition, isHidePersonalData: optionProps.isHidePersonalData, children: value }));
     }, []);

package/components/DescriptionList/styles.d.ts

@@ -20,17 +20,6 @@ export declare const ListWrapper: import("../styled").StyledComponent<{
     $variant?: DescriptionListVariant | undefined;
     $hasDivider: boolean;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDListElement>, HTMLDListElement>, {}>;
-export declare const StyledDescriptionValue: import("../styled").StyledComponent<Pick<import("../Typography").TypographyProps, "color" | "children" | "variant" | "isTabularNums"> & {
-    stub?: import("react").ReactNode;
-    canCopy?: boolean | undefined;
-    copyPosition?: "left" | "right" | undefined;
-    copyText?: string | undefined;
-    isHidePersonalData?: boolean | undefined;
-} & {
-    theme?: import("@emotion/react").Theme | undefined;
-} & {
-    $isCopy?: boolean | undefined;
-}, {}, {}>;
 export declare const DescriptionWrapper: import("../styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;

package/components/DescriptionList/styles.js

@@ -49,13 +49,6 @@ export const ListWrapper = styled('dl', {
     row-gap: ${({ theme }) => theme.spacing(3)};
   }
 `;
-export const StyledDescriptionValue = styled(Description.Value, {
-    shouldForwardProp: (prop) => !['$isCopy'].includes(prop),
-}) `
-  display: ${({ $isCopy }) => $isCopy && 'flex'};
-
-  width: ${({ $isCopy }) => $isCopy && 'calc(100% - 20px)'};
-`;
 export const DescriptionWrapper = styled.div `
   display: flex;
   flex-direction: column;

package/components/IconButton/IconButton.js

@@ -1,9 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { ButtonVariants } from '../Button';
 import { forwardRefWithGeneric } from '../forwardRefWithGeneric';
+import { classNames } from '../utils/classNames';
+import { iconButtonClassnames } from './constants';
 import { StyledButton } from './styles';
 const UnwrappedIconButton = (props, ref) => {
-    const { variant = ButtonVariants.Contained, children, ...restProps } = props;
-    return (_jsx(StyledButton, { variant: variant, ...restProps, ref: ref, children: children }));
+    const { variant = ButtonVariants.Contained, children, className, ...restProps } = props;
+    return (_jsx(StyledButton, { variant: variant, className: classNames(iconButtonClassnames.root, className), ...restProps, ref: ref, children: children }));
 };
 export const IconButton = forwardRefWithGeneric(UnwrappedIconButton);

package/components/IconButton/constants.d.ts

@@ -0,0 +1,3 @@
+export declare const iconButtonClassnames: {
+    root: string;
+};

package/components/IconButton/constants.js

@@ -0,0 +1,4 @@
+import { createUIKitClassname } from '../utils/createUIKitClassname';
+export const iconButtonClassnames = {
+    root: createUIKitClassname('icon-button'),
+};

package/components/IconButton/index.d.ts

@@ -1 +1,2 @@
 export * from './IconButton';
+export { iconButtonClassnames } from './constants';

package/components/IconButton/index.js

@@ -1 +1,2 @@
 export * from './IconButton';
+export { iconButtonClassnames } from './constants';

package/components/IconButton/public.d.ts

@@ -1 +1,2 @@
+export { iconButtonClassnames } from './constants';
 export * from './IconButton';

package/components/IconButton/public.js

@@ -1 +1,2 @@
+export { iconButtonClassnames } from './constants';
 export * from './IconButton';

package/node/components/Badge/styles.js

@@ -5,6 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.StyledBadge = void 0;
 const Badge_1 = __importDefault(require("@mui/material/Badge"));
+const IconButton_1 = require("../IconButton");
 const styled_1 = require("../styled");
 const constants_1 = require("./constants");
 const getBgColor = ({ $customColor, theme, $variantColor, }) => {
@@ -59,6 +60,12 @@ exports.StyledBadge = (0, styled_1.styled)(Badge_1.default, {
     flex-grow: 1;
   }
 
+  /* Причина игнора: прогрессивное улучшение */
+  /* stylelint-disable plugin/no-unsupported-browser-features */
+  &:has(.${IconButton_1.iconButtonClassnames.root}) {
+    width: max-content;
+  }
+
   .${constants_1.badgeClassnames.content} {
     cursor: default;
     user-select: none;

package/node/components/DescriptionList/DescriptionList.js

@@ -11,7 +11,6 @@ const cva_1 = require("../utils/cva");
 const constants_1 = require("./constants");
 const styles_1 = require("./styles");
 const useLogic_1 = require("./useLogic");
-const utils_1 = require("./utils");
 const descriptionList = (0, cva_1.cva)(constants_1.descriptionListClassnames.root, {
     variants: {
         variant: {
@@ -42,8 +41,7 @@ const DescriptionList = ({ items, variant: listVariant = 'default', title, direc
             return ((0, jsx_runtime_1.jsx)(Description_1.Description.Value, { isHidePersonalData: optionProps.isHidePersonalData, children: (0, jsx_runtime_1.jsx)(Tag_1.Tag, { label: value, color: color, variant: "light" }) }));
         }
         if (variant === 'guid') {
-            const tooltipProps = (0, utils_1.getTooltipProps)(canCopy);
-            return ((0, jsx_runtime_1.jsx)(styles_1.StyledDescriptionValue, { canCopy: canCopy, "$isCopy": canCopy, color: color, copyPosition: copyPosition, copyText: copyText, children: (0, jsx_runtime_1.jsx)(GuidTypography_1.GuidTypography, { tooltipProps: tooltipProps, children: value }) }));
+            return ((0, jsx_runtime_1.jsx)(Description_1.Description.Value, { isHidePersonalData: optionProps.isHidePersonalData, children: (0, jsx_runtime_1.jsx)(GuidTypography_1.GuidTypography, { copyParams: { copyText: copyText || String(value) }, canCopy: canCopy, children: value }) }));
         }
         return ((0, jsx_runtime_1.jsx)(Description_1.Description.Value, { canCopy: canCopy, color: color, copyPosition: copyPosition, isHidePersonalData: optionProps.isHidePersonalData, children: value }));
     }, []);

package/node/components/DescriptionList/styles.d.ts

@@ -20,17 +20,6 @@ export declare const ListWrapper: import("@emotion/styled/dist/declarations/src/
     $variant?: DescriptionListVariant | undefined;
     $hasDivider: boolean;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDListElement>, HTMLDListElement>, {}>;
-export declare const StyledDescriptionValue: import("@emotion/styled/dist/declarations/src/types").StyledComponent<Pick<import("../Typography").TypographyProps, "color" | "children" | "variant" | "isTabularNums"> & {
-    stub?: import("react").ReactNode;
-    canCopy?: boolean | undefined;
-    copyPosition?: "left" | "right" | undefined;
-    copyText?: string | undefined;
-    isHidePersonalData?: boolean | undefined;
-} & {
-    theme?: import("@emotion/react").Theme | undefined;
-} & {
-    $isCopy?: boolean | undefined;
-}, {}, {}>;
 export declare const DescriptionWrapper: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;

package/node/components/DescriptionList/styles.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Title = exports.DescriptionWrapper = exports.StyledDescriptionValue = exports.ListWrapper = exports.Wrapper = exports.StyledDescriptionName = void 0;
+exports.Title = exports.DescriptionWrapper = exports.ListWrapper = exports.Wrapper = exports.StyledDescriptionName = void 0;
 const Description_1 = require("../Description");
 const styled_1 = require("../styled");
 const Typography_1 = require("../Typography");
@@ -52,13 +52,6 @@ exports.ListWrapper = (0, styled_1.styled)('dl', {
     row-gap: ${({ theme }) => theme.spacing(3)};
   }
 `;
-exports.StyledDescriptionValue = (0, styled_1.styled)(Description_1.Description.Value, {
-    shouldForwardProp: (prop) => !['$isCopy'].includes(prop),
-}) `
-  display: ${({ $isCopy }) => $isCopy && 'flex'};
-
-  width: ${({ $isCopy }) => $isCopy && 'calc(100% - 20px)'};
-`;
 exports.DescriptionWrapper = styled_1.styled.div `
   display: flex;
   flex-direction: column;

package/node/components/IconButton/IconButton.js

@@ -4,9 +4,11 @@ exports.IconButton = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const Button_1 = require("../Button");
 const forwardRefWithGeneric_1 = require("../forwardRefWithGeneric");
+const classNames_1 = require("../utils/classNames");
+const constants_1 = require("./constants");
 const styles_1 = require("./styles");
 const UnwrappedIconButton = (props, ref) => {
-    const { variant = Button_1.ButtonVariants.Contained, children, ...restProps } = props;
-    return ((0, jsx_runtime_1.jsx)(styles_1.StyledButton, { variant: variant, ...restProps, ref: ref, children: children }));
+    const { variant = Button_1.ButtonVariants.Contained, children, className, ...restProps } = props;
+    return ((0, jsx_runtime_1.jsx)(styles_1.StyledButton, { variant: variant, className: (0, classNames_1.classNames)(constants_1.iconButtonClassnames.root, className), ...restProps, ref: ref, children: children }));
 };
 exports.IconButton = (0, forwardRefWithGeneric_1.forwardRefWithGeneric)(UnwrappedIconButton);

package/node/components/IconButton/constants.d.ts

@@ -0,0 +1,3 @@
+export declare const iconButtonClassnames: {
+    root: string;
+};

package/node/components/IconButton/constants.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.iconButtonClassnames = void 0;
+const createUIKitClassname_1 = require("../utils/createUIKitClassname");
+exports.iconButtonClassnames = {
+    root: (0, createUIKitClassname_1.createUIKitClassname)('icon-button'),
+};

package/node/components/IconButton/index.d.ts

@@ -1 +1,2 @@
 export * from './IconButton';
+export { iconButtonClassnames } from './constants';

package/node/components/IconButton/index.js

@@ -14,4 +14,7 @@ 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 });
+exports.iconButtonClassnames = void 0;
 __exportStar(require("./IconButton"), exports);
+var constants_1 = require("./constants");
+Object.defineProperty(exports, "iconButtonClassnames", { enumerable: true, get: function () { return constants_1.iconButtonClassnames; } });

package/node/components/IconButton/public.d.ts

@@ -1 +1,2 @@
+export { iconButtonClassnames } from './constants';
 export * from './IconButton';

package/node/components/IconButton/public.js

@@ -14,4 +14,7 @@ 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 });
+exports.iconButtonClassnames = void 0;
+var constants_1 = require("./constants");
+Object.defineProperty(exports, "iconButtonClassnames", { enumerable: true, get: function () { return constants_1.iconButtonClassnames; } });
 __exportStar(require("./IconButton"), exports);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astral/ui",
-  "version": "4.90.0",
+  "version": "4.91.0",
   "browser": "./index.js",
   "main": "./node/index.js",
   "dependencies": {