@gravityforms/components 6.2.0 → 6.2.2

package/dist/mappings/admin.js

@@ -20,14 +20,6 @@ module.exports = [
     "importPath": "html/admin/modules/",
     "externalPath": "components.admin.html.modules"
   },
-  {
-    "defaultExport": "Textarea",
-    "namedExports": [
-      "textareaTemplate"
-    ],
-    "importPath": "html/admin/elements/",
-    "externalPath": "components.admin.html.elements"
-  },
   {
     "defaultExport": "Text",
     "namedExports": [
@@ -36,14 +28,6 @@ module.exports = [
     "importPath": "html/admin/elements/",
     "externalPath": "components.admin.html.elements"
   },
-  {
-    "defaultExport": "Toggle",
-    "namedExports": [
-      "toggleTemplate"
-    ],
-    "importPath": "html/admin/elements/",
-    "externalPath": "components.admin.html.elements"
-  },
   {
     "defaultExport": "StatusIndicator",
     "namedExports": [
@@ -108,6 +92,22 @@ module.exports = [
     "importPath": "html/admin/elements/",
     "externalPath": "components.admin.html.elements"
   },
+  {
+    "defaultExport": "Textarea",
+    "namedExports": [
+      "textareaTemplate"
+    ],
+    "importPath": "html/admin/elements/",
+    "externalPath": "components.admin.html.elements"
+  },
+  {
+    "defaultExport": "Toggle",
+    "namedExports": [
+      "toggleTemplate"
+    ],
+    "importPath": "html/admin/elements/",
+    "externalPath": "components.admin.html.elements"
+  },
   {
     "defaultExport": "Heading",
     "namedExports": [
@@ -181,12 +181,12 @@ module.exports = [
     "externalPath": "components.admin.react.modules"
   },
   {
-    "defaultExport": "Pagination",
+    "defaultExport": "Phone",
     "importPath": "react/admin/modules/",
     "externalPath": "components.admin.react.modules"
   },
   {
-    "defaultExport": "Phone",
+    "defaultExport": "Pagination",
     "importPath": "react/admin/modules/",
     "externalPath": "components.admin.react.modules"
   },
@@ -255,6 +255,11 @@ module.exports = [
     "importPath": "react/admin/modules/",
     "externalPath": "components.admin.react.modules"
   },
+  {
+    "defaultExport": "DataGrid",
+    "importPath": "react/admin/modules/",
+    "externalPath": "components.admin.react.modules"
+  },
   {
     "defaultExport": "ColorPicker",
     "importPath": "react/admin/modules/",
@@ -285,18 +290,13 @@ module.exports = [
     "importPath": "react/admin/modules/",
     "externalPath": "components.admin.react.modules"
   },
-  {
-    "defaultExport": "Alert",
-    "importPath": "react/admin/modules/",
-    "externalPath": "components.admin.react.modules"
-  },
   {
     "defaultExport": "Address",
     "importPath": "react/admin/modules/",
     "externalPath": "components.admin.react.modules"
   },
   {
-    "defaultExport": "DataGrid",
+    "defaultExport": "Alert",
     "importPath": "react/admin/modules/",
     "externalPath": "components.admin.react.modules"
   },
@@ -336,7 +336,7 @@ module.exports = [
     "externalPath": "components.admin.react.elements"
   },
   {
-    "defaultExport": "Radio",
+    "defaultExport": "Pill",
     "importPath": "react/admin/elements/",
     "externalPath": "components.admin.react.elements"
   },
@@ -346,7 +346,7 @@ module.exports = [
     "externalPath": "components.admin.react.elements"
   },
   {
-    "defaultExport": "Pill",
+    "defaultExport": "Radio",
     "importPath": "react/admin/elements/",
     "externalPath": "components.admin.react.elements"
   },
@@ -438,6 +438,16 @@ module.exports = [
     "importPath": "react/admin/modules/Loaders/",
     "externalPath": "components.admin.react.modules"
   },
+  {
+    "defaultExport": "RightSidebar",
+    "importPath": "react/admin/modules/Layouts/",
+    "externalPath": "components.admin.react.modules"
+  },
+  {
+    "defaultExport": "ModularSidebar",
+    "importPath": "react/admin/modules/Layouts/",
+    "externalPath": "components.admin.react.modules"
+  },
   {
     "defaultExport": "IconIndicator",
     "importPath": "react/admin/modules/Indicators/",
@@ -473,16 +483,6 @@ module.exports = [
     "importPath": "react/admin/modules/Cards/",
     "externalPath": "components.admin.react.modules"
   },
-  {
-    "defaultExport": "ModularSidebar",
-    "importPath": "react/admin/modules/Layouts/",
-    "externalPath": "components.admin.react.modules"
-  },
-  {
-    "defaultExport": "RightSidebar",
-    "importPath": "react/admin/modules/Layouts/",
-    "externalPath": "components.admin.react.modules"
-  },
   {
     "defaultExport": "ZohoLogo",
     "importPath": "react/admin/elements/Svgs/",
@@ -493,6 +493,11 @@ module.exports = [
     "importPath": "react/admin/elements/Svgs/",
     "externalPath": "components.admin.react.elements"
   },
+  {
+    "defaultExport": "WordPressLogo",
+    "importPath": "react/admin/elements/Svgs/",
+    "externalPath": "components.admin.react.elements"
+  },
   {
     "defaultExport": "WhatsAppLogo",
     "importPath": "react/admin/elements/Svgs/",
@@ -509,12 +514,12 @@ module.exports = [
     "externalPath": "components.admin.react.elements"
   },
   {
-    "defaultExport": "WordPressLogo",
+    "defaultExport": "SparkPostLogo",
     "importPath": "react/admin/elements/Svgs/",
     "externalPath": "components.admin.react.elements"
   },
   {
-    "defaultExport": "SparkPostLogo",
+    "defaultExport": "TelegramLogo",
     "importPath": "react/admin/elements/Svgs/",
     "externalPath": "components.admin.react.elements"
   },
@@ -524,12 +529,12 @@ module.exports = [
     "externalPath": "components.admin.react.elements"
   },
   {
-    "defaultExport": "SlackLogo",
+    "defaultExport": "SendGridLogo",
     "importPath": "react/admin/elements/Svgs/",
     "externalPath": "components.admin.react.elements"
   },
   {
-    "defaultExport": "SendGridLogo",
+    "defaultExport": "SlackLogo",
     "importPath": "react/admin/elements/Svgs/",
     "externalPath": "components.admin.react.elements"
   },
@@ -599,12 +604,12 @@ module.exports = [
     "externalPath": "components.admin.react.elements"
   },
   {
-    "defaultExport": "MicrosoftAltLogo",
+    "defaultExport": "MandrillLogo",
     "importPath": "react/admin/elements/Svgs/",
     "externalPath": "components.admin.react.elements"
   },
   {
-    "defaultExport": "MandrillLogo",
+    "defaultExport": "MicrosoftAltLogo",
     "importPath": "react/admin/elements/Svgs/",
     "externalPath": "components.admin.react.elements"
   },
@@ -619,12 +624,12 @@ module.exports = [
     "externalPath": "components.admin.react.elements"
   },
   {
-    "defaultExport": "MailgunLogo",
+    "defaultExport": "MailgunFullLogo",
     "importPath": "react/admin/elements/Svgs/",
     "externalPath": "components.admin.react.elements"
   },
   {
-    "defaultExport": "MailgunFullLogo",
+    "defaultExport": "MailgunLogo",
     "importPath": "react/admin/elements/Svgs/",
     "externalPath": "components.admin.react.elements"
   },
@@ -663,11 +668,6 @@ module.exports = [
     "importPath": "react/admin/elements/Svgs/",
     "externalPath": "components.admin.react.elements"
   },
-  {
-    "defaultExport": "MailFailed",
-    "importPath": "react/admin/elements/Svgs/",
-    "externalPath": "components.admin.react.elements"
-  },
   {
     "defaultExport": "GravitySMTPTextLogo",
     "importPath": "react/admin/elements/Svgs/",
@@ -779,7 +779,7 @@ module.exports = [
     "externalPath": "components.admin.react.elements"
   },
   {
-    "defaultExport": "TelegramLogo",
+    "defaultExport": "MailFailed",
     "importPath": "react/admin/elements/Svgs/",
     "externalPath": "components.admin.react.elements"
   },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravityforms/components",
-  "version": "6.2.0",
+  "version": "6.2.2",
   "description": "UI components for use in Gravity Forms development. Both React and vanilla js flavors.",
   "author": "Rocketgenius",
   "license": "GPL-2.0-or-later",
@@ -30,7 +30,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.26.0",
-    "@gravityforms/components": "^6.2.0",
+    "@gravityforms/components": "^6.2.2",
     "@gravityforms/libraries": "^6.0.0",
     "@gravityforms/react-utils": "^5.1.7",
     "@gravityforms/request": "^6.1.0",

package/react/admin/modules/Repeater/RepeaterItem.js

@@ -1,7 +1,6 @@
 import { React, ReactDND, PropTypes, classnames } from '@gravityforms/libraries';
-import { ConditionalWrapper } from '@gravityforms/react-utils';
 import { spacerClasses, sprintf } from '@gravityforms/utils';
-import { UP, DOWN, BLOCK, INLINE } from './constants';
+import { UP, DOWN, INLINE } from './constants';
 import { ARROW_UP, ARROW_DOWN, ARROW_LEFT, ARROW_RIGHT, TAB } from '../../utils/keymap';
 import itemTypes from './item-types';
 import Button from '../../elements/Button';
@@ -58,6 +57,7 @@ const RepeaterItem = ( {
 	speak = () => {},
 	style = 'regular',
 	type = INLINE,
+	useBlockLayoutOnMobile = true,
 	upButtonAttributes = {},
 	upButtonClasses = [],
 } ) => {
@@ -274,7 +274,7 @@ const RepeaterItem = ( {
 	};
 
 	const blockHeaderProps = {
-		className: classnames( [
+		customClasses: classnames( [
 			'gform-repeater-item__block-header',
 		], blockHeaderClasses ),
 		size: 'text-sm',
@@ -290,14 +290,16 @@ const RepeaterItem = ( {
 		buttonType = 'icon-white';
 	}
 
-	const renderActionButtons = () => {
+	const renderActionButtons = ( context = 'block' ) => {
+		const actionButtonType = context === 'block' ? 'white' : buttonType;
+		const size = context === 'block' ? 'size-height-m' : inlineButtonSize;
 		return actionButtons.length ? actionButtons.map( ( button, idx ) => {
 			const { icon, label, onClick, ...rest } = button;
 			return (
 				<Button
 					key={ `action-button-${ idx }` }
-					size={ inlineButtonSize }
-					type={ buttonType }
+					size={ size }
+					type={ actionButtonType }
 					icon={ icon }
 					iconPosition="leading"
 					iconPrefix="gravity-component-icon"
@@ -316,42 +318,52 @@ const RepeaterItem = ( {
 		} ) : null;
 	};
 
-	const deleteButtonProps = {
-		size: inlineButtonSize,
-		type: buttonType,
-		icon: 'trash',
-		iconPosition: 'leading',
-		iconPrefix: 'gravity-component-icon',
-		label: i18n.deleteLabel,
-		onClick: handleDelete,
-		disabled: minItems > 0 && itemCount <= minItems,
-		customAttributes: {
-			type: 'button',
-		},
-		customClasses: classnames( [
-			'gform-repeater-item__delete',
-			'gform-repeater-item__action-control',
-		], deleteButtonClasses ),
-		...deleteButtonAttributes,
+	const renderDeleteButton = ( context = 'block' ) => {
+		const deleteButtonType = context === 'block' ? 'white' : buttonType;
+		const size = context === 'block' ? 'size-height-m' : inlineButtonSize;
+		const deleteButtonProps = {
+			size,
+			type: deleteButtonType,
+			icon: 'trash',
+			iconPosition: 'leading',
+			iconPrefix: 'gravity-component-icon',
+			label: i18n.deleteLabel,
+			onClick: handleDelete,
+			disabled: minItems > 0 && itemCount <= minItems,
+			customAttributes: {
+				type: 'button',
+			},
+			customClasses: classnames( [
+				'gform-repeater-item__delete',
+				'gform-repeater-item__action-control',
+			], deleteButtonClasses ),
+			...deleteButtonAttributes,
+		};
+		return <Button { ...deleteButtonProps } />;
 	};
 
-	const addButtonProps = {
-		size: inlineButtonSize,
-		type: buttonType,
-		icon: 'plus-regular',
-		iconAttributes: addButtonAttributes?.iconAttributes || {},
-		iconPosition: 'leading',
-		iconPrefix: 'gravity-component-icon',
-		label: i18n.addLabel,
-		onClick: addItem,
-		disabled: !! ( maxItems && itemCount >= maxItems ) || addButtonAttributes?.disabled,
-		customAttributes: {
-			type: 'button',
-		},
-		customClasses: classnames( [
-			'gform-repeater-item__add',
-			'gform-repeater-item__action-control',
-		], addButtonClasses ),
+	const renderAddButton = ( context = 'block' ) => {
+		const addButtonType = context === 'block' ? 'white' : buttonType;
+		const size = context === 'block' ? 'size-height-m' : inlineButtonSize;
+		const addButtonProps = {
+			size,
+			type: addButtonType,
+			icon: 'plus-regular',
+			iconAttributes: addButtonAttributes?.iconAttributes || {},
+			iconPosition: 'leading',
+			iconPrefix: 'gravity-component-icon',
+			label: i18n.addLabel,
+			onClick: addItem,
+			disabled: !! ( maxItems && itemCount >= maxItems ) || addButtonAttributes?.disabled,
+			customAttributes: {
+				type: 'button',
+			},
+			customClasses: classnames( [
+				'gform-repeater-item__add',
+				'gform-repeater-item__action-control',
+			], addButtonClasses ),
+		};
+		return <Button { ...addButtonProps } />;
 	};
 
 	const collapsibleButtonProps = {
@@ -374,7 +386,6 @@ const RepeaterItem = ( {
 	};
 
 	const blockContentProps = {
-		'aria-hidden': isCollapsed,
 		'aria-labelledby': `${ id }-collapsible-button`,
 		className: 'gform-repeater-item__block-content',
 		id: `${ id }-block-content`,
@@ -386,16 +397,18 @@ const RepeaterItem = ( {
 			'gform-repeater-item': true,
 			[ `gform-repeater-item--style-${ style }` ]: true,
 			[ `gform-repeater-item--type-${ type }` ]: type,
-			'gform-repeater-item--show-actions-on-hover': showActionsOnHover,
+			'gform-repeater-item--show-actions-on-hover': type === INLINE && showActionsOnHover,
 			'gform-repeater-item--has-arrows': showArrows && isSortable,
 			'gform-repeater-item--has-drag-handle': showDragHandle && isDraggable && isSortable,
 			'gform-repeater-item--is-draggable': isDraggable && isSortable,
 			'gform-repeater-item--is-sortable': isSortable,
+			'gform-repeater-item--is-collapsible': collapsible,
 			'gform-repeater-item--is-collapsed': isCollapsed,
 			'gform-repeater-item--is-dragging': isDragging,
 			'gform-repeater-item--fill-content': fillContent,
 			'gform-repeater-item--disable-item-drag': ! itemDraggable,
 			'gform-repeater-item--is-keyboard-nav': keyboardDragActive,
+			'gform-repeater-item--use-inline-layout-mobile': type === INLINE && ! useBlockLayoutOnMobile,
 			...spacerClasses( itemSpacing ),
 		}, itemClasses ),
 		'data-index': index,
@@ -404,32 +417,37 @@ const RepeaterItem = ( {
 		...itemAttributes,
 	};
 
+	const useBlockLayout = type === 'block' || ( type === INLINE && useBlockLayoutOnMobile );
+	const noControls = ( ! showArrows && ( ! showDragHandle || ! isDraggable ) ) || ! isSortable;
+
 	return (
 		<div { ...componentProps } ref={ ref }>
-			<div { ...itemWrapperProps }>
-				{ renderControls() }
-				{ type === BLOCK && blockContentTitle && (
-					<Text { ...blockHeaderProps }>{ blockContentTitle }</Text>
-				) }
-				{ type === INLINE && children }
-				<ConditionalWrapper
-					condition={ ( showAdd || showActions || showDelete ) && type === INLINE && style === 'minimal' }
-					wrapper={ ( ch ) => <div className="gform-repeater-item__minimal-actions">{ ch }</div> }
-				>
-					{ showAdd && type === INLINE && <Button { ...addButtonProps } /> }
-					{ showActions && type === INLINE && renderActionButtons() }
-					{ showDelete && type === INLINE && <Button { ...deleteButtonProps } /> }
-				</ConditionalWrapper>
-				{ collapsible && type === BLOCK && <Button { ...collapsibleButtonProps } /> }
-			</div>
-			{ type === BLOCK && (
+			{ ( ! noControls || useBlockLayout ) && (
+				<div { ...itemWrapperProps }>
+					{ renderControls() }
+					{ useBlockLayout && blockContentTitle && (
+						<Text { ...blockHeaderProps }>{ blockContentTitle }</Text>
+					) }
+					{ useBlockLayout && collapsible && <Button { ...collapsibleButtonProps } /> }
+				</div>
+			) }
+			{ (
 				<div { ...blockContentProps }>
 					{ children }
-					<div className="gform-repeater-item__block-content-footer">
-						{ showActions && renderActionButtons() }
-						{ showDelete && <Button { ...deleteButtonProps } /> }
-					</div>
-					{ showAdd && ! inlineAdd && <Button { ...addButtonProps } /> }
+					{ ( showAdd || showActions || showDelete ) && type === INLINE && (
+						<div className="gform-repeater-item__minimal-actions">
+							{ showAdd && renderAddButton( 'inline' ) }
+							{ showActions && renderActionButtons( 'inline' ) }
+							{ showDelete && renderDeleteButton( 'inline' ) }
+						</div>
+					) }
+					{ useBlockLayout && (
+						<div className="gform-repeater-item__block-content-footer">
+							{ showAdd && inlineAdd && renderAddButton( 'block' ) }
+							{ showActions && renderActionButtons( 'block' ) }
+							{ showDelete && renderDeleteButton( 'block' ) }
+						</div>
+					) }
 				</div>
 			) }
 		</div>

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

@@ -60,6 +60,7 @@ const { useState } = React;
  * @param {string|number|Array|object} props.spacing                     The spacing for the component, as a string, number, array, or object.
  * @param {string}                     props.style                       The style of the repeater.
  * @param {string}                     props.type                        The type of the repeater.
+ * @param {boolean}                    props.useBlockOnSmallScreen       If the block type styles should be used for inline type repeaters on small screens.
  * @param {object}                     props.upButtonAttributes          Custom attributes for the up button.
  * @param {string|Array|object}        props.upButtonClasses             Custom classes for the up button.
  *
@@ -124,6 +125,7 @@ const Repeater = ( {
 	spacing = '',
 	style = 'regular',
 	type = INLINE,
+	useBlockLayoutOnMobile = false,
 	upButtonAttributes = {},
 	upButtonClasses = [],
 } ) => {
@@ -300,6 +302,7 @@ const Repeater = ( {
 					speak={ setScreenReaderText }
 					style={ style }
 					type={ type }
+					useBlockLayoutOnMobile={ useBlockLayoutOnMobile }
 					upButtonAttributes={ upButtonAttributes }
 					upButtonClasses={ upButtonClasses }
 				>
@@ -406,6 +409,7 @@ Repeater.propTypes = {
 	] ),
 	style: PropTypes.string,
 	type: PropTypes.oneOf( [ BLOCK, INLINE ] ),
+	useBlockLayoutOnMobile: PropTypes.bool,
 	upButtonAttributes: PropTypes.object,
 	upButtonClasses: PropTypes.oneOfType( [
 		PropTypes.element,

package/react/admin/modules/Repeater/use-repeater-state.js

@@ -9,7 +9,7 @@ const resolvePath = ( path, base = window ) => {
 	return path.split( '.' ).reduce( ( acc, part ) => acc && acc[ part ], base );
 };
 
-const useRepeaterState = ( initialStateOrPath, syncWithWindow = false, titleKey = '', repeaterType = 'inline', titlePrefix = '' ) => {
+const useRepeaterState = ( initialStateOrPath, syncWithWindow = false, titleKey = '', titlePrefix = '' ) => {
 	const isPath = typeof initialStateOrPath === 'string';
 	const initialState = isPath ? deepClone( resolvePath( initialStateOrPath ) || [] ) : deepClone( initialStateOrPath );
 	const [ items, setItems ] = useState( initialState );
@@ -37,14 +37,14 @@ const useRepeaterState = ( initialStateOrPath, syncWithWindow = false, titleKey
 				[ key ]: value,
 			};
 
-			if ( titleKey && repeaterType === 'block' && key === titleKey ) {
+			if ( titleKey && key === titleKey ) {
 				updatedItems[ index ].repeater_item_block_content_title = titlePrefix ? sprintf( titlePrefix, value ) : value;
 			}
 
 			updateExternalState( updatedItems );
 			return updatedItems;
 		} );
-	}, [ repeaterType, titleKey, titlePrefix, syncWithWindow, initialStateOrPath ] );
+	}, [ titleKey, titlePrefix, syncWithWindow, initialStateOrPath ] );
 
 	return { items, handleChange, onChange };
 };