sag_components 2.0.0-beta162 → 2.0.0-beta163
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 +89 -98
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +89 -98
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/dist/types/components/Tag/Tag.d.ts +0 -1
- package/dist/types/components/Tag/Tag.stories.d.ts +0 -99
- package/dist/types/components/Tag/Tag.style.d.ts +0 -1
package/dist/index.js
CHANGED
|
@@ -8875,6 +8875,8 @@ const DropdownSingleNew = ({
|
|
|
8875
8875
|
React$1.useEffect(() => {
|
|
8876
8876
|
if (selectedValue) {
|
|
8877
8877
|
setSelectedOptions(selectedValue);
|
|
8878
|
+
} else {
|
|
8879
|
+
setSelectedOptions([]);
|
|
8878
8880
|
}
|
|
8879
8881
|
}, [selectedValue]);
|
|
8880
8882
|
React$1.useEffect(() => {
|
|
@@ -9371,6 +9373,8 @@ const DropdownMultiNew = ({
|
|
|
9371
9373
|
React$1.useEffect(() => {
|
|
9372
9374
|
if (selectedValue) {
|
|
9373
9375
|
setSelectedOptions(selectedValue);
|
|
9376
|
+
} else {
|
|
9377
|
+
setSelectedOptions([]);
|
|
9374
9378
|
}
|
|
9375
9379
|
}, [selectedValue]);
|
|
9376
9380
|
React$1.useEffect(() => {
|
|
@@ -10432,24 +10436,23 @@ const QuarterPopupPicker = ({
|
|
|
10432
10436
|
};
|
|
10433
10437
|
|
|
10434
10438
|
/* eslint-disable import/no-extraneous-dependencies */
|
|
10435
|
-
const QuarterPicker =
|
|
10436
|
-
|
|
10437
|
-
|
|
10438
|
-
|
|
10439
|
-
|
|
10440
|
-
|
|
10441
|
-
|
|
10442
|
-
|
|
10443
|
-
|
|
10444
|
-
|
|
10445
|
-
|
|
10446
|
-
|
|
10447
|
-
|
|
10448
|
-
|
|
10449
|
-
|
|
10450
|
-
|
|
10451
|
-
|
|
10452
|
-
} = _ref;
|
|
10439
|
+
const QuarterPicker = ({
|
|
10440
|
+
availableQuarters,
|
|
10441
|
+
// ["Q1-2024"]
|
|
10442
|
+
label,
|
|
10443
|
+
onChange,
|
|
10444
|
+
borderRadius,
|
|
10445
|
+
required,
|
|
10446
|
+
width,
|
|
10447
|
+
height,
|
|
10448
|
+
placeholder,
|
|
10449
|
+
disabled,
|
|
10450
|
+
borderColor,
|
|
10451
|
+
borderColorFocus,
|
|
10452
|
+
textColor,
|
|
10453
|
+
selectedValue,
|
|
10454
|
+
startYear
|
|
10455
|
+
}) => {
|
|
10453
10456
|
const [isFocused, setIsFocused] = React$1.useState(false);
|
|
10454
10457
|
const [isOpen, setIsOpen] = React$1.useState(false);
|
|
10455
10458
|
const [value, setValue] = React$1.useState('');
|
|
@@ -10891,23 +10894,22 @@ const MonthPopupPicker = ({
|
|
|
10891
10894
|
};
|
|
10892
10895
|
|
|
10893
10896
|
/* eslint-disable import/no-extraneous-dependencies */
|
|
10894
|
-
const MonthPicker =
|
|
10895
|
-
|
|
10896
|
-
|
|
10897
|
-
|
|
10898
|
-
|
|
10899
|
-
|
|
10900
|
-
|
|
10901
|
-
|
|
10902
|
-
|
|
10903
|
-
|
|
10904
|
-
|
|
10905
|
-
|
|
10906
|
-
|
|
10907
|
-
|
|
10908
|
-
|
|
10909
|
-
|
|
10910
|
-
} = _ref;
|
|
10897
|
+
const MonthPicker = ({
|
|
10898
|
+
availableMonths,
|
|
10899
|
+
label,
|
|
10900
|
+
onChange,
|
|
10901
|
+
borderRadius,
|
|
10902
|
+
required,
|
|
10903
|
+
width,
|
|
10904
|
+
height,
|
|
10905
|
+
placeholder,
|
|
10906
|
+
disabled,
|
|
10907
|
+
borderColor,
|
|
10908
|
+
borderColorFocus,
|
|
10909
|
+
textColor,
|
|
10910
|
+
selectedValue,
|
|
10911
|
+
startYear
|
|
10912
|
+
}) => {
|
|
10911
10913
|
const [isFocused, setIsFocused] = React$1.useState(false);
|
|
10912
10914
|
const [isOpen, setIsOpen] = React$1.useState(false);
|
|
10913
10915
|
const [value, setValue] = React$1.useState('');
|
|
@@ -24018,22 +24020,21 @@ const DeleteIcon = styled__default["default"].div`
|
|
|
24018
24020
|
position: absolute;
|
|
24019
24021
|
`;
|
|
24020
24022
|
|
|
24021
|
-
const QuickFilterDropdownSingle =
|
|
24022
|
-
|
|
24023
|
-
|
|
24024
|
-
|
|
24025
|
-
|
|
24026
|
-
|
|
24027
|
-
|
|
24028
|
-
|
|
24029
|
-
|
|
24030
|
-
|
|
24031
|
-
|
|
24032
|
-
|
|
24033
|
-
|
|
24034
|
-
|
|
24035
|
-
|
|
24036
|
-
} = _ref;
|
|
24023
|
+
const QuickFilterDropdownSingle = ({
|
|
24024
|
+
label,
|
|
24025
|
+
hoverColor,
|
|
24026
|
+
options,
|
|
24027
|
+
selectedValue,
|
|
24028
|
+
placeHolder,
|
|
24029
|
+
onChange,
|
|
24030
|
+
disabled,
|
|
24031
|
+
width,
|
|
24032
|
+
error,
|
|
24033
|
+
errorMessage,
|
|
24034
|
+
xIconShow,
|
|
24035
|
+
labelColor,
|
|
24036
|
+
showLabelOnTop
|
|
24037
|
+
}) => {
|
|
24037
24038
|
const [isFocused, setIsFocused] = React$1.useState(false);
|
|
24038
24039
|
const [showOptions, setShowOptions] = React$1.useState(false);
|
|
24039
24040
|
const [inputValue, setInputValue] = React$1.useState("");
|
|
@@ -24430,24 +24431,23 @@ const IconContainer$2 = styled__default["default"].div`
|
|
|
24430
24431
|
cursor: pointer;
|
|
24431
24432
|
`;
|
|
24432
24433
|
|
|
24433
|
-
const QuickFilterDropdownMultiSelection =
|
|
24434
|
-
|
|
24435
|
-
|
|
24436
|
-
|
|
24437
|
-
|
|
24438
|
-
|
|
24439
|
-
|
|
24440
|
-
|
|
24441
|
-
|
|
24442
|
-
|
|
24443
|
-
|
|
24444
|
-
|
|
24445
|
-
|
|
24446
|
-
|
|
24447
|
-
|
|
24448
|
-
|
|
24449
|
-
|
|
24450
|
-
} = _ref;
|
|
24434
|
+
const QuickFilterDropdownMultiSelection = ({
|
|
24435
|
+
label,
|
|
24436
|
+
labelEmptyValue,
|
|
24437
|
+
options,
|
|
24438
|
+
selectedValue,
|
|
24439
|
+
placeHolder,
|
|
24440
|
+
onChange,
|
|
24441
|
+
required,
|
|
24442
|
+
disabled,
|
|
24443
|
+
width,
|
|
24444
|
+
error,
|
|
24445
|
+
errorMessage,
|
|
24446
|
+
labelColor,
|
|
24447
|
+
xIconShow,
|
|
24448
|
+
checkBoxColor,
|
|
24449
|
+
showLabelOnTop
|
|
24450
|
+
}) => {
|
|
24451
24451
|
const [isFocused, setIsFocused] = React$1.useState(false);
|
|
24452
24452
|
const [showOptions, setShowOptions] = React$1.useState(false);
|
|
24453
24453
|
const [inputValue, setInputValue] = React$1.useState('');
|
|
@@ -35619,12 +35619,9 @@ const ToggleSwitchLabel = styled__default["default"].label`
|
|
|
35619
35619
|
position: relative;
|
|
35620
35620
|
cursor: pointer;
|
|
35621
35621
|
user-select: none;
|
|
35622
|
-
opacity: ${
|
|
35623
|
-
|
|
35624
|
-
|
|
35625
|
-
} = _ref;
|
|
35626
|
-
return disabled ? 0.5 : 1;
|
|
35627
|
-
}};
|
|
35622
|
+
opacity: ${({
|
|
35623
|
+
disabled
|
|
35624
|
+
}) => disabled ? 0.5 : 1};
|
|
35628
35625
|
`;
|
|
35629
35626
|
const ToggleInput = styled__default["default"].input`
|
|
35630
35627
|
display: none;
|
|
@@ -35632,19 +35629,15 @@ const ToggleInput = styled__default["default"].input`
|
|
|
35632
35629
|
const ToggleSlider = styled__default["default"].span`
|
|
35633
35630
|
display: block;
|
|
35634
35631
|
position: relative;
|
|
35635
|
-
background: ${
|
|
35636
|
-
|
|
35637
|
-
|
|
35638
|
-
|
|
35639
|
-
} = _ref2;
|
|
35640
|
-
return checked ? disabled ? "#7bb1b0" : "#006d6a" : "#cfd8dc";
|
|
35641
|
-
}};
|
|
35632
|
+
background: ${({
|
|
35633
|
+
checked,
|
|
35634
|
+
disabled
|
|
35635
|
+
}) => checked ? disabled ? "#7bb1b0" : "#006d6a" : "#cfd8dc"};
|
|
35642
35636
|
border-radius: 999px;
|
|
35643
35637
|
transition: background 0.2s;
|
|
35644
|
-
${
|
|
35645
|
-
|
|
35646
|
-
|
|
35647
|
-
} = _ref3;
|
|
35638
|
+
${({
|
|
35639
|
+
size
|
|
35640
|
+
}) => {
|
|
35648
35641
|
switch (size) {
|
|
35649
35642
|
case "s":
|
|
35650
35643
|
return styled.css`width: 40px; height: 20px;`;
|
|
@@ -35663,10 +35656,9 @@ const ToggleSlider = styled__default["default"].span`
|
|
|
35663
35656
|
background: #fff;
|
|
35664
35657
|
border-radius: 50%;
|
|
35665
35658
|
transition: left 0.2s, width 0.2s, height 0.2s;
|
|
35666
|
-
${
|
|
35667
|
-
|
|
35668
|
-
|
|
35669
|
-
} = _ref4;
|
|
35659
|
+
${({
|
|
35660
|
+
size
|
|
35661
|
+
}) => {
|
|
35670
35662
|
switch (size) {
|
|
35671
35663
|
case "s":
|
|
35672
35664
|
return styled.css`width: 14px; height: 14px;`;
|
|
@@ -35676,11 +35668,10 @@ const ToggleSlider = styled__default["default"].span`
|
|
|
35676
35668
|
return styled.css`width: 20px; height: 20px;`;
|
|
35677
35669
|
}
|
|
35678
35670
|
}}
|
|
35679
|
-
left: ${
|
|
35680
|
-
|
|
35681
|
-
|
|
35682
|
-
|
|
35683
|
-
} = _ref5;
|
|
35671
|
+
left: ${({
|
|
35672
|
+
checked,
|
|
35673
|
+
size
|
|
35674
|
+
}) => {
|
|
35684
35675
|
if (!checked) return "3px";
|
|
35685
35676
|
switch (size) {
|
|
35686
35677
|
case "s":
|
|
@@ -35694,9 +35685,9 @@ const ToggleSlider = styled__default["default"].span`
|
|
|
35694
35685
|
}
|
|
35695
35686
|
`;
|
|
35696
35687
|
|
|
35697
|
-
/**
|
|
35698
|
-
* ToggleSwitch component for on/off states.
|
|
35699
|
-
* Supports small/large sizes and disabled state.
|
|
35688
|
+
/**
|
|
35689
|
+
* ToggleSwitch component for on/off states.
|
|
35690
|
+
* Supports small/large sizes and disabled state.
|
|
35700
35691
|
*/
|
|
35701
35692
|
function ToggleSwitch(_ref) {
|
|
35702
35693
|
let {
|