sag_components 2.0.0-beta288 → 2.0.0-beta289
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 +91 -132
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +91 -132
- package/dist/index.js.map +1 -1
- package/dist/types/components/OverlayDropdown/OverlayDropdown.stories.d.ts +100 -8
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -10600,24 +10600,23 @@ const QuarterPopupPicker = ({
|
|
|
10600
10600
|
};
|
|
10601
10601
|
|
|
10602
10602
|
/* eslint-disable import/no-extraneous-dependencies */
|
|
10603
|
-
const QuarterPicker =
|
|
10604
|
-
|
|
10605
|
-
|
|
10606
|
-
|
|
10607
|
-
|
|
10608
|
-
|
|
10609
|
-
|
|
10610
|
-
|
|
10611
|
-
|
|
10612
|
-
|
|
10613
|
-
|
|
10614
|
-
|
|
10615
|
-
|
|
10616
|
-
|
|
10617
|
-
|
|
10618
|
-
|
|
10619
|
-
|
|
10620
|
-
} = _ref;
|
|
10603
|
+
const QuarterPicker = ({
|
|
10604
|
+
availableQuarters,
|
|
10605
|
+
// ["Q1-2024"]
|
|
10606
|
+
label,
|
|
10607
|
+
onChange,
|
|
10608
|
+
borderRadius,
|
|
10609
|
+
required,
|
|
10610
|
+
width,
|
|
10611
|
+
height,
|
|
10612
|
+
placeholder,
|
|
10613
|
+
disabled,
|
|
10614
|
+
borderColor,
|
|
10615
|
+
borderColorFocus,
|
|
10616
|
+
textColor,
|
|
10617
|
+
selectedValue,
|
|
10618
|
+
startYear
|
|
10619
|
+
}) => {
|
|
10621
10620
|
const [isFocused, setIsFocused] = React$1.useState(false);
|
|
10622
10621
|
const [isOpen, setIsOpen] = React$1.useState(false);
|
|
10623
10622
|
const [value, setValue] = React$1.useState('');
|
|
@@ -11059,23 +11058,22 @@ const MonthPopupPicker = ({
|
|
|
11059
11058
|
};
|
|
11060
11059
|
|
|
11061
11060
|
/* eslint-disable import/no-extraneous-dependencies */
|
|
11062
|
-
const MonthPicker =
|
|
11063
|
-
|
|
11064
|
-
|
|
11065
|
-
|
|
11066
|
-
|
|
11067
|
-
|
|
11068
|
-
|
|
11069
|
-
|
|
11070
|
-
|
|
11071
|
-
|
|
11072
|
-
|
|
11073
|
-
|
|
11074
|
-
|
|
11075
|
-
|
|
11076
|
-
|
|
11077
|
-
|
|
11078
|
-
} = _ref;
|
|
11061
|
+
const MonthPicker = ({
|
|
11062
|
+
availableMonths,
|
|
11063
|
+
label,
|
|
11064
|
+
onChange,
|
|
11065
|
+
borderRadius,
|
|
11066
|
+
required,
|
|
11067
|
+
width,
|
|
11068
|
+
height,
|
|
11069
|
+
placeholder,
|
|
11070
|
+
disabled,
|
|
11071
|
+
borderColor,
|
|
11072
|
+
borderColorFocus,
|
|
11073
|
+
textColor,
|
|
11074
|
+
selectedValue,
|
|
11075
|
+
startYear
|
|
11076
|
+
}) => {
|
|
11079
11077
|
const [isFocused, setIsFocused] = React$1.useState(false);
|
|
11080
11078
|
const [isOpen, setIsOpen] = React$1.useState(false);
|
|
11081
11079
|
const [value, setValue] = React$1.useState('');
|
|
@@ -24186,22 +24184,21 @@ const DeleteIcon = styled__default["default"].div`
|
|
|
24186
24184
|
position: absolute;
|
|
24187
24185
|
`;
|
|
24188
24186
|
|
|
24189
|
-
const QuickFilterDropdownSingle =
|
|
24190
|
-
|
|
24191
|
-
|
|
24192
|
-
|
|
24193
|
-
|
|
24194
|
-
|
|
24195
|
-
|
|
24196
|
-
|
|
24197
|
-
|
|
24198
|
-
|
|
24199
|
-
|
|
24200
|
-
|
|
24201
|
-
|
|
24202
|
-
|
|
24203
|
-
|
|
24204
|
-
} = _ref;
|
|
24187
|
+
const QuickFilterDropdownSingle = ({
|
|
24188
|
+
label,
|
|
24189
|
+
hoverColor,
|
|
24190
|
+
options,
|
|
24191
|
+
selectedValue,
|
|
24192
|
+
placeHolder,
|
|
24193
|
+
onChange,
|
|
24194
|
+
disabled,
|
|
24195
|
+
width,
|
|
24196
|
+
error,
|
|
24197
|
+
errorMessage,
|
|
24198
|
+
xIconShow,
|
|
24199
|
+
labelColor,
|
|
24200
|
+
showLabelOnTop
|
|
24201
|
+
}) => {
|
|
24205
24202
|
const [isFocused, setIsFocused] = React$1.useState(false);
|
|
24206
24203
|
const [showOptions, setShowOptions] = React$1.useState(false);
|
|
24207
24204
|
const [inputValue, setInputValue] = React$1.useState("");
|
|
@@ -24653,26 +24650,25 @@ const IconContainer$2 = styled__default["default"].div`
|
|
|
24653
24650
|
cursor: pointer;
|
|
24654
24651
|
`;
|
|
24655
24652
|
|
|
24656
|
-
const QuickFilterDropdownMultiSelection =
|
|
24657
|
-
|
|
24658
|
-
|
|
24659
|
-
|
|
24660
|
-
|
|
24661
|
-
|
|
24662
|
-
|
|
24663
|
-
|
|
24664
|
-
|
|
24665
|
-
|
|
24666
|
-
|
|
24667
|
-
|
|
24668
|
-
|
|
24669
|
-
|
|
24670
|
-
|
|
24671
|
-
|
|
24672
|
-
|
|
24673
|
-
|
|
24674
|
-
|
|
24675
|
-
} = _ref;
|
|
24653
|
+
const QuickFilterDropdownMultiSelection = ({
|
|
24654
|
+
label,
|
|
24655
|
+
labelEmptyValue,
|
|
24656
|
+
options,
|
|
24657
|
+
selectedValue,
|
|
24658
|
+
placeHolder,
|
|
24659
|
+
onChange,
|
|
24660
|
+
required,
|
|
24661
|
+
disabled,
|
|
24662
|
+
width,
|
|
24663
|
+
height,
|
|
24664
|
+
error,
|
|
24665
|
+
errorMessage,
|
|
24666
|
+
labelColor,
|
|
24667
|
+
xIconShow,
|
|
24668
|
+
checkBoxColor,
|
|
24669
|
+
showLabelOnTop,
|
|
24670
|
+
dropdownHeight
|
|
24671
|
+
}) => {
|
|
24676
24672
|
const [isFocused, setIsFocused] = React$1.useState(false);
|
|
24677
24673
|
const [showOptions, setShowOptions] = React$1.useState(false);
|
|
24678
24674
|
const [inputValue, setInputValue] = React$1.useState('');
|
|
@@ -36212,9 +36208,9 @@ const ToggleSlider = styled__default["default"].span`
|
|
|
36212
36208
|
}
|
|
36213
36209
|
`;
|
|
36214
36210
|
|
|
36215
|
-
/**
|
|
36216
|
-
* ToggleSwitch component for on/off states.
|
|
36217
|
-
* Supports small/large sizes and disabled state.
|
|
36211
|
+
/**
|
|
36212
|
+
* ToggleSwitch component for on/off states.
|
|
36213
|
+
* Supports small/large sizes and disabled state.
|
|
36218
36214
|
*/
|
|
36219
36215
|
function ToggleSwitch(_ref) {
|
|
36220
36216
|
let {
|
|
@@ -57893,26 +57889,21 @@ OverlayTemplateDialog.propTypes = {
|
|
|
57893
57889
|
// OverlayDropdown.jsx
|
|
57894
57890
|
const OverlayDropdown = _ref => {
|
|
57895
57891
|
let {
|
|
57896
|
-
// Data / selection
|
|
57897
57892
|
data = [],
|
|
57898
57893
|
value,
|
|
57899
57894
|
onSelectClick,
|
|
57900
|
-
// Label / placeholder
|
|
57901
57895
|
label,
|
|
57902
57896
|
labelEmptyValue,
|
|
57903
57897
|
showLabelOnTop,
|
|
57904
57898
|
labelColor,
|
|
57905
57899
|
placeHolder,
|
|
57906
57900
|
placeHolderColor,
|
|
57907
|
-
// Behavior
|
|
57908
57901
|
required = false,
|
|
57909
57902
|
disabled = false,
|
|
57910
57903
|
isDarkerBackground = false,
|
|
57911
57904
|
editableDigitalCoupon = false,
|
|
57912
|
-
// Appearance
|
|
57913
57905
|
selectedColor = "#066768",
|
|
57914
57906
|
hoverColor = "#E6F0F0",
|
|
57915
|
-
// Sizing
|
|
57916
57907
|
width = "100%",
|
|
57917
57908
|
minWidth = "unset",
|
|
57918
57909
|
dropdownWidth = "100%",
|
|
@@ -57929,8 +57920,6 @@ const OverlayDropdown = _ref => {
|
|
|
57929
57920
|
const buttonRef = React$1.useRef(null);
|
|
57930
57921
|
const dropdownRef = React$1.useRef(null);
|
|
57931
57922
|
const containerRef = React$1.useRef(null);
|
|
57932
|
-
|
|
57933
|
-
// Click outside to close dropdown
|
|
57934
57923
|
React$1.useEffect(() => {
|
|
57935
57924
|
const handleClickOutside = event => {
|
|
57936
57925
|
if (containerRef.current && !containerRef.current.contains(event.target)) {
|
|
@@ -57946,20 +57935,13 @@ const OverlayDropdown = _ref => {
|
|
|
57946
57935
|
document.removeEventListener("touchstart", handleClickOutside);
|
|
57947
57936
|
};
|
|
57948
57937
|
}, [open]);
|
|
57949
|
-
|
|
57950
|
-
// Calculate dropdown position when opening
|
|
57951
57938
|
React$1.useEffect(() => {
|
|
57952
57939
|
if (open && buttonRef.current) {
|
|
57953
57940
|
const buttonRect = buttonRef.current.getBoundingClientRect();
|
|
57954
57941
|
const viewportHeight = window.innerHeight;
|
|
57955
57942
|
const dropdownHeight = parseInt(dropdownMaxHeight, 10);
|
|
57956
|
-
|
|
57957
|
-
// Space available below the button
|
|
57958
57943
|
const spaceBelow = viewportHeight - buttonRect.bottom;
|
|
57959
|
-
// Space available above the button
|
|
57960
57944
|
const spaceAbove = buttonRect.top;
|
|
57961
|
-
|
|
57962
|
-
// If there's not enough space below, but more space above, position above
|
|
57963
57945
|
if (spaceBelow < dropdownHeight && spaceAbove > spaceBelow) {
|
|
57964
57946
|
setDropdownPosition("above");
|
|
57965
57947
|
} else {
|
|
@@ -57967,8 +57949,6 @@ const OverlayDropdown = _ref => {
|
|
|
57967
57949
|
}
|
|
57968
57950
|
}
|
|
57969
57951
|
}, [open, dropdownMaxHeight, margin]);
|
|
57970
|
-
|
|
57971
|
-
// Combine original data with "Last defined by you" group
|
|
57972
57952
|
const getDataWithLastDefined = () => {
|
|
57973
57953
|
const combinedData = [...data];
|
|
57974
57954
|
if (lastDefinedGroup) {
|
|
@@ -57976,8 +57956,6 @@ const OverlayDropdown = _ref => {
|
|
|
57976
57956
|
}
|
|
57977
57957
|
return combinedData;
|
|
57978
57958
|
};
|
|
57979
|
-
|
|
57980
|
-
// Find selected item across all groups
|
|
57981
57959
|
const findSelectedItem = () => {
|
|
57982
57960
|
const allData = getDataWithLastDefined();
|
|
57983
57961
|
for (const group of allData) {
|
|
@@ -57992,40 +57970,30 @@ const OverlayDropdown = _ref => {
|
|
|
57992
57970
|
const hasValue = !!selected;
|
|
57993
57971
|
const getTemplateParams = label => {
|
|
57994
57972
|
if (!label) return [];
|
|
57995
|
-
|
|
57996
|
-
// Pattern 1: "Buy X & Get Y% Off" - X and Y must be standalone capital letters
|
|
57997
|
-
// Using word boundaries for better browser compatibility
|
|
57998
57973
|
const buyGetOffPattern = /^(.*?)\bX\b(.*?)\bY\b(.*)$/;
|
|
57999
57974
|
const buyGetOffMatch = label.match(buyGetOffPattern);
|
|
58000
57975
|
if (buyGetOffMatch) {
|
|
58001
57976
|
const [, beforeX, betweenXY, afterY] = buyGetOffMatch;
|
|
58002
57977
|
return [{
|
|
58003
57978
|
label: beforeX.trim(),
|
|
58004
|
-
// "Buy "
|
|
58005
57979
|
type: "number",
|
|
58006
57980
|
suffix: ""
|
|
58007
57981
|
}, {
|
|
58008
57982
|
label: betweenXY.trim(),
|
|
58009
|
-
// " & Get "
|
|
58010
57983
|
type: "number",
|
|
58011
|
-
suffix: afterY.trim()
|
|
57984
|
+
suffix: afterY.trim()
|
|
58012
57985
|
}];
|
|
58013
57986
|
}
|
|
58014
|
-
|
|
58015
|
-
// Pattern 2: Single variable patterns - X or Y must be standalone capital letters
|
|
58016
57987
|
const singleVariablePattern = /^(.*?)\b([XY])\b(.*)$/;
|
|
58017
57988
|
const singleVariableMatch = label.match(singleVariablePattern);
|
|
58018
57989
|
if (singleVariableMatch) {
|
|
58019
57990
|
const [, beforeVar, variable, afterVar] = singleVariableMatch;
|
|
58020
57991
|
return [{
|
|
58021
57992
|
label: beforeVar.trim(),
|
|
58022
|
-
// "Buy "
|
|
58023
57993
|
type: "number",
|
|
58024
|
-
suffix: afterVar.trim()
|
|
57994
|
+
suffix: afterVar.trim()
|
|
58025
57995
|
}];
|
|
58026
57996
|
}
|
|
58027
|
-
|
|
58028
|
-
// Fallback: if no pattern matches, treat as single input
|
|
58029
57997
|
return [{
|
|
58030
57998
|
label: "Value",
|
|
58031
57999
|
type: "number",
|
|
@@ -58034,51 +58002,38 @@ const OverlayDropdown = _ref => {
|
|
|
58034
58002
|
};
|
|
58035
58003
|
const generateFinalSentence = (template, values) => {
|
|
58036
58004
|
let sentence = template.label;
|
|
58037
|
-
|
|
58038
|
-
// Pattern 1: "Buy X & Get Y% Off" - X and Y must be standalone capital letters
|
|
58039
58005
|
const buyGetOffPattern = /^(.*?)\bX\b(.*?)\bY\b(.*)$/;
|
|
58040
58006
|
const buyGetOffMatch = sentence.match(buyGetOffPattern);
|
|
58041
58007
|
if (buyGetOffMatch && values.length >= 2) {
|
|
58042
58008
|
const [, beforeX, betweenXY, afterY] = buyGetOffMatch;
|
|
58043
58009
|
return beforeX + values[0] + betweenXY + values[1] + afterY;
|
|
58044
58010
|
}
|
|
58045
|
-
|
|
58046
|
-
// Pattern 2: Single variable patterns - X or Y must be standalone capital letters
|
|
58047
58011
|
const singleVariablePattern = /^(.*?)\b([XY])\b(.*)$/;
|
|
58048
58012
|
const singleVariableMatch = sentence.match(singleVariablePattern);
|
|
58049
58013
|
if (singleVariableMatch && values.length >= 1) {
|
|
58050
58014
|
const [, beforeVar, variable, afterVar] = singleVariableMatch;
|
|
58051
58015
|
return beforeVar + values[0] + afterVar;
|
|
58052
58016
|
}
|
|
58053
|
-
|
|
58054
|
-
// Fallback
|
|
58055
58017
|
return sentence;
|
|
58056
58018
|
};
|
|
58057
58019
|
const handleTemplateApply = fields => {
|
|
58058
58020
|
if (templateDialog && onSelectClick) {
|
|
58059
58021
|
const finalSentence = generateFinalSentence(templateDialog.item, fields);
|
|
58060
|
-
|
|
58061
|
-
// Create new item for "Last defined by you" group
|
|
58062
58022
|
const newItem = {
|
|
58063
58023
|
...templateDialog.item,
|
|
58064
58024
|
label: finalSentence,
|
|
58065
58025
|
value: templateDialog.item.value,
|
|
58066
|
-
// Unique value
|
|
58067
58026
|
overlayCode: templateDialog.group.overlayCode,
|
|
58068
58027
|
overlayName: templateDialog.group.overlayName,
|
|
58069
58028
|
templateType: templateDialog.group.templateType,
|
|
58070
58029
|
appliedValues: fields
|
|
58071
58030
|
};
|
|
58072
|
-
|
|
58073
|
-
// Update "Last defined by you" group - add to existing or create new
|
|
58074
58031
|
if (lastDefinedGroup) {
|
|
58075
|
-
// Add to existing group
|
|
58076
58032
|
setLastDefinedGroup({
|
|
58077
58033
|
...lastDefinedGroup,
|
|
58078
|
-
items: [newItem, ...lastDefinedGroup.items]
|
|
58034
|
+
items: [newItem, ...lastDefinedGroup.items]
|
|
58079
58035
|
});
|
|
58080
58036
|
} else {
|
|
58081
|
-
// Create new group
|
|
58082
58037
|
setLastDefinedGroup({
|
|
58083
58038
|
overlayCode: "last_defined",
|
|
58084
58039
|
overlayName: "Last defined by you",
|
|
@@ -58087,8 +58042,6 @@ const OverlayDropdown = _ref => {
|
|
|
58087
58042
|
});
|
|
58088
58043
|
}
|
|
58089
58044
|
setTemplateDialog(null);
|
|
58090
|
-
|
|
58091
|
-
// Select the new item
|
|
58092
58045
|
onSelectClick(newItem);
|
|
58093
58046
|
}
|
|
58094
58047
|
};
|
|
@@ -58145,6 +58098,7 @@ const OverlayDropdown = _ref => {
|
|
|
58145
58098
|
content: selected?.label,
|
|
58146
58099
|
showTooltip: !!selected
|
|
58147
58100
|
}, /*#__PURE__*/React__default["default"].createElement(Wrapper, null, /*#__PURE__*/React__default["default"].createElement(TruncatedText, {
|
|
58101
|
+
className: "selected",
|
|
58148
58102
|
onMouseEnter: () => setHoveredText(selected?.label),
|
|
58149
58103
|
onMouseLeave: () => setHoveredText(null),
|
|
58150
58104
|
color: !selected && open ? placeHolderColor : "inherit"
|
|
@@ -58174,24 +58128,29 @@ const OverlayDropdown = _ref => {
|
|
|
58174
58128
|
onClick: () => {
|
|
58175
58129
|
if (onSelectClick && !disabled) {
|
|
58176
58130
|
setOpen(false);
|
|
58177
|
-
if (group.templateType ===
|
|
58178
|
-
|
|
58131
|
+
if (group.templateType === 3 && editableDigitalCoupon) {
|
|
58132
|
+
const result = {
|
|
58133
|
+
...item,
|
|
58134
|
+
overlayCode: group.overlayCode,
|
|
58135
|
+
overlayName: group.overlayName,
|
|
58136
|
+
templateType: group.templateType,
|
|
58137
|
+
isEditableDigitalCoupon: true
|
|
58138
|
+
};
|
|
58139
|
+
onSelectClick(result);
|
|
58140
|
+
} else if (group.templateType === 2) {
|
|
58179
58141
|
setTemplateDialog({
|
|
58180
58142
|
item,
|
|
58181
58143
|
group,
|
|
58182
58144
|
params: getTemplateParams(item.label)
|
|
58183
58145
|
});
|
|
58184
58146
|
} else {
|
|
58185
|
-
|
|
58186
|
-
|
|
58187
|
-
|
|
58188
|
-
|
|
58189
|
-
|
|
58190
|
-
|
|
58191
|
-
|
|
58192
|
-
};
|
|
58193
|
-
onSelectClick(result);
|
|
58194
|
-
}
|
|
58147
|
+
const result = {
|
|
58148
|
+
...item,
|
|
58149
|
+
overlayCode: group.overlayCode,
|
|
58150
|
+
overlayName: group.overlayName,
|
|
58151
|
+
templateType: group.templateType
|
|
58152
|
+
};
|
|
58153
|
+
onSelectClick(result);
|
|
58195
58154
|
}
|
|
58196
58155
|
}
|
|
58197
58156
|
}
|