newspack-components 3.1.0 → 4.0.0

package/dist/esm/tabbed-navigation/index.js

@@ -25,6 +25,21 @@ const TabbedNavigation = ({
     location
   } = useHistory();
   const currentIndex = findIndex(displayedItems, ['path', location.pathname]);
+  function isActive(item, match, pathname) {
+    if (item.path === pathname) {
+      return true;
+    }
+    if (Array.isArray(item?.activeTabPaths)) {
+      return item.activeTabPaths.some(path => {
+        if (path.endsWith('*')) {
+          const basePath = path.slice(0, -1);
+          return pathname.startsWith(basePath);
+        }
+        return item.activeTabPaths.includes(pathname);
+      });
+    }
+    return match;
+  }
   return /*#__PURE__*/_jsxs("div", {
     className: classnames('newspack-tabbed-navigation', className),
     children: [/*#__PURE__*/_jsx("ul", {
@@ -33,13 +48,8 @@ const TabbedNavigation = ({
           to: item.path,
           isActive: (match, {
             pathname
-          }) => {
-            if (item.activeTabPaths) {
-              return item.activeTabPaths.includes(pathname);
-            }
-            return match;
-          },
-          exact: true,
+          }) => isActive(item, match, pathname),
+          exact: item.hasOwnProperty('exact') ? item.exact : true,
           activeClassName: 'selected',
           className: classnames({
             disabled: disableUpcoming && index > currentIndex

package/dist/esm/tabbed-navigation/style.scss

@@ -39,6 +39,7 @@
 			display: flex;
 			font-weight: bold;
 			height: 48px;
+			outline: none;
 			padding: 12px 15px;
 			text-decoration: none;
 
@@ -51,15 +52,10 @@
 			&:focus,
 			&:hover {
 				color: var(--wp-admin-theme-color);
-				outline: none;
-			}
-
-			&:focus {
-				box-shadow: none;
 			}
 
 			&:focus-visible {
-				outline: 2px solid;
+				outline: 2px solid var(--wp-admin-theme-color);
 				outline-offset: -2px;
 			}
 

package/dist/esm/utils/color.js

@@ -0,0 +1,29 @@
+/**
+ * Determine if black or white should be used based on a contrast ratio.
+ *
+ * @param hexcolor Hex code for determining contrast
+ * @return black or white string
+ */
+export function getContrast(hexcolor) {
+  if (hexcolor.charAt(0) === '#') {
+    hexcolor = hexcolor.slice(1);
+  }
+
+  // Normalize to 6 character hex code if needed
+  if (hexcolor.length === 3) {
+    hexcolor = hexcolor.split('').map(function (hex) {
+      return hex + hex;
+    }).join('');
+  }
+
+  // Convert to RGB value
+  const r = parseInt(hexcolor.substring(0, 2), 16);
+  const g = parseInt(hexcolor.substring(2, 4), 16);
+  const b = parseInt(hexcolor.substring(4), 16);
+
+  // Get YIQ ratio
+  const yiq = (r * 299 + g * 587 + b * 114) / 1000;
+
+  // Check contrast
+  return yiq >= 128 ? 'black' : 'white';
+}

package/dist/esm/web-preview/style.scss

@@ -2,19 +2,19 @@
  * Web Preview
  */
 
-@use "../../../shared/scss/colors";
 @use "~@wordpress/base-styles/colors" as wp-colors;
+@use "../../../colors/colors.module" as colors;
 
 .newspack-web-preview {
 	// Color
-	--wp-admin-theme-color: #{colors.$primary-500};
-	--wp-admin-theme-color--rgb: #{colors.$primary-500--rgb};
-	--wp-admin-theme-color-darker-10: #{colors.$primary-600};
-	--wp-admin-theme-color-darker-10--rgb: #{colors.$primary-600--rgb};
-	--wp-admin-theme-color-darker-20: #{colors.$primary-700};
-	--wp-admin-theme-color-darker-20--rgb: #{colors.$primary-700--rgb};
-
-	background: rgba(black, 0.7);
+	--wp-admin-theme-color: #{colors.$primary-600};
+	--wp-admin-theme-color--rgb: #{colors.$primary-600--rgb};
+	--wp-admin-theme-color-darker-10: #{colors.$primary-700};
+	--wp-admin-theme-color-darker-10--rgb: #{colors.$primary-700--rgb};
+	--wp-admin-theme-color-darker-20: #{colors.$primary-800};
+	--wp-admin-theme-color-darker-20--rgb: #{colors.$primary-800--rgb};
+
+	background: #{colors.$neutral-700};
 	box-sizing: border-box;
 	height: 100%;
 	left: 0;
@@ -102,7 +102,7 @@
 				padding: 0 !important;
 
 				&.is-selected {
-					background: colors.$primary-500;
+					background: var(--wp-admin-theme-color);
 					color: white;
 
 					&:active,
@@ -114,7 +114,7 @@
 					}
 
 					&:focus {
-						box-shadow: inset 0 0 0 1px colors.$primary-500, inset 0 0 0 3px white !important;
+						box-shadow: inset 0 0 0 1px var(--wp-admin-theme-color), inset 0 0 0 3px white !important;
 					}
 				}
 

package/dist/esm/with-wizard/index.js

@@ -4,7 +4,7 @@
 import { Component, createRef, Fragment } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import apiFetch from '@wordpress/api-fetch';
-import { home } from '@wordpress/icons';
+import { category } from '@wordpress/icons';
 
 /**
  * Internal dependencies.
@@ -30,7 +30,8 @@ export default function withWizard(WrappedComponent, requiredPlugins) {
         complete: null,
         error: null,
         loading: requiredPlugins && requiredPlugins.length > 0 ? 1 : 0,
-        quietLoading: false
+        quietLoading: false,
+        confirmation: null
       };
       this.wrappedComponentRef = createRef();
     }
@@ -251,7 +252,7 @@ export default function withWizard(WrappedComponent, requiredPlugins) {
                   href: newspack_urls.dashboard,
                   label: __('Return to Dashboard', 'newspack-plugin'),
                   showTooltip: true,
-                  icon: home,
+                  icon: category,
                   iconSize: 36,
                   children: /*#__PURE__*/_jsx(NewspackIcon, {
                     size: 36
@@ -273,6 +274,81 @@ export default function withWizard(WrappedComponent, requiredPlugins) {
         })
       });
     };
+
+    /**
+     * Build a confirmation modal with the given title & message.
+     * Execute {callback} if confirmed.
+     *
+     * @property {Object}   options             Options for the confirmation modal.
+     * @property {string}   options.title       The title for the modal component.
+     * @property {string}   options.message     The message for the modal component body.
+     * @property {string}   options.confirmText The text for the confirmation button.
+     * @property {string}   options.cancelText  The text for the cancel button.
+     * @property {Function} options.callback    A function to call if the user confirms the action.
+     */
+    confirmAction = options => {
+      const modalOptions = {
+        title: null,
+        message: __('Are you sure?', 'newpack-plugin'),
+        confirmText: __('OK', 'newspack-plugin'),
+        cancelText: __('Cancel', 'newspack-plugin'),
+        callback: null,
+        ...options
+      };
+      this.setState({
+        confirmation: modalOptions
+      });
+    };
+
+    /**
+     * Show a confirmation modal with the given title & message.
+     * Execute {callback} if confirmed.
+     *
+     * @return {Component} <Modal>
+     */
+    getModal = () => {
+      if (!this.state.confirmation) {
+        return null;
+      }
+      const {
+        title,
+        message,
+        confirmText,
+        cancelText,
+        callback
+      } = this.state.confirmation;
+      return message && callback && /*#__PURE__*/_jsxs(Modal, {
+        isNarrow: true,
+        hideTitle: !title,
+        title: title,
+        onRequestClose: () => this.setState({
+          confirmation: null
+        }),
+        children: [/*#__PURE__*/_jsx("p", {
+          children: message
+        }), /*#__PURE__*/_jsxs(Card, {
+          buttonsCard: true,
+          noBorder: true,
+          className: "justify-end",
+          children: [/*#__PURE__*/_jsx(Button, {
+            variant: "secondary",
+            onClick: () => this.setState({
+              confirmation: null
+            }),
+            children: cancelText
+          }), /*#__PURE__*/_jsx(Button, {
+            variant: "primary",
+            onClick: () => {
+              this.setState({
+                confirmation: null
+              });
+              callback();
+            },
+            children: confirmText
+          })]
+        })]
+      });
+    };
     getFallbackURL = () => {
       if (typeof newspack_urls !== 'undefined') {
         return newspack_urls.dashboard;
@@ -296,9 +372,10 @@ export default function withWizard(WrappedComponent, requiredPlugins) {
         loadingClasses.push('newspack-wizard__is-loading-quiet');
       }
       return /*#__PURE__*/_jsxs(Fragment, {
-        children: [this.getError(), /*#__PURE__*/_jsx("div", {
+        children: [this.getError(), this.getModal(), /*#__PURE__*/_jsx("div", {
           className: loadingClasses.join(' '),
           children: /*#__PURE__*/_jsx(WrappedComponent, {
+            confirmAction: this.confirmAction,
             pluginRequirements: requiredPlugins && this.pluginRequirements(),
             clearError: this.clearError,
             getError: this.getError,

package/dist/esm/with-wizard/style.scss

@@ -3,15 +3,13 @@
  */
 
 @use "~@wordpress/base-styles/colors" as wp-colors;
-@use "../../../shared/scss/colors";
 
-// Reset Padding of the Admin Page
+// Styling for full-page-react Wizards (ignoring admin-header-only wizards).
+body.newspack-wizard-page:not(.newspack-admin-header) {
 
-.toplevel_page_newspack:not(.menu-top),
-body[class*="newspack_page_newspack-"],
-body[class*="admin_page_newspack-"] {
 	background: white;
 
+	// Reset Padding
 	#wpcontent {
 		padding-left: 0;
 	}
@@ -20,6 +18,13 @@ body[class*="admin_page_newspack-"] {
 		padding-bottom: 220px;
 		min-height: 100vh;
 
+		// For admin notices directly ">" at top of page above the Wizard header.
+		// PHP code should hide these notices, but just incase add this style.
+		> .notice {
+			margin-bottom: 20px;
+			margin-left: 22px;
+		}
+
 		@media screen and ( min-width: 783px ) {
 			padding-bottom: 202px;
 		}
@@ -30,6 +35,24 @@ body[class*="admin_page_newspack-"] {
 	}
 }
 
+// Styling for wizards that are admin-header-only.
+body.newspack-wizard-page.newspack-admin-header {
+
+	// For mobile.
+	@media screen and (max-width: 600px) {
+
+		// The header bar (and tabs) need padding.
+		#newspack-wizards-admin-header {
+			padding-top: 46px;
+		}
+
+		// Since the padding was added to the header bar, remove from body.
+		#wpbody {
+			padding-top: 0;
+		}
+	}
+}
+
 svg {
 	&.newspack--error {
 		fill: wp-colors.$alert-red;
@@ -41,15 +64,14 @@ svg {
 }
 
 // Blue Screen
-
 .newspack-wizard__blue {
 	#wpwrap {
-		background: colors.$primary-500;
+		background: var(--wp-admin-theme-color);
 	}
 
 	.newspack-footer {
-		background: colors.$primary-500;
-		border-color: colors.$primary-500;
+		background: var(--wp-admin-theme-color);
+		border-color: var(--wp-admin-theme-color);
 		justify-content: center;
 
 		&__logo {
@@ -73,7 +95,6 @@ svg {
 }
 
 // Loading
-
 .newspack-wizard__is-loading {
 	background: white;
 	cursor: wait;
@@ -92,7 +113,7 @@ svg {
 	}
 
 	&::before {
-		background: colors.$primary-500;
+		background: var(--wp-admin-theme-color);
 		box-shadow:
 			24px 0 0 white,
 			69px 0 0 -15px wp-colors.$gray-900,
@@ -137,7 +158,7 @@ svg {
 
 	// Blue Screen
 	.newspack-wizard__blue & {
-		background: colors.$primary-500;
+		background: var(--wp-admin-theme-color);
 
 		&::before {
 			animation: loading-quiet 1.25s ease-in-out infinite;
@@ -193,7 +214,7 @@ svg {
 
 		&::before {
 			animation: loading-quiet 1.25s ease-in-out infinite;
-			background: colors.$primary-500;
+			background: var(--wp-admin-theme-color);
 			height: 8px;
 			right: 100%;
 			z-index: 9999;

package/dist/esm/with-wizard-screen/index.js

@@ -8,7 +8,7 @@ import { category } from '@wordpress/icons';
  * Internal dependencies
  */
 import { Button, Handoff, NewspackIcon, Notice, HandoffMessage, TabbedNavigation } from '../';
-import { buttonProps } from '../../../shared/js/';
+import { buttonProps } from '../button-props';
 import './style.scss';
 
 /**

package/dist/esm/with-wizard-screen/style.scss

@@ -3,16 +3,16 @@
  */
 
 @use "~@wordpress/base-styles/colors" as wp-colors;
-@use "../../../shared/scss/colors";
+@use "../../../colors/colors.module" as colors;
 
 .newspack-wizard {
 	// Color
-	--wp-admin-theme-color: #{colors.$primary-500};
-	--wp-admin-theme-color--rgb: #{colors.$primary-500--rgb};
-	--wp-admin-theme-color-darker-10: #{colors.$primary-600};
-	--wp-admin-theme-color-darker-10--rgb: #{colors.$primary-600--rgb};
-	--wp-admin-theme-color-darker-20: #{colors.$primary-700};
-	--wp-admin-theme-color-darker-20--rgb: #{colors.$primary-700--rgb};
+	--wp-admin-theme-color: #{colors.$primary-600};
+	--wp-admin-theme-color--rgb: #{colors.$primary-600--rgb};
+	--wp-admin-theme-color-darker-10: #{colors.$primary-700};
+	--wp-admin-theme-color-darker-10--rgb: #{colors.$primary-700--rgb};
+	--wp-admin-theme-color-darker-20: #{colors.$primary-800};
+	--wp-admin-theme-color-darker-20--rgb: #{colors.$primary-800--rgb};
 
 	color: wp-colors.$gray-900;
 
@@ -83,7 +83,7 @@
 			}
 
 			&:not(.newspack-icon) {
-				background: colors.$primary-500;
+				background: var(--wp-admin-theme-color);
 				left: 50%;
 				margin: -28px 0 0 -28px !important;
 				opacity: 0;
@@ -125,7 +125,7 @@
 		padding: 0 16px;
 
 		@media screen and ( min-width: 744px ) {
-			padding: 32px 84px;
+			padding: 40px 84px;
 		}
 
 		// Typography

package/dist/esm/wizard/index.js

@@ -7,7 +7,7 @@ import classnames from 'classnames';
  * WordPress dependencies.
  */
 import { useSelect } from '@wordpress/data';
-import { useState } from '@wordpress/element';
+import { useState, forwardRef } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { category } from '@wordpress/icons';
 
@@ -17,9 +17,8 @@ import { category } from '@wordpress/icons';
 import { Footer, Notice, Button, NewspackIcon, TabbedNavigation, PluginInstaller, HandoffMessage } from '../';
 import Router from '../proxied-imports/router';
 import registerStore, { WIZARD_STORE_NAMESPACE } from './store';
-import { useWizardData } from './store/utils';
 import WizardError from './components/WizardError';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 registerStore();
 const {
   HashRouter,
@@ -27,22 +26,45 @@ const {
   Route,
   Switch
 } = Router;
+
+/**
+ * @typedef  {Object}     WizardProps
+ * @property {string}     headerText                The header text.
+ * @property {string}     [subHeaderText]           The sub-header text, optional.
+ * @property {string}     [apiSlug]                 The API slug, optional.
+ * @property {string}     [className]               CSS classes, optional.
+ * @property {any[]}      sections                  Array of sections.
+ * @property {boolean}    [hasSimpleFooter]         Indicates if a simple footer is used, optional.
+ * @property {() => void} [renderAboveSections]     Function to render content above sections, optional.
+ * @property {string[]}   [requiredPlugins]         Array of required plugin strings, optional.
+ * @property {boolean}    [isInitialFetchTriggered] Indicates if the initial fetch should be triggered, optional.
+ */
+
+/**
+ * Wizard Component
+ *
+ * Provides a tabbed UI with history.
+ *
+ * @param {WizardProps} props
+ * @return {JSX.Element} Wizard component
+ */
 const Wizard = ({
   sections = [],
-  apiSlug,
   headerText,
+  apiSlug,
   subHeaderText,
   hasSimpleFooter,
   className,
   renderAboveSections,
-  requiredPlugins = []
-}) => {
+  requiredPlugins = [],
+  isInitialFetchTriggered = true
+}, ref) => {
   const isLoading = useSelect(select => select(WIZARD_STORE_NAMESPACE).isLoading());
   const isQuietLoading = useSelect(select => select(WIZARD_STORE_NAMESPACE).isQuietLoading());
 
   // Trigger initial data fetch. Some sections might not use the wizard data,
   // but for consistency, fetching is triggered regardless of the section.
-  useSelect(select => select(WIZARD_STORE_NAMESPACE).getWizardAPIData(apiSlug));
+  useSelect(select => isInitialFetchTriggered && select(WIZARD_STORE_NAMESPACE).getWizardAPIData(apiSlug));
   let displayedSections = sections.filter(section => !section.isHidden);
   const [pluginRequirementsSatisfied, setPluginRequirementsSatisfied] = useState(requiredPlugins.length === 0);
   if (!pluginRequirementsSatisfied) {
@@ -57,7 +79,9 @@ const Wizard = ({
       })
     }];
   }
-  return /*#__PURE__*/_jsxs(_Fragment, {
+  const urlWithoutHash = window.location.href.split('#')[0];
+  return /*#__PURE__*/_jsxs("div", {
+    ref: ref,
     children: [/*#__PURE__*/_jsx("div", {
       className: classnames(isLoading ? 'newspack-wizard__is-loading' : 'newspack-wizard__is-loaded', {
         'newspack-wizard__is-loading-quiet': isQuietLoading
@@ -72,7 +96,7 @@ const Wizard = ({
             className: "newspack-wizard__header__inner",
             children: /*#__PURE__*/_jsxs("div", {
               className: "newspack-wizard__title",
-              children: [/*#__PURE__*/_jsx(Button, {
+              children: [newspack_urls.dashboard !== urlWithoutHash ? /*#__PURE__*/_jsx(Button, {
                 isLink: true,
                 href: newspack_urls.dashboard,
                 label: __('Return to Dashboard', 'newspack-plugin'),
@@ -82,6 +106,8 @@ const Wizard = ({
                 children: /*#__PURE__*/_jsx(NewspackIcon, {
                   size: 36
                 })
+              }) : /*#__PURE__*/_jsx(NewspackIcon, {
+                size: 36
               }), /*#__PURE__*/_jsxs("div", {
                 children: [headerText && /*#__PURE__*/_jsx("h2", {
                   children: headerText
@@ -96,11 +122,13 @@ const Wizard = ({
           children: /*#__PURE__*/_jsx(WizardError, {})
         }), /*#__PURE__*/_jsx(HandoffMessage, {}), /*#__PURE__*/_jsxs(Switch, {
           children: [displayedSections.map((section, index) => {
+            var _section$exact;
             const SectionComponent = section.render;
             return /*#__PURE__*/_jsx(Route, {
+              exact: (_section$exact = section.exact) !== null && _section$exact !== void 0 ? _section$exact : false,
               path: section.path,
               children: /*#__PURE__*/_jsxs("div", {
-                className: classnames('newspack-wizard newspack-wizard__content', className),
+                className: classnames('newspack-wizard__content', className),
                 children: ['function' === typeof renderAboveSections ? renderAboveSections() : null, /*#__PURE__*/_jsx(SectionComponent, {})]
               })
             }, index);
@@ -114,6 +142,4 @@ const Wizard = ({
     })]
   });
 };
-Wizard.useWizardData = useWizardData;
-Wizard.STORE_NAMESPACE = WIZARD_STORE_NAMESPACE;
-export default Wizard;
+export default forwardRef(Wizard);

package/dist/esm/wizard/store/index.js

@@ -13,7 +13,7 @@ import { createReduxStore, register, dispatch, select } from '@wordpress/data';
 import { createAction } from './utils.js';
 export const WIZARD_STORE_NAMESPACE = 'newspack/wizards';
 const DEFAULT_STATE = {
-  isLoading: true,
+  isLoading: false,
   isQuietLoading: false,
   apiData: {},
   error: null
@@ -112,6 +112,10 @@ const selectors = {
   isLoading: state => state.isLoading,
   isQuietLoading: state => state.isQuietLoading,
   getWizardAPIData: (state, slug) => state.apiData[slug] || {},
+  getWizardData: (state, slug) => {
+    var _state$apiData$slug;
+    return (_state$apiData$slug = state.apiData[slug]) !== null && _state$apiData$slug !== void 0 ? _state$apiData$slug : {};
+  },
   getError: state => state.error
 };
 const store = createReduxStore(WIZARD_STORE_NAMESPACE, {
@@ -120,17 +124,21 @@ const store = createReduxStore(WIZARD_STORE_NAMESPACE, {
   selectors,
   controls: {
     FETCH_FROM_API: action => {
+      const {
+        isLocalError = false,
+        isQuietFetch = false
+      } = action.payload;
       dispatch(WIZARD_STORE_NAMESPACE).startLoadingData({
-        isQuietLoading: Boolean(action.payload.isQuietFetch)
+        isQuietLoading: Boolean(isQuietFetch)
       });
       return apiFetch(action.payload).then(data => {
         dispatch(WIZARD_STORE_NAMESPACE).setError(null);
         return data;
       }).catch(error => {
+        if (isLocalError) {
+          throw error;
+        }
         dispatch(WIZARD_STORE_NAMESPACE).setError(error);
-        return {
-          error
-        };
       }).finally(result => {
         dispatch(WIZARD_STORE_NAMESPACE).finishLoadingData();
         return result;

package/dist/esm/wizard/store/utils.js

@@ -11,4 +11,6 @@ export const createAction = type => payload => ({
   type,
   payload
 });
-export const useWizardData = (wizardName, defaultValue = {}) => useSelect(select => select(WIZARD_STORE_NAMESPACE).getWizardAPIData(`newspack-${wizardName}-wizard`)) || defaultValue;
+export const useWizardData = (wizardName, defaultValue = {}) => {
+  return useSelect(select => select(WIZARD_STORE_NAMESPACE).getWizardAPIData(wizardName)) || defaultValue;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "newspack-components",
-	"version": "3.1.0",
+	"version": "4.0.0",
 	"description": "Newspack design system components",
 	"author": "Automattic",
 	"license": "GPL-2.0-or-later",

package/src/accordion/index.js

@@ -20,9 +20,7 @@ import './style.scss';
 const Accordion = ( { children, title } ) => {
 	const [ isOpen, setIsOpen ] = useState( false );
 	return (
-		<details
-			className={ classNames( 'newspack-accordion', { 'newspack-accordion--is-open': isOpen } ) }
-		>
+		<details className={ classNames( 'newspack-accordion', { 'newspack-accordion--is-open': isOpen } ) }>
 			<summary onClick={ () => setIsOpen( ! isOpen ) }>
 				{ title }
 				<Icon className="newspack-accordion__icon" icon={ chevronRight } size={ 24 } />

package/src/action-card/action-card.d.ts

@@ -0,0 +1,40 @@
+export interface ActionCardProps {
+	id?: string | number;
+	title?: string | React.ReactNode;
+	titleLink?: string;
+	href?: string;
+	description?: string | React.ReactNode;
+	actionText?: React.ReactNode | string | null;
+	badge?: string;
+	className?: string;
+	indent?: string;
+	notification?: string | Error | null;
+	notificationLevel?: 'error' | 'warning' | 'info';
+	isMedium?: boolean;
+	disabled?: boolean | string;
+	hasGreyHeader?: boolean;
+	toggleChecked?: boolean;
+	toggleOnChange?: ( a: boolean ) => void;
+	actionContent?: boolean | React.ReactNode | null;
+	error?: Error | string | null;
+	handoff?: string | null;
+	isErrorStatus?: boolean;
+	checkbox?: 'checked' | 'unchecked';
+	isChecked?: boolean;
+	children?: boolean | React.ReactNode;
+	isSmall?: boolean;
+	editLink?: string;
+	simple?: boolean;
+	secondaryActionText?: string;
+	onSecondaryActionClick?: () => void;
+	secondaryDestructive?: boolean;
+	hasWhiteHeader?: boolean;
+	noBorder?: boolean;
+	noMargin?: boolean;
+	collapse?: boolean;
+	expandable?: boolean;
+	draggable?: boolean;
+	dragIndex?: number;
+	onDragCallback?: ( index: number ) => void;
+	dragWrapperRef?: React.MutableRefObject< HTMLDivElement | null >;
+}