carbon-react 159.2.2 → 159.2.4

package/README.md

@@ -18,6 +18,12 @@ After installing `carbon-react`, add the Carbon agent skills to your project:
 npx skills add Sage/carbon
 ```
 
+The above script will pull the latest skills, if you need to version them you can do the following (please note skills were added in `v158.35.6`):
+
+```shell
+npx skills add https://github.com/Sage/carbon/tree/v158.50.0/skills/carbon-react
+```
+
 These skills give agents full context about the Carbon library, including component props, usage examples, deprecation notices, migration guides, and documentation references.
 
 ## Browser Support

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/vertical-menu/vertical-menu-trigger/vertical-menu-trigger.component.d.ts

@@ -9,5 +9,5 @@ export interface VerticalMenuTriggerProps extends PaddingProps, TagProps {
     /** Callback passed to the menu trigger */
     onClick: (ev: React.MouseEvent<HTMLButtonElement>) => void;
 }
-export declare const VerticalMenuTrigger: ({ height, p, onClick, children, ...rest }: VerticalMenuTriggerProps) => React.JSX.Element;
+export declare const VerticalMenuTrigger: ({ height, px, py, onClick, children, ...rest }: VerticalMenuTriggerProps) => React.JSX.Element;
 export default VerticalMenuTrigger;

package/esm/components/vertical-menu/vertical-menu-trigger/vertical-menu-trigger.component.js

@@ -1 +1 @@
-import{jsx as e}from"react/jsx-runtime";import"react";import t from"../../../__internal__/utils/helpers/tags/tags.js";import r from"../../../style/utils/filter-styled-system-padding-props.js";import{StyledVerticalMenuItem as n,StyledTitle as o}from"../vertical-menu.style.js";function i(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}const c=c=>{var{height:l="40px",p=2,onClick:s,children:u}=c,a=function(e,t){if(null==e)return{};var r,n,o=function(e,t){if(null==e)return{};var r,n,o={},i=Object.keys(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}(c,["height","p","onClick","children"]);const f=r(a);return e(n,(b=function(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},n=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),n.forEach((function(t){i(e,t,r[t])}))}return e}({onClick:s,as:"button",height:l,p,tabIndex:0},f,t("vertical-menu-trigger",a)),O=null!=(O={children:e(o,{children:u})})?O:{},Object.getOwnPropertyDescriptors?Object.defineProperties(b,Object.getOwnPropertyDescriptors(O)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(O)).forEach((function(e){Object.defineProperty(b,e,Object.getOwnPropertyDescriptor(O,e))})),b));var b,O};export{c as VerticalMenuTrigger,c as default};
+import{jsx as e}from"react/jsx-runtime";import"react";import t from"../../../__internal__/utils/helpers/tags/tags.js";import r from"../../../style/utils/filter-styled-system-padding-props.js";import{StyledVerticalMenuItem as n,StyledTitle as o}from"../vertical-menu.style.js";function i(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}const c=c=>{var{height:l="40px",px:p=2,py:s=1,onClick:u,children:a}=c,f=function(e,t){if(null==e)return{};var r,n,o=function(e,t){if(null==e)return{};var r,n,o={},i=Object.keys(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}(c,["height","px","py","onClick","children"]);const y=r(f);return e(n,(b=function(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},n=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),n.forEach((function(t){i(e,t,r[t])}))}return e}({onClick:u,as:"button",height:l,px:p,py:s,tabIndex:0},y,t("vertical-menu-trigger",f)),O=null!=(O={children:e(o,{children:a})})?O:{},Object.getOwnPropertyDescriptors?Object.defineProperties(b,Object.getOwnPropertyDescriptors(O)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(O)).forEach((function(e){Object.defineProperty(b,e,Object.getOwnPropertyDescriptor(O,e))})),b));var b,O};export{c as VerticalMenuTrigger,c as default};

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/vertical-menu/vertical-menu-trigger/vertical-menu-trigger.component.d.ts

@@ -9,5 +9,5 @@ export interface VerticalMenuTriggerProps extends PaddingProps, TagProps {
     /** Callback passed to the menu trigger */
     onClick: (ev: React.MouseEvent<HTMLButtonElement>) => void;
 }
-export declare const VerticalMenuTrigger: ({ height, p, onClick, children, ...rest }: VerticalMenuTriggerProps) => React.JSX.Element;
+export declare const VerticalMenuTrigger: ({ height, px, py, onClick, children, ...rest }: VerticalMenuTriggerProps) => React.JSX.Element;
 export default VerticalMenuTrigger;

package/lib/components/vertical-menu/vertical-menu-trigger/vertical-menu-trigger.component.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime");require("react");var t=require("../../../__internal__/utils/helpers/tags/tags.js"),r=require("../../../style/utils/filter-styled-system-padding-props.js"),n=require("../vertical-menu.style.js");function i(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}const o=o=>{var{height:c="40px",p:l=2,onClick:u,children:s}=o,a=function(e,t){if(null==e)return{};var r,n,i=function(e,t){if(null==e)return{};var r,n,i={},o=Object.keys(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||(i[r]=e[r]);return i}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(i[r]=e[r])}return i}(o,["height","p","onClick","children"]);const p=r.default(a);return e.jsx(n.StyledVerticalMenuItem,(b=function(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},n=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),n.forEach((function(t){i(e,t,r[t])}))}return e}({onClick:u,as:"button",height:c,p:l,tabIndex:0},p,t.default("vertical-menu-trigger",a)),y=null!=(y={children:e.jsx(n.StyledTitle,{children:s})})?y:{},Object.getOwnPropertyDescriptors?Object.defineProperties(b,Object.getOwnPropertyDescriptors(y)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(y)).forEach((function(e){Object.defineProperty(b,e,Object.getOwnPropertyDescriptor(y,e))})),b));var b,y};exports.VerticalMenuTrigger=o,exports.default=o;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime");require("react");var t=require("../../../__internal__/utils/helpers/tags/tags.js"),r=require("../../../style/utils/filter-styled-system-padding-props.js"),n=require("../vertical-menu.style.js");function i(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}const o=o=>{var{height:c="40px",px:l=2,py:u=1,onClick:s,children:p}=o,a=function(e,t){if(null==e)return{};var r,n,i=function(e,t){if(null==e)return{};var r,n,i={},o=Object.keys(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||(i[r]=e[r]);return i}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(i[r]=e[r])}return i}(o,["height","px","py","onClick","children"]);const y=r.default(a);return e.jsx(n.StyledVerticalMenuItem,(b=function(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},n=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),n.forEach((function(t){i(e,t,r[t])}))}return e}({onClick:s,as:"button",height:c,px:l,py:u,tabIndex:0},y,t.default("vertical-menu-trigger",a)),f=null!=(f={children:e.jsx(n.StyledTitle,{children:p})})?f:{},Object.getOwnPropertyDescriptors?Object.defineProperties(b,Object.getOwnPropertyDescriptors(f)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(f)).forEach((function(e){Object.defineProperty(b,e,Object.getOwnPropertyDescriptor(f,e))})),b));var b,f};exports.VerticalMenuTrigger=o,exports.default=o;

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.2",
+  "version": "159.2.4",
   "description": "A library of reusable React components for easily building user interfaces.",
   "files": [
     "lib",