armtek-uikit-react 1.0.44 → 1.0.45

package/assets/Tooltip.scss

@@ -5,7 +5,7 @@
   position: relative;
 }
 .tooltip__item{
-  position: absolute;
+  //position: absolute;
   padding: $size-step;
   border-radius: $radius;
   background: $color-gray-700;
@@ -14,5 +14,5 @@
   font-size: 12px;
   left: 50%;
   bottom: 100%;
-  transform: translateX(-50%);
+  //transform: translateX(-50%);
 }

package/lib/hooks/useEnhancedEffect.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+/**
+ * A version of `React.useLayoutEffect` that does not show a warning when server-side rendering.
+ * This is useful for effects that are only needed for client-side rendering but not for SSR.
+ *
+ * Before you use this hook, make sure to read https://gist.github.com/gaearon/e7d97cdf38a2907924ea12e4ebdf3c85
+ * and confirm it doesn't apply to your use-case.
+ */
+declare const useEnhancedEffect: typeof React.useEffect;
+export default useEnhancedEffect;

package/lib/hooks/useEnhancedEffect.js

@@ -0,0 +1,13 @@
+'use client';
+
+import * as React from 'react';
+
+/**
+ * A version of `React.useLayoutEffect` that does not show a warning when server-side rendering.
+ * This is useful for effects that are only needed for client-side rendering but not for SSR.
+ *
+ * Before you use this hook, make sure to read https://gist.github.com/gaearon/e7d97cdf38a2907924ea12e4ebdf3c85
+ * and confirm it doesn't apply to your use-case.
+ */
+const useEnhancedEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
+export default useEnhancedEffect;

package/lib/hooks/useEventCallback.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Inspired by https://github.com/facebook/react/issues/14099#issuecomment-440013892
+ * See RFC in https://github.com/reactjs/rfcs/pull/220
+ */
+declare function useEventCallback<Fn extends (...args: any[]) => any = (...args: unknown[]) => unknown>(fn: Fn): Fn;
+declare function useEventCallback<Args extends unknown[], Return>(fn: (...args: Args) => Return): (...args: Args) => Return;
+export default useEventCallback;

package/lib/hooks/useEventCallback.js

@@ -0,0 +1,21 @@
+'use client';
+
+import * as React from 'react';
+import useEnhancedEffect from "./useEnhancedEffect";
+
+/**
+ * Inspired by https://github.com/facebook/react/issues/14099#issuecomment-440013892
+ * See RFC in https://github.com/reactjs/rfcs/pull/220
+ */
+function useEventCallback<Fn extends (...args: any[]) => any = (...args: unknown[]) => unknown>(fn: Fn): Fn;
+function useEventCallback<Args extends unknown[], Return>(fn: (...args: Args) => Return): (...args: Args) => Return;
+function useEventCallback<Args extends unknown[], Return>(fn: (...args: Args) => Return): (...args: Args) => Return {
+  const ref = React.useRef(fn);
+  useEnhancedEffect(() => {
+    ref.current = fn;
+  });
+  return React.useRef((...args: Args) =>
+  // @ts-expect-error hide `this`
+  (0, ref.current!)(...args)).current;
+}
+export default useEventCallback;

package/lib/hooks/useLazyRef.d.ts

@@ -0,0 +1 @@
+export default function useLazyRef<T, U>(init: (arg?: U) => T, initArg?: U): import("react").MutableRefObject<T>;

package/lib/hooks/useLazyRef.js

@@ -0,0 +1,11 @@
+'use client';
+
+import { useRef } from 'react';
+const UNINITIALIZED = {};
+export default function useLazyRef<T, U>(init: (arg?: U) => T, initArg?: U) {
+  const ref = useRef(((UNINITIALIZED as unknown) as T));
+  if (ref.current === UNINITIALIZED) {
+    ref.current = init(initArg);
+  }
+  return ref;
+}

package/lib/hooks/useTimeout.d.ts

@@ -0,0 +1,11 @@
+export declare class Timeout {
+    static create(): Timeout;
+    currentId: number;
+    /**
+     * Executes `fn` after `delay`, clearing any previously scheduled call.
+     */
+    start(delay: number, fn: Function): void;
+    clear: () => void;
+    disposeEffect: () => () => void;
+}
+export default function useTimeout(): Timeout;

package/lib/hooks/useTimeout.js

@@ -0,0 +1,35 @@
+'use client';
+
+import useLazyRef from "./useLazyRef";
+import { useEffect } from 'react';
+export class Timeout {
+  static create() {
+    return new Timeout();
+  }
+  currentId: number = 0;
+
+  /**
+   * Executes `fn` after `delay`, clearing any previously scheduled call.
+   */
+  start(delay: number, fn: Function) {
+    this.clear();
+    this.currentId = ((setTimeout(() => {
+      this.currentId = 0;
+      fn();
+    }, delay) as unknown) as number);
+  }
+  clear = () => {
+    if (this.currentId !== 0) {
+      clearTimeout(this.currentId);
+      this.currentId = 0;
+    }
+  };
+  disposeEffect = () => {
+    return this.clear;
+  };
+}
+export default function useTimeout() {
+  const timeout = useLazyRef(Timeout.create).current;
+  useEffect(timeout.disposeEffect, []);
+  return timeout;
+}

package/package.json

@@ -1 +1 @@
-{"name":"armtek-uikit-react","version":"1.0.44","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":"*","clsx":"^2.0.0"},"peerDependencies":{"react":"*","react-dom":"*"},"scripts":{"pub":"npm version patch && npm publish"}}
+{"name":"armtek-uikit-react","version":"1.0.45","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/Button/Button.d.ts

@@ -9,7 +9,7 @@ type OwnProps<T extends ElementType = ElementType> = {
     endAdornment?: string | ReactNode;
     group?: 'inline' | 'column';
     radius?: boolean;
-    icon?: boolean;
+    asIcon?: boolean;
     as?: T;
 };
 export type ButtonProps<T extends ElementType = ElementType<HTMLAttributes<HTMLButtonElement>>> = OwnProps<T> & Omit<ComponentPropsWithoutRef<T>, keyof OwnProps>;

package/ui/Button/Button.js

@@ -18,6 +18,7 @@ const Button = props => {
     className,
     group,
     radius,
+    asIcon,
     as,
     ...restProps
   } = props;
@@ -34,7 +35,9 @@ const Button = props => {
         className: clsx(css.button__adornment, css.button__adornment_start),
         children: startAdornment
       }), /*#__PURE__*/_jsx("div", {
-        className: css.button__iconWrapper,
+        className: clsx({
+          [css.button__iconWrapper]: !!asIcon
+        }),
         children: children
       }), endAdornment && /*#__PURE__*/_jsx("div", {
         className: clsx(css.button__adornment, css.button__adornment_end),

package/ui/ButtonIcon/ButtonIcon.js

@@ -11,7 +11,7 @@ const ButtonIcon = props => {
   return /*#__PURE__*/_jsx(_Fragment, {
     children: /*#__PURE__*/_jsx(Button, {
       ...props,
-      icon: true,
+      asIcon: true,
       className: clsx(css.button_icon, css['button_icon_' + props.size], props.className),
       children: props.children
     })

package/ui/Form/Select/Select.js

@@ -60,7 +60,6 @@ function Select(props) {
     // if(selectRef.current)
     // 	selectRef.current.dispatchEvent(new Event('change', { bubbles: true }))
   };
-
   const handleSearch = e => {
     setQ(e.target.value);
   };

package/ui/Popper/Popper.d.ts

@@ -0,0 +1,9 @@
+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 {};

package/ui/Popper/Popper.js

@@ -0,0 +1,38 @@
+"use client";
+
+import { useEffect, useRef } from 'react';
+import { createPortal } from 'react-dom';
+import { createPopper } from '@popperjs/core';
+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;
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: /*#__PURE__*/createPortal( /*#__PURE__*/_jsx("div", {
+      ref: tooltipRef,
+      children: children
+    }), document.body)
+  });
+};

package/ui/Popper/index.d.ts

@@ -0,0 +1 @@
+export { Popper } from './Popper';

package/ui/Popper/index.js

@@ -0,0 +1 @@
+export { Popper } from "./Popper";

package/ui/Tooltip/Tooltip.d.ts

@@ -2,6 +2,7 @@ import { ReactNode } from 'react';
 export type TooltipProps = {
     text: string;
     children: ReactNode;
+    placement?: 'bottom-end' | 'bottom-start' | 'bottom' | 'left-end' | 'left-start' | 'left' | 'right-end' | 'right-start' | 'right' | 'top-end' | 'top-start' | 'top';
 };
 declare function Tooltip(props: TooltipProps): import("react/jsx-runtime").JSX.Element;
 export default Tooltip;

package/ui/Tooltip/Tooltip.js

@@ -1,32 +1,83 @@
 "use client";
 
-import { useState } from 'react';
+import { cloneElement, isValidElement, useRef, useState } from 'react';
+import useTimeout from "../../lib/hooks/useTimeout";
+import useEventCallback from "../../lib/hooks/useEventCallback";
+import { Popper } from "../Popper";
 import css from "./Tooltip.module.scss";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 const CssClasses = ['tooltip', 'tooltip__item'];
 
 // const css = getCssPrefix(CssClasses)
 
+function composeEventHandler(handler, eventHandler) {
+  return event => {
+    if (eventHandler) {
+      eventHandler(event);
+    }
+    handler(event);
+  };
+}
+let cursorPosition = {
+  x: 0,
+  y: 0
+};
 function Tooltip(props) {
   let {
     text,
-    children
+    children: childrenProp,
+    placement
   } = props;
-  let [visible, setVisible] = useState(false);
-  const handleEnter = () => setVisible(true);
-  const handleLeave = () => setVisible(false);
-  return /*#__PURE__*/_jsx(_Fragment, {
-    children: /*#__PURE__*/_jsxs("span", {
-      className: css.tooltip,
-      onMouseEnter: handleEnter,
-      onMouseLeave: handleLeave,
-      children: [children, visible && /*#__PURE__*/_jsx("span", {
+  const children = /*#__PURE__*/isValidElement(childrenProp) ? childrenProp : /*#__PURE__*/_jsx("span", {
+    children: childrenProp
+  });
+  const [openState, setOpenState] = useState(false);
+  const anchorEl = useRef();
+  const closeTimer = useTimeout();
+  const enterTimer = useTimeout();
+  const leaveTimer = useTimeout();
+  const handleOpen = event => {
+    setOpenState(true);
+  };
+  const handleClose = useEventCallback(event => {
+    setOpenState(false);
+
+    // closeTimer.start(theme.transitions.duration.shortest, () => {
+    // 	ignoreNonTouchEvents.current = false;
+    // });
+  });
+  const handleEnter = event => {
+    enterTimer.clear();
+    leaveTimer.clear();
+    handleOpen(event);
+  };
+  const handleLeave = event => {
+    setOpenState(false);
+    enterTimer.clear();
+    leaveTimer.start(0, () => {
+      handleClose(event);
+    });
+  };
+  const handleMouseOver = handleEnter;
+  const handleMouseLeave = handleLeave;
+  const childrenProps = {
+    ...children.props
+  };
+  childrenProps.onMouseOver = composeEventHandler(handleMouseOver, childrenProps.onMouseOver);
+  childrenProps.onMouseLeave = composeEventHandler(handleMouseLeave, childrenProps.onMouseLeave);
+  childrenProps.ref = anchorEl;
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/cloneElement(children, childrenProps), /*#__PURE__*/_jsx(Popper, {
+      placement: placement,
+      open: openState,
+      anchorEl: anchorEl,
+      children: /*#__PURE__*/_jsx("span", {
         className: css.tooltip__item,
         children: text
-      })]
-    })
+      })
+    })]
   });
 }
 export default Tooltip;