armtek-uikit-react 1.0.109 → 1.0.111

package/assets/Accordion.scss

@@ -2,7 +2,9 @@
 
 .Accordion_variant_section {
   & + .Accordion_variant_section{
-    border-top: 1px solid var(--color-gray-300)
+    border-top: 1px solid var(--color-gray-300);
+    //padding-top: calc(var(--size-step) * 3);
+    //padding-bottom: calc(var(--size-step) * 3);
   }
 }
 

package/assets/TextArea.scss

@@ -4,6 +4,7 @@
   font-family: $font-family;
   height: auto;
   min-height: $size-elarge;
+  line-height: 20px;
   &.size_small{
     height: auto;
     min-height: $size-large;
@@ -12,4 +13,7 @@
     resize: none;
     appearance: none;
   }
+}
+.textarea__root{
+  height: auto;
 }

package/assets/TextField.scss

@@ -1,6 +1,6 @@
 @import "variables";
 
-.textfield{
+.textfield_root{
   position: relative;
   overflow: hidden;
   border-radius: $radius;
@@ -11,10 +11,10 @@
   &:hover{
     border-color: $color-gray-600;
   }
-  &.textfield_focused{
+  &.textfield_root_focused{
     border-color: $color-gray-800;
   }
-  &.textfield_disabled{
+  &.textfield_root_disabled{
     pointer-events: none;
     background: $color-gray-100;
     border-color: transparent;
@@ -33,15 +33,15 @@
     border-radius: 0;
   }
 }
-.textfield_outlined{
-  &.textfield_disabled{
+.textfield_root_outlined{
+  &.textfield_root_disabled{
     background: transparent;
     border-bottom-style: dotted;
     border-bottom-width: 1px;
     border-bottom-color: $color-gray-100;
   }
 }
-.textfield__container{
+.textfield__wrapper{
   cursor: text;
   position: relative;
   padding: 10px 12px 8px;
@@ -55,7 +55,7 @@
     }
   }
 }
-.textfield__container_outlined{
+.textfield__wrapper_outlined{
   padding-left: 0 !important;
   & .textfield__label{
     padding-left: 0;

package/package.json

@@ -1 +1 @@
-{"name":"armtek-uikit-react","version":"1.0.109","description":"Armtek UIKit for React","repository":{"type":"git","url":"ssh://git@gl.corp:10022/int/uikit/uikit_react.git"},"author":"","license":"ISC","dependencies":{"build":"^0.1.4","clsx":"^2.0.0","rc-slider":"^10.2.1","react":"*","react-datepicker":"^4.16.0","react-dom":"*","react-transition-group":"^4.4.5"},"peerDependencies":{"react":"*","react-dom":"*"},"scripts":{"pub":"npm version patch && npm publish"}}
+{"name":"armtek-uikit-react","version":"1.0.111","description":"Armtek UIKit for React","repository":{"type":"git","url":"ssh://git@gl.corp:10022/int/uikit/uikit_react.git"},"author":"","license":"ISC","dependencies":{"build":"^0.1.4","clsx":"^2.0.0","rc-slider":"^10.2.1","react":"*","react-datepicker":"^4.16.0","react-dom":"*","react-transition-group":"^4.4.5"},"peerDependencies":{"react":"*","react-dom":"*"},"scripts":{"pub":"npm version patch && npm publish"}}

package/ui/BackDrop/BackDropBase.js

@@ -12,6 +12,7 @@ export const BackDropBase = props => {
   const handleClick = e => {
     if (e.target instanceof Element) {
       if (e.target.classList.contains('Arm-BackDropBase')) {
+        e.stopPropagation();
         if (onClick) onClick(e);
       }
     }

package/ui/Form/DateField/DateField.d.ts

@@ -2,13 +2,14 @@ import { TextFieldProps } from '../TextField/TextField';
 import { ChangeEvent, MouseEvent } from 'react';
 import { DatePickerProps } from '../DatePicker/DatePicker';
 type BaseInputProps = Pick<TextFieldProps, 'label' | 'className' | 'placeholder'>;
+export type DateFieldChangeEvent = ChangeEvent<HTMLInputElement> & {
+    value: Date | null;
+};
 type OwnProps = {
     onClick?: (e: MouseEvent) => void;
     format?: string;
     onInput?: (e: ChangeEvent<HTMLInputElement>) => void;
-    onChange?: (e: ChangeEvent<HTMLInputElement> & {
-        value: Date | null;
-    }) => void;
+    onChange?: (e: DateFieldChangeEvent) => void;
     value?: Date | string | null;
     showTime?: boolean;
     showTimeOnly?: boolean;

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

@@ -4,10 +4,14 @@ export declare const Password: import("react").ForwardRefExoticComponent<{
     variant?: import("../../../types/theme").VariantType | undefined;
     error?: boolean | undefined;
     success?: boolean | undefined;
-    helperText?: string | undefined;
+    helperText?: import("react").ReactNode;
     endAdornment?: import("react").ReactNode;
     multiline?: boolean | undefined;
     focused?: boolean | undefined;
     editable?: boolean | undefined;
+    classes?: Partial<{
+        root: string;
+        wrapper: string;
+    }> | undefined;
 } & Omit<import("react").InputHTMLAttributes<any>, "size"> & import("react").RefAttributes<unknown>>;
 export default Password;

package/ui/Form/TextArea/TextArea.js

@@ -36,6 +36,9 @@ const TextArea = props => {
       className: clsx(css.textarea, css['size_' + restProps.size], className),
       onChange: handleChange,
       multiline: true,
+      classes: {
+        root: css.textarea__root
+      },
       style: {
         height: textHeight + 'px'
       }

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

@@ -1,16 +1,18 @@
 import { ElementType, HTMLAttributes, InputHTMLAttributes, ReactNode } from 'react';
 import { SizeType, VariantType } from '../../../types/theme';
+type Classes = Record<'root' | 'wrapper', string>;
 export type TextFieldProps = {
     label?: string;
     size?: Exclude<SizeType, 'extraLarge' | 'medium'>;
     variant?: VariantType;
     error?: boolean;
     success?: boolean;
-    helperText?: string;
+    helperText?: string | ReactNode;
     endAdornment?: string | ReactNode;
     multiline?: boolean;
     focused?: boolean;
     editable?: boolean;
+    classes?: Partial<Classes>;
 } & Omit<InputHTMLAttributes<any>, 'size'>;
 export declare const TextField: import("react").ForwardRefExoticComponent<{
     label?: string | undefined;
@@ -18,12 +20,13 @@ export declare const TextField: import("react").ForwardRefExoticComponent<{
     variant?: VariantType | undefined;
     error?: boolean | undefined;
     success?: boolean | undefined;
-    helperText?: string | undefined;
+    helperText?: string | ReactNode;
     endAdornment?: string | ReactNode;
     multiline?: boolean | undefined;
     focused?: boolean | undefined;
     editable?: boolean | undefined;
-} & Omit<InputHTMLAttributes<any>, "size"> & import("react").RefAttributes<unknown>>;
+    classes?: Partial<Classes> | undefined;
+} & Omit<InputHTMLAttributes<any>, "size"> & import("react").RefAttributes<any>>;
 type ContainerPropsType = {
     focused?: boolean;
     disabled?: boolean;
@@ -40,5 +43,6 @@ export declare const TextFieldInput: import("react").ForwardRefExoticComponent<{
     multiline?: boolean | undefined;
     error?: boolean | undefined;
     label?: string | undefined;
+    wrapperClass?: string | undefined;
 } & Omit<InputHTMLAttributes<any>, "size"> & import("react").RefAttributes<unknown>>;
 export default TextField;

package/ui/Form/TextField/TextField.js

@@ -1,6 +1,6 @@
 "use client";
 
-import { forwardRef, useRef, useState } from 'react';
+import { forwardRef, useRef, useState, useImperativeHandle } from 'react';
 import clsx from 'clsx';
 import HelperText from "../../HelperText/HelperText";
 import css from "./TextField.module.scss";
@@ -13,6 +13,7 @@ const CssClasses = ['textfield__container_outlined', 'textfield__container', 'te
 // const css = getCssPrefix(CssClasses)
 
 export const TextField = /*#__PURE__*/forwardRef((props, ref) => {
+  var _inputRef$current;
   let {
     error,
     success,
@@ -22,12 +23,21 @@ export const TextField = /*#__PURE__*/forwardRef((props, ref) => {
     variant = 'solid',
     endAdornment,
     className,
+    classes,
     multiline = false,
     editable = true,
     ...inputProps
   } = props;
   let [focused, setFocused] = useState(false);
-  const inputRef = useRef(ref);
+  const inputRef = useRef(null);
+  const currentScrollHeight = (_inputRef$current = inputRef.current) == null ? void 0 : _inputRef$current.scrollHeight;
+  useImperativeHandle(ref, () => {
+    var _inputRef$current2;
+    return {
+      scrollHeight: currentScrollHeight,
+      style: (_inputRef$current2 = inputRef.current) == null ? void 0 : _inputRef$current2.style
+    };
+  }, [currentScrollHeight]);
   const handleFocus = e => {
     setFocused(true);
     if (inputProps.onFocus) inputProps.onFocus(e);
@@ -58,11 +68,13 @@ export const TextField = /*#__PURE__*/forwardRef((props, ref) => {
         disabled: inputProps.disabled,
         focused: realFocused,
         onClick: () => {
-          var _inputRef$current;
-          return editable ? (_inputRef$current = inputRef.current) == null ? void 0 : _inputRef$current.focus() : null;
+          var _inputRef$current3;
+          return editable ? (_inputRef$current3 = inputRef.current) == null ? void 0 : _inputRef$current3.focus() : null;
         },
         error: error,
+        className: classes == null ? void 0 : classes.root,
         children: [/*#__PURE__*/_jsx(TextFieldInput, {
+          wrapperClass: classes == null ? void 0 : classes.wrapper,
           Component: Component,
           ref: inputRef,
           size: size,
@@ -97,16 +109,17 @@ export const TextFieldContainer = props => {
   return /*#__PURE__*/_jsx(_Fragment, {
     children: /*#__PURE__*/_jsx("div", {
       ...restProps,
-      className: clsx('TextFieldContrainer', css.textfield, css['textfield_' + variant], css['size_' + size], {
-        [css.textfield_focused]: focused,
-        [css.textfield_disabled]: disabled,
-        [css.textfield_error]: error
+      className: clsx('TextFieldContrainer', css.textfield_root, css['textfield_root_' + variant], css['size_' + size], {
+        [css.textfield_root_focused]: focused,
+        [css.textfield_root_disabled]: disabled,
+        [css.textfield_root_error]: error
       }, className),
       children: children
     })
   });
 };
 export const TextFieldInput = /*#__PURE__*/forwardRef((props, ref) => {
+  var _ref$current;
   let {
     Component = 'input',
     size,
@@ -115,6 +128,7 @@ export const TextFieldInput = /*#__PURE__*/forwardRef((props, ref) => {
     error,
     focused,
     label,
+    wrapperClass,
     className,
     ...inputProps
   } = props;
@@ -123,9 +137,9 @@ export const TextFieldInput = /*#__PURE__*/forwardRef((props, ref) => {
   };
   return /*#__PURE__*/_jsx(_Fragment, {
     children: /*#__PURE__*/_jsxs("div", {
-      className: clsx(css.textfield__container, css['size_' + size], {
+      className: clsx(css.textfield__wrapper, css['size_' + size], wrapperClass, {
         [css._label]: !!label,
-        [css.textfield__container_outlined]: variant === 'outlined'
+        [css.textfield__wrapper_outlined]: variant === 'outlined'
       }),
       children: [/*#__PURE__*/_jsx(Component, {
         ref: ref,
@@ -139,7 +153,7 @@ export const TextFieldInput = /*#__PURE__*/forwardRef((props, ref) => {
         }, className)
       }), label && /*#__PURE__*/_jsx("span", {
         className: clsx(css.textfield__label, {
-          [css.textfield__label_focused]: focused || !!props.value,
+          [css.textfield__label_focused]: focused || !!props.value || !!((_ref$current = ref.current) != null && _ref$current.value),
           [css.textfield__label_small]: size === 'small',
           [css.textfield__label_error]: error
         }),