@hero-design/rn 8.77.1-alpha.0 → 8.78.0-alpha.0

package/CHANGELOG.md

@@ -1,14 +1,10 @@
 # @hero-design/rn
 
-## 8.77.1-alpha.0
+## 8.78.0
 
-### Patch Changes
-
-- test release workflow
+### Minor Changes
 
-- Updated dependencies []:
-  - @hero-design/colors@8.45.2-alpha.0
-  - @hero-design/react-native-month-year-picker@8.42.11-alpha.0
+- [#3480](https://github.com/Thinkei/hero-design/pull/3480) [`f27e980c7e5eec77a09a0646fad7a5c990b2ad0c`](https://github.com/Thinkei/hero-design/commit/f27e980c7e5eec77a09a0646fad7a5c990b2ad0c) Thanks [@phucdph](https://github.com/phucdph)! - [Search.OneLine] Support clearable input
 
 ## 8.77.0
 

package/es/index.js

@@ -9737,8 +9737,10 @@ var BottomSheet = function BottomSheet(_ref) {
       useNativeDriver: true
     });
     animation.start(function () {
-      if (!open && canCallOnDismiss.current) {
+      if (!open) {
         setVisibility(false);
+      }
+      if (!open && canCallOnDismiss.current) {
         onDismiss === null || onDismiss === void 0 || onDismiss();
       }
       onAnimationEnd === null || onAnimationEnd === void 0 || onAnimationEnd();
@@ -36999,7 +37001,7 @@ var SearchTwoLine = function SearchTwoLine(props) {
   })));
 };
 
-var _excluded$2 = ["prefix", "suffix", "style", "allowFontScaling", "accessibilityLabelledBy", "editable", "maxLength", "value", "defaultValue", "placeholder", "disabled", "testID", "variant"];
+var _excluded$2 = ["prefix", "suffix", "style", "allowFontScaling", "accessibilityLabelledBy", "editable", "maxLength", "value", "defaultValue", "placeholder", "disabled", "testID", "variant", "clearable"];
 var getState = function getState(_ref) {
   var disabled = _ref.disabled,
     editable = _ref.editable,
@@ -37041,6 +37043,8 @@ var SearchOneLine = /*#__PURE__*/forwardRef(function (props, ref) {
     testID = props.testID,
     _props$variant = props.variant,
     variant = _props$variant === void 0 ? 'basic' : _props$variant,
+    _props$clearable = props.clearable,
+    clearable = _props$clearable === void 0 ? false : _props$clearable,
     nativeProps = _objectWithoutProperties(props, _excluded$2);
   var _React$useState = React__default.useState(false),
     _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -37083,6 +37087,21 @@ var SearchOneLine = /*#__PURE__*/forwardRef(function (props, ref) {
       }
     };
   }, [innerTextInput]);
+  var renderClearButton = function renderClearButton() {
+    return /*#__PURE__*/React__default.createElement(StyledAffixContainer, null, /*#__PURE__*/React__default.createElement(CompoundButton.Icon, {
+      onPress: function onPress() {
+        var _innerTextInput$curre6, _nativeProps$onChange;
+        (_innerTextInput$curre6 = innerTextInput.current) === null || _innerTextInput$curre6 === void 0 || _innerTextInput$curre6.clear();
+        (_nativeProps$onChange = nativeProps.onChangeText) === null || _nativeProps$onChange === void 0 || _nativeProps$onChange.call(nativeProps, '');
+      },
+      intent: "text",
+      testID: "input-clear-button",
+      icon: "circle-cancel",
+      size: "small",
+      disabled: state === 'disabled' || state === 'readonly'
+    }));
+  };
+  var shouldShowClearButton = clearable && (state === 'filled' || isFocused) && !isEmptyValue;
   return /*#__PURE__*/React__default.createElement(StyledContainer, {
     pointerEvents: state === 'disabled' || state === 'readonly' ? 'none' : 'auto',
     testID: testID,
@@ -37120,7 +37139,7 @@ var SearchOneLine = /*#__PURE__*/forwardRef(function (props, ref) {
     ref: function ref(rnTextInputRef) {
       innerTextInput.current = rnTextInputRef;
     }
-  }), !!suffix && renderSuffix({
+  }), shouldShowClearButton ? renderClearButton() : !!suffix && renderSuffix({
     suffix: suffix
   })));
 });

package/lib/index.js

@@ -9764,8 +9764,10 @@ var BottomSheet = function BottomSheet(_ref) {
       useNativeDriver: true
     });
     animation.start(function () {
-      if (!open && canCallOnDismiss.current) {
+      if (!open) {
         setVisibility(false);
+      }
+      if (!open && canCallOnDismiss.current) {
         onDismiss === null || onDismiss === void 0 || onDismiss();
       }
       onAnimationEnd === null || onAnimationEnd === void 0 || onAnimationEnd();
@@ -37026,7 +37028,7 @@ var SearchTwoLine = function SearchTwoLine(props) {
   })));
 };
 
-var _excluded$2 = ["prefix", "suffix", "style", "allowFontScaling", "accessibilityLabelledBy", "editable", "maxLength", "value", "defaultValue", "placeholder", "disabled", "testID", "variant"];
+var _excluded$2 = ["prefix", "suffix", "style", "allowFontScaling", "accessibilityLabelledBy", "editable", "maxLength", "value", "defaultValue", "placeholder", "disabled", "testID", "variant", "clearable"];
 var getState = function getState(_ref) {
   var disabled = _ref.disabled,
     editable = _ref.editable,
@@ -37068,6 +37070,8 @@ var SearchOneLine = /*#__PURE__*/React.forwardRef(function (props, ref) {
     testID = props.testID,
     _props$variant = props.variant,
     variant = _props$variant === void 0 ? 'basic' : _props$variant,
+    _props$clearable = props.clearable,
+    clearable = _props$clearable === void 0 ? false : _props$clearable,
     nativeProps = _objectWithoutProperties(props, _excluded$2);
   var _React$useState = React__namespace.default.useState(false),
     _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -37110,6 +37114,21 @@ var SearchOneLine = /*#__PURE__*/React.forwardRef(function (props, ref) {
       }
     };
   }, [innerTextInput]);
+  var renderClearButton = function renderClearButton() {
+    return /*#__PURE__*/React__namespace.default.createElement(StyledAffixContainer, null, /*#__PURE__*/React__namespace.default.createElement(CompoundButton.Icon, {
+      onPress: function onPress() {
+        var _innerTextInput$curre6, _nativeProps$onChange;
+        (_innerTextInput$curre6 = innerTextInput.current) === null || _innerTextInput$curre6 === void 0 || _innerTextInput$curre6.clear();
+        (_nativeProps$onChange = nativeProps.onChangeText) === null || _nativeProps$onChange === void 0 || _nativeProps$onChange.call(nativeProps, '');
+      },
+      intent: "text",
+      testID: "input-clear-button",
+      icon: "circle-cancel",
+      size: "small",
+      disabled: state === 'disabled' || state === 'readonly'
+    }));
+  };
+  var shouldShowClearButton = clearable && (state === 'filled' || isFocused) && !isEmptyValue;
   return /*#__PURE__*/React__namespace.default.createElement(StyledContainer, {
     pointerEvents: state === 'disabled' || state === 'readonly' ? 'none' : 'auto',
     testID: testID,
@@ -37147,7 +37166,7 @@ var SearchOneLine = /*#__PURE__*/React.forwardRef(function (props, ref) {
     ref: function ref(rnTextInputRef) {
       innerTextInput.current = rnTextInputRef;
     }
-  }), !!suffix && renderSuffix({
+  }), shouldShowClearButton ? renderClearButton() : !!suffix && renderSuffix({
     suffix: suffix
   })));
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.77.1-alpha.0",
+  "version": "8.78.0-alpha.0",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -22,13 +22,13 @@
     "@emotion/native": "^11.9.3",
     "@emotion/primitives-core": "11.0.0",
     "@emotion/react": "^11.9.3",
-    "@hero-design/colors": "8.45.2-alpha.0",
+    "@hero-design/colors": "8.45.1",
     "date-fns": "^2.16.1",
     "hero-editor": "^1.9.21",
     "nanoid": "^4.0.2"
   },
   "peerDependencies": {
-    "@hero-design/react-native-month-year-picker": "^8.42.11-alpha.0",
+    "@hero-design/react-native-month-year-picker": "^8.42.10",
     "@react-native-community/datetimepicker": "^3.5.2 || ^7.6.1",
     "@react-native-community/slider": "^4.5.1",
     "react": "18.2.0",
@@ -50,8 +50,8 @@
     "@eslint/compat": "^1.1.1",
     "@eslint/eslintrc": "^3.1.0",
     "@eslint/js": "^9.8.0",
-    "@hero-design/eslint-plugin": "9.2.1-alpha.0",
-    "@hero-design/react-native-month-year-picker": "^8.42.11-alpha.0",
+    "@hero-design/eslint-plugin": "9.2.0",
+    "@hero-design/react-native-month-year-picker": "^8.42.10",
     "@react-native-community/datetimepicker": "7.6.1",
     "@react-native-community/slider": "^4.5.1",
     "@rollup/plugin-babel": "^6.0.4",
@@ -70,12 +70,12 @@
     "babel-preset-expo": "^11.0.15",
     "core-js": "^3.33.0",
     "eslint": "^8.56.0",
-    "eslint-config-hd": "8.42.5-alpha.0",
+    "eslint-config-hd": "8.42.4",
     "eslint-plugin-import": "^2.27.5",
     "jest": "^29.2.1",
     "jest-environment-jsdom": "^29.2.1",
     "jest-junit": "^16.0.0",
-    "prettier-config-hd": "8.42.5-alpha.0",
+    "prettier-config-hd": "8.42.4",
     "react": "18.2.0",
     "react-dom": "^18.2.0",
     "react-native": "^0.74.5",
@@ -93,5 +93,6 @@
     "ts-jest": "^29.1.1",
     "typescript": "4.8.4"
   },
-  "prettier": "prettier-config-hd"
+  "prettier": "prettier-config-hd",
+  "react-native": "src/index.ts"
 }

package/src/components/BottomSheet/index.tsx

@@ -138,8 +138,11 @@ const BottomSheet = ({
     });
 
     animation.start(() => {
-      if (!open && canCallOnDismiss.current) {
+      if (!open) {
         setVisibility(false);
+      }
+
+      if (!open && canCallOnDismiss.current) {
         onDismiss?.();
       }
 

package/src/components/Search/SearchOneLine.tsx

@@ -8,12 +8,14 @@ import type {
 } from 'react-native';
 import {
   State,
+  StyledAffixContainer,
   StyledContainer,
   StyledInput,
   StyledInputContainer,
 } from './StyledSearch';
 import { IconName } from '../Icon';
 import { renderPrefix, renderSuffix } from './utils';
+import Button from '../Button';
 
 export type SearchOneLineHandles = Pick<
   RNTextInput,
@@ -71,6 +73,10 @@ interface SearchOneLineProps extends NativeTextInputProps {
    * @default 'basic'
    */
   variant?: 'basic' | 'reversed';
+  /**
+   * Clearable input.
+   */
+  clearable?: boolean;
 }
 
 export const getState = ({
@@ -121,6 +127,7 @@ const SearchOneLine = forwardRef<SearchOneLineHandles, SearchOneLineProps>(
       disabled = false,
       testID,
       variant = 'basic',
+      clearable = false,
       ...nativeProps
     } = props;
 
@@ -155,6 +162,27 @@ const SearchOneLine = forwardRef<SearchOneLineHandles, SearchOneLineProps>(
       [innerTextInput]
     );
 
+    const renderClearButton = () => {
+      return (
+        <StyledAffixContainer>
+          <Button.Icon
+            onPress={() => {
+              innerTextInput.current?.clear();
+              nativeProps.onChangeText?.('');
+            }}
+            intent="text"
+            testID="input-clear-button"
+            icon="circle-cancel"
+            size="small"
+            disabled={state === 'disabled' || state === 'readonly'}
+          />
+        </StyledAffixContainer>
+      );
+    };
+
+    const shouldShowClearButton =
+      clearable && (state === 'filled' || isFocused) && !isEmptyValue;
+
     return (
       <StyledContainer
         pointerEvents={
@@ -192,7 +220,9 @@ const SearchOneLine = forwardRef<SearchOneLineHandles, SearchOneLineProps>(
               innerTextInput.current = rnTextInputRef;
             },
           })}
-          {!!suffix && renderSuffix({ suffix })}
+          {shouldShowClearButton
+            ? renderClearButton()
+            : !!suffix && renderSuffix({ suffix })}
         </StyledInputContainer>
       </StyledContainer>
     );

package/src/components/Search/__tests__/SearchOneLine.spec.tsx

@@ -54,6 +54,12 @@ describe('SearchOneLine', () => {
           'input-suffix'
         )
       ).toHaveLength(1);
+
+      expect(
+        within(getByTestId('idle-search-text-input')).queryAllByTestId(
+          'input-clear-button'
+        )
+      ).toHaveLength(0);
     });
 
     it('renders reserved variant correctly', () => {
@@ -104,77 +110,130 @@ describe('SearchOneLine', () => {
         within(getByTestId('idle-search-input')).getByText('Suffix')
       ).toBeTruthy();
     });
+  });
 
-    describe('handler', () => {
-      it('onChangeText work correctly', () => {
-        const onChangeText = jest.fn();
-        const { getByTestId } = renderWithTheme(
-          <SearchOneLine
-            prefix="search-outlined"
-            testID="idle-search-input"
-            onChangeText={onChangeText}
-          />
-        );
-        const input = within(getByTestId('idle-search-input')).getByTestId(
-          'text-input'
-        );
-        fireEvent.changeText(input, 'Park Chae Young');
-        expect(onChangeText).toHaveBeenCalledWith('Park Chae Young');
-      });
+  describe('handler', () => {
+    it('onChangeText work correctly', () => {
+      const onChangeText = jest.fn();
+      const { getByTestId } = renderWithTheme(
+        <SearchOneLine
+          prefix="search-outlined"
+          testID="idle-search-input"
+          onChangeText={onChangeText}
+        />
+      );
+      const input = within(getByTestId('idle-search-input')).getByTestId(
+        'text-input'
+      );
+      fireEvent.changeText(input, 'Park Chae Young');
+      expect(onChangeText).toHaveBeenCalledWith('Park Chae Young');
+    });
 
-      it('onFocus work correctly', () => {
-        const onFocus = jest.fn();
-        const { getByTestId } = renderWithTheme(
-          <SearchOneLine
-            prefix="search-outlined"
-            testID="idle-search-input"
-            onFocus={onFocus}
-          />
-        );
-        const input = within(getByTestId('idle-search-input')).getByTestId(
-          'text-input'
-        );
-        fireEvent(input, 'focus');
-        expect(onFocus).toHaveBeenCalled();
-      });
+    it('onFocus work correctly', () => {
+      const onFocus = jest.fn();
+      const { getByTestId } = renderWithTheme(
+        <SearchOneLine
+          prefix="search-outlined"
+          testID="idle-search-input"
+          onFocus={onFocus}
+        />
+      );
+      const input = within(getByTestId('idle-search-input')).getByTestId(
+        'text-input'
+      );
+      fireEvent(input, 'focus');
+      expect(onFocus).toHaveBeenCalled();
+    });
 
-      it('onBlur work correctly', () => {
-        const onBlur = jest.fn();
-        const { getByTestId } = renderWithTheme(
-          <SearchOneLine
-            prefix="search-outlined"
-            testID="idle-search-input"
-            onBlur={onBlur}
-          />
-        );
-        const input = within(getByTestId('idle-search-input')).getByTestId(
-          'text-input'
-        );
-        fireEvent(input, 'blur');
-        expect(onBlur).toHaveBeenCalled();
-      });
+    it('onBlur work correctly', () => {
+      const onBlur = jest.fn();
+      const { getByTestId } = renderWithTheme(
+        <SearchOneLine
+          prefix="search-outlined"
+          testID="idle-search-input"
+          onBlur={onBlur}
+        />
+      );
+      const input = within(getByTestId('idle-search-input')).getByTestId(
+        'text-input'
+      );
+      fireEvent(input, 'blur');
+      expect(onBlur).toHaveBeenCalled();
+    });
+
+    it('clearable input work correctly', () => {
+      const onChangeText = jest.fn();
+      const { getByTestId } = renderWithTheme(
+        <SearchOneLine
+          prefix="search-outlined"
+          testID="idle-search-input"
+          onChangeText={onChangeText}
+          clearable
+          value="On the ground"
+        />
+      );
+      const clearButton = within(getByTestId('idle-search-input')).getByTestId(
+        'input-clear-button'
+      );
+      fireEvent.press(clearButton);
+      expect(onChangeText).toHaveBeenCalledWith('');
     });
   });
+});
 
-  describe('filled', () => {
-    it('renders correctly', () => {
-      const { toJSON, queryAllByTestId, queryAllByDisplayValue } =
-        renderWithTheme(
-          <SearchOneLine
-            prefix="search-outlined"
-            suffix="adjustment"
-            testID="idle-search-text-input"
-            placeholder="Search"
-            value="Jennie Kim"
-          />
-        );
+describe('filled', () => {
+  it('renders correctly', () => {
+    const { toJSON, queryAllByTestId, queryAllByDisplayValue } =
+      renderWithTheme(
+        <SearchOneLine
+          prefix="search-outlined"
+          suffix="adjustment"
+          testID="idle-search-text-input"
+          placeholder="Search"
+          value="Jennie Kim"
+        />
+      );
 
-      expect(toJSON()).toMatchSnapshot();
-      expect(queryAllByDisplayValue('Jennie Kim')).toHaveLength(1);
-      expect(queryAllByTestId('input-prefix')).toHaveLength(1);
-      expect(queryAllByTestId('input-suffix')).toHaveLength(1);
-      expect(queryAllByTestId('text-input')).toHaveLength(1);
-    });
+    expect(toJSON()).toMatchSnapshot();
+    expect(queryAllByDisplayValue('Jennie Kim')).toHaveLength(1);
+    expect(queryAllByTestId('input-prefix')).toHaveLength(1);
+    expect(queryAllByTestId('input-suffix')).toHaveLength(1);
+    expect(queryAllByTestId('text-input')).toHaveLength(1);
+  });
+
+  it('renders clearable input correctly', () => {
+    const { getByTestId, toJSON } = renderWithTheme(
+      <SearchOneLine
+        prefix="search-outlined"
+        clearable
+        testID="idle-search-text-input"
+        placeholder="Search"
+        value="Eyes wide open"
+      />
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+    expect(getByTestId('idle-search-text-input')).toBeTruthy();
+    expect(
+      within(getByTestId('idle-search-text-input')).queryAllByTestId(
+        'text-input'
+      )
+    ).toHaveLength(1);
+    expect(
+      within(getByTestId('idle-search-text-input')).queryAllByTestId(
+        'input-prefix'
+      )
+    ).toHaveLength(1);
+    expect(
+      within(getByTestId('idle-search-text-input')).queryAllByTestId(
+        'input-suffix'
+      )
+    ).toHaveLength(0);
+    expect(
+      within(getByTestId('idle-search-text-input')).queryAllByTestId(
+        'input-clear-button'
+      )
+    ).toHaveLength(1);
   });
 
   describe('readonly', () => {