pixel-priya 0.0.1 → 0.0.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "pixel-priya",
   "description": "Great for pixel-perfect, design-focused components in React",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "main": "lib/index.js",
   "module": "lib/index.esm.js",
   "types": "lib/index.d.ts",

package/src/components/Select/Select.stories.tsx

@@ -436,5 +436,49 @@ export const SelectWithToolTip: Story = {
     );
   },
 };
+export const ApiSearchSelect: Story = {
+  render: () => {
+    const optionsList = [
+      {
+        label: 'fire-flink-LIC4900-onPrem',
+        value: 'fire-flink-LIC4900-onPrem',
+      },
+      {
+        label: 'fire-flink-LIC3179',
+        value: 'fire-flink-LIC3179',
+      },
+      {
+        label: 'fire-flink-LIC4937',
+        value: 'fire-flink-LIC4937',
+      },
+      {
+        label: 'fire-flink-LIC4999',
+        value: 'fire-flink-LIC4999',
+      },
+    ];
+
+    const [selectedOption, setSelectedOption] = useState<Option>({
+      label: 'demo',
+      value: 'demo',
+    });
+    const handleChange = (option: Option) => {
+      setSelectedOption(option);
+    };
+    const search = (option: string) => {
+      console.log('option',option);
+    };
+
+    return (
+      <Select
+        label="Option"
+        optionsList={optionsList}
+        selectedOption={selectedOption}
+        onChange={handleChange}
+        apiSearch={true}
+        onApiSearch={search}
+      />
+    );
+  },
+};
 
 export default meta;

package/src/components/Select/Select.tsx

@@ -34,7 +34,7 @@ const Select: FC<SelectProps> = ({
   placeHolder = '',
   showToolTip = false,
   apiSearch = false,
-  onapiSearch =() => {},
+  onApiSearch =() => {},
 }) => {
   const selectWidth = typeof width === 'number' ? `${width}px` : width;
 
@@ -72,10 +72,10 @@ const Select: FC<SelectProps> = ({
   };
     
   const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
-    const { value } = event.target as HTMLInputElement;;
-    if (event.key === 'Enter' && !checkEmpty(value)) {
-      onapiSearch(value.trim());
-    } 
+    const { value } = event.target as HTMLInputElement;
+    if (event.key === 'Enter' && !checkEmpty(value) && apiSearch) {
+      onApiSearch(value.trim());
+    }
   };
   const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
     const { value } = event.target;
@@ -90,11 +90,11 @@ const Select: FC<SelectProps> = ({
       });
 
       setSelectOptionList(filteredOptions);
-      setSearchedOption({
-        ...searchedOption,
-        searchedText: value,
-      });
     }
+    setSearchedOption({
+      ...searchedOption,
+      searchedText: value,
+    });
   };
 
   const onSelectUpdatePosition = () => {

package/src/components/Select/types.ts

@@ -121,11 +121,11 @@ export interface SelectProps {
     /**
    * Callback function to be called when the search button is clicked or enter key is pressed
    */
-  onapiSearch?: (query: string) => void;
+  onApiSearch?: (query: string) => void;
    /**
    * Provide the boolean value if apiSearch is required or not
    */
-   apiSearch?: boolean
+  apiSearch?: boolean
 }
 
 export interface DropdownPosition {