1mpacto-react-ui 0.2.0-beta.11 → 0.2.0-beta.13

package/dist/package.json.d.ts

@@ -1,7 +1,7 @@
 declare const _default: {
   "name": "1mpacto-react-ui",
   "private": false,
-  "version": "0.2.0-beta.11",
+  "version": "0.2.0-beta.13",
   "type": "module",
   "engines": {
     "node": ">=20.19.4",

package/dist/src/components/SelectDropdownContainer/styleConfig.d.ts

@@ -1,4 +1,5 @@
 import { StylesConfig } from 'react-select';
 export declare const styleSelectDropdownContainerLaba: StylesConfig;
 export declare const styleSelectDropdownContainerPayhere: StylesConfig;
-export declare const styleSelectDropdownContainerNoSearch: StylesConfig;
+export declare const styleSelectDropdownContainerNoSearchLaba: StylesConfig;
+export declare const styleSelectDropdownContainerNoSearchPayhere: StylesConfig;

package/dist/src/components/Table/Table.d.ts

@@ -3,5 +3,5 @@ import { ITable, IVirtualizationHead, IVirtualizationTable, ITableConfig } from
 export declare const ConfigTable: () => ITableConfig;
 export declare const VirtualizationHead: React.ForwardRefExoticComponent<Omit<IVirtualizationHead, "ref"> & React.RefAttributes<HTMLTableSectionElement>>;
 export declare const VirtualizationTable: ({ style, context, ...props }: IVirtualizationTable) => import("react/jsx-runtime").JSX.Element;
-declare const Table: <T>({ tableInstance, classNameWrapperTable, classNameTable, collapseAll, handlerRowClick, privillageRowClick, virtualization, virtualizationProps, headerId, tbodyTrId, maxHeight, idCalculateHeight, kind, componentSortASC, componentSortDESC, scrollTop, emptyPlaceholder, variant, renderSubComponent, }: ITable<T>) => import("react/jsx-runtime").JSX.Element;
+declare const Table: <T>({ tableInstance, classNameWrapperTable, classNameTable, collapseAll, handlerRowClick, privillageRowClick, virtualization, virtualizationProps, headerId, tbodyTrId, maxHeight, idCalculateHeight, kind, componentSortASC, componentSortDESC, scrollTop, emptyPlaceholder, variant, renderSubComponent, columnBreakpoints, }: ITable<T>) => import("react/jsx-runtime").JSX.Element;
 export default Table;

package/dist/src/components/Table/Table.stories.d.ts

@@ -1,7 +1,7 @@
 import { StoryObj } from '@storybook/react-vite';
 declare const meta: {
     title: string;
-    component: <T>({ tableInstance, classNameWrapperTable, classNameTable, collapseAll, handlerRowClick, privillageRowClick, virtualization, virtualizationProps, headerId, tbodyTrId, maxHeight, idCalculateHeight, kind, componentSortASC, componentSortDESC, scrollTop, emptyPlaceholder, variant, renderSubComponent, }: import('../../interfaces/components/Table').ITable<T>) => import("react/jsx-runtime").JSX.Element;
+    component: <T>({ tableInstance, classNameWrapperTable, classNameTable, collapseAll, handlerRowClick, privillageRowClick, virtualization, virtualizationProps, headerId, tbodyTrId, maxHeight, idCalculateHeight, kind, componentSortASC, componentSortDESC, scrollTop, emptyPlaceholder, variant, renderSubComponent, columnBreakpoints, }: import('../../interfaces/components/Table').ITable<T>) => import("react/jsx-runtime").JSX.Element;
     parameters: {
         layout: string;
     };

package/dist/src/components/Table/TableSubMobile.d.ts

@@ -0,0 +1,3 @@
+import { TTableRenderSubComponent } from '../../interfaces/components/Table';
+declare const TableSubComponent: TTableRenderSubComponent<unknown>;
+export default TableSubComponent;

package/dist/src/components/index.d.ts

@@ -1,7 +1,7 @@
 import { ICollapse } from './../interfaces/components/Collapse';
 import { IMasonryLayout } from './../hooks/useMasonry';
 import { IChips } from './../interfaces/components/Chips';
-import { IDatePicker } from './../interfaces/components/DatePicker/index';
+import { IDatePicker } from './../interfaces/components/DatePicker';
 import { default as TPublish } from './TPublish/TPublish';
 import { default as Button } from './Button/Button';
 import { default as Popover } from './Popover/Popover';
@@ -9,7 +9,8 @@ import { IRefPopover, IPopover } from '../interfaces/components/Popover';
 import { default as InputFloatingInner } from './Input/InputFloatingInner';
 import { default as InputReguler } from './Input/InputReguler';
 import { default as Table, ConfigTable } from './Table/Table';
-import { ITableColumnDef, ITableConfig } from '../interfaces/components/Table';
+import { default as TableSubComponent } from './Table/TableSubMobile';
+import { ITableColumnDef, ITableColumnBreakpoint, ITableConfig, TTableRenderSubComponent, TTableHandlerRowClick } from '../interfaces/components/Table';
 import { default as TableVirtualization } from './Virtualization/TableVirtualization';
 import { TableVirtuosoHandle as IRefTableVirtualization, VirtuosoHandle as IRefListVirtualization } from 'react-virtuoso';
 import { default as ListVirtualization } from './Virtualization/ListVirtualization';
@@ -62,11 +63,11 @@ import { IUploadMultipleFileValue } from '../interfaces/components/UploadFile';
 import { default as ErrorMessage } from './ErrorMessage/ErrorMessage';
 import { default as TextareaFloatingInner } from './Textarea/TextareaFloatingInner';
 import { default as Step } from './Step/Step';
-import { IDataStepList } from '../interfaces/components/Step/index';
+import { IDataStepList } from '../interfaces/components/Step';
 import { default as LineChart } from './Chart/LineChart';
 import { default as Tooltip } from './Tooltip/Tooltip';
 import { default as ButtonPopover } from './ButtonPopover/ButtonPopover';
-import { IRefButtonPopover } from '../interfaces/components/ButtonPopover/index';
+import { IRefButtonPopover } from '../interfaces/components/ButtonPopover';
 import { default as GradientLineChart } from './Chart/GradientLineChart';
 import { default as GradientBarChart } from './Chart/GradientBarChart';
 import { default as StepIndicator } from './Step/StepIndicator';
@@ -76,5 +77,5 @@ import { default as CollapseV2 } from './Collapse/CollapseV2';
 import * as utilTable from '@tanstack/react-table';
 import type * as SelectDropdownContainerType from 'react-select';
 import type * as FilterContainerType from '../interfaces/components/FilterContainer';
-export { TPublish, Button, Popover, Calendar, CalendarRange, DatePicker, DateRangePicker, FilterDate, InputFloatingInner, InputReguler, Pagination, Tabs, TabPanel, Table, TableVirtualization, ListVirtualization, SelectDropdownContainer, utilTable, Switch, ButtonIcon, Badges, Chips, RadioCheckbox, RadioCheckboxLabel, Breadcrumbs, Sidebar, Collapse, ModalDialog, SelectDropdownContainerComponents, Timeline, FilterContainer, NumberFormat, PatternFormat, DefaultCheckedChecboxIcon, DefaultRadioChecboxIcon, ConfigTable, PortalComponent, AlertContainer, UploadFile, TruncateComponent, UploadImage, Textarea, DoughnutChart, MonthYearPicker, CheckboxTable, InputNative, UploadMultipleFile, ErrorMessage, TextareaFloatingInner, Step, LineChart, Tooltip, ButtonPopover, GradientLineChart, GradientBarChart, StepIndicator, TextEditor, CollapseV2, };
-export type { ITableColumnDef, IRefPopover, IRefTableVirtualization, IRefListVirtualization, IRefSelectDropdownContainer, IChildrenSelectDropdownContainer, ISidebarModule, SelectDropdownContainerType, FilterContainerType, IInputReguler, IInputFloatingInner, ITableConfig, TButtonVariants, TButtonSize, ITabsList, TTypeEventTabs, ITextarea, IListVirtualization, ITableVirtualization, IRefSidebar, IChildrenIconCompany, ICloneElementSidebar, IDataDoughnutChart, IDataInnerLabelDoughnutChart, ISelectDropdownContainer, IDatePicker, IPopover, IInputNative, IUploadMultipleFileValue, IDataStepList, IDataLineChart, IChips, IRefButtonPopover, TGradientLineChartCustomTooltip, IGradientLineChart, IGradientLineChartDataSet, IGradientLineChartData, TGradientBarChartCustomTooltip, IGradientBarChart, IGradientBarChartDataSet, IGradientBarChartData, IFilterDateButtonList, TKeyFilterDateButtonListType, IMasonryLayout, IDataGradientBarChartCustomTooltip, IDataGradientLineChartCustomTooltip, ITextEditorProps, ICollapse, };
+export { TPublish, Button, Popover, Calendar, CalendarRange, DatePicker, DateRangePicker, FilterDate, InputFloatingInner, InputReguler, Pagination, Tabs, TabPanel, Table, TableVirtualization, ListVirtualization, SelectDropdownContainer, utilTable, Switch, ButtonIcon, Badges, Chips, RadioCheckbox, RadioCheckboxLabel, Breadcrumbs, Sidebar, Collapse, ModalDialog, SelectDropdownContainerComponents, Timeline, FilterContainer, NumberFormat, PatternFormat, DefaultCheckedChecboxIcon, DefaultRadioChecboxIcon, ConfigTable, PortalComponent, AlertContainer, UploadFile, TruncateComponent, UploadImage, Textarea, DoughnutChart, MonthYearPicker, CheckboxTable, InputNative, UploadMultipleFile, ErrorMessage, TextareaFloatingInner, Step, LineChart, Tooltip, ButtonPopover, GradientLineChart, GradientBarChart, StepIndicator, TextEditor, CollapseV2, TableSubComponent, };
+export type { ITableColumnDef, IRefPopover, IRefTableVirtualization, IRefListVirtualization, IRefSelectDropdownContainer, IChildrenSelectDropdownContainer, ISidebarModule, SelectDropdownContainerType, FilterContainerType, IInputReguler, IInputFloatingInner, ITableConfig, TButtonVariants, TButtonSize, ITabsList, TTypeEventTabs, ITextarea, IListVirtualization, ITableVirtualization, IRefSidebar, IChildrenIconCompany, ICloneElementSidebar, IDataDoughnutChart, IDataInnerLabelDoughnutChart, ISelectDropdownContainer, IDatePicker, IPopover, IInputNative, IUploadMultipleFileValue, IDataStepList, IDataLineChart, IChips, IRefButtonPopover, TGradientLineChartCustomTooltip, IGradientLineChart, IGradientLineChartDataSet, IGradientLineChartData, TGradientBarChartCustomTooltip, IGradientBarChart, IGradientBarChartDataSet, IGradientBarChartData, IFilterDateButtonList, TKeyFilterDateButtonListType, IMasonryLayout, IDataGradientBarChartCustomTooltip, IDataGradientLineChartCustomTooltip, ITextEditorProps, ICollapse, ITableColumnBreakpoint, TTableRenderSubComponent, TTableHandlerRowClick, };

package/dist/src/config/tailwind/index.d.ts

@@ -1,4 +1,5 @@
 import { default as ConfigColors } from './colors';
 import { default as configTypography, configTypographyLabaBisnis, configTypographyPayhere } from './typography';
 import { default as configScreens } from './screen';
-export { ConfigColors, configTypography, configTypographyLabaBisnis, configTypographyPayhere, configScreens };
+import { default as configNativeScreens } from './nativeScreen';
+export { ConfigColors, configTypography, configTypographyLabaBisnis, configTypographyPayhere, configScreens, configNativeScreens, };

package/dist/src/config/tailwind/nativeScreen.d.ts

@@ -0,0 +1,3 @@
+export type INativeScreen = Record<string, number>;
+declare const nativeScreens: INativeScreen;
+export default nativeScreens;

package/dist/src/interfaces/components/Table/index.d.ts

@@ -2,6 +2,15 @@ import { Table as ITableTanstack, Row, ColumnDef } from '@tanstack/react-table';
 import { default as React } from 'react';
 import { ITableVirtualization, IWrapperProps } from '../Virtualization/TableVirtualization';
 export type ITableColumnDef<T = unknown> = ColumnDef<T>;
+export interface ITableColumnBreakpoint {
+    maxWidth?: number;
+    minWidth?: number;
+    columns: string[];
+    realColumns?: string[];
+    resetExpanded?: boolean;
+}
+export type TTableRenderSubComponent<T> = ITable<T>['renderSubComponent'];
+export type TTableHandlerRowClick<T> = ITable<T>['handlerRowClick'];
 export interface ITable<T = unknown> {
     tableInstance: ITableTanstack<T>;
     classNameWrapperTable?: string;
@@ -21,13 +30,17 @@ export interface ITable<T = unknown> {
     componentSortDESC?: Element | React.ReactNode | React.ReactNode[];
     scrollTop?: boolean;
     emptyPlaceholder?: Element | React.ReactNode | React.ReactNode[];
-    renderSubComponent?: (original: T, row: Row<T>) => React.ReactNode | React.ReactNode[];
+    renderSubComponent?: (original: T, row: Row<T>, other: {
+        visibilityColumns: Pick<ITableColumnBreakpoint, 'columns' | 'realColumns'>;
+        classNameSubMobile: string;
+    }) => React.ReactNode | React.ReactNode[];
+    columnBreakpoints?: ITableColumnBreakpoint[];
 }
 export interface INonVirtualization<T = unknown> {
     tableInstance: ITableTanstack<T>;
     classNameWrapperTable?: string;
     classNameTable?: string;
-    handlerRowClick?: (original: T, row: Row<T>) => void;
+    handlerRowClick?: TTableHandlerRowClick<T>;
     privillageRowClick?: boolean;
     headerId?: string;
     tbodyTrId: (row: Row<T>) => string | undefined;
@@ -37,7 +50,9 @@ export interface INonVirtualization<T = unknown> {
     componentSortDESC: Element | React.ReactNode | React.ReactNode[];
     classNamePointer: string;
     emptyPlaceholder?: Element | React.ReactNode | React.ReactNode[];
-    renderSubComponent?: (original: T, row: Row<T>) => React.ReactNode | React.ReactNode[];
+    renderSubComponent?: TTableRenderSubComponent<T>;
+    visibilityColumns: Pick<ITableColumnBreakpoint, 'columns' | 'realColumns'>;
+    classNameSubMobile: string;
 }
 export interface IVirtualizationProps extends Omit<ITableVirtualization, 'typeHight' | 'itemContent' | 'fixedHeaderContent' | 'itemSizeNames'> {
     typeHight?: 'min-max' | 'container';
@@ -48,7 +63,7 @@ export interface IVirtualizationProps extends Omit<ITableVirtualization, 'typeHi
 export interface IVirtualization<T = unknown> {
     tableInstance: ITableTanstack<T>;
     classNameWrapperTable?: string;
-    handlerRowClick?: (original: T, row: Row<T>) => void;
+    handlerRowClick?: TTableHandlerRowClick<T>;
     privillageRowClick?: boolean;
     virtualizationProps?: IVirtualizationProps;
     headerId?: string;
@@ -58,7 +73,9 @@ export interface IVirtualization<T = unknown> {
     componentSortDESC: Element | React.ReactNode | React.ReactNode[];
     classNamePointer: string;
     emptyPlaceholder?: Element | React.ReactNode | React.ReactNode[];
-    renderSubComponent?: (original: T, row: Row<T>) => React.ReactNode | React.ReactNode[];
+    renderSubComponent?: TTableRenderSubComponent<T>;
+    visibilityColumns: Pick<ITableColumnBreakpoint, 'columns' | 'realColumns'>;
+    classNameSubMobile: string;
 }
 export interface IVirtualizationHead extends React.HTMLAttributes<HTMLTableSectionElement> {
     context?: {
@@ -81,6 +98,11 @@ export interface ITableConfig {
         'laba-reguler': string;
         'laba-small': string;
     };
+    subMobile: {
+        'payhere-reguler': string;
+        'laba-reguler': string;
+        'laba-small': string;
+    };
     pointer: {
         'payhere-reguler': string;
         'laba-reguler': string;

package/dist/types-external/table.d.ts

@@ -8,5 +8,8 @@ declare module '@tanstack/react-table' {
     styleTh?: (header: Header<unknown, unknown>) => React.CSSProperties;
     colSpan?: (header: Header<unknown, unknown>) => number;
     rowSpan?: (header: Header<unknown, unknown>) => number;
+    styleTdLeftCellSubs?: (original: RowData, row: Row<unknown>) => React.CSSProperties;
+    styleTdRightCellSubs?: (original: RowData, row: Row<unknown>) => React.CSSProperties;
+    labelCellSubs?: (original: RowData, row: Row<unknown>) => React.ReactNode | string | React.ReactNode[];
   }
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "1mpacto-react-ui",
   "private": false,
-  "version": "0.2.0-beta.11",
+  "version": "0.2.0-beta.13",
   "type": "module",
   "engines": {
     "node": ">=20.19.4",