@pushwoosh/dumb-components 1.1.196 → 1.1.198

package/LeafletTheme/index.d.ts

@@ -0,0 +1 @@
+export { LeafletTheme } from './styles';

package/LeafletTheme/index.js

@@ -0,0 +1 @@
+export { LeafletTheme } from './styles';

package/LeafletTheme/styles.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Repaints Leaflet's own chrome with Pushwoosh tokens — map surface, zoom buttons,
+ * attribution, scale, popups and tooltips — and darkens light raster tiles in the dark theme.
+ * @example
+ * <LeafletTheme />
+ */
+export declare const LeafletTheme: import("styled-components").GlobalStyleComponent<{}, import("styled-components").DefaultTheme>;

package/LeafletTheme/styles.js

@@ -0,0 +1,10 @@
+import { createGlobalStyle } from 'styled-components';
+import { Color, THEME_ATTRIBUTE } from '@pushwoosh/kit-constants';
+const DARK_TILES = 'invert(1) hue-rotate(180deg) brightness(0.9) contrast(1.05) saturate(0.55)';
+/**
+ * Repaints Leaflet's own chrome with Pushwoosh tokens — map surface, zoom buttons,
+ * attribution, scale, popups and tooltips — and darkens light raster tiles in the dark theme.
+ * @example
+ * <LeafletTheme />
+ */
+export const LeafletTheme = createGlobalStyle([".leaflet-container{background:", ";color:", ";}.leaflet-container a{color:", ";}.leaflet-bar a,.leaflet-control-layers-toggle{background-color:", ";color:", ";border-bottom-color:", ";}.leaflet-bar a:hover,.leaflet-bar a:focus{background-color:", ";color:", ";}.leaflet-bar a.leaflet-disabled{background-color:", ";color:", ";}.leaflet-touch .leaflet-bar,.leaflet-touch .leaflet-control-layers{border-color:", ";}.leaflet-control-layers{background:", ";color:", ";}.leaflet-container .leaflet-control-attribution{background:", ";color:", ";}.leaflet-control-scale-line{background:", ";color:", ";border-color:", ";text-shadow:none;}.leaflet-popup-content-wrapper,.leaflet-popup-tip{background:", ";color:", ";}.leaflet-container a.leaflet-popup-close-button{color:", ";}.leaflet-container a.leaflet-popup-close-button:hover,.leaflet-container a.leaflet-popup-close-button:focus{color:", ";}.leaflet-tooltip{background-color:", ";border-color:", ";color:", ";}.leaflet-tooltip-top:before{border-top-color:", ";}.leaflet-tooltip-bottom:before{border-bottom-color:", ";}.leaflet-tooltip-left:before{border-left-color:", ";}.leaflet-tooltip-right:before{border-right-color:", ";}.leaflet-div-icon{background:", ";border-color:", ";}.leaflet-zoom-box{border-color:", ";background:", ";}[", "='dark'] .leaflet-tile-pane{filter:", ";}"], Color.FROZEN, Color.MAIN, Color.PRIMARY, Color.CLEAR, Color.MAIN, Color.FORM, Color.FROZEN, Color.MAIN, Color.FROZEN, Color.PHANTOM, Color.FORM, Color.CLEAR, Color.MAIN, Color.CLEAR, Color.LOCKED, Color.CLEAR, Color.MAIN, Color.FORM, Color.CLEAR, Color.MAIN, Color.LOCKED, Color.MAIN, Color.CLEAR, Color.CLEAR, Color.MAIN, Color.CLEAR, Color.CLEAR, Color.CLEAR, Color.CLEAR, Color.CLEAR, Color.FORM, Color.PRIMARY, Color.BRIGHT_LIGHT, THEME_ATTRIBUTE, DARK_TILES);

package/Select/Select.js

@@ -2,6 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { CloseIcon } from '@pushwoosh/kit-icons';
 import { CLASS_NAME_PREFIX } from './constants';
 import { SelectStyled, SelectAsyncStyled, ClearIndicatorBox } from './styles';
+import { withThemeStyles } from './themeStyles';
 const componentsProps = {
   ClearIndicator: ({
     clearValue
@@ -24,11 +25,13 @@ const componentsProps = {
  */
 export function Select(props) {
   const {
-    classNamePrefix = CLASS_NAME_PREFIX
+    classNamePrefix = CLASS_NAME_PREFIX,
+    styles
   } = props;
   const customProps = {
     ...props,
-    classNamePrefix
+    classNamePrefix,
+    styles: withThemeStyles(styles)
   };
   return _jsx(SelectStyled, {
     components: componentsProps,
@@ -44,11 +47,13 @@ export function Select(props) {
  */
 export function SelectAsync(props) {
   const {
-    classNamePrefix = CLASS_NAME_PREFIX
+    classNamePrefix = CLASS_NAME_PREFIX,
+    styles
   } = props;
   const customProps = {
     ...props,
-    classNamePrefix
+    classNamePrefix,
+    styles: withThemeStyles(styles)
   };
   return _jsx(SelectAsyncStyled, {
     components: componentsProps,

package/Select/themeStyles.d.ts

@@ -0,0 +1,6 @@
+import type { GroupBase, StylesConfig } from 'react-select';
+/**
+ * Merges the Pushwoosh select theme under a caller's own `styles`, so theirs still wins.
+ * Goes through `styles`, not CSS: a menu portalled into `body` escapes the styled wrapper.
+ */
+export declare function withThemeStyles<Option, IsMulti extends boolean, Group extends GroupBase<Option>>(styles?: StylesConfig<Option, IsMulti, Group>): StylesConfig<Option, IsMulti, Group>;

package/Select/themeStyles.js

@@ -0,0 +1,72 @@
+import { Color, FontWeight, Shadow } from '@pushwoosh/kit-constants';
+const themeStyles = {
+  menu: base => ({
+    ...base,
+    backgroundColor: Color.CLEAR,
+    boxShadow: Shadow.REGULAR
+  }),
+  menuList: base => ({
+    ...base,
+    backgroundColor: Color.CLEAR
+  }),
+  option: (base, state) => ({
+    ...base,
+    color: Color.MAIN,
+    fontWeight: state.isSelected ? FontWeight.MEDIUM : FontWeight.REGULAR,
+    backgroundColor: (() => {
+      if (state.isSelected && state.isFocused) return Color.BRIGHT_LIGHT_HOVER;
+      if (state.isSelected) return Color.BRIGHT_LIGHT;
+      if (state.isFocused) return Color.SOFT_LIGHT;
+      return 'transparent';
+    })(),
+    ':active': {
+      backgroundColor: Color.BRIGHT_LIGHT_HOVER
+    }
+  }),
+  singleValue: base => ({
+    ...base,
+    color: Color.MAIN
+  }),
+  multiValueLabel: base => ({
+    ...base,
+    color: Color.PRIMARY
+  }),
+  input: base => ({
+    ...base,
+    color: Color.MAIN
+  }),
+  placeholder: base => ({
+    ...base,
+    color: Color.PHANTOM
+  }),
+  groupHeading: base => ({
+    ...base,
+    color: Color.LOCKED
+  }),
+  noOptionsMessage: base => ({
+    ...base,
+    color: Color.LOCKED
+  }),
+  loadingMessage: base => ({
+    ...base,
+    color: Color.LOCKED
+  })
+};
+/**
+ * Merges the Pushwoosh select theme under a caller's own `styles`, so theirs still wins.
+ * Goes through `styles`, not CSS: a menu portalled into `body` escapes the styled wrapper.
+ */
+export function withThemeStyles(styles) {
+  if (!styles) return themeStyles;
+  const keys = new Set([...Object.keys(themeStyles), ...Object.keys(styles)]);
+  const merged = {};
+  keys.forEach(key => {
+    const ours = themeStyles[key];
+    const theirs = styles[key];
+    merged[key] = (base, state) => {
+      const themed = ours ? ours(base, state) : base;
+      return theirs ? theirs(themed, state) : themed;
+    };
+  });
+  return merged;
+}

package/index.d.ts

@@ -52,3 +52,4 @@ export { SendRateEdit, SendRateReadonly, type SendRateBase, type SendRateEditPro
 export { Alert } from './Alert';
 export { ApplicationPreloader, type ApplicationPreloaderProps, } from './ApplicationPreloader';
 export { NotificationInbox, NotificationBar, NotificationBell, type Notification, type NotificationInboxProps, type NotificationSeverity, type NotificationBarType, type NotificationBarProps, type NotificationBellProps, } from './NotificationInbox';
+export { LeafletTheme } from './LeafletTheme';

package/index.js

@@ -50,4 +50,5 @@ export { FrequencyCappingEdit, FrequencyCappingReadonly, FrequencyCappingInApps,
 export { SendRateEdit, SendRateReadonly } from './SendRate';
 export { Alert } from './Alert';
 export { ApplicationPreloader } from './ApplicationPreloader';
-export { NotificationInbox, NotificationBar, NotificationBell } from './NotificationInbox';
+export { NotificationInbox, NotificationBar, NotificationBell } from './NotificationInbox';
+export { LeafletTheme } from './LeafletTheme';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pushwoosh/dumb-components",
-  "version": "1.1.196",
+  "version": "1.1.198",
   "description": "React components to build Pushwoosh products",
   "main": "index.js",
   "module": "index.js",