@crystaldesign/content-item 25.8.0-beta.29 → 25.8.0-beta.30

package/build/esm/index.js

@@ -509,7 +509,7 @@ var paddingLeft = "padding-left-The7U";
 var headerLeft = "header-left-pbZcL";
 var backButton = "back-button-2IUJb";
 var closeButton = "close-button-VW8Z5";
-var css_248z$5 = ".header-7dWXW {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 0px 12px;\n  width: calc(100% - 24px);\n  justify-content: space-between;\n  border-bottom: 1px solid lightgray;\n}\n.padding-left-The7U {\n  padding-left: 34px;\n}\n.header-left-pbZcL {\n  display: flex;\n  align-items: center;\n  width: 90%;\n}\n\n.back-button-2IUJb {\n  background: none;\n  border: none;\n  cursor: pointer;\n  font-size: 20px;\n  color: #666;\n  transition:\n    color 0.2s ease,\n    background-color 0.2s ease;\n  border-radius: 50%;\n  width: 34px;\n  height: 34px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding-bottom: 4px;\n}\n\n.back-button-2IUJb:after {\n  content: '←';\n  display: block;\n  text-align: center;\n}\n\n.back-button-2IUJb:hover,\n.close-button-VW8Z5:hover {\n  color: #333;\n  background-color: rgba(0, 0, 0, 0.05);\n  background-size: 45%;\n}\n.close-button-VW8Z5 {\n  width: 36px;\n  height: 36px;\n  background-repeat: no-repeat;\n  border-radius: 50%;\n  background-position: center center;\n  background-size: 40%;\n  background-color: transparent;\n  transition:\n    background-color 0.2s ease,\n    background-size 0.2s ease;\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2210%22 height%3D%2210%22 viewBox%3D%220 0 10 10%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M1.35355 0.646447C1.15829 0.451184 0.841709 0.451184 0.646447 0.646447C0.451184 0.841709 0.451184 1.15829 0.646447 1.35355L1.35355 0.646447ZM8.64645 9.35355C8.84171 9.54882 9.15829 9.54882 9.35355 9.35355C9.54882 9.15829 9.54882 8.84171 9.35355 8.64645L8.64645 9.35355ZM9.35355 1.35355C9.54882 1.15829 9.54882 0.841709 9.35355 0.646447C9.15829 0.451184 8.84171 0.451184 8.64645 0.646447L9.35355 1.35355ZM0.646447 8.64645C0.451185 8.84171 0.451185 9.15829 0.646447 9.35355C0.841709 9.54881 1.15829 9.54881 1.35355 9.35355L0.646447 8.64645ZM0.646447 1.35355L8.64645 9.35355L9.35355 8.64645L1.35355 0.646447L0.646447 1.35355ZM8.64645 0.646447L0.646447 8.64645L1.35355 9.35355L9.35355 1.35355L8.64645 0.646447Z%22 fill%3D%22%234F4F4F%22%2F%3E%3C%2Fsvg%3E\");\n\n  cursor: pointer;\n}\n";
+var css_248z$5 = ".header-7dWXW {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 0px 12px;\n  width: calc(100% - 24px);\n  justify-content: space-between;\n  border-bottom: 1px solid lightgray;\n  position: relative;\n}\n.padding-left-The7U {\n  padding-left: 34px;\n}\n.header-left-pbZcL {\n  display: flex;\n  align-items: center;\n  width: 90%;\n}\n\n.back-button-2IUJb {\n  background: none;\n  border: none;\n  cursor: pointer;\n  font-size: 20px;\n  color: #666;\n  transition:\n    color 0.2s ease,\n    background-color 0.2s ease;\n  border-radius: 50%;\n  width: 34px;\n  height: 34px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding-bottom: 4px;\n}\n\n.back-button-2IUJb:after {\n  content: '←';\n  display: block;\n  text-align: center;\n}\n\n.back-button-2IUJb:hover,\n.close-button-VW8Z5:hover {\n  color: #333;\n  background-color: rgba(0, 0, 0, 0.05);\n  background-size: 45%;\n}\n.close-button-VW8Z5 {\n  width: 36px;\n  height: 36px;\n  background-repeat: no-repeat;\n  border-radius: 50%;\n  background-position: center center;\n  background-size: 40%;\n  background-color: transparent;\n  transition:\n    background-color 0.2s ease,\n    background-size 0.2s ease;\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2210%22 height%3D%2210%22 viewBox%3D%220 0 10 10%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M1.35355 0.646447C1.15829 0.451184 0.841709 0.451184 0.646447 0.646447C0.451184 0.841709 0.451184 1.15829 0.646447 1.35355L1.35355 0.646447ZM8.64645 9.35355C8.84171 9.54882 9.15829 9.54882 9.35355 9.35355C9.54882 9.15829 9.54882 8.84171 9.35355 8.64645L8.64645 9.35355ZM9.35355 1.35355C9.54882 1.15829 9.54882 0.841709 9.35355 0.646447C9.15829 0.451184 8.84171 0.451184 8.64645 0.646447L9.35355 1.35355ZM0.646447 8.64645C0.451185 8.84171 0.451185 9.15829 0.646447 9.35355C0.841709 9.54881 1.15829 9.54881 1.35355 9.35355L0.646447 8.64645ZM0.646447 1.35355L8.64645 9.35355L9.35355 8.64645L1.35355 0.646447L0.646447 1.35355ZM8.64645 0.646447L0.646447 8.64645L1.35355 9.35355L9.35355 1.35355L8.64645 0.646447Z%22 fill%3D%22%234F4F4F%22%2F%3E%3C%2Fsvg%3E\");\n  z-index: 1000;\n  border: none;\n  padding: 0px;\n  cursor: pointer;\n  align-self: flex-start;\n  margin-top: 10px;\n}\n";
 styleInject(css_248z$5);
 
 function ownKeys$1(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -517,7 +517,8 @@ function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var t
 var Header = function Header(_ref) {
   var onClose = _ref.onClose,
     headerClassName = _ref.headerClassName,
-    headerWrapperStyle = _ref.headerWrapperStyle;
+    headerWrapperStyle = _ref.headerWrapperStyle,
+    children = _ref.children;
   var _useContentItem = useContentItem(),
     canGoBack = _useContentItem.canGoBack,
     navigateBack = _useContentItem.navigateBack,
@@ -527,10 +528,10 @@ var Header = function Header(_ref) {
     return /*#__PURE__*/jsx(Fragment, {});
   }
   return /*#__PURE__*/jsxs("div", {
-    className: classNames(header, headerClassName),
-    style: headerWrapperStyle,
+    className: classNames(header),
     children: [/*#__PURE__*/jsxs("div", {
-      className: classNames(headerLeft, !canGoBack && hasNavigations && paddingLeft),
+      className: classNames(headerLeft, headerClassName, !canGoBack && hasNavigations && paddingLeft),
+      style: headerWrapperStyle,
       children: [canGoBack && /*#__PURE__*/jsx("button", {
         className: backButton,
         onClick: navigateBack,
@@ -543,12 +544,12 @@ var Header = function Header(_ref) {
           })
         })
       })]
-    }), onClose && /*#__PURE__*/jsx("div", {
+    }), onClose && /*#__PURE__*/jsx("button", {
       className: closeButton,
       onClick: onClose,
       id: "diva-content-item-close-button",
       "aria-label": "Close"
-    })]
+    }), !!children && children]
   });
 };
 
@@ -565,6 +566,7 @@ function ContentItemContextProvider(_ref) {
     initialItemCodex = _ref.initialItemCodex,
     initialItemConfiguration = _ref.initialItemConfiguration,
     children = _ref.children,
+    headerChildren = _ref.headerChildren,
     headerClassName = _ref.headerClassName,
     headerWrapperStyle = _ref.headerWrapperStyle,
     onClose = _ref.onClose,
@@ -581,7 +583,8 @@ function ContentItemContextProvider(_ref) {
     children: [/*#__PURE__*/jsx(Header, {
       headerClassName: headerClassName,
       onClose: onClose,
-      headerWrapperStyle: headerWrapperStyle
+      headerWrapperStyle: headerWrapperStyle,
+      children: headerChildren
     }), children]
   });
 }
@@ -860,6 +863,7 @@ var ContentItemComponent = function ContentItemComponent(props) {
     wrapperStyle: props.wrapperStyle,
     headerWrapperStyle: props.headerWrapperStyle,
     headerClassName: props.headerClassName,
+    headerChildren: props.headerChildren,
     onContentItemLoaded: props.onContentItemLoaded,
     onClose: props.onClose,
     children: /*#__PURE__*/jsx(ContentItems, {

package/build/types/content-item/src/Components/ContentItemContextProvider/index.d.ts

@@ -7,10 +7,11 @@ export interface ContentItemContextProviderProps {
     children?: ReactNode;
     headerClassName?: string;
     headerWrapperStyle?: React.CSSProperties;
+    headerChildren?: ReactNode;
     onClose?: () => void;
     wrapperStyle?: React.CSSProperties;
     onContentItemLoaded?: (title: string) => void;
 }
 export declare function useContentItem(): ContentItemContextType;
-export declare function ContentItemContextProvider({ initialItemId, initialItemCodex, initialItemConfiguration, children, headerClassName, headerWrapperStyle, onClose, onContentItemLoaded, }: ContentItemContextProviderProps): React.JSX.Element;
+export declare function ContentItemContextProvider({ initialItemId, initialItemCodex, initialItemConfiguration, children, headerChildren, headerClassName, headerWrapperStyle, onClose, onContentItemLoaded, }: ContentItemContextProviderProps): React.JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/build/types/content-item/src/Components/ContentItemContextProvider/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/Components/ContentItemContextProvider/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAA6B,SAAS,EAAE,MAAM,OAAO,CAAC;AACpE,OAAO,EAAE,aAAa,EAAE,sBAAsB,EAAE,MAAM,aAAa,CAAC;AAKpE,MAAM,WAAW,+BAA+B;IAC9C,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,wBAAwB,CAAC,EAAE,aAAa,CAAC;IACzC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,kBAAkB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACzC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,YAAY,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACnC,mBAAmB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC/C;AAID,wBAAgB,cAAc,2BAM7B;AAED,wBAAgB,0BAA0B,CAAC,EACzC,aAAa,EACb,gBAAgB,EAChB,wBAAwB,EACxB,QAAQ,EACR,eAAe,EACf,kBAAkB,EAClB,OAAO,EACP,mBAAmB,GACpB,EAAE,+BAA+B,qBASjC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/Components/ContentItemContextProvider/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAA6B,SAAS,EAAE,MAAM,OAAO,CAAC;AACpE,OAAO,EAAE,aAAa,EAAE,sBAAsB,EAAE,MAAM,aAAa,CAAC;AAKpE,MAAM,WAAW,+BAA+B;IAC9C,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,wBAAwB,CAAC,EAAE,aAAa,CAAC;IACzC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,kBAAkB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACzC,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,YAAY,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACnC,mBAAmB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC/C;AAID,wBAAgB,cAAc,2BAM7B;AAED,wBAAgB,0BAA0B,CAAC,EACzC,aAAa,EACb,gBAAgB,EAChB,wBAAwB,EACxB,QAAQ,EACR,cAAc,EACd,eAAe,EACf,kBAAkB,EAClB,OAAO,EACP,mBAAmB,GACpB,EAAE,+BAA+B,qBAWjC"}

package/build/types/content-item/src/Components/Header/index.d.ts

@@ -3,7 +3,8 @@ interface HeaderProps {
     onClose?: () => void;
     headerClassName?: string;
     headerWrapperStyle?: React.CSSProperties;
+    children?: React.ReactNode;
 }
-declare const Header: ({ onClose, headerClassName, headerWrapperStyle }: HeaderProps) => React.JSX.Element;
+declare const Header: ({ onClose, headerClassName, headerWrapperStyle, children }: HeaderProps) => React.JSX.Element;
 export default Header;
 //# sourceMappingURL=index.d.ts.map

package/build/types/content-item/src/Components/Header/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/Components/Header/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAKvC,UAAU,WAAW;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,kBAAkB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC1C;AACD,QAAA,MAAM,MAAM,qDAAsD,WAAW,sBAgB5E,CAAC;AAEF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/Components/Header/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,UAAU,WAAW;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,kBAAkB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACzC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AACD,QAAA,MAAM,MAAM,+DAAgE,WAAW,sBAiBtF,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/build/types/content-item/src/index.d.ts

@@ -11,6 +11,7 @@ export interface ContentItemProps {
     wrapperStyle?: React.CSSProperties;
     headerClassName?: string;
     headerWrapperStyle?: React.CSSProperties;
+    headerChildren?: React.ReactNode;
     onClose?: () => void;
     onContentItemLoaded?: (title: string) => void;
 }

package/build/types/content-item/src/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/index.tsx"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAIxC,MAAM,WAAW,gBAAgB;IAC/B,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,YAAY,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACnC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,kBAAkB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACzC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,mBAAmB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC/C;AAED,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAe3D,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/index.tsx"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAIxC,MAAM,WAAW,gBAAgB;IAC/B,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,YAAY,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACnC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,kBAAkB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACzC,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACjC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,mBAAmB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC/C;AAED,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAgB3D,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crystaldesign/content-item",
-  "version": "25.8.0-beta.29",
+  "version": "25.8.0-beta.30",
   "license": "MIT",
   "scripts": {
     "storybook": "storybook dev -p 6006",
@@ -34,5 +34,5 @@
   },
   "module": "build/esm/index.js",
   "types": "./build/types/content-item/src/index.d.ts",
-  "gitHead": "009208a55a7216cb5d6957c5bbd161287f25607d"
+  "gitHead": "badd1d51315a6b194f0fb3bb36bb0816f9f7cdd6"
 }