@pushwoosh/dumb-components 1.0.22 → 1.0.24

package/EnhancedInput/EnhancedInput.d.ts

@@ -0,0 +1,3 @@
+import { type FC } from 'react';
+import { type EnhancedInputProps } from './types';
+export declare const EnhancedInput: FC<EnhancedInputProps>;

package/EnhancedInput/EnhancedInput.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { CloseIcon } from '@pushwoosh/kit-icons';
+import { Wrapper } from './styles';
+import { NativeInput } from '../native';
+export const EnhancedInput = ({
+  $icon,
+  $onClear,
+  ...props
+}) => {
+  return React.createElement(Wrapper, {
+    "$hasIcon": !!$icon,
+    "$hasClear": !!$onClear,
+    "$hasError": !!props.$isErrored
+  }, $icon, React.createElement(NativeInput, {
+    ...props
+  }), $onClear && React.createElement(CloseIcon, {
+    size: "small",
+    onClick: $onClear
+  }));
+};

package/EnhancedInput/SearchInput.d.ts

@@ -0,0 +1,3 @@
+import { type FC } from 'react';
+import { type SearchInputProps } from './types';
+export declare const SearchInput: FC<SearchInputProps>;

package/EnhancedInput/SearchInput.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { SearchIcon } from '@pushwoosh/kit-icons';
+import { EnhancedInput } from './EnhancedInput';
+export const SearchInput = props => {
+  return React.createElement(EnhancedInput, {
+    ...props,
+    "$icon": React.createElement(SearchIcon, {
+      size: "medium",
+      view: "lined"
+    })
+  });
+};

package/EnhancedInput/index.d.ts

@@ -0,0 +1,2 @@
+export { EnhancedInput } from './EnhancedInput';
+export { SearchInput } from './SearchInput';

package/EnhancedInput/index.js

@@ -0,0 +1,2 @@
+export { EnhancedInput } from './EnhancedInput';
+export { SearchInput } from './SearchInput';

package/EnhancedInput/styles.d.ts

@@ -0,0 +1,5 @@
+export declare const Wrapper: import("styled-components").StyledComponent<"div", any, {
+    $hasIcon?: boolean;
+    $hasClear?: boolean;
+    $hasError?: boolean;
+}, never>;

package/EnhancedInput/styles.js

@@ -0,0 +1,13 @@
+import styled from 'styled-components';
+import { Color } from '@pushwoosh/kit-constants';
+import { NativeInput } from '../native';
+export const Wrapper = styled.div.withConfig({
+  displayName: "Wrapper",
+  componentId: "sc-5f7rba-0"
+})(["display:inline-grid;position:relative;& > :not(", "){position:absolute;top:50%;transform:translateY(-50%);}& > :not(", "):first-child{left:6px;color:", ";}&:focus-within > :not(", "):first-child{color:", ";}& > :not(", "):last-child{right:12px;cursor:pointer;color:", ";transition:transform 0.3s ease,color 0.3s ease;&:hover{transform:translateY(-50%) scale(1.2);color:", ";}}& > ", "{width:100%;", " ", "}"], NativeInput, NativeInput, ({
+  $hasError
+}) => $hasError ? Color.DANGER : Color.PHANTOM, NativeInput, Color.BRIGHT, NativeInput, Color.PHANTOM, Color.MAIN, NativeInput, ({
+  $hasIcon
+}) => $hasIcon && 'padding-left: 36px;', ({
+  $hasClear
+}) => $hasClear && `padding-right: 34px;`);

package/EnhancedInput/types.d.ts

@@ -0,0 +1,7 @@
+import type { InputHTMLAttributes, ReactNode } from 'react';
+import type { NativeInputProps } from '../native/Input';
+export type EnhancedInputProps = InputHTMLAttributes<HTMLInputElement> & NativeInputProps & {
+    $icon?: ReactNode;
+    $onClear?: () => void;
+};
+export type SearchInputProps = Omit<EnhancedInputProps, '$icon'>;

package/SortButton/index.d.ts

@@ -1 +1,2 @@
 export { SortButton } from './SortButton';
+export type { SortButtonParams } from './types';

package/Table/components/DataTableSearchInput/DataTableSearchInput.js

@@ -1,6 +1,6 @@
 import React, { useRef, useState, useEffect, useContext } from 'react';
+import { SearchInput } from '../../../EnhancedInput';
 import { DataTableContext } from '../../context';
-import { ClearableInput } from '../ClearableInput';
 export function DataTableSearchInput(props) {
   const context = useContext(DataTableContext);
   const [inputValue, setInputValue] = useState(context.params.search);
@@ -10,10 +10,19 @@ export function DataTableSearchInput(props) {
       setInputValue(context.params.search);
     }
   }, [context.params.search]); // eslint-disable-line react-hooks/exhaustive-deps
-  return React.createElement(ClearableInput, {
+  return React.createElement(SearchInput, {
     ...props,
     value: inputValue,
-    onChange: value => {
+    "$onClear": () => {
+      setInputValue('');
+      context.onChangeParams({
+        ...context.params,
+        search: '',
+        page: 1
+      });
+    },
+    onChange: event => {
+      const value = event.target.value;
       setInputValue(value);
       if (timeoutRef.current) {
         clearTimeout(timeoutRef.current);

package/Table/index.d.ts

@@ -1,4 +1,3 @@
-export { ClearableInput } from './components/ClearableInput';
 export { DataTable } from './components/DataTable';
 export { DataTableList } from './components/DataTableList';
 export { DataTableGetContext } from './components/DataTableGetContext';

package/Table/index.js

@@ -1,4 +1,3 @@
-export { ClearableInput } from './components/ClearableInput';
 export { DataTable } from './components/DataTable';
 export { DataTableList } from './components/DataTableList';
 export { DataTableGetContext } from './components/DataTableGetContext';

package/index.d.ts

@@ -15,7 +15,7 @@ export { Popover } from './Popover';
 export { Radio } from './Radio';
 export { ReCaptcha, useRecaptcha, asyncScriptLoad } from './ReCaptcha';
 export { Spinner } from './Spinner';
-export { SortButton } from './SortButton';
+export { SortButton, type SortButtonParams } from './SortButton';
 export { Select, SelectAsync, CreatableSelect, CLASS_NAME_PREFIX, type SelectBase, type MultiSelectOptions, } from './Select';
 export { Switch } from './Switch';
 export { TextSkeleton, RectangularSkeleton, CircularSkeleton } from './Skeleton';
@@ -26,9 +26,10 @@ export { StatisticCard } from './StatisticCard';
 export { EmailTemplatePreview, NoEmailTemplatePreview } from './EmailTemplatePreview';
 export { PushPreview } from './PushPreview';
 export { Toast, ToastProvider, useToast } from './Toast';
-export { ClearableInput, DataTable, DataTableList, DataTableGetContext, DataTablePagination, DataTableSearchInput, DataTableSortableCell, Loading, TableList, TablePagination, useDataTableContext, useDataTableGetParams, Table, Td, Tr, Th, ElementHover, ItemDetailLink, ItemName, LockedText, Description, type DataTableParams, type DataTableData, type DataTableContextType, } from './Table';
+export { DataTable, DataTableList, DataTableGetContext, DataTablePagination, DataTableSearchInput, DataTableSortableCell, Loading, TableList, TablePagination, useDataTableContext, useDataTableGetParams, Table, Td, Tr, Th, ElementHover, ItemDetailLink, ItemName, LockedText, Description, type DataTableParams, type DataTableData, type DataTableContextType, } from './Table';
 export { AutosizeInput, PageHeader, PageHeaderEditable } from './PageHeader';
 export { ExportResult } from './ExportResult';
 export { NativeInput, NativeTextarea, NativeSelect } from './native';
 export { FieldBox } from './FieldBox';
 export { NumberPicker } from './NumberPicker';
+export { EnhancedInput, SearchInput } from './EnhancedInput';

package/index.js

@@ -26,9 +26,10 @@ export { StatisticCard } from './StatisticCard';
 export { EmailTemplatePreview, NoEmailTemplatePreview } from './EmailTemplatePreview';
 export { PushPreview } from './PushPreview';
 export { Toast, ToastProvider, useToast } from './Toast';
-export { ClearableInput, DataTable, DataTableList, DataTableGetContext, DataTablePagination, DataTableSearchInput, DataTableSortableCell, Loading, TableList, TablePagination, useDataTableContext, useDataTableGetParams, Table, Td, Tr, Th, ElementHover, ItemDetailLink, ItemName, LockedText, Description } from './Table';
+export { DataTable, DataTableList, DataTableGetContext, DataTablePagination, DataTableSearchInput, DataTableSortableCell, Loading, TableList, TablePagination, useDataTableContext, useDataTableGetParams, Table, Td, Tr, Th, ElementHover, ItemDetailLink, ItemName, LockedText, Description } from './Table';
 export { AutosizeInput, PageHeader, PageHeaderEditable } from './PageHeader';
 export { ExportResult } from './ExportResult';
 export { NativeInput, NativeTextarea, NativeSelect } from './native';
 export { FieldBox } from './FieldBox';
-export { NumberPicker } from './NumberPicker';
+export { NumberPicker } from './NumberPicker';
+export { EnhancedInput, SearchInput } from './EnhancedInput';

package/native/Input.d.ts

@@ -1,3 +1,4 @@
-export declare const NativeInput: import("styled-components").StyledComponent<"input", any, {
+export type NativeInputProps = {
     $isErrored?: boolean;
-}, never>;
+};
+export declare const NativeInput: import("styled-components").StyledComponent<"input", any, NativeInputProps, never>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pushwoosh/dumb-components",
-  "version": "1.0.22",
+  "version": "1.0.24",
   "description": "React components to build Pushwoosh products",
   "main": "index.js",
   "module": "index.js",

package/Table/components/ClearableInput/ClearableInput.d.ts

@@ -1,3 +0,0 @@
-import { type ReactElement } from 'react';
-import type { ClearableInputProps } from './types';
-export declare function ClearableInput(props: ClearableInputProps): ReactElement;

package/Table/components/ClearableInput/ClearableInput.js

@@ -1,20 +0,0 @@
-import React from 'react';
-import { CloseIcon } from '@pushwoosh/kit-icons';
-import { Wrapper, ClearButton } from './styles';
-import { NativeInput } from '../../../native';
-export function ClearableInput(props) {
-  const {
-    value,
-    placeholder,
-    onChange
-  } = props;
-  return React.createElement(Wrapper, null, React.createElement(NativeInput, {
-    value: value,
-    placeholder: placeholder,
-    onChange: e => onChange(e.target.value)
-  }), value && React.createElement(ClearButton, {
-    onClick: () => onChange('')
-  }, React.createElement(CloseIcon, {
-    size: "small"
-  })));
-}

package/Table/components/ClearableInput/index.d.ts

@@ -1 +0,0 @@
-export { ClearableInput } from './ClearableInput';

package/Table/components/ClearableInput/index.js

@@ -1 +0,0 @@
-export { ClearableInput } from './ClearableInput';

package/Table/components/ClearableInput/styles.d.ts

@@ -1,14 +0,0 @@
-export declare const Wrapper: import("styled-components").StyledComponent<"div", any, {
-    $alignContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
-    $alignItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
-    $gap?: string | number | undefined;
-    $gridAutoFlow?: "row" | "column" | "dense" | "row dense" | "column dense" | undefined;
-    $justifyContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
-    $justifyItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
-    $margin?: string | number | undefined;
-    $padding?: string | number | undefined;
-    $placeItems?: "end" | "start" | "center" | "stretch" | undefined;
-} & {
-    $gridAutoFlow: string;
-}, "$gridAutoFlow">;
-export declare const ClearButton: import("styled-components").StyledComponent<"div", any, {}, never>;

package/Table/components/ClearableInput/styles.js

@@ -1,10 +0,0 @@
-import styled from 'styled-components';
-import { Horizontal } from '@pushwoosh/kit-helpers';
-export const Wrapper = styled(Horizontal).withConfig({
-  displayName: "Wrapper",
-  componentId: "sc-1c8truw-0"
-})(["position:relative;"]);
-export const ClearButton = styled.div.withConfig({
-  displayName: "ClearButton",
-  componentId: "sc-1c8truw-1"
-})(["position:absolute;right:8px;top:50%;transform:translateY(-50%);cursor:pointer;"]);

package/Table/components/ClearableInput/types.d.ts

@@ -1,5 +0,0 @@
-export interface ClearableInputProps {
-    value: string;
-    placeholder?: string;
-    onChange: (value: string) => void;
-}