@bolio-ui/core 1.1.8 → 2.0.0-alpha.0

package/esm/Tooltip/Tooltip.js

@@ -2,62 +2,62 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _excluded = ["children", "initialVisible", "text", "offset", "placement", "portalClassName", "enterDelay", "leaveDelay", "trigger", "type", "className", "onVisibleChange", "hideArrow", "visible"];
-import _JSXStyle from "../styled-jsx.es.js";
-import React, { useEffect, useMemo, useRef, useState } from 'react';
+import _JSXStyle from "styled-jsx/style";
+import React, { useEffect, useId, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import TooltipContent from './TooltipContent';
 import useClickAway from '../utils/use-click-away';
 import { withScale } from '../use-scale';
 import { getRect } from './helper';
 import useClasses from '../use-classes';
-
-function TooltipComponent(_ref) {
+var TooltipComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var children = _ref.children,
-      _ref$initialVisible = _ref.initialVisible,
-      initialVisible = _ref$initialVisible === void 0 ? false : _ref$initialVisible,
-      _ref$text = _ref.text,
-      text = _ref$text === void 0 ? '' : _ref$text,
-      _ref$offset = _ref.offset,
-      offset = _ref$offset === void 0 ? 12 : _ref$offset,
-      _ref$placement = _ref.placement,
-      placement = _ref$placement === void 0 ? 'top' : _ref$placement,
-      _ref$portalClassName = _ref.portalClassName,
-      portalClassName = _ref$portalClassName === void 0 ? '' : _ref$portalClassName,
-      _ref$enterDelay = _ref.enterDelay,
-      enterDelay = _ref$enterDelay === void 0 ? 100 : _ref$enterDelay,
-      _ref$leaveDelay = _ref.leaveDelay,
-      leaveDelay = _ref$leaveDelay === void 0 ? 150 : _ref$leaveDelay,
-      _ref$trigger = _ref.trigger,
-      trigger = _ref$trigger === void 0 ? 'hover' : _ref$trigger,
-      _ref$type = _ref.type,
-      type = _ref$type === void 0 ? 'default' : _ref$type,
-      _ref$className = _ref.className,
-      className = _ref$className === void 0 ? '' : _ref$className,
-      _ref$onVisibleChange = _ref.onVisibleChange,
-      onVisibleChange = _ref$onVisibleChange === void 0 ? function () {} : _ref$onVisibleChange,
-      _ref$hideArrow = _ref.hideArrow,
-      hideArrow = _ref$hideArrow === void 0 ? false : _ref$hideArrow,
-      customVisible = _ref.visible,
-      props = _objectWithoutProperties(_ref, _excluded);
-
+    _ref$initialVisible = _ref.initialVisible,
+    initialVisible = _ref$initialVisible === void 0 ? false : _ref$initialVisible,
+    _ref$text = _ref.text,
+    text = _ref$text === void 0 ? '' : _ref$text,
+    _ref$offset = _ref.offset,
+    offset = _ref$offset === void 0 ? 12 : _ref$offset,
+    _ref$placement = _ref.placement,
+    placement = _ref$placement === void 0 ? 'top' : _ref$placement,
+    _ref$portalClassName = _ref.portalClassName,
+    portalClassName = _ref$portalClassName === void 0 ? '' : _ref$portalClassName,
+    _ref$enterDelay = _ref.enterDelay,
+    enterDelay = _ref$enterDelay === void 0 ? 100 : _ref$enterDelay,
+    _ref$leaveDelay = _ref.leaveDelay,
+    leaveDelay = _ref$leaveDelay === void 0 ? 150 : _ref$leaveDelay,
+    _ref$trigger = _ref.trigger,
+    trigger = _ref$trigger === void 0 ? 'hover' : _ref$trigger,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? 'default' : _ref$type,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    _ref$onVisibleChange = _ref.onVisibleChange,
+    onVisibleChange = _ref$onVisibleChange === void 0 ? function () {} : _ref$onVisibleChange,
+    _ref$hideArrow = _ref.hideArrow,
+    hideArrow = _ref$hideArrow === void 0 ? false : _ref$hideArrow,
+    customVisible = _ref.visible,
+    props = _objectWithoutProperties(_ref, _excluded);
   var timer = useRef();
-  var ref = useRef(null);
-
+  var innerRef = useRef(null);
+  var tooltipId = useId();
+  useImperativeHandle(ref, function () {
+    return innerRef.current;
+  });
   var _useState = useState(initialVisible),
-      _useState2 = _slicedToArray(_useState, 2),
-      visible = _useState2[0],
-      setVisible = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    visible = _useState2[0],
+    setVisible = _useState2[1];
   var iconOffset = useMemo(function () {
-    if (!(ref !== null && ref !== void 0 && ref.current)) return {
+    if (!innerRef.current) return {
       x: '0.75em',
       y: '0.75em'
     };
-    var rect = getRect(ref);
+    var rect = getRect(innerRef);
     return {
       x: "".concat(rect.width ? rect.width / 2 : 0, "px"),
       y: "".concat(rect.height ? rect.height / 2 : 0, "px")
     };
-  }, [ref === null || ref === void 0 ? void 0 : ref.current]);
+  }, [innerRef.current]);
   var contentProps = {
     type: type,
     visible: visible,
@@ -65,46 +65,43 @@ function TooltipComponent(_ref) {
     placement: placement,
     hideArrow: hideArrow,
     iconOffset: iconOffset,
-    parent: ref,
-    className: portalClassName
+    parent: innerRef,
+    className: portalClassName,
+    id: tooltipId,
+    role: trigger === 'hover' ? 'tooltip' : undefined
   };
-
   var changeVisible = function changeVisible(nextState) {
     var clear = function clear() {
       clearTimeout(timer.current);
       timer.current = undefined;
     };
-
     var handler = function handler(nextState) {
       setVisible(nextState);
       onVisibleChange(nextState);
       clear();
     };
-
     clear();
-
     if (nextState) {
       timer.current = window.setTimeout(function () {
         return handler(true);
       }, enterDelay);
       return;
     }
-
     var leaveDelayWithoutClick = trigger === 'click' ? 0 : leaveDelay;
     timer.current = window.setTimeout(function () {
       return handler(false);
     }, leaveDelayWithoutClick);
   };
-
   var mouseEventHandler = function mouseEventHandler(next) {
     return trigger === 'hover' && changeVisible(next);
   };
-
   var clickEventHandler = function clickEventHandler() {
     return trigger === 'click' && changeVisible(!visible);
   };
-
-  useClickAway(ref, function () {
+  var keyDownHandler = function keyDownHandler(event) {
+    if (event.key === 'Escape' && visible) changeVisible(false);
+  };
+  useClickAway(innerRef, function () {
     return trigger === 'click' && changeVisible(false);
   });
   useEffect(function () {
@@ -112,21 +109,28 @@ function TooltipComponent(_ref) {
     changeVisible(customVisible);
   }, [customVisible]);
   return /*#__PURE__*/React.createElement("div", _extends({
-    ref: ref,
+    ref: innerRef,
     onClick: clickEventHandler,
     onMouseEnter: function onMouseEnter() {
       return mouseEventHandler(true);
     },
     onMouseLeave: function onMouseLeave() {
       return mouseEventHandler(false);
-    }
+    },
+    onFocus: function onFocus() {
+      return mouseEventHandler(true);
+    },
+    onBlur: function onBlur() {
+      return mouseEventHandler(false);
+    },
+    onKeyDown: keyDownHandler,
+    "aria-describedby": trigger === 'hover' && visible ? tooltipId : undefined
   }, props, {
-    className: "jsx-418573366" + " " + (props && props.className != null && props.className || useClasses('tooltip', className) || "")
+    className: "jsx-1653875468" + " " + (props && props.className != null && props.className || useClasses('tooltip', className) || "")
   }), children, /*#__PURE__*/React.createElement(TooltipContent, contentProps, text), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "418573366"
-  }, ".tooltip.jsx-418573366{width:-webkit-max-content;width:-moz-max-content;width:max-content;display:inline-block;}"));
-}
-
+    id: "1653875468"
+  }, ".tooltip.jsx-1653875468{width:-webkit-max-content;width:-moz-max-content;width:max-content;display:inline-block;}"));
+});
 TooltipComponent.displayName = 'BolioUITooltip';
 var Tooltip = withScale(TooltipComponent);
 export default Tooltip;

package/esm/Tooltip/TooltipContent.d.ts

@@ -1,5 +1,5 @@
 import React, { MutableRefObject } from 'react';
-import { Placement, SnippetTypes } from "../utils/prop-types";
+import { Placement, SnippetTypes } from '../utils/prop-types';
 interface Props {
     parent?: MutableRefObject<HTMLElement | null> | undefined;
     placement: Placement;
@@ -9,8 +9,10 @@ interface Props {
     offset: number;
     className?: string;
     iconOffset: TooltipIconOffset;
+    id?: string;
+    role?: string;
 }
-export declare type TooltipIconOffset = {
+export type TooltipIconOffset = {
     x: string;
     y: string;
 };

package/esm/Tooltip/TooltipContent.js

@@ -1,5 +1,5 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import _JSXStyle from "../styled-jsx.es.js";
+import _JSXStyle from "styled-jsx/style";
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import useTheme from '../use-theme';
@@ -13,42 +13,37 @@ import TooltipIcon from './TooltipIcon';
 import useScale from '../use-scale';
 import { getRect } from './helper';
 import useClasses from '../use-classes';
-
 var TooltipContent = function TooltipContent(_ref) {
   var children = _ref.children,
-      parent = _ref.parent,
-      visible = _ref.visible,
-      offset = _ref.offset,
-      iconOffset = _ref.iconOffset,
-      placement = _ref.placement,
-      type = _ref.type,
-      className = _ref.className,
-      hideArrow = _ref.hideArrow;
+    parent = _ref.parent,
+    visible = _ref.visible,
+    offset = _ref.offset,
+    iconOffset = _ref.iconOffset,
+    placement = _ref.placement,
+    type = _ref.type,
+    className = _ref.className,
+    hideArrow = _ref.hideArrow,
+    id = _ref.id,
+    role = _ref.role;
   var theme = useTheme();
-
   var _useScale = useScale(),
-      SCALES = _useScale.SCALES;
-
+    SCALES = _useScale.SCALES;
   var el = usePortal('tooltip');
   var selfRef = useRef(null);
-
   var _useState = useState(defaultTooltipPosition),
-      _useState2 = _slicedToArray(_useState, 2),
-      rect = _useState2[0],
-      setRect = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    rect = _useState2[0],
+    setRect = _useState2[1];
   var colors = useMemo(function () {
     return getColors(type, theme.palette);
   }, [type, theme.palette]);
   var hasShadow = type === 'default';
   var classes = useClasses('tooltip-content', className);
   if (!parent) return null;
-
   var updateRect = function updateRect() {
     var position = getPosition(placement, getRect(parent), offset);
     setRect(position);
   };
-
   useResize(updateRect);
   useClickAnyWhere(function () {
     return updateRect();
@@ -56,16 +51,16 @@ var TooltipContent = function TooltipContent(_ref) {
   useEffect(function () {
     updateRect();
   }, [visible]);
-
   var preventHandler = function preventHandler(event) {
     event.stopPropagation();
     event.nativeEvent.stopImmediatePropagation();
   };
-
   if (!el) return null;
-  return /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement(CssTransition, {
+  return /*#__PURE__*/createPortal(/*#__PURE__*/React.createElement(CssTransition, {
     visible: visible
   }, /*#__PURE__*/React.createElement("div", {
+    id: id,
+    role: role,
     ref: selfRef,
     onClick: preventHandler,
     className: _JSXStyle.dynamic([["3734161695", [iconOffset.x, iconOffset.y, colors.bgColor, rect.top, rect.left, rect.transform, colors.color, theme.layout.radius, hasShadow ? theme.expressiveness.shadowMedium : 'none', SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.font(1), SCALES.pt(0.65), SCALES.pr(0.9), SCALES.pb(0.65), SCALES.pl(0.9)]]]) + " " + (classes || "")
@@ -79,5 +74,4 @@ var TooltipContent = function TooltipContent(_ref) {
     dynamic: [iconOffset.x, iconOffset.y, colors.bgColor, rect.top, rect.left, rect.transform, colors.color, theme.layout.radius, hasShadow ? theme.expressiveness.shadowMedium : 'none', SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.font(1), SCALES.pt(0.65), SCALES.pr(0.9), SCALES.pb(0.65), SCALES.pl(0.9)]
   }, ".tooltip-content.__jsx-style-dynamic-selector{--tooltip-icon-offset-x:".concat(iconOffset.x, ";--tooltip-icon-offset-y:").concat(iconOffset.y, ";--tooltip-content-bg:").concat(colors.bgColor, ";box-sizing:border-box;position:absolute;top:").concat(rect.top, ";left:").concat(rect.left, ";-webkit-transform:").concat(rect.transform, ";-ms-transform:").concat(rect.transform, ";transform:").concat(rect.transform, ";background-color:var(--tooltip-content-bg);color:").concat(colors.color, ";border-radius:").concat(theme.layout.radius, ";padding:0;z-index:1000;box-shadow:").concat(hasShadow ? theme.expressiveness.shadowMedium : 'none', ";width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, 'auto'), ";}.inner.__jsx-style-dynamic-selector{box-sizing:border-box;position:relative;font-size:").concat(SCALES.font(1), ";padding:").concat(SCALES.pt(0.65), " ").concat(SCALES.pr(0.9), " ").concat(SCALES.pb(0.65), " ").concat(SCALES.pl(0.9), ";height:100%;}")))), el);
 };
-
 export default TooltipContent;

package/esm/Tooltip/TooltipIcon.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Placement } from "../utils/prop-types";
+import { Placement } from '../utils/prop-types';
 interface Props {
     placement: Placement;
     shadow: boolean;

package/esm/Tooltip/TooltipIcon.js

@@ -1,22 +1,19 @@
-import _JSXStyle from "../styled-jsx.es.js";
+import _JSXStyle from "styled-jsx/style";
 import React, { useMemo } from 'react';
 import { getIconPosition } from './placement';
 import useTheme from '../use-theme';
-
 var TooltipIcon = function TooltipIcon(_ref) {
   var placement = _ref.placement,
-      shadow = _ref.shadow;
+    shadow = _ref.shadow;
   var theme = useTheme();
-
   var _useMemo = useMemo(function () {
-    return getIconPosition(placement, 'var(--tooltip-icon-offset-x)', 'var(--tooltip-icon-offset-y)');
-  }, [placement]),
-      transform = _useMemo.transform,
-      top = _useMemo.top,
-      left = _useMemo.left,
-      right = _useMemo.right,
-      bottom = _useMemo.bottom;
-
+      return getIconPosition(placement, 'var(--tooltip-icon-offset-x)', 'var(--tooltip-icon-offset-y)');
+    }, [placement]),
+    transform = _useMemo.transform,
+    top = _useMemo.top,
+    left = _useMemo.left,
+    right = _useMemo.right,
+    bottom = _useMemo.bottom;
   var bgColorWithDark = useMemo(function () {
     if (!shadow || theme.type !== 'dark') return 'var(--tooltip-content-bg)';
     return theme.palette.accents_2;
@@ -28,5 +25,4 @@ var TooltipIcon = function TooltipIcon(_ref) {
     dynamic: [bgColorWithDark, left, top, right, bottom, transform]
   }, "span.__jsx-style-dynamic-selector{width:0;height:0;border-style:solid;border-width:6px 7px 6px 0;border-color:transparent ".concat(bgColorWithDark, " transparent transparent;position:absolute;left:").concat(left, ";top:").concat(top, ";right:").concat(right, ";bottom:").concat(bottom, ";-webkit-transform:").concat(transform, ";-ms-transform:").concat(transform, ";transform:").concat(transform, ";}")));
 };
-
 export default TooltipIcon;

package/esm/Tooltip/index.d.ts

@@ -1,3 +1,3 @@
-import Tooltip from "./Tooltip";
-export type { TooltipProps, TooltipOnVisibleChange, TooltipTypes, TooltipTriggers, TooltipPlacement } from "./Tooltip";
+import Tooltip from './Tooltip';
+export type { TooltipProps, TooltipOnVisibleChange, TooltipTypes, TooltipTriggers, TooltipPlacement } from './Tooltip';
 export default Tooltip;

package/esm/Tooltip/index.js

@@ -1,2 +1,3 @@
+'use client';
 import Tooltip from './Tooltip';
 export default Tooltip;

package/esm/Tooltip/placement.d.ts

@@ -1,4 +1,4 @@
-import { Placement } from "../utils/prop-types";
+import { Placement } from '../utils/prop-types';
 interface ParentDomRect {
     top: number;
     left: number;

package/esm/Tooltip/styles.d.ts

@@ -1,6 +1,6 @@
-import { SnippetTypes } from "../utils/prop-types";
-import { BolioUIThemesPalette } from "../Themes/Presets";
-export declare type TooltipColors = {
+import { SnippetTypes } from '../utils/prop-types';
+import { BolioUIThemesPalette } from '../Themes/Presets';
+export type TooltipColors = {
     bgColor: string;
     color: string;
 };