@squiz/generic-browser-lib 1.67.2 → 1.67.4

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @squiz/generic-browser-lib
 
+## 1.67.4
+
+### Patch Changes
+
+- cd70ef2: allow pass through of additional unspecified props to controlled component
+
+## 1.67.3
+
+### Patch Changes
+
+- a63dfe8: Revise dependencies
+
 ## 1.67.2
 
 ### Patch Changes

package/lib/PreviewPanel/PreviewPanel.d.ts

@@ -10,5 +10,8 @@ export interface PreviewPanelProps {
     onClose: () => void;
     ResourceComponent?: React.ElementType;
     selectionCallback?: (param: any) => void;
+    resourceComponentProps?: {
+        [x: string]: any;
+    };
 }
-export declare const PreviewPanel: ({ resource, previewModalOverlayProps, modalState, onSelect, onClose, ResourceComponent, selectionCallback, }: PreviewPanelProps) => React.JSX.Element;
+export declare const PreviewPanel: ({ resource, previewModalOverlayProps, modalState, onSelect, onClose, ResourceComponent, selectionCallback, resourceComponentProps, }: PreviewPanelProps) => React.JSX.Element;

package/lib/PreviewPanel/PreviewPanel.js

@@ -31,7 +31,7 @@ const react_1 = __importStar(require("react"));
 const react_responsive_1 = require("react-responsive");
 const Icon_1 = require("../Icons/Icon");
 const PreviewModal_1 = __importDefault(require("./PreviewModal"));
-const PreviewPanel = function ({ resource, previewModalOverlayProps, modalState, onSelect, onClose, ResourceComponent, selectionCallback, }) {
+const PreviewPanel = function ({ resource, previewModalOverlayProps, modalState, onSelect, onClose, ResourceComponent, selectionCallback, resourceComponentProps = {}, }) {
     // Watch the media size to see if we are on mobile size
     const isMobile = (0, react_responsive_1.useMediaQuery)({ query: '(max-width: 640px)' });
     // If we are on mobile and the selected resource changes show the preview panel modal.
@@ -41,7 +41,7 @@ const PreviewPanel = function ({ resource, previewModalOverlayProps, modalState,
         }
     }, [resource, isMobile]);
     const previewPanel = resource && (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement("div", { className: "flex flex-col grow" }, ResourceComponent && react_1.default.createElement(ResourceComponent, { resource: resource, selectionCallback: selectionCallback })),
+        react_1.default.createElement("div", { className: "flex flex-col grow" }, ResourceComponent && (react_1.default.createElement(ResourceComponent, { ...resourceComponentProps, resource: resource, selectionCallback: selectionCallback }))),
         react_1.default.createElement("div", { className: "flex justify-end border-t border-gray-300" },
             react_1.default.createElement("button", { type: "button", onClick: () => onSelect(resource), className: "rounded text-sm text-white bg-blue-300 py-2 px-2.5 m-5 font-bold" }, "Select"))));
     return (react_1.default.createElement("div", { className: "squiz-gb-scope h-full" },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@squiz/generic-browser-lib",
-  "version": "1.67.2",
+  "version": "1.67.4",
   "description": "Package with reusable components used by resource/component browsers",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -20,44 +20,41 @@
   },
   "dependencies": {
     "@mui/icons-material": "5.11.16",
+    "clsx": "^1.2.1",
     "react-aria": "3.23.1",
     "react-responsive": "9.0.2",
     "react-stately": "3.21.0"
   },
   "devDependencies": {
-    "@storybook/addon-essentials": "^7.5.3",
-    "@storybook/addon-interactions": "^7.5.3",
-    "@storybook/addon-links": "^7.5.3",
-    "@storybook/addon-styling": "1.0.1",
-    "@storybook/blocks": "^7.5.3",
-    "@storybook/react": "^7.5.3",
-    "@storybook/react-vite": "^7.5.3",
+    "@react-types/shared": "^3.23.1",
+    "@storybook/addon-essentials": "^7.6.19",
+    "@storybook/addon-interactions": "^7.6.19",
+    "@storybook/addon-links": "^7.6.19",
+    "@storybook/addon-styling": "1.3.7",
+    "@storybook/blocks": "^7.6.19",
+    "@storybook/react": "^7.6.19",
+    "@storybook/react-vite": "^7.6.19",
     "@storybook/testing-library": "0.0.14-next.1",
     "@testing-library/jest-dom": "5.16.5",
     "@testing-library/react": "14.0.0",
     "@testing-library/user-event": "14.4.3",
-    "@types/postcss-js": "4.0.0",
     "@types/react": "^18.2.45",
     "@types/react-dom": "^18.2.18",
-    "@vitejs/plugin-react-swc": "3.0.0",
-    "autoprefixer": "10.4.14",
+    "autoprefixer": "10.4.19",
     "esbuild": "0.17.17",
     "esbuild-sass-plugin": "2.8.0",
     "jest": "29.4.1",
     "jest-environment-jsdom": "29.4.1",
     "postcss": "8.4.31",
-    "postcss-loader": "7.2.4",
     "postcss-nested": "6.0.1",
     "postcss-prefix-selector": "1.16.0",
-    "prop-types": "15.8.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "rimraf": "4.1.2",
-    "storybook": "^7.5.3",
+    "storybook": "^7.6.19",
     "tailwindcss": "3.3.1",
     "ts-jest": "29.0.5",
     "typescript": "4.9.3",
-    "vite": "^4.5.0"
+    "vite": "^4.5.3"
   },
   "peerDependencies": {
     "@types/react": "^16.14.0 || ^17 || ^18",
@@ -74,6 +71,6 @@
     }
   },
   "volta": {
-    "node": "18.15.0"
+    "extends": "../../package.json"
   }
 }

package/src/PreviewPanel/PreviewPanel.tsx

@@ -15,6 +15,9 @@ export interface PreviewPanelProps {
   onClose: () => void;
   ResourceComponent?: React.ElementType;
   selectionCallback?: (param: any) => void;
+  resourceComponentProps?: {
+    [x: string]: any;
+  };
 }
 
 export const PreviewPanel = function ({
@@ -25,6 +28,7 @@ export const PreviewPanel = function ({
   onClose,
   ResourceComponent,
   selectionCallback,
+  resourceComponentProps = {},
 }: PreviewPanelProps) {
   // Watch the media size to see if we are on mobile size
   const isMobile = useMediaQuery({ query: '(max-width: 640px)' });
@@ -39,7 +43,9 @@ export const PreviewPanel = function ({
   const previewPanel = resource && (
     <>
       <div className="flex flex-col grow">
-        {ResourceComponent && <ResourceComponent resource={resource} selectionCallback={selectionCallback} />}
+        {ResourceComponent && (
+          <ResourceComponent {...resourceComponentProps} resource={resource} selectionCallback={selectionCallback} />
+        )}
       </div>
       <div className="flex justify-end border-t border-gray-300">
         <button