carbon-react 159.2.1 → 159.2.2-beta.1

package/esm/__spec_helper__/mock-match-media.d.ts

@@ -2,3 +2,5 @@ export declare const setupMatchMediaMock: () => void;
 export declare const mockMatchMedia: (matches: boolean) => {
     removeEventListener: jest.Mock<any, any, any>;
 };
+/** Simulate a media query change — updates `matches` and fires captured listeners */
+export declare const simulateMediaQueryChange: (matches: boolean) => void;

package/esm/__spec_helper__/mock-match-media.js

@@ -1 +1 @@
-let e=!1,t=!1;const n=jest.fn(),o=()=>{if("undefined"==typeof window)return;const o=()=>{};Object.defineProperty(global.window,"matchMedia",{writable:!0,value:e=>({matches:t,media:e,onchange:null,addEventListener:o,removeEventListener:n,dispatchEvent:o})}),e=!0},i=o=>{if(!e)throw new Error("window.matchMedia has not been mocked. Did you call setupMatchMediaMock()?");return t=o,{removeEventListener:n}};export{i as mockMatchMedia,o as setupMatchMediaMock};
+let e=!1,t=!1;const n=jest.fn();let o=new Set;const r=()=>{if("undefined"==typeof window)return;const r=()=>{};Object.defineProperty(global.window,"matchMedia",{writable:!0,value:e=>({get matches(){return t},media:e,onchange:null,addEventListener:(e,t)=>{o.add(t)},removeEventListener:(e,t)=>{o.delete(t),n()},dispatchEvent:r})}),e=!0},a=r=>{if(!e)throw new Error("window.matchMedia has not been mocked. Did you call setupMatchMediaMock()?");return t=r,o=new Set,{removeEventListener:n}},d=e=>{t=e,o.forEach((e=>e()))};export{a as mockMatchMedia,r as setupMatchMediaMock,d as simulateMediaQueryChange};

package/esm/components/dialog/__internal__/__next__/__internal__/tokens/index.d.ts

@@ -0,0 +1,3 @@
+export declare const containerSizeDialogMaxwidthS = "540px";
+export declare const containerSizeDialogMaxwidthM = "850px";
+export declare const containerSizeDialogMaxwidthL = "1080px";

package/esm/components/dialog/__internal__/__next__/__internal__/tokens/index.js

@@ -0,0 +1 @@
+const p="540px",x="850px",o="1080px";export{o as containerSizeDialogMaxwidthL,x as containerSizeDialogMaxwidthM,p as containerSizeDialogMaxwidthS};

package/esm/components/dialog/__internal__/__next__/dialog.config.d.ts

@@ -16,15 +16,15 @@ export declare const DIALOG_MIN_WIDTH = "288px";
  */
 export declare const DIALOG_SIZE_CONFIG: {
     readonly small: {
-        readonly maxWidth: string;
+        readonly maxWidth: "540px";
         readonly minWidth: "288px";
     };
     readonly medium: {
-        readonly maxWidth: string;
+        readonly maxWidth: "850px";
         readonly minWidth: "288px";
     };
     readonly large: {
-        readonly maxWidth: string;
+        readonly maxWidth: "1080px";
         readonly minWidth: "288px";
     };
     readonly fullscreen: {

package/esm/components/dialog/__internal__/__next__/dialog.config.js

@@ -1 +1 @@
-import{containerSizeDialogMaxwidthS as i,containerSizeDialogMaxwidthM as m,containerSizeDialogMaxwidthL as t}from"@sage/design-tokens-fusion/js/es6/components/container";const n="288px",e={small:{maxWidth:i,minWidth:n},medium:{maxWidth:m,minWidth:n},large:{maxWidth:t,minWidth:n},fullscreen:{maxWidth:"100%",minWidth:"100%"}},d="medium";export{d as DEFAULT_SIZE,n as DIALOG_MIN_WIDTH,e as DIALOG_SIZE_CONFIG};
+import{containerSizeDialogMaxwidthS as i,containerSizeDialogMaxwidthM as m,containerSizeDialogMaxwidthL as t}from"./__internal__/tokens/index.js";const d="288px",n={small:{maxWidth:i,minWidth:d},medium:{maxWidth:m,minWidth:d},large:{maxWidth:t,minWidth:d},fullscreen:{maxWidth:"100%",minWidth:"100%"}},e="medium";export{e as DEFAULT_SIZE,d as DIALOG_MIN_WIDTH,n as DIALOG_SIZE_CONFIG};

package/esm/components/dialog/__internal__/__next__/dialog.style.d.ts

@@ -1,9 +1,9 @@
 import type { DialogProps } from "./dialog.component";
 import { Size, ContentPaddingInterface } from "./dialog.config";
 declare const dialogSizes: {
-    readonly small: string;
-    readonly medium: string;
-    readonly large: string;
+    readonly small: "540px";
+    readonly medium: "850px";
+    readonly large: "1080px";
 };
 declare const smallScreenBreakpoint = "600px";
 /** Transient size prop shared across all styled dialog sub-components */

package/esm/global.d.ts

@@ -1,4 +1,5 @@
 import { type ModalList } from "./__internal__/modal/modal-manager";
+import { type QueryEntry } from "./hooks/useMediaQuery/useMediaQuery";
 
 declare global {
   module "*.png";
@@ -16,6 +17,7 @@ declare global {
       originalValues: string[];
       restoreValues?: (() => void) | null;
     };
+    __CARBON_INTERNALS_MEDIA_QUERY_CACHE?: Map<string, QueryEntry>;
   }
 }
 

package/esm/hooks/__internal__/useIsAboveBreakpoint/useIsAboveBreakpoint.js

@@ -1 +1 @@
-import e from"../../useMediaQuery/useMediaQuery.js";function i(i){const r=e(`(min-width:${i}px)`);if(i)return r}export{i as default};
+import e from"../../useMediaQuery/useMediaQuery.js";function i(i){const r=i?`(min-width:${i}px)`:"",t=e(r);if(r)return t}export{i as default};

package/esm/hooks/useMediaQuery/useMediaQuery.d.ts

@@ -1 +1,9 @@
-export default function useMediaQuery(queryInput: string): boolean | undefined;
+type Listener = () => void;
+export interface QueryEntry {
+    mediaQueryList: MediaQueryList;
+    listeners: Set<Listener>;
+    nativeHandler: () => void;
+    refCount: number;
+}
+declare const _default: (queryInput: string) => boolean | undefined;
+export default _default;

package/esm/hooks/useMediaQuery/useMediaQuery.js

@@ -1 +1 @@
-import{useState as e,useLayoutEffect as t}from"react";import{getWindow as r}from"../../__internal__/dom/globals.js";function n(n){const a=n.replace(/^@media( ?)/m,""),[o,c]=e(void 0);return t((()=>{const e=r();if(!e)return;const t=e.matchMedia(a),n=()=>c(t.matches);return n(),t.addEventListener("change",n),()=>{t.removeEventListener("change",n)}}),[a]),o}export{n as default};
+import{useState as e,useCallback as t,useLayoutEffect as r,useEffect as n}from"react";import{getWindow as s}from"../../__internal__/dom/globals.js";const a=s(),i=a?r:n,c="__CARBON_INTERNALS_MEDIA_QUERY_CACHE",o="__CARBON_MQ_",u=e=>(e[c]||(e[c]=new Map),e[c]),l=(e,t)=>{try{sessionStorage.setItem(`${o}${e}`,String(t))}catch(e){}};var d=r=>{var n;const s=(e=>e.replace(/\s+/g," ").replace(/:\s*/g,": ").replace(/\(\s*/g,"(").replace(/\s*\)/g,")").trim())(null!==(n=null==r?void 0:r.replace(/^@media( ?)/m,""))&&void 0!==n?n:""),[c,d]=e((()=>a&&s?(e=>{try{const t=sessionStorage.getItem(`${o}${e}`);return"true"===t||"false"!==t&&void 0}catch(e){return}})(s):void 0)),m=t((()=>{if(!a)return;const e=u(a).get(s);e&&(d(e.mediaQueryList.matches),l(s,e.mediaQueryList.matches))}),[s]);return i((()=>{if(!a||!s)return;const{matches:e,unsubscribe:t}=((e,t,r)=>{const{entry:n,cache:s}=((e,t)=>{const r=u(t),n=r.get(e);if(n)return{entry:n,cache:r};const s=t.matchMedia(e),a={mediaQueryList:s,listeners:new Set,nativeHandler:()=>{a.listeners.forEach((e=>e()))},refCount:0};return s.addEventListener("change",a.nativeHandler),r.set(e,a),{entry:a,cache:r}})(e,r);return n.refCount+=1,n.listeners.add(t),{matches:n.mediaQueryList.matches,unsubscribe:()=>{n.listeners.delete(t),n.refCount-=1,n.refCount||(n.mediaQueryList.removeEventListener("change",n.nativeHandler),s.delete(e))}}})(s,m,a);return d(e),l(s,e),t}),[s,m]),c};export{d as default};

package/lib/__spec_helper__/mock-match-media.d.ts

@@ -2,3 +2,5 @@ export declare const setupMatchMediaMock: () => void;
 export declare const mockMatchMedia: (matches: boolean) => {
     removeEventListener: jest.Mock<any, any, any>;
 };
+/** Simulate a media query change — updates `matches` and fires captured listeners */
+export declare const simulateMediaQueryChange: (matches: boolean) => void;

package/lib/__spec_helper__/mock-match-media.js

@@ -1 +1 @@
-"use strict";let e=!1,t=!1;const n=jest.fn();exports.mockMatchMedia=o=>{if(!e)throw new Error("window.matchMedia has not been mocked. Did you call setupMatchMediaMock()?");return t=o,{removeEventListener:n}},exports.setupMatchMediaMock=()=>{if("undefined"==typeof window)return;const o=()=>{};Object.defineProperty(global.window,"matchMedia",{writable:!0,value:e=>({matches:t,media:e,onchange:null,addEventListener:o,removeEventListener:n,dispatchEvent:o})}),e=!0};
+"use strict";let e=!1,t=!1;const n=jest.fn();let a=new Set;exports.mockMatchMedia=r=>{if(!e)throw new Error("window.matchMedia has not been mocked. Did you call setupMatchMediaMock()?");return t=r,a=new Set,{removeEventListener:n}},exports.setupMatchMediaMock=()=>{if("undefined"==typeof window)return;const r=()=>{};Object.defineProperty(global.window,"matchMedia",{writable:!0,value:e=>({get matches(){return t},media:e,onchange:null,addEventListener:(e,t)=>{a.add(t)},removeEventListener:(e,t)=>{a.delete(t),n()},dispatchEvent:r})}),e=!0},exports.simulateMediaQueryChange=e=>{t=e,a.forEach((e=>e()))};

package/lib/components/dialog/__internal__/__next__/__internal__/tokens/index.d.ts

@@ -0,0 +1,3 @@
+export declare const containerSizeDialogMaxwidthS = "540px";
+export declare const containerSizeDialogMaxwidthM = "850px";
+export declare const containerSizeDialogMaxwidthL = "1080px";

package/lib/components/dialog/__internal__/__next__/__internal__/tokens/index.js

@@ -0,0 +1 @@
+"use strict";exports.containerSizeDialogMaxwidthL="1080px",exports.containerSizeDialogMaxwidthM="850px",exports.containerSizeDialogMaxwidthS="540px";

package/lib/components/dialog/__internal__/__next__/__internal__/tokens/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "main": "./index.js",
+  "module": "../../../esm/components/dialog/__internal__/__next__/__internal__/tokens/index.js",
+  "types": "./index.d.ts"
+}

package/lib/components/dialog/__internal__/__next__/dialog.config.d.ts

@@ -16,15 +16,15 @@ export declare const DIALOG_MIN_WIDTH = "288px";
  */
 export declare const DIALOG_SIZE_CONFIG: {
     readonly small: {
-        readonly maxWidth: string;
+        readonly maxWidth: "540px";
         readonly minWidth: "288px";
     };
     readonly medium: {
-        readonly maxWidth: string;
+        readonly maxWidth: "850px";
         readonly minWidth: "288px";
     };
     readonly large: {
-        readonly maxWidth: string;
+        readonly maxWidth: "1080px";
         readonly minWidth: "288px";
     };
     readonly fullscreen: {

package/lib/components/dialog/__internal__/__next__/dialog.config.js

@@ -1 +1 @@
-"use strict";var i=require("@sage/design-tokens-fusion/js/es6/components/container");const e="288px",t={small:{maxWidth:i.containerSizeDialogMaxwidthS,minWidth:e},medium:{maxWidth:i.containerSizeDialogMaxwidthM,minWidth:e},large:{maxWidth:i.containerSizeDialogMaxwidthL,minWidth:e},fullscreen:{maxWidth:"100%",minWidth:"100%"}};exports.DEFAULT_SIZE="medium",exports.DIALOG_MIN_WIDTH=e,exports.DIALOG_SIZE_CONFIG=t;
+"use strict";var i=require("./__internal__/tokens/index.js");const t="288px",e={small:{maxWidth:i.containerSizeDialogMaxwidthS,minWidth:t},medium:{maxWidth:i.containerSizeDialogMaxwidthM,minWidth:t},large:{maxWidth:i.containerSizeDialogMaxwidthL,minWidth:t},fullscreen:{maxWidth:"100%",minWidth:"100%"}};exports.DEFAULT_SIZE="medium",exports.DIALOG_MIN_WIDTH=t,exports.DIALOG_SIZE_CONFIG=e;

package/lib/components/dialog/__internal__/__next__/dialog.style.d.ts

@@ -1,9 +1,9 @@
 import type { DialogProps } from "./dialog.component";
 import { Size, ContentPaddingInterface } from "./dialog.config";
 declare const dialogSizes: {
-    readonly small: string;
-    readonly medium: string;
-    readonly large: string;
+    readonly small: "540px";
+    readonly medium: "850px";
+    readonly large: "1080px";
 };
 declare const smallScreenBreakpoint = "600px";
 /** Transient size prop shared across all styled dialog sub-components */

package/lib/global.d.ts

@@ -1,4 +1,5 @@
 import { type ModalList } from "./__internal__/modal/modal-manager";
+import { type QueryEntry } from "./hooks/useMediaQuery/useMediaQuery";
 
 declare global {
   module "*.png";
@@ -16,6 +17,7 @@ declare global {
       originalValues: string[];
       restoreValues?: (() => void) | null;
     };
+    __CARBON_INTERNALS_MEDIA_QUERY_CACHE?: Map<string, QueryEntry>;
   }
 }
 

package/lib/hooks/__internal__/useIsAboveBreakpoint/useIsAboveBreakpoint.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../useMediaQuery/useMediaQuery.js");exports.default=function(r){const t=e.default(`(min-width:${r}px)`);if(r)return t};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../useMediaQuery/useMediaQuery.js");exports.default=function(r){const t=r?`(min-width:${r}px)`:"",u=e.default(t);if(t)return u};

package/lib/hooks/useMediaQuery/useMediaQuery.d.ts

@@ -1 +1,9 @@
-export default function useMediaQuery(queryInput: string): boolean | undefined;
+type Listener = () => void;
+export interface QueryEntry {
+    mediaQueryList: MediaQueryList;
+    listeners: Set<Listener>;
+    nativeHandler: () => void;
+    refCount: number;
+}
+declare const _default: (queryInput: string) => boolean | undefined;
+export default _default;

package/lib/hooks/useMediaQuery/useMediaQuery.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("../../__internal__/dom/globals.js");exports.default=function(r){const n=r.replace(/^@media( ?)/m,""),[a,s]=e.useState(void 0);return e.useLayoutEffect((()=>{const e=t.getWindow();if(!e)return;const r=e.matchMedia(n),a=()=>s(r.matches);return a(),r.addEventListener("change",a),()=>{r.removeEventListener("change",a)}}),[n]),a};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react");const t=require("../../__internal__/dom/globals.js").getWindow(),r=t?e.useLayoutEffect:e.useEffect,s="__CARBON_INTERNALS_MEDIA_QUERY_CACHE",n="__CARBON_MQ_",a=e=>(e[s]||(e[s]=new Map),e[s]),c=(e,t)=>{try{sessionStorage.setItem(`${n}${e}`,String(t))}catch(e){}};exports.default=s=>{var i;const u=(e=>e.replace(/\s+/g," ").replace(/:\s*/g,": ").replace(/\(\s*/g,"(").replace(/\s*\)/g,")").trim())(null!==(i=null==s?void 0:s.replace(/^@media( ?)/m,""))&&void 0!==i?i:""),[o,l]=e.useState((()=>t&&u?(e=>{try{const t=sessionStorage.getItem(`${n}${e}`);return"true"===t||"false"!==t&&void 0}catch(e){return}})(u):void 0)),d=e.useCallback((()=>{if(!t)return;const e=a(t).get(u);e&&(l(e.mediaQueryList.matches),c(u,e.mediaQueryList.matches))}),[u]);return r((()=>{if(!t||!u)return;const{matches:e,unsubscribe:r}=((e,t,r)=>{const{entry:s,cache:n}=((e,t)=>{const r=a(t),s=r.get(e);if(s)return{entry:s,cache:r};const n=t.matchMedia(e),c={mediaQueryList:n,listeners:new Set,nativeHandler:()=>{c.listeners.forEach((e=>e()))},refCount:0};return n.addEventListener("change",c.nativeHandler),r.set(e,c),{entry:c,cache:r}})(e,r);return s.refCount+=1,s.listeners.add(t),{matches:s.mediaQueryList.matches,unsubscribe:()=>{s.listeners.delete(t),s.refCount-=1,s.refCount||(s.mediaQueryList.removeEventListener("change",s.nativeHandler),n.delete(e))}}})(u,d,t);return l(e),c(u,e),r}),[u,d]),o};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "159.2.1",
+  "version": "159.2.2-beta.1",
   "description": "A library of reusable React components for easily building user interfaces.",
   "files": [
     "lib",