@edvisor/product-language 0.8.3 → 0.8.5

package/index.js

@@ -1,6 +1,6 @@
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import styled, { css, keyframes } from 'styled-components';
-import { isFunction, isString, first } from 'lodash';
+import { isFunction, uniqueId, isString, first } from 'lodash';
 import React, { PureComponent, Children, useState, useEffect, useRef, memo, useMemo, createRef, useCallback, Fragment as Fragment$1 } from 'react';
 import { areEqual, FixedSizeList } from 'react-window';
 import { Calendar as Calendar$1, DateObject } from 'react-multi-date-picker';
@@ -8829,6 +8829,23 @@ const ValueComponentSingle = props => {
 
 var ValueComponentSingle$1 = /*#__PURE__*/memo(ValueComponentSingle);
 
+const valueStyles = ({
+  canSearch
+}) => ({
+  minWidth: '1px',
+  marginLeft: '-1px',
+  userSelect: 'text',
+  opacity: is(canSearch) ? 1 : 0,
+  position: is(canSearch) ? 'relative' : 'absolute',
+  left: is(canSearch) ? '1px' : '0',
+  outline: 'none',
+  fontFamily: 'Inter',
+  fontWeight: 400,
+  fontSize: '14px',
+  lineHeight: '20px',
+  color: `${Text$1.Default}`
+});
+
 const ValueContainer = /*#__PURE__*/styled(SpaceBetween).withConfig({
   displayName: "value__ValueContainer",
   componentId: "sc-1aps7dx-0"
@@ -8886,13 +8903,9 @@ const ClearButton = /*#__PURE__*/styled(Button).attrs({
   displayName: "value__ClearButton",
   componentId: "sc-1aps7dx-6"
 })(["padding:", ";margin-right:", ";gap:0;&:focus{outline:none;}&:active{background-color:transparent;}"], Padding.none, Margin.none);
-const Search = /*#__PURE__*/styled.span.withConfig({
-  displayName: "value__Search",
-  componentId: "sc-1aps7dx-7"
-})(["min-width:1px;margin-left:-1px;user-select:text;", " &:focus{outline:none;}"], props => is(props.canSearch) ? css(["opacity:1;position:relative;left:1px;"]) : css(["position:absolute;opacity:0;"]));
 const ErrorMessage = /*#__PURE__*/styled.div.withConfig({
   displayName: "value__ErrorMessage",
-  componentId: "sc-1aps7dx-8"
+  componentId: "sc-1aps7dx-7"
 })(["display:", ";flex-direction:'row';width:100%;padding:", " ", ";& path{fill:", ";}div{color:", ";margin:", " ", "}"], props => is(props.visible) ? 'flex' : 'none', Padding.xxs, Padding.none, Icons.Critical, Text$1.Critical, Margin.none, Margin.xxs);
 
 const Value = props => {
@@ -8934,10 +8947,21 @@ const Value = props => {
     }
 
     const canSearch = open && is(searchable) || !isDefined(value) && is(searchable) || isDefined(search.current);
-    return jsx(Search, {
+    /**
+    * @TODO this is a hack to be able to use the ref in react-web-client
+    * RWC uses styled-components < v4 and expects the ref to be passes as
+    * "innerRef" not just "ref", but product-language uses > v4 and wants
+    * to use ref. So for some components that need a ref, like this one
+    * we will have to use a div and style it the old fashioned way until
+    * we upgrade rwc's styled-components or drop rwc
+    */
+
+    return jsx("span", {
       className: "search",
       contentEditable: true,
-      canSearch: canSearch,
+      style: Object.assign({}, valueStyles({
+        canSearch
+      })),
       onInput: onSearch,
       onKeyDown: onKeyDown,
       onFocus: onSearchFocus,
@@ -9941,6 +9965,96 @@ const TreeView = props => {
   return maybeRender(!isEmpty(nodes), renderTree());
 };
 
+var TooltipPosition;
+
+(function (TooltipPosition) {
+  TooltipPosition[TooltipPosition["TOP"] = 0] = "TOP";
+  TooltipPosition[TooltipPosition["BOTTOM"] = 1] = "BOTTOM";
+  TooltipPosition[TooltipPosition["LEFT"] = 2] = "LEFT";
+  TooltipPosition[TooltipPosition["RIGHT"] = 3] = "RIGHT";
+})(TooltipPosition || (TooltipPosition = {}));
+
+const TooltipWrapper = /*#__PURE__*/styled.div.withConfig({
+  displayName: "tooltip__TooltipWrapper",
+  componentId: "sc-1rhmjz7-0"
+})(["position:relative;display:inline-flex;"]);
+
+const getContainerPosition = tooltipPosition => {
+  const position = {
+    TOP: css([""]),
+    BOTTOM: css(["top:calc(100% + 5px);"]),
+    LEFT: css(["margin-right:", ";width:100%;left:unset;top:50%;right:calc(100% + 5px);"], Margin.none),
+    RIGHT: css(["margin-left:", ";width:100%;top:50%;left:calc(100% + 5px);"], Margin.none)
+  };
+  const key = TooltipPosition[tooltipPosition];
+  return position[key];
+};
+
+const getTooltipBoxPosition = tooltipPosition => {
+  const position = {
+    TOP: css([""]),
+    BOTTOM: css(["&:after{border-color:transparent transparent ", " transparent;top:unset;width:1px;bottom:100%;left:calc(50% - 5px);}"], Surface.Default.Inverse),
+    LEFT: css(["&:after{border-color:transparent transparent transparent ", ";left:100%;top:calc(50% - 5px);}"], Surface.Default.Inverse),
+    RIGHT: css(["&:after{border-color:transparent ", " transparent transparent;right:100%;left:unset;top:calc(50% - 5px);}"], Surface.Default.Inverse)
+  };
+  const key = TooltipPosition[tooltipPosition];
+  return position[key];
+};
+
+const CenterContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "tooltip__CenterContainer",
+  componentId: "sc-1rhmjz7-1"
+})(["position:absolute;width:", ";margin-left:", ";display:flex;justify-content:center;align-items:center;left:50%;bottom:", ";pointer-events:none;", ""], ({
+  width
+}) => isDefined(width) ? `${width}px` : '100%', ({
+  width
+}) => isDefined(width) ? `-${width / 2}px` : '-50%', ({
+  position
+}) => position === TooltipPosition.BOTTOM ? 'unset' : 'calc(100% + 5px)', ({
+  position
+}) => getContainerPosition(position));
+const fadeIn$1 = /*#__PURE__*/keyframes(["from{opacity:0;}to{opacity:1;}"]);
+const TooltipBox = /*#__PURE__*/styled.div.withConfig({
+  displayName: "tooltip__TooltipBox",
+  componentId: "sc-1rhmjz7-2"
+})(["position:relative;background-color:", ";color:", ";text-align:center;border-radius:6px;padding:", " ", ";animation:", " 0.1s linear;&:after{content:\"\";position:absolute;width:1px;height:1px;border-width:5px;border-style:solid;border-color:", " transparent transparent transparent;left:calc(50% - 4.5px);top:100%;}", ""], Surface.Default.Inverse, Surface.Default.Default, Padding.xxs, Padding.xs, fadeIn$1, Surface.Default.Inverse, ({
+  position
+}) => getTooltipBoxPosition(position));
+const Tooltip = props => {
+  const {
+    position = TooltipPosition.TOP,
+    content,
+    width,
+    children,
+    style,
+    className
+  } = props;
+  const [isHovered, setIsHovered] = useState(false);
+  const id = uniqueId('tooltip-');
+  return jsxs(TooltipWrapper, {
+    children: [jsx("span", Object.assign({
+      onMouseEnter: () => setIsHovered(true),
+      onMouseLeave: () => setIsHovered(false)
+    }, {
+      children: children
+    })), isHovered && jsx(CenterContainer, Object.assign({
+      role: "tooltip",
+      id: id,
+      position: position,
+      width: width
+    }, {
+      children: jsx(TooltipBox, Object.assign({
+        "aria-describedby": id,
+        style: style,
+        className: className,
+        position: position
+      }, {
+        children: content
+      }))
+    }))]
+  });
+};
+
 /**
  * For a reasonable description of the class names etc,
  * @see https://shahabyazdi.github.io/react-multi-date-picker/classes-&-styles/
@@ -10641,16 +10755,16 @@ function useKeyDown(targetKey, handler) {
   return;
 }
 
-const fadeIn = /*#__PURE__*/keyframes(["from{opacity:0;}to{opacity:1;}"]);
+const fadeIn = /*#__PURE__*/keyframes(["from{opacity:.4;}to{opacity:1;}"]);
 const grow = /*#__PURE__*/keyframes(["from{transform:scale(.8)}to{transform:scale(1)}"]);
 const OverlayFrame = /*#__PURE__*/styled(Flex).withConfig({
   displayName: "modal-base__OverlayFrame",
   componentId: "r4sytz-0"
-})(["position:fixed;top:0;left:0;width:100%;height:100vh;z-index:20000;background-color:", ";justify-content:center;animation:", " .1s ease-out;"], Background.Overlay, fadeIn);
+})(["position:fixed;top:0;left:0;width:100%;height:100%;z-index:20000;background-color:", ";justify-content:center;animation:", " .2s ease-out;"], Background.Overlay, fadeIn);
 const ModalFrame = /*#__PURE__*/styled(Flex).withConfig({
   displayName: "modal-base__ModalFrame",
   componentId: "r4sytz-1"
-})(["background-color:", ";z-index:20010;width:", ";position:fixed;transform:translate(-50%,-50%);", ";border-radius:8px;animation:", " .1s ease-in;"], Surface.Default.Default, ({
+})(["background-color:", ";z-index:20010;width:", ";", ";border-radius:8px;animation:", " .1s ease-in;"], Surface.Default.Default, ({
   widthValue
 }) => widthValue, shadowXl, grow);
 const modalSizeToPixelSize = {
@@ -11087,4 +11201,4 @@ const ChoiceList = props => {
   });
 };
 
-export { Actions, AlertBanner, Avatar, BODY, BODY_LARGE, Background, Badge, Body, BodyLarge, Borders, Button, CAPTION, Caption, Card, CardFrame$1 as CardFrame, Center, Checkbox, ChoiceList, DatePicker, Display, Divider, Flag, Flex, Focused, Gap, HTMLAnchor, HTMLInput, Heading1, Heading2, Heading3, Heading4, Icon, IconMinor, Icons, InputCheckbox, InputField$1 as InputField, InputNumber, InputText, Interactive, LABEL, Label$1 as Label, LeftRightCard, Link, Margin, MenuList, Modal, ModalBase, ModalDestructive, MultiChoiceList, Padding, Radio, RadioButton$1 as RadioButton, RangeSlider, Select, Slider, SpaceAround, SpaceBetween, Spinner, Surface, Tab$1 as Tab, Tabs, Tag, Text$1 as Text, Thumbnail, TreeView, Typography, _Typography, gridLayoutGenerator, leftRightLayoutGenerator, shadow, shadow2Xl, shadowInner, shadowLg, shadowMd, shadowSm, shadowXl };
+export { Actions, AlertBanner, Avatar, BODY, BODY_LARGE, Background, Badge, Body, BodyLarge, Borders, Button, CAPTION, Caption, Card, CardFrame$1 as CardFrame, Center, CenterContainer, Checkbox, ChoiceList, DatePicker, Display, Divider, Flag, Flex, Focused, Gap, HTMLAnchor, HTMLInput, Heading1, Heading2, Heading3, Heading4, Icon, IconMinor, Icons, InputCheckbox, InputField$1 as InputField, InputNumber, InputText, Interactive, LABEL, Label$1 as Label, LeftRightCard, Link, Margin, MenuList, Modal, ModalBase, ModalDestructive, MultiChoiceList, Padding, Radio, RadioButton$1 as RadioButton, RangeSlider, Select, Slider, SpaceAround, SpaceBetween, Spinner, Surface, Tab$1 as Tab, Tabs, Tag, Text$1 as Text, Thumbnail, Tooltip, TooltipBox, TooltipPosition, TooltipWrapper, TreeView, Typography, _Typography, gridLayoutGenerator, leftRightLayoutGenerator, shadow, shadow2Xl, shadowInner, shadowLg, shadowMd, shadowSm, shadowXl };

package/lib/components/index.d.ts

@@ -16,6 +16,7 @@ export * from './flag';
 export * from './spinner';
 export * from './select';
 export * from './tree-view';
+export * from './tooltip';
 export * from './date-picker';
 export * from './range-slider';
 export * from './modal';

package/lib/components/tooltip/index.d.ts

@@ -0,0 +1 @@
+export * from './tooltip';

package/lib/components/tooltip/tooltip.d.ts

@@ -0,0 +1,26 @@
+import { FC } from '@helpers';
+import { CSSProperties, ReactNode } from 'react';
+export declare enum TooltipPosition {
+    TOP = 0,
+    BOTTOM = 1,
+    LEFT = 2,
+    RIGHT = 3
+}
+export declare const TooltipWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CenterContainer: import("styled-components").StyledComponent<"div", any, {
+    position: TooltipPosition;
+    width?: number | undefined;
+}, never>;
+export declare const TooltipBox: import("styled-components").StyledComponent<"div", any, {
+    position: TooltipPosition;
+}, never>;
+interface ITooltip {
+    position?: TooltipPosition;
+    content: ReactNode;
+    children: ReactNode;
+    width?: number;
+    className?: string;
+    style?: CSSProperties;
+}
+export declare const Tooltip: FC<ITooltip>;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edvisor/product-language",
-  "version": "0.8.3",
+  "version": "0.8.5",
   "license": "MIT",
   "description": "Edvisor.io product-language components",
   "repository": "https://github.com/edvisor-io/front-end/",