@salutejs/plasma-new-hope 0.114.1-canary.1333.10216082008.0 → 0.115.0-canary.1310.10239714196.0
Sign up to get free protection for your applications and to get access to all the features.
- package/cjs/components/Breadcrumbs/Breadcrumbs.css +13 -0
- package/cjs/components/Breadcrumbs/Breadcrumbs.js +59 -0
- package/cjs/components/Breadcrumbs/Breadcrumbs.js.map +1 -0
- package/cjs/components/Breadcrumbs/Breadcrumbs.styles.js +46 -0
- package/cjs/components/Breadcrumbs/Breadcrumbs.styles.js.map +1 -0
- package/cjs/components/Breadcrumbs/Breadcrumbs.styles_1troyzr.css +3 -0
- package/cjs/components/Breadcrumbs/Breadcrumbs.tokens.js +23 -0
- package/cjs/components/Breadcrumbs/Breadcrumbs.tokens.js.map +1 -0
- package/cjs/components/Breadcrumbs/ui/BreadcrumbShorter/BreadcrumbShorter.js +36 -0
- package/cjs/components/Breadcrumbs/ui/BreadcrumbShorter/BreadcrumbShorter.js.map +1 -0
- package/cjs/components/Breadcrumbs/ui/BreadcrumbShorter/BreadcrumbShorter.styles.js +27 -0
- package/cjs/components/Breadcrumbs/ui/BreadcrumbShorter/BreadcrumbShorter.styles.js.map +1 -0
- package/cjs/components/Breadcrumbs/utils/index.js +53 -0
- package/cjs/components/Breadcrumbs/utils/index.js.map +1 -0
- package/cjs/components/Breadcrumbs/variations/_size/base.js +9 -0
- package/cjs/components/Breadcrumbs/variations/_size/base.js.map +1 -0
- package/cjs/components/Breadcrumbs/variations/_size/base_x642ct.css +1 -0
- package/cjs/components/Breadcrumbs/variations/_view/base.js +9 -0
- package/cjs/components/Breadcrumbs/variations/_view/base.js.map +1 -0
- package/cjs/components/Breadcrumbs/variations/_view/base_x642ct.css +1 -0
- package/cjs/components/Tabs/tokens.js +2 -5
- package/cjs/components/Tabs/tokens.js.map +1 -1
- package/cjs/components/Tabs/ui/TabItem/TabItem.css +1 -1
- package/cjs/components/Tabs/ui/TabItem/TabItem.js +2 -8
- package/cjs/components/Tabs/ui/TabItem/TabItem.js.map +1 -1
- package/cjs/components/Tabs/ui/TabItem/variations/_view/base.js +1 -1
- package/cjs/components/Tabs/ui/TabItem/variations/_view/base.js.map +1 -1
- package/cjs/components/Tabs/ui/TabItem/variations/_view/base_q8xs21.css +1 -0
- package/cjs/components/Tabs/ui/Tabs/Tabs.css +6 -6
- package/cjs/components/Tabs/ui/Tabs/Tabs.js +8 -51
- package/cjs/components/Tabs/ui/Tabs/Tabs.js.map +1 -1
- package/cjs/components/Tabs/ui/Tabs/Tabs.styles.js +7 -7
- package/cjs/components/Tabs/ui/Tabs/Tabs.styles.js.map +1 -1
- package/{es/components/Tabs/ui/Tabs/Tabs.styles_z4dnzh.css → cjs/components/Tabs/ui/Tabs/Tabs.styles_1b8qt33.css} +2 -2
- package/cjs/components/Tabs/ui/Tabs/variations/_stretch/base.js +1 -1
- package/cjs/components/Tabs/ui/Tabs/variations/_stretch/base.js.map +1 -1
- package/{es/components/Tabs/ui/Tabs/variations/_stretch/base_1c7lnrm.css → cjs/components/Tabs/ui/Tabs/variations/_stretch/base_176tz0n.css} +1 -1
- package/cjs/components/Tabs/ui/Tabs/variations/_view/base.js +1 -1
- package/{es/components/Tabs/ui/Tabs/variations/_view/base_aij3sf.css → cjs/components/Tabs/ui/Tabs/variations/_view/base_4xkt26.css} +1 -1
- package/cjs/index.css +11 -7
- package/cjs/index.js +6 -0
- package/cjs/index.js.map +1 -1
- package/emotion/cjs/components/Breadcrumbs/Breadcrumbs.js +59 -0
- package/emotion/cjs/components/Breadcrumbs/Breadcrumbs.styles.js +33 -0
- package/emotion/cjs/components/Breadcrumbs/Breadcrumbs.template-doc.mdx +96 -0
- package/emotion/cjs/components/Breadcrumbs/Breadcrumbs.tokens.js +21 -0
- package/emotion/cjs/components/Breadcrumbs/Breadcrumbs.types.js +5 -0
- package/emotion/cjs/components/Breadcrumbs/README.md +78 -0
- package/emotion/cjs/components/Breadcrumbs/index.js +31 -0
- package/emotion/cjs/components/Breadcrumbs/ui/BreadcrumbShorter/BreadcrumbShorter.js +42 -0
- package/emotion/cjs/components/Breadcrumbs/ui/BreadcrumbShorter/BreadcrumbShorter.styles.js +20 -0
- package/emotion/cjs/components/Breadcrumbs/ui/BreadcrumbShorter/BreadcrumbShorter.types.js +5 -0
- package/emotion/cjs/components/Breadcrumbs/utils/index.js +49 -0
- package/emotion/cjs/components/Breadcrumbs/variations/_size/base.js +8 -0
- package/emotion/cjs/components/Breadcrumbs/variations/_size/tokens.json +0 -0
- package/emotion/cjs/components/Breadcrumbs/variations/_view/base.js +8 -0
- package/emotion/cjs/components/Breadcrumbs/variations/_view/tokens.json +0 -0
- package/emotion/cjs/components/Tabs/tokens.js +2 -5
- package/emotion/cjs/components/Tabs/ui/TabItem/TabItem.js +2 -8
- package/emotion/cjs/components/Tabs/ui/TabItem/variations/_view/base.js +1 -1
- package/emotion/cjs/components/Tabs/ui/Tabs/Tabs.js +8 -51
- package/emotion/cjs/components/Tabs/ui/Tabs/Tabs.styles.js +16 -8
- package/emotion/cjs/components/Tabs/ui/Tabs/variations/_stretch/base.js +1 -1
- package/emotion/cjs/components/Tabs/ui/Tabs/variations/_view/tokens.json +1 -1
- package/emotion/cjs/examples/plasma_b2c/components/Breadcrumbs/Breadcrumbs.config.js +25 -0
- package/emotion/cjs/examples/plasma_b2c/components/Breadcrumbs/Breadcrumbs.js +11 -0
- package/emotion/cjs/examples/plasma_b2c/components/Breadcrumbs/Breadcrumbs.stories.tsx +42 -0
- package/emotion/cjs/examples/plasma_b2c/components/Tabs/TabItem.config.js +15 -15
- package/emotion/cjs/examples/plasma_b2c/components/Tabs/Tabs.config.js +17 -16
- package/emotion/cjs/examples/plasma_b2c/components/Tabs/Tabs.stories.tsx +196 -287
- package/emotion/cjs/examples/plasma_web/components/Breadcrumbs/Breadcrumbs.config.js +25 -0
- package/emotion/cjs/examples/plasma_web/components/Breadcrumbs/Breadcrumbs.js +11 -0
- package/emotion/cjs/examples/plasma_web/components/Breadcrumbs/Breadcrumbs.stories.tsx +42 -0
- package/emotion/cjs/examples/plasma_web/components/Tabs/TabItem.config.js +15 -15
- package/emotion/cjs/examples/plasma_web/components/Tabs/Tabs.config.js +17 -16
- package/emotion/cjs/examples/plasma_web/components/Tabs/Tabs.stories.tsx +196 -287
- package/emotion/cjs/index.js +11 -0
- package/emotion/es/components/Breadcrumbs/Breadcrumbs.js +50 -0
- package/emotion/es/components/Breadcrumbs/Breadcrumbs.styles.js +26 -0
- package/emotion/es/components/Breadcrumbs/Breadcrumbs.template-doc.mdx +96 -0
- package/emotion/es/components/Breadcrumbs/Breadcrumbs.tokens.js +15 -0
- package/emotion/es/components/Breadcrumbs/Breadcrumbs.types.js +1 -0
- package/emotion/es/components/Breadcrumbs/README.md +78 -0
- package/emotion/es/components/Breadcrumbs/index.js +2 -0
- package/emotion/es/components/Breadcrumbs/ui/BreadcrumbShorter/BreadcrumbShorter.js +33 -0
- package/emotion/es/components/Breadcrumbs/ui/BreadcrumbShorter/BreadcrumbShorter.styles.js +13 -0
- package/emotion/es/components/Breadcrumbs/ui/BreadcrumbShorter/BreadcrumbShorter.types.js +1 -0
- package/emotion/es/components/Breadcrumbs/utils/index.js +42 -0
- package/emotion/es/components/Breadcrumbs/variations/_size/base.js +2 -0
- package/emotion/es/components/Breadcrumbs/variations/_size/tokens.json +0 -0
- package/emotion/es/components/Breadcrumbs/variations/_view/base.js +2 -0
- package/emotion/es/components/Breadcrumbs/variations/_view/tokens.json +0 -0
- package/emotion/es/components/Tabs/tokens.js +2 -5
- package/emotion/es/components/Tabs/ui/TabItem/TabItem.js +2 -8
- package/emotion/es/components/Tabs/ui/TabItem/variations/_view/base.js +1 -1
- package/emotion/es/components/Tabs/ui/Tabs/Tabs.js +9 -52
- package/emotion/es/components/Tabs/ui/Tabs/Tabs.styles.js +17 -9
- package/emotion/es/components/Tabs/ui/Tabs/variations/_stretch/base.js +1 -1
- package/emotion/es/components/Tabs/ui/Tabs/variations/_view/tokens.json +1 -1
- package/emotion/es/examples/plasma_b2c/components/Breadcrumbs/Breadcrumbs.config.js +19 -0
- package/emotion/es/examples/plasma_b2c/components/Breadcrumbs/Breadcrumbs.js +5 -0
- package/emotion/es/examples/plasma_b2c/components/Breadcrumbs/Breadcrumbs.stories.tsx +42 -0
- package/emotion/es/examples/plasma_b2c/components/Tabs/TabItem.config.js +15 -15
- package/emotion/es/examples/plasma_b2c/components/Tabs/Tabs.config.js +17 -16
- package/emotion/es/examples/plasma_b2c/components/Tabs/Tabs.stories.tsx +196 -287
- package/emotion/es/examples/plasma_web/components/Breadcrumbs/Breadcrumbs.config.js +19 -0
- package/emotion/es/examples/plasma_web/components/Breadcrumbs/Breadcrumbs.js +5 -0
- package/emotion/es/examples/plasma_web/components/Breadcrumbs/Breadcrumbs.stories.tsx +42 -0
- package/emotion/es/examples/plasma_web/components/Tabs/TabItem.config.js +15 -15
- package/emotion/es/examples/plasma_web/components/Tabs/Tabs.config.js +17 -16
- package/emotion/es/examples/plasma_web/components/Tabs/Tabs.stories.tsx +196 -287
- package/emotion/es/index.js +1 -0
- package/es/components/Breadcrumbs/Breadcrumbs.css +13 -0
- package/es/components/Breadcrumbs/Breadcrumbs.js +54 -0
- package/es/components/Breadcrumbs/Breadcrumbs.js.map +1 -0
- package/es/components/Breadcrumbs/Breadcrumbs.styles.js +40 -0
- package/es/components/Breadcrumbs/Breadcrumbs.styles.js.map +1 -0
- package/es/components/Breadcrumbs/Breadcrumbs.styles_1troyzr.css +3 -0
- package/es/components/Breadcrumbs/Breadcrumbs.tokens.js +18 -0
- package/es/components/Breadcrumbs/Breadcrumbs.tokens.js.map +1 -0
- package/es/components/Breadcrumbs/ui/BreadcrumbShorter/BreadcrumbShorter.js +32 -0
- package/es/components/Breadcrumbs/ui/BreadcrumbShorter/BreadcrumbShorter.js.map +1 -0
- package/es/components/Breadcrumbs/ui/BreadcrumbShorter/BreadcrumbShorter.styles.js +21 -0
- package/es/components/Breadcrumbs/ui/BreadcrumbShorter/BreadcrumbShorter.styles.js.map +1 -0
- package/es/components/Breadcrumbs/utils/index.js +46 -0
- package/es/components/Breadcrumbs/utils/index.js.map +1 -0
- package/es/components/Breadcrumbs/variations/_size/base.js +5 -0
- package/es/components/Breadcrumbs/variations/_size/base.js.map +1 -0
- package/es/components/Breadcrumbs/variations/_size/base_x642ct.css +1 -0
- package/es/components/Breadcrumbs/variations/_view/base.js +5 -0
- package/es/components/Breadcrumbs/variations/_view/base.js.map +1 -0
- package/es/components/Breadcrumbs/variations/_view/base_x642ct.css +1 -0
- package/es/components/Tabs/tokens.js +2 -5
- package/es/components/Tabs/tokens.js.map +1 -1
- package/es/components/Tabs/ui/TabItem/TabItem.css +1 -1
- package/es/components/Tabs/ui/TabItem/TabItem.js +2 -8
- package/es/components/Tabs/ui/TabItem/TabItem.js.map +1 -1
- package/es/components/Tabs/ui/TabItem/variations/_view/base.js +1 -1
- package/es/components/Tabs/ui/TabItem/variations/_view/base.js.map +1 -1
- package/es/components/Tabs/ui/TabItem/variations/_view/base_q8xs21.css +1 -0
- package/es/components/Tabs/ui/Tabs/Tabs.css +6 -6
- package/es/components/Tabs/ui/Tabs/Tabs.js +9 -52
- package/es/components/Tabs/ui/Tabs/Tabs.js.map +1 -1
- package/es/components/Tabs/ui/Tabs/Tabs.styles.js +7 -7
- package/es/components/Tabs/ui/Tabs/Tabs.styles.js.map +1 -1
- package/{cjs/components/Tabs/ui/Tabs/Tabs.styles_z4dnzh.css → es/components/Tabs/ui/Tabs/Tabs.styles_1b8qt33.css} +2 -2
- package/es/components/Tabs/ui/Tabs/variations/_stretch/base.js +1 -1
- package/es/components/Tabs/ui/Tabs/variations/_stretch/base.js.map +1 -1
- package/{cjs/components/Tabs/ui/Tabs/variations/_stretch/base_1c7lnrm.css → es/components/Tabs/ui/Tabs/variations/_stretch/base_176tz0n.css} +1 -1
- package/es/components/Tabs/ui/Tabs/variations/_view/base.js +1 -1
- package/{cjs/components/Tabs/ui/Tabs/variations/_view/base_aij3sf.css → es/components/Tabs/ui/Tabs/variations/_view/base_4xkt26.css} +1 -1
- package/es/index.css +11 -7
- package/es/index.js +2 -0
- package/es/index.js.map +1 -1
- package/package.json +2 -2
- package/styled-components/cjs/components/Breadcrumbs/Breadcrumbs.js +59 -0
- package/styled-components/cjs/components/Breadcrumbs/Breadcrumbs.styles.js +32 -0
- package/styled-components/cjs/components/Breadcrumbs/Breadcrumbs.template-doc.mdx +96 -0
- package/styled-components/cjs/components/Breadcrumbs/Breadcrumbs.tokens.js +21 -0
- package/styled-components/cjs/components/Breadcrumbs/Breadcrumbs.types.js +5 -0
- package/styled-components/cjs/components/Breadcrumbs/README.md +78 -0
- package/styled-components/cjs/components/Breadcrumbs/index.js +31 -0
- package/styled-components/cjs/components/Breadcrumbs/ui/BreadcrumbShorter/BreadcrumbShorter.js +42 -0
- package/styled-components/cjs/components/Breadcrumbs/ui/BreadcrumbShorter/BreadcrumbShorter.styles.js +24 -0
- package/styled-components/cjs/components/Breadcrumbs/ui/BreadcrumbShorter/BreadcrumbShorter.types.js +5 -0
- package/styled-components/cjs/components/Breadcrumbs/utils/index.js +49 -0
- package/styled-components/cjs/components/Breadcrumbs/variations/_size/base.js +8 -0
- package/styled-components/cjs/components/Breadcrumbs/variations/_size/tokens.json +0 -0
- package/styled-components/cjs/components/Breadcrumbs/variations/_view/base.js +8 -0
- package/styled-components/cjs/components/Breadcrumbs/variations/_view/tokens.json +0 -0
- package/styled-components/cjs/components/Tabs/tokens.js +2 -5
- package/styled-components/cjs/components/Tabs/ui/TabItem/TabItem.js +2 -8
- package/styled-components/cjs/components/Tabs/ui/TabItem/variations/_view/base.js +1 -1
- package/styled-components/cjs/components/Tabs/ui/Tabs/Tabs.js +8 -51
- package/styled-components/cjs/components/Tabs/ui/Tabs/Tabs.styles.js +2 -2
- package/styled-components/cjs/components/Tabs/ui/Tabs/variations/_stretch/base.js +1 -1
- package/styled-components/cjs/components/Tabs/ui/Tabs/variations/_view/tokens.json +1 -1
- package/styled-components/cjs/examples/plasma_b2c/components/Breadcrumbs/Breadcrumbs.config.js +25 -0
- package/styled-components/cjs/examples/plasma_b2c/components/Breadcrumbs/Breadcrumbs.js +11 -0
- package/styled-components/cjs/examples/plasma_b2c/components/Breadcrumbs/Breadcrumbs.stories.tsx +42 -0
- package/styled-components/cjs/examples/plasma_b2c/components/Tabs/TabItem.config.js +8 -8
- package/styled-components/cjs/examples/plasma_b2c/components/Tabs/Tabs.config.js +5 -4
- package/styled-components/cjs/examples/plasma_b2c/components/Tabs/Tabs.stories.tsx +196 -287
- package/styled-components/cjs/examples/plasma_web/components/Breadcrumbs/Breadcrumbs.config.js +25 -0
- package/styled-components/cjs/examples/plasma_web/components/Breadcrumbs/Breadcrumbs.js +11 -0
- package/styled-components/cjs/examples/plasma_web/components/Breadcrumbs/Breadcrumbs.stories.tsx +42 -0
- package/styled-components/cjs/examples/plasma_web/components/Tabs/TabItem.config.js +8 -8
- package/styled-components/cjs/examples/plasma_web/components/Tabs/Tabs.config.js +5 -4
- package/styled-components/cjs/examples/plasma_web/components/Tabs/Tabs.stories.tsx +196 -287
- package/styled-components/cjs/index.js +11 -0
- package/styled-components/es/components/Breadcrumbs/Breadcrumbs.js +50 -0
- package/styled-components/es/components/Breadcrumbs/Breadcrumbs.styles.js +24 -0
- package/styled-components/es/components/Breadcrumbs/Breadcrumbs.template-doc.mdx +96 -0
- package/styled-components/es/components/Breadcrumbs/Breadcrumbs.tokens.js +15 -0
- package/styled-components/es/components/Breadcrumbs/Breadcrumbs.types.js +1 -0
- package/styled-components/es/components/Breadcrumbs/README.md +78 -0
- package/styled-components/es/components/Breadcrumbs/index.js +2 -0
- package/styled-components/es/components/Breadcrumbs/ui/BreadcrumbShorter/BreadcrumbShorter.js +33 -0
- package/styled-components/es/components/Breadcrumbs/ui/BreadcrumbShorter/BreadcrumbShorter.styles.js +17 -0
- package/styled-components/es/components/Breadcrumbs/ui/BreadcrumbShorter/BreadcrumbShorter.types.js +1 -0
- package/styled-components/es/components/Breadcrumbs/utils/index.js +42 -0
- package/styled-components/es/components/Breadcrumbs/variations/_size/base.js +2 -0
- package/styled-components/es/components/Breadcrumbs/variations/_size/tokens.json +0 -0
- package/styled-components/es/components/Breadcrumbs/variations/_view/base.js +2 -0
- package/styled-components/es/components/Breadcrumbs/variations/_view/tokens.json +0 -0
- package/styled-components/es/components/Tabs/tokens.js +2 -5
- package/styled-components/es/components/Tabs/ui/TabItem/TabItem.js +2 -8
- package/styled-components/es/components/Tabs/ui/TabItem/variations/_view/base.js +1 -1
- package/styled-components/es/components/Tabs/ui/Tabs/Tabs.js +9 -52
- package/styled-components/es/components/Tabs/ui/Tabs/Tabs.styles.js +3 -3
- package/styled-components/es/components/Tabs/ui/Tabs/variations/_stretch/base.js +1 -1
- package/styled-components/es/components/Tabs/ui/Tabs/variations/_view/tokens.json +1 -1
- package/styled-components/es/examples/plasma_b2c/components/Breadcrumbs/Breadcrumbs.config.js +19 -0
- package/styled-components/es/examples/plasma_b2c/components/Breadcrumbs/Breadcrumbs.js +5 -0
- package/styled-components/es/examples/plasma_b2c/components/Breadcrumbs/Breadcrumbs.stories.tsx +42 -0
- package/styled-components/es/examples/plasma_b2c/components/Tabs/TabItem.config.js +8 -8
- package/styled-components/es/examples/plasma_b2c/components/Tabs/Tabs.config.js +5 -4
- package/styled-components/es/examples/plasma_b2c/components/Tabs/Tabs.stories.tsx +196 -287
- package/styled-components/es/examples/plasma_web/components/Breadcrumbs/Breadcrumbs.config.js +19 -0
- package/styled-components/es/examples/plasma_web/components/Breadcrumbs/Breadcrumbs.js +5 -0
- package/styled-components/es/examples/plasma_web/components/Breadcrumbs/Breadcrumbs.stories.tsx +42 -0
- package/styled-components/es/examples/plasma_web/components/Tabs/TabItem.config.js +8 -8
- package/styled-components/es/examples/plasma_web/components/Tabs/Tabs.config.js +5 -4
- package/styled-components/es/examples/plasma_web/components/Tabs/Tabs.stories.tsx +196 -287
- package/styled-components/es/index.js +1 -0
- package/types/components/Breadcrumbs/Breadcrumbs.d.ts +35 -0
- package/types/components/Breadcrumbs/Breadcrumbs.d.ts.map +1 -0
- package/types/components/Breadcrumbs/Breadcrumbs.styles.d.ts +7 -0
- package/types/components/Breadcrumbs/Breadcrumbs.styles.d.ts.map +1 -0
- package/types/components/Breadcrumbs/Breadcrumbs.tokens.d.ts +16 -0
- package/types/components/Breadcrumbs/Breadcrumbs.tokens.d.ts.map +1 -0
- package/types/components/Breadcrumbs/Breadcrumbs.types.d.ts +38 -0
- package/types/components/Breadcrumbs/Breadcrumbs.types.d.ts.map +1 -0
- package/types/components/Breadcrumbs/index.d.ts +4 -0
- package/types/components/Breadcrumbs/index.d.ts.map +1 -0
- package/types/components/Breadcrumbs/ui/BreadcrumbShorter/BreadcrumbShorter.d.ts +4 -0
- package/types/components/Breadcrumbs/ui/BreadcrumbShorter/BreadcrumbShorter.d.ts.map +1 -0
- package/types/components/Breadcrumbs/ui/BreadcrumbShorter/BreadcrumbShorter.styles.d.ts +4 -0
- package/types/components/Breadcrumbs/ui/BreadcrumbShorter/BreadcrumbShorter.styles.d.ts.map +1 -0
- package/types/components/Breadcrumbs/ui/BreadcrumbShorter/BreadcrumbShorter.types.d.ts +8 -0
- package/types/components/Breadcrumbs/ui/BreadcrumbShorter/BreadcrumbShorter.types.d.ts.map +1 -0
- package/types/components/Breadcrumbs/utils/index.d.ts +7 -0
- package/types/components/Breadcrumbs/utils/index.d.ts.map +1 -0
- package/types/components/Breadcrumbs/variations/_size/base.d.ts +2 -0
- package/types/components/Breadcrumbs/variations/_size/base.d.ts.map +1 -0
- package/types/components/Breadcrumbs/variations/_view/base.d.ts +2 -0
- package/types/components/Breadcrumbs/variations/_view/base.d.ts.map +1 -0
- package/types/components/Header/ui/HeaderArrow/HeaderArrow.d.ts +2 -2
- package/types/components/Tabs/tokens.d.ts +0 -3
- package/types/components/Tabs/tokens.d.ts.map +1 -1
- package/types/components/Tabs/ui/TabItem/TabItem.d.ts.map +1 -1
- package/types/components/Tabs/ui/TabItem/variations/_view/base.d.ts.map +1 -1
- package/types/components/Tabs/ui/Tabs/Tabs.d.ts +2 -4
- package/types/components/Tabs/ui/Tabs/Tabs.d.ts.map +1 -1
- package/types/components/Tabs/ui/Tabs/Tabs.styles.d.ts.map +1 -1
- package/types/components/Tabs/ui/Tabs/Tabs.types.d.ts +5 -12
- package/types/components/Tabs/ui/Tabs/Tabs.types.d.ts.map +1 -1
- package/types/components/Tabs/ui/Tabs/variations/_stretch/base.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/Breadcrumbs/Breadcrumbs.config.d.ts +18 -0
- package/types/examples/plasma_b2c/components/Breadcrumbs/Breadcrumbs.config.d.ts.map +1 -0
- package/types/examples/plasma_b2c/components/Breadcrumbs/Breadcrumbs.d.ts +19 -0
- package/types/examples/plasma_b2c/components/Breadcrumbs/Breadcrumbs.d.ts.map +1 -0
- package/types/examples/plasma_b2c/components/Header/Header.d.ts +1 -1
- package/types/examples/plasma_b2c/components/Tabs/TabItem.config.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/Tabs/Tabs.config.d.ts +1 -0
- package/types/examples/plasma_b2c/components/Tabs/Tabs.config.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/Tabs/Tabs.d.ts +1 -2
- package/types/examples/plasma_b2c/components/Tabs/Tabs.d.ts.map +1 -1
- package/types/examples/plasma_web/components/Breadcrumbs/Breadcrumbs.config.d.ts +18 -0
- package/types/examples/plasma_web/components/Breadcrumbs/Breadcrumbs.config.d.ts.map +1 -0
- package/types/examples/plasma_web/components/Breadcrumbs/Breadcrumbs.d.ts +19 -0
- package/types/examples/plasma_web/components/Breadcrumbs/Breadcrumbs.d.ts.map +1 -0
- package/types/examples/plasma_web/components/Header/Header.d.ts +1 -1
- package/types/examples/plasma_web/components/Tabs/TabItem.config.d.ts.map +1 -1
- package/types/examples/plasma_web/components/Tabs/Tabs.config.d.ts +1 -0
- package/types/examples/plasma_web/components/Tabs/Tabs.config.d.ts.map +1 -1
- package/types/examples/plasma_web/components/Tabs/Tabs.d.ts +1 -2
- package/types/examples/plasma_web/components/Tabs/Tabs.d.ts.map +1 -1
- package/types/examples/sds_engineer/components/Tabs/Tabs.d.ts +1 -2
- package/types/examples/sds_engineer/components/Tabs/Tabs.d.ts.map +1 -1
- package/types/index.d.ts +1 -0
- package/types/index.d.ts.map +1 -1
- package/cjs/components/Tabs/ui/TabItem/variations/_view/base_7pcxtm.css +0 -1
- package/es/components/Tabs/ui/TabItem/variations/_view/base_7pcxtm.css +0 -1
@@ -0,0 +1,50 @@
|
|
1
|
+
import React, { forwardRef } from 'react';
|
2
|
+
import { cx } from '../../utils';
|
3
|
+
import { base as sizeCSS } from './variations/_size/base';
|
4
|
+
import { base as viewCSS } from './variations/_view/base';
|
5
|
+
import { base, Separator } from './Breadcrumbs.styles';
|
6
|
+
import { addSeparator, convertIconSize, getRenderItems } from './utils';
|
7
|
+
export var breadcrumbsRoot = function breadcrumbsRoot(Root) {
|
8
|
+
return /*#__PURE__*/forwardRef(function (_ref, outerRootRef) {
|
9
|
+
var view = _ref.view,
|
10
|
+
size = _ref.size,
|
11
|
+
separator = _ref.separator,
|
12
|
+
items = _ref.items,
|
13
|
+
_ref$showItems = _ref.showItems,
|
14
|
+
showItems = _ref$showItems === void 0 ? items.length : _ref$showItems,
|
15
|
+
className = _ref.className;
|
16
|
+
var renderSeparator = separator !== null && separator !== void 0 ? separator : /*#__PURE__*/React.createElement(Separator, {
|
17
|
+
color: "inherit",
|
18
|
+
size: convertIconSize(size)
|
19
|
+
});
|
20
|
+
var renderItems = getRenderItems(items, renderSeparator, showItems);
|
21
|
+
var itemsWithSeparator = addSeparator(renderItems, renderSeparator);
|
22
|
+
return /*#__PURE__*/React.createElement(Root, {
|
23
|
+
ref: outerRootRef,
|
24
|
+
size: size,
|
25
|
+
view: view,
|
26
|
+
className: cx(className),
|
27
|
+
items: items
|
28
|
+
}, itemsWithSeparator.map(function (item) {
|
29
|
+
return item;
|
30
|
+
}));
|
31
|
+
});
|
32
|
+
};
|
33
|
+
export var breadcrumbsConfig = {
|
34
|
+
name: 'Breadcrumbs',
|
35
|
+
tag: 'div',
|
36
|
+
layout: breadcrumbsRoot,
|
37
|
+
base: base,
|
38
|
+
variations: {
|
39
|
+
view: {
|
40
|
+
css: viewCSS
|
41
|
+
},
|
42
|
+
size: {
|
43
|
+
css: sizeCSS
|
44
|
+
}
|
45
|
+
},
|
46
|
+
defaults: {
|
47
|
+
view: 'default',
|
48
|
+
size: 'm'
|
49
|
+
}
|
50
|
+
};
|
@@ -0,0 +1,24 @@
|
|
1
|
+
import styled from 'styled-components';
|
2
|
+
import { css } from 'styled-components';
|
3
|
+
import { linkConfig } from '../Link';
|
4
|
+
import { component, mergeConfig } from '../../engines';
|
5
|
+
import { IconDisclosureRight } from '../_Icon';
|
6
|
+
import { addFocus } from '../../mixins';
|
7
|
+
import { tokens } from './Breadcrumbs.tokens';
|
8
|
+
var mergedLinkConfig = /*#__PURE__*/mergeConfig(linkConfig);
|
9
|
+
var Link = /*#__PURE__*/component(mergedLinkConfig);
|
10
|
+
export var StyledLink = /*#__PURE__*/styled(Link).withConfig({
|
11
|
+
componentId: "plasma-new-hope__sc-4bjoev-0"
|
12
|
+
})(["opacity:", ";", ""], function (_ref) {
|
13
|
+
var isHref = _ref.isHref;
|
14
|
+
return isHref ? 1 : "var(".concat(tokens.breadcrumbsOpacity, ")");
|
15
|
+
}, /*#__PURE__*/addFocus({
|
16
|
+
outlineOffset: '0rem',
|
17
|
+
outlineSize: '0.125rem',
|
18
|
+
outlineRadius: '0rem',
|
19
|
+
outlineColor: /*#__PURE__*/"var(".concat(tokens.breadcrumbsFocusOutlineColor, ")")
|
20
|
+
}));
|
21
|
+
export var base = /*#__PURE__*/css(["display:flex;flex-direction:row;align-items:center;gap:var(", ");color:var(", ");font-family:var(", ");font-size:var(", ");font-weight:var(", ");font-style:var(", ");letter-spacing:var(", ");line-height:var(", ");"], tokens.breadcrumbsGap, tokens.breadcrumbsColor, tokens.breadcrumbsFontFamily, tokens.breadcrumbsFontSize, tokens.breadcrumbsFontWeight, tokens.breadcrumbsFontStyle, tokens.breadcrumbsLetterSpacing, tokens.breadcrumbsLineHeight);
|
22
|
+
export var Separator = /*#__PURE__*/styled(IconDisclosureRight).withConfig({
|
23
|
+
componentId: "plasma-new-hope__sc-4bjoev-1"
|
24
|
+
})(["color:var(", ");opacity:var(", ");"], tokens.breadcrumbsColor, tokens.breadcrumbsOpacity);
|
@@ -0,0 +1,96 @@
|
|
1
|
+
---
|
2
|
+
id: breadcrumbs
|
3
|
+
title: Breadcrumbs
|
4
|
+
---
|
5
|
+
|
6
|
+
import { PropsTable } from '@site/src/components';
|
7
|
+
|
8
|
+
# Breadcrumbs
|
9
|
+
<PropsTable name="Breadcrumbs" />
|
10
|
+
|
11
|
+
# Обычное использование
|
12
|
+
|
13
|
+
```tsx live
|
14
|
+
import React from 'react';
|
15
|
+
import { Breadcrumbs } from '@salutejs/plasma-web';
|
16
|
+
|
17
|
+
export function App() {
|
18
|
+
const items = [
|
19
|
+
{ title: 'Home', href: '/' },
|
20
|
+
{ title: 'About as', href: '/' },
|
21
|
+
{ renderItem: () => <span>Custom Item</span> },
|
22
|
+
{ title: 'Contacts' },
|
23
|
+
];
|
24
|
+
|
25
|
+
return (
|
26
|
+
<div>
|
27
|
+
<Breadcrumbs items={items} />
|
28
|
+
</div>
|
29
|
+
);
|
30
|
+
}
|
31
|
+
```
|
32
|
+
# Использование с shorter
|
33
|
+
```tsx live
|
34
|
+
import React from 'react';
|
35
|
+
import { Breadcrumbs } from '@salutejs/plasma-web';
|
36
|
+
|
37
|
+
export function App() {
|
38
|
+
const items = [
|
39
|
+
{ title: 'Home', href: '/' },
|
40
|
+
{ title: 'About as', href: '/' },
|
41
|
+
{ renderItem: () => <span>Custom Item</span> },
|
42
|
+
{ title: 'Contacts' },
|
43
|
+
];
|
44
|
+
|
45
|
+
return (
|
46
|
+
<div style={{"flexDirection": 'column'}}>
|
47
|
+
<div>
|
48
|
+
<Breadcrumbs items={items} showItems={2} />
|
49
|
+
</div>
|
50
|
+
<div>
|
51
|
+
<Breadcrumbs items={items} showItems={3} />
|
52
|
+
</div>
|
53
|
+
</div>
|
54
|
+
);
|
55
|
+
}
|
56
|
+
```
|
57
|
+
|
58
|
+
# Использование с кастомным элементом
|
59
|
+
```tsx live
|
60
|
+
import React from 'react';
|
61
|
+
import { Breadcrumbs, Dropdown } from '@salutejs/plasma-web';
|
62
|
+
|
63
|
+
export function App() {
|
64
|
+
const items = [
|
65
|
+
{ title: 'Home', href: '/' },
|
66
|
+
{ title: 'About as', href: '/' },
|
67
|
+
{
|
68
|
+
renderItem: () => {
|
69
|
+
const itemsDropdown = [
|
70
|
+
{
|
71
|
+
value: 'Custom Item 1',
|
72
|
+
label: 'Custom Item 1',
|
73
|
+
},
|
74
|
+
{
|
75
|
+
value: 'Custom Item 2',
|
76
|
+
label: 'Custom Item 2',
|
77
|
+
},
|
78
|
+
];
|
79
|
+
return (
|
80
|
+
<Dropdown variant="tight" placement="bottom" items={itemsDropdown} trigger="hover">
|
81
|
+
<span>...</span>
|
82
|
+
</Dropdown>
|
83
|
+
);
|
84
|
+
},
|
85
|
+
},
|
86
|
+
{ title: 'Contacts' },
|
87
|
+
];
|
88
|
+
|
89
|
+
|
90
|
+
return (
|
91
|
+
<div style={{height: '200px'}}>
|
92
|
+
<Breadcrumbs items={items} />
|
93
|
+
</div>
|
94
|
+
);
|
95
|
+
}
|
96
|
+
```
|
@@ -0,0 +1,15 @@
|
|
1
|
+
export var classes = {
|
2
|
+
breadcrumbsRoot: 'breadcrumbs-root'
|
3
|
+
};
|
4
|
+
export var tokens = {
|
5
|
+
breadcrumbsGap: '--plasma-breadcrumbs-gap',
|
6
|
+
breadcrumbsOpacity: '--plasma-breadcrumbs-opacity',
|
7
|
+
breadcrumbsFocusOutlineColor: '--plasma-breadcrumbs-focus-outline-color',
|
8
|
+
breadcrumbsColor: '--plasma-breadcrumbs-color',
|
9
|
+
breadcrumbsFontFamily: '--plasma-breadcrumbs-font-family',
|
10
|
+
breadcrumbsFontSize: '--plasma-breadcrumbs-font-size',
|
11
|
+
breadcrumbsFontStyle: '--plasma-breadcrumbs-font-style',
|
12
|
+
breadcrumbsFontWeight: '--plasma-breadcrumbs-font-weight',
|
13
|
+
breadcrumbsLetterSpacing: '--plasma-breadcrumbs-letter-spacing',
|
14
|
+
breadcrumbsLineHeight: '--plasma-breadcrumbs-line-height'
|
15
|
+
};
|
@@ -0,0 +1 @@
|
|
1
|
+
export {};
|
@@ -0,0 +1,78 @@
|
|
1
|
+
Структура файлов:
|
2
|
+
|
3
|
+
- Breadcrumbs.types.ts
|
4
|
+
- Breadcrumbs.tokens.ts
|
5
|
+
- Breadcrumbs.tsx
|
6
|
+
- index.ts
|
7
|
+
- variants:
|
8
|
+
- - \_size:
|
9
|
+
- - - base.ts
|
10
|
+
- - - tokens.json
|
11
|
+
- ui:
|
12
|
+
- - BreadcrumbItem:
|
13
|
+
- - - BreadcrumbItem.tsx
|
14
|
+
- - BreadcrumbShorter:
|
15
|
+
- - - BreadcrumbShorter.tsx
|
16
|
+
- - BreadcrumbSeparator:
|
17
|
+
- - - BreadcrumbSeparator.tsx
|
18
|
+
|
19
|
+
Логика работы:
|
20
|
+
|
21
|
+
1. На вход идет 1 обязательный параметр: items
|
22
|
+
|
23
|
+
```jsx
|
24
|
+
<Breadcrumbs items={[{ title: 'Главная', href: '/' }]}></Breadcreumbs>
|
25
|
+
```
|
26
|
+
|
27
|
+
2. Затем генерируется массив элементов хлебных крошек, между ними сепаратор ( если указан пропс, то используется элемент из параметра, иначе стандартный из BreadcrumbSeparator )
|
28
|
+
|
29
|
+
```jsx
|
30
|
+
<Breadcrumbs items={[{ title: 'Главная', href: '/' }]} separator=">"></Breadcreumbs>
|
31
|
+
```
|
32
|
+
|
33
|
+
2.1. При генерации BreadcrumbItem, смотрит на href. Если он есть, то добавляется тег a, с указанной ссылкой, иначе ссылка не кликабельна
|
34
|
+
|
35
|
+
```jsx
|
36
|
+
<Breadcrumbs
|
37
|
+
items={[
|
38
|
+
{ title: 'Главная', href: '/' },
|
39
|
+
{ title: 'Контакты' }, // Без ссылки
|
40
|
+
]}
|
41
|
+
separator=">"
|
42
|
+
></Breadcreumbs>
|
43
|
+
```
|
44
|
+
|
45
|
+
3. Можно указать в item, вместо title и href - renderItem. Эта функция, которая возвращает любое, что придумал разработчик. кастомный шортер, определенный функционал для него ( например кнопку )
|
46
|
+
|
47
|
+
```jsx
|
48
|
+
const renderItem = () => {
|
49
|
+
return <Button>Контакты</Button>
|
50
|
+
}
|
51
|
+
<Breadcrumbs
|
52
|
+
items={[
|
53
|
+
{title: 'Главная', href: '/'},
|
54
|
+
{renderItem: renderItem}
|
55
|
+
{title: 'Адрес'}
|
56
|
+
]}
|
57
|
+
separator=">">
|
58
|
+
</Breadcreumbs>
|
59
|
+
```
|
60
|
+
|
61
|
+
ТАКЖЕ: Можно указать кол-во видимых элементов через параметр showItems. ShowItems: если указано четное число, например 2 - то распределяется равномерно по 1 с каждой стороны. Если нечетное, например 3 - то две будет справа и 1 слева. Все оставльное сокращается шортером
|
62
|
+
|
63
|
+
```jsx
|
64
|
+
const renderItem = () => {
|
65
|
+
return <Button>Контакты</Button>
|
66
|
+
}
|
67
|
+
<Breadcrumbs
|
68
|
+
items={[
|
69
|
+
{title: 'Главная', href: '/'},
|
70
|
+
{renderItem: renderItem}
|
71
|
+
{title: 'Адрес'}
|
72
|
+
]}
|
73
|
+
showItems={2}
|
74
|
+
separator=">">
|
75
|
+
</Breadcreumbs>
|
76
|
+
```
|
77
|
+
|
78
|
+
4. Затем все элементы рендерятся и показываются пользователю
|
@@ -0,0 +1,33 @@
|
|
1
|
+
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
2
|
+
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."); }
|
3
|
+
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
4
|
+
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
|
5
|
+
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
|
6
|
+
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
7
|
+
import React, { useState } from 'react';
|
8
|
+
import { addSeparator } from '../../utils';
|
9
|
+
import { StyledHidden, StyledRoot, StyledShorter } from './BreadcrumbShorter.styles';
|
10
|
+
export var BreadcrumbShorter = function BreadcrumbShorter(_ref) {
|
11
|
+
var children = _ref.children,
|
12
|
+
separator = _ref.separator;
|
13
|
+
var _useState = useState(false),
|
14
|
+
_useState2 = _slicedToArray(_useState, 2),
|
15
|
+
openShorter = _useState2[0],
|
16
|
+
setOpenShorter = _useState2[1];
|
17
|
+
var renderItems = addSeparator(children, separator);
|
18
|
+
var onKeyPress = function onKeyPress(event) {
|
19
|
+
event.persist();
|
20
|
+
if (event.keyCode === 13) {
|
21
|
+
setOpenShorter(true);
|
22
|
+
}
|
23
|
+
};
|
24
|
+
return /*#__PURE__*/React.createElement(StyledRoot, null, !openShorter && /*#__PURE__*/React.createElement(StyledShorter, {
|
25
|
+
tabIndex: 0,
|
26
|
+
onClick: function onClick() {
|
27
|
+
return setOpenShorter(true);
|
28
|
+
},
|
29
|
+
onKeyDown: onKeyPress
|
30
|
+
}, "..."), openShorter && /*#__PURE__*/React.createElement(StyledHidden, null, renderItems.map(function (item) {
|
31
|
+
return item;
|
32
|
+
})));
|
33
|
+
};
|
package/styled-components/es/components/Breadcrumbs/ui/BreadcrumbShorter/BreadcrumbShorter.styles.js
ADDED
@@ -0,0 +1,17 @@
|
|
1
|
+
import styled from 'styled-components';
|
2
|
+
import { addFocus } from '../../../../mixins';
|
3
|
+
import { tokens } from '../../Breadcrumbs.tokens';
|
4
|
+
export var StyledRoot = /*#__PURE__*/styled.div.withConfig({
|
5
|
+
componentId: "plasma-new-hope__sc-1shiits-0"
|
6
|
+
})([""]);
|
7
|
+
export var StyledShorter = /*#__PURE__*/styled.div.withConfig({
|
8
|
+
componentId: "plasma-new-hope__sc-1shiits-1"
|
9
|
+
})(["cursor:pointer;", ""], /*#__PURE__*/addFocus({
|
10
|
+
outlineOffset: '0.125rem',
|
11
|
+
outlineSize: '0.125rem',
|
12
|
+
outlineRadius: '0',
|
13
|
+
outlineColor: /*#__PURE__*/"var(".concat(tokens.breadcrumbsFocusOutlineColor, ")")
|
14
|
+
}));
|
15
|
+
export var StyledHidden = /*#__PURE__*/styled.div.withConfig({
|
16
|
+
componentId: "plasma-new-hope__sc-1shiits-2"
|
17
|
+
})(["display:flex;align-items:center;gap:var(", ");"], tokens.breadcrumbsGap);
|
package/styled-components/es/components/Breadcrumbs/ui/BreadcrumbShorter/BreadcrumbShorter.types.js
ADDED
@@ -0,0 +1 @@
|
|
1
|
+
export {};
|
@@ -0,0 +1,42 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
import { BreadcrumbShorter } from '../ui/BreadcrumbShorter/BreadcrumbShorter';
|
3
|
+
import { StyledLink } from '../Breadcrumbs.styles';
|
4
|
+
export var shortItems = function shortItems(items, renderSeparator, showItems) {
|
5
|
+
if (!showItems || showItems < 2 || items.length <= showItems) {
|
6
|
+
return items;
|
7
|
+
}
|
8
|
+
var leftSlice = Math.floor(showItems / 2);
|
9
|
+
var rightSlice = items.length - leftSlice - showItems % 2;
|
10
|
+
var renderItems = items.slice(leftSlice, rightSlice);
|
11
|
+
var shorter = /*#__PURE__*/React.createElement(BreadcrumbShorter, {
|
12
|
+
separator: renderSeparator
|
13
|
+
}, renderItems);
|
14
|
+
items.splice(leftSlice, rightSlice - leftSlice, shorter);
|
15
|
+
return items;
|
16
|
+
};
|
17
|
+
export var convertIconSize = function convertIconSize(size) {
|
18
|
+
switch (size) {
|
19
|
+
case 's':
|
20
|
+
case 'xs':
|
21
|
+
return 'xs';
|
22
|
+
default:
|
23
|
+
return 's';
|
24
|
+
}
|
25
|
+
};
|
26
|
+
export var getRenderItems = function getRenderItems(items, renderSeparator, showItems) {
|
27
|
+
return shortItems(items.map(function (item) {
|
28
|
+
if ('renderItem' in item) {
|
29
|
+
return item.renderItem();
|
30
|
+
}
|
31
|
+
return /*#__PURE__*/React.createElement(StyledLink, {
|
32
|
+
tabIndex: 0,
|
33
|
+
href: item.href,
|
34
|
+
isHref: Boolean(item.href)
|
35
|
+
}, item.title);
|
36
|
+
}), renderSeparator, showItems);
|
37
|
+
};
|
38
|
+
export var addSeparator = function addSeparator(items, renderSeparator) {
|
39
|
+
return items.flatMap(function (item, idx) {
|
40
|
+
return idx < items.length - 1 ? [item, renderSeparator] : [item];
|
41
|
+
});
|
42
|
+
};
|
File without changes
|
File without changes
|
@@ -9,9 +9,7 @@ export var classes = {
|
|
9
9
|
tabRightContent: 'tab-item-right-content',
|
10
10
|
tabLeftContent: 'tab-item-left-content',
|
11
11
|
tabsHasLeftArrow: 'tabs-has-left-arrow',
|
12
|
-
tabsHasRightArrow: 'tabs-has-right-arrow'
|
13
|
-
tabsClipScroll: 'tabs-clip-scroll',
|
14
|
-
tabsClipShowAll: 'tabs-clip-show-all'
|
12
|
+
tabsHasRightArrow: 'tabs-has-right-arrow'
|
15
13
|
};
|
16
14
|
export var tokens = {
|
17
15
|
disabledOpacity: '--plasma-tabs-disabled-opacity',
|
@@ -28,7 +26,7 @@ export var tokens = {
|
|
28
26
|
outlineFocusColor: '--plasma-tabs-outline-focus-color',
|
29
27
|
arrowColor: '--plasma-tabs-arrow-color',
|
30
28
|
tabsFilledBackgroundColor: '--plasma-tabs-filled-background-color',
|
31
|
-
tabsBackgroundColor: '--plasma-tabs-
|
29
|
+
tabsBackgroundColor: '--plasma-tabs-backgorund-color',
|
32
30
|
tabsBorderRadius: '--plasma-tabs-border-radius',
|
33
31
|
tabsWidth: '--plasma-tabs-width',
|
34
32
|
tabsHeight: '--plasma-tabs-height',
|
@@ -52,7 +50,6 @@ export var tokens = {
|
|
52
50
|
itemColor: '--plasma-tab-item-color',
|
53
51
|
itemBackgroundColor: '--plasma-tab-item-background-color',
|
54
52
|
itemColorHover: '--plasma-tab-item-color-hover',
|
55
|
-
itemColorActive: '--plasma-tab-item-color-active',
|
56
53
|
itemBackgroundColorHover: '--plasma-tab-item-background-color-hover',
|
57
54
|
itemSelectedColor: '--plasma-tab-item-selected-color',
|
58
55
|
itemSelectedBackgroundColor: '--plasma-tab-item-selected-background-color',
|
@@ -1,4 +1,4 @@
|
|
1
|
-
var _excluded = ["size", "view", "isActive", "selected", "disabled", "pilled", "children", "contentLeft", "contentRight", "animated", "onIndexChange", "itemIndex", "tabIndex", "className"
|
1
|
+
var _excluded = ["size", "view", "isActive", "selected", "disabled", "pilled", "children", "contentLeft", "contentRight", "animated", "onIndexChange", "itemIndex", "tabIndex", "className"];
|
2
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); }
|
3
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; }
|
4
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; }
|
@@ -31,7 +31,6 @@ export var tabItemRoot = function tabItemRoot(Root) {
|
|
31
31
|
itemIndex = props.itemIndex,
|
32
32
|
tabIndex = props.tabIndex,
|
33
33
|
className = props.className,
|
34
|
-
onClick = props.onClick,
|
35
34
|
rest = _objectWithoutProperties(props, _excluded);
|
36
35
|
var innerRef = useRef(null);
|
37
36
|
var ref = useForkRef(outerRef, innerRef);
|
@@ -73,10 +72,6 @@ export var tabItemRoot = function tabItemRoot(Root) {
|
|
73
72
|
onIndexChange === null || onIndexChange === void 0 || onIndexChange(focusIndex);
|
74
73
|
refs.setCurrent(focusIndex);
|
75
74
|
}, [refs, innerRef, onIndexChange, disabled]);
|
76
|
-
var handleClick = useCallback(function (event) {
|
77
|
-
event.currentTarget.scrollIntoView();
|
78
|
-
onClick && onClick(event);
|
79
|
-
}, [onClick]);
|
80
75
|
return /*#__PURE__*/React.createElement(Root, _extends({
|
81
76
|
ref: ref,
|
82
77
|
disabled: disabled,
|
@@ -86,8 +81,7 @@ export var tabItemRoot = function tabItemRoot(Root) {
|
|
86
81
|
size: size,
|
87
82
|
onFocus: onItemFocus,
|
88
83
|
tabIndex: hasKeyNavigation ? navigationTabIndex : tabIndex,
|
89
|
-
className: cx(pilledClass, selectedClass, animatedClass, className)
|
90
|
-
onClick: handleClick
|
84
|
+
className: cx(pilledClass, selectedClass, animatedClass, className)
|
91
85
|
}, rest), /*#__PURE__*/React.createElement(React.Fragment, null, contentLeft && /*#__PURE__*/React.createElement(LeftContent, {
|
92
86
|
className: classes.tabLeftContent
|
93
87
|
}, contentLeft), /*#__PURE__*/React.createElement(StyledContent, {
|
@@ -1,4 +1,4 @@
|
|
1
1
|
import { css } from 'styled-components';
|
2
2
|
import { classes, tokens } from '../../../../tokens';
|
3
3
|
import { RightContent } from '../../TabItem.styles';
|
4
|
-
export var base = /*#__PURE__*/css(["color:var(", ");background-color:var(", ");margin-left:var(", ",var(", "));&:hover{color:var(", ");background-color:var(", ");", "{color:var(", ");}}
|
4
|
+
export var base = /*#__PURE__*/css(["color:var(", ");background-color:var(", ");margin-left:var(", ",var(", "));&:hover{color:var(", ");background-color:var(", ");", "{color:var(", ");}}&.", "{transition:var(", ");}&.", "{color:var(", ");background-color:var(", ");&:hover{color:var(", ");background-color:var(", ");&::after{background:var(", ");}}", "{color:var(", ");&:hover{color:var(", ");}}&::after{content:'';position:absolute;bottom:0px;left:0;right:0;background:var(", ");height:var(", ");border-radius:1px;}}"], tokens.itemColor, tokens.itemBackgroundColor, tokens.itemMarginLeftFilled, tokens.itemMarginLeft, tokens.itemColorHover, tokens.itemBackgroundColorHover, RightContent, tokens.additionalContentHoverColor, /*#__PURE__*/String(classes.tabItemAnimated), tokens.itemBackgroundTransition, /*#__PURE__*/String(classes.selectedTabsItem), tokens.itemSelectedColor, tokens.itemSelectedBackgroundColor, tokens.itemSelectedColorHover, tokens.itemSelectedBackgroundColorHover, tokens.itemSelectedDividerColorHover, RightContent, tokens.additionalContentSelectedColor, tokens.additionalContentSelectedHoverColor, tokens.itemSelectedDividerColor, tokens.itemSelectedDividerHeight);
|
@@ -1,4 +1,4 @@
|
|
1
|
-
var _excluded = ["id", "stretch", "disabled", "
|
1
|
+
var _excluded = ["id", "stretch", "disabled", "size", "view", "children", "pilled", "index", "className"];
|
2
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); }
|
3
3
|
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
4
4
|
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."); }
|
@@ -9,7 +9,7 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
9
9
|
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
10
|
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
11
|
import React, { forwardRef, useCallback, useMemo, useState, useEffect, useRef } from 'react';
|
12
|
-
import { safeUseId } from '@salutejs/plasma-core';
|
12
|
+
import { animatedScrollToX, safeUseId } from '@salutejs/plasma-core';
|
13
13
|
import { IconDisclosureLeft, IconDisclosureRight } from '../../../_Icon';
|
14
14
|
import { classes, tokens } from '../../tokens';
|
15
15
|
import { cx } from '../../../../utils';
|
@@ -34,13 +34,10 @@ export var tabsRoot = function tabsRoot(Root) {
|
|
34
34
|
stretch = _props$stretch === void 0 ? false : _props$stretch,
|
35
35
|
_props$disabled = props.disabled,
|
36
36
|
disabled = _props$disabled === void 0 ? false : _props$disabled,
|
37
|
-
_props$clip = props.clip,
|
38
|
-
clip = _props$clip === void 0 ? 'scroll' : _props$clip,
|
39
37
|
size = props.size,
|
40
38
|
view = props.view,
|
41
39
|
children = props.children,
|
42
|
-
|
43
|
-
pilled = _props$pilled === void 0 ? false : _props$pilled,
|
40
|
+
pilled = props.pilled,
|
44
41
|
index = props.index,
|
45
42
|
className = props.className,
|
46
43
|
rest = _objectWithoutProperties(props, _excluded);
|
@@ -63,41 +60,14 @@ export var tabsRoot = function tabsRoot(Root) {
|
|
63
60
|
var stretchClass = firstItemVisible && lastItemVisible && stretch ? classes.tabsStretch : undefined;
|
64
61
|
var hasLeftArrowClass = !firstItemVisible ? classes.tabsHasLeftArrow : undefined;
|
65
62
|
var hasRightArrowClass = !lastItemVisible ? classes.tabsHasRightArrow : undefined;
|
66
|
-
var clipScrollClass = clip === 'scroll' ? classes.tabsClipScroll : undefined;
|
67
|
-
var clipShowAllClass = clip === 'showAll' ? classes.tabsClipShowAll : undefined;
|
68
63
|
var scrollRef = useRef(null);
|
69
64
|
var trackRef = useRef(null);
|
70
|
-
var leftArrowRef = useRef(null);
|
71
65
|
var onPrev = useCallback(function () {
|
72
|
-
|
73
|
-
|
74
|
-
return;
|
75
|
-
}
|
76
|
-
var scrollLeft = Math.round(scrollRef.current.scrollLeft);
|
77
|
-
var firstOverflowingTab = refs.items.slice().reverse().find(function (item) {
|
78
|
-
if (!item.current || item.current.offsetLeft === undefined) {
|
79
|
-
return;
|
80
|
-
}
|
81
|
-
var tabStartX = item.current.offsetLeft;
|
82
|
-
return tabStartX < scrollLeft;
|
83
|
-
});
|
84
|
-
firstOverflowingTab === null || firstOverflowingTab === void 0 || (_firstOverflowingTab$ = firstOverflowingTab.current) === null || _firstOverflowingTab$ === void 0 || _firstOverflowingTab$.scrollIntoView();
|
85
|
-
}, [disabled, scrollRef, refs]);
|
66
|
+
!disabled && scrollRef.current && animatedScrollToX(scrollRef.current, scrollRef.current.scrollLeft - scrollRef.current.offsetWidth / 2);
|
67
|
+
}, [disabled, scrollRef]);
|
86
68
|
var onNext = useCallback(function () {
|
87
|
-
|
88
|
-
|
89
|
-
return;
|
90
|
-
}
|
91
|
-
var scrollRight = Math.round(scrollRef.current.scrollLeft + scrollRef.current.clientWidth);
|
92
|
-
var lastOverflowingTab = refs.items.find(function (item) {
|
93
|
-
if (!item.current || item.current.offsetLeft === undefined) {
|
94
|
-
return;
|
95
|
-
}
|
96
|
-
var tabEndX = item.current.offsetLeft + item.current.offsetWidth;
|
97
|
-
return tabEndX > scrollRight;
|
98
|
-
});
|
99
|
-
lastOverflowingTab === null || lastOverflowingTab === void 0 || (_lastOverflowingTab$c = lastOverflowingTab.current) === null || _lastOverflowingTab$c === void 0 || _lastOverflowingTab$c.scrollIntoView();
|
100
|
-
}, [disabled, scrollRef, refs]);
|
69
|
+
!disabled && scrollRef.current && animatedScrollToX(scrollRef.current, scrollRef.current.scrollLeft + scrollRef.current.offsetWidth / 2);
|
70
|
+
}, [disabled, scrollRef]);
|
101
71
|
var PreviousButton = useMemo(function () {
|
102
72
|
return /*#__PURE__*/React.createElement(StyledArrow, {
|
103
73
|
type: "button",
|
@@ -106,7 +76,6 @@ export var tabsRoot = function tabsRoot(Root) {
|
|
106
76
|
tabIndex: disabled ? -1 : 0,
|
107
77
|
disabled: disabled,
|
108
78
|
isFilled: isFilled,
|
109
|
-
ref: leftArrowRef,
|
110
79
|
isLeftArrow: true
|
111
80
|
}, /*#__PURE__*/React.createElement(IconDisclosureLeft, {
|
112
81
|
color: "var(".concat(tokens.arrowColor, ")")
|
@@ -127,9 +96,8 @@ export var tabsRoot = function tabsRoot(Root) {
|
|
127
96
|
var handleScroll = useCallback(function (event) {
|
128
97
|
event.stopPropagation();
|
129
98
|
var maxScrollLeft = event.currentTarget.scrollWidth - event.currentTarget.clientWidth;
|
130
|
-
|
131
|
-
|
132
|
-
setLastItemVisible(scrollLeft >= maxScrollLeft);
|
99
|
+
setFirstItemVisible(event.currentTarget.scrollLeft <= 0);
|
100
|
+
setLastItemVisible(event.currentTarget.scrollLeft >= maxScrollLeft);
|
133
101
|
}, [setFirstItemVisible, setLastItemVisible]);
|
134
102
|
var onKeyDown = useCallback(function (event) {
|
135
103
|
if (index === undefined) {
|
@@ -169,16 +137,6 @@ export var tabsRoot = function tabsRoot(Root) {
|
|
169
137
|
var _scrollRef$current, _scrollRef$current2;
|
170
138
|
setLastItemVisible(((_scrollRef$current = scrollRef.current) === null || _scrollRef$current === void 0 ? void 0 : _scrollRef$current.scrollWidth) === ((_scrollRef$current2 = scrollRef.current) === null || _scrollRef$current2 === void 0 ? void 0 : _scrollRef$current2.clientWidth));
|
171
139
|
}, []);
|
172
|
-
|
173
|
-
// Этот хук компенсирует появление левой стрелки при прокрутке
|
174
|
-
useEffect(function () {
|
175
|
-
if (firstItemVisible || !scrollRef.current || !leftArrowRef.current) {
|
176
|
-
return;
|
177
|
-
}
|
178
|
-
scrollRef.current.scrollTo({
|
179
|
-
left: Math.round(scrollRef.current.scrollLeft + leftArrowRef.current.clientWidth)
|
180
|
-
});
|
181
|
-
}, [firstItemVisible, scrollRef, leftArrowRef]);
|
182
140
|
return /*#__PURE__*/React.createElement(TabsContext.Provider, {
|
183
141
|
value: refs
|
184
142
|
}, /*#__PURE__*/React.createElement(Root, _extends({
|
@@ -192,7 +150,6 @@ export var tabsRoot = function tabsRoot(Root) {
|
|
192
150
|
className: cx(pilledClass, stretchClass, hasLeftArrowClass, hasRightArrowClass, className),
|
193
151
|
onKeyDown: onKeyDown
|
194
152
|
}, rest), !firstItemVisible && PreviousButton, /*#__PURE__*/React.createElement(StyledContentWrapper, {
|
195
|
-
className: cx(clipScrollClass, clipShowAllClass),
|
196
153
|
ref: scrollRef,
|
197
154
|
onScroll: handleScroll
|
198
155
|
}, /*#__PURE__*/React.createElement(StyledContent, {
|
@@ -3,14 +3,14 @@ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(
|
|
3
3
|
import { css } from 'styled-components';
|
4
4
|
import styled from 'styled-components';
|
5
5
|
import { addFocus } from '../../../../mixins';
|
6
|
-
import {
|
7
|
-
export var base = /*#__PURE__*/css(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n display: flex;\n
|
6
|
+
import { tokens } from '../../tokens';
|
7
|
+
export var base = /*#__PURE__*/css(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n position: relative;\n"])));
|
8
8
|
export var StyledContent = /*#__PURE__*/styled.div.withConfig({
|
9
9
|
componentId: "plasma-new-hope__sc-1ibkmsl-0"
|
10
10
|
})(["display:inline-flex;flex-direction:row;align-items:center;"]);
|
11
11
|
export var StyledContentWrapper = /*#__PURE__*/styled.div.withConfig({
|
12
12
|
componentId: "plasma-new-hope__sc-1ibkmsl-1"
|
13
|
-
})(["margin:-0.125rem;padding:0.25rem;box-sizing:content-box;position:relative;height:100%;width:100%;display:flex;align-items:center
|
13
|
+
})(["margin:-0.125rem;padding:0.25rem;box-sizing:content-box;overflow:scroll;position:relative;height:100%;width:100%;display:flex;align-items:center;scrollbar-width:none;::-webkit-scrollbar{display:none;}overscroll-behavior:contain;"]);
|
14
14
|
export var StyledArrow = /*#__PURE__*/styled.button.withConfig({
|
15
15
|
componentId: "plasma-new-hope__sc-1ibkmsl-2"
|
16
16
|
})(["display:flex;cursor:pointer;border:none;background-color:transparent;padding:0;outline:none;", ";&[disabled]{cursor:not-allowed;}--plasma_private-outer-padding:", ";padding-right:", ";padding-left:", ";"], /*#__PURE__*/addFocus({
|
@@ -1,4 +1,4 @@
|
|
1
1
|
import { css } from 'styled-components';
|
2
2
|
import { classes } from '../../../../tokens';
|
3
3
|
import { StyledContent, StyledContentWrapper } from '../../Tabs.styles';
|
4
|
-
export var base = /*#__PURE__*/css(["&.", "{width:100%;", ",", ",", " > button{width:100%;
|
4
|
+
export var base = /*#__PURE__*/css(["&.", "{width:100%;", ",", ",", " > button{width:100%;}}"], classes.tabsStretch, StyledContentWrapper, StyledContent, StyledContent);
|
@@ -1 +1 @@
|
|
1
|
-
["--plasma-tabs-
|
1
|
+
["--plasma-tabs-backgorund-color", "--plasma-tabs-divider-height", "--plasma-tabs-divider-color"]
|
@@ -0,0 +1,19 @@
|
|
1
|
+
import { css } from 'styled-components';
|
2
|
+
import { breadcrumbsTokens } from '../../../../components/Breadcrumbs';
|
3
|
+
export var config = {
|
4
|
+
defaults: {
|
5
|
+
view: 'default',
|
6
|
+
size: 'm'
|
7
|
+
},
|
8
|
+
variations: {
|
9
|
+
view: {
|
10
|
+
"default": /*#__PURE__*/css(["", ":var(--text-primary);", ":0.4;", ":var(--surface-accent);"], breadcrumbsTokens.breadcrumbsColor, breadcrumbsTokens.breadcrumbsOpacity, breadcrumbsTokens.breadcrumbsFocusOutlineColor)
|
11
|
+
},
|
12
|
+
size: {
|
13
|
+
l: /*#__PURE__*/css(["", ":0.5rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-bold-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);"], breadcrumbsTokens.breadcrumbsGap, breadcrumbsTokens.breadcrumbsFontFamily, breadcrumbsTokens.breadcrumbsFontSize, breadcrumbsTokens.breadcrumbsFontStyle, breadcrumbsTokens.breadcrumbsFontWeight, breadcrumbsTokens.breadcrumbsLetterSpacing, breadcrumbsTokens.breadcrumbsLineHeight),
|
14
|
+
m: /*#__PURE__*/css(["", ":0.375rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-bold-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);"], breadcrumbsTokens.breadcrumbsGap, breadcrumbsTokens.breadcrumbsFontFamily, breadcrumbsTokens.breadcrumbsFontSize, breadcrumbsTokens.breadcrumbsFontStyle, breadcrumbsTokens.breadcrumbsFontWeight, breadcrumbsTokens.breadcrumbsLetterSpacing, breadcrumbsTokens.breadcrumbsLineHeight),
|
15
|
+
s: /*#__PURE__*/css(["", ":0.25rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-bold-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);"], breadcrumbsTokens.breadcrumbsGap, breadcrumbsTokens.breadcrumbsFontFamily, breadcrumbsTokens.breadcrumbsFontSize, breadcrumbsTokens.breadcrumbsFontStyle, breadcrumbsTokens.breadcrumbsFontWeight, breadcrumbsTokens.breadcrumbsLetterSpacing, breadcrumbsTokens.breadcrumbsLineHeight),
|
16
|
+
xs: /*#__PURE__*/css(["", ":0rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-bold-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);"], breadcrumbsTokens.breadcrumbsGap, breadcrumbsTokens.breadcrumbsFontFamily, breadcrumbsTokens.breadcrumbsFontSize, breadcrumbsTokens.breadcrumbsFontStyle, breadcrumbsTokens.breadcrumbsFontWeight, breadcrumbsTokens.breadcrumbsLetterSpacing, breadcrumbsTokens.breadcrumbsLineHeight)
|
17
|
+
}
|
18
|
+
}
|
19
|
+
};
|