linear-react-components-ui 1.1.20-beta.1 → 1.1.20-beta.11

package/lib/assets/styles/select.scss

@@ -19,6 +19,7 @@
       cursor: pointer;
       display: flex;
       align-items: center;
+      padding: 0 4px;
     }
   }
 
@@ -151,4 +152,4 @@
     font-style: italic;
     font-size: 13px;
   }
-}
+}

package/lib/assets/styles/wizard.scss

@@ -0,0 +1,125 @@
+@import "colors.scss";
+
+.wizard-dialog {
+  .wizard-wrapper {
+    .wizard-content {
+      display: flex !important;
+      flex-direction: column;
+      .wizard-progresbar {
+        width: 100%;
+        display: grid;
+        grid-auto-columns: 1fr;
+        grid-auto-flow: column;
+        justify-content: space-between;
+        padding: 20px;
+        margin-bottom: 20px;
+        border-bottom: 2px solid $component-border-color;
+        gap: 10px;
+        overflow: hidden;
+        > .title {
+          font-size: 16px;
+          font-weight: 600;
+          display: flex;
+          align-items: center;
+          flex-direction: column;
+          position: relative;
+          flex: 1;
+          text-align: center;
+          &:first-child {
+            .step {
+              align-self: flex-start;
+            }
+            .step-title {
+              align-self: flex-start;
+              text-align: left;
+            }
+            &:before {
+              right: auto;
+              left: 45px;
+            }
+          }
+          &:last-child {
+            .step {
+              align-self: flex-end;
+            }
+            .step-title {
+              align-self: flex-end;
+              text-align: right;
+            }
+            &:after {
+              left: auto;
+              right: 45px;
+            }
+          }
+          &::after, &::before {
+            content: "";
+            position: absolute;
+            height: 2px;
+            background-color: $component-border-color;
+            top: 18px;
+            width: calc(100% - 25px);
+            transition: all 0.2s ease-in-out;
+          }
+          &::after {
+            left: calc(50% + 18px);
+          }
+          &::before {
+            right: calc(50% + 18px);
+          }
+          &[data-completed="true"] {
+            &::after {
+              background-color: $success-color !important;
+            }
+            + .title::before {
+              background-color: $success-color !important;
+            }
+            &:first-child::before {
+              background-color: $success-color !important;
+            }
+            & + .title:after {
+              background-color: $success-color !important;
+            }
+            > .step {
+              > .number {
+                background-color: $success-color;
+                border-color: $success-color;
+              }
+            }
+          }
+          &[data-disabled="true"] .step {
+            opacity: 0.3;
+          }
+          > .step {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            width: 54px;
+            > .number {
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              font-size: 20px;
+              font-weight: 600;
+              width: 36px;
+              height: 36px;
+              border-radius: 100%;
+              color: #fff;
+              background-color: $color-light-dark;
+              z-index: 1;
+              transition: all 0.2s ease-in-out;
+              border: 2px solid $color-light-dark;
+            }
+          }
+          > .step-title {
+            max-width: 150px;
+            overflow: hidden;
+            margin-top: 6px;
+            font-weight: 500;
+            color: $font-color-soft;
+          }
+        }
+      }
+    }
+  }
+}

package/lib/buttons/DefaultButton.js

@@ -89,8 +89,9 @@ const DefaultButton = _ref => {
     }
     if (dropdown && showIconDropdown) {
       const openDropDownRule = isDropdownOpened ? 'mini_up' : 'mini_down';
+      const dropdownIcon = iconName || openDropDownRule;
       return /*#__PURE__*/_react.default.createElement(_icons.default, {
-        name: openDropDownRule,
+        name: dropdownIcon,
         size: 16,
         customClass: "dropdown-icon",
         pointerEvents: "none",

package/lib/dialog/base/Content.d.ts

@@ -4,6 +4,6 @@ import '../../@types/Align.js';
 import '../../@types/Icon.js';
 import '../../icons/helper.js';
 
-declare const Content: ({ children, styleForContent }: IContentProps) => JSX.Element;
+declare const Content: ({ children, styleForContent, className }: IContentProps) => JSX.Element;
 
 export { Content as default };

package/lib/dialog/base/Content.js

@@ -10,11 +10,12 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
 const Content = _ref => {
   let {
     children,
-    styleForContent
+    styleForContent,
+    className = ''
   } = _ref;
   return /*#__PURE__*/_react.default.createElement("div", {
     id: "modal-dialog-content",
-    className: "dialog-content",
+    className: "dialog-content ".concat(className),
     style: styleForContent
   }, children);
 };

package/lib/dialog/base/index.js

@@ -21,7 +21,8 @@ const BaseDialog = props => {
     overlay = true,
     closeOnEsc,
     closeOnOutsideClick,
-    wrapperClassName,
+    wrapperClassName = '',
+    className = '',
     children,
     open: openProp,
     onOpenChange,
@@ -112,7 +113,7 @@ const BaseDialog = props => {
     className: "modal-overlay",
     "data-testid": "modal-overlay"
   }), /*#__PURE__*/_react.default.createElement("div", {
-    className: "dialog",
+    className: "dialog ".concat(className),
     "data-testid": "dialog-component"
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: wrapperClassName,

package/lib/dialog/form/index.js

@@ -29,7 +29,10 @@ const ModalForm = props => {
     width = '50%',
     height = '50%',
     content,
-    children
+    children,
+    className = '',
+    wrapperClassName = '',
+    contentClassName = ''
   } = props;
   const headerRef = (0, _react.useRef)(null);
   const context = (0, _react.useContext)(_withFormSecurity.FormSecurityContext);
@@ -56,7 +59,8 @@ const ModalForm = props => {
     width: width,
     height: height
   }, props, {
-    wrapperClassName: "dialog-form-wrapper"
+    wrapperClassName: "dialog-form-wrapper ".concat(wrapperClassName),
+    className: className
   }), props.title && /*#__PURE__*/_react.default.createElement("div", {
     className: "header-form"
   }, /*#__PURE__*/_react.default.createElement(_Header.default, {
@@ -64,7 +68,8 @@ const ModalForm = props => {
     handlerClose: props.handlerClose,
     icon: props.icon
   })), /*#__PURE__*/_react.default.createElement(_Content.default, {
-    styleForContent: _objectSpread(_objectSpread({}, props.styleForContent), overlayStyle)
+    styleForContent: _objectSpread(_objectSpread({}, props.styleForContent), overlayStyle),
+    className: contentClassName
   }, content || children), getSpinner(), showFooter && props.buttons && /*#__PURE__*/_react.default.createElement(_Footer.default, null, /*#__PURE__*/_react.default.createElement(_index.ButtonContainer, _extends({}, props, {
     style: _objectSpread({}, overlayStyle)
   }), _react.default.Children.toArray(props.buttons.map(button => {

package/lib/dialog/types.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode, CSSProperties, ReactElement } from 'react';
+import { ReactNode, CSSProperties, ReactElement, Dispatch } from 'react';
 import { TextAlign } from '../@types/Align.js';
 import { IconNames } from '../@types/Icon.js';
 import '../icons/helper.js';
@@ -6,6 +6,7 @@ import '../icons/helper.js';
 interface IContentProps {
     children: ReactNode | ReactNode[];
     styleForContent?: CSSProperties;
+    className?: string;
 }
 interface IFooterProps {
     children: ReactElement | ReactElement[];
@@ -18,10 +19,11 @@ interface IHeaderProps {
     titleIcon?: IconNames;
 }
 interface IBaseProps {
-    wrapperClassName: string;
+    wrapperClassName?: string;
     width?: string;
     height?: string;
     children: ReactNode | ReactNode[];
+    className?: string;
     closeOnEsc?: boolean;
     closeOnOutsideClick?: boolean;
     overlay?: boolean;
@@ -31,7 +33,7 @@ interface IBaseProps {
     onOpenChange?: (open: boolean) => void;
     handlerClose?: () => void;
 }
-interface IFormProps extends Omit<IBaseProps, 'textAlign' | 'zIndex' | 'wrapperClassName'> {
+interface IFormProps extends Omit<IBaseProps, 'textAlign' | 'zIndex'> {
     buttons?: JSX.Element[];
     styleForContent?: CSSProperties;
     title?: string;
@@ -39,6 +41,7 @@ interface IFormProps extends Omit<IBaseProps, 'textAlign' | 'zIndex' | 'wrapperC
     isWaiting?: boolean;
     icon?: JSX.Element;
     content?: ReactNode;
+    contentClassName?: string;
 }
 interface ICommonDialogProps {
     onConfirmClick?: () => void;
@@ -66,5 +69,32 @@ interface ICustomProps {
 interface IFormDialogContext {
     headerRef?: React.RefObject<HTMLDivElement>;
 }
+interface WizardComponentProps extends Omit<IFormProps, 'content'> {
+    children: React.ReactNode;
+    buttons?: JSX.Element[];
+    showProgressbar?: boolean;
+    title?: string;
+    handlerClose?: () => void;
+    controls: WizardControls;
+}
+interface WizardStepComponentProps {
+    children: React.ReactNode;
+    title: string;
+    customClass?: string;
+    customStyle?: CSSProperties;
+}
+interface WizardControls extends Omit<UseWizardReturn, 'controls'> {
+    setTotalSteps: Dispatch<React.SetStateAction<number>>;
+}
+interface UseWizardReturn {
+    changeStep: (nextStep: number) => void;
+    nextStep: () => void;
+    hasNextStep: boolean;
+    previousStep: () => void;
+    hasPreviousStep: boolean;
+    currentStep: number;
+    totalSteps: number;
+    controls: WizardControls;
+}
 
-export { IBaseProps, ICommonDialogProps, IContentProps, ICustomProps, IFooterProps, IFormDialogContext, IFormProps, IHeaderProps, IQuestionProps };
+export { IBaseProps, ICommonDialogProps, IContentProps, ICustomProps, IFooterProps, IFormDialogContext, IFormProps, IHeaderProps, IQuestionProps, UseWizardReturn, WizardComponentProps, WizardControls, WizardStepComponentProps };

package/lib/dialog/wizard/index.d.ts

@@ -0,0 +1,13 @@
+import React__default from 'react';
+import { WizardControls, WizardComponentProps } from '../types.js';
+export { WizardStep as Step } from './step.js';
+export { useWizard } from './useWizard.js';
+import '../../@types/Align.js';
+import '../../@types/Icon.js';
+import '../../icons/helper.js';
+
+declare const WizardContext: React__default.Context<WizardControls | null>;
+declare const useWizardContext: () => WizardControls | null;
+declare function Wizard({ children, controls, showProgressbar, ...dialogProps }: Readonly<WizardComponentProps>): JSX.Element;
+
+export { Wizard as Container, WizardContext, Wizard as default, useWizardContext };

package/lib/dialog/wizard/index.js

@@ -0,0 +1,74 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Container = Wizard;
+Object.defineProperty(exports, "Step", {
+  enumerable: true,
+  get: function () {
+    return _step.WizardStep;
+  }
+});
+exports.default = exports.WizardContext = void 0;
+Object.defineProperty(exports, "useWizard", {
+  enumerable: true,
+  get: function () {
+    return _useWizard.useWizard;
+  }
+});
+exports.useWizardContext = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _lodash = _interopRequireDefault(require("lodash"));
+var _form = _interopRequireDefault(require("../form/"));
+var _progressbar = require("./progressbar");
+require("../../assets/styles/wizard.scss");
+var _step = require("./step");
+var _useWizard = require("./useWizard");
+const _excluded = ["children", "controls", "showProgressbar"];
+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 s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(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 (e.includes(n)) continue; t[n] = r[n]; } return t; }
+const WizardContext = exports.WizardContext = /*#__PURE__*/_react.default.createContext(null);
+const useWizardContext = () => _react.default.useContext(WizardContext);
+exports.useWizardContext = useWizardContext;
+function Wizard(_ref) {
+  let {
+      children,
+      controls,
+      showProgressbar = true
+    } = _ref,
+    dialogProps = _objectWithoutProperties(_ref, _excluded);
+  const {
+    currentStep,
+    setTotalSteps
+  } = controls;
+  const steps = _react.default.Children.toArray(children);
+  const stepsTitle = steps.map((step, index) => {
+    return {
+      title: String(step.props.title),
+      number: index + 1,
+      completed: index < currentStep - 1 && index !== currentStep
+    };
+  });
+  const currentStepElement = steps[currentStep - 1];
+  if (!controls || _lodash.default.isEmpty(controls)) throw new Error('Wizard must be have controls by using useWizard hook or creating manually.');
+  (0, _react.useEffect)(() => {
+    setTotalSteps(steps.length);
+  }, [steps.length]);
+  return /*#__PURE__*/_react.default.createElement(WizardContext.Provider, {
+    value: controls
+  }, /*#__PURE__*/_react.default.createElement(_form.default, _extends({
+    className: "wizard-dialog",
+    wrapperClassName: "wizard-wrapper",
+    contentClassName: "wizard-content"
+  }, dialogProps), showProgressbar && /*#__PURE__*/_react.default.createElement(_progressbar.Progressbar, {
+    stepsTitle: stepsTitle
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "wizard-body"
+  }, currentStepElement)));
+}
+var _default = exports.default = Wizard;

package/lib/dialog/wizard/progressbar.d.ts

@@ -0,0 +1,13 @@
+import { CSSProperties } from 'react';
+
+declare function Progressbar({ customClass, customStyle, stepsTitle }: Readonly<{
+    customClass?: string;
+    stepsTitle: {
+        title: string;
+        number: number;
+        completed: boolean;
+    }[];
+    customStyle?: CSSProperties;
+}>): JSX.Element;
+
+export { Progressbar };

package/lib/dialog/wizard/progressbar.js

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Progressbar = Progressbar;
+var _react = _interopRequireDefault(require("react"));
+var _ = require(".");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function Progressbar(_ref) {
+  let {
+    customClass,
+    customStyle,
+    stepsTitle
+  } = _ref;
+  const context = (0, _.useWizardContext)();
+  if (!context) throw new Error('WizardProgressbar must be used within a Wizard component');
+  const {
+    currentStep
+  } = context;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "wizard-progresbar ".concat(customClass),
+    style: customStyle
+  }, stepsTitle.map(step => /*#__PURE__*/_react.default.createElement("div", {
+    key: step.number,
+    className: "title",
+    "data-completed": step.completed,
+    "data-disabled": step.number > currentStep
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "step"
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "number"
+  }, step.number)), /*#__PURE__*/_react.default.createElement("span", {
+    className: "step-title"
+  }, step.title))));
+}

package/lib/dialog/wizard/step.d.ts

@@ -0,0 +1,9 @@
+import { WizardStepComponentProps } from '../types.js';
+import 'react';
+import '../../@types/Align.js';
+import '../../@types/Icon.js';
+import '../../icons/helper.js';
+
+declare function WizardStep({ children, customClass, customStyle }: Readonly<WizardStepComponentProps>): JSX.Element;
+
+export { WizardStep };

package/lib/dialog/wizard/step.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.WizardStep = WizardStep;
+var _react = _interopRequireDefault(require("react"));
+var _ = require(".");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function WizardStep(_ref) {
+  let {
+    children,
+    customClass = '',
+    customStyle
+  } = _ref;
+  const context = (0, _.useWizardContext)();
+  if (!context) throw new Error('WizardStep must be used within a Wizard component');
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "wizard-step-component ".concat(customClass),
+    style: customStyle
+  }, children);
+}

package/lib/dialog/wizard/useWizard.d.ts

@@ -0,0 +1,9 @@
+import { UseWizardReturn } from '../types.js';
+import 'react';
+import '../../@types/Align.js';
+import '../../@types/Icon.js';
+import '../../icons/helper.js';
+
+declare const useWizard: () => UseWizardReturn;
+
+export { useWizard };

package/lib/dialog/wizard/useWizard.js

@@ -0,0 +1,48 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useWizard = void 0;
+var _react = _interopRequireWildcard(require("react"));
+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 useWizard = () => {
+  const [totalSteps, setTotalSteps] = (0, _react.useState)(0);
+  const [currentStep, setCurrentStep] = _react.default.useState(1);
+  const hasNextStep = currentStep < totalSteps;
+  const hasPreviousStep = currentStep > 1;
+  const changeStep = nextStep => {
+    setCurrentStep(state => state + nextStep);
+  };
+  const nextStep = () => {
+    if (hasNextStep) {
+      changeStep(1);
+    }
+  };
+  const previousStep = () => {
+    if (hasPreviousStep) {
+      changeStep(-1);
+    }
+  };
+  return {
+    changeStep,
+    nextStep,
+    hasNextStep,
+    previousStep,
+    hasPreviousStep,
+    currentStep,
+    totalSteps,
+    controls: {
+      changeStep,
+      nextStep,
+      hasNextStep,
+      previousStep,
+      hasPreviousStep,
+      currentStep,
+      totalSteps,
+      setTotalSteps
+    }
+  };
+};
+exports.useWizard = useWizard;

package/lib/form/FieldNumber.js

@@ -31,7 +31,7 @@ const getEventProps = _ref => {
   } = _ref;
   return {
     onBlur: e => {
-      if (handlerFieldChange) handlerFieldChange(e);
+      if ((component === null || component === void 0 ? void 0 : component.name) !== 'NumberField' && handlerFieldChange) handlerFieldChange(e);
       if (validators && handlerFieldValidate) handlerFieldValidate(name, e.target.value, validators);
       if (onBlur) onBlur(e);
     },

package/lib/icons/helper.d.ts

@@ -19,6 +19,10 @@ declare const _default: {
         viewbox: string;
         paths: string[];
     };
+    supplier: {
+        viewbox: string;
+        paths: string[];
+    };
     mail: {
         viewbox: string;
         paths: string[];
@@ -607,6 +611,22 @@ declare const _default: {
         viewbox: string;
         paths: string[];
     };
+    similarity: {
+        viewbox: string;
+        paths: string[];
+    };
+    fileStack: {
+        viewbox: string;
+        paths: string[];
+    };
+    tree: {
+        viewbox: string;
+        paths: string[];
+    };
+    bank: {
+        viewbox: string;
+        paths: string[];
+    };
 };
 
 export { _default as default };

package/lib/icons/helper.js

@@ -25,6 +25,10 @@ var _default = exports.default = {
     viewbox: '0 0 16 16',
     paths: ['M4 5c0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.209-1.791 4-4 4s-4-1.791-4-4zM12 10h-8c-2.209 0-4 1.791-4 4v1h16v-1c0-2.209-1.791-4-4-4z']
   },
+  supplier: {
+    viewbox: '0 0 16 16',
+    paths: ['M12 12.041v-0.825c1.101-0.621 2-2.168 2-3.716 0-2.485 0-4.5-3-4.5s-3 2.015-3 4.5c0 1.548 0.898 3.095 2 3.716v0.825c-3.392 0.277-6 1.944-6 3.959h14c0-2.015-2.608-3.682-6-3.959z', 'M3.242 9.625c-0.212 0.077-0.416 0.161-0.611 0.25h4.782c-0.038-0.083-0.075-0.166-0.109-0.25h-4.062z', 'M0.425 11.625c-0.053 0.082-0.101 0.165-0.144 0.25h5.834c0.192-0.089 0.389-0.172 0.593-0.25h-6.284z', 'M1.367 10.625c-0.105 0.081-0.204 0.164-0.299 0.25h6.933c-0.060-0.081-0.118-0.165-0.174-0.25h-6.461z', 'M5.261 9.125c-0.424 0.062-0.833 0.146-1.222 0.25h3.17c-0.030-0.083-0.057-0.166-0.083-0.25h-1.864z', 'M6 8.625v0.25h1.054c-0.022-0.083-0.041-0.166-0.059-0.25h-0.995z', 'M5.851 8.125c0.049 0.032 0.099 0.063 0.149 0.091v0.159h0.947c-0.014-0.083-0.025-0.167-0.035-0.25h-1.062z', 'M0.030 12.625c-0.013 0.083-0.022 0.166-0.027 0.25h4.501c0.102-0.085 0.209-0.169 0.321-0.25h-4.795z', 'M1.719 10.375h5.955c-0.024-0.042-0.048-0.084-0.072-0.127-0.022-0.041-0.044-0.082-0.066-0.123h-5.402c-0.145 0.080-0.283 0.163-0.415 0.25z', 'M4.005 3.625c-0.002 0.083-0.003 0.166-0.003 0.25h3.339c0.004-0.009 0.008-0.018 0.012-0.028 0.035-0.076 0.073-0.15 0.112-0.222h-3.46z', 'M0.168 12.125c-0.032 0.082-0.060 0.166-0.083 0.25h5.109c0.136-0.087 0.277-0.17 0.423-0.25h-5.449z', 'M4.643 0.875h4.713c-0.070-0.089-0.148-0.173-0.234-0.25h-4.245c-0.086 0.077-0.164 0.161-0.234 0.25z', 'M0.602 11.375h6.845c0.256-0.076 0.519-0.145 0.787-0.204-0.013-0.015-0.025-0.030-0.038-0.046h-7.381c-0.076 0.082-0.147 0.165-0.213 0.25z', 'M5.255 7.625c0.085 0.089 0.173 0.173 0.263 0.25h1.371c-0.006-0.083-0.010-0.167-0.012-0.25h-1.622z', 'M4.848 7.125c0.060 0.086 0.123 0.17 0.188 0.25h1.84c0-0.084 0-0.167 0-0.25h-2.027z', 'M4.255 1.625c-0.027 0.081-0.050 0.164-0.072 0.25h5.632c-0.021-0.086-0.045-0.169-0.072-0.25h-5.489z', 'M4.13 2.125c-0.015 0.082-0.029 0.165-0.041 0.25h4.625c0.179-0.098 0.372-0.181 0.578-0.25h-5.162z', 'M4.022 3.125c-0.004 0.082-0.008 0.166-0.010 0.25h3.605c0.058-0.087 0.12-0.17 0.185-0.25h-3.78z', 'M4.059 2.625c-0.008 0.082-0.016 0.165-0.022 0.25h3.995c0.092-0.089 0.189-0.173 0.292-0.25h-4.265z', 'M5.866 0.125c-0.243 0.062-0.455 0.146-0.638 0.25h3.544c-0.184-0.104-0.396-0.188-0.639-0.25h-2.266z', 'M4.544 6.625c0.045 0.085 0.092 0.169 0.141 0.25h2.192c0.001-0.084 0.002-0.167 0.003-0.25h-2.336z', 'M4.475 1.125c-0.046 0.080-0.088 0.163-0.125 0.25h5.3c-0.037-0.087-0.079-0.17-0.125-0.25h-5.050z', 'M4.152 5.625c0.022 0.084 0.048 0.167 0.074 0.25h2.683c0.005-0.084 0.012-0.167 0.019-0.25h-2.777z', 'M4.316 6.125c0.033 0.085 0.068 0.168 0.105 0.25h2.464c0.003-0.084 0.006-0.167 0.009-0.25h-2.579z', 'M4 4.125c-0 0.083-0 0.166-0 0.25h3.155c0.025-0.085 0.053-0.168 0.084-0.25h-3.238z', 'M4.002 4.625c0.003 0.083 0.008 0.167 0.016 0.25h3.014c0.016-0.084 0.035-0.168 0.055-0.25h-3.085z', 'M4.048 5.125c0.013 0.084 0.027 0.167 0.045 0.25h2.862c0.010-0.084 0.021-0.167 0.034-0.25h-2.941z']
+  },
   mail: {
     viewbox: '0 0 16 16',
     paths: ['M13.333 0h-10.666c-1.467 0-2.667 1.2-2.667 2.667v10.666c0 1.468 1.2 2.667 2.667 2.667h10.666c1.467 0 2.667-1.199 2.667-2.667v-10.666c0-1.467-1.2-2.667-2.667-2.667zM2.854 13.854l-1.207-1.207 4-4 0.457 0.457-3.25 4.75zM2.396 3.104l0.457-0.457 5.146 4.146 5.146-4.146 0.457 0.457-5.604 6.604-5.604-6.604zM13.146 13.854l-3.25-4.75 0.457-0.457 4 4-1.207 1.207z']
@@ -612,5 +616,21 @@ var _default = exports.default = {
   user_block: {
     viewbox: '0 0 16 16',
     paths: ['M7.5 16h-6.977c-0.14 0-0.274-0.059-0.369-0.163s-0.141-0.242-0.129-0.382c0.11-1.22 0.585-2.363 1.373-3.305 0.697-0.832 1.59-1.452 2.602-1.809l0-0.475c-0.562-0.385-1.037-0.926-1.385-1.582-0.402-0.758-0.615-1.634-0.615-2.535 0-1.251 0.405-2.431 1.139-3.323 0.758-0.92 1.774-1.427 2.861-1.427 2.119 0 3.874 1.966 3.993 4.476 0.013 0.276-0.2 0.51-0.476 0.523s-0.51-0.2-0.523-0.476c-0.094-1.976-1.41-3.524-2.995-3.524-1.654 0-3 1.682-3 3.75 0 1.457 0.687 2.795 1.75 3.408 0.155 0.089 0.25 0.254 0.25 0.433l-0 1.116c0 0.224-0.149 0.42-0.364 0.481-0.967 0.274-1.822 0.828-2.471 1.604-0.538 0.643-0.901 1.397-1.064 2.208h6.4c0.276 0 0.5 0.224 0.5 0.5s-0.224 0.5-0.5 0.5z', 'M11.5 7c-2.481 0-4.5 2.019-4.5 4.5s2.019 4.5 4.5 4.5 4.5-2.019 4.5-4.5-2.019-4.5-4.5-4.5zM8 11.5c0-1.93 1.57-3.5 3.5-3.5 0.785 0 1.511 0.26 2.095 0.698l-4.897 4.897c-0.438-0.584-0.698-1.31-0.698-2.095zM11.5 15c-0.785 0-1.511-0.26-2.095-0.698l4.897-4.897c0.438 0.584 0.698 1.31 0.698 2.095 0 1.93-1.57 3.5-3.5 3.5z']
+  },
+  similarity: {
+    viewbox: '0 0 16 16',
+    paths: ['M13 4h-3v-1l-3-3h-7v12h6v4h10v-9l-3-3zM13 5.414l1.586 1.586h-1.586v-1.586zM7 1.414l1.586 1.586h-1.586v-1.586zM1 1h5v3h3v7h-8v-10zM15 15h-8v-3h3v-7h2v3h3v7z']
+  },
+  fileStack: {
+    viewbox: '0 0 16 16',
+    paths: ['M13.75 4h-0.75v-0.75c0-0.689-0.561-1.25-1.25-1.25h-0.75v-0.75c0-0.689-0.561-1.25-1.25-1.25h-7.5c-0.689 0-1.25 0.561-1.25 1.25v9.5c0 0.689 0.561 1.25 1.25 1.25h0.75v0.75c0 0.689 0.561 1.25 1.25 1.25h0.75v0.75c0 0.689 0.561 1.25 1.25 1.25h7.5c0.689 0 1.25-0.561 1.25-1.25v-9.5c0-0.689-0.561-1.25-1.25-1.25zM2.25 11c-0.138 0-0.25-0.113-0.25-0.25v-9.5c0-0.137 0.112-0.25 0.25-0.25h7.5c0.137 0 0.25 0.113 0.25 0.25v0.75h-5.75c-0.689 0-1.25 0.561-1.25 1.25v7.75h-0.75zM4.25 13c-0.138 0-0.25-0.113-0.25-0.25v-9.5c0-0.138 0.112-0.25 0.25-0.25h7.5c0.137 0 0.25 0.112 0.25 0.25v0.75h-5.75c-0.689 0-1.25 0.561-1.25 1.25v7.75h-0.75zM14 14.75c0 0.137-0.113 0.25-0.25 0.25h-7.5c-0.138 0-0.25-0.113-0.25-0.25v-9.5c0-0.138 0.112-0.25 0.25-0.25h7.5c0.137 0 0.25 0.112 0.25 0.25v9.5z']
+  },
+  tree: {
+    viewbox: '0 0 16 16',
+    paths: ['M15.25 12h-0.25v-3.25c0-0.965-0.785-1.75-1.75-1.75h-4.25v-2h0.25c0.412 0 0.75-0.338 0.75-0.75v-2.5c0-0.413-0.338-0.75-0.75-0.75h-2.5c-0.412 0-0.75 0.337-0.75 0.75v2.5c0 0.412 0.338 0.75 0.75 0.75h0.25v2h-4.25c-0.965 0-1.75 0.785-1.75 1.75v3.25h-0.25c-0.412 0-0.75 0.338-0.75 0.75v2.5c0 0.412 0.338 0.75 0.75 0.75h2.5c0.413 0 0.75-0.338 0.75-0.75v-2.5c0-0.412-0.337-0.75-0.75-0.75h-0.25v-3h4v3h-0.25c-0.412 0-0.75 0.338-0.75 0.75v2.5c0 0.412 0.338 0.75 0.75 0.75h2.5c0.412 0 0.75-0.338 0.75-0.75v-2.5c0-0.412-0.338-0.75-0.75-0.75h-0.25v-3h4v3h-0.25c-0.412 0-0.75 0.338-0.75 0.75v2.5c0 0.412 0.338 0.75 0.75 0.75h2.5c0.412 0 0.75-0.338 0.75-0.75v-2.5c0-0.412-0.338-0.75-0.75-0.75zM3 15h-2v-2h2v2zM9 15h-2v-2h2v2zM7 4v-2h2v2h-2zM15 15h-2v-2h2v2z']
+  },
+  bank: {
+    viewbox: '0 0 16 16',
+    paths: ['M16 15v-1h-1v-6h1v-1h-3v1h1v6h-3v-6h1v-1h-3v1h1v6h-3v-6h1v-1h-3v1h1v6h-3v-6h1v-1h-3v1h1v6h-1v1h-1v1h17v-1h-1z', 'M8 0h1l8 5v1h-17v-1l8-5z']
   }
 };

package/lib/inputs/base/InputTextBase.js

@@ -219,7 +219,8 @@ const InputTextBase = props => {
     className: "inputcontent ".concat(customClassForInputContent)
   }, type === 'textarea' ? /*#__PURE__*/_react.default.createElement("textarea", _extends({
     rows: props.rows,
-    cols: props.cols
+    cols: props.cols,
+    tabIndex: applyTabIndex()
   }, inputProps())) : /*#__PURE__*/_react.default.createElement("input", _extends({
     autoComplete: autoComplete,
     tabIndex: applyTabIndex(),

package/lib/inputs/select/multiple/index.js

@@ -25,7 +25,8 @@ const MultipleSelect = props => {
     value = [],
     remoteSearch = false,
     descriptionKey,
-    showClearButton
+    showClearButton,
+    rightElements = []
   } = props;
   const [dataCombo, setDataCombo] = (0, _react.useState)(dataSource);
   const [currents, setCurrents] = (0, _react.useState)([]);
@@ -240,7 +241,8 @@ const MultipleSelect = props => {
       selectWrapper.current = r;
     },
     handlerSetOnDenied: setOnDenied,
-    rightElements: /*#__PURE__*/_react.default.createElement(_ActionButtons.default, {
+    rightElements: [...rightElements, /*#__PURE__*/_react.default.createElement(_ActionButtons.default, {
+      key: "action-buttons-multiselect",
       showClearButton: showClearButton,
       disabled: shouldDisable() || shouldBeReadOnly(),
       dropDownOpened: opened,
@@ -249,7 +251,7 @@ const MultipleSelect = props => {
         return onClearClick();
       },
       handlerOpenClose: onOpenClose
-    })
+    })]
   }), /*#__PURE__*/_react.default.createElement(_Selecteds.default, _extends({}, props, {
     currents: currents,
     handlerOnUnselect: onUnselect

package/lib/inputs/select/simple/index.js

@@ -34,7 +34,8 @@ const SimpleSelect = props => {
     searchOnDropdown = false,
     allOptions = undefined,
     showClearButton = false,
-    searchNotFoundText
+    searchNotFoundText,
+    rightElements = []
   } = props;
   const descriptionKeyIsString = typeof descriptionKey === 'string';
   const dataSourceWithAllOptions = allOptions ? [{
@@ -274,7 +275,8 @@ const SimpleSelect = props => {
       selectWrapper.current = r;
     },
     handlerSetOnDenied: inputOnDenied => setOnDenied(inputOnDenied),
-    rightElements: /*#__PURE__*/_react.default.createElement(_ActionButtons.default, {
+    rightElements: [...rightElements, /*#__PURE__*/_react.default.createElement(_ActionButtons.default, {
+      key: "action-buttons-simpleselect",
       disabled: shouldDisable() || shouldBeReadOnly(),
       showClearButton: showClearButton,
       dropDownOpened: opened,
@@ -283,7 +285,7 @@ const SimpleSelect = props => {
         return onClearClick();
       },
       handlerOpenClose: onOpenClose
-    })
+    })]
   })), opened && /*#__PURE__*/_react.default.createElement(_Dropdown.default, _extends({}, props, {
     opened: opened,
     selected: selected,

package/lib/inputs/select/types.d.ts

@@ -50,6 +50,7 @@ interface ISimpleSelectProps {
     onFocus?: () => void;
     allOptions?: AllOptions;
     inputRef?: MutableRefObject<HTMLInputElement | HTMLTextAreaElement | null> | ((ref: HTMLInputElement | HTMLTextAreaElement | null) => void);
+    rightElements?: JSX.Element[];
 }
 interface ISelectFieldProps extends Omit<ISimpleSelectProps, 'idKey' | 'value' | 'descriptionKey'> {
     multiple?: boolean;

package/lib/list/Header.d.ts

@@ -3,6 +3,7 @@ import 'react';
 import '../@types/PermissionAttr.js';
 import '../@types/Icon.js';
 import '../icons/helper.js';
+import '../@types/Position.js';
 
 declare const Header: ({ title, children, style, customClass }: IListHeaderProps) => JSX.Element;
 

package/lib/list/Item.d.ts

@@ -3,7 +3,11 @@ import 'react';
 import '../@types/PermissionAttr.js';
 import '../@types/Icon.js';
 import '../icons/helper.js';
+import '../@types/Position.js';
 
-declare const Item: (props: IListItemProps) => JSX.Element | null;
+declare const _default: {
+    (props: IListItemProps): JSX.Element;
+    displayName: string;
+};
 
-export { Item as default };
+export { _default as default };

package/lib/list/Item.js

@@ -11,6 +11,7 @@ var _checkbox = _interopRequireDefault(require("../checkbox"));
 var _helpers = require("./helpers");
 var _withDropdown = require("../dropdown/withDropdown");
 var constants = _interopRequireWildcard(require("../internals/constants"));
+var _withTooltip = _interopRequireWildcard(require("../internals/withTooltip"));
 var _permissionValidations = require("../permissionValidations");
 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); }
@@ -38,7 +39,9 @@ const Item = props => {
     separator = true,
     visible = true,
     permissionAttr,
-    skeletonize
+    skeletonize,
+    targetRef,
+    onDeniedText = 'Permissão Negada! Consulte o Administrador do sistema.'
   } = props;
   const {
     handleSelectItem,
@@ -48,6 +51,9 @@ const Item = props => {
     selectOnEnter
   } = (0, _react.useContext)(_helpers.ListContext);
   const dropdownContext = (0, _react.useContext)(_withDropdown.WithDropdownContext);
+  const {
+    handlerSetOnDeniedText
+  } = (0, _react.useContext)(_withTooltip.TooltipContext);
   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)();
@@ -103,6 +109,9 @@ const Item = props => {
       document.removeEventListener('keydown', onKeyDown);
     };
   }, [url, selectedItemId, itemId]);
+  (0, _react.useEffect)(() => {
+    if (disabledByPermission) handlerSetOnDeniedText(onDeniedText);
+  }, [disabledByPermission]);
   const renderCheckBox = (0, _react.useMemo)(() => {
     if (!disabledByPermission && displayCheckbox) {
       return /*#__PURE__*/_react.default.createElement(_checkbox.default, {
@@ -117,7 +126,10 @@ const Item = props => {
   }, [disabledByPermission && displayCheckbox]);
   if (!visible || onDenied.unvisible) return null;
   return /*#__PURE__*/_react.default.createElement("li", _extends({
-    ref: itemId && selectedItemId === itemId ? selectedItemRef : null,
+    ref: ref => {
+      if (targetRef) targetRef(ref);
+      return itemId && selectedItemId === itemId ? selectedItemRef : null;
+    },
     style: style,
     className: "item-container ".concat(hovered && 'hovered', "\n        ").concat(itemId && selectedItemId === itemId ? '-activedlist' : '')
   }, getProps(), {
@@ -137,4 +149,4 @@ const Item = props => {
     className: "".concat(getClass(), " -icon-right")
   }, getIcon(rightIconName, rightIcon), rightElement));
 };
-var _default = exports.default = Item;
+var _default = exports.default = (0, _withTooltip.default)(Item);

package/lib/list/helpers.d.ts

@@ -3,6 +3,7 @@ import { IListContext } from './types.js';
 import '../@types/PermissionAttr.js';
 import '../@types/Icon.js';
 import '../icons/helper.js';
+import '../@types/Position.js';
 
 declare const ListContext: React__default.Context<IListContext>;
 declare const LIST_ITEMS_TYPES: {

package/lib/list/index.d.ts

@@ -6,6 +6,7 @@ import 'react';
 import '../@types/PermissionAttr.js';
 import '../@types/Icon.js';
 import '../icons/helper.js';
+import '../@types/Position.js';
 
 declare const List: (props: IListProps) => JSX.Element;
 

package/lib/list/types.d.ts

@@ -1,6 +1,7 @@
 import { ReactNode, ReactElement, CSSProperties, Ref } from 'react';
 import { PermissionAttr } from '../@types/PermissionAttr.js';
 import { IconNames } from '../@types/Icon.js';
+import { Position } from '../@types/Position.js';
 import '../icons/helper.js';
 
 type ItemId = string;
@@ -52,6 +53,11 @@ interface IListItemProps {
     permissionAttr?: PermissionAttr | PermissionAttr[];
     selectOnEnter?: boolean;
     skeletonize?: boolean;
+    targetRef?: (ref: HTMLLIElement) => void;
+    tooltipPosition?: Exclude<Position, 'center'>;
+    tooltipWidth?: string | number;
+    tooltip?: string;
+    onDeniedText?: string;
 }
 interface IListContext {
     selectable: boolean;

package/lib/table/HeaderColumn.js

@@ -8,6 +8,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _icons = _interopRequireDefault(require("../icons"));
 var _skeleton = _interopRequireDefault(require("../skeleton"));
 var _helpers = _interopRequireDefault(require("./helpers"));
+var _lodash = _interopRequireDefault(require("lodash"));
 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; }
@@ -20,8 +21,6 @@ const HeaderColumn = props => {
     textAlign,
     visible = true,
     id,
-    rowSpan,
-    colSpan,
     isMenuColumn = false
   } = props;
   const {
@@ -38,13 +37,14 @@ const HeaderColumn = props => {
       size: 22
     });
   };
+  const getProps = () => {
+    return _lodash.default.omit(props, ['isMenuColumn', 'customClass', 'children', 'textAlign', 'visible']);
+  };
   if (!visible) return null;
-  return /*#__PURE__*/_react.default.createElement("th", _extends({}, props, {
+  return /*#__PURE__*/_react.default.createElement("th", _extends({}, getProps(), {
     id: id,
-    rowSpan: rowSpan,
-    colSpan: colSpan,
-    className: "headercolumn ".concat(customClass, " text-align-").concat(textAlign, " ").concat(isMenuColumn && 'menu-column'),
-    style: style
+    style: style,
+    className: "headercolumn ".concat(customClass, " text-align-").concat(textAlign, " ").concat(isMenuColumn && 'menu-column')
   }), skeletonize && (skeletonInHeader || !skeletonInRows) && !vertical ? /*#__PURE__*/_react.default.createElement(_skeleton.default, {
     height: style && style.height ? undefined : 16,
     style: {

package/lib/table/types.d.ts

@@ -25,8 +25,6 @@ interface ITableHeaderProps extends ComponentProps<'th'> {
     textAlign?: string;
     visible?: boolean;
     id?: string;
-    rowSpan?: number;
-    colSpan?: number;
     isMenuColumn?: boolean;
 }
 interface ITableBodyProps extends TableHTMLAttributes<HTMLTableElement> {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "linear-react-components-ui",
-  "version": "1.1.20-beta.1",
+  "version": "1.1.20-beta.11",
   "description": "Linear Sistemas ReactJs Components",
   "main": "lib/index.js",
   "module": "lib/index.cjs",