@loja-integrada/admin-components 0.9.2 → 0.9.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@loja-integrada/admin-components",
-  "version": "0.9.2",
+  "version": "0.9.3",
   "author": "Loja Integrada Front-End Team",
   "license": "MIT",
   "main": "dist/index.js",

package/src/Layout/ActionBar/ActionBar.stories.tsx

@@ -6,10 +6,10 @@ import { Button } from '../../Components/Button'
 
 export default {
   component: ActionBar,
-  title: 'Layout/ActionBar'
+  title: 'Layout/ActionBar',
 } as Meta
 
-const Template: Story<ActionBarProps> = args => <ActionBar {...args} />
+const Template: Story<ActionBarProps> = (args) => <ActionBar {...args} />
 
 export const Default = Template.bind({})
 Default.args = {
@@ -20,8 +20,8 @@ Default.args = {
     <Button variant="primary" icon="checkCircle" onClick={() => {}}>
       <span className="hidden lg:block">Criar novo registro</span>
       <span className="block lg:hidden">Criar</span>
-    </Button>
-  ]
+    </Button>,
+  ],
 }
 
 export const OnlyMobile = Template.bind({})
@@ -34,8 +34,9 @@ OnlyMobile.args = {
     <Button icon="checkCircle" onClick={() => {}}>
       Ativar
     </Button>,
+    <></>,
     <Button icon="ban" onClick={() => {}}>
       Inativar
-    </Button>
-  ]
-}
+    </Button>,
+  ],
+}

package/src/Layout/ActionBar/ActionBar.tsx

@@ -50,22 +50,25 @@ const ActionBarComponent = ({ onlyMobile, children }: ActionBarProps) => {
           </div>
         )}
         <div className="lg:hidden">
-          {React.Children.map(children, ({ props }) => (
-            <button
-              className={
-                'px-4 py-1 text-base-1' +
-                (props?.loading ? ' pointer-events-none' : '')
-              }
-              onClick={props?.onClick}
-            >
-              {props?.loading ? (
-                <Icon icon="loading" className="p-px" />
-              ) : (
-                props?.icon && <Icon icon={props?.icon} className="p-px" />
-              )}
-              <span className="block text-f8">{props.children}</span>
-            </button>
-          ))}
+          {React.Children.map(children, ({ props }) => {
+            if (!props.children) return
+            return (
+              <button
+                className={
+                  'px-4 py-1 text-base-1' +
+                  (props?.loading ? ' pointer-events-none' : '')
+                }
+                onClick={props?.onClick}
+              >
+                {props?.loading ? (
+                  <Icon icon="loading" className="p-px" />
+                ) : (
+                  props?.icon && <Icon icon={props?.icon} className="p-px" />
+                )}
+                <span className="block text-f8">{props.children}</span>
+              </button>
+            )
+          })}
         </div>
       </div>
     </div>