@mirai/ui 1.1.16 → 2.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/components/Action/Action.js +2 -5
- package/build/components/Action/Action.js.map +1 -1
- package/build/components/Action/Action.stories.js +1 -1
- package/build/components/Action/Action.stories.js.map +1 -1
- package/build/components/Action/__tests__/__snapshots__/Action.test.js.snap +42 -30
- package/build/components/Button/Button.js +4 -6
- package/build/components/Button/Button.js.map +1 -1
- package/build/components/Button/__tests__/__snapshots__/Button.test.js.snap +38 -27
- package/build/components/Calendar/Calendar.js +1 -1
- package/build/components/Calendar/Calendar.js.map +1 -1
- package/build/components/Calendar/Calendar.module.css +5 -5
- package/build/components/Calendar/__tests__/__snapshots__/Calendar.test.jsx.snap +15576 -15544
- package/build/components/Form/Form.js +2 -5
- package/build/components/Form/Form.js.map +1 -1
- package/build/components/Form/__tests__/__snapshots__/Form.test.jsx.snap +14 -12
- package/build/components/InputDate/InputDate.js +1 -0
- package/build/components/InputDate/InputDate.js.map +1 -1
- package/build/components/InputDate/__tests__/__snapshots__/InputDate.test.js.snap +67 -42
- package/build/components/InputNumber/InputNumber.js +17 -4
- package/build/components/InputNumber/InputNumber.js.map +1 -1
- package/build/components/InputNumber/__tests__/__snapshots__/InputNumber.test.js.snap +198 -114
- package/build/components/InputOption/InputOption.js +6 -2
- package/build/components/InputOption/InputOption.js.map +1 -1
- package/build/components/InputOption/__tests__/__snapshots__/InputOption.test.js.snap +114 -75
- package/build/components/InputPhone/InputPhone.js +8 -1
- package/build/components/InputPhone/InputPhone.js.map +1 -1
- package/build/components/InputPhone/InputPhone.module.css +1 -1
- package/build/components/InputPhone/__tests__/__snapshots__/InputPhone.test.js.snap +448 -354
- package/build/components/InputSelect/InputSelect.js +10 -1
- package/build/components/InputSelect/InputSelect.js.map +1 -1
- package/build/components/InputSelect/__tests__/__snapshots__/InputSelect.test.js.snap +118 -112
- package/build/components/InputText/InputText.js +6 -2
- package/build/components/InputText/InputText.js.map +1 -1
- package/build/components/InputText/__tests__/__snapshots__/InputText.test.js.snap +160 -130
- package/build/components/InputText/partials/InputText.Label.js +1 -0
- package/build/components/InputText/partials/InputText.Label.js.map +1 -1
- package/build/components/Menu/Menu.js +1 -0
- package/build/components/Menu/Menu.js.map +1 -1
- package/build/components/Menu/__tests__/__snapshots__/Menu.test.jsx.snap +76 -55
- package/build/components/Modal/Modal.js +20 -6
- package/build/components/Modal/Modal.js.map +1 -1
- package/build/components/Modal/__tests__/__snapshots__/Modal.test.js.snap +106 -72
- package/build/components/Notification/Notification.js +1 -0
- package/build/components/Notification/Notification.js.map +1 -1
- package/build/components/Notification/__tests__/__snapshots__/Notification.test.js.snap +328 -288
- package/build/components/Progress/Progress.js +1 -0
- package/build/components/Progress/Progress.js.map +1 -1
- package/build/components/Progress/__tests__/__snapshots__/Progress.test.jsx.snap +31 -18
- package/build/components/Slider/Slider.js +3 -2
- package/build/components/Slider/Slider.js.map +1 -1
- package/build/components/Slider/Slider.module.css +1 -1
- package/build/components/Slider/__tests__/__snapshots__/Slider.test.js.snap +475 -339
- package/build/components/Table/Table.js +2 -4
- package/build/components/Table/Table.js.map +1 -1
- package/build/components/Table/__tests__/__snapshots__/Table.ColumnFilter.test.js.snap +222 -192
- package/build/components/Table/__tests__/__snapshots__/Table.test.js.snap +878 -432
- package/build/components/Tooltip/Tooltip.js +3 -4
- package/build/components/Tooltip/Tooltip.js.map +1 -1
- package/build/components/Tooltip/__tests__/__snapshots__/Tooltip.test.jsx.snap +38 -28
- package/build/primitives/Checkbox/Checkbox.js +1 -0
- package/build/primitives/Checkbox/Checkbox.js.map +1 -1
- package/build/primitives/Checkbox/__tests__/__snapshots__/Checkbox.test.js.snap +35 -20
- package/build/primitives/Icon/Icon.js +1 -1
- package/build/primitives/Icon/Icon.js.map +1 -1
- package/build/primitives/Icon/__tests__/__snapshots__/Icon.test.js.snap +108 -82
- package/build/primitives/Layer/Layer.js +2 -1
- package/build/primitives/Layer/Layer.js.map +1 -1
- package/build/primitives/Layer/__tests__/__snapshots__/Layer.test.js.snap +60 -42
- package/build/primitives/Pressable/Pressable.constants.js +1 -1
- package/build/primitives/Pressable/Pressable.constants.js.map +1 -1
- package/build/primitives/Pressable/Pressable.js +7 -6
- package/build/primitives/Pressable/Pressable.js.map +1 -1
- package/build/primitives/Pressable/__tests__/__snapshots__/Pressable.test.js.snap +16 -12
- package/build/primitives/Primitive/Primitive.constants.js +1 -1
- package/build/primitives/Primitive/Primitive.constants.js.map +1 -1
- package/build/primitives/Primitive/Primitive.js +2 -2
- package/build/primitives/Primitive/Primitive.js.map +1 -1
- package/build/primitives/Primitive/__tests__/__snapshots__/Primitive.test.js.snap +12 -12
- package/build/primitives/Primitive/helpers/getTag.js +35 -0
- package/build/primitives/Primitive/helpers/getTag.js.map +1 -0
- package/build/primitives/Primitive/helpers/index.js +11 -0
- package/build/primitives/Primitive/helpers/index.js.map +1 -1
- package/build/primitives/Radio/Radio.js +1 -1
- package/build/primitives/Radio/Radio.js.map +1 -1
- package/build/primitives/Radio/__tests__/__snapshots__/Radio.test.js.snap +39 -21
- package/build/primitives/ScrollView/ScrollView.js +2 -5
- package/build/primitives/ScrollView/ScrollView.js.map +1 -1
- package/build/primitives/ScrollView/ScrollView.stories.js +6 -5
- package/build/primitives/ScrollView/ScrollView.stories.js.map +1 -1
- package/build/primitives/ScrollView/__tests__/__snapshots__/ScrollView.test.js.snap +24 -24
- package/build/primitives/Select/Select.js +7 -4
- package/build/primitives/Select/Select.js.map +1 -1
- package/build/primitives/Select/__tests__/__snapshots__/Select.test.js.snap +35 -0
- package/build/primitives/Switch/Switch.js +1 -1
- package/build/primitives/Switch/Switch.js.map +1 -1
- package/build/primitives/Switch/__tests__/__snapshots__/Switch.test.js.snap +60 -40
- package/build/primitives/Text/Text.js +4 -3
- package/build/primitives/Text/Text.js.map +1 -1
- package/build/primitives/Text/__tests__/__snapshots__/Text.test.js.snap +68 -68
- package/build/primitives/Text/helpers/parseMarkdown.js +3 -1
- package/build/primitives/Text/helpers/parseMarkdown.js.map +1 -1
- package/build/primitives/View/View.js +2 -5
- package/build/primitives/View/View.js.map +1 -1
- package/build/primitives/View/__tests__/__snapshots__/View.test.js.snap +15 -15
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Menu.js","names":["Menu","children","options","Template","Option","title","visible","onPress","others","useDevice","isMobile","renderOptions","filter","option","map","index","testId","undefined","event","value","role","styles","style","menu","className","displayName","propTypes","PropTypes","node","arrayOf","shape","disabled","bool","divider","icon","func","label","string","oneOfType","number","any"],"sources":["../../../src/components/Menu/Menu.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport { useDevice } from '../../hooks';\nimport { Layer, LayerContent } from '../../primitives';\nimport { Modal } from '../Modal';\nimport style from './Menu.module.css';\nimport { Option } from './Menu.Option';\n\nconst Menu = ({ children, options = [], Template = Option, title, visible, onPress = () => {}, ...others }) => {\n const { isMobile } = useDevice();\n\n const renderOptions = () =>\n options\n .filter((option) => !!option)\n .map((option = {}, index) => (\n <Template\n testId={others.testId ? `${others.testId}-${index}` : undefined}\n {...option}\n key={index}\n onPress={(event) => onPress(option.value, event)}\n />\n ));\n\n return !isMobile ? (\n <Layer\n forceRender={false}\n {...others}\n visible={visible}\n role={others.role || 'menu'}\n className={styles(style.menu, visible && style.visible, others.className)}\n >\n {children}\n <LayerContent>{renderOptions()}</LayerContent>\n </Layer>\n ) : (\n <>\n {children}\n <Modal\n title={title}\n visible={visible}\n onClose={(event) => onPress(undefined, event)}\n onOverflow={(event) => onPress(undefined, event)}\n className={styles(style.menu, others.className)}\n >\n {renderOptions()}\n </Modal>\n </>\n );\n};\n\nMenu.displayName = 'Component:Menu';\n\nMenu.propTypes = {\n children: PropTypes.node,\n options: PropTypes.arrayOf(\n PropTypes.shape({\n children: PropTypes.node,\n disabled: PropTypes.bool,\n divider: PropTypes.bool,\n icon: PropTypes.func,\n label: PropTypes.string,\n value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n }),\n ),\n Template: PropTypes.any,\n title: PropTypes.string,\n visible: PropTypes.bool,\n onPress: PropTypes.func,\n};\n\nexport { Menu };\n"],"mappings":";;;;;;AAAA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AAAuC;AAAA;AAAA;AAAA;AAAA;AAEvC,IAAMA,IAAI,GAAG,SAAPA,IAAI,OAAqG;EAAA,IAA/FC,QAAQ,QAARA,QAAQ;IAAA,oBAAEC,OAAO;IAAPA,OAAO,6BAAG,EAAE;IAAA,qBAAEC,QAAQ;IAARA,QAAQ,8BAAGC,YAAM;IAAEC,KAAK,QAALA,KAAK;IAAEC,OAAO,QAAPA,OAAO;IAAA,oBAAEC,OAAO;IAAPA,QAAO,6BAAG,YAAM,CAAC,CAAC;IAAKC,MAAM;EACtG,iBAAqB,IAAAC,gBAAS,GAAE;IAAxBC,QAAQ,cAARA,QAAQ;EAEhB,IAAMC,aAAa,GAAG,SAAhBA,aAAa;IAAA,OACjBT,OAAO,CACJU,MAAM,CAAC,UAACC,MAAM;MAAA,OAAK,CAAC,CAACA,MAAM;IAAA,EAAC,CAC5BC,GAAG,CAAC;MAAA,IAACD,MAAM,uEAAG,CAAC,CAAC;MAAA,IAAEE,KAAK;MAAA,oBACtB,6BAAC,QAAQ;QACP,MAAM,EAAEP,MAAM,CAACQ,MAAM,aAAMR,MAAM,CAACQ,MAAM,cAAID,KAAK,IAAKE;MAAU,GAC5DJ,MAAM;QACV,GAAG,EAAEE,KAAM;QACX,OAAO,EAAE,iBAACG,KAAK;UAAA,OAAKX,QAAO,CAACM,MAAM,CAACM,KAAK,EAAED,KAAK,CAAC;QAAA;MAAC,GACjD;IAAA,CACH,CAAC;EAAA;EAEN,OAAO,CAACR,QAAQ,gBACd,6BAAC,iBAAK;IACJ,WAAW,EAAE;EAAM,GACfF,MAAM;IACV,OAAO,EAAEF,OAAQ;IACjB,IAAI,EAAEE,MAAM,CAACY,IAAI,IAAI,MAAO;IAC5B,SAAS,EAAE,IAAAC,eAAM,EAACC,mBAAK,CAACC,IAAI,
|
|
1
|
+
{"version":3,"file":"Menu.js","names":["Menu","children","options","Template","Option","title","visible","onPress","others","useDevice","isMobile","renderOptions","filter","option","map","index","testId","undefined","event","value","role","tag","styles","style","menu","className","displayName","propTypes","PropTypes","node","arrayOf","shape","disabled","bool","divider","icon","func","label","string","oneOfType","number","any"],"sources":["../../../src/components/Menu/Menu.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport { useDevice } from '../../hooks';\nimport { Layer, LayerContent } from '../../primitives';\nimport { Modal } from '../Modal';\nimport style from './Menu.module.css';\nimport { Option } from './Menu.Option';\n\nconst Menu = ({ children, options = [], Template = Option, title, visible, onPress = () => {}, ...others }) => {\n const { isMobile } = useDevice();\n\n const renderOptions = () =>\n options\n .filter((option) => !!option)\n .map((option = {}, index) => (\n <Template\n testId={others.testId ? `${others.testId}-${index}` : undefined}\n {...option}\n key={index}\n onPress={(event) => onPress(option.value, event)}\n />\n ));\n\n return !isMobile ? (\n <Layer\n forceRender={false}\n {...others}\n visible={visible}\n role={others.role || 'menu'}\n tag={others.tag || 'menu'}\n className={styles(style.menu, visible && style.visible, others.className)}\n >\n {children}\n <LayerContent>{renderOptions()}</LayerContent>\n </Layer>\n ) : (\n <>\n {children}\n <Modal\n title={title}\n visible={visible}\n onClose={(event) => onPress(undefined, event)}\n onOverflow={(event) => onPress(undefined, event)}\n className={styles(style.menu, others.className)}\n >\n {renderOptions()}\n </Modal>\n </>\n );\n};\n\nMenu.displayName = 'Component:Menu';\n\nMenu.propTypes = {\n children: PropTypes.node,\n options: PropTypes.arrayOf(\n PropTypes.shape({\n children: PropTypes.node,\n disabled: PropTypes.bool,\n divider: PropTypes.bool,\n icon: PropTypes.func,\n label: PropTypes.string,\n value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n }),\n ),\n Template: PropTypes.any,\n title: PropTypes.string,\n visible: PropTypes.bool,\n onPress: PropTypes.func,\n};\n\nexport { Menu };\n"],"mappings":"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"}
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
exports[`component:<Menu> inherit:className 1`] = `
|
|
4
4
|
<DocumentFragment>
|
|
5
|
-
<
|
|
5
|
+
<ui_menu
|
|
6
6
|
class="container"
|
|
7
7
|
/>
|
|
8
8
|
</DocumentFragment>
|
|
@@ -10,70 +10,75 @@ exports[`component:<Menu> inherit:className 1`] = `
|
|
|
10
10
|
|
|
11
11
|
exports[`component:<Menu> prop:Template 1`] = `
|
|
12
12
|
<DocumentFragment>
|
|
13
|
-
<
|
|
13
|
+
<ui_menu
|
|
14
14
|
class="container"
|
|
15
15
|
>
|
|
16
16
|
<button
|
|
17
17
|
class="pressable button"
|
|
18
|
+
tabindex="0"
|
|
18
19
|
>
|
|
19
20
|
Action
|
|
20
21
|
</button>
|
|
21
|
-
</
|
|
22
|
+
</ui_menu>
|
|
22
23
|
</DocumentFragment>
|
|
23
24
|
`;
|
|
24
25
|
|
|
25
26
|
exports[`component:<Menu> prop:children 1`] = `
|
|
26
27
|
<DocumentFragment>
|
|
27
|
-
<
|
|
28
|
+
<ui_menu
|
|
28
29
|
class="container"
|
|
29
30
|
>
|
|
30
31
|
<button
|
|
31
32
|
class="pressable button"
|
|
33
|
+
tabindex="0"
|
|
32
34
|
>
|
|
33
35
|
Action
|
|
34
36
|
</button>
|
|
35
|
-
</
|
|
37
|
+
</ui_menu>
|
|
36
38
|
</DocumentFragment>
|
|
37
39
|
`;
|
|
38
40
|
|
|
39
41
|
exports[`component:<Menu> prop:options & visible 1`] = `
|
|
40
42
|
<DocumentFragment>
|
|
41
|
-
<
|
|
43
|
+
<ui_menu
|
|
42
44
|
class="container"
|
|
43
45
|
>
|
|
44
46
|
<button
|
|
45
47
|
class="pressable button"
|
|
48
|
+
tabindex="0"
|
|
46
49
|
>
|
|
47
50
|
Action
|
|
48
51
|
</button>
|
|
49
|
-
</
|
|
50
|
-
<
|
|
52
|
+
</ui_menu>
|
|
53
|
+
<ui_menu_content
|
|
51
54
|
class="layer"
|
|
52
55
|
style="left: 0px; top: 0px;"
|
|
53
56
|
>
|
|
54
57
|
<div
|
|
55
58
|
class="menu visible"
|
|
56
59
|
>
|
|
57
|
-
<
|
|
60
|
+
<ui_pressable
|
|
58
61
|
class="pressable option divider"
|
|
62
|
+
tabindex="0"
|
|
59
63
|
>
|
|
60
|
-
<
|
|
64
|
+
<ui_view
|
|
61
65
|
class="view row wide content"
|
|
62
66
|
>
|
|
63
|
-
<
|
|
67
|
+
<ui_text
|
|
64
68
|
class="text paragraph label"
|
|
65
69
|
>
|
|
66
70
|
Lorem Ipsum...
|
|
67
|
-
</
|
|
68
|
-
</
|
|
69
|
-
</
|
|
70
|
-
<
|
|
71
|
+
</ui_text>
|
|
72
|
+
</ui_view>
|
|
73
|
+
</ui_pressable>
|
|
74
|
+
<ui_pressable
|
|
71
75
|
class="pressable option value"
|
|
76
|
+
tabindex="0"
|
|
72
77
|
>
|
|
73
|
-
<
|
|
78
|
+
<ui_view
|
|
74
79
|
class="view row wide content"
|
|
75
80
|
>
|
|
76
|
-
<
|
|
81
|
+
<ui_icon
|
|
77
82
|
class="icon headline-3 icon"
|
|
78
83
|
>
|
|
79
84
|
<svg
|
|
@@ -93,22 +98,23 @@ exports[`component:<Menu> prop:options & visible 1`] = `
|
|
|
93
98
|
d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
|
|
94
99
|
/>
|
|
95
100
|
</svg>
|
|
96
|
-
</
|
|
97
|
-
<
|
|
101
|
+
</ui_icon>
|
|
102
|
+
<ui_text
|
|
98
103
|
class="text paragraph label"
|
|
99
104
|
>
|
|
100
105
|
Item 1
|
|
101
|
-
</
|
|
102
|
-
</
|
|
103
|
-
</
|
|
104
|
-
<
|
|
106
|
+
</ui_text>
|
|
107
|
+
</ui_view>
|
|
108
|
+
</ui_pressable>
|
|
109
|
+
<ui_pressable
|
|
105
110
|
class="pressable option value disabled"
|
|
106
111
|
data-testid="two"
|
|
112
|
+
tabindex="0"
|
|
107
113
|
>
|
|
108
|
-
<
|
|
114
|
+
<ui_view
|
|
109
115
|
class="view row wide content"
|
|
110
116
|
>
|
|
111
|
-
<
|
|
117
|
+
<ui_icon
|
|
112
118
|
class="icon headline-3 icon"
|
|
113
119
|
>
|
|
114
120
|
<svg
|
|
@@ -128,102 +134,117 @@ exports[`component:<Menu> prop:options & visible 1`] = `
|
|
|
128
134
|
d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
|
|
129
135
|
/>
|
|
130
136
|
</svg>
|
|
131
|
-
</
|
|
132
|
-
<
|
|
137
|
+
</ui_icon>
|
|
138
|
+
<ui_text
|
|
133
139
|
class="text paragraph label"
|
|
134
140
|
>
|
|
135
141
|
Item 2
|
|
136
|
-
</
|
|
137
|
-
</
|
|
138
|
-
</
|
|
139
|
-
<
|
|
142
|
+
</ui_text>
|
|
143
|
+
</ui_view>
|
|
144
|
+
</ui_pressable>
|
|
145
|
+
<ui_pressable
|
|
140
146
|
class="pressable option value divider"
|
|
147
|
+
tabindex="0"
|
|
141
148
|
>
|
|
142
|
-
<
|
|
149
|
+
<ui_view
|
|
143
150
|
class="view row wide content"
|
|
144
151
|
>
|
|
145
|
-
<
|
|
152
|
+
<ui_text
|
|
146
153
|
class="text paragraph label"
|
|
147
154
|
>
|
|
148
155
|
Item 3
|
|
149
|
-
</
|
|
150
|
-
</
|
|
151
|
-
</
|
|
152
|
-
<
|
|
156
|
+
</ui_text>
|
|
157
|
+
</ui_view>
|
|
158
|
+
</ui_pressable>
|
|
159
|
+
<ui_pressable
|
|
153
160
|
class="pressable option value"
|
|
161
|
+
tabindex="0"
|
|
154
162
|
>
|
|
155
|
-
<
|
|
163
|
+
<ui_view
|
|
156
164
|
class="view row wide content"
|
|
157
165
|
>
|
|
158
|
-
<
|
|
166
|
+
<ui_text
|
|
159
167
|
class="text paragraph label"
|
|
160
168
|
>
|
|
161
169
|
Item 4
|
|
162
|
-
</
|
|
170
|
+
</ui_text>
|
|
163
171
|
<button
|
|
164
172
|
class="pressable button small"
|
|
173
|
+
tabindex="0"
|
|
165
174
|
>
|
|
166
175
|
Add
|
|
167
176
|
</button>
|
|
168
|
-
</
|
|
169
|
-
</
|
|
170
|
-
<
|
|
177
|
+
</ui_view>
|
|
178
|
+
</ui_pressable>
|
|
179
|
+
<ui_pressable
|
|
171
180
|
class="pressable option"
|
|
181
|
+
tabindex="0"
|
|
172
182
|
>
|
|
173
|
-
<
|
|
183
|
+
<ui_view
|
|
174
184
|
class="view row wide content"
|
|
175
185
|
>
|
|
176
186
|
<button
|
|
177
187
|
class="pressable button"
|
|
188
|
+
tabindex="0"
|
|
178
189
|
>
|
|
179
190
|
Add
|
|
180
191
|
</button>
|
|
181
|
-
</
|
|
182
|
-
</
|
|
192
|
+
</ui_view>
|
|
193
|
+
</ui_pressable>
|
|
183
194
|
</div>
|
|
184
|
-
</
|
|
195
|
+
</ui_menu_content>
|
|
185
196
|
</DocumentFragment>
|
|
186
197
|
`;
|
|
187
198
|
|
|
188
199
|
exports[`component:<Menu> prop:options 1`] = `
|
|
189
200
|
<DocumentFragment>
|
|
190
|
-
<
|
|
201
|
+
<ui_menu
|
|
191
202
|
class="container"
|
|
192
203
|
>
|
|
193
204
|
<button
|
|
194
205
|
class="pressable button"
|
|
206
|
+
tabindex="0"
|
|
195
207
|
>
|
|
196
208
|
Action
|
|
197
209
|
</button>
|
|
198
|
-
</
|
|
210
|
+
</ui_menu>
|
|
199
211
|
</DocumentFragment>
|
|
200
212
|
`;
|
|
201
213
|
|
|
202
214
|
exports[`component:<Menu> prop:title 1`] = `
|
|
203
215
|
<DocumentFragment>
|
|
204
|
-
<
|
|
216
|
+
<ui_menu
|
|
205
217
|
class="container"
|
|
206
218
|
>
|
|
207
219
|
<button
|
|
208
220
|
class="pressable button"
|
|
221
|
+
tabindex="0"
|
|
209
222
|
>
|
|
210
223
|
Action
|
|
211
224
|
</button>
|
|
212
|
-
</
|
|
213
|
-
<
|
|
225
|
+
</ui_menu>
|
|
226
|
+
<ui_menu_content
|
|
214
227
|
class="layer"
|
|
215
228
|
style="left: 0px; top: 0px;"
|
|
216
229
|
>
|
|
217
230
|
<div
|
|
218
231
|
class="menu visible"
|
|
219
232
|
/>
|
|
220
|
-
</
|
|
233
|
+
</ui_menu_content>
|
|
221
234
|
</DocumentFragment>
|
|
222
235
|
`;
|
|
223
236
|
|
|
224
237
|
exports[`component:<Menu> renders 1`] = `
|
|
225
238
|
<DocumentFragment>
|
|
226
|
-
<
|
|
239
|
+
<ui_menu
|
|
240
|
+
class="container"
|
|
241
|
+
/>
|
|
242
|
+
</DocumentFragment>
|
|
243
|
+
`;
|
|
244
|
+
|
|
245
|
+
exports[`component:<Menu> tag 1`] = `
|
|
246
|
+
<DocumentFragment>
|
|
247
|
+
<ui_tag
|
|
227
248
|
class="container"
|
|
228
249
|
/>
|
|
229
250
|
</DocumentFragment>
|
|
@@ -231,7 +252,7 @@ exports[`component:<Menu> renders 1`] = `
|
|
|
231
252
|
|
|
232
253
|
exports[`component:<Menu> testId 1`] = `
|
|
233
254
|
<DocumentFragment>
|
|
234
|
-
<
|
|
255
|
+
<ui_menu
|
|
235
256
|
class="container"
|
|
236
257
|
data-testid="mirai"
|
|
237
258
|
/>
|
|
@@ -16,7 +16,7 @@ var _primitives = require("../../primitives");
|
|
|
16
16
|
var _theme = require("../../theme");
|
|
17
17
|
var _Modal = require("./Modal.constants");
|
|
18
18
|
var _ModalModule = _interopRequireDefault(require("./Modal.module.css"));
|
|
19
|
-
var _excluded = ["blur", "children", "displayName", "fit", "mobileBehavior", "overflow", "portal", "preventDefault", "title", "visible", "onBack", "onClose", "onOverflow"];
|
|
19
|
+
var _excluded = ["blur", "children", "displayName", "fit", "mobileBehavior", "overflow", "portal", "preventDefault", "title", "visible", "onBack", "onClose", "onOverflow", "aria"];
|
|
20
20
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
21
21
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
22
22
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
@@ -54,6 +54,12 @@ var Modal = function Modal(_ref) {
|
|
|
54
54
|
onBack = _ref.onBack,
|
|
55
55
|
onClose = _ref.onClose,
|
|
56
56
|
onOverflow = _ref.onOverflow,
|
|
57
|
+
_ref$aria = _ref.aria;
|
|
58
|
+
_ref$aria = _ref$aria === void 0 ? {} : _ref$aria;
|
|
59
|
+
var _ref$aria$buttonBack = _ref$aria.buttonBack,
|
|
60
|
+
ariaBack = _ref$aria$buttonBack === void 0 ? 'Back' : _ref$aria$buttonBack,
|
|
61
|
+
_ref$aria$buttonClose = _ref$aria.buttonClose,
|
|
62
|
+
ariaClose = _ref$aria$buttonClose === void 0 ? 'Close' : _ref$aria$buttonClose,
|
|
57
63
|
others = _objectWithoutProperties(_ref, _excluded);
|
|
58
64
|
var _useDevice = (0, _hooks.useDevice)(),
|
|
59
65
|
isDesktop = _useDevice.isDesktop,
|
|
@@ -116,7 +122,8 @@ var Modal = function Modal(_ref) {
|
|
|
116
122
|
var testId = others.testId;
|
|
117
123
|
return renderer( /*#__PURE__*/_react.default.createElement(_primitives.Pressable, {
|
|
118
124
|
preventDefault: preventDefault,
|
|
119
|
-
role:
|
|
125
|
+
role: "".concat(others.role || 'modal', "-overflow"),
|
|
126
|
+
tag: "".concat(others.tag || 'modal', "_overflow"),
|
|
120
127
|
onPress: visible && overflow ? handleOverflow : undefined,
|
|
121
128
|
className: (0, _helpers.styles)(_ModalModule.default.container, isDesktop && mobileBehavior && _ModalModule.default.mobileBehavior, overflow && _ModalModule.default.overflow, overflow && blur && _ModalModule.default.blur, visible && _ModalModule.default.visible, onOverflow && _ModalModule.default.onOverflow),
|
|
122
129
|
style: {
|
|
@@ -127,7 +134,8 @@ var Modal = function Modal(_ref) {
|
|
|
127
134
|
fit: true,
|
|
128
135
|
ref: ref,
|
|
129
136
|
role: others.role || 'modal',
|
|
130
|
-
className: (0, _helpers.styles)(_ModalModule.default.modal, !fit && _ModalModule.default.calcWidth, visible && _ModalModule.default.visible, others.className)
|
|
137
|
+
className: (0, _helpers.styles)(_ModalModule.default.modal, !fit && _ModalModule.default.calcWidth, visible && _ModalModule.default.visible, others.className),
|
|
138
|
+
"aria-hidden": visible ? 'false' : 'true'
|
|
131
139
|
}), (title || onBack || onClose) && /*#__PURE__*/_react.default.createElement(_primitives.View, {
|
|
132
140
|
row: true,
|
|
133
141
|
className: (0, _helpers.styles)(_ModalModule.default.header, !defaultDirection && _ModalModule.default.reverse, !onBack && _ModalModule.default.hideBack, !onClose && _ModalModule.default.hideClose)
|
|
@@ -136,6 +144,7 @@ var Modal = function Modal(_ref) {
|
|
|
136
144
|
squared: true,
|
|
137
145
|
transparent: true,
|
|
138
146
|
onPress: onBack,
|
|
147
|
+
"aria-label": ariaBack,
|
|
139
148
|
testId: testId ? "".concat(testId, "-button-back") : undefined
|
|
140
149
|
}, /*#__PURE__*/_react.default.createElement(_primitives.Icon, {
|
|
141
150
|
value: _primitives.ICON.LEFT,
|
|
@@ -148,8 +157,9 @@ var Modal = function Modal(_ref) {
|
|
|
148
157
|
squared: true,
|
|
149
158
|
transparent: true,
|
|
150
159
|
onPress: handleClose,
|
|
151
|
-
|
|
152
|
-
|
|
160
|
+
className: _ModalModule.default.button,
|
|
161
|
+
"aria-label": ariaClose,
|
|
162
|
+
testId: testId ? "".concat(testId, "-button-close") : undefined
|
|
153
163
|
}, /*#__PURE__*/_react.default.createElement(_primitives.Icon, {
|
|
154
164
|
value: isDesktop || title !== undefined ? _primitives.ICON.CLOSE : _primitives.ICON.EXPAND_MORE,
|
|
155
165
|
className: _ModalModule.default.icon
|
|
@@ -176,6 +186,10 @@ Modal.propTypes = {
|
|
|
176
186
|
visible: _propTypes.default.bool,
|
|
177
187
|
onBack: _propTypes.default.func,
|
|
178
188
|
onClose: _propTypes.default.func,
|
|
179
|
-
onOverflow: _propTypes.default.func
|
|
189
|
+
onOverflow: _propTypes.default.func,
|
|
190
|
+
aria: _propTypes.default.shape({
|
|
191
|
+
buttonBack: _propTypes.default.string,
|
|
192
|
+
buttonClose: _propTypes.default.string
|
|
193
|
+
})
|
|
180
194
|
};
|
|
181
195
|
//# sourceMappingURL=Modal.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Modal.js","names":["Modal","blur","children","displayName","fit","mobileBehavior","overflow","portal","preventDefault","title","visible","onBack","onClose","onOverflow","others","useDevice","isDesktop","isMobile","height","ref","useRef","useState","dataset","setDataset","useEffect","Event","publish","EVENT_VISIBLE","handleKeydown","event","key","handleClose","document","addEventListener","removeEventListener","body","miraiModal","undefined","handleOverflow","target","current","contains","defaultDirection","Theme","getDirection","DIRECTION_TYPE","LEFT","renderer","IS_JEST","jsx","ReactDOM","createPortal","testId","role","styles","style","container","modal","calcWidth","className","header","reverse","hideBack","hideClose","ICON","icon","button","CLOSE","EXPAND_MORE","React","Children","map","child","index","cloneElement","props","propTypes","PropTypes","bool","node","string","func"],"sources":["../../../src/components/Modal/Modal.jsx"],"sourcesContent":["import { Event } from '@mirai/data-sources';\nimport PropTypes from 'prop-types';\nimport React, { useEffect, useRef, useState } from 'react';\nimport ReactDOM from 'react-dom';\n\nimport { Button } from '../../components';\nimport { IS_JEST, styles } from '../../helpers';\nimport { useDevice } from '../../hooks';\nimport { Icon, ICON, Pressable, Text, View } from '../../primitives';\nimport { DIRECTION_TYPE, Theme } from '../../theme';\nimport { EVENT_VISIBLE } from './Modal.constants';\nimport style from './Modal.module.css';\n\nconst Modal = ({\n blur = false,\n children,\n displayName,\n fit = false,\n mobileBehavior = false,\n overflow = true,\n portal = false,\n preventDefault = true,\n title,\n visible,\n onBack,\n onClose,\n onOverflow,\n ...others\n}) => {\n const { isDesktop, isMobile, height } = useDevice();\n const ref = useRef();\n\n const [dataset, setDataset] = useState();\n\n useEffect(() => {\n if (!visible || !onClose) return;\n Event.publish(EVENT_VISIBLE, { visible, displayName });\n\n const handleKeydown = (event) => event.key === 'Escape' && handleClose();\n\n document.addEventListener('keydown', handleKeydown);\n return () => document.removeEventListener('keydown', handleKeydown);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [visible]);\n\n useEffect(() => {\n if (visible && !dataset) {\n setDataset(true);\n document.body.dataset.miraiModal = true;\n }\n\n return () => {\n if (visible && dataset) {\n setDataset(undefined);\n delete document.body.dataset.miraiModal;\n }\n };\n }, [dataset, visible]);\n\n const handleOverflow = (event) => {\n const { target } = event;\n\n if (onOverflow && !ref.current?.contains(target)) {\n Event.publish(EVENT_VISIBLE, { visible: false, displayName });\n onOverflow(event);\n }\n };\n\n const handleClose = (event) => {\n Event.publish(EVENT_VISIBLE, { visible: false, displayName });\n onClose(event);\n };\n\n const defaultDirection = Theme.getDirection() === DIRECTION_TYPE.LEFT;\n const renderer = IS_JEST || !portal ? (jsx) => jsx : ReactDOM.createPortal;\n const { testId } = others;\n\n return renderer(\n <Pressable\n preventDefault={preventDefault}\n role={others.role ? `${others.role}-overflow` : 'modal-overflow'}\n onPress={visible && overflow ? handleOverflow : undefined}\n className={styles(\n style.container,\n isDesktop && mobileBehavior && style.mobileBehavior,\n overflow && style.overflow,\n overflow && blur && style.blur,\n visible && style.visible,\n onOverflow && style.onOverflow,\n )}\n style={{ height }}\n testId={testId ? `${testId}-overflow` : undefined}\n >\n <View\n {...others}\n fit\n ref={ref}\n role={others.role || 'modal'}\n className={styles(style.modal, !fit && style.calcWidth, visible && style.visible, others.className)}\n >\n {(title || onBack || onClose) && (\n <View\n row\n className={styles(\n style.header,\n !defaultDirection && style.reverse,\n !onBack && style.hideBack,\n !onClose && style.hideClose,\n )}\n >\n {onBack && (\n <Button small squared transparent onPress={onBack} testId={testId ? `${testId}-button-back` : undefined}>\n <Icon value={ICON.LEFT} className={style.icon} />\n </Button>\n )}\n {title && (\n <Text headline={!isMobile} className={style.title}>\n {title}\n </Text>\n )}\n {onClose && (\n <Button\n small\n squared\n transparent\n onPress={handleClose}\n testId={testId ? `${testId}-button-close` : undefined}\n className={style.button}\n >\n <Icon value={isDesktop || title !== undefined ? ICON.CLOSE : ICON.EXPAND_MORE} className={style.icon} />\n </Button>\n )}\n </View>\n )}\n\n {React.Children.map(children, (child, index) =>\n !child || child === null\n ? null\n : React.cloneElement(child, { key: child.key || index, ...child.props, role: 'modal-content' }),\n )}\n </View>\n </Pressable>,\n document.body,\n );\n};\n\nModal.displayName = 'Component:Modal';\n\nModal.propTypes = {\n blur: PropTypes.bool,\n children: PropTypes.node,\n displayName: PropTypes.string,\n fit: PropTypes.bool,\n mobileBehavior: PropTypes.bool,\n overflow: PropTypes.bool,\n portal: PropTypes.bool,\n preventDefault: PropTypes.bool,\n title: PropTypes.string,\n visible: PropTypes.bool,\n onBack: PropTypes.func,\n onClose: PropTypes.func,\n onOverflow: PropTypes.func,\n};\n\nexport { Modal };\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Modal.js","names":["Modal","blur","children","displayName","fit","mobileBehavior","overflow","portal","preventDefault","title","visible","onBack","onClose","onOverflow","aria","buttonBack","ariaBack","buttonClose","ariaClose","others","useDevice","isDesktop","isMobile","height","ref","useRef","useState","dataset","setDataset","useEffect","Event","publish","EVENT_VISIBLE","handleKeydown","event","key","handleClose","document","addEventListener","removeEventListener","body","miraiModal","undefined","handleOverflow","target","current","contains","defaultDirection","Theme","getDirection","DIRECTION_TYPE","LEFT","renderer","IS_JEST","jsx","ReactDOM","createPortal","testId","role","tag","styles","style","container","modal","calcWidth","className","header","reverse","hideBack","hideClose","ICON","icon","button","CLOSE","EXPAND_MORE","React","Children","map","child","index","cloneElement","props","propTypes","PropTypes","bool","node","string","func","shape"],"sources":["../../../src/components/Modal/Modal.jsx"],"sourcesContent":["import { Event } from '@mirai/data-sources';\nimport PropTypes from 'prop-types';\nimport React, { useEffect, useRef, useState } from 'react';\nimport ReactDOM from 'react-dom';\n\nimport { Button } from '../../components';\nimport { IS_JEST, styles } from '../../helpers';\nimport { useDevice } from '../../hooks';\nimport { Icon, ICON, Pressable, Text, View } from '../../primitives';\nimport { DIRECTION_TYPE, Theme } from '../../theme';\nimport { EVENT_VISIBLE } from './Modal.constants';\nimport style from './Modal.module.css';\n\nconst Modal = ({\n blur = false,\n children,\n displayName,\n fit = false,\n mobileBehavior = false,\n overflow = true,\n portal = false,\n preventDefault = true,\n title,\n visible,\n onBack,\n onClose,\n onOverflow,\n aria: { buttonBack: ariaBack = 'Back', buttonClose: ariaClose = 'Close' } = {},\n ...others\n}) => {\n const { isDesktop, isMobile, height } = useDevice();\n const ref = useRef();\n\n const [dataset, setDataset] = useState();\n\n useEffect(() => {\n if (!visible || !onClose) return;\n Event.publish(EVENT_VISIBLE, { visible, displayName });\n\n const handleKeydown = (event) => event.key === 'Escape' && handleClose();\n\n document.addEventListener('keydown', handleKeydown);\n return () => document.removeEventListener('keydown', handleKeydown);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [visible]);\n\n useEffect(() => {\n if (visible && !dataset) {\n setDataset(true);\n document.body.dataset.miraiModal = true;\n }\n\n return () => {\n if (visible && dataset) {\n setDataset(undefined);\n delete document.body.dataset.miraiModal;\n }\n };\n }, [dataset, visible]);\n\n const handleOverflow = (event) => {\n const { target } = event;\n\n if (onOverflow && !ref.current?.contains(target)) {\n Event.publish(EVENT_VISIBLE, { visible: false, displayName });\n onOverflow(event);\n }\n };\n\n const handleClose = (event) => {\n Event.publish(EVENT_VISIBLE, { visible: false, displayName });\n onClose(event);\n };\n\n const defaultDirection = Theme.getDirection() === DIRECTION_TYPE.LEFT;\n const renderer = IS_JEST || !portal ? (jsx) => jsx : ReactDOM.createPortal;\n const { testId } = others;\n\n return renderer(\n <Pressable\n preventDefault={preventDefault}\n role={`${others.role || 'modal'}-overflow`}\n tag={`${others.tag || 'modal'}_overflow`}\n onPress={visible && overflow ? handleOverflow : undefined}\n className={styles(\n style.container,\n isDesktop && mobileBehavior && style.mobileBehavior,\n overflow && style.overflow,\n overflow && blur && style.blur,\n visible && style.visible,\n onOverflow && style.onOverflow,\n )}\n style={{ height }}\n testId={testId ? `${testId}-overflow` : undefined}\n >\n <View\n {...others}\n fit\n ref={ref}\n role={others.role || 'modal'}\n className={styles(style.modal, !fit && style.calcWidth, visible && style.visible, others.className)}\n aria-hidden={visible ? 'false' : 'true'}\n >\n {(title || onBack || onClose) && (\n <View\n row\n className={styles(\n style.header,\n !defaultDirection && style.reverse,\n !onBack && style.hideBack,\n !onClose && style.hideClose,\n )}\n >\n {onBack && (\n <Button\n small\n squared\n transparent\n onPress={onBack}\n aria-label={ariaBack}\n testId={testId ? `${testId}-button-back` : undefined}\n >\n <Icon value={ICON.LEFT} className={style.icon} />\n </Button>\n )}\n {title && (\n <Text headline={!isMobile} className={style.title}>\n {title}\n </Text>\n )}\n {onClose && (\n <Button\n small\n squared\n transparent\n onPress={handleClose}\n className={style.button}\n aria-label={ariaClose}\n testId={testId ? `${testId}-button-close` : undefined}\n >\n <Icon value={isDesktop || title !== undefined ? ICON.CLOSE : ICON.EXPAND_MORE} className={style.icon} />\n </Button>\n )}\n </View>\n )}\n\n {React.Children.map(children, (child, index) =>\n !child || child === null\n ? null\n : React.cloneElement(child, { key: child.key || index, ...child.props, role: 'modal-content' }),\n )}\n </View>\n </Pressable>,\n document.body,\n );\n};\n\nModal.displayName = 'Component:Modal';\n\nModal.propTypes = {\n blur: PropTypes.bool,\n children: PropTypes.node,\n displayName: PropTypes.string,\n fit: PropTypes.bool,\n mobileBehavior: PropTypes.bool,\n overflow: PropTypes.bool,\n portal: PropTypes.bool,\n preventDefault: PropTypes.bool,\n title: PropTypes.string,\n visible: PropTypes.bool,\n onBack: PropTypes.func,\n onClose: PropTypes.func,\n onOverflow: PropTypes.func,\n aria: PropTypes.shape({\n buttonBack: PropTypes.string,\n buttonClose: PropTypes.string,\n }),\n};\n\nexport { Modal };\n"],"mappings":"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"}
|