@kemu-io/hs-react 0.2.38 → 0.2.39

package/cjs/components/WidgetContainer.d.ts

@@ -3,6 +3,11 @@ export type WrapperProps = {
 	cHeight?: number | string;
 	noPadding?: boolean;
 	noBorderRadius?: boolean;
+	/**
+	 * Overrides the default widget color from the manifest.
+	 * If not set, the widget will use the color defined in its manifest file.
+	 */
+	overrideColor?: string;
 };
 export type WidthLessProps = Omit<WrapperProps, "cWidth" | "cHeight"> & {
 	width?: number | string;

package/cjs/components/WidgetContainer.js

@@ -1,12 +1,13 @@
 "use strict";var __importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0});const jsx_runtime_1=require("react/jsx-runtime"),styled_1=__importDefault(require("@emotion/styled")),constants_js_1=require("../constants.js"),react_1=require("react"),InstanceContext_js_1=require("../lib/InstanceContext.js"),WidgetContainer=styled_1.default.div`
   width: ${({cWidth:e})=>"number"==typeof e?`${e}px`:e||"64px"};
   height: ${({cHeight:e})=>"number"==typeof e?`${e}px`:e||"64px"};
-  background-color: ${({manifest:e,disabled:t,serviceOnline:s})=>t||!s?"#bbb":e.color};
+  background-color: ${({manifest:e,disabled:t,serviceOnline:r,overrideColor:i})=>t||!r?"#bbb":i||e.color};
   ${({noBorderRadius:e})=>e?"":"border-radius: 8px;"}
   ${({noPadding:e})=>e?"":"padding: 6px;"}
 
   /* Add a shadow when the widget is selected */
   .${constants_js_1.WIDGET_SELECTED_CLS} & {
-    box-shadow: 0px 0px 7px 1px ${({manifest:e,disabled:t,serviceOnline:s})=>t||!s?"#bbb":e.color};
+    box-shadow: 0px 0px 7px 1px
+      ${({manifest:e,disabled:t,serviceOnline:r,overrideColor:i})=>t||!r?"#bbb":i||e.color};
   }
-`,Wrap=e=>{const t=(0,react_1.useContext)(InstanceContext_js_1.WidgetInstanceContext).getWidgetProps(),{className:s,width:r,height:n,...i}=e;return(0,jsx_runtime_1.jsx)(WidgetContainer,{cWidth:r,cHeight:n,...i,...t,className:`k-hs-wrap ${s||""}`,children:e.children})};exports.default=Wrap;
+`,Wrap=e=>{const t=(0,react_1.useContext)(InstanceContext_js_1.WidgetInstanceContext).getWidgetProps(),{className:r,width:i,height:n,...o}=e,s=t.variantId?t.manifest.variants?.find((e=>e.id===t.variantId)):null,a=s?s.color||t.manifest.color:void 0;return(0,jsx_runtime_1.jsx)(WidgetContainer,{cWidth:i,cHeight:n,...o,...t,className:`k-hs-wrap ${r||""}`,overrideColor:e.overrideColor||a,children:e.children})};exports.default=Wrap;

package/cjs/components/index.d.ts

@@ -68,6 +68,11 @@ type WrapperProps$1 = {
 	cHeight?: number | string;
 	noPadding?: boolean;
 	noBorderRadius?: boolean;
+	/**
+	 * Overrides the default widget color from the manifest.
+	 * If not set, the widget will use the color defined in its manifest file.
+	 */
+	overrideColor?: string;
 };
 export type WidthLessProps = Omit<WrapperProps$1, "cWidth" | "cHeight"> & {
 	width?: number | string;

package/mjs/components/WidgetContainer.d.ts

@@ -3,6 +3,11 @@ export type WrapperProps = {
 	cHeight?: number | string;
 	noPadding?: boolean;
 	noBorderRadius?: boolean;
+	/**
+	 * Overrides the default widget color from the manifest.
+	 * If not set, the widget will use the color defined in its manifest file.
+	 */
+	overrideColor?: string;
 };
 export type WidthLessProps = Omit<WrapperProps, "cWidth" | "cHeight"> & {
 	width?: number | string;

package/mjs/components/WidgetContainer.js

@@ -1,12 +1,13 @@
 import{jsx as _jsx}from"react/jsx-runtime";import styled from"@emotion/styled";import{WIDGET_SELECTED_CLS}from"../constants.js";import{useContext}from"react";import{WidgetInstanceContext}from"../lib/InstanceContext.js";const WidgetContainer=styled.div`
   width: ${({cWidth:e})=>"number"==typeof e?`${e}px`:e||"64px"};
   height: ${({cHeight:e})=>"number"==typeof e?`${e}px`:e||"64px"};
-  background-color: ${({manifest:e,disabled:t,serviceOnline:i})=>t||!i?"#bbb":e.color};
+  background-color: ${({manifest:e,disabled:t,serviceOnline:o,overrideColor:r})=>t||!o?"#bbb":r||e.color};
   ${({noBorderRadius:e})=>e?"":"border-radius: 8px;"}
   ${({noPadding:e})=>e?"":"padding: 6px;"}
 
   /* Add a shadow when the widget is selected */
   .${WIDGET_SELECTED_CLS} & {
-    box-shadow: 0px 0px 7px 1px ${({manifest:e,disabled:t,serviceOnline:i})=>t||!i?"#bbb":e.color};
+    box-shadow: 0px 0px 7px 1px
+      ${({manifest:e,disabled:t,serviceOnline:o,overrideColor:r})=>t||!o?"#bbb":r||e.color};
   }
-`,Wrap=e=>{const t=useContext(WidgetInstanceContext).getWidgetProps(),{className:i,width:o,height:n,...r}=e;return _jsx(WidgetContainer,{cWidth:o,cHeight:n,...r,...t,className:`k-hs-wrap ${i||""}`,children:e.children})};export default Wrap;
+`,Wrap=e=>{const t=useContext(WidgetInstanceContext).getWidgetProps(),{className:o,width:r,height:i,...n}=e,d=t.variantId?t.manifest.variants?.find((e=>e.id===t.variantId)):null,s=d?d.color||t.manifest.color:void 0;return _jsx(WidgetContainer,{cWidth:r,cHeight:i,...n,...t,className:`k-hs-wrap ${o||""}`,overrideColor:e.overrideColor||s,children:e.children})};export default Wrap;

package/mjs/components/index.d.ts

@@ -68,6 +68,11 @@ type WrapperProps$1 = {
 	cHeight?: number | string;
 	noPadding?: boolean;
 	noBorderRadius?: boolean;
+	/**
+	 * Overrides the default widget color from the manifest.
+	 * If not set, the widget will use the color defined in its manifest file.
+	 */
+	overrideColor?: string;
 };
 export type WidthLessProps = Omit<WrapperProps$1, "cWidth" | "cHeight"> & {
 	width?: number | string;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@kemu-io/hs-react",
   "type": "module",
-  "version": "0.2.38",
+  "version": "0.2.39",
   "description": "Kemu Hub Service library for React",
   "author": "Kemu Pty Ltd",
   "main": "cjs/WidgetWrapper.js",