@pushwoosh/dumb-components 1.1.116 → 1.1.118

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/DropdownMenu/components/DropdownMenuButton/types.d.ts

@@ -2,7 +2,7 @@ import { type Placement } from '@floating-ui/react-dom';
 import { type ReactNode } from 'react';
 import { type RequiredButtonProps } from '../../../Button';
 export type DropdownMenuButtonProps = {
-    label: ReactNode;
+    label?: ReactNode;
     isScrollable?: boolean;
     isDisabled?: boolean;
     isLoading?: boolean;

package/package.json

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