@speakapbv/dough-component-library 10.3.3 → 10.3.4
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.es.js +22 -8
- package/dist/index.js +22 -8
- package/package.json +1 -1
package/dist/index.es.js
CHANGED
|
@@ -3675,6 +3675,7 @@ var SelectBox = forwardRef(function (props, ref) {
|
|
|
3675
3675
|
var hiddenInputRef = useRef(null);
|
|
3676
3676
|
var wrapperRef = useRef(null);
|
|
3677
3677
|
var componentRef = useRef(null);
|
|
3678
|
+
var isOpen = useRef(false);
|
|
3678
3679
|
useImperativeHandle(ref, function () { return ({
|
|
3679
3680
|
getValue: function () {
|
|
3680
3681
|
return hiddenInputRef &&
|
|
@@ -3772,6 +3773,7 @@ var SelectBox = forwardRef(function (props, ref) {
|
|
|
3772
3773
|
setIsFilled(true);
|
|
3773
3774
|
if (!props.multiple) {
|
|
3774
3775
|
setShowDropArea(false);
|
|
3776
|
+
isOpen.current = false;
|
|
3775
3777
|
}
|
|
3776
3778
|
}
|
|
3777
3779
|
}
|
|
@@ -3780,12 +3782,14 @@ var SelectBox = forwardRef(function (props, ref) {
|
|
|
3780
3782
|
setIsFilled(false);
|
|
3781
3783
|
if (!props.multiple) {
|
|
3782
3784
|
setShowDropArea(false);
|
|
3785
|
+
isOpen.current = false;
|
|
3783
3786
|
}
|
|
3784
3787
|
}
|
|
3785
3788
|
};
|
|
3786
3789
|
var handleKeyDown = function (e) {
|
|
3787
3790
|
if (e.keyCode === 9) {
|
|
3788
3791
|
setShowDropArea(false);
|
|
3792
|
+
isOpen.current = false;
|
|
3789
3793
|
}
|
|
3790
3794
|
};
|
|
3791
3795
|
var handleBlur = function () {
|
|
@@ -3802,13 +3806,19 @@ var SelectBox = forwardRef(function (props, ref) {
|
|
|
3802
3806
|
setFilterText("");
|
|
3803
3807
|
};
|
|
3804
3808
|
var openDropArea = function () {
|
|
3809
|
+
var _a, _b;
|
|
3810
|
+
(_b = (_a = componentRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(".dough-drop-menu-button")) === null || _b === void 0 ? void 0 : _b.classList.add("dough-drop-menu-button-open");
|
|
3811
|
+
setShowDropArea(true);
|
|
3805
3812
|
if (props.onFocus) {
|
|
3806
3813
|
props.onFocus(props.value);
|
|
3807
3814
|
}
|
|
3808
|
-
|
|
3809
|
-
|
|
3810
|
-
|
|
3811
|
-
|
|
3815
|
+
isOpen.current = true;
|
|
3816
|
+
};
|
|
3817
|
+
var closeDropArea = function () {
|
|
3818
|
+
var _a, _b;
|
|
3819
|
+
(_b = (_a = componentRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(".dough-drop-menu-button")) === null || _b === void 0 ? void 0 : _b.classList.remove("dough-drop-menu-button-open");
|
|
3820
|
+
setShowDropArea(false);
|
|
3821
|
+
isOpen.current = false;
|
|
3812
3822
|
};
|
|
3813
3823
|
var selectFirstItem = function () {
|
|
3814
3824
|
var filterRes = props.data.filter(function (option) {
|
|
@@ -3914,7 +3924,6 @@ var SelectBox = forwardRef(function (props, ref) {
|
|
|
3914
3924
|
};
|
|
3915
3925
|
var checkAutoFocus = function () {
|
|
3916
3926
|
if (!initialFocusIsSet && props.autoFocus) {
|
|
3917
|
-
openDropArea();
|
|
3918
3927
|
setInitialFocusIsSet(true);
|
|
3919
3928
|
}
|
|
3920
3929
|
};
|
|
@@ -3943,9 +3952,14 @@ var SelectBox = forwardRef(function (props, ref) {
|
|
|
3943
3952
|
? !props.validationResult.valid
|
|
3944
3953
|
: !isValid.valid),
|
|
3945
3954
|
}), onClick: function (e) {
|
|
3946
|
-
|
|
3947
|
-
|
|
3948
|
-
|
|
3955
|
+
if (isOpen.current) {
|
|
3956
|
+
closeDropArea();
|
|
3957
|
+
}
|
|
3958
|
+
else {
|
|
3959
|
+
cancelEvent(e);
|
|
3960
|
+
openDropArea();
|
|
3961
|
+
}
|
|
3962
|
+
}, onKeyDown: handleKeyDown, ref: wrapperRef },
|
|
3949
3963
|
React.createElement("div", { className: "value-container" }, getSelectedValueElements(props.value)),
|
|
3950
3964
|
guidingIcon && (React.createElement("div", { className: "arrow-icon-container" },
|
|
3951
3965
|
isActive && React.createElement(UpIcon, null),
|
package/dist/index.js
CHANGED
|
@@ -3659,6 +3659,7 @@ var SelectBox = React.forwardRef(function (props, ref) {
|
|
|
3659
3659
|
var hiddenInputRef = React.useRef(null);
|
|
3660
3660
|
var wrapperRef = React.useRef(null);
|
|
3661
3661
|
var componentRef = React.useRef(null);
|
|
3662
|
+
var isOpen = React.useRef(false);
|
|
3662
3663
|
React.useImperativeHandle(ref, function () { return ({
|
|
3663
3664
|
getValue: function () {
|
|
3664
3665
|
return hiddenInputRef &&
|
|
@@ -3756,6 +3757,7 @@ var SelectBox = React.forwardRef(function (props, ref) {
|
|
|
3756
3757
|
setIsFilled(true);
|
|
3757
3758
|
if (!props.multiple) {
|
|
3758
3759
|
setShowDropArea(false);
|
|
3760
|
+
isOpen.current = false;
|
|
3759
3761
|
}
|
|
3760
3762
|
}
|
|
3761
3763
|
}
|
|
@@ -3764,12 +3766,14 @@ var SelectBox = React.forwardRef(function (props, ref) {
|
|
|
3764
3766
|
setIsFilled(false);
|
|
3765
3767
|
if (!props.multiple) {
|
|
3766
3768
|
setShowDropArea(false);
|
|
3769
|
+
isOpen.current = false;
|
|
3767
3770
|
}
|
|
3768
3771
|
}
|
|
3769
3772
|
};
|
|
3770
3773
|
var handleKeyDown = function (e) {
|
|
3771
3774
|
if (e.keyCode === 9) {
|
|
3772
3775
|
setShowDropArea(false);
|
|
3776
|
+
isOpen.current = false;
|
|
3773
3777
|
}
|
|
3774
3778
|
};
|
|
3775
3779
|
var handleBlur = function () {
|
|
@@ -3786,13 +3790,19 @@ var SelectBox = React.forwardRef(function (props, ref) {
|
|
|
3786
3790
|
setFilterText("");
|
|
3787
3791
|
};
|
|
3788
3792
|
var openDropArea = function () {
|
|
3793
|
+
var _a, _b;
|
|
3794
|
+
(_b = (_a = componentRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(".dough-drop-menu-button")) === null || _b === void 0 ? void 0 : _b.classList.add("dough-drop-menu-button-open");
|
|
3795
|
+
setShowDropArea(true);
|
|
3789
3796
|
if (props.onFocus) {
|
|
3790
3797
|
props.onFocus(props.value);
|
|
3791
3798
|
}
|
|
3792
|
-
|
|
3793
|
-
|
|
3794
|
-
|
|
3795
|
-
|
|
3799
|
+
isOpen.current = true;
|
|
3800
|
+
};
|
|
3801
|
+
var closeDropArea = function () {
|
|
3802
|
+
var _a, _b;
|
|
3803
|
+
(_b = (_a = componentRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(".dough-drop-menu-button")) === null || _b === void 0 ? void 0 : _b.classList.remove("dough-drop-menu-button-open");
|
|
3804
|
+
setShowDropArea(false);
|
|
3805
|
+
isOpen.current = false;
|
|
3796
3806
|
};
|
|
3797
3807
|
var selectFirstItem = function () {
|
|
3798
3808
|
var filterRes = props.data.filter(function (option) {
|
|
@@ -3898,7 +3908,6 @@ var SelectBox = React.forwardRef(function (props, ref) {
|
|
|
3898
3908
|
};
|
|
3899
3909
|
var checkAutoFocus = function () {
|
|
3900
3910
|
if (!initialFocusIsSet && props.autoFocus) {
|
|
3901
|
-
openDropArea();
|
|
3902
3911
|
setInitialFocusIsSet(true);
|
|
3903
3912
|
}
|
|
3904
3913
|
};
|
|
@@ -3927,9 +3936,14 @@ var SelectBox = React.forwardRef(function (props, ref) {
|
|
|
3927
3936
|
? !props.validationResult.valid
|
|
3928
3937
|
: !isValid.valid),
|
|
3929
3938
|
}), onClick: function (e) {
|
|
3930
|
-
|
|
3931
|
-
|
|
3932
|
-
|
|
3939
|
+
if (isOpen.current) {
|
|
3940
|
+
closeDropArea();
|
|
3941
|
+
}
|
|
3942
|
+
else {
|
|
3943
|
+
cancelEvent(e);
|
|
3944
|
+
openDropArea();
|
|
3945
|
+
}
|
|
3946
|
+
}, onKeyDown: handleKeyDown, ref: wrapperRef },
|
|
3933
3947
|
React__default.createElement("div", { className: "value-container" }, getSelectedValueElements(props.value)),
|
|
3934
3948
|
guidingIcon && (React__default.createElement("div", { className: "arrow-icon-container" },
|
|
3935
3949
|
isActive && React__default.createElement(UpIcon, null),
|