@qoretechnologies/reqore 0.34.0 → 0.34.1

package/src/components/Panel/index.tsx

@@ -372,9 +372,10 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
     );
 
     const renderResponsiveActions = useCallback(
-      (action: IReqorePanelAction, index: number) => {
-        return renderActions(action, index, true);
-      },
+      (align: 'flex-start' | 'center' | 'flex-end' = 'flex-end') =>
+        (action: IReqorePanelAction, index: number) => {
+          return renderActions(action, index, true, align);
+        },
       [actions]
     );
 
@@ -391,14 +392,20 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
     );
 
     const renderNonResponsiveActions = useCallback(
-      (action: IReqorePanelAction, index: number) => {
-        return renderActions(action, index, false);
-      },
+      (align: 'flex-start' | 'center' | 'flex-end' = 'flex-end') =>
+        (action: IReqorePanelAction, index: number) => {
+          return renderActions(action, index, false, align);
+        },
       [actions]
     );
 
     const renderActions = useCallback(
-      (action: IReqorePanelAction, index: number, includeResponsive) => {
+      (
+        action: IReqorePanelAction,
+        index: number,
+        includeResponsive,
+        align: 'flex-start' | 'center' | 'flex-end' = 'flex-end'
+      ) => {
         if (
           action.show === false ||
           (includeResponsive && action.responsive === false) ||
@@ -429,6 +436,7 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
               fixed={rest.fixed}
               fluid={rest.fluid}
               key={index}
+              horizontalAlign={align}
             >
               {group.map((action, index) => renderActions(action, index, true))}
             </ReqoreControlGroup>
@@ -598,18 +606,18 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
                 customTheme={theme}
                 size={panelSize}
               >
-                {actions.map(renderResponsiveActions)}
+                {actions.map(renderResponsiveActions())}
               </ReqoreControlGroup>
             )}
             {collapsible || onClose || hasNonResponsiveActions(actions) ? (
               <>
                 <ReqoreControlGroup
-                  fixed={!isMobile}
-                  fluid={isMobile}
+                  fixed={isMobile ? false : hasResponsiveActions(actions)}
+                  fluid={isMobile ? true : !hasResponsiveActions(actions)}
                   horizontalAlign='flex-end'
                   size={panelSize}
                 >
-                  {actions.map(renderNonResponsiveActions)}
+                  {actions.map(renderNonResponsiveActions())}
                   {collapsible && (
                     <ReqoreButton
                       customTheme={theme}
@@ -662,7 +670,7 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
           >
             {hasNonResponsiveActions(leftBottomActions) ? (
               <ReqoreControlGroup size={panelSize}>
-                {leftBottomActions.map(renderNonResponsiveActions)}
+                {leftBottomActions.map(renderNonResponsiveActions('flex-start'))}
               </ReqoreControlGroup>
             ) : null}
             {hasResponsiveActions(leftBottomActions) && (
@@ -672,7 +680,7 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
                 customTheme={theme}
                 size={panelSize}
               >
-                {leftBottomActions.map(renderResponsiveActions)}
+                {leftBottomActions.map(renderResponsiveActions('flex-start'))}
               </ReqoreControlGroup>
             )}
             {hasResponsiveActions(rightBottomActions) && (
@@ -683,12 +691,12 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
                 customTheme={theme}
                 size={panelSize}
               >
-                {rightBottomActions.map(renderResponsiveActions)}
+                {rightBottomActions.map(renderResponsiveActions())}
               </ReqoreControlGroup>
             )}
             {hasNonResponsiveActions(rightBottomActions) ? (
               <ReqoreControlGroup horizontalAlign='flex-end' size={panelSize}>
-                {rightBottomActions.map(renderNonResponsiveActions)}
+                {rightBottomActions.map(renderNonResponsiveActions())}
               </ReqoreControlGroup>
             ) : null}
           </StyledPanelBottomActions>

package/src/stories/Collection/Collection.stories.tsx

@@ -143,6 +143,7 @@ CustomPropsAndTexts.args = {
 export const ChildrenBeforeAndAfter = Template.bind({});
 ChildrenBeforeAndAfter.args = {
   label: 'Collection of items',
+  padded: false,
   items,
   contentRenderer: (children) => (
     <>
@@ -191,7 +192,6 @@ FilteringSearchingPaging.args = {
   paging: 'buttons',
   size: 'big',
   padded: false,
-  fill: true,
   items: bigCollection,
 } as IReqoreCollectionProps;
 
@@ -205,11 +205,13 @@ CustomFilteringSearchingPaging.args = {
     },
   },
   paging: {
-    itemsPerPage: 25,
+    itemsPerPage: 55,
     scrollToTopOnPageChange: true,
   },
+  inputInTitle: false,
+  responsiveTitle: true,
   size: 'small',
   padded: false,
-  height: '300px',
-  items: bigCollection,
+  fill: true,
+  items: [...bigCollection, ...bigCollection, ...bigCollection, ...bigCollection, ...bigCollection],
 } as IReqoreCollectionProps;

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

@@ -3,7 +3,7 @@ import { noop } from 'lodash';
 import ReqoreInput, { IReqoreInputProps } from '../../components/Input';
 import { IReqorePanelAction, IReqorePanelProps, ReqorePanel } from '../../components/Panel';
 import { ReqoreVerticalSpacer } from '../../components/Spacer';
-import { argManager, FlatArg, IconArg, IntentArg, SizeArg } from '../utils/args';
+import { FlatArg, IconArg, IntentArg, SizeArg, argManager } from '../utils/args';
 
 const { createArg } = argManager<IReqorePanelProps>();
 
@@ -356,6 +356,23 @@ NoActions.args = {
     'This is a really long title that should stretch all the way to the right of the panel, all the way to the end and not end in the middle',
 };
 
+export const NoLabel: Story<IReqorePanelProps> = Template.bind({});
+NoLabel.args = {
+  collapsible: false,
+  actions: [
+    {
+      responsive: false,
+      group: [
+        { label: 'Stacked Action 1', icon: 'BallPenLine', intent: 'warning' },
+        { icon: 'CopperCoinFill', intent: 'danger' },
+      ],
+    },
+  ],
+  label: undefined,
+  icon: undefined,
+  badge: undefined,
+};
+
 export const ImageAsIcon: Story<IReqorePanelProps> = Template.bind({});
 ImageAsIcon.args = {
   iconImage: