@speakapbv/dough-component-library 10.3.2 → 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.
Files changed (4) hide show
  1. package/dist/components/form-elements/select-box/select-box.d.ts +3 -1
  2. package/dist/index.es.js +34 -13
  3. package/dist/index.js +34 -13
  4. package/package.json +1 -1
package/dist/components/form-elements/select-box/select-box.d.ts CHANGED
@@ -17,10 +17,12 @@ export declare type DoughSelectBoxInputRef = {
17
17
  interface SelectBoxCommonProps {
18
18
  ref?: Ref<DoughSelectBoxInputRef>;
19
19
  width?: string;
20
+ doNotHighlightSelectedItem?: boolean;
20
21
  dropAreaWidth?: string;
21
22
  busy?: boolean;
22
23
  borderless?: boolean;
23
24
  className?: string;
25
+ hideEmptyOption?: boolean;
24
26
  inputClassName?: string;
25
27
  dataAttributes?: DoughDataAttributes;
26
28
  tabIndex?: number;
@@ -64,5 +66,5 @@ export interface SelectBoxMultipleProps {
64
66
  value?: Array<DoughSelectBoxData>;
65
67
  }
66
68
  export declare type SelectBoxProps = SelectBoxCommonProps & (SelectBoxSingleProps | SelectBoxMultipleProps);
67
- export declare const SelectBox: React.ForwardRefExoticComponent<Pick<SelectBoxProps, "width" | "dropAreaWidth" | "busy" | "borderless" | "className" | "inputClassName" | "dataAttributes" | "tabIndex" | "name" | "data" | "autoFocus" | "disabled" | "readOnly" | "emptyOptionText" | "filterItems" | "filterInputAutoFocus" | "filterFunction" | "onFilterTextChanged" | "optionComponent" | "filterPlaceholder" | "label" | "mandatory" | "multiple" | "placeholder" | "guidingIcon" | "validationResult" | "onBlur" | "onChange" | "onFocus" | "validator" | "value"> & React.RefAttributes<DoughSelectBoxInputRef>>;
69
+ export declare const SelectBox: React.ForwardRefExoticComponent<Pick<SelectBoxProps, "width" | "doNotHighlightSelectedItem" | "dropAreaWidth" | "busy" | "borderless" | "className" | "hideEmptyOption" | "inputClassName" | "dataAttributes" | "tabIndex" | "name" | "data" | "autoFocus" | "disabled" | "readOnly" | "emptyOptionText" | "filterItems" | "filterInputAutoFocus" | "filterFunction" | "onFilterTextChanged" | "optionComponent" | "filterPlaceholder" | "label" | "mandatory" | "multiple" | "placeholder" | "guidingIcon" | "validationResult" | "onBlur" | "onChange" | "onFocus" | "validator" | "value"> & React.RefAttributes<DoughSelectBoxInputRef>>;
68
70
  export {};
package/dist/index.es.js CHANGED
@@ -3660,7 +3660,7 @@ var Spinner = function (props) {
3660
3660
  };
3661
3661
  Spinner.displayName = "Spinner";
3662
3662
 
3663
- var css_248z$m = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-selectbox {\n cursor: pointer;\n}\n.dough-selectbox .value-container {\n display: flex;\n flex-flow: row nowrap;\n justify-content: flex-start;\n align-items: center;\n overflow: hidden;\n z-index: 90;\n position: relative;\n}\n\n.dough-selectbox-option-wrapper {\n display: flex;\n flex-flow: column nowrap;\n width: 100%;\n box-sizing: border-box;\n overflow: hidden;\n}\n.dough-selectbox-option-wrapper > .dough-selectbox-option {\n display: flex;\n width: 100%;\n box-sizing: border-box;\n padding: 10px;\n font-size: 0.85rem;\n cursor: pointer;\n pointer-events: all;\n}\n.dough-selectbox-option-wrapper > .dough-selectbox-option.dough-selectbox-option-disabled {\n opacity: 0.5;\n}\n.dough-selectbox-option-wrapper > .dough-selectbox-option.dough-selectbox-option-disabled, .dough-selectbox-option-wrapper > .dough-selectbox-option.dough-selectbox-option-not-selectable {\n pointer-events: none;\n}\n.dough-selectbox-option-wrapper > .dough-selectbox-option.dough-selectbox-filtered {\n display: none !important;\n}\n.dough-selectbox-option-wrapper > .dough-selectbox-option.dough-selectbox-empty-option {\n opacity: 0.5;\n}\n.dough-selectbox-option-wrapper > .dough-selectbox-option:not(.dough-selectbox-selected-option):hover {\n background-color: rgb(245, 245, 245);\n background-color: var(--dough-color-gray-6);\n}\n.dough-selectbox-option-wrapper > .dough-selectbox-option:not(.dough-selectbox-selected-option) {\n background-color: rgba(255, 255, 255, 0);\n background-color: var(--dough-color-transparent);\n color: rgb(110, 111, 117);\n color: var(--dough-color-text-default);\n}\n.dough-selectbox-option-wrapper > .dough-selectbox-option-wrapper > .dough-selectbox-option {\n padding-left: 16px;\n padding-right: 0;\n}\n\n.dough-selectbox-filter-container {\n position: relative;\n z-index: 20;\n display: block;\n box-sizing: border-box;\n width: 100%;\n padding: 0 16px 0 16px !important;\n order: 1;\n border-bottom: 1px solid #ededed;\n height: 40px;\n overflow: hidden;\n background-color: rgb(255, 255, 255);\n background-color: var(--dough-color-white);\n}\n.dough-selectbox-filter-container > .dough-layout-flexbox-content {\n height: 100%;\n}\n.to-up .dough-selectbox-filter-container {\n order: 3;\n border-bottom: none;\n border-top: 1px solid #ededed;\n}\n\n.dough-selectbox-options-container {\n position: relative;\n z-index: 10;\n order: 2;\n max-height: 40vh;\n margin-top: -40px;\n padding-top: 40px !important;\n overflow: auto;\n}\n\nbody:not(.dough-no-viewport-control) .dough-max-viewport-size-medium .dough-selectbox-filter-container {\n order: 1 !important;\n border-top: none !important;\n border-bottom: 1px solid #ededed !important;\n}\n\n@media only screen and (max-width: 768px) {\n body:not(.dough-no-viewport-control) .dough-selectbox-filter-container {\n order: 1 !important;\n border-top: none !important;\n border-bottom: 1px solid #ededed !important;\n }\n}";
3663
+ var css_248z$m = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-selectbox {\n cursor: pointer;\n}\n.dough-selectbox .value-container {\n display: flex;\n flex-flow: row nowrap;\n justify-content: flex-start;\n align-items: center;\n overflow: hidden;\n z-index: 90;\n position: relative;\n}\n\n.dough-selectbox-option-wrapper {\n display: flex;\n flex-flow: column nowrap;\n width: 100%;\n box-sizing: border-box;\n overflow: hidden;\n}\n.dough-selectbox-option-wrapper > .dough-selectbox-option {\n display: flex;\n width: 100%;\n box-sizing: border-box;\n padding: 10px;\n font-size: 0.85rem;\n cursor: pointer;\n pointer-events: all;\n}\n.dough-selectbox-option-wrapper > .dough-selectbox-option.dough-selectbox-option-disabled {\n opacity: 0.5;\n}\n.dough-selectbox-option-wrapper > .dough-selectbox-option.dough-selectbox-option-disabled, .dough-selectbox-option-wrapper > .dough-selectbox-option.dough-selectbox-option-not-selectable {\n pointer-events: none;\n}\n.dough-selectbox-option-wrapper > .dough-selectbox-option.dough-selectbox-filtered {\n display: none !important;\n}\n.dough-selectbox-option-wrapper > .dough-selectbox-option.dough-selectbox-empty-option {\n opacity: 0.5;\n}\n.dough-selectbox-option-wrapper > .dough-selectbox-option:not(.dough-selectbox-selected-option):hover {\n background-color: rgb(245, 245, 245);\n background-color: var(--dough-color-gray-6);\n}\n.dough-selectbox-option-wrapper > .dough-selectbox-option.dough-selectbox-option-themed:hover {\n background-color: var(--dough-color-primary);\n color: rgb(255, 255, 255);\n color: var(--dough-color-text-white);\n}\n.dough-selectbox-option-wrapper > .dough-selectbox-option:not(.dough-selectbox-selected-option) {\n background-color: rgba(255, 255, 255, 0);\n background-color: var(--dough-color-transparent);\n color: rgb(110, 111, 117);\n color: var(--dough-color-text-default);\n}\n.dough-selectbox-option-wrapper > .dough-selectbox-option-wrapper > .dough-selectbox-option {\n padding-left: 16px;\n padding-right: 0;\n}\n\n.dough-selectbox-filter-container {\n position: relative;\n z-index: 20;\n display: block;\n box-sizing: border-box;\n width: 100%;\n padding: 0 16px 0 16px !important;\n order: 1;\n border-bottom: 1px solid #ededed;\n height: 40px;\n overflow: hidden;\n background-color: rgb(255, 255, 255);\n background-color: var(--dough-color-white);\n}\n.dough-selectbox-filter-container > .dough-layout-flexbox-content {\n height: 100%;\n}\n.to-up .dough-selectbox-filter-container {\n order: 3;\n border-bottom: none;\n border-top: 1px solid #ededed;\n}\n\n.dough-selectbox-options-container {\n position: relative;\n z-index: 10;\n order: 2;\n max-height: 40vh;\n margin-top: -40px;\n padding-top: 40px !important;\n overflow: auto;\n}\n\nbody:not(.dough-no-viewport-control) .dough-max-viewport-size-medium .dough-selectbox-filter-container {\n order: 1 !important;\n border-top: none !important;\n border-bottom: 1px solid #ededed !important;\n}\n\n@media only screen and (max-width: 768px) {\n body:not(.dough-no-viewport-control) .dough-selectbox-filter-container {\n order: 1 !important;\n border-top: none !important;\n border-bottom: 1px solid #ededed !important;\n }\n}";
3664
3664
  styleInject(css_248z$m);
3665
3665
 
3666
3666
  var InvalidChars = "[\\[\\]?*+|{}\\\\()@.\n\r]";
@@ -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
- if (!showDropArea) {
3809
- setIsActive(true);
3810
- setShowDropArea(true);
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) {
@@ -3841,12 +3851,19 @@ var SelectBox = forwardRef(function (props, ref) {
3841
3851
  return res;
3842
3852
  }, false);
3843
3853
  }
3844
- return alreadyInList ? "dough-selectbox-selected-option" : "";
3854
+ return alreadyInList
3855
+ ? "dough-selectbox-selected-option"
3856
+ : props.doNotHighlightSelectedItem
3857
+ ? "dough-selectbox-option-themed"
3858
+ : "";
3845
3859
  }
3846
3860
  return props.value &&
3847
- props.value.value === option.value
3861
+ props.value.value === option.value &&
3862
+ !props.doNotHighlightSelectedItem
3848
3863
  ? "dough-selectbox-selected-option"
3849
- : "";
3864
+ : props.doNotHighlightSelectedItem
3865
+ ? "dough-selectbox-option-themed"
3866
+ : "";
3850
3867
  };
3851
3868
  var getFilterStatusClassName = function (option) {
3852
3869
  if (props.filterFunction) {
@@ -3907,7 +3924,6 @@ var SelectBox = forwardRef(function (props, ref) {
3907
3924
  };
3908
3925
  var checkAutoFocus = function () {
3909
3926
  if (!initialFocusIsSet && props.autoFocus) {
3910
- openDropArea();
3911
3927
  setInitialFocusIsSet(true);
3912
3928
  }
3913
3929
  };
@@ -3936,9 +3952,14 @@ var SelectBox = forwardRef(function (props, ref) {
3936
3952
  ? !props.validationResult.valid
3937
3953
  : !isValid.valid),
3938
3954
  }), onClick: function (e) {
3939
- cancelEvent(e);
3940
- openDropArea();
3941
- }, onFocus: openDropArea, onKeyDown: handleKeyDown, ref: wrapperRef },
3955
+ if (isOpen.current) {
3956
+ closeDropArea();
3957
+ }
3958
+ else {
3959
+ cancelEvent(e);
3960
+ openDropArea();
3961
+ }
3962
+ }, onKeyDown: handleKeyDown, ref: wrapperRef },
3942
3963
  React.createElement("div", { className: "value-container" }, getSelectedValueElements(props.value)),
3943
3964
  guidingIcon && (React.createElement("div", { className: "arrow-icon-container" },
3944
3965
  isActive && React.createElement(UpIcon, null),
@@ -3964,7 +3985,7 @@ var SelectBox = forwardRef(function (props, ref) {
3964
3985
  }
3965
3986
  }, placeholder: filterPlaceholder, value: filterText }))),
3966
3987
  React.createElement(LayoutFlexBox, { autoFit: false, className: "dough-selectbox-options-container", spacing: Spacings.AUTO },
3967
- !props.mandatory && (React.createElement("div", { className: "dough-selectbox-option-wrapper" },
3988
+ !props.mandatory && !props.hideEmptyOption && (React.createElement("div", { className: "dough-selectbox-option-wrapper" },
3968
3989
  React.createElement("div", { className: "dough-selectbox-option dough-selectbox-empty-option", key: "emptySelection", onMouseDown: function () {
3969
3990
  optionClicked();
3970
3991
  }, onTouchStart: function () {
package/dist/index.js CHANGED
@@ -3644,7 +3644,7 @@ var Spinner = function (props) {
3644
3644
  };
3645
3645
  Spinner.displayName = "Spinner";
3646
3646
 
3647
- var css_248z$m = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-selectbox {\n cursor: pointer;\n}\n.dough-selectbox .value-container {\n display: flex;\n flex-flow: row nowrap;\n justify-content: flex-start;\n align-items: center;\n overflow: hidden;\n z-index: 90;\n position: relative;\n}\n\n.dough-selectbox-option-wrapper {\n display: flex;\n flex-flow: column nowrap;\n width: 100%;\n box-sizing: border-box;\n overflow: hidden;\n}\n.dough-selectbox-option-wrapper > .dough-selectbox-option {\n display: flex;\n width: 100%;\n box-sizing: border-box;\n padding: 10px;\n font-size: 0.85rem;\n cursor: pointer;\n pointer-events: all;\n}\n.dough-selectbox-option-wrapper > .dough-selectbox-option.dough-selectbox-option-disabled {\n opacity: 0.5;\n}\n.dough-selectbox-option-wrapper > .dough-selectbox-option.dough-selectbox-option-disabled, .dough-selectbox-option-wrapper > .dough-selectbox-option.dough-selectbox-option-not-selectable {\n pointer-events: none;\n}\n.dough-selectbox-option-wrapper > .dough-selectbox-option.dough-selectbox-filtered {\n display: none !important;\n}\n.dough-selectbox-option-wrapper > .dough-selectbox-option.dough-selectbox-empty-option {\n opacity: 0.5;\n}\n.dough-selectbox-option-wrapper > .dough-selectbox-option:not(.dough-selectbox-selected-option):hover {\n background-color: rgb(245, 245, 245);\n background-color: var(--dough-color-gray-6);\n}\n.dough-selectbox-option-wrapper > .dough-selectbox-option:not(.dough-selectbox-selected-option) {\n background-color: rgba(255, 255, 255, 0);\n background-color: var(--dough-color-transparent);\n color: rgb(110, 111, 117);\n color: var(--dough-color-text-default);\n}\n.dough-selectbox-option-wrapper > .dough-selectbox-option-wrapper > .dough-selectbox-option {\n padding-left: 16px;\n padding-right: 0;\n}\n\n.dough-selectbox-filter-container {\n position: relative;\n z-index: 20;\n display: block;\n box-sizing: border-box;\n width: 100%;\n padding: 0 16px 0 16px !important;\n order: 1;\n border-bottom: 1px solid #ededed;\n height: 40px;\n overflow: hidden;\n background-color: rgb(255, 255, 255);\n background-color: var(--dough-color-white);\n}\n.dough-selectbox-filter-container > .dough-layout-flexbox-content {\n height: 100%;\n}\n.to-up .dough-selectbox-filter-container {\n order: 3;\n border-bottom: none;\n border-top: 1px solid #ededed;\n}\n\n.dough-selectbox-options-container {\n position: relative;\n z-index: 10;\n order: 2;\n max-height: 40vh;\n margin-top: -40px;\n padding-top: 40px !important;\n overflow: auto;\n}\n\nbody:not(.dough-no-viewport-control) .dough-max-viewport-size-medium .dough-selectbox-filter-container {\n order: 1 !important;\n border-top: none !important;\n border-bottom: 1px solid #ededed !important;\n}\n\n@media only screen and (max-width: 768px) {\n body:not(.dough-no-viewport-control) .dough-selectbox-filter-container {\n order: 1 !important;\n border-top: none !important;\n border-bottom: 1px solid #ededed !important;\n }\n}";
3647
+ var css_248z$m = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-selectbox {\n cursor: pointer;\n}\n.dough-selectbox .value-container {\n display: flex;\n flex-flow: row nowrap;\n justify-content: flex-start;\n align-items: center;\n overflow: hidden;\n z-index: 90;\n position: relative;\n}\n\n.dough-selectbox-option-wrapper {\n display: flex;\n flex-flow: column nowrap;\n width: 100%;\n box-sizing: border-box;\n overflow: hidden;\n}\n.dough-selectbox-option-wrapper > .dough-selectbox-option {\n display: flex;\n width: 100%;\n box-sizing: border-box;\n padding: 10px;\n font-size: 0.85rem;\n cursor: pointer;\n pointer-events: all;\n}\n.dough-selectbox-option-wrapper > .dough-selectbox-option.dough-selectbox-option-disabled {\n opacity: 0.5;\n}\n.dough-selectbox-option-wrapper > .dough-selectbox-option.dough-selectbox-option-disabled, .dough-selectbox-option-wrapper > .dough-selectbox-option.dough-selectbox-option-not-selectable {\n pointer-events: none;\n}\n.dough-selectbox-option-wrapper > .dough-selectbox-option.dough-selectbox-filtered {\n display: none !important;\n}\n.dough-selectbox-option-wrapper > .dough-selectbox-option.dough-selectbox-empty-option {\n opacity: 0.5;\n}\n.dough-selectbox-option-wrapper > .dough-selectbox-option:not(.dough-selectbox-selected-option):hover {\n background-color: rgb(245, 245, 245);\n background-color: var(--dough-color-gray-6);\n}\n.dough-selectbox-option-wrapper > .dough-selectbox-option.dough-selectbox-option-themed:hover {\n background-color: var(--dough-color-primary);\n color: rgb(255, 255, 255);\n color: var(--dough-color-text-white);\n}\n.dough-selectbox-option-wrapper > .dough-selectbox-option:not(.dough-selectbox-selected-option) {\n background-color: rgba(255, 255, 255, 0);\n background-color: var(--dough-color-transparent);\n color: rgb(110, 111, 117);\n color: var(--dough-color-text-default);\n}\n.dough-selectbox-option-wrapper > .dough-selectbox-option-wrapper > .dough-selectbox-option {\n padding-left: 16px;\n padding-right: 0;\n}\n\n.dough-selectbox-filter-container {\n position: relative;\n z-index: 20;\n display: block;\n box-sizing: border-box;\n width: 100%;\n padding: 0 16px 0 16px !important;\n order: 1;\n border-bottom: 1px solid #ededed;\n height: 40px;\n overflow: hidden;\n background-color: rgb(255, 255, 255);\n background-color: var(--dough-color-white);\n}\n.dough-selectbox-filter-container > .dough-layout-flexbox-content {\n height: 100%;\n}\n.to-up .dough-selectbox-filter-container {\n order: 3;\n border-bottom: none;\n border-top: 1px solid #ededed;\n}\n\n.dough-selectbox-options-container {\n position: relative;\n z-index: 10;\n order: 2;\n max-height: 40vh;\n margin-top: -40px;\n padding-top: 40px !important;\n overflow: auto;\n}\n\nbody:not(.dough-no-viewport-control) .dough-max-viewport-size-medium .dough-selectbox-filter-container {\n order: 1 !important;\n border-top: none !important;\n border-bottom: 1px solid #ededed !important;\n}\n\n@media only screen and (max-width: 768px) {\n body:not(.dough-no-viewport-control) .dough-selectbox-filter-container {\n order: 1 !important;\n border-top: none !important;\n border-bottom: 1px solid #ededed !important;\n }\n}";
3648
3648
  styleInject(css_248z$m);
3649
3649
 
3650
3650
  var InvalidChars = "[\\[\\]?*+|{}\\\\()@.\n\r]";
@@ -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
- if (!showDropArea) {
3793
- setIsActive(true);
3794
- setShowDropArea(true);
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) {
@@ -3825,12 +3835,19 @@ var SelectBox = React.forwardRef(function (props, ref) {
3825
3835
  return res;
3826
3836
  }, false);
3827
3837
  }
3828
- return alreadyInList ? "dough-selectbox-selected-option" : "";
3838
+ return alreadyInList
3839
+ ? "dough-selectbox-selected-option"
3840
+ : props.doNotHighlightSelectedItem
3841
+ ? "dough-selectbox-option-themed"
3842
+ : "";
3829
3843
  }
3830
3844
  return props.value &&
3831
- props.value.value === option.value
3845
+ props.value.value === option.value &&
3846
+ !props.doNotHighlightSelectedItem
3832
3847
  ? "dough-selectbox-selected-option"
3833
- : "";
3848
+ : props.doNotHighlightSelectedItem
3849
+ ? "dough-selectbox-option-themed"
3850
+ : "";
3834
3851
  };
3835
3852
  var getFilterStatusClassName = function (option) {
3836
3853
  if (props.filterFunction) {
@@ -3891,7 +3908,6 @@ var SelectBox = React.forwardRef(function (props, ref) {
3891
3908
  };
3892
3909
  var checkAutoFocus = function () {
3893
3910
  if (!initialFocusIsSet && props.autoFocus) {
3894
- openDropArea();
3895
3911
  setInitialFocusIsSet(true);
3896
3912
  }
3897
3913
  };
@@ -3920,9 +3936,14 @@ var SelectBox = React.forwardRef(function (props, ref) {
3920
3936
  ? !props.validationResult.valid
3921
3937
  : !isValid.valid),
3922
3938
  }), onClick: function (e) {
3923
- cancelEvent(e);
3924
- openDropArea();
3925
- }, onFocus: openDropArea, onKeyDown: handleKeyDown, ref: wrapperRef },
3939
+ if (isOpen.current) {
3940
+ closeDropArea();
3941
+ }
3942
+ else {
3943
+ cancelEvent(e);
3944
+ openDropArea();
3945
+ }
3946
+ }, onKeyDown: handleKeyDown, ref: wrapperRef },
3926
3947
  React__default.createElement("div", { className: "value-container" }, getSelectedValueElements(props.value)),
3927
3948
  guidingIcon && (React__default.createElement("div", { className: "arrow-icon-container" },
3928
3949
  isActive && React__default.createElement(UpIcon, null),
@@ -3948,7 +3969,7 @@ var SelectBox = React.forwardRef(function (props, ref) {
3948
3969
  }
3949
3970
  }, placeholder: filterPlaceholder, value: filterText }))),
3950
3971
  React__default.createElement(LayoutFlexBox, { autoFit: false, className: "dough-selectbox-options-container", spacing: exports.Spacings.AUTO },
3951
- !props.mandatory && (React__default.createElement("div", { className: "dough-selectbox-option-wrapper" },
3972
+ !props.mandatory && !props.hideEmptyOption && (React__default.createElement("div", { className: "dough-selectbox-option-wrapper" },
3952
3973
  React__default.createElement("div", { className: "dough-selectbox-option dough-selectbox-empty-option", key: "emptySelection", onMouseDown: function () {
3953
3974
  optionClicked();
3954
3975
  }, onTouchStart: function () {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@speakapbv/dough-component-library",
3
- "version": "10.3.2",
3
+ "version": "10.3.4",
4
4
  "description": "DOUGH: Speakap React Component Library",
5
5
  "author": "Speakap",
6
6
  "license": "MIT",