@auth0/quantum-product 2.4.8 → 2.4.10

package/accordion/accordion-details.js

@@ -17,6 +17,6 @@ exports.AccordionDetails = (0, styled_1.styled)(AccordionDetails_1.default, {
         gridTemplateColumns: '40% repeat(4, 15%)',
         padding: "0px ".concat(theme.spacing(2)),
         borderBottom: "1px solid ".concat(theme.tokens.color_border_default),
-        height: theme.typography.pxToRem(72),
+        minHeight: theme.typography.pxToRem(72),
     };
 });

package/alert/alert.js

@@ -218,6 +218,6 @@ exports.Alert = React.forwardRef(function (props, ref) {
             !!title && React.createElement(AlertTitle, { className: classes.title }, title),
             React.createElement(AlertMessage, { className: classes.message }, message || children)),
         hasAction && (React.createElement(AlertAction, { className: classes.action }, action ||
-            (showCloseButton && (React.createElement(icon_button_1.IconButton, { label: "close button", color: "inherit", size: "small", variant: "link", "aria-label": closeText, onClick: onClose },
+            (showCloseButton && (React.createElement(icon_button_1.IconButton, { label: closeText, color: "inherit", size: "small", variant: "link", "aria-label": closeText, onClick: onClose },
                 React.createElement(icon_1.XIcon, null))))))));
 });

package/avatar-block/avatar-block.d.ts

@@ -10,6 +10,7 @@ export type IAvatarBlockProps = IStyledComponentProps<{
         TitleBlockProps?: Partial<ITitleBlockProps>;
         classes?: Partial<AvatarBlockClasses>;
         endAdornment?: React.ReactNode;
+        noWrap?: boolean;
     };
     defaultComponent: 'div';
 }>;
@@ -19,4 +20,5 @@ export declare const AvatarBlock: React.ForwardRefExoticComponent<Pick<ITitleBlo
     TitleBlockProps?: Partial<ITitleBlockProps> | undefined;
     classes?: Partial<Record<"root" | "avatar" | "endAdornment" | "titleBlock", string>> | undefined;
     endAdornment?: React.ReactNode;
-} & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "title" | "ref" | "size" | "classes" | "avatar" | "titleTypographyProps" | "endAdornment" | "description" | "descriptionTypographyProps" | "TitleBlockProps"> & import("../styled").IStyledCommonProps & React.RefAttributes<HTMLDivElement>>;
+    noWrap?: boolean | undefined;
+} & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "title" | "ref" | "size" | "classes" | "avatar" | "titleTypographyProps" | "noWrap" | "endAdornment" | "description" | "descriptionTypographyProps" | "TitleBlockProps"> & import("../styled").IStyledCommonProps & React.RefAttributes<HTMLDivElement>>;

package/avatar-block/avatar-block.js

@@ -85,11 +85,12 @@ var titleVariantMap = {
     large: 'subtitle1',
 };
 exports.AvatarBlock = React.forwardRef(function (props, ref) {
-    var avatar = props.avatar, title = props.title, description = props.description, titleTypographyProps = props.titleTypographyProps, descriptionTypographyProps = props.descriptionTypographyProps, _a = props.TitleBlockProps, TitleBlockProps = _a === void 0 ? {} : _a, className = props.className, _b = props.size, size = _b === void 0 ? 'medium' : _b, endAdornment = props.endAdornment, rootProps = __rest(props, ["avatar", "title", "description", "titleTypographyProps", "descriptionTypographyProps", "TitleBlockProps", "className", "size", "endAdornment"]);
+    var avatar = props.avatar, title = props.title, description = props.description, titleTypographyProps = props.titleTypographyProps, descriptionTypographyProps = props.descriptionTypographyProps, _a = props.TitleBlockProps, TitleBlockProps = _a === void 0 ? {} : _a, className = props.className, _b = props.size, size = _b === void 0 ? 'medium' : _b, endAdornment = props.endAdornment, _c = props.noWrap, noWrap = _c === void 0 ? false : _c, // Default to false
+    rootProps = __rest(props, ["avatar", "title", "description", "titleTypographyProps", "descriptionTypographyProps", "TitleBlockProps", "className", "size", "endAdornment", "noWrap"]);
     var classes = (0, classes_1.useMergedClasses)(avatar_block_classes_1.avatarBlockClasses, avatar_block_classes_1.getAvatarBlockUtilityClass, props.classes);
     var titleVariant = titleVariantMap[size];
     return (React.createElement(Root, __assign({ ownerState: { description: description, size: size }, ref: ref, className: (0, clsx_1.default)(classes.root, className) }, rootProps),
         avatar && React.createElement(Avatar, { className: classes.avatar }, avatar),
-        React.createElement(title_block_1.TitleBlock, __assign({ className: classes.titleBlock, title: title, description: description, titleTypographyProps: __assign({ noWrap: true, component: 'p', variant: titleVariant }, titleTypographyProps), descriptionTypographyProps: descriptionTypographyProps, gutter: size === 'large' ? 0.5 : 0 }, TitleBlockProps, { sx: __assign({ flex: 1 }, TitleBlockProps.sx) })),
+        React.createElement(title_block_1.TitleBlock, __assign({ className: classes.titleBlock, title: title, description: description, titleTypographyProps: __assign({ component: 'p', variant: titleVariant, noWrap: noWrap, title: noWrap && typeof title === 'string' ? title : '' }, titleTypographyProps), descriptionTypographyProps: __assign({ noWrap: noWrap, title: noWrap && typeof description === 'string' ? description : '' }, descriptionTypographyProps), gutter: size === 'large' ? 0.5 : 0 }, TitleBlockProps, { sx: __assign({ flex: 1 }, TitleBlockProps.sx) })),
         !!endAdornment && React.createElement(EndAdornment, { className: classes.endAdornment }, endAdornment)));
 });

package/button/button.d.ts

@@ -13,6 +13,7 @@ export interface IButtonTypeMap<P = {}, D extends React.ElementType = 'button'>
         /** Alternative to using `props.children`. This is a convenience prop for other components using an `action` prop */
         label?: React.ReactNode;
         SpinnerProps?: Partial<ISpinnerProps>;
+        maxWidth?: string;
     };
     defaultComponent: D;
 }

package/button/button.js

@@ -75,10 +75,26 @@ var ButtonSpinner = (0, styled_1.styled)(spinner_1.Spinner, {
 })({
     position: 'absolute',
 });
+var LabelSpan = (0, styled_1.styled)('span')(function (_a) {
+    var maxWidth = _a.maxWidth;
+    return ({
+        display: 'inline-block',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap',
+        maxWidth: maxWidth || '100%', // Adjust as needed for non-fullWidth buttons
+    });
+});
 exports.Button = React.forwardRef(function (_a, ref) {
-    var isLoading = _a.isLoading, label = _a.label, children = _a.children, disabled = _a.disabled, _b = _a.SpinnerProps, SpinnerProps = _b === void 0 ? {} : _b, _c = _a.color, color = _c === void 0 ? 'default' : _c, variant = _a.variant, rootProps = __rest(_a, ["isLoading", "label", "children", "disabled", "SpinnerProps", "color", "variant"]);
-    return (React.createElement(Root, __assign({}, rootProps, { disabled: disabled || isLoading, ownerState: { isLoading: isLoading }, color: color, variant: variant, ref: ref }),
-        label || children,
-        " ",
+    var isLoading = _a.isLoading, label = _a.label, children = _a.children, disabled = _a.disabled, _b = _a.SpinnerProps, SpinnerProps = _b === void 0 ? {} : _b, _c = _a.color, color = _c === void 0 ? 'default' : _c, variant = _a.variant, maxWidth = _a.maxWidth, rootProps = __rest(_a, ["isLoading", "label", "children", "disabled", "SpinnerProps", "color", "variant", "maxWidth"]);
+    var title = label ||
+        (typeof children === 'string'
+            ? children
+            : React.Children.toArray(children)
+                .filter(function (child) { return typeof child === 'string'; })
+                .join(''));
+    return (React.createElement(Root, __assign({}, rootProps, { disabled: disabled || isLoading, ownerState: { isLoading: isLoading }, color: color, variant: variant, ref: ref, title: String(title) }),
+        React.createElement(LabelSpan, { style: { maxWidth: rootProps.fullWidth ? 'none' : maxWidth || '100%' } }, label || children),
+        ' ',
         !!isLoading && React.createElement(ButtonSpinner, __assign({}, SpinnerProps))));
 });

package/card/card-header/card-header.d.ts

@@ -43,6 +43,14 @@ export type ICardHeaderProps = IStyledComponentProps<{
          * (as long as disableTypography is not `true`).
          */
         titleTypographyProps?: ITextProps<any>;
+        /**
+         * If `true`, the text will not wrap, but instead will truncate with a text overflow ellipsis.
+         *
+         * Note that text overflow can only happen with block or inline-block level elements
+         * (the element needs to have a width in order to overflow).
+         * @default false
+         */
+        noWrap?: boolean;
     };
     defaultComponent: 'div';
 }>;
@@ -85,4 +93,12 @@ export declare const CardHeader: React.ForwardRefExoticComponent<Partial<ICardCo
      * (as long as disableTypography is not `true`).
      */
     titleTypographyProps?: ITextProps<any> | undefined;
-} & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "title" | "ref" | "action" | "size" | "classes" | "avatar" | "disableTypography" | "subheader" | "subheaderTypographyProps" | "titleTypographyProps"> & import("../../styled").IStyledCommonProps & React.RefAttributes<HTMLDivElement>>;
+    /**
+     * If `true`, the text will not wrap, but instead will truncate with a text overflow ellipsis.
+     *
+     * Note that text overflow can only happen with block or inline-block level elements
+     * (the element needs to have a width in order to overflow).
+     * @default false
+     */
+    noWrap?: boolean | undefined;
+} & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "title" | "ref" | "action" | "size" | "classes" | "avatar" | "disableTypography" | "subheader" | "subheaderTypographyProps" | "titleTypographyProps" | "noWrap"> & import("../../styled").IStyledCommonProps & React.RefAttributes<HTMLDivElement>>;

package/card/card-header/card-header.js

@@ -83,21 +83,35 @@ var titleVariantMap = {
 };
 exports.CardHeader = React.forwardRef(function (props, ref) {
     var sizeContext = (0, card_context_1.useCardContext)().size;
-    var sizeProp = props.size, _a = props.titleTypographyProps, titleTypographyProps = _a === void 0 ? {} : _a, _b = props.subheaderTypographyProps, subheaderTypographyProps = _b === void 0 ? {} : _b, title = props.title, subheader = props.subheader, propClasses = props.classes, cardProps = __rest(props, ["size", "titleTypographyProps", "subheaderTypographyProps", "title", "subheader", "classes"]);
+    var sizeProp = props.size, _a = props.titleTypographyProps, titleTypographyProps = _a === void 0 ? {} : _a, _b = props.subheaderTypographyProps, subheaderTypographyProps = _b === void 0 ? {} : _b, title = props.title, subheader = props.subheader, _c = props.noWrap, noWrap = _c === void 0 ? false : _c, propClasses = props.classes, cardProps = __rest(props, ["size", "titleTypographyProps", "subheaderTypographyProps", "title", "subheader", "noWrap", "classes"]);
     var classes = (0, classes_1.useMergedClasses)(card_header_classes_1.cardHeaderClasses, card_header_classes_1.getCardHeaderUtilityClass, propClasses);
     var size = sizeProp || sizeContext || card_context_1.defaultCardSize;
     var titleVariant = titleVariantMap[size];
+    var titleStyles = noWrap
+        ? {
+            whiteSpace: 'nowrap',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+        }
+        : {
+            whiteSpace: 'normal',
+            overflow: 'visible',
+            textOverflow: 'clip', // Don't apply ellipsis
+        }; // No additional styles when noWrap is false
+    var subheaderStyles = noWrap
+        ? {
+            whiteSpace: 'nowrap',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+        }
+        : {
+            whiteSpace: 'normal',
+            overflow: 'visible',
+            textOverflow: 'clip', // Don't apply ellipsis
+        };
     return (React.createElement(Root, __assign({ ref: ref, ownerState: { size: size }, classes: {
             action: classes.action,
             avatar: classes.avatar,
             content: classes.content,
-        }, title: React.createElement(Title, __assign({ variant: titleVariant, color: "textPrimary" }, { component: 'p' }, { role: "heading", display: "block" }, titleTypographyProps, { className: (0, clsx_1.default)(classes.title, titleTypographyProps.className), ownerState: { size: size }, noWrap: true, sx: {
-                whiteSpace: 'nowrap',
-                overflow: 'hidden',
-                textOverflow: 'ellipsis',
-            }, title: title }), title), subheader: subheader ? (React.createElement(text_1.Text, __assign({ variant: "body2", color: "textSecondary", component: "p", noWrap: true, sx: {
-                whiteSpace: 'nowrap',
-                overflow: 'hidden',
-                textOverflow: 'ellipsis',
-            }, title: subheader }, subheaderTypographyProps, { className: (0, clsx_1.default)(classes.subheader, subheaderTypographyProps.className) }), subheader)) : null }, cardProps, { disableTypography: true })));
+        }, title: React.createElement(Title, __assign({ variant: titleVariant, color: "textPrimary" }, { component: 'p' }, { role: "heading", display: "block" }, titleTypographyProps, { className: (0, clsx_1.default)(classes.title, titleTypographyProps.className), ownerState: { size: size }, noWrap: noWrap, sx: titleStyles, title: noWrap ? title : '' }), title), subheader: subheader ? (React.createElement(text_1.Text, __assign({ variant: "body2", color: "textSecondary", component: "p", noWrap: noWrap, sx: subheaderStyles, title: noWrap ? subheader : '' }, subheaderTypographyProps, { className: (0, clsx_1.default)(classes.subheader, subheaderTypographyProps.className) }), subheader)) : null }, cardProps, { disableTypography: true })));
 });

package/chip/chip.js

@@ -82,5 +82,5 @@ var Root = (0, styled_1.styled)(Chip_1.default, { name: exports.chipComponentNam
 });
 exports.Chip = React.forwardRef(function (props, ref) {
     var selected = props.selected, _a = props.deleteIcon, deleteIcon = _a === void 0 ? React.createElement(icon_1.XIcon, null) : _a, chipProps = __rest(props, ["selected", "deleteIcon"]);
-    return React.createElement(Root, __assign({ ref: ref, deleteIcon: deleteIcon, ownerState: { selected: selected } }, chipProps));
+    return (React.createElement(Root, __assign({ ref: ref, deleteIcon: deleteIcon, ownerState: { selected: selected } }, chipProps, { title: props === null || props === void 0 ? void 0 : props.label })));
 });

package/code/code.js

@@ -51,16 +51,17 @@ var styled_1 = require("../styled");
 var text_1 = require("../text");
 exports.CodeComponentName = 'QuantumCode';
 var Root = (0, styled_1.styled)(text_1.Text, { name: exports.CodeComponentName, slot: 'Root' })(function (_a) {
-    var theme = _a.theme;
+    var theme = _a.theme, noWrap = _a.noWrap;
     return ({
         display: 'inline',
         padding: theme.spacing(0.25, 0.75),
         color: theme.tokens.color_fg_default,
         backgroundColor: theme.tokens.color_bg_layer_alternate_bold,
         borderRadius: theme.shape.borderRadius,
+        whiteSpace: noWrap ? 'nowrap' : 'pre-wrap', // Conditionally apply white-space
     });
 });
 exports.Code = React.forwardRef(function (props, ref) {
-    var children = props.children, _a = props.variant, variant = _a === void 0 ? 'code2' : _a, textProps = __rest(props, ["children", "variant"]);
-    return (React.createElement(Root, __assign({ ref: ref }, { component: 'span' }, { color: "textSecondary", variant: variant }, textProps), children));
+    var children = props.children, _a = props.variant, variant = _a === void 0 ? 'code2' : _a, _b = props.noWrap, noWrap = _b === void 0 ? true : _b, textProps = __rest(props, ["children", "variant", "noWrap"]);
+    return (React.createElement(Root, __assign({ ref: ref }, { component: 'span' }, { color: "textSecondary", variant: variant, noWrap: noWrap }, textProps), children));
 });

package/color-text-field/color-text-field.js

@@ -67,30 +67,7 @@ var input_1 = require("../input");
 var styled_1 = require("../styled");
 var text_field_1 = require("../text-field");
 var colorTextFieldComponentName = 'QuantumColorTextField';
-var Root = (0, styled_1.styled)(text_field_1.TextField, { name: colorTextFieldComponentName, slot: 'Root' })(function (_a) {
-    var size = _a.size;
-    return ({
-        'input::placeholder': {
-            textTransform: 'uppercase',
-        },
-        '& > div:first-of-type': {
-            paddingLeft: size === 'small' ? '9px' : '12px',
-        },
-        '& input[type="color"]': {
-            cursor: 'pointer',
-            width: size === 'small' ? '16px' : '20px',
-            height: size === 'small' ? '16px' : '20px',
-            '&::-webkit-color-swatch, &::-webkit-color-swatch-wrapper': {
-                borderRadius: '2px',
-                padding: 0,
-            },
-            '&::-moz-color-swatch': {
-                borderRadius: '2px',
-                padding: 0,
-            },
-        },
-    });
-});
+var Root = (0, styled_1.styled)(text_field_1.TextField, { name: colorTextFieldComponentName, slot: 'Root' })({});
 var ColorPicker = (0, styled_1.styled)('input', { name: colorTextFieldComponentName, slot: 'ColorPicker' })(function (_a) {
     var theme = _a.theme;
     return ({
@@ -104,82 +81,39 @@ var ColorPicker = (0, styled_1.styled)('input', { name: colorTextFieldComponentN
         '&:focus': __assign({ outline: 'none' }, theme.mixins.focusRing()),
     });
 });
-// Normalizes HEX color values to valid 7char HEX color values
 var normalizeHex = function (hex) {
-    if (hex.startsWith('#')) {
-        hex = hex.slice(1);
+    if (hex.length === 4 && /^#[0-9A-F]{3}$/i.test(hex)) {
+        return "#".concat(hex[1]).concat(hex[1]).concat(hex[2]).concat(hex[2]).concat(hex[3]).concat(hex[3]);
     }
-    var upperHex = hex.toUpperCase();
-    switch (upperHex.length) {
-        case 0:
-            return '';
-        case 1:
-            return "#".concat(upperHex.repeat(6));
-        case 2:
-            return "#".concat(upperHex.repeat(3));
-        case 3:
-        case 4:
-        case 5:
-            return "#".concat(upperHex[0].repeat(2)).concat(upperHex[1].repeat(2)).concat(upperHex[2].repeat(2));
-        default:
-            return "#".concat(upperHex.padEnd(6, upperHex).slice(0, 6));
-    }
-};
-var validateHex = function (hex) {
-    var hexRegex = /^(#?[0-9a-fA-F]{1,6})$/;
-    return hexRegex.test(hex);
+    return hex;
 };
 exports.ColorTextField = React.forwardRef(function (props, ref) {
     var inputAdornmentProps = props.inputAdornmentProps, value = props.value, defaultValue = props.defaultValue, placeholder = props.placeholder, rootProps = __rest(props, ["inputAdornmentProps", "value", "defaultValue", "placeholder"]);
-    var getInitialColor = function () { return value || placeholder || defaultValue || ''; };
-    var normalizedInitialColor = normalizeHex(getInitialColor());
-    var _a = __read(React.useState(value || defaultValue), 2), inputColor = _a[0], setInputColor = _a[1];
-    var _b = __read(React.useState(null), 2), error = _b[0], setError = _b[1];
-    //Derived state from inputColor (textfield value)
-    var colorPicker = React.useMemo(function () {
-        if (inputColor) {
-            return normalizeHex(inputColor);
+    var _a = __read(React.useState(normalizeHex(value || placeholder || defaultValue || '#000000')), 2), color = _a[0], setColor = _a[1];
+    var handleColorChange = function (event) {
+        var value = event.target.value;
+        if (value.length === 4 && /^#[0-9A-F]{3}$/i.test(value)) {
+            var normalizedValue = normalizeHex(value);
+            if (props.onChange) {
+                props.onChange(__assign(__assign({}, event), { target: __assign(__assign({}, event.target), { value: normalizedValue }) }));
+            }
         }
-        return normalizeHex(getInitialColor());
-    }, [inputColor, value, placeholder, defaultValue]);
-    var handleTextfieldChange = function (event) {
-        var newValue = event.target.value;
-        setInputColor(newValue);
-    };
-    var handleTextfieldBlur = function (event) {
-        var _a, _b;
-        if (!validateHex(event.target.value)) {
-            setError('Color is invalid');
-            return;
-        }
-        setError(null);
-        var newValue = normalizeHex(event.target.value);
-        setInputColor(newValue);
-        var updatedEvent = __assign(__assign({}, event), { target: __assign(__assign({}, event.target), { value: newValue || normalizedInitialColor }) });
-        (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, updatedEvent);
-        (_b = props.onBlur) === null || _b === void 0 ? void 0 : _b.call(props, updatedEvent);
-    };
-    var handleColorPickerChange = function (event) {
-        var _a, _b;
-        if (!validateHex(event.target.value)) {
-            setError('Color is invalid');
-            return;
+        else {
+            if (props.onChange) {
+                props.onChange(event);
+            }
         }
-        setError(null);
-        var newValue = (_a = event.target.value) === null || _a === void 0 ? void 0 : _a.toUpperCase();
-        setInputColor(newValue);
-        (_b = props.onChange) === null || _b === void 0 ? void 0 : _b.call(props, __assign(__assign({}, event), { target: __assign(__assign({}, event.target), { value: newValue }) }));
     };
-    // Rerender to avoid memoized value on defaultValue change
     React.useEffect(function () {
-        setInputColor(defaultValue);
-    }, [defaultValue]);
-    return (React.createElement(Root, __assign({ ref: ref, error: error }, rootProps, { InputProps: {
+        var newColor = value || placeholder || defaultValue || '#000000';
+        if (newColor) {
+            setColor(normalizeHex(newColor));
+        }
+    }, [value, defaultValue, placeholder]);
+    return (React.createElement(Root, __assign({ ref: ref }, rootProps, { InputProps: {
             startAdornment: (React.createElement(input_1.InputAdornment, __assign({ position: "start" }, inputAdornmentProps),
-                React.createElement(ColorPicker, { id: props.id ? "".concat(props.id, "-color-input") : undefined, name: props.name, type: "color", disabled: props.disabled, readOnly: props.readOnly, value: colorPicker, onChange: handleColorPickerChange }))),
-            value: inputColor,
+                React.createElement(ColorPicker, { id: props.id ? "".concat(props.id, "-color-input") : undefined, name: props.name, type: "color", disabled: props.disabled, readOnly: props.readOnly, value: color, onChange: handleColorChange }))),
+            value: value,
             placeholder: placeholder,
-            onBlur: handleTextfieldBlur,
-            onChange: handleTextfieldChange,
         } })));
 });

package/copy-button/copy-button.d.ts

@@ -1,12 +1,11 @@
 import * as React from 'react';
 import { IIconButtonProps } from '../icon-button';
-export type ICopyButtonProps = IIconButtonProps;
-export declare const CopyButton: React.ForwardRefExoticComponent<{
-    variant?: "link" | "outlined" | "contained" | undefined;
-    shape?: "default" | "circular" | undefined;
-    tooltipPlacement?: "left" | "right" | "bottom" | "top" | "bottom-end" | "bottom-start" | "left-end" | "left-start" | "right-end" | "right-start" | "top-end" | "top-start" | undefined;
-    onTooltipClose?: ((event: Event | React.SyntheticEvent<Element, Event>) => void) | undefined;
-    href?: string | undefined;
-    label: string;
-    target?: string | undefined;
-} & import("@mui/material").IconButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "label" | "ref" | "action" | "variant" | "tabIndex" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "href" | keyof import("@mui/material").IconButtonOwnProps | "target" | "shape" | "tooltipPlacement" | "onTooltipClose"> & React.RefAttributes<HTMLButtonElement>>;
+export interface ICopyButtonProps extends IIconButtonProps {
+    /**
+     * Custom label to display on the button after content is copied to the clipboard.
+     *
+     * @default 'Copied!'
+     */
+    copiedLabel?: string;
+}
+export declare const CopyButton: React.ForwardRefExoticComponent<ICopyButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/copy-button/copy-button.js

@@ -66,8 +66,8 @@ var React = __importStar(require("react"));
 var icon_1 = require("../icon");
 var icon_button_1 = require("../icon-button");
 exports.CopyButton = React.forwardRef(function (_a, ref) {
-    var onClick = _a.onClick, label = _a.label, rootProps = __rest(_a, ["onClick", "label"]);
-    var _b = __read(React.useState(false), 2), pressed = _b[0], setPressed = _b[1];
+    var onClick = _a.onClick, label = _a.label, _b = _a.copiedLabel, copiedLabel = _b === void 0 ? 'Copied!' : _b, rootProps = __rest(_a, ["onClick", "label", "copiedLabel"]);
+    var _c = __read(React.useState(false), 2), pressed = _c[0], setPressed = _c[1];
     React.useEffect(function () {
         if (!pressed) {
             return undefined;
@@ -85,7 +85,7 @@ exports.CopyButton = React.forwardRef(function (_a, ref) {
     };
     var handleClose = function () { return setPressed(false); };
     // use title as the key to force a mount/unmount of the tooltip. This drives the feedback transition.
-    var title = pressed ? 'Copied!' : label;
+    var title = pressed ? copiedLabel : label;
     return (React.createElement(icon_button_1.IconButton, __assign({}, rootProps, { key: title, label: title, onTooltipClose: handleClose, ref: ref, tooltipPlacement: "top", onClick: handleClick }),
         React.createElement(icon_1.CopyIcon, null)));
 });

package/dialog/dialog-title/dialog-title.d.ts

@@ -4,6 +4,7 @@ import { DialogTitleClasses } from './dialog-title-classes';
 export interface IDialogTitleProps extends Omit<DialogTitleProps, 'classes'> {
     disableTypography?: boolean;
     onClose?(event: {}, reason: 'closeClick'): void;
+    closeButtonLabel?: string;
     classes?: Partial<DialogTitleClasses>;
 }
 export declare const DialogTitle: React.ForwardRefExoticComponent<Omit<IDialogTitleProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dialog/dialog-title/dialog-title.js

@@ -68,10 +68,10 @@ var Root = (0, styled_1.styled)(DialogTitle_1.default, {
     justifyContent: 'space-between',
 });
 exports.DialogTitle = React.forwardRef(function (props, ref) {
-    var children = props.children, onClose = props.onClose, _a = props.disableTypography, disableTypography = _a === void 0 ? false : _a, id = props.id, className = props.className, propClasses = props.classes, dialogTitleProps = __rest(props, ["children", "onClose", "disableTypography", "id", "className", "classes"]);
+    var children = props.children, onClose = props.onClose, closeButtonLabel = props.closeButtonLabel, _a = props.disableTypography, disableTypography = _a === void 0 ? false : _a, id = props.id, className = props.className, propClasses = props.classes, dialogTitleProps = __rest(props, ["children", "onClose", "closeButtonLabel", "disableTypography", "id", "className", "classes"]);
     var classes = (0, classes_1.useMergedClasses)(dialog_title_classes_1.dialogTitleClasses, dialog_title_classes_1.getDialogTitleUtilityClass, propClasses);
     return (React.createElement(Root, __assign({}, dialogTitleProps, { className: (0, clsx_1.default)(classes.root, className), ref: ref }),
         disableTypography ? (children) : (React.createElement(text_1.Text, { id: id, className: classes.title, variant: "h5", color: "textPrimary" }, children)),
-        !!onClose && (React.createElement(icon_button_1.IconButton, { shape: "circular", variant: "contained", "aria-label": "Close", size: "small", className: classes.closeButton, onClick: function (event) { return onClose(event, 'closeClick'); }, label: "Close" },
+        !!onClose && (React.createElement(icon_button_1.IconButton, { shape: "circular", variant: "contained", "aria-label": "Close", size: "small", className: classes.closeButton, onClick: function (event) { return onClose(event, 'closeClick'); }, label: closeButtonLabel || 'Close' },
             React.createElement(icon_1.XIcon, null)))));
 });

package/dialog/dialog.d.ts

@@ -10,6 +10,8 @@ export interface IDialogProps extends Omit<DialogProps, 'title' | 'onClose'> {
     disableContentWrap?: boolean;
     /** callback for when the dialog is closed. The reason is given as the second argument */
     onClose?(event: {}, reason: 'backdropClick' | 'escapeKeyDown' | 'closeClick'): void;
+    /** convenience prop for rendering the label for close button with a DialogTitle component */
+    closeButtonLabel?: string;
 }
 export declare const dialogComponentName = "QuantumDialog";
 export declare const Dialog: React.ForwardRefExoticComponent<Omit<IDialogProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dialog/dialog.js

@@ -71,7 +71,7 @@ var Root = (0, styled_1.styled)(Dialog_1.default, {
         _b);
 });
 exports.Dialog = React.forwardRef(function (props, ref) {
-    var title = props.title, actions = props.actions, children = props.children, onClose = props.onClose, idProp = props.id, disableBackdropClick = props.disableBackdropClick, _a = props.disableContentWrap, disableContentWrap = _a === void 0 ? false : _a, dialogProps = __rest(props, ["title", "actions", "children", "onClose", "id", "disableBackdropClick", "disableContentWrap"]);
+    var title = props.title, actions = props.actions, children = props.children, onClose = props.onClose, closeButtonLabel = props.closeButtonLabel, idProp = props.id, disableBackdropClick = props.disableBackdropClick, _a = props.disableContentWrap, disableContentWrap = _a === void 0 ? false : _a, dialogProps = __rest(props, ["title", "actions", "children", "onClose", "closeButtonLabel", "id", "disableBackdropClick", "disableContentWrap"]);
     var id = (0, use_id_1.useId)(props.id);
     var titleId = !!title && !!id ? "".concat(id, "-title") : undefined;
     var handleClose = function (event, reason) {
@@ -83,7 +83,7 @@ exports.Dialog = React.forwardRef(function (props, ref) {
         }
     };
     return (React.createElement(Root, __assign({ PaperProps: { elevation: 4 } }, dialogProps, { id: id, ref: ref, onClose: onClose ? handleClose : undefined, "aria-labelledby": titleId }),
-        !!title && (React.createElement(dialog_title_1.DialogTitle, { id: titleId, onClose: onClose }, title)),
+        !!title && (React.createElement(dialog_title_1.DialogTitle, { id: titleId, onClose: onClose, closeButtonLabel: closeButtonLabel }, title)),
         disableContentWrap ? children : React.createElement(dialog_content_1.DialogContent, null, children),
         !!actions && React.createElement(dialog_actions_1.DialogActions, null, actions)));
 });

package/esm/accordion/accordion-details.js

@@ -11,6 +11,6 @@ export var AccordionDetails = styled(MuiAccordionDetails, {
         gridTemplateColumns: '40% repeat(4, 15%)',
         padding: "0px ".concat(theme.spacing(2)),
         borderBottom: "1px solid ".concat(theme.tokens.color_border_default),
-        height: theme.typography.pxToRem(72),
+        minHeight: theme.typography.pxToRem(72),
     };
 });

package/esm/alert/alert.js

@@ -189,6 +189,6 @@ export var Alert = React.forwardRef(function (props, ref) {
             !!title && React.createElement(AlertTitle, { className: classes.title }, title),
             React.createElement(AlertMessage, { className: classes.message }, message || children)),
         hasAction && (React.createElement(AlertAction, { className: classes.action }, action ||
-            (showCloseButton && (React.createElement(IconButton, { label: "close button", color: "inherit", size: "small", variant: "link", "aria-label": closeText, onClick: onClose },
+            (showCloseButton && (React.createElement(IconButton, { label: closeText, color: "inherit", size: "small", variant: "link", "aria-label": closeText, onClick: onClose },
                 React.createElement(XIcon, null))))))));
 });

package/esm/avatar-block/avatar-block.js

@@ -56,11 +56,12 @@ var titleVariantMap = {
     large: 'subtitle1',
 };
 export var AvatarBlock = React.forwardRef(function (props, ref) {
-    var avatar = props.avatar, title = props.title, description = props.description, titleTypographyProps = props.titleTypographyProps, descriptionTypographyProps = props.descriptionTypographyProps, _a = props.TitleBlockProps, TitleBlockProps = _a === void 0 ? {} : _a, className = props.className, _b = props.size, size = _b === void 0 ? 'medium' : _b, endAdornment = props.endAdornment, rootProps = __rest(props, ["avatar", "title", "description", "titleTypographyProps", "descriptionTypographyProps", "TitleBlockProps", "className", "size", "endAdornment"]);
+    var avatar = props.avatar, title = props.title, description = props.description, titleTypographyProps = props.titleTypographyProps, descriptionTypographyProps = props.descriptionTypographyProps, _a = props.TitleBlockProps, TitleBlockProps = _a === void 0 ? {} : _a, className = props.className, _b = props.size, size = _b === void 0 ? 'medium' : _b, endAdornment = props.endAdornment, _c = props.noWrap, noWrap = _c === void 0 ? false : _c, // Default to false
+    rootProps = __rest(props, ["avatar", "title", "description", "titleTypographyProps", "descriptionTypographyProps", "TitleBlockProps", "className", "size", "endAdornment", "noWrap"]);
     var classes = useMergedClasses(avatarBlockClasses, getAvatarBlockUtilityClass, props.classes);
     var titleVariant = titleVariantMap[size];
     return (React.createElement(Root, __assign({ ownerState: { description: description, size: size }, ref: ref, className: clsx(classes.root, className) }, rootProps),
         avatar && React.createElement(Avatar, { className: classes.avatar }, avatar),
-        React.createElement(TitleBlock, __assign({ className: classes.titleBlock, title: title, description: description, titleTypographyProps: __assign({ noWrap: true, component: 'p', variant: titleVariant }, titleTypographyProps), descriptionTypographyProps: descriptionTypographyProps, gutter: size === 'large' ? 0.5 : 0 }, TitleBlockProps, { sx: __assign({ flex: 1 }, TitleBlockProps.sx) })),
+        React.createElement(TitleBlock, __assign({ className: classes.titleBlock, title: title, description: description, titleTypographyProps: __assign({ component: 'p', variant: titleVariant, noWrap: noWrap, title: noWrap && typeof title === 'string' ? title : '' }, titleTypographyProps), descriptionTypographyProps: __assign({ noWrap: noWrap, title: noWrap && typeof description === 'string' ? description : '' }, descriptionTypographyProps), gutter: size === 'large' ? 0.5 : 0 }, TitleBlockProps, { sx: __assign({ flex: 1 }, TitleBlockProps.sx) })),
         !!endAdornment && React.createElement(EndAdornment, { className: classes.endAdornment }, endAdornment)));
 });

package/esm/button/button.js

@@ -49,10 +49,26 @@ var ButtonSpinner = styled(Spinner, {
 })({
     position: 'absolute',
 });
+var LabelSpan = styled('span')(function (_a) {
+    var maxWidth = _a.maxWidth;
+    return ({
+        display: 'inline-block',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap',
+        maxWidth: maxWidth || '100%', // Adjust as needed for non-fullWidth buttons
+    });
+});
 export var Button = React.forwardRef(function (_a, ref) {
-    var isLoading = _a.isLoading, label = _a.label, children = _a.children, disabled = _a.disabled, _b = _a.SpinnerProps, SpinnerProps = _b === void 0 ? {} : _b, _c = _a.color, color = _c === void 0 ? 'default' : _c, variant = _a.variant, rootProps = __rest(_a, ["isLoading", "label", "children", "disabled", "SpinnerProps", "color", "variant"]);
-    return (React.createElement(Root, __assign({}, rootProps, { disabled: disabled || isLoading, ownerState: { isLoading: isLoading }, color: color, variant: variant, ref: ref }),
-        label || children,
-        " ",
+    var isLoading = _a.isLoading, label = _a.label, children = _a.children, disabled = _a.disabled, _b = _a.SpinnerProps, SpinnerProps = _b === void 0 ? {} : _b, _c = _a.color, color = _c === void 0 ? 'default' : _c, variant = _a.variant, maxWidth = _a.maxWidth, rootProps = __rest(_a, ["isLoading", "label", "children", "disabled", "SpinnerProps", "color", "variant", "maxWidth"]);
+    var title = label ||
+        (typeof children === 'string'
+            ? children
+            : React.Children.toArray(children)
+                .filter(function (child) { return typeof child === 'string'; })
+                .join(''));
+    return (React.createElement(Root, __assign({}, rootProps, { disabled: disabled || isLoading, ownerState: { isLoading: isLoading }, color: color, variant: variant, ref: ref, title: String(title) }),
+        React.createElement(LabelSpan, { style: { maxWidth: rootProps.fullWidth ? 'none' : maxWidth || '100%' } }, label || children),
+        ' ',
         !!isLoading && React.createElement(ButtonSpinner, __assign({}, SpinnerProps))));
 });

package/esm/card/card-header/card-header.js

@@ -54,21 +54,35 @@ var titleVariantMap = {
 };
 export var CardHeader = React.forwardRef(function (props, ref) {
     var sizeContext = useCardContext().size;
-    var sizeProp = props.size, _a = props.titleTypographyProps, titleTypographyProps = _a === void 0 ? {} : _a, _b = props.subheaderTypographyProps, subheaderTypographyProps = _b === void 0 ? {} : _b, title = props.title, subheader = props.subheader, propClasses = props.classes, cardProps = __rest(props, ["size", "titleTypographyProps", "subheaderTypographyProps", "title", "subheader", "classes"]);
+    var sizeProp = props.size, _a = props.titleTypographyProps, titleTypographyProps = _a === void 0 ? {} : _a, _b = props.subheaderTypographyProps, subheaderTypographyProps = _b === void 0 ? {} : _b, title = props.title, subheader = props.subheader, _c = props.noWrap, noWrap = _c === void 0 ? false : _c, propClasses = props.classes, cardProps = __rest(props, ["size", "titleTypographyProps", "subheaderTypographyProps", "title", "subheader", "noWrap", "classes"]);
     var classes = useMergedClasses(cardHeaderClasses, getCardHeaderUtilityClass, propClasses);
     var size = sizeProp || sizeContext || defaultCardSize;
     var titleVariant = titleVariantMap[size];
+    var titleStyles = noWrap
+        ? {
+            whiteSpace: 'nowrap',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+        }
+        : {
+            whiteSpace: 'normal',
+            overflow: 'visible',
+            textOverflow: 'clip', // Don't apply ellipsis
+        }; // No additional styles when noWrap is false
+    var subheaderStyles = noWrap
+        ? {
+            whiteSpace: 'nowrap',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+        }
+        : {
+            whiteSpace: 'normal',
+            overflow: 'visible',
+            textOverflow: 'clip', // Don't apply ellipsis
+        };
     return (React.createElement(Root, __assign({ ref: ref, ownerState: { size: size }, classes: {
             action: classes.action,
             avatar: classes.avatar,
             content: classes.content,
-        }, title: React.createElement(Title, __assign({ variant: titleVariant, color: "textPrimary" }, { component: 'p' }, { role: "heading", display: "block" }, titleTypographyProps, { className: clsx(classes.title, titleTypographyProps.className), ownerState: { size: size }, noWrap: true, sx: {
-                whiteSpace: 'nowrap',
-                overflow: 'hidden',
-                textOverflow: 'ellipsis',
-            }, title: title }), title), subheader: subheader ? (React.createElement(Text, __assign({ variant: "body2", color: "textSecondary", component: "p", noWrap: true, sx: {
-                whiteSpace: 'nowrap',
-                overflow: 'hidden',
-                textOverflow: 'ellipsis',
-            }, title: subheader }, subheaderTypographyProps, { className: clsx(classes.subheader, subheaderTypographyProps.className) }), subheader)) : null }, cardProps, { disableTypography: true })));
+        }, title: React.createElement(Title, __assign({ variant: titleVariant, color: "textPrimary" }, { component: 'p' }, { role: "heading", display: "block" }, titleTypographyProps, { className: clsx(classes.title, titleTypographyProps.className), ownerState: { size: size }, noWrap: noWrap, sx: titleStyles, title: noWrap ? title : '' }), title), subheader: subheader ? (React.createElement(Text, __assign({ variant: "body2", color: "textSecondary", component: "p", noWrap: noWrap, sx: subheaderStyles, title: noWrap ? subheader : '' }, subheaderTypographyProps, { className: clsx(classes.subheader, subheaderTypographyProps.className) }), subheader)) : null }, cardProps, { disableTypography: true })));
 });

package/esm/chip/chip.js

@@ -56,5 +56,5 @@ var Root = styled(MuiChip, { name: chipComponentName, slot: 'Root' })(function (
 });
 export var Chip = React.forwardRef(function (props, ref) {
     var selected = props.selected, _a = props.deleteIcon, deleteIcon = _a === void 0 ? React.createElement(XIcon, null) : _a, chipProps = __rest(props, ["selected", "deleteIcon"]);
-    return React.createElement(Root, __assign({ ref: ref, deleteIcon: deleteIcon, ownerState: { selected: selected } }, chipProps));
+    return (React.createElement(Root, __assign({ ref: ref, deleteIcon: deleteIcon, ownerState: { selected: selected } }, chipProps, { title: props === null || props === void 0 ? void 0 : props.label })));
 });

package/esm/code/code.js

@@ -25,16 +25,17 @@ import { styled } from '../styled';
 import { Text } from '../text';
 export var CodeComponentName = 'QuantumCode';
 var Root = styled(Text, { name: CodeComponentName, slot: 'Root' })(function (_a) {
-    var theme = _a.theme;
+    var theme = _a.theme, noWrap = _a.noWrap;
     return ({
         display: 'inline',
         padding: theme.spacing(0.25, 0.75),
         color: theme.tokens.color_fg_default,
         backgroundColor: theme.tokens.color_bg_layer_alternate_bold,
         borderRadius: theme.shape.borderRadius,
+        whiteSpace: noWrap ? 'nowrap' : 'pre-wrap', // Conditionally apply white-space
     });
 });
 export var Code = React.forwardRef(function (props, ref) {
-    var children = props.children, _a = props.variant, variant = _a === void 0 ? 'code2' : _a, textProps = __rest(props, ["children", "variant"]);
-    return (React.createElement(Root, __assign({ ref: ref }, { component: 'span' }, { color: "textSecondary", variant: variant }, textProps), children));
+    var children = props.children, _a = props.variant, variant = _a === void 0 ? 'code2' : _a, _b = props.noWrap, noWrap = _b === void 0 ? true : _b, textProps = __rest(props, ["children", "variant", "noWrap"]);
+    return (React.createElement(Root, __assign({ ref: ref }, { component: 'span' }, { color: "textSecondary", variant: variant, noWrap: noWrap }, textProps), children));
 });