@sustaina/shared-ui 1.6.0 → 1.6.2
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/index.d.mts +21 -1
- package/dist/index.d.ts +21 -1
- package/dist/index.js +73 -9
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +72 -10
- package/dist/index.mjs.map +1 -1
- package/package.json +2 -1
package/dist/index.d.mts
CHANGED
|
@@ -203,11 +203,22 @@ type DataTableStatusContent = {
|
|
|
203
203
|
emptyData?: ContentSlot;
|
|
204
204
|
emptyFilteredData?: ContentSlot;
|
|
205
205
|
};
|
|
206
|
+
type ScrollInfo = {
|
|
207
|
+
scrollTop: number;
|
|
208
|
+
scrollHeight: number;
|
|
209
|
+
clientHeight: number;
|
|
210
|
+
scrollableHeight: number;
|
|
211
|
+
distanceToBottom: number;
|
|
212
|
+
ratioToBottom: number;
|
|
213
|
+
isTopReached: boolean;
|
|
214
|
+
isBottomReached: boolean;
|
|
215
|
+
};
|
|
206
216
|
type DataTableScrollFetch = {
|
|
207
217
|
enabled: boolean;
|
|
208
218
|
fetchMore?: () => void;
|
|
209
219
|
hasMore?: boolean;
|
|
210
220
|
isFetchingMore?: boolean;
|
|
221
|
+
scrollThreshold?: number | ((info: ScrollInfo) => boolean);
|
|
211
222
|
};
|
|
212
223
|
type DataTableProps<TData extends RowData$1> = {
|
|
213
224
|
data: TData[];
|
|
@@ -388,6 +399,7 @@ declare function DialogAlert({ open, onOpenChange, title, description, variant,
|
|
|
388
399
|
|
|
389
400
|
declare function isDefined(value: any): boolean;
|
|
390
401
|
declare function isEmptyObject(value: any): boolean;
|
|
402
|
+
declare function debounce<T extends (...args: any[]) => void>(fn: T, delay?: number): (...args: Parameters<T>) => void;
|
|
391
403
|
|
|
392
404
|
declare function stripNullishObject<T extends Record<string, any>>(value: Partial<T>): {
|
|
393
405
|
[k: string]: any;
|
|
@@ -496,4 +508,12 @@ type Breakpoints = {
|
|
|
496
508
|
};
|
|
497
509
|
declare const useScreenSize: (breakpoints?: Breakpoints) => UseScreenSizeResult;
|
|
498
510
|
|
|
499
|
-
|
|
511
|
+
type UseTruncatedOptions<T> = {
|
|
512
|
+
elementRef: React.RefObject<T | null>;
|
|
513
|
+
onChange?: (isTruncated: boolean) => void;
|
|
514
|
+
resizeDetectDelay?: number;
|
|
515
|
+
};
|
|
516
|
+
type UseTruncatedResult = boolean;
|
|
517
|
+
declare const useTruncated: <T extends HTMLElement = any>({ elementRef, onChange, resizeDetectDelay }: UseTruncatedOptions<T>) => UseTruncatedResult;
|
|
518
|
+
|
|
519
|
+
export { AdvanceSearch, type Breakpoints, Button, type Column, type ContentSlot, DataTable, type DataTableChildrenKeyHandler, type DataTableColumnFilter, type DataTableColumnFilterProps, type DataTableColumnGrouping, type DataTableColumnOrdering, type DataTableColumnPinning, type DataTableColumnSorting, type DataTableColumnVisibility, type DataTableComponentProps, type DataTableFilterConfig, type DataTableFilters, type DataTableGlobalFilter, type DataTableHeaderCell, type DataTableProps, type DataTableRenderHeaderHandler, type DataTableRenderHeaderProps, type DataTableRenderRowHandler, type DataTableRenderRowProps, type DataTableRowCell, type DataTableRowClickHandler, type DataTableRowClickMode, type DataTableRowExpansion, type DataTableRowIdKeyHandler, type DataTableRowSelection, type DataTableScrollFetch, type DataTableStatusContent, type DatatableColumnResizing, DialogAlert, type DialogAlertProps, type DialogVariant, type FieldSchema, FormErrorMessage, type FormErrorMessageProps, FormField, FormFieldContext, type FormFieldContextValue, type FormFieldProps, FormItem, FormItemContext, type FormItemContextValue, type FormItemProps, FormLabel, type FormLabelProps, type GridPayload, GridSettingsModal, type GridSettingsModalProps, HeaderCell, type HeaderCellProps, _default as Navbar, type NavbarProps, NumberInput, type NumberInputProps, PreventPageLeave, type RowClickType, type ScrollInfo, type SorterProps, TextInput, type TextInputProps, type UseFormFieldOptions, type UseFormFieldReturn, type UseHoverResult, type UseMediaQueryOptions, type UseMediaQueryResult, type UsePreventPageLeaveOptions, type UseScreenSizeResult, type UseTruncatedOptions, type UseTruncatedResult, booleanToSelectValue, buttonVariants, cn, compareAlphanumeric, debounce, getColumnIdFromTable, isDefined, isEmptyObject, renderContentSlot, selectValueToBoolean, stripNullishObject, useFormField, useGridSettingsStore, useHover, useIntersectionObserver, useMediaQuery, usePreventPageLeave, usePreventPageLeaveStore, useScreenSize, useTruncated };
|
package/dist/index.d.ts
CHANGED
|
@@ -203,11 +203,22 @@ type DataTableStatusContent = {
|
|
|
203
203
|
emptyData?: ContentSlot;
|
|
204
204
|
emptyFilteredData?: ContentSlot;
|
|
205
205
|
};
|
|
206
|
+
type ScrollInfo = {
|
|
207
|
+
scrollTop: number;
|
|
208
|
+
scrollHeight: number;
|
|
209
|
+
clientHeight: number;
|
|
210
|
+
scrollableHeight: number;
|
|
211
|
+
distanceToBottom: number;
|
|
212
|
+
ratioToBottom: number;
|
|
213
|
+
isTopReached: boolean;
|
|
214
|
+
isBottomReached: boolean;
|
|
215
|
+
};
|
|
206
216
|
type DataTableScrollFetch = {
|
|
207
217
|
enabled: boolean;
|
|
208
218
|
fetchMore?: () => void;
|
|
209
219
|
hasMore?: boolean;
|
|
210
220
|
isFetchingMore?: boolean;
|
|
221
|
+
scrollThreshold?: number | ((info: ScrollInfo) => boolean);
|
|
211
222
|
};
|
|
212
223
|
type DataTableProps<TData extends RowData$1> = {
|
|
213
224
|
data: TData[];
|
|
@@ -388,6 +399,7 @@ declare function DialogAlert({ open, onOpenChange, title, description, variant,
|
|
|
388
399
|
|
|
389
400
|
declare function isDefined(value: any): boolean;
|
|
390
401
|
declare function isEmptyObject(value: any): boolean;
|
|
402
|
+
declare function debounce<T extends (...args: any[]) => void>(fn: T, delay?: number): (...args: Parameters<T>) => void;
|
|
391
403
|
|
|
392
404
|
declare function stripNullishObject<T extends Record<string, any>>(value: Partial<T>): {
|
|
393
405
|
[k: string]: any;
|
|
@@ -496,4 +508,12 @@ type Breakpoints = {
|
|
|
496
508
|
};
|
|
497
509
|
declare const useScreenSize: (breakpoints?: Breakpoints) => UseScreenSizeResult;
|
|
498
510
|
|
|
499
|
-
|
|
511
|
+
type UseTruncatedOptions<T> = {
|
|
512
|
+
elementRef: React.RefObject<T | null>;
|
|
513
|
+
onChange?: (isTruncated: boolean) => void;
|
|
514
|
+
resizeDetectDelay?: number;
|
|
515
|
+
};
|
|
516
|
+
type UseTruncatedResult = boolean;
|
|
517
|
+
declare const useTruncated: <T extends HTMLElement = any>({ elementRef, onChange, resizeDetectDelay }: UseTruncatedOptions<T>) => UseTruncatedResult;
|
|
518
|
+
|
|
519
|
+
export { AdvanceSearch, type Breakpoints, Button, type Column, type ContentSlot, DataTable, type DataTableChildrenKeyHandler, type DataTableColumnFilter, type DataTableColumnFilterProps, type DataTableColumnGrouping, type DataTableColumnOrdering, type DataTableColumnPinning, type DataTableColumnSorting, type DataTableColumnVisibility, type DataTableComponentProps, type DataTableFilterConfig, type DataTableFilters, type DataTableGlobalFilter, type DataTableHeaderCell, type DataTableProps, type DataTableRenderHeaderHandler, type DataTableRenderHeaderProps, type DataTableRenderRowHandler, type DataTableRenderRowProps, type DataTableRowCell, type DataTableRowClickHandler, type DataTableRowClickMode, type DataTableRowExpansion, type DataTableRowIdKeyHandler, type DataTableRowSelection, type DataTableScrollFetch, type DataTableStatusContent, type DatatableColumnResizing, DialogAlert, type DialogAlertProps, type DialogVariant, type FieldSchema, FormErrorMessage, type FormErrorMessageProps, FormField, FormFieldContext, type FormFieldContextValue, type FormFieldProps, FormItem, FormItemContext, type FormItemContextValue, type FormItemProps, FormLabel, type FormLabelProps, type GridPayload, GridSettingsModal, type GridSettingsModalProps, HeaderCell, type HeaderCellProps, _default as Navbar, type NavbarProps, NumberInput, type NumberInputProps, PreventPageLeave, type RowClickType, type ScrollInfo, type SorterProps, TextInput, type TextInputProps, type UseFormFieldOptions, type UseFormFieldReturn, type UseHoverResult, type UseMediaQueryOptions, type UseMediaQueryResult, type UsePreventPageLeaveOptions, type UseScreenSizeResult, type UseTruncatedOptions, type UseTruncatedResult, booleanToSelectValue, buttonVariants, cn, compareAlphanumeric, debounce, getColumnIdFromTable, isDefined, isEmptyObject, renderContentSlot, selectValueToBoolean, stripNullishObject, useFormField, useGridSettingsStore, useHover, useIntersectionObserver, useMediaQuery, usePreventPageLeave, usePreventPageLeaveStore, useScreenSize, useTruncated };
|
package/dist/index.js
CHANGED
|
@@ -17,6 +17,7 @@ var utilities = require('@dnd-kit/utilities');
|
|
|
17
17
|
var SelectPrimitive = require('@radix-ui/react-select');
|
|
18
18
|
var TooltipPrimitive = require('@radix-ui/react-tooltip');
|
|
19
19
|
var core = require('@dnd-kit/core');
|
|
20
|
+
var modifiers = require('@dnd-kit/modifiers');
|
|
20
21
|
var zod = require('zod');
|
|
21
22
|
var reactDom = require('react-dom');
|
|
22
23
|
var PopoverPrimitive = require('@radix-ui/react-popover');
|
|
@@ -159,6 +160,15 @@ function isDefined(value) {
|
|
|
159
160
|
function isEmptyObject(value) {
|
|
160
161
|
return !!value && Object.keys(value).length === 0 && value.constructor === Object;
|
|
161
162
|
}
|
|
163
|
+
function debounce(fn, delay = 150) {
|
|
164
|
+
let timeout = null;
|
|
165
|
+
return (...args) => {
|
|
166
|
+
if (timeout) clearTimeout(timeout);
|
|
167
|
+
timeout = setTimeout(() => {
|
|
168
|
+
fn(...args);
|
|
169
|
+
}, delay);
|
|
170
|
+
};
|
|
171
|
+
}
|
|
162
172
|
|
|
163
173
|
// src/utils/filters.ts
|
|
164
174
|
function stripNullishObject(value) {
|
|
@@ -385,6 +395,36 @@ var useScreenSize = (breakpoints) => {
|
|
|
385
395
|
return { isMobile, isTablet, isDesktop };
|
|
386
396
|
};
|
|
387
397
|
var useScreenSize_default = useScreenSize;
|
|
398
|
+
var useTruncated = ({
|
|
399
|
+
elementRef,
|
|
400
|
+
onChange,
|
|
401
|
+
resizeDetectDelay = 150
|
|
402
|
+
}) => {
|
|
403
|
+
const [isTruncated, setIsTruncated] = React4.useState(false);
|
|
404
|
+
React4.useEffect(() => {
|
|
405
|
+
const element = elementRef.current;
|
|
406
|
+
if (!element) return;
|
|
407
|
+
const checkTruncate = debounce(() => {
|
|
408
|
+
const truncated = element.scrollWidth > element.clientWidth;
|
|
409
|
+
setIsTruncated((prev) => {
|
|
410
|
+
if (prev !== truncated) {
|
|
411
|
+
onChange?.(truncated);
|
|
412
|
+
}
|
|
413
|
+
return truncated;
|
|
414
|
+
});
|
|
415
|
+
}, resizeDetectDelay);
|
|
416
|
+
checkTruncate();
|
|
417
|
+
const observer = new ResizeObserver(checkTruncate);
|
|
418
|
+
observer.observe(element);
|
|
419
|
+
window.addEventListener("resize", checkTruncate);
|
|
420
|
+
return () => {
|
|
421
|
+
observer.disconnect();
|
|
422
|
+
window.removeEventListener("resize", checkTruncate);
|
|
423
|
+
};
|
|
424
|
+
}, [elementRef, onChange, resizeDetectDelay]);
|
|
425
|
+
return isTruncated;
|
|
426
|
+
};
|
|
427
|
+
var useTruncated_default = useTruncated;
|
|
388
428
|
var HeaderCell = ({ rootClassName, labelClassName, context, label, sorterProps }) => {
|
|
389
429
|
const { ref, hovering } = useHover_default();
|
|
390
430
|
const showSorter = sorterProps?.show ?? context.column.getCanSort();
|
|
@@ -858,15 +898,33 @@ var DataTable = ({
|
|
|
858
898
|
}, [centerVisibleLeafColumns, leftVisibleLeftColumns, rightVisibleLeafColumns]);
|
|
859
899
|
const fetchMoreOnScrollReached = React4.useCallback(
|
|
860
900
|
(containerRefElement) => {
|
|
861
|
-
if (!scrollFetch?.enabled) {
|
|
901
|
+
if (!scrollFetch?.enabled || !containerRefElement || scrollFetch?.isFetchingMore || !scrollFetch?.hasMore || !scrollFetch?.fetchMore) {
|
|
862
902
|
return;
|
|
863
903
|
}
|
|
864
|
-
|
|
865
|
-
|
|
866
|
-
|
|
867
|
-
|
|
868
|
-
|
|
869
|
-
|
|
904
|
+
const { scrollHeight, scrollTop, clientHeight } = containerRefElement;
|
|
905
|
+
const scrollableHeight = scrollHeight - clientHeight;
|
|
906
|
+
const distanceToBottom = scrollHeight - clientHeight - scrollTop;
|
|
907
|
+
const ratioToBottom = scrollableHeight > 0 ? scrollTop / scrollableHeight : 1;
|
|
908
|
+
const info = {
|
|
909
|
+
scrollTop,
|
|
910
|
+
scrollHeight,
|
|
911
|
+
clientHeight,
|
|
912
|
+
scrollableHeight,
|
|
913
|
+
distanceToBottom,
|
|
914
|
+
ratioToBottom,
|
|
915
|
+
isTopReached: scrollTop === 0,
|
|
916
|
+
isBottomReached: distanceToBottom <= 0
|
|
917
|
+
};
|
|
918
|
+
let shouldTrigger = false;
|
|
919
|
+
if (typeof scrollFetch.scrollThreshold === "number") {
|
|
920
|
+
shouldTrigger = info.ratioToBottom >= scrollFetch.scrollThreshold;
|
|
921
|
+
} else if (typeof scrollFetch.scrollThreshold === "function") {
|
|
922
|
+
shouldTrigger = scrollFetch.scrollThreshold(info);
|
|
923
|
+
} else {
|
|
924
|
+
shouldTrigger = info.ratioToBottom >= 0.7;
|
|
925
|
+
}
|
|
926
|
+
if (shouldTrigger) {
|
|
927
|
+
scrollFetch.fetchMore();
|
|
870
928
|
}
|
|
871
929
|
},
|
|
872
930
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
@@ -1403,6 +1461,7 @@ function SelectContent({
|
|
|
1403
1461
|
function SelectItem({
|
|
1404
1462
|
className,
|
|
1405
1463
|
children,
|
|
1464
|
+
hideCheckIcon,
|
|
1406
1465
|
...props
|
|
1407
1466
|
}) {
|
|
1408
1467
|
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
@@ -1415,6 +1474,7 @@ function SelectItem({
|
|
|
1415
1474
|
),
|
|
1416
1475
|
...props,
|
|
1417
1476
|
children: [
|
|
1477
|
+
!hideCheckIcon && //
|
|
1418
1478
|
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute right-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.ItemIndicator, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckIcon, { className: "size-4" }) }) }),
|
|
1419
1479
|
/* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.ItemText, { children })
|
|
1420
1480
|
]
|
|
@@ -1554,6 +1614,7 @@ function SortableRow({
|
|
|
1554
1614
|
SelectItem,
|
|
1555
1615
|
{
|
|
1556
1616
|
value: opt.id,
|
|
1617
|
+
hideCheckIcon: true,
|
|
1557
1618
|
className: cn(
|
|
1558
1619
|
"focus:bg-[#e8edea]",
|
|
1559
1620
|
opt.id === field.value ? "font-bold bg-[#dae5de] focus:bg-[#dae5de]" : ""
|
|
@@ -1747,11 +1808,12 @@ var GridSettingsModal = ({
|
|
|
1747
1808
|
},
|
|
1748
1809
|
fields[0]?.fieldId
|
|
1749
1810
|
),
|
|
1750
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1811
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-3", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
1751
1812
|
core.DndContext,
|
|
1752
1813
|
{
|
|
1753
1814
|
sensors,
|
|
1754
1815
|
collisionDetection: core.closestCenter,
|
|
1816
|
+
modifiers: [modifiers.restrictToParentElement, modifiers.restrictToVerticalAxis],
|
|
1755
1817
|
onDragStart: () => setIsDragging(true),
|
|
1756
1818
|
onDragEnd: (event) => {
|
|
1757
1819
|
setIsDragging(false);
|
|
@@ -1777,7 +1839,7 @@ var GridSettingsModal = ({
|
|
|
1777
1839
|
}
|
|
1778
1840
|
)
|
|
1779
1841
|
}
|
|
1780
|
-
),
|
|
1842
|
+
) }),
|
|
1781
1843
|
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-6", children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
1782
1844
|
Button2,
|
|
1783
1845
|
{
|
|
@@ -5121,6 +5183,7 @@ exports.booleanToSelectValue = booleanToSelectValue;
|
|
|
5121
5183
|
exports.buttonVariants = buttonVariants;
|
|
5122
5184
|
exports.cn = cn;
|
|
5123
5185
|
exports.compareAlphanumeric = compareAlphanumeric;
|
|
5186
|
+
exports.debounce = debounce;
|
|
5124
5187
|
exports.getColumnIdFromTable = getColumnIdFromTable;
|
|
5125
5188
|
exports.isDefined = isDefined;
|
|
5126
5189
|
exports.isEmptyObject = isEmptyObject;
|
|
@@ -5135,5 +5198,6 @@ exports.useMediaQuery = useMediaQuery_default;
|
|
|
5135
5198
|
exports.usePreventPageLeave = usePreventPageLeave_default;
|
|
5136
5199
|
exports.usePreventPageLeaveStore = usePreventPageLeaveStore_default;
|
|
5137
5200
|
exports.useScreenSize = useScreenSize_default;
|
|
5201
|
+
exports.useTruncated = useTruncated_default;
|
|
5138
5202
|
//# sourceMappingURL=index.js.map
|
|
5139
5203
|
//# sourceMappingURL=index.js.map
|