oolib 2.21.3 → 2.22.0

package/dist/components/ActionMenu/index.js

@@ -61,6 +61,10 @@ var ActionMenu = function (_a) {
     (0, react_1.useEffect)(function () {
         setShowActionsInParent && setShowActionsInParent(showActions);
     }, [showActions]);
+    //on unmount, setShowActionsInParent to false, obviously.
+    (0, react_1.useEffect)(function () {
+        return function () { return setShowActionsInParent(false); };
+    }, []);
     return (react_1.default.createElement(styled_1.StyledActionMenu, { ref: actionMenuRef },
         react_1.default.createElement(ButtonComp, { icon: icon, iconSize: iconSize, invert: invert, stopPropagation: true, onClick: function (e) {
                 setShowActions(!showActions);

package/dist/components/Buttons/index.js

@@ -42,9 +42,9 @@ var lodash_1 = require("lodash");
 var Typo_1 = require("../Typo");
 var icons_1 = require("../../icons");
 var DisplayIcon = function (_a) {
-    var icon = _a.icon, size = _a.size;
+    var icon = _a.icon, size = _a.size, color = _a.color;
     var IconComp = icons_1.icons[icon];
-    return react_1.default.createElement(react_1.default.Fragment, null, IconComp && react_1.default.createElement(IconComp, { size: size, weight: "bold" }));
+    return react_1.default.createElement(react_1.default.Fragment, null, IconComp && react_1.default.createElement(IconComp, { size: size, color: color, weight: "bold" }));
 };
 var ButtonStyledWrapper = function (_a) {
     var props = _a.props, variant = _a.variant;

package/dist/components/LoadersAndProgress/{CircleLoader → LoaderCircle}/index.d.ts

@@ -1,4 +1,4 @@
-export function CircleLoader({ isBlock, blockHeight, L, S, M, ...props }: {
+export function LoaderCircle({ isBlock, blockHeight, L, S, M, ...props }: {
     [x: string]: any;
     isBlock?: boolean;
     blockHeight?: string;

package/dist/components/LoadersAndProgress/{CircleLoader → LoaderCircle}/index.js

@@ -25,18 +25,18 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CircleLoader = void 0;
+exports.LoaderCircle = void 0;
 var react_1 = __importDefault(require("react"));
 var styled_components_1 = require("styled-components");
 var utils_1 = require("../utils");
 var styled_1 = require("../styled");
-function CircleLoader(_a) {
+function LoaderCircle(_a) {
     var _b = _a.isBlock, isBlock = _b === void 0 ? true : _b, _c = _a.blockHeight, blockHeight = _c === void 0 ? '100%' : _c, L = _a.L, S = _a.S, M = _a.M, props = __rest(_a, ["isBlock", "blockHeight", "L", "S", "M"]);
     var size = L ? 'L' : S ? 'S' : 'M'; //defaults to M if no L or S, so techinically, the M prop isnt really required..
     var renderLoaderDiv = function () { return react_1.default.createElement(LoaderDiv, __assign({}, __assign(__assign({}, props), { isBlock: isBlock, size: size }))); };
     return !isBlock ? (renderLoaderDiv()) : (react_1.default.createElement(styled_1.StyledLoaderOverlay, { blockHeight: blockHeight }, renderLoaderDiv()));
 }
-exports.CircleLoader = CircleLoader;
+exports.LoaderCircle = LoaderCircle;
 var LoaderDiv = function (_a) {
     var size = _a.size, children = _a.children, _text = _a.text, debug = _a.debug, invert = _a.invert, isBlock = _a.isBlock;
     var theme = (0, styled_components_1.useTheme)();

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

@@ -1,2 +1,2 @@
 export { ProgressBar } from "./ProgressBar";
-export { CircleLoader } from "./CircleLoader";
+export { LoaderCircle } from "./LoaderCircle";

package/dist/components/LoadersAndProgress/index.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CircleLoader = exports.ProgressBar = void 0;
+exports.LoaderCircle = exports.ProgressBar = void 0;
 var ProgressBar_1 = require("./ProgressBar");
 Object.defineProperty(exports, "ProgressBar", { enumerable: true, get: function () { return ProgressBar_1.ProgressBar; } });
-var CircleLoader_1 = require("./CircleLoader");
-Object.defineProperty(exports, "CircleLoader", { enumerable: true, get: function () { return CircleLoader_1.CircleLoader; } });
+var LoaderCircle_1 = require("./LoaderCircle");
+Object.defineProperty(exports, "LoaderCircle", { enumerable: true, get: function () { return LoaderCircle_1.LoaderCircle; } });

package/dist/components/RadioAndCheckbox/comps/CheckboxList/comps/CheckboxInput/index.d.ts

@@ -1,7 +1,6 @@
-export function CheckboxInput({ option, id, onChange, S, value, invert, disabled, rightWrongResult, }: {
+export function CheckboxInput({ option, onClick, S, value, invert, disabled, rightWrongResult, }: {
     option: any;
-    id: any;
-    onChange: any;
+    onClick: any;
     S: any;
     value: any;
     invert: any;

package/dist/components/RadioAndCheckbox/comps/CheckboxList/comps/CheckboxInput/index.js

@@ -25,28 +25,21 @@ var styled_2 = require("./styled");
 var Check = icons_1.icons.Check, CheckSquare = icons_1.icons.CheckSquare, XSquare = icons_1.icons.XSquare;
 var white = themes_1.colors.white, green = themes_1.colors.green, red = themes_1.colors.red, greyColor40 = themes_1.colors.greyColor40, greyColor100 = themes_1.colors.greyColor100;
 var CheckboxInput = function (_a) {
-    var option = _a.option, id = _a.id, onChange = _a.onChange, S = _a.S, value = _a.value, invert = _a.invert, disabled = _a.disabled, rightWrongResult = _a.rightWrongResult;
-    var isSelected = !!value.find(function (selOp) { return selOp.value === option.value; });
+    var option = _a.option, onClick = _a.onClick, S = _a.S, value = _a.value, invert = _a.invert, disabled = _a.disabled, rightWrongResult = _a.rightWrongResult;
+    var isSelected = value.find(function (selOp) { return selOp.value === option.value; });
     var markingCommand = (0, utils_1.getMarkingCommand)({ option: option, isSelected: isSelected }); // returns undefined if option isn't labeled as 'correct' nor selected
-    var handleCheckboxClick = function () {
-        if (!rightWrongResult) { // no toggling if users are being informed of thier choices result
-            onChange(id, isSelected ?
-                value.filter(function (selOp) { return selOp.value !== option.value; })
-                : value.concat(option));
-        }
-    };
     var SuitableTypo = S ? Typo_1.SANS_2 : Typo_1.SANS_3;
-    return (react_1.default.createElement(styled_1.StyledOption, __assign({}, { rightWrongResult: rightWrongResult, isSelected: isSelected, disabled: disabled, invert: invert }, { onClick: handleCheckboxClick }),
+    return (react_1.default.createElement(styled_1.StyledOption, __assign({}, { rightWrongResult: rightWrongResult, isSelected: isSelected, disabled: disabled, invert: invert, S: S }, { onClick: function () { return !rightWrongResult && onClick(option, isSelected); } }),
         !rightWrongResult || markingCommand === undefined ?
-            react_1.default.createElement(styled_2.StyledCheckbox, __assign({ className: "btn" }, { isSelected: isSelected, disabled: disabled, invert: invert }), isSelected && react_1.default.createElement(Check, { weight: "bold", color: invert ? greyColor100 : white, size: 16 }))
+            react_1.default.createElement(styled_2.StyledCheckbox, __assign({ className: "btn" }, { isSelected: isSelected, disabled: disabled, invert: invert, S: S }), isSelected && react_1.default.createElement(Check, { weight: "bold", color: invert ? greyColor100 : white, size: 16 }))
             :
                 ["markCorrect", "revealCorrect"].includes(markingCommand) ?
-                    react_1.default.createElement(CheckSquare, { size: 26, color: green, style: {
+                    react_1.default.createElement(CheckSquare, { size: S ? 22.5 : 26, color: green, style: {
                             margin: '-7px -2.8px -7px -3.2px',
                             flexShrink: 0
                         } })
                     : // then wrong
-                        react_1.default.createElement(XSquare, { size: 26, color: red, style: {
+                        react_1.default.createElement(XSquare, { size: S ? 21.5 : 26, color: red, style: {
                                 margin: '-7px -2.8px -7px -3.2px',
                                 flexShrink: 0
                             } }),

package/dist/components/RadioAndCheckbox/comps/CheckboxList/comps/CheckboxInput/styled.js

@@ -33,7 +33,13 @@ var utilsOolib_1 = require("../../../../../../utilsOolib");
 var themes_1 = require("../../../../../../themes");
 var mixins_1 = require("../../../../../../themes/mixins");
 var none = themes_1.colors.none, greyColor40 = themes_1.colors.greyColor40;
-exports.StyledCheckbox = styled_components_1.default.button(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  width: 2rem;\n  height: 2rem;\n  border: none;\n  box-shadow: inset 0 0 0 2px ", ";\n  border-radius: 2px;\n  background-color: ", ";\n  cursor: inherit;\n\n  ", "\n\n\n  ", "\n\n"], ["\n  width: 2rem;\n  height: 2rem;\n  border: none;\n  box-shadow: inset 0 0 0 2px ", ";\n  border-radius: 2px;\n  background-color: ", ";\n  cursor: inherit;\n\n  ", "\n\n\n  ", "\n\n"])), function (_a) {
+exports.StyledCheckbox = styled_components_1.default.button(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  \n  width: ", ";\n  height: ", ";\n  border: none;\n  box-shadow: inset 0 0 0 2px ", ";\n  border-radius: 2px;\n  background-color: ", ";\n  cursor: inherit;\n\n  ", "\n\n\n  ", "\n\n"], ["\n  \n  width: ", ";\n  height: ", ";\n  border: none;\n  box-shadow: inset 0 0 0 2px ", ";\n  border-radius: 2px;\n  background-color: ", ";\n  cursor: inherit;\n\n  ", "\n\n\n  ", "\n\n"])), function (_a) {
+    var S = _a.S;
+    return S ? '1.7rem' : '2rem';
+}, function (_a) {
+    var S = _a.S;
+    return S ? '1.7rem' : '2rem';
+}, function (_a) {
     var colors = _a.theme.colors, disabled = _a.disabled, invert = _a.invert;
     return disabled ?
         greyColor40 : invert ? (0, utilsOolib_1.getPrimaryColor40)(colors) : (0, utilsOolib_1.getPrimaryColor100)(colors);

package/dist/components/RadioAndCheckbox/comps/CheckboxList/index.d.ts

@@ -1,10 +1,11 @@
-export function CheckboxList({ id, injectOtherOption, value, onChange, commonIsCorrectDesc, options, optionStyle, rightWrongResult, listType, invert, style, disabled, className, S, readOnly }: {
+export function CheckboxList({ id, injectOtherOption, value: valueProp, onChange, commonIsCorrectDesc, options, saveValueAsString, optionStyle, rightWrongResult, listType, invert, style, disabled, className, S, readOnly }: {
     id: any;
     injectOtherOption?: boolean;
     value?: any[];
     onChange: any;
     commonIsCorrectDesc: any;
     options: any;
+    saveValueAsString: any;
     optionStyle: any;
     rightWrongResult: any;
     listType: any;

package/dist/components/RadioAndCheckbox/comps/CheckboxList/index.js

@@ -17,46 +17,57 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CheckboxList = void 0;
 var react_1 = __importDefault(require("react"));
 var BlockLabel_1 = require("../../../BlockLabel");
-var _EXPORTS_1 = require("../../../../utils/_EXPORTS");
+var Tags_1 = require("../../../Tags");
 var TextInputs_1 = require("../../../TextInputs");
-//import { SANS_3 } from "../../../Typo";
+var _EXPORTS_1 = require("../../../../utils/_EXPORTS");
+var utils_1 = require("../../utils");
 var styled_1 = require("../../styled");
-var styled_2 = require("./styled");
 var comps_1 = require("./comps");
-var utils_1 = require("../../utils");
-var Tags_1 = require("../../../Tags");
+var styled_2 = require("./styled");
+var convToString = function (value) { return value.map(function (v) { var _a; return (_a = v.display_desc) !== null && _a !== void 0 ? _a : v.value; }); };
 function CheckboxList(_a) {
-    var id = _a.id, _b = _a.injectOtherOption, injectOtherOption = _b === void 0 ? false : _b, _c = _a.value, value = _c === void 0 ? [] : _c, onChange = _a.onChange, commonIsCorrectDesc = _a.commonIsCorrectDesc, options = _a.options, optionStyle = _a.optionStyle, rightWrongResult = _a.rightWrongResult, listType = _a.listType, invert = _a.invert, style = _a.style, //where to attatch this
+    var id = _a.id, _b = _a.injectOtherOption, injectOtherOption = _b === void 0 ? false : _b, _c = _a.value, valueProp = _c === void 0 ? [] : _c, onChange = _a.onChange, commonIsCorrectDesc = _a.commonIsCorrectDesc, options = _a.options, saveValueAsString = _a.saveValueAsString, optionStyle = _a.optionStyle, rightWrongResult = _a.rightWrongResult, listType = _a.listType, invert = _a.invert, style = _a.style, //where to attatch this
     disabled = _a.disabled, className = _a.className, S = _a.S, readOnly = _a.readOnly;
     var props = arguments[0];
-    var displayedOptions = options;
-    if (options) {
-        if (injectOtherOption && !options.some(function (op) { return op.value === "other"; })) {
-            displayedOptions = options.concat({ value: "other", display: "Other" });
-        }
-    }
-    var otherOpInSelectees = value.find(function (selectedOp) { return selectedOp.value === 'other'; });
+    var _d = (0, utils_1.genDisplayedOptions)({ injectOtherOption: injectOtherOption, options: options, valueProp: valueProp, saveValueAsString: saveValueAsString }), typicalOptions = _d.typicalOptions, otherOption = _d.otherOption;
+    var value = saveValueAsString ?
+        typicalOptions.concat(otherOption).filter(function (op) { var _a; return valueProp.includes((_a = op.display_desc) !== null && _a !== void 0 ? _a : op.value); })
+        : valueProp;
     var handleTextInputChange = function (text) {
-        var newValue = value.map(function (selectedOp) { return (selectedOp === otherOpInSelectees ? (0, utils_1.genOtherValueObject)(text) : selectedOp); });
+        var newValue = value.map(function (selectedOp) { return (selectedOp.value === 'other' ? (0, utils_1.genOtherValueObject)(text) : selectedOp); });
+        if (saveValueAsString)
+            newValue = convToString(newValue);
         onChange && onChange(id, newValue);
     };
+    var handleCheckboxClick = function (option, isSelected) {
+        var newValue = isSelected
+            ? value.filter(function (selOp) { return selOp.value !== option.value; })
+            : value.concat(option);
+        if (saveValueAsString)
+            newValue = convToString(newValue);
+        onChange(id, newValue);
+    };
+    var otherOpInSelectees = value.find(function (selectedOp) { return selectedOp.value === 'other'; });
+    var InputCommonProps = {
+        invert: invert,
+        value: value,
+        S: S,
+        disabled: disabled,
+        rightWrongResult: rightWrongResult,
+        onClick: handleCheckboxClick,
+    };
     return (react_1.default.createElement("div", { className: className, id: id },
         react_1.default.createElement(BlockLabel_1.BlockLabel, __assign({}, (0, _EXPORTS_1.getBlockLabelProps)(props))),
-        readOnly ? (react_1.default.createElement(styled_2.StyledDisplayTagsContainer, null, value === null || value === void 0 ? void 0 : value.map(function (selOp) { return react_1.default.createElement(Tags_1.TagDisplay, { key: selOp.value, invert: invert, display: selOp.display_desc || selOp.display }); }))) : (react_1.default.createElement(styled_1.StyledOptionsContainer, { listType: listType }, displayedOptions === null || displayedOptions === void 0 ? void 0 :
-            displayedOptions.map(function (option) { return react_1.default.createElement(comps_1.CheckboxInput, __assign({}, {
-                option: option,
-                id: id,
-                invert: invert,
-                onChange: onChange,
-                value: value,
-                S: S,
-                invert: invert,
-                disabled: disabled,
-                rightWrongResult: rightWrongResult,
-                key: option.value
-            })); }),
-            injectOtherOption && otherOpInSelectees && (react_1.default.createElement(styled_1.StyledOtherTextInputWrapper, { listType: listType },
-                react_1.default.createElement(TextInputs_1.TextInput, __assign({ placeholder: "Please Specify Here", value: otherOpInSelectees.display_desc || '', onChange: function (k, v) { return handleTextInputChange(v); } }, { disabled: disabled, invert: invert, S: S })))),
+        readOnly ? (react_1.default.createElement(styled_2.StyledDisplayTagsContainer, null, value === null || value === void 0 ? void 0 : value.map(function (selOp) { return react_1.default.createElement(Tags_1.TagDisplay, { key: selOp.value, invert: invert, display: selOp.display_desc || selOp.display }); }))) : (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement(styled_1.StyledOptionsContainer, { listType: listType }, typicalOptions === null || typicalOptions === void 0 ? void 0 :
+                typicalOptions.map(function (option) {
+                    return react_1.default.createElement(comps_1.CheckboxInput, __assign({}, __assign(__assign({}, InputCommonProps), { option: option, key: option.value })));
+                }),
+                injectOtherOption && otherOption && ( //so other box and its textInput act as one entity in the flexbox
+                react_1.default.createElement(styled_1.StyledOtherOptionContainer, { listType: listType },
+                    react_1.default.createElement(comps_1.CheckboxInput, __assign({}, __assign(__assign({}, InputCommonProps), { option: otherOption }))),
+                    otherOpInSelectees && (react_1.default.createElement(styled_1.StyledOtherTextInputWrapper, __assign({}, { listType: listType, rightWrongResult: rightWrongResult }),
+                        react_1.default.createElement(TextInputs_1.TextInput, __assign({ placeholder: "Please Specify Here", value: otherOpInSelectees.display_desc, onChange: function (k, v) { return handleTextInputChange(v); } }, { disabled: disabled, invert: invert, S: S }))))))),
             rightWrongResult && commonIsCorrectDesc &&
                 react_1.default.createElement(styled_1.StyledCorrectMessage, null, commonIsCorrectDesc)))));
 }

package/dist/components/RadioAndCheckbox/comps/RadioList/comps/RadioInput/index.d.ts

@@ -1,7 +1,6 @@
-export function RadioInput({ id, option, onChange, disabled, invert, value, S, rightWrongResult, }: {
-    id: any;
+export function RadioInput({ option, onClick, disabled, invert, value, S, rightWrongResult, }: {
     option: any;
-    onChange: any;
+    onClick: any;
     disabled: any;
     invert: any;
     value: any;

package/dist/components/RadioAndCheckbox/comps/RadioList/comps/RadioInput/index.js

@@ -25,21 +25,21 @@ var styled_2 = require("./styled");
 var green = themes_1.colors.green, red = themes_1.colors.red, greyColor40 = themes_1.colors.greyColor40;
 var XCircle = icons_1.icons.XCircle, CheckCircle = icons_1.icons.CheckCircle;
 var RadioInput = function (_a) {
-    var id = _a.id, option = _a.option, onChange = _a.onChange, disabled = _a.disabled, invert = _a.invert, value = _a.value, S = _a.S, rightWrongResult = _a.rightWrongResult;
+    var option = _a.option, onClick = _a.onClick, disabled = _a.disabled, invert = _a.invert, value = _a.value, S = _a.S, rightWrongResult = _a.rightWrongResult;
     var isSelected = option.value === (value === null || value === void 0 ? void 0 : value.value);
     var markingCommand = (0, utils_1.getMarkingCommand)({ option: option, isSelected: isSelected }); // returns undefined if option isn't labeled as 'correct' nor selected
     var SuitableTypo = S ? Typo_1.SANS_2 : Typo_1.SANS_3;
-    return (react_1.default.createElement(styled_1.StyledOption, __assign({}, { disabled: disabled, rightWrongResult: rightWrongResult, isSelected: isSelected, invert: invert }, { onClick: function () { return !rightWrongResult && onChange(id, option); } }),
+    return (react_1.default.createElement(styled_1.StyledOption, __assign({}, { disabled: disabled, rightWrongResult: rightWrongResult, isSelected: isSelected, invert: invert, S: S }, { onClick: function () { return !rightWrongResult && onClick(option); } }),
         !rightWrongResult || markingCommand === undefined ?
-            react_1.default.createElement(styled_2.StyledRadioInput, __assign({ className: 'btn' }, { isSelected: isSelected, disabled: disabled, invert: invert }), isSelected && react_1.default.createElement(styled_2.StyledRadioInputFill, { invert: invert }))
+            react_1.default.createElement(styled_2.StyledRadioInput, __assign({ className: 'btn' }, { isSelected: isSelected, disabled: disabled, invert: invert, S: S }), isSelected && react_1.default.createElement(styled_2.StyledRadioInputFill, { invert: invert, S: S }))
             :
                 ["markCorrect", "revealCorrect"].includes(markingCommand) ?
-                    react_1.default.createElement(CheckCircle, { size: 24.5, color: green, style: {
+                    react_1.default.createElement(CheckCircle, { size: S ? 21 : 24.5, color: green, style: {
                             margin: '-5px -1.5px -5px -3px',
                             flexShrink: 0
                         } })
                     : // then wrong
-                        react_1.default.createElement(XCircle, { size: 24.5, color: red, style: {
+                        react_1.default.createElement(XCircle, { size: S ? 21 : 24.5, color: red, style: {
                                 margin: '-5px -1.5px -5px -3px',
                                 flexShrink: 0
                             } }),

package/dist/components/RadioAndCheckbox/comps/RadioList/comps/RadioInput/styled.js

@@ -33,7 +33,13 @@ var themes_1 = require("../../../../../../themes");
 var mixins_1 = require("../../../../../../themes/mixins");
 var utilsOolib_1 = require("../../../../../../utilsOolib");
 var none = themes_1.colors.none, white = themes_1.colors.white, greyColor40 = themes_1.colors.greyColor40, greyColor100 = themes_1.colors.greyColor100;
-exports.StyledRadioInput = styled_components_1.default.button(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  border-radius: 50%;\n  width: 2rem;\n  height: 2rem;\n  border: 2px solid ", ";\n  background-color: ", ";\n  flex: 0 0 auto;\n  cursor: inherit;\n  ", "\n\n  ", "\n\n"], ["\n  border-radius: 50%;\n  width: 2rem;\n  height: 2rem;\n  border: 2px solid ", ";\n  background-color: ", ";\n  flex: 0 0 auto;\n  cursor: inherit;\n  ", "\n\n  ", "\n\n"])), function (_a) {
+exports.StyledRadioInput = styled_components_1.default.button(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  border-radius: 50%;\n  width: ", ";\n  height: ", ";\n  border: 2px solid ", ";\n  background-color: ", ";\n  flex: 0 0 auto;\n  cursor: inherit;\n  ", "\n\n  ", "\n\n"], ["\n  border-radius: 50%;\n  width: ", ";\n  height: ", ";\n  border: 2px solid ", ";\n  background-color: ", ";\n  flex: 0 0 auto;\n  cursor: inherit;\n  ", "\n\n  ", "\n\n"])), function (_a) {
+    var S = _a.S;
+    return S ? '1.7rem' : '2rem';
+}, function (_a) {
+    var S = _a.S;
+    return S ? '1.7rem' : '2rem';
+}, function (_a) {
     var colors = _a.theme.colors, disabled = _a.disabled, invert = _a.invert;
     return disabled ? greyColor40 :
         invert ? (0, utilsOolib_1.getPrimaryColor40)(colors) : (0, utilsOolib_1.getPrimaryColor100)(colors);
@@ -45,7 +51,13 @@ exports.StyledRadioInput = styled_components_1.default.button(templateObject_2 |
             invert ? (0, utilsOolib_1.getPrimaryColor40)(colors) : (0, utilsOolib_1.getPrimaryColor100)(colors);
     });
 });
-exports.StyledRadioInputFill = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  height: 0.8rem;\n  width: 0.8rem;\n  border-radius: 50%;\n  background-color: ", ";\n"], ["\n  height: 0.8rem;\n  width: 0.8rem;\n  border-radius: 50%;\n  background-color: ", ";\n"])), function (_a) {
+exports.StyledRadioInputFill = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  width:", ";\n  height:", ";\n  border-radius: 50%;\n  background-color: ", ";\n"], ["\n  width:", ";\n  height:", ";\n  border-radius: 50%;\n  background-color: ", ";\n"])), function (_a) {
+    var S = _a.S;
+    return S ? '0.7rem' : '0.8rem';
+}, function (_a) {
+    var S = _a.S;
+    return S ? '0.7rem' : '0.8rem';
+}, function (_a) {
     var invert = _a.invert;
     return invert ? greyColor100 : white;
 });

package/dist/components/RadioAndCheckbox/comps/RadioList/index.d.ts

@@ -1,9 +1,11 @@
-export function RadioList({ id, injectOtherOption, value, onChange, options, rightWrongResult, listType, disabled, invert, style, className, readOnly, S }: {
+export function RadioList({ id, injectOtherOption, value: valueProp, onChange, saveValueAsString, options, commonIsCorrectDesc, rightWrongResult, listType, disabled, invert, style, className, readOnly, S }: {
     id: any;
     injectOtherOption?: boolean;
     value: any;
     onChange: any;
+    saveValueAsString: any;
     options: any;
+    commonIsCorrectDesc: any;
     rightWrongResult: any;
     listType: any;
     disabled: any;

package/dist/components/RadioAndCheckbox/comps/RadioList/index.js

@@ -24,38 +24,48 @@ var styled_1 = require("../../styled");
 var utils_1 = require("../../utils");
 var comps_1 = require("./comps");
 function RadioList(_a) {
-    var id = _a.id, _b = _a.injectOtherOption, injectOtherOption = _b === void 0 ? false : _b, value = _a.value, onChange = _a.onChange, options = _a.options, rightWrongResult = _a.rightWrongResult, listType = _a.listType, disabled = _a.disabled, invert = _a.invert, style = _a.style, className = _a.className, readOnly = _a.readOnly, S = _a.S;
+    var id = _a.id, _b = _a.injectOtherOption, injectOtherOption = _b === void 0 ? false : _b, valueProp = _a.value, onChange = _a.onChange, saveValueAsString = _a.saveValueAsString, options = _a.options, commonIsCorrectDesc = _a.commonIsCorrectDesc, rightWrongResult = _a.rightWrongResult, listType = _a.listType, disabled = _a.disabled, invert = _a.invert, style = _a.style, className = _a.className, readOnly = _a.readOnly, S = _a.S;
     var props = arguments[0];
-    var displayedOptions = options;
-    if (options) {
-        if (injectOtherOption && !options.some(function (op) { return op.value === "other"; })) {
-            displayedOptions = options.concat({ value: "other", display: "Other" });
-        }
-    }
-    var correctOp = options.find(function (op) { return op.isCorrect; });
+    var _c = (0, utils_1.genDisplayedOptions)({ injectOtherOption: injectOtherOption, options: options, valueProp: valueProp, saveValueAsString: saveValueAsString }), typicalOptions = _c.typicalOptions, otherOption = _c.otherOption;
+    var value = saveValueAsString ?
+        typicalOptions.concat(otherOption).find(function (op) { var _a; return ((_a = op.display_desc) !== null && _a !== void 0 ? _a : op.value) === valueProp; })
+        : valueProp;
+    var correctOp = options.find(function (op) { return op.isCorrect; }); //
+    var handleInputClick = function (option) {
+        var _a;
+        onChange(id, saveValueAsString ? ((_a = option.display_desc) !== null && _a !== void 0 ? _a : option.value) : option);
+    };
+    var handleTextInputChange = function (text) {
+        onChange(id, saveValueAsString ? text : (0, utils_1.genOtherValueObject)(text) //text === display_desc
+        );
+    };
+    var InputCommonProps = {
+        invert: invert,
+        value: value,
+        S: S,
+        disabled: disabled,
+        rightWrongResult: rightWrongResult,
+        onClick: handleInputClick,
+    };
     return (react_1.default.createElement("div", { className: className, id: id },
         react_1.default.createElement(BlockLabel_1.BlockLabel, __assign({}, (0, _EXPORTS_1.getBlockLabelProps)(props))),
         readOnly ? ((value === null || value === void 0 ? void 0 : value.display) && react_1.default.createElement(Tags_1.TagDisplay, { display: value.display_desc || value.display, invert: invert }) //prioritzing display_desc since display of 'other' option is === other
-        ) : (react_1.default.createElement(styled_1.StyledOptionsContainer, { listType: listType, style: style }, displayedOptions === null || displayedOptions === void 0 ? void 0 :
-            displayedOptions.map(function (option) { return react_1.default.createElement(comps_1.RadioInput, __assign({}, {
-                option: option,
-                id: id,
-                onChange: onChange,
-                value: value,
-                disabled: disabled,
-                invert: invert,
-                rightWrongResult: rightWrongResult,
-                S: S,
-                key: option.value
-            })); }),
-            injectOtherOption && (value === null || value === void 0 ? void 0 : value.value) === "other" && (react_1.default.createElement(styled_1.StyledOtherTextInputWrapper, { listType: listType },
-                react_1.default.createElement(TextInputs_1.TextInput, __assign({ placeholder: "Please Specify Here", value: value.display_desc || '', onChange: function (k, v) { return onChange(id, (0, utils_1.genOtherValueObject)(v)); } }, { disabled: disabled, invert: invert, S: S })))),
+        ) : (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement(styled_1.StyledOptionsContainer, { listType: listType, style: style }, typicalOptions === null || typicalOptions === void 0 ? void 0 :
+                typicalOptions.map(function (option) {
+                    return react_1.default.createElement(comps_1.RadioInput, __assign({}, __assign(__assign({}, InputCommonProps), { option: option, key: option.value })));
+                }),
+                injectOtherOption && otherOption && ( //so other box and its textInput act as one entity in the flexbox
+                react_1.default.createElement(styled_1.StyledOtherOptionContainer, { listType: listType },
+                    react_1.default.createElement(comps_1.RadioInput, __assign({}, __assign(__assign({}, InputCommonProps), { option: otherOption }))),
+                    (value === null || value === void 0 ? void 0 : value.value) === "other" && (react_1.default.createElement(styled_1.StyledOtherTextInputWrapper, __assign({}, { listType: listType, rightWrongResult: rightWrongResult }),
+                        react_1.default.createElement(TextInputs_1.TextInput, __assign({ placeholder: "Please Specify Here", value: value.display_desc, onChange: function (k, v) { return handleTextInputChange(v); } }, { disabled: disabled, invert: invert, S: S }))))))),
             /*
             the minute the results have come in, irrespective of user's answer
             being right or wrong, we always show an explanation
             against the right answer. provided that an explanation is provided.
             */
-            correctOp && rightWrongResult && correctOp.isCorrectDesc &&
-                react_1.default.createElement(styled_1.StyledCorrectMessage, null, correctOp.isCorrectDesc)))));
+            correctOp && rightWrongResult && commonIsCorrectDesc &&
+                react_1.default.createElement(styled_1.StyledCorrectMessage, null, commonIsCorrectDesc)))));
 }
 exports.RadioList = RadioList;

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

@@ -1,4 +1,5 @@
 export const StyledOptionsContainer: any;
 export const StyledOption: any;
+export const StyledOtherOptionContainer: any;
 export const StyledOtherTextInputWrapper: any;
 export const StyledCorrectMessage: any;

package/dist/components/RadioAndCheckbox/styled.js

@@ -27,7 +27,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.StyledCorrectMessage = exports.StyledOtherTextInputWrapper = exports.StyledOption = exports.StyledOptionsContainer = void 0;
+exports.StyledCorrectMessage = exports.StyledOtherTextInputWrapper = exports.StyledOtherOptionContainer = exports.StyledOption = exports.StyledOptionsContainer = void 0;
 var styled_components_1 = __importStar(require("styled-components"));
 var utilsOolib_1 = require("../../utilsOolib");
 var Typo_1 = require("../Typo");
@@ -39,7 +39,10 @@ exports.StyledOptionsContainer = styled_components_1.default.div(templateObject_
     return listType === 'vertical' ? (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      flex-direction: column;\n      gap: 1.5rem;\n      align-items: initial;\n    "], ["\n      flex-direction: column;\n      gap: 1.5rem;\n      align-items: initial;\n    "]))) :
         '';
 });
-exports.StyledOption = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: 1rem;\n  position: relative;\n  cursor: ", ";\n  \n\n  &:hover .btn {\n    ", "\n  }\n\n"], ["\n  display: flex;\n  align-items: center;\n  gap: 1rem;\n  position: relative;\n  cursor: ", ";\n  \n\n  &:hover .btn {\n    ", "\n  }\n\n"])), function (_a) {
+exports.StyledOption = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  position: relative;\n  cursor: ", ";\n  \n\n  &:hover .btn {\n    ", "\n  }\n\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  position: relative;\n  cursor: ", ";\n  \n\n  &:hover .btn {\n    ", "\n  }\n\n"])), function (_a) {
+    var S = _a.S;
+    return S ? '0.7rem' : '1rem';
+}, function (_a) {
     var rightWrongResult = _a.rightWrongResult, disabled = _a.disabled;
     return disabled ? 'not-allowed' :
         rightWrongResult ? 'initial' : 'pointer';
@@ -47,9 +50,16 @@ exports.StyledOption = styled_components_1.default.div(templateObject_4 || (temp
     var isSelected = _a.isSelected, rightWrongResult = _a.rightWrongResult, disabled = _a.disabled, theme = _a.theme, invert = _a.invert;
     return !isSelected && !rightWrongResult && !disabled && (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      background: ", ";\n    "], ["\n      background: ", ";\n    "])), invert ? greyColor80 : (0, utilsOolib_1.getPrimaryColor10)(theme.colors));
 });
-exports.StyledOtherTextInputWrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  margin-right: 0.5rem;\n\n  ", ";\n  \n  ", "{ width: 28rem; }\n"], ["\n  margin-right: 0.5rem;\n\n  ", ";\n  \n  ", "{ width: 28rem; }\n"])), function (_a) {
+exports.StyledOtherOptionContainer = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  gap: 1rem;\n  flex-direction: ", ";\n"], ["\n  display: flex;\n  gap: 1rem;\n  flex-direction: ", ";\n"])), function (_a) {
+    var listType = _a.listType;
+    return listType == 'vertical' ? 'column' : 'row';
+});
+exports.StyledOtherTextInputWrapper = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  \n  margin-right: 0.5rem;\n  ", "\n\n  ", ";\n  \n  ", "{ width: 28rem; }\n"], ["\n  \n  margin-right: 0.5rem;\n  ", "\n\n  ", ";\n  \n  ", "{ width: 28rem; }\n"])), function (_a) {
+    var rightWrongResult = _a.rightWrongResult;
+    return rightWrongResult && (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["pointer-events: none;"], ["pointer-events: none;"])));
+}, function (_a) {
     var listType = _a.listType;
-    return listType === 'vertical' ? (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["margin-left: 2.5rem;"], ["margin-left: 2.5rem;"]))) : (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["width: 28rem"], ["width: 28rem"])));
+    return listType === 'vertical' ? (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["margin-left: 2.5rem;"], ["margin-left: 2.5rem;"]))) : (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["width: 28rem"], ["width: 28rem"])));
 }, (0, mixins_1.mediaQuery)('sm'));
-exports.StyledCorrectMessage = (0, styled_components_1.default)(Typo_1.SANS_2)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  color: ", ";\n  padding-left: 3.3rem;\n"], ["\n  color: ", ";\n  padding-left: 3.3rem;\n"])), green);
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
+exports.StyledCorrectMessage = (0, styled_components_1.default)(Typo_1.SANS_2)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  color: ", ";\n  padding-left: 3.3rem;\n  padding-top: 1rem;\n"], ["\n  color: ", ";\n  padding-left: 3.3rem;\n  padding-top: 1rem;\n"])), green);
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10;

package/dist/components/RadioAndCheckbox/utils.d.ts

@@ -8,3 +8,12 @@ export function genOtherValueObject(text: any): {
     value_desc: any;
     display: string;
 };
+export function genDisplayedOptions({ injectOtherOption, options, valueProp, saveValueAsString }: {
+    injectOtherOption: any;
+    options: any;
+    valueProp: any;
+    saveValueAsString: any;
+}): {
+    typicalOptions: any;
+    otherOption: any;
+};

package/dist/components/RadioAndCheckbox/utils.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.genOtherValueObject = exports.getMarkingCommand = void 0;
+exports.genDisplayedOptions = exports.genOtherValueObject = exports.getMarkingCommand = void 0;
 var genValueFromDisplay_1 = require("../../utils/genValueFromDisplay");
 var getMarkingCommand = function (_a) {
     var option = _a.option, isSelected = _a.isSelected;
@@ -23,3 +23,23 @@ var genOtherValueObject = function (text) {
     };
 };
 exports.genOtherValueObject = genOtherValueObject;
+var genDisplayedOptions = function (_a) {
+    var injectOtherOption = _a.injectOtherOption, options = _a.options, valueProp = _a.valueProp, saveValueAsString = _a.saveValueAsString;
+    var otherOption = options.find(function (op) { return op.value === "other"; }); // if options has the other object already
+    if (otherOption)
+        return {
+            typicalOptions: options.filter(function (op) { return op.value !== 'other'; }),
+            otherOption: injectOtherOption ? otherOption : {}
+        };
+    var OtherValInValueProp = (valueProp instanceof Array ? valueProp : [valueProp]).find(function (v) {
+        return saveValueAsString ?
+            options.every(function (op) { return op.value !== v; })
+            : (v === null || v === void 0 ? void 0 : v.value) === 'other';
+    });
+    otherOption = saveValueAsString ?
+        { value: "other", display: "Other", display_desc: (OtherValInValueProp || '') }
+        :
+            OtherValInValueProp || { value: "other", display: "Other", display_desc: '' };
+    return { typicalOptions: options, otherOption: otherOption };
+};
+exports.genDisplayedOptions = genDisplayedOptions;

package/dist/components/TextInputs/index.js

@@ -137,7 +137,7 @@ var TextInput = function (props) {
                     icon && (react_1.default.createElement(DisplayIcon, { icon: icon, size: S ? 15 : 20, onClick: iconOnClick || null })),
                     react_1.default.createElement(index_styled_1.InputStyled, { className: size === 'S' ? 'SANS_2' : 'SANS_3', id: id, type: type, name: type, placeholder: placeholder, value: value, onChange: handleOnChange, maxLength: maxNumLimiter, onBlur: handleValidateOnBlur, onFocus: onFocus, size: size, autoComplete: 'off' }),
                     inputStatus === 'loading' && (react_1.default.createElement("div", null,
-                        react_1.default.createElement(LoadersAndProgress_1.CircleLoader, { S: true, invert: invert }))),
+                        react_1.default.createElement(LoadersAndProgress_1.LoaderCircle, { S: true, invert: invert }))),
                     actionBtn && (react_1.default.createElement(Buttons_1.ButtonPrimary, { value: actionBtn.text, invert: actionBtn.invert, onClick: actionBtnEnabaled && actionBtn.onClick, disabled: !actionBtnEnabaled, style: { marginRight: '-2rem' } }))),
                 (inputStatus === null || inputStatus === void 0 ? void 0 : inputStatus.msg) && (react_1.default.createElement(index_styled_1.MsgContainer, { invert: invert, status: inputStatus === null || inputStatus === void 0 ? void 0 : inputStatus.type },
                     react_1.default.createElement(Typo_1.SANS_3, null, inputStatus.msg))))))));

package/dist/index.d.ts

@@ -23,4 +23,4 @@ export { Tooltip } from "./components/Tooltip";
 export { ActionMenu } from "./components/ActionMenu";
 export { PercentCompletedPie } from "./components/PercentCompletedPie";
 export { Divider } from "./components/Divider";
-export { CircleLoader, ProgressBar, CircleLoader as Loader } from "./components/LoadersAndProgress";
+export { LoaderCircle, ProgressBar, LoaderCircle as Loader } from "./components/LoadersAndProgress";

package/dist/index.js

@@ -14,7 +14,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Divider = exports.PercentCompletedPie = exports.ActionMenu = exports.Tooltip = exports.OKELink = exports.UserRoleBadge = exports.Section = exports.Loader = exports.ProgressBar = exports.CircleLoader = exports.icons = exports.colors = exports.GlobalStyles = void 0;
+exports.Divider = exports.PercentCompletedPie = exports.ActionMenu = exports.Tooltip = exports.OKELink = exports.UserRoleBadge = exports.Section = exports.Loader = exports.ProgressBar = exports.LoaderCircle = exports.icons = exports.colors = exports.GlobalStyles = void 0;
 //css and styling related ( styled-components )
 var globalStyles_1 = require("./globalStyles");
 Object.defineProperty(exports, "GlobalStyles", { enumerable: true, get: function () { return globalStyles_1.GlobalStyles; } });
@@ -27,10 +27,10 @@ Object.defineProperty(exports, "icons", { enumerable: true, get: function () { r
 __exportStar(require("./components/Typo"), exports);
 //components
 var LoadersAndProgress_1 = require("./components/LoadersAndProgress");
-Object.defineProperty(exports, "CircleLoader", { enumerable: true, get: function () { return LoadersAndProgress_1.CircleLoader; } });
+Object.defineProperty(exports, "LoaderCircle", { enumerable: true, get: function () { return LoadersAndProgress_1.LoaderCircle; } });
 Object.defineProperty(exports, "ProgressBar", { enumerable: true, get: function () { return LoadersAndProgress_1.ProgressBar; } });
 var LoadersAndProgress_2 = require("./components/LoadersAndProgress"); //backwards compat till shen verifies
-Object.defineProperty(exports, "Loader", { enumerable: true, get: function () { return LoadersAndProgress_2.CircleLoader; } });
+Object.defineProperty(exports, "Loader", { enumerable: true, get: function () { return LoadersAndProgress_2.LoaderCircle; } });
 __exportStar(require("./components/Buttons"), exports);
 __exportStar(require("./components/Tags"), exports);
 __exportStar(require("./components/Breadcrumbs"), exports);

package/dist/utils/genValueFromDisplay.js

@@ -5,7 +5,7 @@ var genValueFromDisplay = function (text) {
     var value_desc = ( // genrating a value text abiding js conventions (camelCased)
     text
         .trim()
-        .replace(/[,\/]/g, '') // removing comas and forward slashes 
+        .replace(/[-\.,\/\\_'":;]/g, '') // regex removes hyphens, dots, slashes, underscores, quotes, colons and semicolons 
         .split(' ')
         .filter(Boolean)
         .map(function (word, idx) { return word[0]["to".concat(idx === 0 ? 'Lower' : 'Upper', "Case")]() + word.slice(1); })

package/package.json

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