linear-react-components-ui 1.1.6-beta.0 → 1.1.6-beta.2

package/lib/assets/styles/icon.scss

@@ -1,15 +1,42 @@
+@import "colors.scss";
+
 /*
 * Caso altere o nome da classe, deverá pesquisar em todo projeto se existe 
 * algum lugar que esta sobescrevendo
 */
-.icon-component {
-  margin: 0px 2px;
-}
-
 .icon-component-container {
   display: inline-flex;
   place-self: center;
   padding: 2px;
   border-radius: 99999px;
   pointer-events: fill;
+
+}
+
+.icon-component {
+  margin: 0px 2px;
+  &:not([fill]) { 
+    fill: #676464;
+  }
+
+  &[data-color-style="primary"] {
+    fill: $primary-color
+  }
+
+  &[data-color-style="success"] {
+    fill: $success-color
+  }
+
+  &[data-color-style="info"] {
+    fill: $info-color
+  }
+
+  &[data-color-style="warning"] {
+    fill: $warning-color
+  }
+
+  &[data-color-style="danger"] {
+    fill: $danger-color
+  }
 }
+

package/lib/assets/styles/textContent.scss

@@ -0,0 +1,9 @@
+@import "colors.scss";
+@import "fonts.scss";
+
+.text-content-component {
+  @extend %component-fonts;
+  &[data-textcontent="strong"] {
+    font-weight: bold;
+  }
+}

package/lib/checkbox/index.d.ts

@@ -1,5 +1,5 @@
+import React__default from 'react';
 import { ICheckBoxProps } from './types.js';
-import 'react';
 import '../@types/PermissionAttr.js';
 import '../@types/Position.js';
 
@@ -8,6 +8,6 @@ import '../@types/Position.js';
  * o componente Field dentro do componente Form, pois o mesmo leva em consideração o tipo do
  * componente para gerar propriedades customizadas.
  */
-declare const CheckBox: ({ name, required, value, label, onChange, autofocus, hint, id, gridLayout, checked, disabled, permissionAttr, tooltip, tooltipPosition, tooltipWidth, skeletonize, targetRef, errorMessages, }: ICheckBoxProps) => JSX.Element | null;
+declare const CheckBox: React__default.ForwardRefExoticComponent<ICheckBoxProps & React__default.RefAttributes<HTMLInputElement>>;
 
 export { CheckBox as default };

package/lib/checkbox/index.js

@@ -21,7 +21,7 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
  * componente para gerar propriedades customizadas.
  */
 
-const CheckBox = _ref => {
+const CheckBox = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   let {
     name,
     required,
@@ -30,7 +30,7 @@ const CheckBox = _ref => {
     onChange,
     autofocus,
     hint,
-    id = '',
+    id = undefined,
     gridLayout,
     checked = false,
     disabled,
@@ -46,6 +46,7 @@ const CheckBox = _ref => {
   const options = [_permissionValidations.OPTIONS_ON_DENIED.disabled, _permissionValidations.OPTIONS_ON_DENIED.unvisible];
   const [onDenied] = (0, _react.useState)((0, _permissionValidations.actionsOnPermissionDenied)(options, permissionAttr));
   const inputRef = (0, _react.useRef)(null);
+  (0, _react.useImperativeHandle)(ref, () => inputRef.current, [inputRef.current]);
   (0, _react.useEffect)(() => {
     setIsChecked(checked);
   }, [checked]);
@@ -78,8 +79,7 @@ const CheckBox = _ref => {
     onClick: !shouldDisable() && !skeletonize ? () => setIsChecked(!isChecked) : undefined,
     tabIndex: -1,
     role: "checkbox",
-    "aria-checked": "false",
-    onKeyPress: undefined
+    "aria-checked": "false"
   }, /*#__PURE__*/_react.default.createElement("input", {
     id: id || undefined,
     ref: r => {
@@ -113,5 +113,6 @@ const CheckBox = _ref => {
     customClass: "-withinput",
     cols: gridLayout
   }, renderInput()) : renderInput();
-};
+});
+CheckBox.displayName = 'CheckBox';
 var _default = exports.default = CheckBox;

package/lib/checkbox/types.d.ts

@@ -4,7 +4,7 @@ import { Position } from '../@types/Position.js';
 
 type ChangeEvent = {
     checked: boolean;
-    id: string;
+    id?: string;
     name?: string;
     value: boolean;
 };

package/lib/dialog/base/Content.js

@@ -4,10 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 require("../../assets/styles/dialog.scss");
-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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const Content = _ref => {
   let {
     children,
@@ -17,6 +16,6 @@ const Content = _ref => {
     id: "modal-dialog-content",
     className: "dialog-content",
     style: styleForContent
-  }, /*#__PURE__*/_react.default.createElement(_react.Suspense, null, children));
+  }, children);
 };
 var _default = exports.default = Content;

package/lib/drawer/Content.js

@@ -21,6 +21,6 @@ const Content = _ref => {
   return hideContent ? /*#__PURE__*/_react.default.createElement(_noPermission.default, null) : /*#__PURE__*/_react.default.createElement("div", {
     className: "drawerbody",
     style: style
-  }, /*#__PURE__*/_react.default.createElement(_react.Suspense, null, children));
+  }, children);
 };
 var _default = exports.default = Content;

package/lib/drawer/Header.js

@@ -24,7 +24,7 @@ const getIcon = (titleIcon, icon) => {
     return /*#__PURE__*/_react.default.createElement("span", {
       "data-testid": "icon-header",
       className: "icon-header"
-    }, icon || /*#__PURE__*/_react.default.createElement(_icons.default, {
+    }, icon || titleIcon && /*#__PURE__*/_react.default.createElement(_icons.default, {
       name: titleIcon,
       color: "#000",
       size: 24

package/lib/icons/helper.js

@@ -575,7 +575,7 @@ var _default = exports.default = {
   },
   cash3: {
     viewbox: '0 0 17 16',
-    paths: ['9h1v1h-1v-1z', 'M0 6v9h17v-9h-17zM3 14h-2v-2h1v1h1v1zM3 8h-1v1h-1v-2h2v1zM10.5 10c0.276 0 0.5 0.224 0.5 0.5v2c0 0.276-0.224 0.5-0.5 0.5h-1.5v0.5c0 0.276-0.224 0.5-0.5 0.5s-0.5-0.224-0.5-0.5v-0.5h-1.5c-0.276 0-0.5-0.224-0.5-0.5s0.224-0.5 0.5-0.5h1.5v-1h-1.5c-0.276 0-0.5-0.224-0.5-0.5v-2c0-0.276 0.224-0.5 0.5-0.5h1.5v-0.5c0-0.276 0.224-0.5 0.5-0.5s0.5 0.224 0.5 0.5v0.5h1.5c0.276 0 0.5 0.224 0.5 0.5s-0.224 0.5-0.5 0.5h-1.5v1h1.5zM16 14h-2v-1h1v-1h1v2zM16 9h-1v-1h-1v-1h2v2z', 'M9 11h1v1h-1v-1z', 'M1 4h15v1.5h-15v-1.5z', 'M2 2h13v1.5h-13v-1.5z']
+    paths: ['M7 9h1v1h-1v-1z', 'M0 6v9h17v-9h-17zM3 14h-2v-2h1v1h1v1zM3 8h-1v1h-1v-2h2v1zM10.5 10c0.276 0 0.5 0.224 0.5 0.5v2c0 0.276-0.224 0.5-0.5 0.5h-1.5v0.5c0 0.276-0.224 0.5-0.5 0.5s-0.5-0.224-0.5-0.5v-0.5h-1.5c-0.276 0-0.5-0.224-0.5-0.5s0.224-0.5 0.5-0.5h1.5v-1h-1.5c-0.276 0-0.5-0.224-0.5-0.5v-2c0-0.276 0.224-0.5 0.5-0.5h1.5v-0.5c0-0.276 0.224-0.5 0.5-0.5s0.5 0.224 0.5 0.5v0.5h1.5c0.276 0 0.5 0.224 0.5 0.5s-0.224 0.5-0.5 0.5h-1.5v1h1.5zM16 14h-2v-1h1v-1h1v2zM16 9h-1v-1h-1v-1h2v2z', 'M9 11h1v1h-1v-1z', 'M1 4h15v1.5h-15v-1.5z', 'M2 2h13v1.5h-13v-1.5z']
   },
   wallet: {
     viewbox: '0 0 17 16',

package/lib/icons/index.d.ts

@@ -1,13 +1,14 @@
-import { IIconProps } from './types.js';
+import { IconProps } from './types.js';
 import 'react';
 import '../@types/PointerEvents.js';
 import '../@types/SizePixels.js';
 import '../@types/Icon.js';
 import './helper.js';
 import '../@types/Position.js';
+import '../@types/ColorStyles.js';
 
 declare const _default: {
-    (props: IIconProps): JSX.Element;
+    (props: IconProps): JSX.Element;
     displayName: string;
 };
 

package/lib/icons/index.js

@@ -24,17 +24,23 @@ const Icon = _ref => {
     disabled = false,
     customClass = '',
     customClassForContainer = '',
-    color = '#676464',
+    colorStyle = 'default',
+    color,
+    viewBox,
     pointerEvents = 'none',
     targetRef,
     tooltip
   } = _ref;
+  const isUsingColorStyle = colorStyle !== 'default';
+  const colorFromProp = isUsingColorStyle || !color ? undefined : color;
   const refSvg = (0, _react.useRef)(null);
+  const viewBoxFromIconOrSvgStrcut = name ? listIcon[name].viewbox : svgStruct === null || svgStruct === void 0 ? void 0 : svgStruct.viewbox;
   const getPaths = () => name ? listIcon[name].paths : svgStruct === null || svgStruct === void 0 ? void 0 : svgStruct.paths;
   const getSvg = () => {
     var _getPaths;
     return /*#__PURE__*/_react.default.createElement("svg", {
       "data-testid": "icon",
+      "data-color-style": colorStyle,
       onClick: () => {
         if (onClick && !disabled) onClick();
       },
@@ -43,8 +49,8 @@ const Icon = _ref => {
       },
       width: "".concat(size, "px"),
       height: "".concat(size, "px"),
-      fill: disabled ? disabledIconColor : color,
-      viewBox: name ? listIcon[name].viewbox : svgStruct === null || svgStruct === void 0 ? void 0 : svgStruct.viewbox,
+      fill: disabled ? disabledIconColor : colorFromProp,
+      viewBox: viewBox || viewBoxFromIconOrSvgStrcut,
       className: "icon-component ".concat(customClass),
       pointerEvents: pointerEvents,
       style: style
@@ -54,6 +60,7 @@ const Icon = _ref => {
       key: value
     })));
   };
+  if (color && colorStyle !== 'default') throw new Error('Expected only one of the two properties: colorStyle or color');
   if (!name && !svgStruct) throw new Error('One of the "name" and "svgStruct" props must be filled');
   if (!visible) return null;
   if (!tooltip) return getSvg();

package/lib/icons/types.d.ts

@@ -3,6 +3,7 @@ import { PointerEvents } from '../@types/PointerEvents.js';
 import { SizePixels } from '../@types/SizePixels.js';
 import { IconNames } from '../@types/Icon.js';
 import { Position } from '../@types/Position.js';
+import { ColorStyles } from '../@types/ColorStyles.js';
 import './helper.js';
 
 type ListIconType = {
@@ -11,26 +12,38 @@ type ListIconType = {
         paths: Array<string>;
     };
 };
-interface IIconProps {
+type SvgStruct = {
+    viewbox: string;
+    paths: Array<string>;
+};
+type BaseIconProps = {
     size?: SizePixels;
-    color?: string;
     customClass?: string;
     customClassForContainer?: string;
     style?: CSSProperties;
     visible?: boolean;
     disabled?: boolean;
     pointerEvents?: PointerEvents;
-    name?: IconNames;
     viewBox?: string;
-    svgStruct?: {
-        viewbox: string;
-        paths: Array<string>;
-    };
     onClick?: () => void;
     tooltipPosition?: Exclude<Position, 'center'>;
     tooltipWidth?: string | number;
     tooltip?: string;
     targetRef?: (ref: HTMLDivElement) => void;
-}
+};
+type ColorProps = ({
+    colorStyle?: ColorStyles | 'default';
+    color?: null;
+} | {
+    color?: string;
+    colorStyle?: undefined;
+});
+type IconProps = BaseIconProps & ColorProps & ({
+    name: IconNames;
+    svgStruct?: null;
+} | {
+    svgStruct: SvgStruct;
+    name?: null;
+});
 
-export { IIconProps, ListIconType };
+export { IconProps, ListIconType };

package/lib/index.d.ts

@@ -27,6 +27,7 @@ import './labels/types.js';
 import './icons/types.js';
 import './@types/PointerEvents.js';
 import './@types/SizePixels.js';
+import './@types/ColorStyles.js';
 import './list/Header.js';
 import './list/types.js';
 import './list/Item.js';

package/lib/inputs/file/File.d.ts

@@ -8,6 +8,6 @@ import '../../@types/PermissionAttr.js';
 import '../../internals/types.js';
 import '../../@types/Position.js';
 
-declare const File: ({ applyDragDrop, defaultFiles, gridLayout, ...rest }: IFileProps) => JSX.Element;
+declare const File: ({ applyDragDrop, defaultFiles, gridLayout, onBtnClickRemove: onBtnClickRemoveProp, ...rest }: Omit<IFileProps, 'onBtnClickInsert'>) => JSX.Element;
 
 export { File as default };

package/lib/inputs/file/File.js

@@ -9,7 +9,7 @@ var _DefaultFile = _interopRequireDefault(require("./DefaultFile"));
 var _DragDropFile = _interopRequireDefault(require("./DragDropFile"));
 var _gridlayout = _interopRequireDefault(require("../../gridlayout"));
 var _helpers = require("./helpers");
-const _excluded = ["applyDragDrop", "defaultFiles", "gridLayout"];
+const _excluded = ["applyDragDrop", "defaultFiles", "gridLayout", "onBtnClickRemove"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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,7 +20,8 @@ const File = _ref => {
   let {
       applyDragDrop = false,
       defaultFiles,
-      gridLayout
+      gridLayout,
+      onBtnClickRemove: onBtnClickRemoveProp
     } = _ref,
     rest = _objectWithoutProperties(_ref, _excluded);
   const inputFileRef = (0, _react.useRef)(null);
@@ -33,6 +34,7 @@ const File = _ref => {
     if (inputFileRef.current) {
       inputFileRef.current.value = '';
     }
+    if (onBtnClickRemoveProp) onBtnClickRemoveProp();
   };
   (0, _react.useEffect)(() => {
     if (inputFileRef !== null && inputFileRef !== void 0 && inputFileRef.current && defaultFiles) {

package/lib/menus/float/types.d.ts

@@ -19,7 +19,7 @@ interface IFloatMenuItemProps {
     title?: string;
     url?: string;
     urlHref?: string;
-    iconName?: IconNames;
+    iconName: IconNames;
     iconColor?: string;
     iconSize?: SizePixels;
     customClass?: string;

package/lib/menus/sidenav/types.d.ts

@@ -60,7 +60,7 @@ interface INavSubMenuItemProps {
 interface IExpandMenuProps {
     expandMenuCustomClass?: string;
     onExpandMenu?: () => void;
-    iconName?: IconNames;
+    iconName: IconNames;
 }
 interface IEmptyListProps {
     info?: string;

package/lib/textContent/index.d.ts

@@ -0,0 +1,8 @@
+import React__default from 'react';
+
+interface TextContentProps extends React__default.HTMLAttributes<HTMLElement> {
+    as?: 'span' | 'strong' | 'p';
+}
+declare const TextContent: React__default.ForwardRefExoticComponent<TextContentProps & React__default.RefAttributes<HTMLElement>>;
+
+export { TextContent as default };

package/lib/textContent/index.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+require("../assets/styles/textContent.scss");
+const _excluded = ["as", "children", "className"];
+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() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+const TextContent = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+      as: Comp = 'span',
+      children,
+      className
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const typedRef = ref;
+  return /*#__PURE__*/_react.default.createElement(Comp, _extends({
+    ref: typedRef,
+    className: "text-content-component ".concat(className),
+    "data-textcontent": Comp
+  }, props), children);
+});
+TextContent.displayName = 'TextContent';
+var _default = exports.default = TextContent;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "linear-react-components-ui",
-  "version": "1.1.6-beta.0",
+  "version": "1.1.6-beta.2",
   "description": "Linear Sistemas ReactJs Components",
   "main": "lib/index.js",
   "module": "lib/index.cjs",
@@ -44,6 +44,7 @@
     "@types/react-dom": "18.0.5",
     "attach-dom-events": "1.0.0",
     "browserslist": "4.23.0",
+    "esbuild": "0.21.5",
     "history": "5.0.0",
     "imask": "6.4.3",
     "init": "0.1.2",
@@ -72,7 +73,7 @@
     "@types/lodash": "4.14.191",
     "@types/node": "17.0.45",
     "@types/react": "18.0.26",
-    "@types/react-dev-utils": "^9.0.11",
+    "@types/react-dev-utils": "9.0.11",
     "@types/react-dom": "18.0.5",
     "@types/react-router-dom": "5.3.3",
     "@types/react-syntax-highlighter": "15.5.6",
@@ -80,7 +81,7 @@
     "@types/uuid": "8.3.4",
     "@typescript-eslint/eslint-plugin": "6.21.0",
     "@typescript-eslint/parser": "6.21.0",
-    "babel-eslint": "7.2.3",
+    "babel-eslint": "10.1.0",
     "babel-jest": "29.7.0",
     "babel-loader": "9.1.3",
     "babel-polyfill": "6.26.0",