@ttoss/components 1.29.31 → 1.30.0

package/README.md

@@ -13,7 +13,7 @@ This package is [ESM only](https://gist.github.com/sindresorhus/a39789f98801d908
 ### Install @ttoss/components
 
 ```shell
-pnpm add @ttoss/components @ttoss/ui @emotion/react
+pnpm add @ttoss/components @ttoss/ui @emotion/react @ttoss/react-hooks
 ```
 
 ## Components
@@ -121,3 +121,37 @@ const Component = () => {
   );
 };
 ```
+
+### Search
+
+`Search` is a component that integrates an input field with debouncing functionality, making it ideal for search bars where you want to limit the rate of search queries based on user input.
+
+It uses the `useDebounce` hook from `@ttoss/react-hooks` to delay the search action until the user has stopped typing for a specified duration, which helps to prevent unnecessary or excessive queries.
+
+```tsx
+import React, { useState } from 'react';
+import { Search } from '@ttoss/components';
+import { Box } from '@ttoss/ui';
+
+const SearchComponent = () => {
+  const [searchText, setSearchText] = useState('');
+
+  const handleSearchChange = (newValue) => {
+    setSearchText(newValue);
+    // Perform search or update logic here
+  };
+
+  return (
+    <Box>
+      <Search
+        value={searchText}
+        onChange={handleSearchChange}
+        loading={/* loading state here */}
+        debounce={500} // Adjust the debounce time as needed
+      />
+    </Box>
+  );
+};
+```
+
+In this example, the `Search` component receives the current search text and a handler function to update this text. The `loading` prop can be used to display a loading indicator, and the `debounce` prop controls the debounce delay.

package/dist/esm/index.js

@@ -232,4 +232,31 @@ var Markdown = ({
     })
   });
 };
-export { Accordion, InstallPwa, InstallPwaUi, Markdown, Modal, ToastContainer, toast };
+
+// src/components/Search.tsx
+import * as React4 from "react";
+import { Input } from "@ttoss/ui";
+import { useDebounce } from "@ttoss/react-hooks";
+import { jsx as jsx6 } from "react/jsx-runtime";
+var Search = ({
+  value,
+  defaultValue,
+  loading,
+  onChange,
+  ...props
+}) => {
+  const [text, setText] = React4.useState(value ?? defaultValue);
+  const debouncedValue = useDebounce(text, 500);
+  React4.useEffect(() => {
+    onChange(debouncedValue);
+  }, [debouncedValue]);
+  return /* @__PURE__ */jsx6(Input, {
+    leadingIcon: loading ? "loading" : "search",
+    value: text,
+    onChange: e => {
+      return setText(e.target.value);
+    },
+    ...props
+  });
+};
+export { Accordion, InstallPwa, InstallPwaUi, Markdown, Modal, Search, ToastContainer, toast };

package/dist/index.d.ts

@@ -3,7 +3,7 @@ import * as react_accessible_accordion_dist_types_components_ItemContext from 'r
 import * as react_accessible_accordion_dist_types_helpers_types from 'react-accessible-accordion/dist/types/helpers/types';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
-import { BoxProps, FlexProps } from '@ttoss/ui';
+import { BoxProps, FlexProps, InputProps } from '@ttoss/ui';
 import ReactModal from 'react-modal';
 import { ToastContainerProps } from 'react-toastify';
 export { ToastContainerProps, toast } from 'react-toastify';
@@ -319,4 +319,11 @@ type MarkdownProps = Options & {
 };
 declare const Markdown: ({ children, sx, ...props }: MarkdownProps) => react_jsx_runtime.JSX.Element;
 
-export { Accordion, type AccordionProps, InstallPwa, InstallPwaUi, type InstallPwaUiProps, Markdown, type MarkdownProps, Modal, type ModalProps, ToastContainer };
+type SearchProps = Omit<InputProps, 'onChange'> & {
+    loading?: boolean;
+    debounce?: number;
+    onChange: (value?: InputProps['value']) => void;
+};
+declare const Search: ({ value, defaultValue, loading, onChange, ...props }: SearchProps) => react_jsx_runtime.JSX.Element;
+
+export { Accordion, type AccordionProps, InstallPwa, InstallPwaUi, type InstallPwaUiProps, Markdown, type MarkdownProps, Modal, type ModalProps, Search, type SearchProps, ToastContainer };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/components",
-  "version": "1.29.31",
+  "version": "1.30.0",
   "description": "React components for ttoss ecosystem.",
   "author": "ttoss",
   "contributors": [
@@ -36,6 +36,7 @@
   },
   "peerDependencies": {
     "react": ">=16.8.0",
+    "@ttoss/react-hooks": "^1.25.1",
     "@ttoss/ui": "^4.0.7"
   },
   "devDependencies": {
@@ -44,6 +45,7 @@
     "jest": "^29.7.0",
     "tsup": "^8.0.1",
     "@ttoss/config": "^1.31.4",
+    "@ttoss/react-hooks": "^1.25.1",
     "@ttoss/test-utils": "^2.0.4",
     "@ttoss/ui": "^4.0.7"
   },

package/src/components/Search.tsx

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { Input, type InputProps } from '@ttoss/ui';
+import { useDebounce } from '@ttoss/react-hooks';
+
+export type SearchProps = Omit<InputProps, 'onChange'> & {
+  loading?: boolean;
+  debounce?: number;
+  onChange: (value?: InputProps['value']) => void;
+};
+
+export const Search = ({
+  value,
+  defaultValue,
+  loading,
+  onChange,
+  ...props
+}: SearchProps) => {
+  const [text, setText] = React.useState(value ?? defaultValue);
+
+  const debouncedValue = useDebounce(text, 500);
+
+  React.useEffect(() => {
+    onChange(debouncedValue);
+  }, [debouncedValue]);
+
+  return (
+    <Input
+      leadingIcon={loading ? 'loading' : 'search'}
+      value={text}
+      onChange={(e) => {
+        return setText(e.target.value);
+      }}
+      {...props}
+    />
+  );
+};

package/src/index.ts

@@ -3,3 +3,4 @@ export * from './components/InstallPwa';
 export * from './components/Modal';
 export * from './components/Toast';
 export * from './components/Markdown';
+export * from './components/Search';