oolib 2.230.2 → 2.230.4

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

@@ -106,22 +106,23 @@ var OptionsMulti = function (_a) {
         setSearchString('');
     };
     var createSelectedOptions = function () {
-        return (selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions.length) > 0 && (react_1.default.createElement("div", null,
+        return (showSelectAll || (selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions.length) > 0) && (react_1.default.createElement("div", null,
             react_1.default.createElement("div", { style: {
                     padding: "0 0.8rem",
                     display: "flex",
                     justifyContent: "space-between",
                     alignItems: "center",
                 } },
-                react_1.default.createElement(__1.UI_TAG, null, "Selected"),
+                react_1.default.createElement(__1.UI_TAG, null, (selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions.length) > 0 && "Selected"),
                 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 }),
-            react_1.default.createElement("div", { style: { margin: "0.4rem 0rem" } },
-                react_1.default.createElement(__1.Divider, { style: { borderBottom: "0.1rem solid ".concat(__1.colors2.grey20) } }))));
+                    (selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions.length) > 0 && (react_1.default.createElement(__1.ButtonTertiaryCompact, { onClick: handleClearAll, children: "Clear all", icon: "X" })),
+                    showSelectAll && (react_1.default.createElement(__1.ButtonTertiaryCompact, { onClick: handleSelectAll, children: "Select all", icon: "CheckCircle" })))),
+            (selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions.length) > 0 && (react_1.default.createElement(react_1.default.Fragment, null,
+                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 }),
+                react_1.default.createElement("div", { style: { margin: "0.4rem 0rem" } },
+                    react_1.default.createElement(__1.Divider, { style: { borderBottom: "0.1rem solid ".concat(__1.colors2.grey20) } }))))));
     };
     return (react_1.default.createElement(OptionsShell_1.OptionsShell, { ref: optionsRef, yOrientation: yOrientation, lightboxHeight: lightboxHeight, lightboxStyle: lightboxStyle, options: options, optionsAnchor: optionsAnchor, showOptions: showOptions, handleHideOptions: handleHideOptions, SelectComp: SelectComp, label: label, optionsModalLabel: optionsModalLabel, showDoneButton: true, popOutOfOverflowHiddenParent: popOutOfOverflowHiddenParent, relativeToRef: relativeToRef, S: S, alignDropdown: alignDropdown, matchSelectInputWidth: matchSelectInputWidth },
         react_1.default.createElement(List_1.List, { options: options, value: value, focussedOp: focussedOp, scrollFocussedOpIntoView: scrollFocussedOpIntoView, onChange: function (id, v) {

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

@@ -126,6 +126,7 @@ function TextInput(_a) {
     var size = S
         ? (screenWidth >= (0, mixins_1.getBreakPoint)('md') ? "S" : "M") //wat this basically means is, a defined 'small' text input will dynamically become 'medium' when on mobile, which is in sync with the pattern of the rest of our components
         : "M";
+    var ClearBtnComp = (clearBtn === null || clearBtn === void 0 ? void 0 : clearBtn.variant) === "tertiary" ? Buttons_1.ButtonTertiaryCompact : Buttons_1.ButtonSecondaryCompact;
     var handleValidate = function (e, onBlur) { return __awaiter(_this, void 0, void 0, function () {
         var value, res, validationPlugin, pluginResponse;
         return __generator(this, function (_a) {
@@ -205,7 +206,7 @@ function TextInput(_a) {
                     react_1.default.createElement(LoadersAndProgress_1.LoaderCircle, { S: true }))),
                 (validationStatus === null || validationStatus === void 0 ? void 0 : validationStatus.type) === "success" && (react_1.default.createElement("div", null,
                     react_1.default.createElement(BadgeVetted, { size: 26 }))),
-                (clearBtn && clearBtnEnabled) && (react_1.default.createElement(Buttons_1.ButtonSecondaryCompact, { onClick: function () { return onChange(id, ""); }, value: (clearBtn === null || clearBtn === void 0 ? void 0 : clearBtn.text) || "Clear", disabled: !clearBtnEnabled, style: { marginRight: size === "S" ? '-0.4rem' : '-0.2rem' } /** so that it stays ahead of the before element inside InputContainerStyled */ })),
+                (clearBtn && clearBtnEnabled) && (react_1.default.createElement(ClearBtnComp, { onClick: function () { return onChange(id, ""); }, value: (clearBtn === null || clearBtn === void 0 ? void 0 : clearBtn.text) || "Clear", disabled: !clearBtnEnabled, style: { marginRight: size === "S" ? '-0.4rem' : '-0.2rem' } /** so that it stays ahead of the before element inside InputContainerStyled */ })),
                 actionBtn && (react_1.default.createElement(Buttons_1.ButtonPrimaryCompact, { value: (actionBtn === null || actionBtn === void 0 ? void 0 : actionBtn.text) || "Action", onClick: actionBtnEnabaled && actionBtn.onClick, disabled: !actionBtnEnabaled, style: { marginRight: size === "S" ? '-0.4rem' : '-0.2rem' } /** so that it stays ahead of the before element inside InputContainerStyled */ }))),
             displayValidationMsg && (validationStatus === null || validationStatus === void 0 ? void 0 : validationStatus.msg) && (react_1.default.createElement(index_styled_1.MsgContainerStyled, { status: validationStatus === null || validationStatus === void 0 ? void 0 : validationStatus.type },
                 (validationStatus === null || validationStatus === void 0 ? void 0 : validationStatus.type) === "error" && (react_1.default.createElement(DisplayIcon_1.DisplayIcon, { size: 12, icon: "WarningDiamond", weight: "fill", color: themes_1.colors.red })),

package/package.json

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