oolib 2.228.1 → 2.229.1

package/dist/v2/components/Dropdowns/DropdownMulti/index.d.ts

@@ -1,4 +1,4 @@
-export function DropdownMulti({ saveValueAsString, value: valueProp, id, onChange: parentOnChange, className, readOnly, selectClassName, optionsClassName, selectStyleOverride, optionsFn, options: optionsProp, isTagsStyle, isSearchable, searchFieldsConfig, setFilteredOptions: setFilteredOptionsInParent, setSearchString: setSearchStringInParent, searchString: searchStringInParent, label, optionsModalLabel, genCreateTagButton, placeholder, genCustomSelectComp, disableSelectTextUpdate, selectConfig, lightboxHeight, lightboxStyle, optionsAnchor, popOutOfOverflowHiddenParent, S, disabled, broadcastShowOptions, tagColor, searchbarPlaceholder, alignDropdown, variant, matchSelectInputWidth, observerRef, content, }: {
+export function DropdownMulti({ saveValueAsString, value: valueProp, id, onChange: parentOnChange, className, readOnly, selectClassName, optionsClassName, selectStyleOverride, optionsFn, options: optionsProp, isTagsStyle, isSearchable, searchFieldsConfig, setFilteredOptions: setFilteredOptionsInParent, setSearchString: setSearchStringInParent, searchString: searchStringInParent, label, optionsModalLabel, genCreateTagButton, placeholder, genCustomSelectComp, disableSelectTextUpdate, selectConfig, lightboxHeight, lightboxStyle, optionsAnchor, popOutOfOverflowHiddenParent, S, disabled, broadcastShowOptions, tagColor, searchbarPlaceholder, alignDropdown, variant, matchSelectInputWidth, observerRef, content, showSelectAll, }: {
     saveValueAsString: any;
     value: any;
     id: any;
@@ -37,5 +37,6 @@ export function DropdownMulti({ saveValueAsString, value: valueProp, id, onChang
     matchSelectInputWidth?: boolean;
     observerRef: any;
     content: any;
+    showSelectAll: any;
 }, ...args: any[]): React.JSX.Element;
 import React from "react";

package/dist/v2/components/Dropdowns/DropdownMulti/index.js

@@ -74,7 +74,8 @@ function DropdownMulti(_a) {
     optionsClassName = _a.optionsClassName, //used to override font size in priimary header
     selectStyleOverride = _a.selectStyleOverride, optionsFn = _a.optionsFn, optionsProp = _a.options, isTagsStyle = _a.isTagsStyle, isSearchable = _a.isSearchable, searchFieldsConfig = _a.searchFieldsConfig, setFilteredOptionsInParent = _a.setFilteredOptions, setSearchStringInParent = _a.setSearchString, searchStringInParent = _a.searchString, label = _a.label, optionsModalLabel = _a.optionsModalLabel, genCreateTagButton = _a.genCreateTagButton, placeholder = _a.placeholder, genCustomSelectComp = _a.genCustomSelectComp, disableSelectTextUpdate = _a.disableSelectTextUpdate, selectConfig = _a.selectConfig, 
     //props whose existence needs to be questioned:
-    lightboxHeight = _a.lightboxHeight, lightboxStyle = _a.lightboxStyle, optionsAnchor = _a.optionsAnchor, popOutOfOverflowHiddenParent = _a.popOutOfOverflowHiddenParent, S = _a.S, disabled = _a.disabled, broadcastShowOptions = _a.broadcastShowOptions, tagColor = _a.tagColor, searchbarPlaceholder = _a.searchbarPlaceholder, _b = _a.alignDropdown, alignDropdown = _b === void 0 ? "left" : _b, _c = _a.variant, variant = _c === void 0 ? "default" : _c, _d = _a.matchSelectInputWidth, matchSelectInputWidth = _d === void 0 ? false : _d, observerRef = _a.observerRef, content = _a.content;
+    lightboxHeight = _a.lightboxHeight, lightboxStyle = _a.lightboxStyle, optionsAnchor = _a.optionsAnchor, popOutOfOverflowHiddenParent = _a.popOutOfOverflowHiddenParent, S = _a.S, disabled = _a.disabled, broadcastShowOptions = _a.broadcastShowOptions, tagColor = _a.tagColor, searchbarPlaceholder = _a.searchbarPlaceholder, _b = _a.alignDropdown, alignDropdown = _b === void 0 ? "left" : _b, _c = _a.variant, variant = _c === void 0 ? "default" : _c, _d = _a.matchSelectInputWidth, matchSelectInputWidth = _d === void 0 ? false : _d, observerRef = _a.observerRef, content = _a.content, // parent document; content.meta.kp_content_type is used to set ?activeTab= on collection tag links
+    showSelectAll = _a.showSelectAll;
     var theme = (0, styled_components_1.useTheme)();
     var props = arguments[0];
     var value = (0, getValue_1.getValue_MULTI)({ valueProp: valueProp, optionsFn: optionsFn, options: optionsProp, theme: theme, saveValueAsString: saveValueAsString });
@@ -196,7 +197,7 @@ function DropdownMulti(_a) {
                         ? !showOptions && handleShowOptions() //if tagsStyle, then click always shows options
                         : showOptions ? handleHideOptions() : handleShowOptions(); //if dropdowns, then click toggles show/hide
                 } }, isTagsStyle ? genSelectTagsInput() : (react_1.default.createElement(SelectDropdown_1.SelectDropdown, { value: value, placeholder: placeholder, selectClassName: selectClassName, selectStyleOverride: selectStyleOverride, showOptions: showOptions, genCustomSelectComp: genCustomSelectComp, disableSelectTextUpdate: disableSelectTextUpdate, selectConfig: selectConfig, S: S, disabled: disabled, variant: variant }))),
-            react_1.default.createElement(OptionsMulti_1.OptionsMulti, { parentOnChange: parentOnChange, id: id, value: value, relativeToRef: selectRef, showOptions: showOptions, handleSelect: handleSelect, handleHideOptions: handleHideOptions, optionsClassName: optionsClassName, options: options, optionsFn: optionsFn, label: label, optionsModalLabel: optionsModalLabel, isTagsStyle: isTagsStyle, genCreateTagButton: genCreateTagButton, lightboxHeight: lightboxHeight, lightboxStyle: lightboxStyle, optionsAnchor: optionsAnchor, SelectComp: isTagsStyle && genSelectTagsInput({ style: { position: 'sticky', top: 0, zIndex: 1000 } }), setFocusSelectTagsInput: setFocusSelectTagsInput, popOutOfOverflowHiddenParent: popOutOfOverflowHiddenParent, S: S, alignDropdown: alignDropdown, matchSelectInputWidth: matchSelectInputWidth, observerRef: observerRef, searchbarPlaceholder: searchbarPlaceholder, isSearchable: isTagsStyle ? false : isSearchable, searchString: searchString, setSearchString: setSearchString })));
+            react_1.default.createElement(OptionsMulti_1.OptionsMulti, { parentOnChange: parentOnChange, id: id, value: value, relativeToRef: selectRef, showOptions: showOptions, handleSelect: handleSelect, handleHideOptions: handleHideOptions, optionsClassName: optionsClassName, options: options, optionsFn: optionsFn, label: label, optionsModalLabel: optionsModalLabel, isTagsStyle: isTagsStyle, genCreateTagButton: genCreateTagButton, lightboxHeight: lightboxHeight, lightboxStyle: lightboxStyle, optionsAnchor: optionsAnchor, SelectComp: isTagsStyle && genSelectTagsInput({ style: { position: 'sticky', top: 0, zIndex: 1000 } }), setFocusSelectTagsInput: setFocusSelectTagsInput, popOutOfOverflowHiddenParent: popOutOfOverflowHiddenParent, S: S, alignDropdown: alignDropdown, matchSelectInputWidth: matchSelectInputWidth, observerRef: observerRef, searchbarPlaceholder: searchbarPlaceholder, isSearchable: isTagsStyle ? false : isSearchable, searchString: searchString, setSearchString: setSearchString, showSelectAll: showSelectAll })));
     };
     return (react_1.default.createElement("div", { className: "OKE-Dropdown ".concat(className, " OKE-Dropdown--").concat(readOnly ? "displayComp" : "inputComp") },
         react_1.default.createElement(BlockLabel_1.BlockLabel, __assign({}, (0, getBlockLabelProps_1.getBlockLabelProps)(props))),

package/dist/v2/components/Dropdowns/comps/OptionsMulti/index.d.ts

@@ -1,4 +1,4 @@
-export function OptionsMulti({ lightboxHeight, lightboxStyle, optionsAnchor, value, id, optionsClassName, relativeToRef, showOptions, handleHideOptions, handleSelect, options, parentOnChange, isSearchable, label, optionsModalLabel, searchString, setSearchString, SelectComp, isTagsStyle, genCreateTagButton, setFocusSelectTagsInput, popOutOfOverflowHiddenParent, S, observerRef, searchbarPlaceholder, alignDropdown, matchSelectInputWidth }: {
+export function OptionsMulti({ lightboxHeight, lightboxStyle, optionsAnchor, value, id, optionsClassName, relativeToRef, showOptions, handleHideOptions, handleSelect, options, parentOnChange, isSearchable, label, optionsModalLabel, searchString, setSearchString, SelectComp, isTagsStyle, genCreateTagButton, setFocusSelectTagsInput, popOutOfOverflowHiddenParent, S, observerRef, searchbarPlaceholder, alignDropdown, matchSelectInputWidth, showSelectAll }: {
     lightboxHeight: any;
     lightboxStyle: any;
     optionsAnchor: any;
@@ -26,5 +26,6 @@ export function OptionsMulti({ lightboxHeight, lightboxStyle, optionsAnchor, val
     searchbarPlaceholder: any;
     alignDropdown: any;
     matchSelectInputWidth: any;
+    showSelectAll: any;
 }): React.JSX.Element;
 import React from "react";

package/dist/v2/components/Dropdowns/comps/OptionsMulti/index.js

@@ -32,6 +32,15 @@ var __importStar = (this && this.__importStar) || (function () {
         return result;
     };
 })();
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.OptionsMulti = void 0;
 var react_1 = __importStar(require("react"));
@@ -48,7 +57,7 @@ var OptionsMulti = function (_a) {
     relativeToRef = _a.relativeToRef, //the element that this lightbox is being rendered against. i.e top or bottom
     showOptions = _a.showOptions, handleHideOptions = _a.handleHideOptions, handleSelect = _a.handleSelect, options = _a.options, parentOnChange = _a.parentOnChange, isSearchable = _a.isSearchable, label = _a.label, optionsModalLabel = _a.optionsModalLabel, //label is just a fallback for optionsModalLabel. Don't know why both are needed
     searchString = _a.searchString, setSearchString = _a.setSearchString, SelectComp = _a.SelectComp, // for mobile
-    isTagsStyle = _a.isTagsStyle, genCreateTagButton = _a.genCreateTagButton, setFocusSelectTagsInput = _a.setFocusSelectTagsInput, popOutOfOverflowHiddenParent = _a.popOutOfOverflowHiddenParent, S = _a.S, observerRef = _a.observerRef, searchbarPlaceholder = _a.searchbarPlaceholder, alignDropdown = _a.alignDropdown, matchSelectInputWidth = _a.matchSelectInputWidth;
+    isTagsStyle = _a.isTagsStyle, genCreateTagButton = _a.genCreateTagButton, setFocusSelectTagsInput = _a.setFocusSelectTagsInput, popOutOfOverflowHiddenParent = _a.popOutOfOverflowHiddenParent, S = _a.S, observerRef = _a.observerRef, searchbarPlaceholder = _a.searchbarPlaceholder, alignDropdown = _a.alignDropdown, matchSelectInputWidth = _a.matchSelectInputWidth, showSelectAll = _a.showSelectAll;
     //INIT ORIENTATION STATE AND CUSTOM HOOK
     var optionsRef = (0, react_1.useRef)(null);
     var yOrientation = (0, useSetYOrientation_1.useSetYOrientation)({
@@ -88,6 +97,14 @@ var OptionsMulti = function (_a) {
         parentOnChange(id, []);
         setSearchString('');
     };
+    var handleSelectAll = function () {
+        // Combine selected (value) + unselected (options) to get all options
+        var flatUnselected = (0, List_1.isGroupedData)(options)
+            ? options.flatMap(function (group) { return group.options; })
+            : options;
+        parentOnChange(id, __spreadArray(__spreadArray([], (value || []), true), flatUnselected, true));
+        setSearchString('');
+    };
     var createSelectedOptions = function () {
         return (selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions.length) > 0 && (react_1.default.createElement("div", null,
             react_1.default.createElement("div", { style: {
@@ -97,7 +114,9 @@ var OptionsMulti = function (_a) {
                     alignItems: "center",
                 } },
                 react_1.default.createElement(__1.UI_TAG, null, "Selected"),
-                react_1.default.createElement(__1.ButtonTertiaryCompact, { onClick: handleClearAll, children: "Clear all", icon: "X" })),
+                react_1.default.createElement("div", { style: { display: "flex", gap: "0.2rem" } },
+                    showSelectAll && options.length > 0 && (react_1.default.createElement(__1.ButtonTertiaryCompact, { onClick: handleSelectAll, children: "Select all", icon: "CheckCircle" })),
+                    react_1.default.createElement(__1.ButtonTertiaryCompact, { onClick: handleClearAll, children: "Clear all", icon: "X" }))),
             react_1.default.createElement(List_1.List, { key: value, options: selectedOptions, value: value, focussedOp: focussedOp, scrollFocussedOpIntoView: scrollFocussedOpIntoView, onChange: function (id, v) {
                     return handleSelect(v);
                 }, setSearchString: setSearchString, optionsClassName: optionsClassName, setFocusSelectTagsInput: setFocusSelectTagsInput, S: S, isMulti: true, style: { padding: "0" }, disableShadow: true }),

package/dist/v2/components/List/index.js

@@ -69,7 +69,7 @@ var List = function (_a) {
     // const theme = useTheme();
     var id = _a.id, _b = _a.options, options = _b === void 0 ? [] : _b, value = _a.value, focussedOp = _a.focussedOp, scrollFocussedOpIntoView = _a.scrollFocussedOpIntoView, parentOnChange = _a.onChange, optionsClassName = _a.optionsClassName, invert = _a.invert, S = _a.S, observerRef = _a.observerRef, _c = _a.isMulti, isMulti = _c === void 0 ? false : _c, isTagsStyle = _a.isTagsStyle, setFocusSelectTagsInput = _a.setFocusSelectTagsInput, disableShadow = _a.disableShadow, isSearchable = _a.isSearchable, searchbarPlaceholder = _a.searchbarPlaceholder, searchBarFocus = _a.searchBarFocus, searchString = _a.searchString, setSearchString = _a.setSearchString, setSearchBarFocus = _a.setSearchBarFocus, children = _a.children, enableBorder = _a.enableBorder, style = _a.style, groupHeaderStickyTop = _a.groupHeaderStickyTop, showListInParent = _a.showList, usedIn = _a.usedIn, alignCheckbox = _a.alignCheckbox, iconAfter = _a.iconAfter;
     var renderListItems = function () {
-        if (options.length === 0) {
+        if (options.length === 0 && searchString) {
             return react_1.default.createElement(NoOptionResultsComp_1.NoOptionResultsComp, { S: S });
         }
         if ((0, exports.isGroupedData)(options)) {

package/dist/v2/components/TabBar/index.styled.js

@@ -150,13 +150,13 @@ exports.TabBarTabStyled = styled_components_1.default.button(templateObject_17 |
             return exports.tabStyles.style2;
     }
 });
-exports.StyledDirectionButtons = styled_components_1.default.div(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n  position: absolute;\n  ", "\n  background-color: ", ";\n  height: 100%;\n  border-right: 1px solid ", ";\n  border-left: 1px solid ", ";\n  z-index: 10;\n"], ["\n  position: absolute;\n  ", "\n  background-color: ", ";\n  height: 100%;\n  border-right: 1px solid ", ";\n  border-left: 1px solid ", ";\n  z-index: 10;\n"])), function (_a) {
+exports.StyledDirectionButtons = styled_components_1.default.div(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n  position: absolute;\n  ", "\n  height: 100%;\n  z-index: 10;\n  display: flex;\n  align-items: center;\n"], ["\n  position: absolute;\n  ", "\n  height: 100%;\n  z-index: 10;\n  display: flex;\n  align-items: center;\n"])), function (_a) {
     var left = _a.left, right = _a.right;
     if (left)
-        return (0, styled_components_1.css)(templateObject_18 || (templateObject_18 = __makeTemplateObject([" left: 0;"], [" left: 0;"])));
+        return (0, styled_components_1.css)(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n        left: 0;\n        background: linear-gradient(to left, transparent, ", ");\n        padding-right: 0.5rem;\n      "], ["\n        left: 0;\n        background: linear-gradient(to left, transparent, ", ");\n        padding-right: 0.5rem;\n      "])), white);
     else if (right)
-        return (0, styled_components_1.css)(templateObject_19 || (templateObject_19 = __makeTemplateObject([" right: 0;"], [" right: 0;"])));
-}, white, grey10, grey10);
+        return (0, styled_components_1.css)(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n        right: 0;\n        background: linear-gradient(to right, transparent, ", ");\n        padding-left: 0.5rem;\n      "], ["\n        right: 0;\n        background: linear-gradient(to right, transparent, ", ");\n        padding-left: 0.5rem;\n      "])), white);
+});
 exports.StyledDot = styled_components_1.default.div(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n  background: ", ";\n  height: 5px;\n  width: 5px;\n  border-radius: 50%;\n  margin-left: 10px;\n"], ["\n  background: ", ";\n  height: 5px;\n  width: 5px;\n  border-radius: 50%;\n  margin-left: 10px;\n"])), function (_a) {
     var active = _a.active, error = _a.error, tabBarStyle = _a.tabBarStyle;
     return tabBarStyle === "2" && active ? errorColor : !active && error ? errorColor : errorColor;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oolib",
-  "version": "2.228.1",
+  "version": "2.229.1",
   "description": " OKE Component Library",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",