@qoretechnologies/reqore 0.37.3 → 0.37.5

package/src/components/KeyValueTable/index.tsx

@@ -1,7 +1,8 @@
-import { keys } from 'lodash';
+import { keys, size } from 'lodash';
 import { useMemo } from 'react';
-import { SIZE_TO_PX } from '../../constants/sizes';
+import { TABLE_SIZE_TO_PX } from '../../constants/sizes';
 import { TReqoreIntent } from '../../constants/theme';
+import { IReqoreTooltip } from '../../types/global';
 import { IReqoreIconName } from '../../types/icons';
 import { IReqoreButtonProps } from '../Button';
 import { IReqoreExportModalProps } from '../ExportModal';
@@ -45,16 +46,21 @@ export interface IReqoreKeyValueTableProps
 
   keyLabel?: string;
   keyIcon?: IReqoreIconName;
+  keyTooltip?: (key: string | number) => string | IReqoreTooltip;
   keyColumnIntent?: TReqoreIntent;
   keyAlign?: IReqoreTableColumn['align'];
   maxKeyWidth?: number;
 
   sortable?: boolean;
 
-  rowActions?: (key: string, value: TReqoreKeyValueTableValue) => IReqoreButtonProps[];
+  rowActions?: (
+    key: string,
+    value: TReqoreKeyValueTableValue
+  ) => Omit<IReqoreButtonProps, 'rightIcon' | 'label' | 'children'>[];
 
   valueLabel?: string;
   valueIcon?: IReqoreIconName;
+  valueTooltip?: (value: TReqoreKeyValueTableValue) => string | IReqoreTooltip;
   valueAlign?: IReqoreTableColumn['align'];
   minValueWidth?: number;
   defaultValueFilter?: string | number;
@@ -74,8 +80,10 @@ export const ReqoreKeyValueTable = ({
   keyLabel,
   keyIcon,
   keyRenderer,
+  keyTooltip,
   valueLabel,
   valueIcon,
+  valueTooltip,
   valueRenderer,
   keyColumnIntent,
   minValueWidth = 100,
@@ -106,6 +114,7 @@ export const ReqoreKeyValueTable = ({
         },
 
         cell: {
+          tooltip: keyTooltip ? (cellValue) => keyTooltip(cellValue) : undefined,
           content: keyRenderer ? ({ tableKey }) => keyRenderer(tableKey) : 'title',
         },
       },
@@ -126,12 +135,7 @@ export const ReqoreKeyValueTable = ({
         },
 
         cell: {
-          tooltip: (value) => ({
-            content: JSON.stringify(value),
-            noArrow: true,
-            useTargetWidth: true,
-            delay: 400,
-          }),
+          tooltip: valueTooltip ? (cellValue) => valueTooltip(cellValue) : undefined,
           content: (data) =>
             valueRenderer?.(data, ReqoreTableValue) || <ReqoreTableValue value={data.value} />,
         },
@@ -146,7 +150,7 @@ export const ReqoreKeyValueTable = ({
         header: {
           icon: 'SettingsLine',
         },
-        width: SIZE_TO_PX[rest.size || 'normal'] * 2,
+        width: size(rowActions('noop', 'noop')) * TABLE_SIZE_TO_PX[rest.size || 'normal'],
         align: 'center',
         cell: {
           padded: 'none',

package/src/components/Panel/index.tsx

@@ -122,6 +122,7 @@ export interface IReqorePanelProps
   getContentRef?: (ref: HTMLDivElement) => any;
 
   headerProps?: React.HTMLAttributes<unknown>;
+  showHeaderTooltip?: boolean;
 }
 
 export interface IStyledPanel extends IReqorePanelProps {
@@ -357,6 +358,7 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
       disabled,
       breadcrumbs,
       showActionsWhenCollapsed = true,
+      showHeaderTooltip,
       ...rest
     }: IReqorePanelProps,
     ref
@@ -698,7 +700,7 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
                           noWrap: true,
                           ...headerEffect,
                         }}
-                        tooltip={label}
+                        tooltip={showHeaderTooltip ? label : undefined}
                       >
                         {label}
                       </ReqoreHeading>
@@ -787,7 +789,7 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
             noHorizontalPadding={noHorizontalPadding}
           >
             {hasNonResponsiveActions(leftBottomActions) ? (
-              <ReqoreControlGroup size={panelSize}>
+              <ReqoreControlGroup size={panelSize} style={{ marginRight: 'auto' }}>
                 {leftBottomActions.map(renderNonResponsiveActions('flex-start'))}
               </ReqoreControlGroup>
             ) : null}
@@ -797,6 +799,7 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
                 responsive={responsiveActions}
                 customTheme={theme}
                 size={panelSize}
+                style={{ marginRight: 'auto' }}
               >
                 {leftBottomActions.map(renderResponsiveActions('flex-start'))}
               </ReqoreControlGroup>
@@ -807,13 +810,18 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
                 horizontalAlign='flex-end'
                 responsive={responsiveActions}
                 customTheme={theme}
+                style={{ marginLeft: 'auto' }}
                 size={panelSize}
               >
                 {rightBottomActions.map(renderResponsiveActions())}
               </ReqoreControlGroup>
             )}
             {hasNonResponsiveActions(rightBottomActions) ? (
-              <ReqoreControlGroup horizontalAlign='flex-end' size={panelSize}>
+              <ReqoreControlGroup
+                horizontalAlign='flex-end'
+                size={panelSize}
+                style={{ marginLeft: 'auto' }}
+              >
                 {rightBottomActions.map(renderNonResponsiveActions())}
               </ReqoreControlGroup>
             ) : null}

package/src/components/Table/index.tsx

@@ -88,7 +88,9 @@ export interface IReqoreTableColumn extends IReqoreIntent {
     onClick?: (cellValue: any) => void;
     tooltip?: (cellValue: any) => string | IReqoreTooltip;
     content?: TReqoreTableColumnContent;
-    actions?: (data: IReqoreTableRowData) => IReqoreButtonProps[];
+    actions?: (
+      data: IReqoreTableRowData
+    ) => Omit<IReqoreButtonProps, 'children' | 'label' | 'rightIcon'>[];
     intent?: TReqoreIntent;
     padded?: 'both' | 'horizontal' | 'vertical' | 'none';
   };

package/src/hooks/usePopover.tsx

@@ -5,6 +5,7 @@ import shortid from 'shortid';
 import { useContext } from 'use-context-selector';
 import { useReqoreProperty } from '..';
 import { IPopoverData } from '../containers/PopoverProvider';
+import { IReqoreOptions } from '../containers/UIProvider';
 import PopoverContext from '../context/PopoverContext';
 import {
   IReqoreIntent,
@@ -58,6 +59,7 @@ export interface IPopover
   icon?: IReqoreIconName;
   title?: string;
   updater?: string | number;
+  uiScale?: IReqoreOptions['uiScale'];
 }
 
 export interface IPopoverOptions extends IPopover {

package/src/stories/KeyValueTable/KeyValueTable.stories.tsx

@@ -5,6 +5,7 @@ import ReqoreIcon from '../../components/Icon';
 import { IReqoreKeyValueTableProps, ReqoreKeyValueTable } from '../../components/KeyValueTable';
 import { IReqoreTableRowData, TReqoreTableColumnContent } from '../../components/Table';
 import { TReqorePaginationType } from '../../constants/paging';
+import { sleep } from '../../helpers/utils';
 import { Exportable as ExportableTable } from '../Table/Table.stories';
 import { StoryMeta } from '../utils';
 import { CustomIntentArg, FlatArg, IntentArg, SizeArg, argManager } from '../utils/args';
@@ -178,6 +179,9 @@ export const AllFiltersActive: Story = {
 export const WithActions: Story = {
   args: {
     rowActions: () => [
+      {
+        icon: 'InformationLine',
+      },
       {
         icon: 'EditLine',
       },
@@ -231,6 +235,34 @@ export const DefaultPaging: Story = {
   },
 };
 
+export const KeyTooltip: Story = {
+  args: {
+    keyTooltip: (key) => `Tooltip for ${key}`,
+  },
+  play: async () => {
+    await sleep(500);
+
+    await fireEvent.mouseEnter(document.querySelector('.reqore-table-cell'));
+  },
+};
+
+export const ValueTooltip: Story = {
+  args: {
+    valueTooltip: (value) => ({
+      content: `${JSON.stringify(value || 'No value')}`,
+      noArrow: true,
+      blur: true,
+      flat: false,
+      placement: 'top',
+    }),
+  },
+  play: async () => {
+    await sleep(500);
+
+    await fireEvent.mouseEnter(document.querySelectorAll('.reqore-table-cell')[23]);
+  },
+};
+
 export const CustomColumnWidths: Story = {
   args: {
     minValueWidth: 500,

package/src/stories/Panel/Panel.stories.tsx

@@ -11,6 +11,9 @@ import { FlatArg, IconArg, IntentArg, SizeArg, argManager } from '../utils/args'
 
 const { createArg } = argManager<IReqorePanelProps>();
 
+const message =
+  'Shadowlands has mechanisms put in place for allowing players to catch up on Renown, the system of gaining favor and unlocking rewards, Campaign chapters, and soulbinds within your Covenant. This system works for main characters who have started late, for alts, for players who have switched Covenants and are starting over, and for players who have simply missed weekly quests for earning Renown due to being away from the game. I am a message a very long message - Shadowlands has mechanisms put in place for allowing players to catch up on Renown, the system of gaining favor and unlocking rewards, Campaign chapters, and soulbinds within your Covenant. This system works for main characters who have started late, for alts, for players who have switched Covenants and are starting over, and for players who have simply missed weekly quests for earning Renown due to being away from the game. I am a message a very long message - Shadowlands has mechanisms put in place for allowing players to catch up on Renown, the system of gaining favor and unlocking rewards, Campaign chapters, and soulbinds within your Covenant. This system works for main characters who have started late, for alts, for players who have switched Covenants and are starting over, and for players who have simply missed weekly quests for earning Renown due to being away from the game. I am a message a very long message - Shadowlands has mechanisms put in place for allowing players to catch up on Renown, the system of gaining favor and unlocking rewards, Campaign chapters, and soulbinds within your Covenant. This system works for main characters who have started late, for alts, for players who have switched Covenants and are starting over, and for players who have simply missed weekly quests for earning Renown due to being away from the game. I am a message a very long message - Shadowlands has mechanisms put in place for allowing players to catch up on Renown, the system of gaining favor and unlocking rewards, Campaign chapters, and soulbinds within your Covenant. This system works for main characters who have started late, for alts, for players who have switched Covenants and are starting over, and for players who have simply missed weekly quests for earning Renown due to being away from the game. I am a message a very long message - Shadowlands has mechanisms put in place for allowing players to catch up on Renown, the system of gaining favor and unlocking rewards, Campaign chapters, and soulbinds within your Covenant. This system works for main characters who have started late, for alts, for players who have switched Covenants and are starting over, and for players who have simply missed weekly quests for earning Renown due to being away from the game.';
+
 const meta = {
   title: 'Layout/Panel/Stories',
   component: ReqorePanel,
@@ -270,31 +273,7 @@ const Template: StoryFn<IReqorePanelProps> = (args: IReqorePanelProps) => {
       ]}
       {...args}
     >
-      Shadowlands has mechanisms put in place for allowing players to catch up on Renown, the system
-      of gaining favor and unlocking rewards, Campaign chapters, and soulbinds within your Covenant.
-      This system works for main characters who have started late, for alts, for players who have
-      switched Covenants and are starting over, and for players who have simply missed weekly quests
-      for earning Renown due to being away from the game. I am a message a very long message -
-      Shadowlands has mechanisms put in place for allowing players to catch up on Renown, the system
-      of gaining favor and unlocking rewards, Campaign chapters, and soulbinds within your Covenant.
-      This system works for main characters who have started late, for alts, for players who have
-      switched Covenants and are starting over, and for players who have simply missed weekly quests
-      for earning Renown due to being away from the game. I am a message a very long message -
-      Shadowlands has mechanisms put in place for allowing players to catch up on Renown, the system
-      of gaining favor and unlocking rewards, Campaign chapters, and soulbinds within your Covenant.
-      This system works for main characters who have started late, for alts, for players who have
-      switched Covenants and are starting over, and for players who have simply missed weekly quests
-      for earning Renown due to being away from the game. I am a message a very long message -
-      Shadowlands has mechanisms put in place for allowing players to catch up on Renown, the system
-      of gaining favor and unlocking rewards, Campaign chapters, and soulbinds within your Covenant.
-      This system works for main characters who have started late, for alts, for players who have
-      switched Covenants and are starting over, and for players who have simply missed weekly quests
-      for earning Renown due to being away from the game. I am a message a very long message -
-      Shadowlands has mechanisms put in place for allowing players to catch up on Renown, the system
-      of gaining favor and unlocking rewards, Campaign chapters, and soulbinds within your Covenant.
-      This system works for main characters who have started late, for alts, for players who have
-      switched Covenants and are starting over, and for players who have simply missed weekly quests
-      for earning Renown due to being away from the game.
+      {args.children || message}
     </ReqorePanel>
   );
 };
@@ -426,11 +405,12 @@ export const ActionsShownOnHover: Story = {
   render: Template,
 
   args: {
-    label: undefined,
+    style: { minWidth: 400, maxWidth: 600 },
+    label: 'This is a simple test to',
     collapsible: false,
-    icon: undefined,
-    badge: undefined,
+    responsiveActions: false,
     actions: [{ label: 'test', show: 'hover' }],
+    children: 'This is a panel',
     bottomActions: [
       {
         position: 'right',

package/src/stories/utils.ts

@@ -28,6 +28,7 @@ export type AdditionalStorybookArgs = IReqoreUIProviderProps & {
   insideModal?: boolean;
   animatedButtons?: IReqoreUIProviderProps['options']['animations']['buttons'];
   animatedDialogs?: IReqoreUIProviderProps['options']['animations']['dialogs'];
+  globalUiScale?: IReqoreUIProviderProps['options']['uiScale'];
 };
 
 export type StoryMeta<