react-better-html 1.1.103 → 1.1.104

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/index.d.mts +50 -5
  2. package/dist/index.d.ts +50 -5
  3. package/dist/index.js +640 -59
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.mjs +726 -136
  6. package/dist/index.mjs.map +1 -1
  7. package/package.json +1 -1
package/dist/index.d.mts CHANGED
@@ -55,7 +55,9 @@ type DivComponentType = {
55
55
  invertFlexDirection?: boolean;
56
56
  }>) => React.ReactElement;
57
57
  grid: <Value>(props: ComponentPropWithRef<HTMLDivElement, OmitProps<DivProps<Value>, "display">>) => React.ReactElement;
58
- box: <Value>(props: ComponentPropWithRef<HTMLDivElement, DivProps<Value>>) => React.ReactElement;
58
+ box: <Value>(props: ComponentPropWithRef<HTMLDivElement, DivProps<Value> & {
59
+ isActive?: boolean;
60
+ }>) => React.ReactElement;
59
61
  };
60
62
  declare const DivComponent: DivComponentType;
61
63
  declare const Div: typeof DivComponent & {
@@ -132,7 +134,7 @@ declare const Loader: typeof LoaderComponent & {
132
134
  text: typeof LoaderComponent.text;
133
135
  };
134
136
 
135
- type IconName = "XMark" | "uploadCloud" | "trash" | "chevronDown" | "chevronLeft" | "chevronRight" | "eye" | "eyeDashed" | "magnifyingGlass" | "check";
137
+ type IconName = "XMark" | "uploadCloud" | "trash" | "chevronDown" | "chevronLeft" | "chevronRight" | "doubleChevronLeft" | "doubleChevronRight" | "eye" | "eyeDashed" | "magnifyingGlass" | "check" | "filter";
136
138
  type IconData = {
137
139
  width: number;
138
140
  height: number;
@@ -315,7 +317,12 @@ type PageHolderProps = {
315
317
  } & ComponentPaddingProps;
316
318
  type PageHolderComponentType = {
317
319
  (props: ComponentPropWithRef<HTMLDivElement, PageHolderProps>): React.ReactElement;
318
- center: (props: ComponentPropWithRef<HTMLDivElement, PageHolderProps>) => React.ReactElement;
320
+ center: (props: ComponentPropWithRef<HTMLDivElement, PageHolderProps & {
321
+ decorationImageSrc?: string;
322
+ decorationImageName?: AssetName | AnyOtherString;
323
+ /** @default "right" */
324
+ decorationImagePosition?: "left" | "right";
325
+ }>) => React.ReactElement;
319
326
  };
320
327
  declare const PageHolderComponent: PageHolderComponentType;
321
328
  declare const PageHolder: typeof PageHolderComponent & {
@@ -558,6 +565,7 @@ type FormProps = {
558
565
  submitButtonId?: string;
559
566
  /** @default false */
560
567
  submitButtonIsDisabled?: boolean;
568
+ cancelButtonText?: string;
561
569
  /** @default "right" */
562
570
  actionButtonsLocation?: "left" | "center" | "right";
563
571
  gap?: React.CSSProperties["gap"];
@@ -567,6 +575,7 @@ type FormProps = {
567
575
  isDestructive?: boolean;
568
576
  /** @default false */
569
577
  withDividers?: boolean;
578
+ renderActionButtons?: React.ReactNode;
570
579
  onClickCancel?: () => void;
571
580
  onSubmit?: (value: React.FormEvent<HTMLFormElement>) => void;
572
581
  children?: React.ReactNode;
@@ -631,6 +640,19 @@ declare const ColorThemeSwitch: typeof ColorThemeSwitchComponent & {
631
640
  withText: typeof ColorThemeSwitchComponent.withText;
632
641
  };
633
642
 
643
+ type FilterPreset = "today" | "yesterday" | "thisWeek" | "thisMonth" | "thisYear" | "lastWeek" | "lastMonth" | "lastYear" | "nextWeek" | "nextMonth" | "nextYear";
644
+ type TableFilterData = {
645
+ type: "number";
646
+ min?: number;
647
+ max?: number;
648
+ } | {
649
+ type: "date" | "date-time";
650
+ min?: string;
651
+ max?: string;
652
+ } | {
653
+ type: "list";
654
+ list?: string[];
655
+ };
634
656
  type TextColumn<DataItem> = {
635
657
  type: "text";
636
658
  keyName?: keyof DataItem;
@@ -647,13 +669,27 @@ type ImageColumn<DataItem> = {
647
669
  type CheckboxColumn = {
648
670
  type: "checkbox";
649
671
  } & ToggleInputProps<boolean>;
672
+ type NumberFilter<DataItem> = {
673
+ filter?: "number";
674
+ getValue?: (item: DataItem) => number;
675
+ };
676
+ type DateFilter<DataItem> = {
677
+ filter?: "date" | "date-time";
678
+ presets?: FilterPreset[];
679
+ getValue?: (item: DataItem) => Date;
680
+ };
681
+ type ListFilter<DataItem> = {
682
+ filter?: "list";
683
+ withTotalNumber?: boolean;
684
+ getValueForList?: (item: DataItem) => string;
685
+ };
650
686
  type TableColumn<DataItem> = {
651
687
  label?: string;
652
688
  width?: string | number;
653
689
  minWidth?: string | number;
654
690
  maxWidth?: string | number;
655
691
  align?: "left" | "center" | "right";
656
- } & (TextColumn<DataItem> | ElementColumn<DataItem> | ImageColumn<DataItem> | CheckboxColumn);
692
+ } & (TextColumn<DataItem> | ElementColumn<DataItem> | ImageColumn<DataItem> | CheckboxColumn) & (NumberFilter<DataItem> | DateFilter<DataItem> | ListFilter<DataItem>);
657
693
  type TableProps<DataItem> = {
658
694
  columns: TableColumn<DataItem>[];
659
695
  data: DataItem[];
@@ -665,9 +701,18 @@ type TableProps<DataItem> = {
665
701
  withStickyHeader?: boolean;
666
702
  /** @default "No data available" */
667
703
  noDataItemsMessage?: string;
704
+ pageSize?: number;
668
705
  onClickRow?: (item: DataItem, index: number) => void;
669
706
  onClickAllCheckboxes?: (checked: boolean) => void;
707
+ onChangePage?: (page: number) => void;
708
+ onChangeFilter?: (filterData: Record<number, TableFilterData | undefined>) => void;
670
709
  } & ComponentMarginProps;
710
+ type TableRef = {
711
+ currentPage: number;
712
+ setCurrentPage: React.Dispatch<React.SetStateAction<number>>;
713
+ pagesCount: number;
714
+ setCheckedItems: React.Dispatch<React.SetStateAction<boolean[]>>;
715
+ };
671
716
  type TableComponentType = {
672
717
  <DataItem>(props: ComponentPropWithRef<HTMLDivElement, TableProps<DataItem>>): React.ReactElement;
673
718
  };
@@ -807,4 +852,4 @@ declare const isMobileDevice: boolean;
807
852
 
808
853
  declare const reactRouterDomPlugin: BetterHtmlPlugin;
809
854
 
810
- export { type AppConfig, type AssetName, type AssetsConfig, type BetterHtmlConfig, type BetterHtmlPlugin, _default as BetterHtmlProvider, type BetterHtmlProviderValue, type BrowserName, Button, type ButtonProps, Chip, type ChipProps, type Color, type ColorName, type ColorTheme, ColorThemeSwitch, type ColorThemeSwitchProps, type Colors, type DeepPartialRecord, Div, type DivProps, _default$3 as Divider, Dropdown, type DropdownOption, type DropdownProps, type ExcludeOptions, Foldable, type FoldableProps, type FoldableRef, Form, type FormProps, FormRow, type FormRowProps, type HorizontalDividerProps, _default$5 as Icon, type IconName, type IconProps, type IconsConfig, _default$4 as Image, type ImageProps, InputField, type InputFieldProps, _default$1 as Label, type LabelProps, Loader, type LoaderConfig, type LoaderName, type LoaderProps, Modal, type ModalProps, type ModalRef, type OmitProps, PageHeader, type PageHeaderProps, PageHolder, type PageHolderProps, type PartialRecord, type PickAllRequired, type PickValue, type PluginName, type Styles, type TabGroup, Table, type TableColumn, type TableProps, Tabs, type TabsProps, type TabsRef, Text, type TextAs, type TextProps, type TextareaFieldProps, type Theme, type ThemeConfig, _default$2 as ToggleInput, type ToggleInputProps, type ToggleInputRef, type VerticalDividerProps, darkenColor, desaturateColor, formatPhoneNumber, generateRandomString, getBrowser, getFormErrorObject, isMobileDevice, lightenColor, loaderControls, reactRouterDomPlugin, saturateColor, useBetterHtmlContext, useBooleanState, useDebounceState, useForm, useLoader, useLoaderControls, useMediaQuery, usePageResize, usePageScroll, useTheme, useUrlQuery };
855
+ export { type AppConfig, type AssetName, type AssetsConfig, type BetterHtmlConfig, type BetterHtmlPlugin, _default as BetterHtmlProvider, type BetterHtmlProviderValue, type BrowserName, Button, type ButtonProps, Chip, type ChipProps, type Color, type ColorName, type ColorTheme, ColorThemeSwitch, type ColorThemeSwitchProps, type Colors, type DeepPartialRecord, Div, type DivProps, _default$3 as Divider, Dropdown, type DropdownOption, type DropdownProps, type ExcludeOptions, Foldable, type FoldableProps, type FoldableRef, Form, type FormProps, FormRow, type FormRowProps, type HorizontalDividerProps, _default$5 as Icon, type IconName, type IconProps, type IconsConfig, _default$4 as Image, type ImageProps, InputField, type InputFieldProps, _default$1 as Label, type LabelProps, Loader, type LoaderConfig, type LoaderName, type LoaderProps, Modal, type ModalProps, type ModalRef, type OmitProps, PageHeader, type PageHeaderProps, PageHolder, type PageHolderProps, type PartialRecord, type PickAllRequired, type PickValue, type PluginName, type Styles, type TabGroup, Table, type TableColumn, type TableProps, type TableRef, Tabs, type TabsProps, type TabsRef, Text, type TextAs, type TextProps, type TextareaFieldProps, type Theme, type ThemeConfig, _default$2 as ToggleInput, type ToggleInputProps, type ToggleInputRef, type VerticalDividerProps, darkenColor, desaturateColor, formatPhoneNumber, generateRandomString, getBrowser, getFormErrorObject, isMobileDevice, lightenColor, loaderControls, reactRouterDomPlugin, saturateColor, useBetterHtmlContext, useBooleanState, useDebounceState, useForm, useLoader, useLoaderControls, useMediaQuery, usePageResize, usePageScroll, useTheme, useUrlQuery };
package/dist/index.d.ts CHANGED
@@ -55,7 +55,9 @@ type DivComponentType = {
55
55
  invertFlexDirection?: boolean;
56
56
  }>) => React.ReactElement;
57
57
  grid: <Value>(props: ComponentPropWithRef<HTMLDivElement, OmitProps<DivProps<Value>, "display">>) => React.ReactElement;
58
- box: <Value>(props: ComponentPropWithRef<HTMLDivElement, DivProps<Value>>) => React.ReactElement;
58
+ box: <Value>(props: ComponentPropWithRef<HTMLDivElement, DivProps<Value> & {
59
+ isActive?: boolean;
60
+ }>) => React.ReactElement;
59
61
  };
60
62
  declare const DivComponent: DivComponentType;
61
63
  declare const Div: typeof DivComponent & {
@@ -132,7 +134,7 @@ declare const Loader: typeof LoaderComponent & {
132
134
  text: typeof LoaderComponent.text;
133
135
  };
134
136
 
135
- type IconName = "XMark" | "uploadCloud" | "trash" | "chevronDown" | "chevronLeft" | "chevronRight" | "eye" | "eyeDashed" | "magnifyingGlass" | "check";
137
+ type IconName = "XMark" | "uploadCloud" | "trash" | "chevronDown" | "chevronLeft" | "chevronRight" | "doubleChevronLeft" | "doubleChevronRight" | "eye" | "eyeDashed" | "magnifyingGlass" | "check" | "filter";
136
138
  type IconData = {
137
139
  width: number;
138
140
  height: number;
@@ -315,7 +317,12 @@ type PageHolderProps = {
315
317
  } & ComponentPaddingProps;
316
318
  type PageHolderComponentType = {
317
319
  (props: ComponentPropWithRef<HTMLDivElement, PageHolderProps>): React.ReactElement;
318
- center: (props: ComponentPropWithRef<HTMLDivElement, PageHolderProps>) => React.ReactElement;
320
+ center: (props: ComponentPropWithRef<HTMLDivElement, PageHolderProps & {
321
+ decorationImageSrc?: string;
322
+ decorationImageName?: AssetName | AnyOtherString;
323
+ /** @default "right" */
324
+ decorationImagePosition?: "left" | "right";
325
+ }>) => React.ReactElement;
319
326
  };
320
327
  declare const PageHolderComponent: PageHolderComponentType;
321
328
  declare const PageHolder: typeof PageHolderComponent & {
@@ -558,6 +565,7 @@ type FormProps = {
558
565
  submitButtonId?: string;
559
566
  /** @default false */
560
567
  submitButtonIsDisabled?: boolean;
568
+ cancelButtonText?: string;
561
569
  /** @default "right" */
562
570
  actionButtonsLocation?: "left" | "center" | "right";
563
571
  gap?: React.CSSProperties["gap"];
@@ -567,6 +575,7 @@ type FormProps = {
567
575
  isDestructive?: boolean;
568
576
  /** @default false */
569
577
  withDividers?: boolean;
578
+ renderActionButtons?: React.ReactNode;
570
579
  onClickCancel?: () => void;
571
580
  onSubmit?: (value: React.FormEvent<HTMLFormElement>) => void;
572
581
  children?: React.ReactNode;
@@ -631,6 +640,19 @@ declare const ColorThemeSwitch: typeof ColorThemeSwitchComponent & {
631
640
  withText: typeof ColorThemeSwitchComponent.withText;
632
641
  };
633
642
 
643
+ type FilterPreset = "today" | "yesterday" | "thisWeek" | "thisMonth" | "thisYear" | "lastWeek" | "lastMonth" | "lastYear" | "nextWeek" | "nextMonth" | "nextYear";
644
+ type TableFilterData = {
645
+ type: "number";
646
+ min?: number;
647
+ max?: number;
648
+ } | {
649
+ type: "date" | "date-time";
650
+ min?: string;
651
+ max?: string;
652
+ } | {
653
+ type: "list";
654
+ list?: string[];
655
+ };
634
656
  type TextColumn<DataItem> = {
635
657
  type: "text";
636
658
  keyName?: keyof DataItem;
@@ -647,13 +669,27 @@ type ImageColumn<DataItem> = {
647
669
  type CheckboxColumn = {
648
670
  type: "checkbox";
649
671
  } & ToggleInputProps<boolean>;
672
+ type NumberFilter<DataItem> = {
673
+ filter?: "number";
674
+ getValue?: (item: DataItem) => number;
675
+ };
676
+ type DateFilter<DataItem> = {
677
+ filter?: "date" | "date-time";
678
+ presets?: FilterPreset[];
679
+ getValue?: (item: DataItem) => Date;
680
+ };
681
+ type ListFilter<DataItem> = {
682
+ filter?: "list";
683
+ withTotalNumber?: boolean;
684
+ getValueForList?: (item: DataItem) => string;
685
+ };
650
686
  type TableColumn<DataItem> = {
651
687
  label?: string;
652
688
  width?: string | number;
653
689
  minWidth?: string | number;
654
690
  maxWidth?: string | number;
655
691
  align?: "left" | "center" | "right";
656
- } & (TextColumn<DataItem> | ElementColumn<DataItem> | ImageColumn<DataItem> | CheckboxColumn);
692
+ } & (TextColumn<DataItem> | ElementColumn<DataItem> | ImageColumn<DataItem> | CheckboxColumn) & (NumberFilter<DataItem> | DateFilter<DataItem> | ListFilter<DataItem>);
657
693
  type TableProps<DataItem> = {
658
694
  columns: TableColumn<DataItem>[];
659
695
  data: DataItem[];
@@ -665,9 +701,18 @@ type TableProps<DataItem> = {
665
701
  withStickyHeader?: boolean;
666
702
  /** @default "No data available" */
667
703
  noDataItemsMessage?: string;
704
+ pageSize?: number;
668
705
  onClickRow?: (item: DataItem, index: number) => void;
669
706
  onClickAllCheckboxes?: (checked: boolean) => void;
707
+ onChangePage?: (page: number) => void;
708
+ onChangeFilter?: (filterData: Record<number, TableFilterData | undefined>) => void;
670
709
  } & ComponentMarginProps;
710
+ type TableRef = {
711
+ currentPage: number;
712
+ setCurrentPage: React.Dispatch<React.SetStateAction<number>>;
713
+ pagesCount: number;
714
+ setCheckedItems: React.Dispatch<React.SetStateAction<boolean[]>>;
715
+ };
671
716
  type TableComponentType = {
672
717
  <DataItem>(props: ComponentPropWithRef<HTMLDivElement, TableProps<DataItem>>): React.ReactElement;
673
718
  };
@@ -807,4 +852,4 @@ declare const isMobileDevice: boolean;
807
852
 
808
853
  declare const reactRouterDomPlugin: BetterHtmlPlugin;
809
854
 
810
- export { type AppConfig, type AssetName, type AssetsConfig, type BetterHtmlConfig, type BetterHtmlPlugin, _default as BetterHtmlProvider, type BetterHtmlProviderValue, type BrowserName, Button, type ButtonProps, Chip, type ChipProps, type Color, type ColorName, type ColorTheme, ColorThemeSwitch, type ColorThemeSwitchProps, type Colors, type DeepPartialRecord, Div, type DivProps, _default$3 as Divider, Dropdown, type DropdownOption, type DropdownProps, type ExcludeOptions, Foldable, type FoldableProps, type FoldableRef, Form, type FormProps, FormRow, type FormRowProps, type HorizontalDividerProps, _default$5 as Icon, type IconName, type IconProps, type IconsConfig, _default$4 as Image, type ImageProps, InputField, type InputFieldProps, _default$1 as Label, type LabelProps, Loader, type LoaderConfig, type LoaderName, type LoaderProps, Modal, type ModalProps, type ModalRef, type OmitProps, PageHeader, type PageHeaderProps, PageHolder, type PageHolderProps, type PartialRecord, type PickAllRequired, type PickValue, type PluginName, type Styles, type TabGroup, Table, type TableColumn, type TableProps, Tabs, type TabsProps, type TabsRef, Text, type TextAs, type TextProps, type TextareaFieldProps, type Theme, type ThemeConfig, _default$2 as ToggleInput, type ToggleInputProps, type ToggleInputRef, type VerticalDividerProps, darkenColor, desaturateColor, formatPhoneNumber, generateRandomString, getBrowser, getFormErrorObject, isMobileDevice, lightenColor, loaderControls, reactRouterDomPlugin, saturateColor, useBetterHtmlContext, useBooleanState, useDebounceState, useForm, useLoader, useLoaderControls, useMediaQuery, usePageResize, usePageScroll, useTheme, useUrlQuery };
855
+ export { type AppConfig, type AssetName, type AssetsConfig, type BetterHtmlConfig, type BetterHtmlPlugin, _default as BetterHtmlProvider, type BetterHtmlProviderValue, type BrowserName, Button, type ButtonProps, Chip, type ChipProps, type Color, type ColorName, type ColorTheme, ColorThemeSwitch, type ColorThemeSwitchProps, type Colors, type DeepPartialRecord, Div, type DivProps, _default$3 as Divider, Dropdown, type DropdownOption, type DropdownProps, type ExcludeOptions, Foldable, type FoldableProps, type FoldableRef, Form, type FormProps, FormRow, type FormRowProps, type HorizontalDividerProps, _default$5 as Icon, type IconName, type IconProps, type IconsConfig, _default$4 as Image, type ImageProps, InputField, type InputFieldProps, _default$1 as Label, type LabelProps, Loader, type LoaderConfig, type LoaderName, type LoaderProps, Modal, type ModalProps, type ModalRef, type OmitProps, PageHeader, type PageHeaderProps, PageHolder, type PageHolderProps, type PartialRecord, type PickAllRequired, type PickValue, type PluginName, type Styles, type TabGroup, Table, type TableColumn, type TableProps, type TableRef, Tabs, type TabsProps, type TabsRef, Text, type TextAs, type TextProps, type TextareaFieldProps, type Theme, type ThemeConfig, _default$2 as ToggleInput, type ToggleInputProps, type ToggleInputRef, type VerticalDividerProps, darkenColor, desaturateColor, formatPhoneNumber, generateRandomString, getBrowser, getFormErrorObject, isMobileDevice, lightenColor, loaderControls, reactRouterDomPlugin, saturateColor, useBetterHtmlContext, useBooleanState, useDebounceState, useForm, useLoader, useLoaderControls, useMediaQuery, usePageResize, usePageScroll, useTheme, useUrlQuery };