@hero-design/rn 8.68.0-alpha.1 → 8.68.0

package/src/components/List/__tests__/__snapshots__/StyledBasicListItem.spec.tsx.snap

@@ -198,7 +198,7 @@ exports[`StyledListItemContainer renders correctly themeSelected true themeDisab
       [
         {
           "alignItems": "center",
-          "backgroundColor": "#F1E9FB",
+          "backgroundColor": "#ece8ef",
           "borderRadius": 4,
           "flexDirection": "row",
           "opacity": 1,
@@ -282,7 +282,7 @@ exports[`StyledListItemContainer renders correctly themeSelected true themeDisab
       [
         {
           "alignItems": "center",
-          "backgroundColor": "#F1E9FB",
+          "backgroundColor": "#ece8ef",
           "borderRadius": 4,
           "flexDirection": "row",
           "opacity": 0.38,

package/src/components/List/__tests__/__snapshots__/StyledListItem.spec.tsx.snap

@@ -428,7 +428,7 @@ exports[`ListItemContainer renders correctly themeSelected true themeVariant car
       [
         {
           "alignItems": "center",
-          "backgroundColor": "#F1E9FB",
+          "backgroundColor": "#ece8ef",
           "borderRadius": 8,
           "elevation": 3,
           "flexDirection": "row",
@@ -518,7 +518,7 @@ exports[`ListItemContainer renders correctly themeSelected true themeVariant ful
     style={
       [
         {
-          "backgroundColor": "#F1E9FB",
+          "backgroundColor": "#ece8ef",
           "borderRadius": 8,
           "flexDirection": "row",
           "padding": 16,

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

@@ -28,7 +28,7 @@ exports[`RefreshControl renders correctly 1`] = `
       collapsable={false}
       style={
         {
-          "backgroundColor": "#7622d7",
+          "backgroundColor": "#401960",
           "borderRadius": 999,
           "height": 8,
           "marginHorizontal": 8,
@@ -47,7 +47,7 @@ exports[`RefreshControl renders correctly 1`] = `
       collapsable={false}
       style={
         {
-          "backgroundColor": "#7622d7",
+          "backgroundColor": "#401960",
           "borderRadius": 999,
           "height": 8,
           "marginHorizontal": 8,
@@ -66,7 +66,7 @@ exports[`RefreshControl renders correctly 1`] = `
       collapsable={false}
       style={
         {
-          "backgroundColor": "#7622d7",
+          "backgroundColor": "#401960",
           "borderRadius": 999,
           "height": 8,
           "marginHorizontal": 8,

package/src/components/Progress/__tests__/__snapshots__/index.spec.js.snap

@@ -30,7 +30,7 @@ exports[`Progress.Bar renders correctly 1`] = `
       style={
         {
           "alignSelf": "stretch",
-          "backgroundColor": "#7622d7",
+          "backgroundColor": "#401960",
           "borderBottomRightRadius": 999,
           "borderTopRightRadius": 999,
           "flex": 1,
@@ -491,7 +491,7 @@ exports[`Progress.Circle renders correctly 1`] = `
             style={
               [
                 {
-                  "borderColor": "#7622d7",
+                  "borderColor": "#401960",
                   "borderRadius": 999,
                   "borderWidth": 8,
                   "height": 72,
@@ -585,7 +585,7 @@ exports[`Progress.Circle renders correctly 1`] = `
             style={
               [
                 {
-                  "borderColor": "#7622d7",
+                  "borderColor": "#401960",
                   "borderRadius": 999,
                   "borderWidth": 8,
                   "height": 72,
@@ -655,7 +655,7 @@ exports[`Progress.Circle renders correctly 1`] = `
         style={
           [
             {
-              "backgroundColor": "#7622d7",
+              "backgroundColor": "#401960",
               "borderRadius": 999,
               "height": 8,
               "left": 32,
@@ -691,7 +691,7 @@ exports[`Progress.Circle renders correctly 1`] = `
           style={
             [
               {
-                "backgroundColor": "#7622d7",
+                "backgroundColor": "#401960",
                 "borderRadius": 999,
                 "height": 8,
                 "left": 32,

package/src/components/Radio/__tests__/__snapshots__/Radio.spec.tsx.snap

@@ -34,14 +34,14 @@ exports[`rendering renders correctly when checked with inactiveIntent=dark 1`] =
     style={
       [
         {
-          "backgroundColor": "#F1E9FB",
+          "backgroundColor": "#ece8ef",
           "borderRadius": 8,
           "flexDirection": "row",
           "padding": 16,
         },
         [
           {
-            "backgroundColor": "#F1E9FB",
+            "backgroundColor": "#ece8ef",
           },
           undefined,
         ],
@@ -114,7 +114,7 @@ exports[`rendering renders correctly when checked with inactiveIntent=dark 1`] =
               [
                 {
                   "alignItems": "center",
-                  "borderColor": "#7622d7",
+                  "borderColor": "#401960",
                   "borderRadius": 999,
                   "borderWidth": 2,
                   "height": 20,
@@ -129,7 +129,7 @@ exports[`rendering renders correctly when checked with inactiveIntent=dark 1`] =
               style={
                 [
                   {
-                    "backgroundColor": "#7622d7",
+                    "backgroundColor": "#401960",
                     "borderRadius": 999,
                     "height": 10,
                     "width": 10,
@@ -201,14 +201,14 @@ exports[`rendering renders correctly when checked with inactiveIntent=light 1`]
     style={
       [
         {
-          "backgroundColor": "#F1E9FB",
+          "backgroundColor": "#ece8ef",
           "borderRadius": 8,
           "flexDirection": "row",
           "padding": 16,
         },
         [
           {
-            "backgroundColor": "#F1E9FB",
+            "backgroundColor": "#ece8ef",
           },
           undefined,
         ],
@@ -281,7 +281,7 @@ exports[`rendering renders correctly when checked with inactiveIntent=light 1`]
               [
                 {
                   "alignItems": "center",
-                  "borderColor": "#7622d7",
+                  "borderColor": "#401960",
                   "borderRadius": 999,
                   "borderWidth": 2,
                   "height": 20,
@@ -296,7 +296,7 @@ exports[`rendering renders correctly when checked with inactiveIntent=light 1`]
               style={
                 [
                   {
-                    "backgroundColor": "#7622d7",
+                    "backgroundColor": "#401960",
                     "borderRadius": 999,
                     "height": 10,
                     "width": 10,
@@ -448,7 +448,7 @@ exports[`rendering renders correctly when not checked with inactiveIntent=dark 1
               [
                 {
                   "alignItems": "center",
-                  "borderColor": "#7622d7",
+                  "borderColor": "#401960",
                   "borderRadius": 999,
                   "borderWidth": 2,
                   "height": 20,
@@ -600,7 +600,7 @@ exports[`rendering renders correctly when not checked with inactiveIntent=light
               [
                 {
                   "alignItems": "center",
-                  "borderColor": "#7622d7",
+                  "borderColor": "#401960",
                   "borderRadius": 999,
                   "borderWidth": 2,
                   "height": 20,

package/src/components/Radio/__tests__/__snapshots__/RadioGroup.spec.tsx.snap

@@ -115,7 +115,7 @@ exports[`rendering renders correctly with inactiveIntent=dark 1`] = `
                 [
                   {
                     "alignItems": "center",
-                    "borderColor": "#7622d7",
+                    "borderColor": "#401960",
                     "borderRadius": 999,
                     "borderWidth": 2,
                     "height": 20,
@@ -247,7 +247,7 @@ exports[`rendering renders correctly with inactiveIntent=dark 1`] = `
                 [
                   {
                     "alignItems": "center",
-                    "borderColor": "#7622d7",
+                    "borderColor": "#401960",
                     "borderRadius": 999,
                     "borderWidth": 2,
                     "height": 20,
@@ -299,14 +299,14 @@ exports[`rendering renders correctly with inactiveIntent=dark 1`] = `
       style={
         [
           {
-            "backgroundColor": "#F1E9FB",
+            "backgroundColor": "#ece8ef",
             "borderRadius": 8,
             "flexDirection": "row",
             "padding": 16,
           },
           [
             {
-              "backgroundColor": "#F1E9FB",
+              "backgroundColor": "#ece8ef",
             },
             undefined,
           ],
@@ -379,7 +379,7 @@ exports[`rendering renders correctly with inactiveIntent=dark 1`] = `
                 [
                   {
                     "alignItems": "center",
-                    "borderColor": "#7622d7",
+                    "borderColor": "#401960",
                     "borderRadius": 999,
                     "borderWidth": 2,
                     "height": 20,
@@ -394,7 +394,7 @@ exports[`rendering renders correctly with inactiveIntent=dark 1`] = `
                 style={
                   [
                     {
-                      "backgroundColor": "#7622d7",
+                      "backgroundColor": "#401960",
                       "borderRadius": 999,
                       "height": 10,
                       "width": 10,
@@ -548,7 +548,7 @@ exports[`rendering renders correctly with inactiveIntent=light 1`] = `
                 [
                   {
                     "alignItems": "center",
-                    "borderColor": "#7622d7",
+                    "borderColor": "#401960",
                     "borderRadius": 999,
                     "borderWidth": 2,
                     "height": 20,
@@ -680,7 +680,7 @@ exports[`rendering renders correctly with inactiveIntent=light 1`] = `
                 [
                   {
                     "alignItems": "center",
-                    "borderColor": "#7622d7",
+                    "borderColor": "#401960",
                     "borderRadius": 999,
                     "borderWidth": 2,
                     "height": 20,
@@ -732,14 +732,14 @@ exports[`rendering renders correctly with inactiveIntent=light 1`] = `
       style={
         [
           {
-            "backgroundColor": "#F1E9FB",
+            "backgroundColor": "#ece8ef",
             "borderRadius": 8,
             "flexDirection": "row",
             "padding": 16,
           },
           [
             {
-              "backgroundColor": "#F1E9FB",
+              "backgroundColor": "#ece8ef",
             },
             undefined,
           ],
@@ -812,7 +812,7 @@ exports[`rendering renders correctly with inactiveIntent=light 1`] = `
                 [
                   {
                     "alignItems": "center",
-                    "borderColor": "#7622d7",
+                    "borderColor": "#401960",
                     "borderRadius": 999,
                     "borderWidth": 2,
                     "height": 20,
@@ -827,7 +827,7 @@ exports[`rendering renders correctly with inactiveIntent=light 1`] = `
                 style={
                   [
                     {
-                      "backgroundColor": "#7622d7",
+                      "backgroundColor": "#401960",
                       "borderRadius": 999,
                       "height": 10,
                       "width": 10,
@@ -1000,7 +1000,7 @@ exports[`rendering renders correctly with subtext 1`] = `
                 [
                   {
                     "alignItems": "center",
-                    "borderColor": "#7622d7",
+                    "borderColor": "#401960",
                     "borderRadius": 999,
                     "borderWidth": 2,
                     "height": 20,
@@ -1151,7 +1151,7 @@ exports[`rendering renders correctly with subtext 1`] = `
                 [
                   {
                     "alignItems": "center",
-                    "borderColor": "#7622d7",
+                    "borderColor": "#401960",
                     "borderRadius": 999,
                     "borderWidth": 2,
                     "height": 20,

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

@@ -67,7 +67,7 @@ exports[`Rate renders correctly 1`] = `
           style={
             [
               {
-                "color": "#7622d7",
+                "color": "#401960",
                 "fontSize": 24,
               },
               undefined,
@@ -124,7 +124,7 @@ exports[`Rate renders correctly 1`] = `
           style={
             [
               {
-                "color": "#7622d7",
+                "color": "#401960",
                 "fontSize": 24,
               },
               undefined,
@@ -186,7 +186,7 @@ exports[`Rate renders correctly 1`] = `
           style={
             [
               {
-                "color": "#7622d7",
+                "color": "#401960",
                 "fontSize": 24,
               },
               undefined,
@@ -243,7 +243,7 @@ exports[`Rate renders correctly 1`] = `
           style={
             [
               {
-                "color": "#7622d7",
+                "color": "#401960",
                 "fontSize": 24,
               },
               undefined,
@@ -300,7 +300,7 @@ exports[`Rate renders correctly 1`] = `
           style={
             [
               {
-                "color": "#7622d7",
+                "color": "#401960",
                 "fontSize": 24,
               },
               undefined,
@@ -402,7 +402,7 @@ exports[`Rate renders correctly it is readonly 1`] = `
           style={
             [
               {
-                "color": "#7622d7",
+                "color": "#401960",
                 "fontSize": 24,
               },
               undefined,
@@ -459,7 +459,7 @@ exports[`Rate renders correctly it is readonly 1`] = `
           style={
             [
               {
-                "color": "#7622d7",
+                "color": "#401960",
                 "fontSize": 24,
               },
               undefined,
@@ -521,7 +521,7 @@ exports[`Rate renders correctly it is readonly 1`] = `
           style={
             [
               {
-                "color": "#7622d7",
+                "color": "#401960",
                 "fontSize": 24,
               },
               undefined,
@@ -578,7 +578,7 @@ exports[`Rate renders correctly it is readonly 1`] = `
           style={
             [
               {
-                "color": "#7622d7",
+                "color": "#401960",
                 "fontSize": 24,
               },
               undefined,
@@ -635,7 +635,7 @@ exports[`Rate renders correctly it is readonly 1`] = `
           style={
             [
               {
-                "color": "#7622d7",
+                "color": "#401960",
                 "fontSize": 24,
               },
               undefined,

package/src/components/Search/SearchOneLine.tsx

@@ -0,0 +1,196 @@
+import React, { forwardRef } from 'react';
+import type {
+  TextInputProps as NativeTextInputProps,
+  TextInput as RNTextInput,
+  StyleProp,
+  ViewStyle,
+  TextStyle,
+} from 'react-native';
+import {
+  State,
+  StyledContainer,
+  StyledInput,
+  StyledInputContainer,
+} from './StyledSearch';
+import { IconName } from '../Icon';
+import { renderPrefix, renderSuffix } from './utils';
+
+export type SearchOneLineHandles = Pick<
+  RNTextInput,
+  'focus' | 'clear' | 'blur' | 'isFocused' | 'setNativeProps'
+>;
+
+interface SearchOneLineProps extends NativeTextInputProps {
+  /**
+   * Name of Icon or ReactElement to render on the left side of the input, before the user's cursor.
+   */
+  prefix?: IconName | React.ReactElement;
+  /**
+   * Name of Icon or ReactElement to render on the right side of the input.
+   */
+  suffix?: IconName | React.ReactElement;
+  /**
+   * Additional wrapper style.
+   */
+  style?: StyleProp<ViewStyle>;
+  /**
+   * Input text style.
+   */
+  textStyle?: StyleProp<TextStyle>;
+  /**
+   * Testing id of the component.
+   */
+  testID?: string;
+  /**
+   * Accessibility label for the input (Android).
+   */
+  accessibilityLabelledBy?: string;
+  /**
+   *  Placeholder text to display.
+   * */
+  placeholder?: string;
+  /**
+   * Whether the input is editable.
+   * */
+  editable?: boolean;
+  /**
+   * Whether the input is disabled.
+   */
+  disabled?: boolean;
+  /**
+   * The max length of the input.
+   * If the max length is set, the input will display the current length and the max length.
+   * */
+  maxLength?: number;
+  /**
+   * Whether to hide the character count.
+   * */
+  renderInputValue?: (inputProps: NativeTextInputProps) => React.ReactNode;
+}
+
+export const getState = ({
+  disabled,
+  editable,
+  isEmptyValue,
+}: {
+  disabled?: boolean;
+  editable?: boolean;
+  isFocused?: boolean;
+  isEmptyValue?: boolean;
+}): State => {
+  if (disabled) {
+    return 'disabled';
+  }
+  if (!editable) {
+    return 'readonly';
+  }
+  if (!isEmptyValue) {
+    return 'filled';
+  }
+  return 'default';
+};
+
+const renderInput = ({
+  nativeInputProps,
+  ref,
+}: {
+  nativeInputProps: NativeTextInputProps;
+  ref?: React.Ref<RNTextInput>;
+}) => {
+  return <StyledInput {...nativeInputProps} ref={ref} />;
+};
+
+const SearchOneLine = forwardRef<SearchOneLineHandles, SearchOneLineProps>(
+  (props, ref) => {
+    const {
+      prefix = 'search-outlined',
+      suffix,
+      style,
+      allowFontScaling,
+      accessibilityLabelledBy,
+      editable = true,
+      maxLength,
+      value,
+      defaultValue,
+      placeholder,
+      disabled = false,
+      testID,
+      ...nativeProps
+    } = props;
+
+    const [isFocused, setIsFocused] = React.useState(false);
+
+    const displayText = (value !== undefined ? value : defaultValue) ?? '';
+    const isEmptyValue = displayText.length === 0;
+
+    const state = getState({
+      disabled,
+      editable,
+      isFocused,
+      isEmptyValue,
+    });
+
+    const innerTextInput = React.useRef<RNTextInput | undefined | null>();
+
+    React.useImperativeHandle(
+      ref,
+      () => ({
+        // we don't expose this method, it's for testing https://medium.com/developer-rants/how-to-test-useref-without-mocking-useref-699165f4994e
+        getNativeTextInputRef: () => innerTextInput.current,
+        setNativeProps: (args: NativeTextInputProps) =>
+          innerTextInput.current?.setNativeProps(args),
+        focus: () => {
+          innerTextInput.current?.focus();
+        },
+        blur: () => innerTextInput.current?.blur(),
+        clear: () => innerTextInput.current?.clear(),
+        isFocused: () => innerTextInput.current?.isFocused() || false,
+      }),
+      [innerTextInput]
+    );
+
+    return (
+      <StyledContainer
+        pointerEvents={
+          state === 'disabled' || state === 'readonly' ? 'none' : 'auto'
+        }
+        testID={testID}
+        style={style}
+      >
+        <StyledInputContainer themeFocused={isFocused}>
+          {renderPrefix({ prefix })}
+          {renderInput({
+            nativeInputProps: {
+              testID: 'text-input',
+              accessibilityState: {
+                disabled: state === 'disabled' || state === 'readonly',
+              },
+              accessibilityLabelledBy,
+              allowFontScaling,
+              ...nativeProps,
+              onFocus: (event) => {
+                setIsFocused(true);
+                nativeProps.onFocus?.(event);
+              },
+              onBlur: (event) => {
+                setIsFocused(false);
+                nativeProps.onBlur?.(event);
+              },
+              editable,
+              maxLength,
+              value,
+              defaultValue,
+              placeholder,
+            },
+            ref: (rnTextInputRef) => {
+              innerTextInput.current = rnTextInputRef;
+            },
+          })}
+          {!!suffix && renderSuffix({ suffix })}
+        </StyledInputContainer>
+      </StyledContainer>
+    );
+  }
+);
+
+export default SearchOneLine;

package/src/components/Search/SearchSuffixIcon.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+import { IconName } from '../Icon';
+import { renderSuffix } from './utils';
+import { StyledBadge, StyledSuffixContainer } from './StyledSearch';
+import { BadgeProps } from '../Badge';
+
+interface SearchSuffixIconProps {
+  /**
+   * Name of Icon or ReactElement to render on the right side of the input.
+   */
+  suffix?: IconName | React.ReactElement;
+  /**
+   * Additional wrapper style.
+   */
+  style?: StyleProp<ViewStyle>;
+  /**
+   * Testing id of the component.
+   */
+  testID?: string;
+  /**
+   * Badge props to be render on the suffix.
+   */
+  badge?: Omit<BadgeProps, 'size'>;
+}
+
+const SearchSuffixIcon = (props: SearchSuffixIconProps) => {
+  const { suffix, testID, style, badge } = props;
+  return (
+    <StyledSuffixContainer testID={testID} style={style}>
+      {!!badge && <StyledBadge intent="primary" {...badge} size="small" />}
+      {renderSuffix({ suffix })}
+    </StyledSuffixContainer>
+  );
+};
+
+export default SearchSuffixIcon;