@eightshift/frontend-libs-tailwind 2.1.1 → 2.3.0

package/linters/base.config.mjs

@@ -1,6 +1,6 @@
-// import react from 'eslint-plugin-react';
-// import reactHooks from 'eslint-plugin-react-hooks';
-import stylistic from '@stylistic/eslint-plugin-js';
+import react from 'eslint-plugin-react';
+import reactHooks from 'eslint-plugin-react-hooks';
+import stylistic from '@stylistic/eslint-plugin';
 import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended';
 import globals from 'globals';
 
@@ -23,9 +23,9 @@ export default [
 			},
 		},
 		plugins: {
-			// react,
-			// 'react-hooks': reactHooks,
-			'@stylistic/js': stylistic,
+			react,
+			'react-hooks': reactHooks,
+			'@stylistic': stylistic,
 		},
 		rules: {
 			'newline-before-return': 'error',
@@ -35,7 +35,7 @@ export default [
 			'no-nested-ternary': 'error',
 			'no-underscore-dangle': ['error', { allowAfterThis: true }],
 			'no-void': 'error',
-			'@stylistic/js/semi': 'error',
+			'@stylistic/semi': 'error',
 			'max-len': [
 				'error',
 				{
@@ -61,21 +61,20 @@ export default [
 				},
 			],
 			// React-specific.
-			// Note: React rules are temporarily disabled until the plugin gets full compatibility with ESLint 9.
-			// 'consistent-return': 'warn',
-			// 'no-param-reassign': 'warn',
-			// 'react-hooks/rules-of-hooks': 'error',
-			// // 'react-hooks/exhaustive-deps': ['error', { additionalHooks: '(useSafeLayoutEffect|useUpdateEffect)' }],
-			// 'react/prop-types': ['error', { skipUndeclared: true }],
-			// 'react/react-in-jsx-scope': 'off',
-			// 'react/self-closing-comp': ['warn', { component: true, html: true }],
-			// 'react/no-unknown-property': ['error', { ignore: ['css'] }],
+			'consistent-return': 'warn',
+			'no-param-reassign': 'warn',
+			'react-hooks/rules-of-hooks': 'error',
+			'react-hooks/exhaustive-deps': ['warn', { additionalHooks: '(useSafeLayoutEffect|useUpdateEffect)' }],
+			'react/prop-types': ['error', { skipUndeclared: true }],
+			'react/react-in-jsx-scope': 'off',
+			'react/self-closing-comp': ['warn', { component: true, html: true }],
+			'react/no-unknown-property': ['error', { ignore: ['css'] }],
+		},
+		settings: {
+			react: {
+				version: '18',
+			},
 		},
-		// settings: {
-		// 	react: {
-		// 		version: '18',
-		// 	},
-		// },
 	},
 	eslintPluginPrettierRecommended,
 ];

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@eightshift/frontend-libs-tailwind",
-	"version": "2.1.1",
+	"version": "2.3.0",
 	"description": "A framework for creating modern Gutenberg themes with styling provided by Tailwind CSS.",
 	"author": {
 		"name": "Eightshift team",
@@ -34,40 +34,42 @@
 	"homepage": "https://github.com/infinum/eightshift-frontend-libs-tailwind#readme",
 	"license": "MIT",
 	"dependencies": {
-		"@stylistic/eslint-plugin-js": "^4.4.1",
+		"@stylistic/eslint-plugin": "^5.6.1",
 		"@stylistic/stylelint-plugin": "^4.0.0",
-		"@swc/core": "^1.13.5",
-		"@wordpress/dependency-extraction-webpack-plugin": "^6.32.0",
-		"browserslist": "^4.26.3",
+		"@swc/core": "^1.15.3",
+		"@wordpress/dependency-extraction-webpack-plugin": "^6.36.0",
+		"browserslist": "^4.28.1",
 		"css-loader": "^7.1.2",
-		"css-minimizer-webpack-plugin": "^7.0.2",
-		"eslint": "^9.37.0",
+		"css-minimizer-webpack-plugin": "^7.0.3",
+		"eslint": "^9.39.1",
 		"eslint-config-prettier": "^10.1.8",
 		"eslint-plugin-prettier": "^5.5.4",
-		"globals": "^16.4.0",
+		"globals": "^16.5.0",
 		"husky": "^9.1.7",
 		"lightningcss": "^1.30.2",
 		"mini-css-extract-plugin": "^2.9.4",
 		"postcss": "^8.5.6",
 		"postcss-loader": "^8.2.0",
-		"prettier": "^3.6.2",
-		"prettier-plugin-tailwindcss": "^0.6.14",
+		"prettier": "^3.7.4",
+		"prettier-plugin-tailwindcss": "^0.7.2",
 		"sonner": "^2.0.7",
-		"stylelint": "^16.25.0",
+		"stylelint": "^16.26.1",
 		"stylelint-config-standard": "^39.0.1",
 		"swc-loader": "^0.2.6",
-		"terser-webpack-plugin": "^5.3.14",
-		"webpack": "^5.102.0",
+		"terser-webpack-plugin": "^5.3.15",
+		"webpack": "^5.103.0",
 		"webpack-cli": "^6.0.1",
-		"webpack-manifest-plugin": "^5.0.1",
-		"webpack-merge": "^6.0.1"
+		"webpack-manifest-plugin": "^6.0.1",
+		"webpack-merge": "^6.0.1",
+		"eslint-plugin-react": "^7.37.5",
+		"eslint-plugin-react-hooks": "^7.0.1"
 	},
 	"devDependencies": {
-		"lint-staged": "^16.2.3",
-		"@wordpress/api-fetch": "^7.32.0"
+		"lint-staged": "^16.2.7",
+		"@wordpress/api-fetch": "^7.36.0"
 	},
 	"peerDependencies": {
-		"@eightshift/ui-components": "^5.5.0"
+		"@eightshift/ui-components": "^6.0.8"
 	},
 	"sideEffects": false,
 	"lint-staged": {

package/scripts/editor/editor.js

@@ -90,6 +90,7 @@ export const lockIfUndefined = (blockClientId, attributeKey, value) => {
  * @param {JSX.Element?} [props.editor] - Editor component
  * @param {JSX.Element?} [props.toolbarPortalElement] - Portal override element to use for toolbar. Set to `false` to disable.
  * @param {JSX.Element?} [props.editorPortalElement] - Portal override element to use for editor view. Set to `false` to disable.
+ * @param {JSX.Element?} [props.optionsPortalElement] - Portal override element to use for options view. Set to `false` to disable.
  * @param {boolean} [props.noOptionsContainer] - If `true`, the options component will not be wrapped in a container.
  * @param {string} props.title - Block name. Will fall back to a name generated from the `blockName` attribute.
  *
@@ -116,12 +117,26 @@ export const GutenbergBlock = (props) => {
 			?.document?.body,
 		editorPortalElement = document.querySelector('.block-editor-iframe__scale-container > iframe')?.contentWindow
 			?.document?.body,
+		optionsPortalElement = document?.body,
 		title,
 	} = props;
 
 	return (
 		<>
-			{OptionsComponent && (
+			{OptionsComponent && optionsPortalElement && (
+				<PortalProvider portalElement={optionsPortalElement}>
+					<InspectorControls>
+						{!noOptionsContainer && (
+							<ContainerPanel title={title ?? upperFirst(props?.attributes?.blockName)}>
+								<OptionsComponent {...props} />
+							</ContainerPanel>
+						)}
+						{noOptionsContainer && <OptionsComponent {...props} />}
+					</InspectorControls>
+				</PortalProvider>
+			)}
+
+			{OptionsComponent && !optionsPortalElement && (
 				<InspectorControls>
 					{!noOptionsContainer && (
 						<ContainerPanel title={title ?? upperFirst(props?.attributes?.blockName)}>