sag_components 2.0.0-beta143 → 2.0.0-beta144
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.esm.js +81 -127
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +81 -127
- package/dist/index.js.map +1 -1
- package/dist/types/components/Table/TableBody.d.ts +3 -6
- package/dist/types/components/Table/TableBody.styles.d.ts +0 -2
- package/dist/types/components/Table/data.d.ts +16 -3
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -10327,24 +10327,23 @@ const QuarterPopupPicker = ({
|
|
|
10327
10327
|
};
|
|
10328
10328
|
|
|
10329
10329
|
/* eslint-disable import/no-extraneous-dependencies */
|
|
10330
|
-
const QuarterPicker =
|
|
10331
|
-
|
|
10332
|
-
|
|
10333
|
-
|
|
10334
|
-
|
|
10335
|
-
|
|
10336
|
-
|
|
10337
|
-
|
|
10338
|
-
|
|
10339
|
-
|
|
10340
|
-
|
|
10341
|
-
|
|
10342
|
-
|
|
10343
|
-
|
|
10344
|
-
|
|
10345
|
-
|
|
10346
|
-
|
|
10347
|
-
} = _ref;
|
|
10330
|
+
const QuarterPicker = ({
|
|
10331
|
+
availableQuarters,
|
|
10332
|
+
// ["Q1-2024"]
|
|
10333
|
+
label,
|
|
10334
|
+
onChange,
|
|
10335
|
+
borderRadius,
|
|
10336
|
+
required,
|
|
10337
|
+
width,
|
|
10338
|
+
height,
|
|
10339
|
+
placeholder,
|
|
10340
|
+
disabled,
|
|
10341
|
+
borderColor,
|
|
10342
|
+
borderColorFocus,
|
|
10343
|
+
textColor,
|
|
10344
|
+
selectedValue,
|
|
10345
|
+
startYear
|
|
10346
|
+
}) => {
|
|
10348
10347
|
const [isFocused, setIsFocused] = React$1.useState(false);
|
|
10349
10348
|
const [isOpen, setIsOpen] = React$1.useState(false);
|
|
10350
10349
|
const [value, setValue] = React$1.useState('');
|
|
@@ -10786,23 +10785,22 @@ const MonthPopupPicker = ({
|
|
|
10786
10785
|
};
|
|
10787
10786
|
|
|
10788
10787
|
/* eslint-disable import/no-extraneous-dependencies */
|
|
10789
|
-
const MonthPicker =
|
|
10790
|
-
|
|
10791
|
-
|
|
10792
|
-
|
|
10793
|
-
|
|
10794
|
-
|
|
10795
|
-
|
|
10796
|
-
|
|
10797
|
-
|
|
10798
|
-
|
|
10799
|
-
|
|
10800
|
-
|
|
10801
|
-
|
|
10802
|
-
|
|
10803
|
-
|
|
10804
|
-
|
|
10805
|
-
} = _ref;
|
|
10788
|
+
const MonthPicker = ({
|
|
10789
|
+
availableMonths,
|
|
10790
|
+
label,
|
|
10791
|
+
onChange,
|
|
10792
|
+
borderRadius,
|
|
10793
|
+
required,
|
|
10794
|
+
width,
|
|
10795
|
+
height,
|
|
10796
|
+
placeholder,
|
|
10797
|
+
disabled,
|
|
10798
|
+
borderColor,
|
|
10799
|
+
borderColorFocus,
|
|
10800
|
+
textColor,
|
|
10801
|
+
selectedValue,
|
|
10802
|
+
startYear
|
|
10803
|
+
}) => {
|
|
10806
10804
|
const [isFocused, setIsFocused] = React$1.useState(false);
|
|
10807
10805
|
const [isOpen, setIsOpen] = React$1.useState(false);
|
|
10808
10806
|
const [value, setValue] = React$1.useState('');
|
|
@@ -23913,22 +23911,21 @@ const DeleteIcon = styled__default["default"].div`
|
|
|
23913
23911
|
position: absolute;
|
|
23914
23912
|
`;
|
|
23915
23913
|
|
|
23916
|
-
const QuickFilterDropdownSingle =
|
|
23917
|
-
|
|
23918
|
-
|
|
23919
|
-
|
|
23920
|
-
|
|
23921
|
-
|
|
23922
|
-
|
|
23923
|
-
|
|
23924
|
-
|
|
23925
|
-
|
|
23926
|
-
|
|
23927
|
-
|
|
23928
|
-
|
|
23929
|
-
|
|
23930
|
-
|
|
23931
|
-
} = _ref;
|
|
23914
|
+
const QuickFilterDropdownSingle = ({
|
|
23915
|
+
label,
|
|
23916
|
+
hoverColor,
|
|
23917
|
+
options,
|
|
23918
|
+
selectedValue,
|
|
23919
|
+
placeHolder,
|
|
23920
|
+
onChange,
|
|
23921
|
+
disabled,
|
|
23922
|
+
width,
|
|
23923
|
+
error,
|
|
23924
|
+
errorMessage,
|
|
23925
|
+
xIconShow,
|
|
23926
|
+
labelColor,
|
|
23927
|
+
showLabelOnTop
|
|
23928
|
+
}) => {
|
|
23932
23929
|
const [isFocused, setIsFocused] = React$1.useState(false);
|
|
23933
23930
|
const [showOptions, setShowOptions] = React$1.useState(false);
|
|
23934
23931
|
const [inputValue, setInputValue] = React$1.useState("");
|
|
@@ -24325,24 +24322,23 @@ const IconContainer$2 = styled__default["default"].div`
|
|
|
24325
24322
|
cursor: pointer;
|
|
24326
24323
|
`;
|
|
24327
24324
|
|
|
24328
|
-
const QuickFilterDropdownMultiSelection =
|
|
24329
|
-
|
|
24330
|
-
|
|
24331
|
-
|
|
24332
|
-
|
|
24333
|
-
|
|
24334
|
-
|
|
24335
|
-
|
|
24336
|
-
|
|
24337
|
-
|
|
24338
|
-
|
|
24339
|
-
|
|
24340
|
-
|
|
24341
|
-
|
|
24342
|
-
|
|
24343
|
-
|
|
24344
|
-
|
|
24345
|
-
} = _ref;
|
|
24325
|
+
const QuickFilterDropdownMultiSelection = ({
|
|
24326
|
+
label,
|
|
24327
|
+
labelEmptyValue,
|
|
24328
|
+
options,
|
|
24329
|
+
selectedValue,
|
|
24330
|
+
placeHolder,
|
|
24331
|
+
onChange,
|
|
24332
|
+
required,
|
|
24333
|
+
disabled,
|
|
24334
|
+
width,
|
|
24335
|
+
error,
|
|
24336
|
+
errorMessage,
|
|
24337
|
+
labelColor,
|
|
24338
|
+
xIconShow,
|
|
24339
|
+
checkBoxColor,
|
|
24340
|
+
showLabelOnTop
|
|
24341
|
+
}) => {
|
|
24346
24342
|
const [isFocused, setIsFocused] = React$1.useState(false);
|
|
24347
24343
|
const [showOptions, setShowOptions] = React$1.useState(false);
|
|
24348
24344
|
const [inputValue, setInputValue] = React$1.useState('');
|
|
@@ -35574,9 +35570,9 @@ const ToggleSlider = styled__default["default"].span`
|
|
|
35574
35570
|
}
|
|
35575
35571
|
`;
|
|
35576
35572
|
|
|
35577
|
-
/**
|
|
35578
|
-
* ToggleSwitch component for on/off states.
|
|
35579
|
-
* Supports small/large sizes and disabled state.
|
|
35573
|
+
/**
|
|
35574
|
+
* ToggleSwitch component for on/off states.
|
|
35575
|
+
* Supports small/large sizes and disabled state.
|
|
35580
35576
|
*/
|
|
35581
35577
|
function ToggleSwitch(_ref) {
|
|
35582
35578
|
let {
|
|
@@ -38317,21 +38313,6 @@ const DisabledTrashIconWrapper = styled__default["default"].div`
|
|
|
38317
38313
|
color: #d9d9d9;
|
|
38318
38314
|
}
|
|
38319
38315
|
`;
|
|
38320
|
-
const StatusCell = styled__default["default"].div`
|
|
38321
|
-
font-size: 12px;
|
|
38322
|
-
font-weight: 500;
|
|
38323
|
-
display: flex;
|
|
38324
|
-
align-items: center;
|
|
38325
|
-
gap: 6px;
|
|
38326
|
-
color: ${props => props.color || "#000"};
|
|
38327
|
-
`;
|
|
38328
|
-
const StatusCellCircle = styled__default["default"].div`
|
|
38329
|
-
width: 8px;
|
|
38330
|
-
height: 8px;
|
|
38331
|
-
border-radius: 50%;
|
|
38332
|
-
border: 1px solid white;
|
|
38333
|
-
background-color: ${props => props.backgroundColor};
|
|
38334
|
-
`;
|
|
38335
38316
|
|
|
38336
38317
|
// CommentModal.styles.js
|
|
38337
38318
|
const ModalOverlay$1 = styled__default["default"].div`
|
|
@@ -38702,22 +38683,10 @@ const TableBody = ({
|
|
|
38702
38683
|
buttonColor,
|
|
38703
38684
|
onDeleteClick,
|
|
38704
38685
|
selectedColor,
|
|
38705
|
-
|
|
38686
|
+
resetFocusIndex,
|
|
38687
|
+
changeFocusIndex,
|
|
38706
38688
|
onFocusChange,
|
|
38707
38689
|
indexToShimmer = 0,
|
|
38708
|
-
statuses = [{
|
|
38709
|
-
status: 'Pending',
|
|
38710
|
-
palette: ['#F5C9A7', '#8B4513']
|
|
38711
|
-
}, {
|
|
38712
|
-
status: 'Received',
|
|
38713
|
-
palette: ['#B9D5D5', '#2F4F4F']
|
|
38714
|
-
}, {
|
|
38715
|
-
status: 'Approved',
|
|
38716
|
-
palette: ['#BEDDC3', '#2D5016']
|
|
38717
|
-
}, {
|
|
38718
|
-
status: 'Cancelled',
|
|
38719
|
-
palette: ['#EBA6AF', '#8B1538']
|
|
38720
|
-
}],
|
|
38721
38690
|
onCommentSave = () => {},
|
|
38722
38691
|
ref = null
|
|
38723
38692
|
}) => {
|
|
@@ -38726,24 +38695,16 @@ const TableBody = ({
|
|
|
38726
38695
|
const [isCommentModalOpen, setIsCommentModalOpen] = React$1.useState(false);
|
|
38727
38696
|
const [currentCommentRow, setCurrentCommentRow] = React$1.useState(null); // Track which row is being edited
|
|
38728
38697
|
|
|
38729
|
-
// Expose methods to parent components via ref (if ref is provided)
|
|
38730
|
-
// useImperativeHandle(ref, () => ({
|
|
38731
|
-
// clearFocus: () => setFocusedRowIndex(null),
|
|
38732
|
-
// getFocusedRowIndex: () => focusedRowIndex
|
|
38733
|
-
// }), [focusedRowIndex]);
|
|
38734
|
-
|
|
38735
38698
|
React$1.useEffect(() => {
|
|
38736
|
-
if (
|
|
38699
|
+
if (resetFocusIndex) {
|
|
38737
38700
|
setFocusedRowIndex(null);
|
|
38738
38701
|
}
|
|
38739
|
-
}, [
|
|
38740
|
-
|
|
38741
|
-
|
|
38742
|
-
|
|
38743
|
-
|
|
38744
|
-
|
|
38745
|
-
// }
|
|
38746
|
-
// }, [focusedRowIndex, onFocusChange]);
|
|
38702
|
+
}, [resetFocusIndex]);
|
|
38703
|
+
React$1.useEffect(() => {
|
|
38704
|
+
if (changeFocusIndex) {
|
|
38705
|
+
setFocusedRowIndex(changeFocusIndex);
|
|
38706
|
+
}
|
|
38707
|
+
}, [changeFocusIndex]);
|
|
38747
38708
|
|
|
38748
38709
|
// Handle row click for focus state
|
|
38749
38710
|
const handleRowClick = (row, rowIndex) => {
|
|
@@ -38903,14 +38864,6 @@ const TableBody = ({
|
|
|
38903
38864
|
}), /*#__PURE__*/React__default["default"].createElement("span", null, "All Sent"));
|
|
38904
38865
|
}
|
|
38905
38866
|
return value;
|
|
38906
|
-
case 'status':
|
|
38907
|
-
const statusObj = statuses.find(status => status.status === value) || {};
|
|
38908
|
-
const [palette0, palette1] = statusObj.palette;
|
|
38909
|
-
return /*#__PURE__*/React__default["default"].createElement(StatusCell, {
|
|
38910
|
-
color: palette1
|
|
38911
|
-
}, /*#__PURE__*/React__default["default"].createElement(StatusCellCircle, {
|
|
38912
|
-
backgroundColor: palette0
|
|
38913
|
-
}), /*#__PURE__*/React__default["default"].createElement("span", null, value));
|
|
38914
38867
|
case 'comments':
|
|
38915
38868
|
const commentText = value || '';
|
|
38916
38869
|
const hasComments = commentText.trim().length > 0;
|
|
@@ -42274,8 +42227,8 @@ const Table = props => {
|
|
|
42274
42227
|
noDataInSearchTitle = "No Results Found",
|
|
42275
42228
|
noDataInSearchMessage = "Try to refine your query and search again",
|
|
42276
42229
|
indexToShimmer = -1,
|
|
42277
|
-
|
|
42278
|
-
|
|
42230
|
+
resetFocusIndex,
|
|
42231
|
+
changeFocusIndex,
|
|
42279
42232
|
onTableFocusChange = () => {},
|
|
42280
42233
|
clearFocusOnOutsideClick = true,
|
|
42281
42234
|
// NEW: Props for edit mode focus management
|
|
@@ -42395,7 +42348,8 @@ const Table = props => {
|
|
|
42395
42348
|
onDeleteClick: onDeleteClick,
|
|
42396
42349
|
onCommentSave: handleCommentSave,
|
|
42397
42350
|
buttonColor: buttonColor,
|
|
42398
|
-
|
|
42351
|
+
resetFocusIndex: resetFocusIndex,
|
|
42352
|
+
changeFocusIndex: changeFocusIndex,
|
|
42399
42353
|
onFocusChange: handleTableFocusChange
|
|
42400
42354
|
})), data.length === 0 && /*#__PURE__*/React__default["default"].createElement(NoEventsParent, null, /*#__PURE__*/React__default["default"].createElement(NoEventsWrapper, null, showNoDataInSearch ? /*#__PURE__*/React__default["default"].createElement(NoDataInSearchIcon, null) : /*#__PURE__*/React__default["default"].createElement(NoEvents, null)), /*#__PURE__*/React__default["default"].createElement(NoEventsMessage, null, showNoDataInSearch ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("strong", null, noDataInSearchTitle), /*#__PURE__*/React__default["default"].createElement("br", null), noDataInSearchMessage) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("strong", null, "You haven't created any events yet"), /*#__PURE__*/React__default["default"].createElement("br", null), "Let's get started and create your first one!")), !showNoDataInSearch && /*#__PURE__*/React__default["default"].createElement(Button$1, {
|
|
42401
42355
|
height: "45px",
|