@astral/ui 4.103.1 → 4.103.2

package/components/Accordion/Accordion.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import { Collapse } from '../Collapse';
-import { Chevron, ChevronWrapper, ContentWrapper, Header, SubtitleWrapper, Summary, Wrapper, } from './styles';
+import { Chevron, ChevronWrapper, ContentWrapper, Header, SubtitleWrapper, Summary, } from './styles';
 import { useLogic } from './useLogic';
 export const Accordion = forwardRef(({ summary, startAdornment, isExpanded, onChange, children, summaryVariant = 'h6', subtitle, }, forwardedRef) => {
     const { actualIsExpanded, hasStartAdornment, handleClick, handleKeyDown, hasSubtitle, } = useLogic({ startAdornment, isExpanded, onChange, subtitle });
-    return (_jsxs(Wrapper, { ref: forwardedRef, tabIndex: 0, onKeyDown: handleKeyDown, children: [_jsxs(Header, { role: "button", onClick: handleClick, "$withStartAdornment": hasStartAdornment, "$hasSubtitle": hasSubtitle, children: [startAdornment, typeof summary === 'string' ? (_jsx(Summary, { variant: summaryVariant, children: summary })) : (summary), _jsx(ChevronWrapper, { children: _jsx(Chevron, { "$isActive": actualIsExpanded }) }), hasSubtitle && (_jsx(SubtitleWrapper, { "$withStartAdornment": hasStartAdornment, children: subtitle }))] }), _jsx(Collapse, { in: actualIsExpanded, unmountOnExit: true, children: _jsx(ContentWrapper, { "$withStartAdornment": hasStartAdornment, "$hasSubtitle": hasSubtitle, children: children }) })] }));
+    return (_jsxs("div", { ref: forwardedRef, children: [_jsxs(Header, { role: "button", tabIndex: 0, onClick: handleClick, onKeyDown: handleKeyDown, "$withStartAdornment": hasStartAdornment, "$hasSubtitle": hasSubtitle, children: [startAdornment, typeof summary === 'string' ? (_jsx(Summary, { variant: summaryVariant, children: summary })) : (summary), _jsx(ChevronWrapper, { children: _jsx(Chevron, { "$isActive": actualIsExpanded }) }), hasSubtitle && (_jsx(SubtitleWrapper, { "$withStartAdornment": hasStartAdornment, children: subtitle }))] }), _jsx(Collapse, { in: actualIsExpanded, unmountOnExit: true, children: _jsx(ContentWrapper, { "$withStartAdornment": hasStartAdornment, "$hasSubtitle": hasSubtitle, children: children }) })] }));
 });

package/components/Accordion/styles.d.ts

@@ -34,10 +34,6 @@ export declare const ChevronWrapper: import("../styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const Wrapper: import("../styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const Chevron: import("../styled").StyledComponent<{
     children?: import("react").ReactNode;
     color?: string | undefined;

package/components/Accordion/styles.js

@@ -11,6 +11,8 @@ export const Header = styled.header `
   grid-template-columns: ${({ $withStartAdornment }) => $withStartAdornment ? '20px 1fr 20px' : ' 1fr 20px'};
   grid-template-rows: ${({ $hasSubtitle }) => $hasSubtitle ? '20px 1fr' : '1fr'};
 
+  border-radius: ${({ theme }) => theme.shape.medium};
+
   ${({ theme }) => theme.breakpoints.down('mobile')} {
     grid-row-gap: ${({ theme }) => theme.spacing(1)};
     grid-template-rows: ${({ $hasSubtitle }) => $hasSubtitle ? '24px 1fr' : '1fr'};
@@ -18,6 +20,10 @@ export const Header = styled.header `
     /* Убирает highlight на мобильных устройствах */
     -webkit-tap-highlight-color: transparent;
   }
+
+  &:focus-visible {
+    outline: 2px solid ${({ theme }) => theme.palette.components.focused};
+  }
   
   & .${svgIconClassnames.root} {
     font-size: 20px;
@@ -54,13 +60,6 @@ export const ChevronWrapper = styled.div `
     height: 24px;
   }
 `;
-export const Wrapper = styled.div `
-  border-radius: ${({ theme }) => theme.shape.medium};
-
-  &:focus-visible {
-    outline: 2px solid ${({ theme }) => theme.palette.components.focused};
-  }
-`;
 export const Chevron = styled(DownOutlineMd, {
     shouldForwardProp: (prop) => !['$isActive'].includes(prop),
 }) `

package/components/Accordion/useLogic/useLogic.d.ts

@@ -3,7 +3,7 @@ import { type AccordionProps } from '../types';
 type UseLogicParams = Pick<AccordionProps, 'startAdornment' | 'isExpanded' | 'onChange' | 'subtitle'>;
 export declare const useLogic: ({ startAdornment, isExpanded, onChange, subtitle, }: UseLogicParams) => {
     handleClick: (event: SyntheticEvent<HTMLElement>) => void;
-    handleKeyDown: (event: KeyboardEvent<HTMLDivElement>) => void;
+    handleKeyDown: (event: KeyboardEvent<HTMLElement>) => void;
     actualIsExpanded: boolean;
     isUncontrolledExpanded: boolean;
     hasStartAdornment: boolean;

package/node/components/Accordion/Accordion.js

@@ -8,5 +8,5 @@ const styles_1 = require("./styles");
 const useLogic_1 = require("./useLogic");
 exports.Accordion = (0, react_1.forwardRef)(({ summary, startAdornment, isExpanded, onChange, children, summaryVariant = 'h6', subtitle, }, forwardedRef) => {
     const { actualIsExpanded, hasStartAdornment, handleClick, handleKeyDown, hasSubtitle, } = (0, useLogic_1.useLogic)({ startAdornment, isExpanded, onChange, subtitle });
-    return ((0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { ref: forwardedRef, tabIndex: 0, onKeyDown: handleKeyDown, children: [(0, jsx_runtime_1.jsxs)(styles_1.Header, { role: "button", onClick: handleClick, "$withStartAdornment": hasStartAdornment, "$hasSubtitle": hasSubtitle, children: [startAdornment, typeof summary === 'string' ? ((0, jsx_runtime_1.jsx)(styles_1.Summary, { variant: summaryVariant, children: summary })) : (summary), (0, jsx_runtime_1.jsx)(styles_1.ChevronWrapper, { children: (0, jsx_runtime_1.jsx)(styles_1.Chevron, { "$isActive": actualIsExpanded }) }), hasSubtitle && ((0, jsx_runtime_1.jsx)(styles_1.SubtitleWrapper, { "$withStartAdornment": hasStartAdornment, children: subtitle }))] }), (0, jsx_runtime_1.jsx)(Collapse_1.Collapse, { in: actualIsExpanded, unmountOnExit: true, children: (0, jsx_runtime_1.jsx)(styles_1.ContentWrapper, { "$withStartAdornment": hasStartAdornment, "$hasSubtitle": hasSubtitle, children: children }) })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: forwardedRef, children: [(0, jsx_runtime_1.jsxs)(styles_1.Header, { role: "button", tabIndex: 0, onClick: handleClick, onKeyDown: handleKeyDown, "$withStartAdornment": hasStartAdornment, "$hasSubtitle": hasSubtitle, children: [startAdornment, typeof summary === 'string' ? ((0, jsx_runtime_1.jsx)(styles_1.Summary, { variant: summaryVariant, children: summary })) : (summary), (0, jsx_runtime_1.jsx)(styles_1.ChevronWrapper, { children: (0, jsx_runtime_1.jsx)(styles_1.Chevron, { "$isActive": actualIsExpanded }) }), hasSubtitle && ((0, jsx_runtime_1.jsx)(styles_1.SubtitleWrapper, { "$withStartAdornment": hasStartAdornment, children: subtitle }))] }), (0, jsx_runtime_1.jsx)(Collapse_1.Collapse, { in: actualIsExpanded, unmountOnExit: true, children: (0, jsx_runtime_1.jsx)(styles_1.ContentWrapper, { "$withStartAdornment": hasStartAdornment, "$hasSubtitle": hasSubtitle, children: children }) })] }));
 });

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

@@ -34,10 +34,6 @@ export declare const ChevronWrapper: import("@emotion/styled/dist/declarations/s
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const Wrapper: 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;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const Chevron: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
     children?: import("react").ReactNode;
     color?: string | undefined;

package/node/components/Accordion/styles.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Chevron = exports.Wrapper = exports.ChevronWrapper = exports.Summary = exports.ContentWrapper = exports.SubtitleWrapper = exports.Header = void 0;
+exports.Chevron = exports.ChevronWrapper = exports.Summary = exports.ContentWrapper = exports.SubtitleWrapper = exports.Header = void 0;
 const DownOutlineMd_1 = require("../../icons/DownOutlineMd");
 const SvgIcon_1 = require("../SvgIcon");
 const styled_1 = require("../styled");
@@ -14,6 +14,8 @@ exports.Header = styled_1.styled.header `
   grid-template-columns: ${({ $withStartAdornment }) => $withStartAdornment ? '20px 1fr 20px' : ' 1fr 20px'};
   grid-template-rows: ${({ $hasSubtitle }) => $hasSubtitle ? '20px 1fr' : '1fr'};
 
+  border-radius: ${({ theme }) => theme.shape.medium};
+
   ${({ theme }) => theme.breakpoints.down('mobile')} {
     grid-row-gap: ${({ theme }) => theme.spacing(1)};
     grid-template-rows: ${({ $hasSubtitle }) => $hasSubtitle ? '24px 1fr' : '1fr'};
@@ -21,6 +23,10 @@ exports.Header = styled_1.styled.header `
     /* Убирает highlight на мобильных устройствах */
     -webkit-tap-highlight-color: transparent;
   }
+
+  &:focus-visible {
+    outline: 2px solid ${({ theme }) => theme.palette.components.focused};
+  }
   
   & .${SvgIcon_1.svgIconClassnames.root} {
     font-size: 20px;
@@ -57,13 +63,6 @@ exports.ChevronWrapper = styled_1.styled.div `
     height: 24px;
   }
 `;
-exports.Wrapper = styled_1.styled.div `
-  border-radius: ${({ theme }) => theme.shape.medium};
-
-  &:focus-visible {
-    outline: 2px solid ${({ theme }) => theme.palette.components.focused};
-  }
-`;
 exports.Chevron = (0, styled_1.styled)(DownOutlineMd_1.DownOutlineMd, {
     shouldForwardProp: (prop) => !['$isActive'].includes(prop),
 }) `

package/node/components/Accordion/useLogic/useLogic.d.ts

@@ -3,7 +3,7 @@ import { type AccordionProps } from '../types';
 type UseLogicParams = Pick<AccordionProps, 'startAdornment' | 'isExpanded' | 'onChange' | 'subtitle'>;
 export declare const useLogic: ({ startAdornment, isExpanded, onChange, subtitle, }: UseLogicParams) => {
     handleClick: (event: SyntheticEvent<HTMLElement>) => void;
-    handleKeyDown: (event: KeyboardEvent<HTMLDivElement>) => void;
+    handleKeyDown: (event: KeyboardEvent<HTMLElement>) => void;
     actualIsExpanded: boolean;
     isUncontrolledExpanded: boolean;
     hasStartAdornment: boolean;

package/package.json

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