oolib 2.90.3 → 2.91.0

package/dist/components/ActionMenu/index.d.ts

@@ -1,4 +1,4 @@
-export function ActionMenu({ icon, invert, actions, align, iconSize, M, ButtonComp: _ButtonComp, setShowActions: setShowActionsInParent, popOutOfOverflowHiddenParent, CustomSelectComp, storybookPreview, useLightboxPortal, }: {
+export function ActionMenu({ icon, invert, actions, align, iconSize, M, ButtonComp: _ButtonComp, setShowActions: setShowActionsInParent, popOutOfOverflowHiddenParent, CustomSelectComp, storybookPreview, }: {
     icon?: string;
     invert: any;
     actions: any;
@@ -10,6 +10,5 @@ export function ActionMenu({ icon, invert, actions, align, iconSize, M, ButtonCo
     popOutOfOverflowHiddenParent?: boolean;
     CustomSelectComp: any;
     storybookPreview: any;
-    useLightboxPortal: any;
 }): React.JSX.Element;
 import React from "react";

package/dist/components/ActionMenu/index.js

@@ -47,12 +47,13 @@ var react_dom_1 = require("react-dom");
 //
 var ActionMenu = function (_a) {
     var _b = _a.icon, icon = _b === void 0 ? "DotsThree" : _b, //most likely will never change
-    invert = _a.invert, actions = _a.actions, _c = _a.align, align = _c === void 0 ? "right" : _c, _d = _a.iconSize, iconSize = _d === void 0 ? "S" : _d, M = _a.M, _e = _a.ButtonComp, _ButtonComp = _e === void 0 ? "ButtonGhost" : _e, setShowActionsInParent = _a.setShowActions, _f = _a.popOutOfOverflowHiddenParent, popOutOfOverflowHiddenParent = _f === void 0 ? false : _f, CustomSelectComp = _a.CustomSelectComp, storybookPreview = _a.storybookPreview, //for storybook purposes
-    useLightboxPortal = _a.useLightboxPortal;
+    invert = _a.invert, actions = _a.actions, _c = _a.align, align = _c === void 0 ? "right" : _c, _d = _a.iconSize, iconSize = _d === void 0 ? "S" : _d, M = _a.M, _e = _a.ButtonComp, _ButtonComp = _e === void 0 ? "ButtonGhost" : _e, setShowActionsInParent = _a.setShowActions, _f = _a.popOutOfOverflowHiddenParent, popOutOfOverflowHiddenParent = _f === void 0 ? false : _f, CustomSelectComp = _a.CustomSelectComp, storybookPreview = _a.storybookPreview;
     var actionMenuRef = (0, react_1.useRef)(null);
     var optionsWrapperRef = (0, react_1.useRef)(null);
     var _g = (0, react_1.useState)(false), showActions = _g[0], setShowActions = _g[1];
-    (0, useHandleClickOutside_1.useHandleClickOutside)(actionMenuRef, setShowActions);
+    (0, useHandleClickOutside_1.useHandleClickOutside)(popOutOfOverflowHiddenParent
+        ? [actionMenuRef, optionsWrapperRef] //cuz in popOut case, options are rendered in a portal, which means the 'options' are no longer a child on acitonMenuRef. Hence we need to track click outside optionsWrapperRef as well.
+        : actionMenuRef, setShowActions);
     if (!actions || actions.length === 0)
         return null;
     var getOpsRect = function () { var _a; return (_a = optionsWrapperRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect(); };

package/dist/components/Switches/index.js

@@ -21,6 +21,7 @@ var _EXPORTS_1 = require("../../utils/_EXPORTS");
 var BlockLabel_1 = require("../BlockLabel");
 var styled_1 = require("./styled");
 var Tooltip_1 = require("../Tooltip");
+var utilsOolib_1 = require("../../utilsOolib");
 var greyColor40 = themes_1.colors.greyColor40, greyColor100 = themes_1.colors.greyColor100, white = themes_1.colors.white;
 function SwitchDouble(_a) {
     var id = _a.id, valueProp = _a.value, options = _a.options, onChange = _a.onChange, invert = _a.invert, saveValueAsString = _a.saveValueAsString, _b = _a.disabled, disabled = _b === void 0 ? false : _b;
@@ -36,7 +37,7 @@ function SwitchDouble(_a) {
     var props = arguments[0];
     var isLeftOptionActive = value === undefined || options[0].value === (value === null || value === void 0 ? void 0 : value.value);
     if (value === undefined)
-        throw new Error('You need to pass a value prop to make SwitchDouble work');
+        throw new Error("You need to pass a value prop to make SwitchDouble work");
     return (react_1.default.createElement("div", null,
         react_1.default.createElement(BlockLabel_1.BlockLabel, __assign({}, (0, _EXPORTS_1.getBlockLabelProps)(props))),
         react_1.default.createElement(styled_1.StyledSwitchWrapperStyle1, null,
@@ -58,6 +59,7 @@ exports.SwitchDouble = SwitchDouble;
 function SwitchSingle(_a) {
     var id = _a.id, value = _a.value, option = _a.option, onChange = _a.onChange, _b = _a.disabled, disabled = _b === void 0 ? false : _b, invert = _a.invert, saveValueAsString = _a.saveValueAsString, _c = _a.layoutStyle, layoutStyle = _c === void 0 ? "style1" : _c, infoTooltip = _a.infoTooltip;
     var props = arguments[0];
+    var localize = (0, utilsOolib_1.useLocale)();
     /**
      * very important that we check this way,
      * as opposed to checking as 'value === undefined'
@@ -76,18 +78,32 @@ function SwitchSingle(_a) {
     var genSwitch = function () { return (react_1.default.createElement(styled_1.StyledButtonSlider, { inactive: isInactive, disabled: disabled, invert: invert, onClick: handleClick },
         react_1.default.createElement(styled_1.StyledSwitch, { className: "StyledSwitch" //read in styled.js why we are using an okf-anti-pattern
             , direction: isInactive ? "left" : "right", inactive: isInactive, disabled: disabled, invert: invert }))); };
-    var genDisplayText = function () { return react_1.default.createElement(styled_1.STYLED_SANS_3, __assign({}, { invert: invert, lineHeight: 1, semibold: isInactive ? false : true }), option.display); };
+    var injectOptionalLabelIntoDisplayText = function (_a) {
+        var label = _a.label, display = _a.display, isRequired = _a.isRequired;
+        if (!!label)
+            return display; //if label exists, we do nothing, cuz optional label in that case, would be shown next to the label
+        //else
+        if (isRequired === false)
+            return display + " (".concat(localize('optional'), ")");
+        //else
+        return display; //cuz ofcourse its not optional, so no need to show optional label
+    };
+    var genDisplayText = function () { return (react_1.default.createElement(styled_1.STYLED_SANS_3, __assign({}, { invert: invert, lineHeight: 1, semibold: isInactive ? false : true }), injectOptionalLabelIntoDisplayText({
+        display: option.display,
+        label: props.label,
+        isRequired: props.isRequired
+    }))); };
     var genSwitchDisplay = function () {
         return infoTooltip ? (react_1.default.createElement("div", { style: { display: "flex", gap: ".5rem", alignItems: "center" } },
             genDisplayText(),
-            react_1.default.createElement(Tooltip_1.Tooltip, __assign({ presetTarget: "infoIcon" }, infoTooltip)))) : genDisplayText();
+            react_1.default.createElement(Tooltip_1.Tooltip, __assign({ presetTarget: "infoIcon" }, infoTooltip)))) : (genDisplayText());
     };
     return (react_1.default.createElement("div", null,
-        react_1.default.createElement(BlockLabel_1.BlockLabel, __assign({}, (0, _EXPORTS_1.getBlockLabelProps)(props))),
+        react_1.default.createElement(BlockLabel_1.BlockLabel, __assign({ hideOptionalLabel: !!props.label === false }, (0, _EXPORTS_1.getBlockLabelProps)(props))),
         layoutStyle === "style1" ? (react_1.default.createElement(styled_1.StyledSwitchWrapperStyle1, null,
             genSwitch(),
-            genSwitchDisplay())) : layoutStyle === "style2" && (react_1.default.createElement(styled_1.StyledSwitchWrapperStyle2, null,
+            genSwitchDisplay())) : (layoutStyle === "style2" && (react_1.default.createElement(styled_1.StyledSwitchWrapperStyle2, null,
             genSwitchDisplay(),
-            genSwitch()))));
+            genSwitch())))));
 }
 exports.SwitchSingle = SwitchSingle;

package/dist/utils/customHooks/useHandleClickOutside.d.ts

@@ -1 +1 @@
-export function useHandleClickOutside(ref: any, setShowOptions: any, options?: {}): void;
+export function useHandleClickOutside(ref: any, setShowOptions: any, options?: any): void;

package/dist/utils/customHooks/useHandleClickOutside.js

@@ -2,13 +2,20 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useHandleClickOutside = void 0;
 var react_1 = require("react");
+var toArray_1 = require("../toArray");
+/**
+ *
+ * @param {*} ref can be a ref or an array of refs
+ * @param {*} setShowOptions
+ * @param {*} options
+ */
 var useHandleClickOutside = function (ref, setShowOptions, options) {
     if (options === void 0) { options = {}; }
     var _a = options.enabled, enabled = _a === void 0 ? true : _a;
     var handleClickOutside = function (event) {
         if (!enabled)
             return;
-        if (ref.current && !ref.current.contains(event.target)) {
+        if ((0, toArray_1.toArray)(ref).every(function (refD) { return refD.current && !refD.current.contains(event.target); })) {
             //clicked outside editor
             setShowOptions(false);
         }

package/package.json

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