armtek-uikit-react 1.0.65 → 1.0.67

package/assets/BackDrop.scss

@@ -2,10 +2,11 @@
 
 .BackDropBase {
   position: fixed;
+  top:0;
+  left: 0;
   width: 100%;
   height: 100%;
   z-index: 1000;
-  background: rgba(0, 0, 0, 0.25);
   display: flex;
   align-items: center;
   justify-content: center;

package/assets/Button.scss

@@ -4,7 +4,6 @@
   outline: none;
   border:1px solid transparent;
   border-radius: $radius;
-  text-transform: uppercase;
   padding: $size-step calc(3 * $size-step);
   cursor: pointer;
   @include transition(0.3s);

package/assets/FormControls.scss

@@ -4,7 +4,7 @@
   border-top: 1px solid $color-gray-200;
   padding-top: calc($size-step * 4);
   display: flex;
-  margin:0 -$size-step;
+  margin:0 (-$size-step);
 }
 .FormControls__button{
   flex: 0 0 50%;

package/assets/Modal.scss

@@ -30,4 +30,7 @@
   right: calc($size-step * 4);
   top: 50%;
   transform: translateY(-50%);
+}
+.Modal__backdrop{
+  background: rgba(0, 0, 0, 0.25);
 }

package/package.json

@@ -1 +1 @@
-{"name":"armtek-uikit-react","version":"1.0.65","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":"*"},"peerDependencies":{"react":"*","react-dom":"*"},"scripts":{"pub":"npm version patch && npm publish"}}
+{"name":"armtek-uikit-react","version":"1.0.67","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":"*"},"peerDependencies":{"react":"*","react-dom":"*"},"scripts":{"pub":"npm version patch && npm publish"}}

package/ui/BackDrop/BackDropBase.d.ts

@@ -1,7 +1,5 @@
-import { ReactNode, MouseEvent } from 'react';
+import { ComponentPropsWithoutRef } from 'react';
 export type BackDropProps = {
-    children: ReactNode;
     width?: number;
-    onClick?: (e: MouseEvent<HTMLDivElement>) => void;
-};
+} & ComponentPropsWithoutRef<'div'>;
 export declare const BackDropBase: (props: BackDropProps) => import("react/jsx-runtime").JSX.Element;

package/ui/BackDrop/BackDropBase.js

@@ -6,6 +6,7 @@ export const BackDropBase = props => {
   const {
     children,
     width = 500,
+    className,
     onClick
   } = props;
   const handleClick = e => {
@@ -17,7 +18,7 @@ export const BackDropBase = props => {
   };
   return /*#__PURE__*/_jsx(_Fragment, {
     children: /*#__PURE__*/_jsx("div", {
-      className: clsx('Arm-BackDropBase', css.BackDropBase),
+      className: clsx('Arm-BackDropBase', className, css.BackDropBase),
       onClick: handleClick,
       children: /*#__PURE__*/_jsx("div", {
         className: css.BackDropBase__inner,

package/ui/Button/Button.d.ts

@@ -1,6 +1,6 @@
 import { ComponentPropsWithoutRef, ElementType, HTMLAttributes, ReactNode } from 'react';
 import { ColorThemeType, ColorType, SizeType, VariantType } from '../../types/theme';
-type OwnProps<T extends ElementType = ElementType> = {
+type OwnProps<T extends ElementType = ElementType<HTMLAttributes<HTMLButtonElement>>> = {
     children: ReactNode;
     size?: SizeType;
     color?: ColorType | Exclude<ColorThemeType, 'white'>;
@@ -12,6 +12,6 @@ type OwnProps<T extends ElementType = ElementType> = {
     asIcon?: boolean;
     as?: T;
 };
-export type ButtonProps<T extends ElementType = ElementType<HTMLAttributes<HTMLButtonElement>>> = OwnProps<T> & Omit<ComponentPropsWithoutRef<T>, keyof OwnProps>;
+export type ButtonProps<T extends ElementType = ElementType<HTMLAttributes<HTMLButtonElement>>> = OwnProps<T> & Omit<ComponentPropsWithoutRef<T>, keyof OwnProps<T>>;
 declare const Button: <T extends ElementType>(props: ButtonProps<T>) => import("react/jsx-runtime").JSX.Element;
 export default Button;

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

@@ -8,7 +8,7 @@ export type DateFieldProps = {
     showTime?: boolean;
     showTimeOnly?: boolean;
 } & Omit<TextFieldProps, 'onChange' | 'value'>;
-declare const DateField: import("react").ForwardRefExoticComponent<{
+export declare const DateField: import("react").ForwardRefExoticComponent<{
     format?: string | undefined;
     onInput?: ((e: ChangeEvent<HTMLInputElement>) => void) | undefined;
     onChange?: ((value: Date | null) => void) | undefined;

package/ui/Form/DateField/DateField.js

@@ -1,35 +1,16 @@
 "use client";
 
 import TextField from "../TextField/TextField";
-import { forwardRef, useState } from 'react';
+import { forwardRef, useRef, useState } from 'react';
 import Card from "../../Card/Card";
 import DatePicker from "../DatePicker/DatePicker";
 import ButtonIcon from "../../ButtonIcon";
+import BackDrop from "../../BackDrop";
+import { PopperBase } from "../../Popper/PopperBase";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
-const DateInput = /*#__PURE__*/forwardRef((props, ref) => {
-  let {
-    showTime,
-    showTimeOnly,
-    ...restProps
-  } = props;
-  let inputIcon = showTime && showTimeOnly ? 'schedule' : 'calendar_today';
-  return /*#__PURE__*/_jsx(TextField, {
-    ref: ref,
-    ...restProps,
-    endAdornment: /*#__PURE__*/_jsx(ButtonIcon, {
-      size: 'medium',
-      variant: 'transparent',
-      onClick: props.onClick,
-      color: 'neutral',
-      children: /*#__PURE__*/_jsx("span", {
-        className: 'material_icon',
-        children: inputIcon
-      })
-    })
-  });
-});
-const DateField = /*#__PURE__*/forwardRef((props, ref) => {
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export const DateField = /*#__PURE__*/forwardRef((props, ref) => {
   let {
     onChange,
     format = 'dd.MM.yyyy',
@@ -41,33 +22,97 @@ const DateField = /*#__PURE__*/forwardRef((props, ref) => {
     ...restProps
   } = props;
   let [date, setDate] = useState(null);
+  let [open, setOpen] = useState(false);
   if (showTime && !showTimeOnly) format = 'dd.MM.yyyy HH:mm';else if (showTimeOnly) format = 'HH:mm';
   const handleChange = d => {
+    console.log(d);
     setDate(d);
     if (onChange) onChange(d);
   };
+  const handleClick = e => {
+    setOpen(prev => !prev);
+    if (props.onClick) props.onClick(e);
+  };
   let realValue = value !== undefined ? value : date;
-  return /*#__PURE__*/_jsx(_Fragment, {
-    children: /*#__PURE__*/_jsx(DatePicker, {
-      onChange: handleChange,
-      selected: realValue,
-      showTimeSelect: !!showTime,
-      timeIntervals: 15,
-      showTimeSelectOnly: !!showTimeOnly && !!showTime,
-      customInput: /*#__PURE__*/_jsx(DateInput, {
-        showTime: showTime,
-        showTimeOnly: showTimeOnly,
-        ref: ref,
-        ...restProps
-      }),
-      inline: false,
-      disabled: disabled,
-      calendarContainer: PickerCard,
-      popperPlacement: "top-end",
-      dateFormat: format
-    })
+  const btnRef = useRef();
+  const inputIcon = showTime && showTimeOnly ? 'schedule' : 'calendar_today';
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(TextField, {
+      ref: ref,
+      ...restProps,
+      endAdornment: /*#__PURE__*/_jsx(ButtonIcon, {
+        size: 'medium',
+        variant: 'transparent',
+        onClick: handleClick,
+        color: 'neutral',
+        children: /*#__PURE__*/_jsx("span", {
+          ref: btnRef,
+          className: 'material_icon',
+          children: inputIcon
+        })
+      })
+    }), open && /*#__PURE__*/_jsx(BackDrop, {
+      onClick: () => setOpen(false),
+      children: /*#__PURE__*/_jsx(PopperBase, {
+        anchorEl: btnRef,
+        open: open,
+        placement: 'bottom-end',
+        children: /*#__PURE__*/_jsx("div", {
+          style: {
+            backgroundColor: '#fff',
+            width: '100%'
+          },
+          children: /*#__PURE__*/_jsx(DatePicker, {
+            onChange: handleChange,
+            selected: realValue,
+            showTimeSelect: !!showTime,
+            timeIntervals: 15,
+            showTimeSelectOnly: !!showTimeOnly && !!showTime,
+            inline: true,
+            disabled: disabled,
+            calendarContainer: PickerCard,
+            popperPlacement: "top-end",
+            dateFormat: format
+          })
+        })
+      })
+    })]
   });
 });
+// const DateField = forwardRef((props: DateFieldProps, ref: any) => {
+//
+// 	let {onChange, format = 'dd.MM.yyyy', onInput, showTime, showTimeOnly, disabled, value, ...restProps} = props
+// 	let [date, setDate] = useState<Date | null>(null)
+//
+// 	if( showTime && !showTimeOnly ) format =  'dd.MM.yyyy HH:mm'
+// 	else if( showTimeOnly ) format =  'HH:mm'
+//
+// 	const handleChange = (d: Date | null) => {
+// 		setDate(d)
+// 		if( onChange )
+// 			onChange(d)
+// 	}
+//
+// 	let realValue = value !== undefined ? value : date
+//
+// 	return <>
+// 		<DatePicker
+// 			onChange={handleChange}
+// 			selected={realValue}
+// 			showTimeSelect={!!showTime}
+// 			timeIntervals={15}
+// 			showTimeSelectOnly={!!showTimeOnly && !!showTime}
+// 			customInput={<DateInput showTime={showTime} showTimeOnly={showTimeOnly} ref={ref} {...restProps} />}
+// 			inline={false}
+// 			disabled={disabled}
+// 			calendarContainer={PickerCard}
+// 			popperPlacement="top-end"
+// 			dateFormat={format}
+// 		/>
+// 	</>
+//
+// })
+
 const PickerCard = props => {
   return /*#__PURE__*/_jsx(Card, {
     className: props.className,

package/ui/Form/TextField/TextField.js

@@ -28,7 +28,7 @@ export const TextField = /*#__PURE__*/forwardRef((props, ref) => {
   } = props;
   let [value, setValue] = useState('');
   let [focused, setFocused] = useState(false);
-  const inputRef = useRef();
+  const inputRef = useRef(ref);
   const handleFocus = e => {
     setFocused(true);
     if (inputProps.onFocus) inputProps.onFocus(e);
@@ -49,7 +49,6 @@ export const TextField = /*#__PURE__*/forwardRef((props, ref) => {
   });
   let endContentExists = endAdornment || error || success;
   let Component = multiline ? 'textarea' : 'input';
-  let realRef = ref || inputRef;
   let realFocused = props.focused !== undefined ? props.focused : focused;
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsxs(TextFieldContainer, {
@@ -58,14 +57,14 @@ export const TextField = /*#__PURE__*/forwardRef((props, ref) => {
       disabled: inputProps.disabled,
       focused: realFocused,
       onClick: () => {
-        var _realRef$current;
-        return editable ? (_realRef$current = realRef.current) == null ? void 0 : _realRef$current.focus() : null;
+        var _inputRef$current;
+        return editable ? (_inputRef$current = inputRef.current) == null ? void 0 : _inputRef$current.focus() : null;
       },
       className: className,
       error: error,
       children: [/*#__PURE__*/_jsx(TextFieldInput, {
         Component: Component,
-        ref: realRef,
+        ref: inputRef,
         value: value,
         onChange: e => setValue(e.target.value),
         size: size,

package/ui/List/ListItem.d.ts

@@ -7,6 +7,6 @@ export type OwnProps<T extends ElementType = ElementType> = {
     startAdornment?: string | ReactNode;
     as?: T;
 } & ButtonHTMLAttributes<HTMLButtonElement>;
-type ListItemProps<T extends ElementType = ElementType<HTMLAttributes<HTMLButtonElement>>> = OwnProps<T> & Omit<ComponentPropsWithoutRef<T>, keyof OwnProps>;
+export type ListItemProps<T extends ElementType = ElementType<HTMLAttributes<HTMLButtonElement>>> = OwnProps<T> & Omit<ComponentPropsWithoutRef<T>, keyof OwnProps>;
 declare function ListItem<T extends ElementType>(props: ListItemProps<T>): import("react/jsx-runtime").JSX.Element;
 export default ListItem;

package/ui/Modal/Modal.js

@@ -1,5 +1,6 @@
 import { BaseModal } from "./BaseModal";
 import BackDrop from "../BackDrop";
+import css from "./Modal.module.scss";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 const Modal = props => {
@@ -13,6 +14,7 @@ const Modal = props => {
     children: /*#__PURE__*/_jsx(BackDrop, {
       width: width,
       onClick: modalProps.onClose,
+      className: css.Modal__backdrop,
       children: /*#__PURE__*/_jsx(BaseModal, {
         ...modalProps
       })

package/ui/Popper/Popper.d.ts

@@ -1,9 +1,3 @@
-import { MutableRefObject, ReactNode } from 'react';
-type PopperProps = {
-    children: ReactNode;
-    anchorEl: MutableRefObject<any>;
-    open?: boolean;
-    placement?: 'bottom-end' | 'bottom-start' | 'bottom' | 'left-end' | 'left-start' | 'left' | 'right-end' | 'right-start' | 'right' | 'top-end' | 'top-start' | 'top';
-};
-export declare const Popper: (props: PopperProps) => import("react/jsx-runtime").JSX.Element | null;
-export {};
+import { PopperBaseProps } from './PopperBase';
+export declare const Popper: (props: PopperBaseProps) => import("react/jsx-runtime").JSX.Element | null;
+export default Popper;

package/ui/Popper/Popper.js

@@ -1,38 +1,16 @@
-"use client";
-
-import { useEffect, useRef } from 'react';
 import { createPortal } from 'react-dom';
-import { createPopper } from '@popperjs/core';
+import { PopperBase } from "./PopperBase";
+
+//TODO TESTS
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 export const Popper = props => {
-  const {
-    anchorEl,
-    children,
-    placement,
-    open
-  } = props;
-  const tooltipRef = useRef(null);
-  useEffect(() => {
-    const popper = createPopper(anchorEl.current, tooltipRef.current, {
-      placement: placement,
-      modifiers: [{
-        name: 'offset',
-        options: {
-          offset: [0, 5]
-        }
-      }]
-    });
-    return () => {
-      popper.destroy();
-      // handlePopperRefRef.current!(null)
-    };
-  }, [open, placement]);
-  if (!open) return null;
+  if (!props.open) return null;
   return /*#__PURE__*/_jsx(_Fragment, {
-    children: /*#__PURE__*/createPortal( /*#__PURE__*/_jsx("div", {
-      ref: tooltipRef,
-      children: children
+    children: /*#__PURE__*/createPortal( /*#__PURE__*/_jsx(PopperBase, {
+      ...props,
+      children: props.children
     }), document.body)
   });
-};
+};
+export default Popper;

package/ui/Popper/PopperBase.d.ts

@@ -0,0 +1,8 @@
+import { MutableRefObject, ReactNode } from 'react';
+export type PopperBaseProps = {
+    children: ReactNode;
+    anchorEl: MutableRefObject<any>;
+    open?: boolean;
+    placement?: 'bottom-end' | 'bottom-start' | 'bottom' | 'left-end' | 'left-start' | 'left' | 'right-end' | 'right-start' | 'right' | 'top-end' | 'top-start' | 'top';
+};
+export declare const PopperBase: (props: PopperBaseProps) => import("react/jsx-runtime").JSX.Element;

package/ui/Popper/PopperBase.js

@@ -0,0 +1,36 @@
+"use client";
+
+import { useEffect, useRef } from 'react';
+import { createPopper } from '@popperjs/core';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+export const PopperBase = props => {
+  const {
+    anchorEl,
+    children,
+    placement,
+    open
+  } = props;
+  const tooltipRef = useRef(null);
+  useEffect(() => {
+    const popper = createPopper(anchorEl.current, tooltipRef.current, {
+      placement: placement,
+      modifiers: [{
+        name: 'offset',
+        options: {
+          offset: [0, 5]
+        }
+      }]
+    });
+    return () => {
+      popper.destroy();
+      // handlePopperRefRef.current!(null)
+    };
+  }, [open, placement]);
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: /*#__PURE__*/_jsx("div", {
+      ref: tooltipRef,
+      children: children
+    })
+  });
+};

package/ui/Popper/index.d.ts

@@ -1 +1,2 @@
-export { Popper } from './Popper';
+export { default } from './Popper';
+export * from './PopperBase';

package/ui/Popper/index.js

@@ -1 +1,2 @@
-export { Popper } from "./Popper";
+export { default } from "./Popper";
+export * from "./PopperBase";

package/ui/Tooltip/Tooltip.js

@@ -3,7 +3,7 @@
 import { cloneElement, isValidElement, useRef, useState } from 'react';
 import useTimeout from "../../lib/hooks/useTimeout";
 import useEventCallback from "../../lib/hooks/useEventCallback";
-import { Popper } from "../Popper";
+import Popper from "../Popper";
 import css from "./Tooltip.module.scss";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";