@squiz/generic-browser-lib 1.40.1-alpha.1 → 1.40.1-alpha.11

package/lib/Modal/Modal.d.ts

@@ -6,5 +6,6 @@ export type ModalProps = {
     state: OverlayTriggerState;
     overlayProps: DOMAttributes<FocusableElement>;
     children: (titleProps: DOMAttributes<FocusableElement>) => React.ReactElement;
+    scope: 'squiz-gb-scope' | 'squiz-cb-scope' | 'squiz-rb-scope';
 };
-export declare function Modal({ isDismissable, state, overlayProps, children, ...props }: ModalProps): JSX.Element;
+export declare function Modal({ isDismissable, state, overlayProps, children, scope, ...props }: ModalProps): JSX.Element;

package/lib/Modal/Modal.js

@@ -35,11 +35,11 @@ function ModalContent({ children, ...props }) {
     const { dialogProps, titleProps } = (0, react_aria_1.useDialog)(props, ref);
     return (react_1.default.createElement("div", { ...dialogProps, ref: ref, className: "z-50 relative bg-white rounded-lg h-screen lg:h-[calc(100vh-3.5rem)] w-screen max-w-screen-lg outline-0" }, children(titleProps)));
 }
-function Modal({ isDismissable, state, overlayProps, children, ...props }) {
+function Modal({ isDismissable, state, overlayProps, children, scope, ...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" },
+        react_1.default.createElement("div", { className: 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.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { DOMAttributes, FocusableElement } from '@react-types/shared';
-export declare function ModalTrigger({ label, labelClasses, showLabel, containerClasses, icon, isDisabled, children, ...props }: {
+export declare function ModalTrigger({ label, labelClasses, showLabel, containerClasses, icon, isDisabled, children, scope, ...props }: {
     label: string;
     labelClasses?: string;
     containerClasses?: string;
@@ -8,4 +8,5 @@ export declare function ModalTrigger({ label, labelClasses, showLabel, container
     icon?: React.ReactNode;
     isDisabled?: boolean;
     children: (onClose: () => void, titleProps: DOMAttributes<FocusableElement>) => React.ReactElement;
+    scope: 'squiz-gb-scope' | 'squiz-cb-scope' | 'squiz-rb-scope';
 }): JSX.Element;

package/lib/Modal/ModalTrigger.js

@@ -10,18 +10,18 @@ const react_stately_1 = require("react-stately");
 const clsx_1 = __importDefault(require("clsx"));
 const Modal_1 = require("./Modal");
 const ModalOpeningButton_1 = require("./ModalOpeningButton");
-function ModalTrigger({ label, labelClasses, showLabel, containerClasses, icon, isDisabled, children, ...props }) {
+function ModalTrigger({ label, labelClasses, showLabel, containerClasses, icon, isDisabled, children, scope, ...props }) {
     const state = (0, react_stately_1.useOverlayTriggerState)(props);
     const { triggerProps, overlayProps } = (0, react_aria_1.useOverlayTrigger)({ type: 'dialog' }, state);
     let ariaAttr = {};
     if (!showLabel) {
         ariaAttr = { ...ariaAttr, 'aria-label': label };
     }
-    return (react_1.default.createElement("div", { className: "squiz-gb-scope" },
+    return (react_1.default.createElement("div", { className: 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,
             showLabel && react_1.default.createElement("span", { className: `${labelClasses || 'ml-1 text-sm font-semibold leading-4'}` }, label)),
-        state.isOpen && (react_1.default.createElement(Modal_1.Modal, { isDismissable: true, state: state, overlayProps: overlayProps }, (titleProps) => children(state.close, titleProps)))));
+        state.isOpen && (react_1.default.createElement(Modal_1.Modal, { isDismissable: true, state: state, overlayProps: overlayProps, scope: scope }, (titleProps) => children(state.close, titleProps)))));
 }
 exports.ModalTrigger = ModalTrigger;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@squiz/generic-browser-lib",
-  "version": "1.40.1-alpha.1",
+  "version": "1.40.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": "383f1a667a2460518b4e85481a143ef3ddbc41fa"
+  "gitHead": "b4ee5c46c5f57fbefa4dedf813a4bd9f5fbf037b"
 }

package/src/Modal/Modal.spec.tsx

@@ -8,7 +8,7 @@ describe('Modal', () => {
   it('Modal is closed by default', async () => {
     render(
       <div>
-        <ModalTrigger label={'Open testing modal'} showLabel>
+        <ModalTrigger label={'Open testing modal'} showLabel scope="squiz-gb-scope">
           {(onClose, titleProps) => (
             <div data-testingid="modal">
               <div {...titleProps}>Testing</div>
@@ -28,7 +28,7 @@ describe('Modal', () => {
   it('Modal should render label', async () => {
     render(
       <div>
-        <ModalTrigger label={'Open testing modal'} showLabel={false}>
+        <ModalTrigger label={'Open testing modal'} showLabel={false} scope="squiz-gb-scope">
           {(onClose, titleProps) => (
             <div data-testingid="modal">
               <div {...titleProps}>Testing</div>
@@ -47,7 +47,7 @@ describe('Modal', () => {
   it('Modal opens when triggered', async () => {
     render(
       <div>
-        <ModalTrigger label={'Open testing modal'} showLabel>
+        <ModalTrigger label={'Open testing modal'} showLabel scope="squiz-gb-scope">
           {(onClose, titleProps) => (
             <div data-testid="modal">
               <div {...titleProps}>Testing</div>
@@ -72,7 +72,7 @@ describe('Modal', () => {
   it('Clicking outside the modal closes it', async () => {
     render(
       <div data-testid="outside">
-        <ModalTrigger label={'Open testing modal'} showLabel>
+        <ModalTrigger label={'Open testing modal'} showLabel scope="squiz-gb-scope">
           {(onClose, titleProps) => (
             <div data-testid="modal">
               <div {...titleProps}>Testing</div>
@@ -103,7 +103,7 @@ describe('Modal', () => {
   it('ESC closes modal', async () => {
     render(
       <div data-testid="outside">
-        <ModalTrigger label={'Open testing modal'} showLabel>
+        <ModalTrigger label={'Open testing modal'} showLabel scope="squiz-gb-scope">
           {(onClose, titleProps) => (
             <div data-testid="modal">
               <div {...titleProps}>Testing</div>
@@ -134,7 +134,7 @@ describe('Modal', () => {
   it('Invoking onClose function closes modal', async () => {
     render(
       <div>
-        <ModalTrigger label={'Open testing modal'} showLabel>
+        <ModalTrigger label={'Open testing modal'} showLabel scope="squiz-gb-scope">
           {(onClose, titleProps) => (
             <div data-testid="modal">
               <div {...titleProps}>Testing</div>
@@ -165,7 +165,7 @@ describe('Modal', () => {
   it('Modal does not open if modal trigger button is disabled', async () => {
     render(
       <div>
-        <ModalTrigger label={'Open testing modal'} showLabel isDisabled={true}>
+        <ModalTrigger label={'Open testing modal'} showLabel isDisabled={true} scope="squiz-gb-scope">
           {(onClose, titleProps) => (
             <div data-testid="modal">
               <div {...titleProps}>Testing</div>
@@ -191,7 +191,7 @@ describe('Modal', () => {
     render(
       <div>
         <button />
-        <ModalTrigger label={'Open testing modal'} showLabel>
+        <ModalTrigger label={'Open testing modal'} showLabel scope="squiz-gb-scope">
           {(onClose, titleProps) => (
             <div data-testid="modal">
               <div {...titleProps}>Testing</div>
@@ -225,7 +225,7 @@ describe('Modal', () => {
     render(
       <div>
         <button />
-        <ModalTrigger label={'Open testing modal'} showLabel>
+        <ModalTrigger label={'Open testing modal'} showLabel scope="squiz-gb-scope">
           {(onClose, titleProps) => (
             <div data-testid="modal">
               <div data-testid="title" {...titleProps}>
@@ -256,7 +256,7 @@ describe('Modal', () => {
     render(
       <div>
         <button />
-        <ModalTrigger label={'Open testing modal'} showLabel>
+        <ModalTrigger label={'Open testing modal'} showLabel scope="squiz-gb-scope">
           {(onClose, titleProps) => {
             titleId = titleProps.id;
 

package/src/Modal/Modal.tsx

@@ -33,14 +33,15 @@ export type ModalProps = {
   state: OverlayTriggerState;
   overlayProps: DOMAttributes<FocusableElement>;
   children: (titleProps: DOMAttributes<FocusableElement>) => React.ReactElement; // Returns the title props from the 'ModalContent'
+  scope: 'squiz-gb-scope' | 'squiz-cb-scope' | 'squiz-rb-scope';
 };
-export function Modal({ isDismissable, state, overlayProps, children, ...props }: ModalProps) {
+export function Modal({ isDismissable, state, overlayProps, children, scope, ...props }: ModalProps) {
   const ref = useRef<HTMLDivElement>(null);
   const { modalProps, underlayProps } = useModalOverlay({ isDismissable, ...props }, state, ref);
 
   return (
     <Overlay>
-      <div className="squiz-gb-scope">
+      <div className={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

@@ -15,6 +15,7 @@ export function ModalTrigger({
   icon,
   isDisabled,
   children,
+  scope,
   ...props
 }: {
   label: string;
@@ -24,6 +25,7 @@ export function ModalTrigger({
   icon?: React.ReactNode;
   isDisabled?: boolean;
   children: (onClose: () => void, titleProps: DOMAttributes<FocusableElement>) => React.ReactElement; // Child needs to be a functions which generates the 'content' so we can pass the onClose function and title aria props
+  scope: 'squiz-gb-scope' | 'squiz-cb-scope' | 'squiz-rb-scope';
 }) {
   const state = useOverlayTriggerState(props);
   const { triggerProps, overlayProps } = useOverlayTrigger({ type: 'dialog' }, state);
@@ -34,7 +36,7 @@ export function ModalTrigger({
   }
 
   return (
-    <div className="squiz-gb-scope">
+    <div className={scope}>
       <ModalOpeningButton
         type="button"
         {...triggerProps}
@@ -52,7 +54,7 @@ export function ModalTrigger({
         {showLabel && <span className={`${labelClasses || 'ml-1 text-sm font-semibold leading-4'}`}>{label}</span>}
       </ModalOpeningButton>
       {state.isOpen && (
-        <Modal isDismissable state={state} overlayProps={overlayProps}>
+        <Modal isDismissable state={state} overlayProps={overlayProps} scope={scope}>
           {(titleProps) => children(state.close, titleProps)}
         </Modal>
       )}