sag_components 2.0.0-beta281 → 2.0.0-beta283
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.d.ts +5 -1
- package/dist/index.esm.js +78 -58
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +78 -58
- package/dist/index.js.map +1 -1
- package/dist/types/components/DropdownMultiNew/DropdownMultiNew.d.ts +2 -1
- package/dist/types/components/DropdownNew/DropdownNew.stories.d.ts +31 -10
- package/dist/types/components/DropdownSingleNew/DropdownSingleNew.d.ts +2 -1
- package/dist/types/components/Input/Input.d.ts +5 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -8778,6 +8778,7 @@ const DropdownWrapper$2 = styled__default["default"].div`
|
|
|
8778
8778
|
align-items: flex-start;
|
|
8779
8779
|
width: ${props => props.width || '300px'};
|
|
8780
8780
|
height: ${props => props.height || '40px'};
|
|
8781
|
+
min-height: ${props => props.minHeight || 'auto'};
|
|
8781
8782
|
font-family: "Poppins", sans-serif;
|
|
8782
8783
|
font-weight: 400;
|
|
8783
8784
|
font-size: 14px;
|
|
@@ -8788,7 +8789,7 @@ const DropdownWrapper$2 = styled__default["default"].div`
|
|
|
8788
8789
|
top: 100%;
|
|
8789
8790
|
left: 0;
|
|
8790
8791
|
right: 0;
|
|
8791
|
-
height: 2px;
|
|
8792
|
+
height: 2px;
|
|
8792
8793
|
z-index: 99;
|
|
8793
8794
|
pointer-events: none;
|
|
8794
8795
|
}
|
|
@@ -8949,6 +8950,7 @@ const DropdownSingleNew = ({
|
|
|
8949
8950
|
disabled,
|
|
8950
8951
|
width,
|
|
8951
8952
|
height,
|
|
8953
|
+
minHeight,
|
|
8952
8954
|
withMarginBottom = true,
|
|
8953
8955
|
error,
|
|
8954
8956
|
errorMessage,
|
|
@@ -9127,10 +9129,10 @@ const DropdownSingleNew = ({
|
|
|
9127
9129
|
};
|
|
9128
9130
|
return /*#__PURE__*/React__default["default"].createElement(DropdownWrapper$2, {
|
|
9129
9131
|
className: "DropdownWrapper",
|
|
9130
|
-
ref: dropdownRef
|
|
9131
|
-
,
|
|
9132
|
+
ref: dropdownRef,
|
|
9132
9133
|
width: width,
|
|
9133
9134
|
height: height,
|
|
9135
|
+
minHeight: minHeight,
|
|
9134
9136
|
onMouseEnter: () => setHoverInputContainer(true),
|
|
9135
9137
|
onMouseLeave: () => setHoverInputContainer(false)
|
|
9136
9138
|
}, /*#__PURE__*/React__default["default"].createElement(InputContainer$8, {
|
|
@@ -9272,6 +9274,7 @@ const DropdownWrapper$1 = styled__default["default"].div`
|
|
|
9272
9274
|
align-items: flex-start;
|
|
9273
9275
|
width: ${props => props.width || '300px'};
|
|
9274
9276
|
height: ${props => props.height || '50px'};
|
|
9277
|
+
min-height: ${props => props.minHeight || 'auto'};
|
|
9275
9278
|
font-family: "Poppins", sans-serif;
|
|
9276
9279
|
font-weight: 400;
|
|
9277
9280
|
font-size: 14px;
|
|
@@ -9282,7 +9285,7 @@ const DropdownWrapper$1 = styled__default["default"].div`
|
|
|
9282
9285
|
top: 100%;
|
|
9283
9286
|
left: 0;
|
|
9284
9287
|
right: 0;
|
|
9285
|
-
height: 2px;
|
|
9288
|
+
height: 2px;
|
|
9286
9289
|
z-index: 99;
|
|
9287
9290
|
pointer-events: none;
|
|
9288
9291
|
}
|
|
@@ -9472,6 +9475,7 @@ const DropdownMultiNew = ({
|
|
|
9472
9475
|
disabled,
|
|
9473
9476
|
width,
|
|
9474
9477
|
height,
|
|
9478
|
+
minHeight,
|
|
9475
9479
|
withMarginBottom = true,
|
|
9476
9480
|
error,
|
|
9477
9481
|
errorMessage,
|
|
@@ -9648,6 +9652,7 @@ const DropdownMultiNew = ({
|
|
|
9648
9652
|
className: "DropdownWrapper",
|
|
9649
9653
|
width: width,
|
|
9650
9654
|
height: height,
|
|
9655
|
+
minHeight: minHeight,
|
|
9651
9656
|
onMouseEnter: () => setHoverInputContainer(true),
|
|
9652
9657
|
onMouseLeave: () => setHoverInputContainer(false)
|
|
9653
9658
|
}, /*#__PURE__*/React__default["default"].createElement(InputContainer$7, {
|
|
@@ -9746,6 +9751,7 @@ const DropdownMain = styled__default["default"].div`
|
|
|
9746
9751
|
align-items: flex-start;
|
|
9747
9752
|
width: ${props => props.width || '300px'};
|
|
9748
9753
|
height: ${props => props.height || '50px'};
|
|
9754
|
+
min-height: ${props => props.minHeight || 'auto'};
|
|
9749
9755
|
font-family: "Poppins", sans-serif;
|
|
9750
9756
|
font-weight: 400;
|
|
9751
9757
|
font-size: 14px;
|
|
@@ -9767,6 +9773,7 @@ const DropdownNew = props => {
|
|
|
9767
9773
|
disabled = false,
|
|
9768
9774
|
width = "300px",
|
|
9769
9775
|
height = "52px",
|
|
9776
|
+
minHeight = "",
|
|
9770
9777
|
withMarginBottom = true,
|
|
9771
9778
|
error = false,
|
|
9772
9779
|
showLabelOnTop = true,
|
|
@@ -9786,7 +9793,8 @@ const DropdownNew = props => {
|
|
|
9786
9793
|
return /*#__PURE__*/React__default["default"].createElement(DropdownMain, {
|
|
9787
9794
|
className: "DropdownMain",
|
|
9788
9795
|
width: width,
|
|
9789
|
-
height: height
|
|
9796
|
+
height: height,
|
|
9797
|
+
minHeight: minHeight
|
|
9790
9798
|
}, isMulti ? /*#__PURE__*/React__default["default"].createElement(DropdownMultiNew, {
|
|
9791
9799
|
className: "DropdownMultiNew",
|
|
9792
9800
|
placeHolder: placeHolder,
|
|
@@ -9798,6 +9806,7 @@ const DropdownNew = props => {
|
|
|
9798
9806
|
options: options,
|
|
9799
9807
|
width: width,
|
|
9800
9808
|
height: height,
|
|
9809
|
+
minHeight: minHeight,
|
|
9801
9810
|
withMarginBottom: withMarginBottom,
|
|
9802
9811
|
disabled: disabled,
|
|
9803
9812
|
error: error,
|
|
@@ -9819,6 +9828,7 @@ const DropdownNew = props => {
|
|
|
9819
9828
|
options: options,
|
|
9820
9829
|
width: width,
|
|
9821
9830
|
height: height,
|
|
9831
|
+
minHeight: minHeight,
|
|
9822
9832
|
withMarginBottom: withMarginBottom,
|
|
9823
9833
|
disabled: disabled,
|
|
9824
9834
|
error: error,
|
|
@@ -10590,23 +10600,24 @@ const QuarterPopupPicker = ({
|
|
|
10590
10600
|
};
|
|
10591
10601
|
|
|
10592
10602
|
/* eslint-disable import/no-extraneous-dependencies */
|
|
10593
|
-
const QuarterPicker =
|
|
10594
|
-
|
|
10595
|
-
|
|
10596
|
-
|
|
10597
|
-
|
|
10598
|
-
|
|
10599
|
-
|
|
10600
|
-
|
|
10601
|
-
|
|
10602
|
-
|
|
10603
|
-
|
|
10604
|
-
|
|
10605
|
-
|
|
10606
|
-
|
|
10607
|
-
|
|
10608
|
-
|
|
10609
|
-
|
|
10603
|
+
const QuarterPicker = _ref => {
|
|
10604
|
+
let {
|
|
10605
|
+
availableQuarters,
|
|
10606
|
+
// ["Q1-2024"]
|
|
10607
|
+
label,
|
|
10608
|
+
onChange,
|
|
10609
|
+
borderRadius,
|
|
10610
|
+
required,
|
|
10611
|
+
width,
|
|
10612
|
+
height,
|
|
10613
|
+
placeholder,
|
|
10614
|
+
disabled,
|
|
10615
|
+
borderColor,
|
|
10616
|
+
borderColorFocus,
|
|
10617
|
+
textColor,
|
|
10618
|
+
selectedValue,
|
|
10619
|
+
startYear
|
|
10620
|
+
} = _ref;
|
|
10610
10621
|
const [isFocused, setIsFocused] = React$1.useState(false);
|
|
10611
10622
|
const [isOpen, setIsOpen] = React$1.useState(false);
|
|
10612
10623
|
const [value, setValue] = React$1.useState('');
|
|
@@ -11048,22 +11059,23 @@ const MonthPopupPicker = ({
|
|
|
11048
11059
|
};
|
|
11049
11060
|
|
|
11050
11061
|
/* eslint-disable import/no-extraneous-dependencies */
|
|
11051
|
-
const MonthPicker =
|
|
11052
|
-
|
|
11053
|
-
|
|
11054
|
-
|
|
11055
|
-
|
|
11056
|
-
|
|
11057
|
-
|
|
11058
|
-
|
|
11059
|
-
|
|
11060
|
-
|
|
11061
|
-
|
|
11062
|
-
|
|
11063
|
-
|
|
11064
|
-
|
|
11065
|
-
|
|
11066
|
-
|
|
11062
|
+
const MonthPicker = _ref => {
|
|
11063
|
+
let {
|
|
11064
|
+
availableMonths,
|
|
11065
|
+
label,
|
|
11066
|
+
onChange,
|
|
11067
|
+
borderRadius,
|
|
11068
|
+
required,
|
|
11069
|
+
width,
|
|
11070
|
+
height,
|
|
11071
|
+
placeholder,
|
|
11072
|
+
disabled,
|
|
11073
|
+
borderColor,
|
|
11074
|
+
borderColorFocus,
|
|
11075
|
+
textColor,
|
|
11076
|
+
selectedValue,
|
|
11077
|
+
startYear
|
|
11078
|
+
} = _ref;
|
|
11067
11079
|
const [isFocused, setIsFocused] = React$1.useState(false);
|
|
11068
11080
|
const [isOpen, setIsOpen] = React$1.useState(false);
|
|
11069
11081
|
const [value, setValue] = React$1.useState('');
|
|
@@ -24174,21 +24186,22 @@ const DeleteIcon = styled__default["default"].div`
|
|
|
24174
24186
|
position: absolute;
|
|
24175
24187
|
`;
|
|
24176
24188
|
|
|
24177
|
-
const QuickFilterDropdownSingle =
|
|
24178
|
-
|
|
24179
|
-
|
|
24180
|
-
|
|
24181
|
-
|
|
24182
|
-
|
|
24183
|
-
|
|
24184
|
-
|
|
24185
|
-
|
|
24186
|
-
|
|
24187
|
-
|
|
24188
|
-
|
|
24189
|
-
|
|
24190
|
-
|
|
24191
|
-
|
|
24189
|
+
const QuickFilterDropdownSingle = _ref => {
|
|
24190
|
+
let {
|
|
24191
|
+
label,
|
|
24192
|
+
hoverColor,
|
|
24193
|
+
options,
|
|
24194
|
+
selectedValue,
|
|
24195
|
+
placeHolder,
|
|
24196
|
+
onChange,
|
|
24197
|
+
disabled,
|
|
24198
|
+
width,
|
|
24199
|
+
error,
|
|
24200
|
+
errorMessage,
|
|
24201
|
+
xIconShow,
|
|
24202
|
+
labelColor,
|
|
24203
|
+
showLabelOnTop
|
|
24204
|
+
} = _ref;
|
|
24192
24205
|
const [isFocused, setIsFocused] = React$1.useState(false);
|
|
24193
24206
|
const [showOptions, setShowOptions] = React$1.useState(false);
|
|
24194
24207
|
const [inputValue, setInputValue] = React$1.useState("");
|
|
@@ -35665,7 +35678,7 @@ const MainContainer = styled__default["default"].div`
|
|
|
35665
35678
|
width: ${props => props.width || '300px'};
|
|
35666
35679
|
min-width: ${props => props.minWidth || 'unset'};
|
|
35667
35680
|
height: ${props => props.height || '45px'};
|
|
35668
|
-
min-height: ${props => props.multiline ? '80px' : 'auto'};
|
|
35681
|
+
min-height: ${props => props.minHeight || (props.multiline ? '80px' : 'auto')};
|
|
35669
35682
|
font-family: "Poppins", sans-serif;
|
|
35670
35683
|
font-weight: 400;
|
|
35671
35684
|
font-size: 14px;
|
|
@@ -35687,7 +35700,10 @@ const Label$3 = styled__default["default"].label`
|
|
|
35687
35700
|
if (props.multiline) {
|
|
35688
35701
|
return props.isFocused || props.hasValue ? '0px' : '20px';
|
|
35689
35702
|
}
|
|
35690
|
-
|
|
35703
|
+
if (props.isFocused || props.hasValue) {
|
|
35704
|
+
return '0px';
|
|
35705
|
+
}
|
|
35706
|
+
return props.size === 'medium' ? '26px' : '17px';
|
|
35691
35707
|
}};
|
|
35692
35708
|
left: ${props => {
|
|
35693
35709
|
if (props.multiline) {
|
|
@@ -35854,6 +35870,7 @@ const Input$2 = _ref => {
|
|
|
35854
35870
|
width,
|
|
35855
35871
|
minWidth,
|
|
35856
35872
|
height = "50px",
|
|
35873
|
+
minHeight,
|
|
35857
35874
|
error,
|
|
35858
35875
|
errorMessage,
|
|
35859
35876
|
labelColor,
|
|
@@ -35973,6 +35990,7 @@ const Input$2 = _ref => {
|
|
|
35973
35990
|
className: "MainContainer",
|
|
35974
35991
|
width: width,
|
|
35975
35992
|
height: calculateHeight(),
|
|
35993
|
+
minHeight: minHeight,
|
|
35976
35994
|
size: size,
|
|
35977
35995
|
disabled: disabled,
|
|
35978
35996
|
isDarkerBackground: isDarkerBackground,
|
|
@@ -36059,6 +36077,7 @@ Input$2.propTypes = {
|
|
|
36059
36077
|
required: PropTypes.bool,
|
|
36060
36078
|
width: PropTypes.string,
|
|
36061
36079
|
minWidth: PropTypes.string,
|
|
36080
|
+
minHeight: PropTypes.string,
|
|
36062
36081
|
disabled: PropTypes.bool,
|
|
36063
36082
|
error: PropTypes.bool,
|
|
36064
36083
|
errorMessage: PropTypes.string,
|
|
@@ -36086,6 +36105,7 @@ Input$2.defaultProps = {
|
|
|
36086
36105
|
required: true,
|
|
36087
36106
|
width: "300px",
|
|
36088
36107
|
minWidth: "unset",
|
|
36108
|
+
minHeight: undefined,
|
|
36089
36109
|
disabled: false,
|
|
36090
36110
|
error: false,
|
|
36091
36111
|
errorMessage: "",
|
|
@@ -36174,9 +36194,9 @@ const ToggleSlider = styled__default["default"].span`
|
|
|
36174
36194
|
}
|
|
36175
36195
|
`;
|
|
36176
36196
|
|
|
36177
|
-
/**
|
|
36178
|
-
* ToggleSwitch component for on/off states.
|
|
36179
|
-
* Supports small/large sizes and disabled state.
|
|
36197
|
+
/**
|
|
36198
|
+
* ToggleSwitch component for on/off states.
|
|
36199
|
+
* Supports small/large sizes and disabled state.
|
|
36180
36200
|
*/
|
|
36181
36201
|
function ToggleSwitch(_ref) {
|
|
36182
36202
|
let {
|