@zat-design/sisyphus-react 4.0.8 → 4.0.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -314,7 +314,8 @@
314
314
  .@{ant-prefix}-input,
315
315
  .@{ant-prefix}-select .@{ant-prefix}-select-selector,
316
316
  .@{ant-prefix}-input-number,
317
- .@{ant-prefix}-input-number-input {
317
+ .@{ant-prefix}-input-number-input,
318
+ .@{ant-prefix}-picker{
318
319
  // 重置z-index确保正确的层级关系
319
320
  position: relative;
320
321
  // 重置圆角
@@ -337,7 +338,8 @@
337
338
  .@{ant-prefix}-input,
338
339
  .@{ant-prefix}-select .@{ant-prefix}-select-selector,
339
340
  .@{ant-prefix}-input-number,
340
- .@{ant-prefix}-input-number-input {
341
+ .@{ant-prefix}-input-number-input,
342
+ .@{ant-prefix}-picker{
341
343
  border-top-right-radius: 6px;
342
344
  border-bottom-right-radius: 6px;
343
345
  }
@@ -75,46 +75,45 @@ export declare const useFormItemProps: (column: FlexibleGroupColumnType, context
75
75
  confirm?: boolean | import("antd").ModalFuncProps | import("../../../render/propsType").FunctionArgs<any, boolean | import("antd").ModalFuncProps>;
76
76
  show?: boolean | ReactiveFunction<any, boolean>;
77
77
  component?: React.ReactNode | ReactiveFunction<any, React.ReactNode>;
78
+ style?: React.CSSProperties;
78
79
  trim?: boolean;
79
80
  normalize?: (value: any, prevValue: any, allValues: import("@rc-component/form/lib/interface").Store) => any;
80
81
  children?: React.ReactNode | ((form: FormInstance<any>) => React.ReactNode);
81
- id?: string;
82
82
  className?: string;
83
83
  hidden?: boolean;
84
- style?: React.CSSProperties;
85
- onReset?: () => void;
84
+ layout?: import("antd/es/form/Form").FormItemLayout;
85
+ help?: React.ReactNode;
86
+ vertical?: boolean;
87
+ preserve?: boolean;
86
88
  prefixCls?: string;
87
- rootClassName?: string;
89
+ onReset?: () => void;
88
90
  status?: "" | "warning" | "error" | "success" | "validating";
89
- validateTrigger?: string | false | string[];
90
- preserve?: boolean;
91
- labelCol?: import("antd").ColProps;
92
- wrapperCol?: import("antd").ColProps;
93
- colon?: boolean;
91
+ id?: string;
92
+ rootClassName?: string;
93
+ isView?: boolean;
94
+ getValueProps?: ((value: any) => Record<string, unknown>) & ((value: any) => Record<string, unknown>);
95
+ desensitization?: [number, number] | ReactiveFunction<any, [number, number]>;
94
96
  htmlFor?: string;
97
+ colon?: boolean;
95
98
  labelAlign?: import("antd/es/form/interface").FormLabelAlign;
96
- vertical?: boolean;
99
+ labelCol?: import("antd").ColProps;
97
100
  getValueFromEvent?: (...args: import("@rc-component/form/lib/interface").EventArgs) => any;
98
101
  shouldUpdate?: import("@rc-component/form/lib/Field").ShouldUpdate<any>;
99
102
  trigger?: string;
103
+ validateTrigger?: string | false | string[];
100
104
  validateDebounce?: number;
101
105
  valuePropName?: string;
102
- getValueProps?: ((value: any) => Record<string, unknown>) & ((value: any) => Record<string, unknown>);
103
106
  messageVariables?: Record<string, string>;
104
107
  initialValue?: any;
105
108
  onMetaChange?: (meta: import("@rc-component/form/lib/Field").MetaEvent) => void;
106
109
  isListField?: boolean;
107
110
  isList?: boolean;
108
- upperCase?: boolean;
109
- desensitization?: [number, number] | ReactiveFunction<any, [number, number]>;
110
- isView?: boolean;
111
111
  noStyle?: boolean;
112
112
  hasFeedback?: boolean | {
113
113
  icons: import("antd/es/form/FormItem").FeedbackIcons;
114
114
  };
115
115
  validateStatus?: "" | "warning" | "error" | "success" | "validating";
116
- layout?: import("antd/es/form/Form").FormItemLayout;
117
- help?: React.ReactNode;
116
+ wrapperCol?: import("antd").ColProps;
118
117
  fieldId?: string;
119
118
  valueType?: import("../../../render/propsType").ProFormValueType;
120
119
  switchValue?: [any, any];
@@ -124,6 +123,7 @@ export declare const useFormItemProps: (column: FlexibleGroupColumnType, context
124
123
  index?: number;
125
124
  }) => string | React.ReactElement<any, any>;
126
125
  viewType?: import("../../../render/propsType").ViewType;
126
+ upperCase?: boolean;
127
127
  toISOString?: boolean;
128
128
  toCSTString?: boolean;
129
129
  clearNotShow?: boolean;
@@ -141,7 +141,7 @@ export declare const useFormItemProps: (column: FlexibleGroupColumnType, context
141
141
  * 创建组件属性
142
142
  */
143
143
  export declare const createComponentProps: (column: FlexibleGroupColumnType, formItemProps: any) => {
144
- componentProps: import("lodash").Omit<any, "format" | "precision" | "valueType" | "switchValue" | "dependNames" | "toISOString" | "toCSTString" | "clearNotShow">;
144
+ componentProps: import("lodash").Omit<any, "format" | "valueType" | "switchValue" | "dependNames" | "toISOString" | "toCSTString" | "clearNotShow" | "precision">;
145
145
  formItemTransform: {
146
146
  getValueProps: any;
147
147
  normalize: any;
@@ -23,8 +23,53 @@ import { iconMap } from "./config";
23
23
  import { onBeforeInjection } from "./utils";
24
24
  import locale from "../locale";
25
25
  import "./symbolIcon.js";
26
+
27
+ // 提取主题色相关辅助函数
26
28
  import { Fragment as _Fragment } from "react/jsx-runtime";
27
29
  import { jsx as _jsx } from "react/jsx-runtime";
30
+ var extractThemeColor = target => {
31
+ var _target$attributes, _styleAttr$value, _match$;
32
+ if (!target) return null;
33
+ var styleAttr = Object.values((_target$attributes = target.attributes) !== null && _target$attributes !== void 0 ? _target$attributes : {})
34
+ // @ts-ignore
35
+ .find(item => item.nodeName === 'style');
36
+ if (!styleAttr) return null;
37
+
38
+ // @ts-ignore
39
+ var match = (_styleAttr$value = styleAttr.value) === null || _styleAttr$value === void 0 ? void 0 : _styleAttr$value.match(/--zaui-brand:(.*?);/);
40
+ return (match === null || match === void 0 || (_match$ = match[1]) === null || _match$ === void 0 ? void 0 : _match$.trim()) || null;
41
+ };
42
+ var updateThemeColor = (newColor, dispatch, primaryColor) => {
43
+ if (!newColor) return;
44
+ dispatch({
45
+ type: 'set',
46
+ payload: {
47
+ theme: {
48
+ primaryColor,
49
+ qiankunPrimaryColor: newColor
50
+ },
51
+ forms: {}
52
+ }
53
+ });
54
+ };
55
+ var getMainAppWindow = () => {
56
+ if (window.parent === window) {
57
+ return window;
58
+ }
59
+ var currentWindow = window;
60
+ while (currentWindow.parent !== currentWindow) {
61
+ // @ts-ignore
62
+ currentWindow = currentWindow.parent;
63
+ }
64
+ return currentWindow;
65
+ };
66
+ var handleMutation = (mutationsList, dispatch, primaryColor, qiankunPrimaryColor) => {
67
+ var targetEntries = mutationsList[0];
68
+ if (!(targetEntries !== null && targetEntries !== void 0 && targetEntries.target)) return;
69
+ var newColor = extractThemeColor(targetEntries.target);
70
+ if (!newColor || qiankunPrimaryColor === newColor) return;
71
+ updateThemeColor(newColor, dispatch, primaryColor);
72
+ };
28
73
  var ProIcon = props => {
29
74
  var _window, _window2;
30
75
  var _useProConfig = useProConfig(),
@@ -116,27 +161,36 @@ var ProIcon = props => {
116
161
  var _text = children;
117
162
  // svg图标对应文本
118
163
  var iconText = tooltip || '';
119
- var typeIsExistAndIncludeEnglish = _type && /[a-zA-Z]/.test(_type);
120
164
 
121
- // 模式为icon下,对传入的text进行指定语言-icon 映射
122
- if (isIconMode && !type) {
123
- if (_text) {
124
- var target = mergedMapList.find(item => item['text-cn'] === _text || item['text-en'] === _text);
165
+ // 文本和类型映射处理函数
166
+ var resolveIconMapping = (isIconMode, type, text, mergedMapList, targetTextFill) => {
167
+ if (isIconMode && !type && text) {
168
+ var target = mergedMapList.find(item => item['text-cn'] === text || item['text-en'] === text);
125
169
  if (target) {
126
- _type = target === null || target === void 0 ? void 0 : target.type;
127
- iconText = target[targetTextFill];
170
+ return {
171
+ type: target.type,
172
+ text: target[targetTextFill]
173
+ };
128
174
  }
129
175
  }
130
- }
131
-
132
- // 模式为button下,对传入的type进行icon-指定语言 映射
133
- if (!isIconMode) {
134
- if (typeIsExistAndIncludeEnglish) {
135
- var _target = mergedMapList.find(item => item.type === _type);
176
+ if (!isIconMode && type && /[a-zA-Z]/.test(type)) {
177
+ var _target = mergedMapList.find(item => item.type === type);
136
178
  if (_target) {
137
- _text = _target[targetTextFill];
179
+ return {
180
+ text: _target[targetTextFill]
181
+ };
138
182
  }
139
183
  }
184
+ return null;
185
+ };
186
+ var mappingResult = resolveIconMapping(isIconMode, type, _text, mergedMapList, targetTextFill);
187
+ if (mappingResult) {
188
+ if (mappingResult.type) {
189
+ _type = mappingResult.type;
190
+ iconText = mappingResult.text || '';
191
+ } else if (mappingResult.text) {
192
+ _text = mappingResult.text;
193
+ }
140
194
  }
141
195
  var svgProps = {
142
196
  className: proIconClassNames,
@@ -147,105 +201,112 @@ var ProIcon = props => {
147
201
  }, rotateStyle), style)
148
202
  };
149
203
 
204
+ // 应用颜色到 SVG 路径元素
205
+ var applyColorToPaths = (svg, color) => {
206
+ var paths = svg.querySelectorAll('path, circle, rect, polygon, ellipse');
207
+ paths.forEach(path => {
208
+ var currentFill = path.getAttribute('fill');
209
+ if (!currentFill || currentFill === 'currentColor') {
210
+ path.setAttribute('fill', color);
211
+ }
212
+ });
213
+ };
214
+
215
+ // 应用颜色到 SVG
216
+ var applyColorToSvg = function applyColorToSvg(svg, color) {
217
+ var isComponentString = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
218
+ if (!color) {
219
+ svg.style.color = 'currentColor';
220
+ return;
221
+ }
222
+ svg.setAttribute('fill', color);
223
+ svg.style.color = color;
224
+
225
+ // 组件字符串类型需要遍历所有路径元素设置 fill
226
+ if (isComponentString) {
227
+ applyColorToPaths(svg, color);
228
+ }
229
+ };
230
+
231
+ // 创建 SVG beforeInjection 处理函数
232
+ var createSvgBeforeInjection = function createSvgBeforeInjection() {
233
+ var isComponentString = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
234
+ return svg => {
235
+ // 设置 SVG 的宽高和属性
236
+ svg.setAttribute('width', String(size));
237
+ svg.setAttribute('height', String(size));
238
+ svg.setAttribute('aria-hidden', 'true');
239
+
240
+ // 应用旋转
241
+ if (rotate) {
242
+ var transform = svg.getAttribute('transform') || '';
243
+ svg.setAttribute('transform', `${transform} rotate(${rotate})`);
244
+ svg.style.transform = `rotate(${rotate}deg)`;
245
+ }
246
+
247
+ // 应用颜色
248
+ applyColorToSvg(svg, color, isComponentString);
249
+
250
+ // 应用自定义样式
251
+ if (style) {
252
+ Object.keys(style).forEach(key => {
253
+ svg.style[key] = style[key];
254
+ });
255
+ }
256
+
257
+ // 应用 actionMap 的主题配置
258
+ onBeforeInjection({
259
+ svg,
260
+ actionMap,
261
+ primaryColor: isQiankun ? qiankunPrimaryColor : primaryColor
262
+ });
263
+ };
264
+ };
265
+
266
+ // 渲染自定义组件 icon
267
+ var renderComponentIcon = (component, svgProps, color, onClick) => {
268
+ var componentProps = _objectSpread(_objectSpread({}, svgProps), {}, {
269
+ style: _objectSpread({
270
+ color
271
+ }, svgProps === null || svgProps === void 0 ? void 0 : svgProps.style),
272
+ onClick,
273
+ 'aria-hidden': 'true'
274
+ });
275
+ return /*#__PURE__*/React.isValidElement(component) ? /*#__PURE__*/React.cloneElement(component, componentProps) : /*#__PURE__*/React.createElement(component, componentProps);
276
+ };
277
+
150
278
  // 渲染 icon 的优先级:component > src > type
151
- var icon;
152
- if (component) {
153
- // 判断 component 的类型
154
- if (typeof component === 'string') {
155
- // 字符串类型:当作 SVG 文件路径处理,使用 ReactSVG 加载
156
- icon = /*#__PURE__*/_jsx(ReactSVG, {
279
+ var renderIcon = () => {
280
+ // component 字符串类型:当作 SVG 文件路径处理
281
+ if (component && typeof component === 'string') {
282
+ return /*#__PURE__*/_jsx(ReactSVG, {
157
283
  className: proIconClassNames
158
284
  // @ts-ignore
159
285
  ,
160
286
  onClick: onClick,
161
287
  src: component,
162
- beforeInjection: svg => {
163
- // 设置 SVG 的宽高
164
- svg.setAttribute('width', String(size));
165
- svg.setAttribute('height', String(size));
166
- svg.setAttribute('aria-hidden', 'true');
167
-
168
- // 应用旋转
169
- if (rotate) {
170
- var transform = svg.getAttribute('transform') || '';
171
- svg.setAttribute('transform', `${transform} rotate(${rotate})`);
172
- svg.style.transform = `rotate(${rotate}deg)`;
173
- }
174
-
175
- // 应用颜色 - 设置 fill 和 currentColor
176
- if (color) {
177
- svg.setAttribute('fill', color);
178
- svg.style.color = color;
179
- // 遍历所有路径元素,设置 fill
180
- var paths = svg.querySelectorAll('path, circle, rect, polygon, ellipse');
181
- paths.forEach(path => {
182
- var currentFill = path.getAttribute('fill');
183
- // 只修改使用 currentColor 或没有设置 fill 的元素
184
- if (!currentFill || currentFill === 'currentColor') {
185
- path.setAttribute('fill', color);
186
- }
187
- });
188
- } else {
189
- // 没有指定颜色时,使用 currentColor
190
- svg.style.color = 'currentColor';
191
- }
192
-
193
- // 应用自定义样式
194
- if (style) {
195
- Object.keys(style).forEach(key => {
196
- svg.style[key] = style[key];
197
- });
198
- }
199
-
200
- // 应用 actionMap 的主题配置
201
- onBeforeInjection({
202
- svg,
203
- actionMap,
204
- primaryColor: isQiankun ? qiankunPrimaryColor : primaryColor
205
- });
206
- }
207
- });
208
- } else {
209
- // 处理自定义组件
210
- var componentProps = _objectSpread(_objectSpread({}, svgProps), {}, {
211
- style: _objectSpread({
212
- color
213
- }, svgProps === null || svgProps === void 0 ? void 0 : svgProps.style),
214
- onClick,
215
- 'aria-hidden': 'true'
288
+ beforeInjection: createSvgBeforeInjection(true)
216
289
  });
290
+ }
217
291
 
218
- // 判断是组件类型还是组件实例
219
- if ( /*#__PURE__*/React.isValidElement(component)) {
220
- // 组件实例:使用 cloneElement
221
- icon = /*#__PURE__*/React.cloneElement(component, componentProps);
222
- } else {
223
- // 组件类型:直接渲染
224
- var ComponentType = component;
225
- icon = /*#__PURE__*/_jsx(ComponentType, _objectSpread({}, componentProps));
226
- }
292
+ // component 组件类型或实例(排除字符串类型)
293
+ if (component && typeof component !== 'string') {
294
+ return renderComponentIcon(component, svgProps, color, onClick);
227
295
  }
228
- } else if (src) {
229
- // 使用 ReactSVG 加载外部 SVG
230
- icon = /*#__PURE__*/_jsx(ReactSVG, _objectSpread(_objectSpread({}, svgProps), {}, {
231
- // @ts-ignore
232
- onClick: onClick,
233
- "aria-hidden": "true",
234
- src: src,
235
- beforeInjection: svg => {
236
- onBeforeInjection({
237
- svg,
238
- actionMap,
239
- primaryColor: isQiankun ? qiankunPrimaryColor : primaryColor
240
- });
241
- if (color) {
242
- svg.setAttribute('fill', color);
243
- }
244
- }
245
- }));
246
- } else {
247
- // 使用 symbol icon
248
- icon = /*#__PURE__*/_jsx("svg", _objectSpread(_objectSpread({}, svgProps), {}, {
296
+
297
+ // src 类型:使用 ReactSVG 加载外部 SVG
298
+ if (src) {
299
+ return /*#__PURE__*/_jsx(ReactSVG, _objectSpread(_objectSpread({}, svgProps), {}, {
300
+ // @ts-ignore
301
+ onClick: onClick,
302
+ "aria-hidden": "true",
303
+ src: src,
304
+ beforeInjection: createSvgBeforeInjection()
305
+ }));
306
+ }
307
+
308
+ // symbol icon
309
+ return /*#__PURE__*/_jsx("svg", _objectSpread(_objectSpread({}, svgProps), {}, {
249
310
  style: _objectSpread({
250
311
  color
251
312
  }, svgProps === null || svgProps === void 0 ? void 0 : svgProps.style),
@@ -255,7 +316,8 @@ var ProIcon = props => {
255
316
  xlinkHref: `#icon-${_type}`
256
317
  })
257
318
  }));
258
- }
319
+ };
320
+ var icon = renderIcon();
259
321
 
260
322
  // 判断 RenderIcon 是否会被外层 Button 包裹
261
323
  // 如果会被包裹(isExtendButtonMode && isIconMode),则内部不使用 Button,避免 button 嵌套
@@ -292,69 +354,23 @@ var ProIcon = props => {
292
354
  })
293
355
  }));
294
356
  useEffect(() => {
357
+ var _themeConfig$data;
295
358
  // 处于主子应用情况下才会执行下方逻辑,主题色的变更以主框架的为准
296
- if (actionMap && isQiankun) {
297
- var _themeConfig$data;
298
- observer = new MutationObserver(mutationsList => {
299
- var targetEntries = mutationsList[0];
300
- if (targetEntries) {
301
- if (targetEntries && targetEntries.target) {
302
- var _Object$values, _targetEntries$target, _targetEntries$target2;
303
- var _Object$values$find$v = // @ts-ignore
304
- (_Object$values = Object.values((_targetEntries$target = targetEntries === null || targetEntries === void 0 || (_targetEntries$target2 = targetEntries.target) === null || _targetEntries$target2 === void 0 ? void 0 : _targetEntries$target2.attributes) !== null && _targetEntries$target !== void 0 ? _targetEntries$target : {})) === null || _Object$values === void 0 || (_Object$values = _Object$values.find(item => item.nodeName === 'style')
305
- // @ts-ignore
306
- ) === null || _Object$values === void 0 || (_Object$values = _Object$values.value) === null || _Object$values === void 0 ? void 0 : _Object$values.match(/--zaui-brand:(.*?);/),
307
- _Object$values$find$v2 = _slicedToArray(_Object$values$find$v, 2),
308
- label = _Object$values$find$v2[0],
309
- value = _Object$values$find$v2[1];
310
- if (label && value) {
311
- if (qiankunPrimaryColor !== value) {
312
- dispatch({
313
- type: 'set',
314
- payload: {
315
- theme: {
316
- primaryColor,
317
- qiankunPrimaryColor: value === null || value === void 0 ? void 0 : value.trim()
318
- },
319
- forms: {}
320
- }
321
- });
322
- }
323
- }
324
- }
325
- }
326
- });
327
- var zaAccessibilityTarget = document.documentElement;
328
- if (window.parent === window) {
329
- // 在最顶层的window环境中,可以直接使用document
330
- zaAccessibilityTarget = document.documentElement;
331
- } else {
332
- // 向上遍历直到找到主应用的window
333
- var currentWindow = window;
334
- while (currentWindow.parent !== currentWindow) {
335
- // @ts-ignore
336
- currentWindow = currentWindow.parent;
337
- }
338
- zaAccessibilityTarget = currentWindow.document.documentElement;
339
- }
340
- observer.observe(zaAccessibilityTarget, {
341
- attributes: true,
342
- attributeFilter: ['style']
343
- });
344
- // 未变更时及初始化时
345
- var extendFromMainColor = themeConfig === null || themeConfig === void 0 || (_themeConfig$data = themeConfig.data) === null || _themeConfig$data === void 0 ? void 0 : _themeConfig$data.zauiBrand;
346
- if (extendFromMainColor && qiankunPrimaryColor !== extendFromMainColor) {
347
- dispatch({
348
- type: 'set',
349
- payload: {
350
- theme: {
351
- primaryColor,
352
- qiankunPrimaryColor: extendFromMainColor
353
- },
354
- forms: {}
355
- }
356
- });
357
- }
359
+ if (!actionMap || !isQiankun) return;
360
+ observer = new MutationObserver(mutationsList => {
361
+ handleMutation(mutationsList, dispatch, primaryColor, qiankunPrimaryColor);
362
+ });
363
+ var mainWindow = getMainAppWindow();
364
+ var zaAccessibilityTarget = mainWindow.document.documentElement;
365
+ observer.observe(zaAccessibilityTarget, {
366
+ attributes: true,
367
+ attributeFilter: ['style']
368
+ });
369
+
370
+ // 未变更时及初始化时
371
+ var extendFromMainColor = themeConfig === null || themeConfig === void 0 || (_themeConfig$data = themeConfig.data) === null || _themeConfig$data === void 0 ? void 0 : _themeConfig$data.zauiBrand;
372
+ if (extendFromMainColor && qiankunPrimaryColor !== extendFromMainColor) {
373
+ updateThemeColor(extendFromMainColor, dispatch, primaryColor);
358
374
  }
359
375
  }, []);
360
376
  useEffect(() => {
@@ -14,7 +14,7 @@ var ProFooter = props => {
14
14
  className = props.className,
15
15
  children = props.children,
16
16
  _props$zIndex = props.zIndex,
17
- zIndex = _props$zIndex === void 0 ? 99 : _props$zIndex,
17
+ zIndex = _props$zIndex === void 0 ? 98 : _props$zIndex,
18
18
  _props$sideDom = props.sideDom,
19
19
  sideDom = _props$sideDom === void 0 ? '.pro-layout-sider-nav' : _props$sideDom,
20
20
  _props$contentDom = props.contentDom,
@@ -11,7 +11,6 @@ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" !=
11
11
  function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
12
12
  /* eslint-disable func-call-spacing */
13
13
  /* eslint-disable no-spaced-func */
14
- import { message } from 'antd';
15
14
  import { createContext, useMemo, useRef, useCallback } from 'react';
16
15
  import classNames from 'classnames';
17
16
  import { useSetState, useToggle, useDeepCompareEffect } from 'ahooks';
@@ -92,7 +91,7 @@ var ProLayout = props => {
92
91
  }, [props.collapsed]);
93
92
  useDeepCompareEffect(() => {
94
93
  if (Array.isArray(dataSource) && !dataSource.length) {
95
- return message.warning('Warning: Missing menu data source, or menu data source is not an array');
94
+ return;
96
95
  }
97
96
  var userData = transformMenus(dataSource, pathPrefix);
98
97
  // 确保 menus 始终是一个数组
@@ -59,7 +59,7 @@ export var Step = _ref => {
59
59
  setOnOff(false);
60
60
  };
61
61
  return /*#__PURE__*/_jsxs("div", {
62
- className: `pro-step ${onOff ? 'open' : 'closed'}`,
62
+ className: `pro-step ${onOff ? 'pro-step-open' : 'pro-step-closed'}`,
63
63
  style: _objectSpread({
64
64
  top: fixedTop !== null && fixedTop !== void 0 ? fixedTop : 0,
65
65
  maxHeight: `calc(100vh - ${fixedTop}px)`
@@ -115,6 +115,7 @@
115
115
  align-items: center;
116
116
  justify-content: center;
117
117
  width: 48px;
118
+ min-width: 48px;
118
119
  height: 100%;
119
120
 
120
121
  > svg {
@@ -168,6 +169,7 @@
168
169
 
169
170
  > .pro-step-menu-name {
170
171
  color: #0a0a0a;
172
+ text-align: left;
171
173
 
172
174
  &.disabled {
173
175
  color: #626366;
@@ -208,11 +210,11 @@
208
210
  }
209
211
  }
210
212
 
211
- &.open {
213
+ &.pro-step-open {
212
214
  width: 200px;
213
215
  }
214
216
 
215
- &.closed {
217
+ &.pro-step-closed {
216
218
  width: 48px;
217
219
  }
218
220
  }