oolib 2.90.0 → 2.90.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/dist/components/ActionMenu/index.d.ts +2 -1
  2. package/dist/components/ActionMenu/index.js +25 -22
  3. package/dist/components/SimpleTable/comps/AddRowColButtons/index.d.ts +2 -1
  4. package/dist/components/SimpleTable/comps/AddRowColButtons/index.js +15 -3
  5. package/dist/components/SimpleTable/comps/rowColActionMenus/ColActionsMenu/index.js +1 -1
  6. package/dist/components/SimpleTable/comps/rowColActionMenus/RowActionsMenu/index.js +1 -1
  7. package/dist/components/SimpleTable/index.js +24 -19
  8. package/dist/components/SimpleTable/useResizeTableColumns.js +1 -1
  9. package/package.json +1 -1
package/dist/components/ActionMenu/index.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- export function ActionMenu({ icon, invert, actions, align, iconSize, M, ButtonComp: _ButtonComp, setShowActions: setShowActionsInParent, popOutOfOverflowHiddenParent, CustomSelectComp, storybookPreview }: {
1
+ export function ActionMenu({ icon, invert, actions, align, iconSize, M, ButtonComp: _ButtonComp, setShowActions: setShowActionsInParent, popOutOfOverflowHiddenParent, CustomSelectComp, storybookPreview, useLightboxPortal, }: {
2
2
  icon?: string;
3
3
  invert: any;
4
4
  actions: any;
@@ -10,5 +10,6 @@ export function ActionMenu({ icon, invert, actions, align, iconSize, M, ButtonCo
10
10
  popOutOfOverflowHiddenParent?: boolean;
11
11
  CustomSelectComp: any;
12
12
  storybookPreview: any;
13
+ useLightboxPortal: any;
13
14
  }): React.JSX.Element;
14
15
  import React from "react";
package/dist/components/ActionMenu/index.js CHANGED
@@ -43,15 +43,15 @@ var useHandleClickOutside_1 = require("../../utils/customHooks/useHandleClickOut
43
43
  var usePopOutOfOverflowHiddenParent_1 = require("../../utils/usePopOutOfOverflowHiddenParent");
44
44
  var styled_1 = require("./styled");
45
45
  var ModalConfirmAction_1 = require("../Modals/derivedComps/ModalConfirmAction");
46
+ var react_dom_1 = require("react-dom");
46
47
  //
47
48
  var ActionMenu = function (_a) {
48
- var _b, _c;
49
- var _d = _a.icon, icon = _d === void 0 ? 'DotsThree' : _d, //most likely will never change
50
- invert = _a.invert, actions = _a.actions, _e = _a.align, align = _e === void 0 ? 'right' : _e, _f = _a.iconSize, iconSize = _f === void 0 ? 'S' : _f, M = _a.M, _g = _a.ButtonComp, _ButtonComp = _g === void 0 ? 'ButtonGhost' : _g, setShowActionsInParent = _a.setShowActions, _h = _a.popOutOfOverflowHiddenParent, popOutOfOverflowHiddenParent = _h === void 0 ? false : _h, CustomSelectComp = _a.CustomSelectComp, storybookPreview = _a.storybookPreview //for storybook purposes
51
- ;
49
+ var _b = _a.icon, icon = _b === void 0 ? "DotsThree" : _b, //most likely will never change
50
+ invert = _a.invert, actions = _a.actions, _c = _a.align, align = _c === void 0 ? "right" : _c, _d = _a.iconSize, iconSize = _d === void 0 ? "S" : _d, M = _a.M, _e = _a.ButtonComp, _ButtonComp = _e === void 0 ? "ButtonGhost" : _e, setShowActionsInParent = _a.setShowActions, _f = _a.popOutOfOverflowHiddenParent, popOutOfOverflowHiddenParent = _f === void 0 ? false : _f, CustomSelectComp = _a.CustomSelectComp, storybookPreview = _a.storybookPreview, //for storybook purposes
51
+ useLightboxPortal = _a.useLightboxPortal;
52
52
  var actionMenuRef = (0, react_1.useRef)(null);
53
53
  var optionsWrapperRef = (0, react_1.useRef)(null);
54
- var _j = (0, react_1.useState)(false), showActions = _j[0], setShowActions = _j[1];
54
+ var _g = (0, react_1.useState)(false), showActions = _g[0], setShowActions = _g[1];
55
55
  (0, useHandleClickOutside_1.useHandleClickOutside)(actionMenuRef, setShowActions);
56
56
  if (!actions || actions.length === 0)
57
57
  return null;
@@ -77,25 +77,17 @@ var ActionMenu = function (_a) {
77
77
  (0, react_1.useEffect)(function () {
78
78
  return function () { return setShowActionsInParent && setShowActionsInParent(false); };
79
79
  }, []);
80
- var _k = (0, usePopOutOfOverflowHiddenParent_1.usePopOutOfOverflowHiddenParent)(popOutOfOverflowHiddenParent), fixPos = _k.fixPos, applyFixedPos = _k.applyFixedPos, removeFixedPos = _k.removeFixedPos, trackerRef = _k.trackerRef;
81
- return (react_1.default.createElement(styled_1.StyledActionMenu, { ref: actionMenuRef },
82
- CustomSelectComp
83
- ? react_1.default.createElement(CustomSelectComp, { active: showActions, onClick: function (e) {
84
- setShowActions(!showActions);
85
- } })
86
- : react_1.default.createElement(ButtonComp, __assign({}, buttonSize, { icon: icon, iconSize: iconSize, invert: invert, stopPropagation: true, preventDefault: true, onClick: function (e) {
87
- setShowActions(!showActions);
88
- }, active: showActions })),
89
- popOutOfOverflowHiddenParent &&
90
- react_1.default.createElement(styled_1.StyledActionMenuTracker, { storybookPreview: storybookPreview, align: align, ref: trackerRef }),
91
- react_1.default.createElement(styled_1.StyledActionsDropMenu, __assign({}, {
92
- id: 'dropmenu',
80
+ var _h = (0, usePopOutOfOverflowHiddenParent_1.usePopOutOfOverflowHiddenParent)(popOutOfOverflowHiddenParent), fixPos = _h.fixPos, applyFixedPos = _h.applyFixedPos, removeFixedPos = _h.removeFixedPos, trackerRef = _h.trackerRef;
81
+ var genLighbox = function () {
82
+ var _a, _b;
83
+ return (react_1.default.createElement(styled_1.StyledActionsDropMenu, __assign({}, {
84
+ id: "dropmenu",
93
85
  align: align,
94
86
  invert: invert,
95
- optionsHeight: (_b = getOpsRect()) === null || _b === void 0 ? void 0 : _b.height,
96
- optionsWidth: (_c = getOpsRect()) === null || _c === void 0 ? void 0 : _c.width,
87
+ optionsHeight: (_a = getOpsRect()) === null || _a === void 0 ? void 0 : _a.height,
88
+ optionsWidth: (_b = getOpsRect()) === null || _b === void 0 ? void 0 : _b.width,
97
89
  showActions: showActions,
98
- fixPos: fixPos
90
+ fixPos: fixPos,
99
91
  }),
100
92
  react_1.default.createElement(styled_1.StyledActionMenuOpsWrapper, { invert: invert, align: align, ref: optionsWrapperRef }, actions.map(function (action) {
101
93
  return (react_1.default.createElement(ModalConfirmAction_1.ModalConfirmAction, __assign({}, action.confirmAction),
@@ -107,6 +99,17 @@ var ActionMenu = function (_a) {
107
99
  }, key: action.display, invert: invert }),
108
100
  action.icon && genOptionIcon(action.icon),
109
101
  react_1.default.createElement(Typo_1.SANS_2, null, action.display))));
110
- })))));
102
+ }))));
103
+ };
104
+ return (react_1.default.createElement(styled_1.StyledActionMenu, { ref: actionMenuRef },
105
+ CustomSelectComp ? (react_1.default.createElement(CustomSelectComp, { active: showActions, onClick: function (e) {
106
+ setShowActions(!showActions);
107
+ } })) : (react_1.default.createElement(ButtonComp, __assign({}, buttonSize, { icon: icon, iconSize: iconSize, invert: invert, stopPropagation: true, preventDefault: true, onClick: function (e) {
108
+ setShowActions(!showActions);
109
+ }, active: showActions }))),
110
+ popOutOfOverflowHiddenParent && (react_1.default.createElement(styled_1.StyledActionMenuTracker, { storybookPreview: storybookPreview, align: align, ref: trackerRef })),
111
+ popOutOfOverflowHiddenParent
112
+ ? (0, react_dom_1.createPortal)(genLighbox(), document.getElementById("actionmenu-lightbox-root"))
113
+ : genLighbox()));
111
114
  };
112
115
  exports.ActionMenu = ActionMenu;
package/dist/components/SimpleTable/comps/AddRowColButtons/index.d.ts CHANGED
@@ -1,8 +1,9 @@
1
1
  export function AddRowButton({ onClick }: {
2
2
  onClick: any;
3
3
  }): React.JSX.Element;
4
- export function AddColButton({ onClick, addColButtonWidth }: {
4
+ export function AddColButton({ onClick, addColButtonWidth, enableRowActions }: {
5
5
  onClick: any;
6
6
  addColButtonWidth: any;
7
+ enableRowActions: any;
7
8
  }): React.JSX.Element;
8
9
  import React from "react";
package/dist/components/SimpleTable/comps/AddRowColButtons/index.js CHANGED
@@ -3,6 +3,17 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
3
3
  if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
4
4
  return cooked;
5
5
  };
6
+ var __assign = (this && this.__assign) || function () {
7
+ __assign = Object.assign || function(t) {
8
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
9
+ s = arguments[i];
10
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
11
+ t[p] = s[p];
12
+ }
13
+ return t;
14
+ };
15
+ return __assign.apply(this, arguments);
16
+ };
6
17
  var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
7
18
  if (k2 === undefined) k2 = k;
8
19
  var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -39,7 +50,7 @@ var mixins_1 = require("../../../../themes/mixins");
39
50
  var Plus = icons_1.icons.Plus;
40
51
  var commonStyles = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n background-color: ", ";\n border: none;\n ", "\n &:hover {\n background-color: ", ";\n }\n cursor: pointer;\n"], ["\n background-color: ", ";\n border: none;\n ", "\n &:hover {\n background-color: ", ";\n }\n cursor: pointer;\n"])), themes_1.colors.greyColor5, (0, mixins_1.transition)("background-color"), themes_1.colors.greyColor10);
41
52
  var StyledRowButton = styled_components_1.default.button(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n height: 2rem;\n text-align: center;\n width: 100%;\n ", "\n"], ["\n height: 2rem;\n text-align: center;\n width: 100%;\n ", "\n"])), commonStyles);
42
- var StyledColButton = styled_components_1.default.button(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: 2rem; //should be same as height of StyledRowButton\n flex-shrink: 0;\n ", "\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: 2rem; //should be same as height of StyledRowButton\n flex-shrink: 0;\n ", "\n"])), commonStyles);
53
+ var StyledColButton = styled_components_1.default.button(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n ", "\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n ", "\n"])), commonStyles);
43
54
  var AddRowButton = function (_a) {
44
55
  var onClick = _a.onClick;
45
56
  return (react_1.default.createElement(StyledRowButton, { onClick: onClick },
@@ -47,8 +58,9 @@ var AddRowButton = function (_a) {
47
58
  };
48
59
  exports.AddRowButton = AddRowButton;
49
60
  var AddColButton = function (_a) {
50
- var onClick = _a.onClick, addColButtonWidth = _a.addColButtonWidth;
51
- return (react_1.default.createElement(StyledColButton, { style: { width: addColButtonWidth + 'px' }, onClick: onClick },
61
+ var onClick = _a.onClick, addColButtonWidth = _a.addColButtonWidth, enableRowActions = _a.enableRowActions;
62
+ return (react_1.default.createElement(StyledColButton, { style: __assign({ width: addColButtonWidth + 'px' }, (enableRowActions ? { marginBottom: '2rem' } : {}) //should be same as height of StyledRowButton
63
+ ), onClick: onClick },
52
64
  react_1.default.createElement(Plus, { size: 12, weight: "bold" })));
53
65
  };
54
66
  exports.AddColButton = AddColButton;
package/dist/components/SimpleTable/comps/rowColActionMenus/ColActionsMenu/index.js CHANGED
@@ -54,7 +54,7 @@ var ColActionsMenu = function (_a) {
54
54
  // cuz if an actionmenu is open we want it to continue showing
55
55
  // on screen irrespective of other factors such as hover and such
56
56
  return (conditionsToRender || actionMenuIsOpen) && (react_1.default.createElement("div", { style: { zIndex: 2, position: 'absolute', top: 0, left: '50%', transform: 'translate(-50%, -50%)' } },
57
- react_1.default.createElement(ActionMenu_1.ActionMenu, { setShowActions: function (bool) { return setActionMenuIsOpen(bool); }, align: "left", CustomSelectComp: function (_a) {
57
+ react_1.default.createElement(ActionMenu_1.ActionMenu, { popOutOfOverflowHiddenParent: true, setShowActions: function (bool) { return setActionMenuIsOpen(bool); }, align: "left", CustomSelectComp: function (_a) {
58
58
  var active = _a.active, onClick = _a.onClick;
59
59
  return (react_1.default.createElement(StyledCustomSelectCompWrapper, { style: { height: colActionsButtonHeight + 'px' }, onClick: onClick, active: active },
60
60
  react_1.default.createElement(DisplayIcon_1.DisplayIcon, { icon: "DotsThree", size: 16 })));
package/dist/components/SimpleTable/comps/rowColActionMenus/RowActionsMenu/index.js CHANGED
@@ -61,7 +61,7 @@ var RowActionsMenu = function (_a) {
61
61
  left: 0,
62
62
  transform: "translate(-50%, -50%)",
63
63
  } },
64
- react_1.default.createElement(ActionMenu_1.ActionMenu, { align: "left", setShowActions: function (showActions) {
64
+ react_1.default.createElement(ActionMenu_1.ActionMenu, { popOutOfOverflowHiddenParent: true, align: "left", setShowActions: function (showActions) {
65
65
  setActionMenuIsOpen(showActions);
66
66
  }, CustomSelectComp: function (_a) {
67
67
  var active = _a.active, onClick = _a.onClick;
package/dist/components/SimpleTable/index.js CHANGED
@@ -171,13 +171,15 @@ function SimpleTable(_a) {
171
171
  var primaryTableActionsMenuHeight = 30;
172
172
  var primaryTableActionsMenuGap = 5;
173
173
  var genCell = function (_a) {
174
- var cell = _a.cell, cellIdx = _a.cellIdx, rowIdx = _a.rowIdx;
174
+ var cell = _a.cell, cellIdx = _a.cellIdx, rowIdx = _a.rowIdx, _b = _a.enableColResizeActions // cuz in the case of pre fixed column (via config.rowHeaderData), enableResize will be set to false
175
+ , enableColResizeActions = _b === void 0 ? true : _b // cuz in the case of pre fixed column (via config.rowHeaderData), enableResize will be set to false
176
+ ;
175
177
  var CellComp = RichTextEditor //cuz in oolib, richtexteditor will not be there for now
176
178
  ? CellContentBlocks["RichTextEditor"]
177
179
  : function () { return react_1.default.createElement("div", null, "RTE Doesnt Exist"); };
178
180
  var cellProps = __assign({}, CellContentBlockDefaultProps["RichTextEditor"]);
179
181
  var cellValue = CellValueGetters["RichTextEditor"](cell.value);
180
- var cellWidth = value.colWidthConfig["col_".concat(cellIdx)];
182
+ var cellWidth = value.colWidthConfig["col_".concat(cellIdx)] || defaultColWidth + 'px'; //cuz when pre-fixed column is applied via config.rowHeaderData, no colWidthConfig will be there for it in value.colWidthConfig
181
183
  //(100% - totalExplicitWidths)/(totalColumns - noOfColsWithExplicitWidths)
182
184
  // let cellProps = {
183
185
  // ...CellContentBlockDefaultProps[cell.comp],
@@ -188,26 +190,28 @@ function SimpleTable(_a) {
188
190
  var StyledCellWrapper = cell.isRowHeader
189
191
  ? styled_1.StyledSimpleTableHeaderCell
190
192
  : styled_1.StyledSimpleTableCell;
191
- return (react_1.default.createElement(StyledCellWrapper, { key: cell.id, id: "kp_table__cell__".concat(cell.id), readOnly: readOnly || cell.readOnly, style: {
193
+ return (react_1.default.createElement(StyledCellWrapper, __assign({ key: cell.id, id: "kp_table__cell__".concat(cell.id), readOnly: readOnly || cell.readOnly, style: {
192
194
  color: greyColor100,
193
195
  width: "".concat(cellWidth),
194
196
  borderRight: (colResizeState === null || colResizeState === void 0 ? void 0 : colResizeState.colId) === "col_".concat(cellIdx) &&
195
197
  "2px solid ".concat((0, utilsOolib_1.getPrimaryColor100)(theme === null || theme === void 0 ? void 0 : theme.colors)),
196
- }, actionsActiveOnRow: actionsActiveOnRow, colIdx: cellIdx, rowIdx: rowIdx, totRows: value.data.length, actionsActiveOnCol: actionsActiveOnCol, onMouseEnter: function (e) {
197
- setHoveredRowAndCol({
198
- rowIdx: rowIdx,
199
- colIdx: cellIdx,
200
- });
201
- },
202
- // onMouseOver={e => {
203
- // setHoveredRowAndCol(e.target.getBoundingClientRect())
204
- // }}
205
- onMouseDown: function (e) {
206
- initColResizeState(e, { colId: "col_".concat(cellIdx) });
207
- }, onMouseOut: function (e) { return resetDragZoneIndicator(__assign({ e: e }, (cell.isRowHeader ? { borderStyleInactive: "2px solid ".concat(themes_1.colors.greyColor10) } : {}))); }, onMouseMove: function (e) { return hideShowDragZoneIndicator(__assign({ e: e }, (cell.isRowHeader ? {
208
- borderStyleInactive: "2px solid ".concat(themes_1.colors.greyColor10),
209
- borderStyleActive: "2px solid ".concat((0, utilsOolib_1.getPrimaryColor100)(theme === null || theme === void 0 ? void 0 : theme.colors))
210
- } : {}))); }, tabIndex: 0 },
198
+ }, actionsActiveOnRow: actionsActiveOnRow, colIdx: cellIdx, rowIdx: rowIdx, totRows: value.data.length, actionsActiveOnCol: actionsActiveOnCol }, (enableColResizeActions
199
+ ? {
200
+ onMouseEnter: function (e) {
201
+ setHoveredRowAndCol({
202
+ rowIdx: rowIdx,
203
+ colIdx: cellIdx,
204
+ });
205
+ },
206
+ onMouseDown: function (e) {
207
+ initColResizeState(e, { colId: "col_".concat(cellIdx) });
208
+ },
209
+ onMouseOut: function (e) { return resetDragZoneIndicator(__assign({ e: e }, (cell.isRowHeader ? { borderStyleInactive: "2px solid ".concat(themes_1.colors.greyColor10) } : {}))); },
210
+ onMouseMove: function (e) { return hideShowDragZoneIndicator(__assign({ e: e }, (cell.isRowHeader ? {
211
+ borderStyleInactive: "2px solid ".concat(themes_1.colors.greyColor10),
212
+ borderStyleActive: "2px solid ".concat((0, utilsOolib_1.getPrimaryColor100)(theme === null || theme === void 0 ? void 0 : theme.colors))
213
+ } : {}))); }
214
+ } : {}), { tabIndex: 0 }),
211
215
  react_1.default.createElement(ColActionsMenu_1.ColActionsMenu, __assign({}, {
212
216
  value: value,
213
217
  colIdx: cellIdx,
@@ -254,6 +258,7 @@ function SimpleTable(_a) {
254
258
  convertToRichText: convertToRichText,
255
259
  rowIdx: rowIdx
256
260
  }),
261
+ enableColResizeActions: false //because pre-frozen column cannot be resized by user
257
262
  }),
258
263
  row.cellData.map(function (cell, cellIdx) { return genCell({ cell: cell, cellIdx: cellIdx, rowIdx: rowIdx }); })));
259
264
  };
@@ -327,7 +332,7 @@ function SimpleTable(_a) {
327
332
  }),
328
333
  value.data.map(function (row, rowIdx) { return genRow({ row: row, rowIdx: rowIdx }); })),
329
334
  !readOnly && enableRowActions && (react_1.default.createElement(AddRowColButtons_1.AddRowButton, { onClick: function () { return (0, handleRowActions_1.handleAddRow)(value, props); } }))),
330
- !readOnly && enableColActions && (react_1.default.createElement(AddRowColButtons_1.AddColButton, { addColButtonWidth: addColButtonWidth, onClick: function () {
335
+ !readOnly && enableColActions && (react_1.default.createElement(AddRowColButtons_1.AddColButton, { enableRowActions: enableRowActions, addColButtonWidth: addColButtonWidth, onClick: function () {
331
336
  return (0, handleColActions_1.handleAddCol)({ value: value, onChange: onChange, id: id, defaultColWidth: defaultColWidth });
332
337
  } }))))));
333
338
  }
package/dist/components/SimpleTable/useResizeTableColumns.js CHANGED
@@ -61,7 +61,7 @@ var useResizeTableColumns = function (_a) {
61
61
  if (!colResizeState) {
62
62
  if (isInDragZone(e)) {
63
63
  e.currentTarget.style.borderRight = borderStyleActive;
64
- e.currentTarget.style.cursor = 'col-resize';
64
+ e.currentTarget.style.setProperty('cursor', 'col-resize', 'important'); // using the setProperty approach only so that we can apply !important
65
65
  }
66
66
  else {
67
67
  e.currentTarget.style.borderRight = borderStyleInactive;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "oolib",
3
- "version": "2.90.0",
3
+ "version": "2.90.2",
4
4
  "description": " OKE Component Library",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",