@squiz/generic-browser-lib 1.39.1-alpha.10 → 1.39.1-alpha.11

package/lib/Modal/Modal.js

@@ -39,7 +39,7 @@ function Modal({ isDismissable, state, overlayProps, children, ...props }) {
     const ref = (0, react_1.useRef)(null);
     const { modalProps, underlayProps } = (0, react_aria_1.useModalOverlay)({ isDismissable, ...props }, state, ref);
     return (react_1.default.createElement(react_aria_1.Overlay, null,
-        react_1.default.createElement("div", { className: "squiz-gb-scope squiz-cb-scope squiz-rb-scope" },
+        react_1.default.createElement("div", { className: "squiz-gb-scope" },
             react_1.default.createElement("div", { ...underlayProps, className: "h-full z-[9998] fixed inset-0 before:z-40 before:fixed before:inset-0 before:bg-black before:bg-opacity-25" },
                 react_1.default.createElement("div", { ...modalProps, ref: ref, className: "h-full flex items-center justify-center" },
                     react_1.default.createElement(ModalContent, { ...overlayProps }, (titleProps) => children(titleProps)))))));

package/lib/Modal/ModalTrigger.js

@@ -17,7 +17,7 @@ function ModalTrigger({ label, labelClasses, showLabel, containerClasses, icon,
     if (!showLabel) {
         ariaAttr = { ...ariaAttr, 'aria-label': label };
     }
-    return (react_1.default.createElement(react_1.default.Fragment, null,
+    return (react_1.default.createElement("div", { className: "squiz-gb-scope" },
         react_1.default.createElement(ModalOpeningButton_1.ModalOpeningButton, { type: "button", ...triggerProps, ...ariaAttr, isDisabled: isDisabled, className: (0, clsx_1.default)(`${containerClasses ||
                 'flex p-1 px-1.5 rounded mr-auto text-blue-300 hover:bg-blue-100 focus:bg-blue-100 focus:outline-none'}`, isDisabled && 'hover:bg-transparent cursor-not-allowed text-gray-600') },
             icon,

package/lib/PreviewPanel/PreviewPanel.js

@@ -44,7 +44,7 @@ const PreviewPanel = function ({ resource, previewModalOverlayProps, modalState,
         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 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" }, "Select"))));
-    return (react_1.default.createElement(react_1.default.Fragment, null,
+    return (react_1.default.createElement("div", { className: "squiz-gb-scope h-full" },
         !isMobile && react_1.default.createElement("h3", { className: "sr-only" }, "Resource Details"),
         resource === null && (react_1.default.createElement("div", { className: "max-sm:hidden flex flex-col h-full" },
             react_1.default.createElement("div", { className: "flex flex-col grow items-center mt-20 mx-20" },

package/lib/ResourceItem/ResourceItem.js

@@ -13,7 +13,7 @@ const ResourceItem = ({ item, selected, label, type, childCount, previewModalSta
     const { triggerProps, overlayProps } = (0, react_aria_1.useOverlayTrigger)({ type: 'dialog' }, previewModalState);
     const isDisabled = allowedTypes !== undefined && !allowedTypes.includes(type);
     const title = isDisabled ? "You can't select this item" : label;
-    return (react_1.default.createElement("li", { className: `flex items-stretch p-1 bg-white border-1 border-grey-200 min-h-[64px] ${className}`, key: (0, uuid_1.uuid)() },
+    return (react_1.default.createElement("li", { className: `squiz-gb-scope flex items-stretch p-1 bg-white border-1 border-grey-200 min-h-[64px] ${className}`, key: (0, uuid_1.uuid)() },
         react_1.default.createElement(ModalOpeningButton_1.ModalOpeningButton, { type: "button", ...triggerProps, isDisabled: isDisabled, onPress: () => onSelect(item, overlayProps), "aria-label": childCount === undefined ? `Drill down to ${label} children` : '', className: `
           relative grow flex items-center px-4 py-2 rounded outline-0 ${selected ? 'bg-blue-100 text-blue-400' : ''} ${childCount !== undefined && childCount > 0 ? 'mr-2' : ''} ${isDisabled ? 'font-normal text-gray-600 cursor-not-allowed' : 'hover:bg-gray-50 focus:bg-gray-50'}
         `, title: title },

package/lib/ResourceState/ResourceState.js

@@ -10,7 +10,7 @@ const ResourceState = function ({ state, message, handleReload, showButton = tru
     const RetryButton = (react_1.default.createElement("button", { type: "button", onClick: handleReload, className: "flex flex-row items-center justify-center gap-3 bg-black bg-opacity-10 h-9 mt-3 rounded text-md font-bold text-gray-700 py-2 px-3" },
         react_1.default.createElement(Icon_1.Icon, { icon: state === 'empty' ? 'back' : 'retry', "aria-hidden": true }),
         state === 'empty' ? 'Back to source list' : 'Try again'));
-    return (react_1.default.createElement("div", { className: "flex flex-col items-center rounded-lg py-8 bg-white h-204 gap-3" },
+    return (react_1.default.createElement("div", { className: "squiz-gb-scope flex flex-col items-center rounded-lg py-8 bg-white h-204 gap-3" },
         react_1.default.createElement(Icon_1.Icon, { icon: state, "aria-hidden": true }),
         react_1.default.createElement("span", { className: "text-md text-gray-800 font-semibold leading-5" }, state === 'empty' ? 'There are no items to display' : message),
         showButton && RetryButton));

package/lib/Spinner/Spinner.js

@@ -7,7 +7,7 @@ exports.Spinner = void 0;
 const react_1 = __importDefault(require("react"));
 const clsx_1 = __importDefault(require("clsx"));
 const Spinner = ({ size = 'sm', className, label = 'Loading' }) => {
-    return (react_1.default.createElement("div", { className: "spinner__wrapper text-gray-600", "aria-label": label },
+    return (react_1.default.createElement("div", { className: "squiz-gb-scope spinner__wrapper text-gray-600", "aria-label": label },
         react_1.default.createElement("div", { className: (0, clsx_1.default)('spinner', size && `spinner--${size}`, className), role: "status" })));
 };
 exports.Spinner = Spinner;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@squiz/generic-browser-lib",
-  "version": "1.39.1-alpha.10",
+  "version": "1.39.1-alpha.11",
   "description": "Package with reusable components used by resource/component browsers",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -72,5 +72,5 @@
   "volta": {
     "node": "18.15.0"
   },
-  "gitHead": "0087495957856a1d1b15227f3a450c6261ad5c5a"
+  "gitHead": "788f8adc16c48ce3121dca04ca370ebc2c537758"
 }

package/postcss.config.js

@@ -6,6 +6,12 @@ module.exports = {
     require('postcss-prefix-selector')({
       prefix: '.squiz-gb-scope',
       includeFiles: ['./src/index.scss'],
+      transform(prefix, selector, prefixedSelector, filePath, rule) {
+        if (selector.match(/(squiz-gb-scope)/)) {
+          return selector;
+        }
+        return prefixedSelector;
+      },
     }),
   ],
 };

package/src/Modal/Modal.tsx

@@ -40,7 +40,7 @@ export function Modal({ isDismissable, state, overlayProps, children, ...props }
 
   return (
     <Overlay>
-      <div className="squiz-gb-scope squiz-cb-scope squiz-rb-scope">
+      <div className="squiz-gb-scope">
         <div
           {...underlayProps}
           className="h-full z-[9998] fixed inset-0 before:z-40 before:fixed before:inset-0 before:bg-black before:bg-opacity-25"

package/src/Modal/ModalTrigger.tsx

@@ -34,7 +34,7 @@ export function ModalTrigger({
   }
 
   return (
-    <>
+    <div className="squiz-gb-scope">
       <ModalOpeningButton
         type="button"
         {...triggerProps}
@@ -56,6 +56,6 @@ export function ModalTrigger({
           {(titleProps) => children(state.close, titleProps)}
         </Modal>
       )}
-    </>
+    </div>
   );
 }

package/src/PreviewPanel/PreviewPanel.tsx

@@ -54,7 +54,7 @@ export const PreviewPanel = function ({
   );
 
   return (
-    <>
+    <div className="squiz-gb-scope h-full">
       {/* Dialog has its own title */}
       {!isMobile && <h3 className="sr-only">Resource Details</h3>}
 
@@ -82,6 +82,6 @@ export const PreviewPanel = function ({
 
       {/* If not mobile, just print the details out */}
       {resource && !isMobile && <div className="flex flex-col h-full">{previewPanel}</div>}
-    </>
+    </div>
   );
 };

package/src/ResourceItem/ResourceItem.tsx

@@ -43,7 +43,10 @@ const ResourceItem = <T,>({
   const title = isDisabled ? "You can't select this item" : label;
 
   return (
-    <li className={`flex items-stretch p-1 bg-white border-1 border-grey-200 min-h-[64px] ${className}`} key={uuid()}>
+    <li
+      className={`squiz-gb-scope flex items-stretch p-1 bg-white border-1 border-grey-200 min-h-[64px] ${className}`}
+      key={uuid()}
+    >
       <ModalOpeningButton
         type="button"
         {...triggerProps}

package/src/ResourceState/ResourceState.tsx

@@ -21,7 +21,7 @@ const ResourceState = function ({ state, message, handleReload, showButton = tru
   );
 
   return (
-    <div className="flex flex-col items-center rounded-lg py-8 bg-white h-204 gap-3">
+    <div className="squiz-gb-scope flex flex-col items-center rounded-lg py-8 bg-white h-204 gap-3">
       <Icon icon={state as IconOptions} aria-hidden />
       {/* Message */}
       <span className="text-md text-gray-800 font-semibold leading-5">

package/src/Spinner/Spinner.tsx

@@ -9,7 +9,7 @@ export type SpinnerProps = {
 
 export const Spinner = ({ size = 'sm', className, label = 'Loading' }: SpinnerProps): ReactElement => {
   return (
-    <div className="spinner__wrapper text-gray-600" aria-label={label}>
+    <div className="squiz-gb-scope spinner__wrapper text-gray-600" aria-label={label}>
       <div className={clsx('spinner', size && `spinner--${size}`, className)} role="status" />
     </div>
   );