@zonos/amino 4.4.8 → 4.4.9

package/components/graph-matrix/GraphMatrix.d.ts

@@ -2,6 +2,7 @@ import { type ReactNode } from 'react';
 import { GraphQLSchema } from 'graphql';
 import type { ExecutionResultType, GraphiqlExecutionResult, HandleFetchFetcher } from "../../utils/_graphiqlFetcher";
 type GraphMatrixProps = {
+    customToolbar?: ReactNode;
     /**
      * @param fetcher
      * @description Custom fetcher, if not provided, the default fetcher (handleFetch - "src/utils/handleFetch.ts") will be used
@@ -20,10 +21,9 @@ type GraphMatrixProps = {
     schemaName: string;
     url: string;
     variables: string;
-    customToolbar?: ReactNode;
 };
 export declare const GraphMatrix: {
-    ({ fetcher, loadingComponent, onEditQuery, onEditVariables, onResultData, query, schema, schemaName, url, variables, customToolbar, }: GraphMatrixProps): JSX.Element;
+    ({ customToolbar, fetcher, loadingComponent, onEditQuery, onEditVariables, onResultData, query, schema, schemaName, url, variables, }: GraphMatrixProps): JSX.Element;
     ToolbarButton: import("react").ForwardRefExoticComponent<Pick<{
         label: string;
     } & import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement>, "label" | "key" | keyof import("react").ButtonHTMLAttributes<HTMLButtonElement>> & import("react").RefAttributes<HTMLButtonElement>>;

package/components/graph-matrix/GraphMatrix.js

@@ -1 +1 @@
-"use strict";var e=require("../../_tslib-fe391a2e.js"),r=require("react/jsx-runtime"),t=require("react"),i=require("@graphiql/react"),n=require("graphiql");require("graphql");var s=require("../../icons/EyeIcon.js"),a=require("../../icons/EyeOffIcon.js"),o=require("../../styles/constants/theme.js"),l=require("../../utils/hooks/_useGraphiqlExplorer.js"),u=require("../../utils/hooks/_useGraphiqlFetcher.js"),c=require("../../utils/hooks/_useGraphiqlStorage.js"),h=require("styled-components"),p=require("../nested-data-table/NestedDataTable.js"),q=require("../split-panel/SplitPanel.js"),d=require("./_GraphiqlContextWrapper.js"),j=require("./_LoadingIcon.js");function g(e){return e&&e.__esModule?e:{default:e}}require("../../icons/icon-base/_IconBase.js"),require("@graphiql/plugin-explorer"),require("swr"),require("../../utils/_graphiqlFetcher.js"),require("../../utils/handleFetch.js"),require("../../utils/hooks/useSwr.js"),require("lodash/kebabCase"),require("../../utils/hooks/useCurrentShema.js"),require("../../utils/hooks/useStorage.js"),require("../../utils/storage.js"),require("../button/Button.js"),require("../spinner/Spinner.js"),require("../button/RippleGroup.js"),require("framer-motion"),require("uuid"),require("../button/_Ripple.js"),require("../button/useRipple.js"),require("../rest-state/RestState.js"),require("../text/Text.js"),require("../nested-data-table/_TableData.js"),require("../../icons/ChevronRightCircleIcon.js"),require("../../utils/flattenRow.js"),require("../../utils/setupNestedData.js"),require("../../utils/truncateText.js"),require("../pivot-table/PivotTable.js"),require("react-data-grid"),require("../../icons/ChevronDownIcon.js"),require("../../icons/ChevronUpIcon.js"),require("../../utils/addIndex.js"),require("../tooltip/Tooltip.js"),require("@mui/material/styles"),require("@mui/material/Tooltip"),require("../stack/VStack.js"),require("../stack/Stack.js"),require("../../utils/hooks/useAminoTheme.js"),require("../nested-data-table/_Filter.js"),require("../../icons/FilterIcon.js"),require("../../utils/hooks/useDropdown.js"),require("@floating-ui/react-dom"),require("../select/MultiSelect.js"),require("../checkbox/Checkbox.js"),require("../../icons/CheckmarkIcon.js"),require("../../utils/getTestId.js"),require("../help-text/HelpText.js"),require("../select/_StyledReactSelect.js"),require("react-select"),require("../../icons/CheckCircleIcon.js"),require("../../icons/DoubleChevronIcon.js"),require("../../icons/RemoveCircleIcon.js"),require("../../icons/RemoveIcon.js"),require("react-split-it"),require("../../icons/custom/ZonosLogoIcon.js");var m,b,x,_=g(h),v=_.default.div(m||(m=e.__makeTemplateObject(["\n  height: 100%;\n  .graphiql-tab > .graphiql-tab-button {\n    outline: none;\n  }\n  .docExplorerWrap {\n    /* Built-in plugin height is set to 100% which prevents the plugin bar scrolling */\n    height: auto !important;\n    /* Don't cap explorer width */\n    width: auto !important;\n  }\n  .graphiql-explorer-graphql-arguments {\n    svg {\n      display: inline-block;\n    }\n  }\n\n  .graphiql-explorer-root > div {\n    overflow: auto !important;\n  }\n"],["\n  height: 100%;\n  .graphiql-tab > .graphiql-tab-button {\n    outline: none;\n  }\n  .docExplorerWrap {\n    /* Built-in plugin height is set to 100% which prevents the plugin bar scrolling */\n    height: auto !important;\n    /* Don't cap explorer width */\n    width: auto !important;\n  }\n  .graphiql-explorer-graphql-arguments {\n    svg {\n      display: inline-block;\n    }\n  }\n\n  .graphiql-explorer-root > div {\n    overflow: auto !important;\n  }\n"]))),f=_.default.div(b||(b=e.__makeTemplateObject(["\n  height: 100%;\n"],["\n  height: 100%;\n"]))),S=_.default.div(x||(x=e.__makeTemplateObject(["\n  height: 100vh;\n  overflow: auto;\n  padding: 0 ",";\n  display: flex;\n  flex-direction: column;\n"],["\n  height: 100vh;\n  overflow: auto;\n  padding: 0 ",";\n  display: flex;\n  flex-direction: column;\n"])),o.theme.space12),k=function(o){var h=o.fetcher,g=o.loadingComponent,m=o.onEditQuery,b=o.onEditVariables,x=o.onResultData,_=o.query,k=void 0===_?"":_,y=o.schema,C=o.schemaName,E=o.url,I=o.variables,T=void 0===I?"":I,w=o.customToolbar,F=e.__read(t.useState(null),2),D=F[0],G=F[1],R=e.__read(t.useState(null),2)[1],B=e.__read(t.useState(!1),2),O=B[0],L=B[1],N=e.__read(t.useState("first-time"),1)[0],A=e.__read(t.useState(!1),2),Q=A[0],W=A[1],M=e.__read(t.useState([1,0]),2),P=M[0],V=M[1],z=e.__read(t.useState(""),2),H=z[0],K=z[1],U=u.useGraphiqlFetcher({cachingKey:N,url:E,query:k,customFetcher:h||null,operationName:H}),Z=U.graphiqlFetcher,J=U.resultData,X=U.isLoading,Y=c.useGraphiqlStorage({defaultSchema:C});t.useEffect((function(){L(!!(null==D?void 0:D.isFetching)||X)}),[null==D?void 0:D.isFetching,L,X]),t.useEffect((function(){J&&x&&x(J)}),[x,J]);var $=l.useGraphiqlExplorer({onEdit:m,query:k});if(!y)return r.jsx(r.Fragment,{children:g||r.jsx(j.Loading,{})});var ee,re;return r.jsx(v,{children:r.jsxs(q.SplitPanel,e.__assign({sizes:P,onSetSizes:V,collapseAll:!Q},{children:[r.jsx(f,{children:r.jsx(n.GraphiQL,e.__assign({fetcher:Z,onEditOperationName:K,onEditQuery:m,onEditVariables:b,plugins:[$],query:k,variables:T,schema:y,toolbar:{additionalContent:r.jsxs(r.Fragment,{children:[r.jsx(i.ToolbarButton,e.__assign({label:Q?"Hide table":"Show table",onClick:function(){return W(!Q)}},{children:Q?r.jsx(a.EyeOffIcon,{color:"red600"}):r.jsx(s.EyeIcon,{color:"gray400"})})),w]})},storage:Y},{children:r.jsx(d.GraphiqlContextWrapper,e.__assign({setExecutionContext:G,setResponseEditorContext:R},{children:r.jsx(n.GraphiQL.Footer,{})}))}))}),(ee=null!==J?J.data:J,re=ee?Object.entries(ee):null,re?r.jsx(S,{children:re.map((function(t){var i=e.__read(t,2),n=i[0],s=i[1];return Array.isArray(s)||s?r.jsx(p.NestedDataTable,{isFetching:O,tableData:s,title:n},n):null}))}):null)]}))})};k.ToolbarButton=i.ToolbarButton,exports.GraphMatrix=k;
+"use strict";var e=require("../../_tslib-fe391a2e.js"),r=require("react/jsx-runtime"),t=require("react"),i=require("@graphiql/react"),n=require("graphiql");require("graphql");var s=require("../../icons/EyeIcon.js"),a=require("../../icons/EyeOffIcon.js"),o=require("../../styles/constants/theme.js"),l=require("../../utils/hooks/_useGraphiqlExplorer.js"),u=require("../../utils/hooks/_useGraphiqlFetcher.js"),c=require("../../utils/hooks/_useGraphiqlStorage.js"),h=require("styled-components"),p=require("../nested-data-table/NestedDataTable.js"),q=require("../split-panel/SplitPanel.js"),d=require("./_GraphiqlContextWrapper.js"),j=require("./_LoadingIcon.js");function g(e){return e&&e.__esModule?e:{default:e}}require("../../icons/icon-base/_IconBase.js"),require("@graphiql/plugin-explorer"),require("swr"),require("../../utils/_graphiqlFetcher.js"),require("../../utils/handleFetch.js"),require("../../utils/hooks/useSwr.js"),require("lodash/kebabCase"),require("../../utils/hooks/useCurrentShema.js"),require("../../utils/hooks/useStorage.js"),require("../../utils/storage.js"),require("../button/Button.js"),require("../spinner/Spinner.js"),require("../button/RippleGroup.js"),require("framer-motion"),require("uuid"),require("../button/_Ripple.js"),require("../button/useRipple.js"),require("../rest-state/RestState.js"),require("../text/Text.js"),require("../nested-data-table/_TableData.js"),require("../../icons/ChevronRightCircleIcon.js"),require("../../utils/flattenRow.js"),require("../../utils/setupNestedData.js"),require("../../utils/truncateText.js"),require("../pivot-table/PivotTable.js"),require("react-data-grid"),require("../../icons/ChevronDownIcon.js"),require("../../icons/ChevronUpIcon.js"),require("../../utils/addIndex.js"),require("../tooltip/Tooltip.js"),require("@mui/material/styles"),require("@mui/material/Tooltip"),require("../stack/VStack.js"),require("../stack/Stack.js"),require("../../utils/hooks/useAminoTheme.js"),require("../nested-data-table/_Filter.js"),require("../../icons/FilterIcon.js"),require("../../utils/hooks/useDropdown.js"),require("@floating-ui/react-dom"),require("../select/MultiSelect.js"),require("../checkbox/Checkbox.js"),require("../../icons/CheckmarkIcon.js"),require("../../utils/getTestId.js"),require("../help-text/HelpText.js"),require("../select/_StyledReactSelect.js"),require("react-select"),require("../../icons/CheckCircleIcon.js"),require("../../icons/DoubleChevronIcon.js"),require("../../icons/RemoveCircleIcon.js"),require("../../icons/RemoveIcon.js"),require("react-split-it"),require("../../icons/custom/ZonosLogoIcon.js");var m,b,x,_=g(h),v=_.default.div(m||(m=e.__makeTemplateObject(["\n  height: 100%;\n  .graphiql-tab > .graphiql-tab-button {\n    outline: none;\n  }\n  .docExplorerWrap {\n    /* Built-in plugin height is set to 100% which prevents the plugin bar scrolling */\n    height: auto !important;\n    /* Don't cap explorer width */\n    width: auto !important;\n  }\n  .graphiql-explorer-graphql-arguments {\n    svg {\n      display: inline-block;\n    }\n  }\n\n  .graphiql-explorer-root > div {\n    overflow: auto !important;\n  }\n"],["\n  height: 100%;\n  .graphiql-tab > .graphiql-tab-button {\n    outline: none;\n  }\n  .docExplorerWrap {\n    /* Built-in plugin height is set to 100% which prevents the plugin bar scrolling */\n    height: auto !important;\n    /* Don't cap explorer width */\n    width: auto !important;\n  }\n  .graphiql-explorer-graphql-arguments {\n    svg {\n      display: inline-block;\n    }\n  }\n\n  .graphiql-explorer-root > div {\n    overflow: auto !important;\n  }\n"]))),f=_.default.div(b||(b=e.__makeTemplateObject(["\n  height: 100%;\n"],["\n  height: 100%;\n"]))),S=_.default.div(x||(x=e.__makeTemplateObject(["\n  height: 100vh;\n  overflow: auto;\n  padding: 0 ",";\n  display: flex;\n  flex-direction: column;\n"],["\n  height: 100vh;\n  overflow: auto;\n  padding: 0 ",";\n  display: flex;\n  flex-direction: column;\n"])),o.theme.space12),k=function(o){var h=o.customToolbar,g=o.fetcher,m=o.loadingComponent,b=o.onEditQuery,x=o.onEditVariables,_=o.onResultData,k=o.query,y=void 0===k?"":k,C=o.schema,E=o.schemaName,I=o.url,T=o.variables,w=void 0===T?"":T,F=e.__read(t.useState(null),2),D=F[0],G=F[1],R=e.__read(t.useState(null),2)[1],B=e.__read(t.useState(!1),2),O=B[0],L=B[1],N=e.__read(t.useState("first-time"),1)[0],A=e.__read(t.useState(!1),2),Q=A[0],W=A[1],M=e.__read(t.useState([1,0]),2),P=M[0],V=M[1],z=e.__read(t.useState(""),2),H=z[0],K=z[1],U=u.useGraphiqlFetcher({cachingKey:N,url:I,query:y,customFetcher:g||null,operationName:H}),Z=U.graphiqlFetcher,J=U.resultData,X=U.isLoading,Y=c.useGraphiqlStorage({defaultSchema:E});t.useEffect((function(){L(!!(null==D?void 0:D.isFetching)||X)}),[null==D?void 0:D.isFetching,L,X]),t.useEffect((function(){J&&_&&_(J)}),[_,J]);var $=l.useGraphiqlExplorer({onEdit:b,query:y});if(!C)return r.jsx(r.Fragment,{children:m||r.jsx(j.Loading,{})});var ee,re;return r.jsx(v,{children:r.jsxs(q.SplitPanel,e.__assign({sizes:P,onSetSizes:V,collapseAll:!Q},{children:[r.jsx(f,{children:r.jsx(n.GraphiQL,e.__assign({fetcher:Z,onEditOperationName:K,onEditQuery:b,onEditVariables:x,plugins:[$],query:y,variables:w,schema:C,toolbar:{additionalContent:r.jsxs(r.Fragment,{children:[r.jsx(i.ToolbarButton,e.__assign({label:Q?"Hide table":"Show table",onClick:function(){return W(!Q)}},{children:Q?r.jsx(a.EyeOffIcon,{color:"red600"}):r.jsx(s.EyeIcon,{color:"gray400"})})),h]})},storage:Y},{children:r.jsx(d.GraphiqlContextWrapper,e.__assign({setExecutionContext:G,setResponseEditorContext:R},{children:r.jsx(n.GraphiQL.Footer,{})}))}))}),(ee=null!==J?J.data:J,re=ee?Object.entries(ee):null,re?r.jsx(S,{children:re.map((function(t){var i=e.__read(t,2),n=i[0],s=i[1];return Array.isArray(s)||s?r.jsx(p.NestedDataTable,{isFetching:O,tableData:s,title:n},n):null}))}):null)]}))})};k.ToolbarButton=i.ToolbarButton,exports.GraphMatrix=k;

package/components/nested-data-table/NestedDataTable.d.ts

@@ -1,25 +1,27 @@
 import { type ReactNode } from 'react';
 import type { Column } from 'react-data-grid';
 import { flattenRow } from "../../utils/flattenRow";
-import type { RowWithIndex } from '../pivot-table/PivotTable';
-type ColumnType = Column<RowWithIndex, Record<string, unknown>>;
-type ColumnFormatter = Parameters<NonNullable<ColumnType['formatter']>>;
-type Props<TRow = Record<string, unknown>> = {
+type ColumnType<TRow> = Column<TRow, Record<string, unknown>>;
+export type ColumnFormatter<TRow extends Record<string, unknown>> = NonNullable<ColumnType<TRow>['formatter']>;
+export type CustomColumnFormatters<TRow extends Record<string, unknown>> = {
+    [key in keyof TRow]?: ColumnFormatter<TRow>;
+};
+type Props<TRow extends Record<string, unknown>> = {
     currentPage?: number;
     /**
      * @param customFlattenRow
      * @description Custom flattenRow function, if not provided, the default flattenRow (flattenRow - "src/utils/flattenRow.ts") will be used
      */
     customFlattenRow?: typeof flattenRow;
-    customColumnFormatters?: {
-        [key in keyof TRow]?: (props: ColumnFormatter[0]) => ReactNode;
-    };
+    customColumnFormatters?: CustomColumnFormatters<TRow>;
     handlePagination?: (page: number) => void;
+    hasNextPage?: boolean;
+    hasPreviousPage?: boolean;
     isFetching: boolean;
     loadingComponent?: ReactNode;
     restState?: ReactNode;
     tableData: TRow[];
     title?: string;
 };
-export declare const NestedDataTable: <TRow extends Record<string, unknown>>({ currentPage, customFlattenRow, customColumnFormatters, handlePagination, isFetching, loadingComponent, restState, tableData, title, }: Props<TRow>) => JSX.Element;
+export declare const NestedDataTable: <TRow extends Record<string, unknown>>({ currentPage, customFlattenRow, customColumnFormatters, handlePagination, hasNextPage, hasPreviousPage, isFetching, loadingComponent, restState, tableData, title, }: Props<TRow>) => JSX.Element;
 export {};

package/components/nested-data-table/NestedDataTable.js

@@ -1 +1 @@
-"use strict";var e=require("../../_tslib-fe391a2e.js"),t=require("react/jsx-runtime"),r=require("react"),i=require("../../styles/constants/theme.js"),s=require("styled-components"),n=require("../button/Button.js"),u=require("../rest-state/RestState.js"),a=require("../text/Text.js"),o=require("./_TableData.js");function l(e){return e&&e.__esModule?e:{default:e}}require("../spinner/Spinner.js"),require("../button/RippleGroup.js"),require("framer-motion"),require("uuid"),require("../button/_Ripple.js"),require("../button/useRipple.js"),require("../../icons/ChevronRightCircleIcon.js"),require("../../icons/icon-base/_IconBase.js"),require("../../utils/flattenRow.js"),require("../../utils/setupNestedData.js"),require("../../utils/truncateText.js"),require("../pivot-table/PivotTable.js"),require("react-data-grid"),require("../../icons/ChevronDownIcon.js"),require("../../icons/ChevronUpIcon.js"),require("../../utils/addIndex.js"),require("../tooltip/Tooltip.js"),require("@mui/material/styles"),require("@mui/material/Tooltip"),require("../stack/VStack.js"),require("../stack/Stack.js"),require("../../utils/hooks/useAminoTheme.js"),require("../../utils/hooks/useStorage.js"),require("../../utils/storage.js"),require("swr"),require("../../utils/hooks/useSwr.js"),require("./_Filter.js"),require("../../icons/FilterIcon.js"),require("../../utils/hooks/useDropdown.js"),require("@floating-ui/react-dom"),require("../select/MultiSelect.js"),require("../checkbox/Checkbox.js"),require("../../icons/CheckmarkIcon.js"),require("../../utils/getTestId.js"),require("../help-text/HelpText.js"),require("../select/_StyledReactSelect.js"),require("react-select"),require("../../icons/CheckCircleIcon.js"),require("../../icons/DoubleChevronIcon.js"),require("../../icons/RemoveCircleIcon.js"),require("../../icons/RemoveIcon.js");var c,j,q,d=l(s),m=d.default.div(c||(c=e.__makeTemplateObject(["\n  height: 100%;\n"],["\n  height: 100%;\n"]))),p=d.default.div(j||(j=e.__makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  padding: ",";\n"],["\n  display: flex;\n  align-items: center;\n  padding: ",";\n"])),i.theme.space8),h=d.default.div(q||(q=e.__makeTemplateObject(["\n  display: flex;\n  flex: 1;\n  justify-content: flex-end;\n  align-items: center;\n  gap: ",";\n"],["\n  display: flex;\n  flex: 1;\n  justify-content: flex-end;\n  align-items: center;\n  gap: ",";\n"])),i.theme.space8);exports.NestedDataTable=function(i){var s=i.currentPage,l=i.customFlattenRow,c=i.customColumnFormatters,j=i.handlePagination,q=i.isFetching,d=i.loadingComponent,x=i.restState,g=i.tableData,b=i.title,f=r.useMemo((function(){return Array.isArray(g)?g:[g]}),[g]),_=!!j&&!!s&&g.length;return t.jsxs(m,{children:[t.jsxs(p,{children:[!!b&&t.jsx(a.Text,e.__assign({type:"header"},{children:b})),!!_&&t.jsxs(h,{children:[t.jsx(n.Button,e.__assign({intent:"outline",disabled:1===s,onClick:function(){j(s-1)}},{children:"Previous page"})),s,t.jsx(n.Button,e.__assign({onClick:function(){j(s+1)},intent:"outline"},{children:"Next page"}))]})]}),q?d?t.jsx(t.Fragment,{children:d}):t.jsx(u.RestState,{label:"Loading..."}):0===f.length?x?t.jsx(t.Fragment,{children:x}):t.jsx(u.RestState,{label:"No data available."}):t.jsx(o.TableData,{customColumnFormatters:c,tableDataArr:f,customFlattenRow:l})]})};
+"use strict";var e=require("../../_tslib-fe391a2e.js"),t=require("react/jsx-runtime"),r=require("react"),i=require("../../styles/constants/theme.js"),s=require("styled-components"),n=require("../button/Button.js"),a=require("../rest-state/RestState.js"),u=require("../text/Text.js"),o=require("./_TableData.js");function l(e){return e&&e.__esModule?e:{default:e}}require("../spinner/Spinner.js"),require("../button/RippleGroup.js"),require("framer-motion"),require("uuid"),require("../button/_Ripple.js"),require("../button/useRipple.js"),require("../../icons/ChevronRightCircleIcon.js"),require("../../icons/icon-base/_IconBase.js"),require("../../utils/flattenRow.js"),require("../../utils/setupNestedData.js"),require("../../utils/truncateText.js"),require("../pivot-table/PivotTable.js"),require("react-data-grid"),require("../../icons/ChevronDownIcon.js"),require("../../icons/ChevronUpIcon.js"),require("../../utils/addIndex.js"),require("../tooltip/Tooltip.js"),require("@mui/material/styles"),require("@mui/material/Tooltip"),require("../stack/VStack.js"),require("../stack/Stack.js"),require("../../utils/hooks/useAminoTheme.js"),require("../../utils/hooks/useStorage.js"),require("../../utils/storage.js"),require("swr"),require("../../utils/hooks/useSwr.js"),require("./_Filter.js"),require("../../icons/FilterIcon.js"),require("../../utils/hooks/useDropdown.js"),require("@floating-ui/react-dom"),require("../select/MultiSelect.js"),require("../checkbox/Checkbox.js"),require("../../icons/CheckmarkIcon.js"),require("../../utils/getTestId.js"),require("../help-text/HelpText.js"),require("../select/_StyledReactSelect.js"),require("react-select"),require("../../icons/CheckCircleIcon.js"),require("../../icons/DoubleChevronIcon.js"),require("../../icons/RemoveCircleIcon.js"),require("../../icons/RemoveIcon.js");var c,j,q,d=l(s),m=d.default.div(c||(c=e.__makeTemplateObject(["\n  height: 100%;\n"],["\n  height: 100%;\n"]))),h=d.default.div(j||(j=e.__makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  padding: ",";\n"],["\n  display: flex;\n  align-items: center;\n  padding: ",";\n"])),i.theme.space8),p=d.default.div(q||(q=e.__makeTemplateObject(["\n  display: flex;\n  flex: 1;\n  justify-content: flex-end;\n  align-items: center;\n  gap: ",";\n"],["\n  display: flex;\n  flex: 1;\n  justify-content: flex-end;\n  align-items: center;\n  gap: ",";\n"])),i.theme.space8);exports.NestedDataTable=function(i){var s=i.currentPage,l=i.customFlattenRow,c=i.customColumnFormatters,j=i.handlePagination,q=i.hasNextPage,d=i.hasPreviousPage,g=i.isFetching,x=i.loadingComponent,b=i.restState,f=i.tableData,_=i.title,k=r.useMemo((function(){return Array.isArray(f)?f:[f]}),[f]),v=!!j&&!!s&&f.length;return t.jsxs(m,{children:[t.jsxs(h,{children:[!!_&&t.jsx(u.Text,e.__assign({type:"header"},{children:_})),!!v&&t.jsxs(p,{children:[t.jsx(n.Button,e.__assign({intent:"outline",disabled:1===s||!d,onClick:function(){d&&j(s-1)}},{children:"Previous page"})),s,t.jsx(n.Button,e.__assign({disabled:!q,onClick:function(){q&&j(s+1)},intent:"outline"},{children:"Next page"}))]})]}),g?x?t.jsx(t.Fragment,{children:x}):t.jsx(a.RestState,{label:"Loading..."}):0===k.length?b?t.jsx(t.Fragment,{children:b}):t.jsx(a.RestState,{label:"No data available."}):t.jsx(o.TableData,{customColumnFormatters:c,tableDataArr:k,customFlattenRow:l})]})};

package/components/nested-data-table/_TableData.js

@@ -1 +1 @@
-"use strict";var e=require("../../_tslib-fe391a2e.js"),n=require("react/jsx-runtime"),t=require("react"),r=require("../../icons/ChevronRightCircleIcon.js"),i=require("../../styles/constants/theme.js"),s=require("../../utils/flattenRow.js"),a=require("../../utils/setupNestedData.js"),o=require("../../utils/truncateText.js"),u=require("styled-components"),l=require("../button/Button.js"),c=require("../pivot-table/PivotTable.js"),d=require("../tooltip/Tooltip.js"),p=require("./_Filter.js");function m(e){return e&&e.__esModule?e:{default:e}}require("../../icons/icon-base/_IconBase.js"),require("../spinner/Spinner.js"),require("../button/RippleGroup.js"),require("framer-motion"),require("uuid"),require("../button/_Ripple.js"),require("../button/useRipple.js"),require("react-data-grid"),require("../../icons/ChevronDownIcon.js"),require("../../icons/ChevronUpIcon.js"),require("../../utils/addIndex.js"),require("@mui/material/styles"),require("@mui/material/Tooltip"),require("../stack/VStack.js"),require("../stack/Stack.js"),require("../text/Text.js"),require("../../utils/hooks/useAminoTheme.js"),require("../../utils/hooks/useStorage.js"),require("../../utils/storage.js"),require("swr"),require("../../utils/hooks/useSwr.js"),require("../../icons/FilterIcon.js"),require("../../utils/hooks/useDropdown.js"),require("@floating-ui/react-dom"),require("../select/MultiSelect.js"),require("../checkbox/Checkbox.js"),require("../../icons/CheckmarkIcon.js"),require("../../utils/getTestId.js"),require("../help-text/HelpText.js"),require("../select/_StyledReactSelect.js"),require("react-select"),require("../../icons/CheckCircleIcon.js"),require("../../icons/DoubleChevronIcon.js"),require("../../icons/RemoveCircleIcon.js"),require("../../icons/RemoveIcon.js");var j,f,h,g=m(u),q=g.default.div(j||(j=e.__makeTemplateObject(["\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n  margin-bottom: var(--amino-space-12);\n"],["\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n  margin-bottom: var(--amino-space-12);\n"]))),x=g.default.div(f||(f=e.__makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  height: 100%;\n  svg {\n    transition: 0.3s all ease;\n  }\n  .expanding-button {\n    svg {\n      transform: rotate(90deg);\n    }\n  }\n"],["\n  display: flex;\n  align-items: center;\n  height: 100%;\n  svg {\n    transition: 0.3s all ease;\n  }\n  .expanding-button {\n    svg {\n      transform: rotate(90deg);\n    }\n  }\n"]))),_=g.default.div(h||(h=e.__makeTemplateObject(["\n  overflow: auto;\n  height: 100%;\n  .expanding {\n    background-color: ",";\n  }\n  & & {\n    padding: "," "," ",";\n  }\n"],["\n  overflow: auto;\n  height: 100%;\n  .expanding {\n    background-color: ",";\n  }\n  & & {\n    padding: "," "," ",";\n  }\n"])),i.theme.gray50,i.theme.space4,i.theme.space12,i.theme.space24),v=function(i){var u=i.customFlattenRow,m=i.noFilter,j=i.tableDataArr,f=i.customColumnFormatters,h=u||s.flattenRow,g=e.__read(t.useState([]),2),b=g[0],y=g[1],k=t.useCallback((function(){return j.map((function(e){var n=Object.entries(e).reduce((function(e,n){return h({currentVal:n,prev:e})}),{});return a.setupNestedData(n)}))}),[h,j]),C=e.__read(t.useState(k()),2),w=C[0],D=C[1];t.useEffect((function(){j&&D(k())}),[k,j]);var R=t.useCallback((function(t){var i=t.row,s=t.column,a=t.onRowChange,c=i[s.key];if(Array.isArray(c)){var p=0===c.length,m=i._expandedKey===s.key;return n.jsx(x,{children:n.jsx(d.Tooltip,e.__assign({subtitle:"This list has no items.",showTooltip:p},{children:n.jsx(l.Button,{className:m?"expanding-button":"",intent:"subtle",disabled:p,onClick:function(){return a(e.__assign(e.__assign({},i),{_expandedKey:m?"":s.key}))},icon:n.jsx(r.ChevronRightCircleIcon,{})})}))})}return i._expandedData&&i._expandedData.length>0?n.jsx(v,{customFlattenRow:u,noFilter:!0,tableDataArr:i._expandedData,customColumnFormatters:f}):"string"==typeof c?o.truncateText({text:c,length:40,addEllipsis:!0}):c}),[f,u]),T=t.useMemo((function(){return Object.entries(w.find(Boolean)||{}).filter((function(n){var t=e.__read(n,1)[0];return"key"!==t&&!t.startsWith("_")})).flatMap((function(n){var t=e.__read(n,1)[0];return[{key:t,name:t,formatter:(null==f?void 0:f[t])||R}]}))}),[f,R,w]),I=t.useMemo((function(){var n=T.filter((function(e){return!b.includes(e.key)}));return n.map((function(t){return e.__assign(e.__assign({},t),{cellClass:function(e){return e._expandedKey===t.key||e._expandedData.length>0?"expanding":""},colSpan:function(e){return"ROW"===e.type&&e.row._expandedData.length>0?n.filter((function(e){return!e.key.startsWith("_")})).length:void 0}})}))}),[T,b]);return n.jsxs(_,{children:[n.jsx(q,{children:!m&&n.jsx(p.Filter,{columns:T,hiddenColumns:b,setHiddenColumns:y})}),n.jsx(c.PivotTable,{headerRowHeight:40,rowHeight:function(e){var n,t;return"ROW"===e.type&&(null===(t=null===(n=e.row)||void 0===n?void 0:n._expandedData)||void 0===t?void 0:t.length)>0?300:45},tableHeight:"100%",rows:w,onRowsChange:function(e,n){var t=n.indexes[0],r=void 0!==t?e[t]:null;if(r&&void 0!==t){var i=r[r._expandedKey];if(i&&Array.isArray(i)){var s=e[t+1],a=(null==s?void 0:s._expandedData)&&s._expandedData.length>0,o=i[0],u="object"==typeof o&&o?i:i.map((function(e){return{item:e}}));e.splice(t+1,a?1:0,{_expandedData:u,_expandedKey:""})}else e.splice(t+1,1);D(e)}},columns:I,defaultColumnOptions:{sortable:!1,resizable:!0}})]})};exports.TableData=v;
+"use strict";var e=require("../../_tslib-fe391a2e.js"),n=require("react/jsx-runtime"),t=require("react"),r=require("../../icons/ChevronRightCircleIcon.js"),i=require("../../styles/constants/theme.js"),s=require("../../utils/flattenRow.js"),a=require("../../utils/setupNestedData.js"),o=require("../../utils/truncateText.js"),u=require("styled-components"),l=require("../button/Button.js"),c=require("../pivot-table/PivotTable.js"),d=require("../tooltip/Tooltip.js"),p=require("./_Filter.js");function m(e){return e&&e.__esModule?e:{default:e}}require("../../icons/icon-base/_IconBase.js"),require("../spinner/Spinner.js"),require("../button/RippleGroup.js"),require("framer-motion"),require("uuid"),require("../button/_Ripple.js"),require("../button/useRipple.js"),require("react-data-grid"),require("../../icons/ChevronDownIcon.js"),require("../../icons/ChevronUpIcon.js"),require("../../utils/addIndex.js"),require("@mui/material/styles"),require("@mui/material/Tooltip"),require("../stack/VStack.js"),require("../stack/Stack.js"),require("../text/Text.js"),require("../../utils/hooks/useAminoTheme.js"),require("../../utils/hooks/useStorage.js"),require("../../utils/storage.js"),require("swr"),require("../../utils/hooks/useSwr.js"),require("../../icons/FilterIcon.js"),require("../../utils/hooks/useDropdown.js"),require("@floating-ui/react-dom"),require("../select/MultiSelect.js"),require("../checkbox/Checkbox.js"),require("../../icons/CheckmarkIcon.js"),require("../../utils/getTestId.js"),require("../help-text/HelpText.js"),require("../select/_StyledReactSelect.js"),require("react-select"),require("../../icons/CheckCircleIcon.js"),require("../../icons/DoubleChevronIcon.js"),require("../../icons/RemoveCircleIcon.js"),require("../../icons/RemoveIcon.js");var j,f,g,h=m(u),q=h.default.div(j||(j=e.__makeTemplateObject(["\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n  margin-bottom: var(--amino-space-12);\n"],["\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n  margin-bottom: var(--amino-space-12);\n"]))),x=h.default.div(f||(f=e.__makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  height: 100%;\n  svg {\n    transition: 0.3s all ease;\n  }\n  .expanding-button {\n    svg {\n      transform: rotate(90deg);\n    }\n  }\n"],["\n  display: flex;\n  align-items: center;\n  height: 100%;\n  svg {\n    transition: 0.3s all ease;\n  }\n  .expanding-button {\n    svg {\n      transform: rotate(90deg);\n    }\n  }\n"]))),_=h.default.div(g||(g=e.__makeTemplateObject(["\n  .expanding {\n    background-color: ",";\n  }\n  & & {\n    padding: "," "," ",";\n  }\n"],["\n  .expanding {\n    background-color: ",";\n  }\n  & & {\n    padding: "," "," ",";\n  }\n"])),i.theme.gray50,i.theme.space4,i.theme.space12,i.theme.space24),v=function(i){var u=i.customFlattenRow,m=i.noFilter,j=i.tableDataArr,f=i.customColumnFormatters,g=u||s.flattenRow,h=e.__read(t.useState([]),2),b=h[0],y=h[1],k=t.useCallback((function(){return j.map((function(e){var n=Object.entries(e).reduce((function(e,n){return g({currentVal:n,prev:e})}),{});return a.setupNestedData(n)}))}),[g,j]),C=e.__read(t.useState(k()),2),w=C[0],D=C[1];t.useEffect((function(){j&&D(k())}),[k,j]);var R=t.useCallback((function(t){var i=t.row,s=t.column,a=t.onRowChange,c=i[s.key];if(Array.isArray(c)){var p=0===c.length,m=i._expandedKey===s.key;return n.jsx(x,{children:n.jsx(d.Tooltip,e.__assign({subtitle:"This list has no items.",showTooltip:p},{children:n.jsx(l.Button,{className:m?"expanding-button":"",intent:"subtle",disabled:p,onClick:function(){return a(e.__assign(e.__assign({},i),{_expandedKey:m?"":s.key}))},icon:n.jsx(r.ChevronRightCircleIcon,{})})}))})}return i._expandedData&&i._expandedData.length>0?n.jsx(v,{customFlattenRow:u,noFilter:!0,tableDataArr:i._expandedData,customColumnFormatters:f}):"string"==typeof c?o.truncateText({text:c,length:40,addEllipsis:!0}):c}),[f,u]),T=t.useMemo((function(){return Object.entries(w.find(Boolean)||{}).filter((function(n){var t=e.__read(n,1)[0];return"key"!==t&&!t.startsWith("_")})).flatMap((function(n){var t=e.__read(n,1)[0];return[{key:t,name:t,formatter:(null==f?void 0:f[t])||R}]}))}),[f,R,w]),I=t.useMemo((function(){var n=T.filter((function(e){return!b.includes(e.key)}));return n.map((function(t){return e.__assign(e.__assign({},t),{cellClass:function(e){return e._expandedKey===t.key||e._expandedData.length>0?"expanding":""},colSpan:function(e){return"ROW"===e.type&&e.row._expandedData.length>0?n.filter((function(e){return!e.key.startsWith("_")})).length:void 0}})}))}),[T,b]);return n.jsxs(_,{children:[n.jsx(q,{children:!m&&n.jsx(p.Filter,{columns:T,hiddenColumns:b,setHiddenColumns:y})}),n.jsx(c.PivotTable,{headerRowHeight:40,rowHeight:function(e){var n,t;return"ROW"===e.type&&(null===(t=null===(n=e.row)||void 0===n?void 0:n._expandedData)||void 0===t?void 0:t.length)>0?300:45},tableHeight:"100%",rows:w,onRowsChange:function(e,n){var t=n.indexes[0],r=void 0!==t?e[t]:null;if(r&&void 0!==t){var i=r[r._expandedKey];if(i&&Array.isArray(i)){var s=e[t+1],a=(null==s?void 0:s._expandedData)&&s._expandedData.length>0,o=i[0],u="object"==typeof o&&o?i:i.map((function(e){return{item:e}}));e.splice(t+1,a?1:0,{_expandedData:u,_expandedKey:""})}else e.splice(t+1,1);D(e)}},columns:I,defaultColumnOptions:{sortable:!1,resizable:!0}})]})};exports.TableData=v;

package/components/pivot-table/PivotTable.d.ts

@@ -20,7 +20,7 @@ export type NestedRowData = {
     _expandedData: Record<string, unknown>[];
     _expandedKey: string;
 };
-export type RowWithIndex = RowData & {
+export type RowWithIndex<Row extends RowData = RowData> = Row & {
     _itemIndex?: number;
 } & NestedRowData;
 type Props<TRow extends RowWithIndex, TSummaryRow extends unknown, TRowKey extends KeyValue> = Omit<DataGridProps<TRow, TSummaryRow, TRowKey>, keyof OverrideProps<TRow, TSummaryRow>> & OverrideProps<TRow, TSummaryRow>;
@@ -30,5 +30,5 @@ type Props<TRow extends RowWithIndex, TSummaryRow extends unknown, TRowKey exten
  * @documentation https://adazzle.github.io/react-data-grid/#/grouping
  * @example https://github.com/adazzle/react-data-grid/tree/main/website
  */
-export declare const PivotTable: <TRow extends RowWithIndex, TSummaryRow = unknown, TRowKey extends KeyValue = KeyValue>({ rows, columns, tableHeight, sortColumns: _sortColumns, onSortColumnsChange, renderers: _renderers, ...rest }: Props<TRow, TSummaryRow, TRowKey>) => JSX.Element;
+export declare const PivotTable: <TRow extends RowWithIndex<RowData>, TSummaryRow = unknown, TRowKey extends KeyValue = KeyValue>({ rows, columns, tableHeight, sortColumns: _sortColumns, onSortColumnsChange, renderers: _renderers, ...rest }: Props<TRow, TSummaryRow, TRowKey>) => JSX.Element;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zonos/amino",
-  "version": "4.4.8",
+  "version": "4.4.9",
   "description": "Core UI components for Amino",
   "repository": "git@github.com:Zonos/amino.git",
   "license": "MIT",