@hero-design/rn 8.105.4-alpha.1 → 8.106.0

package/src/components/Checkbox/__tests__/__snapshots__/{StyledCheckbox.spec.tsx.snap → StyledDefaultCheckbox.spec.tsx.snap}

@@ -222,6 +222,7 @@ exports[`StyledWrapper renders correctly when disabled is false, readonly is fal
         "borderRadius": 8,
         "borderWidth": 1,
         "flexDirection": "row",
+        "gap": 8,
         "opacity": 1,
         "padding": 16,
       }
@@ -292,6 +293,7 @@ exports[`StyledWrapper renders correctly when disabled is false, readonly is tru
         "borderRadius": 8,
         "borderWidth": 1,
         "flexDirection": "row",
+        "gap": 8,
         "opacity": 1,
         "padding": 16,
       }
@@ -362,6 +364,7 @@ exports[`StyledWrapper renders correctly when disabled is true, readonly is fals
         "borderRadius": 8,
         "borderWidth": 1,
         "flexDirection": "row",
+        "gap": 8,
         "opacity": 1,
         "padding": 16,
       }
@@ -432,6 +435,7 @@ exports[`StyledWrapper renders correctly when disabled is true, readonly is true
         "borderRadius": 8,
         "borderWidth": 1,
         "flexDirection": "row",
+        "gap": 8,
         "opacity": 1,
         "padding": 16,
       }

package/src/components/Checkbox/__tests__/utils.spec.ts

@@ -0,0 +1,20 @@
+import { getThemeState } from '../utils';
+
+describe('getThemeState', () => {
+  it.each`
+    disabled | readonly | checked  | expected
+    ${false} | ${false} | ${false} | ${'default'}
+    ${false} | ${false} | ${true}  | ${'checked'}
+    ${false} | ${true}  | ${false} | ${'readonly'}
+    ${false} | ${true}  | ${true}  | ${'readonly'}
+    ${true}  | ${false} | ${false} | ${'disabled'}
+    ${true}  | ${false} | ${true}  | ${'disabled'}
+    ${true}  | ${true}  | ${false} | ${'disabled'}
+    ${true}  | ${true}  | ${true}  | ${'disabled'}
+  `(
+    `should return correctly if disabled is $disabled and readonly is $readonly`,
+    ({ disabled, readonly, checked, expected }) => {
+      expect(getThemeState({ disabled, readonly, checked })).toBe(expected);
+    }
+  );
+});

package/src/components/Checkbox/index.ts

@@ -0,0 +1,9 @@
+import DefaultCheckBox from './DefaultCheckBox';
+import type { DefaultCheckboxProps } from './DefaultCheckBox';
+import InlineCheckbox from './InlineCheckBox';
+
+export type { DefaultCheckboxProps as CheckboxProps };
+
+export default Object.assign(DefaultCheckBox, {
+  Inline: InlineCheckbox,
+});

package/src/components/Checkbox/utils.ts

@@ -0,0 +1,25 @@
+export type getStateType = {
+  disabled: boolean;
+  readonly: boolean;
+  checked?: boolean;
+};
+
+export const getThemeState = ({
+  disabled,
+  readonly,
+  checked,
+}: getStateType) => {
+  if (disabled) {
+    return 'disabled';
+  }
+
+  if (readonly) {
+    return 'readonly';
+  }
+
+  if (checked) {
+    return 'checked';
+  }
+
+  return 'default';
+};

package/src/components/DatePicker/__tests__/__snapshots__/DatePickerIOS.spec.tsx.snap

@@ -591,7 +591,7 @@ exports[`DatePickerIOS renders correctly 1`] = `
                             {
                               "alignItems": "center",
                               "backgroundColor": "transparent",
-                              "borderRadius": 4,
+                              "borderRadius": 999,
                               "borderWidth": 0,
                               "flexDirection": "row",
                               "height": 60,
@@ -1262,7 +1262,7 @@ exports[`DatePickerIOS renders correctly with custom locale 1`] = `
                             {
                               "alignItems": "center",
                               "backgroundColor": "transparent",
-                              "borderRadius": 4,
+                              "borderRadius": 999,
                               "borderWidth": 0,
                               "flexDirection": "row",
                               "height": 60,

package/src/components/Drawer/__tests__/__snapshots__/index.spec.tsx.snap

@@ -67,7 +67,7 @@ exports[`Drawer renders correctly in invisible state 1`] = `
       pointerEvents="box-none"
       style={
         {
-          "backgroundColor": "#ffffff",
+          "backgroundColor": "#000000",
           "bottom": 0,
           "left": 0,
           "opacity": 0,
@@ -76,6 +76,7 @@ exports[`Drawer renders correctly in invisible state 1`] = `
           "top": 0,
         }
       }
+      testID="undefined-backdrop"
     />
     <View
       collapsable={false}
@@ -133,7 +134,7 @@ exports[`Drawer renders correctly in visible state 1`] = `
   }
 >
   <View
-    enableShadow={false}
+    enableShadow={true}
     pointerEvents="box-none"
     style={
       [
@@ -144,7 +145,7 @@ exports[`Drawer renders correctly in visible state 1`] = `
           "overflow": "hidden",
           "position": "absolute",
           "right": 0,
-          "shadowColor": "transparent",
+          "shadowColor": "#001f23",
           "shadowOffset": {
             "height": 3,
             "width": 0,
@@ -191,26 +192,27 @@ exports[`Drawer renders correctly in visible state 1`] = `
       pointerEvents="auto"
       style={
         {
-          "backgroundColor": "#ffffff",
+          "backgroundColor": "#000000",
           "bottom": 0,
           "left": 0,
-          "opacity": 0.35,
+          "opacity": 0.56,
           "position": "absolute",
           "right": 0,
           "top": 0,
         }
       }
+      testID="undefined-backdrop"
     />
     <View
       collapsable={false}
-      enableShadow={false}
+      enableShadow={true}
       onLayout={[Function]}
       style={
         {
           "backgroundColor": "#ffffff",
           "borderBottomLeftRadius": 16,
           "borderBottomRightRadius": 16,
-          "elevation": undefined,
+          "elevation": 10,
           "overflow": "hidden",
           "transform": [
             {
@@ -315,7 +317,7 @@ exports[`Drawer renders correctly with no backdrop 1`] = `
       pointerEvents="box-none"
       style={
         {
-          "backgroundColor": "#ffffff",
+          "backgroundColor": "#000000",
           "bottom": 0,
           "left": 0,
           "opacity": 0,
@@ -324,6 +326,7 @@ exports[`Drawer renders correctly with no backdrop 1`] = `
           "top": 0,
         }
       }
+      testID="undefined-backdrop"
     />
     <View
       collapsable={false}

package/src/components/Drawer/__tests__/index.spec.tsx

@@ -26,12 +26,26 @@ describe('Drawer', () => {
   });
 
   it('renders correctly with no backdrop', () => {
-    const { toJSON } = renderWithTheme(
+    const { queryByTestId, toJSON } = renderWithTheme(
       <Drawer hasBackdrop={false} visible={false}>
         <Text>Drawer Content</Text>
       </Drawer>
     );
 
+    const backdrop = queryByTestId('drawer-backdrop');
+    expect(backdrop).toBeNull();
+
     expect(toJSON()).toMatchSnapshot();
   });
+
+  it('renders correctly with backdrop', () => {
+    const { getByTestId } = renderWithTheme(
+      <Drawer visible testID="drawer">
+        <Text>Drawer Content</Text>
+      </Drawer>
+    );
+
+    const backdrop = getByTestId('drawer-backdrop');
+    expect(backdrop).toBeVisible();
+  });
 });

package/src/components/Drawer/index.tsx

@@ -9,6 +9,8 @@ import {
   StyledDrawerContainer,
 } from './StyledDrawer';
 
+const BACKDROP_OPACITY = 0.56;
+
 interface DrawerProps {
   /**
    * Drawer's visibility.
@@ -42,7 +44,7 @@ const Drawer = ({
   const animatedValue = useRef(new Animated.Value(visible ? 1 : 0)).current;
   const [height, setHeight] = useState(Dimensions.get('window').height);
 
-  const enableShadow = visible && !hasBackdrop;
+  const enableShadow = visible && hasBackdrop;
 
   const interpolateTranslateY = animatedValue.interpolate({
     inputRange: [0, 1],
@@ -52,7 +54,7 @@ const Drawer = ({
   const interpolateBackdropOpacity = hasBackdrop
     ? animatedValue.interpolate({
         inputRange: [0, 1],
-        outputRange: [0, 0.35],
+        outputRange: [0, BACKDROP_OPACITY],
       })
     : 0;
 
@@ -75,6 +77,7 @@ const Drawer = ({
       pointerEvents="box-none"
     >
       <StyledBackdrop
+        testID={`${testID}-backdrop`}
         pointerEvents={visible ? 'auto' : 'box-none'}
         onPress={onDismiss}
         style={{ opacity: interpolateBackdropOpacity }}

package/src/components/Select/MultiSelect/__tests__/__snapshots__/index.spec.tsx.snap

@@ -1454,7 +1454,7 @@ exports[`rendering allows custom renderer 1`] = `
                     {
                       "alignItems": "center",
                       "backgroundColor": "transparent",
-                      "borderRadius": 4,
+                      "borderRadius": 999,
                       "borderWidth": 0,
                       "flexDirection": "row",
                       "height": 60,
@@ -3169,7 +3169,7 @@ exports[`rendering renders correct floating bottom sheet variant 1`] = `
                       {
                         "alignItems": "center",
                         "backgroundColor": "transparent",
-                        "borderRadius": 4,
+                        "borderRadius": 999,
                         "borderWidth": 0,
                         "flexDirection": "row",
                         "height": 60,
@@ -5192,7 +5192,7 @@ exports[`rendering renders correctly when bottom sheet is visible 1`] = `
                     {
                       "alignItems": "center",
                       "backgroundColor": "transparent",
-                      "borderRadius": 4,
+                      "borderRadius": 999,
                       "borderWidth": 0,
                       "flexDirection": "row",
                       "height": 60,
@@ -6815,7 +6815,7 @@ exports[`rendering renders correctly when receives sections 1`] = `
                     {
                       "alignItems": "center",
                       "backgroundColor": "transparent",
-                      "borderRadius": 4,
+                      "borderRadius": 999,
                       "borderWidth": 0,
                       "flexDirection": "row",
                       "height": 60,
@@ -8105,7 +8105,7 @@ exports[`rendering renders correctly when receives sections 2`] = `
                     {
                       "alignItems": "center",
                       "backgroundColor": "transparent",
-                      "borderRadius": 4,
+                      "borderRadius": 999,
                       "borderWidth": 0,
                       "flexDirection": "row",
                       "height": 60,

package/src/components/TimePicker/__tests__/__snapshots__/TimePickerIOS.spec.tsx.snap

@@ -883,7 +883,7 @@ exports[`TimePickerIOS renders correctly 1`] = `
                             {
                               "alignItems": "center",
                               "backgroundColor": "transparent",
-                              "borderRadius": 4,
+                              "borderRadius": 999,
                               "borderWidth": 0,
                               "flexDirection": "row",
                               "height": 60,

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

@@ -267,37 +267,63 @@ exports[`theme returns correct theme object 1`] = `
         "default": 2,
       },
       "colors": {
-        "danger": "#cb300a",
-        "defaultText": "#001f23",
-        "disabledBackground": "#bfc1c5",
-        "disabledBorder": "#bfc1c5",
-        "disabledText": "#bfc1c5",
+        "background": {
+          "filledDanger": "#f46363",
+          "filledInverted": "#ffffff",
+          "filledPrimary": "#401960",
+          "filledSecondary": "#f6f6f7",
+          "filledWhite": "#ffffff",
+        },
+        "border": {
+          "outlinedDanger": "#cb300a",
+          "outlinedInverted": "#ffffff",
+          "outlinedPrimary": "#401960",
+          "outlinedSecondary": "#e8e9ea",
+          "outlinedWhite": "#ffffff",
+        },
         "invertedText": "#ffffff",
         "pressedBackground": {
-          "filledDanger": "#fcebe7",
+          "filledDanger": "#f68282",
+          "filledInverted": "#ece8ef",
           "filledPrimary": "#33144d",
-          "filledSecondary": "#33144d",
+          "filledSecondary": "#dadbde",
           "filledWhite": "#ece8ef",
-          "outlineDanger": "#fcebe7",
-          "outlineWhite": "#33144d",
+          "outlinedDanger": "#fcebe7",
+          "outlinedInverted": "#33144d",
           "outlinedPrimary": "#ece8ef",
           "outlinedSecondary": "#ece8ef",
+          "outlinedWhite": "#33144d",
           "textDanger": "#fcebe7",
+          "textInverted": "#33144d",
           "textPrimary": "#ece8ef",
-          "textSecondary": "#f6f6f7",
+          "textSecondary": "#ece8ef",
           "textWhite": "#33144d",
         },
         "pressedText": {
-          "danger": "#f68282",
-          "primary": "#33144d",
-          "secondary": "#001f23",
-          "white": "#33144d",
+          "inlineTextDanger": "#f46363",
+          "inlineTextInverted": "#795e90",
+          "inlineTextPrimary": "#795e90",
+          "inlineTextSecondary": "#606065",
+          "inlineTextWhite": "#795e90",
+        },
+        "text": {
+          "filledDanger": "#ffffff",
+          "filledInverted": "#401960",
+          "filledPrimary": "#ffffff",
+          "filledSecondary": "#001f23",
+          "filledWhite": "#401960",
+          "outlinedDanger": "#cb300a",
+          "outlinedInverted": "#ffffff",
+          "outlinedPrimary": "#401960",
+          "outlinedSecondary": "#001f23",
+          "outlinedWhite": "#ffffff",
+          "textDanger": "#cb300a",
+          "textInverted": "#ffffff",
+          "textPrimary": "#401960",
+          "textSecondary": "#001f23",
+          "textWhite": "#ffffff",
         },
-        "primary": "#401960",
-        "secondary": "#4d6265",
-        "textLoadingBackground": "#ece8ef",
         "utilityBackground": "#ffffff",
-        "white": "#ffffff",
       },
       "fontSize": {
         "default": 18,
@@ -319,6 +345,7 @@ exports[`theme returns correct theme object 1`] = `
       },
       "radii": {
         "default": 32,
+        "rounded": 999,
         "text": 4,
         "utilityRadii": 8,
       },
@@ -339,6 +366,13 @@ exports[`theme returns correct theme object 1`] = `
           "iconPadding": 12,
           "textButtonPadding": 12,
         },
+        "medium": {
+          "buttonPadding": 16,
+          "buttonPaddingHorizontal": 16,
+          "buttonPaddingVertical": 8,
+          "iconPadding": 12,
+          "textButtonPadding": 32,
+        },
         "utilityPadding": 8,
       },
     },
@@ -475,10 +509,16 @@ exports[`theme returns correct theme object 1`] = `
       },
       "sizes": {
         "icon": 24,
+        "inlineCheckbox": {
+          "large": 16,
+          "medium": 14.67,
+        },
       },
       "space": {
         "iconDescriptionPadding": 12,
         "iconTop": 0,
+        "inlineCheckboxGap": 8,
+        "inlineCheckboxMargin": 8,
         "wrapperPadding": 16,
       },
     },
@@ -558,7 +598,7 @@ exports[`theme returns correct theme object 1`] = `
     },
     "drawer": {
       "colors": {
-        "backdrop": "#ffffff",
+        "backdrop": "#000000",
         "background": "#ffffff",
         "handler": "#001f23",
         "shadow": "#001f23",

package/src/theme/components/button.ts

@@ -28,6 +28,13 @@ const getButtonTheme = (theme: GlobalTheme) => {
       buttonPaddingHorizontal: theme.space.medium,
       iconPadding: theme.space.small,
     },
+    medium: {
+      buttonPaddingVertical: theme.space.small,
+      buttonPaddingHorizontal: theme.space.medium,
+      iconPadding: theme.space.smallMedium,
+      buttonPadding: theme.space.medium,
+      textButtonPadding: theme.space.xlarge,
+    },
     utilityPadding: theme.space.small,
   };
 
@@ -40,44 +47,70 @@ const getButtonTheme = (theme: GlobalTheme) => {
 
   const radii = {
     default: theme.radii['5xlarge'],
+    rounded: theme.radii.rounded,
     utilityRadii: theme.radii.medium,
     text: theme.radii.base,
   };
 
   const colors = {
-    primary: theme.colors.primary,
-    secondary: theme.colors.mutedOnDefaultGlobalSurface,
-    danger: theme.colors.onErrorSurface,
-    white: theme.colors.defaultGlobalSurface,
-    defaultText: theme.colors.onDefaultGlobalSurface,
-    disabledText: theme.colors.disabledOnDefaultGlobalSurface,
-    disabledBorder: theme.colors.disabledOnDefaultGlobalSurface,
-    disabledBackground: theme.colors.disabledOnDefaultGlobalSurface,
     invertedText: theme.colors.onDarkGlobalSurface,
     utilityBackground: theme.colors.defaultGlobalSurface,
-    textLoadingBackground: theme.colors.highlightedSurface,
+    background: {
+      filledPrimary: theme.colors.primary,
+      filledSecondary: theme.colors.neutralGlobalSurface,
+      filledDanger: theme.colors.error,
+      filledWhite: theme.colors.defaultGlobalSurface,
+      filledInverted: theme.colors.defaultGlobalSurface,
+    },
+    text: {
+      filledPrimary: theme.colors.onDarkGlobalSurface,
+      filledSecondary: theme.colors.onDefaultGlobalSurface,
+      filledDanger: theme.colors.white,
+      filledWhite: theme.colors.primary,
+      filledInverted: theme.colors.primary,
+      outlinedPrimary: theme.colors.primary,
+      outlinedSecondary: theme.colors.onDefaultGlobalSurface,
+      outlinedDanger: theme.colors.onErrorSurface,
+      outlinedWhite: theme.colors.onDarkGlobalSurface,
+      outlinedInverted: theme.colors.onDarkGlobalSurface,
+      textPrimary: theme.colors.primary,
+      textSecondary: theme.colors.onDefaultGlobalSurface,
+      textDanger: theme.colors.onErrorSurface,
+      textWhite: theme.colors.onDarkGlobalSurface,
+      textInverted: theme.colors.onDarkGlobalSurface,
+    },
+    border: {
+      outlinedPrimary: theme.colors.primary,
+      outlinedSecondary: theme.colors.secondaryOutline,
+      outlinedDanger: theme.colors.onErrorSurface,
+      outlinedWhite: theme.colors.defaultGlobalSurface,
+      outlinedInverted: theme.colors.defaultGlobalSurface,
+    },
     pressedBackground: {
       filledPrimary: theme.colors.pressedSurface,
-      filledSecondary: theme.colors.pressedSurface,
-      filledDanger: theme.colors.errorSurface,
+      filledSecondary: theme.colors.archivedSurface,
+      filledDanger: theme.colors.mutedError,
       filledWhite: theme.colors.highlightedSurface,
+      filledInverted: theme.colors.highlightedSurface,
       outlinedPrimary: theme.colors.highlightedSurface,
       outlinedSecondary: theme.colors.highlightedSurface,
-      outlineDanger: theme.colors.errorSurface,
-      outlineWhite: theme.colors.pressedSurface,
+      outlinedDanger: theme.colors.errorSurface,
+      outlinedWhite: theme.colors.pressedSurface,
+      outlinedInverted: theme.colors.pressedSurface,
       textPrimary: theme.colors.highlightedSurface,
-      textSecondary: theme.colors.neutralGlobalSurface,
+      textSecondary: theme.colors.highlightedSurface,
       textDanger: theme.colors.errorSurface,
       textWhite: theme.colors.pressedSurface,
+      textInverted: theme.colors.pressedSurface,
     },
     pressedText: {
-      primary: theme.colors.pressedSurface,
-      secondary: theme.colors.onDefaultGlobalSurface,
-      danger: theme.colors.mutedError,
-      white: theme.colors.pressedSurface,
+      inlineTextPrimary: theme.colors.secondary,
+      inlineTextSecondary: theme.colors.onArchivedSurface,
+      inlineTextDanger: theme.colors.error,
+      inlineTextWhite: theme.colors.secondary,
+      inlineTextInverted: theme.colors.secondary,
     },
   };
-
   const lineHeights = {
     titleOfTextVariant: {
       default: theme.lineHeights.medium,

package/src/theme/components/checkbox.ts

@@ -1,3 +1,4 @@
+import { scale } from '../../utils/scale';
 import type { GlobalTheme } from '../global';
 
 const getCheckboxTheme = (theme: GlobalTheme) => {
@@ -20,10 +21,16 @@ const getCheckboxTheme = (theme: GlobalTheme) => {
     iconTop: 0,
     wrapperPadding: theme.space.medium,
     iconDescriptionPadding: theme.space.smallMedium,
+    inlineCheckboxGap: theme.space.small,
+    inlineCheckboxMargin: theme.space.small,
   };
 
   const sizes = {
     icon: theme.sizes.large,
+    inlineCheckbox: {
+      medium: scale(14.67),
+      large: theme.sizes.medium,
+    },
   };
 
   const radii = {

package/src/theme/components/drawer.ts

@@ -4,7 +4,7 @@ const getDrawerTheme = (theme: GlobalTheme) => {
   const colors = {
     shadow: theme.colors.primaryOutline,
     background: theme.colors.defaultGlobalSurface,
-    backdrop: theme.colors.defaultGlobalSurface,
+    backdrop: theme.colors.black,
     handler: theme.colors.onDefaultGlobalSurface,
   };
 

package/src/utils/__tests__/helpers.spec.ts

@@ -1,4 +1,9 @@
-import { deepCompareValue, omit, pick } from '../helpers';
+import {
+  deepCompareValue,
+  omit,
+  pick,
+  transformKebabCaseToCamelCase,
+} from '../helpers';
 
 describe('pick', () => {
   it('works', () => {
@@ -78,3 +83,34 @@ describe('deepCompareValue', () => {
     expect(deepCompareValue(a, b)).toBe(expected);
   });
 });
+
+describe('transformKebabCaseToCamelCase', () => {
+  it.each`
+    input                     | expected
+    ${'kebab-case'}           | ${'kebabCase'}
+    ${'simple'}               | ${'simple'}
+    ${'multi-word-string'}    | ${'multiWordString'}
+    ${'very-long-train-case'} | ${'veryLongTrainCase'}
+    ${'single-word'}          | ${'singleWord'}
+    ${'data-attribute'}       | ${'dataAttribute'}
+    ${'user-id'}              | ${'userId'}
+    ${'component-name'}       | ${'componentName'}
+    ${'api-endpoint-url'}     | ${'apiEndpointUrl'}
+    ${'background-color'}     | ${'backgroundColor'}
+    ${'font-size'}            | ${'fontSize'}
+    ${'margin-top'}           | ${'marginTop'}
+    ${'border-radius'}        | ${'borderRadius'}
+    ${'text-decoration-line'} | ${'textDecorationLine'}
+    ${'a-b-c-d-e'}            | ${'aBCDE'}
+    ${'test-123-value'}       | ${'test123Value'}
+    ${'api-v2-endpoint'}      | ${'apiV2Endpoint'}
+    ${'item-1-name'}          | ${'item1Name'}
+    ${'version-2-api'}        | ${'version2Api'}
+    ${'api-v2-endpoint'}      | ${'apiV2Endpoint'}
+  `(
+    'should transform valid kebab-case "$input" to camelCase "$expected"',
+    ({ input, expected }) => {
+      expect(transformKebabCaseToCamelCase(input)).toBe(expected);
+    }
+  );
+});

package/src/utils/helpers.ts

@@ -111,3 +111,17 @@ export const useKeyboard = () => {
 
   return { isKeyboardVisible, keyboardHeight };
 };
+
+export type CamelCase<S extends string> = S extends `${infer F}-${infer R}`
+  ? R extends `${string}-${string}`
+    ? `${F}${Capitalize<CamelCase<R>>}`
+    : `${F}${Capitalize<R>}`
+  : never;
+
+export const transformKebabCaseToCamelCase = <T extends string>(
+  string: T
+): CamelCase<T> => {
+  return string.replace(/-([a-z0-9])/g, (_, char: string) =>
+    /[a-z]/.test(char) ? char.toUpperCase() : char
+  ) as CamelCase<T>;
+};