@bsol-oss/react-datatable5 12.0.0-beta.94 → 12.0.0-beta.95
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.ts
CHANGED
|
@@ -228,6 +228,7 @@ interface TextCellProps {
|
|
|
228
228
|
onClick?: () => void;
|
|
229
229
|
isCopyable?: boolean;
|
|
230
230
|
isBadge?: boolean;
|
|
231
|
+
alignEnd?: boolean;
|
|
231
232
|
badgeColor?: 'gray' | 'red' | 'orange' | 'yellow' | 'green' | 'teal' | 'blue' | 'cyan' | 'purple' | 'pink';
|
|
232
233
|
colorPalette?: 'gray' | 'red' | 'orange' | 'yellow' | 'green' | 'teal' | 'blue' | 'cyan' | 'purple' | 'pink';
|
|
233
234
|
label?: string;
|
|
@@ -236,7 +237,7 @@ interface TextCellProps {
|
|
|
236
237
|
containerProps?: FlexProps;
|
|
237
238
|
textProps?: TextProps;
|
|
238
239
|
}
|
|
239
|
-
declare const TextCell: ({ text, href, onClick, isCopyable, isBadge, badgeColor, colorPalette, label, containerProps, textProps, children, }: TextCellProps) => react_jsx_runtime.JSX.Element;
|
|
240
|
+
declare const TextCell: ({ text, href, onClick, isCopyable, isBadge, badgeColor, colorPalette, alignEnd, label, containerProps, textProps, children, }: TextCellProps) => react_jsx_runtime.JSX.Element;
|
|
240
241
|
|
|
241
242
|
interface CardHeaderProps<TData> {
|
|
242
243
|
row: Row<TData>;
|
|
@@ -1096,6 +1097,7 @@ declare const TableDataDisplay: ({ colorPalette, emptyComponent, }: TableDataDis
|
|
|
1096
1097
|
|
|
1097
1098
|
interface DefaultTableProps {
|
|
1098
1099
|
showFooter?: boolean;
|
|
1100
|
+
showHeader?: boolean;
|
|
1099
1101
|
tableProps?: Omit<TableProps, 'children'>;
|
|
1100
1102
|
tableHeaderProps?: TableHeaderProps;
|
|
1101
1103
|
tableBodyProps?: TableBodyProps;
|
|
@@ -1104,7 +1106,7 @@ interface DefaultTableProps {
|
|
|
1104
1106
|
variant?: '' | 'greedy';
|
|
1105
1107
|
isLoading?: boolean;
|
|
1106
1108
|
}
|
|
1107
|
-
declare const DefaultTable: ({ showFooter, tableProps, tableHeaderProps, tableBodyProps, tableFooterProps, controlProps, variant, isLoading, }: DefaultTableProps) => react_jsx_runtime.JSX.Element;
|
|
1109
|
+
declare const DefaultTable: ({ showFooter, showHeader, tableProps, tableHeaderProps, tableBodyProps, tableFooterProps, controlProps, variant, isLoading, }: DefaultTableProps) => react_jsx_runtime.JSX.Element;
|
|
1108
1110
|
|
|
1109
1111
|
interface DefaultTableServerProps extends DefaultTableProps {
|
|
1110
1112
|
/**
|
package/dist/index.js
CHANGED
|
@@ -3514,14 +3514,14 @@ const highlightText = (text, searchTerm) => {
|
|
|
3514
3514
|
}
|
|
3515
3515
|
return parts.length > 0 ? jsxRuntime.jsx(jsxRuntime.Fragment, { children: parts }) : textStr;
|
|
3516
3516
|
};
|
|
3517
|
-
const RenderValue = ({ text, href, onClick, isCopyable, isBadge, badgeColor, colorPalette, globalFilter, }) => {
|
|
3517
|
+
const RenderValue = ({ text, href, onClick, isCopyable, isBadge, badgeColor, colorPalette, globalFilter, alignEnd = false, }) => {
|
|
3518
3518
|
const highlightedText = React.useMemo(() => highlightText(text ?? '', globalFilter), [text, globalFilter]);
|
|
3519
3519
|
if (isBadge) {
|
|
3520
3520
|
return (jsxRuntime.jsx(react.Badge, { colorPalette: colorPalette || badgeColor, children: highlightedText }));
|
|
3521
3521
|
}
|
|
3522
3522
|
// onClick takes precedence over href
|
|
3523
3523
|
if (onClick) {
|
|
3524
|
-
return (jsxRuntime.jsx(react.Box, { as: "button", onClick: onClick, cursor: "pointer", textAlign:
|
|
3524
|
+
return (jsxRuntime.jsx(react.Box, { as: "button", onClick: onClick, cursor: "pointer", textAlign: alignEnd ? 'right' : 'left', _hover: {
|
|
3525
3525
|
textDecoration: 'underline',
|
|
3526
3526
|
color: {
|
|
3527
3527
|
base: 'blue.500',
|
|
@@ -3539,7 +3539,7 @@ const RenderValue = ({ text, href, onClick, isCopyable, isBadge, badgeColor, col
|
|
|
3539
3539
|
}
|
|
3540
3540
|
return jsxRuntime.jsx(jsxRuntime.Fragment, { children: highlightedText });
|
|
3541
3541
|
};
|
|
3542
|
-
const TextCell = ({ text, href, onClick, isCopyable, isBadge, badgeColor, colorPalette,
|
|
3542
|
+
const TextCell = ({ text, href, onClick, isCopyable, isBadge, badgeColor, colorPalette, alignEnd = false,
|
|
3543
3543
|
// Legacy props
|
|
3544
3544
|
label, containerProps = {}, textProps = {}, children, }) => {
|
|
3545
3545
|
// Get globalFilter from context
|
|
@@ -3553,23 +3553,25 @@ label, containerProps = {}, textProps = {}, children, }) => {
|
|
|
3553
3553
|
const highlightedDisplayText = typeof displayText === 'string' || typeof displayText === 'number'
|
|
3554
3554
|
? highlightText(displayText, globalFilter)
|
|
3555
3555
|
: displayText;
|
|
3556
|
+
const flexJustifyContent = alignEnd ? 'flex-end' : undefined;
|
|
3557
|
+
const textAlign = alignEnd ? 'right' : undefined;
|
|
3556
3558
|
if (label) {
|
|
3557
|
-
return (jsxRuntime.jsx(react.Flex, { alignItems: 'center', height: '100%', ...containerProps, children: jsxRuntime.jsx(Tooltip, { content: jsxRuntime.jsx(react.Text, { as: "span", overflow: "hidden", textOverflow: 'ellipsis', children: label }), children: jsxRuntime.jsx(react.Text, { as: "span", overflow: "hidden", textOverflow: 'ellipsis', wordBreak: 'break-all', ...textProps, children: highlightedDisplayText }) }) }));
|
|
3559
|
+
return (jsxRuntime.jsx(react.Flex, { alignItems: 'center', justifyContent: flexJustifyContent, height: '100%', ...containerProps, children: jsxRuntime.jsx(Tooltip, { content: jsxRuntime.jsx(react.Text, { as: "span", overflow: "hidden", textOverflow: 'ellipsis', children: label }), children: jsxRuntime.jsx(react.Text, { as: "span", overflow: "hidden", textOverflow: 'ellipsis', wordBreak: 'break-all', textAlign: textAlign, ...textProps, children: highlightedDisplayText }) }) }));
|
|
3558
3560
|
}
|
|
3559
|
-
return (jsxRuntime.jsx(react.Flex, { alignItems: 'center', height: '100%', ...containerProps, children: jsxRuntime.jsx(react.Text, { as: "span", overflow: "hidden", textOverflow: 'ellipsis', wordBreak: 'break-all', ...textProps, children: highlightedDisplayText }) }));
|
|
3561
|
+
return (jsxRuntime.jsx(react.Flex, { alignItems: 'center', justifyContent: flexJustifyContent, height: '100%', ...containerProps, children: jsxRuntime.jsx(react.Text, { as: "span", overflow: "hidden", textOverflow: 'ellipsis', wordBreak: 'break-all', textAlign: textAlign, ...textProps, children: highlightedDisplayText }) }));
|
|
3560
3562
|
}
|
|
3561
3563
|
// New API: use text prop
|
|
3562
3564
|
const displayValue = text ?? children;
|
|
3563
3565
|
if (Array.isArray(displayValue)) {
|
|
3564
|
-
return (jsxRuntime.jsx(react.Flex, { gap: 2, flexWrap: "wrap", children: displayValue.map((item, index) => {
|
|
3566
|
+
return (jsxRuntime.jsx(react.Flex, { gap: 2, flexWrap: "wrap", justifyContent: alignEnd ? 'flex-end' : undefined, children: displayValue.map((item, index) => {
|
|
3565
3567
|
const highlightedItem = highlightText(item, globalFilter);
|
|
3566
3568
|
return (jsxRuntime.jsx(react.Badge, { colorPalette: colorPalette || badgeColor, children: highlightedItem }, index));
|
|
3567
3569
|
}) }));
|
|
3568
3570
|
}
|
|
3569
3571
|
if (!!displayValue === false) {
|
|
3570
|
-
return (jsxRuntime.jsx(react.Text, { textOverflow: "ellipsis", whiteSpace: "nowrap", overflow: "hidden", wordBreak: "break-all", display: "flex", alignItems: "center", height: "100%", children: "-" }));
|
|
3572
|
+
return (jsxRuntime.jsx(react.Text, { textOverflow: "ellipsis", whiteSpace: "nowrap", overflow: "hidden", wordBreak: "break-all", display: "flex", alignItems: "center", justifyContent: alignEnd ? 'flex-end' : undefined, height: "100%", textAlign: alignEnd ? 'right' : undefined, children: "-" }));
|
|
3571
3573
|
}
|
|
3572
|
-
return (jsxRuntime.jsx(react.Box, { textOverflow: "ellipsis", whiteSpace: "nowrap", wordBreak: "break-all", overflow: "auto", display: "flex", alignItems: "center", height: "100%", children: jsxRuntime.jsx(RenderValue, { text: displayValue, href: href, onClick: onClick, isCopyable: isCopyable, isBadge: isBadge, badgeColor: badgeColor, colorPalette: colorPalette, globalFilter: globalFilter }) }));
|
|
3574
|
+
return (jsxRuntime.jsx(react.Box, { textOverflow: "ellipsis", whiteSpace: "nowrap", wordBreak: "break-all", overflow: "auto", display: "flex", alignItems: "center", justifyContent: alignEnd ? 'flex-end' : undefined, height: "100%", textAlign: alignEnd ? 'right' : undefined, children: jsxRuntime.jsx(RenderValue, { text: displayValue, href: href, onClick: onClick, isCopyable: isCopyable, isBadge: isBadge, badgeColor: badgeColor, colorPalette: colorPalette, globalFilter: globalFilter, alignEnd: alignEnd }) }));
|
|
3573
3575
|
};
|
|
3574
3576
|
|
|
3575
3577
|
const Tag = React__namespace.forwardRef(function Tag(props, ref) {
|
|
@@ -6505,13 +6507,7 @@ const TimePicker = ({ column, schema, prefix }) => {
|
|
|
6505
6507
|
return (jsxRuntime.jsx(Field, { label: formI18n.label(), required: isRequired, alignItems: 'stretch', gridColumn,
|
|
6506
6508
|
gridRow, errorText: errors[`${colLabel}`] ? formI18n.required() : undefined, invalid: !!errors[colLabel], children: jsxRuntime.jsxs(react.Popover.Root, { open: open, onOpenChange: (e) => setOpen(e.open), closeOnInteractOutside: true, children: [jsxRuntime.jsx(react.Popover.Trigger, { asChild: true, children: jsxRuntime.jsxs(Button, { size: "sm", variant: "outline", onClick: () => {
|
|
6507
6509
|
setOpen(true);
|
|
6508
|
-
}, justifyContent: 'start', children: [jsxRuntime.jsx(io.IoMdClock, {}), !!value ? `${displayedTime}` : ''] }) }), insideDialog ? (jsxRuntime.jsx(react.Popover.Positioner, { children: jsxRuntime.jsx(react.Popover.Content, { maxH: "70vh", overflowY: "auto", children: jsxRuntime.jsx(react.Popover.Body, { overflow: "visible", children: jsxRuntime.jsx(TimePicker$1, { hour: hour, setHour: setHour, minute: minute, setMinute: setMinute, meridiem: meridiem, setMeridiem: setMeridiem, onChange: handleTimeChange,
|
|
6509
|
-
am: translate.t(`common.am`, { defaultValue: 'AM' }),
|
|
6510
|
-
pm: translate.t(`common.pm`, { defaultValue: 'PM' }),
|
|
6511
|
-
} }) }) }) })) : (jsxRuntime.jsx(react.Portal, { children: jsxRuntime.jsx(react.Popover.Positioner, { children: jsxRuntime.jsx(react.Popover.Content, { children: jsxRuntime.jsx(react.Popover.Body, { children: jsxRuntime.jsx(TimePicker$1, { hour: hour, setHour: setHour, minute: minute, setMinute: setMinute, meridiem: meridiem, setMeridiem: setMeridiem, onChange: handleTimeChange, meridiemLabel: {
|
|
6512
|
-
am: translate.t(`common.am`, { defaultValue: 'AM' }),
|
|
6513
|
-
pm: translate.t(`common.pm`, { defaultValue: 'PM' }),
|
|
6514
|
-
} }) }) }) }) }))] }) }));
|
|
6510
|
+
}, justifyContent: 'start', children: [jsxRuntime.jsx(io.IoMdClock, {}), !!value ? `${displayedTime}` : ''] }) }), insideDialog ? (jsxRuntime.jsx(react.Popover.Positioner, { children: jsxRuntime.jsx(react.Popover.Content, { maxH: "70vh", overflowY: "auto", children: jsxRuntime.jsx(react.Popover.Body, { overflow: "visible", children: jsxRuntime.jsx(TimePicker$1, { hour: hour, setHour: setHour, minute: minute, setMinute: setMinute, meridiem: meridiem, setMeridiem: setMeridiem, onChange: handleTimeChange }) }) }) })) : (jsxRuntime.jsx(react.Portal, { children: jsxRuntime.jsx(react.Popover.Positioner, { children: jsxRuntime.jsx(react.Popover.Content, { children: jsxRuntime.jsx(react.Popover.Body, { children: jsxRuntime.jsx(TimePicker$1, { hour: hour, setHour: setHour, minute: minute, setMinute: setMinute, meridiem: meridiem, setMeridiem: setMeridiem, onChange: handleTimeChange }) }) }) }) }))] }) }));
|
|
6515
6511
|
};
|
|
6516
6512
|
|
|
6517
6513
|
dayjs.extend(utc);
|
|
@@ -8490,22 +8486,16 @@ const TableRowSelectorSkeleton = () => {
|
|
|
8490
8486
|
bg: { base: 'colorPalette.50', _dark: 'colorPalette.950' }, justifyItems: 'center', alignItems: 'center', children: jsxRuntime.jsx(react.Skeleton, { width: `${SELECTION_BOX_WIDTH}px`, height: `${SELECTION_BOX_WIDTH}px` }) }));
|
|
8491
8487
|
};
|
|
8492
8488
|
|
|
8493
|
-
const DefaultTable = ({ showFooter = false, tableProps = {}, tableHeaderProps = {}, tableBodyProps = {}, tableFooterProps = {}, controlProps = {}, variant = '', isLoading = false, }) => {
|
|
8494
|
-
|
|
8495
|
-
|
|
8496
|
-
|
|
8497
|
-
|
|
8498
|
-
|
|
8499
|
-
tableBodyProps.showSelector ??
|
|
8500
|
-
false,
|
|
8501
|
-
...tableProps, children: [jsxRuntime.jsx(TableHeader, { canResize: false, ...tableHeaderProps }), bodyComponent, showFooter && (jsxRuntime.jsx(TableFooter, { canResize: false, ...tableFooterProps }))] }) }));
|
|
8502
|
-
}
|
|
8503
|
-
const bodyComponent = isLoading ? (jsxRuntime.jsx(TableBodySkeleton, { showSelector: tableBodyProps.showSelector, canResize: tableBodyProps.canResize })) : (jsxRuntime.jsx(TableBody, { ...tableBodyProps }));
|
|
8504
|
-
return (jsxRuntime.jsx(TableControls, { ...controlProps, children: jsxRuntime.jsxs(Table, { showLoading: isLoading,
|
|
8489
|
+
const DefaultTable = ({ showFooter = false, showHeader = true, tableProps = {}, tableHeaderProps = {}, tableBodyProps = {}, tableFooterProps = {}, controlProps = {}, variant = 'greedy', isLoading = false, }) => {
|
|
8490
|
+
const isGreedy = variant === 'greedy';
|
|
8491
|
+
const canResize = !isGreedy;
|
|
8492
|
+
const bodyComponent = isLoading ? (jsxRuntime.jsx(TableBodySkeleton, { showSelector: tableBodyProps.showSelector, canResize: canResize })) : (jsxRuntime.jsx(TableBody, { ...tableBodyProps, canResize: canResize }));
|
|
8493
|
+
return (jsxRuntime.jsx(TableControls, { ...controlProps, children: jsxRuntime.jsxs(Table, { canResize,
|
|
8494
|
+
showLoading: isLoading,
|
|
8505
8495
|
showSelector: tableHeaderProps.showSelector ??
|
|
8506
8496
|
tableBodyProps.showSelector ??
|
|
8507
8497
|
false,
|
|
8508
|
-
...tableProps, children: [jsxRuntime.jsx(TableHeader, { ...tableHeaderProps }), bodyComponent, showFooter && jsxRuntime.jsx(TableFooter, { ...tableFooterProps })] }) }));
|
|
8498
|
+
...tableProps, children: [showHeader && jsxRuntime.jsx(TableHeader, { canResize, ...tableHeaderProps }), bodyComponent, showFooter && jsxRuntime.jsx(TableFooter, { canResize, ...tableFooterProps })] }) }));
|
|
8509
8499
|
};
|
|
8510
8500
|
|
|
8511
8501
|
/**
|
package/dist/index.mjs
CHANGED
|
@@ -3494,14 +3494,14 @@ const highlightText = (text, searchTerm) => {
|
|
|
3494
3494
|
}
|
|
3495
3495
|
return parts.length > 0 ? jsx(Fragment, { children: parts }) : textStr;
|
|
3496
3496
|
};
|
|
3497
|
-
const RenderValue = ({ text, href, onClick, isCopyable, isBadge, badgeColor, colorPalette, globalFilter, }) => {
|
|
3497
|
+
const RenderValue = ({ text, href, onClick, isCopyable, isBadge, badgeColor, colorPalette, globalFilter, alignEnd = false, }) => {
|
|
3498
3498
|
const highlightedText = useMemo(() => highlightText(text ?? '', globalFilter), [text, globalFilter]);
|
|
3499
3499
|
if (isBadge) {
|
|
3500
3500
|
return (jsx(Badge, { colorPalette: colorPalette || badgeColor, children: highlightedText }));
|
|
3501
3501
|
}
|
|
3502
3502
|
// onClick takes precedence over href
|
|
3503
3503
|
if (onClick) {
|
|
3504
|
-
return (jsx(Box, { as: "button", onClick: onClick, cursor: "pointer", textAlign:
|
|
3504
|
+
return (jsx(Box, { as: "button", onClick: onClick, cursor: "pointer", textAlign: alignEnd ? 'right' : 'left', _hover: {
|
|
3505
3505
|
textDecoration: 'underline',
|
|
3506
3506
|
color: {
|
|
3507
3507
|
base: 'blue.500',
|
|
@@ -3519,7 +3519,7 @@ const RenderValue = ({ text, href, onClick, isCopyable, isBadge, badgeColor, col
|
|
|
3519
3519
|
}
|
|
3520
3520
|
return jsx(Fragment, { children: highlightedText });
|
|
3521
3521
|
};
|
|
3522
|
-
const TextCell = ({ text, href, onClick, isCopyable, isBadge, badgeColor, colorPalette,
|
|
3522
|
+
const TextCell = ({ text, href, onClick, isCopyable, isBadge, badgeColor, colorPalette, alignEnd = false,
|
|
3523
3523
|
// Legacy props
|
|
3524
3524
|
label, containerProps = {}, textProps = {}, children, }) => {
|
|
3525
3525
|
// Get globalFilter from context
|
|
@@ -3533,23 +3533,25 @@ label, containerProps = {}, textProps = {}, children, }) => {
|
|
|
3533
3533
|
const highlightedDisplayText = typeof displayText === 'string' || typeof displayText === 'number'
|
|
3534
3534
|
? highlightText(displayText, globalFilter)
|
|
3535
3535
|
: displayText;
|
|
3536
|
+
const flexJustifyContent = alignEnd ? 'flex-end' : undefined;
|
|
3537
|
+
const textAlign = alignEnd ? 'right' : undefined;
|
|
3536
3538
|
if (label) {
|
|
3537
|
-
return (jsx(Flex, { alignItems: 'center', height: '100%', ...containerProps, children: jsx(Tooltip, { content: jsx(Text, { as: "span", overflow: "hidden", textOverflow: 'ellipsis', children: label }), children: jsx(Text, { as: "span", overflow: "hidden", textOverflow: 'ellipsis', wordBreak: 'break-all', ...textProps, children: highlightedDisplayText }) }) }));
|
|
3539
|
+
return (jsx(Flex, { alignItems: 'center', justifyContent: flexJustifyContent, height: '100%', ...containerProps, children: jsx(Tooltip, { content: jsx(Text, { as: "span", overflow: "hidden", textOverflow: 'ellipsis', children: label }), children: jsx(Text, { as: "span", overflow: "hidden", textOverflow: 'ellipsis', wordBreak: 'break-all', textAlign: textAlign, ...textProps, children: highlightedDisplayText }) }) }));
|
|
3538
3540
|
}
|
|
3539
|
-
return (jsx(Flex, { alignItems: 'center', height: '100%', ...containerProps, children: jsx(Text, { as: "span", overflow: "hidden", textOverflow: 'ellipsis', wordBreak: 'break-all', ...textProps, children: highlightedDisplayText }) }));
|
|
3541
|
+
return (jsx(Flex, { alignItems: 'center', justifyContent: flexJustifyContent, height: '100%', ...containerProps, children: jsx(Text, { as: "span", overflow: "hidden", textOverflow: 'ellipsis', wordBreak: 'break-all', textAlign: textAlign, ...textProps, children: highlightedDisplayText }) }));
|
|
3540
3542
|
}
|
|
3541
3543
|
// New API: use text prop
|
|
3542
3544
|
const displayValue = text ?? children;
|
|
3543
3545
|
if (Array.isArray(displayValue)) {
|
|
3544
|
-
return (jsx(Flex, { gap: 2, flexWrap: "wrap", children: displayValue.map((item, index) => {
|
|
3546
|
+
return (jsx(Flex, { gap: 2, flexWrap: "wrap", justifyContent: alignEnd ? 'flex-end' : undefined, children: displayValue.map((item, index) => {
|
|
3545
3547
|
const highlightedItem = highlightText(item, globalFilter);
|
|
3546
3548
|
return (jsx(Badge, { colorPalette: colorPalette || badgeColor, children: highlightedItem }, index));
|
|
3547
3549
|
}) }));
|
|
3548
3550
|
}
|
|
3549
3551
|
if (!!displayValue === false) {
|
|
3550
|
-
return (jsx(Text, { textOverflow: "ellipsis", whiteSpace: "nowrap", overflow: "hidden", wordBreak: "break-all", display: "flex", alignItems: "center", height: "100%", children: "-" }));
|
|
3552
|
+
return (jsx(Text, { textOverflow: "ellipsis", whiteSpace: "nowrap", overflow: "hidden", wordBreak: "break-all", display: "flex", alignItems: "center", justifyContent: alignEnd ? 'flex-end' : undefined, height: "100%", textAlign: alignEnd ? 'right' : undefined, children: "-" }));
|
|
3551
3553
|
}
|
|
3552
|
-
return (jsx(Box, { textOverflow: "ellipsis", whiteSpace: "nowrap", wordBreak: "break-all", overflow: "auto", display: "flex", alignItems: "center", height: "100%", children: jsx(RenderValue, { text: displayValue, href: href, onClick: onClick, isCopyable: isCopyable, isBadge: isBadge, badgeColor: badgeColor, colorPalette: colorPalette, globalFilter: globalFilter }) }));
|
|
3554
|
+
return (jsx(Box, { textOverflow: "ellipsis", whiteSpace: "nowrap", wordBreak: "break-all", overflow: "auto", display: "flex", alignItems: "center", justifyContent: alignEnd ? 'flex-end' : undefined, height: "100%", textAlign: alignEnd ? 'right' : undefined, children: jsx(RenderValue, { text: displayValue, href: href, onClick: onClick, isCopyable: isCopyable, isBadge: isBadge, badgeColor: badgeColor, colorPalette: colorPalette, globalFilter: globalFilter, alignEnd: alignEnd }) }));
|
|
3553
3555
|
};
|
|
3554
3556
|
|
|
3555
3557
|
const Tag = React.forwardRef(function Tag(props, ref) {
|
|
@@ -6485,13 +6487,7 @@ const TimePicker = ({ column, schema, prefix }) => {
|
|
|
6485
6487
|
return (jsx(Field, { label: formI18n.label(), required: isRequired, alignItems: 'stretch', gridColumn,
|
|
6486
6488
|
gridRow, errorText: errors[`${colLabel}`] ? formI18n.required() : undefined, invalid: !!errors[colLabel], children: jsxs(Popover.Root, { open: open, onOpenChange: (e) => setOpen(e.open), closeOnInteractOutside: true, children: [jsx(Popover.Trigger, { asChild: true, children: jsxs(Button, { size: "sm", variant: "outline", onClick: () => {
|
|
6487
6489
|
setOpen(true);
|
|
6488
|
-
}, justifyContent: 'start', children: [jsx(IoMdClock, {}), !!value ? `${displayedTime}` : ''] }) }), insideDialog ? (jsx(Popover.Positioner, { children: jsx(Popover.Content, { maxH: "70vh", overflowY: "auto", children: jsx(Popover.Body, { overflow: "visible", children: jsx(TimePicker$1, { hour: hour, setHour: setHour, minute: minute, setMinute: setMinute, meridiem: meridiem, setMeridiem: setMeridiem, onChange: handleTimeChange,
|
|
6489
|
-
am: translate.t(`common.am`, { defaultValue: 'AM' }),
|
|
6490
|
-
pm: translate.t(`common.pm`, { defaultValue: 'PM' }),
|
|
6491
|
-
} }) }) }) })) : (jsx(Portal, { children: jsx(Popover.Positioner, { children: jsx(Popover.Content, { children: jsx(Popover.Body, { children: jsx(TimePicker$1, { hour: hour, setHour: setHour, minute: minute, setMinute: setMinute, meridiem: meridiem, setMeridiem: setMeridiem, onChange: handleTimeChange, meridiemLabel: {
|
|
6492
|
-
am: translate.t(`common.am`, { defaultValue: 'AM' }),
|
|
6493
|
-
pm: translate.t(`common.pm`, { defaultValue: 'PM' }),
|
|
6494
|
-
} }) }) }) }) }))] }) }));
|
|
6490
|
+
}, justifyContent: 'start', children: [jsx(IoMdClock, {}), !!value ? `${displayedTime}` : ''] }) }), insideDialog ? (jsx(Popover.Positioner, { children: jsx(Popover.Content, { maxH: "70vh", overflowY: "auto", children: jsx(Popover.Body, { overflow: "visible", children: jsx(TimePicker$1, { hour: hour, setHour: setHour, minute: minute, setMinute: setMinute, meridiem: meridiem, setMeridiem: setMeridiem, onChange: handleTimeChange }) }) }) })) : (jsx(Portal, { children: jsx(Popover.Positioner, { children: jsx(Popover.Content, { children: jsx(Popover.Body, { children: jsx(TimePicker$1, { hour: hour, setHour: setHour, minute: minute, setMinute: setMinute, meridiem: meridiem, setMeridiem: setMeridiem, onChange: handleTimeChange }) }) }) }) }))] }) }));
|
|
6495
6491
|
};
|
|
6496
6492
|
|
|
6497
6493
|
dayjs.extend(utc);
|
|
@@ -8470,22 +8466,16 @@ const TableRowSelectorSkeleton = () => {
|
|
|
8470
8466
|
bg: { base: 'colorPalette.50', _dark: 'colorPalette.950' }, justifyItems: 'center', alignItems: 'center', children: jsx(Skeleton, { width: `${SELECTION_BOX_WIDTH}px`, height: `${SELECTION_BOX_WIDTH}px` }) }));
|
|
8471
8467
|
};
|
|
8472
8468
|
|
|
8473
|
-
const DefaultTable = ({ showFooter = false, tableProps = {}, tableHeaderProps = {}, tableBodyProps = {}, tableFooterProps = {}, controlProps = {}, variant = '', isLoading = false, }) => {
|
|
8474
|
-
|
|
8475
|
-
|
|
8476
|
-
|
|
8477
|
-
|
|
8478
|
-
|
|
8479
|
-
tableBodyProps.showSelector ??
|
|
8480
|
-
false,
|
|
8481
|
-
...tableProps, children: [jsx(TableHeader, { canResize: false, ...tableHeaderProps }), bodyComponent, showFooter && (jsx(TableFooter, { canResize: false, ...tableFooterProps }))] }) }));
|
|
8482
|
-
}
|
|
8483
|
-
const bodyComponent = isLoading ? (jsx(TableBodySkeleton, { showSelector: tableBodyProps.showSelector, canResize: tableBodyProps.canResize })) : (jsx(TableBody, { ...tableBodyProps }));
|
|
8484
|
-
return (jsx(TableControls, { ...controlProps, children: jsxs(Table, { showLoading: isLoading,
|
|
8469
|
+
const DefaultTable = ({ showFooter = false, showHeader = true, tableProps = {}, tableHeaderProps = {}, tableBodyProps = {}, tableFooterProps = {}, controlProps = {}, variant = 'greedy', isLoading = false, }) => {
|
|
8470
|
+
const isGreedy = variant === 'greedy';
|
|
8471
|
+
const canResize = !isGreedy;
|
|
8472
|
+
const bodyComponent = isLoading ? (jsx(TableBodySkeleton, { showSelector: tableBodyProps.showSelector, canResize: canResize })) : (jsx(TableBody, { ...tableBodyProps, canResize: canResize }));
|
|
8473
|
+
return (jsx(TableControls, { ...controlProps, children: jsxs(Table, { canResize,
|
|
8474
|
+
showLoading: isLoading,
|
|
8485
8475
|
showSelector: tableHeaderProps.showSelector ??
|
|
8486
8476
|
tableBodyProps.showSelector ??
|
|
8487
8477
|
false,
|
|
8488
|
-
...tableProps, children: [jsx(TableHeader, { ...tableHeaderProps }), bodyComponent, showFooter && jsx(TableFooter, { ...tableFooterProps })] }) }));
|
|
8478
|
+
...tableProps, children: [showHeader && jsx(TableHeader, { canResize, ...tableHeaderProps }), bodyComponent, showFooter && jsx(TableFooter, { canResize, ...tableFooterProps })] }) }));
|
|
8489
8479
|
};
|
|
8490
8480
|
|
|
8491
8481
|
/**
|
|
@@ -5,6 +5,7 @@ import { TableFooterProps } from './display/TableFooter';
|
|
|
5
5
|
import { TableHeaderProps } from './display/TableHeader';
|
|
6
6
|
export interface DefaultTableProps {
|
|
7
7
|
showFooter?: boolean;
|
|
8
|
+
showHeader?: boolean;
|
|
8
9
|
tableProps?: Omit<TableProps, 'children'>;
|
|
9
10
|
tableHeaderProps?: TableHeaderProps;
|
|
10
11
|
tableBodyProps?: TableBodyProps;
|
|
@@ -13,4 +14,4 @@ export interface DefaultTableProps {
|
|
|
13
14
|
variant?: '' | 'greedy';
|
|
14
15
|
isLoading?: boolean;
|
|
15
16
|
}
|
|
16
|
-
export declare const DefaultTable: ({ showFooter, tableProps, tableHeaderProps, tableBodyProps, tableFooterProps, controlProps, variant, isLoading, }: DefaultTableProps) => import("react/jsx-runtime").JSX.Element;
|
|
17
|
+
export declare const DefaultTable: ({ showFooter, showHeader, tableProps, tableHeaderProps, tableBodyProps, tableFooterProps, controlProps, variant, isLoading, }: DefaultTableProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -6,6 +6,7 @@ export interface TextCellProps {
|
|
|
6
6
|
onClick?: () => void;
|
|
7
7
|
isCopyable?: boolean;
|
|
8
8
|
isBadge?: boolean;
|
|
9
|
+
alignEnd?: boolean;
|
|
9
10
|
badgeColor?: 'gray' | 'red' | 'orange' | 'yellow' | 'green' | 'teal' | 'blue' | 'cyan' | 'purple' | 'pink';
|
|
10
11
|
colorPalette?: 'gray' | 'red' | 'orange' | 'yellow' | 'green' | 'teal' | 'blue' | 'cyan' | 'purple' | 'pink';
|
|
11
12
|
label?: string;
|
|
@@ -14,4 +15,4 @@ export interface TextCellProps {
|
|
|
14
15
|
containerProps?: FlexProps;
|
|
15
16
|
textProps?: TextProps;
|
|
16
17
|
}
|
|
17
|
-
export declare const TextCell: ({ text, href, onClick, isCopyable, isBadge, badgeColor, colorPalette, label, containerProps, textProps, children, }: TextCellProps) => import("react/jsx-runtime").JSX.Element;
|
|
18
|
+
export declare const TextCell: ({ text, href, onClick, isCopyable, isBadge, badgeColor, colorPalette, alignEnd, label, containerProps, textProps, children, }: TextCellProps) => import("react/jsx-runtime").JSX.Element;
|