@majoo-ui/react 1.56.0 → 1.56.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.
|
@@ -5,7 +5,8 @@ export declare const ButtonPrimitive: import("@stitches/react/types/styled-compo
|
|
|
5
5
|
buttonType?: "primary" | "secondary" | "ghost" | "ghost-secondary" | "negative" | "negative-secondary" | "negative-ghost" | "headerMenu" | "tableMenu" | undefined;
|
|
6
6
|
size?: "sm" | "md" | "lg" | "xs" | undefined;
|
|
7
7
|
iconSize?: "sm" | "md" | "lg" | "xs" | undefined;
|
|
8
|
-
|
|
8
|
+
hidden?: boolean | "true" | undefined;
|
|
9
|
+
withIcon?: boolean | "true" | undefined;
|
|
9
10
|
}, {
|
|
10
11
|
sm: "(min-width: 359px)";
|
|
11
12
|
md: "(min-width: 767px)";
|
|
@@ -133,7 +134,8 @@ export declare const Button: React.ForwardRefExoticComponent<import("@stitches/r
|
|
|
133
134
|
buttonType?: "primary" | "secondary" | "ghost" | "ghost-secondary" | "negative" | "negative-secondary" | "negative-ghost" | "headerMenu" | "tableMenu" | undefined;
|
|
134
135
|
size?: "sm" | "md" | "lg" | "xs" | undefined;
|
|
135
136
|
iconSize?: "sm" | "md" | "lg" | "xs" | undefined;
|
|
136
|
-
|
|
137
|
+
hidden?: boolean | "true" | undefined;
|
|
138
|
+
withIcon?: boolean | "true" | undefined;
|
|
137
139
|
}, {
|
|
138
140
|
sm: "(min-width: 359px)";
|
|
139
141
|
md: "(min-width: 767px)";
|
|
@@ -28,5 +28,5 @@ interface IInputResourceListProps {
|
|
|
28
28
|
title?: string;
|
|
29
29
|
hideSelectAll?: boolean;
|
|
30
30
|
}
|
|
31
|
-
declare function InputResourceList({ data, disabled, onItemCheck, onItemUncheck, searchPlaceholder, counterFooterText, isLoading, enabledItems, emptyDataMessage, value, fetchData, onQueryChange, css, defaultSort, title, hideSelectAll, }: IInputResourceListProps): JSX.Element;
|
|
31
|
+
declare function InputResourceList({ data: dataProp, disabled, onItemCheck, onItemUncheck, searchPlaceholder, counterFooterText, isLoading, enabledItems, emptyDataMessage, value, fetchData, onQueryChange, css, defaultSort, title, hideSelectAll, }: IInputResourceListProps): JSX.Element;
|
|
32
32
|
export default InputResourceList;
|
package/index.esm.js
CHANGED
|
@@ -3993,26 +3993,29 @@ const ButtonTableMenu = {
|
|
|
3993
3993
|
}
|
|
3994
3994
|
};
|
|
3995
3995
|
const StyledIcon$2 = styled('div', {
|
|
3996
|
-
|
|
3996
|
+
display: 'inline-flex',
|
|
3997
|
+
justifyContent: 'center',
|
|
3998
|
+
alignItems: 'center',
|
|
3997
3999
|
'& svg': {
|
|
3998
4000
|
verticalAlign: 'middle'
|
|
3999
4001
|
}
|
|
4000
4002
|
});
|
|
4001
4003
|
const StyledIconLeft$4 = styled('div', {
|
|
4002
4004
|
marginRight: '$spacing-03',
|
|
4003
|
-
display: 'inline-
|
|
4004
|
-
|
|
4005
|
+
display: 'inline-flex',
|
|
4006
|
+
justifyContent: 'center',
|
|
4007
|
+
alignItems: 'center'
|
|
4005
4008
|
});
|
|
4006
4009
|
const StyledIconRight$2 = styled('div', {
|
|
4007
4010
|
marginLeft: '$spacing-03',
|
|
4008
|
-
display: 'inline-
|
|
4009
|
-
|
|
4011
|
+
display: 'inline-flex',
|
|
4012
|
+
justifyContent: 'center',
|
|
4013
|
+
alignItems: 'center'
|
|
4010
4014
|
});
|
|
4011
4015
|
const ButtonPrimitive = styled('button', {
|
|
4012
4016
|
margin: 0,
|
|
4013
|
-
display: '
|
|
4014
|
-
|
|
4015
|
-
justifyContent: 'center',
|
|
4017
|
+
display: 'block',
|
|
4018
|
+
verticalAlign: 'middle',
|
|
4016
4019
|
fontWeight: 600,
|
|
4017
4020
|
width: 'auto',
|
|
4018
4021
|
height: '40px',
|
|
@@ -4023,7 +4026,6 @@ const ButtonPrimitive = styled('button', {
|
|
|
4023
4026
|
textAlign: 'center',
|
|
4024
4027
|
lineHeight: '20px',
|
|
4025
4028
|
position: 'relative',
|
|
4026
|
-
verticalAlign: 'middle',
|
|
4027
4029
|
whiteSpace: 'nowrap',
|
|
4028
4030
|
'&:focus': {
|
|
4029
4031
|
outline: '2px solid #82C4E0'
|
|
@@ -4120,9 +4122,20 @@ const ButtonPrimitive = styled('button', {
|
|
|
4120
4122
|
borderRadius: '$md'
|
|
4121
4123
|
}
|
|
4122
4124
|
},
|
|
4123
|
-
|
|
4125
|
+
/**
|
|
4126
|
+
* Hidden the button
|
|
4127
|
+
*/
|
|
4128
|
+
hidden: {
|
|
4124
4129
|
true: {
|
|
4125
|
-
display: '
|
|
4130
|
+
display: 'none'
|
|
4131
|
+
}
|
|
4132
|
+
},
|
|
4133
|
+
withIcon: {
|
|
4134
|
+
true: {
|
|
4135
|
+
display: 'inline-flex',
|
|
4136
|
+
flexDirection: 'row',
|
|
4137
|
+
alignItems: 'center',
|
|
4138
|
+
justifyContent: 'center'
|
|
4126
4139
|
}
|
|
4127
4140
|
}
|
|
4128
4141
|
}
|
|
@@ -4146,11 +4159,10 @@ const Button$4 = /*#__PURE__*/React.forwardRef((_a, forwardedRef) => {
|
|
|
4146
4159
|
type: type,
|
|
4147
4160
|
buttonType: buttonType,
|
|
4148
4161
|
size: size,
|
|
4162
|
+
withIcon: Boolean(icon || leftIcon || rightIcon),
|
|
4149
4163
|
iconSize: icon ? size : undefined,
|
|
4150
4164
|
disabled: disabled,
|
|
4151
|
-
displayBlock: Boolean(block || leftIcon || rightIcon),
|
|
4152
4165
|
css: Object.assign(Object.assign({}, props.css), {
|
|
4153
|
-
display: block ? 'block' : 'inline-block',
|
|
4154
4166
|
width: block ? '100%' : width
|
|
4155
4167
|
}),
|
|
4156
4168
|
ref: forwardedRef
|
|
@@ -12177,7 +12189,7 @@ const SortingIcon = styled(Flex$1, {
|
|
|
12177
12189
|
justifyContent: 'center'
|
|
12178
12190
|
});
|
|
12179
12191
|
function InputResourceList({
|
|
12180
|
-
data,
|
|
12192
|
+
data: dataProp,
|
|
12181
12193
|
disabled = false,
|
|
12182
12194
|
onItemCheck,
|
|
12183
12195
|
onItemUncheck,
|
|
@@ -12200,7 +12212,15 @@ function InputResourceList({
|
|
|
12200
12212
|
const [checkedResources, setCheckedResources] = useState([]);
|
|
12201
12213
|
const [query, setQuery] = useState();
|
|
12202
12214
|
const [sortType, setSortType] = useState('asc');
|
|
12215
|
+
const [data, setData] = useState([]);
|
|
12203
12216
|
const scrollerRef = useRef(null);
|
|
12217
|
+
useEffect(() => {
|
|
12218
|
+
function filterUnique(params) {
|
|
12219
|
+
const unique = params === null || params === void 0 ? void 0 : params.filter((obj, index) => (params === null || params === void 0 ? void 0 : params.findIndex(item => (item === null || item === void 0 ? void 0 : item.value) === (obj === null || obj === void 0 ? void 0 : obj.value))) === index);
|
|
12220
|
+
setData(unique);
|
|
12221
|
+
}
|
|
12222
|
+
filterUnique(dataProp);
|
|
12223
|
+
}, [dataProp]);
|
|
12204
12224
|
useEffect(() => {
|
|
12205
12225
|
var _a;
|
|
12206
12226
|
(_a = scrollerRef.current) === null || _a === void 0 ? void 0 : _a.scrollTo({
|
|
@@ -13435,7 +13455,7 @@ function addPropsToChildren(children, props) {
|
|
|
13435
13455
|
const _excluded$9 = ["children"],
|
|
13436
13456
|
_excluded2$3 = ["children", "activeTabs"],
|
|
13437
13457
|
_excluded3$1 = ["children", "icon", "activeTabs", "value"],
|
|
13438
|
-
_excluded4
|
|
13458
|
+
_excluded4 = ["activeTabs"];
|
|
13439
13459
|
var _jsxFileName$r = "/Users/ryanakbar20/Documents/project/majoo/majoo-ui/packages/react/src/components/tabs/Tabs.js";
|
|
13440
13460
|
const StyledTabs = styled(TabsPrimitive.Root, {
|
|
13441
13461
|
display: 'flex',
|
|
@@ -13747,7 +13767,7 @@ const TabsTrigger$1 = _ref3 => {
|
|
|
13747
13767
|
}), (!icon || activeTabs === value) && children)));
|
|
13748
13768
|
};
|
|
13749
13769
|
const TabsContent$1 = _ref4 => {
|
|
13750
|
-
let props = _objectWithoutPropertiesLoose(_ref4, _excluded4
|
|
13770
|
+
let props = _objectWithoutPropertiesLoose(_ref4, _excluded4);
|
|
13751
13771
|
return /*#__PURE__*/React__default.createElement(StyledContent$4, _extends({}, props, {
|
|
13752
13772
|
__self: undefined,
|
|
13753
13773
|
__source: {
|
|
@@ -18540,7 +18560,14 @@ const TableContainer$4 = styled(Flex$1, {
|
|
|
18540
18560
|
height: '100%',
|
|
18541
18561
|
overflowY: 'auto',
|
|
18542
18562
|
overflowX: 'hidden',
|
|
18543
|
-
padding: '0 $spacing-05'
|
|
18563
|
+
padding: '0 $spacing-05',
|
|
18564
|
+
variants: {
|
|
18565
|
+
decoration: {
|
|
18566
|
+
true: {
|
|
18567
|
+
overflow: 'unset'
|
|
18568
|
+
}
|
|
18569
|
+
}
|
|
18570
|
+
}
|
|
18544
18571
|
});
|
|
18545
18572
|
const TableHeadRow$4 = styled('tr', {
|
|
18546
18573
|
borderBottom: '1pt solid $bgBorder',
|
|
@@ -18642,190 +18669,227 @@ const MobileTable = /*#__PURE__*/React__default.forwardRef(({
|
|
|
18642
18669
|
}
|
|
18643
18670
|
return (getIsMobileHeader() ? column.isMobileHeader : index === indexDefaultHeader) || column.id === 'selection';
|
|
18644
18671
|
};
|
|
18672
|
+
const renderTableDecorationChild = child => {
|
|
18673
|
+
return jsx(TableContent$3, {
|
|
18674
|
+
children: jsx(TableBody$3, Object.assign({}, getTableBodyProps(), {
|
|
18675
|
+
children: child
|
|
18676
|
+
}), void 0)
|
|
18677
|
+
}, void 0);
|
|
18678
|
+
};
|
|
18645
18679
|
return jsxs(TableContainer$4, Object.assign({
|
|
18646
18680
|
css: css,
|
|
18647
|
-
ref: ref
|
|
18681
|
+
ref: ref,
|
|
18682
|
+
decoration: Boolean(decoration)
|
|
18648
18683
|
}, {
|
|
18649
|
-
children: [
|
|
18650
|
-
|
|
18651
|
-
|
|
18652
|
-
|
|
18653
|
-
|
|
18654
|
-
|
|
18655
|
-
|
|
18656
|
-
|
|
18657
|
-
|
|
18658
|
-
|
|
18659
|
-
|
|
18660
|
-
|
|
18661
|
-
|
|
18662
|
-
|
|
18663
|
-
|
|
18664
|
-
|
|
18665
|
-
|
|
18666
|
-
isToggled: column.isToggled
|
|
18667
|
-
}, {
|
|
18668
|
-
children: jsx(TableHeadCellContent, Object.assign({
|
|
18684
|
+
children: [jsx(ConditionalWrapper, Object.assign({
|
|
18685
|
+
condition: !decoration,
|
|
18686
|
+
wrapper: child => infiniteScrollWrapper(child)
|
|
18687
|
+
}, {
|
|
18688
|
+
children: jsxs(TableContent$3, Object.assign({}, getTableProps(), {
|
|
18689
|
+
children: [jsx(TableHead$3, Object.assign({
|
|
18690
|
+
hiddenHeader: hideHeader
|
|
18691
|
+
}, {
|
|
18692
|
+
children: headerGroups.map(headerGroup => jsx(TableHeadRow$4, Object.assign({}, headerGroup.getHeaderGroupProps(), {
|
|
18693
|
+
children: headerGroup.headers.filter((column, index) => filterMobileHeader(column, index)).map(column => {
|
|
18694
|
+
const headerRender = column.render('Header');
|
|
18695
|
+
return jsx(TableHeadCell$4, Object.assign({}, column.getHeaderProps(!column.unsortable ? column.getSortByToggleProps({
|
|
18696
|
+
title: t('sortColumnTitle', 'Urutkan') || 'Urutkan'
|
|
18697
|
+
}) : {
|
|
18698
|
+
onClick: column.onToggle
|
|
18699
|
+
}), {
|
|
18700
|
+
children: typeof headerRender === 'string' ? jsx(TableHeaderCellContainer, Object.assign({
|
|
18669
18701
|
isMobile: true,
|
|
18670
|
-
|
|
18671
|
-
|
|
18702
|
+
isSortedDesc: column.isSortedDesc,
|
|
18703
|
+
unsortable: column.unsortable,
|
|
18704
|
+
isToggleable: !!column.onToggle,
|
|
18705
|
+
isToggled: column.isToggled
|
|
18672
18706
|
}, {
|
|
18673
|
-
children:
|
|
18674
|
-
|
|
18675
|
-
|
|
18676
|
-
|
|
18677
|
-
|
|
18678
|
-
|
|
18679
|
-
|
|
18680
|
-
|
|
18681
|
-
|
|
18682
|
-
|
|
18683
|
-
|
|
18684
|
-
|
|
18685
|
-
|
|
18686
|
-
|
|
18687
|
-
|
|
18688
|
-
|
|
18689
|
-
|
|
18690
|
-
|
|
18691
|
-
|
|
18692
|
-
customStyle = customRowsStyle(row.values)[_i].css;
|
|
18707
|
+
children: jsx(TableHeadCellContent, Object.assign({
|
|
18708
|
+
isMobile: true,
|
|
18709
|
+
heading: "headerTable",
|
|
18710
|
+
color: "secondary"
|
|
18711
|
+
}, {
|
|
18712
|
+
children: headerRender.toUpperCase()
|
|
18713
|
+
}), void 0)
|
|
18714
|
+
}), void 0) : headerRender
|
|
18715
|
+
}), void 0);
|
|
18716
|
+
})
|
|
18717
|
+
}), void 0))
|
|
18718
|
+
}), void 0), jsxs(TableBody$3, Object.assign({}, getTableBodyProps(), {
|
|
18719
|
+
children: [(_a = decoration === null || decoration === void 0 ? void 0 : decoration.headerRender) === null || _a === void 0 ? void 0 : _a.call(decoration), jsx(ConditionalWrapper, Object.assign({
|
|
18720
|
+
condition: Boolean(decoration),
|
|
18721
|
+
wrapper: child => jsx(TableRow$4, Object.assign({
|
|
18722
|
+
css: {
|
|
18723
|
+
'&:hover': {
|
|
18724
|
+
backgroundColor: 'unset'
|
|
18725
|
+
}
|
|
18693
18726
|
}
|
|
18694
|
-
}
|
|
18695
|
-
}
|
|
18696
|
-
return jsxs(React__default.Fragment, {
|
|
18697
|
-
children: [((rowGroup === null || rowGroup === void 0 ? void 0 : rowGroup.showGroupingWhenSorted) || sortBy.length <= 0) && row.original['isTopChild'] && ((rowGroup === null || rowGroup === void 0 ? void 0 : rowGroup.headerRender) ? rowGroup === null || rowGroup === void 0 ? void 0 : rowGroup.headerRender(row) : jsx(Text$1, Object.assign({
|
|
18698
|
-
variant: "contentButton"
|
|
18699
18727
|
}, {
|
|
18700
|
-
children:
|
|
18701
|
-
|
|
18702
|
-
|
|
18703
|
-
|
|
18704
|
-
|
|
18728
|
+
children: jsx(TableCell$4, Object.assign({
|
|
18729
|
+
colSpan: (decoration === null || decoration === void 0 ? void 0 : decoration.colSpan) || 12
|
|
18730
|
+
}, {
|
|
18731
|
+
children: jsx(Box, Object.assign({
|
|
18732
|
+
css: Object.assign({
|
|
18733
|
+
height: 300,
|
|
18734
|
+
overflowY: 'auto'
|
|
18735
|
+
}, decoration === null || decoration === void 0 ? void 0 : decoration.css)
|
|
18736
|
+
}, {
|
|
18737
|
+
children: infiniteScrollWrapper(renderTableDecorationChild(child))
|
|
18738
|
+
}), void 0)
|
|
18739
|
+
}), void 0)
|
|
18740
|
+
}), void 0)
|
|
18741
|
+
}, {
|
|
18742
|
+
children: page.map((row, i) => {
|
|
18743
|
+
var _a;
|
|
18744
|
+
prepareRow(row);
|
|
18745
|
+
const isContextMenu = (_a = row.cells.filter(cell => {
|
|
18705
18746
|
var _a, _b;
|
|
18706
|
-
|
|
18707
|
-
|
|
18708
|
-
|
|
18709
|
-
|
|
18710
|
-
|
|
18711
|
-
|
|
18712
|
-
|
|
18713
|
-
|
|
18714
|
-
|
|
18715
|
-
|
|
18716
|
-
|
|
18717
|
-
|
|
18718
|
-
|
|
18719
|
-
|
|
18720
|
-
}, {
|
|
18721
|
-
children: children
|
|
18722
|
-
}), void 0)
|
|
18723
|
-
}), void 0)
|
|
18747
|
+
return (_b = (_a = cell.column) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.length;
|
|
18748
|
+
})) === null || _a === void 0 ? void 0 : _a.length;
|
|
18749
|
+
const actionCells = row.allCells.filter(cell => cell.column.id === 'menu' || cell.column.isAction);
|
|
18750
|
+
let customStyle = {};
|
|
18751
|
+
if (customRowsStyle && customRowsStyle(row.values).length) {
|
|
18752
|
+
for (let _i = 0; _i < customRowsStyle(row.values).length; _i++) {
|
|
18753
|
+
if (customRowsStyle(row.values)[_i].predicate) {
|
|
18754
|
+
customStyle = customRowsStyle(row.values)[_i].css;
|
|
18755
|
+
}
|
|
18756
|
+
}
|
|
18757
|
+
}
|
|
18758
|
+
return jsxs(React__default.Fragment, {
|
|
18759
|
+
children: [((rowGroup === null || rowGroup === void 0 ? void 0 : rowGroup.showGroupingWhenSorted) || sortBy.length <= 0) && row.original['isTopChild'] && ((rowGroup === null || rowGroup === void 0 ? void 0 : rowGroup.headerRender) ? rowGroup === null || rowGroup === void 0 ? void 0 : rowGroup.headerRender(row) : jsx(Text$1, Object.assign({
|
|
18760
|
+
variant: "contentButton"
|
|
18724
18761
|
}, {
|
|
18725
|
-
children:
|
|
18726
|
-
}), void 0)
|
|
18727
|
-
|
|
18728
|
-
|
|
18729
|
-
|
|
18730
|
-
|
|
18731
|
-
|
|
18732
|
-
|
|
18733
|
-
|
|
18734
|
-
|
|
18735
|
-
|
|
18736
|
-
|
|
18737
|
-
|
|
18738
|
-
|
|
18739
|
-
|
|
18740
|
-
|
|
18741
|
-
|
|
18742
|
-
|
|
18743
|
-
|
|
18744
|
-
|
|
18745
|
-
}
|
|
18746
|
-
|
|
18762
|
+
children: row.cells[0].render('Cell')
|
|
18763
|
+
}), void 0)), jsx(TableRow$4, Object.assign({
|
|
18764
|
+
css: customStyle
|
|
18765
|
+
}, row.getRowProps(), {
|
|
18766
|
+
children: row.cells.filter((cell, indexCell) => (getIsMobileHeader() ? cell.column.isMobileHeader : indexCell === indexDefaultHeader) || cell.column.id === 'selection').map(cell => {
|
|
18767
|
+
var _a, _b;
|
|
18768
|
+
const collId = (_a = cell === null || cell === void 0 ? void 0 : cell.column) === null || _a === void 0 ? void 0 : _a.id;
|
|
18769
|
+
const exceptionId = (_b = ['expander', 'selection', 'menu', 'eye'].concat(additionalExceptionIds)) === null || _b === void 0 ? void 0 : _b.includes(collId);
|
|
18770
|
+
const renderCell = () => jsx(ConditionalWrapper, Object.assign({
|
|
18771
|
+
condition: isContextMenu && !exceptionId,
|
|
18772
|
+
wrapper: children => jsx(ContextMenuTrigger, Object.assign({
|
|
18773
|
+
id: "context-menu-table",
|
|
18774
|
+
triggerSide: "left"
|
|
18775
|
+
}, {
|
|
18776
|
+
children: jsx(Box, Object.assign({
|
|
18777
|
+
onClick: () => handleRowClick(row, i),
|
|
18778
|
+
css: {
|
|
18779
|
+
cursor: 'pointer',
|
|
18780
|
+
width: 'calc(100vw - 120px)'
|
|
18781
|
+
}
|
|
18782
|
+
}, {
|
|
18783
|
+
children: children
|
|
18784
|
+
}), void 0)
|
|
18785
|
+
}), void 0)
|
|
18747
18786
|
}, {
|
|
18748
|
-
children:
|
|
18749
|
-
}), void 0)
|
|
18750
|
-
|
|
18751
|
-
|
|
18752
|
-
|
|
18787
|
+
children: cell.render('Cell')
|
|
18788
|
+
}), void 0);
|
|
18789
|
+
return jsx(TableCell$4, Object.assign({}, cell.getCellProps(addOnCellStyle(cell.column.id)), {
|
|
18790
|
+
children: cell.column.accessor ? jsxs(Flex$1, Object.assign({
|
|
18791
|
+
justify: "between",
|
|
18792
|
+
align: "center",
|
|
18793
|
+
css: {
|
|
18794
|
+
cursor: 'pointer',
|
|
18795
|
+
height: '100%'
|
|
18753
18796
|
}
|
|
18754
|
-
|
|
18755
|
-
|
|
18797
|
+
}, {
|
|
18798
|
+
children: [jsx(Flex$1, Object.assign({
|
|
18799
|
+
align: "center",
|
|
18800
|
+
css: {
|
|
18801
|
+
flex: 1,
|
|
18802
|
+
height: '100%'
|
|
18803
|
+
},
|
|
18804
|
+
onClick: () => {
|
|
18805
|
+
if (!exceptionId) {
|
|
18806
|
+
handleRowClick(row, i);
|
|
18807
|
+
}
|
|
18808
|
+
}
|
|
18809
|
+
}, {
|
|
18810
|
+
children: renderCell()
|
|
18811
|
+
}), void 0), jsx(Box, Object.assign({
|
|
18812
|
+
onClick: () => {
|
|
18813
|
+
if (!Object.keys(state.expanded).includes(row.id)) {
|
|
18814
|
+
toggleAllRowsExpanded(false);
|
|
18815
|
+
}
|
|
18816
|
+
row.toggleRowExpanded(!row.isExpanded);
|
|
18817
|
+
}
|
|
18818
|
+
}, {
|
|
18819
|
+
children: row.isExpanded ? jsx(ChevronUpOutline, {}, void 0) : jsx(ChevronDownOutline, {}, void 0)
|
|
18820
|
+
}), void 0)]
|
|
18821
|
+
}), void 0) : renderCell()
|
|
18822
|
+
}), void 0);
|
|
18823
|
+
})
|
|
18824
|
+
}), void 0), ((rowGroup === null || rowGroup === void 0 ? void 0 : rowGroup.showGroupingWhenSorted) || sortBy.length <= 0) && row.original['isBottomChild'] && !!(rowGroup === null || rowGroup === void 0 ? void 0 : rowGroup.footerRender) && (rowGroup === null || rowGroup === void 0 ? void 0 : rowGroup.footerRender(row)), row.isExpanded ? jsx(TableRow$4, {
|
|
18825
|
+
children: jsxs(TableCell$4, Object.assign({
|
|
18826
|
+
colSpan: visibleColumns.length
|
|
18827
|
+
}, {
|
|
18828
|
+
children: [jsx(Flex$1, Object.assign({
|
|
18829
|
+
direction: "column"
|
|
18756
18830
|
}, {
|
|
18757
|
-
children: row.
|
|
18758
|
-
|
|
18759
|
-
|
|
18760
|
-
|
|
18761
|
-
|
|
18762
|
-
|
|
18763
|
-
|
|
18764
|
-
|
|
18765
|
-
|
|
18766
|
-
|
|
18767
|
-
|
|
18768
|
-
|
|
18769
|
-
|
|
18770
|
-
|
|
18771
|
-
|
|
18831
|
+
children: row.cells.filter((cell, indexCell) => (getIsMobileHeader() ? !cell.column.isMobileHeader : indexCell !== indexDefaultHeader) && cell.column.accessor).map(cell => {
|
|
18832
|
+
var _a;
|
|
18833
|
+
return jsxs(Flex$1, Object.assign({
|
|
18834
|
+
align: "center",
|
|
18835
|
+
justify: "between",
|
|
18836
|
+
gap: 5,
|
|
18837
|
+
css: {
|
|
18838
|
+
backgroundColor: colors$5.bgGray,
|
|
18839
|
+
padding: `$spacing-04 $spacing-05 ${'selection' in row.values ? '$spacing-04 $spacing-07' : ''}`,
|
|
18840
|
+
borderBottom: '1pt solid $bgBorder',
|
|
18841
|
+
alignItems: cell.column.accessor ? getAlign(cellAlign) : 'center'
|
|
18842
|
+
}
|
|
18843
|
+
}, {
|
|
18844
|
+
children: [jsx(Heading, Object.assign({
|
|
18845
|
+
css: {
|
|
18846
|
+
padding: '3px 0px'
|
|
18847
|
+
},
|
|
18848
|
+
heading: "headerTable",
|
|
18849
|
+
color: "secondary"
|
|
18850
|
+
}, {
|
|
18851
|
+
children: typeof cell.column.Header === 'string' ? (_a = cell.column.Header) === null || _a === void 0 ? void 0 : _a.toUpperCase() : cell.render('Header')
|
|
18852
|
+
}), void 0), cell.render('Cell')]
|
|
18853
|
+
}), `${cell.column.id}-${row.id}`);
|
|
18854
|
+
})
|
|
18855
|
+
}), void 0), actionCells && actionCells.length > 0 && jsx(Flex$1, Object.assign({
|
|
18772
18856
|
align: "center",
|
|
18773
|
-
justify: "
|
|
18774
|
-
gap:
|
|
18857
|
+
justify: "end",
|
|
18858
|
+
gap: 3,
|
|
18775
18859
|
css: {
|
|
18860
|
+
height: '40px',
|
|
18776
18861
|
backgroundColor: colors$5.bgGray,
|
|
18777
|
-
|
|
18778
|
-
borderBottom: '1pt solid $bgBorder',
|
|
18779
|
-
alignItems: cell.column.accessor ? getAlign(cellAlign) : 'center'
|
|
18862
|
+
paddingRight: '$spacing-04'
|
|
18780
18863
|
}
|
|
18781
18864
|
}, {
|
|
18782
|
-
children:
|
|
18783
|
-
|
|
18784
|
-
|
|
18785
|
-
|
|
18786
|
-
|
|
18787
|
-
|
|
18788
|
-
|
|
18789
|
-
|
|
18790
|
-
|
|
18791
|
-
|
|
18792
|
-
|
|
18793
|
-
}), void 0), actionCells && actionCells.length > 0 && jsx(Flex$1, Object.assign({
|
|
18794
|
-
align: "center",
|
|
18795
|
-
justify: "end",
|
|
18796
|
-
gap: 3,
|
|
18797
|
-
css: {
|
|
18798
|
-
height: '40px',
|
|
18799
|
-
backgroundColor: colors$5.bgGray,
|
|
18800
|
-
paddingRight: '$spacing-04'
|
|
18801
|
-
}
|
|
18802
|
-
}, {
|
|
18803
|
-
children: actionCells.map(cell => cell.render('Cell'))
|
|
18804
|
-
}), void 0)]
|
|
18805
|
-
}), void 0)
|
|
18806
|
-
}, void 0) : null]
|
|
18807
|
-
}, row.id);
|
|
18808
|
-
}), (_b = decoration === null || decoration === void 0 ? void 0 : decoration.footerRender) === null || _b === void 0 ? void 0 : _b.call(decoration)]
|
|
18809
|
-
}), void 0), !isInfiniteScroll && jsx(TableFoot$2, {
|
|
18810
|
-
children: jsx(TableFootRow$2, {
|
|
18811
|
-
children: jsx(TableFootCell$2, Object.assign({
|
|
18812
|
-
colSpan: 100
|
|
18813
|
-
}, {
|
|
18814
|
-
children: totalData > 0 || isLoading ? footer : jsxs(Flex$1, Object.assign({
|
|
18815
|
-
align: "center",
|
|
18816
|
-
justify: "center",
|
|
18817
|
-
direction: "column",
|
|
18818
|
-
gap: 3,
|
|
18819
|
-
css: {
|
|
18820
|
-
margin: '56px auto 100px'
|
|
18821
|
-
}
|
|
18865
|
+
children: actionCells.map(cell => cell.render('Cell'))
|
|
18866
|
+
}), void 0)]
|
|
18867
|
+
}), void 0)
|
|
18868
|
+
}, void 0) : null]
|
|
18869
|
+
}, row.id);
|
|
18870
|
+
})
|
|
18871
|
+
}), void 0), (_b = decoration === null || decoration === void 0 ? void 0 : decoration.footerRender) === null || _b === void 0 ? void 0 : _b.call(decoration)]
|
|
18872
|
+
}), void 0), !isInfiniteScroll && jsx(TableFoot$2, {
|
|
18873
|
+
children: jsx(TableFootRow$2, {
|
|
18874
|
+
children: jsx(TableFootCell$2, Object.assign({
|
|
18875
|
+
colSpan: 100
|
|
18822
18876
|
}, {
|
|
18823
|
-
children:
|
|
18877
|
+
children: totalData > 0 || isLoading ? footer : jsxs(Flex$1, Object.assign({
|
|
18878
|
+
align: "center",
|
|
18879
|
+
justify: "center",
|
|
18880
|
+
direction: "column",
|
|
18881
|
+
gap: 3,
|
|
18882
|
+
css: {
|
|
18883
|
+
margin: '56px auto 100px'
|
|
18884
|
+
}
|
|
18885
|
+
}, {
|
|
18886
|
+
children: [customEmptyDataProps.doodleImage, customEmptyDataProps.title, customEmptyDataProps.description]
|
|
18887
|
+
}), void 0)
|
|
18824
18888
|
}), void 0)
|
|
18825
|
-
}
|
|
18826
|
-
}, void 0)
|
|
18827
|
-
}, void 0)
|
|
18828
|
-
}), void 0)
|
|
18889
|
+
}, void 0)
|
|
18890
|
+
}, void 0)]
|
|
18891
|
+
}), void 0)
|
|
18892
|
+
}), void 0), renderContextMenu === null || renderContextMenu === void 0 ? void 0 : renderContextMenu()]
|
|
18829
18893
|
}), void 0);
|
|
18830
18894
|
});
|
|
18831
18895
|
|
|
@@ -19632,7 +19696,7 @@ function Table({
|
|
|
19632
19696
|
}
|
|
19633
19697
|
}, {
|
|
19634
19698
|
children: jsx(TableCell$3, Object.assign({
|
|
19635
|
-
colSpan: 12
|
|
19699
|
+
colSpan: (decoration === null || decoration === void 0 ? void 0 : decoration.colSpan) || 12
|
|
19636
19700
|
}, {
|
|
19637
19701
|
children: jsx(Box, Object.assign({
|
|
19638
19702
|
css: Object.assign({
|
|
@@ -21447,8 +21511,7 @@ const AlertDialogConfirm = ADialog.Action;
|
|
|
21447
21511
|
|
|
21448
21512
|
const _excluded = ["side", "align", "children"],
|
|
21449
21513
|
_excluded2 = ["children"],
|
|
21450
|
-
_excluded3 = ["asChild"]
|
|
21451
|
-
_excluded4 = ["rightIcon"];
|
|
21514
|
+
_excluded3 = ["asChild"];
|
|
21452
21515
|
var _jsxFileName$a = "/Users/ryanakbar20/Documents/project/majoo/majoo-ui/packages/react/src/components/dropdownMenu/DropdownMenu.js";
|
|
21453
21516
|
const Context = /*#__PURE__*/React__default.createContext();
|
|
21454
21517
|
const slideUpAndFade = keyframes({
|
|
@@ -21664,9 +21727,7 @@ const RightSlot = styled('div', {
|
|
|
21664
21727
|
color: colors$5.gray400
|
|
21665
21728
|
}
|
|
21666
21729
|
});
|
|
21667
|
-
const StyledDropdown = styled(
|
|
21668
|
-
display: 'flex',
|
|
21669
|
-
gap: '8px',
|
|
21730
|
+
const StyledDropdown = styled(Button$4, {
|
|
21670
21731
|
padding: '6px 12px',
|
|
21671
21732
|
'&:disabled': {
|
|
21672
21733
|
'& + div': {
|
|
@@ -21675,10 +21736,7 @@ const StyledDropdown = styled(ButtonPrimitive, {
|
|
|
21675
21736
|
}
|
|
21676
21737
|
});
|
|
21677
21738
|
const ButtonDropdown = /*#__PURE__*/React__default.forwardRef((props, ref) => {
|
|
21678
|
-
const {
|
|
21679
|
-
rightIcon
|
|
21680
|
-
} = props,
|
|
21681
|
-
rest = _objectWithoutPropertiesLoose(props, _excluded4);
|
|
21739
|
+
const rest = Object.assign({}, (_objectDestructuringEmpty(props), props));
|
|
21682
21740
|
return /*#__PURE__*/React__default.createElement(StyledDropdown, _extends({
|
|
21683
21741
|
ref: ref,
|
|
21684
21742
|
css: rest.css
|
|
@@ -21686,10 +21744,10 @@ const ButtonDropdown = /*#__PURE__*/React__default.forwardRef((props, ref) => {
|
|
|
21686
21744
|
__self: undefined,
|
|
21687
21745
|
__source: {
|
|
21688
21746
|
fileName: _jsxFileName$a,
|
|
21689
|
-
lineNumber:
|
|
21747
|
+
lineNumber: 175,
|
|
21690
21748
|
columnNumber: 5
|
|
21691
21749
|
}
|
|
21692
|
-
}), rest.children
|
|
21750
|
+
}), rest.children);
|
|
21693
21751
|
});
|
|
21694
21752
|
ButtonDropdown.propTypes = {
|
|
21695
21753
|
children: PropTypes.node.isRequired,
|
package/index.umd.js
CHANGED
|
@@ -4068,26 +4068,29 @@
|
|
|
4068
4068
|
}
|
|
4069
4069
|
};
|
|
4070
4070
|
var StyledIcon$2 = styled('div', {
|
|
4071
|
-
|
|
4071
|
+
display: 'inline-flex',
|
|
4072
|
+
justifyContent: 'center',
|
|
4073
|
+
alignItems: 'center',
|
|
4072
4074
|
'& svg': {
|
|
4073
4075
|
verticalAlign: 'middle'
|
|
4074
4076
|
}
|
|
4075
4077
|
});
|
|
4076
4078
|
var StyledIconLeft$4 = styled('div', {
|
|
4077
4079
|
marginRight: '$spacing-03',
|
|
4078
|
-
display: 'inline-
|
|
4079
|
-
|
|
4080
|
+
display: 'inline-flex',
|
|
4081
|
+
justifyContent: 'center',
|
|
4082
|
+
alignItems: 'center'
|
|
4080
4083
|
});
|
|
4081
4084
|
var StyledIconRight$2 = styled('div', {
|
|
4082
4085
|
marginLeft: '$spacing-03',
|
|
4083
|
-
display: 'inline-
|
|
4084
|
-
|
|
4086
|
+
display: 'inline-flex',
|
|
4087
|
+
justifyContent: 'center',
|
|
4088
|
+
alignItems: 'center'
|
|
4085
4089
|
});
|
|
4086
4090
|
var ButtonPrimitive = styled('button', {
|
|
4087
4091
|
margin: 0,
|
|
4088
|
-
display: '
|
|
4089
|
-
|
|
4090
|
-
justifyContent: 'center',
|
|
4092
|
+
display: 'block',
|
|
4093
|
+
verticalAlign: 'middle',
|
|
4091
4094
|
fontWeight: 600,
|
|
4092
4095
|
width: 'auto',
|
|
4093
4096
|
height: '40px',
|
|
@@ -4098,7 +4101,6 @@
|
|
|
4098
4101
|
textAlign: 'center',
|
|
4099
4102
|
lineHeight: '20px',
|
|
4100
4103
|
position: 'relative',
|
|
4101
|
-
verticalAlign: 'middle',
|
|
4102
4104
|
whiteSpace: 'nowrap',
|
|
4103
4105
|
'&:focus': {
|
|
4104
4106
|
outline: '2px solid #82C4E0'
|
|
@@ -4195,9 +4197,20 @@
|
|
|
4195
4197
|
borderRadius: '$md'
|
|
4196
4198
|
}
|
|
4197
4199
|
},
|
|
4198
|
-
|
|
4200
|
+
/**
|
|
4201
|
+
* Hidden the button
|
|
4202
|
+
*/
|
|
4203
|
+
hidden: {
|
|
4204
|
+
true: {
|
|
4205
|
+
display: 'none'
|
|
4206
|
+
}
|
|
4207
|
+
},
|
|
4208
|
+
withIcon: {
|
|
4199
4209
|
true: {
|
|
4200
|
-
display: '
|
|
4210
|
+
display: 'inline-flex',
|
|
4211
|
+
flexDirection: 'row',
|
|
4212
|
+
alignItems: 'center',
|
|
4213
|
+
justifyContent: 'center'
|
|
4201
4214
|
}
|
|
4202
4215
|
}
|
|
4203
4216
|
}
|
|
@@ -4224,11 +4237,10 @@
|
|
|
4224
4237
|
type: type,
|
|
4225
4238
|
buttonType: buttonType,
|
|
4226
4239
|
size: size,
|
|
4240
|
+
withIcon: Boolean(icon || leftIcon || rightIcon),
|
|
4227
4241
|
iconSize: icon ? size : undefined,
|
|
4228
4242
|
disabled: disabled,
|
|
4229
|
-
displayBlock: Boolean(block || leftIcon || rightIcon),
|
|
4230
4243
|
css: __assign(__assign({}, props.css), {
|
|
4231
|
-
display: block ? 'block' : 'inline-block',
|
|
4232
4244
|
width: block ? '100%' : width
|
|
4233
4245
|
}),
|
|
4234
4246
|
ref: forwardedRef
|
|
@@ -12317,7 +12329,7 @@
|
|
|
12317
12329
|
justifyContent: 'center'
|
|
12318
12330
|
});
|
|
12319
12331
|
function InputResourceList(_a) {
|
|
12320
|
-
var
|
|
12332
|
+
var dataProp = _a.data,
|
|
12321
12333
|
_b = _a.disabled,
|
|
12322
12334
|
disabled = _b === void 0 ? false : _b,
|
|
12323
12335
|
onItemCheck = _a.onItemCheck,
|
|
@@ -12345,7 +12357,21 @@
|
|
|
12345
12357
|
var _f = React.useState('asc'),
|
|
12346
12358
|
sortType = _f[0],
|
|
12347
12359
|
setSortType = _f[1];
|
|
12360
|
+
var _g = React.useState([]),
|
|
12361
|
+
data = _g[0],
|
|
12362
|
+
setData = _g[1];
|
|
12348
12363
|
var scrollerRef = React.useRef(null);
|
|
12364
|
+
React.useEffect(function () {
|
|
12365
|
+
function filterUnique(params) {
|
|
12366
|
+
var unique = params === null || params === void 0 ? void 0 : params.filter(function (obj, index) {
|
|
12367
|
+
return (params === null || params === void 0 ? void 0 : params.findIndex(function (item) {
|
|
12368
|
+
return (item === null || item === void 0 ? void 0 : item.value) === (obj === null || obj === void 0 ? void 0 : obj.value);
|
|
12369
|
+
})) === index;
|
|
12370
|
+
});
|
|
12371
|
+
setData(unique);
|
|
12372
|
+
}
|
|
12373
|
+
filterUnique(dataProp);
|
|
12374
|
+
}, [dataProp]);
|
|
12349
12375
|
React.useEffect(function () {
|
|
12350
12376
|
var _a;
|
|
12351
12377
|
(_a = scrollerRef.current) === null || _a === void 0 ? void 0 : _a.scrollTo({
|
|
@@ -13604,7 +13630,7 @@
|
|
|
13604
13630
|
const _excluded$9 = ["children"],
|
|
13605
13631
|
_excluded2$3 = ["children", "activeTabs"],
|
|
13606
13632
|
_excluded3$1 = ["children", "icon", "activeTabs", "value"],
|
|
13607
|
-
_excluded4
|
|
13633
|
+
_excluded4 = ["activeTabs"];
|
|
13608
13634
|
var _jsxFileName$r = "/Users/ryanakbar20/Documents/project/majoo/majoo-ui/packages/react/src/components/tabs/Tabs.js";
|
|
13609
13635
|
const StyledTabs = styled(TabsPrimitive__namespace.Root, {
|
|
13610
13636
|
display: 'flex',
|
|
@@ -13916,7 +13942,7 @@
|
|
|
13916
13942
|
}), (!icon || activeTabs === value) && children)));
|
|
13917
13943
|
};
|
|
13918
13944
|
const TabsContent$1 = _ref4 => {
|
|
13919
|
-
let props = _objectWithoutPropertiesLoose(_ref4, _excluded4
|
|
13945
|
+
let props = _objectWithoutPropertiesLoose(_ref4, _excluded4);
|
|
13920
13946
|
return /*#__PURE__*/React__default["default"].createElement(StyledContent$4, _extends({}, props, {
|
|
13921
13947
|
__self: undefined,
|
|
13922
13948
|
__source: {
|
|
@@ -18817,7 +18843,14 @@
|
|
|
18817
18843
|
height: '100%',
|
|
18818
18844
|
overflowY: 'auto',
|
|
18819
18845
|
overflowX: 'hidden',
|
|
18820
|
-
padding: '0 $spacing-05'
|
|
18846
|
+
padding: '0 $spacing-05',
|
|
18847
|
+
variants: {
|
|
18848
|
+
decoration: {
|
|
18849
|
+
true: {
|
|
18850
|
+
overflow: 'unset'
|
|
18851
|
+
}
|
|
18852
|
+
}
|
|
18853
|
+
}
|
|
18821
18854
|
});
|
|
18822
18855
|
var TableHeadRow$4 = styled('tr', {
|
|
18823
18856
|
borderBottom: '1pt solid $bgBorder',
|
|
@@ -18912,208 +18945,249 @@
|
|
|
18912
18945
|
}
|
|
18913
18946
|
return (getIsMobileHeader() ? column.isMobileHeader : index === indexDefaultHeader) || column.id === 'selection';
|
|
18914
18947
|
};
|
|
18948
|
+
var renderTableDecorationChild = function renderTableDecorationChild(child) {
|
|
18949
|
+
return jsxRuntime.jsx(TableContent$3, {
|
|
18950
|
+
children: jsxRuntime.jsx(TableBody$3, __assign({}, getTableBodyProps(), {
|
|
18951
|
+
children: child
|
|
18952
|
+
}), void 0)
|
|
18953
|
+
}, void 0);
|
|
18954
|
+
};
|
|
18915
18955
|
return jsxRuntime.jsxs(TableContainer$4, __assign({
|
|
18916
18956
|
css: css,
|
|
18917
|
-
ref: ref
|
|
18957
|
+
ref: ref,
|
|
18958
|
+
decoration: Boolean(decoration)
|
|
18918
18959
|
}, {
|
|
18919
|
-
children: [
|
|
18920
|
-
|
|
18921
|
-
|
|
18922
|
-
|
|
18923
|
-
|
|
18924
|
-
|
|
18925
|
-
|
|
18926
|
-
|
|
18927
|
-
|
|
18928
|
-
|
|
18929
|
-
|
|
18930
|
-
|
|
18931
|
-
|
|
18932
|
-
|
|
18933
|
-
})
|
|
18934
|
-
|
|
18935
|
-
|
|
18936
|
-
|
|
18937
|
-
|
|
18938
|
-
|
|
18939
|
-
|
|
18940
|
-
|
|
18941
|
-
children: jsxRuntime.jsx(TableHeadCellContent, __assign({
|
|
18960
|
+
children: [jsxRuntime.jsx(ConditionalWrapper, __assign({
|
|
18961
|
+
condition: !decoration,
|
|
18962
|
+
wrapper: function (child) {
|
|
18963
|
+
return infiniteScrollWrapper(child);
|
|
18964
|
+
}
|
|
18965
|
+
}, {
|
|
18966
|
+
children: jsxRuntime.jsxs(TableContent$3, __assign({}, getTableProps(), {
|
|
18967
|
+
children: [jsxRuntime.jsx(TableHead$3, __assign({
|
|
18968
|
+
hiddenHeader: hideHeader
|
|
18969
|
+
}, {
|
|
18970
|
+
children: headerGroups.map(function (headerGroup) {
|
|
18971
|
+
return jsxRuntime.jsx(TableHeadRow$4, __assign({}, headerGroup.getHeaderGroupProps(), {
|
|
18972
|
+
children: headerGroup.headers.filter(function (column, index) {
|
|
18973
|
+
return filterMobileHeader(column, index);
|
|
18974
|
+
}).map(function (column) {
|
|
18975
|
+
var headerRender = column.render('Header');
|
|
18976
|
+
return jsxRuntime.jsx(TableHeadCell$4, __assign({}, column.getHeaderProps(!column.unsortable ? column.getSortByToggleProps({
|
|
18977
|
+
title: t('sortColumnTitle', 'Urutkan') || 'Urutkan'
|
|
18978
|
+
}) : {
|
|
18979
|
+
onClick: column.onToggle
|
|
18980
|
+
}), {
|
|
18981
|
+
children: typeof headerRender === 'string' ? jsxRuntime.jsx(TableHeaderCellContainer, __assign({
|
|
18942
18982
|
isMobile: true,
|
|
18943
|
-
|
|
18944
|
-
|
|
18983
|
+
isSortedDesc: column.isSortedDesc,
|
|
18984
|
+
unsortable: column.unsortable,
|
|
18985
|
+
isToggleable: !!column.onToggle,
|
|
18986
|
+
isToggled: column.isToggled
|
|
18945
18987
|
}, {
|
|
18946
|
-
children:
|
|
18988
|
+
children: jsxRuntime.jsx(TableHeadCellContent, __assign({
|
|
18989
|
+
isMobile: true,
|
|
18990
|
+
heading: "headerTable",
|
|
18991
|
+
color: "secondary"
|
|
18992
|
+
}, {
|
|
18993
|
+
children: headerRender.toUpperCase()
|
|
18994
|
+
}), void 0)
|
|
18995
|
+
}), void 0) : headerRender
|
|
18996
|
+
}), void 0);
|
|
18997
|
+
})
|
|
18998
|
+
}), void 0);
|
|
18999
|
+
})
|
|
19000
|
+
}), void 0), jsxRuntime.jsxs(TableBody$3, __assign({}, getTableBodyProps(), {
|
|
19001
|
+
children: [(_b = decoration === null || decoration === void 0 ? void 0 : decoration.headerRender) === null || _b === void 0 ? void 0 : _b.call(decoration), jsxRuntime.jsx(ConditionalWrapper, __assign({
|
|
19002
|
+
condition: Boolean(decoration),
|
|
19003
|
+
wrapper: function (child) {
|
|
19004
|
+
return jsxRuntime.jsx(TableRow$4, __assign({
|
|
19005
|
+
css: {
|
|
19006
|
+
'&:hover': {
|
|
19007
|
+
backgroundColor: 'unset'
|
|
19008
|
+
}
|
|
19009
|
+
}
|
|
19010
|
+
}, {
|
|
19011
|
+
children: jsxRuntime.jsx(TableCell$4, __assign({
|
|
19012
|
+
colSpan: (decoration === null || decoration === void 0 ? void 0 : decoration.colSpan) || 12
|
|
19013
|
+
}, {
|
|
19014
|
+
children: jsxRuntime.jsx(Box, __assign({
|
|
19015
|
+
css: __assign({
|
|
19016
|
+
height: 300,
|
|
19017
|
+
overflowY: 'auto'
|
|
19018
|
+
}, decoration === null || decoration === void 0 ? void 0 : decoration.css)
|
|
19019
|
+
}, {
|
|
19020
|
+
children: infiniteScrollWrapper(renderTableDecorationChild(child))
|
|
18947
19021
|
}), void 0)
|
|
18948
|
-
}), void 0)
|
|
19022
|
+
}), void 0)
|
|
18949
19023
|
}), void 0);
|
|
18950
|
-
})
|
|
18951
|
-
}), void 0);
|
|
18952
|
-
})
|
|
18953
|
-
}), void 0), jsxRuntime.jsxs(TableBody$3, __assign({}, getTableBodyProps(), {
|
|
18954
|
-
children: [(_b = decoration === null || decoration === void 0 ? void 0 : decoration.headerRender) === null || _b === void 0 ? void 0 : _b.call(decoration), page.map(function (row, i) {
|
|
18955
|
-
var _a;
|
|
18956
|
-
prepareRow(row);
|
|
18957
|
-
var isContextMenu = (_a = row.cells.filter(function (cell) {
|
|
18958
|
-
var _a, _b;
|
|
18959
|
-
return (_b = (_a = cell.column) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.length;
|
|
18960
|
-
})) === null || _a === void 0 ? void 0 : _a.length;
|
|
18961
|
-
var actionCells = row.allCells.filter(function (cell) {
|
|
18962
|
-
return cell.column.id === 'menu' || cell.column.isAction;
|
|
18963
|
-
});
|
|
18964
|
-
var customStyle = {};
|
|
18965
|
-
if (customRowsStyle && customRowsStyle(row.values).length) {
|
|
18966
|
-
for (var i_1 = 0; i_1 < customRowsStyle(row.values).length; i_1++) {
|
|
18967
|
-
if (customRowsStyle(row.values)[i_1].predicate) {
|
|
18968
|
-
customStyle = customRowsStyle(row.values)[i_1].css;
|
|
18969
|
-
}
|
|
18970
19024
|
}
|
|
18971
|
-
}
|
|
18972
|
-
|
|
18973
|
-
|
|
18974
|
-
|
|
18975
|
-
|
|
18976
|
-
children: row.cells[0].render('Cell')
|
|
18977
|
-
}), void 0)), jsxRuntime.jsx(TableRow$4, __assign({
|
|
18978
|
-
css: customStyle
|
|
18979
|
-
}, row.getRowProps(), {
|
|
18980
|
-
children: row.cells.filter(function (cell, indexCell) {
|
|
18981
|
-
return (getIsMobileHeader() ? cell.column.isMobileHeader : indexCell === indexDefaultHeader) || cell.column.id === 'selection';
|
|
18982
|
-
}).map(function (cell) {
|
|
19025
|
+
}, {
|
|
19026
|
+
children: page.map(function (row, i) {
|
|
19027
|
+
var _a;
|
|
19028
|
+
prepareRow(row);
|
|
19029
|
+
var isContextMenu = (_a = row.cells.filter(function (cell) {
|
|
18983
19030
|
var _a, _b;
|
|
18984
|
-
|
|
18985
|
-
|
|
18986
|
-
|
|
18987
|
-
|
|
18988
|
-
|
|
18989
|
-
|
|
18990
|
-
|
|
18991
|
-
|
|
18992
|
-
|
|
19031
|
+
return (_b = (_a = cell.column) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.length;
|
|
19032
|
+
})) === null || _a === void 0 ? void 0 : _a.length;
|
|
19033
|
+
var actionCells = row.allCells.filter(function (cell) {
|
|
19034
|
+
return cell.column.id === 'menu' || cell.column.isAction;
|
|
19035
|
+
});
|
|
19036
|
+
var customStyle = {};
|
|
19037
|
+
if (customRowsStyle && customRowsStyle(row.values).length) {
|
|
19038
|
+
for (var i_1 = 0; i_1 < customRowsStyle(row.values).length; i_1++) {
|
|
19039
|
+
if (customRowsStyle(row.values)[i_1].predicate) {
|
|
19040
|
+
customStyle = customRowsStyle(row.values)[i_1].css;
|
|
19041
|
+
}
|
|
19042
|
+
}
|
|
19043
|
+
}
|
|
19044
|
+
return jsxRuntime.jsxs(React__default["default"].Fragment, {
|
|
19045
|
+
children: [((rowGroup === null || rowGroup === void 0 ? void 0 : rowGroup.showGroupingWhenSorted) || sortBy.length <= 0) && row.original['isTopChild'] && ((rowGroup === null || rowGroup === void 0 ? void 0 : rowGroup.headerRender) ? rowGroup === null || rowGroup === void 0 ? void 0 : rowGroup.headerRender(row) : jsxRuntime.jsx(Text$1, __assign({
|
|
19046
|
+
variant: "contentButton"
|
|
19047
|
+
}, {
|
|
19048
|
+
children: row.cells[0].render('Cell')
|
|
19049
|
+
}), void 0)), jsxRuntime.jsx(TableRow$4, __assign({
|
|
19050
|
+
css: customStyle
|
|
19051
|
+
}, row.getRowProps(), {
|
|
19052
|
+
children: row.cells.filter(function (cell, indexCell) {
|
|
19053
|
+
return (getIsMobileHeader() ? cell.column.isMobileHeader : indexCell === indexDefaultHeader) || cell.column.id === 'selection';
|
|
19054
|
+
}).map(function (cell) {
|
|
19055
|
+
var _a, _b;
|
|
19056
|
+
var collId = (_a = cell === null || cell === void 0 ? void 0 : cell.column) === null || _a === void 0 ? void 0 : _a.id;
|
|
19057
|
+
var exceptionId = (_b = ['expander', 'selection', 'menu', 'eye'].concat(additionalExceptionIds)) === null || _b === void 0 ? void 0 : _b.includes(collId);
|
|
19058
|
+
var renderCell = function renderCell() {
|
|
19059
|
+
return jsxRuntime.jsx(ConditionalWrapper, __assign({
|
|
19060
|
+
condition: isContextMenu && !exceptionId,
|
|
19061
|
+
wrapper: function (children) {
|
|
19062
|
+
return jsxRuntime.jsx(ContextMenuTrigger, __assign({
|
|
19063
|
+
id: "context-menu-table",
|
|
19064
|
+
triggerSide: "left"
|
|
19065
|
+
}, {
|
|
19066
|
+
children: jsxRuntime.jsx(Box, __assign({
|
|
19067
|
+
onClick: function () {
|
|
19068
|
+
return handleRowClick(row, i);
|
|
19069
|
+
},
|
|
19070
|
+
css: {
|
|
19071
|
+
cursor: 'pointer',
|
|
19072
|
+
width: 'calc(100vw - 120px)'
|
|
19073
|
+
}
|
|
19074
|
+
}, {
|
|
19075
|
+
children: children
|
|
19076
|
+
}), void 0)
|
|
19077
|
+
}), void 0);
|
|
19078
|
+
}
|
|
18993
19079
|
}, {
|
|
18994
|
-
children:
|
|
18995
|
-
|
|
18996
|
-
|
|
18997
|
-
|
|
19080
|
+
children: cell.render('Cell')
|
|
19081
|
+
}), void 0);
|
|
19082
|
+
};
|
|
19083
|
+
return jsxRuntime.jsx(TableCell$4, __assign({}, cell.getCellProps(addOnCellStyle(cell.column.id)), {
|
|
19084
|
+
children: cell.column.accessor ? jsxRuntime.jsxs(Flex$1, __assign({
|
|
19085
|
+
justify: "between",
|
|
19086
|
+
align: "center",
|
|
19087
|
+
css: {
|
|
19088
|
+
cursor: 'pointer',
|
|
19089
|
+
height: '100%'
|
|
19090
|
+
}
|
|
19091
|
+
}, {
|
|
19092
|
+
children: [jsxRuntime.jsx(Flex$1, __assign({
|
|
19093
|
+
align: "center",
|
|
18998
19094
|
css: {
|
|
18999
|
-
|
|
19000
|
-
|
|
19095
|
+
flex: 1,
|
|
19096
|
+
height: '100%'
|
|
19097
|
+
},
|
|
19098
|
+
onClick: function () {
|
|
19099
|
+
if (!exceptionId) {
|
|
19100
|
+
handleRowClick(row, i);
|
|
19101
|
+
}
|
|
19001
19102
|
}
|
|
19002
19103
|
}, {
|
|
19003
|
-
children:
|
|
19004
|
-
}), void 0)
|
|
19005
|
-
|
|
19006
|
-
|
|
19007
|
-
|
|
19008
|
-
|
|
19009
|
-
|
|
19010
|
-
|
|
19011
|
-
|
|
19012
|
-
|
|
19013
|
-
|
|
19014
|
-
|
|
19015
|
-
|
|
19016
|
-
|
|
19017
|
-
|
|
19018
|
-
|
|
19104
|
+
children: renderCell()
|
|
19105
|
+
}), void 0), jsxRuntime.jsx(Box, __assign({
|
|
19106
|
+
onClick: function () {
|
|
19107
|
+
if (!Object.keys(state.expanded).includes(row.id)) {
|
|
19108
|
+
toggleAllRowsExpanded(false);
|
|
19109
|
+
}
|
|
19110
|
+
row.toggleRowExpanded(!row.isExpanded);
|
|
19111
|
+
}
|
|
19112
|
+
}, {
|
|
19113
|
+
children: row.isExpanded ? jsxRuntime.jsx(icons.ChevronUpOutline, {}, void 0) : jsxRuntime.jsx(icons.ChevronDownOutline, {}, void 0)
|
|
19114
|
+
}), void 0)]
|
|
19115
|
+
}), void 0) : renderCell()
|
|
19116
|
+
}), void 0);
|
|
19117
|
+
})
|
|
19118
|
+
}), void 0), ((rowGroup === null || rowGroup === void 0 ? void 0 : rowGroup.showGroupingWhenSorted) || sortBy.length <= 0) && row.original['isBottomChild'] && !!(rowGroup === null || rowGroup === void 0 ? void 0 : rowGroup.footerRender) && (rowGroup === null || rowGroup === void 0 ? void 0 : rowGroup.footerRender(row)), row.isExpanded ? jsxRuntime.jsx(TableRow$4, {
|
|
19119
|
+
children: jsxRuntime.jsxs(TableCell$4, __assign({
|
|
19120
|
+
colSpan: visibleColumns.length
|
|
19019
19121
|
}, {
|
|
19020
19122
|
children: [jsxRuntime.jsx(Flex$1, __assign({
|
|
19021
|
-
|
|
19022
|
-
css: {
|
|
19023
|
-
flex: 1,
|
|
19024
|
-
height: '100%'
|
|
19025
|
-
},
|
|
19026
|
-
onClick: function () {
|
|
19027
|
-
if (!exceptionId) {
|
|
19028
|
-
handleRowClick(row, i);
|
|
19029
|
-
}
|
|
19030
|
-
}
|
|
19031
|
-
}, {
|
|
19032
|
-
children: renderCell()
|
|
19033
|
-
}), void 0), jsxRuntime.jsx(Box, __assign({
|
|
19034
|
-
onClick: function () {
|
|
19035
|
-
if (!Object.keys(state.expanded).includes(row.id)) {
|
|
19036
|
-
toggleAllRowsExpanded(false);
|
|
19037
|
-
}
|
|
19038
|
-
row.toggleRowExpanded(!row.isExpanded);
|
|
19039
|
-
}
|
|
19123
|
+
direction: "column"
|
|
19040
19124
|
}, {
|
|
19041
|
-
children: row.
|
|
19042
|
-
|
|
19043
|
-
|
|
19044
|
-
|
|
19045
|
-
|
|
19046
|
-
|
|
19047
|
-
|
|
19048
|
-
|
|
19049
|
-
|
|
19050
|
-
|
|
19051
|
-
|
|
19052
|
-
|
|
19053
|
-
|
|
19054
|
-
|
|
19055
|
-
|
|
19056
|
-
|
|
19057
|
-
|
|
19125
|
+
children: row.cells.filter(function (cell, indexCell) {
|
|
19126
|
+
return (getIsMobileHeader() ? !cell.column.isMobileHeader : indexCell !== indexDefaultHeader) && cell.column.accessor;
|
|
19127
|
+
}).map(function (cell) {
|
|
19128
|
+
var _a;
|
|
19129
|
+
return jsxRuntime.jsxs(Flex$1, __assign({
|
|
19130
|
+
align: "center",
|
|
19131
|
+
justify: "between",
|
|
19132
|
+
gap: 5,
|
|
19133
|
+
css: {
|
|
19134
|
+
backgroundColor: colors$5.bgGray,
|
|
19135
|
+
padding: "$spacing-04 $spacing-05 ".concat('selection' in row.values ? '$spacing-04 $spacing-07' : ''),
|
|
19136
|
+
borderBottom: '1pt solid $bgBorder',
|
|
19137
|
+
alignItems: cell.column.accessor ? getAlign(cellAlign) : 'center'
|
|
19138
|
+
}
|
|
19139
|
+
}, {
|
|
19140
|
+
children: [jsxRuntime.jsx(Heading, __assign({
|
|
19141
|
+
css: {
|
|
19142
|
+
padding: '3px 0px'
|
|
19143
|
+
},
|
|
19144
|
+
heading: "headerTable",
|
|
19145
|
+
color: "secondary"
|
|
19146
|
+
}, {
|
|
19147
|
+
children: typeof cell.column.Header === 'string' ? (_a = cell.column.Header) === null || _a === void 0 ? void 0 : _a.toUpperCase() : cell.render('Header')
|
|
19148
|
+
}), void 0), cell.render('Cell')]
|
|
19149
|
+
}), "".concat(cell.column.id, "-").concat(row.id));
|
|
19150
|
+
})
|
|
19151
|
+
}), void 0), actionCells && actionCells.length > 0 && jsxRuntime.jsx(Flex$1, __assign({
|
|
19058
19152
|
align: "center",
|
|
19059
|
-
justify: "
|
|
19060
|
-
gap:
|
|
19153
|
+
justify: "end",
|
|
19154
|
+
gap: 3,
|
|
19061
19155
|
css: {
|
|
19156
|
+
height: '40px',
|
|
19062
19157
|
backgroundColor: colors$5.bgGray,
|
|
19063
|
-
|
|
19064
|
-
borderBottom: '1pt solid $bgBorder',
|
|
19065
|
-
alignItems: cell.column.accessor ? getAlign(cellAlign) : 'center'
|
|
19158
|
+
paddingRight: '$spacing-04'
|
|
19066
19159
|
}
|
|
19067
19160
|
}, {
|
|
19068
|
-
children:
|
|
19069
|
-
|
|
19070
|
-
|
|
19071
|
-
|
|
19072
|
-
|
|
19073
|
-
|
|
19074
|
-
|
|
19075
|
-
|
|
19076
|
-
|
|
19077
|
-
|
|
19078
|
-
|
|
19079
|
-
|
|
19080
|
-
|
|
19081
|
-
justify: "end",
|
|
19082
|
-
gap: 3,
|
|
19083
|
-
css: {
|
|
19084
|
-
height: '40px',
|
|
19085
|
-
backgroundColor: colors$5.bgGray,
|
|
19086
|
-
paddingRight: '$spacing-04'
|
|
19087
|
-
}
|
|
19088
|
-
}, {
|
|
19089
|
-
children: actionCells.map(function (cell) {
|
|
19090
|
-
return cell.render('Cell');
|
|
19091
|
-
})
|
|
19092
|
-
}), void 0)]
|
|
19093
|
-
}), void 0)
|
|
19094
|
-
}, void 0) : null]
|
|
19095
|
-
}, row.id);
|
|
19096
|
-
}), (_c = decoration === null || decoration === void 0 ? void 0 : decoration.footerRender) === null || _c === void 0 ? void 0 : _c.call(decoration)]
|
|
19097
|
-
}), void 0), !isInfiniteScroll && jsxRuntime.jsx(TableFoot$2, {
|
|
19098
|
-
children: jsxRuntime.jsx(TableFootRow$2, {
|
|
19099
|
-
children: jsxRuntime.jsx(TableFootCell$2, __assign({
|
|
19100
|
-
colSpan: 100
|
|
19101
|
-
}, {
|
|
19102
|
-
children: totalData > 0 || isLoading ? footer : jsxRuntime.jsxs(Flex$1, __assign({
|
|
19103
|
-
align: "center",
|
|
19104
|
-
justify: "center",
|
|
19105
|
-
direction: "column",
|
|
19106
|
-
gap: 3,
|
|
19107
|
-
css: {
|
|
19108
|
-
margin: '56px auto 100px'
|
|
19109
|
-
}
|
|
19161
|
+
children: actionCells.map(function (cell) {
|
|
19162
|
+
return cell.render('Cell');
|
|
19163
|
+
})
|
|
19164
|
+
}), void 0)]
|
|
19165
|
+
}), void 0)
|
|
19166
|
+
}, void 0) : null]
|
|
19167
|
+
}, row.id);
|
|
19168
|
+
})
|
|
19169
|
+
}), void 0), (_c = decoration === null || decoration === void 0 ? void 0 : decoration.footerRender) === null || _c === void 0 ? void 0 : _c.call(decoration)]
|
|
19170
|
+
}), void 0), !isInfiniteScroll && jsxRuntime.jsx(TableFoot$2, {
|
|
19171
|
+
children: jsxRuntime.jsx(TableFootRow$2, {
|
|
19172
|
+
children: jsxRuntime.jsx(TableFootCell$2, __assign({
|
|
19173
|
+
colSpan: 100
|
|
19110
19174
|
}, {
|
|
19111
|
-
children:
|
|
19175
|
+
children: totalData > 0 || isLoading ? footer : jsxRuntime.jsxs(Flex$1, __assign({
|
|
19176
|
+
align: "center",
|
|
19177
|
+
justify: "center",
|
|
19178
|
+
direction: "column",
|
|
19179
|
+
gap: 3,
|
|
19180
|
+
css: {
|
|
19181
|
+
margin: '56px auto 100px'
|
|
19182
|
+
}
|
|
19183
|
+
}, {
|
|
19184
|
+
children: [customEmptyDataProps.doodleImage, customEmptyDataProps.title, customEmptyDataProps.description]
|
|
19185
|
+
}), void 0)
|
|
19112
19186
|
}), void 0)
|
|
19113
|
-
}
|
|
19114
|
-
}, void 0)
|
|
19115
|
-
}, void 0)
|
|
19116
|
-
}), void 0)
|
|
19187
|
+
}, void 0)
|
|
19188
|
+
}, void 0)]
|
|
19189
|
+
}), void 0)
|
|
19190
|
+
}), void 0), renderContextMenu === null || renderContextMenu === void 0 ? void 0 : renderContextMenu()]
|
|
19117
19191
|
}), void 0);
|
|
19118
19192
|
});
|
|
19119
19193
|
|
|
@@ -19973,7 +20047,7 @@
|
|
|
19973
20047
|
}
|
|
19974
20048
|
}, {
|
|
19975
20049
|
children: jsxRuntime.jsx(TableCell$3, __assign({
|
|
19976
|
-
colSpan: 12
|
|
20050
|
+
colSpan: (decoration === null || decoration === void 0 ? void 0 : decoration.colSpan) || 12
|
|
19977
20051
|
}, {
|
|
19978
20052
|
children: jsxRuntime.jsx(Box, __assign({
|
|
19979
20053
|
css: __assign({
|
|
@@ -21819,8 +21893,7 @@
|
|
|
21819
21893
|
|
|
21820
21894
|
const _excluded = ["side", "align", "children"],
|
|
21821
21895
|
_excluded2 = ["children"],
|
|
21822
|
-
_excluded3 = ["asChild"]
|
|
21823
|
-
_excluded4 = ["rightIcon"];
|
|
21896
|
+
_excluded3 = ["asChild"];
|
|
21824
21897
|
var _jsxFileName$a = "/Users/ryanakbar20/Documents/project/majoo/majoo-ui/packages/react/src/components/dropdownMenu/DropdownMenu.js";
|
|
21825
21898
|
const Context = /*#__PURE__*/React__default["default"].createContext();
|
|
21826
21899
|
const slideUpAndFade = keyframes({
|
|
@@ -22036,9 +22109,7 @@
|
|
|
22036
22109
|
color: colors$5.gray400
|
|
22037
22110
|
}
|
|
22038
22111
|
});
|
|
22039
|
-
const StyledDropdown = styled(
|
|
22040
|
-
display: 'flex',
|
|
22041
|
-
gap: '8px',
|
|
22112
|
+
const StyledDropdown = styled(Button$4, {
|
|
22042
22113
|
padding: '6px 12px',
|
|
22043
22114
|
'&:disabled': {
|
|
22044
22115
|
'& + div': {
|
|
@@ -22047,10 +22118,7 @@
|
|
|
22047
22118
|
}
|
|
22048
22119
|
});
|
|
22049
22120
|
const ButtonDropdown = /*#__PURE__*/React__default["default"].forwardRef((props, ref) => {
|
|
22050
|
-
const {
|
|
22051
|
-
rightIcon
|
|
22052
|
-
} = props,
|
|
22053
|
-
rest = _objectWithoutPropertiesLoose(props, _excluded4);
|
|
22121
|
+
const rest = Object.assign({}, (_objectDestructuringEmpty(props), props));
|
|
22054
22122
|
return /*#__PURE__*/React__default["default"].createElement(StyledDropdown, _extends({
|
|
22055
22123
|
ref: ref,
|
|
22056
22124
|
css: rest.css
|
|
@@ -22058,10 +22126,10 @@
|
|
|
22058
22126
|
__self: undefined,
|
|
22059
22127
|
__source: {
|
|
22060
22128
|
fileName: _jsxFileName$a,
|
|
22061
|
-
lineNumber:
|
|
22129
|
+
lineNumber: 175,
|
|
22062
22130
|
columnNumber: 5
|
|
22063
22131
|
}
|
|
22064
|
-
}), rest.children
|
|
22132
|
+
}), rest.children);
|
|
22065
22133
|
});
|
|
22066
22134
|
ButtonDropdown.propTypes = {
|
|
22067
22135
|
children: PropTypes__default["default"].node.isRequired,
|