@pushwoosh/dumb-components 1.0.32 → 1.0.33

package/Select/Select.d.ts

@@ -1,5 +1,5 @@
 import { type ReactElement } from 'react';
-import { type GroupBase } from 'react-select';
+import type { GroupBase } from 'react-select';
 import type { SelectProps, SelectAsyncProps, SelectCreatableProps } from './types';
 export declare function Select<Option, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>(props: SelectProps<Option, IsMulti, Group>): ReactElement;
 export declare function SelectAsync<Option, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>(props: SelectAsyncProps<Option, IsMulti, Group>): ReactElement;

package/Select/Select.js

@@ -1,6 +1,15 @@
 import React from 'react';
+import { CloseIcon } from '@pushwoosh/kit-icons';
 import { CLASS_NAME_PREFIX } from './constants';
-import { SelectStyled, SelectAsyncStyled, SelectCreatableStyled } from './styles';
+import { SelectStyled, SelectAsyncStyled, SelectCreatableStyled, ClearIndicatorBox } from './styles';
+const componentsProps = {
+  ClearIndicator: ({
+    clearValue
+  }) => React.createElement(ClearIndicatorBox, null, React.createElement(CloseIcon, {
+    size: "small",
+    onClick: clearValue
+  }))
+};
 export function Select(props) {
   const {
     classNamePrefix = CLASS_NAME_PREFIX
@@ -10,6 +19,7 @@ export function Select(props) {
     classNamePrefix
   };
   return React.createElement(SelectStyled, {
+    components: componentsProps,
     ...customProps
   });
 }
@@ -22,6 +32,7 @@ export function SelectAsync(props) {
     classNamePrefix
   };
   return React.createElement(SelectAsyncStyled, {
+    components: componentsProps,
     ...customProps
   });
 }
@@ -34,6 +45,7 @@ export function CreatableSelect(props) {
     classNamePrefix
   };
   return React.createElement(SelectCreatableStyled, {
+    components: componentsProps,
     ...customProps
   });
 }

package/Select/styles.d.ts

@@ -4,3 +4,4 @@ import ReactSelectCreatable from 'react-select/creatable';
 export declare const SelectStyled: typeof ReactSelect;
 export declare const SelectAsyncStyled: typeof ReactSelectAsync;
 export declare const SelectCreatableStyled: typeof ReactSelectCreatable;
+export declare const ClearIndicatorBox: import("styled-components").StyledComponent<"div", any, {}, never>;

package/Select/styles.js

@@ -4,11 +4,11 @@ import ReactSelectCreatable from 'react-select/creatable';
 import styled, { css } from 'styled-components';
 import { Color, Spacing, FontSize, LineHeight, UnitSize } from '@pushwoosh/kit-constants';
 import { CLASS_NAME_PREFIX } from './constants';
-const selectStyles = css([".", "__control{width:", ";min-width:", ";height:auto;min-height:", ";font-size:", ";line-height:", ";background-color:", ";border:", ";box-sizing:border-box;}.", "__indicator{display:flex;align-items:center;justify-content:center;padding:", " ", ";}.", "__menu{width:", ";min-width:", ";font-size:", ";line-height:", ";}.", "__indicator-separator{display:none;}.", "__control--is-focused{border:1px solid ", ";box-shadow:none;}.", "__control--is-disabled{background-color:", ";}.", "__control:hover{border:", ";}.", "__control--is-focused:hover{border:1px solid ", ";box-shadow:none;}.", "__placeholder{display:flex;width:100%;text-overflow:clip;white-space:nowrap;}"], CLASS_NAME_PREFIX, ({
+const selectStyles = css([".", "__control{width:", ";min-width:", ";height:auto;min-height:", ";font-size:", ";line-height:", ";color:", ";background-color:", ";border:", ";box-sizing:border-box;}.", "__indicator{display:flex;align-items:center;justify-content:center;padding:", " ", ";}.", "__menu{width:", ";min-width:", ";font-size:", ";line-height:", ";}.", "__indicator-separator{display:none;}.", "__control--is-focused{border:1px solid ", ";box-shadow:none;}.", "__control--is-disabled{background-color:", ";}.", "__control:hover{border:", ";}.", "__control--is-focused:hover{border:1px solid ", ";box-shadow:none;}.", "__placeholder{display:flex;width:100%;color:", ";white-space:nowrap;text-overflow:clip;}"], CLASS_NAME_PREFIX, ({
   width
 }) => width || '100%', ({
   width
-}) => width || '150px', UnitSize.FIELD_HEIGHT, FontSize.REGULAR, LineHeight.REGULAR, Color.CLEAR, ({
+}) => width || '150px', UnitSize.FIELD_HEIGHT, FontSize.REGULAR, LineHeight.REGULAR, Color.MAIN, Color.CLEAR, ({
   $isErrored
 }) => $isErrored ? `1px solid ${Color.DANGER}` : `1px solid ${Color.FORM}`, CLASS_NAME_PREFIX, Spacing.S2, Spacing.S3, CLASS_NAME_PREFIX, ({
   width
@@ -16,7 +16,7 @@ const selectStyles = css([".", "__control{width:", ";min-width:", ";height:auto;
   width
 }) => width || '150px', FontSize.REGULAR, LineHeight.REGULAR, CLASS_NAME_PREFIX, CLASS_NAME_PREFIX, Color.BRIGHT, CLASS_NAME_PREFIX, Color.FROZEN, CLASS_NAME_PREFIX, ({
   $isErrored
-}) => $isErrored ? `1px solid ${Color.DANGER}` : `1px solid ${Color.FORM}`, CLASS_NAME_PREFIX, Color.BRIGHT, CLASS_NAME_PREFIX);
+}) => $isErrored ? `1px solid ${Color.DANGER}` : `1px solid ${Color.FORM}`, CLASS_NAME_PREFIX, Color.BRIGHT, CLASS_NAME_PREFIX, Color.PHANTOM);
 export const SelectStyled = styled(ReactSelect).withConfig({
   displayName: "SelectStyled",
   componentId: "sc-c2oq4h-0"
@@ -28,4 +28,8 @@ export const SelectAsyncStyled = styled(ReactSelectAsync).withConfig({
 export const SelectCreatableStyled = styled(ReactSelectCreatable).withConfig({
   displayName: "SelectCreatableStyled",
   componentId: "sc-c2oq4h-2"
-})(["", ";"], selectStyles);
+})(["", ";"], selectStyles);
+export const ClearIndicatorBox = styled.div.withConfig({
+  displayName: "ClearIndicatorBox",
+  componentId: "sc-c2oq4h-3"
+})(["color:", ";transition:transform 0.3s ease,color 0.3s ease;&:hover{color:", ";transform:scale(1.2);}"], Color.PHANTOM, Color.MAIN);

package/package.json

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