linear-react-components-ui 1.1.24-beta.4 → 1.1.25-rc.1

package/lib/inputs2/textfield/index.js

@@ -1,159 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Input = void 0;
-Object.defineProperty(exports, "LeftSlot", {
-  enumerable: true,
-  get: function () {
-    return _slot.LeftSlot;
-  }
-});
-Object.defineProperty(exports, "RightSlot", {
-  enumerable: true,
-  get: function () {
-    return _slot.RightSlot;
-  }
-});
-require("../../assets/styles/textfield.scss");
-var _react = _interopRequireWildcard(require("react"));
-var _lodash = _interopRequireDefault(require("lodash"));
-var _gridlayout = _interopRequireDefault(require("../../gridlayout"));
-var _popover = _interopRequireWildcard(require("../../popover"));
-var _permissionValidations = require("../../permissionValidations");
-var _hint = _interopRequireDefault(require("../../hint"));
-var _slot = require("../slot");
-var _tooltip = require("../../tooltip");
-const _excluded = ["type", "name", "label", "errors", "children", "onDeniedActions", "permissionAttr", "customClass", "customClassLabel", "customClassWrapper", "customClassInputContainer", "textAlign", "labelUppercase", "skeletonize", "hintPosition", "gridLayout", "themePopover", "popoverAlign", "tooltip", "tooltipPosition", "tooltipWidth", "hint"];
-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); }
-function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
-function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
-const options = [_permissionValidations.OPTIONS_ON_DENIED.disabled, _permissionValidations.OPTIONS_ON_DENIED.unvisible, _permissionValidations.OPTIONS_ON_DENIED.readOnly, _permissionValidations.OPTIONS_ON_DENIED.hideContent];
-const Input = exports.Input = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
-  const {
-      type = 'text',
-      name,
-      label,
-      errors,
-      children,
-      onDeniedActions = undefined,
-      permissionAttr = undefined,
-      customClass = '',
-      customClassLabel = '',
-      customClassWrapper = '',
-      customClassInputContainer = '',
-      textAlign = 'left',
-      labelUppercase = false,
-      skeletonize = false,
-      hintPosition = 'below',
-      gridLayout = undefined,
-      themePopover = 'light',
-      popoverAlign = 'left',
-      tooltip,
-      tooltipPosition,
-      tooltipWidth,
-      hint
-    } = props,
-    rest = _objectWithoutProperties(props, _excluded);
-  const onDenied = _react.default.useMemo(() => {
-    return onDeniedActions || (0, _permissionValidations.actionsOnPermissionDenied)(options, permissionAttr);
-  }, [onDeniedActions, permissionAttr]);
-  const {
-    hideContent,
-    unvisible
-  } = onDenied;
-  const inputRef = (0, _react.useRef)(null);
-  const hasLabel = !_lodash.default.isEmpty(props?.label);
-  const isReadOnly = Boolean(props.readOnly || onDenied.readOnly);
-  const isDisabled = Boolean(props.disabled || onDenied.disabled);
-  const hasHintMessages = Boolean(props.hint?.length);
-  const hasValidationErrors = Boolean(errors?.length);
-  const {
-    leftSlotElements,
-    rightSlotElements
-  } = _react.default.useMemo(() => {
-    const left = [];
-    const right = [];
-    _react.default.Children.map(children, (childElement, index) => {
-      if (/*#__PURE__*/_react.default.isValidElement(childElement)) {
-        const clonedChild = /*#__PURE__*/_react.default.cloneElement(childElement, {
-          key: childElement.key ?? `slot-${index}`,
-          disabled: isDisabled,
-          'aria-disabled': isDisabled
-        });
-        if (childElement.type === _slot.LeftSlot) left.push(clonedChild);
-        if (childElement.type === _slot.RightSlot) right.push(clonedChild);
-      }
-    });
-    return {
-      leftSlotElements: left,
-      rightSlotElements: right
-    };
-  }, [children, isDisabled]);
-  const hasLeftSlotElements = Boolean(leftSlotElements?.length);
-  const hasRightSlotElements = Boolean(rightSlotElements?.length);
-  if (unvisible || hideContent) return null;
-  return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_gridlayout.default, {
-    cols: gridLayout
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    ref: inputRef,
-    className: `text-field-root ${customClassWrapper}`,
-    "data-state-error": hasValidationErrors
-  }, hasLabel && /*#__PURE__*/_react.default.createElement("span", {
-    className: `root-label ${customClassLabel}`,
-    "data-state-skeletonize": skeletonize
-  }, /*#__PURE__*/_react.default.createElement("label", {
-    className: "label",
-    title: label,
-    htmlFor: name,
-    "data-state-disabled": isDisabled,
-    "data-state-read-only": isReadOnly,
-    "data-state-input-required": props.required,
-    "data-state-label-uppercase": labelUppercase
-  }, label), hint && hintPosition === 'onLabelRight' && !skeletonize && /*#__PURE__*/_react.default.createElement(_popover.default, {
-    customClass: "label-popover",
-    theme: themePopover,
-    align: popoverAlign,
-    iconColor: "#03bde2"
-  }, /*#__PURE__*/_react.default.createElement(_popover.PopoverText, {
-    text: hint
-  }))), /*#__PURE__*/_react.default.createElement("div", {
-    "data-state-skeletonize": skeletonize,
-    className: `container ${customClassInputContainer}`
-  }, hasLeftSlotElements && !skeletonize && leftSlotElements, /*#__PURE__*/_react.default.createElement("input", _extends({
-    ref: ref,
-    id: name,
-    type: type,
-    readOnly: isReadOnly,
-    disabled: isDisabled,
-    className: `input ${customClass}`,
-    tabIndex: !isReadOnly ? 0 : -1,
-    placeholder: rest.placeholder,
-    "data-state-error": hasValidationErrors,
-    "data-state-read-only": isReadOnly,
-    "data-state-text-align": textAlign,
-    "data-state-skeletonize": skeletonize
-  }, rest)), hasRightSlotElements && !skeletonize && rightSlotElements), hintPosition === 'below' && /*#__PURE__*/_react.default.createElement(_hint.default, {
-    customClass: "hint",
-    description: hint,
-    disabled: isDisabled,
-    skeletonize: skeletonize,
-    visible: hasHintMessages
-  }), hasValidationErrors && /*#__PURE__*/_react.default.createElement("span", {
-    className: "error",
-    "data-state-skeletonize": skeletonize,
-    "aria-describedby": String(name).concat('-errors')
-  }, errors?.map((error, index) => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
-    key: `${index + 1}-${error}`
-  }, error, "\xA0"))))), /*#__PURE__*/_react.default.createElement(_tooltip.Tooltip, {
-    targetRef: inputRef,
-    text: tooltip,
-    width: tooltipWidth,
-    position: tooltipPosition
-  }));
-});
-Input.displayName = 'TextFieldInput';

package/lib/tooltip/TooltipContent.d.ts

@@ -1,7 +0,0 @@
-import React__default from 'react';
-import { ITooltipContentProps } from './types.js';
-import '../@types/Position.js';
-
-declare const TooltipContent: ({ text, textError, tooltipRef, style, styleForContent, tooltipDimensions, position, handlerSetDimensions, }: ITooltipContentProps) => React__default.ReactPortal;
-
-export { TooltipContent as default };

package/lib/tooltip/TooltipContent.js

@@ -1,65 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _reactDom = _interopRequireDefault(require("react-dom"));
-var uuid = _interopRequireWildcard(require("uuid"));
-require("../assets/styles/tooltip.scss");
-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; }
-const TooltipContent = _ref => {
-  let {
-    text,
-    textError,
-    tooltipRef,
-    style = '',
-    styleForContent,
-    tooltipDimensions,
-    position = 'bottom',
-    handlerSetDimensions = () => {}
-  } = _ref;
-  const tooltipComponent = (0, _react.useRef)(document.createElement('div'));
-  (0, _react.useEffect)(() => {
-    tooltipComponent.current.id = `tooltip-${uuid.v1()}`;
-    tooltipComponent.current.className = `tooltip-component ${position} `;
-    tooltipComponent.current.dataset.testid = 'tooltip-component';
-    tooltipComponent.current.style.cssText = style;
-    document.body.appendChild(tooltipComponent.current);
-    const tooltipEl = document.querySelector(`div#${tooltipComponent.current.id}`);
-    let widthDimension = tooltipEl?.offsetWidth;
-    const heightDimension = tooltipEl?.offsetHeight;
-    if (tooltipDimensions && tooltipDimensions.width) {
-      widthDimension = tooltipDimensions.width;
-    }
-    handlerSetDimensions({
-      width: widthDimension,
-      height: Number(heightDimension)
-    });
-    // eslint-disable-next-line no-param-reassign
-    if (tooltipRef) {
-      tooltipRef.current = tooltipEl;
-    }
-    return () => {
-      document.body.removeChild(tooltipComponent.current);
-    };
-  }, []);
-  (0, _react.useEffect)(() => {
-    tooltipComponent.current.className = `tooltip-component ${position} `;
-  }, [position]);
-  (0, _react.useEffect)(() => {
-    tooltipComponent.current.style.cssText = style;
-  }, [style]);
-  (0, _react.useEffect)(() => {
-    tooltipComponent.current.className = textError ? `tooltip-error tooltip-component ${position}` : `tooltip-component ${position}`;
-  }, [textError]);
-  const getTooltipContent = () => /*#__PURE__*/_react.default.createElement("div", {
-    className: "tooltipcontent",
-    style: styleForContent
-  }, textError || text);
-  return /*#__PURE__*/_reactDom.default.createPortal(getTooltipContent(), tooltipComponent.current);
-};
-var _default = exports.default = TooltipContent;

package/lib/tooltip/useTooltip.d.ts

@@ -1,30 +0,0 @@
-import * as React from 'react';
-import { RefObject } from 'react';
-import { Position } from '../@types/Position.js';
-
-interface UseTooltipProps {
-    text?: string;
-    width?: number | string;
-    space?: number;
-    position?: Exclude<Position, 'center'>;
-    errorMessage?: string;
-    targetRef: RefObject<HTMLElement>;
-    onDeniedText?: string;
-}
-declare function useTooltip({ targetRef, text, width: widthProp, space, position: positionProp, errorMessage, onDeniedText, }: UseTooltipProps): {
-    text: string | undefined;
-    tooltipRef: React.MutableRefObject<HTMLElement | null>;
-    style: string;
-    className: "left" | "right" | "top" | "bottom";
-    handlerSetDimensions: React.Dispatch<React.SetStateAction<{
-        width: string | number;
-        height: number;
-    }>>;
-    tooltipDimensions: {
-        width: string | number;
-        height: number;
-    };
-    showTooltip: boolean;
-};
-
-export { useTooltip };

package/lib/tooltip/useTooltip.js

@@ -1,128 +0,0 @@
-"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
-  };
-}