oolib 2.130.0 → 2.131.1

package/dist/components/ActionMenu/index.js

@@ -99,7 +99,7 @@ var ActionMenu = function (_a) {
         return (react_1.default.createElement(styled_1.StyledActionsDropMenu, { id: "dropmenu", align: align, invert: invert, optionsHeight: (_a = getOpsRect()) === null || _a === void 0 ? void 0 : _a.height, optionsWidth: (_b = getOpsRect()) === null || _b === void 0 ? void 0 : _b.width, showActions: showActions, fixPos: fixPos },
             react_1.default.createElement(styled_1.StyledActionMenuOpsWrapper, { invert: invert, align: align, ref: optionsWrapperRef }, actions.map(function (action) {
                 var _a, _b, _c;
-                var optionContent = (react_1.default.createElement(styled_1.StyledOption, __assign({}, action, { onClick: function (e) {
+                var optionContent = (react_1.default.createElement(styled_1.StyledOption, __assign({ disabled: action.disabled }, action, { onClick: function (e) {
                         var _a;
                         e.preventDefault();
                         e.stopPropagation();
@@ -108,7 +108,7 @@ var ActionMenu = function (_a) {
                     }, key: action.display, invert: invert }),
                     action.icon && genOptionIcon(action.icon),
                     react_1.default.createElement(Typo_1.SANS_2, null, action.display)));
-                return (react_1.default.createElement(ModalConfirmAction_1.ModalConfirmAction, __assign({}, action.confirmAction, { key: action.display }), action.infoTooltip ? (react_1.default.createElement(Tooltip_1.Tooltip, { text: ((_a = action.infoTooltip) === null || _a === void 0 ? void 0 : _a.text) || undefined, popOutOfOverflowHiddenParent: ((_b = action.infoTooltip) === null || _b === void 0 ? void 0 : _b.popOutOfOverflowHiddenParent) || false, position: ((_c = action.infoTooltip) === null || _c === void 0 ? void 0 : _c.position) || "left" }, optionContent)) : (optionContent)));
+                return (react_1.default.createElement(ModalConfirmAction_1.ModalConfirmAction, __assign({}, action.confirmAction, { key: action.display }), action.infoTooltip ? (react_1.default.createElement(Tooltip_1.Tooltip, { text: ((_a = action.infoTooltip) === null || _a === void 0 ? void 0 : _a.text) || undefined, popOutOfOverflowHiddenParent: ((_b = action.infoTooltip) === null || _b === void 0 ? void 0 : _b.popOutOfOverflowHiddenParent) || false, position: ((_c = action.infoTooltip) === null || _c === void 0 ? void 0 : _c.position) || "left", invert: invert }, optionContent)) : (optionContent)));
             }))));
     };
     return (react_1.default.createElement(styled_1.StyledActionMenu, { ref: actionMenuRef },

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

@@ -21,5 +21,6 @@ export declare const StyledActionMenuOpsWrapper: import("styled-components").Sty
 }, never>;
 export declare const StyledOption: import("styled-components").StyledComponent<"button", any, {
     invert?: boolean;
+    disabled?: boolean;
 }, never>;
 export {};

package/dist/components/ActionMenu/styled.js

@@ -94,8 +94,11 @@ exports.StyledActionMenuOpsWrapper = styled_components_1.default.div(templateObj
     var invert = _a.invert;
     return (invert ? greyColor80 : white);
 });
-exports.StyledOption = styled_components_1.default.button(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n  white-space: nowrap;\n  border: none;\n  cursor: pointer;\n  width: 100%;\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  text-align: left;\n  padding: 0.25rem 1.2rem;\n  background-color: transparent;\n  color: ", ";\n  ", ";\n  ", "\n"], ["\n  white-space: nowrap;\n  border: none;\n  cursor: pointer;\n  width: 100%;\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  text-align: left;\n  padding: 0.25rem 1.2rem;\n  background-color: transparent;\n  color: ", ";\n  ", ";\n  ", "\n"])), function (_a) {
+exports.StyledOption = styled_components_1.default.button(templateObject_24 || (templateObject_24 = __makeTemplateObject(["\n  white-space: nowrap;\n  border: none;\n  \n  width: 100%;\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  text-align: left;\n  padding: 0.25rem 1.2rem;\n  background-color: transparent; \n  color: ", ";\n  ", ";\n\n  ", "\n\n"], ["\n  white-space: nowrap;\n  border: none;\n  \n  width: 100%;\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  text-align: left;\n  padding: 0.25rem 1.2rem;\n  background-color: transparent; \n  color: ", ";\n  ", ";\n\n  ", "\n\n"])), function (_a) {
     var invert = _a.invert;
     return (invert ? white : greyColor100);
-}, (0, mixins_1.transition)("background-color"), globalVariables_1.globalHoverOnWhiteBG);
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22;
+}, (0, mixins_1.transition)("background-color"), function (_a) {
+    var disabled = _a.disabled, invert = _a.invert;
+    return disabled ? (0, styled_components_1.css)(templateObject_22 || (templateObject_22 = __makeTemplateObject([" \n          pointer-events: none;\n          color: ", "\n          "], [" \n          pointer-events: none;\n          color: ", "\n          "])), themes_1.colors.greyColor40) : (0, styled_components_1.css)(templateObject_23 || (templateObject_23 = __makeTemplateObject([" \n          cursor: pointer;\n          ", ""], [" \n          cursor: pointer;\n          ", ""])), globalVariables_1.globalHoverOnWhiteBG);
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24;

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

@@ -1,5 +1,5 @@
 export default GroupQuestionsInputSingle;
-declare function GroupQuestionsInputSingle({ options, subQuestionLabels, onChange, value, readOnly, id, questionColWidth, radioColsWidth, variant: _variant }: {
+declare function GroupQuestionsInputSingle({ options, subQuestionLabels, onChange, value, readOnly, id, questionColWidth, radioColsWidth, variant: _variant, popOutOfOverflowHiddenParent, }: {
     options: any;
     subQuestionLabels: any;
     onChange: any;
@@ -9,5 +9,6 @@ declare function GroupQuestionsInputSingle({ options, subQuestionLabels, onChang
     questionColWidth?: number;
     radioColsWidth?: number;
     variant?: string;
+    popOutOfOverflowHiddenParent?: boolean;
 }, ...args: any[]): React.JSX.Element;
 import React from "react";

package/dist/components/GroupQuestionsInputSingle/index.js

@@ -46,7 +46,7 @@ var mixins_1 = require("../../themes/mixins");
 var DropdownSingle_1 = require("../Dropdowns/DropdownSingle");
 var greyColor10 = themes_1.colors.greyColor10;
 function GroupQuestionsInputSingle(_a) {
-    var options = _a.options, subQuestionLabels = _a.subQuestionLabels, onChange = _a.onChange, value = _a.value, readOnly = _a.readOnly, id = _a.id, _b = _a.questionColWidth, questionColWidth = _b === void 0 ? 200 : _b, _c = _a.radioColsWidth, radioColsWidth = _c === void 0 ? 120 : _c, _d = _a.variant, _variant = _d === void 0 ? 'radio' : _d;
+    var options = _a.options, subQuestionLabels = _a.subQuestionLabels, onChange = _a.onChange, value = _a.value, readOnly = _a.readOnly, id = _a.id, _b = _a.questionColWidth, questionColWidth = _b === void 0 ? 200 : _b, _c = _a.radioColsWidth, radioColsWidth = _c === void 0 ? 120 : _c, _d = _a.variant, _variant = _d === void 0 ? 'radio' : _d, _e = _a.popOutOfOverflowHiddenParent, popOutOfOverflowHiddenParent = _e === void 0 ? false : _e;
     var screenWidth = (0, _EXPORTS_1.useScreenWidth)();
     var variant = (screenWidth < (0, mixins_1.getBreakPoint)("sm") || _variant === 'dropdown')
         ? 'dropdown'
@@ -93,7 +93,7 @@ function GroupQuestionsInputSingle(_a) {
                                 } }))));
                 }))); })))) : (react_1.default.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '2rem' } }, subQuestionLabels.map(function (subQuestion) { return (react_1.default.createElement("div", null,
             react_1.default.createElement(Typo_1.SANS_2, { semibold: true, style: { paddingBottom: "1rem" } }, subQuestion.display),
-            react_1.default.createElement(DropdownSingle_1.DropdownSingle, { options: options, value: value && value[subQuestion.value], onChange: function (k, v) {
+            react_1.default.createElement(DropdownSingle_1.DropdownSingle, { options: options, popOutOfOverflowHiddenParent: popOutOfOverflowHiddenParent, value: value && value[subQuestion.value], onChange: function (k, v) {
                     handleChange(subQuestion.value, v);
                 } }))); }))))));
 }

package/dist/components/Tooltip/styled.js

@@ -19,7 +19,7 @@ var clipPaths = {
     right: '100% 0%, 50% 47%, 50% 52%, 100% 100%',
     left: '0% 0%, 50% 47%, 50% 52%, 0% 100%',
 };
-exports.StyledWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  width: fit-content;\n  text-align: left;\n  cursor: pointer;\n  width: 100%;\n"], ["\n  position: relative;\n  width: fit-content;\n  text-align: left;\n  cursor: pointer;\n  width: 100%;\n"])));
+exports.StyledWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  width: fit-content;\n  text-align: left;\n  cursor: pointer;\n  width: inherit;\n"], ["\n  position: relative;\n  width: fit-content;\n  text-align: left;\n  cursor: pointer;\n  width: inherit;\n"])));
 exports.StyledTooltipBox = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: ", ";\n  z-index: ", ";\n  ", "\n\n  padding: 1rem;\n  background-color: ", ";\n  color: ", ";\n  border: 1px solid ", ";\n  border-radius: 5px;\n  z-index: 50000000;\n  ", "\n  width: max-content;\n  max-width: 20rem;\n  word-wrap: break-word;\n"], ["\n  display: ", ";\n  z-index: ", ";\n  ", "\n\n  padding: 1rem;\n  background-color: ", ";\n  color: ", ";\n  border: 1px solid ", ";\n  border-radius: 5px;\n  z-index: 50000000;\n  ", "\n  width: max-content;\n  max-width: 20rem;\n  word-wrap: break-word;\n"])), function (props) { return (props.show ? "block" : "none"); }, function (props) { return (props.show ? 5000000 : -5); }, (0, mixins_1.transition)("opacity 0.1s"), function (props) { return (props.invert ? greyColor10 : greyColor100); }, function (props) { return (props.invert ? greyColor100 : white); }, greyColor15, function (_a) {
     var position = _a.position, fixPos = _a.fixPos;
     return (0, util_1.positionTooltip)({ position: position, fixPos: fixPos });

package/dist/globalStyles/globalVariables.js

@@ -31,6 +31,6 @@ exports.globalLightboxStyle = (0, styled_components_1.css)(templateObject_4 || (
 }, mixins_1.boxShadow1);
 exports.globalHoverOnWhiteBG = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  ", ";\n  &:hover {\n    background-color: ", ";\n  }\n"], ["\n  ", ";\n  &:hover {\n    background-color: ", ";\n  }\n"])), (0, mixins_1.transition)('background-color'), function (_a) {
     var invert = _a.invert;
-    return invert ? themes_1.colors.greyColor80 : themes_1.colors.greyColor5;
+    return invert ? themes_1.colors.greyColor70 : themes_1.colors.greyColor5;
 });
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/dist/stories/ActionMenu.stories.js

@@ -120,15 +120,16 @@ exports.default = {
 var ActionMenu = function (args) {
     args.actions = [
         __assign({ display: args.action1 }, (args.optionIcon1 ? { icon: args.optionIcon1, infoTooltip: args.tooltip && { text: "Tooltip Text" } } : {})),
-        __assign({ display: args.action2 }, (args.optionIcon2 ? { icon: args.optionIcon2, infoTooltip: args.tooltip && { text: "Tooltip Text" } } : {})),
+        __assign({ display: args.action2 }, (args.optionIcon2 ? { icon: args.optionIcon2, disabled: true, infoTooltip: args.tooltip && { text: "Tooltip Text" } } : {})),
         __assign({ display: args.action3 }, (args.optionIcon3 ? { icon: args.optionIcon3, infoTooltip: args.tooltip && { text: "Tooltip Text" } } : {})),
     ];
     args.M = args.buttonSize === 'M';
+    console.log({ nfaknjfasfs: args.invert });
     return (react_1.default.createElement("div", { style: args.popOutOfOverflowHiddenParent
             ? { border: '2px solid lightgrey', height: '90vh', overflow: 'scroll' }
             : {} },
         react_1.default.createElement("div", { style: { height: '1000px' } },
-            react_1.default.createElement("div", { style: __assign({ padding: '4rem 40rem', background: args.invert ? themes_1.colors.greyColor100 : themes_1.colors.white }, (args.popOutOfOverflowHiddenParent
+            react_1.default.createElement("div", { style: __assign({ padding: '10rem 40rem', background: args.invert ? themes_1.colors.greyColor100 : themes_1.colors.white }, (args.popOutOfOverflowHiddenParent
                     ? {
                         background: args.invert ? themes_1.colors.greyColor100 : themes_1.colors.greyColor5,
                         height: '50px',
@@ -136,6 +137,6 @@ var ActionMenu = function (args) {
                         overflow: "hidden"
                     }
                     : {})) },
-                react_1.default.createElement(ActionMenu_1.ActionMenu, { actions: args.actions })))));
+                react_1.default.createElement(ActionMenu_1.ActionMenu, __assign({ actions: args.actions }, args))))));
 };
 exports.ActionMenu = ActionMenu;

package/dist/stories/GroupQuestionsInputSingle.stories.d.ts

@@ -1,12 +1,21 @@
 declare namespace _default {
     let title: string;
     namespace argTypes {
-        namespace readOnly {
+        namespace variant {
             let name: string;
             let type: string;
+            let options: string[];
+        }
+        namespace readOnly {
+            let name_1: string;
+            export { name_1 as name };
+            let type_1: string;
+            export { type_1 as type };
         }
     }
-    let args: {};
+    namespace args {
+        let popOutOfOverflowHiddenParent: boolean;
+    }
 }
 export default _default;
 export function _GroupQuestionsInputSingle(args: any): import("react").JSX.Element;

package/dist/stories/GroupQuestionsInputSingle.stories.js

@@ -10,29 +10,39 @@ var themes_1 = require("../themes");
 exports.default = {
     title: "Components/GroupQuestionsInputSingle",
     argTypes: {
+        variant: {
+            name: "Variant",
+            type: "select",
+            options: ["radio", 'dropdown']
+        },
         readOnly: {
             name: "Read Only",
             type: "boolean"
         },
     },
-    args: {}
+    args: {
+        popOutOfOverflowHiddenParent: false
+    }
 };
 var _GroupQuestionsInputSingle = function (args) {
     var _a = (0, react_1.useState)({}), value = _a[0], setValue = _a[1];
     console.log({ valueParent: value });
     return (React.createElement("div", { style: { background: args.invert ? themes_1.colors.greyColor100 : '' } },
-        React.createElement(GroupQuestionsInputSingle_1.default, { label: "When shopping online, how often do you do each of the following?", subQuestionLabels: [
-                { display: 'Visit multiple websites Visit multiple websites', value: 'visit_multiple_websites' },
-                { display: 'Read customer reviews Read customer reviews ', value: 'read_customer_reviews' },
-                { display: 'Watch a video demonstration Watch a video demonstration', value: 'watch_video_demo' },
-                { display: 'Check the delivery date Check the delivery date', value: 'check_delivery_date' },
-                { display: 'Check for payment options Check for payment options', value: 'check_payment_options' },
-            ], options: [
-                { display: 'Never Never Never Never ', value: 'never' },
-                { display: 'Rarely Rarely Rarely Rarely ', value: 'rarely' },
-                { display: 'Sometimes Sometimes Sometimes Sometimes ', value: 'sometimes' },
-                { display: 'Often Often Often Often ', value: 'often' },
-                { display: 'Always Always Always Always ', value: 'always' },
-            ], sublabel: "Select all that apply", value: value, onChange: function (id, value) { return setValue(value); }, readOnly: args.readOnly })));
+        React.createElement("div", { style: args.popOutOfOverflowHiddenParent
+                ? { border: '2px solid lightgrey', height: '100%', width: '100%', overflow: 'scroll' }
+                : {} },
+            React.createElement(GroupQuestionsInputSingle_1.default, { label: "When shopping online, how often do you do each of the following?", variant: args.variant, popOutOfOverflowHiddenParent: args.popOutOfOverflowHiddenParent, subQuestionLabels: [
+                    { display: 'Visit multiple websites Visit multiple websites', value: 'visit_multiple_websites' },
+                    { display: 'Read customer reviews Read customer reviews ', value: 'read_customer_reviews' },
+                    { display: 'Watch a video demonstration Watch a video demonstration', value: 'watch_video_demo' },
+                    { display: 'Check the delivery date Check the delivery date', value: 'check_delivery_date' },
+                    { display: 'Check for payment options Check for payment options', value: 'check_payment_options' },
+                ], options: [
+                    { display: 'Never Never Never Never ', value: 'never' },
+                    { display: 'Rarely Rarely Rarely Rarely ', value: 'rarely' },
+                    { display: 'Sometimes Sometimes Sometimes Sometimes ', value: 'sometimes' },
+                    { display: 'Often Often Often Often ', value: 'often' },
+                    { display: 'Always Always Always Always ', value: 'always' },
+                ], sublabel: "Select all that apply", value: value, onChange: function (id, value) { return setValue(value); }, readOnly: args.readOnly }))));
 };
 exports._GroupQuestionsInputSingle = _GroupQuestionsInputSingle;

package/package.json

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