@sprinklrjs/spaceweb 14.14.4 → 14.15.0

package/banner/cvaConfig.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.bannerIconFillColor = exports.bannerRootCVA = void 0;
 var cvaWrapper_1 = require("../style/cvaWrapper");
 exports.bannerRootCVA = (0, cvaWrapper_1.cvaWrapper)('banner', 'root', [
-    'box-border w-full rounded-8 border-solid border-1 overflow-auto pb-2',
+    'box-border w-full rounded-8 border-solid border-1 overflow-auto pb-2 spr-bg-primary',
     {
         variants: {
             $intent: {

package/date-input/DateInput.js

@@ -206,8 +206,10 @@ var DateInput = function (_a) {
         var contentEl = contentRef.current;
         // The Year/Month selector menu (which gets autofocused on open) is rendered as a sibling of contentEl
         // We check contentEl.parentElement(Popover.Inner) as a potential container for events
-        if (!contentEl || !(((_a = contentEl.parentElement) === null || _a === void 0 ? void 0 : _a.contains(e.relatedTarget)) || contentEl.contains(e.relatedTarget))) {
-            closeDatePicker();
+        if (isOpen) {
+            if (!contentEl || !(((_a = contentEl.parentElement) === null || _a === void 0 ? void 0 : _a.contains(e.relatedTarget)) || contentEl.contains(e.relatedTarget))) {
+                closeDatePicker();
+            }
         }
         // on blur, clear the input if the value is malformed
         if (!value && inputValue) {

package/esm/banner/cvaConfig.js

@@ -1,6 +1,6 @@
 import { cvaWrapper } from '../style/cvaWrapper';
 export var bannerRootCVA = cvaWrapper('banner', 'root', [
-    'box-border w-full rounded-8 border-solid border-1 overflow-auto pb-2',
+    'box-border w-full rounded-8 border-solid border-1 overflow-auto pb-2 spr-bg-primary',
     {
         variants: {
             $intent: {

package/esm/date-input/DateInput.js

@@ -203,8 +203,10 @@ export var DateInput = function (_a) {
         var contentEl = contentRef.current;
         // The Year/Month selector menu (which gets autofocused on open) is rendered as a sibling of contentEl
         // We check contentEl.parentElement(Popover.Inner) as a potential container for events
-        if (!contentEl || !(((_a = contentEl.parentElement) === null || _a === void 0 ? void 0 : _a.contains(e.relatedTarget)) || contentEl.contains(e.relatedTarget))) {
-            closeDatePicker();
+        if (isOpen) {
+            if (!contentEl || !(((_a = contentEl.parentElement) === null || _a === void 0 ? void 0 : _a.contains(e.relatedTarget)) || contentEl.contains(e.relatedTarget))) {
+                closeDatePicker();
+            }
         }
         // on blur, clear the input if the value is malformed
         if (!value && inputValue) {

package/esm/input/enhancer-button.d.ts

@@ -9,6 +9,7 @@ export type FieldEnhancerSharedProps = {
     $intent?: Intent;
     $isFocused?: boolean;
     $isPseudoFocused?: boolean;
+    $isSelected?: boolean;
 };
 export type FieldEnhancerButtonProps = Omit<ButtonProps, 'size' | 'disabled' | 'intent'>;
 export type FieldEnhancerButtonConfig = FieldEnhancerButtonProps | ((sharedProps: FieldEnhancerSharedProps) => FieldEnhancerButtonProps);

package/esm/input/enhancer-button.js

@@ -34,7 +34,12 @@ export var renderFieldEnhancerButton = function (position, sharedProps, config)
         BaseButton: {
             className: [
                 'h-full min-h-0 spr-bg-secondary hover:spr-bg-secondary focus:spr-bg-secondary',
-                isStart ? 'rounded-r-0 border-r-[--sw-border-right-color]' : 'rounded-l-0 border-l-[--sw-border-left-color]',
+                function (_, _a) {
+                    var $isSelected = _a.$isSelected;
+                    return isStart
+                        ? "rounded-r-0 ".concat(!$isSelected ? 'border-r-[--sw-border-right-color]' : '')
+                        : "rounded-l-0 ".concat(!$isSelected ? 'border-l-[--sw-border-left-color]' : '');
+                },
             ],
             // @ts-ignore -- Variable needed for styling
             style: isStart ? { '--sw-border-right-color': 'transparent' } : { '--sw-border-left-color': 'transparent' },

package/esm/singleton/createSingletonInstance.d.ts

@@ -0,0 +1,9 @@
+/**
+ * This file should be used within spaceweb repository only. Using this outside may lead to breaking behavior.
+ */
+export declare enum SingletonInstanceIdentifier {
+    STYLETRON_ENGINE = "STYLETRON_ENGINE"
+}
+export declare function createSingletonInstance<T>(instanceGetter: () => T, identifier: SingletonInstanceIdentifier): T;
+export declare function getSingletonInstance<T>(identifier: string): T | undefined;
+export declare function setSingletonInstance<T>(identifier: string, instance: T): T;

package/esm/singleton/createSingletonInstance.js

@@ -0,0 +1,26 @@
+/**
+ * This file should be used within spaceweb repository only. Using this outside may lead to breaking behavior.
+ */
+/*
+ * Please refer the following doc - https://sprinklr.atlassian.net/wiki/spaces/Frontend/pages/5506367561/ModuleFederation+Handbook#Using-Singleton-Context
+ */
+export var SingletonInstanceIdentifier;
+(function (SingletonInstanceIdentifier) {
+    SingletonInstanceIdentifier["STYLETRON_ENGINE"] = "STYLETRON_ENGINE";
+})(SingletonInstanceIdentifier || (SingletonInstanceIdentifier = {}));
+var allInstances = {};
+export function createSingletonInstance(instanceGetter, identifier) {
+    if (allInstances[identifier]) {
+        return allInstances[identifier];
+    }
+    var singletonInstance = instanceGetter();
+    allInstances[identifier] = singletonInstance;
+    return singletonInstance;
+}
+export function getSingletonInstance(identifier) {
+    return allInstances[identifier];
+}
+export function setSingletonInstance(identifier, instance) {
+    allInstances[identifier] = instance;
+    return instance;
+}

package/esm/styleEngine/styleEngine.js

@@ -4,6 +4,7 @@ import { useMemo } from 'react';
 import { Client, Server } from 'styletron-engine-atomic';
 import { DebugEngine, Provider as StyletronProvider } from 'styletron-react';
 import { useDocument } from '../spacewebProvider/DocumentProvider';
+import { getSingletonInstance, setSingletonInstance, SingletonInstanceIdentifier, } from '@sprinklrjs/spaceweb/singleton/createSingletonInstance';
 export var SPACEWEB_STYLE_PREFIX = 'sw--';
 export var SPACEWEB_STYLE_CONTAINER_ID = 'spaceweb-style-cache';
 export var isServer = typeof window === 'undefined';
@@ -13,9 +14,13 @@ var NoopDebugEngine = /** @class */ (function () {
     }
     return NoopDebugEngine;
 }());
-// NOTE: Define styletron as module variable (singleton)
-var styletron;
-var hasStyletron = function () { return typeof styletron !== 'undefined'; };
+var getStyletron = function () {
+    return getSingletonInstance(SingletonInstanceIdentifier.STYLETRON_ENGINE);
+};
+var setStyletron = function (engine) {
+    return setSingletonInstance(SingletonInstanceIdentifier.STYLETRON_ENGINE, engine);
+};
+var hasStyletron = function () { return typeof getStyletron() !== 'undefined'; };
 // Throws and error if not called from the server.
 var ensureServer = function () {
     if (!isServer) {
@@ -38,26 +43,22 @@ export var hydrate = function (ownerDocument) {
 };
 // Gets isomorphic Styletron engine.
 export var getStyleEngine = function (ownerDocument, nonce) {
+    var styletron = getStyletron();
     if (isServer) {
-        if (typeof styletron !== 'undefined')
-            return styletron;
-        styletron = new Server({ prefix: SPACEWEB_STYLE_PREFIX });
+        return styletron !== null && styletron !== void 0 ? styletron : setStyletron(new Server({ prefix: SPACEWEB_STYLE_PREFIX }));
     }
-    else {
-        var doc = ownerDocument || document;
-        var el = doc.getElementById(SPACEWEB_STYLE_CONTAINER_ID);
-        if (el && styletron) {
-            return styletron;
-        }
-        // adds a style tag in document.head to make sure only one instance of styletron is created in an app.
-        appendCacheContainer(ownerDocument, nonce);
-        styletron = new Client({
-            hydrate: hydrate(ownerDocument),
-            prefix: SPACEWEB_STYLE_PREFIX,
-            container: ownerDocument === null || ownerDocument === void 0 ? void 0 : ownerDocument.head,
-        });
+    var doc = ownerDocument || document;
+    var el = doc.getElementById(SPACEWEB_STYLE_CONTAINER_ID);
+    if (el && styletron) {
+        return styletron;
     }
-    return styletron;
+    // adds a style tag in document.head to make sure only one instance of styletron is created in an app.
+    appendCacheContainer(ownerDocument, nonce);
+    return setStyletron(new Client({
+        hydrate: hydrate(ownerDocument),
+        prefix: SPACEWEB_STYLE_PREFIX,
+        container: ownerDocument === null || ownerDocument === void 0 ? void 0 : ownerDocument.head,
+    }));
 };
 // @ts-ignore
 StyletronProvider.displayName = 'StyletronProvider';
@@ -72,17 +73,17 @@ StyleProvider.displayName = 'StyleProvider';
 export var getStylesheets = function () {
     ensureServer();
     ensureEngine();
-    return styletron.getStylesheets();
+    return getStyletron().getStylesheets();
 };
 // Gets hydration stylesheets HTML code as string.
 export var getStylesheetsHtml = function () {
     ensureServer();
     ensureEngine();
-    return styletron.getStylesheetsHtml();
+    return getStyletron().getStylesheetsHtml();
 };
 export var deprecatedRenderKeyframes = function (keyframes) {
     ensureEngine();
-    return styletron.renderKeyframes(keyframes);
+    return getStyletron().renderKeyframes(keyframes);
 };
 // Appends cache styles to the DOM and returns element's instance.
 export var appendCacheContainer = function (ownerDocument, nonce) {

package/input/enhancer-button.d.ts

@@ -9,6 +9,7 @@ export type FieldEnhancerSharedProps = {
     $intent?: Intent;
     $isFocused?: boolean;
     $isPseudoFocused?: boolean;
+    $isSelected?: boolean;
 };
 export type FieldEnhancerButtonProps = Omit<ButtonProps, 'size' | 'disabled' | 'intent'>;
 export type FieldEnhancerButtonConfig = FieldEnhancerButtonProps | ((sharedProps: FieldEnhancerSharedProps) => FieldEnhancerButtonProps);

package/input/enhancer-button.js

@@ -40,7 +40,12 @@ var renderFieldEnhancerButton = function (position, sharedProps, config) {
         BaseButton: {
             className: [
                 'h-full min-h-0 spr-bg-secondary hover:spr-bg-secondary focus:spr-bg-secondary',
-                isStart ? 'rounded-r-0 border-r-[--sw-border-right-color]' : 'rounded-l-0 border-l-[--sw-border-left-color]',
+                function (_, _a) {
+                    var $isSelected = _a.$isSelected;
+                    return isStart
+                        ? "rounded-r-0 ".concat(!$isSelected ? 'border-r-[--sw-border-right-color]' : '')
+                        : "rounded-l-0 ".concat(!$isSelected ? 'border-l-[--sw-border-left-color]' : '');
+                },
             ],
             // @ts-ignore -- Variable needed for styling
             style: isStart ? { '--sw-border-right-color': 'transparent' } : { '--sw-border-left-color': 'transparent' },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sprinklrjs/spaceweb",
-  "version": "14.14.4",
+  "version": "14.15.0",
   "description": "Components for SpaceWeb",
   "main": "index.js",
   "module": "./esm/index.js",
@@ -98,10 +98,11 @@
     "postcss": "^7.0.27",
     "postcss-js": "^2.0.3",
     "react-test-renderer": "^17.0.2",
-    "ts-node": "^10.4.0"
+    "ts-node": "^10.4.0",
+    "typescript": "~5.0.0"
   },
   "peerDependencies": {
-    "@sprinklrjs/spaceweb-themes": "14.14.4",
+    "@sprinklrjs/spaceweb-themes": "14.15.0",
     "react": ">=17.0.2 <19.0.0",
     "react-dom": ">=17.0.2 <19.0.0"
   }

package/singleton/createSingletonInstance.d.ts

@@ -0,0 +1,9 @@
+/**
+ * This file should be used within spaceweb repository only. Using this outside may lead to breaking behavior.
+ */
+export declare enum SingletonInstanceIdentifier {
+    STYLETRON_ENGINE = "STYLETRON_ENGINE"
+}
+export declare function createSingletonInstance<T>(instanceGetter: () => T, identifier: SingletonInstanceIdentifier): T;
+export declare function getSingletonInstance<T>(identifier: string): T | undefined;
+export declare function setSingletonInstance<T>(identifier: string, instance: T): T;

package/singleton/createSingletonInstance.js

@@ -0,0 +1,32 @@
+"use strict";
+/**
+ * This file should be used within spaceweb repository only. Using this outside may lead to breaking behavior.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.setSingletonInstance = exports.getSingletonInstance = exports.createSingletonInstance = exports.SingletonInstanceIdentifier = void 0;
+/*
+ * Please refer the following doc - https://sprinklr.atlassian.net/wiki/spaces/Frontend/pages/5506367561/ModuleFederation+Handbook#Using-Singleton-Context
+ */
+var SingletonInstanceIdentifier;
+(function (SingletonInstanceIdentifier) {
+    SingletonInstanceIdentifier["STYLETRON_ENGINE"] = "STYLETRON_ENGINE";
+})(SingletonInstanceIdentifier = exports.SingletonInstanceIdentifier || (exports.SingletonInstanceIdentifier = {}));
+var allInstances = {};
+function createSingletonInstance(instanceGetter, identifier) {
+    if (allInstances[identifier]) {
+        return allInstances[identifier];
+    }
+    var singletonInstance = instanceGetter();
+    allInstances[identifier] = singletonInstance;
+    return singletonInstance;
+}
+exports.createSingletonInstance = createSingletonInstance;
+function getSingletonInstance(identifier) {
+    return allInstances[identifier];
+}
+exports.getSingletonInstance = getSingletonInstance;
+function setSingletonInstance(identifier, instance) {
+    allInstances[identifier] = instance;
+    return instance;
+}
+exports.setSingletonInstance = setSingletonInstance;

package/styleEngine/styleEngine.js

@@ -7,6 +7,7 @@ var react_1 = require("react");
 var styletron_engine_atomic_1 = require("styletron-engine-atomic");
 var styletron_react_1 = require("styletron-react");
 var DocumentProvider_1 = require("../spacewebProvider/DocumentProvider");
+var createSingletonInstance_1 = require("@sprinklrjs/spaceweb/singleton/createSingletonInstance");
 exports.SPACEWEB_STYLE_PREFIX = 'sw--';
 exports.SPACEWEB_STYLE_CONTAINER_ID = 'spaceweb-style-cache';
 exports.isServer = typeof window === 'undefined';
@@ -16,9 +17,13 @@ var NoopDebugEngine = /** @class */ (function () {
     }
     return NoopDebugEngine;
 }());
-// NOTE: Define styletron as module variable (singleton)
-var styletron;
-var hasStyletron = function () { return typeof styletron !== 'undefined'; };
+var getStyletron = function () {
+    return (0, createSingletonInstance_1.getSingletonInstance)(createSingletonInstance_1.SingletonInstanceIdentifier.STYLETRON_ENGINE);
+};
+var setStyletron = function (engine) {
+    return (0, createSingletonInstance_1.setSingletonInstance)(createSingletonInstance_1.SingletonInstanceIdentifier.STYLETRON_ENGINE, engine);
+};
+var hasStyletron = function () { return typeof getStyletron() !== 'undefined'; };
 // Throws and error if not called from the server.
 var ensureServer = function () {
     if (!exports.isServer) {
@@ -42,26 +47,22 @@ var hydrate = function (ownerDocument) {
 exports.hydrate = hydrate;
 // Gets isomorphic Styletron engine.
 var getStyleEngine = function (ownerDocument, nonce) {
+    var styletron = getStyletron();
     if (exports.isServer) {
-        if (typeof styletron !== 'undefined')
-            return styletron;
-        styletron = new styletron_engine_atomic_1.Server({ prefix: exports.SPACEWEB_STYLE_PREFIX });
+        return styletron !== null && styletron !== void 0 ? styletron : setStyletron(new styletron_engine_atomic_1.Server({ prefix: exports.SPACEWEB_STYLE_PREFIX }));
     }
-    else {
-        var doc = ownerDocument || document;
-        var el = doc.getElementById(exports.SPACEWEB_STYLE_CONTAINER_ID);
-        if (el && styletron) {
-            return styletron;
-        }
-        // adds a style tag in document.head to make sure only one instance of styletron is created in an app.
-        (0, exports.appendCacheContainer)(ownerDocument, nonce);
-        styletron = new styletron_engine_atomic_1.Client({
-            hydrate: (0, exports.hydrate)(ownerDocument),
-            prefix: exports.SPACEWEB_STYLE_PREFIX,
-            container: ownerDocument === null || ownerDocument === void 0 ? void 0 : ownerDocument.head,
-        });
+    var doc = ownerDocument || document;
+    var el = doc.getElementById(exports.SPACEWEB_STYLE_CONTAINER_ID);
+    if (el && styletron) {
+        return styletron;
     }
-    return styletron;
+    // adds a style tag in document.head to make sure only one instance of styletron is created in an app.
+    (0, exports.appendCacheContainer)(ownerDocument, nonce);
+    return setStyletron(new styletron_engine_atomic_1.Client({
+        hydrate: (0, exports.hydrate)(ownerDocument),
+        prefix: exports.SPACEWEB_STYLE_PREFIX,
+        container: ownerDocument === null || ownerDocument === void 0 ? void 0 : ownerDocument.head,
+    }));
 };
 exports.getStyleEngine = getStyleEngine;
 // @ts-ignore
@@ -78,19 +79,19 @@ exports.StyleProvider.displayName = 'StyleProvider';
 var getStylesheets = function () {
     ensureServer();
     ensureEngine();
-    return styletron.getStylesheets();
+    return getStyletron().getStylesheets();
 };
 exports.getStylesheets = getStylesheets;
 // Gets hydration stylesheets HTML code as string.
 var getStylesheetsHtml = function () {
     ensureServer();
     ensureEngine();
-    return styletron.getStylesheetsHtml();
+    return getStyletron().getStylesheetsHtml();
 };
 exports.getStylesheetsHtml = getStylesheetsHtml;
 var deprecatedRenderKeyframes = function (keyframes) {
     ensureEngine();
-    return styletron.renderKeyframes(keyframes);
+    return getStyletron().renderKeyframes(keyframes);
 };
 exports.deprecatedRenderKeyframes = deprecatedRenderKeyframes;
 // Appends cache styles to the DOM and returns element's instance.