linear-react-components-ui 1.0.10-beta.12 → 1.0.10-beta.13

package/lib/alerts/AlertContainer.d.ts

@@ -1,6 +1,8 @@
 import { IMessageProps, DefaultMessageConfigType } from './types.js';
 import 'react';
 import '../@types/PositionAlert.js';
+import '../@types/Icon.js';
+import '../icons/helper.js';
 
 declare class AlertContainer {
     pushAlert: (params: IMessageProps) => void;

package/lib/alerts/AlertProvider.d.ts

@@ -1,6 +1,8 @@
 import { IAlertProviderProps } from './types.js';
 import 'react';
 import '../@types/PositionAlert.js';
+import '../@types/Icon.js';
+import '../icons/helper.js';
 
 declare const AlertProvider: (props: IAlertProviderProps) => JSX.Element;
 

package/lib/alerts/BaseAlert.d.ts

@@ -1,6 +1,8 @@
 import * as React from 'react';
 import { IBaseAlertProps } from './types.js';
 import '../@types/PositionAlert.js';
+import '../@types/Icon.js';
+import '../icons/helper.js';
 
 declare const BaseAlert: ({ children }: IBaseAlertProps) => React.ReactPortal;
 

package/lib/alerts/Message.d.ts

@@ -1,6 +1,8 @@
 import { IMessageProps } from './types.js';
 import 'react';
 import '../@types/PositionAlert.js';
+import '../@types/Icon.js';
+import '../icons/helper.js';
 
 declare const Message: ({ handleClose, message, id, color, icon, iconName, timeout, customClass, closeButton, className, position, }: IMessageProps) => JSX.Element;
 

package/lib/alerts/Message.js

@@ -48,7 +48,7 @@ var Message = function Message(_ref2) {
       _ref2$icon = _ref2.icon,
       icon = _ref2$icon === void 0 ? null : _ref2$icon,
       _ref2$iconName = _ref2.iconName,
-      iconName = _ref2$iconName === void 0 ? '' : _ref2$iconName,
+      iconName = _ref2$iconName === void 0 ? null : _ref2$iconName,
       _ref2$timeout = _ref2.timeout,
       timeout = _ref2$timeout === void 0 ? 3000 : _ref2$timeout,
       _ref2$customClass = _ref2.customClass,

package/lib/alerts/helpers.d.ts

@@ -1,6 +1,8 @@
 import * as React from 'react';
 import { WithAlertContextProps } from './types.js';
 import '../@types/PositionAlert.js';
+import '../@types/Icon.js';
+import '../icons/helper.js';
 
 declare const AlertProviderContext: React.Context<WithAlertContextProps>;
 

package/lib/alerts/index.d.ts

@@ -4,3 +4,5 @@ export { default as AlertProvider } from './AlertProvider.js';
 import 'react';
 import './types.js';
 import '../@types/PositionAlert.js';
+import '../@types/Icon.js';
+import '../icons/helper.js';

package/lib/alerts/types.d.ts

@@ -1,5 +1,7 @@
 import { ReactNode } from 'react';
 import { PositionAlert } from '../@types/PositionAlert.js';
+import { IconNames } from '../@types/Icon.js';
+import '../icons/helper.js';
 
 declare type AlertContainerMethods = {
     default: (messageConfig: DefaultMessageConfigType) => void;
@@ -25,7 +27,7 @@ interface IMessageProps {
     color?: string;
     customClass?: string;
     icon?: ReactNode | null;
-    iconName?: string;
+    iconName?: IconNames | null;
     timeout?: number;
 }
 interface IBaseAlertProps {

package/lib/alerts/withAlert.d.ts

@@ -1,6 +1,8 @@
 import React__default from 'react';
 import { WithAlertContextProps } from './types.js';
 import '../@types/PositionAlert.js';
+import '../@types/Icon.js';
+import '../icons/helper.js';
 
 declare const withAlert: <ComponentProps extends WithAlertContextProps>(WrapperComponent: React__default.ComponentType<ComponentProps>) => (props: ComponentProps) => JSX.Element;
 

package/lib/assets/styles/dialog.scss

@@ -5,7 +5,6 @@
   font-family: 'Roboto', sans-serif;
   line-height: 22px;
   font-size: 14px;
-  z-index: 99999;
   position: fixed;
   top: 0;
   bottom: 0;
@@ -176,5 +175,4 @@
   width: 100%;
   top: 0;
   left: 0;
-  z-index: 99998;
 }

package/lib/assets/styles/drawers.scss

@@ -132,6 +132,15 @@
         }
       }
     }
+    > .waitingspinner {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      width: 60px;
+      height: 60px;
+      margin-left: -30px;
+      margin-top: -30px;
+    }
   }
 }
 

package/lib/assets/styles/radio.scss

@@ -37,14 +37,26 @@ $radio-button-ripple-size: 15px;
   left: -9999px;
 }
 
+.radio-component:focus + label:before {
+	box-shadow: 0 0 2px 1px $radio-button-checked-color;
+}
+
 .radio-component:checked + .description,
 .radio-component:not(:checked) + .description {
   position: relative;
-  padding-left: 28px;
+  padding-left: 1.35rem;
   cursor: pointer;
   line-height: 20px;
   display: inline-block;
-  color: $font-color-soft;
+  color: $font-color-soft; 
+  &.-medium {
+    padding-left: 1.6rem;
+    padding-top: 0.1rem;
+  }
+  &.-large {
+    padding-left: 1.875rem;
+    padding-top: 0.2rem;
+  }
 }
 
 .disabled + .description {
@@ -57,22 +69,54 @@ $radio-button-ripple-size: 15px;
   position: absolute;
   left: 0;
   top: 0;
-  width: 20px;
-  height: 20px;
   border: 1px solid $component-border-color;
   border-radius: 100%;
   background: $default-color;
 }
 
+.-small:before{
+  width: 16px;
+  height: 16px;
+  top: 0.225rem;
+  left: 0.265rem;
+}
+.-medium:before{
+  width: 20px;
+  height: 20px;
+  top: 0.245rem;
+  left: 0.285rem;
+}
+.-large:before{
+  width: 24px;
+  height: 24px;
+  top: 0.245rem;
+  left: 0.285rem;
+}
+
+.-small:after{
+  width: 8px;
+  height: 8px;
+  top: 0.23rem;
+  left: 0.27rem;
+}
+.-medium:after{
+  width: 12px;
+  height: 12px;
+  top: 0.24rem;
+  left: 0.26rem;
+}
+.-large:after{
+  width: 16px;
+  height: 16px;
+  top: 0.245rem;
+  left: 0.285rem;
+}
+
 .radio-component:checked + .description:after,
 .radio-component:not(:checked) + .description:after {
   content: '';
-  width: 12px;
-  height: 12px;
   background: $radio-button-checked-color;
   position: absolute;
-  top: 4px;
-  left: 4px;
   border-radius: 100%;
   -webkit-transition: all 0.2s ease;
   transition: all 0.2s ease;

package/lib/assets/styles/table.scss

@@ -26,12 +26,18 @@
     &.skeleton-transparency::before {
       @extend %skeleton-transparency;
     }
+    &.-disabled{
+      @extend %component-disabled;
+    }
   }
   > .headercontainer > .innertable > .theader > .trow,
   > .bodycontainer > .innertable > .tbody > .trow,
   > .theader > .trow,
   > .tbody > .trow {
     height: 45px;
+  }  
+  > .tbody > .trow-divider {
+    height: 45px;
   }
   > .headercontainer > .innertable > .theader > .trow > .headercolumn,
   > .bodycontainer > .innertable > .tbody > .trow > .rowcolumn,
@@ -60,6 +66,30 @@
       background-color: $component-bg-selected-color !important;
       color: $font-selected-color;
     }
+    .-divider {
+      color: $font-color-second;
+      font-family: 'Titillium Web';
+      font-weight: 700;
+      font-size: 16px;
+      text-align: center;
+      padding: .35rem;
+      &.-primary {
+        background-color: $primary-color;
+      }
+      &.-warning {
+        background-color: $warning-color;
+      }
+      &.-danger {
+        background-color: $danger-color;
+      }
+      &.-success {
+        background-color: $success-color;
+      }
+      &.-info {
+        background-color: $info-color;
+      }
+    }
+    
     &:hover {
       > .rowcolumn > .rowhover {
         display: table;

package/lib/assets/styles/tooltip.scss

@@ -1,3 +1,5 @@
+@import "colors.scss";
+
 .tooltip-component {
   font-family: 'Roboto', sans-serif;
   position: absolute;
@@ -5,7 +7,7 @@
   background: rgba(black, 0.85);
   border-radius: 5px;
   color: white;
-  box-shadow: 2px 2px 3px rgba(0 ,0, 0, 0.3);
+  box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.3);
   text-align: center;
   font-size: 13px;
   z-index: 999999;
@@ -45,11 +47,49 @@
   &.bottom::after {
     content: " ";
     position: absolute;
-    bottom: 100%; 
+    bottom: 100%;
     left: 50%;
     margin-left: -5px;
     border-width: 5px;
     border-style: solid;
     border-color: transparent transparent rgba(black, 0.85) transparent;
   }
+  &.tooltip-error {
+    background: $danger-hover-color;
+    color: $default-color;
+    z-index: 99999;
+    &::before {
+      content: '';
+      position: absolute;
+      left: 0;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      height: 100%;
+      width: 100%;
+      background: inherit;
+      border-radius: inherit;
+      z-index: -1;
+      opacity: 0.7;
+      animation: tooltip-component 2s ease-out infinite;
+    }
+    @keyframes tooltip-component {
+      100% {
+        transform: scale(1.05, 1.25);
+        opacity: 0;
+      }
+    }
+    &.left::after {
+      border-left-color: $danger-hover-color;
+    }
+    &.right::after {
+      border-right-color: $danger-hover-color;
+    }
+    &.top::after {
+      border-top-color: $danger-hover-color;
+    }
+    &.bottom::after {
+      border-bottom-color: $danger-hover-color;
+    }
+  }
 }

package/lib/buttons/ActivateButton.d.ts

@@ -3,6 +3,8 @@ import 'react';
 import '../@types/PermissionAttr.js';
 import '../@types/Position.js';
 import '../@types/Size.js';
+import '../@types/Icon.js';
+import '../icons/helper.js';
 
 declare const ActivateButton: (props: IButtonProps) => JSX.Element;
 

package/lib/buttons/AddButton.d.ts

@@ -3,6 +3,8 @@ import 'react';
 import '../@types/PermissionAttr.js';
 import '../@types/Position.js';
 import '../@types/Size.js';
+import '../@types/Icon.js';
+import '../icons/helper.js';
 
 declare const AddButton: (props: IButtonProps) => JSX.Element;
 

package/lib/buttons/Button.d.ts

@@ -3,6 +3,8 @@ import 'react';
 import '../@types/PermissionAttr.js';
 import '../@types/Position.js';
 import '../@types/Size.js';
+import '../@types/Icon.js';
+import '../icons/helper.js';
 
 interface ButtonProps extends IButtonProps {
     split?: boolean;

package/lib/buttons/CancelButton.d.ts

@@ -3,6 +3,8 @@ import 'react';
 import '../@types/PermissionAttr.js';
 import '../@types/Position.js';
 import '../@types/Size.js';
+import '../@types/Icon.js';
+import '../icons/helper.js';
 
 declare const CancelButton: ({ customClass, ...rest }: IButtonProps) => JSX.Element;
 

package/lib/buttons/DangerButton.d.ts

@@ -3,6 +3,8 @@ import 'react';
 import '../@types/PermissionAttr.js';
 import '../@types/Position.js';
 import '../@types/Size.js';
+import '../@types/Icon.js';
+import '../icons/helper.js';
 
 declare const DangerButton: ({ customClass, ...rest }: IButtonProps) => JSX.Element;
 

package/lib/buttons/DefaultButton.d.ts

@@ -3,6 +3,8 @@ import 'react';
 import '../@types/PermissionAttr.js';
 import '../@types/Position.js';
 import '../@types/Size.js';
+import '../@types/Icon.js';
+import '../icons/helper.js';
 
 declare const _default: {
     (props: Omit<IButtonProps, "split">): JSX.Element;

package/lib/buttons/DefaultButton.js

@@ -9,6 +9,8 @@ exports.default = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _lodash = _interopRequireDefault(require("lodash"));
+
 var _icons = _interopRequireDefault(require("../../lib/icons"));
 
 var _withTooltip = _interopRequireDefault(require("../internals/withTooltip"));
@@ -19,7 +21,7 @@ var _withDropdown = _interopRequireDefault(require("../dropdown/withDropdown"));
 
 var _permissionValidations = require("../permissionValidations");
 
-var _excluded = ["dropdown", "onClick", "disabled", "iconName", "icon", "targetRef", "tabIndex", "isLoading", "label", "showDropdown", "getDropdownPopup", "isDropdownOpened", "showIconDropdown", "content", "style", "toggleable", "activeIconColor", "iconStyle", "visible", "customClass", "className", "size", "iconAlign", "boxShadow", "transparent", "round", "permissionAttr", "skeletonize", "tooltipPosition", "tooltipWidth", "isFloatMenu", "dropdownAlign", "customClassForDropdown"];
+var _excluded = ["dropdown", "onClick", "disabled", "iconName", "icon", "targetRef", "tabIndex", "isLoading", "label", "showDropdown", "getDropdownPopup", "isDropdownOpened", "showIconDropdown", "content", "style", "toggleable", "activeIconColor", "iconStyle", "visible", "customClass", "className", "size", "iconAlign", "boxShadow", "transparent", "round", "permissionAttr", "skeletonize", "tooltipPosition", "errorMessage", "tooltipWidth", "isFloatMenu", "dropdownAlign", "customClassForDropdown", "buttonRef"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -80,10 +82,12 @@ var DefaultButton = function DefaultButton(_ref) {
       permissionAttr = _ref.permissionAttr,
       skeletonize = _ref.skeletonize,
       tooltipPosition = _ref.tooltipPosition,
+      errorMessage = _ref.errorMessage,
       tooltipWidth = _ref.tooltipWidth,
       isFloatMenu = _ref.isFloatMenu,
       dropdownAlign = _ref.dropdownAlign,
       customClassForDropdown = _ref.customClassForDropdown,
+      buttonRef = _ref.buttonRef,
       rest = _objectWithoutProperties(_ref, _excluded);
 
   var options = [_permissionValidations.OPTIONS_ON_DENIED.disabled, _permissionValidations.OPTIONS_ON_DENIED.unvisible];
@@ -97,7 +101,7 @@ var DefaultButton = function DefaultButton(_ref) {
       _useState4 = _slicedToArray(_useState3, 1),
       onDenied = _useState4[0];
 
-  var buttonRef = (0, _react.useRef)(null);
+  var refButton = (0, _react.useRef)(null);
   var disabledIconColor = 'rgb(193, 193, 193)';
 
   var shouldDisable = function shouldDisable() {
@@ -160,8 +164,16 @@ var DefaultButton = function DefaultButton(_ref) {
     disabled: shouldDisable(),
     className: "".concat(getClass(), " ").concat(activeButton ? '-toggleable' : '', " ").concat(skeletonize ? '-skeletonized' : ''),
     ref: function ref(r) {
+      if (buttonRef) {
+        if (!_lodash.default.isFunction(buttonRef)) {
+          refButton.current = r;
+        } else {
+          buttonRef(r);
+        }
+      }
+
       if (targetRef) targetRef(r);
-      buttonRef.current = r;
+      refButton.current = r;
     },
     tabIndex: tabIndex
   }), content, getIcon(), label || '', isLoading && /*#__PURE__*/_react.default.createElement("div", {
@@ -169,7 +181,7 @@ var DefaultButton = function DefaultButton(_ref) {
   }, /*#__PURE__*/_react.default.createElement(_spinner.default, {
     align: "none",
     delayTime: 0
-  }))), dropdown && buttonRef.current && getDropdownPopup && getDropdownPopup(buttonRef.current));
+  }))), dropdown && refButton.current && getDropdownPopup && getDropdownPopup(refButton.current));
 };
 
 var _default = (0, _withDropdown.default)((0, _withTooltip.default)(DefaultButton));

package/lib/buttons/DestroyButton.d.ts

@@ -3,6 +3,8 @@ import 'react';
 import '../@types/PermissionAttr.js';
 import '../@types/Position.js';
 import '../@types/Size.js';
+import '../@types/Icon.js';
+import '../icons/helper.js';
 
 declare const DestroyButton: ({ icon, ...rest }: IButtonProps) => JSX.Element;
 

package/lib/buttons/EditButton.d.ts

@@ -3,6 +3,8 @@ import 'react';
 import '../@types/PermissionAttr.js';
 import '../@types/Position.js';
 import '../@types/Size.js';
+import '../@types/Icon.js';
+import '../icons/helper.js';
 
 declare const EditButton: (props: IButtonProps) => JSX.Element;
 

package/lib/buttons/InactivateButton.d.ts

@@ -3,6 +3,8 @@ import 'react';
 import '../@types/PermissionAttr.js';
 import '../@types/Position.js';
 import '../@types/Size.js';
+import '../@types/Icon.js';
+import '../icons/helper.js';
 
 declare const InactivateButton: (props: IButtonProps) => JSX.Element;
 

package/lib/buttons/InfoButton.d.ts

@@ -3,6 +3,8 @@ import 'react';
 import '../@types/PermissionAttr.js';
 import '../@types/Position.js';
 import '../@types/Size.js';
+import '../@types/Icon.js';
+import '../icons/helper.js';
 
 declare const InfoButton: ({ customClass, ...rest }: IButtonProps) => JSX.Element;
 

package/lib/buttons/PrimaryButton.d.ts

@@ -3,6 +3,8 @@ import 'react';
 import '../@types/PermissionAttr.js';
 import '../@types/Position.js';
 import '../@types/Size.js';
+import '../@types/Icon.js';
+import '../icons/helper.js';
 
 declare const PrimaryButton: ({ customClass, ...rest }: IButtonProps) => JSX.Element;
 

package/lib/buttons/RestoreButton.d.ts

@@ -3,6 +3,8 @@ import 'react';
 import '../@types/PermissionAttr.js';
 import '../@types/Position.js';
 import '../@types/Size.js';
+import '../@types/Icon.js';
+import '../icons/helper.js';
 
 declare const RestoreButton: (props: IButtonProps) => JSX.Element;
 

package/lib/buttons/SaveButton.d.ts

@@ -3,6 +3,8 @@ import 'react';
 import '../@types/PermissionAttr.js';
 import '../@types/Position.js';
 import '../@types/Size.js';
+import '../@types/Icon.js';
+import '../icons/helper.js';
 
 declare const SaveButton: ({ customClass, ...rest }: IButtonProps) => JSX.Element;
 

package/lib/buttons/SuccessButton.d.ts

@@ -3,6 +3,8 @@ import 'react';
 import '../@types/PermissionAttr.js';
 import '../@types/Position.js';
 import '../@types/Size.js';
+import '../@types/Icon.js';
+import '../icons/helper.js';
 
 declare const SuccessButton: ({ customClass, ...rest }: IButtonProps) => JSX.Element;
 

package/lib/buttons/WarningButton.d.ts

@@ -3,6 +3,8 @@ import 'react';
 import '../@types/PermissionAttr.js';
 import '../@types/Position.js';
 import '../@types/Size.js';
+import '../@types/Icon.js';
+import '../icons/helper.js';
 
 declare const WarningButton: ({ customClass, ...rest }: IButtonProps) => JSX.Element;
 

package/lib/buttons/index.d.ts

@@ -19,3 +19,5 @@ import '../@types/Position.js';
 import './types.js';
 import '../@types/PermissionAttr.js';
 import '../@types/Size.js';
+import '../@types/Icon.js';
+import '../icons/helper.js';

package/lib/buttons/split_button/index.d.ts

@@ -3,6 +3,8 @@ import 'react';
 import '../../@types/PermissionAttr.js';
 import '../../@types/Position.js';
 import '../../@types/Size.js';
+import '../../@types/Icon.js';
+import '../../icons/helper.js';
 
 declare const SplitButton: (props: IButtonProps) => JSX.Element;
 

package/lib/buttons/types.d.ts

@@ -1,7 +1,9 @@
-import { ButtonHTMLAttributes, ReactNode, CSSProperties, ReactElement, MouseEvent } from 'react';
+import { ButtonHTMLAttributes, ReactNode, CSSProperties, ReactElement, MutableRefObject, MouseEvent } from 'react';
 import { PermissionAttr } from '../@types/PermissionAttr.js';
 import { Position } from '../@types/Position.js';
 import { Size } from '../@types/Size.js';
+import { IconNames } from '../@types/Icon.js';
+import '../icons/helper.js';
 
 interface IButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     label?: string;
@@ -10,12 +12,13 @@ interface IButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     disabled?: boolean;
     content?: ReactNode;
     size?: Size;
-    iconName?: string;
+    iconName?: IconNames;
     customClass?: string;
     iconAlign?: Position;
     iconStyle?: CSSProperties;
     boxShadow?: boolean;
     icon?: ReactElement;
+    buttonRef?: MutableRefObject<HTMLButtonElement | null> | ((ref: HTMLButtonElement | null) => void);
     targetRef?: (ref: HTMLButtonElement) => void;
     dropdown?: boolean;
     dropdownOnHover?: boolean;
@@ -39,6 +42,7 @@ interface IButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     dropdownAlign?: 'left' | 'right';
     onClick?: (e: MouseEvent<HTMLButtonElement>) => void;
     closeDropdownOnClickOutside?: boolean;
+    errorMessage?: string;
 }
 
 export { IButtonProps };

package/lib/dialog/Alert.d.ts

@@ -1,6 +1,8 @@
 import { ICommonDialogProps } from './types.js';
 import 'react';
 import '../@types/Align.js';
+import '../@types/Icon.js';
+import '../icons/helper.js';
 
 declare const Alert: (props: ICommonDialogProps) => JSX.Element;
 

package/lib/dialog/Custom.d.ts

@@ -1,6 +1,8 @@
 import { ICustomProps } from './types.js';
 import 'react';
 import '../@types/Align.js';
+import '../@types/Icon.js';
+import '../icons/helper.js';
 
 declare const Custom: (props: ICustomProps) => JSX.Element;
 

package/lib/dialog/Custom.js

@@ -41,7 +41,7 @@ var Custom = function Custom(props) {
       _props$height = props.height,
       height = _props$height === void 0 ? 'auto' : _props$height,
       _props$iconName = props.iconName,
-      iconName = _props$iconName === void 0 ? '' : _props$iconName;
+      iconName = _props$iconName === void 0 ? null : _props$iconName;
   return /*#__PURE__*/_react.default.createElement(_base.default, _extends({
     width: width,
     height: height

package/lib/dialog/Error.d.ts

@@ -1,6 +1,8 @@
 import { ICommonDialogProps } from './types.js';
 import 'react';
 import '../@types/Align.js';
+import '../@types/Icon.js';
+import '../icons/helper.js';
 
 declare const Error: (props: ICommonDialogProps) => JSX.Element;
 

package/lib/dialog/Information.d.ts

@@ -1,6 +1,8 @@
 import { ICommonDialogProps } from './types.js';
 import 'react';
 import '../@types/Align.js';
+import '../@types/Icon.js';
+import '../icons/helper.js';
 
 declare const Information: (props: ICommonDialogProps) => JSX.Element;
 

package/lib/dialog/Question.d.ts

@@ -1,6 +1,8 @@
 import { IQuestionProps } from './types.js';
 import 'react';
 import '../@types/Align.js';
+import '../@types/Icon.js';
+import '../icons/helper.js';
 
 declare const Question: (props: IQuestionProps) => JSX.Element | null;