oolib 2.17.7 → 2.17.10

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

@@ -1,8 +1,8 @@
-export function ActionMenu({ icon, invert, actions, align, buttonText, sideEffect }: {
+export function ActionMenu({ icon, invert, actions, align, iconSize, sideEffect }: {
     icon?: string;
     invert: any;
     actions: any;
     align?: string;
-    buttonText: any;
+    iconSize?: string;
     sideEffect: any;
 }): JSX.Element;

package/dist/components/ActionMenu/index.js

@@ -42,21 +42,21 @@ var utils_1 = require("./utils");
 var styled_1 = require("./styled");
 var ActionMenu = function (_a) {
     var _b, _c;
-    var _d = _a.icon, icon = _d === void 0 ? 'DotsThree' : _d, invert = _a.invert, actions = _a.actions, _e = _a.align, align = _e === void 0 ? 'right' : _e, buttonText = _a.buttonText, sideEffect = _a.sideEffect;
+    var _d = _a.icon, icon = _d === void 0 ? 'DotsThree' : _d, //most likely will never change
+    invert = _a.invert, actions = _a.actions, _e = _a.align, align = _e === void 0 ? 'right' : _e, _f = _a.iconSize, iconSize = _f === void 0 ? 'S' : _f, sideEffect = _a.sideEffect // if you want this click to trigger a sideeffect in parent. e.g in table elem we set table overflow to unset when action menu is open
+    ;
     var actionMenuRef = (0, react_1.useRef)(null);
     var optionsWrapperRef = (0, react_1.useRef)(null);
-    var _f = (0, react_1.useState)(false), showActions = _f[0], setShowActions = _f[1];
+    var _g = (0, react_1.useState)(false), showActions = _g[0], setShowActions = _g[1];
     (0, utils_1.useTrackFocus)(actionMenuRef, setShowActions);
     (0, react_1.useEffect)(function () {
-        // if you want this click to trigger a sideeffect in parent.
-        //e.g in table elem we set table overflow to unset when action menu is open
         sideEffect && sideEffect(showActions);
     }, [showActions]);
     if (!actions || actions.length === 0)
         return null;
     var getOpsRect = function () { var _a; return (_a = optionsWrapperRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect(); };
     return (react_1.default.createElement(styled_1.StyledActionMenu, { ref: actionMenuRef },
-        react_1.default.createElement(Buttons_1.ButtonGhost, { icon: icon, iconSize: 'M', children: buttonText, invert: invert, onClick: function (e) {
+        react_1.default.createElement(Buttons_1.ButtonGhost, { icon: icon, iconSize: iconSize, invert: invert, onClick: function (e) {
                 e.stopPropagation();
                 setShowActions(!showActions);
             }, active: showActions }),
@@ -69,7 +69,7 @@ var ActionMenu = function (_a) {
         }),
             react_1.default.createElement(styled_1.StyledOptionsWrapper, { invert: invert, align: align, ref: optionsWrapperRef }, actions.map(function (action) {
                 var ActionButton = action.buttonComp || styled_1.StyledOption;
-                return (react_1.default.createElement(ActionButton, __assign({ style: { justifyContent: 'left' } }, action, { onClick: function (ev) {
+                return (react_1.default.createElement(ActionButton, __assign({}, action, { onClick: function (ev) {
                         action.onClick && action.onClick(ev);
                         setShowActions(false);
                     }, key: action.display, invert: invert }),

package/dist/components/ActionMenu/styled.js

@@ -33,40 +33,52 @@ var themes_1 = require("../../themes");
 var mixins_1 = require("../../themes/mixins");
 var greyColor5 = themes_1.colors.greyColor5, white = themes_1.colors.white, greyColor10 = themes_1.colors.greyColor10, greyColor70 = themes_1.colors.greyColor70, greyColor100 = themes_1.colors.greyColor100, greyColor80 = themes_1.colors.greyColor80;
 var pointerHeight = 10;
+/**
+ * we add bottom, left and right margin on the StyledOptionsWrapper
+ * & increase the width by 20 and height by 10 of StyledActionsDropMenu
+ * so that the dropshadow shows (since StyledActionsDropMenu has overflow hidden)
+ *
+ * this offset needs to be cancelled by the absolute positioning of StyledActionsDropMenu
+ */
+var offset = 10;
 exports.StyledActionMenu = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  width: max-content;\n"], ["\n  position: relative;\n  width: max-content;\n"])));
-exports.StyledActionsDropMenu = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  position: absolute;\n  bottom: 0;\n  transform: translateY(100%);\n  z-index: 1001;\n  transform-origin: left top;\n  ", ";\n  overflow: hidden;\n  width: ", ";\n  height: ", ";\n  ", "\n  box-shadow: 2px 2px 10px   rgba(0, 0, 0, 0.05);\n  \n"], ["\n  position: absolute;\n  bottom: 0;\n  transform: translateY(100%);\n  z-index: 1001;\n  transform-origin: left top;\n  ", ";\n  overflow: hidden;\n  width: ", ";\n  height: ", ";\n  ", "\n  box-shadow: 2px 2px 10px   rgba(0, 0, 0, 0.05);\n  \n"])), (0, mixins_1.transition)("height"), function (_a) {
+exports.StyledActionsDropMenu = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  position: absolute;\n  bottom: 0;\n  transform: translateY(100%);\n  z-index: 1001;\n  transform-origin: left top;\n  ", ";\n  overflow: hidden;\n  width: ", ";\n  height: ", ";\n  ", "\n"], ["\n  position: absolute;\n  bottom: 0;\n  transform: translateY(100%);\n  z-index: 1001;\n  transform-origin: left top;\n  ", ";\n  overflow: hidden;\n  width: ", ";\n  height: ", ";\n  ", "\n"])), (0, mixins_1.transition)("height"), function (_a) {
     var optionsWidth = _a.optionsWidth;
-    return optionsWidth + "px";
+    return (optionsWidth + (offset * 2)) + "px";
 }, function (_a) {
     var showActions = _a.showActions, optionsHeight = _a.optionsHeight;
-    return showActions ? (optionsHeight + pointerHeight) + "px" || "auto" : 0;
+    return showActions ? (optionsHeight + pointerHeight + offset) + "px" || "auto" : 0;
 }, function (_a) {
     var align = _a.align;
     return align == "center"
-        ? (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n          left: 2rem;\n          transform: translate(-50%, 100%);\n        "], ["\n          left: 2rem;\n          transform: translate(-50%, 100%);\n        "]))) : (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n          ", ": 0;\n        "], ["\n          ", ": 0;\n        "])), align);
+        ? (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n          left: 1.5rem;\n          transform: translate(-50%, 100%);\n        "], ["\n          left: 1.5rem;\n          transform: translate(-50%, 100%);\n        "]))) : (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n          ", ": ", "px;\n        "], ["\n          ", ": ", "px;\n        "])), align, 0 - offset);
 });
-exports.StyledOptionsWrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  position: absolute;\n  bottom: 0;\n  padding: 0.6rem 0;\n  border: 1px solid ", ";\n  background-color: ", ";\n  border-radius: 2px;\n\n  &::after {\n    content: \"\";\n    width: 0;\n    height: 0;\n    position: absolute;\n    bottom: 100%;\n\n    ", "\n\n    border: 1rem solid transparent;\n    border-bottom: 1rem solid\n      ", ";\n  }\n"], ["\n  position: absolute;\n  bottom: 0;\n  padding: 0.6rem 0;\n  border: 1px solid ", ";\n  background-color: ", ";\n  border-radius: 2px;\n\n  &::after {\n    content: \"\";\n    width: 0;\n    height: 0;\n    position: absolute;\n    bottom: 100%;\n\n    ", "\n\n    border: 1rem solid transparent;\n    border-bottom: 1rem solid\n      ", ";\n  }\n"])), function (_a) {
+exports.StyledOptionsWrapper = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  position: absolute;\n  bottom: 10px;\n  padding: 0.6rem 0;\n  border: 1px solid ", ";\n  background-color: ", ";\n  border-radius: 2px;\n  box-shadow: 2px 2px 10px   rgba(0, 0, 0, 0.05);\n  margin: 0 ", "px;\n  \n  //pointer outline\n  &::after {\n    content: \"\";\n    width: 0;\n    height: 0;\n    position: absolute;\n    bottom: 100%;\n\n    ", "\n\n    border: 1rem solid transparent;\n    border-bottom: 1rem solid\n      ", ";\n  }\n\n  //pointer fill\n  &::before {\n    content: \"\";\n    width: 0;\n    height: 0;\n    position: absolute;\n    bottom: 100%;\n    ", "\n    border: 0.85rem solid transparent;\n    border-bottom: 0.85rem solid \n      ", ";\n    z-index: 1;\n  }\n"], ["\n  position: absolute;\n  bottom: 10px;\n  padding: 0.6rem 0;\n  border: 1px solid ", ";\n  background-color: ", ";\n  border-radius: 2px;\n  box-shadow: 2px 2px 10px   rgba(0, 0, 0, 0.05);\n  margin: 0 ", "px;\n  \n  //pointer outline\n  &::after {\n    content: \"\";\n    width: 0;\n    height: 0;\n    position: absolute;\n    bottom: 100%;\n\n    ", "\n\n    border: 1rem solid transparent;\n    border-bottom: 1rem solid\n      ", ";\n  }\n\n  //pointer fill\n  &::before {\n    content: \"\";\n    width: 0;\n    height: 0;\n    position: absolute;\n    bottom: 100%;\n    ", "\n    border: 0.85rem solid transparent;\n    border-bottom: 0.85rem solid \n      ", ";\n    z-index: 1;\n  }\n"])), function (_a) {
     var invert = _a.invert;
     return (invert ? greyColor70 : greyColor5);
 }, function (_a) {
     var invert = _a.invert;
     return (invert ? greyColor80 : white);
-}, function (_a) {
+}, offset, function (_a) {
     var align = _a.align;
     return align === "center"
-        ? (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n            left: 50%;\n            transform: translateX(-50%);\n          "], ["\n            left: 50%;\n            transform: translateX(-50%);\n          "]))) : (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n            ", ": 1rem;\n          "], ["\n            ", ": 1rem;\n          "])), align);
+        ? (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n            left: 50%;\n            transform: translateX(-50%);\n          "], ["\n            left: 50%;\n            transform: translateX(-50%);\n          "]))) : (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n            ", ": 0.5rem;\n          "], ["\n            ", ": 0.5rem;\n          "])), align);
 }, function (_a) {
     var invert = _a.invert;
-    return (invert ? greyColor80 : greyColor5);
-});
-exports.StyledOption = styled_components_1.default.button(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  white-space: nowrap;\n  border: none;\n  cursor: pointer;\n  width: 100%;\n  text-align: ", ";\n  padding: 1rem 1.6rem;\n  background-color: transparent;\n  color: ", ";\n  ", ";\n  &:hover {\n    background-color: ", ";\n  }\n"], ["\n  white-space: nowrap;\n  border: none;\n  cursor: pointer;\n  width: 100%;\n  text-align: ", ";\n  padding: 1rem 1.6rem;\n  background-color: transparent;\n  color: ", ";\n  ", ";\n  &:hover {\n    background-color: ", ";\n  }\n"])), function (_a) {
+    return (invert ? greyColor70 : greyColor5);
+}, function (_a) {
     var align = _a.align;
-    return (align === "center" ? "center" : "left");
+    return align === "center"
+        ? (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n            left: 50%;\n            transform: translateX(-50%);\n          "], ["\n            left: 50%;\n            transform: translateX(-50%);\n          "]))) : (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n            ", ": 0.65rem;\n          "], ["\n            ", ": 0.65rem;\n          "])), align);
 }, function (_a) {
+    var invert = _a.invert;
+    return (invert ? greyColor80 : white);
+});
+exports.StyledOption = styled_components_1.default.button(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  white-space: nowrap;\n  border: none;\n  cursor: pointer;\n  width: 100%;\n  text-align: left;\n  padding: 0.25rem 1.2rem;\n  background-color: transparent;\n  color: ", ";\n  ", ";\n  &:hover {\n    background-color: ", ";\n  }\n"], ["\n  white-space: nowrap;\n  border: none;\n  cursor: pointer;\n  width: 100%;\n  text-align: left;\n  padding: 0.25rem 1.2rem;\n  background-color: transparent;\n  color: ", ";\n  ", ";\n  &:hover {\n    background-color: ", ";\n  }\n"])), function (_a) {
     var invert = _a.invert;
     return (invert ? white : greyColor100);
 }, (0, mixins_1.transition)("background-color"), function (_a) {
     var invert = _a.invert;
     return invert ? greyColor70 : greyColor10;
 });
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10;

package/dist/components/Buttons/index.js

@@ -51,8 +51,10 @@ var ButtonStyledWrapper = function (_a) {
     var displayText = (link === null || link === void 0 ? void 0 : link.displayText) || children || value;
     var composition = (icon || iconAfter) && displayText
         ? "icon+text"
-        : !displayText && "iconOnly";
-    var size = composition === 'icon+text'
+        : !displayText
+            ? "iconOnly"
+            : "textOnly";
+    var size = ['icon+text', 'textOnly'].indexOf(composition) !== -1
         ? (S && 'S') || 'M' //icon+text defaults to 'M'
         : (M && 'M') || 'S'; //iconOnly defaults to 'S'
     /**

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

@@ -1,6 +1,13 @@
-export function Container({ children, className, style, noPadding }: {
+export function Comp({ children, className, style, noPadding }: {
     children: any;
     className: any;
     style: any;
     noPadding: any;
-}): JSX.Element;
+}, ref: any): JSX.Element;
+export const Container: React.ForwardRefExoticComponent<{
+    children: any;
+    className: any;
+    style: any;
+    noPadding: any;
+} & React.RefAttributes<any>>;
+import React from "react";

package/dist/components/Container/index.js

@@ -10,15 +10,36 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Container = void 0;
-var react_1 = __importDefault(require("react"));
+exports.Container = exports.Comp = void 0;
+var react_1 = __importStar(require("react"));
 var index_styled_1 = require("./index.styled");
-var Container = function (_a) {
+var Comp = function (_a, ref) {
     var children = _a.children, className = _a.className, style = _a.style, noPadding = _a.noPadding;
-    return (react_1.default.createElement(index_styled_1.StyledContainer, { className: className || '', style: __assign(__assign({}, (noPadding ? { padding: 0 } : {})), style) }, children));
+    return (react_1.default.createElement(index_styled_1.StyledContainer, { ref: ref, className: className || '', style: __assign(__assign({}, (noPadding ? { padding: 0 } : {})), style) }, children));
 };
-exports.Container = Container;
+exports.Comp = Comp;
+exports.Container = (0, react_1.forwardRef)(exports.Comp);

package/package.json

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