@pushwoosh/dumb-components 1.1.115 → 1.1.117

package/Chip/Chip.d.ts

@@ -4,6 +4,7 @@ export declare const Chip: React.ForwardRefExoticComponent<{
     $selected?: boolean;
     $onClose?: React.HTMLAttributes<HTMLDivElement>["onClick"];
     $readOnly?: boolean;
+    $maxWidth?: string;
     as?: string;
 } & {
     children?: React.ReactNode | undefined;

package/Chip/Chip.js

@@ -6,6 +6,7 @@ export const Chip = forwardRef(({
   $selected,
   $readOnly,
   $onClose,
+  $maxWidth,
   children,
   as,
   ...rest
@@ -16,9 +17,12 @@ export const Chip = forwardRef(({
     "$selected": $selected,
     "$closeable": !!$onClose,
     "$readOnly": $readOnly,
+    "$maxWidth": $maxWidth,
     as: as,
     ...rest
-  }, children, $onClose && React.createElement(CloseIcon, {
+  }, React.createElement("span", {
+    className: "chipLabel"
+  }, children), $onClose && React.createElement(CloseIcon, {
     size: "small",
     onClick: $onClose,
     as: "span",

package/Chip/Chip.types.d.ts

@@ -5,5 +5,7 @@ export type ChipProps = PropsWithChildren<{
     $selected?: boolean;
     $onClose?: HTMLAttributes<HTMLDivElement>['onClick'];
     $readOnly?: boolean;
+    /** CSS max-width value, e.g. "120px", "50%", "10rem". Enables label truncation with ellipsis. */
+    $maxWidth?: string;
     as?: string;
 }> & HTMLAttributes<HTMLDivElement>;

package/Chip/styles.d.ts

@@ -4,4 +4,5 @@ export declare const ChipStyled: import("styled-components").StyledComponent<"di
     $selected?: boolean;
     $closeable?: boolean;
     $readOnly?: boolean;
+    $maxWidth?: string;
 }, never>;

package/Chip/styles.js

@@ -4,7 +4,9 @@ import { variants } from './Chip.constants';
 export const ChipStyled = styled.div.withConfig({
   displayName: "ChipStyled",
   componentId: "sc-e2g39l-0"
-})(["display:inline-flex;min-height:24px;padding:0 ", " 0 8px;align-items:center;gap:4px;cursor:", ";border-radius:4px;color:", ";background:", ";font-weight:400;line-height:140%;& > .closeIcon{transition:transform 0.2s;&:hover{transform:scale(1.3);}}"], ({
+})(["display:inline-flex;min-height:24px;", " padding:0 ", " 0 8px;align-items:center;gap:4px;cursor:", ";border-radius:4px;color:", ";background:", ";font-weight:400;line-height:140%;& > .chipLabel{", "}& > .closeIcon{transition:transform 0.2s;&:hover{transform:scale(1.3);}}"], ({
+  $maxWidth
+}) => $maxWidth !== undefined && `max-width: ${$maxWidth};`, ({
   $closeable
 }) => $closeable ? '4px' : '8px', ({
   $readOnly
@@ -26,4 +28,12 @@ export const ChipStyled = styled.div.withConfig({
     return Color.SOFT_LIGHT;
   }
   return $selected ? Color.MAIN : variants[$variant].background;
-});
+}, ({
+  $maxWidth
+}) => $maxWidth !== undefined && `
+      flex: 1 1 0;
+      min-width: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    `);

package/Select/index.d.ts

@@ -1,5 +1,5 @@
-export { Select, SelectAsync, CreatableSelect } from './Select';
-export { CLASS_NAME_PREFIX } from './constants';
-export type { SelectBase, MultiSelectOptions } from './types';
 export { components as SelectComponents } from 'react-select';
-export type { SingleValue } from 'react-select';
+export type { SingleValue, MultiValue } from 'react-select';
+export { CLASS_NAME_PREFIX } from './constants';
+export { Select, SelectAsync, CreatableSelect } from './Select';
+export type { SelectBase, SelectOption, MultiSelectOptions } from './types';

package/Select/index.js

@@ -1,3 +1,3 @@
-export { Select, SelectAsync, CreatableSelect } from './Select';
+export { components as SelectComponents } from 'react-select';
 export { CLASS_NAME_PREFIX } from './constants';
-export { components as SelectComponents } from 'react-select';
+export { Select, SelectAsync, CreatableSelect } from './Select';

package/index.d.ts

@@ -20,7 +20,7 @@ export { RadioCard } from './RadioCard';
 export { ReCaptcha, useRecaptcha, asyncScriptLoad } from './ReCaptcha';
 export { Spinner } from './Spinner';
 export { SortButton, type SortButtonParams } from './SortButton';
-export { Select, SelectAsync, CreatableSelect, SelectComponents, CLASS_NAME_PREFIX, type SelectBase, type MultiSelectOptions, type SingleValue, } from './Select';
+export { Select, SelectAsync, CreatableSelect, SelectComponents, CLASS_NAME_PREFIX, type SelectBase, type SelectOption, type MultiSelectOptions, type SingleValue, type MultiValue, } from './Select';
 export { Switch } from './Switch';
 export { TextSkeleton, RectangularSkeleton, CircularSkeleton } from './Skeleton';
 export { Tooltip, type TooltipPosition, TooltipTrigger } from './Tooltip';

package/package.json

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