armtek-uikit-react 1.0.195 → 1.0.196

package/package.json

@@ -1 +1 @@
-{"name":"armtek-uikit-react","version":"1.0.195","description":"Armtek UIKit for React","main":"cjs/index.js","module":"esm/index.js","types":"esm/index.d.ts","repository":{"type":"git","url":"ssh://git@gl.corp:10022/int/uikit/uikit_react.git"},"author":"","license":"ISC","dependencies":{"clsx":"^2.0.0","rc-slider":"^10.2.1","react":"<=18.0.0","react-datepicker":"^4.16.0","react-dom":"<=18.0.0","react-transition-group":"^4.4.5"},"peerDependencies":{"react":"<=18.0.0","react-dom":"<=18.0.0"},"engines":{"node":">=14.0.0"},"scripts":{"pub":"npm version patch && npm publish"}}
+{"name":"armtek-uikit-react","version":"1.0.196","description":"Armtek UIKit for React","main":"cjs/index.js","module":"esm/index.js","types":"esm/index.d.ts","repository":{"type":"git","url":"ssh://git@gl.corp:10022/int/uikit/uikit_react.git"},"author":"","license":"ISC","dependencies":{"clsx":"^2.0.0","rc-slider":"^10.2.1","react":"<=18.0.0","react-datepicker":"^4.16.0","react-dom":"<=18.0.0","react-transition-group":"^4.4.5"},"peerDependencies":{"react":"<=18.0.0","react-dom":"<=18.0.0"},"engines":{"node":">=14.0.0"},"scripts":{"pub":"npm version patch && npm publish"}}

package/ui/Adornment/Adornment.d.ts

@@ -4,6 +4,9 @@ type PropsType = {
     position?: 'start' | 'end';
     theme?: ThemeType;
 } & HTMLAttributes<HTMLDivElement>;
-declare const Adornment: (props: PropsType) => import("react/jsx-runtime").JSX.Element;
+declare const Adornment: import("react").ForwardRefExoticComponent<{
+    position?: "start" | "end";
+    theme?: ThemeType;
+} & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<any>>;
 export declare const AdornmentContainer: (props: PropsType) => import("react/jsx-runtime").JSX.Element;
 export default Adornment;

package/ui/Adornment/Adornment.js

@@ -3,15 +3,10 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 exports.__esModule = true;
 exports.default = exports.AdornmentContainer = void 0;
+var _react = require("react");
 var _clsx = _interopRequireDefault(require("clsx"));
 var _jsxRuntime = require("react/jsx-runtime");
-// import { getCssPrefix } from 'lib/helpers/helpers'
-
-const AdornmentClasses = ['adornmentContainer', 'adornmentContainer_end', 'adornment_start', 'adornment_end'];
-
-// const css = getCssPrefix(AdornmentClasses)
-
-const Adornment = props => {
+const Adornment = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
   let {
     children,
     position = 'end',
@@ -21,6 +16,7 @@ const Adornment = props => {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       ...spanProps,
+      ref: ref,
       className: (0, _clsx.default)(className, 'arm-adornment', {
         'arm-adornment_start': position === 'start',
         'arm-adornment_end': position !== 'start'
@@ -28,7 +24,7 @@ const Adornment = props => {
       children: children
     })
   });
-};
+});
 const AdornmentContainer = props => {
   let {
     position = 'start',

package/ui/Form/Interval/Interval.js

@@ -22,9 +22,9 @@ const Interval = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
     max = 0,
     ...inputProps
   } = props;
-  let [focused, setFocused] = (0, _react.useState)(false);
-  let [currentMin, setCurrentMin] = (0, _react.useState)(min);
-  let [currentMax, setCurrentMax] = (0, _react.useState)(max);
+  const [focused, setFocused] = (0, _react.useState)(false);
+  const [currentMin, setCurrentMin] = (0, _react.useState)(min);
+  const [currentMax, setCurrentMax] = (0, _react.useState)(max);
   const handleFocus = () => {
     setFocused(true);
   };

package/ui/Form/Interval/IntervalSlide.d.ts

@@ -1,4 +1,5 @@
 import { IntervalProps } from './Interval';
-type PropsType = IntervalProps;
+import { SliderProps } from '../../Slider/Slider';
+type PropsType = Omit<IntervalProps, 'color'> & Partial<Pick<SliderProps, 'color'>>;
 declare const IntervalSlide: (props: PropsType) => import("react/jsx-runtime").JSX.Element;
 export default IntervalSlide;

package/ui/Form/Interval/IntervalSlide.js

@@ -9,11 +9,12 @@ var _react = require("react");
 var _Slider = _interopRequireDefault(require("../../Slider/Slider"));
 var _jsxRuntime = require("react/jsx-runtime");
 const IntervalSlide = props => {
-  let {
+  const {
     onChange,
+    color,
     ...restProps
   } = props;
-  let [value, setValue] = (0, _react.useState)([props.min, props.max]);
+  const [value, setValue] = (0, _react.useState)([props.min, props.max]);
   const handleChange = value => {
     setValue(value);
     if (onChange) onChange(value);
@@ -34,6 +35,7 @@ const IntervalSlide = props => {
           min: props.min,
           max: props.max,
           disabled: props.disabled,
+          color: color,
           value: restProps.value || value,
           size: props.size,
           onChange: handleSlide

package/ui/Form/Password/Password.d.ts

@@ -3,6 +3,7 @@ export declare const Password: import("react").ForwardRefExoticComponent<{
     size?: Exclude<import("../../../types/theme").SizeType, "extraLarge" | "medium">;
     variant?: import("../../../types/theme").VariantType;
     error?: boolean;
+    errorTooltip?: string;
     success?: boolean;
     helperText?: string | import("react").ReactNode;
     endAdornment?: string | import("react").ReactNode;

package/ui/Form/TextArea/TextArea.d.ts

@@ -5,6 +5,7 @@ declare const TextArea: import("react").ForwardRefExoticComponent<{
     size?: Exclude<import("../../../types/theme").SizeType, "extraLarge" | "medium">;
     variant?: import("../../../types/theme").VariantType;
     error?: boolean;
+    errorTooltip?: string;
     success?: boolean;
     helperText?: string | import("react").ReactNode;
     endAdornment?: string | import("react").ReactNode;

package/ui/Form/TextField/TextField.d.ts

@@ -6,6 +6,7 @@ export type TextFieldProps = {
     size?: Exclude<SizeType, 'extraLarge' | 'medium'>;
     variant?: VariantType;
     error?: boolean;
+    errorTooltip?: string;
     success?: boolean;
     helperText?: string | ReactNode;
     endAdornment?: string | ReactNode;
@@ -20,6 +21,7 @@ export declare const TextField: import("react").ForwardRefExoticComponent<{
     size?: Exclude<SizeType, "extraLarge" | "medium">;
     variant?: VariantType;
     error?: boolean;
+    errorTooltip?: string;
     success?: boolean;
     helperText?: string | ReactNode;
     endAdornment?: string | ReactNode;

package/ui/Form/TextField/TextField.js

@@ -8,6 +8,8 @@ var _react = require("react");
 var _clsx = _interopRequireDefault(require("clsx"));
 var _HelperText = _interopRequireDefault(require("../../HelperText/HelperText"));
 var _Adornment = _interopRequireWildcard(require("../../Adornment"));
+var _Icon = require("../../Icon");
+var _Tooltip = _interopRequireDefault(require("../../Tooltip"));
 var _jsxRuntime = require("react/jsx-runtime");
 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; }
@@ -15,6 +17,7 @@ const TextField = exports.TextField = /*#__PURE__*/(0, _react.forwardRef)((props
   var _inputRef$current;
   let {
     error,
+    errorTooltip,
     success,
     label,
     helperText,
@@ -54,12 +57,21 @@ const TextField = exports.TextField = /*#__PURE__*/(0, _react.forwardRef)((props
   };
   let endContent = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Adornment.AdornmentContainer, {
     className: 'arm-textfield__adornment',
-    children: [endAdornment, error && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Adornment.default, {
-      className: (0, _clsx.default)('material_icon', 'text-error'),
-      children: "error_outline"
+    children: [endAdornment, error && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
+      text: errorTooltip,
+      disabled: !errorTooltip,
+      placement: 'top',
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Adornment.default, {
+        className: 'text-error',
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Mi, {
+          icon: 'error_outline'
+        })
+      })
     }), success && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Adornment.default, {
-      className: (0, _clsx.default)('material_icon', 'text-success'),
-      children: "done"
+      className: 'text-success',
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Mi, {
+        icon: 'done'
+      })
     })]
   });
   let endContentExists = endAdornment || error || success;

package/ui/Slider/Slider.d.ts

@@ -1,8 +1,9 @@
-import '!style-loader!css-loader!./style.css';
+import './style.scss';
 import { SliderProps as RcSliderProps } from 'rc-slider/lib/Slider';
-import { SizeType } from '../../types/theme';
+import { ColorStatusType, ColorType, SizeType } from '../../types/theme';
 export type SliderProps = {
     size?: Exclude<SizeType, 'extraLarge' | 'medium'>;
+    color?: Exclude<ColorType, 'neutral'> | Exclude<ColorStatusType, 'info'>;
 } & Omit<RcSliderProps, 'size'>;
 declare const Slider: (props: SliderProps) => import("react/jsx-runtime").JSX.Element;
 export default Slider;

package/ui/Slider/Slider.js

@@ -4,19 +4,23 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports.default = void 0;
 var _rcSlider = _interopRequireDefault(require("rc-slider"));
-require("!style-loader!css-loader!./style.css");
+require("./style.scss");
 var _HelperText = _interopRequireDefault(require("../HelperText/HelperText"));
+var _clsx = _interopRequireDefault(require("clsx"));
 var _jsxRuntime = require("react/jsx-runtime");
 const Slider = props => {
-  let {
+  const {
     size = 'large',
+    color = 'primary',
     ...restProps
   } = props;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_rcSlider.default, {
         ...restProps,
-        className: '_' + size
+        className: (0, _clsx.default)('_' + size, {
+          ['arm-slider__' + color]: !!color
+        })
       }), restProps.min !== undefined && restProps.max !== undefined && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         className: 'arm-slider__text',
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {

package/ui/Slider/{style.css → style.scss}

@@ -1,3 +1,4 @@
+
 .rc-slider {
     position: relative;
     width: 100%;
@@ -129,13 +130,13 @@
     /*background-color: #e9e9e9;*/
 }
 .rc-slider-disabled .rc-slider-track {
-    background-color: #ccc;
+    background-color: #ccc !important;
 }
 .rc-slider-disabled .rc-slider-handle,
 .rc-slider-disabled .rc-slider-dot {
-    background-color: #D3DAE1;
-    border-color: #D3DAE1;
-    box-shadow: none;
+    background-color: #D3DAE1!important;;
+    border-color: #D3DAE1!important;;
+    box-shadow: none!important;;
     cursor: not-allowed;
 }
 .rc-slider-disabled .rc-slider-mark-text,
@@ -279,3 +280,68 @@
     border-width: 4px 4px 0;
     border-top-color: #6c6c6c;
 }
+
+.arm-slider__primary {
+    .rc-slider-handle {
+        border-color: var(--color-primary);
+        box-shadow: none;
+    }
+    .rc-slider-handle-dragging.rc-slider-handle-dragging.rc-slider-handle-dragging {
+        border-color: var(--color-primary);
+        box-shadow: 0 0 0 5px var(--color-primary-opacity);
+    }
+    .rc-slider-rail{
+        background-color: var(--color-blue-500);
+    }
+    .rc-slider-track{
+        background-color: var(--color-primary-dark);
+    }
+}
+.arm-slider__error {
+    .rc-slider-handle {
+        border-color: var(--color-error);
+        box-shadow: none;
+    }
+    .rc-slider-handle-dragging.rc-slider-handle-dragging.rc-slider-handle-dragging {
+        border-color: var(--color-error);
+        box-shadow: 0 0 0 5px var(--color-error-opacity);
+    }
+    .rc-slider-rail{
+        background-color: var(--color-red-300);
+    }
+    .rc-slider-track{
+        background-color: var(--color-error);
+    }
+}
+.arm-slider__success {
+    .rc-slider-handle {
+        border-color: var(--color-success);
+        box-shadow: none;
+    }
+    .rc-slider-handle-dragging.rc-slider-handle-dragging.rc-slider-handle-dragging {
+        border-color: var(--color-success);
+        box-shadow: 0 0 0 5px var(--color-success-opacity);
+    }
+    .rc-slider-rail{
+        background-color: var(--color-green-300);
+    }
+    .rc-slider-track{
+        background-color: var(--color-success);
+    }
+}
+.arm-slider__warning {
+    .rc-slider-handle {
+        border-color: var(--color-warning);
+        box-shadow: none;
+    }
+    .rc-slider-handle-dragging.rc-slider-handle-dragging.rc-slider-handle-dragging {
+        border-color: var(--color-warning);
+        box-shadow: 0 0 0 5px var(--color-warning-opacity);
+    }
+    .rc-slider-rail{
+        background-color: var(--color-yellow-300);
+    }
+    .rc-slider-track{
+        background-color: var(--color-warning);
+    }
+}

package/ui/Tooltip/Tooltip.d.ts

@@ -5,6 +5,7 @@ type Classes = {
 };
 type OwnProps = {
     text: string | ReactNode;
+    disabled?: boolean;
     classNames?: Partial<Classes>;
     placement?: 'bottom-end' | 'bottom-start' | 'bottom' | 'left-end' | 'left-start' | 'left' | 'right-end' | 'right-start' | 'right' | 'top-end' | 'top-start' | 'top';
 };

package/ui/Tooltip/Tooltip.js

@@ -28,6 +28,7 @@ function Tooltip(props) {
     children: childrenProp,
     placement = 'top',
     classNames,
+    disabled,
     ...restProps
   } = props;
   const children = /*#__PURE__*/(0, _react.isValidElement)(childrenProp) ? childrenProp : /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
@@ -68,6 +69,7 @@ function Tooltip(props) {
   childrenProps.onMouseOver = composeEventHandler(handleMouseOver, childrenProps.onMouseOver);
   childrenProps.onMouseLeave = composeEventHandler(handleMouseLeave, childrenProps.onMouseLeave);
   childrenProps.ref = anchorEl;
+  if (disabled) return children;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [/*#__PURE__*/(0, _react.cloneElement)(children, childrenProps), anchorEl.current && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Popper.default, {
       placement: placement,