armtek-uikit-react 1.0.94 → 1.0.95

package/assets/Select.scss

@@ -16,12 +16,14 @@
   padding: $size-step 0;
   border-radius: $radius;
   box-shadow: $box-shadow;
-  position: absolute;
+  //position: absolute;
   left:0;
   top:100%;
-  width:100%;
+  //width:100%;
   background: #fff;
   z-index: 100;
+  max-height: 400px;
+  overflow: auto;
 }
 .options_inline{
   position: static;

package/package.json

@@ -1 +1 @@
-{"name":"armtek-uikit-react","version":"1.0.94","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.95","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/Form/DateField/DateField.js

@@ -54,7 +54,7 @@ export const DateField = /*#__PURE__*/forwardRef((props, ref) => {
     }), open && /*#__PURE__*/_jsx(BackDrop, {
       onClick: () => setOpen(false),
       children: /*#__PURE__*/_jsx(PopperBase, {
-        anchorEl: btnRef,
+        anchorEl: btnRef.current,
         open: open,
         placement: 'bottom-end',
         children: /*#__PURE__*/_jsx("div", {

package/ui/Form/Select/Select.js

@@ -4,11 +4,11 @@ import TextField from "../TextField/TextField";
 import { forwardRef, useRef, useState } from 'react';
 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 { SelectSummary, SelectSummaryChips } from "./SelectSummary";
+import Popover from "../../Popover";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -41,11 +41,30 @@ function Select(props) {
   let [focused, setFocused] = useState(false);
   let [q, setQ] = useState('');
   let selectRef = useRef(null);
-  let optRef = useClickOutside(() => setActive(false));
-  const handleOpen = flag => {
-    if (!inputProps.disabled) setActive(prev => flag !== undefined ? flag : !prev);
+  const [anchorEl, setAnchorEl] = useState(null);
+
+  // let selectEl!: HTMLSelectElement
+  //
+  // useEffect(() => {
+  // 	selectEl = document.createElement('select')
+  // 	selectEl.onchange = (e) => {
+  // 		console.log(e)
+  // 	}
+  // 	return () => {
+  // 		selectEl.remove()
+  // 	}
+  // }, [])
+
+  const handleOpen = e => {
+    if (!inputProps.disabled) {
+      setActive(true);
+      if (e.target instanceof HTMLDivElement) setAnchorEl(e.currentTarget);
+    }
   };
   const handleSelect = option => {
+    // selectEl.sele = option.value
+    // selectEl?.dispatchEvent(new Event('change', { bubbles: true }))
+
     let v = getOptionValue(option);
     let mSelected = Array.isArray(selected) ? selected : [selected];
     let newValueS = v;
@@ -121,13 +140,12 @@ function Select(props) {
   if (!!search) options = options.filter(item => item.text.toLowerCase().includes(q.toLowerCase()));
   let valueArr = realValue ? Array.isArray(realValue) ? realValue : [realValue] : [];
   let selectedOptions = options.filter(item => valueArr.includes(getOptionValue(item)));
-  return /*#__PURE__*/_jsx(_Fragment, {
-    children: /*#__PURE__*/_jsxs("div", {
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsxs("div", {
       className: css.select,
-      ref: optRef,
       children: [/*#__PURE__*/_jsxs("div", {
         className: css.select__input_wrapper,
-        onClick: () => handleOpen(true),
+        onClick: handleOpen,
         children: [/*#__PURE__*/_jsx("select", {
           multiple: multiple,
           ref: selectRef,
@@ -156,7 +174,13 @@ function Select(props) {
         options: selectedOptions,
         disabled: inputProps.disabled,
         onDelete: handleSelect
-      }), realActive && /*#__PURE__*/_jsx(SelectOptions, {
+      })]
+    }), anchorEl && /*#__PURE__*/_jsx(Popover, {
+      anchorEl: anchorEl,
+      open: realActive,
+      onClose: () => setActive(false),
+      placement: 'bottom-start',
+      children: /*#__PURE__*/_jsx(SelectOptions, {
         disabled: inputProps.disabled,
         options: options,
         multiple: multiple,
@@ -167,8 +191,8 @@ function Select(props) {
         onClearAll: handleResetAll,
         onSelectAll: handleSelectAll,
         onSubmit: handleSubmit
-      })]
-    })
+      })
+    })]
   });
 }
 const SelectOptions = /*#__PURE__*/forwardRef((props, ref) => {

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

@@ -1,2 +1,3 @@
 export { default } from './Select';
 export * from './Select';
+export * from './SelectSummary';

package/ui/Form/Select/index.js

@@ -1,2 +1,3 @@
 export { default } from "./Select";
-export * from "./Select";
+export * from "./Select";
+export * from "./SelectSummary";

package/ui/Popover/Popover.d.ts

@@ -1,6 +1,7 @@
 import { PopperBaseProps } from '../../ui/Popper';
 export type PopoverProps = {
     onClose?: () => void;
+    matchWidth?: boolean;
 } & PopperBaseProps;
 export declare const Popover: (props: PopoverProps) => import("react/jsx-runtime").JSX.Element | null;
 export default Popover;

package/ui/Popover/Popover.js

@@ -5,6 +5,7 @@ import { Fragment as _Fragment } from "react/jsx-runtime";
 export const Popover = props => {
   const {
     onClose,
+    matchWidth = true,
     children,
     ...poperProps
   } = props;
@@ -14,7 +15,12 @@ export const Popover = props => {
       onClick: onClose,
       children: /*#__PURE__*/_jsx(PopperBase, {
         ...poperProps,
-        children: children
+        children: /*#__PURE__*/_jsx("div", {
+          style: matchWidth ? {
+            width: poperProps.anchorEl.clientWidth
+          } : undefined,
+          children: children
+        })
       })
     })
   });

package/ui/Popper/PopperBase.d.ts

@@ -1,7 +1,7 @@
-import { MutableRefObject, ReactNode } from 'react';
+import { ReactNode } from 'react';
 export type PopperBaseProps = {
     children: ReactNode;
-    anchorEl: MutableRefObject<any>;
+    anchorEl: Element;
     open?: boolean;
     placement?: 'bottom-end' | 'bottom-start' | 'bottom' | 'left-end' | 'left-start' | 'left' | 'right-end' | 'right-start' | 'right' | 'top-end' | 'top-start' | 'top';
 };

package/ui/Popper/PopperBase.js

@@ -13,7 +13,7 @@ export const PopperBase = props => {
   } = props;
   const tooltipRef = useRef(null);
   useEffect(() => {
-    const popper = createPopper(anchorEl.current, tooltipRef.current, {
+    const popper = createPopper(anchorEl, tooltipRef.current, {
       placement: placement,
       modifiers: [{
         name: 'offset',

package/ui/Tooltip/Tooltip.js

@@ -69,10 +69,10 @@ function Tooltip(props) {
   childrenProps.onMouseLeave = composeEventHandler(handleMouseLeave, childrenProps.onMouseLeave);
   childrenProps.ref = anchorEl;
   return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/cloneElement(children, childrenProps), /*#__PURE__*/_jsx(Popper, {
+    children: [/*#__PURE__*/cloneElement(children, childrenProps), anchorEl.current && /*#__PURE__*/_jsx(Popper, {
       placement: placement,
       open: openState,
-      anchorEl: anchorEl,
+      anchorEl: anchorEl.current,
       children: /*#__PURE__*/_jsx("span", {
         className: css.tooltip__item,
         children: text