@sprinklrjs/spaceweb 14.14.0 → 14.14.2

package/form-control/form-control.js

@@ -10,8 +10,8 @@ var helpers_1 = require("../helpers");
 var stack_1 = require("../stack");
 var box_1 = require("../box");
 var info_icon_1 = tslib_1.__importDefault(require("./info-icon"));
-var warning_solid_1 = tslib_1.__importDefault(require("../icon/components/warning-solid"));
-var alert_solid_1 = tslib_1.__importDefault(require("../icon/components/alert-solid"));
+var warning_clr_1 = tslib_1.__importDefault(require("../icon/components/warning-clr"));
+var error_solid_1 = tslib_1.__importDefault(require("../icon/components/error-solid"));
 var tickCircle_solid_1 = tslib_1.__importDefault(require("../icon/components/tickCircle-solid"));
 var overrides_1 = require("../overrides");
 var tooltip_1 = require("../tooltip");
@@ -22,8 +22,8 @@ var classNames_1 = tslib_1.__importDefault(require("../classNames"));
 var generalUtils_1 = require("../utils/generalUtils");
 var addConditionalIds = classNames_1.default;
 var intentToIconMap = {
-    error: alert_solid_1.default,
-    warning: warning_solid_1.default,
+    error: error_solid_1.default,
+    warning: warning_clr_1.default,
     success: tickCircle_solid_1.default,
 };
 var renderWithIcon = function (intent, message) {

package/helpers/colors.d.ts

@@ -7,6 +7,7 @@ export declare const isValidHex: (hex: unknown) => string | undefined;
  */
 export declare function hexToRgb(_hex: string): RGBColor;
 export declare function RgbToHex({ r, g, b, a }: RGBColor): string;
+export declare function normalizeHex(hex: string): string | undefined;
 /**
  * https://medium.muz.li/the-science-of-color-contrast-an-expert-designers-guide-33e84c41d156
  * https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum#dfn-contrast-ratio

package/helpers/colors.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.normalizeHexWithAlpha = exports.noAlphaHex = exports.HslToRgb = exports.RgbToHsl = exports.getContrastRatio = exports.getRelativeLuminance = exports.RgbToHex = exports.hexToRgb = exports.isValidHex = void 0;
+exports.normalizeHexWithAlpha = exports.noAlphaHex = exports.HslToRgb = exports.RgbToHsl = exports.getContrastRatio = exports.getRelativeLuminance = exports.normalizeHex = exports.RgbToHex = exports.hexToRgb = exports.isValidHex = void 0;
 var tslib_1 = require("tslib");
 var memoize_1 = tslib_1.__importDefault(require("lodash/memoize"));
 var isValidHex = function (hex) {
@@ -10,7 +10,7 @@ var isValidHex = function (hex) {
     if (![3, 4, 6, 8].includes(hexVal.length))
         return undefined;
     if (/^[0-9a-f]+$/i.test(hexVal))
-        return hexVal;
+        return hexVal.toUpperCase();
     return undefined;
 };
 exports.isValidHex = isValidHex;
@@ -36,6 +36,19 @@ function RgbToHex(_a) {
         .join(''));
 }
 exports.RgbToHex = RgbToHex;
+function normalizeHex(hex) {
+    if (!(0, exports.isValidHex)(hex))
+        return undefined;
+    var _a = hexToRgb(hex), r = _a.r, g = _a.g, b = _a.b, a = _a.a;
+    return "#".concat([r, g, b, Math.round((a !== null && a !== void 0 ? a : 1) * 255)]
+        .map(function (n) {
+        return Math.round(Math.min(Math.max(n, 0), 255))
+            .toString(16)
+            .padStart(2, '0');
+    })
+        .join(''));
+}
+exports.normalizeHex = normalizeHex;
 /**
  * https://medium.muz.li/the-science-of-color-contrast-an-expert-designers-guide-33e84c41d156
  * https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum#dfn-contrast-ratio
@@ -96,7 +109,7 @@ function noAlphaHex(inputHex) {
 }
 exports.noAlphaHex = noAlphaHex;
 function normalizeHexWithAlpha(hex, alpha) {
-    if (typeof alpha !== 'number' || alpha === 1 || !hex)
+    if (typeof alpha !== 'number' || alpha === 1 || !hex || !(0, exports.isValidHex)(hex))
         return hex;
     return (hex +
         Math.floor(alpha * 255)

package/{esm/icon/components/alert.d.ts → icon/components/error-solid.d.ts}

@@ -1,3 +1,3 @@
 import * as React from 'react';
 import type { IconProps } from '../types';
-export default function Alert(props: IconProps): React.ReactElement;
+export default function ErrorSolid(props: IconProps): React.ReactElement;

package/icon/components/{alert-solid.js → error-solid.js}

@@ -4,8 +4,8 @@ var tslib_1 = require("tslib");
 var jsx_runtime_1 = require("react/jsx-runtime");
 var style_1 = require("../../style");
 var icon_1 = tslib_1.__importDefault(require("../icon"));
-function AlertSolid(props) {
+function ErrorSolid(props) {
     var _a = (0, style_1.useStyle)(), theme = _a.theme, isRTL = _a.isRTL;
-    return ((0, jsx_runtime_1.jsx)(icon_1.default, tslib_1.__assign({ viewBox: "0 0 14 14", "data-icon-name": "AlertSolid" }, props, { children: (0, jsx_runtime_1.jsx)("path", { d: "M7.063.012a6.994 6.994 0 1 0 6.994 6.994A6.996 6.996 0 0 0 7.063.012zm0 7.693a.701.701 0 0 1-.7-.699V4.21a.701.701 0 0 1 .7-.7.701.701 0 0 1 .7.7v2.797a.701.701 0 0 1-.7.7zm0 2.798a.701.701 0 0 1-.7-.7.701.701 0 0 1 .7-.699.701.701 0 0 1 .7.7.701.701 0 0 1-.7.699z" }) })));
+    return ((0, jsx_runtime_1.jsx)(icon_1.default, tslib_1.__assign({ viewBox: "0 0 14 14", "data-icon-name": "ErrorSolid" }, props, { children: (0, jsx_runtime_1.jsx)("path", { d: "M7.063.012a6.994 6.994 0 106.994 6.994A6.996 6.996 0 007.063.012zm0 7.693a.701.701 0 01-.7-.699V4.21a.701.701 0 01.7-.7.701.701 0 01.7.7v2.797a.701.701 0 01-.7.7zm0 2.798a.701.701 0 01-.7-.7.701.701 0 01.7-.699.701.701 0 01.7.7.701.701 0 01-.7.699z" }) })));
 }
-exports.default = AlertSolid;
+exports.default = ErrorSolid;

package/{esm/icon/components/error.d.ts → icon/components/warning-clr.d.ts}

@@ -1,3 +1,3 @@
 import * as React from 'react';
 import type { IconProps } from '../types';
-export default function Error(props: IconProps): React.ReactElement;
+export default function WarningClr(props: IconProps): React.ReactElement;

package/icon/components/warning-clr.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var style_1 = require("../../style");
+var icon_1 = tslib_1.__importDefault(require("../icon"));
+function WarningClr(props) {
+    var _a = (0, style_1.useStyle)(), theme = _a.theme, isRTL = _a.isRTL;
+    return ((0, jsx_runtime_1.jsxs)(icon_1.default, tslib_1.__assign({ viewBox: "0 0 16 16", "data-icon-name": "WarningClr" }, props, { children: [(0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", d: "M16 13.518c0 .96-.778 1.738-1.738 1.738H1.738a1.738 1.738 0 0 1-1.515-2.59L6.405 1.677l.064-.105a1.83 1.83 0 0 1 3.126.105l6.182 10.99.052.098c.112.235.171.492.171.753", clipRule: "evenodd" }), (0, jsx_runtime_1.jsx)("path", { fill: "currentColor", d: "M8 .744c.661 0 1.271.357 1.596.934l6.181 10.988.051.1a1.738 1.738 0 0 1-1.565 2.49H1.737a1.738 1.738 0 0 1-1.514-2.59L6.405 1.678l.064-.106A1.83 1.83 0 0 1 8 .744m0 1a.83.83 0 0 0-.694.376l-.03.048-6.181 10.988a.738.738 0 0 0 .643 1.1h12.525a.738.738 0 0 0 .664-1.058l-.022-.042L8.724 2.168A.83.83 0 0 0 8 1.744" }), (0, jsx_runtime_1.jsx)("path", { fill: "currentColor", fillRule: "evenodd", d: "M8 9.99a.75.75 0 0 1-.75-.75V5.868a.75.75 0 0 1 1.5 0V9.24a.75.75 0 0 1-.75.75m-.75 1.88a.75.75 0 1 0 1.5-.007.75.75 0 1 0-1.5.007", clipRule: "evenodd" })] })));
+}
+exports.default = WarningClr;

package/modal/modal.d.ts

@@ -1,11 +1,11 @@
 import { type ReactElement } from 'react';
 import type { ModalProps } from './types';
-import Alert from '../icon/components/alert-solid';
+import Error from '../icon/components/error-solid';
 import Tick from '../icon/components/tickCircle-solid';
-import Warning from '../icon/components/warning-solid';
+import Warning from '../icon/components/warning-clr';
 export declare const INTENT_TO_ICON: {
     success: typeof Tick;
-    error: typeof Alert;
+    error: typeof Error;
     warning: typeof Warning;
 };
 declare const _default: import("react").MemoExoticComponent<{

package/modal/modal.js

@@ -15,15 +15,15 @@ var locale_1 = require("../locale");
 var overrides_2 = require("../overrides");
 var ModalContext_1 = require("./ModalContext");
 var useUniqueId_1 = tslib_1.__importDefault(require("../hooks/useUniqueId"));
-var alert_solid_1 = tslib_1.__importDefault(require("../icon/components/alert-solid"));
+var error_solid_1 = tslib_1.__importDefault(require("../icon/components/error-solid"));
 var tickCircle_solid_1 = tslib_1.__importDefault(require("../icon/components/tickCircle-solid"));
-var warning_solid_1 = tslib_1.__importDefault(require("../icon/components/warning-solid"));
+var warning_clr_1 = tslib_1.__importDefault(require("../icon/components/warning-clr"));
 var themeHelpers_1 = require("../helpers/themeHelpers");
 var CloseButton = function (closeProps) { return ((0, jsx_runtime_1.jsx)(button_1.IconButton, tslib_1.__assign({}, closeProps, { children: (0, jsx_runtime_1.jsx)(close_1.default, {}) }))); };
 exports.INTENT_TO_ICON = {
     success: tickCircle_solid_1.default,
-    error: alert_solid_1.default,
-    warning: warning_solid_1.default,
+    error: error_solid_1.default,
+    warning: warning_clr_1.default,
 };
 var getWarningIconClassName = function (_a) {
     var theme = _a.theme;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sprinklrjs/spaceweb",
-  "version": "14.14.0",
+  "version": "14.14.2",
   "description": "Components for SpaceWeb",
   "main": "index.js",
   "module": "./esm/index.js",
@@ -101,7 +101,7 @@
     "ts-node": "^10.4.0"
   },
   "peerDependencies": {
-    "@sprinklrjs/spaceweb-themes": "14.14.0",
+    "@sprinklrjs/spaceweb-themes": "14.14.2",
     "react": ">=17.0.2 <19.0.0",
     "react-dom": ">=17.0.2 <19.0.0"
   }

package/progressSteps/step.js

@@ -6,10 +6,10 @@ var react_1 = require("react");
 var overrides_1 = require("../overrides");
 var styled_components_1 = require("./styled-components");
 var tickCircle_solid_1 = tslib_1.__importDefault(require("../icon/components/tickCircle-solid"));
-var alert_solid_1 = tslib_1.__importDefault(require("../icon/components/alert-solid"));
+var error_solid_1 = tslib_1.__importDefault(require("../icon/components/error-solid"));
 var constants_1 = require("./constants");
 var INTENT_TO_ICON_MAP = {
-    error: (0, jsx_runtime_1.jsx)(alert_solid_1.default, { size: 16, className: "spr-support-error-text" }),
+    error: (0, jsx_runtime_1.jsx)(error_solid_1.default, { size: 16, className: "spr-support-error-text" }),
 };
 var Step = function (_a) {
     var _b = _a.overrides, overrides = _b === void 0 ? {} : _b, isCompleted = _a.isCompleted, isCurrent = _a.isCurrent, isActive = _a.isActive, _c = _a.intent, intent = _c === void 0 ? 'default' : _c, isRightBeforeActive = _a.isRightBeforeActive, _d = _a.isLast, isLast = _d === void 0 ? false : _d, childrenCount = _a.childrenCount, _e = _a.orientation, orientation = _e === void 0 ? constants_1.ORIENTATION.vertical : _e, title = _a.title, subTitle = _a.subTitle, alwaysShowDescription = _a.alwaysShowDescription, children = _a.children, className = _a.className, onClick = _a.onClick, variant = _a.variant, role = _a.role, style = _a.style, step = _a.step, showStepNumber = _a.showStepNumber, restProps = tslib_1.__rest(_a, ["overrides", "isCompleted", "isCurrent", "isActive", "intent", "isRightBeforeActive", "isLast", "childrenCount", "orientation", "title", "subTitle", "alwaysShowDescription", "children", "className", "onClick", "variant", "role", "style", "step", "showStepNumber"]);

package/snackbar/constants.js

@@ -2,15 +2,15 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TYPE_TO_HIDE_DURATION = exports.INTENT_TO_ROLE = exports.INTENT_TO_ICON = exports.TRANSITION_DURATION = void 0;
 var tslib_1 = require("tslib");
-var alert_solid_1 = tslib_1.__importDefault(require("../icon/components/alert-solid"));
-var warning_solid_1 = tslib_1.__importDefault(require("../icon/components/warning-solid"));
+var error_solid_1 = tslib_1.__importDefault(require("../icon/components/error-solid"));
+var warning_clr_1 = tslib_1.__importDefault(require("../icon/components/warning-clr"));
 var tickCircle_solid_1 = tslib_1.__importDefault(require("../icon/components/tickCircle-solid"));
 var delete_solid_1 = tslib_1.__importDefault(require("../icon/components/delete-solid"));
 exports.TRANSITION_DURATION = 1000;
 exports.INTENT_TO_ICON = {
     success: tickCircle_solid_1.default,
-    error: alert_solid_1.default,
-    warning: warning_solid_1.default,
+    error: error_solid_1.default,
+    warning: warning_clr_1.default,
     delete: delete_solid_1.default,
 };
 exports.INTENT_TO_ROLE = {

package/time-range-picker/RangeSelectorContainer.js

@@ -12,7 +12,7 @@ var button_1 = require("../button");
 var styled_component_1 = require("./styled-component");
 var stack_1 = require("../stack");
 var TimezonePicker_1 = tslib_1.__importDefault(require("./TimezonePicker"));
-var error_1 = tslib_1.__importDefault(require("../icon/components/error"));
+var error_solid_1 = tslib_1.__importDefault(require("../icon/components/error-solid"));
 var styled_components_1 = require("../date-picker/styled-components");
 var locale_1 = require("../locale");
 var utils_1 = require("./utils");
@@ -110,15 +110,13 @@ var RangeSelectorContainer = function (_a) {
     }, [timeRange, preset, timezone, onSubmit, disableTimezone]);
     // show error message only when it is present, hasError can be true when user has not selected any date,
     // but we are showing any error message for that scenario.
-    var errorEl = errMsg ? ((0, jsx_runtime_1.jsxs)(stack_1.Stack, tslib_1.__assign({ direction: "horizontal", gap: 1, className: (0, classNames_1.default)('mr-1', { 'items-center': monthsShown !== 1 }), shrink: true }, { children: [(0, jsx_runtime_1.jsx)(error_1.default, { size: 14, className: "block", style: function (_a) {
+    var errorEl = errMsg ? ((0, jsx_runtime_1.jsxs)(stack_1.Stack, tslib_1.__assign({ direction: "horizontal", gap: 1, className: (0, classNames_1.default)('mr-1', { 'items-center': monthsShown !== 1 }), shrink: true }, { children: [(0, jsx_runtime_1.jsx)(error_solid_1.default, { size: 14, className: "block", style: function (_a) {
                     var theme = _a.theme;
                     return ({
                         fill: theme.spr.clrRed,
                     });
                 } }), (0, jsx_runtime_1.jsx)(typography_1.Typography, tslib_1.__assign({ className: "my-0", variant: "bs3" }, { children: errMsg }))] }))) : null;
-    return ((0, jsx_runtime_1.jsxs)(box_1.Box, tslib_1.__assign({ className: "spr-ui-01 rounded-8" }, { children: [(0, jsx_runtime_1.jsxs)(Header, tslib_1.__assign({ "$setTimezone": setTimezone, "$onClose": props.onClose }, headerProps, { children: [(0, jsx_runtime_1.jsx)(HeaderBeforeEnhancer, tslib_1.__assign({ variant: "heading-7", "$as": "span", className: "flex items-center" }, headerBeforeEnhancerProps, { children: locale.timeRangePicker.headerLabel })), disableTimezone ? null : ((0, jsx_runtime_1.jsx)(TimezonePicker, tslib_1.__assign({ setTimezone: setTimezone, timezone: timezone, timezoneOptions: timezoneOptions }, timezonePickerProps, { className: ['w-0 grow max-w-md', timezonePickerProps === null || timezonePickerProps === void 0 ? void 0 : timezonePickerProps.className] })))] })), (0, jsx_runtime_1.jsx)(RangeSelector, tslib_1.__assign({ overrides: props.overrides, timeSelect: props.timeSelect, timeRangePresets: timeRangePresets, timezone: timezone, timeRange: timeRange, preset: preset, onChange: onDateChange, adapter: adapter, peekNextMonth: props.peekNextMonth, excludeDates: props.excludeDates, filterDate: props.filterDate, minDate: minDate, maxDate: maxDate, formatString: props.formatString, locale: props.locale, fixedHeight: props.fixedHeight, monthsShown: monthsShown, hidePresetSearch: hidePresetSearch, footerContent: (0, jsx_runtime_1.jsx)(Footer, tslib_1.__assign({ "$hasError": hasError, "$onSubmit": handleSubmit, "$onClose": props.onClose }, footerProps, { className: ['px-6 py-3 mt-2', footerProps.className] }, { children: (0, jsx_runtime_1.jsxs)(box_1.Box, tslib_1.__assign({ className: "justify-between w-0 grow flex" }, { children: [(0, jsx_runtime_1.jsx)(FooterBeforeEnhancer, tslib_1.__assign({}, footerBeforeEnhancerProps)), (0, jsx_runtime_1.jsxs)(stack_1.Stack, tslib_1.__assign({ direction: monthsShown === 1 ? 'vertical' : 'horizontal', gap: 3, 
-                                // @ts-ignore -- CSS-in-JS
-                                className: [(0, classNames_1.default)({ 'items-center': monthsShown !== 1 }), { maxWidth: 'fit-content' }] }, { children: [monthsShown === 1 ? null : errorEl, (0, jsx_runtime_1.jsxs)(stack_1.StackItem, tslib_1.__assign({ className: "flex self-end" }, { children: [(footerProps === null || footerProps === void 0 ? void 0 : footerProps.showClearButton) ? ((0, jsx_runtime_1.jsx)(button_1.Button, tslib_1.__assign({ size: "xs", onClick: footerProps.handleClearBtnClick, variant: "secondary", "data-testid": "clear", disabled: timeRange.length === 0 }, { children: locale.timeRangePicker.clearBtnLabel }))) : ((0, jsx_runtime_1.jsx)(button_1.Button, tslib_1.__assign({ size: "xs", onClick: props.onClose, variant: "secondary", "data-testid": "cancel" }, { children: locale.timeRangePicker.cancelBtnLabel }))), (0, jsx_runtime_1.jsx)(button_1.Button, tslib_1.__assign({ size: "xs", className: "ml-3", onClick: handleSubmit, disabled: hasError, "data-testid": "save" }, { children: locale.timeRangePicker.saveBtnLabel }))] })), monthsShown === 1 ? errorEl : null] }))] })) })) }, rangeSelectorProps))] })));
+    return ((0, jsx_runtime_1.jsxs)(box_1.Box, tslib_1.__assign({ className: "spr-ui-01 rounded-8" }, { children: [(0, jsx_runtime_1.jsxs)(Header, tslib_1.__assign({ "$setTimezone": setTimezone, "$onClose": props.onClose }, headerProps, { children: [(0, jsx_runtime_1.jsx)(HeaderBeforeEnhancer, tslib_1.__assign({ variant: "heading-7", "$as": "span", className: "flex items-center" }, headerBeforeEnhancerProps, { children: locale.timeRangePicker.headerLabel })), disableTimezone ? null : ((0, jsx_runtime_1.jsx)(TimezonePicker, tslib_1.__assign({ setTimezone: setTimezone, timezone: timezone, timezoneOptions: timezoneOptions }, timezonePickerProps, { className: ['w-0 grow max-w-md', timezonePickerProps === null || timezonePickerProps === void 0 ? void 0 : timezonePickerProps.className] })))] })), (0, jsx_runtime_1.jsx)(RangeSelector, tslib_1.__assign({ overrides: props.overrides, timeSelect: props.timeSelect, timeRangePresets: timeRangePresets, timezone: timezone, timeRange: timeRange, preset: preset, onChange: onDateChange, adapter: adapter, peekNextMonth: props.peekNextMonth, excludeDates: props.excludeDates, filterDate: props.filterDate, minDate: minDate, maxDate: maxDate, formatString: props.formatString, locale: props.locale, fixedHeight: props.fixedHeight, monthsShown: monthsShown, hidePresetSearch: hidePresetSearch, footerContent: (0, jsx_runtime_1.jsx)(Footer, tslib_1.__assign({ "$hasError": hasError, "$onSubmit": handleSubmit, "$onClose": props.onClose }, footerProps, { className: ['px-6 py-3 mt-2', footerProps.className] }, { children: (0, jsx_runtime_1.jsxs)(box_1.Box, tslib_1.__assign({ className: "justify-between w-0 grow flex" }, { children: [(0, jsx_runtime_1.jsx)(FooterBeforeEnhancer, tslib_1.__assign({}, footerBeforeEnhancerProps)), (0, jsx_runtime_1.jsxs)(stack_1.Stack, tslib_1.__assign({ direction: monthsShown === 1 ? 'vertical' : 'horizontal', gap: 3, className: monthsShown !== 1 ? 'items-center' : undefined, style: { maxWidth: 'fit-content' } }, { children: [monthsShown === 1 ? null : errorEl, (0, jsx_runtime_1.jsxs)(stack_1.StackItem, tslib_1.__assign({ className: "flex self-end" }, { children: [(footerProps === null || footerProps === void 0 ? void 0 : footerProps.showClearButton) ? ((0, jsx_runtime_1.jsx)(button_1.Button, tslib_1.__assign({ size: "xs", onClick: footerProps.handleClearBtnClick, variant: "secondary", "data-testid": "clear", disabled: timeRange.length === 0 }, { children: locale.timeRangePicker.clearBtnLabel }))) : ((0, jsx_runtime_1.jsx)(button_1.Button, tslib_1.__assign({ size: "xs", onClick: props.onClose, variant: "secondary", "data-testid": "cancel" }, { children: locale.timeRangePicker.cancelBtnLabel }))), (0, jsx_runtime_1.jsx)(button_1.Button, tslib_1.__assign({ size: "xs", className: "ml-3", onClick: handleSubmit, disabled: hasError, "data-testid": "save" }, { children: locale.timeRangePicker.saveBtnLabel }))] })), monthsShown === 1 ? errorEl : null] }))] })) })) }, rangeSelectorProps))] })));
 };
 RangeSelectorContainer.displayName = 'RangeSelectorContainer';
 exports.default = RangeSelectorContainer;