@salutejs/plasma-new-hope 0.182.0-canary.1500.11610401138.0 → 0.182.0-canary.1520.11610474283.0
Sign up to get free protection for your applications and to get access to all the features.
- package/cjs/components/Badge/Badge.css +0 -2
- package/cjs/components/Badge/Badge.js +4 -17
- package/cjs/components/Badge/Badge.js.map +1 -1
- package/cjs/components/Badge/Badge.tokens.js +1 -2
- package/cjs/components/Badge/Badge.tokens.js.map +1 -1
- package/cjs/components/Tabs/tokens.js +1 -2
- package/cjs/components/Tabs/tokens.js.map +1 -1
- package/cjs/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.css +5 -7
- package/cjs/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.js +3 -14
- package/cjs/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.js.map +1 -1
- package/cjs/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.styles.js +1 -1
- package/cjs/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.styles.js.map +1 -1
- package/{es/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.styles_1vj7dbl.css → cjs/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.styles_hfqv5b.css} +1 -1
- package/cjs/components/Tabs/ui/vertical/VerticalTabItem/VerticalTabItem.css +5 -7
- package/cjs/components/Tabs/ui/vertical/VerticalTabItem/VerticalTabItem.js +3 -14
- package/cjs/components/Tabs/ui/vertical/VerticalTabItem/VerticalTabItem.js.map +1 -1
- package/cjs/components/Tabs/ui/vertical/VerticalTabItem/VerticalTabItem.styles.js +1 -1
- package/cjs/components/Tabs/ui/vertical/VerticalTabItem/VerticalTabItem.styles.js.map +1 -1
- package/cjs/components/Tabs/ui/vertical/VerticalTabItem/VerticalTabItem.styles_16d3lah.css +5 -0
- package/cjs/components/TextArea/TextArea.js +1 -1
- package/cjs/components/TextArea/TextArea.js.map +1 -1
- package/cjs/components/TextArea/hooks/useAutoResize.js +3 -3
- package/cjs/components/TextArea/hooks/useAutoResize.js.map +1 -1
- package/cjs/index.css +10 -16
- package/emotion/cjs/components/Badge/Badge.js +4 -22
- package/emotion/cjs/components/Badge/Badge.tokens.js +1 -2
- package/emotion/cjs/components/Tabs/tokens.js +1 -2
- package/emotion/cjs/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.js +3 -19
- package/emotion/cjs/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.styles.js +6 -6
- package/emotion/cjs/components/Tabs/ui/vertical/VerticalTabItem/VerticalTabItem.js +3 -19
- package/emotion/cjs/components/Tabs/ui/vertical/VerticalTabItem/VerticalTabItem.styles.js +6 -6
- package/emotion/cjs/components/TextArea/TextArea.js +2 -2
- package/emotion/cjs/components/TextArea/hooks/useAutoResize.js +3 -3
- package/emotion/cjs/examples/plasma_b2c/components/Badge/Badge.config.js +14 -17
- package/emotion/cjs/examples/plasma_b2c/components/Badge/Badge.stories.tsx +1 -5
- package/emotion/cjs/examples/plasma_b2c/components/Tabs/Tabs.stories.tsx +19 -51
- package/emotion/cjs/examples/plasma_b2c/components/Tabs/horizontal/HorizontalTabItem.config.js +15 -18
- package/emotion/cjs/examples/plasma_b2c/components/Tabs/vertical/VerticalTabItem.config.js +6 -9
- package/emotion/cjs/examples/plasma_web/components/Tabs/Tabs.stories.tsx +19 -51
- package/emotion/cjs/examples/plasma_web/components/Tabs/horizontal/HorizontalTabItem.config.js +15 -18
- package/emotion/cjs/examples/plasma_web/components/Tabs/vertical/VerticalTabItem.config.js +6 -9
- package/emotion/es/components/Badge/Badge.js +4 -23
- package/emotion/es/components/Badge/Badge.tokens.js +1 -2
- package/emotion/es/components/Tabs/tokens.js +1 -2
- package/emotion/es/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.js +3 -20
- package/emotion/es/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.styles.js +6 -6
- package/emotion/es/components/Tabs/ui/vertical/VerticalTabItem/VerticalTabItem.js +3 -20
- package/emotion/es/components/Tabs/ui/vertical/VerticalTabItem/VerticalTabItem.styles.js +6 -6
- package/emotion/es/components/TextArea/TextArea.js +2 -2
- package/emotion/es/components/TextArea/hooks/useAutoResize.js +3 -3
- package/emotion/es/examples/plasma_b2c/components/Badge/Badge.config.js +14 -17
- package/emotion/es/examples/plasma_b2c/components/Badge/Badge.stories.tsx +1 -5
- package/emotion/es/examples/plasma_b2c/components/Tabs/Tabs.stories.tsx +19 -51
- package/emotion/es/examples/plasma_b2c/components/Tabs/horizontal/HorizontalTabItem.config.js +15 -18
- package/emotion/es/examples/plasma_b2c/components/Tabs/vertical/VerticalTabItem.config.js +6 -9
- package/emotion/es/examples/plasma_web/components/Tabs/Tabs.stories.tsx +19 -51
- package/emotion/es/examples/plasma_web/components/Tabs/horizontal/HorizontalTabItem.config.js +15 -18
- package/emotion/es/examples/plasma_web/components/Tabs/vertical/VerticalTabItem.config.js +6 -9
- package/es/components/Badge/Badge.css +0 -2
- package/es/components/Badge/Badge.js +5 -18
- package/es/components/Badge/Badge.js.map +1 -1
- package/es/components/Badge/Badge.tokens.js +1 -2
- package/es/components/Badge/Badge.tokens.js.map +1 -1
- package/es/components/Tabs/tokens.js +1 -2
- package/es/components/Tabs/tokens.js.map +1 -1
- package/es/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.css +5 -7
- package/es/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.js +4 -15
- package/es/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.js.map +1 -1
- package/es/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.styles.js +1 -1
- package/es/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.styles.js.map +1 -1
- package/{cjs/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.styles_1vj7dbl.css → es/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.styles_hfqv5b.css} +1 -1
- package/es/components/Tabs/ui/vertical/VerticalTabItem/VerticalTabItem.css +5 -7
- package/es/components/Tabs/ui/vertical/VerticalTabItem/VerticalTabItem.js +4 -15
- package/es/components/Tabs/ui/vertical/VerticalTabItem/VerticalTabItem.js.map +1 -1
- package/es/components/Tabs/ui/vertical/VerticalTabItem/VerticalTabItem.styles.js +1 -1
- package/es/components/Tabs/ui/vertical/VerticalTabItem/VerticalTabItem.styles.js.map +1 -1
- package/es/components/Tabs/ui/vertical/VerticalTabItem/VerticalTabItem.styles_16d3lah.css +5 -0
- package/es/components/TextArea/TextArea.js +1 -1
- package/es/components/TextArea/TextArea.js.map +1 -1
- package/es/components/TextArea/hooks/useAutoResize.js +3 -3
- package/es/components/TextArea/hooks/useAutoResize.js.map +1 -1
- package/es/index.css +10 -16
- package/package.json +2 -2
- package/styled-components/cjs/components/Badge/Badge.js +4 -22
- package/styled-components/cjs/components/Badge/Badge.tokens.js +1 -2
- package/styled-components/cjs/components/Tabs/tokens.js +1 -2
- package/styled-components/cjs/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.js +3 -19
- package/styled-components/cjs/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.styles.js +1 -1
- package/styled-components/cjs/components/Tabs/ui/vertical/VerticalTabItem/VerticalTabItem.js +3 -19
- package/styled-components/cjs/components/Tabs/ui/vertical/VerticalTabItem/VerticalTabItem.styles.js +2 -2
- package/styled-components/cjs/components/TextArea/TextArea.js +1 -1
- package/styled-components/cjs/components/TextArea/hooks/useAutoResize.js +3 -3
- package/styled-components/cjs/examples/plasma_b2c/components/Badge/Badge.config.js +0 -3
- package/styled-components/cjs/examples/plasma_b2c/components/Badge/Badge.stories.tsx +1 -5
- package/styled-components/cjs/examples/plasma_b2c/components/Tabs/Tabs.stories.tsx +19 -51
- package/styled-components/cjs/examples/plasma_b2c/components/Tabs/horizontal/HorizontalTabItem.config.js +0 -3
- package/styled-components/cjs/examples/plasma_b2c/components/Tabs/vertical/VerticalTabItem.config.js +0 -3
- package/styled-components/cjs/examples/plasma_web/components/Tabs/Tabs.stories.tsx +19 -51
- package/styled-components/cjs/examples/plasma_web/components/Tabs/horizontal/HorizontalTabItem.config.js +0 -3
- package/styled-components/cjs/examples/plasma_web/components/Tabs/vertical/VerticalTabItem.config.js +0 -3
- package/styled-components/es/components/Badge/Badge.js +4 -23
- package/styled-components/es/components/Badge/Badge.tokens.js +1 -2
- package/styled-components/es/components/Tabs/tokens.js +1 -2
- package/styled-components/es/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.js +3 -20
- package/styled-components/es/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.styles.js +1 -1
- package/styled-components/es/components/Tabs/ui/vertical/VerticalTabItem/VerticalTabItem.js +3 -20
- package/styled-components/es/components/Tabs/ui/vertical/VerticalTabItem/VerticalTabItem.styles.js +2 -2
- package/styled-components/es/components/TextArea/TextArea.js +1 -1
- package/styled-components/es/components/TextArea/hooks/useAutoResize.js +3 -3
- package/styled-components/es/examples/plasma_b2c/components/Badge/Badge.config.js +0 -3
- package/styled-components/es/examples/plasma_b2c/components/Badge/Badge.stories.tsx +1 -5
- package/styled-components/es/examples/plasma_b2c/components/Tabs/Tabs.stories.tsx +19 -51
- package/styled-components/es/examples/plasma_b2c/components/Tabs/horizontal/HorizontalTabItem.config.js +0 -3
- package/styled-components/es/examples/plasma_b2c/components/Tabs/vertical/VerticalTabItem.config.js +0 -3
- package/styled-components/es/examples/plasma_web/components/Tabs/Tabs.stories.tsx +19 -51
- package/styled-components/es/examples/plasma_web/components/Tabs/horizontal/HorizontalTabItem.config.js +0 -3
- package/styled-components/es/examples/plasma_web/components/Tabs/vertical/VerticalTabItem.config.js +0 -3
- package/types/components/Badge/Badge.d.ts +2 -10
- package/types/components/Badge/Badge.d.ts.map +1 -1
- package/types/components/Badge/Badge.tokens.d.ts +0 -1
- package/types/components/Badge/Badge.tokens.d.ts.map +1 -1
- package/types/components/Badge/Badge.types.d.ts +0 -5
- package/types/components/Badge/Badge.types.d.ts.map +1 -1
- package/types/components/Tabs/TabItem.types.d.ts +0 -5
- package/types/components/Tabs/TabItem.types.d.ts.map +1 -1
- package/types/components/Tabs/tokens.d.ts +0 -1
- package/types/components/Tabs/tokens.d.ts.map +1 -1
- package/types/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.d.ts +2 -9
- package/types/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.d.ts.map +1 -1
- package/types/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.styles.d.ts.map +1 -1
- package/types/components/Tabs/ui/vertical/VerticalTabItem/VerticalTabItem.d.ts +2 -9
- package/types/components/Tabs/ui/vertical/VerticalTabItem/VerticalTabItem.d.ts.map +1 -1
- package/types/components/Tabs/ui/vertical/VerticalTabItem/VerticalTabItem.styles.d.ts.map +1 -1
- package/types/components/TextArea/hooks/useAutoResize.d.ts +1 -1
- package/types/components/TextArea/hooks/useAutoResize.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/Badge/Badge.config.d.ts +0 -3
- package/types/examples/plasma_b2c/components/Badge/Badge.config.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/Badge/Badge.d.ts +0 -6
- package/types/examples/plasma_b2c/components/Badge/Badge.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/Tabs/TabItem.d.ts +0 -6
- package/types/examples/plasma_b2c/components/Tabs/TabItem.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/Tabs/horizontal/HorizontalTabItem.config.d.ts +0 -3
- package/types/examples/plasma_b2c/components/Tabs/horizontal/HorizontalTabItem.config.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/Tabs/vertical/VerticalTabItem.config.d.ts +0 -3
- package/types/examples/plasma_b2c/components/Tabs/vertical/VerticalTabItem.config.d.ts.map +1 -1
- package/types/examples/plasma_web/components/Badge/Badge.d.ts +0 -3
- package/types/examples/plasma_web/components/Badge/Badge.d.ts.map +1 -1
- package/types/examples/plasma_web/components/Tabs/TabItem.d.ts +0 -6
- package/types/examples/plasma_web/components/Tabs/TabItem.d.ts.map +1 -1
- package/types/examples/plasma_web/components/Tabs/horizontal/HorizontalTabItem.config.d.ts +0 -3
- package/types/examples/plasma_web/components/Tabs/horizontal/HorizontalTabItem.config.d.ts.map +1 -1
- package/types/examples/plasma_web/components/Tabs/vertical/VerticalTabItem.config.d.ts +0 -3
- package/types/examples/plasma_web/components/Tabs/vertical/VerticalTabItem.config.d.ts.map +1 -1
- package/cjs/components/Badge/variations/_truncate/base.js +0 -9
- package/cjs/components/Badge/variations/_truncate/base.js.map +0 -1
- package/cjs/components/Badge/variations/_truncate/base_nf9u2h.css +0 -1
- package/cjs/components/Tabs/ui/horizontal/HorizontalTabItem/variations/_truncate/base.js +0 -9
- package/cjs/components/Tabs/ui/horizontal/HorizontalTabItem/variations/_truncate/base.js.map +0 -1
- package/cjs/components/Tabs/ui/horizontal/HorizontalTabItem/variations/_truncate/base_1b34xv3.css +0 -1
- package/cjs/components/Tabs/ui/vertical/VerticalTabItem/VerticalTabItem.styles_hh65kv.css +0 -5
- package/cjs/components/Tabs/ui/vertical/VerticalTabItem/variations/_truncate/base.js +0 -9
- package/cjs/components/Tabs/ui/vertical/VerticalTabItem/variations/_truncate/base.js.map +0 -1
- package/cjs/components/Tabs/ui/vertical/VerticalTabItem/variations/_truncate/base_1nwonlh.css +0 -1
- package/emotion/cjs/components/Badge/variations/_truncate/base.js +0 -10
- package/emotion/cjs/components/Badge/variations/_truncate/tokens.json +0 -1
- package/emotion/cjs/components/Tabs/ui/horizontal/HorizontalTabItem/variations/_truncate/base.js +0 -10
- package/emotion/cjs/components/Tabs/ui/horizontal/HorizontalTabItem/variations/_truncate/tokens.json +0 -1
- package/emotion/cjs/components/Tabs/ui/vertical/VerticalTabItem/variations/_truncate/base.js +0 -10
- package/emotion/cjs/components/Tabs/ui/vertical/VerticalTabItem/variations/_truncate/tokens.json +0 -1
- package/emotion/es/components/Badge/variations/_truncate/base.js +0 -4
- package/emotion/es/components/Badge/variations/_truncate/tokens.json +0 -1
- package/emotion/es/components/Tabs/ui/horizontal/HorizontalTabItem/variations/_truncate/base.js +0 -4
- package/emotion/es/components/Tabs/ui/horizontal/HorizontalTabItem/variations/_truncate/tokens.json +0 -1
- package/emotion/es/components/Tabs/ui/vertical/VerticalTabItem/variations/_truncate/base.js +0 -4
- package/emotion/es/components/Tabs/ui/vertical/VerticalTabItem/variations/_truncate/tokens.json +0 -1
- package/es/components/Badge/variations/_truncate/base.js +0 -5
- package/es/components/Badge/variations/_truncate/base.js.map +0 -1
- package/es/components/Badge/variations/_truncate/base_nf9u2h.css +0 -1
- package/es/components/Tabs/ui/horizontal/HorizontalTabItem/variations/_truncate/base.js +0 -5
- package/es/components/Tabs/ui/horizontal/HorizontalTabItem/variations/_truncate/base.js.map +0 -1
- package/es/components/Tabs/ui/horizontal/HorizontalTabItem/variations/_truncate/base_1b34xv3.css +0 -1
- package/es/components/Tabs/ui/vertical/VerticalTabItem/VerticalTabItem.styles_hh65kv.css +0 -5
- package/es/components/Tabs/ui/vertical/VerticalTabItem/variations/_truncate/base.js +0 -5
- package/es/components/Tabs/ui/vertical/VerticalTabItem/variations/_truncate/base.js.map +0 -1
- package/es/components/Tabs/ui/vertical/VerticalTabItem/variations/_truncate/base_1nwonlh.css +0 -1
- package/styled-components/cjs/components/Badge/variations/_truncate/base.js +0 -10
- package/styled-components/cjs/components/Badge/variations/_truncate/tokens.json +0 -1
- package/styled-components/cjs/components/Tabs/ui/horizontal/HorizontalTabItem/variations/_truncate/base.js +0 -10
- package/styled-components/cjs/components/Tabs/ui/horizontal/HorizontalTabItem/variations/_truncate/tokens.json +0 -1
- package/styled-components/cjs/components/Tabs/ui/vertical/VerticalTabItem/variations/_truncate/base.js +0 -10
- package/styled-components/cjs/components/Tabs/ui/vertical/VerticalTabItem/variations/_truncate/tokens.json +0 -1
- package/styled-components/es/components/Badge/variations/_truncate/base.js +0 -4
- package/styled-components/es/components/Badge/variations/_truncate/tokens.json +0 -1
- package/styled-components/es/components/Tabs/ui/horizontal/HorizontalTabItem/variations/_truncate/base.js +0 -4
- package/styled-components/es/components/Tabs/ui/horizontal/HorizontalTabItem/variations/_truncate/tokens.json +0 -1
- package/styled-components/es/components/Tabs/ui/vertical/VerticalTabItem/variations/_truncate/base.js +0 -4
- package/styled-components/es/components/Tabs/ui/vertical/VerticalTabItem/variations/_truncate/tokens.json +0 -1
- package/types/components/Badge/variations/_truncate/base.d.ts +0 -2
- package/types/components/Badge/variations/_truncate/base.d.ts.map +0 -1
- package/types/components/Tabs/ui/horizontal/HorizontalTabItem/variations/_truncate/base.d.ts +0 -2
- package/types/components/Tabs/ui/horizontal/HorizontalTabItem/variations/_truncate/base.d.ts.map +0 -1
- package/types/components/Tabs/ui/vertical/VerticalTabItem/variations/_truncate/base.d.ts +0 -2
- package/types/components/Tabs/ui/vertical/VerticalTabItem/variations/_truncate/base.d.ts.map +0 -1
@@ -1,11 +1,5 @@
|
|
1
|
-
|
2
|
-
var _excluded = ["children", "className", "text", "contentLeft", "contentRight", "size", "view", "pilled", "transparent", "clear", "maxWidth"];
|
1
|
+
var _excluded = ["children", "className", "text", "contentLeft", "contentRight", "size", "view", "pilled", "transparent", "clear"];
|
3
2
|
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
|
-
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
5
|
-
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
6
|
-
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
7
|
-
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
|
8
|
-
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
9
3
|
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
10
4
|
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
11
5
|
import React, { forwardRef } from 'react';
|
@@ -15,7 +9,6 @@ import { base as sizeCSS } from './variations/_size/base';
|
|
15
9
|
import { base as pilledCSS } from './variations/_pilled/base';
|
16
10
|
import { base as transparentCSS } from './variations/_transparent/base';
|
17
11
|
import { base as clearCSS } from './variations/_clear/base';
|
18
|
-
import { base as truncateCSS } from './variations/_truncate/base';
|
19
12
|
import { StyledContentLeft, StyledContentMain, StyledContentRight, base } from './Badge.styles';
|
20
13
|
import { classes } from './Badge.tokens';
|
21
14
|
export var badgeRoot = function badgeRoot(Root) {
|
@@ -33,28 +26,20 @@ export var badgeRoot = function badgeRoot(Root) {
|
|
33
26
|
transparent = _props$transparent === void 0 ? false : _props$transparent,
|
34
27
|
_props$clear = props.clear,
|
35
28
|
clear = _props$clear === void 0 ? false : _props$clear,
|
36
|
-
_props$maxWidth = props.maxWidth,
|
37
|
-
maxWidth = _props$maxWidth === void 0 ? 'auto' : _props$maxWidth,
|
38
29
|
rest = _objectWithoutProperties(props, _excluded);
|
39
30
|
var pilledClass = pilled ? classes.badgePilled : undefined;
|
40
31
|
var transparentClass = transparent ? classes.badgeTransparent : undefined;
|
41
32
|
var clearClass = clear ? classes.badgeClear : undefined;
|
42
33
|
var txt = !text && typeof children === 'string' ? children : text;
|
43
|
-
var truncate = maxWidth !== 'auto';
|
44
34
|
return /*#__PURE__*/React.createElement(Root, _extends({
|
45
35
|
ref: ref,
|
46
|
-
className: cx(pilledClass, transparentClass, clearClass,
|
36
|
+
className: cx(pilledClass, transparentClass, clearClass, className),
|
47
37
|
view: view,
|
48
38
|
size: size,
|
49
39
|
pilled: pilled,
|
50
40
|
transparent: transparent,
|
51
|
-
clear: clear
|
52
|
-
|
53
|
-
}, rest, {
|
54
|
-
style: _objectSpread(_objectSpread({}, rest.style), {}, {
|
55
|
-
maxWidth: maxWidth
|
56
|
-
})
|
57
|
-
}), contentLeft && /*#__PURE__*/React.createElement(StyledContentLeft, null, contentLeft), txt ? /*#__PURE__*/React.createElement(StyledContentMain, null, txt) : children, contentRight && /*#__PURE__*/React.createElement(StyledContentRight, null, contentRight));
|
41
|
+
clear: clear
|
42
|
+
}, rest), contentLeft && /*#__PURE__*/React.createElement(StyledContentLeft, null, contentLeft), txt ? /*#__PURE__*/React.createElement(StyledContentMain, null, txt) : children, contentRight && /*#__PURE__*/React.createElement(StyledContentRight, null, contentRight));
|
58
43
|
});
|
59
44
|
};
|
60
45
|
export var badgeConfig = {
|
@@ -80,10 +65,6 @@ export var badgeConfig = {
|
|
80
65
|
clear: {
|
81
66
|
css: clearCSS,
|
82
67
|
attrs: true
|
83
|
-
},
|
84
|
-
truncate: {
|
85
|
-
css: truncateCSS,
|
86
|
-
attrs: true
|
87
68
|
}
|
88
69
|
},
|
89
70
|
defaults: {
|
@@ -14,8 +14,7 @@ export var classes = {
|
|
14
14
|
tabsHasTopArrow: 'tabs-has-top-arrow',
|
15
15
|
tabsHasBottomArrow: 'tabs-has-bottom-arrow',
|
16
16
|
tabsClipScroll: 'tabs-clip-scroll',
|
17
|
-
tabsClipShowAll: 'tabs-clip-show-all'
|
18
|
-
tabsTruncate: 'tabs-truncate'
|
17
|
+
tabsClipShowAll: 'tabs-clip-show-all'
|
19
18
|
};
|
20
19
|
export var tokens = {
|
21
20
|
disabledOpacity: '--plasma-tabs-disabled-opacity',
|
package/styled-components/es/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.js
CHANGED
@@ -1,11 +1,5 @@
|
|
1
|
-
|
2
|
-
var _excluded = ["size", "view", "isActive", "selected", "disabled", "pilled", "children", "value", "contentLeft", "contentRight", "animated", "onIndexChange", "itemIndex", "tabIndex", "className", "onClick", "maxItemWidth"];
|
1
|
+
var _excluded = ["size", "view", "isActive", "selected", "disabled", "pilled", "children", "value", "contentLeft", "contentRight", "animated", "onIndexChange", "itemIndex", "tabIndex", "className", "onClick"];
|
3
2
|
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
|
-
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
5
|
-
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
6
|
-
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
7
|
-
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
|
8
|
-
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
9
3
|
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
10
4
|
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
11
5
|
import React, { forwardRef, useRef, useContext, useEffect, useCallback } from 'react';
|
@@ -17,7 +11,6 @@ import { base as viewCSS } from './variations/_view/base';
|
|
17
11
|
import { base as sizeCSS } from './variations/_size/base';
|
18
12
|
import { base as pilledCSS } from './variations/_pilled/base';
|
19
13
|
import { base as disabledCSS } from './variations/_disabled/base';
|
20
|
-
import { base as truncateCSS } from './variations/_truncate/base';
|
21
14
|
import { LeftContent, RightContent, StyledContent, TabItemValue, base } from './HorizontalTabItem.styles';
|
22
15
|
export var horizontalTabItemRoot = function horizontalTabItemRoot(Root) {
|
23
16
|
return /*#__PURE__*/forwardRef(function (props, outerRef) {
|
@@ -40,13 +33,11 @@ export var horizontalTabItemRoot = function horizontalTabItemRoot(Root) {
|
|
40
33
|
tabIndex = props.tabIndex,
|
41
34
|
className = props.className,
|
42
35
|
onClick = props.onClick,
|
43
|
-
maxWidth = props.maxItemWidth,
|
44
36
|
rest = _objectWithoutProperties(props, _excluded);
|
45
37
|
var innerRef = useRef(null);
|
46
38
|
var ref = useForkRef(outerRef, innerRef);
|
47
39
|
var refs = useContext(TabsContext);
|
48
40
|
var role = 'tab';
|
49
|
-
var truncate = maxWidth !== 'auto';
|
50
41
|
var pilledAttr = view !== 'clear' && pilled;
|
51
42
|
var animatedClass = animated ? classes.tabItemAnimated : undefined;
|
52
43
|
var pilledClass = pilledAttr ? classes.tabsPilled : undefined;
|
@@ -105,16 +96,11 @@ export var horizontalTabItemRoot = function horizontalTabItemRoot(Root) {
|
|
105
96
|
// TODO: убрать каст any, когда будут удалены deprecated props
|
106
97
|
,
|
107
98
|
size: size,
|
108
|
-
truncate: truncate,
|
109
99
|
onFocus: onItemFocus,
|
110
100
|
tabIndex: hasKeyNavigation ? navigationTabIndex : tabIndex,
|
111
|
-
className: cx(pilledClass, selectedClass, animatedClass,
|
101
|
+
className: cx(pilledClass, selectedClass, animatedClass, className),
|
112
102
|
onClick: handleClick
|
113
|
-
}, rest, {
|
114
|
-
style: _objectSpread(_objectSpread({}, rest.style), {}, {
|
115
|
-
maxWidth: maxWidth
|
116
|
-
})
|
117
|
-
}), /*#__PURE__*/React.createElement(React.Fragment, null, contentLeft && /*#__PURE__*/React.createElement(LeftContent, {
|
103
|
+
}, rest), /*#__PURE__*/React.createElement(React.Fragment, null, contentLeft && /*#__PURE__*/React.createElement(LeftContent, {
|
118
104
|
className: classes.tabLeftContent
|
119
105
|
}, contentLeft), /*#__PURE__*/React.createElement(StyledContent, {
|
120
106
|
className: classes.tabContent
|
@@ -141,9 +127,6 @@ export var horizontalTabItemConfig = {
|
|
141
127
|
},
|
142
128
|
pilled: {
|
143
129
|
css: pilledCSS
|
144
|
-
},
|
145
|
-
truncate: {
|
146
|
-
css: truncateCSS
|
147
130
|
}
|
148
131
|
},
|
149
132
|
defaults: {
|
@@ -2,7 +2,7 @@ import styled from 'styled-components';
|
|
2
2
|
import { css } from 'styled-components';
|
3
3
|
import { addFocus } from '../../../../../mixins';
|
4
4
|
import { tokens } from '../../../tokens';
|
5
|
-
export var base = /*#__PURE__*/css(["position:relative;display:flex;align-items:center;justify-content:center;box-sizing:border-box;align-items:center;
|
5
|
+
export var base = /*#__PURE__*/css(["position:relative;display:flex;align-items:center;justify-content:center;box-sizing:border-box;align-items:center;gap:var(", ");padding:var(", ",var(", "));appearance:none;border:none;outline:none;cursor:pointer;-webkit-tap-highlight-color:transparent;&:first-child{margin-left:0;}", ";"], tokens.itemContentGap, tokens.itemPaddingClear, tokens.itemPadding, /*#__PURE__*/addFocus({
|
6
6
|
outlineSize: '0.063rem',
|
7
7
|
outlineOffset: '-0.125rem',
|
8
8
|
outlineColor: /*#__PURE__*/"var(".concat(tokens.outlineFocusColor, ")"),
|
@@ -1,11 +1,5 @@
|
|
1
|
-
|
2
|
-
var _excluded = ["size", "view", "selected", "disabled", "children", "value", "contentLeft", "contentRight", "onIndexChange", "itemIndex", "tabIndex", "className", "onClick", "maxItemWidth"];
|
1
|
+
var _excluded = ["size", "view", "selected", "disabled", "children", "value", "contentLeft", "contentRight", "onIndexChange", "itemIndex", "tabIndex", "className", "onClick"];
|
3
2
|
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
|
-
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
5
|
-
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
6
|
-
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
7
|
-
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
|
8
|
-
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
9
3
|
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
10
4
|
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
11
5
|
import React, { forwardRef, useRef, useContext, useEffect, useCallback } from 'react';
|
@@ -17,7 +11,6 @@ import { base, LeftContent, RightContent, StyledContent, TabItemValue } from './
|
|
17
11
|
import { base as viewCSS } from './variations/_view/base';
|
18
12
|
import { base as sizeCSS } from './variations/_size/base';
|
19
13
|
import { base as disabledCSS } from './variations/_disabled/base';
|
20
|
-
import { base as truncateCSS } from './variations/_truncate/base';
|
21
14
|
export var verticalTabItemRoot = function verticalTabItemRoot(Root) {
|
22
15
|
return /*#__PURE__*/forwardRef(function (props, outerRef) {
|
23
16
|
var size = props.size,
|
@@ -34,13 +27,11 @@ export var verticalTabItemRoot = function verticalTabItemRoot(Root) {
|
|
34
27
|
tabIndex = props.tabIndex,
|
35
28
|
className = props.className,
|
36
29
|
onClick = props.onClick,
|
37
|
-
maxWidth = props.maxItemWidth,
|
38
30
|
rest = _objectWithoutProperties(props, _excluded);
|
39
31
|
var innerRef = useRef(null);
|
40
32
|
var ref = useForkRef(outerRef, innerRef);
|
41
33
|
var refs = useContext(TabsContext);
|
42
34
|
var role = 'tab';
|
43
|
-
var truncate = maxWidth !== 'auto';
|
44
35
|
var selectedClass = selected ? classes.selectedTabsItem : undefined;
|
45
36
|
var hasKeyNavigation = itemIndex !== undefined && onIndexChange !== undefined;
|
46
37
|
var navigationTabIndex = !disabled && (refs === null || refs === void 0 ? void 0 : refs.current) === itemIndex ? 0 : -1;
|
@@ -92,16 +83,11 @@ export var verticalTabItemRoot = function verticalTabItemRoot(Root) {
|
|
92
83
|
role: role,
|
93
84
|
view: view,
|
94
85
|
size: size,
|
95
|
-
truncate: truncate,
|
96
86
|
onFocus: onItemFocus,
|
97
87
|
tabIndex: hasKeyNavigation ? navigationTabIndex : tabIndex,
|
98
|
-
className: cx(selectedClass,
|
88
|
+
className: cx(selectedClass, className),
|
99
89
|
onClick: handleClick
|
100
|
-
}, rest, {
|
101
|
-
style: _objectSpread(_objectSpread({}, rest.style), {}, {
|
102
|
-
maxWidth: maxWidth
|
103
|
-
})
|
104
|
-
}), /*#__PURE__*/React.createElement(React.Fragment, null, contentLeft && /*#__PURE__*/React.createElement(LeftContent, {
|
90
|
+
}, rest), /*#__PURE__*/React.createElement(React.Fragment, null, contentLeft && /*#__PURE__*/React.createElement(LeftContent, {
|
105
91
|
className: classes.tabLeftContent
|
106
92
|
}, contentLeft), /*#__PURE__*/React.createElement(StyledContent, {
|
107
93
|
className: classes.tabContent
|
@@ -125,9 +111,6 @@ export var verticalTabItemConfig = {
|
|
125
111
|
disabled: {
|
126
112
|
css: disabledCSS,
|
127
113
|
attrs: true
|
128
|
-
},
|
129
|
-
truncate: {
|
130
|
-
css: truncateCSS
|
131
114
|
}
|
132
115
|
},
|
133
116
|
defaults: {
|
package/styled-components/es/components/Tabs/ui/vertical/VerticalTabItem/VerticalTabItem.styles.js
CHANGED
@@ -4,7 +4,7 @@ import { css } from 'styled-components';
|
|
4
4
|
import styled from 'styled-components';
|
5
5
|
import { addFocus } from '../../../../../mixins';
|
6
6
|
import { tokens } from '../../../tokens';
|
7
|
-
export var base = /*#__PURE__*/css(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n position: relative;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n box-sizing: border-box;\n
|
7
|
+
export var base = /*#__PURE__*/css(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n position: relative;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n box-sizing: border-box;\n align-items: center;\n\n gap: var(", ");\n padding: var(", ");\n\n appearance: none;\n border: none;\n outline: none;\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n\n ", ";\n"])), tokens.itemContentGap, tokens.itemPaddingOrientationVertical, /*#__PURE__*/addFocus({
|
8
8
|
outlineSize: '0.063rem',
|
9
9
|
outlineOffset: '-0.125rem',
|
10
10
|
outlineColor: /*#__PURE__*/"var(".concat(tokens.outlineFocusColor, ")"),
|
@@ -16,7 +16,7 @@ export var StyledContent = /*#__PURE__*/styled.div.withConfig({
|
|
16
16
|
})(["display:inline-block;width:fit-content;padding:0 var(", ",var(", "));"], tokens.itemContentPaddingClear, tokens.itemContentPadding);
|
17
17
|
export var TabItemValue = /*#__PURE__*/styled.span.withConfig({
|
18
18
|
componentId: "plasma-new-hope__sc-1pflgj8-1"
|
19
|
-
})(["
|
19
|
+
})(["color:var(", ");"], tokens.itemValueColor);
|
20
20
|
export var RightContent = /*#__PURE__*/styled.div.withConfig({
|
21
21
|
componentId: "plasma-new-hope__sc-1pflgj8-2"
|
22
22
|
})(["display:flex;color:inherit;&:hover{color:inherit;}"]);
|
@@ -191,7 +191,7 @@ export var textAreaRoot = function textAreaRoot(Root) {
|
|
191
191
|
setHelperWidth("".concat(elementWidth / ROOT_FONT_SIZE, "rem"));
|
192
192
|
}
|
193
193
|
});
|
194
|
-
useAutoResize(autoResize || Boolean(clear), outerRef, value, minAuto, maxAuto);
|
194
|
+
useAutoResize(autoResize || Boolean(clear), outerRef, value, minAuto, maxAuto, resize);
|
195
195
|
var onFocusHandler = useCallback(function () {
|
196
196
|
setFocused(true);
|
197
197
|
}, []);
|
@@ -1,12 +1,12 @@
|
|
1
1
|
import { useEffect, useRef } from 'react';
|
2
2
|
export var ROOT_FONT_SIZE = 16;
|
3
|
-
export var useAutoResize = function useAutoResize(active, ref, value, minAuto, maxAuto) {
|
3
|
+
export var useAutoResize = function useAutoResize(active, ref, value, minAuto, maxAuto, resize) {
|
4
4
|
var previousHeight = useRef();
|
5
5
|
useEffect(function () {
|
6
6
|
if (active && ref && ref.current) {
|
7
7
|
// проверка на пользовательский resize (вручную)
|
8
8
|
var height = ref.current.clientHeight / ROOT_FONT_SIZE;
|
9
|
-
if (previousHeight.current !== undefined && previousHeight.current !== height) {
|
9
|
+
if (resize && resize !== 'none' && previousHeight.current !== undefined && previousHeight.current !== height) {
|
10
10
|
return;
|
11
11
|
}
|
12
12
|
var style = getComputedStyle(ref.current);
|
@@ -21,5 +21,5 @@ export var useAutoResize = function useAutoResize(active, ref, value, minAuto, m
|
|
21
21
|
ref.current.style.height = "".concat(newHeight, "rem");
|
22
22
|
previousHeight.current = newHeight;
|
23
23
|
}
|
24
|
-
}, [ref, active, value, minAuto, maxAuto]);
|
24
|
+
}, [ref, resize, active, value, minAuto, maxAuto]);
|
25
25
|
};
|
@@ -31,9 +31,6 @@ const meta: Meta<typeof Badge> = {
|
|
31
31
|
control: { type: 'boolean' },
|
32
32
|
if: { arg: 'clear', truthy: false },
|
33
33
|
},
|
34
|
-
maxWidth: {
|
35
|
-
control: { type: 'text' },
|
36
|
-
},
|
37
34
|
...disableProps(['contentLeft', 'contentRight']),
|
38
35
|
},
|
39
36
|
};
|
@@ -67,7 +64,7 @@ export const Default: Story = {
|
|
67
64
|
},
|
68
65
|
},
|
69
66
|
args: {
|
70
|
-
text: 'Hello
|
67
|
+
text: 'Hello',
|
71
68
|
view: 'default',
|
72
69
|
size: 'm',
|
73
70
|
enableContentLeft: false,
|
@@ -75,7 +72,6 @@ export const Default: Story = {
|
|
75
72
|
clear: false,
|
76
73
|
pilled: false,
|
77
74
|
transparent: false,
|
78
|
-
maxWidth: '',
|
79
75
|
},
|
80
76
|
render: ({ enableContentLeft, enableContentRight, size, ...rest }: StoryProps) => {
|
81
77
|
const iconSize = size === 'l' ? '1rem' : '0.75rem';
|
@@ -29,7 +29,6 @@ type CustomStoryTabsProps = {
|
|
29
29
|
|
30
30
|
const contentLeftOptions = ['none', 'icon'];
|
31
31
|
const contentRightOptions = ['none', 'counter', 'icon'];
|
32
|
-
const labels = ['Label', 'Middle label', 'Very long label'];
|
33
32
|
|
34
33
|
const getContentLeft = (contentLeftOption: string, size: string) => {
|
35
34
|
const iconSize = size === 'xs' ? 'xs' : 's';
|
@@ -77,12 +76,6 @@ const meta: Meta<StoryTabsProps> = {
|
|
77
76
|
},
|
78
77
|
if: { arg: 'helperText', eq: '' },
|
79
78
|
},
|
80
|
-
maxItemWidth: {
|
81
|
-
control: {
|
82
|
-
type: 'text',
|
83
|
-
},
|
84
|
-
if: { arg: 'stretch', truthy: false },
|
85
|
-
},
|
86
79
|
},
|
87
80
|
};
|
88
81
|
|
@@ -97,14 +90,13 @@ const StoryHorizontalDefault = (props: HorizontalStoryTabsProps) => {
|
|
97
90
|
contentRight: contentRightOption,
|
98
91
|
hasDivider,
|
99
92
|
stretch,
|
100
|
-
maxItemWidth,
|
101
93
|
helperText,
|
102
94
|
} = props;
|
103
95
|
const items = Array(itemQuantity).fill(0);
|
104
96
|
const [index, setIndex] = useState(0);
|
105
97
|
|
106
98
|
return (
|
107
|
-
<Tabs
|
99
|
+
<Tabs view="divider" hasDivider={hasDivider} stretch={stretch} disabled={disabled} size={size}>
|
108
100
|
{items.map((_, i) => {
|
109
101
|
if (helperText !== '') {
|
110
102
|
return (
|
@@ -118,9 +110,8 @@ const StoryHorizontalDefault = (props: HorizontalStoryTabsProps) => {
|
|
118
110
|
value={helperText}
|
119
111
|
contentLeft={getContentLeft(contentLeftOption, size as Size)}
|
120
112
|
size={size as Size}
|
121
|
-
maxItemWidth={maxItemWidth}
|
122
113
|
>
|
123
|
-
{
|
114
|
+
{`Label${i + 1}`}
|
124
115
|
</TabItem>
|
125
116
|
);
|
126
117
|
}
|
@@ -136,9 +127,8 @@ const StoryHorizontalDefault = (props: HorizontalStoryTabsProps) => {
|
|
136
127
|
contentLeft={getContentLeft(contentLeftOption, size as Size)}
|
137
128
|
contentRight={getContentRight(contentRightOption, size as Size)}
|
138
129
|
size={size as Size}
|
139
|
-
maxItemWidth={maxItemWidth}
|
140
130
|
>
|
141
|
-
{
|
131
|
+
{`Label${i + 1}`}
|
142
132
|
</TabItem>
|
143
133
|
);
|
144
134
|
})}
|
@@ -157,7 +147,6 @@ const StoryHorizontalScroll = (props: HorizontalStoryTabsProps) => {
|
|
157
147
|
hasDivider,
|
158
148
|
helperText,
|
159
149
|
width,
|
160
|
-
maxItemWidth,
|
161
150
|
} = props;
|
162
151
|
const items = Array(itemQuantity).fill(0);
|
163
152
|
const [index, setIndex] = useState(0);
|
@@ -177,9 +166,8 @@ const StoryHorizontalScroll = (props: HorizontalStoryTabsProps) => {
|
|
177
166
|
value={helperText}
|
178
167
|
contentLeft={getContentLeft(contentLeftOption, size as Size)}
|
179
168
|
size={size as Size}
|
180
|
-
maxItemWidth={maxItemWidth}
|
181
169
|
>
|
182
|
-
{
|
170
|
+
{`Label${i + 1}`}
|
183
171
|
</TabItem>
|
184
172
|
);
|
185
173
|
}
|
@@ -195,9 +183,8 @@ const StoryHorizontalScroll = (props: HorizontalStoryTabsProps) => {
|
|
195
183
|
contentLeft={getContentLeft(contentLeftOption, size as Size)}
|
196
184
|
contentRight={getContentRight(contentRightOption, size as Size)}
|
197
185
|
size={size as Size}
|
198
|
-
maxItemWidth={maxItemWidth}
|
199
186
|
>
|
200
|
-
{
|
187
|
+
{`Label${i + 1}`}
|
201
188
|
</TabItem>
|
202
189
|
);
|
203
190
|
})}
|
@@ -215,7 +202,6 @@ const StoryHorizontalShowAll = (props: HorizontalStoryTabsProps) => {
|
|
215
202
|
contentRight: contentRightOption,
|
216
203
|
hasDivider,
|
217
204
|
helperText,
|
218
|
-
maxItemWidth,
|
219
205
|
} = props;
|
220
206
|
const maxItemQuantity = 3;
|
221
207
|
const items = Array(itemQuantity).fill(0);
|
@@ -248,9 +234,8 @@ const StoryHorizontalShowAll = (props: HorizontalStoryTabsProps) => {
|
|
248
234
|
value={helperText}
|
249
235
|
contentLeft={getContentLeft(contentLeftOption, size as Size)}
|
250
236
|
size={size as Size}
|
251
|
-
maxItemWidth={maxItemWidth}
|
252
237
|
>
|
253
|
-
{
|
238
|
+
{`Label${i + 1}`}
|
254
239
|
</TabItem>
|
255
240
|
);
|
256
241
|
}
|
@@ -266,9 +251,8 @@ const StoryHorizontalShowAll = (props: HorizontalStoryTabsProps) => {
|
|
266
251
|
contentLeft={getContentLeft(contentLeftOption, size as Size)}
|
267
252
|
contentRight={getContentRight(contentRightOption, size as Size)}
|
268
253
|
size={size as Size}
|
269
|
-
maxItemWidth={maxItemWidth}
|
270
254
|
>
|
271
|
-
{
|
255
|
+
{`Label${i + 1}`}
|
272
256
|
</TabItem>
|
273
257
|
);
|
274
258
|
})}
|
@@ -285,7 +269,6 @@ const StoryHorizontalShowAll = (props: HorizontalStoryTabsProps) => {
|
|
285
269
|
tabIndex={!disabled ? 0 : -1}
|
286
270
|
disabled={disabled}
|
287
271
|
size={size as Size}
|
288
|
-
maxItemWidth="auto"
|
289
272
|
>
|
290
273
|
ShowAll
|
291
274
|
</TabItem>
|
@@ -302,10 +285,9 @@ export const HorizontalTabs: StoryObj<HorizontalStoryTabsProps> = {
|
|
302
285
|
disabled: false,
|
303
286
|
hasDivider: true,
|
304
287
|
helperText: '',
|
305
|
-
itemQuantity:
|
288
|
+
itemQuantity: 8,
|
306
289
|
stretch: false,
|
307
290
|
width: '15rem',
|
308
|
-
maxItemWidth: '',
|
309
291
|
},
|
310
292
|
argTypes: {
|
311
293
|
contentLeft: {
|
@@ -361,7 +343,6 @@ const StoryVerticalDefault = (props: VerticalStoryTabsProps) => {
|
|
361
343
|
contentRight: contentRightOption,
|
362
344
|
hasDivider,
|
363
345
|
helperText,
|
364
|
-
maxItemWidth,
|
365
346
|
} = props;
|
366
347
|
const items = Array(itemQuantity).fill(0);
|
367
348
|
const [index, setIndex] = useState(0);
|
@@ -382,9 +363,8 @@ const StoryVerticalDefault = (props: VerticalStoryTabsProps) => {
|
|
382
363
|
value={helperText}
|
383
364
|
contentLeft={getContentLeft(contentLeftOption, size as Size)}
|
384
365
|
size={size as Size}
|
385
|
-
maxItemWidth={maxItemWidth}
|
386
366
|
>
|
387
|
-
{
|
367
|
+
{`Label${i + 1}`}
|
388
368
|
</TabItem>
|
389
369
|
);
|
390
370
|
}
|
@@ -401,9 +381,8 @@ const StoryVerticalDefault = (props: VerticalStoryTabsProps) => {
|
|
401
381
|
contentLeft={getContentLeft(contentLeftOption, size as Size)}
|
402
382
|
contentRight={getContentRight(contentRightOption, size as Size)}
|
403
383
|
size={size as Size}
|
404
|
-
maxItemWidth={maxItemWidth}
|
405
384
|
>
|
406
|
-
{
|
385
|
+
{`Label${i + 1}`}
|
407
386
|
</TabItem>
|
408
387
|
);
|
409
388
|
})}
|
@@ -422,7 +401,6 @@ const StoryVerticalScroll = (props: VerticalStoryTabsProps) => {
|
|
422
401
|
hasDivider,
|
423
402
|
helperText,
|
424
403
|
height,
|
425
|
-
maxItemWidth,
|
426
404
|
} = props;
|
427
405
|
const items = Array(itemQuantity).fill(0);
|
428
406
|
const [index, setIndex] = useState(0);
|
@@ -450,9 +428,8 @@ const StoryVerticalScroll = (props: VerticalStoryTabsProps) => {
|
|
450
428
|
value={helperText}
|
451
429
|
contentLeft={getContentLeft(contentLeftOption, size as Size)}
|
452
430
|
size={size as Size}
|
453
|
-
maxItemWidth={maxItemWidth}
|
454
431
|
>
|
455
|
-
{
|
432
|
+
{`Label${i + 1}`}
|
456
433
|
</TabItem>
|
457
434
|
);
|
458
435
|
}
|
@@ -469,9 +446,8 @@ const StoryVerticalScroll = (props: VerticalStoryTabsProps) => {
|
|
469
446
|
contentLeft={getContentLeft(contentLeftOption, size as Size)}
|
470
447
|
contentRight={getContentRight(contentRightOption, size as Size)}
|
471
448
|
size={size as Size}
|
472
|
-
maxItemWidth={maxItemWidth}
|
473
449
|
>
|
474
|
-
{
|
450
|
+
{`Label${i + 1}`}
|
475
451
|
</TabItem>
|
476
452
|
);
|
477
453
|
})}
|
@@ -489,7 +465,6 @@ const StoryVerticalShowAll = (props: VerticalStoryTabsProps) => {
|
|
489
465
|
contentRight: contentRightOption,
|
490
466
|
hasDivider,
|
491
467
|
helperText,
|
492
|
-
maxItemWidth,
|
493
468
|
} = props;
|
494
469
|
const maxItemQuantity = 3;
|
495
470
|
const items = Array(itemQuantity).fill(0);
|
@@ -523,9 +498,8 @@ const StoryVerticalShowAll = (props: VerticalStoryTabsProps) => {
|
|
523
498
|
value={helperText}
|
524
499
|
contentLeft={getContentLeft(contentLeftOption, size as Size)}
|
525
500
|
size={size as Size}
|
526
|
-
maxItemWidth={maxItemWidth}
|
527
501
|
>
|
528
|
-
{
|
502
|
+
{`Label${i + 1}`}
|
529
503
|
</TabItem>
|
530
504
|
);
|
531
505
|
}
|
@@ -542,9 +516,8 @@ const StoryVerticalShowAll = (props: VerticalStoryTabsProps) => {
|
|
542
516
|
contentLeft={getContentLeft(contentLeftOption, size as Size)}
|
543
517
|
contentRight={getContentRight(contentRightOption, size as Size)}
|
544
518
|
size={size as Size}
|
545
|
-
maxItemWidth={maxItemWidth}
|
546
519
|
>
|
547
|
-
{
|
520
|
+
{`Label${i + 1}`}
|
548
521
|
</TabItem>
|
549
522
|
);
|
550
523
|
})}
|
@@ -561,7 +534,6 @@ const StoryVerticalShowAll = (props: VerticalStoryTabsProps) => {
|
|
561
534
|
tabIndex={!disabled ? 0 : -1}
|
562
535
|
disabled={disabled}
|
563
536
|
size={size as Size}
|
564
|
-
maxItemWidth="auto"
|
565
537
|
>
|
566
538
|
ShowAll
|
567
539
|
</TabItem>
|
@@ -576,11 +548,10 @@ export const VerticalTabs: StoryObj<VerticalStoryTabsProps> = {
|
|
576
548
|
size: 'xs',
|
577
549
|
disabled: false,
|
578
550
|
hasDivider: true,
|
579
|
-
itemQuantity:
|
551
|
+
itemQuantity: 8,
|
580
552
|
orientation: 'vertical',
|
581
553
|
helperText: '',
|
582
554
|
height: '10rem',
|
583
|
-
maxItemWidth: '',
|
584
555
|
},
|
585
556
|
argTypes: {
|
586
557
|
contentLeft: {
|
@@ -633,7 +604,7 @@ export const VerticalTabs: StoryObj<VerticalStoryTabsProps> = {
|
|
633
604
|
};
|
634
605
|
|
635
606
|
const StoryHeaderDefault = (props: HorizontalStoryTabsProps) => {
|
636
|
-
const { disabled, itemQuantity, size, helperText
|
607
|
+
const { disabled, itemQuantity, size, helperText } = props;
|
637
608
|
const items = Array(itemQuantity).fill(0);
|
638
609
|
const [index, setIndex] = useState(0);
|
639
610
|
|
@@ -649,7 +620,6 @@ const StoryHeaderDefault = (props: HorizontalStoryTabsProps) => {
|
|
649
620
|
disabled={disabled}
|
650
621
|
value={helperText}
|
651
622
|
size={size as HeaderSize}
|
652
|
-
maxItemWidth={maxItemWidth}
|
653
623
|
>
|
654
624
|
{`Label${i + 1}`}
|
655
625
|
</TabItem>
|
@@ -659,7 +629,7 @@ const StoryHeaderDefault = (props: HorizontalStoryTabsProps) => {
|
|
659
629
|
};
|
660
630
|
|
661
631
|
const StoryHeaderScroll = (props: HorizontalStoryTabsProps) => {
|
662
|
-
const { disabled, itemQuantity, size, helperText, width
|
632
|
+
const { disabled, itemQuantity, size, helperText, width } = props;
|
663
633
|
const items = Array(itemQuantity).fill(0);
|
664
634
|
const [index, setIndex] = useState(0);
|
665
635
|
|
@@ -675,9 +645,8 @@ const StoryHeaderScroll = (props: HorizontalStoryTabsProps) => {
|
|
675
645
|
disabled={disabled}
|
676
646
|
value={helperText}
|
677
647
|
size={size as HeaderSize}
|
678
|
-
maxItemWidth={maxItemWidth}
|
679
648
|
>
|
680
|
-
{
|
649
|
+
{`Label${i + 1}`}
|
681
650
|
</TabItem>
|
682
651
|
))}
|
683
652
|
</Tabs>
|
@@ -689,9 +658,8 @@ export const HeaderTabs: StoryObj<HorizontalStoryTabsProps> = {
|
|
689
658
|
size: 'h5',
|
690
659
|
disabled: false,
|
691
660
|
helperText: '',
|
692
|
-
itemQuantity:
|
661
|
+
itemQuantity: 6,
|
693
662
|
width: '12rem',
|
694
|
-
maxItemWidth: '',
|
695
663
|
},
|
696
664
|
argTypes: {
|
697
665
|
clip: {
|