@overmap-ai/blocks 1.0.26 → 1.0.27
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.
- package/dist/blocks.js +37 -32
- package/dist/blocks.js.map +1 -1
- package/dist/blocks.umd.cjs +52 -42
- package/dist/blocks.umd.cjs.map +1 -1
- package/package.json +2 -2
package/dist/blocks.umd.cjs
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
(function(global, factory) {
|
|
2
|
-
typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("react/jsx-runtime"), require("@radix-ui/themes"), require("react"), require("react-responsive"), require("@radix-ui/react-icons"), require("@radix-ui/react-context-menu"), require("@radix-ui/react-dropdown-menu"), require("react-device-detect"), require("@radix-ui/react-dialog"), require("re-resizable"), require("react-transition-group"), require("react-dom"), require("@radix-ui/react-slot"), require("@radix-ui/react-dismissable-layer"), require("@radix-ui/react-toggle-group"), require("@radix-ui/react-toolbar"), require("@radix-ui/react-toast"), require("react-error-boundary"), require("feather-icons-react")
|
|
3
|
-
})(this, function(exports2, jsxRuntime, themes, React, reactResponsive, reactIcons, RadixContextMenu, RadixDropdownMenu, reactDeviceDetect, RadixDialogPrimitive, reResizable, reactTransitionGroup, ReactDOM, reactSlot, reactDismissableLayer, reactToggleGroup, reactToolbar, RadixToast, reactErrorBoundary, FeatherIcon
|
|
2
|
+
typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("react/jsx-runtime"), require("@radix-ui/themes"), require("react"), require("react-responsive"), require("@radix-ui/react-icons"), require("@radix-ui/react-context-menu"), require("@radix-ui/react-dropdown-menu"), require("react-device-detect"), require("@radix-ui/react-dialog"), require("re-resizable"), require("react-transition-group"), require("react-dom"), require("@radix-ui/react-slot"), require("@radix-ui/react-dismissable-layer"), require("@radix-ui/react-toggle-group"), require("@radix-ui/react-toolbar"), require("@radix-ui/react-toast"), require("react-error-boundary"), require("feather-icons-react")) : typeof define === "function" && define.amd ? define(["exports", "react/jsx-runtime", "@radix-ui/themes", "react", "react-responsive", "@radix-ui/react-icons", "@radix-ui/react-context-menu", "@radix-ui/react-dropdown-menu", "react-device-detect", "@radix-ui/react-dialog", "re-resizable", "react-transition-group", "react-dom", "@radix-ui/react-slot", "@radix-ui/react-dismissable-layer", "@radix-ui/react-toggle-group", "@radix-ui/react-toolbar", "@radix-ui/react-toast", "react-error-boundary", "feather-icons-react"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.blocks = {}, global.jsxRuntime, global.themes, global.React, global.reactResponsive, global.reactIcons, global.RadixContextMenu, global.RadixDropdownMenu, global.reactDeviceDetect, global.RadixDialogPrimitive, global.reResizable, global.reactTransitionGroup, global.ReactDOM, global.reactSlot, global.reactDismissableLayer, global.reactToggleGroup, global.reactToolbar, global.RadixToast, global.reactErrorBoundary, global.FeatherIcon));
|
|
3
|
+
})(this, function(exports2, jsxRuntime, themes, React, reactResponsive, reactIcons, RadixContextMenu, RadixDropdownMenu, reactDeviceDetect, RadixDialogPrimitive, reResizable, reactTransitionGroup, ReactDOM, reactSlot, reactDismissableLayer, reactToggleGroup, reactToolbar, RadixToast, reactErrorBoundary, FeatherIcon) {
|
|
4
4
|
"use strict";
|
|
5
5
|
function _interopNamespaceDefault(e) {
|
|
6
6
|
const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
|
|
@@ -95,11 +95,11 @@
|
|
|
95
95
|
info: "gray"
|
|
96
96
|
};
|
|
97
97
|
const useSeverityColor = (severity) => {
|
|
98
|
-
const
|
|
98
|
+
const theme2 = themes.useThemeContext();
|
|
99
99
|
if (!severity)
|
|
100
100
|
return void 0;
|
|
101
101
|
if (severity === "primary")
|
|
102
|
-
return
|
|
102
|
+
return theme2.accentColor;
|
|
103
103
|
return nonThemeSeverityMapping[severity];
|
|
104
104
|
};
|
|
105
105
|
const useViewportSize = () => {
|
|
@@ -3560,7 +3560,7 @@
|
|
|
3560
3560
|
const tableContainer = "_tableContainer_5i91d_25";
|
|
3561
3561
|
const searchContainer = "_searchContainer_5i91d_30";
|
|
3562
3562
|
const columnFilterSelect = "_columnFilterSelect_5i91d_40";
|
|
3563
|
-
const table = "_table_5i91d_21";
|
|
3563
|
+
const table$1 = "_table_5i91d_21";
|
|
3564
3564
|
const tableHeaderCell = "_tableHeaderCell_5i91d_58";
|
|
3565
3565
|
const showSortIcon = "_showSortIcon_5i91d_74";
|
|
3566
3566
|
const tableRow = "_tableRow_5i91d_78";
|
|
@@ -3579,7 +3579,7 @@
|
|
|
3579
3579
|
tableContainer,
|
|
3580
3580
|
searchContainer,
|
|
3581
3581
|
columnFilterSelect,
|
|
3582
|
-
table,
|
|
3582
|
+
table: table$1,
|
|
3583
3583
|
tableHeaderCell,
|
|
3584
3584
|
showSortIcon,
|
|
3585
3585
|
tableRow,
|
|
@@ -3591,6 +3591,16 @@
|
|
|
3591
3591
|
pageText,
|
|
3592
3592
|
descriptionSecondLine
|
|
3593
3593
|
};
|
|
3594
|
+
const table = import("@overmap-ai/react-table-library/table.js");
|
|
3595
|
+
const { Body, Cell, Header, HeaderCell, HeaderRow, Row, Table: ReactLibraryTable } = table;
|
|
3596
|
+
const theme = import("@overmap-ai/react-table-library/theme.js");
|
|
3597
|
+
const { useTheme } = theme;
|
|
3598
|
+
const sort = import("@overmap-ai/react-table-library/sort.js");
|
|
3599
|
+
const { HeaderCellSort, useSort } = sort;
|
|
3600
|
+
const select = import("@overmap-ai/react-table-library/select.js");
|
|
3601
|
+
const { CellSelect, HeaderCellSelect, SelectClickTypes, SelectTypes, useRowSelect } = select;
|
|
3602
|
+
const pagination = import("@overmap-ai/react-table-library/pagination.js");
|
|
3603
|
+
const { usePagination } = pagination;
|
|
3594
3604
|
const _Table = React.forwardRef(function Table2(props, ref) {
|
|
3595
3605
|
var _a;
|
|
3596
3606
|
const {
|
|
@@ -3739,7 +3749,7 @@
|
|
|
3739
3749
|
setSearch(e.target.value);
|
|
3740
3750
|
}, []);
|
|
3741
3751
|
const tableData = { nodes: rows };
|
|
3742
|
-
const tableSelect =
|
|
3752
|
+
const tableSelect = useRowSelect(
|
|
3743
3753
|
tableData,
|
|
3744
3754
|
{
|
|
3745
3755
|
onChange: (_action, state) => {
|
|
@@ -3747,13 +3757,13 @@
|
|
|
3747
3757
|
}
|
|
3748
3758
|
},
|
|
3749
3759
|
{
|
|
3750
|
-
rowSelect:
|
|
3751
|
-
buttonSelect:
|
|
3752
|
-
clickType:
|
|
3760
|
+
rowSelect: SelectTypes.MultiSelect,
|
|
3761
|
+
buttonSelect: SelectTypes.MultiSelect,
|
|
3762
|
+
clickType: SelectClickTypes.ButtonClick,
|
|
3753
3763
|
isCarryForward: false
|
|
3754
3764
|
}
|
|
3755
3765
|
);
|
|
3756
|
-
const
|
|
3766
|
+
const pagination2 = usePagination(
|
|
3757
3767
|
tableData,
|
|
3758
3768
|
{
|
|
3759
3769
|
state: {
|
|
@@ -3765,7 +3775,7 @@
|
|
|
3765
3775
|
isServer: false
|
|
3766
3776
|
}
|
|
3767
3777
|
);
|
|
3768
|
-
const
|
|
3778
|
+
const sort2 = useSort(
|
|
3769
3779
|
tableData,
|
|
3770
3780
|
{
|
|
3771
3781
|
onChange: (_action, state) => {
|
|
@@ -3850,7 +3860,7 @@
|
|
|
3850
3860
|
[columnFilterValues, columns, getFilterValues]
|
|
3851
3861
|
);
|
|
3852
3862
|
const columnCells = columnsData.map((column) => {
|
|
3853
|
-
const Component = column.sort ?
|
|
3863
|
+
const Component = column.sort ? HeaderCellSort : HeaderCell;
|
|
3854
3864
|
let firstLine = column.label;
|
|
3855
3865
|
let secondLine = void 0;
|
|
3856
3866
|
if (column.label && typeof column.label === "string") {
|
|
@@ -3882,7 +3892,7 @@
|
|
|
3882
3892
|
});
|
|
3883
3893
|
const SelectedModeButton = reactDeviceDetect.isMobile ? IconButton : Button2;
|
|
3884
3894
|
const layout = React.useMemo(() => ({ custom: true, ...fixHeader && { fixedHeader: true } }), [fixHeader]);
|
|
3885
|
-
const
|
|
3895
|
+
const theme2 = useTheme({
|
|
3886
3896
|
Table: `
|
|
3887
3897
|
--data-table-library_grid-template-columns: ${gridTemplateColumns} !important;
|
|
3888
3898
|
`,
|
|
@@ -3905,14 +3915,14 @@
|
|
|
3905
3915
|
if (showPageNavigation) {
|
|
3906
3916
|
const numTotalPages = Math.ceil(rows.length / numRowsPerPage);
|
|
3907
3917
|
setTotalPages(numTotalPages);
|
|
3908
|
-
if (
|
|
3909
|
-
|
|
3918
|
+
if (pagination2.state.page < 0) {
|
|
3919
|
+
pagination2.fns.onSetPage(0);
|
|
3910
3920
|
}
|
|
3911
|
-
if (
|
|
3912
|
-
|
|
3921
|
+
if (pagination2.state.page > numTotalPages - 1) {
|
|
3922
|
+
pagination2.fns.onSetPage(numTotalPages - 1);
|
|
3913
3923
|
}
|
|
3914
3924
|
}
|
|
3915
|
-
}, [rowsPerPage, rows.length, numRowsPerPage,
|
|
3925
|
+
}, [rowsPerPage, rows.length, numRowsPerPage, pagination2, showPageNavigation]);
|
|
3916
3926
|
return /* @__PURE__ */ jsxRuntime.jsxs(themes.Flex, { className: classNames({ [styles$1.outerTableContainer]: showContainer }), direction: "column", height: "100%", children: [
|
|
3917
3927
|
(!!title || !!description) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles$1.headerContainer, children: [
|
|
3918
3928
|
!!title && /* @__PURE__ */ jsxRuntime.jsx(Text$1, { weight: "bold", size: "5", children: title }),
|
|
@@ -3945,7 +3955,7 @@
|
|
|
3945
3955
|
color: "crimson",
|
|
3946
3956
|
onClick: () => {
|
|
3947
3957
|
setColumnFilterValues(defaultColumnFilterValues);
|
|
3948
|
-
|
|
3958
|
+
pagination2.fns.onSetPage(0);
|
|
3949
3959
|
},
|
|
3950
3960
|
"aria-label": "Clear filters",
|
|
3951
3961
|
children: /* @__PURE__ */ jsxRuntime.jsx(reactIcons.Cross2Icon, {})
|
|
@@ -3966,25 +3976,25 @@
|
|
|
3966
3976
|
] }),
|
|
3967
3977
|
children,
|
|
3968
3978
|
/* @__PURE__ */ jsxRuntime.jsx("div", { className: styles$1.tableContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
3969
|
-
|
|
3979
|
+
ReactLibraryTable,
|
|
3970
3980
|
{
|
|
3971
3981
|
className: classNames(styles$1.table, className),
|
|
3972
3982
|
data: tableData,
|
|
3973
|
-
theme,
|
|
3974
|
-
sort,
|
|
3975
|
-
pagination: showPageNavigation &&
|
|
3983
|
+
theme: theme2,
|
|
3984
|
+
sort: sort2,
|
|
3985
|
+
pagination: showPageNavigation && pagination2,
|
|
3976
3986
|
select: tableSelect,
|
|
3977
3987
|
layout,
|
|
3978
3988
|
ref,
|
|
3979
3989
|
children: (tableList) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
3980
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
3981
|
-
showSelect && /* @__PURE__ */ jsxRuntime.jsx(
|
|
3990
|
+
/* @__PURE__ */ jsxRuntime.jsx(Header, { children: /* @__PURE__ */ jsxRuntime.jsxs(HeaderRow, { children: [
|
|
3991
|
+
showSelect && /* @__PURE__ */ jsxRuntime.jsx(HeaderCellSelect, { className: styles$1.tableHeaderCell }),
|
|
3982
3992
|
...columnCells
|
|
3983
3993
|
] }) }),
|
|
3984
|
-
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
3985
|
-
tableList.length === 0 && /* @__PURE__ */ jsxRuntime.jsx(themes.TableRow, { className: styles$1.noDataTextContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
3994
|
+
/* @__PURE__ */ jsxRuntime.jsxs(Body, { children: [
|
|
3995
|
+
tableList.length === 0 && /* @__PURE__ */ jsxRuntime.jsx(themes.TableRow, { className: styles$1.noDataTextContainer, children: /* @__PURE__ */ jsxRuntime.jsx(Cell, { children: emptyMessage }) }),
|
|
3986
3996
|
tableList.map((row) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
3987
|
-
|
|
3997
|
+
Row,
|
|
3988
3998
|
{
|
|
3989
3999
|
item: row,
|
|
3990
4000
|
className: classNames(styles$1.tableRow, rowClassName, row.className, {
|
|
@@ -3992,7 +4002,7 @@
|
|
|
3992
4002
|
}),
|
|
3993
4003
|
onClick: !row.disabled && row.onClick,
|
|
3994
4004
|
children: row.loading ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
3995
|
-
|
|
4005
|
+
Cell,
|
|
3996
4006
|
{
|
|
3997
4007
|
style: {
|
|
3998
4008
|
gridColumn: `1 / span ${columns.length}`
|
|
@@ -4001,11 +4011,11 @@
|
|
|
4001
4011
|
},
|
|
4002
4012
|
`loading-${row.id}`
|
|
4003
4013
|
) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
4004
|
-
showSelect && /* @__PURE__ */ jsxRuntime.jsx(
|
|
4014
|
+
showSelect && /* @__PURE__ */ jsxRuntime.jsx(CellSelect, { item: row }, row.id),
|
|
4005
4015
|
columns.map((column, i) => {
|
|
4006
4016
|
const cell = row[column.id];
|
|
4007
4017
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
4008
|
-
|
|
4018
|
+
Cell,
|
|
4009
4019
|
{
|
|
4010
4020
|
className: classNames(
|
|
4011
4021
|
styles$1.tableCell,
|
|
@@ -4038,7 +4048,7 @@
|
|
|
4038
4048
|
items: rowsPerPageOptions,
|
|
4039
4049
|
defaultValue: (_a = rowsPerPageOptions.find((rowPerPage) => rowPerPage.value === defaultRowsPerPage.toString())) == null ? void 0 : _a.value.toString(),
|
|
4040
4050
|
onValueChange: (v) => {
|
|
4041
|
-
|
|
4051
|
+
pagination2.fns.onSetSize(Number(v));
|
|
4042
4052
|
setNumRowsPerPage(Number(v));
|
|
4043
4053
|
},
|
|
4044
4054
|
placeholder: rowsPerPageOptions[0].itemContent,
|
|
@@ -4046,14 +4056,14 @@
|
|
|
4046
4056
|
}
|
|
4047
4057
|
)
|
|
4048
4058
|
] }),
|
|
4049
|
-
showPageNumber && /* @__PURE__ */ jsxRuntime.jsx(themes.Flex, { justify: "center", children: /* @__PURE__ */ jsxRuntime.jsx(Text$1, { className: styles$1.pageText, size: "2", children: totalPages > 0 && `Page ${
|
|
4059
|
+
showPageNumber && /* @__PURE__ */ jsxRuntime.jsx(themes.Flex, { justify: "center", children: /* @__PURE__ */ jsxRuntime.jsx(Text$1, { className: styles$1.pageText, size: "2", children: totalPages > 0 && `Page ${pagination2.state.page + 1} of ${totalPages}` }) }),
|
|
4050
4060
|
showPageNavigation && /* @__PURE__ */ jsxRuntime.jsxs(themes.Flex, { className: styles$1.rowsPerPageContainer, gap: "2", justify: "end", children: [
|
|
4051
4061
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
4052
4062
|
IconButton,
|
|
4053
4063
|
{
|
|
4054
4064
|
variant: "surface",
|
|
4055
|
-
onClick: () =>
|
|
4056
|
-
disabled:
|
|
4065
|
+
onClick: () => pagination2.fns.onSetPage(0),
|
|
4066
|
+
disabled: pagination2.state.page === 0 || totalPages === 0,
|
|
4057
4067
|
"aria-label": "Go to first page",
|
|
4058
4068
|
children: /* @__PURE__ */ jsxRuntime.jsx(reactIcons.DoubleArrowLeftIcon, {})
|
|
4059
4069
|
}
|
|
@@ -4062,8 +4072,8 @@
|
|
|
4062
4072
|
IconButton,
|
|
4063
4073
|
{
|
|
4064
4074
|
variant: "surface",
|
|
4065
|
-
disabled:
|
|
4066
|
-
onClick: () =>
|
|
4075
|
+
disabled: pagination2.state.page === 0 || totalPages === 0,
|
|
4076
|
+
onClick: () => pagination2.fns.onSetPage(pagination2.state.page - 1),
|
|
4067
4077
|
"aria-label": "Previous page",
|
|
4068
4078
|
children: /* @__PURE__ */ jsxRuntime.jsx(reactIcons.ChevronLeftIcon, {})
|
|
4069
4079
|
}
|
|
@@ -4072,8 +4082,8 @@
|
|
|
4072
4082
|
IconButton,
|
|
4073
4083
|
{
|
|
4074
4084
|
variant: "surface",
|
|
4075
|
-
disabled:
|
|
4076
|
-
onClick: () =>
|
|
4085
|
+
disabled: pagination2.state.page + 1 === totalPages || totalPages === 0,
|
|
4086
|
+
onClick: () => pagination2.fns.onSetPage(pagination2.state.page + 1),
|
|
4077
4087
|
"aria-label": "Next page",
|
|
4078
4088
|
children: /* @__PURE__ */ jsxRuntime.jsx(reactIcons.ChevronRightIcon, {})
|
|
4079
4089
|
}
|
|
@@ -4082,8 +4092,8 @@
|
|
|
4082
4092
|
IconButton,
|
|
4083
4093
|
{
|
|
4084
4094
|
variant: "surface",
|
|
4085
|
-
disabled:
|
|
4086
|
-
onClick: () =>
|
|
4095
|
+
disabled: pagination2.state.page + 1 === totalPages || totalPages === 0,
|
|
4096
|
+
onClick: () => pagination2.fns.onSetPage(totalPages - 1),
|
|
4087
4097
|
"aria-label": "Go to last page",
|
|
4088
4098
|
children: /* @__PURE__ */ jsxRuntime.jsx(reactIcons.DoubleArrowRightIcon, {})
|
|
4089
4099
|
}
|