@salutejs/plasma-new-hope 0.163.1-canary.1476.11275359231.0 → 0.163.1-canary.1479.11291358294.0
Sign up to get free protection for your applications and to get access to all the features.
- package/cjs/components/Attach/Attach.js +13 -8
- package/cjs/components/Attach/Attach.js.map +1 -1
- package/cjs/components/Tabs/ui/horizontal/HorizontalTabs/HorizontalTabs.js +2 -2
- package/cjs/components/Tabs/ui/horizontal/HorizontalTabs/HorizontalTabs.js.map +1 -1
- package/cjs/components/Tabs/ui/vertical/VerticalTabs/VerticalTabs.js +2 -2
- package/cjs/components/Tabs/ui/vertical/VerticalTabs/VerticalTabs.js.map +1 -1
- package/emotion/cjs/components/Attach/Attach.js +13 -8
- package/emotion/cjs/components/Tabs/ui/horizontal/HorizontalTabs/HorizontalTabs.js +2 -2
- package/emotion/cjs/components/Tabs/ui/vertical/VerticalTabs/VerticalTabs.js +2 -2
- package/emotion/cjs/examples/plasma_b2c/components/Tabs/Tabs.stories.tsx +16 -29
- package/emotion/cjs/examples/plasma_web/components/Tabs/Tabs.stories.tsx +16 -29
- package/emotion/es/components/Attach/Attach.js +13 -8
- package/emotion/es/components/Tabs/ui/horizontal/HorizontalTabs/HorizontalTabs.js +2 -2
- package/emotion/es/components/Tabs/ui/vertical/VerticalTabs/VerticalTabs.js +2 -2
- package/emotion/es/examples/plasma_b2c/components/Tabs/Tabs.stories.tsx +16 -29
- package/emotion/es/examples/plasma_web/components/Tabs/Tabs.stories.tsx +16 -29
- package/es/components/Attach/Attach.js +13 -8
- package/es/components/Attach/Attach.js.map +1 -1
- package/es/components/Tabs/ui/horizontal/HorizontalTabs/HorizontalTabs.js +2 -2
- package/es/components/Tabs/ui/horizontal/HorizontalTabs/HorizontalTabs.js.map +1 -1
- package/es/components/Tabs/ui/vertical/VerticalTabs/VerticalTabs.js +2 -2
- package/es/components/Tabs/ui/vertical/VerticalTabs/VerticalTabs.js.map +1 -1
- package/package.json +2 -2
- package/styled-components/cjs/components/Attach/Attach.js +13 -8
- package/styled-components/cjs/components/Tabs/ui/horizontal/HorizontalTabs/HorizontalTabs.js +2 -2
- package/styled-components/cjs/components/Tabs/ui/vertical/VerticalTabs/VerticalTabs.js +2 -2
- package/styled-components/cjs/examples/plasma_b2c/components/Tabs/Tabs.stories.tsx +16 -29
- package/styled-components/cjs/examples/plasma_web/components/Tabs/Tabs.stories.tsx +16 -29
- package/styled-components/es/components/Attach/Attach.js +13 -8
- package/styled-components/es/components/Tabs/ui/horizontal/HorizontalTabs/HorizontalTabs.js +2 -2
- package/styled-components/es/components/Tabs/ui/vertical/VerticalTabs/VerticalTabs.js +2 -2
- package/styled-components/es/examples/plasma_b2c/components/Tabs/Tabs.stories.tsx +16 -29
- package/styled-components/es/examples/plasma_web/components/Tabs/Tabs.stories.tsx +16 -29
- package/types/components/Attach/Attach.d.ts.map +1 -1
package/styled-components/cjs/components/Tabs/ui/horizontal/HorizontalTabs/HorizontalTabs.js
CHANGED
@@ -92,7 +92,7 @@ var horizontalTabsRoot = exports.horizontalTabsRoot = function horizontalTabsRoo
|
|
92
92
|
});
|
93
93
|
firstOverflowingTab === null || firstOverflowingTab === void 0 || (_firstOverflowingTab$ = firstOverflowingTab.current) === null || _firstOverflowingTab$ === void 0 || _firstOverflowingTab$.scrollIntoView({
|
94
94
|
block: 'nearest',
|
95
|
-
inline: '
|
95
|
+
inline: 'nearest'
|
96
96
|
});
|
97
97
|
}, [disabled, scrollRef, refs]);
|
98
98
|
var onNext = (0, _react.useCallback)(function () {
|
@@ -110,7 +110,7 @@ var horizontalTabsRoot = exports.horizontalTabsRoot = function horizontalTabsRoo
|
|
110
110
|
});
|
111
111
|
lastOverflowingTab === null || lastOverflowingTab === void 0 || (_lastOverflowingTab$c = lastOverflowingTab.current) === null || _lastOverflowingTab$c === void 0 || _lastOverflowingTab$c.scrollIntoView({
|
112
112
|
block: 'nearest',
|
113
|
-
inline: '
|
113
|
+
inline: 'nearest'
|
114
114
|
});
|
115
115
|
}, [disabled, scrollRef, refs]);
|
116
116
|
var PreviousButton = (0, _react.useMemo)(function () {
|
@@ -85,7 +85,7 @@ var verticalTabsRoot = exports.verticalTabsRoot = function verticalTabsRoot(Root
|
|
85
85
|
return tabStartY < scrollTop;
|
86
86
|
});
|
87
87
|
firstOverflowingTab === null || firstOverflowingTab === void 0 || (_firstOverflowingTab$ = firstOverflowingTab.current) === null || _firstOverflowingTab$ === void 0 || _firstOverflowingTab$.scrollIntoView({
|
88
|
-
block: '
|
88
|
+
block: 'nearest',
|
89
89
|
inline: 'nearest'
|
90
90
|
});
|
91
91
|
}, [disabled, scrollRef, refs]);
|
@@ -103,7 +103,7 @@ var verticalTabsRoot = exports.verticalTabsRoot = function verticalTabsRoot(Root
|
|
103
103
|
return tabEndY > scrollBottom;
|
104
104
|
});
|
105
105
|
lastOverflowingTab === null || lastOverflowingTab === void 0 || (_lastOverflowingTab$c = lastOverflowingTab.current) === null || _lastOverflowingTab$c === void 0 || _lastOverflowingTab$c.scrollIntoView({
|
106
|
-
block: '
|
106
|
+
block: 'nearest',
|
107
107
|
inline: 'nearest'
|
108
108
|
});
|
109
109
|
}, [disabled, scrollRef, refs]);
|
@@ -50,8 +50,6 @@ const getContentRight = (contentRightOption: string, size: Size) => {
|
|
50
50
|
};
|
51
51
|
|
52
52
|
type StoryTabsProps = ComponentProps<typeof Tabs> & CustomStoryTabsProps;
|
53
|
-
type HorizontalStoryTabsProps = StoryTabsProps & { width: string };
|
54
|
-
type VerticalStoryTabsProps = StoryTabsProps & { height: string };
|
55
53
|
|
56
54
|
const meta: Meta<StoryTabsProps> = {
|
57
55
|
title: 'plasma_b2c/Tabs',
|
@@ -81,7 +79,7 @@ const meta: Meta<StoryTabsProps> = {
|
|
81
79
|
|
82
80
|
export default meta;
|
83
81
|
|
84
|
-
const StoryHorizontalDefault = (props:
|
82
|
+
const StoryHorizontalDefault = (props: StoryTabsProps) => {
|
85
83
|
const {
|
86
84
|
disabled,
|
87
85
|
itemQuantity,
|
@@ -136,7 +134,7 @@ const StoryHorizontalDefault = (props: HorizontalStoryTabsProps) => {
|
|
136
134
|
);
|
137
135
|
};
|
138
136
|
|
139
|
-
const StoryHorizontalScroll = (props:
|
137
|
+
const StoryHorizontalScroll = (props: StoryTabsProps) => {
|
140
138
|
const {
|
141
139
|
disabled,
|
142
140
|
itemQuantity,
|
@@ -146,13 +144,18 @@ const StoryHorizontalScroll = (props: HorizontalStoryTabsProps) => {
|
|
146
144
|
contentRight: contentRightOption,
|
147
145
|
hasDivider,
|
148
146
|
helperText,
|
149
|
-
width,
|
150
147
|
} = props;
|
151
148
|
const items = Array(itemQuantity).fill(0);
|
152
149
|
const [index, setIndex] = useState(0);
|
153
150
|
|
154
151
|
return (
|
155
|
-
<Tabs
|
152
|
+
<Tabs
|
153
|
+
clip={clip}
|
154
|
+
view={hasDivider ? 'divider' : 'clear'}
|
155
|
+
disabled={disabled}
|
156
|
+
size={size}
|
157
|
+
style={{ width: '15rem' }}
|
158
|
+
>
|
156
159
|
{items.map((_, i) => {
|
157
160
|
if (helperText !== '') {
|
158
161
|
return (
|
@@ -192,7 +195,7 @@ const StoryHorizontalScroll = (props: HorizontalStoryTabsProps) => {
|
|
192
195
|
);
|
193
196
|
};
|
194
197
|
|
195
|
-
const StoryHorizontalShowAll = (props:
|
198
|
+
const StoryHorizontalShowAll = (props: StoryTabsProps) => {
|
196
199
|
const {
|
197
200
|
disabled,
|
198
201
|
itemQuantity,
|
@@ -279,15 +282,13 @@ const StoryHorizontalShowAll = (props: HorizontalStoryTabsProps) => {
|
|
279
282
|
);
|
280
283
|
};
|
281
284
|
|
282
|
-
export const HorizontalTabs: StoryObj<
|
285
|
+
export const HorizontalTabs: StoryObj<StoryTabsProps> = {
|
283
286
|
args: {
|
284
287
|
size: 'xs',
|
285
288
|
disabled: false,
|
286
289
|
hasDivider: true,
|
287
290
|
helperText: '',
|
288
291
|
itemQuantity: 8,
|
289
|
-
stretch: false,
|
290
|
-
width: '15rem',
|
291
292
|
},
|
292
293
|
argTypes: {
|
293
294
|
contentLeft: {
|
@@ -309,12 +310,6 @@ export const HorizontalTabs: StoryObj<HorizontalStoryTabsProps> = {
|
|
309
310
|
},
|
310
311
|
if: { arg: 'stretch', truthy: false },
|
311
312
|
},
|
312
|
-
width: {
|
313
|
-
control: {
|
314
|
-
type: 'text',
|
315
|
-
},
|
316
|
-
if: { arg: 'clip', eq: 'scroll' },
|
317
|
-
},
|
318
313
|
size: {
|
319
314
|
options: sizes,
|
320
315
|
control: {
|
@@ -334,7 +329,7 @@ export const HorizontalTabs: StoryObj<HorizontalStoryTabsProps> = {
|
|
334
329
|
},
|
335
330
|
};
|
336
331
|
|
337
|
-
const StoryVerticalDefault = (props:
|
332
|
+
const StoryVerticalDefault = (props: StoryTabsProps) => {
|
338
333
|
const {
|
339
334
|
disabled,
|
340
335
|
itemQuantity,
|
@@ -390,7 +385,7 @@ const StoryVerticalDefault = (props: VerticalStoryTabsProps) => {
|
|
390
385
|
);
|
391
386
|
};
|
392
387
|
|
393
|
-
const StoryVerticalScroll = (props:
|
388
|
+
const StoryVerticalScroll = (props: StoryTabsProps) => {
|
394
389
|
const {
|
395
390
|
disabled,
|
396
391
|
itemQuantity,
|
@@ -400,7 +395,6 @@ const StoryVerticalScroll = (props: VerticalStoryTabsProps) => {
|
|
400
395
|
contentRight: contentRightOption,
|
401
396
|
hasDivider,
|
402
397
|
helperText,
|
403
|
-
height,
|
404
398
|
} = props;
|
405
399
|
const items = Array(itemQuantity).fill(0);
|
406
400
|
const [index, setIndex] = useState(0);
|
@@ -411,8 +405,8 @@ const StoryVerticalScroll = (props: VerticalStoryTabsProps) => {
|
|
411
405
|
size={size as Size}
|
412
406
|
disabled={disabled}
|
413
407
|
clip={clip}
|
408
|
+
style={{ height: '10rem' }}
|
414
409
|
hasDivider={hasDivider}
|
415
|
-
style={{ height }}
|
416
410
|
>
|
417
411
|
{items.map((_, i) => {
|
418
412
|
if (helperText !== '') {
|
@@ -455,7 +449,7 @@ const StoryVerticalScroll = (props: VerticalStoryTabsProps) => {
|
|
455
449
|
);
|
456
450
|
};
|
457
451
|
|
458
|
-
const StoryVerticalShowAll = (props:
|
452
|
+
const StoryVerticalShowAll = (props: StoryTabsProps) => {
|
459
453
|
const {
|
460
454
|
disabled,
|
461
455
|
itemQuantity,
|
@@ -543,7 +537,7 @@ const StoryVerticalShowAll = (props: VerticalStoryTabsProps) => {
|
|
543
537
|
);
|
544
538
|
};
|
545
539
|
|
546
|
-
export const VerticalTabs: StoryObj<
|
540
|
+
export const VerticalTabs: StoryObj<StoryTabsProps> = {
|
547
541
|
args: {
|
548
542
|
size: 'xs',
|
549
543
|
disabled: false,
|
@@ -551,7 +545,6 @@ export const VerticalTabs: StoryObj<VerticalStoryTabsProps> = {
|
|
551
545
|
itemQuantity: 8,
|
552
546
|
orientation: 'vertical',
|
553
547
|
helperText: '',
|
554
|
-
height: '10rem',
|
555
548
|
},
|
556
549
|
argTypes: {
|
557
550
|
contentLeft: {
|
@@ -584,12 +577,6 @@ export const VerticalTabs: StoryObj<VerticalStoryTabsProps> = {
|
|
584
577
|
disable: true,
|
585
578
|
},
|
586
579
|
},
|
587
|
-
height: {
|
588
|
-
control: {
|
589
|
-
type: 'text',
|
590
|
-
},
|
591
|
-
if: { arg: 'clip', eq: 'scroll' },
|
592
|
-
},
|
593
580
|
},
|
594
581
|
render: (args) => {
|
595
582
|
switch (args.clip) {
|
@@ -50,8 +50,6 @@ const getContentRight = (contentRightOption: string, size: Size) => {
|
|
50
50
|
};
|
51
51
|
|
52
52
|
type StoryTabsProps = ComponentProps<typeof Tabs> & CustomStoryTabsProps;
|
53
|
-
type HorizontalStoryTabsProps = StoryTabsProps & { width: string };
|
54
|
-
type VerticalStoryTabsProps = StoryTabsProps & { height: string };
|
55
53
|
|
56
54
|
const meta: Meta<StoryTabsProps> = {
|
57
55
|
title: 'plasma_web/Tabs',
|
@@ -81,7 +79,7 @@ const meta: Meta<StoryTabsProps> = {
|
|
81
79
|
|
82
80
|
export default meta;
|
83
81
|
|
84
|
-
const StoryHorizontalDefault = (props:
|
82
|
+
const StoryHorizontalDefault = (props: StoryTabsProps) => {
|
85
83
|
const {
|
86
84
|
disabled,
|
87
85
|
itemQuantity,
|
@@ -136,7 +134,7 @@ const StoryHorizontalDefault = (props: HorizontalStoryTabsProps) => {
|
|
136
134
|
);
|
137
135
|
};
|
138
136
|
|
139
|
-
const StoryHorizontalScroll = (props:
|
137
|
+
const StoryHorizontalScroll = (props: StoryTabsProps) => {
|
140
138
|
const {
|
141
139
|
disabled,
|
142
140
|
itemQuantity,
|
@@ -146,13 +144,18 @@ const StoryHorizontalScroll = (props: HorizontalStoryTabsProps) => {
|
|
146
144
|
contentRight: contentRightOption,
|
147
145
|
hasDivider,
|
148
146
|
helperText,
|
149
|
-
width,
|
150
147
|
} = props;
|
151
148
|
const items = Array(itemQuantity).fill(0);
|
152
149
|
const [index, setIndex] = useState(0);
|
153
150
|
|
154
151
|
return (
|
155
|
-
<Tabs
|
152
|
+
<Tabs
|
153
|
+
clip={clip}
|
154
|
+
view={hasDivider ? 'divider' : 'clear'}
|
155
|
+
disabled={disabled}
|
156
|
+
size={size}
|
157
|
+
style={{ width: '15rem' }}
|
158
|
+
>
|
156
159
|
{items.map((_, i) => {
|
157
160
|
if (helperText !== '') {
|
158
161
|
return (
|
@@ -192,7 +195,7 @@ const StoryHorizontalScroll = (props: HorizontalStoryTabsProps) => {
|
|
192
195
|
);
|
193
196
|
};
|
194
197
|
|
195
|
-
const StoryHorizontalShowAll = (props:
|
198
|
+
const StoryHorizontalShowAll = (props: StoryTabsProps) => {
|
196
199
|
const {
|
197
200
|
disabled,
|
198
201
|
itemQuantity,
|
@@ -279,15 +282,13 @@ const StoryHorizontalShowAll = (props: HorizontalStoryTabsProps) => {
|
|
279
282
|
);
|
280
283
|
};
|
281
284
|
|
282
|
-
export const HorizontalTabs: StoryObj<
|
285
|
+
export const HorizontalTabs: StoryObj<StoryTabsProps> = {
|
283
286
|
args: {
|
284
287
|
size: 'xs',
|
285
288
|
disabled: false,
|
286
289
|
hasDivider: true,
|
287
290
|
helperText: '',
|
288
291
|
itemQuantity: 8,
|
289
|
-
stretch: false,
|
290
|
-
width: '15rem',
|
291
292
|
},
|
292
293
|
argTypes: {
|
293
294
|
contentLeft: {
|
@@ -309,12 +310,6 @@ export const HorizontalTabs: StoryObj<HorizontalStoryTabsProps> = {
|
|
309
310
|
},
|
310
311
|
if: { arg: 'stretch', truthy: false },
|
311
312
|
},
|
312
|
-
width: {
|
313
|
-
control: {
|
314
|
-
type: 'text',
|
315
|
-
},
|
316
|
-
if: { arg: 'clip', eq: 'scroll' },
|
317
|
-
},
|
318
313
|
size: {
|
319
314
|
options: sizes,
|
320
315
|
control: {
|
@@ -334,7 +329,7 @@ export const HorizontalTabs: StoryObj<HorizontalStoryTabsProps> = {
|
|
334
329
|
},
|
335
330
|
};
|
336
331
|
|
337
|
-
const StoryVerticalDefault = (props:
|
332
|
+
const StoryVerticalDefault = (props: StoryTabsProps) => {
|
338
333
|
const {
|
339
334
|
disabled,
|
340
335
|
itemQuantity,
|
@@ -390,7 +385,7 @@ const StoryVerticalDefault = (props: VerticalStoryTabsProps) => {
|
|
390
385
|
);
|
391
386
|
};
|
392
387
|
|
393
|
-
const StoryVerticalScroll = (props:
|
388
|
+
const StoryVerticalScroll = (props: StoryTabsProps) => {
|
394
389
|
const {
|
395
390
|
disabled,
|
396
391
|
itemQuantity,
|
@@ -400,7 +395,6 @@ const StoryVerticalScroll = (props: VerticalStoryTabsProps) => {
|
|
400
395
|
contentRight: contentRightOption,
|
401
396
|
hasDivider,
|
402
397
|
helperText,
|
403
|
-
height,
|
404
398
|
} = props;
|
405
399
|
const items = Array(itemQuantity).fill(0);
|
406
400
|
const [index, setIndex] = useState(0);
|
@@ -411,8 +405,8 @@ const StoryVerticalScroll = (props: VerticalStoryTabsProps) => {
|
|
411
405
|
size={size as Size}
|
412
406
|
disabled={disabled}
|
413
407
|
clip={clip}
|
408
|
+
style={{ height: '10rem' }}
|
414
409
|
hasDivider={hasDivider}
|
415
|
-
style={{ height }}
|
416
410
|
>
|
417
411
|
{items.map((_, i) => {
|
418
412
|
if (helperText !== '') {
|
@@ -455,7 +449,7 @@ const StoryVerticalScroll = (props: VerticalStoryTabsProps) => {
|
|
455
449
|
);
|
456
450
|
};
|
457
451
|
|
458
|
-
const StoryVerticalShowAll = (props:
|
452
|
+
const StoryVerticalShowAll = (props: StoryTabsProps) => {
|
459
453
|
const {
|
460
454
|
disabled,
|
461
455
|
itemQuantity,
|
@@ -543,7 +537,7 @@ const StoryVerticalShowAll = (props: VerticalStoryTabsProps) => {
|
|
543
537
|
);
|
544
538
|
};
|
545
539
|
|
546
|
-
export const VerticalTabs: StoryObj<
|
540
|
+
export const VerticalTabs: StoryObj<StoryTabsProps> = {
|
547
541
|
args: {
|
548
542
|
size: 'xs',
|
549
543
|
disabled: false,
|
@@ -551,7 +545,6 @@ export const VerticalTabs: StoryObj<VerticalStoryTabsProps> = {
|
|
551
545
|
itemQuantity: 8,
|
552
546
|
orientation: 'vertical',
|
553
547
|
helperText: '',
|
554
|
-
height: '10rem',
|
555
548
|
},
|
556
549
|
argTypes: {
|
557
550
|
contentLeft: {
|
@@ -584,12 +577,6 @@ export const VerticalTabs: StoryObj<VerticalStoryTabsProps> = {
|
|
584
577
|
disable: true,
|
585
578
|
},
|
586
579
|
},
|
587
|
-
height: {
|
588
|
-
control: {
|
589
|
-
type: 'text',
|
590
|
-
},
|
591
|
-
if: { arg: 'clip', eq: 'scroll' },
|
592
|
-
},
|
593
580
|
},
|
594
581
|
render: (args) => {
|
595
582
|
switch (args.clip) {
|
@@ -1,5 +1,5 @@
|
|
1
1
|
var _IconCloseCircleOutli;
|
2
|
-
var _excluded = ["flow", "buttonType", "hasAttachment", "acceptedFileFormats", "size", "view", "className", "style", "isLoading", "disabled"];
|
2
|
+
var _excluded = ["flow", "buttonType", "hasAttachment", "acceptedFileFormats", "size", "view", "className", "style", "isLoading", "disabled", "id", "name", "onChange"];
|
3
3
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
4
4
|
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
5
5
|
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
@@ -36,6 +36,9 @@ export var attachRoot = function attachRoot(Root) {
|
|
36
36
|
style = props.style,
|
37
37
|
isLoading = props.isLoading,
|
38
38
|
disabled = props.disabled,
|
39
|
+
id = props.id,
|
40
|
+
name = props.name,
|
41
|
+
onChange = props.onChange,
|
39
42
|
rest = _objectWithoutProperties(props, _excluded);
|
40
43
|
var innerRef = useRef(null);
|
41
44
|
var ref = useForkRef(outerRef, innerRef);
|
@@ -104,11 +107,14 @@ export var attachRoot = function attachRoot(Root) {
|
|
104
107
|
}
|
105
108
|
inputRef.current.click();
|
106
109
|
};
|
107
|
-
var handleChange = function handleChange() {
|
108
|
-
if (!
|
110
|
+
var handleChange = function handleChange(e) {
|
111
|
+
if (!e.target.files) {
|
109
112
|
return;
|
110
113
|
}
|
111
|
-
|
114
|
+
if (onChange) {
|
115
|
+
onChange(e);
|
116
|
+
}
|
117
|
+
setFilename(e.target.files[0].name);
|
112
118
|
};
|
113
119
|
var handleClear = function handleClear() {
|
114
120
|
if (!inputRef.current) {
|
@@ -128,12 +134,11 @@ export var attachRoot = function attachRoot(Root) {
|
|
128
134
|
ref: inputRef,
|
129
135
|
accept: accept,
|
130
136
|
type: "file",
|
131
|
-
id:
|
132
|
-
name:
|
137
|
+
id: id,
|
138
|
+
name: name,
|
133
139
|
onChange: handleChange
|
134
140
|
}), /*#__PURE__*/React.createElement(StyledHiddenInputHelper, {
|
135
|
-
ref: inputHelperRef
|
136
|
-
id: "attachHiddenInputHelper"
|
141
|
+
ref: inputHelperRef
|
137
142
|
}, filename), /*#__PURE__*/React.createElement(AttachButton, _extends({
|
138
143
|
buttonType: buttonType,
|
139
144
|
view: view,
|
@@ -83,7 +83,7 @@ export var horizontalTabsRoot = function horizontalTabsRoot(Root) {
|
|
83
83
|
});
|
84
84
|
firstOverflowingTab === null || firstOverflowingTab === void 0 || (_firstOverflowingTab$ = firstOverflowingTab.current) === null || _firstOverflowingTab$ === void 0 || _firstOverflowingTab$.scrollIntoView({
|
85
85
|
block: 'nearest',
|
86
|
-
inline: '
|
86
|
+
inline: 'nearest'
|
87
87
|
});
|
88
88
|
}, [disabled, scrollRef, refs]);
|
89
89
|
var onNext = useCallback(function () {
|
@@ -101,7 +101,7 @@ export var horizontalTabsRoot = function horizontalTabsRoot(Root) {
|
|
101
101
|
});
|
102
102
|
lastOverflowingTab === null || lastOverflowingTab === void 0 || (_lastOverflowingTab$c = lastOverflowingTab.current) === null || _lastOverflowingTab$c === void 0 || _lastOverflowingTab$c.scrollIntoView({
|
103
103
|
block: 'nearest',
|
104
|
-
inline: '
|
104
|
+
inline: 'nearest'
|
105
105
|
});
|
106
106
|
}, [disabled, scrollRef, refs]);
|
107
107
|
var PreviousButton = useMemo(function () {
|
@@ -76,7 +76,7 @@ export var verticalTabsRoot = function verticalTabsRoot(Root) {
|
|
76
76
|
return tabStartY < scrollTop;
|
77
77
|
});
|
78
78
|
firstOverflowingTab === null || firstOverflowingTab === void 0 || (_firstOverflowingTab$ = firstOverflowingTab.current) === null || _firstOverflowingTab$ === void 0 || _firstOverflowingTab$.scrollIntoView({
|
79
|
-
block: '
|
79
|
+
block: 'nearest',
|
80
80
|
inline: 'nearest'
|
81
81
|
});
|
82
82
|
}, [disabled, scrollRef, refs]);
|
@@ -94,7 +94,7 @@ export var verticalTabsRoot = function verticalTabsRoot(Root) {
|
|
94
94
|
return tabEndY > scrollBottom;
|
95
95
|
});
|
96
96
|
lastOverflowingTab === null || lastOverflowingTab === void 0 || (_lastOverflowingTab$c = lastOverflowingTab.current) === null || _lastOverflowingTab$c === void 0 || _lastOverflowingTab$c.scrollIntoView({
|
97
|
-
block: '
|
97
|
+
block: 'nearest',
|
98
98
|
inline: 'nearest'
|
99
99
|
});
|
100
100
|
}, [disabled, scrollRef, refs]);
|
@@ -50,8 +50,6 @@ const getContentRight = (contentRightOption: string, size: Size) => {
|
|
50
50
|
};
|
51
51
|
|
52
52
|
type StoryTabsProps = ComponentProps<typeof Tabs> & CustomStoryTabsProps;
|
53
|
-
type HorizontalStoryTabsProps = StoryTabsProps & { width: string };
|
54
|
-
type VerticalStoryTabsProps = StoryTabsProps & { height: string };
|
55
53
|
|
56
54
|
const meta: Meta<StoryTabsProps> = {
|
57
55
|
title: 'plasma_b2c/Tabs',
|
@@ -81,7 +79,7 @@ const meta: Meta<StoryTabsProps> = {
|
|
81
79
|
|
82
80
|
export default meta;
|
83
81
|
|
84
|
-
const StoryHorizontalDefault = (props:
|
82
|
+
const StoryHorizontalDefault = (props: StoryTabsProps) => {
|
85
83
|
const {
|
86
84
|
disabled,
|
87
85
|
itemQuantity,
|
@@ -136,7 +134,7 @@ const StoryHorizontalDefault = (props: HorizontalStoryTabsProps) => {
|
|
136
134
|
);
|
137
135
|
};
|
138
136
|
|
139
|
-
const StoryHorizontalScroll = (props:
|
137
|
+
const StoryHorizontalScroll = (props: StoryTabsProps) => {
|
140
138
|
const {
|
141
139
|
disabled,
|
142
140
|
itemQuantity,
|
@@ -146,13 +144,18 @@ const StoryHorizontalScroll = (props: HorizontalStoryTabsProps) => {
|
|
146
144
|
contentRight: contentRightOption,
|
147
145
|
hasDivider,
|
148
146
|
helperText,
|
149
|
-
width,
|
150
147
|
} = props;
|
151
148
|
const items = Array(itemQuantity).fill(0);
|
152
149
|
const [index, setIndex] = useState(0);
|
153
150
|
|
154
151
|
return (
|
155
|
-
<Tabs
|
152
|
+
<Tabs
|
153
|
+
clip={clip}
|
154
|
+
view={hasDivider ? 'divider' : 'clear'}
|
155
|
+
disabled={disabled}
|
156
|
+
size={size}
|
157
|
+
style={{ width: '15rem' }}
|
158
|
+
>
|
156
159
|
{items.map((_, i) => {
|
157
160
|
if (helperText !== '') {
|
158
161
|
return (
|
@@ -192,7 +195,7 @@ const StoryHorizontalScroll = (props: HorizontalStoryTabsProps) => {
|
|
192
195
|
);
|
193
196
|
};
|
194
197
|
|
195
|
-
const StoryHorizontalShowAll = (props:
|
198
|
+
const StoryHorizontalShowAll = (props: StoryTabsProps) => {
|
196
199
|
const {
|
197
200
|
disabled,
|
198
201
|
itemQuantity,
|
@@ -279,15 +282,13 @@ const StoryHorizontalShowAll = (props: HorizontalStoryTabsProps) => {
|
|
279
282
|
);
|
280
283
|
};
|
281
284
|
|
282
|
-
export const HorizontalTabs: StoryObj<
|
285
|
+
export const HorizontalTabs: StoryObj<StoryTabsProps> = {
|
283
286
|
args: {
|
284
287
|
size: 'xs',
|
285
288
|
disabled: false,
|
286
289
|
hasDivider: true,
|
287
290
|
helperText: '',
|
288
291
|
itemQuantity: 8,
|
289
|
-
stretch: false,
|
290
|
-
width: '15rem',
|
291
292
|
},
|
292
293
|
argTypes: {
|
293
294
|
contentLeft: {
|
@@ -309,12 +310,6 @@ export const HorizontalTabs: StoryObj<HorizontalStoryTabsProps> = {
|
|
309
310
|
},
|
310
311
|
if: { arg: 'stretch', truthy: false },
|
311
312
|
},
|
312
|
-
width: {
|
313
|
-
control: {
|
314
|
-
type: 'text',
|
315
|
-
},
|
316
|
-
if: { arg: 'clip', eq: 'scroll' },
|
317
|
-
},
|
318
313
|
size: {
|
319
314
|
options: sizes,
|
320
315
|
control: {
|
@@ -334,7 +329,7 @@ export const HorizontalTabs: StoryObj<HorizontalStoryTabsProps> = {
|
|
334
329
|
},
|
335
330
|
};
|
336
331
|
|
337
|
-
const StoryVerticalDefault = (props:
|
332
|
+
const StoryVerticalDefault = (props: StoryTabsProps) => {
|
338
333
|
const {
|
339
334
|
disabled,
|
340
335
|
itemQuantity,
|
@@ -390,7 +385,7 @@ const StoryVerticalDefault = (props: VerticalStoryTabsProps) => {
|
|
390
385
|
);
|
391
386
|
};
|
392
387
|
|
393
|
-
const StoryVerticalScroll = (props:
|
388
|
+
const StoryVerticalScroll = (props: StoryTabsProps) => {
|
394
389
|
const {
|
395
390
|
disabled,
|
396
391
|
itemQuantity,
|
@@ -400,7 +395,6 @@ const StoryVerticalScroll = (props: VerticalStoryTabsProps) => {
|
|
400
395
|
contentRight: contentRightOption,
|
401
396
|
hasDivider,
|
402
397
|
helperText,
|
403
|
-
height,
|
404
398
|
} = props;
|
405
399
|
const items = Array(itemQuantity).fill(0);
|
406
400
|
const [index, setIndex] = useState(0);
|
@@ -411,8 +405,8 @@ const StoryVerticalScroll = (props: VerticalStoryTabsProps) => {
|
|
411
405
|
size={size as Size}
|
412
406
|
disabled={disabled}
|
413
407
|
clip={clip}
|
408
|
+
style={{ height: '10rem' }}
|
414
409
|
hasDivider={hasDivider}
|
415
|
-
style={{ height }}
|
416
410
|
>
|
417
411
|
{items.map((_, i) => {
|
418
412
|
if (helperText !== '') {
|
@@ -455,7 +449,7 @@ const StoryVerticalScroll = (props: VerticalStoryTabsProps) => {
|
|
455
449
|
);
|
456
450
|
};
|
457
451
|
|
458
|
-
const StoryVerticalShowAll = (props:
|
452
|
+
const StoryVerticalShowAll = (props: StoryTabsProps) => {
|
459
453
|
const {
|
460
454
|
disabled,
|
461
455
|
itemQuantity,
|
@@ -543,7 +537,7 @@ const StoryVerticalShowAll = (props: VerticalStoryTabsProps) => {
|
|
543
537
|
);
|
544
538
|
};
|
545
539
|
|
546
|
-
export const VerticalTabs: StoryObj<
|
540
|
+
export const VerticalTabs: StoryObj<StoryTabsProps> = {
|
547
541
|
args: {
|
548
542
|
size: 'xs',
|
549
543
|
disabled: false,
|
@@ -551,7 +545,6 @@ export const VerticalTabs: StoryObj<VerticalStoryTabsProps> = {
|
|
551
545
|
itemQuantity: 8,
|
552
546
|
orientation: 'vertical',
|
553
547
|
helperText: '',
|
554
|
-
height: '10rem',
|
555
548
|
},
|
556
549
|
argTypes: {
|
557
550
|
contentLeft: {
|
@@ -584,12 +577,6 @@ export const VerticalTabs: StoryObj<VerticalStoryTabsProps> = {
|
|
584
577
|
disable: true,
|
585
578
|
},
|
586
579
|
},
|
587
|
-
height: {
|
588
|
-
control: {
|
589
|
-
type: 'text',
|
590
|
-
},
|
591
|
-
if: { arg: 'clip', eq: 'scroll' },
|
592
|
-
},
|
593
580
|
},
|
594
581
|
render: (args) => {
|
595
582
|
switch (args.clip) {
|