@mgonza02/goal-image-gallery 1.2.3 → 1.2.4

package/CHANGELOG.md

@@ -5,6 +5,11 @@ All notable changes to the GoalImageGallery project will be documented in this f
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.2.4] - 2026-10-12
+
+### Added
+- **Floating Add Button**: Replaced the static '+' grid item with a floating action button (Fab) over the image gallery when `canAdd` is active.
+
 ## [1.2.3] - 2026-10-12
 
 ### Added

package/lib/GoalImageGallery.js

@@ -283,6 +283,7 @@ const GoalImageGallery = _ref => {
     loading,
     removable,
     canSetDefault,
+    canAdd,
     setZoomLevel,
     handleOpenImage,
     handleCloseImage,
@@ -415,6 +416,7 @@ const GoalImageGallery = _ref => {
       onSetAsDefault: handleSetAsDefault,
       onDownloadImage: handleDownloadImage,
       canSetDefault: canSetDefault,
+      canAdd: canAdd,
       defaultImageCode: defaultImageCode
     }), /*#__PURE__*/_jsx(ImageGalleryModal, {
       open: openImage !== null,

package/lib/components/ImageGalleryGrid.js

@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
-import { Grid, Card, CardContent } from '@mui/material';
+import { Grid, Card, CardContent, Fab, Tooltip } from '@mui/material';
+import { Add as AddIcon } from '@mui/icons-material';
 import { useTheme } from '@mui/material/styles';
 import ImageGalleryItem from './ImageGalleryItem';
 import ImageGalleryEmptyState from './ImageGalleryEmptyState';
@@ -8,7 +9,7 @@ import { StyledImageGridContainer } from '../styles/styled-components';
 /**
  * Image grid component for displaying gallery images
  */
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const ImageGalleryGrid = _ref => {
   let {
     imageList,
@@ -28,6 +29,7 @@ const ImageGalleryGrid = _ref => {
     onSetAsDefault,
     onDownloadImage,
     canSetDefault = false,
+    canAdd = false,
     defaultImageCode
   } = _ref;
   const theme = useTheme();
@@ -44,9 +46,12 @@ const ImageGalleryGrid = _ref => {
       })
     });
   }
-  return /*#__PURE__*/_jsx(Card, {
+  return /*#__PURE__*/_jsxs(Card, {
     elevation: 2,
-    children: /*#__PURE__*/_jsx(CardContent, {
+    sx: {
+      position: 'relative'
+    },
+    children: [/*#__PURE__*/_jsx(CardContent, {
       children: /*#__PURE__*/_jsx(StyledImageGridContainer, {
         children: /*#__PURE__*/_jsx(Grid, {
           container: true,
@@ -81,7 +86,22 @@ const ImageGalleryGrid = _ref => {
           }, image.id))
         })
       })
-    })
+    }), canAdd && /*#__PURE__*/_jsx(Tooltip, {
+      title: "Agregar imagen",
+      children: /*#__PURE__*/_jsx(Fab, {
+        color: "primary",
+        size: "small",
+        "aria-label": "Agregar imagen",
+        onClick: () => onImageSelect(null),
+        sx: {
+          position: 'absolute',
+          bottom: 16,
+          right: 16,
+          zIndex: 3
+        },
+        children: /*#__PURE__*/_jsx(AddIcon, {})
+      })
+    })]
   });
 };
 ImageGalleryGrid.propTypes = {
@@ -102,6 +122,7 @@ ImageGalleryGrid.propTypes = {
   onSetAsDefault: PropTypes.func,
   onDownloadImage: PropTypes.func.isRequired,
   canSetDefault: PropTypes.bool,
+  canAdd: PropTypes.bool,
   defaultImageCode: PropTypes.string
 };
 export default ImageGalleryGrid;

package/lib/hooks/use-image-gallery.js

@@ -32,6 +32,7 @@ export const useImageGallery = _ref => {
   const [loading, setLoading] = useState(false);
   const [removable, setRemovable] = useState(false);
   const [canSetDefault, setCanSetDefault] = useState(false);
+  const [canAdd, setCanAdd] = useState(false);
 
   // Process image codes into image list
   useEffect(() => {
@@ -53,12 +54,7 @@ export const useImageGallery = _ref => {
     const canRemoveMore = imageCount > minItems;
     setRemovable(!!(updatable && allowDelete && imageCount > 0 && canRemoveMore));
     const atMaxItems = maxItems != null && imageCount >= maxItems;
-    if (updatable && multiple && !atMaxItems) {
-      newList.push({
-        image_code: '+',
-        id: newList.length
-      });
-    }
+    setCanAdd(!!(updatable && multiple && !atMaxItems));
     setCanSetDefault(!!(multiple && imageCount >= 2 && onSetAsDefault));
     setImageList(newList);
   }, [imageCodes, canEdit, multiple, updatable, maxItems, allowDelete, minItems, onSetAsDefault]);
@@ -228,6 +224,7 @@ export const useImageGallery = _ref => {
     loading,
     removable,
     canSetDefault,
+    canAdd,
     setZoomLevel,
     handleOpenImage,
     handleCloseImage,

package/lib/index.d.ts

@@ -93,6 +93,7 @@ export interface UseImageGalleryReturn {
   loading: boolean;
   removable: boolean;
   canSetDefault: boolean;
+  canAdd: boolean;
   setZoomLevel: (level: number) => void;
   handleOpenImage: (imageUrl: string, index?: number) => void;
   handleCloseImage: () => void;
@@ -137,6 +138,7 @@ export interface ImageGalleryGridProps {
   onSetAsDefault?: (image: ImageItem) => void;
   onDownloadImage: (imageCode: string) => void;
   canSetDefault?: boolean;
+  canAdd?: boolean;
   defaultImageCode?: string;
 }
 

package/lib/index.js

@@ -120,8 +120,12 @@ export const CONFIG = {
 };
 
 // Export version info
-export const VERSION = '1.2.3';
+export const VERSION = '1.2.4';
 export const CHANGELOG = [{
+  version: '1.2.4',
+  date: '2026-10-12',
+  changes: ['Replaced grid add placeholder tile with a floating action button over the image gallery when canAdd is true']
+}, {
   version: '1.2.3',
   date: '2026-10-12',
   changes: ['Added defaultImageCode, onSetAsDefault, onDelete, onUpdate, and onAdd lifecycle callbacks', 'Set-as-default control shown only when multiple is true and there are at least two images']

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mgonza02/goal-image-gallery",
-  "version": "1.2.3",
+  "version": "1.2.4",
   "description": "Advanced, accessible, and highly customizable React image gallery component with multi-method upload, responsive design, and extensive TypeScript support",
   "main": "lib/index.js",
   "module": "lib/index.js",