oolib 2.131.0 → 2.131.1

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/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.131.0",
+  "version": "2.131.1",
   "description": " OKE Component Library",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",