@salutejs/plasma-new-hope 0.231.0-canary.1647.12467637991.0 → 0.231.0-canary.1657.12468366213.0
Sign up to get free protection for your applications and to get access to all the features.
- package/cjs/components/Autocomplete/Autocomplete.css +4 -4
- package/cjs/components/Combobox/ComboboxNew/Combobox.css +4 -4
- package/cjs/components/Combobox/ComboboxOld/Combobox.css +4 -4
- package/cjs/components/Combobox/ComboboxOld/ui/ComboboxDivider/ComboboxDivider.css +4 -4
- package/cjs/components/Combobox/ComboboxOld/ui/ComboboxFooter/ComboboxFooter.css +4 -4
- package/cjs/components/Combobox/ComboboxOld/ui/ComboboxGroup/ComboboxGroup.css +4 -4
- package/cjs/components/Combobox/ComboboxOld/ui/ComboboxHeader/ComboboxHeader.css +4 -4
- package/cjs/components/DatePicker/RangeDate/RangeDate.css +4 -4
- package/cjs/components/DatePicker/RangeDate/RangeDatePopover/RangeDatePopover.css +4 -4
- package/cjs/components/DatePicker/SingleDate/SingleDate.css +4 -4
- package/cjs/components/Dropdown/Dropdown.css +4 -4
- package/cjs/components/Dropdown/ui/DropdownOld/DropdownOld.css +4 -4
- package/cjs/components/Flow/Flow.css +1 -0
- package/cjs/components/Flow/Flow.js +58 -0
- package/cjs/components/Flow/Flow.js.map +1 -0
- package/cjs/components/Flow/Flow.styles.js +9 -0
- package/cjs/components/Flow/Flow.styles.js.map +1 -0
- package/cjs/components/Flow/Flow.styles_1xdoipm.css +1 -0
- package/cjs/components/Pagination/Pagination.css +4 -4
- package/cjs/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.css +4 -4
- package/cjs/components/Popover/Popover.css +4 -4
- package/cjs/components/Popover/Popover.js +5 -9
- package/cjs/components/Popover/Popover.js.map +1 -1
- package/cjs/components/Popover/Popover.styles.js +7 -7
- package/cjs/components/Popover/Popover.styles.js.map +1 -1
- package/cjs/components/Popover/{Popover.styles_gh4xvw.css → Popover.styles_mzmbre.css} +2 -2
- package/cjs/components/Popover/Popover.tokens.js +1 -2
- package/cjs/components/Popover/Popover.tokens.js.map +1 -1
- package/cjs/components/Portal/Portal.js +1 -1
- package/cjs/components/Portal/Portal.js.map +1 -1
- package/cjs/components/Range/Range.css +4 -4
- package/cjs/components/Select/Select.css +4 -4
- package/cjs/components/Select/ui/Target/Target.css +4 -4
- package/cjs/components/Select/ui/Target/ui/Textfield/Textfield.css +4 -4
- package/cjs/components/Slider/Slider.css +4 -4
- package/cjs/components/Slider/components/DoubleUncontrolled/DoubleUncontrolled.css +4 -4
- package/cjs/components/TextArea/ui/Hint/Hint.css +4 -4
- package/cjs/components/TextField/ui/Hint/Hint.css +4 -4
- package/cjs/index.css +6 -4
- package/cjs/index.js +3 -0
- package/cjs/index.js.map +1 -1
- package/emotion/cjs/components/ElasticGrid/ElasticGrid.js +5 -0
- package/emotion/cjs/components/ElasticGrid/index.js +5 -0
- package/emotion/cjs/components/Flow/Flow.js +66 -0
- package/emotion/cjs/components/Flow/Flow.styles.js +17 -0
- package/emotion/cjs/components/Flow/Flow.types.js +5 -0
- package/emotion/cjs/components/Flow/index.js +18 -0
- package/emotion/cjs/components/Popover/Popover.js +6 -10
- package/emotion/cjs/components/Popover/Popover.styles.js +16 -8
- package/emotion/cjs/components/Popover/Popover.template-doc.mdx +43 -128
- package/emotion/cjs/components/Popover/Popover.tokens.js +1 -2
- package/emotion/cjs/components/Portal/Portal.js +1 -1
- package/emotion/cjs/examples/plasma_b2c/components/Flow/Flow.config.js +10 -0
- package/emotion/cjs/examples/plasma_b2c/components/Flow/Flow.js +11 -0
- package/emotion/cjs/examples/plasma_b2c/components/Flow/Flow.stories.tsx +114 -0
- package/emotion/cjs/index.js +11 -0
- package/emotion/es/components/ElasticGrid/ElasticGrid.js +1 -0
- package/emotion/es/components/ElasticGrid/index.js +1 -0
- package/emotion/es/components/Flow/Flow.js +57 -0
- package/emotion/es/components/Flow/Flow.styles.js +11 -0
- package/emotion/es/components/Flow/Flow.types.js +1 -0
- package/emotion/es/components/Flow/index.js +1 -0
- package/emotion/es/components/Popover/Popover.js +7 -11
- package/emotion/es/components/Popover/Popover.styles.js +16 -8
- package/emotion/es/components/Popover/Popover.template-doc.mdx +43 -128
- package/emotion/es/components/Popover/Popover.tokens.js +1 -2
- package/emotion/es/components/Portal/Portal.js +1 -1
- package/emotion/es/examples/plasma_b2c/components/Flow/Flow.config.js +4 -0
- package/emotion/es/examples/plasma_b2c/components/Flow/Flow.js +5 -0
- package/emotion/es/examples/plasma_b2c/components/Flow/Flow.stories.tsx +114 -0
- package/emotion/es/index.js +1 -0
- package/es/components/Autocomplete/Autocomplete.css +4 -4
- package/es/components/Combobox/ComboboxNew/Combobox.css +4 -4
- package/es/components/Combobox/ComboboxOld/Combobox.css +4 -4
- package/es/components/Combobox/ComboboxOld/ui/ComboboxDivider/ComboboxDivider.css +4 -4
- package/es/components/Combobox/ComboboxOld/ui/ComboboxFooter/ComboboxFooter.css +4 -4
- package/es/components/Combobox/ComboboxOld/ui/ComboboxGroup/ComboboxGroup.css +4 -4
- package/es/components/Combobox/ComboboxOld/ui/ComboboxHeader/ComboboxHeader.css +4 -4
- package/es/components/DatePicker/RangeDate/RangeDate.css +4 -4
- package/es/components/DatePicker/RangeDate/RangeDatePopover/RangeDatePopover.css +4 -4
- package/es/components/DatePicker/SingleDate/SingleDate.css +4 -4
- package/es/components/Dropdown/Dropdown.css +4 -4
- package/es/components/Dropdown/ui/DropdownOld/DropdownOld.css +4 -4
- package/es/components/Flow/Flow.css +1 -0
- package/es/components/Flow/Flow.js +53 -0
- package/es/components/Flow/Flow.js.map +1 -0
- package/es/components/Flow/Flow.styles.js +5 -0
- package/es/components/Flow/Flow.styles.js.map +1 -0
- package/es/components/Flow/Flow.styles_1xdoipm.css +1 -0
- package/es/components/Pagination/Pagination.css +4 -4
- package/es/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.css +4 -4
- package/es/components/Popover/Popover.css +4 -4
- package/es/components/Popover/Popover.js +7 -11
- package/es/components/Popover/Popover.js.map +1 -1
- package/es/components/Popover/Popover.styles.js +7 -7
- package/es/components/Popover/Popover.styles.js.map +1 -1
- package/es/components/Popover/{Popover.styles_gh4xvw.css → Popover.styles_mzmbre.css} +2 -2
- package/es/components/Popover/Popover.tokens.js +1 -2
- package/es/components/Popover/Popover.tokens.js.map +1 -1
- package/es/components/Portal/Portal.js +1 -1
- package/es/components/Portal/Portal.js.map +1 -1
- package/es/components/Range/Range.css +4 -4
- package/es/components/Select/Select.css +4 -4
- package/es/components/Select/ui/Target/Target.css +4 -4
- package/es/components/Select/ui/Target/ui/Textfield/Textfield.css +4 -4
- package/es/components/Slider/Slider.css +4 -4
- package/es/components/Slider/components/DoubleUncontrolled/DoubleUncontrolled.css +4 -4
- package/es/components/TextArea/ui/Hint/Hint.css +4 -4
- package/es/components/TextField/ui/Hint/Hint.css +4 -4
- package/es/index.css +6 -4
- package/es/index.js +1 -0
- package/es/index.js.map +1 -1
- package/package.json +2 -2
- package/styled-components/cjs/components/ElasticGrid/ElasticGrid.js +5 -0
- package/styled-components/cjs/components/ElasticGrid/index.js +5 -0
- package/styled-components/cjs/components/Flow/Flow.js +66 -0
- package/styled-components/cjs/components/Flow/Flow.styles.js +8 -0
- package/styled-components/cjs/components/Flow/Flow.types.js +5 -0
- package/styled-components/cjs/components/Flow/index.js +18 -0
- package/styled-components/cjs/components/Popover/Popover.js +6 -10
- package/styled-components/cjs/components/Popover/Popover.styles.js +4 -4
- package/styled-components/cjs/components/Popover/Popover.template-doc.mdx +43 -128
- package/styled-components/cjs/components/Popover/Popover.tokens.js +1 -2
- package/styled-components/cjs/components/Portal/Portal.js +1 -1
- package/styled-components/cjs/examples/plasma_b2c/components/Flow/Flow.config.js +10 -0
- package/styled-components/cjs/examples/plasma_b2c/components/Flow/Flow.js +11 -0
- package/styled-components/cjs/examples/plasma_b2c/components/Flow/Flow.stories.tsx +114 -0
- package/styled-components/cjs/index.js +11 -0
- package/styled-components/es/components/ElasticGrid/ElasticGrid.js +1 -0
- package/styled-components/es/components/ElasticGrid/index.js +1 -0
- package/styled-components/es/components/Flow/Flow.js +57 -0
- package/styled-components/es/components/Flow/Flow.styles.js +2 -0
- package/styled-components/es/components/Flow/Flow.types.js +1 -0
- package/styled-components/es/components/Flow/index.js +1 -0
- package/styled-components/es/components/Popover/Popover.js +7 -11
- package/styled-components/es/components/Popover/Popover.styles.js +4 -4
- package/styled-components/es/components/Popover/Popover.template-doc.mdx +43 -128
- package/styled-components/es/components/Popover/Popover.tokens.js +1 -2
- package/styled-components/es/components/Portal/Portal.js +1 -1
- package/styled-components/es/examples/plasma_b2c/components/Flow/Flow.config.js +4 -0
- package/styled-components/es/examples/plasma_b2c/components/Flow/Flow.js +5 -0
- package/styled-components/es/examples/plasma_b2c/components/Flow/Flow.stories.tsx +114 -0
- package/styled-components/es/index.js +1 -0
- package/types/components/ElasticGrid/ElasticGrid.d.ts +2 -0
- package/types/components/ElasticGrid/ElasticGrid.d.ts.map +1 -0
- package/types/components/ElasticGrid/index.d.ts +2 -0
- package/types/components/ElasticGrid/index.d.ts.map +1 -0
- package/types/components/Flow/Flow.d.ts +13 -0
- package/types/components/Flow/Flow.d.ts.map +1 -0
- package/types/components/Flow/Flow.styles.d.ts +2 -0
- package/types/components/Flow/Flow.styles.d.ts.map +1 -0
- package/types/components/Flow/Flow.types.d.ts +35 -0
- package/types/components/Flow/Flow.types.d.ts.map +1 -0
- package/types/components/Flow/index.d.ts +2 -0
- package/types/components/Flow/index.d.ts.map +1 -0
- package/types/components/Popover/Popover.d.ts.map +1 -1
- package/types/components/Popover/Popover.styles.d.ts +1 -1
- package/types/components/Popover/Popover.styles.d.ts.map +1 -1
- package/types/components/Popover/Popover.tokens.d.ts +0 -1
- package/types/components/Popover/Popover.tokens.d.ts.map +1 -1
- package/types/components/Popover/Popover.types.d.ts +4 -4
- package/types/components/Popover/Popover.types.d.ts.map +1 -1
- package/types/components/Portal/Portal.types.d.ts +1 -1
- package/types/components/Portal/Portal.types.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/Flow/Flow.config.d.ts +5 -0
- package/types/examples/plasma_b2c/components/Flow/Flow.config.d.ts.map +1 -0
- package/types/examples/plasma_b2c/components/Flow/Flow.d.ts +3 -0
- package/types/examples/plasma_b2c/components/Flow/Flow.d.ts.map +1 -0
- package/types/index.d.ts +1 -0
- package/types/index.d.ts.map +1 -1
@@ -4,136 +4,51 @@ title: Popover
|
|
4
4
|
---
|
5
5
|
|
6
6
|
import { PropsTable, Description } from '@site/src/components';
|
7
|
-
import Tabs from '@theme/Tabs';
|
8
|
-
import TabItem from '@theme/TabItem';
|
9
7
|
|
10
8
|
# Popover
|
11
9
|
<Description name="Popover" />
|
12
10
|
<PropsTable name="Popover" />
|
13
11
|
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
<
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
|
56
|
-
|
57
|
-
</StyledContent>
|
58
|
-
</Popover>
|
59
|
-
</section>
|
60
|
-
);
|
61
|
-
}
|
62
|
-
```
|
63
|
-
</TabItem>
|
64
|
-
<TabItem value="refObject" label="RefObject">
|
65
|
-
```tsx live
|
66
|
-
import React, { useRef, useState } from 'react';
|
67
|
-
import styled from "styled-components";
|
68
|
-
import { surfaceSolidTertiary } from "@salutejs/{{ vertical }}/tokens";
|
69
|
-
import { Popover, Button } from '@salutejs/{{ package }}';
|
70
|
-
|
71
|
-
export function App() {
|
72
|
-
const [isOpen, setIsOpen] = useState(false);
|
73
|
-
|
74
|
-
const targetRef = useRef<HTMLButtonElement | null>(null);
|
75
|
-
const targetRef2 = useRef<HTMLButtonElement | null>(null);
|
76
|
-
const targetRef3 = useRef<HTMLButtonElement | null>(null);
|
77
|
-
|
78
|
-
const refs = [targetRef, targetRef2, targetRef3];
|
79
|
-
|
80
|
-
const [currRefIndex, setCurrentRefIndex] = useState(0);
|
81
|
-
const [currentRef, setCurrentRef] = useState(targetRef);
|
82
|
-
|
83
|
-
const changeRef = () => {
|
84
|
-
let ind = currRefIndex + 1;
|
85
|
-
|
86
|
-
if (ind > refs.length - 1) {
|
87
|
-
setCurrentRefIndex(0);
|
88
|
-
ind = 0;
|
89
|
-
}
|
90
|
-
|
91
|
-
setCurrentRefIndex(ind);
|
92
|
-
setCurrentRef(refs[ind]);
|
93
|
-
};
|
94
|
-
|
95
|
-
const StyledContent = styled.div`
|
96
|
-
background: ${surfaceSolidTertiary};
|
97
|
-
padding: 1rem;
|
98
|
-
|
99
|
-
display: flex;
|
100
|
-
flex-direction: column;
|
101
|
-
align-items: center;
|
102
|
-
`;
|
103
|
-
|
104
|
-
return (
|
105
|
-
<>
|
106
|
-
<Button ref={targetRef}>Target 0</Button>
|
107
|
-
<Button style=\{{ margin: '0 5rem' }} onClick={changeRef}>
|
108
|
-
Change targetAsRef to Target {currRefIndex + 1 > refs.length - 1 ? 0 : currRefIndex + 1}
|
109
|
-
</Button>
|
110
|
-
<Button ref={targetRef2}>Target 1</Button>
|
111
|
-
<Popover
|
112
|
-
opened={isOpen}
|
113
|
-
onToggle={(is) => setIsOpen(is)}
|
114
|
-
role="presentation"
|
115
|
-
id="popover"
|
116
|
-
target={currentRef}
|
117
|
-
offset={[0, 6]}
|
118
|
-
placement='bottom'
|
119
|
-
trigger='click'
|
120
|
-
hasArrow
|
121
|
-
closeOnOverlayClick
|
122
|
-
closeOnEsc
|
123
|
-
isFocusTrapped
|
124
|
-
>
|
125
|
-
<StyledContent>
|
126
|
-
<>Content</>
|
127
|
-
<Button onClick={() => setIsOpen(false)}>Close</Button>
|
128
|
-
</StyledContent>
|
129
|
-
</Popover>
|
130
|
-
|
131
|
-
<div style=\{{ padding: '5rem' }}>Current Target: {currRefIndex}</div>
|
132
|
-
<Button ref={targetRef3}>Target 2</Button>
|
133
|
-
</>
|
134
|
-
);
|
135
|
-
}
|
136
|
-
```
|
137
|
-
</TabItem>
|
138
|
-
</Tabs>
|
139
|
-
|
12
|
+
```tsx live
|
13
|
+
import React from 'react';
|
14
|
+
import styled from "styled-components";
|
15
|
+
import { surfaceSolidTertiary } from "@salutejs/{{ vertical }}/tokens";
|
16
|
+
import { Popover, Button } from '@salutejs/{{ package }}';
|
17
|
+
|
18
|
+
export function App() {
|
19
|
+
const [isOpen, setIsOpen] = React.useState(false);
|
20
|
+
|
21
|
+
const StyledContent = styled.div`
|
22
|
+
background: ${surfaceSolidTertiary};
|
23
|
+
padding: 1rem;
|
24
|
+
|
25
|
+
display: flex;
|
26
|
+
flex-direction: column;
|
27
|
+
align-items: center;
|
28
|
+
`;
|
29
|
+
|
30
|
+
return (
|
31
|
+
<section style=\{{width: '20rem', height: '15rem'}}>
|
32
|
+
<Popover
|
33
|
+
opened={isOpen}
|
34
|
+
onToggle={(is) => setIsOpen(is)}
|
35
|
+
role="presentation"
|
36
|
+
id="popover"
|
37
|
+
target={<Button>Target</Button>}
|
38
|
+
offset={[0, 6]}
|
39
|
+
hasArrow
|
40
|
+
placement='bottom'
|
41
|
+
trigger='click'
|
42
|
+
closeOnOverlayClick
|
43
|
+
closeOnEsc
|
44
|
+
isFocusTrapped
|
45
|
+
>
|
46
|
+
<StyledContent>
|
47
|
+
<>Content</>
|
48
|
+
<Button onClick={() => setIsOpen(false)}>close</Button>
|
49
|
+
</StyledContent>
|
50
|
+
</Popover>
|
51
|
+
</section>
|
52
|
+
);
|
53
|
+
}
|
54
|
+
```
|
@@ -8,8 +8,7 @@ var classes = exports.classes = {
|
|
8
8
|
wrapper: 'popover-wrapper',
|
9
9
|
root: 'popover-root',
|
10
10
|
target: 'popover-target',
|
11
|
-
arrow: 'popover-arrow'
|
12
|
-
targetAsRef: 'popover-target-as-ref'
|
11
|
+
arrow: 'popover-arrow'
|
13
12
|
};
|
14
13
|
var tokens = exports.tokens = {
|
15
14
|
arrowMaskWidth: '--plasma-popover-arrow-mask-width',
|
@@ -21,5 +21,5 @@ var Portal = exports.Portal = function Portal(_ref) {
|
|
21
21
|
return null;
|
22
22
|
}
|
23
23
|
var portalContainer = typeof container === 'function' ? container() : container;
|
24
|
-
return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null,
|
24
|
+
return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, disabled && children, !disabled && /*#__PURE__*/_reactDom["default"].createPortal(children, portalContainer));
|
25
25
|
};
|
@@ -0,0 +1,11 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
6
|
+
exports.Flow = void 0;
|
7
|
+
var _Flow = /*#__PURE__*/require("../../../../components/Flow");
|
8
|
+
var _engines = /*#__PURE__*/require("../../../../engines");
|
9
|
+
var _Flow2 = /*#__PURE__*/require("./Flow.config");
|
10
|
+
var mergedConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_Flow.flowConfig, _Flow2.config);
|
11
|
+
var Flow = exports.Flow = /*#__PURE__*/(0, _engines.component)(mergedConfig);
|
@@ -0,0 +1,114 @@
|
|
1
|
+
import React, { ComponentProps } from 'react';
|
2
|
+
import type { StoryObj, Meta } from '@storybook/react';
|
3
|
+
import styled from 'styled-components';
|
4
|
+
|
5
|
+
import { WithTheme } from '../../../_helpers';
|
6
|
+
|
7
|
+
import { Flow } from './Flow';
|
8
|
+
|
9
|
+
const orientations = ['vertical', 'horizontal'];
|
10
|
+
const arrangements = ['start', 'center', 'end', 'spaceBetween', 'spaceAround'];
|
11
|
+
const alignments = ['start', 'center', 'end'];
|
12
|
+
|
13
|
+
const widths = [100, 32, 171, 74, 179, 55];
|
14
|
+
const heights = [10, 50, 45, 33, 14, 55];
|
15
|
+
|
16
|
+
const Item = styled.div`
|
17
|
+
padding: 0.5rem 1rem;
|
18
|
+
border-radius: 0.5rem;
|
19
|
+
background: #aab1e9;
|
20
|
+
display: flex;
|
21
|
+
align-items: center;
|
22
|
+
justify-content: center;
|
23
|
+
`;
|
24
|
+
|
25
|
+
const meta: Meta<typeof Flow> = {
|
26
|
+
title: 'b2c/Data Display/Flow',
|
27
|
+
component: Flow,
|
28
|
+
decorators: [WithTheme],
|
29
|
+
argTypes: {
|
30
|
+
itemsCount: {
|
31
|
+
control: {
|
32
|
+
type: 'number',
|
33
|
+
},
|
34
|
+
},
|
35
|
+
height: {
|
36
|
+
control: {
|
37
|
+
type: 'text',
|
38
|
+
},
|
39
|
+
if: { arg: 'orientation', eq: 'vertical' },
|
40
|
+
},
|
41
|
+
orientation: {
|
42
|
+
options: orientations,
|
43
|
+
control: {
|
44
|
+
type: 'select',
|
45
|
+
},
|
46
|
+
},
|
47
|
+
arrangement: {
|
48
|
+
options: arrangements,
|
49
|
+
control: {
|
50
|
+
type: 'select',
|
51
|
+
},
|
52
|
+
},
|
53
|
+
alignment: {
|
54
|
+
options: alignments,
|
55
|
+
control: {
|
56
|
+
type: 'select',
|
57
|
+
},
|
58
|
+
},
|
59
|
+
mainAxisGap: {
|
60
|
+
control: {
|
61
|
+
type: 'text',
|
62
|
+
},
|
63
|
+
},
|
64
|
+
crossAxisGap: {
|
65
|
+
control: {
|
66
|
+
type: 'text',
|
67
|
+
},
|
68
|
+
},
|
69
|
+
itemsPerLine: {
|
70
|
+
control: {
|
71
|
+
type: 'number',
|
72
|
+
},
|
73
|
+
},
|
74
|
+
minColWidth: {
|
75
|
+
control: {
|
76
|
+
type: 'text',
|
77
|
+
},
|
78
|
+
},
|
79
|
+
},
|
80
|
+
};
|
81
|
+
|
82
|
+
export default meta;
|
83
|
+
|
84
|
+
type Story = StoryObj<typeof Flow>;
|
85
|
+
|
86
|
+
export const Default: Story = {
|
87
|
+
args: {
|
88
|
+
height: '13rem',
|
89
|
+
orientation: 'horizontal',
|
90
|
+
arrangement: 'start',
|
91
|
+
alignment: 'start',
|
92
|
+
mainAxisGap: '0',
|
93
|
+
crossAxisGap: '0',
|
94
|
+
minColWidth: 'auto',
|
95
|
+
itemsCount: 6,
|
96
|
+
},
|
97
|
+
render: ({ itemsCount, height, ...args }: ComponentProps<typeof Flow>) => {
|
98
|
+
return (
|
99
|
+
<Flow {...args} style={{ maxWidth: '28rem', height: height || 'auto' }}>
|
100
|
+
{new Array(itemsCount).fill(null).map((width, index) => (
|
101
|
+
<Item
|
102
|
+
key={index}
|
103
|
+
style={{
|
104
|
+
minWidth: widths[index % widths.length],
|
105
|
+
minHeight: heights[index % heights.length],
|
106
|
+
}}
|
107
|
+
>
|
108
|
+
{index + 1}
|
109
|
+
</Item>
|
110
|
+
))}
|
111
|
+
</Flow>
|
112
|
+
);
|
113
|
+
},
|
114
|
+
};
|
package/emotion/cjs/index.js
CHANGED
@@ -135,6 +135,17 @@ Object.keys(_Cell).forEach(function (key) {
|
|
135
135
|
}
|
136
136
|
});
|
137
137
|
});
|
138
|
+
var _Flow = /*#__PURE__*/require("./components/Flow");
|
139
|
+
Object.keys(_Flow).forEach(function (key) {
|
140
|
+
if (key === "default" || key === "__esModule") return;
|
141
|
+
if (key in exports && exports[key] === _Flow[key]) return;
|
142
|
+
Object.defineProperty(exports, key, {
|
143
|
+
enumerable: true,
|
144
|
+
get: function get() {
|
145
|
+
return _Flow[key];
|
146
|
+
}
|
147
|
+
});
|
148
|
+
});
|
138
149
|
var _Link = /*#__PURE__*/require("./components/Link");
|
139
150
|
Object.keys(_Link).forEach(function (key) {
|
140
151
|
if (key === "default" || key === "__esModule") return;
|
@@ -0,0 +1 @@
|
|
1
|
+
export {};
|
@@ -0,0 +1 @@
|
|
1
|
+
export {};
|
@@ -0,0 +1,57 @@
|
|
1
|
+
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
2
|
+
var _excluded = ["children", "className", "style", "orientation", "arrangement", "alignment", "mainAxisGap", "crossAxisGap", "minColWidth", "itemsPerLine"];
|
3
|
+
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
4
|
+
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
|
+
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
|
+
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
|
+
import React, { forwardRef } from 'react';
|
12
|
+
import cls from 'classnames';
|
13
|
+
import { base } from './Flow.styles';
|
14
|
+
export var flowRoot = function flowRoot(Root) {
|
15
|
+
return /*#__PURE__*/forwardRef(function (_ref, ref) {
|
16
|
+
var children = _ref.children,
|
17
|
+
className = _ref.className,
|
18
|
+
style = _ref.style,
|
19
|
+
_ref$orientation = _ref.orientation,
|
20
|
+
orientation = _ref$orientation === void 0 ? 'horizontal' : _ref$orientation,
|
21
|
+
arrangement = _ref.arrangement,
|
22
|
+
alignment = _ref.alignment,
|
23
|
+
_ref$mainAxisGap = _ref.mainAxisGap,
|
24
|
+
mainAxisGap = _ref$mainAxisGap === void 0 ? '0' : _ref$mainAxisGap,
|
25
|
+
_ref$crossAxisGap = _ref.crossAxisGap,
|
26
|
+
crossAxisGap = _ref$crossAxisGap === void 0 ? '0' : _ref$crossAxisGap,
|
27
|
+
_ref$minColWidth = _ref.minColWidth,
|
28
|
+
minColWidth = _ref$minColWidth === void 0 ? 'auto' : _ref$minColWidth,
|
29
|
+
itemsPerLine = _ref.itemsPerLine,
|
30
|
+
rest = _objectWithoutProperties(_ref, _excluded);
|
31
|
+
var hasMinWidth = Boolean(minColWidth && minColWidth !== 'auto');
|
32
|
+
var needGrid = Boolean(Number(itemsPerLine) > 0 || hasMinWidth);
|
33
|
+
return /*#__PURE__*/React.createElement(Root, _extends({
|
34
|
+
ref: ref,
|
35
|
+
className: cls(className, {
|
36
|
+
vertical: orientation === 'vertical',
|
37
|
+
grid: needGrid,
|
38
|
+
elastic: hasMinWidth
|
39
|
+
}),
|
40
|
+
style: _objectSpread(_objectSpread({}, style), {}, {
|
41
|
+
'--plasma-private-gap': "".concat(mainAxisGap, " ").concat(crossAxisGap),
|
42
|
+
'--plasma-private-items': String(itemsPerLine),
|
43
|
+
'--plasma-private-min-width': String(minColWidth)
|
44
|
+
}),
|
45
|
+
"data-arrangement": arrangement,
|
46
|
+
"data-alignment": alignment
|
47
|
+
}, rest), children);
|
48
|
+
});
|
49
|
+
};
|
50
|
+
export var flowConfig = {
|
51
|
+
name: 'Flow',
|
52
|
+
tag: 'div',
|
53
|
+
layout: flowRoot,
|
54
|
+
base: base,
|
55
|
+
defaults: {},
|
56
|
+
variations: {}
|
57
|
+
};
|
@@ -0,0 +1,11 @@
|
|
1
|
+
function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
|
2
|
+
import { css } from '@emotion/react';
|
3
|
+
export var base = process.env.NODE_ENV === "production" ? {
|
4
|
+
name: "96mzja-plasma-new-hope__base",
|
5
|
+
styles: "display:flex;flex-direction:row;flex-wrap:wrap;gap:var(--plasma-private-gap);border-radius:0.5rem;&.vertical{flex-direction:column;}&.grid{display:grid;grid-template-columns:repeat(var(--plasma-private-items), auto);grid-auto-flow:row;&.elastic{grid-template-columns:repeat(auto-fill, minmax(var(--plasma-private-min-width), auto));grid-auto-flow:row;}&:not(.vertical){&[data-arrangement='start']{justify-items:start;}&[data-arrangement='center']{justify-items:center;}&[data-arrangement='end']{justify-items:end;}&[data-arrangement='spaceBetween']{justify-content:space-between;}&[data-arrangement='spaceAround']{justify-content:space-around;}&[data-alignment='start']{align-items:start;}&[data-alignment='center']{align-items:center;}&[data-alignment='end']{align-items:end;}}&.vertical{grid-template-columns:auto;grid-template-rows:repeat(var(--plasma-private-items), auto);grid-auto-flow:column;&[data-arrangement='start']{align-items:start;}&[data-arrangement='center']{align-items:center;}&[data-arrangement='end']{align-items:end;}&[data-arrangement='spaceBetween']{align-content:space-between;align-items:normal;}&[data-arrangement='spaceAround']{align-content:space-around;align-items:normal;}&[data-alignment='start']{justify-items:start;}&[data-alignment='center']{justify-items:center;}&[data-alignment='end']{justify-items:end;}}}&:not(&.grid){&[data-arrangement='start']{justify-content:start;}&[data-arrangement='center']{justify-content:center;}&[data-arrangement='end']{justify-content:end;}&[data-arrangement='spaceBetween']{justify-content:space-between;}&[data-arrangement='spaceAround']{justify-content:space-around;}&[data-alignment='start']{align-items:start;}&[data-alignment='center']{align-items:center;}&[data-alignment='end']{align-items:end;}};label:plasma-new-hope__base;"
|
6
|
+
} : {
|
7
|
+
name: "96mzja-plasma-new-hope__base",
|
8
|
+
styles: "display:flex;flex-direction:row;flex-wrap:wrap;gap:var(--plasma-private-gap);border-radius:0.5rem;&.vertical{flex-direction:column;}&.grid{display:grid;grid-template-columns:repeat(var(--plasma-private-items), auto);grid-auto-flow:row;&.elastic{grid-template-columns:repeat(auto-fill, minmax(var(--plasma-private-min-width), auto));grid-auto-flow:row;}&:not(.vertical){&[data-arrangement='start']{justify-items:start;}&[data-arrangement='center']{justify-items:center;}&[data-arrangement='end']{justify-items:end;}&[data-arrangement='spaceBetween']{justify-content:space-between;}&[data-arrangement='spaceAround']{justify-content:space-around;}&[data-alignment='start']{align-items:start;}&[data-alignment='center']{align-items:center;}&[data-alignment='end']{align-items:end;}}&.vertical{grid-template-columns:auto;grid-template-rows:repeat(var(--plasma-private-items), auto);grid-auto-flow:column;&[data-arrangement='start']{align-items:start;}&[data-arrangement='center']{align-items:center;}&[data-arrangement='end']{align-items:end;}&[data-arrangement='spaceBetween']{align-content:space-between;align-items:normal;}&[data-arrangement='spaceAround']{align-content:space-around;align-items:normal;}&[data-alignment='start']{justify-items:start;}&[data-alignment='center']{justify-items:center;}&[data-alignment='end']{justify-items:end;}}}&:not(&.grid){&[data-arrangement='start']{justify-content:start;}&[data-arrangement='center']{justify-content:center;}&[data-arrangement='end']{justify-content:end;}&[data-arrangement='spaceBetween']{justify-content:space-between;}&[data-arrangement='spaceAround']{justify-content:space-around;}&[data-alignment='start']{align-items:start;}&[data-alignment='center']{align-items:center;}&[data-alignment='end']{align-items:end;}};label:plasma-new-hope__base;",
|
9
|
+
map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy1lbW90aW9uL2NvbXBvbmVudHMvRmxvdy9GbG93LnN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFFdUIiLCJmaWxlIjoiLi4vLi4vLi4vLi4vc3JjLWVtb3Rpb24vY29tcG9uZW50cy9GbG93L0Zsb3cuc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuXG5leHBvcnQgY29uc3QgYmFzZSA9IGNzc2BcbiAgICBkaXNwbGF5OiBmbGV4O1xuICAgIGZsZXgtZGlyZWN0aW9uOiByb3c7XG4gICAgZmxleC13cmFwOiB3cmFwO1xuXG4gICAgZ2FwOiB2YXIoLS1wbGFzbWEtcHJpdmF0ZS1nYXApO1xuXG4gICAgYm9yZGVyLXJhZGl1czogMC41cmVtO1xuXG4gICAgJi52ZXJ0aWNhbCB7XG4gICAgICAgIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47XG4gICAgfVxuXG4gICAgJi5ncmlkIHtcbiAgICAgICAgZGlzcGxheTogZ3JpZDtcblxuICAgICAgICBncmlkLXRlbXBsYXRlLWNvbHVtbnM6IHJlcGVhdCh2YXIoLS1wbGFzbWEtcHJpdmF0ZS1pdGVtcyksIGF1dG8pO1xuICAgICAgICBncmlkLWF1dG8tZmxvdzogcm93O1xuXG4gICAgICAgICYuZWxhc3RpYyB7XG4gICAgICAgICAgICBncmlkLXRlbXBsYXRlLWNvbHVtbnM6IHJlcGVhdChhdXRvLWZpbGwsIG1pbm1heCh2YXIoLS1wbGFzbWEtcHJpdmF0ZS1taW4td2lkdGgpLCBhdXRvKSk7XG4gICAgICAgICAgICBncmlkLWF1dG8tZmxvdzogcm93O1xuICAgICAgICB9XG5cbiAgICAgICAgJjpub3QoLnZlcnRpY2FsKSB7XG4gICAgICAgICAgICAmW2RhdGEtYXJyYW5nZW1lbnQ9J3N0YXJ0J10ge1xuICAgICAgICAgICAgICAgIGp1c3RpZnktaXRlbXM6IHN0YXJ0O1xuICAgICAgICAgICAgfVxuXG4gICAgICAgICAgICAmW2RhdGEtYXJyYW5nZW1lbnQ9J2NlbnRlciddIHtcbiAgICAgICAgICAgICAgICBqdXN0aWZ5LWl0ZW1zOiBjZW50ZXI7XG4gICAgICAgICAgICB9XG5cbiAgICAgICAgICAgICZbZGF0YS1hcnJhbmdlbWVudD0nZW5kJ10ge1xuICAgICAgICAgICAgICAgIGp1c3RpZnktaXRlbXM6IGVuZDtcbiAgICAgICAgICAgIH1cblxuICAgICAgICAgICAgJltkYXRhLWFycmFuZ2VtZW50PSdzcGFjZUJldHdlZW4nXSB7XG4gICAgICAgICAgICAgICAganVzdGlmeS1jb250ZW50OiBzcGFjZS1iZXR3ZWVuO1xuICAgICAgICAgICAgfVxuXG4gICAgICAgICAgICAmW2RhdGEtYXJyYW5nZW1lbnQ9J3NwYWNlQXJvdW5kJ10ge1xuICAgICAgICAgICAgICAgIGp1c3RpZnktY29udGVudDogc3BhY2UtYXJvdW5kO1xuICAgICAgICAgICAgfVxuXG4gICAgICAgICAgICAmW2RhdGEtYWxpZ25tZW50PSdzdGFydCddIHtcbiAgICAgICAgICAgICAgICBhbGlnbi1pdGVtczogc3RhcnQ7XG4gICAgICAgICAgICB9XG5cbiAgICAgICAgICAgICZbZGF0YS1hbGlnbm1lbnQ9J2NlbnRlciddIHtcbiAgICAgICAgICAgICAgICBhbGlnbi1pdGVtczogY2VudGVyO1xuICAgICAgICAgICAgfVxuXG4gICAgICAgICAgICAmW2RhdGEtYWxpZ25tZW50PSdlbmQnXSB7XG4gICAgICAgICAgICAgICAgYWxpZ24taXRlbXM6IGVuZDtcbiAgICAgICAgICAgIH1cbiAgICAgICAgfVxuXG4gICAgICAgICYudmVydGljYWwge1xuICAgICAgICAgICAgZ3JpZC10ZW1wbGF0ZS1jb2x1bW5zOiBhdXRvO1xuICAgICAgICAgICAgZ3JpZC10ZW1wbGF0ZS1yb3dzOiByZXBlYXQodmFyKC0tcGxhc21hLXByaXZhdGUtaXRlbXMpLCBhdXRvKTtcbiAgICAgICAgICAgIGdyaWQtYXV0by1mbG93OiBjb2x1bW47XG5cbiAgICAgICAgICAgICZbZGF0YS1hcnJhbmdlbWVudD0nc3RhcnQnXSB7XG4gICAgICAgICAgICAgICAgYWxpZ24taXRlbXM6IHN0YXJ0O1xuICAgICAgICAgICAgfVxuXG4gICAgICAgICAgICAmW2RhdGEtYXJyYW5nZW1lbnQ9J2NlbnRlciddIHtcbiAgICAgICAgICAgICAgICBhbGlnbi1pdGVtczogY2VudGVyO1xuICAgICAgICAgICAgfVxuXG4gICAgICAgICAgICAmW2RhdGEtYXJyYW5nZW1lbnQ9J2VuZCddIHtcbiAgICAgICAgICAgICAgICBhbGlnbi1pdGVtczogZW5kO1xuICAgICAgICAgICAgfVxuXG4gICAgICAgICAgICAmW2RhdGEtYXJyYW5nZW1lbnQ9J3NwYWNlQmV0d2VlbiddIHtcbiAgICAgICAgICAgICAgICBhbGlnbi1jb250ZW50OiBzcGFjZS1iZXR3ZWVuO1xuICAgICAgICAgICAgICAgIGFsaWduLWl0ZW1zOiBub3JtYWw7XG4gICAgICAgICAgICB9XG5cbiAgICAgICAgICAgICZbZGF0YS1hcnJhbmdlbWVudD0nc3BhY2VBcm91bmQnXSB7XG4gICAgICAgICAgICAgICAgYWxpZ24tY29udGVudDogc3BhY2UtYXJvdW5kO1xuICAgICAgICAgICAgICAgIGFsaWduLWl0ZW1zOiBub3JtYWw7XG4gICAgICAgICAgICB9XG5cbiAgICAgICAgICAgICZbZGF0YS1hbGlnbm1lbnQ9J3N0YXJ0J10ge1xuICAgICAgICAgICAgICAgIGp1c3RpZnktaXRlbXM6IHN0YXJ0O1xuICAgICAgICAgICAgfVxuXG4gICAgICAgICAgICAmW2RhdGEtYWxpZ25tZW50PSdjZW50ZXInXSB7XG4gICAgICAgICAgICAgICAganVzdGlmeS1pdGVtczogY2VudGVyO1xuICAgICAgICAgICAgfVxuXG4gICAgICAgICAgICAmW2RhdGEtYWxpZ25tZW50PSdlbmQnXSB7XG4gICAgICAgICAgICAgICAganVzdGlmeS1pdGVtczogZW5kO1xuICAgICAgICAgICAgfVxuICAgICAgICB9XG4gICAgfVxuXG4gICAgJjpub3QoJi5ncmlkKSB7XG4gICAgICAgICZbZGF0YS1hcnJhbmdlbWVudD0nc3RhcnQnXSB7XG4gICAgICAgICAgICBqdXN0aWZ5LWNvbnRlbnQ6IHN0YXJ0O1xuICAgICAgICB9XG5cbiAgICAgICAgJltkYXRhLWFycmFuZ2VtZW50PSdjZW50ZXInXSB7XG4gICAgICAgICAgICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcbiAgICAgICAgfVxuXG4gICAgICAgICZbZGF0YS1hcnJhbmdlbWVudD0nZW5kJ10ge1xuICAgICAgICAgICAganVzdGlmeS1jb250ZW50OiBlbmQ7XG4gICAgICAgIH1cblxuICAgICAgICAmW2RhdGEtYXJyYW5nZW1lbnQ9J3NwYWNlQmV0d2VlbiddIHtcbiAgICAgICAgICAgIGp1c3RpZnktY29udGVudDogc3BhY2UtYmV0d2VlbjtcbiAgICAgICAgfVxuXG4gICAgICAgICZbZGF0YS1hcnJhbmdlbWVudD0nc3BhY2VBcm91bmQnXSB7XG4gICAgICAgICAgICBqdXN0aWZ5LWNvbnRlbnQ6IHNwYWNlLWFyb3VuZDtcbiAgICAgICAgfVxuXG4gICAgICAgICZbZGF0YS1hbGlnbm1lbnQ9J3N0YXJ0J10ge1xuICAgICAgICAgICAgYWxpZ24taXRlbXM6IHN0YXJ0O1xuICAgICAgICB9XG5cbiAgICAgICAgJltkYXRhLWFsaWdubWVudD0nY2VudGVyJ10ge1xuICAgICAgICAgICAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgICAgICAgfVxuXG4gICAgICAgICZbZGF0YS1hbGlnbm1lbnQ9J2VuZCddIHtcbiAgICAgICAgICAgIGFsaWduLWl0ZW1zOiBlbmQ7XG4gICAgICAgIH1cbiAgICB9XG5gO1xuIl19 */",
|
10
|
+
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
|
11
|
+
};
|
@@ -0,0 +1 @@
|
|
1
|
+
export {};
|
@@ -0,0 +1 @@
|
|
1
|
+
export { flowRoot, flowConfig } from './Flow';
|
@@ -1,3 +1,4 @@
|
|
1
|
+
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
1
2
|
var _excluded = ["target", "children", "isOpen", "opened", "trigger", "hasArrow", "frame", "className", "placement", "offset", "zIndex", "isFocusTrapped", "closeOnEsc", "preventOverflow", "usePortal", "view", "onToggle", "closeOnOverlayClick"];
|
2
3
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
3
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,7 +6,6 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
|
|
5
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; }
|
6
7
|
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
|
7
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); }
|
8
|
-
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
9
9
|
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
10
10
|
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."); }
|
11
11
|
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); }
|
@@ -14,7 +14,7 @@ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" !=
|
|
14
14
|
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
15
15
|
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; }
|
16
16
|
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; }
|
17
|
-
import React, { useRef, useCallback, useEffect, useState, forwardRef
|
17
|
+
import React, { useRef, useCallback, useEffect, useState, forwardRef } from 'react';
|
18
18
|
import { usePopper } from 'react-popper';
|
19
19
|
import { useForkRef } from '@salutejs/plasma-core';
|
20
20
|
import { useFocusTrap } from '../../hooks';
|
@@ -74,7 +74,6 @@ export var popoverRoot = function popoverRoot(Root) {
|
|
74
74
|
var _useState3 = useState(false),
|
75
75
|
_useState4 = _slicedToArray(_useState3, 2),
|
76
76
|
forceRender = _useState4[1];
|
77
|
-
var portalContainer = _typeof(target) === 'object' && target !== null && 'current' in target && target.current || undefined;
|
78
77
|
var isAutoArray = Array.isArray(placement);
|
79
78
|
var isAuto = isAutoArray || placement.startsWith('auto');
|
80
79
|
var initialStyles = {
|
@@ -174,7 +173,7 @@ export var popoverRoot = function popoverRoot(Root) {
|
|
174
173
|
if (typeof frame !== 'string' && frame && frame.current) {
|
175
174
|
portal = frame.current;
|
176
175
|
}
|
177
|
-
if (!usePortal
|
176
|
+
if (!usePortal) {
|
178
177
|
portal = rootRef.current;
|
179
178
|
}
|
180
179
|
if (!portal) {
|
@@ -208,11 +207,8 @@ export var popoverRoot = function popoverRoot(Root) {
|
|
208
207
|
*/
|
209
208
|
Promise.resolve().then(forceUpdate);
|
210
209
|
}, [innerIsOpen, children, forceUpdate]);
|
211
|
-
return /*#__PURE__*/React.createElement(
|
212
|
-
|
213
|
-
disabled: /*#__PURE__*/isValidElement(target)
|
214
|
-
}, /*#__PURE__*/React.createElement(StyledWrapper, {
|
215
|
-
className: cx(classes.wrapper, ! /*#__PURE__*/isValidElement(target) && classes.targetAsRef),
|
210
|
+
return /*#__PURE__*/React.createElement(StyledWrapper, {
|
211
|
+
className: classes.wrapper,
|
216
212
|
onMouseEnter: onMouseEnter,
|
217
213
|
onMouseLeave: onMouseLeave
|
218
214
|
}, /*#__PURE__*/React.createElement(StyledRoot, {
|
@@ -221,7 +217,7 @@ export var popoverRoot = function popoverRoot(Root) {
|
|
221
217
|
onFocus: onFocus,
|
222
218
|
onBlur: onBlur,
|
223
219
|
className: cx(className, classes.target)
|
224
|
-
},
|
220
|
+
}, target), children && portalRef.current && /*#__PURE__*/React.createElement(Portal, {
|
225
221
|
container: portalRef.current
|
226
222
|
}, /*#__PURE__*/React.createElement(Root, _extends({
|
227
223
|
view: view,
|
@@ -237,7 +233,7 @@ export var popoverRoot = function popoverRoot(Root) {
|
|
237
233
|
className: classes.arrow,
|
238
234
|
ref: setArrowElement,
|
239
235
|
style: styles.arrow
|
240
|
-
}, attributes.arrow)), children))))
|
236
|
+
}, attributes.arrow)), children))));
|
241
237
|
});
|
242
238
|
};
|
243
239
|
export var popoverConfig = {
|