@speakapbv/dough-component-library 10.3.2 → 10.3.3

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 +12 -5
  3. package/dist/index.js +12 -5
  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]";
@@ -3841,12 +3841,19 @@ var SelectBox = forwardRef(function (props, ref) {
3841
3841
  return res;
3842
3842
  }, false);
3843
3843
  }
3844
- return alreadyInList ? "dough-selectbox-selected-option" : "";
3844
+ return alreadyInList
3845
+ ? "dough-selectbox-selected-option"
3846
+ : props.doNotHighlightSelectedItem
3847
+ ? "dough-selectbox-option-themed"
3848
+ : "";
3845
3849
  }
3846
3850
  return props.value &&
3847
- props.value.value === option.value
3851
+ props.value.value === option.value &&
3852
+ !props.doNotHighlightSelectedItem
3848
3853
  ? "dough-selectbox-selected-option"
3849
- : "";
3854
+ : props.doNotHighlightSelectedItem
3855
+ ? "dough-selectbox-option-themed"
3856
+ : "";
3850
3857
  };
3851
3858
  var getFilterStatusClassName = function (option) {
3852
3859
  if (props.filterFunction) {
@@ -3964,7 +3971,7 @@ var SelectBox = forwardRef(function (props, ref) {
3964
3971
  }
3965
3972
  }, placeholder: filterPlaceholder, value: filterText }))),
3966
3973
  React.createElement(LayoutFlexBox, { autoFit: false, className: "dough-selectbox-options-container", spacing: Spacings.AUTO },
3967
- !props.mandatory && (React.createElement("div", { className: "dough-selectbox-option-wrapper" },
3974
+ !props.mandatory && !props.hideEmptyOption && (React.createElement("div", { className: "dough-selectbox-option-wrapper" },
3968
3975
  React.createElement("div", { className: "dough-selectbox-option dough-selectbox-empty-option", key: "emptySelection", onMouseDown: function () {
3969
3976
  optionClicked();
3970
3977
  }, 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]";
@@ -3825,12 +3825,19 @@ var SelectBox = React.forwardRef(function (props, ref) {
3825
3825
  return res;
3826
3826
  }, false);
3827
3827
  }
3828
- return alreadyInList ? "dough-selectbox-selected-option" : "";
3828
+ return alreadyInList
3829
+ ? "dough-selectbox-selected-option"
3830
+ : props.doNotHighlightSelectedItem
3831
+ ? "dough-selectbox-option-themed"
3832
+ : "";
3829
3833
  }
3830
3834
  return props.value &&
3831
- props.value.value === option.value
3835
+ props.value.value === option.value &&
3836
+ !props.doNotHighlightSelectedItem
3832
3837
  ? "dough-selectbox-selected-option"
3833
- : "";
3838
+ : props.doNotHighlightSelectedItem
3839
+ ? "dough-selectbox-option-themed"
3840
+ : "";
3834
3841
  };
3835
3842
  var getFilterStatusClassName = function (option) {
3836
3843
  if (props.filterFunction) {
@@ -3948,7 +3955,7 @@ var SelectBox = React.forwardRef(function (props, ref) {
3948
3955
  }
3949
3956
  }, placeholder: filterPlaceholder, value: filterText }))),
3950
3957
  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" },
3958
+ !props.mandatory && !props.hideEmptyOption && (React__default.createElement("div", { className: "dough-selectbox-option-wrapper" },
3952
3959
  React__default.createElement("div", { className: "dough-selectbox-option dough-selectbox-empty-option", key: "emptySelection", onMouseDown: function () {
3953
3960
  optionClicked();
3954
3961
  }, 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.3",
4
4
  "description": "DOUGH: Speakap React Component Library",
5
5
  "author": "Speakap",
6
6
  "license": "MIT",