@hero-design/rn 8.103.1 → 8.103.2

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.
Files changed (20) hide show
  1. package/.turbo/turbo-build.log +2 -2
  2. package/CHANGELOG.md +6 -0
  3. package/es/index.js +42 -59
  4. package/lib/index.js +41 -58
  5. package/package.json +1 -1
  6. package/src/components/BottomSheet/StyledBottomSheet.tsx +4 -3
  7. package/src/components/BottomSheet/__tests__/__snapshots__/index.spec.tsx.snap +153 -170
  8. package/src/components/BottomSheet/index.tsx +42 -31
  9. package/src/components/DatePicker/__tests__/__snapshots__/DatePickerIOS.spec.tsx.snap +356 -390
  10. package/src/components/Select/MultiSelect/__tests__/__snapshots__/index.spec.tsx.snap +3552 -3616
  11. package/src/components/Select/SingleSelect/__tests__/__snapshots__/index.spec.tsx.snap +2469 -2517
  12. package/src/components/TimePicker/__tests__/__snapshots__/TimePickerIOS.spec.tsx.snap +177 -194
  13. package/src/theme/__tests__/__snapshots__/index.spec.ts.snap +0 -1
  14. package/src/theme/components/bottomSheet.ts +0 -1
  15. package/stats/8.103.1/rn-stats.html +1 -3
  16. package/stats/8.103.2/rn-stats.html +4842 -0
  17. package/types/components/BottomSheet/StyledBottomSheet.d.ts +1 -1
  18. package/types/theme/components/bottomSheet.d.ts +0 -1
  19. package/src/components/BottomSheet/ContentContainer.tsx +0 -34
  20. package/types/components/BottomSheet/ContentContainer.d.ts +0 -10
package/src/components/BottomSheet/__tests__/__snapshots__/index.spec.tsx.snap CHANGED
@@ -156,232 +156,215 @@ exports[`BottomSheet renders correctly with open state 1`] = `
156
156
  }
157
157
  }
158
158
  />
159
- <RNCSafeAreaView
160
- edges={
161
- {
162
- "bottom": "off",
163
- "left": "additive",
164
- "right": "additive",
165
- "top": "additive",
166
- }
167
- }
159
+ <RCTSafeAreaView
160
+ collapsable={false}
168
161
  style={
169
162
  {
163
+ "backgroundColor": "#ffffff",
164
+ "borderTopLeftRadius": 16,
165
+ "borderTopRightRadius": 16,
170
166
  "maxHeight": "94%",
167
+ "transform": [
168
+ {
169
+ "scaleY": 1,
170
+ },
171
+ {
172
+ "translateY": 1334,
173
+ },
174
+ ],
175
+ "width": "100%",
171
176
  }
172
177
  }
173
178
  >
174
179
  <View
175
- collapsable={false}
176
180
  style={
177
- {
178
- "backgroundColor": "#ffffff",
179
- "borderTopLeftRadius": 16,
180
- "borderTopRightRadius": 16,
181
- "maxHeight": "100%",
182
- "paddingBottom": 24,
183
- "transform": [
184
- {
185
- "scaleY": 1,
186
- },
187
- {
188
- "translateY": 1334,
189
- },
190
- ],
191
- "width": "100%",
192
- }
181
+ [
182
+ {
183
+ "flexDirection": "row",
184
+ "paddingHorizontal": 16,
185
+ "paddingVertical": 8,
186
+ },
187
+ undefined,
188
+ ]
193
189
  }
194
190
  >
195
191
  <View
196
192
  style={
197
193
  [
198
194
  {
199
- "flexDirection": "row",
200
- "paddingHorizontal": 16,
201
- "paddingVertical": 8,
195
+ "flex": 1,
196
+ "justifyContent": "center",
202
197
  },
203
198
  undefined,
204
199
  ]
205
200
  }
206
201
  >
207
- <View
202
+ <Text
203
+ allowFontScaling={false}
208
204
  style={
209
205
  [
210
206
  {
211
- "flex": 1,
212
- "justifyContent": "center",
207
+ "color": "#001f23",
208
+ "fontFamily": "BeVietnamPro-SemiBold",
209
+ "fontSize": 16,
210
+ "letterSpacing": 0.24,
211
+ "lineHeight": 24,
213
212
  },
214
213
  undefined,
215
214
  ]
216
215
  }
216
+ themeIntent="body"
217
+ themeTypeface="neutral"
218
+ themeVariant="regular-bold"
217
219
  >
218
- <Text
219
- allowFontScaling={false}
220
+ Title
221
+ </Text>
222
+ </View>
223
+ <View
224
+ style={
225
+ [
226
+ {
227
+ "alignItems": "flex-end",
228
+ "height": 48,
229
+ "justifyContent": "center",
230
+ "marginLeft": 12,
231
+ "width": 48,
232
+ },
233
+ undefined,
234
+ ]
235
+ }
236
+ >
237
+ <View
238
+ accessibilityState={
239
+ {
240
+ "busy": undefined,
241
+ "checked": undefined,
242
+ "disabled": undefined,
243
+ "expanded": undefined,
244
+ "selected": undefined,
245
+ }
246
+ }
247
+ accessibilityValue={
248
+ {
249
+ "max": undefined,
250
+ "min": undefined,
251
+ "now": undefined,
252
+ "text": undefined,
253
+ }
254
+ }
255
+ accessible={true}
256
+ collapsable={false}
257
+ focusable={true}
258
+ onClick={[Function]}
259
+ onResponderGrant={[Function]}
260
+ onResponderMove={[Function]}
261
+ onResponderRelease={[Function]}
262
+ onResponderTerminate={[Function]}
263
+ onResponderTerminationRequest={[Function]}
264
+ onStartShouldSetResponder={[Function]}
265
+ style={
266
+ {
267
+ "opacity": 1,
268
+ }
269
+ }
270
+ testID="bottom-sheet-close-icon"
271
+ >
272
+ <HeroIcon
273
+ name="cancel"
220
274
  style={
221
275
  [
222
276
  {
223
277
  "color": "#001f23",
224
- "fontFamily": "BeVietnamPro-SemiBold",
225
278
  "fontSize": 16,
226
- "letterSpacing": 0.24,
227
- "lineHeight": 24,
228
279
  },
229
280
  undefined,
230
281
  ]
231
282
  }
232
- themeIntent="body"
233
- themeTypeface="neutral"
234
- themeVariant="regular-bold"
235
- >
236
- Title
237
- </Text>
283
+ themeIntent="text"
284
+ themeSize="xsmall"
285
+ />
238
286
  </View>
287
+ </View>
288
+ </View>
289
+ <Text>
290
+ Content
291
+ </Text>
292
+ <View>
293
+ <View
294
+ style={
295
+ [
296
+ {
297
+ "alignItems": "center",
298
+ "flexDirection": "row",
299
+ "justifyContent": "flex-end",
300
+ "paddingHorizontal": 12,
301
+ "paddingVertical": 2,
302
+ },
303
+ undefined,
304
+ ]
305
+ }
306
+ >
239
307
  <View
240
- style={
241
- [
242
- {
243
- "alignItems": "flex-end",
244
- "height": 48,
245
- "justifyContent": "center",
246
- "marginLeft": 12,
247
- "width": 48,
248
- },
249
- undefined,
250
- ]
251
- }
252
- >
253
- <View
254
- accessibilityState={
255
- {
256
- "busy": undefined,
257
- "checked": undefined,
258
- "disabled": undefined,
259
- "expanded": undefined,
260
- "selected": undefined,
261
- }
262
- }
263
- accessibilityValue={
264
- {
265
- "max": undefined,
266
- "min": undefined,
267
- "now": undefined,
268
- "text": undefined,
269
- }
308
+ accessibilityRole="button"
309
+ accessibilityState={
310
+ {
311
+ "busy": undefined,
312
+ "checked": undefined,
313
+ "disabled": undefined,
314
+ "expanded": undefined,
315
+ "selected": undefined,
270
316
  }
271
- accessible={true}
272
- collapsable={false}
273
- focusable={true}
274
- onClick={[Function]}
275
- onResponderGrant={[Function]}
276
- onResponderMove={[Function]}
277
- onResponderRelease={[Function]}
278
- onResponderTerminate={[Function]}
279
- onResponderTerminationRequest={[Function]}
280
- onStartShouldSetResponder={[Function]}
281
- style={
282
- {
283
- "opacity": 1,
284
- }
317
+ }
318
+ accessibilityValue={
319
+ {
320
+ "max": undefined,
321
+ "min": undefined,
322
+ "now": undefined,
323
+ "text": undefined,
285
324
  }
286
- testID="bottom-sheet-close-icon"
287
- >
288
- <HeroIcon
289
- name="cancel"
290
- style={
291
- [
292
- {
293
- "color": "#001f23",
294
- "fontSize": 16,
295
- },
296
- undefined,
297
- ]
298
- }
299
- themeIntent="text"
300
- themeSize="xsmall"
301
- />
302
- </View>
303
- </View>
304
- </View>
305
- <Text>
306
- Content
307
- </Text>
308
- <View>
309
- <View
325
+ }
326
+ accessible={true}
327
+ collapsable={false}
328
+ focusable={false}
329
+ onClick={[Function]}
330
+ onResponderGrant={[Function]}
331
+ onResponderMove={[Function]}
332
+ onResponderRelease={[Function]}
333
+ onResponderTerminate={[Function]}
334
+ onResponderTerminationRequest={[Function]}
335
+ onStartShouldSetResponder={[Function]}
310
336
  style={
311
- [
312
- {
313
- "alignItems": "center",
314
- "flexDirection": "row",
315
- "justifyContent": "flex-end",
316
- "paddingHorizontal": 12,
317
- "paddingVertical": 2,
318
- },
319
- undefined,
320
- ]
337
+ {
338
+ "opacity": 1,
339
+ }
321
340
  }
322
341
  >
323
342
  <View
324
- accessibilityRole="button"
325
- accessibilityState={
326
- {
327
- "busy": undefined,
328
- "checked": undefined,
329
- "disabled": undefined,
330
- "expanded": undefined,
331
- "selected": undefined,
332
- }
333
- }
334
- accessibilityValue={
335
- {
336
- "max": undefined,
337
- "min": undefined,
338
- "now": undefined,
339
- "text": undefined,
340
- }
341
- }
342
- accessible={true}
343
- collapsable={false}
344
- focusable={false}
345
- onClick={[Function]}
346
- onResponderGrant={[Function]}
347
- onResponderMove={[Function]}
348
- onResponderRelease={[Function]}
349
- onResponderTerminate={[Function]}
350
- onResponderTerminationRequest={[Function]}
351
- onStartShouldSetResponder={[Function]}
352
343
  style={
353
- {
354
- "opacity": 1,
355
- }
344
+ [
345
+ {},
346
+ ]
356
347
  }
357
348
  >
358
- <View
349
+ <Text
359
350
  style={
360
351
  [
361
- {},
352
+ {
353
+ "color": "#007AFF",
354
+ "fontSize": 18,
355
+ "margin": 8,
356
+ "textAlign": "center",
357
+ },
362
358
  ]
363
359
  }
364
360
  >
365
- <Text
366
- style={
367
- [
368
- {
369
- "color": "#007AFF",
370
- "fontSize": 18,
371
- "margin": 8,
372
- "textAlign": "center",
373
- },
374
- ]
375
- }
376
- >
377
- Footer CTA
378
- </Text>
379
- </View>
361
+ Footer CTA
362
+ </Text>
380
363
  </View>
381
364
  </View>
382
365
  </View>
383
366
  </View>
384
- </RNCSafeAreaView>
367
+ </RCTSafeAreaView>
385
368
  </View>
386
369
  </View>
387
370
  </Modal>
package/src/components/BottomSheet/index.tsx CHANGED
@@ -10,12 +10,14 @@ import {
10
10
  Platform,
11
11
  } from 'react-native';
12
12
  import BottomSheetContext from './BottomSheetContext';
13
- import ContentContainer from './ContentContainer';
14
13
  import Footer from './Footer';
15
14
  import Header from './Header';
16
15
  import ScrollView from './ScrollView';
17
16
  import {
18
17
  StyledBackdrop,
18
+ StyledBottomSheet,
19
+ StyledFloatingBottomSheet,
20
+ StyledFloatingWrapper,
19
21
  StyledKeyboardAvoidingView,
20
22
  StyledWrapper,
21
23
  } from './StyledBottomSheet';
@@ -166,6 +168,12 @@ const BottomSheet = ({
166
168
  [setInternalShowDivider]
167
169
  );
168
170
 
171
+ const BottomSheetWrapperComponent =
172
+ variant === 'fixed' ? React.Fragment : StyledFloatingWrapper;
173
+
174
+ const BottomSheetComponent =
175
+ variant === 'fixed' ? StyledBottomSheet : StyledFloatingBottomSheet;
176
+
169
177
  return (
170
178
  <Modal
171
179
  visible={visible}
@@ -184,36 +192,39 @@ const BottomSheet = ({
184
192
  style={{ opacity: interpolateOpacity }}
185
193
  onPress={onRequestClose}
186
194
  />
187
- <ContentContainer
188
- variant={variant}
189
- style={[
190
- style,
191
- {
192
- transform: [
193
- { scaleY: height > 0 ? 1 : 0 },
194
- { translateY: interpolateY },
195
- ],
196
- },
197
- ]}
198
- >
199
- {header !== undefined ? (
200
- <Header
201
- variant={variant}
202
- content={header}
203
- showDivider={internalShowDivider}
204
- onRequestClose={onRequestClose}
205
- showCloseButton={showCloseButton}
206
- />
207
- ) : null}
208
-
209
- <BottomSheetContext.Provider value={BottomSheetContextValue}>
210
- {children}
211
- </BottomSheetContext.Provider>
212
-
213
- {footer ? (
214
- <Footer showDivider={showDivider}>{footer}</Footer>
215
- ) : null}
216
- </ContentContainer>
195
+ <BottomSheetWrapperComponent>
196
+ <BottomSheetComponent
197
+ style={[
198
+ style,
199
+ {
200
+ transform: [
201
+ { scaleY: height > 0 ? 1 : 0 },
202
+ {
203
+ translateY: interpolateY,
204
+ },
205
+ ],
206
+ },
207
+ ]}
208
+ >
209
+ {header !== undefined ? (
210
+ <Header
211
+ variant={variant}
212
+ content={header}
213
+ showDivider={internalShowDivider}
214
+ onRequestClose={onRequestClose}
215
+ showCloseButton={showCloseButton}
216
+ />
217
+ ) : null}
218
+
219
+ <BottomSheetContext.Provider value={BottomSheetContextValue}>
220
+ {children}
221
+ </BottomSheetContext.Provider>
222
+
223
+ {footer ? (
224
+ <Footer showDivider={showDivider}>{footer}</Footer>
225
+ ) : null}
226
+ </BottomSheetComponent>
227
+ </BottomSheetWrapperComponent>
217
228
  </StyledKeyboardAvoidingView>
218
229
  </StyledWrapper>
219
230
  </Modal>