@natoora-libs/core 0.2.0-vini-dev-1 → 0.2.1-dev-doug-1

package/dist/TableDesktop-aJHXhRuv.d.cts

@@ -0,0 +1,126 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ChangeEvent, FC, RefObject, ReactNode, ComponentType } from 'react';
+import { SelectChangeEvent } from '@mui/material';
+
+type TableDesktopFooterProps = {
+    numPages: number;
+    page: number;
+    onPageChange: (event: ChangeEvent<unknown>, page: number) => void;
+    pageSize?: number;
+    pageSizeOptions?: number[];
+    onPageSizeChange?: (event: SelectChangeEvent<number>) => void;
+    refetchData?: () => Promise<unknown>;
+    isFetching: boolean;
+};
+declare const TableDesktopFooter: FC<TableDesktopFooterProps>;
+
+type BulkChanges = {
+    field: string;
+    value: string | number | boolean;
+    label: string | number | boolean;
+}[];
+type TableColumnConfigurationMenuProps = {
+    anchorEl: HTMLElement | null;
+    onCloseMenu: () => void;
+};
+type ExportCsvDialogProps = {
+    headCells: HeadCell[];
+    headerFilters: HeaderFilters;
+    totalDataCount?: number;
+    isOpen: boolean;
+    onCloseDialog: () => void;
+};
+type BulkChangesDialogProps = {
+    bulkChanges: BulkChanges;
+    selectedRows: (string | number)[];
+    shouldUpdateAll: boolean;
+    visibleEditableColumns: HeadCell[];
+    isBulkChangesDialogOpen: boolean;
+    onCloseDialog: () => void;
+    refetchData: () => Promise<unknown>;
+};
+type TableDesktopToolbarProps = {
+    toolbarLabel?: string;
+    headCells: HeadCell[];
+    headerFilters: HeaderFilters;
+    selectedRows: (string | number)[];
+    isDataEmpty: boolean;
+    totalDataCount?: number;
+    isRowsFromAllPagesSelected: boolean;
+    refetchData?: () => Promise<unknown>;
+    tableToolbarMenuButtonRef: RefObject<HTMLButtonElement | null>;
+    tableToolbarMenuAnchor: HTMLElement | null;
+    onClickToolbarMenuOpen: () => void;
+    onCloseMenu: () => void;
+    disableBulkChangesMode?: boolean;
+    isBulkChangesMode: boolean;
+    onChangeBulkChangesMode: (checked: boolean) => void;
+    renderExportCsvDialog?: (props: ExportCsvDialogProps) => ReactNode;
+    renderBulkChangesDialog?: (props: BulkChangesDialogProps) => ReactNode;
+    renderTableColumnConfigurationMenu?: (props: TableColumnConfigurationMenuProps) => ReactNode;
+    renderInfoIcons?: ReactNode;
+};
+declare const TableDesktopToolbar: FC<TableDesktopToolbarProps>;
+
+type Order = 'asc' | 'desc';
+type EditableCellType = 'select' | 'checkbox' | 'text' | 'numeric';
+type HeaderFilterObject = {
+    id: number | string;
+    [key: string]: number | string;
+};
+type HeaderFilterOptions = string[] | HeaderFilterObject[];
+type HeaderFilters = {
+    [key: string]: HeaderFilterOptions;
+};
+type HeadCell = {
+    id: string;
+    label?: string;
+    labelTooltip?: string;
+    fieldName?: string;
+    numeric?: boolean;
+    disablePadding?: boolean;
+    width?: number | string;
+    enabled?: boolean;
+    disableSort?: boolean;
+    renderHeader?: ReactNode;
+    editableCellType?: EditableCellType;
+    validateInput?: (value: string | null) => boolean;
+    onUpdateEditableCell?: (rowId: number, field: string, value: string | number | boolean, label: string | number | boolean) => void;
+    filterType?: "default" | "autocomplete" | "boolean";
+    filterOptions?: HeaderFilterOptions;
+    refetchFilterOptions?: () => void;
+    isFetchingFilterOptions?: boolean;
+    onAutocompleteSearch?: (value: string) => void;
+};
+type TableDesktopProps = {
+    data: any[];
+    headCells: HeadCell[];
+    RenderItem: ComponentType<any>;
+    renderToolbar?: (props: TableDesktopToolbarProps) => ReactNode;
+    renderFooter?: (props: {
+        refetchData: TableDesktopFooterProps['refetchData'];
+        isFetching: TableDesktopFooterProps['isFetching'];
+    }) => ReactNode;
+    appliedFilters?: any;
+    headerFilters?: HeaderFilters;
+    children?: ReactNode;
+    height?: number | string;
+    rowHeight?: number;
+    rowsPerPage?: number;
+    totalDataCount?: number;
+    isLoading?: boolean;
+    enableEditMode?: boolean;
+    disableInternalSort?: boolean;
+    updateSort?: (sortField: string, sortDir: Order) => void;
+    showClearFilterButton?: boolean;
+    handleClickOnClearFiltersButton?: () => void;
+    deleteItem?: (id: number, contentTypeName?: string, appTypeName?: string) => void;
+    keyField?: string;
+    tableLayout?: 'fixed' | 'auto';
+    onApplyFilters?: (updatedFilters: HeaderFilters, shouldSave: boolean) => void;
+    refetchData?: () => Promise<unknown>;
+    shouldShowCheckOnFilter?: (columnId: string, filterOption?: string | HeaderFilterObject) => boolean;
+};
+declare const TableDesktop: ({ data, headCells, RenderItem, renderToolbar, renderFooter, appliedFilters, headerFilters, children, height, rowHeight, rowsPerPage, totalDataCount, isLoading, enableEditMode, disableInternalSort, updateSort, showClearFilterButton, handleClickOnClearFiltersButton, deleteItem, keyField, tableLayout, onApplyFilters, shouldShowCheckOnFilter, refetchData, }: TableDesktopProps) => react_jsx_runtime.JSX.Element;
+
+export { type BulkChanges as B, type EditableCellType as E, type HeadCell as H, type Order as O, type TableDesktopProps as T, type HeaderFilters as a, type HeaderFilterOptions as b, type HeaderFilterObject as c, TableDesktop as d, TableDesktopFooter as e, type TableDesktopFooterProps as f, TableDesktopToolbar as g, type TableDesktopToolbarProps as h, type TableColumnConfigurationMenuProps as i, type BulkChangesDialogProps as j, type ExportCsvDialogProps as k };

package/dist/TableDesktop-aJHXhRuv.d.ts

@@ -0,0 +1,126 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ChangeEvent, FC, RefObject, ReactNode, ComponentType } from 'react';
+import { SelectChangeEvent } from '@mui/material';
+
+type TableDesktopFooterProps = {
+    numPages: number;
+    page: number;
+    onPageChange: (event: ChangeEvent<unknown>, page: number) => void;
+    pageSize?: number;
+    pageSizeOptions?: number[];
+    onPageSizeChange?: (event: SelectChangeEvent<number>) => void;
+    refetchData?: () => Promise<unknown>;
+    isFetching: boolean;
+};
+declare const TableDesktopFooter: FC<TableDesktopFooterProps>;
+
+type BulkChanges = {
+    field: string;
+    value: string | number | boolean;
+    label: string | number | boolean;
+}[];
+type TableColumnConfigurationMenuProps = {
+    anchorEl: HTMLElement | null;
+    onCloseMenu: () => void;
+};
+type ExportCsvDialogProps = {
+    headCells: HeadCell[];
+    headerFilters: HeaderFilters;
+    totalDataCount?: number;
+    isOpen: boolean;
+    onCloseDialog: () => void;
+};
+type BulkChangesDialogProps = {
+    bulkChanges: BulkChanges;
+    selectedRows: (string | number)[];
+    shouldUpdateAll: boolean;
+    visibleEditableColumns: HeadCell[];
+    isBulkChangesDialogOpen: boolean;
+    onCloseDialog: () => void;
+    refetchData: () => Promise<unknown>;
+};
+type TableDesktopToolbarProps = {
+    toolbarLabel?: string;
+    headCells: HeadCell[];
+    headerFilters: HeaderFilters;
+    selectedRows: (string | number)[];
+    isDataEmpty: boolean;
+    totalDataCount?: number;
+    isRowsFromAllPagesSelected: boolean;
+    refetchData?: () => Promise<unknown>;
+    tableToolbarMenuButtonRef: RefObject<HTMLButtonElement | null>;
+    tableToolbarMenuAnchor: HTMLElement | null;
+    onClickToolbarMenuOpen: () => void;
+    onCloseMenu: () => void;
+    disableBulkChangesMode?: boolean;
+    isBulkChangesMode: boolean;
+    onChangeBulkChangesMode: (checked: boolean) => void;
+    renderExportCsvDialog?: (props: ExportCsvDialogProps) => ReactNode;
+    renderBulkChangesDialog?: (props: BulkChangesDialogProps) => ReactNode;
+    renderTableColumnConfigurationMenu?: (props: TableColumnConfigurationMenuProps) => ReactNode;
+    renderInfoIcons?: ReactNode;
+};
+declare const TableDesktopToolbar: FC<TableDesktopToolbarProps>;
+
+type Order = 'asc' | 'desc';
+type EditableCellType = 'select' | 'checkbox' | 'text' | 'numeric';
+type HeaderFilterObject = {
+    id: number | string;
+    [key: string]: number | string;
+};
+type HeaderFilterOptions = string[] | HeaderFilterObject[];
+type HeaderFilters = {
+    [key: string]: HeaderFilterOptions;
+};
+type HeadCell = {
+    id: string;
+    label?: string;
+    labelTooltip?: string;
+    fieldName?: string;
+    numeric?: boolean;
+    disablePadding?: boolean;
+    width?: number | string;
+    enabled?: boolean;
+    disableSort?: boolean;
+    renderHeader?: ReactNode;
+    editableCellType?: EditableCellType;
+    validateInput?: (value: string | null) => boolean;
+    onUpdateEditableCell?: (rowId: number, field: string, value: string | number | boolean, label: string | number | boolean) => void;
+    filterType?: "default" | "autocomplete" | "boolean";
+    filterOptions?: HeaderFilterOptions;
+    refetchFilterOptions?: () => void;
+    isFetchingFilterOptions?: boolean;
+    onAutocompleteSearch?: (value: string) => void;
+};
+type TableDesktopProps = {
+    data: any[];
+    headCells: HeadCell[];
+    RenderItem: ComponentType<any>;
+    renderToolbar?: (props: TableDesktopToolbarProps) => ReactNode;
+    renderFooter?: (props: {
+        refetchData: TableDesktopFooterProps['refetchData'];
+        isFetching: TableDesktopFooterProps['isFetching'];
+    }) => ReactNode;
+    appliedFilters?: any;
+    headerFilters?: HeaderFilters;
+    children?: ReactNode;
+    height?: number | string;
+    rowHeight?: number;
+    rowsPerPage?: number;
+    totalDataCount?: number;
+    isLoading?: boolean;
+    enableEditMode?: boolean;
+    disableInternalSort?: boolean;
+    updateSort?: (sortField: string, sortDir: Order) => void;
+    showClearFilterButton?: boolean;
+    handleClickOnClearFiltersButton?: () => void;
+    deleteItem?: (id: number, contentTypeName?: string, appTypeName?: string) => void;
+    keyField?: string;
+    tableLayout?: 'fixed' | 'auto';
+    onApplyFilters?: (updatedFilters: HeaderFilters, shouldSave: boolean) => void;
+    refetchData?: () => Promise<unknown>;
+    shouldShowCheckOnFilter?: (columnId: string, filterOption?: string | HeaderFilterObject) => boolean;
+};
+declare const TableDesktop: ({ data, headCells, RenderItem, renderToolbar, renderFooter, appliedFilters, headerFilters, children, height, rowHeight, rowsPerPage, totalDataCount, isLoading, enableEditMode, disableInternalSort, updateSort, showClearFilterButton, handleClickOnClearFiltersButton, deleteItem, keyField, tableLayout, onApplyFilters, shouldShowCheckOnFilter, refetchData, }: TableDesktopProps) => react_jsx_runtime.JSX.Element;
+
+export { type BulkChanges as B, type EditableCellType as E, type HeadCell as H, type Order as O, type TableDesktopProps as T, type HeaderFilters as a, type HeaderFilterOptions as b, type HeaderFilterObject as c, TableDesktop as d, TableDesktopFooter as e, type TableDesktopFooterProps as f, TableDesktopToolbar as g, type TableDesktopToolbarProps as h, type TableColumnConfigurationMenuProps as i, type BulkChangesDialogProps as j, type ExportCsvDialogProps as k };

package/dist/chunk-IXEF6LYV.js

@@ -0,0 +1,33 @@
+// src/hooks/useDynamicScroll/useDynamicScroll.ts
+import { useCallback, useEffect, useState } from "react";
+var useDynamicScroll = ({
+  scrollRef,
+  scrollAmount = 300,
+  effectDependencies
+}) => {
+  const [isScrollable, setIsScrollable] = useState(false);
+  const checkIfScrollNeeded = useCallback(() => {
+    if (scrollRef.current) {
+      const { scrollWidth, clientWidth } = scrollRef.current;
+      setIsScrollable(scrollWidth > clientWidth);
+    }
+  }, []);
+  const scroll = (direction) => {
+    if (scrollRef?.current) {
+      scrollRef.current.scrollLeft += direction === "left" ? -scrollAmount : scrollAmount;
+    }
+  };
+  useEffect(() => {
+    checkIfScrollNeeded();
+    window.addEventListener("resize", checkIfScrollNeeded);
+    return () => {
+      window.removeEventListener("resize", checkIfScrollNeeded);
+    };
+  }, [checkIfScrollNeeded, ...effectDependencies]);
+  return { isScrollable, scroll };
+};
+
+export {
+  useDynamicScroll
+};
+//# sourceMappingURL=chunk-IXEF6LYV.js.map

package/dist/chunk-IXEF6LYV.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/hooks/useDynamicScroll/useDynamicScroll.ts"],"sourcesContent":["import { RefObject, useCallback, useEffect, useState } from 'react';\n\ntype useDynamicScrollParams = {\n  scrollRef: RefObject<HTMLDivElement | null>;\n  scrollAmount?: number;\n  effectDependencies: unknown[];\n};\n\nexport const useDynamicScroll = ({\n  scrollRef,\n  scrollAmount = 300,\n  effectDependencies,\n}: useDynamicScrollParams) => {\n  const [isScrollable, setIsScrollable] = useState(false);\n\n  const checkIfScrollNeeded = useCallback(() => {\n    if (scrollRef.current) {\n      const { scrollWidth, clientWidth } = scrollRef.current;\n      setIsScrollable(scrollWidth > clientWidth);\n    }\n  }, []);\n\n  const scroll = (direction: 'left' | 'right') => {\n    if (scrollRef?.current) {\n      scrollRef.current.scrollLeft +=\n        direction === 'left' ? -scrollAmount : scrollAmount;\n    }\n  };\n\n  useEffect(() => {\n    checkIfScrollNeeded();\n\n    window.addEventListener('resize', checkIfScrollNeeded);\n\n    return () => {\n      window.removeEventListener('resize', checkIfScrollNeeded);\n    };\n  }, [checkIfScrollNeeded, ...effectDependencies]);\n\n  return { isScrollable, scroll };\n};\n"],"mappings":";AAAA,SAAoB,aAAa,WAAW,gBAAgB;AAQrD,IAAM,mBAAmB,CAAC;AAAA,EAC/B;AAAA,EACA,eAAe;AAAA,EACf;AACF,MAA8B;AAC5B,QAAM,CAAC,cAAc,eAAe,IAAI,SAAS,KAAK;AAEtD,QAAM,sBAAsB,YAAY,MAAM;AAC5C,QAAI,UAAU,SAAS;AACrB,YAAM,EAAE,aAAa,YAAY,IAAI,UAAU;AAC/C,sBAAgB,cAAc,WAAW;AAAA,IAC3C;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,QAAM,SAAS,CAAC,cAAgC;AAC9C,QAAI,WAAW,SAAS;AACtB,gBAAU,QAAQ,cAChB,cAAc,SAAS,CAAC,eAAe;AAAA,IAC3C;AAAA,EACF;AAEA,YAAU,MAAM;AACd,wBAAoB;AAEpB,WAAO,iBAAiB,UAAU,mBAAmB;AAErD,WAAO,MAAM;AACX,aAAO,oBAAoB,UAAU,mBAAmB;AAAA,IAC1D;AAAA,EACF,GAAG,CAAC,qBAAqB,GAAG,kBAAkB,CAAC;AAE/C,SAAO,EAAE,cAAc,OAAO;AAChC;","names":[]}

package/dist/chunk-N3IUZVB7.js

@@ -0,0 +1,21 @@
+// src/utils/flattenTableFilters/flattenTableFilters.ts
+var getFlattenedFiltersLabels = (filters, fieldName) => {
+  return filters.map((value) => {
+    if (typeof value === "object") {
+      return value[fieldName] ?? "";
+    }
+    return value;
+  });
+};
+var getFlattenedFiltersIds = (filters) => Object.fromEntries(
+  Object.entries(filters).map(([id, values]) => [
+    id,
+    values.map((value) => typeof value === "object" ? value.id : value)
+  ])
+);
+
+export {
+  getFlattenedFiltersLabels,
+  getFlattenedFiltersIds
+};
+//# sourceMappingURL=chunk-N3IUZVB7.js.map

package/dist/chunk-N3IUZVB7.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/utils/flattenTableFilters/flattenTableFilters.ts"],"sourcesContent":["import {\n  HeaderFilterObject,\n  HeaderFilters,\n} from '@/components/TableDesktop/TableDesktop';\n\nexport type FlattenedFilterIds = {\n  [key: string]: (string | number)[];\n};\n\nexport const getFlattenedFiltersLabels = (\n  filters: string[] | HeaderFilterObject[],\n  fieldName: string,\n): (string | number)[] => {\n  return filters.map((value: string | HeaderFilterObject) => {\n    if (typeof value === 'object') {\n      return value[fieldName] ?? '';\n    }\n    return value;\n  });\n};\n\nexport const getFlattenedFiltersIds = (\n  filters: HeaderFilters,\n): FlattenedFilterIds =>\n  Object.fromEntries(\n    Object.entries(filters).map(([id, values]) => [\n      id,\n      values.map((value) => (typeof value === 'object' ? value.id : value)),\n    ]),\n  );\n"],"mappings":";AASO,IAAM,4BAA4B,CACvC,SACA,cACwB;AACxB,SAAO,QAAQ,IAAI,CAAC,UAAuC;AACzD,QAAI,OAAO,UAAU,UAAU;AAC7B,aAAO,MAAM,SAAS,KAAK;AAAA,IAC7B;AACA,WAAO;AAAA,EACT,CAAC;AACH;AAEO,IAAM,yBAAyB,CACpC,YAEA,OAAO;AAAA,EACL,OAAO,QAAQ,OAAO,EAAE,IAAI,CAAC,CAAC,IAAI,MAAM,MAAM;AAAA,IAC5C;AAAA,IACA,OAAO,IAAI,CAAC,UAAW,OAAO,UAAU,WAAW,MAAM,KAAK,KAAM;AAAA,EACtE,CAAC;AACH;","names":[]}