linear-react-components-ui 1.1.3 → 1.1.4

package/lib/list/Item.js

@@ -51,14 +51,23 @@ const Item = props => {
   const options = [_permissionValidations.OPTIONS_ON_DENIED.disabled, _permissionValidations.OPTIONS_ON_DENIED.unvisible];
   const [onDenied] = (0, _react.useState)((0, _permissionValidations.actionsOnPermissionDenied)(options, permissionAttr));
   const navigate = (0, _reactRouterDom.useNavigate)();
+  const disabledByPermission = onDenied.disabled;
   const shouldDisable = () => disabled || onDenied.disabled;
+  const disabledIconColor = 'rgb(193, 193, 193)';
   const getClass = () => "item ".concat(customClass, " ").concat(separator && 'list-separator', " ").concat(shouldDisable() && 'disabled', "\n    ").concat(displayCheckbox && 'list-checkbox');
   const getIcon = (iconName, icon) => {
+    const noIconDisabledByPermission = !icon && !displayCheckbox && !leftElement && !leftIconName && !leftIcon && onDenied.disabled;
     if (icon) {
       return icon;
+    } else if (noIconDisabledByPermission) {
+      return /*#__PURE__*/_react.default.createElement(_icons.default, {
+        name: "padlock",
+        color: disabledIconColor
+      });
     } else if (iconName) {
       return /*#__PURE__*/_react.default.createElement(_icons.default, {
-        name: iconName
+        name: !disabledByPermission ? iconName : 'padlock',
+        color: !disabledByPermission ? '' : disabledIconColor
       });
     }
     return null;
@@ -94,6 +103,18 @@ const Item = props => {
       document.removeEventListener('keydown', onKeyDown);
     };
   }, [url, selectedItemId, itemId]);
+  const renderCheckBox = (0, _react.useMemo)(() => {
+    if (!disabledByPermission && displayCheckbox) {
+      return /*#__PURE__*/_react.default.createElement(_checkbox.default, {
+        name: "checkbox"
+      });
+    } else if (disabledByPermission && displayCheckbox) {
+      return /*#__PURE__*/_react.default.createElement(_icons.default, {
+        name: "padlock"
+      });
+    }
+    return null;
+  }, [disabledByPermission && displayCheckbox]);
   if (!visible || onDenied.unvisible) return null;
   return /*#__PURE__*/_react.default.createElement("li", _extends({
     ref: itemId && selectedItemId === itemId ? selectedItemRef : null,
@@ -106,15 +127,13 @@ const Item = props => {
     to: url
   }), (displayCheckbox || leftElement || leftIconName || leftIcon) && /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(getClass(), " -icon-left")
-  }, displayCheckbox && /*#__PURE__*/_react.default.createElement(_checkbox.default, {
-    name: "checkbox"
-  }), leftElement, getIcon(leftIconName, leftIcon)), (text || subText || children) && /*#__PURE__*/_react.default.createElement("div", {
+  }, renderCheckBox, leftElement, getIcon(leftIconName, leftIcon)), (text || subText || children) && /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(getClass())
   }, /*#__PURE__*/_react.default.createElement("p", {
     className: "".concat(text && 'text')
   }, text), /*#__PURE__*/_react.default.createElement("p", {
     className: "".concat(subText && 'subtext')
-  }, subText), children), (rightIconName || rightIcon || rightElement) && /*#__PURE__*/_react.default.createElement("div", {
+  }, subText), children), (rightIconName || rightIcon || rightElement || disabledByPermission) && /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(getClass(), " -icon-right")
   }, getIcon(rightIconName, rightIcon), rightElement));
 };

package/lib/table/HeaderColumn.d.ts

@@ -1,6 +1,6 @@
 import { ITableHeaderProps } from './types.js';
 import 'react';
 
-declare const HeaderColumn: ({ customClass, style, children, textAlign, visible, id, rowSpan, colSpan, }: ITableHeaderProps) => JSX.Element | null;
+declare const HeaderColumn: ({ customClass, style, children, textAlign, visible, id, rowSpan, colSpan, isMenuColumn, }: ITableHeaderProps) => JSX.Element | null;
 
 export { HeaderColumn as default };

package/lib/table/HeaderColumn.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
+var _icons = _interopRequireDefault(require("../icons"));
 var _skeleton = _interopRequireDefault(require("../skeleton"));
 var _helpers = _interopRequireDefault(require("./helpers"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -19,7 +20,8 @@ const HeaderColumn = _ref => {
     visible = true,
     id,
     rowSpan,
-    colSpan
+    colSpan,
+    isMenuColumn = false
   } = _ref;
   const {
     skeletonize,
@@ -27,18 +29,26 @@ const HeaderColumn = _ref => {
     skeletonInHeader,
     skeletonInRows = 10
   } = (0, _react.useContext)(_helpers.default);
+  const getChildren = function () {
+    let childrenIsMenuColum = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+    if (!childrenIsMenuColum) return children;
+    return /*#__PURE__*/_react.default.createElement(_icons.default, {
+      name: "menu4",
+      size: 22
+    });
+  };
   if (!visible) return null;
   return /*#__PURE__*/_react.default.createElement("th", {
     id: id,
     rowSpan: rowSpan,
     colSpan: colSpan,
-    className: "headercolumn ".concat(customClass, " text-align-").concat(textAlign),
+    className: "headercolumn ".concat(customClass, " text-align-").concat(textAlign, " ").concat(isMenuColumn && 'menu-column'),
     style: style
   }, skeletonize && (skeletonInHeader || !skeletonInRows) && !vertical ? /*#__PURE__*/_react.default.createElement(_skeleton.default, {
     height: style && style.height ? undefined : 16,
     style: {
       marginBottom: 0
     }
-  }) : children);
+  }) : getChildren(isMenuColumn));
 };
 var _default = exports.default = HeaderColumn;

package/lib/table/RowColumn.js

@@ -42,7 +42,8 @@ const RowColumn = props => {
     textAlign,
     visible = true,
     rowSpan,
-    colSpan
+    colSpan,
+    children
   } = props;
   const context = (0, _react.useContext)(_helpers.RowContext);
   const {
@@ -51,8 +52,7 @@ const RowColumn = props => {
     skeletonInRows = 10
   } = context;
   const hiddenContent = displayContent !== 'always';
-  const childrenProps = props.children;
-  const renderContent = () => {
+  const renderContent = (0, _react.useCallback)(() => {
     if (skeletonize && vertical) {
       return /*#__PURE__*/_react.default.createElement(_skeleton.default, {
         height: 16,
@@ -63,8 +63,8 @@ const RowColumn = props => {
     }
     return hiddenContent && displayContent ? /*#__PURE__*/_react.default.createElement("span", {
       className: displayClass[displayContent]
-    }, childrenProps) : childrenProps;
-  };
+    }, children) : children;
+  }, [skeletonize, vertical, children, displayContent, hiddenContent, displayClass]);
   if (!visible) return null;
   if (skeletonize && !skeletonInRows && !vertical) return null;
   return /*#__PURE__*/_react.default.createElement("td", {
@@ -72,9 +72,7 @@ const RowColumn = props => {
     colSpan: colSpan,
     className: "rowcolumn ".concat(customClass, " text-align-").concat(textAlign, " ").concat(!context.rowBorder && ' -noborder', " ").concat(!rowSpan ? ' -norowspan' : ''),
     style: style,
-    onClick: e => {
-      getColClickEvent(e, _objectSpread(_objectSpread({}, context), props));
-    },
+    onClick: e => getColClickEvent(e, _objectSpread(_objectSpread({}, context), props)),
     role: "presentation",
     tabIndex: -1
   }, renderContent());

package/lib/table/types.d.ts

@@ -27,6 +27,7 @@ interface ITableHeaderProps extends TableHTMLAttributes<HTMLTableElement> {
     id?: string;
     rowSpan?: number;
     colSpan?: number;
+    isMenuColumn?: boolean;
 }
 interface ITableBodyProps extends TableHTMLAttributes<HTMLTableElement> {
     children?: ReactNode;

package/lib/toolbar/types.d.ts

@@ -26,6 +26,7 @@ interface IButtonBarProps {
     iconAlign?: Exclude<Position, 'top' | 'bottom'>;
     validationKey?: string;
     boxShadow?: boolean;
+    id?: string;
     onNodeElementClick?: (node: NodeItem) => void;
 }
 interface ILabelBarProps {

package/lib/uitour/index.d.ts

@@ -1,6 +1,7 @@
+import React__default from 'react';
 import { IUITourProps } from './types.js';
 import './helpers.js';
 
-declare const UiTour: (props: IUITourProps) => JSX.Element | null;
+declare const UiTour: (props: IUITourProps) => React__default.ReactPortal | null;
 
 export { UiTour as default };

package/lib/uitour/index.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
+var _reactDom = require("react-dom");
 var _buttons = _interopRequireWildcard(require("../buttons"));
 require("../assets/styles/uitour.scss");
 var _helpers = require("./helpers");
@@ -24,7 +25,8 @@ const UiTour = props => {
     showCloseButton = true,
     showBackButton = true,
     visible = true,
-    onFinish
+    onFinish,
+    onStepChange
   } = props;
   const [currentStep, setCurrentStep] = (0, _react.useState)(undefined);
   const [hasNextStep, setHasNextStep] = (0, _react.useState)(false);
@@ -35,6 +37,7 @@ const UiTour = props => {
   const [stepPosition, setStepPosition] = (0, _react.useState)(_helpers.STEP_POSITIONS.left);
   const stepRef = (0, _react.useRef)(null);
   const descriptionRef = (0, _react.useRef)(null);
+  const activatedEffects = (0, _react.useRef)([]);
   const handleNextStep = () => {
     if (hasNextStep) {
       const currentStepIndex = data.findIndex(item => item.id === (currentStep === null || currentStep === void 0 ? void 0 : currentStep.id));
@@ -88,6 +91,46 @@ const UiTour = props => {
     setShowTour(visible);
     setCurrentStep(step);
   };
+  const removePreviousElementsEffects = () => {
+    if (activatedEffects.current.length > 0) {
+      const effects = activatedEffects.current;
+      effects.forEach(ef => {
+        const element = document.getElementById(ef.elementId);
+        if (element) {
+          delete element.dataset.uitour;
+          activatedEffects.current = activatedEffects.current.filter(r => r.elementId !== ef.elementId);
+        }
+      });
+    }
+  };
+  const addElementEffect = (0, _react.useCallback)(elementEffect => {
+    const element = document.getElementById(elementEffect.elementId);
+    if (element) {
+      element.dataset.uitour = elementEffect.effect;
+      if (activatedEffects.current) activatedEffects.current.push(elementEffect);
+    }
+  }, []);
+  const showElementsEffects = currentData => {
+    if (currentData.effect) {
+      const {
+        effect,
+        targetId
+      } = currentData;
+      addElementEffect({
+        effect,
+        elementId: targetId
+      });
+    }
+    if (currentData.elementsEffects) {
+      let {
+        elementsEffects
+      } = currentData;
+      if (!Array.isArray(elementsEffects)) elementsEffects = [elementsEffects];
+      elementsEffects.forEach(ef => {
+        addElementEffect(ef);
+      });
+    }
+  };
   (0, _react.useEffect)(() => {
     if (currentStep) {
       const target = document.getElementById(currentStep.targetId);
@@ -113,6 +156,9 @@ const UiTour = props => {
             setIsLastStep(false);
         }
         getStepPosition(targetRect);
+        removePreviousElementsEffects();
+        showElementsEffects(data[currentStepIndex]);
+        if (onStepChange) onStepChange(target);
       }
       if (descriptionRef.current) {
         descriptionRef.current.innerHTML = currentStep.description;
@@ -151,8 +197,13 @@ const UiTour = props => {
       mutationObserver = null;
     };
   }, [visible, data]);
-  if (!showTour) return null;
-  return /*#__PURE__*/_react.default.createElement("div", {
+  (0, _react.useEffect)(() => {
+    if (!showTour && activatedEffects.current.length > 0) {
+      removePreviousElementsEffects();
+    }
+    if (showTour) document.body.style.overflow = 'hidden';else document.body.style.overflow = 'auto';
+  }, [showTour, activatedEffects.current.length]);
+  const component = (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement("div", {
     className: "uitour-component"
   }, currentStep && /*#__PURE__*/_react.default.createElement("div", {
     ref: stepRef,
@@ -199,6 +250,8 @@ const UiTour = props => {
     visible: isLastStep,
     onClick: onCloseTour,
     customClass: "finish-button"
-  }))));
+  })))), [currentStep, stepPosition, stepDimensions, showCloseButton, onCloseTour, backButtonLabel, handleBackStep, hasBackStep, showBackButton, nextButtonLabel, handleNextStep, hasNextStep, isLastStep, finishButtonLabel, isLastStep, onCloseTour]);
+  if (!showTour) return null;
+  return /*#__PURE__*/(0, _reactDom.createPortal)(component, document.body);
 };
 var _default = exports.default = UiTour;

package/lib/uitour/types.d.ts

@@ -1,11 +1,18 @@
 import { STEP_POSITIONS } from './helpers.js';
 
+type Effect = 'hover' | 'focus' | 'blur' | 'active' | 'selected';
+type ElementEffect = {
+    elementId: string;
+    effect: Effect;
+};
 type UITourData = {
     id: string | number;
     targetId: string;
+    effect?: Effect;
     title: string;
     description: string;
     position?: keyof typeof STEP_POSITIONS;
+    elementsEffects?: ElementEffect | ElementEffect[];
 };
 interface CurrentStep extends UITourData {
     number: number;
@@ -25,6 +32,7 @@ interface IUITourProps {
     showBackButton?: boolean;
     visible?: boolean;
     onFinish: (value: boolean) => void;
+    onStepChange?: (target: HTMLElement) => void;
 }
 
-export { CurrentStep, IUITourProps, StepDimensions, UITourData };
+export { CurrentStep, Effect, ElementEffect, IUITourProps, StepDimensions, UITourData };

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "linear-react-components-ui",
-  "version": "1.1.3",
+  "version": "1.1.4",
   "description": "Linear Sistemas ReactJs Components",
   "main": "lib/index.js",
   "module": "lib/index.cjs",
   "scripts": {
     "lib": "babel src/lib/ -d lib/ --extensions \".js,.jsx,.ts,.tsx\" --ignore **/*.spec.tsx && babel src/lib/assets -d lib/assets --copy-files && npm run lib:types",
-    "lib:types": "NODE_OPTIONS='--max-old-space-size=16384' tsup --dts-only --dts --external react",
+    "lib:types": "tsup --dts-only --dts --external react",
     "demo": "node scripts/start.js",
     "demo:prod": "webpack --config ./config/webpack.config.js --mode production",
     "check:js": "eslint ./src/** --ext=.jsx,.js,.tsx,.ts --cache",
@@ -108,8 +108,8 @@
     "sass": "1.74.1",
     "sass-loader": "14.1.0",
     "style-loader": "3.3.4",
-    "tsup": "8.0.1",
-    "typescript": "5.3.3",
+    "tsup": "6.6.0",
+    "typescript": "4.9.5",
     "webpack": "5.90.0",
     "webpack-cli": "5.1.4",
     "webpack-dev-server": "4.15.1",