@neo4j-ndl/react 4.14.1 → 4.14.3

package/lib/cjs/graph-label/GraphLabel.js

@@ -52,17 +52,14 @@ const HexagonEnd = ({ direction = 'left', color, htmlAttributes, height = 24, })
         'ndl-left': direction === 'left',
         'ndl-right': direction === 'right',
     });
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: classes }, htmlAttributes, { children: [(0, jsx_runtime_1.jsx)("svg", { "aria-hidden": true, className: "ndl-hexagon-end-inner", fill: "none", height: height, preserveAspectRatio: "none", viewBox: "0 0 9 24", width: "9", xmlns: "http://www.w3.org/2000/svg", children: (0, jsx_runtime_1.jsx)("path", { style: { fill: color }, fillRule: "evenodd", clipRule: "evenodd", d: "M5.73024 1.03676C6.08165 0.397331 6.75338 0 7.48301 0H9V24H7.483C6.75338 24 6.08165 23.6027 5.73024 22.9632L0.315027 13.1094C-0.105009 12.4376 -0.105009 11.5624 0.315026 10.8906L5.73024 1.03676Z" }) }), (0, jsx_runtime_1.jsx)("svg", { "aria-hidden": true, className: "ndl-hexagon-end-active", fill: "none", height: height + 6, preserveAspectRatio: "none", viewBox: "0 0 13 30", width: "13", xmlns: "http://www.w3.org/2000/svg", children: (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M10.075 2C9.12474 2 8.24318 2.54521 7.74867 3.43873L2.21419 13.4387C1.68353 14.3976 1.68353 15.6024 2.21419 16.5613L7.74867 26.5613C8.24318 27.4548 9.12474 28 10.075 28H13V30H10.075C8.49126 30 7.022 29.0913 6.1978 27.6021L0.663324 17.6021C-0.221109 16.0041 -0.221108 13.9959 0.663325 12.3979L6.1978 2.39789C7.022 0.90869 8.49126 0 10.075 0H13V2H10.075Z" }) })] })));
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: classes }, htmlAttributes, { children: (0, jsx_runtime_1.jsx)("svg", { "aria-hidden": true, className: "ndl-hexagon-end-inner", fill: "none", height: height, preserveAspectRatio: "none", viewBox: "0 0 9 24", width: "9", xmlns: "http://www.w3.org/2000/svg", children: (0, jsx_runtime_1.jsx)("path", { style: { fill: color }, fillRule: "evenodd", clipRule: "evenodd", d: "M5.73024 1.03676C6.08165 0.397331 6.75338 0 7.48301 0H9V24H7.483C6.75338 24 6.08165 23.6027 5.73024 22.9632L0.315027 13.1094C-0.105009 12.4376 -0.105009 11.5624 0.315026 10.8906L5.73024 1.03676Z" }) }) })));
 };
-const SquareEnd = ({ direction = 'left', color, height = 24, htmlAttributes, }) => {
+const SquareEnd = ({ direction = 'left', color, htmlAttributes, }) => {
     const classes = (0, classnames_1.default)('ndl-square-end', {
         'ndl-left': direction === 'left',
         'ndl-right': direction === 'right',
     });
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: classes }, htmlAttributes, { children: [(0, jsx_runtime_1.jsx)("div", { className: "ndl-square-end-inner", style: { backgroundColor: color } }), (0, jsx_runtime_1.jsx)("svg", { className: "ndl-square-end-active", width: "7", height: height + 6, preserveAspectRatio: "none", viewBox: "0 0 7 30", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M 3.8774 2 C 3.2697 2 2.7917 2.248 2.3967 2.6605 C 1.928 3.1498 1.7993 3.8555 1.7993 4.5331 V 13.8775 V 25.4669 C 1.7993 26.1445 1.928 26.8502 2.3967 27.3395 C 2.7917 27.752 3.2697 28 3.8774 28 H 7 V 30 H 3.8774 C 2.6211 30 1.4369 29.4282 0.5895 28.4485 C 0.1462 27.936 0.0002 27.2467 0.0002 26.5691 L -0.0002 13.8775 L 0.0002 3.4309 C 0.0002 2.7533 0.1462 2.064 0.5895 1.5515 C 1.4368 0.5718 2.6211 0 3.8774 0 H 7 V 2 H 3.8774 Z" }) })] })));
-};
-const HorizontalLines = ({ height = 24 }) => {
-    return ((0, jsx_runtime_1.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", height: height + 6, preserveAspectRatio: "none", viewBox: "0 0 37 30", fill: "none", className: "ndl-relationship-label-lines", children: [(0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M 37 2 H 0 V 0 H 37 V 2 Z" }), (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M 37 30 H 0 V 28 H 37 V 30 Z" })] }));
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: classes }, htmlAttributes, { children: (0, jsx_runtime_1.jsx)("div", { className: "ndl-square-end-inner", style: { backgroundColor: color } }) })));
 };
 /**
  *
@@ -144,15 +141,19 @@ const GraphLabel = (_a) => {
         type === 'relationshipRight') {
         const classes = (0, classnames_1.default)('ndl-relationship-label', commonClasses);
         const height = size === 'small' ? 20 : 24;
+        const focusRingClasses = (0, classnames_1.default)('ndl-relationship-focus-ring', {
+            'ndl-end-left-square': type === 'relationshipRight',
+            'ndl-end-right-square': type === 'relationshipLeft',
+        });
         return ((0, jsx_runtime_1.jsxs)(Component, Object.assign({ style: Object.assign(Object.assign({ maxWidth: isFluid ? '100%' : MAX_WIDTH }, style), { color: isDisabled ? disabledTextColor : textColor }), className: classes }, (isButton && {
             disabled: isDisabled,
             onClick: handleClick,
             onMouseEnter: handleMouseEnter,
             onMouseLeave: handleMouseLeave,
             type: 'button',
-        }), { ref: ref }, restProps, htmlAttributes, { children: [type === 'relationshipLeft' || type === 'relationship' ? ((0, jsx_runtime_1.jsx)(HexagonEnd, { direction: "left", color: backgroundColor, height: height })) : ((0, jsx_runtime_1.jsx)(SquareEnd, { direction: "left", color: backgroundColor, height: height })), (0, jsx_runtime_1.jsxs)("div", { className: "ndl-relationship-label-container", style: {
+        }), { ref: ref }, restProps, htmlAttributes, { children: [type === 'relationshipLeft' || type === 'relationship' ? ((0, jsx_runtime_1.jsx)(HexagonEnd, { direction: "left", color: backgroundColor, height: height })) : ((0, jsx_runtime_1.jsx)(SquareEnd, { direction: "left", color: backgroundColor })), (0, jsx_runtime_1.jsx)("div", { className: "ndl-relationship-label-container", style: {
                         backgroundColor: backgroundColor,
-                    }, children: [(0, jsx_runtime_1.jsx)("div", { className: "ndl-relationship-label-content", children: children }), (0, jsx_runtime_1.jsx)(HorizontalLines, { height: height })] }), type === 'relationshipRight' || type === 'relationship' ? ((0, jsx_runtime_1.jsx)(HexagonEnd, { direction: "right", color: backgroundColor, height: height })) : ((0, jsx_runtime_1.jsx)(SquareEnd, { direction: "right", color: backgroundColor, height: height }))] })));
+                    }, children: (0, jsx_runtime_1.jsx)("div", { className: "ndl-relationship-label-content", children: children }) }), type === 'relationshipRight' || type === 'relationship' ? ((0, jsx_runtime_1.jsx)(HexagonEnd, { direction: "right", color: backgroundColor, height: height })) : ((0, jsx_runtime_1.jsx)(SquareEnd, { direction: "right", color: backgroundColor })), (0, jsx_runtime_1.jsx)("span", { "aria-hidden": true, className: focusRingClasses })] })));
     }
     else {
         const classes = (0, classnames_1.default)('ndl-property-key-label', commonClasses);

package/lib/cjs/graph-label/GraphLabel.js.map

@@ -1 +1 @@
-{"version":3,"file":"GraphLabel.js","sourceRoot":"","sources":["../../../src/graph-label/GraphLabel.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,0CAAyC;AACzC,4DAAoC;AAEpC,iCAA0C;AAM1C,mCAIiB;AAgDjB;;;;;;GAMG;AAEH,MAAM,UAAU,GAAG,CAAC,EAClB,SAAS,GAAG,MAAM,EAClB,KAAK,EACL,cAAc,EACd,MAAM,GAAG,EAAE,GACK,EAAE,EAAE;IACpB,MAAM,OAAO,GAAG,IAAA,oBAAU,EAAC,iBAAiB,EAAE;QAC5C,UAAU,EAAE,SAAS,KAAK,MAAM;QAChC,WAAW,EAAE,SAAS,KAAK,OAAO;KACnC,CAAC,CAAC;IAEH,OAAO,CACL,+CAAK,SAAS,EAAE,OAAO,IAAM,cAAc,eACzC,+CACe,IAAI,EACjB,SAAS,EAAC,uBAAuB,EACjC,IAAI,EAAC,MAAM,EACX,MAAM,EAAE,MAAM,EACd,mBAAmB,EAAC,MAAM,EAC1B,OAAO,EAAC,UAAU,EAClB,KAAK,EAAC,GAAG,EACT,KAAK,EAAC,4BAA4B,YAGlC,iCACE,KAAK,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,EACtB,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAC,oMAAoM,GACtM,GACE,EACN,+CACe,IAAI,EACjB,SAAS,EAAC,wBAAwB,EAClC,IAAI,EAAC,MAAM,EACX,MAAM,EAAE,MAAM,GAAG,CAAC,EAClB,mBAAmB,EAAC,MAAM,EAC1B,OAAO,EAAC,WAAW,EACnB,KAAK,EAAC,IAAI,EACV,KAAK,EAAC,4BAA4B,YAElC,iCACE,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAC,kWAAkW,GACpW,GACE,KACF,CACP,CAAC;AACJ,CAAC,CAAC;AAaF,MAAM,SAAS,GAAG,CAAC,EACjB,SAAS,GAAG,MAAM,EAClB,KAAK,EACL,MAAM,GAAG,EAAE,EACX,cAAc,GACC,EAAE,EAAE;IACnB,MAAM,OAAO,GAAG,IAAA,oBAAU,EAAC,gBAAgB,EAAE;QAC3C,UAAU,EAAE,SAAS,KAAK,MAAM;QAChC,WAAW,EAAE,SAAS,KAAK,OAAO;KACnC,CAAC,CAAC;IAEH,OAAO,CACL,+CAAK,SAAS,EAAE,OAAO,IAAM,cAAc,eACzC,gCACE,SAAS,EAAC,sBAAsB,EAChC,KAAK,EAAE,EAAE,eAAe,EAAE,KAAK,EAAE,GACjC,EACF,gCACE,SAAS,EAAC,uBAAuB,EACjC,KAAK,EAAC,GAAG,EACT,MAAM,EAAE,MAAM,GAAG,CAAC,EAClB,mBAAmB,EAAC,MAAM,EAC1B,OAAO,EAAC,UAAU,EAClB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,YAElC,iCACE,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAC,+aAA+a,GACjb,GACE,KACF,CACP,CAAC;AACJ,CAAC,CAAC;AAMF,MAAM,eAAe,GAAG,CAAC,EAAE,MAAM,GAAG,EAAE,EAAwB,EAAE,EAAE;IAChE,OAAO,CACL,iCACE,KAAK,EAAC,4BAA4B,EAClC,MAAM,EAAE,MAAM,GAAG,CAAC,EAClB,mBAAmB,EAAC,MAAM,EAC1B,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,SAAS,EAAC,8BAA8B,aAExC,iCACE,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAC,2BAA2B,GAC7B,EACF,iCACE,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAC,8BAA8B,GAChC,IACE,CACP,CAAC;AACJ,CAAC,CAAC;AAEF;;;;;;GAMG;AAEH,MAAM,SAAS,GAAG,GAAG,CAAC;AAEf,MAAM,UAAU,GAAG,CAAyC,EAetB,EAAE,EAAE;QAfkB,EACjE,IAAI,GAAG,MAAM,EACb,KAAK,EACL,UAAU,GAAG,KAAK,EAClB,UAAU,GAAG,KAAK,EAClB,EAAE,EACF,OAAO,EACP,SAAS,EACT,KAAK,EACL,QAAQ,EACR,cAAc,EACd,OAAO,GAAG,KAAK,EACf,IAAI,GAAG,OAAO,EACd,GAAG,OAEwC,EADxC,SAAS,cAdqD,4IAelE,CADa;IAEZ,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAE9C,MAAM,gBAAgB,GAAG,CACvB,KAAsD,EACtD,EAAE;QACF,UAAU,CAAC,IAAI,CAAC,CAAC;QAEjB,IAAI,cAAc,IAAI,cAAc,CAAC,YAAY,KAAK,SAAS,EAAE,CAAC;YAChE,cAAc,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;QACrC,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,gBAAgB,GAAG,CACvB,KAAsD,EACtD,EAAE;;QACF,UAAU,CAAC,KAAK,CAAC,CAAC;QAElB,MAAA,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAE,YAAY,+DAAG,KAAK,CAAC,CAAC;IACxC,CAAC,CAAC;IAEF,MAAM,SAAS,GAAsB,EAAE,aAAF,EAAE,cAAF,EAAE,GAAI,QAAQ,CAAC;IACpD,MAAM,QAAQ,GAAG,SAAS,KAAK,QAAQ,CAAC;IAExC,MAAM,WAAW,GAAG,CAClB,KAAsD,EACtD,EAAE;QACF,8EAA8E;QAC9E,yEAAyE;QACzE,iFAAiF;QACjF,4CAA4C;QAC5C,IAAI,UAAU,EAAE,CAAC;YACf,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,KAAK,CAAC,eAAe,EAAE,CAAC;YACxB,OAAO;QACT,CAAC;QAED,IAAI,OAAO,EAAE,CAAC;YACZ,OAAO,CAAC,KAAK,CAAC,CAAC;QACjB,CAAC;IACH,CAAC,CAAC;IAEF,IAAI,eAAe,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE;QACjC,IAAI,KAAK,KAAK,SAAS,EAAE,CAAC;YACxB,QAAQ,IAAI,EAAE,CAAC;gBACb,KAAK,MAAM;oBACT,OAAO,aAAM,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;gBAC3B,KAAK,cAAc,CAAC;gBACpB,KAAK,kBAAkB,CAAC;gBACxB,KAAK,mBAAmB;oBACtB,OAAO,aAAM,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,EAAE,CAAC,MAAM,CAAC;gBACpD;oBACE,OAAO,aAAM,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,EAAE,CAAC,SAAS,CAAC;YACzD,CAAC;QACH,CAAC;QACD,OAAO,KAAK,CAAC;IACf,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC;IAElB,MAAM,UAAU,GAAG,IAAA,eAAO,EACxB,GAAG,EAAE,CACH,IAAA,qBAAa,EACX,eAAe,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,aAAM,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC,CAC7D,EACH,CAAC,eAAe,CAAC,CAClB,CAAC;IACF,MAAM,SAAS,GAAG,IAAA,eAAO,EACvB,GAAG,EAAE,CACH,IAAA,kCAA0B,EACxB,eAAe,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,aAAM,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC,CAC7D,EACH,CAAC,eAAe,CAAC,CAClB,CAAC;IACF,MAAM,iBAAiB,GAAG,IAAA,eAAO,EAC/B,GAAG,EAAE,CACH,IAAA,4BAAoB,EAClB,eAAe,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,aAAM,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC,CAC7D,EACH,CAAC,eAAe,CAAC,CAClB,CAAC;IAEF,IAAI,OAAO,IAAI,CAAC,UAAU,EAAE,CAAC;QAC3B,eAAe,GAAG,UAAU,CAAC;IAC/B,CAAC;IAED,MAAM,aAAa,GAAG,IAAA,oBAAU,EAAC,iBAAiB,EAAE,SAAS,EAAE;QAC7D,cAAc,EAAE,UAAU;QAC1B,kBAAkB,EAAE,QAAQ;QAC5B,cAAc,EAAE,UAAU;QAC1B,WAAW,EAAE,IAAI,KAAK,OAAO;KAC9B,CAAC,CAAC;IAEH,IAAI,IAAI,KAAK,MAAM,EAAE,CAAC;QACpB,MAAM,OAAO,GAAG,IAAA,oBAAU,EAAC,gBAAgB,EAAE,aAAa,CAAC,CAAC;QAE5D,OAAO,CACL,uBAAC,SAAS,kBACR,SAAS,EAAE,OAAO,EAClB,GAAG,EAAE,GAAG,EACR,KAAK,kBACH,eAAe,EAAE,eAAe,EAChC,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,SAAS,EACjD,QAAQ,EAAE,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,IACnC,KAAK,KAEN,CAAC,QAAQ,IAAI;YACf,QAAQ,EAAE,UAAU;YACpB,OAAO,EAAE,WAAW;YACpB,YAAY,EAAE,gBAAgB;YAC9B,YAAY,EAAE,gBAAgB;YAC9B,IAAI,EAAE,QAAQ;SACf,CAAC,EACE,cAAc,cAElB,gCAAK,SAAS,EAAC,wBAAwB,YAAE,QAAQ,GAAO,IAC9C,CACb,CAAC;IACJ,CAAC;SAAM,IACL,IAAI,KAAK,cAAc;QACvB,IAAI,KAAK,kBAAkB;QAC3B,IAAI,KAAK,mBAAmB,EAC5B,CAAC;QACD,MAAM,OAAO,GAAG,IAAA,oBAAU,EAAC,wBAAwB,EAAE,aAAa,CAAC,CAAC;QACpE,MAAM,MAAM,GAAG,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;QAE1C,OAAO,CACL,wBAAC,SAAS,kBACR,KAAK,gCACH,QAAQ,EAAE,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,IACnC,KAAK,KACR,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,SAAS,KAEnD,SAAS,EAAE,OAAO,IACd,CAAC,QAAQ,IAAI;YACf,QAAQ,EAAE,UAAU;YACpB,OAAO,EAAE,WAAW;YACpB,YAAY,EAAE,gBAAgB;YAC9B,YAAY,EAAE,gBAAgB;YAC9B,IAAI,EAAE,QAAQ;SACf,CAAC,IACF,GAAG,EAAE,GAAG,IACJ,SAAS,EACT,cAAc,eAEjB,IAAI,KAAK,kBAAkB,IAAI,IAAI,KAAK,cAAc,CAAC,CAAC,CAAC,CACxD,uBAAC,UAAU,IACT,SAAS,EAAC,MAAM,EAChB,KAAK,EAAE,eAAe,EACtB,MAAM,EAAE,MAAM,GACd,CACH,CAAC,CAAC,CAAC,CACF,uBAAC,SAAS,IAAC,SAAS,EAAC,MAAM,EAAC,KAAK,EAAE,eAAe,EAAE,MAAM,EAAE,MAAM,GAAI,CACvE,EACD,iCACE,SAAS,EAAC,kCAAkC,EAC5C,KAAK,EAAE;wBACL,eAAe,EAAE,eAAe;qBACjC,aAED,gCAAK,SAAS,EAAC,gCAAgC,YAAE,QAAQ,GAAO,EAChE,uBAAC,eAAe,IAAC,MAAM,EAAE,MAAM,GAAI,IAC/B,EACL,IAAI,KAAK,mBAAmB,IAAI,IAAI,KAAK,cAAc,CAAC,CAAC,CAAC,CACzD,uBAAC,UAAU,IACT,SAAS,EAAC,OAAO,EACjB,KAAK,EAAE,eAAe,EACtB,MAAM,EAAE,MAAM,GACd,CACH,CAAC,CAAC,CAAC,CACF,uBAAC,SAAS,IACR,SAAS,EAAC,OAAO,EACjB,KAAK,EAAE,eAAe,EACtB,MAAM,EAAE,MAAM,GACd,CACH,KACS,CACb,CAAC;IACJ,CAAC;SAAM,CAAC;QACN,MAAM,OAAO,GAAG,IAAA,oBAAU,EAAC,wBAAwB,EAAE,aAAa,CAAC,CAAC;QAEpE,OAAO,CACL,uBAAC,SAAS,oBACJ,CAAC,QAAQ,IAAI;YACf,IAAI,EAAE,QAAQ;SACf,CAAC,IACF,KAAK,kBACH,eAAe,EAAE,eAAe,EAChC,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,SAAS,EACjD,QAAQ,EAAE,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,IACnC,KAAK,GAEV,SAAS,EAAE,OAAO,EAClB,OAAO,EAAE,WAAW,EACpB,YAAY,EAAE,gBAAgB,EAC9B,YAAY,EAAE,gBAAgB,EAC9B,GAAG,EAAE,GAAG,IACJ,cAAc,cAElB,gCAAK,SAAS,EAAC,gCAAgC,YAAE,QAAQ,GAAO,IACtD,CACb,CAAC;IACJ,CAAC;AACH,CAAC,CAAC;AAxNW,QAAA,UAAU,cAwNrB","sourcesContent":["/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\nimport { tokens } from '@neo4j-ndl/base';\nimport classNames from 'classnames';\nimport type React from 'react';\nimport { useMemo, useState } from 'react';\n\nimport {\n  type HtmlAttributes,\n  type PolymorphicCommonProps,\n} from '../_common/types';\nimport {\n  getDisabledTextColor,\n  getHoverColor,\n  getTextColorFromBackground,\n} from './color';\n\n/**\n *\n *\n * Types\n *\n *\n */\n\ntype GraphLabelProps = {\n  /**  The type of label */\n  type:\n    | 'node'\n    | 'relationship'\n    | 'propertyKey'\n    | 'relationshipLeft'\n    | 'relationshipRight';\n  /** Callback function that is called when the label is clicked */\n  onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;\n  /** Additional styles to apply to the label */\n  style?: React.CSSProperties;\n  /** Content displayed inside the label */\n  children?: React.ReactNode;\n  /** The background color of the label */\n  color?: string;\n  /** Whether the label is disabled */\n  isDisabled?: boolean;\n  /** Additional class names */\n  className?: string;\n  /** Whether the label is selected */\n  isSelected?: boolean;\n  /** Whether the label should expand to full available width */\n  isFluid?: boolean;\n  /** The size of the label */\n  size?: 'small' | 'large';\n};\n\ntype HexagonEndProps = {\n  /** The direction of the hexagon end */\n  direction: 'left' | 'right';\n  /** The color of the hexagon end */\n  color?: string;\n  /** The height of the hexagon end in pixels */\n  height?: number;\n  /** HTML attributes */\n  htmlAttributes?: HtmlAttributes<'div'>;\n};\n/**\n *\n *\n * Helpers\n *\n *\n */\n\nconst HexagonEnd = ({\n  direction = 'left',\n  color,\n  htmlAttributes,\n  height = 24,\n}: HexagonEndProps) => {\n  const classes = classNames('ndl-hexagon-end', {\n    'ndl-left': direction === 'left',\n    'ndl-right': direction === 'right',\n  });\n\n  return (\n    <div className={classes} {...htmlAttributes}>\n      <svg\n        aria-hidden={true}\n        className=\"ndl-hexagon-end-inner\"\n        fill=\"none\"\n        height={height}\n        preserveAspectRatio=\"none\"\n        viewBox=\"0 0 9 24\"\n        width=\"9\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        {/* triangle */}\n        <path\n          style={{ fill: color }}\n          fillRule=\"evenodd\"\n          clipRule=\"evenodd\"\n          d=\"M5.73024 1.03676C6.08165 0.397331 6.75338 0 7.48301 0H9V24H7.483C6.75338 24 6.08165 23.6027 5.73024 22.9632L0.315027 13.1094C-0.105009 12.4376 -0.105009 11.5624 0.315026 10.8906L5.73024 1.03676Z\"\n        />\n      </svg>\n      <svg\n        aria-hidden={true}\n        className=\"ndl-hexagon-end-active\"\n        fill=\"none\"\n        height={height + 6}\n        preserveAspectRatio=\"none\"\n        viewBox=\"0 0 13 30\"\n        width=\"13\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          fillRule=\"evenodd\"\n          clipRule=\"evenodd\"\n          d=\"M10.075 2C9.12474 2 8.24318 2.54521 7.74867 3.43873L2.21419 13.4387C1.68353 14.3976 1.68353 15.6024 2.21419 16.5613L7.74867 26.5613C8.24318 27.4548 9.12474 28 10.075 28H13V30H10.075C8.49126 30 7.022 29.0913 6.1978 27.6021L0.663324 17.6021C-0.221109 16.0041 -0.221108 13.9959 0.663325 12.3979L6.1978 2.39789C7.022 0.90869 8.49126 0 10.075 0H13V2H10.075Z\"\n        />\n      </svg>\n    </div>\n  );\n};\n\ntype SquareEndProps = {\n  /** The direction of the square end (where it's rounded and has the active state) */\n  direction: 'left' | 'right';\n  /** The color of the square end */\n  color: string;\n  /** The height of the square end in pixels */\n  height: number;\n  /** HTML attributes */\n  htmlAttributes?: HtmlAttributes<'div'>;\n};\n\nconst SquareEnd = ({\n  direction = 'left',\n  color,\n  height = 24,\n  htmlAttributes,\n}: SquareEndProps) => {\n  const classes = classNames('ndl-square-end', {\n    'ndl-left': direction === 'left',\n    'ndl-right': direction === 'right',\n  });\n\n  return (\n    <div className={classes} {...htmlAttributes}>\n      <div\n        className=\"ndl-square-end-inner\"\n        style={{ backgroundColor: color }}\n      />\n      <svg\n        className=\"ndl-square-end-active\"\n        width=\"7\"\n        height={height + 6}\n        preserveAspectRatio=\"none\"\n        viewBox=\"0 0 7 30\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          fillRule=\"evenodd\"\n          clipRule=\"evenodd\"\n          d=\"M 3.8774 2 C 3.2697 2 2.7917 2.248 2.3967 2.6605 C 1.928 3.1498 1.7993 3.8555 1.7993 4.5331 V 13.8775 V 25.4669 C 1.7993 26.1445 1.928 26.8502 2.3967 27.3395 C 2.7917 27.752 3.2697 28 3.8774 28 H 7 V 30 H 3.8774 C 2.6211 30 1.4369 29.4282 0.5895 28.4485 C 0.1462 27.936 0.0002 27.2467 0.0002 26.5691 L -0.0002 13.8775 L 0.0002 3.4309 C 0.0002 2.7533 0.1462 2.064 0.5895 1.5515 C 1.4368 0.5718 2.6211 0 3.8774 0 H 7 V 2 H 3.8774 Z\"\n        />\n      </svg>\n    </div>\n  );\n};\n\ntype HorizontalLinesProps = {\n  height?: number;\n};\n\nconst HorizontalLines = ({ height = 24 }: HorizontalLinesProps) => {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      height={height + 6}\n      preserveAspectRatio=\"none\"\n      viewBox=\"0 0 37 30\"\n      fill=\"none\"\n      className=\"ndl-relationship-label-lines\"\n    >\n      <path\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d=\"M 37 2 H 0 V 0 H 37 V 2 Z\"\n      />\n      <path\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d=\"M 37 30 H 0 V 28 H 37 V 30 Z\"\n      />\n    </svg>\n  );\n};\n\n/**\n *\n *\n * GraphLabel Component\n *\n *\n */\n\nconst MAX_WIDTH = 200;\n\nexport const GraphLabel = <T extends React.ElementType = 'button'>({\n  type = 'node',\n  color,\n  isDisabled = false,\n  isSelected = false,\n  as,\n  onClick,\n  className,\n  style,\n  children,\n  htmlAttributes,\n  isFluid = false,\n  size = 'large',\n  ref,\n  ...restProps\n}: PolymorphicCommonProps<T, GraphLabelProps>) => {\n  const [isHover, setIsHover] = useState(false);\n\n  const handleMouseEnter = (\n    event: React.MouseEvent<HTMLButtonElement, MouseEvent>,\n  ) => {\n    setIsHover(true);\n\n    if (htmlAttributes && htmlAttributes.onMouseEnter !== undefined) {\n      htmlAttributes.onMouseEnter(event);\n    }\n  };\n\n  const handleMouseLeave = (\n    event: React.MouseEvent<HTMLButtonElement, MouseEvent>,\n  ) => {\n    setIsHover(false);\n\n    htmlAttributes?.onMouseLeave?.(event);\n  };\n\n  const Component: React.ElementType = as ?? 'button';\n  const isButton = Component === 'button';\n\n  const handleClick = (\n    event: React.MouseEvent<HTMLButtonElement, MouseEvent>,\n  ) => {\n    // By default, a <button /> element with disabled set to true will not get its\n    // on click handler called. To support the same behavior on <a /> tags we\n    // swallow the event here when disabled, since the <a /> tag with disabled set to\n    // true will have its onClick handler called\n    if (isDisabled) {\n      event.preventDefault();\n      event.stopPropagation();\n      return;\n    }\n\n    if (onClick) {\n      onClick(event);\n    }\n  };\n\n  let backgroundColor = useMemo(() => {\n    if (color === undefined) {\n      switch (type) {\n        case 'node':\n          return tokens.graph['1'];\n        case 'relationship':\n        case 'relationshipLeft':\n        case 'relationshipRight':\n          return tokens.theme.light.color.neutral.bg.strong;\n        default:\n          return tokens.theme.light.color.neutral.bg.strongest;\n      }\n    }\n    return color;\n  }, [color, type]);\n\n  const hoverColor = useMemo(\n    () =>\n      getHoverColor(\n        backgroundColor ? backgroundColor : tokens.palette.lemon[40],\n      ),\n    [backgroundColor],\n  );\n  const textColor = useMemo(\n    () =>\n      getTextColorFromBackground(\n        backgroundColor ? backgroundColor : tokens.palette.lemon[40],\n      ),\n    [backgroundColor],\n  );\n  const disabledTextColor = useMemo(\n    () =>\n      getDisabledTextColor(\n        backgroundColor ? backgroundColor : tokens.palette.lemon[40],\n      ),\n    [backgroundColor],\n  );\n\n  if (isHover && !isDisabled) {\n    backgroundColor = hoverColor;\n  }\n\n  const commonClasses = classNames('ndl-graph-label', className, {\n    'ndl-disabled': isDisabled,\n    'ndl-interactable': isButton,\n    'ndl-selected': isSelected,\n    'ndl-small': size === 'small',\n  });\n\n  if (type === 'node') {\n    const classes = classNames('ndl-node-label', commonClasses);\n\n    return (\n      <Component\n        className={classes}\n        ref={ref}\n        style={{\n          backgroundColor: backgroundColor,\n          color: isDisabled ? disabledTextColor : textColor,\n          maxWidth: isFluid ? '100%' : MAX_WIDTH,\n          ...style,\n        }}\n        {...(isButton && {\n          disabled: isDisabled,\n          onClick: handleClick,\n          onMouseEnter: handleMouseEnter,\n          onMouseLeave: handleMouseLeave,\n          type: 'button',\n        })}\n        {...htmlAttributes}\n      >\n        <div className=\"ndl-node-label-content\">{children}</div>\n      </Component>\n    );\n  } else if (\n    type === 'relationship' ||\n    type === 'relationshipLeft' ||\n    type === 'relationshipRight'\n  ) {\n    const classes = classNames('ndl-relationship-label', commonClasses);\n    const height = size === 'small' ? 20 : 24;\n\n    return (\n      <Component\n        style={{\n          maxWidth: isFluid ? '100%' : MAX_WIDTH,\n          ...style,\n          color: isDisabled ? disabledTextColor : textColor,\n        }}\n        className={classes}\n        {...(isButton && {\n          disabled: isDisabled,\n          onClick: handleClick,\n          onMouseEnter: handleMouseEnter,\n          onMouseLeave: handleMouseLeave,\n          type: 'button',\n        })}\n        ref={ref}\n        {...restProps}\n        {...htmlAttributes}\n      >\n        {type === 'relationshipLeft' || type === 'relationship' ? (\n          <HexagonEnd\n            direction=\"left\"\n            color={backgroundColor}\n            height={height}\n          />\n        ) : (\n          <SquareEnd direction=\"left\" color={backgroundColor} height={height} />\n        )}\n        <div\n          className=\"ndl-relationship-label-container\"\n          style={{\n            backgroundColor: backgroundColor,\n          }}\n        >\n          <div className=\"ndl-relationship-label-content\">{children}</div>\n          <HorizontalLines height={height} />\n        </div>\n        {type === 'relationshipRight' || type === 'relationship' ? (\n          <HexagonEnd\n            direction=\"right\"\n            color={backgroundColor}\n            height={height}\n          />\n        ) : (\n          <SquareEnd\n            direction=\"right\"\n            color={backgroundColor}\n            height={height}\n          />\n        )}\n      </Component>\n    );\n  } else {\n    const classes = classNames('ndl-property-key-label', commonClasses);\n\n    return (\n      <Component\n        {...(isButton && {\n          type: 'button',\n        })}\n        style={{\n          backgroundColor: backgroundColor,\n          color: isDisabled ? disabledTextColor : textColor,\n          maxWidth: isFluid ? '100%' : MAX_WIDTH,\n          ...style,\n        }}\n        className={classes}\n        onClick={handleClick}\n        onMouseEnter={handleMouseEnter}\n        onMouseLeave={handleMouseLeave}\n        ref={ref}\n        {...htmlAttributes}\n      >\n        <div className=\"ndl-property-key-label-content\">{children}</div>\n      </Component>\n    );\n  }\n};\n"]}
+{"version":3,"file":"GraphLabel.js","sourceRoot":"","sources":["../../../src/graph-label/GraphLabel.tsx"],"names":[],"mappings":"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","sourcesContent":["/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\nimport { tokens } from '@neo4j-ndl/base';\nimport classNames from 'classnames';\nimport type React from 'react';\nimport { useMemo, useState } from 'react';\n\nimport {\n  type HtmlAttributes,\n  type PolymorphicCommonProps,\n} from '../_common/types';\nimport {\n  getDisabledTextColor,\n  getHoverColor,\n  getTextColorFromBackground,\n} from './color';\n\n/**\n *\n *\n * Types\n *\n *\n */\n\ntype GraphLabelProps = {\n  /**  The type of label */\n  type:\n    | 'node'\n    | 'relationship'\n    | 'propertyKey'\n    | 'relationshipLeft'\n    | 'relationshipRight';\n  /** Callback function that is called when the label is clicked */\n  onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;\n  /** Additional styles to apply to the label */\n  style?: React.CSSProperties;\n  /** Content displayed inside the label */\n  children?: React.ReactNode;\n  /** The background color of the label */\n  color?: string;\n  /** Whether the label is disabled */\n  isDisabled?: boolean;\n  /** Additional class names */\n  className?: string;\n  /** Whether the label is selected */\n  isSelected?: boolean;\n  /** Whether the label should expand to full available width */\n  isFluid?: boolean;\n  /** The size of the label */\n  size?: 'small' | 'large';\n};\n\ntype HexagonEndProps = {\n  /** The direction of the hexagon end */\n  direction: 'left' | 'right';\n  /** The color of the hexagon end */\n  color?: string;\n  /** The height of the hexagon end in pixels */\n  height?: number;\n  /** HTML attributes */\n  htmlAttributes?: HtmlAttributes<'div'>;\n};\n/**\n *\n *\n * Helpers\n *\n *\n */\n\nconst HexagonEnd = ({\n  direction = 'left',\n  color,\n  htmlAttributes,\n  height = 24,\n}: HexagonEndProps) => {\n  const classes = classNames('ndl-hexagon-end', {\n    'ndl-left': direction === 'left',\n    'ndl-right': direction === 'right',\n  });\n\n  return (\n    <div className={classes} {...htmlAttributes}>\n      <svg\n        aria-hidden={true}\n        className=\"ndl-hexagon-end-inner\"\n        fill=\"none\"\n        height={height}\n        preserveAspectRatio=\"none\"\n        viewBox=\"0 0 9 24\"\n        width=\"9\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        {/* triangle */}\n        <path\n          style={{ fill: color }}\n          fillRule=\"evenodd\"\n          clipRule=\"evenodd\"\n          d=\"M5.73024 1.03676C6.08165 0.397331 6.75338 0 7.48301 0H9V24H7.483C6.75338 24 6.08165 23.6027 5.73024 22.9632L0.315027 13.1094C-0.105009 12.4376 -0.105009 11.5624 0.315026 10.8906L5.73024 1.03676Z\"\n        />\n      </svg>\n    </div>\n  );\n};\n\ntype SquareEndProps = {\n  /** The direction of the square end (where it's rounded) */\n  direction: 'left' | 'right';\n  /** The color of the square end */\n  color: string;\n  /** HTML attributes */\n  htmlAttributes?: HtmlAttributes<'div'>;\n};\n\nconst SquareEnd = ({\n  direction = 'left',\n  color,\n  htmlAttributes,\n}: SquareEndProps) => {\n  const classes = classNames('ndl-square-end', {\n    'ndl-left': direction === 'left',\n    'ndl-right': direction === 'right',\n  });\n\n  return (\n    <div className={classes} {...htmlAttributes}>\n      <div\n        className=\"ndl-square-end-inner\"\n        style={{ backgroundColor: color }}\n      />\n    </div>\n  );\n};\n\n/**\n *\n *\n * GraphLabel Component\n *\n *\n */\n\nconst MAX_WIDTH = 200;\n\nexport const GraphLabel = <T extends React.ElementType = 'button'>({\n  type = 'node',\n  color,\n  isDisabled = false,\n  isSelected = false,\n  as,\n  onClick,\n  className,\n  style,\n  children,\n  htmlAttributes,\n  isFluid = false,\n  size = 'large',\n  ref,\n  ...restProps\n}: PolymorphicCommonProps<T, GraphLabelProps>) => {\n  const [isHover, setIsHover] = useState(false);\n\n  const handleMouseEnter = (\n    event: React.MouseEvent<HTMLButtonElement, MouseEvent>,\n  ) => {\n    setIsHover(true);\n\n    if (htmlAttributes && htmlAttributes.onMouseEnter !== undefined) {\n      htmlAttributes.onMouseEnter(event);\n    }\n  };\n\n  const handleMouseLeave = (\n    event: React.MouseEvent<HTMLButtonElement, MouseEvent>,\n  ) => {\n    setIsHover(false);\n\n    htmlAttributes?.onMouseLeave?.(event);\n  };\n\n  const Component: React.ElementType = as ?? 'button';\n  const isButton = Component === 'button';\n\n  const handleClick = (\n    event: React.MouseEvent<HTMLButtonElement, MouseEvent>,\n  ) => {\n    // By default, a <button /> element with disabled set to true will not get its\n    // on click handler called. To support the same behavior on <a /> tags we\n    // swallow the event here when disabled, since the <a /> tag with disabled set to\n    // true will have its onClick handler called\n    if (isDisabled) {\n      event.preventDefault();\n      event.stopPropagation();\n      return;\n    }\n\n    if (onClick) {\n      onClick(event);\n    }\n  };\n\n  let backgroundColor = useMemo(() => {\n    if (color === undefined) {\n      switch (type) {\n        case 'node':\n          return tokens.graph['1'];\n        case 'relationship':\n        case 'relationshipLeft':\n        case 'relationshipRight':\n          return tokens.theme.light.color.neutral.bg.strong;\n        default:\n          return tokens.theme.light.color.neutral.bg.strongest;\n      }\n    }\n    return color;\n  }, [color, type]);\n\n  const hoverColor = useMemo(\n    () =>\n      getHoverColor(\n        backgroundColor ? backgroundColor : tokens.palette.lemon[40],\n      ),\n    [backgroundColor],\n  );\n  const textColor = useMemo(\n    () =>\n      getTextColorFromBackground(\n        backgroundColor ? backgroundColor : tokens.palette.lemon[40],\n      ),\n    [backgroundColor],\n  );\n  const disabledTextColor = useMemo(\n    () =>\n      getDisabledTextColor(\n        backgroundColor ? backgroundColor : tokens.palette.lemon[40],\n      ),\n    [backgroundColor],\n  );\n\n  if (isHover && !isDisabled) {\n    backgroundColor = hoverColor;\n  }\n\n  const commonClasses = classNames('ndl-graph-label', className, {\n    'ndl-disabled': isDisabled,\n    'ndl-interactable': isButton,\n    'ndl-selected': isSelected,\n    'ndl-small': size === 'small',\n  });\n\n  if (type === 'node') {\n    const classes = classNames('ndl-node-label', commonClasses);\n\n    return (\n      <Component\n        className={classes}\n        ref={ref}\n        style={{\n          backgroundColor: backgroundColor,\n          color: isDisabled ? disabledTextColor : textColor,\n          maxWidth: isFluid ? '100%' : MAX_WIDTH,\n          ...style,\n        }}\n        {...(isButton && {\n          disabled: isDisabled,\n          onClick: handleClick,\n          onMouseEnter: handleMouseEnter,\n          onMouseLeave: handleMouseLeave,\n          type: 'button',\n        })}\n        {...htmlAttributes}\n      >\n        <div className=\"ndl-node-label-content\">{children}</div>\n      </Component>\n    );\n  } else if (\n    type === 'relationship' ||\n    type === 'relationshipLeft' ||\n    type === 'relationshipRight'\n  ) {\n    const classes = classNames('ndl-relationship-label', commonClasses);\n    const height = size === 'small' ? 20 : 24;\n    const focusRingClasses = classNames('ndl-relationship-focus-ring', {\n      'ndl-end-left-square': type === 'relationshipRight',\n      'ndl-end-right-square': type === 'relationshipLeft',\n    });\n\n    return (\n      <Component\n        style={{\n          maxWidth: isFluid ? '100%' : MAX_WIDTH,\n          ...style,\n          color: isDisabled ? disabledTextColor : textColor,\n        }}\n        className={classes}\n        {...(isButton && {\n          disabled: isDisabled,\n          onClick: handleClick,\n          onMouseEnter: handleMouseEnter,\n          onMouseLeave: handleMouseLeave,\n          type: 'button',\n        })}\n        ref={ref}\n        {...restProps}\n        {...htmlAttributes}\n      >\n        {type === 'relationshipLeft' || type === 'relationship' ? (\n          <HexagonEnd\n            direction=\"left\"\n            color={backgroundColor}\n            height={height}\n          />\n        ) : (\n          <SquareEnd direction=\"left\" color={backgroundColor} />\n        )}\n        <div\n          className=\"ndl-relationship-label-container\"\n          style={{\n            backgroundColor: backgroundColor,\n          }}\n        >\n          <div className=\"ndl-relationship-label-content\">{children}</div>\n        </div>\n        {type === 'relationshipRight' || type === 'relationship' ? (\n          <HexagonEnd\n            direction=\"right\"\n            color={backgroundColor}\n            height={height}\n          />\n        ) : (\n          <SquareEnd direction=\"right\" color={backgroundColor} />\n        )}\n        <span aria-hidden={true} className={focusRingClasses} />\n      </Component>\n    );\n  } else {\n    const classes = classNames('ndl-property-key-label', commonClasses);\n\n    return (\n      <Component\n        {...(isButton && {\n          type: 'button',\n        })}\n        style={{\n          backgroundColor: backgroundColor,\n          color: isDisabled ? disabledTextColor : textColor,\n          maxWidth: isFluid ? '100%' : MAX_WIDTH,\n          ...style,\n        }}\n        className={classes}\n        onClick={handleClick}\n        onMouseEnter={handleMouseEnter}\n        onMouseLeave={handleMouseLeave}\n        ref={ref}\n        {...htmlAttributes}\n      >\n        <div className=\"ndl-property-key-label-content\">{children}</div>\n      </Component>\n    );\n  }\n};\n"]}

package/lib/cjs/index.js

@@ -34,8 +34,8 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TimeZonePicker = exports.NeedleTime = exports.TimePicker = exports.Skeleton = exports.Tooltip = exports.toast = exports.Toaster = exports.ToasterControlled = exports.Divider = exports.DropdownButton = exports.InlineEdit = exports.Slider = exports.ClipboardButton = exports.Logo = exports.Avatar = exports.Flex = exports.Box = exports.Breadcrumbs = exports.Drawer = exports.Typography = exports.SideNavigation = exports.StatusIndicator = exports.CodeBlock = exports.GraphLabel = exports.Wizard = exports.Tag = exports.Select = exports.TextLink = exports.TextArea = exports.TextInput = exports.DataGridNav = exports.dataGridUtils = exports.useTableNav = exports.useDataGridContext = exports.DataGrid = exports.Dropzone = exports.ProgressBar = exports.Popover = exports.SegmentedControl = exports.Tabs = exports.LoadingSpinner = exports.Dialog = exports.DatePicker = exports.Menu = exports.Radio = exports.Switch = exports.Checkbox = exports.Banner = exports.StatusLabel = exports.Accordion = void 0;
-exports.SelectableTag = exports.DismissibleTag = exports.ReadOnlyTag = exports.SelectIconButton = exports.Kbd = exports.Code = exports.TextButton = exports.FilledButton = exports.OutlinedButton = exports.ColorPicker = exports.ConditionalWrap = exports.IconButtonArray = exports.CleanIconButton = exports.IconButton = exports.LoadingBar = exports.useSpotlightContext = exports.SpotlightTour = exports.SpotlightTarget = exports.SpotlightProvider = exports.Spotlight = void 0;
+exports.useSpotlightContext = exports.SpotlightTour = exports.SpotlightTarget = exports.SpotlightProvider = exports.Spotlight = exports.TimeZonePicker = exports.NeedleTime = exports.TimePicker = exports.Skeleton = exports.Tooltip = exports.toast = exports.Toaster = exports.ToasterControlled = exports.Divider = exports.DropdownButton = exports.InlineEdit = exports.Slider = exports.ClipboardButton = exports.Logo = exports.Avatar = exports.Flex = exports.Box = exports.Breadcrumbs = exports.Drawer = exports.Typography = exports.SideNavigation = exports.StatusIndicator = exports.CodeBlock = exports.GraphLabel = exports.Wizard = exports.Tag = exports.Select = exports.TextLink = exports.TextArea = exports.TextInput = exports.Dropzone = exports.ProgressBar = exports.Popover = exports.SegmentedControl = exports.Tabs = exports.LoadingSpinner = exports.Dialog = exports.DatePicker = exports.Menu = exports.Radio = exports.Switch = exports.Checkbox = exports.Banner = exports.StatusLabel = exports.Accordion = void 0;
+exports.SelectableTag = exports.DismissibleTag = exports.ReadOnlyTag = exports.SelectIconButton = exports.Kbd = exports.Code = exports.TextButton = exports.FilledButton = exports.OutlinedButton = exports.ColorPicker = exports.ConditionalWrap = exports.IconButtonArray = exports.CleanIconButton = exports.IconButton = exports.LoadingBar = void 0;
 var accordion_1 = require("./accordion");
 Object.defineProperty(exports, "Accordion", { enumerable: true, get: function () { return accordion_1.Accordion; } });
 var status_label_1 = require("./status-label");
@@ -66,12 +66,7 @@ var progress_bar_1 = require("./progress-bar");
 Object.defineProperty(exports, "ProgressBar", { enumerable: true, get: function () { return progress_bar_1.ProgressBar; } });
 var dropzone_1 = require("./dropzone");
 Object.defineProperty(exports, "Dropzone", { enumerable: true, get: function () { return dropzone_1.Dropzone; } });
-var data_grid_1 = require("./data-grid");
-Object.defineProperty(exports, "DataGrid", { enumerable: true, get: function () { return data_grid_1.DataGrid; } });
-Object.defineProperty(exports, "useDataGridContext", { enumerable: true, get: function () { return data_grid_1.useDataGridContext; } });
-Object.defineProperty(exports, "useTableNav", { enumerable: true, get: function () { return data_grid_1.useTableNav; } });
-Object.defineProperty(exports, "dataGridUtils", { enumerable: true, get: function () { return data_grid_1.dataGridUtils; } });
-Object.defineProperty(exports, "DataGridNav", { enumerable: true, get: function () { return data_grid_1.DataGridNav; } });
+__exportStar(require("./data-grid"), exports);
 var text_input_1 = require("./text-input");
 Object.defineProperty(exports, "TextInput", { enumerable: true, get: function () { return text_input_1.TextInput; } });
 var text_area_1 = require("./text-area");

package/lib/cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nexport { Accordion } from './accordion';\nexport { StatusLabel } from './status-label';\nexport { Banner } from './banner';\nexport { Checkbox } from './checkbox';\nexport { Switch } from './switch';\nexport { Radio } from './radio';\nexport { Menu } from './menu';\nexport { DatePicker } from './date-picker';\nexport { Dialog } from './dialog';\nexport { LoadingSpinner } from './loading-spinner';\nexport { Tabs } from './tabs';\nexport { SegmentedControl } from './segmented-control';\nexport { Popover } from './popover';\nexport { ProgressBar } from './progress-bar';\nexport { Dropzone } from './dropzone';\nexport {\n  DataGrid,\n  useDataGridContext,\n  useTableNav,\n  dataGridUtils,\n  DataGridNav,\n} from './data-grid';\nexport { TextInput } from './text-input';\nexport { TextArea } from './text-area';\nexport { TextLink } from './text-link';\nexport { Select } from './select';\nexport { Tag } from './tag';\nexport * from './theme';\nexport { Wizard } from './wizard';\nexport { GraphLabel } from './graph-label';\nexport { CodeBlock } from './code-block';\nexport { StatusIndicator } from './status-indicator';\nexport { SideNavigation } from './side-navigation';\nexport { Typography } from './typography';\nexport { Drawer } from './drawer';\nexport { Breadcrumbs } from './breadcrumbs';\nexport * from './hooks';\nexport { Box } from './box';\nexport { Flex } from './flex';\nexport { Avatar } from './avatar';\nexport { Logo } from './logo';\nexport { ClipboardButton } from './clipboard-button';\nexport { Slider } from './slider';\nexport { InlineEdit } from './inline-edit';\nexport { DropdownButton } from './dropdown-button';\nexport { Divider } from './divider';\nexport * from './tree-view';\nexport { ToasterControlled, Toaster, toast, type ToastId } from './toast';\nexport { Tooltip } from './tooltip';\nexport { Skeleton } from './skeleton';\nexport { TimePicker, NeedleTime } from './time-picker';\nexport { TimeZonePicker } from './timezone-picker';\nexport {\n  Spotlight,\n  SpotlightProvider,\n  SpotlightTarget,\n  SpotlightTour,\n  useSpotlightContext,\n} from './spotlight';\nexport { LoadingBar } from './loading-bar';\nexport { IconButton } from './icon-button';\nexport { CleanIconButton } from './clean-icon-button';\nexport { IconButtonArray } from './icon-button-array';\nexport { ConditionalWrap } from './conditional-wrap';\nexport { ColorPicker } from './color-picker';\nexport { OutlinedButton } from './outlined-button';\nexport { FilledButton } from './filled-button';\nexport { TextButton } from './text-button';\nexport { Code } from './code';\nexport { Kbd } from './kbd';\nexport { SelectIconButton } from './select-icon-button';\nexport { ReadOnlyTag } from './read-only-tag';\nexport { DismissibleTag } from './dismissible-tag';\nexport { SelectableTag } from './selectable-tag';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;;;;;;;;;;;;;;;;;;AAEH,yCAAwC;AAA/B,sGAAA,SAAS,OAAA;AAClB,+CAA6C;AAApC,2GAAA,WAAW,OAAA;AACpB,mCAAkC;AAAzB,gGAAA,MAAM,OAAA;AACf,uCAAsC;AAA7B,oGAAA,QAAQ,OAAA;AACjB,mCAAkC;AAAzB,gGAAA,MAAM,OAAA;AACf,iCAAgC;AAAvB,8FAAA,KAAK,OAAA;AACd,+BAA8B;AAArB,4FAAA,IAAI,OAAA;AACb,6CAA2C;AAAlC,yGAAA,UAAU,OAAA;AACnB,mCAAkC;AAAzB,gGAAA,MAAM,OAAA;AACf,qDAAmD;AAA1C,iHAAA,cAAc,OAAA;AACvB,+BAA8B;AAArB,4FAAA,IAAI,OAAA;AACb,yDAAuD;AAA9C,qHAAA,gBAAgB,OAAA;AACzB,qCAAoC;AAA3B,kGAAA,OAAO,OAAA;AAChB,+CAA6C;AAApC,2GAAA,WAAW,OAAA;AACpB,uCAAsC;AAA7B,oGAAA,QAAQ,OAAA;AACjB,8CAA4B;AAC5B,2CAAyC;AAAhC,uGAAA,SAAS,OAAA;AAClB,yCAAuC;AAA9B,qGAAA,QAAQ,OAAA;AACjB,yCAAuC;AAA9B,qGAAA,QAAQ,OAAA;AACjB,mCAAkC;AAAzB,gGAAA,MAAM,OAAA;AACf,6BAA4B;AAAnB,0FAAA,GAAG,OAAA;AACZ,0CAAwB;AACxB,mCAAkC;AAAzB,gGAAA,MAAM,OAAA;AACf,6CAA2C;AAAlC,yGAAA,UAAU,OAAA;AACnB,2CAAyC;AAAhC,uGAAA,SAAS,OAAA;AAClB,uDAAqD;AAA5C,mHAAA,eAAe,OAAA;AACxB,qDAAmD;AAA1C,iHAAA,cAAc,OAAA;AACvB,2CAA0C;AAAjC,wGAAA,UAAU,OAAA;AACnB,mCAAkC;AAAzB,gGAAA,MAAM,OAAA;AACf,6CAA4C;AAAnC,0GAAA,WAAW,OAAA;AACpB,0CAAwB;AACxB,6BAA4B;AAAnB,0FAAA,GAAG,OAAA;AACZ,+BAA8B;AAArB,4FAAA,IAAI,OAAA;AACb,mCAAkC;AAAzB,gGAAA,MAAM,OAAA;AACf,+BAA8B;AAArB,4FAAA,IAAI,OAAA;AACb,uDAAqD;AAA5C,mHAAA,eAAe,OAAA;AACxB,mCAAkC;AAAzB,gGAAA,MAAM,OAAA;AACf,6CAA2C;AAAlC,yGAAA,UAAU,OAAA;AACnB,qDAAmD;AAA1C,iHAAA,cAAc,OAAA;AACvB,qCAAoC;AAA3B,kGAAA,OAAO,OAAA;AAChB,8CAA4B;AAC5B,iCAA0E;AAAjE,0GAAA,iBAAiB,OAAA;AAAE,gGAAA,OAAO,OAAA;AAAE,8FAAA,KAAK,OAAA;AAC1C,qCAAoC;AAA3B,kGAAA,OAAO,OAAA;AAChB,uCAAsC;AAA7B,oGAAA,QAAQ,OAAA;AACjB,6CAAuD;AAA9C,yGAAA,UAAU,OAAA;AAAE,yGAAA,UAAU,OAAA;AAC/B,qDAAmD;AAA1C,iHAAA,cAAc,OAAA;AACvB,yCAMqB;AALnB,sGAAA,SAAS,OAAA;AACT,8GAAA,iBAAiB,OAAA;AACjB,4GAAA,eAAe,OAAA;AACf,0GAAA,aAAa,OAAA;AACb,gHAAA,mBAAmB,OAAA;AAErB,6CAA2C;AAAlC,yGAAA,UAAU,OAAA;AACnB,6CAA2C;AAAlC,yGAAA,UAAU,OAAA;AACnB,yDAAsD;AAA7C,oHAAA,eAAe,OAAA;AACxB,yDAAsD;AAA7C,oHAAA,eAAe,OAAA;AACxB,uDAAqD;AAA5C,mHAAA,eAAe,OAAA;AACxB,+CAA6C;AAApC,2GAAA,WAAW,OAAA;AACpB,qDAAmD;AAA1C,iHAAA,cAAc,OAAA;AACvB,iDAA+C;AAAtC,6GAAA,YAAY,OAAA;AACrB,6CAA2C;AAAlC,yGAAA,UAAU,OAAA;AACnB,+BAA8B;AAArB,4FAAA,IAAI,OAAA;AACb,6BAA4B;AAAnB,0FAAA,GAAG,OAAA;AACZ,2DAAwD;AAA/C,sHAAA,gBAAgB,OAAA;AACzB,iDAA8C;AAArC,4GAAA,WAAW,OAAA;AACpB,qDAAmD;AAA1C,iHAAA,cAAc,OAAA;AACvB,mDAAiD;AAAxC,+GAAA,aAAa,OAAA","sourcesContent":["/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nexport { Accordion } from './accordion';\nexport { StatusLabel } from './status-label';\nexport { Banner } from './banner';\nexport { Checkbox } from './checkbox';\nexport { Switch } from './switch';\nexport { Radio } from './radio';\nexport { Menu } from './menu';\nexport { DatePicker } from './date-picker';\nexport { Dialog } from './dialog';\nexport { LoadingSpinner } from './loading-spinner';\nexport { Tabs } from './tabs';\nexport { SegmentedControl } from './segmented-control';\nexport { Popover } from './popover';\nexport { ProgressBar } from './progress-bar';\nexport { Dropzone } from './dropzone';\nexport * from './data-grid';\nexport { TextInput } from './text-input';\nexport { TextArea } from './text-area';\nexport { TextLink } from './text-link';\nexport { Select } from './select';\nexport { Tag } from './tag';\nexport * from './theme';\nexport { Wizard } from './wizard';\nexport { GraphLabel } from './graph-label';\nexport { CodeBlock } from './code-block';\nexport { StatusIndicator } from './status-indicator';\nexport { SideNavigation } from './side-navigation';\nexport { Typography } from './typography';\nexport { Drawer } from './drawer';\nexport { Breadcrumbs } from './breadcrumbs';\nexport * from './hooks';\nexport { Box } from './box';\nexport { Flex } from './flex';\nexport { Avatar } from './avatar';\nexport { Logo } from './logo';\nexport { ClipboardButton } from './clipboard-button';\nexport { Slider } from './slider';\nexport { InlineEdit } from './inline-edit';\nexport { DropdownButton } from './dropdown-button';\nexport { Divider } from './divider';\nexport * from './tree-view';\nexport { ToasterControlled, Toaster, toast, type ToastId } from './toast';\nexport { Tooltip } from './tooltip';\nexport { Skeleton } from './skeleton';\nexport { TimePicker, NeedleTime } from './time-picker';\nexport { TimeZonePicker } from './timezone-picker';\nexport {\n  Spotlight,\n  SpotlightProvider,\n  SpotlightTarget,\n  SpotlightTour,\n  useSpotlightContext,\n} from './spotlight';\nexport { LoadingBar } from './loading-bar';\nexport { IconButton } from './icon-button';\nexport { CleanIconButton } from './clean-icon-button';\nexport { IconButtonArray } from './icon-button-array';\nexport { ConditionalWrap } from './conditional-wrap';\nexport { ColorPicker } from './color-picker';\nexport { OutlinedButton } from './outlined-button';\nexport { FilledButton } from './filled-button';\nexport { TextButton } from './text-button';\nexport { Code } from './code';\nexport { Kbd } from './kbd';\nexport { SelectIconButton } from './select-icon-button';\nexport { ReadOnlyTag } from './read-only-tag';\nexport { DismissibleTag } from './dismissible-tag';\nexport { SelectableTag } from './selectable-tag';\n"]}

package/lib/esm/_common/component-docs-page.js

@@ -0,0 +1,69 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ *
+ *  Copyright (c) "Neo4j"
+ *  Neo4j Sweden AB [http://neo4j.com]
+ *
+ *  This file is part of Neo4j.
+ *
+ *  Neo4j is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+import { Markdown } from '@storybook/addon-docs/blocks';
+import { useCallback } from 'react';
+import { TextLink } from '../text-link';
+import { Typography } from '../typography';
+/**
+ * Creates a Storybook docs page that combines a component's README (props)
+ * and optional ACCESSIBILITY.md into a single page with a navigation index.
+ *
+ * Requires the `autodocs` tag on the component meta to create a Docs entry in the sidebar
+ * (the global preview config disables autodocs with `!autodocs`).
+ *
+ * Usage in a *.stories.tsx file:
+ * ```ts
+ * import ReadmeContent from '../README.md?raw';
+ * import AccessibilityContent from '../ACCESSIBILITY.md?raw';
+ * import { createComponentDocsPage } from '../../_common/component-docs-page';
+ *
+ * const meta: Meta = {
+ *   // ...
+ *   tags: ['docsPage', 'autodocs'],
+ *   parameters: {
+ *     docs: {
+ *       page: createComponentDocsPage(ReadmeContent, AccessibilityContent),
+ *     },
+ *   },
+ * };
+ * ```
+ */
+function stripMarkdownComments(content) {
+    return content.replace(/^\[\/\/\]: #.*\n*/gm, '');
+}
+export function createComponentDocsPage(readme, accessibility) {
+    const cleaned = stripMarkdownComments(readme);
+    const cleanedA11y = accessibility
+        ? stripMarkdownComments(accessibility).replace(/^## /gm, '### ')
+        : null;
+    return function ComponentDocsPage() {
+        const scrollTo = useCallback((e, id) => {
+            var _a;
+            e.preventDefault();
+            (_a = document.getElementById(id)) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ behavior: 'smooth' });
+        }, []);
+        return (_jsxs(_Fragment, { children: [cleanedA11y && (_jsxs(_Fragment, { children: [_jsx(Typography, { as: "h1", variant: "title-1", children: "Docs" }), _jsxs("nav", { className: "n-flex n-flex-col n-gap-token-2 n-mb-2", children: [_jsx(TextLink, { href: "#props", htmlAttributes: { onClick: (e) => scrollTo(e, 'props') }, children: "Props" }), _jsx(TextLink, { href: "#accessibility", htmlAttributes: {
+                                        onClick: (e) => scrollTo(e, 'accessibility'),
+                                    }, children: "Accessibility" })] })] })), _jsx(Markdown, { children: cleaned }), cleanedA11y && (_jsx(_Fragment, { children: _jsx(Markdown, { children: `## Accessibility\n\n${cleanedA11y}` }) }))] }));
+    };
+}
+//# sourceMappingURL=component-docs-page.js.map

package/lib/esm/_common/component-docs-page.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"component-docs-page.js","sourceRoot":"","sources":["../../../src/_common/component-docs-page.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,OAAO,EAAE,QAAQ,EAAE,MAAM,8BAA8B,CAAC;AACxD,OAAO,EAAmB,WAAW,EAAE,MAAM,OAAO,CAAC;AAErD,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AACxC,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAE3C;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAEH,SAAS,qBAAqB,CAAC,OAAe;IAC5C,OAAO,OAAO,CAAC,OAAO,CAAC,qBAAqB,EAAE,EAAE,CAAC,CAAC;AACpD,CAAC;AAED,MAAM,UAAU,uBAAuB,CACrC,MAAc,EACd,aAAsB;IAEtB,MAAM,OAAO,GAAG,qBAAqB,CAAC,MAAM,CAAC,CAAC;IAC9C,MAAM,WAAW,GAAG,aAAa;QAC/B,CAAC,CAAC,qBAAqB,CAAC,aAAa,CAAC,CAAC,OAAO,CAAC,QAAQ,EAAE,MAAM,CAAC;QAChE,CAAC,CAAC,IAAI,CAAC;IAET,OAAO,SAAS,iBAAiB;QAC/B,MAAM,QAAQ,GAAG,WAAW,CAC1B,CAAC,CAAgC,EAAE,EAAU,EAAE,EAAE;;YAC/C,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,MAAA,QAAQ,CAAC,cAAc,CAAC,EAAE,CAAC,0CAAE,cAAc,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,CAAC;QACtE,CAAC,EACD,EAAE,CACH,CAAC;QAEF,OAAO,CACL,8BACG,WAAW,IAAI,CACd,8BACE,KAAC,UAAU,IAAC,EAAE,EAAC,IAAI,EAAC,OAAO,EAAC,SAAS,qBAExB,EACb,eAAK,SAAS,EAAC,wCAAwC,aACrD,KAAC,QAAQ,IACP,IAAI,EAAC,QAAQ,EACb,cAAc,EAAE,EAAE,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,QAAQ,CAAC,CAAC,EAAE,OAAO,CAAC,EAAE,sBAG/C,EACX,KAAC,QAAQ,IACP,IAAI,EAAC,gBAAgB,EACrB,cAAc,EAAE;wCACd,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,QAAQ,CAAC,CAAC,EAAE,eAAe,CAAC;qCAC7C,8BAGQ,IACP,IACL,CACJ,EACD,KAAC,QAAQ,cAAE,OAAO,GAAY,EAC7B,WAAW,IAAI,CACd,4BACE,KAAC,QAAQ,cAAE,uBAAuB,WAAW,EAAE,GAAY,GAC1D,CACJ,IACA,CACJ,CAAC;IACJ,CAAC,CAAC;AACJ,CAAC","sourcesContent":["/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\nimport { Markdown } from '@storybook/addon-docs/blocks';\nimport { type MouseEvent, useCallback } from 'react';\n\nimport { TextLink } from '../text-link';\nimport { Typography } from '../typography';\n\n/**\n * Creates a Storybook docs page that combines a component's README (props)\n * and optional ACCESSIBILITY.md into a single page with a navigation index.\n *\n * Requires the `autodocs` tag on the component meta to create a Docs entry in the sidebar\n * (the global preview config disables autodocs with `!autodocs`).\n *\n * Usage in a *.stories.tsx file:\n * ```ts\n * import ReadmeContent from '../README.md?raw';\n * import AccessibilityContent from '../ACCESSIBILITY.md?raw';\n * import { createComponentDocsPage } from '../../_common/component-docs-page';\n *\n * const meta: Meta = {\n *   // ...\n *   tags: ['docsPage', 'autodocs'],\n *   parameters: {\n *     docs: {\n *       page: createComponentDocsPage(ReadmeContent, AccessibilityContent),\n *     },\n *   },\n * };\n * ```\n */\n\nfunction stripMarkdownComments(content: string): string {\n  return content.replace(/^\\[\\/\\/\\]: #.*\\n*/gm, '');\n}\n\nexport function createComponentDocsPage(\n  readme: string,\n  accessibility?: string,\n) {\n  const cleaned = stripMarkdownComments(readme);\n  const cleanedA11y = accessibility\n    ? stripMarkdownComments(accessibility).replace(/^## /gm, '### ')\n    : null;\n\n  return function ComponentDocsPage() {\n    const scrollTo = useCallback(\n      (e: MouseEvent<HTMLAnchorElement>, id: string) => {\n        e.preventDefault();\n        document.getElementById(id)?.scrollIntoView({ behavior: 'smooth' });\n      },\n      [],\n    );\n\n    return (\n      <>\n        {cleanedA11y && (\n          <>\n            <Typography as=\"h1\" variant=\"title-1\">\n              Docs\n            </Typography>\n            <nav className=\"n-flex n-flex-col n-gap-token-2 n-mb-2\">\n              <TextLink\n                href=\"#props\"\n                htmlAttributes={{ onClick: (e) => scrollTo(e, 'props') }}\n              >\n                Props\n              </TextLink>\n              <TextLink\n                href=\"#accessibility\"\n                htmlAttributes={{\n                  onClick: (e) => scrollTo(e, 'accessibility'),\n                }}\n              >\n                Accessibility\n              </TextLink>\n            </nav>\n          </>\n        )}\n        <Markdown>{cleaned}</Markdown>\n        {cleanedA11y && (\n          <>\n            <Markdown>{`## Accessibility\\n\\n${cleanedA11y}`}</Markdown>\n          </>\n        )}\n      </>\n    );\n  };\n}\n"]}

package/lib/esm/data-grid/Components.js

@@ -43,6 +43,7 @@ import { Skeleton } from '../skeleton';
 import { Typography } from '../typography';
 import { useDataGridContext } from './data-grid-context';
 import { resizeColumn, ResizeDirection, userFriendlyPagination, } from './helpers';
+import { useDataGridCellStyle } from './style-rules/hooks';
 /** Table results per page, with the first option being the default */
 const TABLE_RESULTS = {
     DEFAULT: 10,
@@ -280,6 +281,7 @@ const BodyCell = (_a) => {
     const isDropDownCell = Boolean((_d = cell.column.columnDef.meta) === null || _d === void 0 ? void 0 : _d.isDropDownCell);
     const isCustomCell = isActionColumn || isDropDownCell;
     const { isKeyboardNavigationEnabled, isSkeletonLoading, skeletonProps } = useDataGridContext();
+    const ruleStyle = useDataGridCellStyle(cell);
     return (_jsx("div", Object.assign({ ref: ref, className: classNames('ndl-data-grid-td', className, {
             'ndl-data-grid-custom-cell': isCustomCell,
             'ndl-data-grid-dropdown-cell': isDropDownCell,
@@ -290,7 +292,7 @@ const BodyCell = (_a) => {
             'ndl-data-grid-pinned-cell-right': cell.column.getIsPinned() === 'right',
             'ndl-data-grid-row-action': isActionColumn,
             'ndl-focusable-cell': isKeyboardNavigationEnabled,
-        }), role: "cell", tabIndex: isKeyboardNavigationEnabled ? 0 : undefined, style: Object.assign(Object.assign({}, style), { width: isActionColumn ? 40 : cell.column.getSize() }) }, restProps, htmlAttributes, { children: _jsx(Skeleton, Object.assign({ onBackground: "weak", shape: "rectangular", width: "100%" }, skeletonProps, { isLoading: isSkeletonLoading && !isActionColumn, children: children || flexRender(cell.column.columnDef.cell, cell.getContext()) })) }), cell.id));
+        }), role: "cell", tabIndex: isKeyboardNavigationEnabled ? 0 : undefined, style: Object.assign(Object.assign(Object.assign({}, ruleStyle), style), { width: isActionColumn ? 40 : cell.column.getSize() }) }, restProps, htmlAttributes, { children: _jsx(Skeleton, Object.assign({ onBackground: "weak", shape: "rectangular", width: "100%" }, skeletonProps, { isLoading: isSkeletonLoading && !isActionColumn, children: children || flexRender(cell.column.columnDef.cell, cell.getContext()) })) }), cell.id));
 };
 const BodyRow = (_a) => {
     var { row, children, className, style, htmlAttributes, ref } = _a, restProps = __rest(_a, ["row", "children", "className", "style", "htmlAttributes", "ref"]);