sag_components 2.0.0-beta215 → 2.0.0-beta216
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
CHANGED
|
@@ -24166,22 +24166,21 @@ const DeleteIcon = styled.div`
|
|
|
24166
24166
|
position: absolute;
|
|
24167
24167
|
`;
|
|
24168
24168
|
|
|
24169
|
-
const QuickFilterDropdownSingle =
|
|
24170
|
-
|
|
24171
|
-
|
|
24172
|
-
|
|
24173
|
-
|
|
24174
|
-
|
|
24175
|
-
|
|
24176
|
-
|
|
24177
|
-
|
|
24178
|
-
|
|
24179
|
-
|
|
24180
|
-
|
|
24181
|
-
|
|
24182
|
-
|
|
24183
|
-
|
|
24184
|
-
} = _ref;
|
|
24169
|
+
const QuickFilterDropdownSingle = ({
|
|
24170
|
+
label,
|
|
24171
|
+
hoverColor,
|
|
24172
|
+
options,
|
|
24173
|
+
selectedValue,
|
|
24174
|
+
placeHolder,
|
|
24175
|
+
onChange,
|
|
24176
|
+
disabled,
|
|
24177
|
+
width,
|
|
24178
|
+
error,
|
|
24179
|
+
errorMessage,
|
|
24180
|
+
xIconShow,
|
|
24181
|
+
labelColor,
|
|
24182
|
+
showLabelOnTop
|
|
24183
|
+
}) => {
|
|
24185
24184
|
const [isFocused, setIsFocused] = useState(false);
|
|
24186
24185
|
const [showOptions, setShowOptions] = useState(false);
|
|
24187
24186
|
const [inputValue, setInputValue] = useState("");
|
|
@@ -24638,26 +24637,25 @@ const IconContainer$2 = styled.div`
|
|
|
24638
24637
|
cursor: pointer;
|
|
24639
24638
|
`;
|
|
24640
24639
|
|
|
24641
|
-
const QuickFilterDropdownMultiSelection =
|
|
24642
|
-
|
|
24643
|
-
|
|
24644
|
-
|
|
24645
|
-
|
|
24646
|
-
|
|
24647
|
-
|
|
24648
|
-
|
|
24649
|
-
|
|
24650
|
-
|
|
24651
|
-
|
|
24652
|
-
|
|
24653
|
-
|
|
24654
|
-
|
|
24655
|
-
|
|
24656
|
-
|
|
24657
|
-
|
|
24658
|
-
|
|
24659
|
-
|
|
24660
|
-
} = _ref;
|
|
24640
|
+
const QuickFilterDropdownMultiSelection = ({
|
|
24641
|
+
label,
|
|
24642
|
+
labelEmptyValue,
|
|
24643
|
+
options,
|
|
24644
|
+
selectedValue,
|
|
24645
|
+
placeHolder,
|
|
24646
|
+
onChange,
|
|
24647
|
+
required,
|
|
24648
|
+
disabled,
|
|
24649
|
+
width,
|
|
24650
|
+
height,
|
|
24651
|
+
error,
|
|
24652
|
+
errorMessage,
|
|
24653
|
+
labelColor,
|
|
24654
|
+
xIconShow,
|
|
24655
|
+
checkBoxColor,
|
|
24656
|
+
showLabelOnTop,
|
|
24657
|
+
dropdownHeight
|
|
24658
|
+
}) => {
|
|
24661
24659
|
const [isFocused, setIsFocused] = useState(false);
|
|
24662
24660
|
const [showOptions, setShowOptions] = useState(false);
|
|
24663
24661
|
const [inputValue, setInputValue] = useState('');
|
|
@@ -34970,17 +34968,18 @@ css`
|
|
|
34970
34968
|
* • onApply(start,end) — callback, both numbers (inclusive)
|
|
34971
34969
|
* • onCancel() — callback
|
|
34972
34970
|
*/
|
|
34973
|
-
const WeeksCalendar =
|
|
34974
|
-
|
|
34975
|
-
|
|
34976
|
-
|
|
34977
|
-
|
|
34978
|
-
|
|
34979
|
-
|
|
34980
|
-
|
|
34981
|
-
|
|
34982
|
-
|
|
34983
|
-
|
|
34971
|
+
const WeeksCalendar = _ref => {
|
|
34972
|
+
let {
|
|
34973
|
+
year,
|
|
34974
|
+
defaultStartWeek = null,
|
|
34975
|
+
defaultEndWeek = null,
|
|
34976
|
+
backgroundColor = "#066768",
|
|
34977
|
+
hoverBackgroundColor = "#E6F0F0",
|
|
34978
|
+
allowedWeekRange = null,
|
|
34979
|
+
// New prop for range restriction
|
|
34980
|
+
onApply,
|
|
34981
|
+
onCancel
|
|
34982
|
+
} = _ref;
|
|
34984
34983
|
// state -------------------------------------------------
|
|
34985
34984
|
const [startWeek, setStartWeek] = useState(defaultStartWeek);
|
|
34986
34985
|
const [endWeek, setEndWeek] = useState(defaultEndWeek);
|
|
@@ -36075,9 +36074,12 @@ const ToggleSwitchLabel = styled.label`
|
|
|
36075
36074
|
position: relative;
|
|
36076
36075
|
cursor: pointer;
|
|
36077
36076
|
user-select: none;
|
|
36078
|
-
opacity: ${
|
|
36079
|
-
|
|
36080
|
-
|
|
36077
|
+
opacity: ${_ref => {
|
|
36078
|
+
let {
|
|
36079
|
+
disabled
|
|
36080
|
+
} = _ref;
|
|
36081
|
+
return disabled ? 0.5 : 1;
|
|
36082
|
+
}};
|
|
36081
36083
|
`;
|
|
36082
36084
|
const ToggleInput = styled.input`
|
|
36083
36085
|
display: none;
|
|
@@ -36085,15 +36087,19 @@ const ToggleInput = styled.input`
|
|
|
36085
36087
|
const ToggleSlider = styled.span`
|
|
36086
36088
|
display: block;
|
|
36087
36089
|
position: relative;
|
|
36088
|
-
background: ${
|
|
36089
|
-
|
|
36090
|
-
|
|
36091
|
-
|
|
36090
|
+
background: ${_ref2 => {
|
|
36091
|
+
let {
|
|
36092
|
+
checked,
|
|
36093
|
+
disabled
|
|
36094
|
+
} = _ref2;
|
|
36095
|
+
return checked ? disabled ? "#7bb1b0" : "#006d6a" : "#cfd8dc";
|
|
36096
|
+
}};
|
|
36092
36097
|
border-radius: 999px;
|
|
36093
36098
|
transition: background 0.2s;
|
|
36094
|
-
${
|
|
36095
|
-
|
|
36096
|
-
|
|
36099
|
+
${_ref3 => {
|
|
36100
|
+
let {
|
|
36101
|
+
size
|
|
36102
|
+
} = _ref3;
|
|
36097
36103
|
switch (size) {
|
|
36098
36104
|
case "s":
|
|
36099
36105
|
return css`width: 40px; height: 20px;`;
|
|
@@ -36112,9 +36118,10 @@ const ToggleSlider = styled.span`
|
|
|
36112
36118
|
background: #fff;
|
|
36113
36119
|
border-radius: 50%;
|
|
36114
36120
|
transition: left 0.2s, width 0.2s, height 0.2s;
|
|
36115
|
-
${
|
|
36116
|
-
|
|
36117
|
-
|
|
36121
|
+
${_ref4 => {
|
|
36122
|
+
let {
|
|
36123
|
+
size
|
|
36124
|
+
} = _ref4;
|
|
36118
36125
|
switch (size) {
|
|
36119
36126
|
case "s":
|
|
36120
36127
|
return css`width: 14px; height: 14px;`;
|
|
@@ -36124,10 +36131,11 @@ const ToggleSlider = styled.span`
|
|
|
36124
36131
|
return css`width: 20px; height: 20px;`;
|
|
36125
36132
|
}
|
|
36126
36133
|
}}
|
|
36127
|
-
left: ${
|
|
36128
|
-
|
|
36129
|
-
|
|
36130
|
-
|
|
36134
|
+
left: ${_ref5 => {
|
|
36135
|
+
let {
|
|
36136
|
+
checked,
|
|
36137
|
+
size
|
|
36138
|
+
} = _ref5;
|
|
36131
36139
|
if (!checked) return "3px";
|
|
36132
36140
|
switch (size) {
|
|
36133
36141
|
case "s":
|
|
@@ -36141,9 +36149,9 @@ const ToggleSlider = styled.span`
|
|
|
36141
36149
|
}
|
|
36142
36150
|
`;
|
|
36143
36151
|
|
|
36144
|
-
/**
|
|
36145
|
-
* ToggleSwitch component for on/off states.
|
|
36146
|
-
* Supports small/large sizes and disabled state.
|
|
36152
|
+
/**
|
|
36153
|
+
* ToggleSwitch component for on/off states.
|
|
36154
|
+
* Supports small/large sizes and disabled state.
|
|
36147
36155
|
*/
|
|
36148
36156
|
function ToggleSwitch(_ref) {
|
|
36149
36157
|
let {
|
|
@@ -38755,6 +38763,7 @@ const TableHeader = ({
|
|
|
38755
38763
|
const showColumnFilter = column => {
|
|
38756
38764
|
const {
|
|
38757
38765
|
key,
|
|
38766
|
+
doubleColumn,
|
|
38758
38767
|
title,
|
|
38759
38768
|
filterOptions,
|
|
38760
38769
|
freeTextFilter,
|
|
@@ -38814,6 +38823,7 @@ const TableHeader = ({
|
|
|
38814
38823
|
color: "#066768",
|
|
38815
38824
|
isAsc: true,
|
|
38816
38825
|
list: filterOptions,
|
|
38826
|
+
doubleColumn: doubleColumn,
|
|
38817
38827
|
menuName: title,
|
|
38818
38828
|
selectedAttributes: filterSelections[key] || {},
|
|
38819
38829
|
onCheck: event => handleFilterSelectionChange(key, event),
|
|
@@ -40197,7 +40207,7 @@ const TableBody = /*#__PURE__*/forwardRef(({
|
|
|
40197
40207
|
|
|
40198
40208
|
// Handle shimmer effect changes
|
|
40199
40209
|
useEffect(() => {
|
|
40200
|
-
if (indexToShimmer >= 0
|
|
40210
|
+
if (indexToShimmer >= 0) {
|
|
40201
40211
|
setShimmerRowIndex(indexToShimmer);
|
|
40202
40212
|
setShimmerStartTime(Date.now());
|
|
40203
40213
|
|
|
@@ -40207,8 +40217,11 @@ const TableBody = /*#__PURE__*/forwardRef(({
|
|
|
40207
40217
|
setShimmerStartTime(null);
|
|
40208
40218
|
}, 5000);
|
|
40209
40219
|
return () => clearTimeout(timeout);
|
|
40220
|
+
} else if (indexToShimmer === -1) {
|
|
40221
|
+
setShimmerRowIndex(-1);
|
|
40222
|
+
setShimmerStartTime(null);
|
|
40210
40223
|
}
|
|
40211
|
-
}, [indexToShimmer
|
|
40224
|
+
}, [indexToShimmer]);
|
|
40212
40225
|
|
|
40213
40226
|
// Expose methods to parent component via ref
|
|
40214
40227
|
useImperativeHandle(ref, () => ({
|
|
@@ -40802,7 +40815,7 @@ const TableBody = /*#__PURE__*/forwardRef(({
|
|
|
40802
40815
|
key: row.id || `row-${rowIndex}`
|
|
40803
40816
|
}, /*#__PURE__*/React$1.createElement(TableRow, {
|
|
40804
40817
|
"data-row-index": rowIndex,
|
|
40805
|
-
className:
|
|
40818
|
+
className: shimmerRowIndex === rowIndex ? "shimmer-row" : "",
|
|
40806
40819
|
isFocused: focusedRowIndex === rowIndex,
|
|
40807
40820
|
selectedColor: selectedColor,
|
|
40808
40821
|
onMouseEnter: () => setHoveredRowIndex(rowIndex),
|
|
@@ -45534,7 +45547,8 @@ const NewSubitem = ({
|
|
|
45534
45547
|
onBack,
|
|
45535
45548
|
addNewPackage,
|
|
45536
45549
|
updateExistingPackage,
|
|
45537
|
-
componentText = "Scale"
|
|
45550
|
+
componentText = "Scale",
|
|
45551
|
+
itemAndPackage
|
|
45538
45552
|
}) => {
|
|
45539
45553
|
const [negotiatedBrands, setNegotiatedBrands] = useState("");
|
|
45540
45554
|
const [negotiatedComponent, setNegotiatedComponent] = useState(componentText);
|
|
@@ -45549,7 +45563,9 @@ const NewSubitem = ({
|
|
|
45549
45563
|
}, [packageObject]);
|
|
45550
45564
|
useEffect(() => {
|
|
45551
45565
|
if (packageObject && packageObject.brands === negotiatedBrands) return;
|
|
45552
|
-
setIsPackageDuplicated(
|
|
45566
|
+
setIsPackageDuplicated(itemAndPackage.some(obj => {
|
|
45567
|
+
obj.name === vendor && obj.packages.some(pkg => pkg.brands === negotiatedBrands);
|
|
45568
|
+
}));
|
|
45553
45569
|
setIsApplyEnabled(negotiatedBrands.trim().length > 2 && vendor.packages.some(pkg => pkg.brands === negotiatedBrands) === false);
|
|
45554
45570
|
}, [negotiatedBrands]);
|
|
45555
45571
|
return /*#__PURE__*/React$1.createElement(NewSubitemContainer, null, /*#__PURE__*/React$1.createElement(Header, null, /*#__PURE__*/React$1.createElement(BackButton, {
|