@pushwoosh/dumb-components 1.1.190 → 1.1.192

package/Combobox/Combobox.js

@@ -75,6 +75,7 @@ function FreeCombobox({
     open,
     onClose,
     autoFocus,
+    disabled,
     inputRef
   });
   const dropdownItems = useMemo(() => filteredItems.map((item, idx) => {
@@ -232,6 +233,7 @@ function SelectCombobox({
     open,
     onClose,
     autoFocus,
+    disabled,
     inputRef
   });
   const dropdownItems = useMemo(() => filteredItems.map((item, idx) => {

package/ComboboxMulti/ComboboxMulti.js

@@ -133,6 +133,7 @@ export function ComboboxMulti({
     open,
     onClose,
     autoFocus,
+    disabled,
     inputRef
   });
   const toggleOpen = useToggleOpen(inputRef, isOpen, open, close);

package/EmailTemplatePreview/EmailTemplatePreview.js

@@ -3,6 +3,7 @@ import { Liquid } from 'liquidjs';
 import { useMemo, useState } from 'react';
 import { replaceLocalization, replacePlaceholders } from './helpers';
 import { IframeStyled } from './styles';
+import { LIGHT_ISLAND_PROPS } from '../shared/lightIsland';
 const createLiquidInstance = () => {
   const liquidInstance = new Liquid();
   const tags = ['email_content', 'connected_content'];
@@ -47,6 +48,7 @@ export function EmailTemplatePreview(props) {
     }
   }, [template, localization, values, liquidInstance]);
   return _jsx(IframeStyled, {
+    ...LIGHT_ISLAND_PROPS,
     "$scale": scale,
     "$width": width,
     "$height": height,

package/NativeRichMediaPreview/NativeRichMediaPreview.js

@@ -11,6 +11,7 @@ import { parseNativeRichMediaConfig } from './parseNativeRichMediaConfig';
 import { resolveLocalization } from './resolveLocalization';
 import { BackdropLayer, ContentFlow, PreviewHost, ScaleViewport, ScrollLayer, SpinnerLayer } from './styles';
 import { NativeRichMediaBannerView, NativeRichMediaCarouselView, NativeRichMediaFullscreenView, NativeRichMediaInvalidView, NativeRichMediaModalView, NativeRichMediaPipView, NativeRichMediaScratchcardView, NativeRichMediaSheetView, NativeRichMediaSpinwheelView, NativeRichMediaStoriesView, NativeRichMediaVideoView } from './views';
+import { LIGHT_ISLAND_PROPS } from '../shared/lightIsland';
 function dimsScreen(config) {
   if (!config) {
     return false;
@@ -200,6 +201,7 @@ export function NativeRichMediaPreview(props) {
   }, [content, localization, language]);
   const shouldDim = !isLoading && dimsScreen(config);
   return _jsxs(PreviewHost, {
+    ...LIGHT_ISLAND_PROPS,
     width: width,
     height: height,
     "$withBackground": withBackground,

package/PushPreview/PushPreview.js

@@ -6,6 +6,7 @@ import { PREVIEW_ICON_URL } from './constants';
 import { getLocalizedContent } from './helpers';
 import { PushBox, PushIcon, PushTitle, PushDescription } from './styles';
 import { RichMessageViewer } from '../RichMessageEditor';
+import { LIGHT_ISLAND_PROPS } from '../shared/lightIsland';
 /**
  * Renders a realistic push-notification preview from a push preset, picking
  * localized strings by `language`, with compact/extended/silent/missed-content modes.
@@ -39,6 +40,7 @@ export function PushPreview({
     return _jsx(MissedContentPreview, {});
   }
   return _jsxs(PushBox, {
+    ...LIGHT_ISLAND_PROPS,
     view: view,
     "$width": width,
     "$loading": isLoading,

package/RichmediaPreview/RichmediaPreview.js

@@ -3,6 +3,7 @@ import { Color } from '@pushwoosh/kit-constants';
 import { Spinner } from '../Spinner';
 import { useRichmediaHtml } from './hooks';
 import { RichMediaPreviewContainer, RichMediaPreviewIframe } from './styles';
+import { LIGHT_ISLAND_PROPS } from '../shared/lightIsland';
 /**
  * Renders a rich-media (in-app) template in a fully isolated sandboxed iframe, resolving
  * params and localization via {@link useRichmediaHtml}. Template scripts run in an opaque
@@ -32,6 +33,7 @@ export function RichmediaPreview(props) {
     baseUrl
   });
   return _jsx(RichMediaPreviewContainer, {
+    ...LIGHT_ISLAND_PROPS,
     width: width,
     height: height,
     "$isLoading": isLoading,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pushwoosh/dumb-components",
-  "version": "1.1.190",
+  "version": "1.1.192",
   "description": "React components to build Pushwoosh products",
   "main": "index.js",
   "module": "index.js",
@@ -49,7 +49,7 @@
     "@codemirror/lang-liquid": "^6.2.2",
     "@floating-ui/react-dom": "^2.1.2",
     "@lezer/highlight": "^1.2.1",
-    "@pushwoosh/kit-constants": "^1.7.0",
+    "@pushwoosh/kit-constants": "^1.9.0",
     "@pushwoosh/kit-helpers": "^4.11.0",
     "@pushwoosh/kit-icons": "^2.1.16",
     "@pushwoosh/kit-typography": "^1.7.5",

package/shared/dropdownField/FieldShell.js

@@ -73,7 +73,7 @@ export function FieldShell({
       "$minWidth": minWidth,
       "$autosize": autosize,
       "$tightLeft": tightLeft,
-      onMouseDown: onShellMouseDown,
+      onMouseDown: disabled ? undefined : onShellMouseDown,
       onBlur: onShellBlur,
       children: [_jsx(ShellInner, {
         children: children
@@ -90,6 +90,7 @@ export function FieldShell({
           })
         }), showChevron && _jsx(IndicatorButton, {
           tabIndex: -1,
+          disabled: disabled,
           "aria-label": isOpen ? 'Close' : 'Open',
           onMouseDown: e => {
             e.preventDefault();

package/shared/dropdownField/styles.js

@@ -55,7 +55,7 @@ export const IndicatorButton = styled.button.attrs({
 }).withConfig({
   displayName: "IndicatorButton",
   componentId: "sc-1pvwhhw-5"
-})(["display:flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:none;background:transparent;color:", ";cursor:pointer;border-radius:", ";transition:color 0.15s ease,background-color 0.15s ease;&:hover{color:", ";background-color:", ";}"], Color.PHANTOM, ShapeRadius.CONTROL, Color.MAIN, Color.FROZEN);
+})(["display:flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:none;background:transparent;color:", ";cursor:pointer;border-radius:", ";transition:color 0.15s ease,background-color 0.15s ease;&:hover{color:", ";background-color:", ";}&:disabled{cursor:default;}"], Color.PHANTOM, ShapeRadius.CONTROL, Color.MAIN, Color.FROZEN);
 export const Dropdown = styled.div.withConfig({
   displayName: "Dropdown",
   componentId: "sc-1pvwhhw-6"

package/shared/dropdownField/useFieldOpenEffects.d.ts

@@ -4,11 +4,12 @@ type Args = {
     open: () => void;
     onClose?: () => void;
     autoFocus?: boolean;
+    disabled?: boolean;
     inputRef: RefObject<HTMLInputElement>;
 };
 /**
  * Side effects tied to a Combobox field's open state: optional autofocus on mount
  * and firing `onClose` when the field closes.
  */
-export declare function useFieldOpenEffects({ isOpen, open, onClose, autoFocus, inputRef, }: Args): void;
+export declare function useFieldOpenEffects({ isOpen, open, onClose, autoFocus, disabled, inputRef, }: Args): void;
 export {};

package/shared/dropdownField/useFieldOpenEffects.js

@@ -8,6 +8,7 @@ export function useFieldOpenEffects({
   open,
   onClose,
   autoFocus,
+  disabled,
   inputRef
 }) {
   const onCloseRef = useRef(onClose);
@@ -19,9 +20,9 @@ export function useFieldOpenEffects({
   }, [isOpen]);
   const didAutoFocusRef = useRef(false);
   useEffect(() => {
-    if (!autoFocus || didAutoFocusRef.current) return;
+    if (!autoFocus || disabled || didAutoFocusRef.current) return;
     didAutoFocusRef.current = true;
     inputRef.current?.focus();
     open();
-  }, [autoFocus, open, inputRef]);
+  }, [autoFocus, disabled, open, inputRef]);
 }

package/shared/lightIsland.d.ts

@@ -0,0 +1,3 @@
+export declare const LIGHT_ISLAND_PROPS: {
+    readonly "data-theme": "light";
+};

package/shared/lightIsland.js

@@ -0,0 +1,4 @@
+import { THEME_ATTRIBUTE } from '@pushwoosh/kit-constants';
+export const LIGHT_ISLAND_PROPS = {
+  [THEME_ATTRIBUTE]: 'light'
+};