@pushwoosh/dumb-components 1.1.196 → 1.1.197

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/package.json

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