@astral/ui 4.50.0 → 4.52.0

package/node/components/Profile/Profile.js

@@ -29,7 +29,7 @@ const Profile = (props) => {
     if (isLoading) {
         return (0, jsx_runtime_1.jsx)(ProfileSkeleton_1.ProfileSkeleton, {});
     }
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ClickAwayListener_1.default, { onClickAway: handleCloseMenu, children: (0, jsx_runtime_1.jsxs)(styles_1.ProfileRoot, { ref: anchorRef, variant: "text", onClick: handleOpenMenu, children: [(0, jsx_runtime_1.jsx)(styles_1.StyledAvatar, { ...avatar }), (0, jsx_runtime_1.jsxs)(styles_1.User, { children: [(0, jsx_runtime_1.jsxs)(styles_1.Credentials, { className: hidePersonalDataClassname, children: [(0, jsx_runtime_1.jsx)(Typography_1.Typography, { variant: "body1", className: constants_1.profileClassnames.credentials, children: displayName }), (0, jsx_runtime_1.jsx)(Typography_1.Typography, { variant: "caption", color: "textSecondary", className: constants_1.profileClassnames.credentials, children: annotation })] }), (0, jsx_runtime_1.jsx)(styles_1.StyledChevron, { isActive: open })] })] }) }), Menu ? ((0, jsx_runtime_1.jsx)(Menu, { open: open, anchorEl: anchorRef.current, onClose: handleCloseMenu, anchorOrigin: {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ClickAwayListener_1.default, { onClickAway: handleCloseMenu, children: (0, jsx_runtime_1.jsxs)(styles_1.ProfileRoot, { ref: anchorRef, variant: "text", onClick: handleOpenMenu, className: constants_1.profileClassnames.button, children: [(0, jsx_runtime_1.jsx)(styles_1.StyledAvatar, { ...avatar, className: constants_1.profileClassnames.avatar }), (0, jsx_runtime_1.jsxs)(styles_1.User, { className: constants_1.profileClassnames.user, children: [(0, jsx_runtime_1.jsxs)(styles_1.Credentials, { className: hidePersonalDataClassname, children: [(0, jsx_runtime_1.jsx)(Typography_1.Typography, { variant: "body1", className: constants_1.profileClassnames.credentials, children: displayName }), (0, jsx_runtime_1.jsx)(Typography_1.Typography, { variant: "caption", color: "textSecondary", className: constants_1.profileClassnames.credentials, children: annotation })] }), (0, jsx_runtime_1.jsx)(styles_1.StyledChevron, { isActive: open })] })] }) }), Menu ? ((0, jsx_runtime_1.jsx)(Menu, { open: open, anchorEl: anchorRef.current, onClose: handleCloseMenu, anchorOrigin: {
                     vertical: 'bottom',
                     horizontal: 'right',
                 }, transformOrigin: {

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

@@ -1,3 +1,6 @@
 export declare const profileClassnames: {
     credentials: string;
+    button: string;
+    avatar: string;
+    user: string;
 };

package/node/components/Profile/constants.js

@@ -4,4 +4,7 @@ exports.profileClassnames = void 0;
 const createUIKitClassname_1 = require("../utils/createUIKitClassname");
 exports.profileClassnames = {
     credentials: (0, createUIKitClassname_1.createUIKitClassname)('profile__credentials'),
+    button: (0, createUIKitClassname_1.createUIKitClassname)('profile__button'),
+    avatar: (0, createUIKitClassname_1.createUIKitClassname)('profile__avatar'),
+    user: (0, createUIKitClassname_1.createUIKitClassname)('profile__user'),
 };

package/node/hook-form/FormWizard/FormWizard.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.FormWizard = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const ContentState_1 = require("../../components/ContentState");
+const NewStepper_1 = require("../../components/NewStepper");
 const Form_1 = require("../Form");
 const Footer_1 = require("./Footer");
 const styles_1 = require("./styles");
@@ -11,7 +12,7 @@ const useLogic_1 = require("./useLogic");
  * FormWizard предназначен для построения форм со степпером.
  */
 const FormWizard = (props) => {
-    const { Component, footerProps, stepWizardProps } = (0, useLogic_1.useLogic)(props);
+    const { Component, footerProps, activeStep, steps } = (0, useLogic_1.useLogic)(props);
     const { className, isFirstStep, isLastStep, isDisabled, isLoading, isError, form, customFooter, errorMsg, onRetry, onClickStep, onPrevStep, onSubmit, onSubmitError, beforeContent, } = props;
     const renderFooter = () => {
         if (customFooter) {
@@ -25,7 +26,7 @@ const FormWizard = (props) => {
         }
         return ((0, jsx_runtime_1.jsx)(Footer_1.Footer, { isDisabled: isDisabled, isFirstStep: isFirstStep, isLastStep: isLastStep, onPrevStep: onPrevStep, ...footerProps }));
     };
-    return ((0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { className: className, children: [beforeContent && ((0, jsx_runtime_1.jsx)(styles_1.BeforeContentWrapper, { children: beforeContent })), (0, jsx_runtime_1.jsx)(styles_1.StyledStepperWizard, { connector: "arrow", onClickPrevStep: onClickStep, ...stepWizardProps }), (0, jsx_runtime_1.jsx)(ContentState_1.ContentState, { isLoading: isLoading, isError: isError, 
+    return ((0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { className: className, children: [beforeContent && ((0, jsx_runtime_1.jsx)(styles_1.BeforeContentWrapper, { children: beforeContent })), (0, jsx_runtime_1.jsx)(styles_1.StyledNewStepper, { connector: "arrow", onClickPrevStep: onClickStep, activeStep: activeStep, children: steps.map((step) => ((0, jsx_runtime_1.jsx)(NewStepper_1.Step, { ...step }, step.stepId))) }), (0, jsx_runtime_1.jsx)(ContentState_1.ContentState, { isLoading: isLoading, isError: isError, 
                 // biome-ignore lint/suspicious/noTsIgnore: onRetry не требуется, если форма не инициализируется данными, получаемыми с backend
                 // @ts-ignore
                 errorState: { errorList: [errorMsg || ''], onRetry }, children: (0, jsx_runtime_1.jsxs)(Form_1.Form, { form: form, isDisabled: isDisabled, onSubmit: form.handleSubmit(onSubmit, onSubmitError), children: [(0, jsx_runtime_1.jsx)(styles_1.FormContent, { children: (0, jsx_runtime_1.jsx)(Component, {}) }), renderFooter()] }) })] }));

package/node/hook-form/FormWizard/styles.d.ts

@@ -7,10 +7,7 @@ export declare const BeforeContentWrapper: import("@emotion/styled/dist/declarat
     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 StyledStepperWizard: import("@emotion/styled/dist/declarations/src/types").StyledComponent<Omit<import("../..").StepperProps, "children"> & {
-    steps: import("../../components/StepperWizard").StepWizard[];
-    onClickPrevStep?: ((index: number) => void) | undefined;
-} & {
+export declare const StyledNewStepper: import("@emotion/styled/dist/declarations/src/types").StyledComponent<import("../../components/NewStepper").StepperProps & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;
 export declare const FormContent: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{

package/node/hook-form/FormWizard/styles.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FormContent = exports.StyledStepperWizard = exports.BeforeContentWrapper = exports.Wrapper = void 0;
-const StepperWizard_1 = require("../../components/StepperWizard");
+exports.FormContent = exports.StyledNewStepper = exports.BeforeContentWrapper = exports.Wrapper = void 0;
+const NewStepper_1 = require("../../components/NewStepper");
 const styled_1 = require("../../components/styled");
 exports.Wrapper = styled_1.styled.section `
   display: flex;
@@ -16,14 +16,12 @@ exports.BeforeContentWrapper = styled_1.styled.div `
     padding: ${({ theme }) => theme.spacing(0, 4)};
   }
 `;
-exports.StyledStepperWizard = (0, styled_1.styled)(StepperWizard_1.StepperWizard) `
-  margin-bottom: ${({ theme }) => theme.spacing(4)};
+exports.StyledNewStepper = (0, styled_1.styled)(NewStepper_1.NewStepper) `
+  margin-bottom: ${({ theme }) => theme.spacing(5)};
   padding: ${({ theme }) => theme.spacing(0, 6)};
 
   ${({ theme }) => theme.breakpoints.down('sm')} {
-    overflow-x: auto;
-
-    margin-bottom: ${({ theme }) => theme.spacing(6)};
+    margin-bottom: ${({ theme }) => theme.spacing(4)};
     padding: ${({ theme }) => theme.spacing(0, 4)};
   }
 `;

package/node/hook-form/FormWizard/useLogic/useLogic.d.ts

@@ -3,12 +3,11 @@ import { type FormWizardProps } from '../FormWizard';
 type UseLogicParams<TFormValues extends Record<string, unknown>> = FormWizardProps<TFormValues>;
 export declare const useLogic: <TFormValues extends Record<string, unknown>>({ currentStepId, steps, submitButtonText, isLastStep, }: UseLogicParams<TFormValues>) => {
     Component: import("react").FunctionComponent<{}>;
-    stepWizardProps: {
-        activeStep: number;
-        steps: {
-            label: string;
-        }[];
-    };
+    steps: {
+        label: string;
+        stepId: number;
+    }[];
+    activeStep: number;
     footerProps: {
         prevButtonText: string;
         submitButtonText: string;

package/node/hook-form/FormWizard/useLogic/useLogic.js

@@ -8,17 +8,16 @@ const useLogic = ({ currentStepId, steps, submitButtonText, isLastStep, }) => {
         ? steps?.findIndex(({ id }) => Object.is(id, currentStepId))
         : 0, [currentStepId, steps]);
     const currentStep = steps[indexStep];
-    const stepsByLabel = steps.map(({ label }) => ({
+    const stepsByLabel = steps.map(({ label }, index) => ({
         label,
+        stepId: index,
     }));
     const prevButtonText = currentStep.prevButtonText || constants_1.DEFAULT_PREV_BUTTON_TEXT;
     const nextButtonText = currentStep.nextButtonText || constants_1.DEFAULT_NEXT_BUTTON_TEXT;
     return {
         Component: currentStep.component,
-        stepWizardProps: {
-            activeStep: indexStep,
-            steps: stepsByLabel,
-        },
+        steps: stepsByLabel,
+        activeStep: indexStep,
         footerProps: {
             prevButtonText,
             submitButtonText: isLastStep ? submitButtonText : nextButtonText,

package/node/hook-form/useFormWizard/useFormWizard.js

@@ -68,8 +68,10 @@ const useFormWizard = ({ initialStepId, defaultValues, isDisabled, steps, autoSa
         return;
     };
     const handleClickStep = (index) => {
-        const stepId = steps[index].id;
-        setCurrentStepId(stepId);
+        if (index < 0 || index >= visibleSteps.length) {
+            return;
+        }
+        setCurrentStepId(visibleSteps[index].id);
     };
     const handlePrevStep = () => {
         if (isFirstStep) {

package/package.json

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

package/components/NewStepper/Step/Label/useLogic/index.d.ts

@@ -1 +0,0 @@
-export * from './useLogic';

package/components/NewStepper/Step/Label/useLogic/index.js

@@ -1 +0,0 @@
-export * from './useLogic';

package/components/NewStepper/Step/Label/useLogic/useLogic.d.ts

@@ -1,7 +0,0 @@
-type UseLogicParams = {
-    stepId: number;
-};
-export declare const useLogic: ({ stepId }: UseLogicParams) => {
-    isStepActive: boolean;
-};
-export {};

package/components/NewStepper/Step/Label/useLogic/useLogic.js

@@ -1,7 +0,0 @@
-import { useContext } from 'react';
-import { StepperContext } from '../../../StepperContext';
-export const useLogic = ({ stepId }) => {
-    const { activeStep } = useContext(StepperContext);
-    const isStepActive = activeStep === stepId;
-    return { isStepActive };
-};

package/node/components/NewStepper/Step/Label/useLogic/index.d.ts

@@ -1 +0,0 @@
-export * from './useLogic';

package/node/components/NewStepper/Step/Label/useLogic/index.js

@@ -1,17 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (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("./useLogic"), exports);

package/node/components/NewStepper/Step/Label/useLogic/useLogic.d.ts

@@ -1,7 +0,0 @@
-type UseLogicParams = {
-    stepId: number;
-};
-export declare const useLogic: ({ stepId }: UseLogicParams) => {
-    isStepActive: boolean;
-};
-export {};

package/node/components/NewStepper/Step/Label/useLogic/useLogic.js

@@ -1,11 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useLogic = void 0;
-const react_1 = require("react");
-const StepperContext_1 = require("../../../StepperContext");
-const useLogic = ({ stepId }) => {
-    const { activeStep } = (0, react_1.useContext)(StepperContext_1.StepperContext);
-    const isStepActive = activeStep === stepId;
-    return { isStepActive };
-};
-exports.useLogic = useLogic;