carbon-react 158.14.2 → 158.14.3

package/esm/components/adaptive-sidebar/adaptive-sidebar.component.d.ts

@@ -21,8 +21,12 @@ export interface AdaptiveSidebarProps extends MarginProps, PaddingProps, Omit<Ta
     open: boolean;
     /** Whether to render the sidebar as a modal component instead of as an inline sidebar */
     renderAsModal?: boolean;
+    /** Prop to specify the aria-label of the component, applied when the component is rendered as a modal */
+    "aria-label"?: string;
+    /** Prop to specify the aria-labelledby property of the component, applied when the component is rendered as a modal */
+    "aria-labelledby"?: string;
     /** The width of the sidebar */
     width?: string;
 }
-export declare const AdaptiveSidebar: ({ adaptiveBreakpoint, backgroundColor, borderColor, children, height, hidden, open, renderAsModal, width, restoreFocusOnClose, ...props }: AdaptiveSidebarProps) => React.JSX.Element | null;
+export declare const AdaptiveSidebar: ({ adaptiveBreakpoint, backgroundColor, borderColor, children, height, hidden, open, renderAsModal, width, restoreFocusOnClose, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }: AdaptiveSidebarProps) => React.JSX.Element | null;
 export default AdaptiveSidebar;

package/esm/components/adaptive-sidebar/adaptive-sidebar.component.js

@@ -1 +1 @@
-import{jsx as e}from"react/jsx-runtime";import{useRef as r,useEffect as t}from"react";import{getColors as o,kebabToCamelCase as n}from"./__internal__/utils.js";import{Box as i}from"../box/box.component.js";import a from"../../style/utils/filter-styled-system-padding-props.js";import l from"../../style/utils/filter-styled-system-margin-props.js";import d from"../../hooks/__internal__/useIsAboveBreakpoint/useIsAboveBreakpoint.js";import{StyledSidebar as s,StyledAdaptiveSidebar as c}from"./adaptive-sidebar.style.js";function p(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function u(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{},o=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),o.forEach((function(r){p(e,r,t[r])}))}return e}function b(e,r){return r=null!=r?r:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);r.push.apply(r,t)}return r}(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))})),e}const f=p=>{var{adaptiveBreakpoint:f=768,backgroundColor:m="white",borderColor:O="none",children:y,height:h="100%",hidden:v=!1,open:g,renderAsModal:j=!1,width:w="320px",restoreFocusOnClose:k=!1}=p,P=function(e,r){if(null==e)return{};var t,o,n=function(e,r){if(null==e)return{};var t,o,n={},i=Object.keys(e);for(o=0;o<i.length;o++)t=i[o],r.indexOf(t)>=0||(n[t]=e[t]);return n}(e,r);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(o=0;o<i.length;o++)t=i[o],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(n[t]=e[t])}return n}(p,["adaptiveBreakpoint","backgroundColor","borderColor","children","height","hidden","open","renderAsModal","width","restoreFocusOnClose"]);const C=d(f),S=j||!C,x=r(null),_=Object.entries(o(m)).reduce(((e,[r,t])=>(e[n(r)]=t,e)),{});return t((()=>{x.current&&x.current.focus()}),[g]),t((()=>{v&&g&&document.querySelectorAll("[inert]").forEach((e=>{e.removeAttribute("inert")}))}),[v,g]),t((()=>{S&&document.dispatchEvent(new CustomEvent("adaptiveSidebarModalFocusIn",{bubbles:!0,detail:{source:"adaptiveSidebarModal"}}))}),[S]),S?e(s,{backgroundColor:m,className:"adaptive-sidebar-modal-view","data-role":"adaptive-sidebar-modal-view",enableBackgroundUI:g&&v,hidden:v,restoreFocusOnClose:k,open:g,p:0,ref:x,children:e(i,b(u({"data-role":"adaptive-sidebar-content-wrapper",height:"100%"},_),{children:y}))}):g?e(c,b(u({backgroundColor:m,borderColor:"none"===O?void 0:O,"data-element":"adaptive-sidebar","data-role":"adaptive-sidebar",height:h,hidden:v,ref:x,role:"region",tabIndex:-1,width:w},l(P),a(P)),{children:e(i,{"data-role":"adaptive-sidebar-content-wrapper",children:y})})):null};export{f as AdaptiveSidebar,f as default};
+import{jsx as e}from"react/jsx-runtime";import{useRef as r,useEffect as t}from"react";import{getColors as o,kebabToCamelCase as n}from"./__internal__/utils.js";import{Box as a}from"../box/box.component.js";import i from"../../style/utils/filter-styled-system-padding-props.js";import l from"../../style/utils/filter-styled-system-margin-props.js";import d from"../../hooks/__internal__/useIsAboveBreakpoint/useIsAboveBreakpoint.js";import{StyledSidebar as s,StyledAdaptiveSidebar as c}from"./adaptive-sidebar.style.js";function b(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function p(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{},o=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),o.forEach((function(r){b(e,r,t[r])}))}return e}function u(e,r){return r=null!=r?r:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);r.push.apply(r,t)}return r}(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))})),e}const f=b=>{var{adaptiveBreakpoint:f=768,backgroundColor:m="white",borderColor:y="none",children:O,height:h="100%",hidden:v=!1,open:g,renderAsModal:j=!1,width:w="320px",restoreFocusOnClose:k=!1,"aria-label":P,"aria-labelledby":C}=b,S=function(e,r){if(null==e)return{};var t,o,n=function(e,r){if(null==e)return{};var t,o,n={},a=Object.keys(e);for(o=0;o<a.length;o++)t=a[o],r.indexOf(t)>=0||(n[t]=e[t]);return n}(e,r);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(o=0;o<a.length;o++)t=a[o],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(n[t]=e[t])}return n}(b,["adaptiveBreakpoint","backgroundColor","borderColor","children","height","hidden","open","renderAsModal","width","restoreFocusOnClose","aria-label","aria-labelledby"]);const x=d(f),_=j||!x,A=r(null),E=Object.entries(o(m)).reduce(((e,[r,t])=>(e[n(r)]=t,e)),{});return t((()=>{A.current&&A.current.focus()}),[g]),t((()=>{v&&g&&document.querySelectorAll("[inert]").forEach((e=>{e.removeAttribute("inert")}))}),[v,g]),t((()=>{_&&document.dispatchEvent(new CustomEvent("adaptiveSidebarModalFocusIn",{bubbles:!0,detail:{source:"adaptiveSidebarModal"}}))}),[_]),_?e(s,{backgroundColor:m,className:"adaptive-sidebar-modal-view","data-role":"adaptive-sidebar-modal-view",enableBackgroundUI:g&&v,hidden:v,restoreFocusOnClose:k,open:g,p:0,ref:A,"aria-label":P,"aria-labelledby":C,children:e(a,u(p({"data-role":"adaptive-sidebar-content-wrapper",height:"100%"},E),{children:O}))}):g?e(c,u(p({backgroundColor:m,borderColor:"none"===y?void 0:y,"data-element":"adaptive-sidebar","data-role":"adaptive-sidebar",height:h,hidden:v,ref:A,role:"region",tabIndex:-1,width:w},l(S),i(S)),{children:e(a,{"data-role":"adaptive-sidebar-content-wrapper",children:O})})):null};export{f as AdaptiveSidebar,f as default};

package/lib/components/adaptive-sidebar/adaptive-sidebar.component.d.ts

@@ -21,8 +21,12 @@ export interface AdaptiveSidebarProps extends MarginProps, PaddingProps, Omit<Ta
     open: boolean;
     /** Whether to render the sidebar as a modal component instead of as an inline sidebar */
     renderAsModal?: boolean;
+    /** Prop to specify the aria-label of the component, applied when the component is rendered as a modal */
+    "aria-label"?: string;
+    /** Prop to specify the aria-labelledby property of the component, applied when the component is rendered as a modal */
+    "aria-labelledby"?: string;
     /** The width of the sidebar */
     width?: string;
 }
-export declare const AdaptiveSidebar: ({ adaptiveBreakpoint, backgroundColor, borderColor, children, height, hidden, open, renderAsModal, width, restoreFocusOnClose, ...props }: AdaptiveSidebarProps) => React.JSX.Element | null;
+export declare const AdaptiveSidebar: ({ adaptiveBreakpoint, backgroundColor, borderColor, children, height, hidden, open, renderAsModal, width, restoreFocusOnClose, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }: AdaptiveSidebarProps) => React.JSX.Element | null;
 export default AdaptiveSidebar;

package/lib/components/adaptive-sidebar/adaptive-sidebar.component.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),t=require("./__internal__/utils.js"),o=require("../box/box.component.js"),n=require("../../style/utils/filter-styled-system-padding-props.js"),i=require("../../style/utils/filter-styled-system-margin-props.js"),a=require("../../hooks/__internal__/useIsAboveBreakpoint/useIsAboveBreakpoint.js"),s=require("./adaptive-sidebar.style.js");function l(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function d(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{},o=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),o.forEach((function(r){l(e,r,t[r])}))}return e}function c(e,r){return r=null!=r?r:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);r.push.apply(r,t)}return r}(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))})),e}const u=l=>{var{adaptiveBreakpoint:u=768,backgroundColor:b="white",borderColor:p="none",children:f,height:y="100%",hidden:O=!1,open:v,renderAsModal:h=!1,width:j="320px",restoreFocusOnClose:g=!1}=l,m=function(e,r){if(null==e)return{};var t,o,n=function(e,r){if(null==e)return{};var t,o,n={},i=Object.keys(e);for(o=0;o<i.length;o++)t=i[o],r.indexOf(t)>=0||(n[t]=e[t]);return n}(e,r);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(o=0;o<i.length;o++)t=i[o],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(n[t]=e[t])}return n}(l,["adaptiveBreakpoint","backgroundColor","borderColor","children","height","hidden","open","renderAsModal","width","restoreFocusOnClose"]);const w=a.default(u),x=h||!w,k=r.useRef(null),C=Object.entries(t.getColors(b)).reduce(((e,[r,o])=>(e[t.kebabToCamelCase(r)]=o,e)),{});return r.useEffect((()=>{k.current&&k.current.focus()}),[v]),r.useEffect((()=>{O&&v&&document.querySelectorAll("[inert]").forEach((e=>{e.removeAttribute("inert")}))}),[O,v]),r.useEffect((()=>{x&&document.dispatchEvent(new CustomEvent("adaptiveSidebarModalFocusIn",{bubbles:!0,detail:{source:"adaptiveSidebarModal"}}))}),[x]),x?e.jsx(s.StyledSidebar,{backgroundColor:b,className:"adaptive-sidebar-modal-view","data-role":"adaptive-sidebar-modal-view",enableBackgroundUI:v&&O,hidden:O,restoreFocusOnClose:g,open:v,p:0,ref:k,children:e.jsx(o.Box,c(d({"data-role":"adaptive-sidebar-content-wrapper",height:"100%"},C),{children:f}))}):v?e.jsx(s.StyledAdaptiveSidebar,c(d({backgroundColor:b,borderColor:"none"===p?void 0:p,"data-element":"adaptive-sidebar","data-role":"adaptive-sidebar",height:y,hidden:O,ref:k,role:"region",tabIndex:-1,width:j},i.default(m),n.default(m)),{children:e.jsx(o.Box,{"data-role":"adaptive-sidebar-content-wrapper",children:f})})):null};exports.AdaptiveSidebar=u,exports.default=u;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),t=require("./__internal__/utils.js"),o=require("../box/box.component.js"),a=require("../../style/utils/filter-styled-system-padding-props.js"),n=require("../../style/utils/filter-styled-system-margin-props.js"),i=require("../../hooks/__internal__/useIsAboveBreakpoint/useIsAboveBreakpoint.js"),l=require("./adaptive-sidebar.style.js");function d(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function s(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{},o=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),o.forEach((function(r){d(e,r,t[r])}))}return e}function c(e,r){return r=null!=r?r:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);r.push.apply(r,t)}return r}(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))})),e}const u=d=>{var{adaptiveBreakpoint:u=768,backgroundColor:b="white",borderColor:p="none",children:f,height:y="100%",hidden:O=!1,open:v,renderAsModal:h=!1,width:j="320px",restoreFocusOnClose:g=!1,"aria-label":m,"aria-labelledby":w}=d,x=function(e,r){if(null==e)return{};var t,o,a=function(e,r){if(null==e)return{};var t,o,a={},n=Object.keys(e);for(o=0;o<n.length;o++)t=n[o],r.indexOf(t)>=0||(a[t]=e[t]);return a}(e,r);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);for(o=0;o<n.length;o++)t=n[o],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}(d,["adaptiveBreakpoint","backgroundColor","borderColor","children","height","hidden","open","renderAsModal","width","restoreFocusOnClose","aria-label","aria-labelledby"]);const k=i.default(u),C=h||!k,P=r.useRef(null),S=Object.entries(t.getColors(b)).reduce(((e,[r,o])=>(e[t.kebabToCamelCase(r)]=o,e)),{});return r.useEffect((()=>{P.current&&P.current.focus()}),[v]),r.useEffect((()=>{O&&v&&document.querySelectorAll("[inert]").forEach((e=>{e.removeAttribute("inert")}))}),[O,v]),r.useEffect((()=>{C&&document.dispatchEvent(new CustomEvent("adaptiveSidebarModalFocusIn",{bubbles:!0,detail:{source:"adaptiveSidebarModal"}}))}),[C]),C?e.jsx(l.StyledSidebar,{backgroundColor:b,className:"adaptive-sidebar-modal-view","data-role":"adaptive-sidebar-modal-view",enableBackgroundUI:v&&O,hidden:O,restoreFocusOnClose:g,open:v,p:0,ref:P,"aria-label":m,"aria-labelledby":w,children:e.jsx(o.Box,c(s({"data-role":"adaptive-sidebar-content-wrapper",height:"100%"},S),{children:f}))}):v?e.jsx(l.StyledAdaptiveSidebar,c(s({backgroundColor:b,borderColor:"none"===p?void 0:p,"data-element":"adaptive-sidebar","data-role":"adaptive-sidebar",height:y,hidden:O,ref:P,role:"region",tabIndex:-1,width:j},n.default(x),a.default(x)),{children:e.jsx(o.Box,{"data-role":"adaptive-sidebar-content-wrapper",children:f})})):null};exports.AdaptiveSidebar=u,exports.default=u;

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "carbon-react",
-  "version": "158.14.2",
+  "version": "158.14.3",
   "description": "A library of reusable React components for easily building user interfaces.",
   "files": [
     "lib",
     "esm"
   ],
   "scripts": {
+    "setup": "npm ci && npm run prepare",
     "start": "npm run generate-tokens:dev && node ./scripts/check_node_version.mjs && dotenvx run -- storybook dev -p 9001 -c .storybook",
     "start:strict-mode": "npm run generate-tokens:dev && node ./scripts/check_node_version.mjs && dotenvx run --env ENABLE_REACT_STRICT_MODE=true -- storybook dev -p 9001 -c .storybook",
     "test": "npm run generate-tokens:dev && jest --config=./jest.config.ts",
@@ -14,8 +15,6 @@
     "test-storybook": "test-storybook --url http://127.0.0.1:9001",
     "format": "prettier --write './{src,playwright}/**/*.{js,jsx,ts,tsx}'",
     "lint": "npm run generate-tokens:dev && eslint ./src ./playwright --max-warnings=636 --report-unused-disable-directives",
-    "precompile": "npm run generate-tokens && npm run type-check && npm run build",
-    "prepublishOnly": "npm run precompile",
     "build-storybook": "npm run generate-tokens:dev && dotenvx run -- storybook build -c .storybook",
     "build-storybook:prod": "npm run generate-tokens && dotenvx run -f .env.production -- storybook build -c .storybook",
     "start:static": "npx http-server -p 9001 ./storybook-static",
@@ -33,7 +32,7 @@
     "clear-playwright-coverage-json": "rimraf ./playwright/coverage/*.json",
     "test:ct:coverage": "npm run generate-tokens:dev && npm run clear-playwright-cache && npm run clear-playwright-coverage-json && rimraf ./playwright/coverage && playwright test -c playwright-ct.config.ts",
     "pw:coverage:report": "nyc report --reporter=html --report-dir=./playwright/coverage --temp-dir=./playwright/coverage",
-    "build": "npm run clean-lib && rollup -c \"./rollup.config.mjs\" && npm run build:generate-package-json-files && npm run build:move-svg && npm run build:types",
+    "build": "npm run clean-lib && npm run generate-tokens && npm run type-check && rollup -c \"./rollup.config.mjs\" && npm run build:generate-package-json-files && npm run build:move-svg && npm run build:types",
     "build:generate-package-json-files": "node ./scripts/generate_package_json_files/index.js",
     "build:move-svg": "node ./scripts/copy_svg/index.js",
     "generate-tokens": "rimraf ./src/components/tokens-wrapper/static-tokens && node ./scripts/generate_tokens/generate_tokens.mjs",
@@ -128,7 +127,7 @@
     "babel-jest": "^29.7.0",
     "babel-plugin-dev-expression": "^0.2.3",
     "browserslist": "^4.26.3",
-    "chromatic": "^6.17.4",
+    "chromatic": "13.3.3",
     "conventional-changelog-conventionalcommits": "^8.0.0",
     "core-js": "^3.45.1",
     "css-loader": "^6.8.1",