linear-react-components-ui 1.1.23 → 1.1.24-beta.0

package/lib/tooltip/useTooltip.js

@@ -0,0 +1,128 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useTooltip = useTooltip;
+var _react = require("react");
+const TOOLTIP_INITIAL_HEIGHT = 40;
+function useTooltip(_ref) {
+  let {
+    targetRef,
+    text,
+    width: widthProp = 'auto',
+    space = 0,
+    position: positionProp = 'bottom',
+    errorMessage,
+    onDeniedText
+  } = _ref;
+  const [stateTooltipPosition, setStateTooltipPosition] = (0, _react.useState)(positionProp);
+  const [tooltipStyle, setTooltipStyle] = (0, _react.useState)('');
+  const [showTooltip, setShowTooltip] = (0, _react.useState)(false);
+  const [tooltipDimensions, setTooltipDimensions] = (0, _react.useState)({
+    width: widthProp,
+    height: TOOLTIP_INITIAL_HEIGHT
+  });
+  const targetElement = targetRef;
+  const tooltipElement = (0, _react.useRef)(null);
+  const onMouseOver = e => {
+    if (targetElement.current && targetElement.current.contains(e.target)) {
+      setShowTooltip(true);
+    } else setShowTooltip(false);
+  };
+  const onMouseOut = () => {
+    setShowTooltip(false);
+  };
+  const onAnyScroll = () => {
+    setShowTooltip(false);
+  };
+  (0, _react.useEffect)(() => {
+    if (text || onDeniedText) {
+      if (errorMessage) {
+        setShowTooltip(true);
+      } else {
+        setShowTooltip(false);
+        document.addEventListener('mouseover', onMouseOver);
+        document.addEventListener('scroll', onAnyScroll, true);
+        if (targetElement && targetElement.current) {
+          targetElement.current.addEventListener('mouseout', onMouseOut);
+        }
+      }
+    }
+    return () => {
+      if (text || onDeniedText) {
+        document.removeEventListener('mouseover', onMouseOver);
+        document.removeEventListener('scroll', onAnyScroll, true);
+        if (targetElement && targetElement.current) {
+          targetElement.current.removeEventListener('mouseout', onMouseOut);
+        }
+      }
+    };
+  }, [errorMessage, text, onDeniedText]);
+  (0, _react.useEffect)(() => {
+    if (targetElement.current && tooltipElement.current) {
+      const {
+        width,
+        height
+      } = tooltipDimensions;
+      const targetDimensions = targetElement.current.getBoundingClientRect();
+      const targetVerticalCenter = (targetDimensions.top + targetDimensions.bottom) / 2;
+      const tooltipClientWidth = tooltipElement.current.clientWidth;
+      let style = `width: ${typeof width === 'string' ? width : `${width}px`}`;
+      let left = targetDimensions.left + targetDimensions.width / 2 - tooltipClientWidth / 2;
+      left = Math.min(left, document.body.clientWidth - tooltipClientWidth - space);
+      style += `; left: ${Math.max(space, left)}px`;
+      switch (stateTooltipPosition) {
+        case 'top':
+          if (targetDimensions.top < height) {
+            setStateTooltipPosition('bottom');
+          } else {
+            style += `; top: ${targetDimensions.top + window.scrollY - height - space - 5}px`;
+          }
+          break;
+        case 'bottom':
+          if (window.innerHeight - targetDimensions.bottom < height) {
+            setStateTooltipPosition('top');
+          } else {
+            style += `; top: ${targetDimensions.top + window.scrollY + targetDimensions.height + space + 5}px`;
+          }
+          break;
+        case 'left':
+          if (targetDimensions.left < tooltipClientWidth) {
+            if (window.innerWidth - targetDimensions.right < tooltipClientWidth) {
+              setStateTooltipPosition('bottom');
+            } else {
+              setStateTooltipPosition('right');
+            }
+          } else {
+            style += `; top: ${targetVerticalCenter + window.scrollY - height / 2}px`;
+            style += `; left: ${targetDimensions.left - tooltipClientWidth - 6 - space}px`;
+          }
+          break;
+        case 'right':
+          if (window.innerWidth - targetDimensions.right < tooltipClientWidth) {
+            setStateTooltipPosition('left');
+          } else {
+            style += `; top: ${targetVerticalCenter + window.scrollY - height / 2}px`;
+            style += `; left: ${targetDimensions.left + targetDimensions.width + 5 + space}px`;
+          }
+          break;
+        default:
+          style += '';
+      }
+      setTooltipStyle(style);
+    }
+  }, [tooltipDimensions, stateTooltipPosition]);
+  (0, _react.useEffect)(() => {
+    setStateTooltipPosition(positionProp);
+  }, [window.scrollY, window.scrollX, window.innerWidth]);
+  return {
+    text: onDeniedText || text,
+    tooltipRef: tooltipElement,
+    style: tooltipStyle,
+    className: stateTooltipPosition,
+    handlerSetDimensions: setTooltipDimensions,
+    tooltipDimensions: tooltipDimensions,
+    showTooltip
+  };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "linear-react-components-ui",
-  "version": "1.1.23",
+  "version": "1.1.24-beta.0",
   "description": "Linear Sistemas ReactJs Components",
   "main": "lib/index.js",
   "module": "lib/index.cjs",
@@ -54,7 +54,7 @@
     "moment": "2.30.1",
     "prop-types": "15.8.1",
     "react-dev-utils": "12.0.0",
-    "react-imask": "^7.6.1",
+    "react-imask": "7.6.1",
     "react-router-dom": "6.21.3",
     "react-syntax-highlighter": "15.5.0",
     "semver": "7.5.4",
@@ -68,6 +68,7 @@
     "@babel/preset-env": "7.20.2",
     "@babel/preset-react": "7.18.6",
     "@babel/preset-typescript": "7.23.3",
+    "@faker-js/faker": "9.8.0",
     "@svgr/webpack": "8.1.0",
     "@swc/core": "1.4.13",
     "@testing-library/dom": "10.4.0",

package/lib/inputs/base/Label.d.ts

@@ -1,14 +0,0 @@
-import { InputLabelProps } from './types.js';
-import 'react';
-import '../../@types/Align.js';
-import '../../@types/Period.js';
-import '../../@types/PermissionAttr.js';
-import '../../internals/types.js';
-import '../../@types/Position.js';
-
-declare const _default: {
-    (props: InputLabelProps): JSX.Element;
-    displayName: string;
-};
-
-export { _default as default };

package/lib/inputs/base/Label.js

@@ -1,35 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _withTooltip = _interopRequireDefault(require("../../internals/withTooltip"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const Label = props => {
-  const {
-    label,
-    styleForLabel,
-    customClassForLabel,
-    labelUppercase,
-    required,
-    targetRef,
-    labelRef,
-    onHoverLabel
-  } = props;
-  return /*#__PURE__*/_react.default.createElement("span", {
-    style: styleForLabel,
-    ref: ref => {
-      if (ref) {
-        if (labelRef) labelRef.current = ref;
-        if (targetRef) targetRef(ref);
-      }
-    },
-    onMouseEnter: onHoverLabel,
-    className: `label ${customClassForLabel} ${labelUppercase && ' -uppercase'}`
-  }, label, required && /*#__PURE__*/_react.default.createElement("span", {
-    className: "-requiredlabel"
-  }, "*"));
-};
-var _default = exports.default = (0, _withTooltip.default)(Label);

package/lib/internals/withTooltip.d.ts

@@ -1,12 +0,0 @@
-import React__default from 'react';
-import { ITooltipContext, WithTooltipProps } from './types.js';
-import '../@types/PermissionAttr.js';
-import '../@types/Position.js';
-
-declare const TooltipContext: React__default.Context<ITooltipContext>;
-declare const withTooltip: <ComponentProps extends WithTooltipProps>(WrappedComponent: React__default.ComponentType<ComponentProps>) => {
-    (props: ComponentProps): JSX.Element;
-    displayName: string;
-};
-
-export { TooltipContext, withTooltip as default };

package/lib/internals/withTooltip.js

@@ -1,172 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.TooltipContext = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _tooltip = _interopRequireDefault(require("../tooltip"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-const TOOLTIP_INITIAL_HEIGHT = 40;
-const hasTooltip = _ref => {
-  let {
-    tooltip
-  } = _ref;
-  return tooltip;
-};
-const TooltipContext = exports.TooltipContext = /*#__PURE__*/_react.default.createContext({});
-const getDisplayName = _ref2 => {
-  let {
-    displayName,
-    name
-  } = _ref2;
-  return displayName || name || 'Component';
-};
-const withTooltip = WrappedComponent => {
-  const EnhancedComponent = props => {
-    const {
-      tooltip,
-      tooltipWidth = 'auto',
-      space = 20,
-      tooltipPosition = 'bottom',
-      errorMessage
-    } = props;
-    const [stateTooltipPosition, setStateTooltipPosition] = (0, _react.useState)(tooltipPosition);
-    const [onDeniedText, setOnDeniedText] = (0, _react.useState)('');
-    const [tooltipStyle, setTooltipStyle] = (0, _react.useState)('');
-    const [showTooltip, setShowTooltip] = (0, _react.useState)(false);
-    const [tooltipDimensions, setTooltipDimensions] = (0, _react.useState)({
-      width: tooltipWidth,
-      height: TOOLTIP_INITIAL_HEIGHT
-    });
-    const targetElement = (0, _react.useRef)(null);
-    const tooltipElement = (0, _react.useRef)(null);
-    const onMouseOver = e => {
-      if (targetElement.current && targetElement.current.contains(e.target)) {
-        setShowTooltip(true);
-      } else setShowTooltip(false);
-    };
-    const onMouseOut = () => {
-      setShowTooltip(false);
-    };
-    const onAnyScroll = () => {
-      setShowTooltip(false);
-    };
-    (0, _react.useEffect)(() => {
-      if (hasTooltip(props) || onDeniedText) {
-        if (errorMessage) {
-          setShowTooltip(true);
-        } else {
-          setShowTooltip(false);
-          document.addEventListener('mouseover', onMouseOver);
-          document.addEventListener('scroll', onAnyScroll, true);
-          if (targetElement && targetElement.current) {
-            targetElement.current.addEventListener('mouseout', onMouseOut);
-          }
-        }
-      }
-      return () => {
-        if (hasTooltip(props) || onDeniedText) {
-          document.removeEventListener('mouseover', onMouseOver);
-          document.removeEventListener('scroll', onAnyScroll, true);
-          if (targetElement && targetElement.current) {
-            targetElement.current.removeEventListener('mouseout', onMouseOut);
-          }
-        }
-      };
-    }, [errorMessage, tooltip, onDeniedText]);
-    (0, _react.useEffect)(() => {
-      if (targetElement.current && tooltipElement.current) {
-        const {
-          width,
-          height
-        } = tooltipDimensions;
-        const targetDimensions = targetElement.current.getBoundingClientRect();
-        const targetVerticalCenter = (targetDimensions.top + targetDimensions.bottom) / 2;
-        const tooltipClientWidth = tooltipElement.current.clientWidth;
-        let style = `width: ${typeof width === 'string' ? width : `${width}px`}`;
-        let left = targetDimensions.left + targetDimensions.width / 2 - tooltipClientWidth / 2;
-        left = Math.min(left, document.body.clientWidth - tooltipClientWidth - space);
-        style += `; left: ${Math.max(space, left)}px`;
-        switch (stateTooltipPosition) {
-          case 'top':
-            if (targetDimensions.top < height) {
-              setStateTooltipPosition('bottom');
-            } else {
-              style += `; top: ${targetDimensions.top + window.scrollY - height - 5}px`;
-            }
-            break;
-          case 'bottom':
-            if (window.innerHeight - targetDimensions.bottom < height) {
-              setStateTooltipPosition('top');
-            } else {
-              style += `; top: ${targetDimensions.top + window.scrollY + targetDimensions.height + 5}px`;
-            }
-            break;
-          case 'left':
-            if (targetDimensions.left < tooltipClientWidth) {
-              if (window.innerWidth - targetDimensions.right < tooltipClientWidth) {
-                setStateTooltipPosition('bottom');
-              } else {
-                setStateTooltipPosition('right');
-              }
-            } else {
-              style += `; top: ${targetVerticalCenter + window.scrollY - height / 2}px`;
-              style += `; left: ${targetDimensions.left - tooltipClientWidth - 6}px`;
-            }
-            break;
-          case 'right':
-            if (window.innerWidth - targetDimensions.right < tooltipClientWidth) {
-              setStateTooltipPosition('left');
-            } else {
-              style += `; top: ${targetVerticalCenter + window.scrollY - height / 2}px`;
-              style += `; left: ${targetDimensions.left + targetDimensions.width + 5}px`;
-            }
-            break;
-          default:
-            style += '';
-        }
-        setTooltipStyle(style);
-      }
-    }, [tooltipDimensions, stateTooltipPosition]);
-    (0, _react.useEffect)(() => {
-      setStateTooltipPosition(tooltipPosition);
-    }, [window.scrollY, window.scrollX, window.innerWidth]);
-    const getTooltip = () => {
-      if (tooltip || onDeniedText) {
-        return /*#__PURE__*/_react.default.createElement(_tooltip.default, {
-          text: onDeniedText || tooltip,
-          textError: errorMessage,
-          tooltipRef: tooltipElement,
-          style: tooltipStyle,
-          className: stateTooltipPosition,
-          tooltipDimensions: tooltipDimensions,
-          handlerSetDimensions: setTooltipDimensions
-        });
-      }
-      return null;
-    };
-    const getTarget = targetEl => {
-      if (!targetElement.current) targetElement.current = targetEl;
-    };
-    const contextValues = {
-      handlerSetOnDeniedText: setOnDeniedText
-    };
-    if (!hasTooltip(props) && !onDeniedText) {
-      return /*#__PURE__*/_react.default.createElement(TooltipContext.Provider, {
-        value: contextValues
-      }, /*#__PURE__*/_react.default.createElement(WrappedComponent, props));
-    }
-    return /*#__PURE__*/_react.default.createElement(TooltipContext.Provider, {
-      value: contextValues
-    }, /*#__PURE__*/_react.default.createElement(WrappedComponent, _extends({}, props, {
-      targetRef: getTarget
-    })), showTooltip && getTooltip());
-  };
-  EnhancedComponent.displayName = `withTooltip(${getDisplayName(WrappedComponent)})`;
-  return EnhancedComponent;
-};
-var _default = exports.default = withTooltip;