oolib 2.195.2 → 2.197.0

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

@@ -45,10 +45,11 @@ var react_1 = __importStar(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
 var colors_1 = require("../../themes/colors");
 var ActionMenu_1 = require("../../../components/ActionMenu");
-var phosphor_react_1 = require("phosphor-react");
 var mixins_1 = require("../../../themes/mixins");
 var Typo2_1 = require("../Typo2");
 var useStyleUpdateAfterToggleTransition_1 = require("../../../utils/useStyleUpdateAfterToggleTransition");
+var icons_1 = require("../../../icons");
+var CaretDown = icons_1.icons.CaretDown, DotsThree = icons_1.icons.DotsThree;
 var StyledContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-radius: 0.8rem;\n  border: 1px solid ", ";\n  background: #ffffff;\n  box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.06);\n"], ["\n  border-radius: 0.8rem;\n  border: 1px solid ", ";\n  background: #ffffff;\n  box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.06);\n"])), colors_1.colors.grey10);
 var StyledHeader = styled_components_1.default.button(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  width: 100%;\n  padding: 1rem 1.6rem;\n  text-align: left;\n  background: none;\n  border: none;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n"], ["\n  width: 100%;\n  padding: 1rem 1.6rem;\n  text-align: left;\n  background: none;\n  border: none;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n"])));
 var StyledRightHeaderSection = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n"], ["\n  display: flex;\n  align-items: center;\n"])));
@@ -72,7 +73,7 @@ var CustomActionMenuSelectButton = function (_a) {
             width: "2rem",
             justifyContent: "center",
         } },
-        react_1.default.createElement(phosphor_react_1.DotsThree, { size: 16, style: { pointerEvents: 'none' } })));
+        react_1.default.createElement(DotsThree, { size: 16, style: { pointerEvents: 'none' } })));
 };
 var useCalculateWrapperHeight = function (_a) {
     var isExpanded = _a.isExpanded;
@@ -117,7 +118,7 @@ var Accordion = function (_a) {
                 react_1.default.createElement(Typo2_1.UI_BODY_BOLD_SM, null, title)),
             react_1.default.createElement(StyledRightHeaderSection, null,
                 react_1.default.createElement(ArrowWrapper, { isExpanded: isExpanded },
-                    react_1.default.createElement(phosphor_react_1.CaretDown, { size: 16 })),
+                    react_1.default.createElement(CaretDown, { size: 16 })),
                 actionsConfig && (react_1.default.createElement(ActionMenu_1.ActionMenu, { CustomSelectComp: CustomActionMenuSelectButton, actions: actionsConfig })))),
         react_1.default.createElement(StyledContentWrapper, { height: wrapperHeight, style: { overflow: accordionOverflow }, expandAnimationDuration: expandAnimationDuration },
             react_1.default.createElement(StyledContentInnerWrapper, { ref: wrapperRef }, children))));

package/dist/v2/components/Hints/comps/HintsButton.js

@@ -9,15 +9,16 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.HintsButton = void 0;
 var react_1 = __importDefault(require("react"));
-var phosphor_react_1 = require("phosphor-react");
 var styled_components_1 = __importDefault(require("styled-components"));
 var Typo2_1 = require("../../Typo2");
 var colors_1 = require("../../../themes/colors");
+var icons_1 = require("../../../../icons");
 var hintHover = colors_1.colors.hintHover, hint = colors_1.colors.hint, white = colors_1.colors.white;
+var Lightbulb = icons_1.icons.Lightbulb;
 var HintsButton = function (_a) {
     var id = _a.id, btnLabel = _a.btnLabel, onClick = _a.onClick;
     return (react_1.default.createElement(StyledButton, { onClick: function () { return onClick(id); } },
-        react_1.default.createElement(phosphor_react_1.Lightbulb, { size: 13, weight: "bold", style: { marginBottom: "0.2rem" } }),
+        react_1.default.createElement(Lightbulb, { size: 13, weight: "bold", style: { marginBottom: "0.2rem" } }),
         react_1.default.createElement(Typo2_1.UI_BODY_SM_DF, null, btnLabel)));
 };
 exports.HintsButton = HintsButton;

package/dist/v2/components/List/comps/ListItem.js

@@ -34,7 +34,7 @@ var ListItem = function (_a) {
     var opIsSelected = function (thisOpData) {
         return value === null || value === void 0 ? void 0 : value.some(function (d) { return d.value === thisOpData.value; });
     };
-    return (react_1.default.createElement(styled_1.StyledListItemWrapper, { index: index, isSelected: isSelected, isFocussed: isFocussed, className: "OKE-Dropdown__option", ref: function (el) { return isFocussed && el && scrollFocussedOpIntoView(el); }, onClick: handleClick, S: S, style: { pointerEvents: disabled && "none" } },
+    return (react_1.default.createElement(styled_1.StyledListItemWrapper, { index: index, isSelected: isSelected, isFocussed: isFocussed, className: "OKE-Dropdown__option", ref: function (el) { return isFocussed && el && scrollFocussedOpIntoView(el); }, onClick: handleClick, S: S, style: { pointerEvents: disabled && "none", cursor: !disabled && "pointer" } },
         react_1.default.createElement("div", { ref: observerRef, style: {
                 display: "flex",
                 alignItems: "flex-start",

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

@@ -11,7 +11,6 @@ exports.CheckboxInput = void 0;
 var react_1 = __importDefault(require("react"));
 var icons_1 = require("../../../../../../../icons");
 var themes_1 = require("../../../../../../themes");
-var Tags_1 = require("../../../../../Tags");
 var Typo2_1 = require("../../../../../Typo2");
 var styled_1 = require("../../../../styled");
 var utils_1 = require("../../../../utils");
@@ -19,6 +18,7 @@ var CheckboxButton_1 = require("../CheckboxButton");
 var TextLoader_1 = require("../../../../../../../components/LoadersAndProgress/TextLoader");
 var styled_components_1 = __importDefault(require("styled-components"));
 var mixins_1 = require("../../../../../../../themes/mixins");
+var Tags_1 = require("../../../../../Tags");
 var CheckSquare = icons_1.icons.CheckSquare, XSquare = icons_1.icons.XSquare;
 var red = themes_1.colors.red, grey40 = themes_1.colors.grey40, grey80 = themes_1.colors.grey80, onSecondary = themes_1.colors.onSecondary, invertRed = themes_1.colors.invertRed;
 var UI_BODY_SM_DF_STYLED = (0, styled_components_1.default)(Typo2_1.UI_BODY_SM_DF)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", ";\n  white-space: normal;\n"], ["\n  ", ";\n  white-space: normal;\n"])), (0, mixins_1.clampText)(2));
@@ -40,7 +40,7 @@ var CheckboxInput = function (_a) {
             margin: "-7px -2.8px -7px -3.2px",
             flexShrink: 0,
         } })); };
-    return option.loading ? (react_1.default.createElement(TextLoader_1.TextLoader, { style: { width: "8rem", height: "1.5rem" } })) : inputStyle === "tagSelect" ? (react_1.default.createElement(Tags_1.TagSelect, { isSelected: isSelected, invert: invert, disabled: disabled, onClick: function () { return !disabled && onClick(isSelected, option); }, display: option.display, value: option.value, style: { alignSelf: "flex-start" } })) : (react_1.default.createElement(styled_1.StyledOption, { rightWrongResult: rightWrongResult, isSelected: isSelected, disabled: disabled, invert: invert, S: S, className: className, onClick: function () {
+    return option.loading ? (react_1.default.createElement(TextLoader_1.TextLoader, { style: { width: "8rem", height: "1.5rem" } })) : inputStyle === "tagSelect" ? (react_1.default.createElement(Tags_1.Tag, { isSelected: isSelected, invert: invert, disabled: disabled, onClick: function () { return !disabled && onClick(isSelected, option); }, display: option.display, value: option.value, style: { alignSelf: "flex-start" } })) : (react_1.default.createElement(styled_1.StyledOption, { rightWrongResult: rightWrongResult, isSelected: isSelected, disabled: disabled, invert: invert, S: S, className: className, onClick: function () {
             return !rightWrongResult && !disabled && onClick && onClick(isSelected, option);
         } },
         react_1.default.createElement("div", { style: { alignSelf: "flex-start" } }, rightWrongResult

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

@@ -23,10 +23,10 @@ var _EXPORTS_1 = require("../../../utils/_EXPORTS");
 var DropdownSingle_1 = require("../../../components/Dropdowns/DropdownSingle");
 var mixins_1 = require("../../../themes/mixins");
 var Typo2_1 = require("../Typo2");
-var phosphor_react_1 = require("phosphor-react");
 var colors_1 = require("../../themes/colors");
 var icons_1 = require("../../../icons");
 var __1 = require("../../..");
+var List = icons_1.icons.List;
 var Base = function (_a) {
     var id = _a.id, options = _a.options, valueProp = _a.value, onChange = _a.onChange, style = _a.style, errorTabs = _a.errorTabs, disabledTabs = _a.disabledTabs, _b = _a.tabBarStyle, tabBarStyle = _b === void 0 ? '1' : _b, saveValueAsString = _a.saveValueAsString, _c = _a.black, black = _c === void 0 ? false : _c, M = _a.M, S = _a.S, _size = _a.size //use any one of these 3
     ;
@@ -86,5 +86,5 @@ var CustomSelectComp = function (_a) {
         react_1.default.createElement("div", null,
             react_1.default.createElement(Typo2_1.UI_TAG, { style: { color: colors_1.colors.grey40 } }, title),
             react_1.default.createElement(Typo2_1.UI_BODY_SEMIBOLD, { capitalize: true, style: { color: display ? colors_1.colors.black : colors_1.colors.grey60 } }, display || placeholder)),
-        react_1.default.createElement(phosphor_react_1.List, { size: 18, weight: "bold" })));
+        react_1.default.createElement(List, { size: 18, weight: "bold" })));
 };

package/dist/v2/components/dataviz/BarChart/comps/Legend/index.js

@@ -21,7 +21,7 @@ var Typo2_1 = require("../../../../Typo2");
 var LegendTooltipGlyph_1 = require("../LegendTooltipGlyph");
 var Legend = function (_a) {
     var data = _a.data, label = _a.label, _b = _a.orientation, orientation = _b === void 0 ? "vertical" : _b;
-    return (react_1.default.createElement("div", { style: __assign(__assign({}, (orientation === 'vertical' ? { maxWidth: '200px' } : {})), { padding: "12px", borderRadius: '8px', border: "1px solid ".concat(__1.colors2.grey5), background: "linear-gradient(to bottom, hsla(0, 0%, 96%, 1), hsla(0, 0%, 100%, 0))", maxHeight: orientation === 'vertical' ? '100%' : '150px', overflow: 'scroll' }) },
+    return (react_1.default.createElement("div", { style: __assign(__assign({}, (orientation === 'vertical' ? { maxWidth: '200px' } : {})), { padding: "12px", borderRadius: '8px', border: "1px solid ".concat(__1.colors2.grey5), background: "linear-gradient(to bottom, hsla(0, 0%, 96%, 1), hsla(0, 0%, 100%, 0))", maxHeight: orientation === 'vertical' ? '100%' : '150px', overflow: 'auto' }) },
         label && orientation === 'vertical' && (react_1.default.createElement("div", { style: { paddingBottom: "8px" } },
             react_1.default.createElement(Typo2_1.UI_CAPTION_BOLD_DF, null, label))),
         react_1.default.createElement("div", { style: __assign(__assign({ display: "flex", flexDirection: orientation === "vertical" ? "column" : "row" }, (orientation === 'horizontal' ? { flexWrap: 'wrap' } : {})), { gap: "8px" }) },

package/dist/v2/components/dataviz/BarChart/index.js

@@ -327,7 +327,7 @@ var BarChart = function (_a) {
     // menu options for grouped and stacked
     if (data.length === 0)
         return react_1.default.createElement("div", null, "No data available");
-    return (react_1.default.createElement("div", { ref: vizWrapperRef, style: __assign(__assign({}, style), { width: "100%", background: _debug_controls.chartWrapperBgColor, display: 'flex', gap: '8px', flexDirection: orientation === 'vertical' ? 'row' : 'column', position: 'relative', overflow: 'scroll' }) },
+    return (react_1.default.createElement("div", { ref: vizWrapperRef, style: __assign(__assign({}, style), { width: "100%", background: _debug_controls.chartWrapperBgColor, display: 'flex', gap: '8px', flexDirection: orientation === 'vertical' ? 'row' : 'column', position: 'relative', overflow: 'auto' }) },
         react_1.default.createElement("div", { style: { flexGrow: 1, position: 'relative' } },
             react_1.default.createElement(BarChartRenderer, { data: data, dataToSummarize: dataToSummarize, isBreakdown: isBreakdown, breakdownDisplayType: breakdownDisplayType, showSumOfBreakdownValues: false, showPercent: showPercent, showCount: showCount, activeBar: activeBar, setActiveBar: setActiveBar, onClick: onClick, mousePosition: mousePosition, dataMaxValue: dataMaxValue, breakdownCategoryName: breakdownCategoryName }),
             dataToSummarize && (react_1.default.createElement(BarChartRenderer, { data: dataToSummarize,

package/dist/v2/components/dataviz/HeatMapGrid/index.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { CSSProperties } from "react";
 export interface HeatMapGridProps {
     data: any;
     valuePath: string | string[];
@@ -14,6 +14,7 @@ export interface HeatMapGridProps {
     breakdownDisplayType?: "grouped" | "stacked";
     colorIdx?: number;
     summarizeAfterIdx?: number;
+    style?: CSSProperties;
 }
 /**
  * expects exactly the same data structure as barcharts - breakdown version

package/dist/v2/components/dataviz/HeatMapGrid/index.js

@@ -117,7 +117,7 @@ var _configs = {
     gridGap: 2,
     cellRoundness: 4,
     cellSize: 36,
-    axisLabelWidth: 62,
+    axisLabelWidth: 200
 };
 var HeatMapCell = function (_a) {
     var value = _a.value, dataMaxValue = _a.dataMaxValue, _b = _a.dataMinValue, dataMinValue = _b === void 0 ? 0 : _b, showPercent = _a.showPercent;
@@ -150,8 +150,8 @@ var HeatMapCell = function (_a) {
  * expects exactly the same data structure as barcharts - breakdown version
  */
 var HeatMapGrid = function (_a) {
-    var _data = _a.data, valuePath = _a.valuePath, tooltipLabelsMapping = _a.tooltipLabelsMapping, tooltipLabelsPath = _a.tooltipLabelsPath, _b = _a.labelPath, labelPath = _b === void 0 ? "name" : _b, onClick = _a.onClick, _c = _a.showCount, showCount = _c === void 0 ? true : _c, _d = _a.showPercent, showPercent = _d === void 0 ? true : _d, _e = _a.colorIdx, colorIdx = _e === void 0 ? 0 : _e, _f = _a.summarizeAfterIdx, summarizeAfterIdx = _f === void 0 ? 5 : _f;
-    var _g = (0, usePrepareData_1.usePrepareData)({
+    var _data = _a.data, valuePath = _a.valuePath, tooltipLabelsMapping = _a.tooltipLabelsMapping, tooltipLabelsPath = _a.tooltipLabelsPath, _b = _a.labelPath, labelPath = _b === void 0 ? "name" : _b, onClick = _a.onClick, _c = _a.showCount, showCount = _c === void 0 ? true : _c, _d = _a.showPercent, showPercent = _d === void 0 ? true : _d, _e = _a.colorIdx, colorIdx = _e === void 0 ? 0 : _e, _f = _a.summarizeAfterIdx, summarizeAfterIdx = _f === void 0 ? 5 : _f, _g = _a.style, style = _g === void 0 ? {} : _g;
+    var _h = (0, usePrepareData_1.usePrepareData)({
         _data: _data,
         labelPath: labelPath,
         valuePath: valuePath,
@@ -160,71 +160,77 @@ var HeatMapGrid = function (_a) {
         isBreakdown: true,
         showPercent: showPercent,
         summarizeAfterIdx: summarizeAfterIdx,
-    }), data = _g.data, dataMaxValue = _g.dataMaxValue, dataToSummarize = _g.dataToSummarize;
-    return (react_1.default.createElement("div", null,
+    }), data = _h.data, dataMaxValue = _h.dataMaxValue, dataToSummarize = _h.dataToSummarize;
+    return (react_1.default.createElement("div", { style: __assign({ display: "grid", gridTemplateColumns: "auto 1fr", gap: _configs.gridGap + 'px', overflow: "auto", alignItems: "end" }, style) },
         react_1.default.createElement("div", { style: {
-                display: "grid",
-                gridTemplateColumns: "auto 1fr",
-                gap: _configs.gridGap + 'px',
+                display: "flex",
+                flexDirection: "column",
+                gap: _configs.gridGap + "px",
             } },
-            react_1.default.createElement("div", { style: {
+            react_1.default.createElement("div", { style: { height: _configs.axisLabelWidth + "px" } }),
+            data.map(function (d) { return (react_1.default.createElement("div", { style: {
+                    height: _configs.cellSize + "px",
+                    textAlign: "right",
                     display: "flex",
-                    flexDirection: "column",
-                    gap: _configs.gridGap + "px",
+                    alignItems: "center",
+                    justifyContent: "flex-end",
                 } },
-                react_1.default.createElement("div", { style: { height: _configs.axisLabelWidth + "px" } }),
-                data.map(function (d) { return (react_1.default.createElement("div", { style: {
-                        height: _configs.cellSize + "px",
-                        textAlign: "right",
-                        display: "flex",
-                        alignItems: "center",
-                        justifyContent: "flex-end",
-                    } },
-                    react_1.default.createElement(Typo2_1.UI_CAPTION_SEMIBOLD_DF, { style: {
-                            width: _configs.axisLabelWidth + "px",
-                            textOverflow: "ellipsis",
-                            overflow: "hidden",
-                            whiteSpace: "nowrap",
-                        } }, d[0].labels.name))); })),
+                react_1.default.createElement(Typo2_1.UI_CAPTION_SEMIBOLD_DF, { style: {
+                        width: "fit-content",
+                        maxWidth: _configs.axisLabelWidth + "px",
+                        height: "2.4em",
+                        lineHeight: "1.2em",
+                        overflow: "hidden",
+                        wordBreak: "break-word",
+                    } }, d[0].labels.name.length > 50 ? d[0].labels.name.substring(0, 50) + "..." : d[0].labels.name))); })),
+        react_1.default.createElement("div", { style: {
+                display: "flex",
+                flexDirection: "column",
+                gap: _configs.gridGap + "px",
+                overflowX: "auto",
+            } },
             react_1.default.createElement("div", { style: {
                     display: "flex",
-                    flexDirection: "column",
+                    alignItems: "center",
                     gap: _configs.gridGap + "px",
+                } }, data[0].map(function (dd) { return (react_1.default.createElement("div", { style: {
+                    width: _configs.cellSize + "px",
+                    height: _configs.axisLabelWidth + "px",
+                    display: "flex",
+                    alignItems: "flex-end",
+                    textWrap: "nowrap",
+                    justifyContent: 'center',
+                    position: "relative",
+                    overflow: "visible",
+                    flexShrink: 0,
                 } },
-                react_1.default.createElement("div", { style: {
-                        display: "flex",
-                        alignItems: "center",
-                        gap: _configs.gridGap + "px",
-                    } }, data[0].map(function (dd) { return (react_1.default.createElement("div", { style: {
-                        width: _configs.cellSize + "px",
-                        height: _configs.axisLabelWidth + "px",
-                        display: "flex",
-                        alignItems: "flex-end",
-                        textWrap: "nowrap",
-                        justifyContent: 'center',
-                        position: "relative", // Add this
-                        overflow: "visible" // Add this to allow content to overflow
-                    } },
-                    react_1.default.createElement(Typo2_1.UI_CAPTION_SEMIBOLD_DF, { style: {
-                            width: _configs.axisLabelWidth + "px",
-                            textOverflow: "ellipsis",
-                            overflow: "hidden",
-                            whiteSpace: "nowrap",
-                            position: "absolute", // Add this
-                            bottom: '-8px', // which is half of the line height of the current text
-                            left: (_configs.cellSize / 2) + 'px', // Center horizontally
-                            transformOrigin: "left center", // Change origin to bottom
-                            transform: "rotate(-90deg)", // Adjust transform
-                        } }, dd.labels.tooltipLabel))); })),
-                data.map(function (d) { return (react_1.default.createElement("div", { style: {
-                        display: "flex",
-                        alignItems: "center",
-                        gap: _configs.gridGap + "px",
-                    } }, d.map(function (dd) {
-                    // console.log({
-                    //   color: mapValueToColor(dd.labels.count, 0, dataMaxValue),
-                    // });
-                    return react_1.default.createElement(HeatMapCell, { showPercent: false, dataMaxValue: dataMaxValue, value: dd });
-                }))); })))));
+                react_1.default.createElement(Typo2_1.UI_CAPTION_SEMIBOLD_DF, { style: {
+                        width: _configs.axisLabelWidth + "px",
+                        height: "32px",
+                        position: "absolute",
+                        bottom: '-16px',
+                        left: (_configs.cellSize / 2) + 'px',
+                        transformOrigin: "left center",
+                        transform: "rotate(-90deg)",
+                        // Multi-line 
+                        whiteSpace: "normal",
+                        overflow: "hidden",
+                        display: "-webkit-box",
+                        WebkitBoxOrient: "vertical",
+                        WebkitLineClamp: 2,
+                        textOverflow: "ellipsis",
+                        lineHeight: "16px",
+                    } }, dd.labels.tooltipLabel))); })),
+            data.map(function (d) { return (react_1.default.createElement("div", { style: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: _configs.gridGap + "px",
+                    // flexShrink: 0, 
+                } }, d.map(function (dd) {
+                // console.log({
+                //   color: mapValueToColor(dd.labels.count, 0, dataMaxValue),
+                // });
+                return react_1.default.createElement(HeatMapCell, { showPercent: false, dataMaxValue: dataMaxValue, value: dd });
+            }))); }))));
 };
 exports.HeatMapGrid = HeatMapGrid;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oolib",
-  "version": "2.195.2",
+  "version": "2.197.0",
   "description": " OKE Component Library",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -89,6 +89,7 @@
     "@lexical/react": "^0.13.1",
     "@lexical/table": "^0.13.1",
     "@material/material-color-utilities": "^0.3.0",
+    "@phosphor-icons/react": "^2.1.10",
     "@react-hook/resize-observer": "^1.2.6",
     "babel-polyfill": "^6.26.0",
     "d3": "^7.8.5",
@@ -103,7 +104,6 @@
     "lodash": "^4.17.21",
     "modularscale-js": "^3.0.1",
     "moment": "^2.24.0",
-    "phosphor-react": "^1.4.1",
     "react-datepicker": "^7.6.0",
     "react-player": "^2.12.0",
     "recharts": "^2.15.3"