armtek-uikit-react 1.0.27 → 1.0.29

package/assets/Adornment.scss

@@ -2,6 +2,7 @@
 
 .adornmentContainer{
   display: flex;
+  align-items: center;
 }
 .adornmentContainer_end{
   margin-left: auto;

package/assets/Period.scss

@@ -7,4 +7,5 @@
   position: absolute;
   top: 100%;
   right: 0;
+  z-index: 6;
 }

package/assets/TextField.scss

@@ -139,15 +139,9 @@
   color: $color-error-dark;
 }
 .textfield__adornment{
-  @include flex();
-  position: relative;
   z-index: 5;
   height: 100%;
   padding-right: 10px;
-  font-size: 0;
-  & > *{
-    margin-left: $size-step;
-  }
 }
 .textfield__helperText{
   margin-top: calc($size-step / 2);

package/package.json

@@ -1 +1 @@
-{"name":"armtek-uikit-react","version":"1.0.27","description":"Armtek UIKit for React","repository":{"type":"git","url":"ssh://git@gl.corp:10022/int/uikit/uikit_react.git"},"author":"","license":"ISC","dependencies":{"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.29","description":"Armtek UIKit for React","repository":{"type":"git","url":"ssh://git@gl.corp:10022/int/uikit/uikit_react.git"},"author":"","license":"ISC","dependencies":{"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/Adornment/index.d.ts

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

package/ui/Adornment/index.js

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

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

@@ -4,23 +4,16 @@ export type DateFieldProps = {
     format?: string;
     onInput?: (e: ChangeEvent<HTMLInputElement>) => void;
     onChange?: (value: Date | null) => void;
+    value?: Date | null;
     showTime?: boolean;
     showTimeOnly?: boolean;
-} & TextFieldProps;
+} & Omit<TextFieldProps, 'onChange' | 'value'>;
 declare const DateField: import("react").ForwardRefExoticComponent<{
     format?: string | undefined;
     onInput?: ((e: ChangeEvent<HTMLInputElement>) => void) | undefined;
     onChange?: ((value: Date | null) => void) | undefined;
+    value?: Date | null | undefined;
     showTime?: boolean | undefined;
     showTimeOnly?: boolean | undefined;
-} & {
-    label?: string | undefined;
-    size?: "large" | "small" | undefined;
-    variant?: import("../../../types/theme").VariantType | undefined;
-    error?: boolean | undefined;
-    success?: boolean | undefined;
-    helperText?: string | undefined;
-    endAdornment?: import("react").ReactNode;
-    multiline?: boolean | undefined;
-} & Omit<import("react").InputHTMLAttributes<any>, "size"> & import("react").RefAttributes<unknown>>;
+} & Omit<TextFieldProps, "value" | "onChange"> & import("react").RefAttributes<unknown>>;
 export default DateField;

package/ui/Form/DateField/DateField.js

@@ -35,6 +35,7 @@ const DateField = /*#__PURE__*/forwardRef((props, ref) => {
     showTime,
     showTimeOnly,
     disabled,
+    value,
     ...restProps
   } = props;
   let [date, setDate] = useState(null);
@@ -43,10 +44,11 @@ const DateField = /*#__PURE__*/forwardRef((props, ref) => {
     setDate(d);
     if (onChange) onChange(d);
   };
+  let realValue = value !== undefined ? value : date;
   return /*#__PURE__*/_jsx(_Fragment, {
     children: /*#__PURE__*/_jsx(DatePicker, {
       onChange: handleChange,
-      selected: date,
+      selected: realValue,
       showTimeSelect: !!showTime,
       timeIntervals: 15,
       showTimeSelectOnly: !!showTimeOnly && !!showTime,
@@ -67,6 +69,9 @@ const DateField = /*#__PURE__*/forwardRef((props, ref) => {
 const PickerCard = props => {
   return /*#__PURE__*/_jsx(Card, {
     className: props.className,
+    style: {
+      zIndex: 6
+    },
     children: props.children
   });
 };

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

@@ -1,4 +1,4 @@
-declare const Password: import("react").ForwardRefExoticComponent<{
+export declare const Password: import("react").ForwardRefExoticComponent<{
     label?: string | undefined;
     size?: "large" | "small" | undefined;
     variant?: import("../../../types/theme").VariantType | undefined;
@@ -7,5 +7,7 @@ declare const Password: import("react").ForwardRefExoticComponent<{
     helperText?: string | undefined;
     endAdornment?: import("react").ReactNode;
     multiline?: boolean | undefined;
+    focused?: boolean | undefined;
+    editable?: boolean | undefined;
 } & Omit<import("react").InputHTMLAttributes<any>, "size"> & import("react").RefAttributes<unknown>>;
 export default Password;

package/ui/Form/Password/Password.js

@@ -5,7 +5,7 @@ import { forwardRef, useRef, useState } from 'react';
 import ButtonIcon from "../../ButtonIcon";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
-const Password = /*#__PURE__*/forwardRef((props, ref) => {
+export const Password = /*#__PURE__*/forwardRef((props, ref) => {
   let {
     onChange,
     ...restProps

package/ui/Form/Select/Select.d.ts

@@ -3,6 +3,8 @@ import { TextFieldProps } from '../TextField/TextField';
 type SelectBaseProps = {
     options: OptionType[];
     inline?: boolean;
+    search?: boolean;
+    open?: boolean;
 };
 type SelectSingleProps = {
     multiple?: false;

package/ui/Form/Select/Select.js

@@ -2,11 +2,12 @@
 
 import TextField from "../TextField/TextField";
 import { forwardRef, useRef, useState } from 'react';
-import Index from "../../ButtonIcon";
 import clsx from 'clsx';
 import ListItem from "../../List/ListItem";
 import useClickOutside from "../../../lib/hooks/useClickOutside";
 import css from "./Select.module.scss";
+import ButtonIcon from "../../ButtonIcon";
+import Adornment from "../../Adornment";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -26,10 +27,14 @@ function Select(props) {
     value,
     defaultValue,
     onChange,
+    search,
+    open,
     ...inputProps
   } = props;
   let [active, setActive] = useState(false);
   let [selected, setSelected] = useState(defaultValue || (multiple ? [] : ''));
+  let [focused, setFocused] = useState(false);
+  let [q, setQ] = useState('');
   let selectRef = useRef(null);
   let optRef = useClickOutside(() => setActive(false));
   const handleActive = flag => {
@@ -42,12 +47,25 @@ function Select(props) {
     let newValueM = mSelected.includes(v) ? mSelected.filter(item => item !== v) : mSelected.concat(v);
     setSelected(multiple ? newValueM : newValueS);
     if (onChange) onChange(multiple ? newValueM : newValueS);
+    if (search && !multiple) {
+      setQ(options.find(item => getOptionValue(item) === newValueS).text);
+    }
     if (!multiple) setActive(false);
 
     // if(selectRef.current)
     // 	selectRef.current.dispatchEvent(new Event('change', { bubbles: true }))
   };
 
+  const handleSearch = e => {
+    setQ(e.target.value);
+  };
+  const handleFocus = search ? () => {
+    setFocused(true);
+  } : undefined;
+  const handleBlur = !!search ? () => {
+    setFocused(false);
+  } : undefined;
+
   // const handleChange = (e: ChangeEvent<HTMLSelectElement>) => {
   // let option = options.find(item => getOptionValue(item) === e.target.value)
   // if( option )
@@ -60,7 +78,9 @@ function Select(props) {
   // }
 
   let selectEndAdornment = /*#__PURE__*/_jsxs(_Fragment, {
-    children: [endAdornment, /*#__PURE__*/_jsx(Index, {
+    children: [/*#__PURE__*/_jsx(Adornment, {
+      children: endAdornment
+    }), /*#__PURE__*/_jsx(ButtonIcon, {
       onClick: () => handleActive,
       size: 'small',
       variant: 'transparent',
@@ -76,12 +96,16 @@ function Select(props) {
   // }
 
   let realValue = value !== undefined ? value : selected;
+  let realActive = open !== undefined ? open : active;
   let selectedText = multiple ? options.filter(item => realValue == null ? void 0 : realValue.includes(getOptionValue(item))).map(item => item.text).join(', ') : ((_options$find = options.find(item => getOptionValue(item) === realValue)) == null ? void 0 : _options$find.text) || '';
+  if (!!search) options = options.filter(item => item.text.toLowerCase().includes(q.toLowerCase()));
   return /*#__PURE__*/_jsx(_Fragment, {
     children: /*#__PURE__*/_jsxs("div", {
       className: css.select,
+      ref: optRef,
       children: [/*#__PURE__*/_jsxs("div", {
         className: css.select__input_wrapper,
+        onClick: () => setActive(true),
         children: [/*#__PURE__*/_jsx("select", {
           multiple: multiple,
           ref: selectRef,
@@ -94,13 +118,19 @@ function Select(props) {
           }, item.text))
         }), /*#__PURE__*/_jsx(TextField, {
           ...inputProps,
-          value: selectedText,
-          onClick: () => setActive(true),
+          onChange: handleSearch,
+          focused: focused,
+          onFocus: handleFocus,
+          onBlur: handleBlur,
+          value: !search ? selectedText : q,
           className: clsx(css.select__input, className),
-          endAdornment: selectEndAdornment
+          endAdornment: selectEndAdornment,
+          style: {
+            pointerEvents: 'none'
+          },
+          editable: !!search
         })]
-      }), active && /*#__PURE__*/_jsx(SelectOptions, {
-        ref: optRef,
+      }), realActive && /*#__PURE__*/_jsx(SelectOptions, {
         options: options,
         multiple: multiple,
         value: realValue,

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

@@ -9,8 +9,10 @@ export type TextFieldProps = {
     helperText?: string;
     endAdornment?: string | ReactNode;
     multiline?: boolean;
+    focused?: boolean;
+    editable?: boolean;
 } & Omit<InputHTMLAttributes<any>, 'size'>;
-declare const TextField: import("react").ForwardRefExoticComponent<{
+export declare const TextField: import("react").ForwardRefExoticComponent<{
     label?: string | undefined;
     size?: "large" | "small" | undefined;
     variant?: VariantType | undefined;
@@ -19,6 +21,8 @@ declare const TextField: import("react").ForwardRefExoticComponent<{
     helperText?: string | undefined;
     endAdornment?: string | ReactNode;
     multiline?: boolean | undefined;
+    focused?: boolean | undefined;
+    editable?: boolean | undefined;
 } & Omit<InputHTMLAttributes<any>, "size"> & import("react").RefAttributes<unknown>>;
 type ContainerPropsType = {
     focused?: boolean;

package/ui/Form/TextField/TextField.js

@@ -4,6 +4,7 @@ import { forwardRef, useRef, useState } from 'react';
 import clsx from 'clsx';
 import HelperText from "../../HelperText/HelperText";
 import css from "./TextField.module.scss";
+import Adornment, { AdornmentContainer } from "../../Adornment";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -11,7 +12,7 @@ const CssClasses = ['textfield__container_outlined', 'textfield__container', 'te
 
 // const css = getCssPrefix(CssClasses)
 
-const TextField = /*#__PURE__*/forwardRef((props, ref) => {
+export const TextField = /*#__PURE__*/forwardRef((props, ref) => {
   let {
     error,
     success,
@@ -22,6 +23,7 @@ const TextField = /*#__PURE__*/forwardRef((props, ref) => {
     endAdornment,
     className,
     multiline = false,
+    editable = true,
     ...inputProps
   } = props;
   let [value, setValue] = useState('');
@@ -35,31 +37,29 @@ const TextField = /*#__PURE__*/forwardRef((props, ref) => {
     setFocused(false);
     if (inputProps.onBlur) inputProps.onBlur(e);
   };
-  let endContent = /*#__PURE__*/_jsxs("div", {
+  let endContent = /*#__PURE__*/_jsxs(AdornmentContainer, {
     className: css.textfield__adornment,
-    children: [/*#__PURE__*/_jsx("div", {
-      className: css.textfield__icon,
-      children: endAdornment
-    }), error && /*#__PURE__*/_jsx("div", {
-      className: clsx('material_icon', 'text_error', css.textfield__icon),
+    children: [endAdornment, error && /*#__PURE__*/_jsx(Adornment, {
+      className: clsx('material_icon', 'text_error'),
       children: "error_outline"
-    }), success && /*#__PURE__*/_jsx("div", {
-      className: clsx('material_icon', 'text_success', css.textfield__icon),
+    }), success && /*#__PURE__*/_jsx(Adornment, {
+      className: clsx('material_icon', 'text_success'),
       children: "done"
     })]
   });
   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, {
       size: size,
       variant: variant,
       disabled: inputProps.disabled,
-      focused: focused,
+      focused: realFocused,
       onClick: () => {
         var _realRef$current;
-        return (_realRef$current = realRef.current) == null ? void 0 : _realRef$current.focus();
+        return editable ? (_realRef$current = realRef.current) == null ? void 0 : _realRef$current.focus() : null;
       },
       className: className,
       error: error,
@@ -71,7 +71,7 @@ const TextField = /*#__PURE__*/forwardRef((props, ref) => {
         size: size,
         variant: variant,
         label: label,
-        focused: focused,
+        focused: realFocused,
         error: error,
         multiline: multiline,
         onFocus: handleFocus,