carbon-react 158.14.2 → 158.14.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm/components/adaptive-sidebar/adaptive-sidebar.component.d.ts +5 -1
- package/esm/components/adaptive-sidebar/adaptive-sidebar.component.js +1 -1
- package/esm/components/adaptive-sidebar/adaptive-sidebar.style.js +1 -1
- package/lib/components/adaptive-sidebar/adaptive-sidebar.component.d.ts +5 -1
- package/lib/components/adaptive-sidebar/adaptive-sidebar.component.js +1 -1
- package/lib/components/adaptive-sidebar/adaptive-sidebar.style.js +1 -1
- package/package.json +5 -6
|
@@ -21,8 +21,12 @@ export interface AdaptiveSidebarProps extends MarginProps, PaddingProps, Omit<Ta
|
|
|
21
21
|
open: boolean;
|
|
22
22
|
/** Whether to render the sidebar as a modal component instead of as an inline sidebar */
|
|
23
23
|
renderAsModal?: boolean;
|
|
24
|
+
/** Prop to specify the aria-label of the component, applied when the component is rendered as a modal */
|
|
25
|
+
"aria-label"?: string;
|
|
26
|
+
/** Prop to specify the aria-labelledby property of the component, applied when the component is rendered as a modal */
|
|
27
|
+
"aria-labelledby"?: string;
|
|
24
28
|
/** The width of the sidebar */
|
|
25
29
|
width?: string;
|
|
26
30
|
}
|
|
27
|
-
export declare const AdaptiveSidebar: ({ adaptiveBreakpoint, backgroundColor, borderColor, children, height, hidden, open, renderAsModal, width, restoreFocusOnClose, ...props }: AdaptiveSidebarProps) => React.JSX.Element | null;
|
|
31
|
+
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;
|
|
28
32
|
export default AdaptiveSidebar;
|
|
@@ -1 +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
|
|
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 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};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import o,{css as e}from"styled-components";import{margin as t,padding as i}from"styled-system";import{Box as d}from"../box/box.component.js";import{Sidebar as
|
|
1
|
+
import o,{css as e}from"styled-components";import{margin as t,padding as i}from"styled-system";import{Box as d}from"../box/box.component.js";import{Sidebar as n}from"../sidebar/sidebar.component.js";import{getColors as r}from"./__internal__/utils.js";const a=o(d).withConfig({displayName:"adaptive-sidebar.style__StyledAdaptiveSidebar",componentId:"sc-6ef01593-0"})(["",";"],(({backgroundColor:o,borderColor:d,height:n,hidden:a,width:s})=>e([""," "," "," max-height:",";max-width:",";min-width:",";overflow-y:auto;outline:none;"," ",""],r(o),d&&e(["border-left:1px solid var(",");"],d),a&&e(["display:none;"]),n,s,s,t,i))),s=o(n).withConfig({displayName:"adaptive-sidebar.style__StyledSidebar",componentId:"sc-6ef01593-1"})([""," ",""],(({hidden:o})=>e(["",""],o&&e(["display:none;"]))),(({backgroundColor:o})=>e(['div[data-element="sidebar-content"]{',"}"],r(o))));export{a as StyledAdaptiveSidebar,s as StyledSidebar};
|
|
@@ -21,8 +21,12 @@ export interface AdaptiveSidebarProps extends MarginProps, PaddingProps, Omit<Ta
|
|
|
21
21
|
open: boolean;
|
|
22
22
|
/** Whether to render the sidebar as a modal component instead of as an inline sidebar */
|
|
23
23
|
renderAsModal?: boolean;
|
|
24
|
+
/** Prop to specify the aria-label of the component, applied when the component is rendered as a modal */
|
|
25
|
+
"aria-label"?: string;
|
|
26
|
+
/** Prop to specify the aria-labelledby property of the component, applied when the component is rendered as a modal */
|
|
27
|
+
"aria-labelledby"?: string;
|
|
24
28
|
/** The width of the sidebar */
|
|
25
29
|
width?: string;
|
|
26
30
|
}
|
|
27
|
-
export declare const AdaptiveSidebar: ({ adaptiveBreakpoint, backgroundColor, borderColor, children, height, hidden, open, renderAsModal, width, restoreFocusOnClose, ...props }: AdaptiveSidebarProps) => React.JSX.Element | null;
|
|
31
|
+
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;
|
|
28
32
|
export default AdaptiveSidebar;
|
|
@@ -1 +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"),
|
|
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"),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;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var e=require("styled-components"),d=require("styled-system"),t=require("../box/box.component.js"),i=require("../sidebar/sidebar.component.js"),
|
|
1
|
+
"use strict";var e=require("styled-components"),d=require("styled-system"),t=require("../box/box.component.js"),i=require("../sidebar/sidebar.component.js"),o=require("./__internal__/utils.js");function s(e){return e&&e.__esModule?e:{default:e}}var r=s(e);const a=r.default(t.Box).withConfig({displayName:"adaptive-sidebar.style__StyledAdaptiveSidebar",componentId:"sc-6ef01593-0"})(["",";"],(({backgroundColor:t,borderColor:i,height:s,hidden:r,width:a})=>e.css([""," "," "," max-height:",";max-width:",";min-width:",";overflow-y:auto;outline:none;"," ",""],o.getColors(t),i&&e.css(["border-left:1px solid var(",");"],i),r&&e.css(["display:none;"]),s,a,a,d.margin,d.padding))),n=r.default(i.Sidebar).withConfig({displayName:"adaptive-sidebar.style__StyledSidebar",componentId:"sc-6ef01593-1"})([""," ",""],(({hidden:d})=>e.css(["",""],d&&e.css(["display:none;"]))),(({backgroundColor:d})=>e.css(['div[data-element="sidebar-content"]{',"}"],o.getColors(d))));exports.StyledAdaptiveSidebar=a,exports.StyledSidebar=n;
|
package/package.json
CHANGED
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "carbon-react",
|
|
3
|
-
"version": "158.14.
|
|
3
|
+
"version": "158.14.4",
|
|
4
4
|
"description": "A library of reusable React components for easily building user interfaces.",
|
|
5
5
|
"files": [
|
|
6
6
|
"lib",
|
|
7
7
|
"esm"
|
|
8
8
|
],
|
|
9
9
|
"scripts": {
|
|
10
|
+
"setup": "npm ci && npm run prepare",
|
|
10
11
|
"start": "npm run generate-tokens:dev && node ./scripts/check_node_version.mjs && dotenvx run -- storybook dev -p 9001 -c .storybook",
|
|
11
12
|
"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",
|
|
12
13
|
"test": "npm run generate-tokens:dev && jest --config=./jest.config.ts",
|
|
@@ -14,8 +15,6 @@
|
|
|
14
15
|
"test-storybook": "test-storybook --url http://127.0.0.1:9001",
|
|
15
16
|
"format": "prettier --write './{src,playwright}/**/*.{js,jsx,ts,tsx}'",
|
|
16
17
|
"lint": "npm run generate-tokens:dev && eslint ./src ./playwright --max-warnings=636 --report-unused-disable-directives",
|
|
17
|
-
"precompile": "npm run generate-tokens && npm run type-check && npm run build",
|
|
18
|
-
"prepublishOnly": "npm run precompile",
|
|
19
18
|
"build-storybook": "npm run generate-tokens:dev && dotenvx run -- storybook build -c .storybook",
|
|
20
19
|
"build-storybook:prod": "npm run generate-tokens && dotenvx run -f .env.production -- storybook build -c .storybook",
|
|
21
20
|
"start:static": "npx http-server -p 9001 ./storybook-static",
|
|
@@ -33,7 +32,7 @@
|
|
|
33
32
|
"clear-playwright-coverage-json": "rimraf ./playwright/coverage/*.json",
|
|
34
33
|
"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",
|
|
35
34
|
"pw:coverage:report": "nyc report --reporter=html --report-dir=./playwright/coverage --temp-dir=./playwright/coverage",
|
|
36
|
-
"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",
|
|
35
|
+
"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",
|
|
37
36
|
"build:generate-package-json-files": "node ./scripts/generate_package_json_files/index.js",
|
|
38
37
|
"build:move-svg": "node ./scripts/copy_svg/index.js",
|
|
39
38
|
"generate-tokens": "rimraf ./src/components/tokens-wrapper/static-tokens && node ./scripts/generate_tokens/generate_tokens.mjs",
|
|
@@ -114,7 +113,7 @@
|
|
|
114
113
|
"@types/invariant": "^2.2.37",
|
|
115
114
|
"@types/jest": "^29.5.0",
|
|
116
115
|
"@types/lodash": "^4.14.202",
|
|
117
|
-
"@types/node": "^
|
|
116
|
+
"@types/node": "^24.10.1",
|
|
118
117
|
"@types/react": "^18.3.1",
|
|
119
118
|
"@types/react-dom": "^18.3.1",
|
|
120
119
|
"@types/react-is": "^17.0.4",
|
|
@@ -128,7 +127,7 @@
|
|
|
128
127
|
"babel-jest": "^29.7.0",
|
|
129
128
|
"babel-plugin-dev-expression": "^0.2.3",
|
|
130
129
|
"browserslist": "^4.26.3",
|
|
131
|
-
"chromatic": "
|
|
130
|
+
"chromatic": "13.3.3",
|
|
132
131
|
"conventional-changelog-conventionalcommits": "^8.0.0",
|
|
133
132
|
"core-js": "^3.45.1",
|
|
134
133
|
"css-loader": "^6.8.1",
|