@gravityforms/components 6.4.2 → 6.4.4

package/dist/mappings/admin.js

@@ -21,25 +21,25 @@ module.exports = [
     "externalPath": "components.admin.html.modules"
   },
   {
-    "defaultExport": "Textarea",
+    "defaultExport": "Toggle",
     "namedExports": [
-      "textareaTemplate"
+      "toggleTemplate"
     ],
     "importPath": "html/admin/elements/",
     "externalPath": "components.admin.html.elements"
   },
   {
-    "defaultExport": "Text",
+    "defaultExport": "Textarea",
     "namedExports": [
-      "textTemplate"
+      "textareaTemplate"
     ],
     "importPath": "html/admin/elements/",
     "externalPath": "components.admin.html.elements"
   },
   {
-    "defaultExport": "Toggle",
+    "defaultExport": "Text",
     "namedExports": [
-      "toggleTemplate"
+      "textTemplate"
     ],
     "importPath": "html/admin/elements/",
     "externalPath": "components.admin.html.elements"
@@ -53,17 +53,17 @@ module.exports = [
     "externalPath": "components.admin.html.elements"
   },
   {
-    "defaultExport": "StackedIcon",
+    "defaultExport": "Select",
     "namedExports": [
-      "stackedIconTemplate"
+      "selectTemplate"
     ],
     "importPath": "html/admin/elements/",
     "externalPath": "components.admin.html.elements"
   },
   {
-    "defaultExport": "Select",
+    "defaultExport": "StackedIcon",
     "namedExports": [
-      "selectTemplate"
+      "stackedIconTemplate"
     ],
     "importPath": "html/admin/elements/",
     "externalPath": "components.admin.html.elements"
@@ -306,12 +306,12 @@ module.exports = [
     "externalPath": "components.admin.react.elements"
   },
   {
-    "defaultExport": "Text",
+    "defaultExport": "Textarea",
     "importPath": "react/admin/elements/",
     "externalPath": "components.admin.react.elements"
   },
   {
-    "defaultExport": "Textarea",
+    "defaultExport": "Text",
     "importPath": "react/admin/elements/",
     "externalPath": "components.admin.react.elements"
   },
@@ -345,6 +345,11 @@ module.exports = [
     "importPath": "react/admin/elements/",
     "externalPath": "components.admin.react.elements"
   },
+  {
+    "defaultExport": "Pill",
+    "importPath": "react/admin/elements/",
+    "externalPath": "components.admin.react.elements"
+  },
   {
     "defaultExport": "Link",
     "importPath": "react/admin/elements/",
@@ -366,12 +371,12 @@ module.exports = [
     "externalPath": "components.admin.react.elements"
   },
   {
-    "defaultExport": "Icon",
+    "defaultExport": "HelpText",
     "importPath": "react/admin/elements/",
     "externalPath": "components.admin.react.elements"
   },
   {
-    "defaultExport": "HelpText",
+    "defaultExport": "Icon",
     "importPath": "react/admin/elements/",
     "externalPath": "components.admin.react.elements"
   },
@@ -386,12 +391,12 @@ module.exports = [
     "externalPath": "components.admin.react.elements"
   },
   {
-    "defaultExport": "FileUpload",
+    "defaultExport": "DescriptionList",
     "importPath": "react/admin/elements/",
     "externalPath": "components.admin.react.elements"
   },
   {
-    "defaultExport": "DescriptionList",
+    "defaultExport": "FileUpload",
     "importPath": "react/admin/elements/",
     "externalPath": "components.admin.react.elements"
   },
@@ -405,18 +410,13 @@ module.exports = [
     "importPath": "react/admin/elements/",
     "externalPath": "components.admin.react.elements"
   },
-  {
-    "defaultExport": "Box",
-    "importPath": "react/admin/elements/",
-    "externalPath": "components.admin.react.elements"
-  },
   {
     "defaultExport": "VidyardVideo",
     "importPath": "react/admin/modules/Videos/",
     "externalPath": "components.admin.react.modules"
   },
   {
-    "defaultExport": "Pill",
+    "defaultExport": "Box",
     "importPath": "react/admin/elements/",
     "externalPath": "components.admin.react.elements"
   },
@@ -425,6 +425,14 @@ module.exports = [
     "importPath": "react/admin/modules/Loaders/",
     "externalPath": "components.admin.react.modules"
   },
+  {
+    "__esModule": true,
+    "default": {
+      "defaultExport": "Simple",
+      "importPath": "react/admin/modules/ProgressBar/",
+      "externalPath": "components.admin.react.modules"
+    }
+  },
   {
     "defaultExport": "Placeholder",
     "importPath": "react/admin/modules/Loaders/",
@@ -475,26 +483,18 @@ module.exports = [
     "importPath": "react/admin/modules/Cards/",
     "externalPath": "components.admin.react.modules"
   },
-  {
-    "__esModule": true,
-    "default": {
-      "defaultExport": "Simple",
-      "importPath": "react/admin/modules/ProgressBar/",
-      "externalPath": "components.admin.react.modules"
-    }
-  },
   {
     "defaultExport": "ZohoLogo",
     "importPath": "react/admin/elements/Svgs/",
     "externalPath": "components.admin.react.elements"
   },
   {
-    "defaultExport": "WordPressLogo",
+    "defaultExport": "ZohoFullLogo",
     "importPath": "react/admin/elements/Svgs/",
     "externalPath": "components.admin.react.elements"
   },
   {
-    "defaultExport": "ZohoFullLogo",
+    "defaultExport": "WordPressLogo",
     "importPath": "react/admin/elements/Svgs/",
     "externalPath": "components.admin.react.elements"
   },
@@ -534,17 +534,17 @@ module.exports = [
     "externalPath": "components.admin.react.elements"
   },
   {
-    "defaultExport": "SendGridFullLogo",
+    "defaultExport": "SendGridLogo",
     "importPath": "react/admin/elements/Svgs/",
     "externalPath": "components.admin.react.elements"
   },
   {
-    "defaultExport": "SearchNoResults",
+    "defaultExport": "SendGridFullLogo",
     "importPath": "react/admin/elements/Svgs/",
     "externalPath": "components.admin.react.elements"
   },
   {
-    "defaultExport": "SendGridLogo",
+    "defaultExport": "SearchNoResults",
     "importPath": "react/admin/elements/Svgs/",
     "externalPath": "components.admin.react.elements"
   },
@@ -554,17 +554,17 @@ module.exports = [
     "externalPath": "components.admin.react.elements"
   },
   {
-    "defaultExport": "ResendLogo",
+    "defaultExport": "SMTP2GOFullLogo",
     "importPath": "react/admin/elements/Svgs/",
     "externalPath": "components.admin.react.elements"
   },
   {
-    "defaultExport": "ResendFullLogo",
+    "defaultExport": "ResendLogo",
     "importPath": "react/admin/elements/Svgs/",
     "externalPath": "components.admin.react.elements"
   },
   {
-    "defaultExport": "SMTP2GOFullLogo",
+    "defaultExport": "ResendFullLogo",
     "importPath": "react/admin/elements/Svgs/",
     "externalPath": "components.admin.react.elements"
   },
@@ -678,11 +678,6 @@ module.exports = [
     "importPath": "react/admin/elements/Svgs/",
     "externalPath": "components.admin.react.elements"
   },
-  {
-    "defaultExport": "GravitySMTPTextLogo",
-    "importPath": "react/admin/elements/Svgs/",
-    "externalPath": "components.admin.react.elements"
-  },
   {
     "defaultExport": "GravitySMTPLogo",
     "importPath": "react/admin/elements/Svgs/",
@@ -793,6 +788,11 @@ module.exports = [
     "importPath": "react/admin/elements/Link/",
     "externalPath": "components.admin.react.elements"
   },
+  {
+    "defaultExport": "GravitySMTPTextLogo",
+    "importPath": "react/admin/elements/Svgs/",
+    "externalPath": "components.admin.react.elements"
+  },
   {
     "defaultExport": "BrandedButton",
     "importPath": "react/admin/elements/Button/",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravityforms/components",
-  "version": "6.4.2",
+  "version": "6.4.4",
   "description": "UI components for use in Gravity Forms development. Both React and vanilla js flavors.",
   "author": "Rocketgenius",
   "license": "GPL-2.0-or-later",
@@ -30,9 +30,9 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.26.0",
-    "@gravityforms/components": "^6.4.2",
+    "@gravityforms/components": "^6.4.4",
     "@gravityforms/libraries": "^6.0.0",
-    "@gravityforms/react-utils": "^5.2.0",
+    "@gravityforms/react-utils": "^5.2.1",
     "@gravityforms/request": "^6.1.0",
     "@gravityforms/utils": "^5.0.4",
     "input-format": "0.3.14",

package/react/admin/modules/Calendar/index.js

@@ -197,7 +197,7 @@ const CalendarComponent = forwardRef( ( props, ref ) => {
 
 	const mergedCalendarAttributes = deepMerge( defaultCalendarAttributes, calendarAttributes );
 	const maxDetail = mergedCalendarAttributes.maxDetail || 'month';
-	const trapRef = useFocusTrap( trapFocus && popupOpen );
+	const trapRef = useFocusTrap( trapFocus && popupOpen, { focusTrapId: id } );
 	const needsWrapper = withTrigger || externalControl;
 
 	const {

package/react/admin/modules/ColorPicker/index.js

@@ -1,6 +1,6 @@
 import { React, PropTypes, classnames, HexColorPicker, HexColorInput } from '@gravityforms/libraries';
-import { useFocusTrap, useStateWithDep } from '@gravityforms/react-utils';
-import { spacerClasses, uniqueId } from '@gravityforms/utils';
+import { useFocusTrap, useStateWithDep, useId } from '@gravityforms/react-utils';
+import { spacerClasses } from '@gravityforms/utils';
 import Label from '../../elements/Label';
 import Button from '../../elements/Button';
 import { hexToRGB } from '../../utils/colors';
@@ -57,9 +57,9 @@ const ColorPicker = ( {
 	const [ rgbColor, setRgbColor ] = useState( hexToRGB( value ) );
 	const [ position, setPosition ] = useState( false );
 	const [ coords, setCoords ] = useState( false );
-	const rgbInputIdPrefix = rgbIdPrefix || uniqueId( 'rgb-input-' );
+	const rgbInputIdPrefix = useId( rgbIdPrefix );
 
-	const trapRef = useFocusTrap( trapFocus );
+	const trapRef = useFocusTrap( trapFocus, { focusTrapId: rgbInputIdPrefix } );
 	const selfRef = useRef( null );
 
 	const setRef = useCallback( ( node ) => {

package/react/admin/modules/DataGrid/GridCell.js

@@ -26,8 +26,8 @@ const GridCell = memo( ( {
 		}
 	}, [ data.props, setGridData ] );
 
-	const handleClicks = useCallback( () => {
-		handleGridClicks( data.props );
+	const handleClicks = useCallback( ( event ) => {
+		handleGridClicks( data.props, event );
 	}, [ data.props, handleGridClicks ] );
 
 	const renderNestedFields = ( entries ) => {

package/react/admin/modules/Dialog/index.js

@@ -1,6 +1,6 @@
 import { React, SimpleBar, PropTypes, classnames } from '@gravityforms/libraries';
-import { bodyLock, uniqueId } from '@gravityforms/utils';
-import { ConditionalWrapper, useStateWithDep, useFocusTrap } from '@gravityforms/react-utils';
+import { bodyLock } from '@gravityforms/utils';
+import { ConditionalWrapper, useStateWithDep, useFocusTrap, useId } from '@gravityforms/react-utils';
 import IconIndicator from '../Indicators/IconIndicator';
 import Button from '../../elements/Button';
 
@@ -36,7 +36,7 @@ const { useState, useEffect, useRef, forwardRef } = React;
  * @param {string|Array|object} props.customMaskClasses        Custom classes for the mask as array.
  * @param {string|Array|object} props.customWrapperClasses     Custom classes for the wrapper as array.
  * @param {string|Array|object} props.description              Optional text to show below title.
- * @param {string}              props.id                       The id for the dialog. If not passed auto generated using uniqueId from our utils with a prefix of `dialog`.
+ * @param {string}              props.id                       The id for the dialog. If not passed auto generated using useId from react-utils.
  * @param {boolean}             props.isOpen                   Prop to control whether the dialog is currently open.
  * @param {boolean}             props.lockBody                 Whether to lock the body behind the dialog to prevent interaction or scrolling.
  * @param {boolean}             props.maskBlur                 Whether to blur behind the mask for the dialog.
@@ -159,7 +159,8 @@ const Dialog = forwardRef( ( {
 	const [ animationActive, setAnimationActive ] = useState( false );
 	const [ modalAnimation, setModalAnimation ] = useState( false );
 	const [ dialogActive, setDialogActive ] = useStateWithDep( isOpen );
-	const trapRef = useFocusTrap( dialogActive );
+	const dialogId = useId( id );
+	const trapRef = useFocusTrap( dialogActive, { focusTrapId: dialogId } );
 	const mountedRef = useRef( true );
 
 	useEffect( () => {
@@ -258,7 +259,7 @@ const Dialog = forwardRef( ( {
 	};
 
 	const wrapperProps = {
-		id: id || uniqueId( 'dialog-' ),
+		id: dialogId,
 		className: classnames( {
 			'gform-dialog': true,
 			'gform-dialog--animated': animateModal,

package/react/admin/modules/Droplist/index.js

@@ -58,8 +58,8 @@ const DroplistComponent = forwardRef( ( props, ref ) => { // eslint-disable-line
 		},
 		onOpen,
 	} );
-	const trapRef = useFocusTrap( popupOpen );
 	const id = useIdContext();
+	const trapRef = useFocusTrap( popupOpen, { focusTrapId: id } );
 
 	const depthKeys = Object.keys( selectedState );
 

package/react/admin/modules/Flyout/index.js

@@ -241,6 +241,7 @@ const Flyout = forwardRef( ( {
 		ariaModal: ! flyoutPinned,
 		focusKey,
 		focusSelector: '.gform-flyout__close',
+		focusTrapId: id,
 	} );
 
 	const isRtl = document.documentElement.dir === 'rtl' || getComputedStyle( document.documentElement ).direction === 'rtl';

package/react/admin/modules/Kanban/modules/ActiveFilters.js

@@ -77,13 +77,17 @@ const ActiveFilters = forwardRef( ( {
 				onPillClick( event );
 				setIsLoading( true );
 				onFilterChange( combinedState )
-					.then( () => {
+					.then( ( success ) => {
+						if ( ! success ) {
+							return;
+						}
 						updateModuleState( updatedState );
-						setIsLoading( false );
 					} )
 					.catch( ( error ) => {
-						setIsLoading( false );
 						console.info( error );
+					} )
+					.finally( () => {
+						setIsLoading( false );
 					} );
 			},
 		},
@@ -108,13 +112,17 @@ const ActiveFilters = forwardRef( ( {
 				onResetClick( event );
 				setIsLoading( true );
 				onFilterChange( combinedState )
-					.then( () => {
+					.then( ( success ) => {
+						if ( ! success ) {
+							return;
+						}
 						updateModuleState( updatedState );
-						setIsLoading( false );
 					} )
 					.catch( ( error ) => {
-						setIsLoading( false );
 						console.info( error );
+					} )
+					.finally( () => {
+						setIsLoading( false );
 					} );
 			},
 		},

package/react/admin/modules/Kanban/modules/Search.js

@@ -87,12 +87,19 @@ const Search = forwardRef( ( {
 		const combinedState = { ...moduleState, ...updatedState };
 		setIsLoading( true );
 		onSearch( combinedState )
-			.then( () => {
+			.then( ( success ) => {
+				if ( ! success ) {
+					return;
+				}
+				if ( ! value ) {
+					setSearchValue( '' );
+				}
 				updateModuleState( updatedState );
-				setIsLoading( false );
 			} )
 			.catch( ( error ) => {
 				console.info( error );
+			} )
+			.finally( () => {
 				setIsLoading( false );
 			} );
 	};
@@ -109,9 +116,8 @@ const Search = forwardRef( ( {
 		),
 		customClasses: [ 'gform-kanban__controls-search' ],
 		inputAttributes: {
-			controlled: true,
+			directControlled: true,
 			onClear: () => {
-				setSearchValue( '' );
 				onClear();
 				handleSearch();
 			},

package/react/admin/modules/Kanban/modules/SimpleFilters.js

@@ -75,13 +75,17 @@ const augmentListItem = (
 		const combinedState = { ...moduleState, ...updatedState };
 		setIsLoading( true );
 		onFilterChange( combinedState )
-			.then( () => {
+			.then( ( success ) => {
+				if ( ! success ) {
+					return;
+				}
 				updateModuleState( updatedState );
-				setIsLoading( false );
 			} )
 			.catch( ( error ) => {
-				setIsLoading( false );
 				console.info( error );
+			} )
+			.finally( () => {
+				setIsLoading( false );
 			} );
 	};
 
@@ -181,13 +185,17 @@ const augmentListItems = ( items = [], props = {}, depth = 0 ) => {
 						const combinedState = { ...moduleState, ...updatedState };
 						setIsLoading( true );
 						onFilterChange( combinedState )
-							.then( () => {
+							.then( ( success ) => {
+								if ( ! success ) {
+									return;
+								}
 								updateModuleState( updatedState );
-								setIsLoading( false );
 							} )
 							.catch( ( error ) => {
-								setIsLoading( false );
 								console.info( error );
+							} )
+							.finally( () => {
+								setIsLoading( false );
 							} );
 					},
 				},

package/react/admin/modules/Overlay/index.js

@@ -1,5 +1,5 @@
 import { React, classnames } from '@gravityforms/libraries';
-import { useStateWithDep, useFocusTrap } from '@gravityforms/react-utils';
+import { useStateWithDep, useFocusTrap, useId } from '@gravityforms/react-utils';
 import { getClosest, wait } from '@gravityforms/utils';
 import Button from '../../elements/Button';
 import { ENTER, ESCAPE } from '../../utils/keymap';
@@ -19,6 +19,7 @@ const { useCallback, useState, useEffect, useRef, forwardRef } = React;
  * @param {string|Array|object} props.customClasses             An array of additional classes.
  * @param {boolean}             props.hasConfirm                Whether the overlay has a confirm button.
  * @param {object}              props.i18n                      i18n strings.
+ * @param {string}              props.id                        The id for the overlay. If not passed auto generated using useId from react-utils.
  * @param {Array}               props.ignoreOutsideClickClasses Array of selectors to ignore outside click.
  * @param {boolean}             props.isOpen                    Whether the overlay is open.
  * @param {Function}            props.onCancel                  Callback function when the overlay is canceled.
@@ -61,6 +62,7 @@ const Overlay = forwardRef( ( {
 		cancel: 'Needs i18n',
 		confirm: 'Needs i18n',
 	},
+	id = '',
 	ignoreOutsideClickClasses = [],
 	isOpen = false,
 	onCancel = async () => {},
@@ -80,8 +82,9 @@ const Overlay = forwardRef( ( {
 	const [ animationActive, setAnimationActive ] = useState( false );
 	const [ overlayActive, setOverlayActive ] = useStateWithDep( isOpen );
 	const [ positionAbove, setPositionAbove ] = useState( false );
+	const overlayId = useId( id );
 	const overlayRef = useRef( null );
-	const trapRef = useFocusTrap( overlayActive );
+	const trapRef = useFocusTrap( overlayActive, { focusTrapId: overlayId } );
 	const mountedRef = useRef( true );
 	const debounceTimerRef = useRef( null );