@hero-design/rn 8.34.2 → 8.35.0-alpha.0

package/src/components/Switch/SelectorSwitch/StyledSelectorSwitch.tsx

@@ -1,5 +1,5 @@
 import styled from '@emotion/native';
-import { View, Animated, StyleSheet } from 'react-native';
+import { View, Animated } from 'react-native';
 
 const AnimatedView = Animated.createAnimatedComponent(View);
 
@@ -9,8 +9,7 @@ export const StyledWrapper = styled(View)(({ theme }) => ({
   height: theme.__hd__.switch.sizes.selector.height,
   borderRadius: theme.__hd__.switch.radii.selector.default,
   backgroundColor: theme.__hd__.switch.colors.selector.background,
-  paddingHorizontal:
-    theme.__hd__.switch.spaces.selector.wrapperHorizontalPadding,
+  padding: theme.__hd__.switch.spaces.selector.wrapperPadding,
   position: 'relative',
 }));
 
@@ -30,7 +29,11 @@ export const StyledIconWrapper = styled(AnimatedView)(({ theme }) => ({
 }));
 
 export const StyledKnot = styled(AnimatedView)(({ theme }) => ({
-  ...StyleSheet.absoluteFillObject,
   borderRadius: theme.__hd__.switch.radii.selector.default,
   backgroundColor: theme.__hd__.switch.colors.selector.textBackground,
+  position: 'absolute',
+  top: theme.__hd__.switch.spaces.selector.wrapperPadding,
+  bottom: theme.__hd__.switch.spaces.selector.wrapperPadding,
+  left: theme.__hd__.switch.spaces.selector.wrapperPadding,
+  right: theme.__hd__.switch.spaces.selector.wrapperPadding,
 }));

package/src/components/Switch/SelectorSwitch/__tests__/__snapshots__/index.spec.tsx.snap

@@ -15,11 +15,11 @@ exports[`SelectorSwitch renders correctly 1`] = `
   style={
     Array [
       Object {
-        "backgroundColor": "#ffffff",
+        "backgroundColor": "#f6f6f7",
         "borderRadius": 999,
         "flexDirection": "row",
-        "height": 40,
-        "paddingHorizontal": 4,
+        "height": 56,
+        "padding": 4,
         "position": "relative",
         "width": "100%",
       },
@@ -132,13 +132,13 @@ exports[`SelectorSwitch renders correctly 1`] = `
     collapsable={false}
     style={
       Object {
-        "backgroundColor": "#ccd2d3",
+        "backgroundColor": "#ffffff",
         "borderRadius": 999,
-        "bottom": 0,
-        "left": 0,
+        "bottom": 4,
+        "left": 4,
         "position": "absolute",
-        "right": 0,
-        "top": 0,
+        "right": 4,
+        "top": 4,
         "transform": Array [
           Object {
             "translateX": 0,

package/src/components/Switch/SelectorSwitch/index.tsx

@@ -7,13 +7,14 @@ import React, {
 } from 'react';
 import {
   Animated,
-  Easing,
-  LayoutChangeEvent,
   Platform,
   StyleProp,
   TouchableWithoutFeedback,
   ViewStyle,
+  Easing,
+  LayoutChangeEvent,
 } from 'react-native';
+import { useTheme } from '@emotion/react';
 import type { IconName } from '../../Icon';
 import Option from './Option';
 import { StyledKnot, StyledWrapper } from './StyledSelectorSwitch';
@@ -60,13 +61,17 @@ const SelectorSwitch = <T,>({
   style,
   testID,
 }: SelectorSwitchProps<T>): ReactElement => {
+  const theme = useTheme();
   const [knotWidth, setKnotWidth] = useState(0);
   const [containerWidth, setContainerWidth] = useState(0);
   const animatedValue = useRef(new Animated.Value(0)).current;
 
   const translateX = animatedValue.interpolate({
     inputRange: [0, 1],
-    outputRange: [0, Math.floor(containerWidth - knotWidth)],
+    outputRange: [
+      0,
+      Math.floor(containerWidth - knotWidth - theme.space.small),
+    ],
   });
 
   useEffect(() => {
@@ -76,11 +81,14 @@ const SelectorSwitch = <T,>({
       easing: Easing.inOut(Easing.ease),
       useNativeDriver: Platform.OS === 'ios' || Platform.OS === 'android',
     }).start();
-  }, [value, animatedValue, options]);
+  }, [value]);
 
-  const onContainerLayout = useCallback((e: LayoutChangeEvent) => {
-    setContainerWidth(e.nativeEvent.layout.width);
-  }, []);
+  const onContainerLayout = useCallback(
+    (e: LayoutChangeEvent) => {
+      setContainerWidth(e.nativeEvent.layout.width);
+    },
+    [options]
+  );
 
   const onItemLayout = useCallback(
     (e: LayoutChangeEvent, optionValue: T) => {

package/src/components/Tabs/__tests__/__snapshots__/ScrollableTabs.spec.tsx.snap

@@ -238,7 +238,7 @@ exports[`Tabs.Scroll lazy not render lazy screen: xxx 1`] = `
                   style={
                     Object {
                       "backgroundColor": "#ccd2d3",
-                      "borderRadius": 16,
+                      "borderRadius": 8,
                       "flex": 1,
                       "transform": Array [
                         Object {
@@ -339,7 +339,7 @@ exports[`Tabs.Scroll lazy not render lazy screen: xxx 1`] = `
                   style={
                     Object {
                       "backgroundColor": undefined,
-                      "borderRadius": 16,
+                      "borderRadius": 8,
                       "flex": 1,
                       "transform": Array [
                         Object {
@@ -434,7 +434,7 @@ exports[`Tabs.Scroll lazy not render lazy screen: xxx 1`] = `
                   style={
                     Object {
                       "backgroundColor": undefined,
-                      "borderRadius": 16,
+                      "borderRadius": 8,
                       "flex": 1,
                       "transform": Array [
                         Object {
@@ -556,7 +556,7 @@ exports[`Tabs.Scroll lazy not render lazy screen: xxx 1`] = `
                   style={
                     Object {
                       "backgroundColor": undefined,
-                      "borderRadius": 16,
+                      "borderRadius": 8,
                       "flex": 1,
                       "transform": Array [
                         Object {
@@ -1057,7 +1057,7 @@ exports[`Tabs.Scroll renders correctly 1`] = `
                   style={
                     Object {
                       "backgroundColor": "#ccd2d3",
-                      "borderRadius": 16,
+                      "borderRadius": 8,
                       "flex": 1,
                       "transform": Array [
                         Object {
@@ -1158,7 +1158,7 @@ exports[`Tabs.Scroll renders correctly 1`] = `
                   style={
                     Object {
                       "backgroundColor": undefined,
-                      "borderRadius": 16,
+                      "borderRadius": 8,
                       "flex": 1,
                       "transform": Array [
                         Object {
@@ -1253,7 +1253,7 @@ exports[`Tabs.Scroll renders correctly 1`] = `
                   style={
                     Object {
                       "backgroundColor": undefined,
-                      "borderRadius": 16,
+                      "borderRadius": 8,
                       "flex": 1,
                       "transform": Array [
                         Object {
@@ -1375,7 +1375,7 @@ exports[`Tabs.Scroll renders correctly 1`] = `
                   style={
                     Object {
                       "backgroundColor": undefined,
-                      "borderRadius": 16,
+                      "borderRadius": 8,
                       "flex": 1,
                       "transform": Array [
                         Object {
@@ -1876,7 +1876,7 @@ exports[`useIsFocused renders correctly 1`] = `
                   style={
                     Object {
                       "backgroundColor": "#ccd2d3",
-                      "borderRadius": 16,
+                      "borderRadius": 8,
                       "flex": 1,
                       "transform": Array [
                         Object {
@@ -1977,7 +1977,7 @@ exports[`useIsFocused renders correctly 1`] = `
                   style={
                     Object {
                       "backgroundColor": undefined,
-                      "borderRadius": 16,
+                      "borderRadius": 8,
                       "flex": 1,
                       "transform": Array [
                         Object {
@@ -2072,7 +2072,7 @@ exports[`useIsFocused renders correctly 1`] = `
                   style={
                     Object {
                       "backgroundColor": undefined,
-                      "borderRadius": 16,
+                      "borderRadius": 8,
                       "flex": 1,
                       "transform": Array [
                         Object {
@@ -2194,7 +2194,7 @@ exports[`useIsFocused renders correctly 1`] = `
                   style={
                     Object {
                       "backgroundColor": undefined,
-                      "borderRadius": 16,
+                      "borderRadius": 8,
                       "flex": 1,
                       "transform": Array [
                         Object {

package/src/components/Tabs/__tests__/__snapshots__/ScrollableTabsHeader.spec.tsx.snap

@@ -150,7 +150,7 @@ exports[`ScrollableTabsHeader renders correctly 1`] = `
                 style={
                   Object {
                     "backgroundColor": "#ccd2d3",
-                    "borderRadius": 16,
+                    "borderRadius": 8,
                     "flex": 1,
                     "transform": Array [
                       Object {
@@ -251,7 +251,7 @@ exports[`ScrollableTabsHeader renders correctly 1`] = `
                 style={
                   Object {
                     "backgroundColor": undefined,
-                    "borderRadius": 16,
+                    "borderRadius": 8,
                     "flex": 1,
                     "transform": Array [
                       Object {
@@ -346,7 +346,7 @@ exports[`ScrollableTabsHeader renders correctly 1`] = `
                 style={
                   Object {
                     "backgroundColor": undefined,
-                    "borderRadius": 16,
+                    "borderRadius": 8,
                     "flex": 1,
                     "transform": Array [
                       Object {
@@ -468,7 +468,7 @@ exports[`ScrollableTabsHeader renders correctly 1`] = `
                 style={
                   Object {
                     "backgroundColor": undefined,
-                    "borderRadius": 16,
+                    "borderRadius": 8,
                     "flex": 1,
                     "transform": Array [
                       Object {

package/src/theme/__tests__/__snapshots__/index.spec.ts.snap

@@ -676,8 +676,8 @@ Object {
         "default": 999,
       },
       "sizes": Object {
-        "barHeight": 8,
-        "circleCompletenessHeight": 8,
+        "barHeight": 4,
+        "circleCompletenessHeight": 4,
         "circleDiameter": 72,
       },
     },
@@ -857,8 +857,8 @@ Object {
           "unchecked": "#808f91",
         },
         "selector": Object {
-          "background": "#ffffff",
-          "textBackground": "#ccd2d3",
+          "background": "#f6f6f7",
+          "textBackground": "#ffffff",
         },
         "thumb": "#ffffff",
       },
@@ -871,7 +871,7 @@ Object {
       "sizes": Object {
         "height": 24,
         "selector": Object {
-          "height": 40,
+          "height": 56,
         },
         "thumb": 16,
         "width": 48,
@@ -880,7 +880,7 @@ Object {
         "paddingHorizontal": 4,
         "selector": Object {
           "iconPadding": 16,
-          "wrapperHorizontalPadding": 4,
+          "wrapperPadding": 4,
         },
       },
     },
@@ -897,7 +897,7 @@ Object {
         "text": "#001f23",
       },
       "radii": Object {
-        "outline": 16,
+        "outline": 8,
       },
       "sizes": Object {
         "indicator": 2,

package/src/theme/components/progress.ts

@@ -41,8 +41,8 @@ const getProgressTheme = (theme: GlobalTheme) => {
 
   const sizes = {
     circleDiameter: theme.sizes['6xlarge'],
-    circleCompletenessHeight: theme.sizes.small,
-    barHeight: theme.sizes.small,
+    circleCompletenessHeight: theme.sizes.xsmall,
+    barHeight: theme.sizes.xsmall,
   };
 
   const radii = {

package/src/theme/components/switch.ts

@@ -10,8 +10,8 @@ const getSwitchTheme = (theme: GlobalTheme) => {
     },
     thumb: theme.colors.onSecondary,
     selector: {
-      background: theme.colors.defaultGlobalSurface,
-      textBackground: theme.colors.decorativePrimarySurface,
+      background: theme.colors.neutralGlobalSurface,
+      textBackground: theme.colors.decorativePrimary,
     },
   };
 
@@ -20,7 +20,7 @@ const getSwitchTheme = (theme: GlobalTheme) => {
     width: theme.sizes.xxxlarge,
     height: theme.sizes.large,
     selector: {
-      height: theme.sizes.xxlarge,
+      height: theme.sizes.xxxxlarge,
     },
   };
 
@@ -28,7 +28,7 @@ const getSwitchTheme = (theme: GlobalTheme) => {
     paddingHorizontal: theme.space.xsmall,
     selector: {
       iconPadding: theme.space.medium,
-      wrapperHorizontalPadding: theme.space.xsmall,
+      wrapperPadding: theme.space.xsmall,
     },
   };
 

package/src/theme/components/tabs.ts

@@ -20,7 +20,7 @@ const getTabsTheme = (theme: GlobalTheme) => {
   };
 
   const radii = {
-    outline: theme.radii.xlarge,
+    outline: theme.radii.medium,
   };
 
   const borderWidths = {

package/types/components/FAB/ActionGroup/FABModal.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+export interface ModalProps {
+    /**
+     * Content of the modal.
+     */
+    children: React.ReactElement;
+    /**
+     * Visibility of the modal
+     */
+    visible?: boolean;
+    /**
+     * Callback when the modal is shown.
+     */
+    onShow?: () => void;
+    /**
+     * TestID of the modal.
+     */
+    testID?: string;
+}
+declare const fABModal: ({ children, onShow, testID, visible }: ModalProps) => null;
+export default fABModal;

package/types/components/FAB/ActionGroup/FABModalContentWrapper.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+type ModalContentWrapperProps = {
+    children: React.ReactElement;
+    visible?: boolean;
+    testID?: string;
+    style?: StyleProp<ViewStyle>;
+    animated?: boolean;
+    pointerEvents: 'box-none' | 'none' | 'box-only' | 'auto';
+};
+export type ModalContentWrapperHandler = {
+    hide: (callback?: () => void) => void;
+};
+declare const FABModalContentWrapper: {
+    ({ children, testID, pointerEvents, }: ModalContentWrapperProps): JSX.Element;
+    displayName: string;
+};
+export default FABModalContentWrapper;

package/types/components/FAB/ActionGroup/FABProvider.d.ts

@@ -0,0 +1,5 @@
+import { ReactNode } from 'react';
+declare const ModalProvider: ({ children }: {
+    children: ReactNode;
+}) => JSX.Element;
+export default ModalProvider;

package/types/components/FAB/ActionGroup/ModalPresenter/ModalPresenter.d.ts

@@ -0,0 +1,34 @@
+import React from 'react';
+import { ViewProps } from 'react-native';
+export type ModalPresenterHandles = {
+    animatedOut: (completion?: () => void) => void;
+};
+export type FABModalDismissFunc = (onDismiss?: () => void) => void;
+export type FABModalUpdateFunc = (content: React.ReactNode) => void;
+/**
+ * Modal handler is returned by `showModal` function.
+ */
+export type FABModalHandler = {
+    /**
+     * Same `dismiss` function as in `ModalContentProps`.
+     */
+    dismiss: FABModalDismissFunc;
+    /**
+     * Same `update` function as in `ModalContentProps`.
+     */
+    update: FABModalUpdateFunc;
+};
+declare const FABModalPresenter: React.ForwardRefExoticComponent<ViewProps & React.RefAttributes<ModalPresenterHandles>>;
+/**
+ * Present a modal on screen immediately.
+ *
+ * The new presented modal will be on top of existing modals if there are any.
+ *
+ * @param Content A component to be presented as a modal on screen.
+ * This component will be centered horizontally and vertically on screen with
+ * a semitransparent black overlay underneath.
+ * @param contentProps Props for this modal component.
+ * @returns A `ModalHandler` you can use to dismiss the modal.
+ */
+export declare const showFABModal: (content: React.ReactNode) => FABModalHandler;
+export default FABModalPresenter;

package/types/components/FAB/ActionGroup/ModalPresenter/index.d.ts

@@ -0,0 +1,3 @@
+import { FABModalDismissFunc, FABModalHandler, showFABModal, ModalPresenterHandles } from './ModalPresenter';
+export type { FABModalDismissFunc as ModalDismissFunc, FABModalHandler as ModalHandler, ModalPresenterHandles, };
+export { showFABModal };