@pushwoosh/dumb-components 1.0.31 → 1.0.33

package/DropdownMenu/components/DropdownMenu/DropdownMenu.js

@@ -1,5 +1,6 @@
-import { autoPlacement, offset, useFloating } from '@floating-ui/react-dom';
-import React, { useEffect, useState } from 'react';
+import { autoPlacement, size, offset, useFloating } from '@floating-ui/react-dom';
+import React, { useState, useEffect } from 'react';
+import { flushSync } from 'react-dom';
 import { Place } from './styles';
 import { DropdownContext } from '../../context';
 const defaultPlacements = ['top-start', 'top-end', 'bottom-start', 'bottom-end'];
@@ -9,14 +10,24 @@ export const DropdownMenu = ({
   isScrollable,
   menuZIndex,
   menuPlacement,
+  fullWidth,
   children
 }) => {
   const [isOpen, setIsOpen] = useState(false);
+  const [width, setWidth] = useState(null);
   const {
     refs,
     floatingStyles
   } = useFloating({
-    middleware: [offset(4), autoPlacement({
+    middleware: [size({
+      apply({
+        rects
+      }) {
+        if (fullWidth) {
+          flushSync(() => setWidth(rects.reference.width));
+        }
+      }
+    }), offset(4), autoPlacement({
       allowedPlacements: menuPlacement ? [menuPlacement] : defaultPlacements
     })]
   });
@@ -44,6 +55,7 @@ export const DropdownMenu = ({
     ref: refs.setFloating,
     style: floatingStyles,
     "$color": color,
+    "$width": width,
     "$scrollable": isScrollable,
     "$zIndex": menuZIndex
   }, typeof children === 'function' ? children() : children));

package/DropdownMenu/components/DropdownMenu/styles.d.ts

@@ -12,6 +12,7 @@ export declare const Place: import("styled-components").StyledComponent<"div", a
     $gridAutoFlow: string;
 } & {
     $color?: string;
+    $width: number | null;
     $zIndex?: number;
     $scrollable?: boolean;
 }, "$gridAutoFlow">;

package/DropdownMenu/components/DropdownMenu/styles.js

@@ -5,9 +5,11 @@ const scrollableCss = css(["max-height:248px;overflow-y:auto;"]);
 export const Place = styled(Vertical).withConfig({
   displayName: "Place",
   componentId: "sc-ij8wqc-0"
-})(["border:1px solid ", ";background:", ";min-width:140px;", " border-radius:", ";box-shadow:", ";z-index:", ";"], Color.FORM, ({
+})(["border:1px solid ", ";background:", ";width:", ";min-width:140px;max-width:480px;", " border-radius:", ";box-shadow:", ";z-index:", ";"], Color.FORM, ({
   $color
 }) => $color || Color.FROZEN, ({
+  $width
+}) => $width ? `${$width}px` : 'auto', ({
   $scrollable
 }) => $scrollable && scrollableCss, ShapeRadius.CONTROL, Shadow.REGULAR, ({
   $zIndex

package/DropdownMenu/components/DropdownMenu/types.d.ts

@@ -2,15 +2,16 @@ import type { ReferenceType, Placement } from '@floating-ui/react-dom';
 import type { ReactNode } from 'react';
 import type { Color } from '@pushwoosh/kit-constants';
 export type HandlerProps = {
-    onClick: () => void;
-    ref: (el: ReferenceType | null) => void;
     isOpen: boolean;
+    ref: (el: ReferenceType | null) => void;
+    onClick: () => void;
 };
 export type DropdownMenuProps = {
-    renderHandler: (args: HandlerProps) => ReactNode;
-    children: (() => ReactNode) | ReactNode;
     color?: Color.CLEAR | Color.FROZEN;
     isScrollable?: boolean;
     menuZIndex?: number;
     menuPlacement?: Placement;
+    fullWidth?: boolean;
+    renderHandler: (args: HandlerProps) => ReactNode;
+    children: (() => ReactNode) | ReactNode;
 };

package/FieldBox/FieldBox.js

@@ -45,10 +45,10 @@ export function FieldBox(props) {
     "$alignItems": "center",
     "$gap": Spacing.S1
   }, actions)), children, description && !error && React.createElement(Text, {
-    "$variant": "h5",
+    "$variant": "footnote",
     "$color": Color.LOCKED
   }, description), error && React.createElement(Text, {
-    "$variant": "h5",
+    "$variant": "footnote",
     "$color": Color.DANGER
   }, error));
 }

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.31",
+  "version": "1.0.33",
   "description": "React components to build Pushwoosh products",
   "main": "index.js",
   "module": "index.js",