@qoretechnologies/reqore 0.21.0 → 0.23.0

package/dist/hooks/usePopover.js

@@ -20,31 +20,40 @@ var endEvents = {
     focus: null
 };
 var usePopover = function (_a) {
-    var targetElement = _a.targetElement, content = _a.content, _b = _a.handler, handler = _b === void 0 ? 'hover' : _b, placement = _a.placement, _c = _a.show, show = _c === void 0 ? true : _c, noArrow = _a.noArrow, useTargetWidth = _a.useTargetWidth, _d = _a.closeOnOutsideClick, closeOnOutsideClick = _d === void 0 ? true : _d, _e = _a.openOnMount, openOnMount = _e === void 0 ? false : _e;
+    var targetElement = _a.targetElement, content = _a.content, _b = _a.handler, handler = _b === void 0 ? 'hover' : _b, placement = _a.placement, _c = _a.show, show = _c === void 0 ? true : _c, noArrow = _a.noArrow, useTargetWidth = _a.useTargetWidth, _d = _a.closeOnOutsideClick, closeOnOutsideClick = _d === void 0 ? true : _d, _e = _a.openOnMount, openOnMount = _e === void 0 ? false : _e, delay = _a.delay;
     var _f = (0, react_1.useContext)(PopoverContext_1["default"]), addPopover = _f.addPopover, removePopover = _f.removePopover, updatePopover = _f.updatePopover, popovers = _f.popovers;
     var current = (0, react_1.useRef)(shortid_1["default"].generate()).current;
+    var timeout = (0, react_1.useRef)(0).current;
     var startEvent = startEvents[handler];
     var endEvent = endEvents[handler];
+    var currentPopover = (0, react_1.useMemo)(function () { return popovers === null || popovers === void 0 ? void 0 : popovers.find(function (p) { return p.id === current; }); }, [popovers, current]);
     var _addPopover = function () {
-        if (popovers === null || popovers === void 0 ? void 0 : popovers.find(function (p) { return p.id === current; })) {
-            removePopover === null || removePopover === void 0 ? void 0 : removePopover(current);
+        if (currentPopover) {
+            _removePopover === null || _removePopover === void 0 ? void 0 : _removePopover();
         }
         else if (show) {
-            addPopover === null || addPopover === void 0 ? void 0 : addPopover({
-                id: current,
-                content: content,
-                targetElement: targetElement,
-                placement: placement,
-                noArrow: noArrow,
-                useTargetWidth: useTargetWidth,
-                closeOnOutsideClick: closeOnOutsideClick,
-                closeOnAnyClick: handler === 'hover' || handler === 'hoverStay'
-            });
+            timeout = setTimeout(function () {
+                addPopover === null || addPopover === void 0 ? void 0 : addPopover({
+                    id: current,
+                    content: content,
+                    targetElement: targetElement,
+                    placement: placement,
+                    noArrow: noArrow,
+                    useTargetWidth: useTargetWidth,
+                    closeOnOutsideClick: closeOnOutsideClick,
+                    closeOnAnyClick: handler === 'hover' || handler === 'hoverStay'
+                });
+            }, delay || 0);
         }
     };
     var _removePopover = function () {
+        cancelTimeout();
         removePopover === null || removePopover === void 0 ? void 0 : removePopover(current);
     };
+    var cancelTimeout = function () {
+        clearTimeout(timeout);
+        timeout = null;
+    };
     (0, react_use_1.useUpdateEffect)(function () {
         if (show) {
             updatePopover === null || updatePopover === void 0 ? void 0 : updatePopover(current, {
@@ -70,15 +79,25 @@ var usePopover = function (_a) {
             if (endEvent) {
                 targetElement.addEventListener(endEvent, _removePopover);
             }
+            if (handler === 'hoverStay') {
+                targetElement.addEventListener('mouseleave', cancelTimeout);
+            }
         }
         return function () {
             if (targetElement && content) {
+                cancelTimeout();
                 targetElement.removeEventListener(startEvent, _addPopover);
                 if (endEvent) {
                     targetElement.removeEventListener(endEvent, _removePopover);
                 }
+                if (handler === 'hoverStay') {
+                    targetElement.removeEventListener('mouseleave', cancelTimeout);
+                }
             }
         };
+    }, [targetElement, content, current, currentPopover]);
+    (0, react_use_1.useUnmount)(function () {
+        cancelTimeout();
     });
     return current;
 };

package/dist/hooks/usePopover.js.map

@@ -1 +1 @@
-{"version":3,"file":"usePopover.js","sourceRoot":"","sources":["../../src/hooks/usePopover.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"usePopover.js","sourceRoot":"","sources":["../../src/hooks/usePopover.tsx"],"names":[],"mappings":"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"}

package/dist/types/global.d.ts

@@ -72,6 +72,20 @@ export interface IWithReqoreTooltip {
      */
     tooltip?: string | IReqoreTooltip;
 }
+export interface IWithReqoreFlat {
+    /**
+     * If true, the component will be flat
+     * @default false
+     * @type boolean
+     * @memberof IWithReqoreFlat
+     * @example
+     * <ReqoreInput flat />
+     * <ReqoreInput flat={true} />
+     * <ReqoreInput flat={false} />
+     *
+     */
+    flat?: boolean;
+}
 export interface IReqoreTooltip extends IPopoverOptions {
 }
 export declare type TReqoreTooltipProp = string | IReqoreTooltip;

package/dist/types/global.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"global.d.ts","sourceRoot":"","sources":["../../src/types/global.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACvE,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAEtD,MAAM,WAAW,gBAAgB;IAC/B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,eAAe;IAC9B;;;;;;;;;OASG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,eAAe;IAC9B;;;;;;;;;OASG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,aAAa;IAC5B;;;;;;;;;;;;OAYG;IACH,MAAM,CAAC,EAAE,aAAa,CAAC;CACxB;AAED,MAAM,WAAW,sBAAsB;IACrC;;;;;;;;OAQG;IACH,WAAW,CAAC,EAAE,kBAAkB,CAAC;CAClC;AAED,MAAM,WAAW,kBAAkB;IACjC;;;;;;;;;;OAUG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,cAAc,CAAC;CACnC;AAED,MAAM,WAAW,cAAe,SAAQ,eAAe;CAAG;AAC1D,oBAAY,kBAAkB,GAAG,MAAM,GAAG,cAAc,CAAC"}
+{"version":3,"file":"global.d.ts","sourceRoot":"","sources":["../../src/types/global.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACvE,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAEtD,MAAM,WAAW,gBAAgB;IAC/B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,eAAe;IAC9B;;;;;;;;;OASG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,eAAe;IAC9B;;;;;;;;;OASG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,aAAa;IAC5B;;;;;;;;;;;;OAYG;IACH,MAAM,CAAC,EAAE,aAAa,CAAC;CACxB;AAED,MAAM,WAAW,sBAAsB;IACrC;;;;;;;;OAQG;IACH,WAAW,CAAC,EAAE,kBAAkB,CAAC;CAClC;AAED,MAAM,WAAW,kBAAkB;IACjC;;;;;;;;;;OAUG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,cAAc,CAAC;CACnC;AAED,MAAM,WAAW,eAAe;IAC9B;;;;;;;;;;OAUG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED,MAAM,WAAW,cAAe,SAAQ,eAAe;CAAG;AAC1D,oBAAY,kBAAkB,GAAG,MAAM,GAAG,cAAc,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qoretechnologies/reqore",
-  "version": "0.21.0",
+  "version": "0.23.0",
   "description": "ReQore is a highly theme-able and modular UI library for React",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/components/Breadcrumbs/index.tsx

@@ -201,6 +201,7 @@ const ReqoreBreadcrumbs: React.FC<IReqoreBreadcrumbsProps> = ({
               } as IReqoreBreadcrumbItemProps
             }
             handler='hoverStay'
+            delay={500}
             content={
               <ReqoreMenu>
                 {item.map(({ icon, label, as, tooltip, props }) => (

package/src/components/Table/headerCell.tsx

@@ -4,7 +4,7 @@ import styled, { css } from 'styled-components';
 import { IReqoreTableColumn, IReqoreTableSort } from '.';
 import { IReqoreTheme } from '../../constants/theme';
 import { changeLightness, getReadableColor } from '../../helpers/colors';
-import usePopover from '../../hooks/usePopover';
+import { useTooltip } from '../../hooks/useTooltip';
 import ReqoreIcon from '../Icon';
 import { alignToFlex } from './row';
 
@@ -72,7 +72,7 @@ const ReqoreTableHeaderCell = ({
 }: IReqoreTableHeaderCellProps) => {
   const [ref, setRef] = useState(null);
 
-  usePopover({ targetElement: ref, content: tooltip || header });
+  useTooltip(ref, { content: tooltip || header, delay: 300 });
 
   return (
     <StyledTableHeader

package/src/components/Table/index.tsx

@@ -1,13 +1,14 @@
 /* @flow */
 import { size as count } from 'lodash';
 import React, { useState } from 'react';
-import { useUpdateEffect } from 'react-use';
+import { useMeasure, useUpdateEffect } from 'react-use';
 import styled, { css } from 'styled-components';
 import { TABLE_SIZE_TO_PX, TSizes } from '../../constants/sizes';
-import { IReqoreCustomTheme, IReqoreTheme, TReqoreIntent } from '../../constants/theme';
+import { IReqoreTheme, TReqoreIntent } from '../../constants/theme';
 import ReqoreThemeProvider from '../../containers/ThemeProvider';
 import { changeLightness, getReadableColor } from '../../helpers/colors';
 import { useReqoreTheme } from '../../hooks/useTheme';
+import { IReqoreIntent, IWithReqoreCustomTheme, IWithReqoreFlat } from '../../types/global';
 import { IReqoreIconName } from '../../types/icons';
 import ReqoreTableBody from './body';
 import ReqoreTableHeader, { StyledColumnGroupHeader } from './header';
@@ -25,7 +26,7 @@ export type TReqoreTableColumnContent =
   | 'text'
   | `text:${TReqoreIntent}`;
 
-export interface IReqoreTableColumn {
+export interface IReqoreTableColumn extends IReqoreIntent {
   dataId: string;
   header?: string | JSX.Element;
   grow?: 1 | 2 | 3 | 4;
@@ -38,7 +39,6 @@ export interface IReqoreTableColumn {
   icon?: IReqoreIconName;
   iconSize?: string;
   tooltip?: string;
-  intent?: TReqoreIntent;
   cellTooltip?: (data: { [key: string]: any; _selectId?: string }) => string | JSX.Element;
   onCellClick?: (data: { [key: string]: any; _selectId?: string }) => void;
 }
@@ -53,7 +53,11 @@ export interface IReqoreTableRowData {
 export type IReqoreTableRowClick = (data: IReqoreTableRowData) => void;
 export type IReqoreTableData = IReqoreTableRowData[];
 
-export interface IReqoreTableProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface IReqoreTableProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    IReqoreIntent,
+    IWithReqoreFlat,
+    IWithReqoreCustomTheme {
   columns: IReqoreTableColumn[];
   data?: IReqoreTableData;
   className?: string;
@@ -68,16 +72,15 @@ export interface IReqoreTableProps extends React.HTMLAttributes<HTMLDivElement>
   onSelectedChange?: (selected?: any[]) => void;
   selectToggleTooltip?: string;
   onRowClick?: IReqoreTableRowClick;
-  customTheme?: IReqoreCustomTheme;
-  intent?: TReqoreIntent;
   rounded?: boolean;
-  flat?: boolean;
   size?: TSizes;
+  fill?: boolean;
 }
 
 export interface IReqoreTableStyle {
   theme: IReqoreTheme;
   width?: number;
+  fill?: number;
   striped?: boolean;
   selectable?: boolean;
   rounded?: boolean;
@@ -90,8 +93,9 @@ export interface IReqoreTableSort {
 }
 
 const StyledTableWrapper = styled.div<IReqoreTableStyle>`
-  ${({ theme, width, rounded, flat }: IReqoreTableStyle) => css`
+  ${({ theme, width, rounded, flat, fill }: IReqoreTableStyle) => css`
     width: ${width ? `${width}px` : '100%'};
+    height: ${fill ? '100%' : 'auto'};
 
     position: relative;
     clear: both;
@@ -136,6 +140,7 @@ const ReqoreTable = ({
   selectedRowIntent,
   size,
   intent,
+  fill,
   ...rest
 }: IReqoreTableProps) => {
   const [leftScroll, setLeftScroll] = useState<number>(0);
@@ -143,6 +148,7 @@ const ReqoreTable = ({
   const [_sort, setSort] = useState<IReqoreTableSort>(fixSort(sort));
   const [_selected, setSelected] = useState<string[]>([]);
   const [_selectedQuant, setSelectedQuant] = useState<'all' | 'none' | 'some'>('none');
+  const [wrapperRef, sizes] = useMeasure();
   const theme = useReqoreTheme('main', customTheme, intent);
 
   useUpdateEffect(() => {
@@ -228,9 +234,11 @@ const ReqoreTable = ({
     <ReqoreThemeProvider theme={theme}>
       <StyledTableWrapper
         {...rest}
+        fill={fill}
         className={`${className || ''} reqore-table`}
         rounded={rounded}
         width={width}
+        ref={wrapperRef}
       >
         <ReqoreTableHeader
           columns={columns}
@@ -247,7 +255,7 @@ const ReqoreTable = ({
           data={_sort ? sortTableData(_data, _sort) : _data}
           columns={columns}
           setLeftScroll={setLeftScroll}
-          height={height}
+          height={fill ? sizes.height : height}
           selectable={selectable}
           onSelectClick={handleSelectClick}
           onRowClick={onRowClick}

package/src/hooks/usePopover.tsx

@@ -1,6 +1,6 @@
 import { Placement } from '@popperjs/core';
-import { MutableRefObject, useContext, useEffect, useRef } from 'react';
-import { useUpdateEffect } from 'react-use';
+import { MutableRefObject, useContext, useEffect, useMemo, useRef } from 'react';
+import { useUnmount, useUpdateEffect } from 'react-use';
 import shortid from 'shortid';
 import PopoverContext from '../context/PopoverContext';
 
@@ -28,6 +28,7 @@ export interface IPopover {
   useTargetWidth?: boolean;
   closeOnOutsideClick?: boolean;
   closeOnAnyClick?: boolean;
+  delay?: number;
 }
 
 export interface IPopoverOptions extends IPopover {
@@ -44,34 +45,48 @@ const usePopover = ({
   useTargetWidth,
   closeOnOutsideClick = true,
   openOnMount = false,
+  delay,
 }: IPopoverOptions) => {
   const { addPopover, removePopover, updatePopover, popovers } = useContext(PopoverContext);
   const { current }: MutableRefObject<string> = useRef(shortid.generate());
+  let { current: timeout }: MutableRefObject<any> = useRef(0);
 
   const startEvent = startEvents[handler];
   const endEvent = endEvents[handler];
+  const currentPopover = useMemo(
+    () => popovers?.find((p) => p.id === current),
+    [popovers, current]
+  );
 
   const _addPopover = () => {
-    if (popovers?.find((p) => p.id === current)) {
-      removePopover?.(current);
+    if (currentPopover) {
+      _removePopover?.();
     } else if (show) {
-      addPopover?.({
-        id: current,
-        content,
-        targetElement,
-        placement,
-        noArrow,
-        useTargetWidth,
-        closeOnOutsideClick,
-        closeOnAnyClick: handler === 'hover' || handler === 'hoverStay',
-      });
+      timeout = setTimeout(() => {
+        addPopover?.({
+          id: current,
+          content,
+          targetElement,
+          placement,
+          noArrow,
+          useTargetWidth,
+          closeOnOutsideClick,
+          closeOnAnyClick: handler === 'hover' || handler === 'hoverStay',
+        });
+      }, delay || 0);
     }
   };
 
   const _removePopover = () => {
+    cancelTimeout();
     removePopover?.(current);
   };
 
+  const cancelTimeout = () => {
+    clearTimeout(timeout);
+    timeout = null;
+  };
+
   useUpdateEffect(() => {
     if (show) {
       updatePopover?.(current, {
@@ -100,16 +115,30 @@ const usePopover = ({
       if (endEvent) {
         targetElement.addEventListener(endEvent, _removePopover);
       }
+
+      if (handler === 'hoverStay') {
+        targetElement.addEventListener('mouseleave', cancelTimeout);
+      }
     }
 
     return () => {
       if (targetElement && content) {
+        cancelTimeout();
         targetElement.removeEventListener(startEvent, _addPopover);
+
         if (endEvent) {
           targetElement.removeEventListener(endEvent, _removePopover);
         }
+
+        if (handler === 'hoverStay') {
+          targetElement.removeEventListener('mouseleave', cancelTimeout);
+        }
       }
     };
+  }, [targetElement, content, current, currentPopover]);
+
+  useUnmount(() => {
+    cancelTimeout();
   });
 
   return current;