oolib 2.237.5 → 2.238.0

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 (8) hide show
  1. package/dist/components/Modals/Modal/comps/ModalHeaderStyle1/index.js +5 -5
  2. package/dist/components/Modals/Modal/comps/ModalHeaderStyle2/index.js +5 -6
  3. package/dist/components/Modals/Modal/index.js +1 -1
  4. package/dist/components/Modals/Modal/styled.js +9 -5
  5. package/dist/v2/components/Tooltip/index.d.ts +1 -1
  6. package/dist/v2/components/Tooltip/index.js +3 -3
  7. package/dist/v2/components/Tooltip/types.d.ts +7 -0
  8. package/package.json +1 -1
package/dist/components/Modals/Modal/comps/ModalHeaderStyle1/index.js CHANGED
@@ -5,9 +5,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
5
5
  Object.defineProperty(exports, "__esModule", { value: true });
6
6
  exports.ModalHeaderStyle1 = void 0;
7
7
  var react_1 = __importDefault(require("react"));
8
- var Buttons_1 = require("../../../../Buttons");
8
+ var Buttons_1 = require("../../../../../v2/components/Buttons");
9
9
  var OKELink_1 = require("../../../../OKELink");
10
- var Typo_1 = require("../../../../Typo");
10
+ var Typo2_1 = require("../../../../../v2/components/Typo2");
11
11
  var styled_1 = require("../../styled");
12
12
  var ModalHeaderStyle1 = function (_a) {
13
13
  var title = _a.title, linkTo = _a.linkTo, onClose = _a.onClose, setAnimPos = _a.setAnimPos, initAnimPos = _a.initAnimPos, invert = _a.invert, _b = _a.dynamicHeaderHeight, dynamicHeaderHeight = _b === void 0 ? false : _b;
@@ -18,9 +18,9 @@ var ModalHeaderStyle1 = function (_a) {
18
18
  alignItems: "center",
19
19
  } },
20
20
  !linkTo && title && (react_1.default.createElement("div", null,
21
- react_1.default.createElement(Typo_1.SANS_3, { invert: invert, semibold: true }, title))),
22
- linkTo && (react_1.default.createElement(Typo_1.SANS_4, { semibold: true },
21
+ react_1.default.createElement(Typo2_1.UI_BODY_SEMIBOLD, { color: invert ? 'white' : undefined }, title))),
22
+ linkTo && (react_1.default.createElement(Typo2_1.UI_BODY_SEMIBOLD, null,
23
23
  react_1.default.createElement(OKELink_1.OKELink, { iconAfter: "ArrowLineUpRight", linkType: "action", onClick: function () { return window.open(linkTo); }, iconSize: 15, color: "black", invert: invert }, title)))),
24
- onClose && (react_1.default.createElement(Buttons_1.ButtonGhost, { invert: invert, icon: "X", onClick: function () { return setAnimPos(initAnimPos); } }))));
24
+ onClose && (react_1.default.createElement(Buttons_1.ButtonGhost, { icon: "X", iconColor: invert ? 'white' : undefined, onClick: function () { return setAnimPos(initAnimPos); } }))));
25
25
  };
26
26
  exports.ModalHeaderStyle1 = ModalHeaderStyle1;
package/dist/components/Modals/Modal/comps/ModalHeaderStyle2/index.js CHANGED
@@ -5,20 +5,19 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
5
5
  Object.defineProperty(exports, "__esModule", { value: true });
6
6
  exports.ModalHeaderStyle2 = void 0;
7
7
  var react_1 = __importDefault(require("react"));
8
- var Buttons_1 = require("../../../../Buttons");
9
- var Typo_1 = require("../../../../Typo");
10
- var themes_1 = require("../../../../../themes");
8
+ var Buttons_1 = require("../../../../../v2/components/Buttons");
9
+ var Typo2_1 = require("../../../../../v2/components/Typo2");
10
+ var themes_1 = require("../../../../../v2/themes");
11
11
  var DisplayIcon_1 = require("../../../../../utils/comps/DisplayIcon");
12
12
  var styled_1 = require("../../styled");
13
- var greyColor80 = themes_1.colors.greyColor80;
14
13
  var ModalHeaderStyle2 = function (_a) {
15
14
  var title = _a.title, subtitle = _a.subtitle, onClose = _a.onClose, setAnimPos = _a.setAnimPos, initAnimPos = _a.initAnimPos;
16
15
  return (react_1.default.createElement(styled_1.StyledModalHeaderStyle2Container, null,
17
16
  react_1.default.createElement("div", { style: { position: "absolute", top: "-2.5rem" } },
18
17
  react_1.default.createElement(DisplayIcon_1.DisplayIcon, { size: 20, icon: "ModalBulbIcon" })),
19
18
  react_1.default.createElement(styled_1.StyledModalHeaderStyle2Title, null,
20
- react_1.default.createElement(Typo_1.SANS_4_5, { semibold: true, capitalize: true }, title || "title"),
21
- subtitle ? (react_1.default.createElement(Typo_1.SANS_3_4, { semibold: true, capitalize: true, style: { flexGrow: "1" }, color: greyColor80 }, subtitle)) : null,
19
+ react_1.default.createElement(Typo2_1.UI_TITLE, { capitalize: true }, title || "title"),
20
+ subtitle ? (react_1.default.createElement(Typo2_1.UI_BODY_SEMIBOLD, { capitalize: true, style: { flexGrow: "1" }, color: themes_1.colors.grey80 }, subtitle)) : null,
22
21
  onClose && (react_1.default.createElement(Buttons_1.ButtonGhost, { icon: "X", onClick: function () { return setAnimPos(initAnimPos); } })))));
23
22
  };
24
23
  exports.ModalHeaderStyle2 = ModalHeaderStyle2;
package/dist/components/Modals/Modal/index.js CHANGED
@@ -53,7 +53,7 @@ var useScreenWidth_1 = require("../../../utils/customHooks/useScreenWidth");
53
53
  var ModalHeaderStyle1_1 = require("./comps/ModalHeaderStyle1");
54
54
  var ModalHeaderStyle2_1 = require("./comps/ModalHeaderStyle2");
55
55
  var styled_1 = require("./styled");
56
- var Buttons_1 = require("../../Buttons");
56
+ var Buttons_1 = require("../../../v2/components/Buttons");
57
57
  var Divider_1 = require("../../Divider");
58
58
  /**
59
59
  * @component Renders a modal component with customizable title, content, and actions.
package/dist/components/Modals/Modal/styled.js CHANGED
@@ -40,12 +40,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
40
40
  exports.StyledModalHeaderStyle2Title = exports.StyledModalHeaderStyle2Container = exports.StyledActionButtonsWrapper = exports.StyledModalLargeBody = exports.StyledModalBodyWrapper = exports.StyledModalLargeHeader = exports.StyledModalLargeContentWrapper = exports.StyledModalLargeBgColor = exports.StyledModalLargeBg = void 0;
41
41
  var mixins_1 = require("../../../themes/mixins");
42
42
  var themes_1 = require("../../../themes");
43
+ var themes_2 = require("../../../v2/themes");
43
44
  var framer_motion_1 = require("framer-motion");
44
45
  var styled_components_1 = __importStar(require("styled-components"));
45
- var black_opacity80 = themes_1.colors.black_opacity80, white = themes_1.colors.white, greyColor5 = themes_1.colors.greyColor5, greyColor15 = themes_1.colors.greyColor15;
46
+ var black_opacity80 = themes_1.colors.black_opacity80, white = themes_1.colors.white;
46
47
  exports.StyledModalLargeBg = (0, styled_components_1.default)(framer_motion_1.motion.div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: 100vw;\n height: 100%;\n position: fixed;\n left: 0;\n bottom: 0;\n z-index: 999999999;\n overflow-y: auto;\n overflow-x: hidden;\n ", " {\n display: flex;\n justify-content: center;\n align-items: center;\n }\n"], ["\n width: 100vw;\n height: 100%;\n position: fixed;\n left: 0;\n bottom: 0;\n z-index: 999999999;\n overflow-y: auto;\n overflow-x: hidden;\n ", " {\n display: flex;\n justify-content: center;\n align-items: center;\n }\n"])), (0, mixins_1.mediaQuery)("sm"));
47
48
  exports.StyledModalLargeBgColor = (0, styled_components_1.default)(framer_motion_1.motion.div)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n background: ", ";\n position: absolute;\n left: 0;\n top: 0;\n width: 100vw;\n height: 100dvh;\n"], ["\n background: ", ";\n position: absolute;\n left: 0;\n top: 0;\n width: 100vw;\n height: 100dvh;\n"])), black_opacity80);
48
- exports.StyledModalLargeContentWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n width: 100%;\n margin-top: 4rem;\n background-color: ", ";\n ", "\n ", " {\n margin-top: 0;\n border: 2px solid ", ";\n width: ", ";\n /* min-height: 50dvh; */\n max-height: 90dvh;\n position: relative;\n display: flex;\n flex-direction: column;\n border-radius: 0.2rem;\n margin: 0 auto;\n }\n"], ["\n width: 100%;\n margin-top: 4rem;\n background-color: ", ";\n ", "\n ", " {\n margin-top: 0;\n border: 2px solid ", ";\n width: ", ";\n /* min-height: 50dvh; */\n max-height: 90dvh;\n position: relative;\n display: flex;\n flex-direction: column;\n border-radius: 0.2rem;\n margin: 0 auto;\n }\n"])), white, function (_a) {
49
+ exports.StyledModalLargeContentWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n width: 100%;\n margin-top: 4rem;\n background-color: ", ";\n ", "\n ", " {\n margin-top: 0;\n border: 2px solid ", ";\n width: ", ";\n /* min-height: 50dvh; */\n max-height: 90dvh;\n position: relative;\n display: flex;\n flex-direction: column;\n border-radius: 16px;\n margin: 0 auto;\n overflow: hidden;\n }\n"], ["\n width: 100%;\n margin-top: 4rem;\n background-color: ", ";\n ", "\n ", " {\n margin-top: 0;\n border: 2px solid ", ";\n width: ", ";\n /* min-height: 50dvh; */\n max-height: 90dvh;\n position: relative;\n display: flex;\n flex-direction: column;\n border-radius: 16px;\n margin: 0 auto;\n overflow: hidden;\n }\n"])), white, function (_a) {
49
50
  var takeFullScreenOnScroll = _a.takeFullScreenOnScroll;
50
51
  return takeFullScreenOnScroll
51
52
  ? (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n /* min-height: calc(100dvh - 4rem); */\n "], ["\n /* min-height: calc(100dvh - 4rem); */\n "]))) : (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n height: calc(100dvh - 4rem);\n display: flex;\n flex-direction: column;\n "], ["\n height: calc(100dvh - 4rem);\n display: flex;\n flex-direction: column;\n "])));
@@ -53,9 +54,12 @@ exports.StyledModalLargeContentWrapper = styled_components_1.default.div(templat
53
54
  var desktopWidth = _a.desktopWidth;
54
55
  return desktopWidth;
55
56
  });
56
- exports.StyledModalLargeHeader = styled_components_1.default.header(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n background-color: ", ";\n /* width: 100%; */\n height: ", ";\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 0.5rem 2rem;\n position: sticky;\n top: 0;\n z-index: 100;\n"], ["\n background-color: ", ";\n /* width: 100%; */\n height: ", ";\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 0.5rem 2rem;\n position: sticky;\n top: 0;\n z-index: 100;\n"])), function (_a) {
57
+ exports.StyledModalLargeHeader = styled_components_1.default.header(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n background-color: ", ";\n border-bottom: 1px solid ", ";\n height: ", ";\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 0.5rem 2rem;\n position: sticky;\n top: 0;\n z-index: 100;\n"], ["\n background-color: ", ";\n border-bottom: 1px solid ", ";\n height: ", ";\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 0.5rem 2rem;\n position: sticky;\n top: 0;\n z-index: 100;\n"])), function (_a) {
57
58
  var invert = _a.invert;
58
- return (invert ? themes_1.colors.greyColor90 : greyColor5);
59
+ return (invert ? themes_1.colors.greyColor90 : white);
60
+ }, function (_a) {
61
+ var invert = _a.invert;
62
+ return (invert ? 'transparent' : themes_2.colors.grey10);
59
63
  }, function (_a) {
60
64
  var dynamicHeaderHeight = _a.dynamicHeaderHeight;
61
65
  return (dynamicHeaderHeight ? 'unset' : '4rem');
@@ -72,6 +76,6 @@ exports.StyledActionButtonsWrapper = styled_components_1.default.div(templateObj
72
76
  var alignActions = _a.alignActions;
73
77
  return (alignActions === "right" ? "flex-end" : "");
74
78
  });
75
- exports.StyledModalHeaderStyle2Container = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n display: flex;\n border-bottom: 1px solid ", ";\n padding: 1rem 2rem;\n position: relative;\n"], ["\n display: flex;\n border-bottom: 1px solid ", ";\n padding: 1rem 2rem;\n position: relative;\n"])), greyColor15);
79
+ exports.StyledModalHeaderStyle2Container = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n display: flex;\n border-bottom: 1px solid ", ";\n padding: 1rem 2rem;\n position: relative;\n background-color: ", ";\n"], ["\n display: flex;\n border-bottom: 1px solid ", ";\n padding: 1rem 2rem;\n position: relative;\n background-color: ", ";\n"])), themes_2.colors.grey10, white);
76
80
  exports.StyledModalHeaderStyle2Title = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n padding-top: 1rem;\n display: flex;\n flex-grow: 1;\n gap: 1.5rem;\n justify-content: space-between;\n align-items: center;\n"], ["\n padding-top: 1rem;\n display: flex;\n flex-grow: 1;\n gap: 1.5rem;\n justify-content: space-between;\n align-items: center;\n"])));
77
81
  var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12;
package/dist/v2/components/Tooltip/index.d.ts CHANGED
@@ -1,3 +1,3 @@
1
1
  import React from 'react';
2
2
  import { TooltipProps } from './types';
3
- export default function Tooltip({ text, heading, primaryContent, secondaryContent, progressiveDelay, progressiveGap, children, placement, showPointer, showDelay, hideDelay, animation, followCursor, cursorOffset, invert, wrapperDisplay, trigger, style, }: TooltipProps): React.JSX.Element;
3
+ export default function Tooltip({ text, heading, primaryContent, secondaryContent, progressiveDelay, progressiveGap, children, placement, showPointer, showDelay, hideDelay, animation, followCursor, cursorOffset, invert, wrapperDisplay, wrapperStyle, trigger, style, }: TooltipProps): React.JSX.Element;
package/dist/v2/components/Tooltip/index.js CHANGED
@@ -53,7 +53,7 @@ var utils_1 = require("./utils");
53
53
  var styled_1 = require("./styled");
54
54
  var CURSOR_HEIGHT = 20;
55
55
  function Tooltip(_a) {
56
- var text = _a.text, heading = _a.heading, primaryContent = _a.primaryContent, secondaryContent = _a.secondaryContent, _b = _a.progressiveDelay, progressiveDelay = _b === void 0 ? 600 : _b, _c = _a.progressiveGap, progressiveGap = _c === void 0 ? 8 : _c, children = _a.children, _d = _a.placement, placement = _d === void 0 ? 'top' : _d, _e = _a.showPointer, showPointer = _e === void 0 ? true : _e, _f = _a.showDelay, showDelay = _f === void 0 ? 600 : _f, _g = _a.hideDelay, hideDelay = _g === void 0 ? 0 : _g, _h = _a.animation, animation = _h === void 0 ? 'fade' : _h, _j = _a.followCursor, followCursor = _j === void 0 ? false : _j, _k = _a.cursorOffset, cursorOffset = _k === void 0 ? 10 : _k, _l = _a.invert, invert = _l === void 0 ? false : _l, wrapperDisplay = _a.wrapperDisplay, _m = _a.trigger, trigger = _m === void 0 ? 'hover' : _m, style = _a.style;
56
+ var text = _a.text, heading = _a.heading, primaryContent = _a.primaryContent, secondaryContent = _a.secondaryContent, _b = _a.progressiveDelay, progressiveDelay = _b === void 0 ? 600 : _b, _c = _a.progressiveGap, progressiveGap = _c === void 0 ? 8 : _c, children = _a.children, _d = _a.placement, placement = _d === void 0 ? 'top' : _d, _e = _a.showPointer, showPointer = _e === void 0 ? true : _e, _f = _a.showDelay, showDelay = _f === void 0 ? 600 : _f, _g = _a.hideDelay, hideDelay = _g === void 0 ? 0 : _g, _h = _a.animation, animation = _h === void 0 ? 'fade' : _h, _j = _a.followCursor, followCursor = _j === void 0 ? false : _j, _k = _a.cursorOffset, cursorOffset = _k === void 0 ? 10 : _k, _l = _a.invert, invert = _l === void 0 ? false : _l, wrapperDisplay = _a.wrapperDisplay, wrapperStyle = _a.wrapperStyle, _m = _a.trigger, trigger = _m === void 0 ? 'hover' : _m, style = _a.style;
57
57
  var bgColor = invert ? __1.colors2.white : __1.colors2.black;
58
58
  var textColor = invert ? __1.colors2.black : __1.colors2.white;
59
59
  var resolvedPrimaryContent = (0, utils_1.resolvePrimaryContent)(text, heading, primaryContent);
@@ -192,7 +192,7 @@ function Tooltip(_a) {
192
192
  ? "0 0 ".concat(utils_1.BORDER_RADIUS, " ").concat(utils_1.BORDER_RADIUS)
193
193
  : utils_1.BORDER_RADIUS;
194
194
  return (react_1.default.createElement(react_1.default.Fragment, null,
195
- react_1.default.createElement(styled_1.StyledInlineWrapper, { ref: containerRef, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onMouseMove: handleMouseMove, "$display": wrapperDisplay }, children),
195
+ react_1.default.createElement(styled_1.StyledInlineWrapper, { ref: containerRef, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onMouseMove: handleMouseMove, "$display": wrapperDisplay, style: wrapperStyle }, children),
196
196
  isOpen && (react_1.default.createElement(react_2.FloatingPortal, null,
197
197
  react_1.default.createElement(styled_1.StyledCursorTooltipWrapper, { ref: tooltipRef, style: __assign(__assign({}, cursorTooltipStyle), style), "$gap": progressiveGap },
198
198
  react_1.default.createElement(styled_1.StyledTooltipContent, { "$bgColor": bgColor, "$textColor": textColor, "$borderRadius": cursorBorderRadius }, resolvedPrimaryContent && (0, utils_1.renderContent)(resolvedPrimaryContent)),
@@ -201,7 +201,7 @@ function Tooltip(_a) {
201
201
  var isVertical = placement.startsWith('top') || placement.startsWith('bottom');
202
202
  var secondaryFirst = placement.startsWith('top') || placement.startsWith('left');
203
203
  return (react_1.default.createElement(react_1.default.Fragment, null,
204
- react_1.default.createElement(styled_1.StyledInlineWrapper, __assign({ ref: refs.setReference }, getReferenceProps({ onClick: handleClick }), { "$display": wrapperDisplay }), children),
204
+ react_1.default.createElement(styled_1.StyledInlineWrapper, __assign({ ref: refs.setReference }, getReferenceProps({ onClick: handleClick }), { "$display": wrapperDisplay, style: wrapperStyle }), children),
205
205
  (hasFadeAnimation ? isMounted : isOpen) && (react_1.default.createElement(react_2.FloatingPortal, null,
206
206
  react_1.default.createElement(styled_1.StyledTooltipWrapper, __assign({ ref: refs.setFloating, style: __assign(__assign(__assign({}, floatingStyles), (hasFadeAnimation ? transitionStyles : {})), style), "$isVertical": isVertical, "$gap": progressiveGap }, getFloatingProps()),
207
207
  react_1.default.createElement(styled_1.StyledTooltipContent, { "$bgColor": bgColor, "$textColor": textColor, "$borderRadius": (0, utils_1.getBorderRadius)({
package/dist/v2/components/Tooltip/types.d.ts CHANGED
@@ -53,6 +53,13 @@ export interface TooltipProps {
53
53
  cursorOffset?: number;
54
54
  invert?: boolean;
55
55
  wrapperDisplay?: 'inline-block' | 'block' | 'contents';
56
+ /**
57
+ * Inline style applied to the wrapper around `children` (the floating-ui
58
+ * reference element). Use this to constrain the wrapper's layout — e.g.
59
+ * `{ maxWidth: '100%' }` so an ellipsizing child has something to clamp to.
60
+ * Separate from `style`, which targets the floating tooltip itself.
61
+ */
62
+ wrapperStyle?: React.CSSProperties;
56
63
  trigger?: 'hover' | 'click';
57
64
  style?: React.CSSProperties;
58
65
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "oolib",
3
- "version": "2.237.5",
3
+ "version": "2.238.0",
4
4
  "description": " OKE Component Library",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",