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

package/.turbo/turbo-build.log

@@ -1,8 +1,7 @@
-(node:11552) ExperimentalWarning: Import assertions are not a stable feature of the JavaScript language. Avoid relying on their current behavior and syntax as those might change in a future version of Node.js.
+(node:2884) ExperimentalWarning: Importing JSON modules is an experimental feature and might change at any time
 (Use `node --trace-warnings ...` to show where the warning was created)
-(node:11552) ExperimentalWarning: Importing JSON modules is an experimental feature and might change at any time
 
 src/index.ts → lib/index.js, es/index.js...
 (!) [plugin replace] @rollup/plugin-replace: 'preventAssignment' currently defaults to false. It is recommended to set this option to `true`, as the next major version will default this option to `true`.
-(!) [plugin node-resolve] preferring built-in module 'events' over local alternative at '/Volumes/Data/Projects/hero-design/node_modules/events/events.js', pass 'preferBuiltins: false' to disable this behavior or 'preferBuiltins: true' to disable this warning.or passing a function to 'preferBuiltins' to provide more fine-grained control over which built-in modules to prefer.
-created lib/index.js, es/index.js in 34s
+(!) [plugin node-resolve] preferring built-in module 'events' over local alternative at '/home/runner/work/hero-design/hero-design/node_modules/events/events.js', pass 'preferBuiltins: false' to disable this behavior or 'preferBuiltins: true' to disable this warning.or passing a function to 'preferBuiltins' to provide more fine-grained control over which built-in modules to prefer.
+created lib/index.js, es/index.js in 50.6s

package/CHANGELOG.md

@@ -1,10 +1,10 @@
 # @hero-design/rn
 
-## 8.77.1-alpha.0
+## 8.78.0
 
-### Patch Changes
+### Minor Changes
 
-- trigger release
+- [#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

@@ -36999,7 +36999,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 +37041,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 +37085,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 +37137,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

@@ -37026,7 +37026,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 +37068,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 +37112,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 +37164,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.10",
+  "version": "8.78.0",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",

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', () => {