@auth0/quantum-product 2.4.8 → 2.4.10

package/panel/panel/panel.js

@@ -110,7 +110,7 @@ var CloseButton = (0, styled_1.styled)(icon_button_1.IconButton, {
     right: 24,
 });
 exports.Panel = React.forwardRef(function (props, ref) {
-    var title = props.title, isOpen = props.isOpen, _a = props.placement, placement = _a === void 0 ? 'end' : _a, _b = props.variant, variant = _b === void 0 ? 'permanent' : _b, _c = props.size, size = _c === void 0 ? 'medium' : _c, onClose = props.onClose, className = props.className, propClasses = props.classes, isFixed = props.isFixed, propOffsetTop = props.offsetTop, children = props.children, _d = props.closeIconButtonProps, closeIconButtonProps = _d === void 0 ? {} : _d, _e = props.PanelHeaderProps, PanelHeaderProps = _e === void 0 ? {} : _e, rootProps = __rest(props, ["title", "isOpen", "placement", "variant", "size", "onClose", "className", "classes", "isFixed", "offsetTop", "children", "closeIconButtonProps", "PanelHeaderProps"]);
+    var title = props.title, isOpen = props.isOpen, _a = props.placement, placement = _a === void 0 ? 'end' : _a, _b = props.variant, variant = _b === void 0 ? 'permanent' : _b, _c = props.size, size = _c === void 0 ? 'medium' : _c, onClose = props.onClose, closeButtonLabel = props.closeButtonLabel, className = props.className, propClasses = props.classes, isFixed = props.isFixed, propOffsetTop = props.offsetTop, children = props.children, _d = props.closeIconButtonProps, closeIconButtonProps = _d === void 0 ? {} : _d, _e = props.PanelHeaderProps, PanelHeaderProps = _e === void 0 ? {} : _e, rootProps = __rest(props, ["title", "isOpen", "placement", "variant", "size", "onClose", "closeButtonLabel", "className", "classes", "isFixed", "offsetTop", "children", "closeIconButtonProps", "PanelHeaderProps"]);
     var classes = (0, classes_1.useMergedClasses)(panel_classes_1.panelClasses, panel_classes_1.getPanelUtilityClass, propClasses);
     var offsetTop = propOffsetTop != null ? propOffsetTop : isFixed ? 'appbar' : 0;
     var ownerState = {
@@ -125,7 +125,7 @@ exports.Panel = React.forwardRef(function (props, ref) {
     return (React.createElement(Root, __assign({ ref: ref, ownerState: ownerState, className: (0, utils_1.clsx)(classes.root, classes["size".concat((0, utils_1.capitalize)(size))], classes["variant".concat((0, utils_1.capitalize)(variant))], classes["placement".concat((0, utils_1.capitalize)(placement))], isFixed && classes.fixed, isOpen && classes.open, className) }, rootProps),
         React.createElement(panel_context_1.PanelContext.Provider, { value: __assign(__assign({}, ownerState), { isCloseButtonVisible: showCloseButton }) },
             React.createElement(Content, { className: classes.content, ownerState: ownerState },
-                showCloseButton && (React.createElement(CloseButton, __assign({ label: "close", className: classes.closeButton, onClick: function (e) { return onClose(e, 'closeButtonClick'); }, variant: "outlined", size: "small", shape: "circular" }, closeIconButtonProps),
+                showCloseButton && (React.createElement(CloseButton, __assign({ label: closeButtonLabel || 'close', className: classes.closeButton, onClick: function (e) { return onClose(e, 'closeButtonClick'); }, variant: "outlined", size: "small", shape: "circular" }, closeIconButtonProps),
                     React.createElement(icon_1.XIcon, null))),
                 !!title && React.createElement(panel_header_1.PanelHeader, __assign({ title: title }, PanelHeaderProps)),
                 children))));

package/panel/panel-header/panel-header.d.ts

@@ -10,6 +10,7 @@ export type IPanelHeaderProps = IStyledComponentProps<{
         titleTextProps?: Partial<ITextProps>;
         endAdornment?: React.ReactNode;
         classes?: Partial<PanelHeaderClasses>;
+        titleNoWrap?: boolean;
     };
     defaultComponent: 'div';
 }>;
@@ -19,4 +20,5 @@ export declare const PanelHeader: React.ForwardRefExoticComponent<{
     titleTextProps?: Partial<ITextProps<"span">> | undefined;
     endAdornment?: React.ReactNode;
     classes?: Partial<Record<"title" | "content" | "root" | "endAdornment", string>> | undefined;
-} & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "title" | "ref" | "classes" | "endAdornment" | "titleComponent" | "titleTextProps"> & import("../../styled").IStyledCommonProps & React.RefAttributes<HTMLDivElement>>;
+    titleNoWrap?: boolean | undefined;
+} & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "title" | "ref" | "classes" | "endAdornment" | "titleComponent" | "titleTextProps" | "titleNoWrap"> & import("../../styled").IStyledCommonProps & React.RefAttributes<HTMLDivElement>>;

package/panel/panel-header/panel-header.js

@@ -77,11 +77,22 @@ var EndAdornment = (0, styled_1.styled)('div')(function (_a) {
     });
 });
 exports.PanelHeader = React.forwardRef(function (props, ref) {
-    var title = props.title, className = props.className, propClasses = props.classes, endAdornment = props.endAdornment, titleTextProps = props.titleTextProps, titleComponent = props.titleComponent, rootProps = __rest(props, ["title", "className", "classes", "endAdornment", "titleTextProps", "titleComponent"]);
+    var title = props.title, className = props.className, propClasses = props.classes, endAdornment = props.endAdornment, titleTextProps = props.titleTextProps, titleComponent = props.titleComponent, titleNoWrap = props.titleNoWrap, rootProps = __rest(props, ["title", "className", "classes", "endAdornment", "titleTextProps", "titleComponent", "titleNoWrap"]);
     var classes = (0, classes_1.useMergedClasses)(panel_header_classes_1.panelHeaderClasses, panel_header_classes_1.getPanelHeaderUtilityClass, propClasses);
     var panelContext = (0, panel_context_1.usePanelContext)();
+    var textStyles = titleNoWrap
+        ? {
+            whiteSpace: 'nowrap',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+        }
+        : {
+            whiteSpace: 'normal',
+            overflow: 'visible',
+            textOverflow: 'clip', // Don't apply ellipsis
+        };
     return (React.createElement(Root, __assign({ className: (0, utils_1.clsx)(classes.root, className), ownerState: { isCloseButtonVisible: panelContext.isCloseButtonVisible }, ref: ref }, rootProps),
-        React.createElement(Content, { className: classes.content },
-            React.createElement(text_1.Text, __assign({ className: classes.title, component: titleComponent, variant: "h5" }, titleTextProps), title)),
+        React.createElement(Content, { className: classes.content, sx: textStyles },
+            React.createElement(text_1.Text, __assign({ className: classes.title, component: titleComponent, variant: "h5" }, titleTextProps, { title: titleNoWrap ? title : '', sx: textStyles }), title)),
         !!endAdornment && React.createElement(EndAdornment, { className: classes.endAdornment }, endAdornment)));
 });

package/selectable-card/selectable-card.d.ts

@@ -49,6 +49,14 @@ export interface ISelectableCardProps extends Omit<ICardProps, SelectableControl
      * value. Mainly used for radio control type
      */
     value?: string;
+    /**
+     * 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;
 }
 export declare const SelectableCard: React.ForwardRefExoticComponent<ISelectableCardProps & React.RefAttributes<HTMLLabelElement>>;
 export {};

package/selectable-card/selectable-card.js

@@ -78,9 +78,12 @@ var ControlRadio = createControl(radio_1.Radio, 'ControlRadio');
 var ControlCheckbox = createControl(checkbox_1.Checkbox, 'ControlCheckbox');
 var Content = (0, styled_1.styled)('div', { name: selectable_card_classes_1.selectableCardComponentName, slot: 'Content' })({
     flex: 1,
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
 });
 exports.SelectableCard = React.forwardRef(function (props, ref) {
-    var avatar = props.avatar, label = props.label, propTitle = props.title, propDescription = props.description, helperText = props.helperText, value = props.value, disabled = props.disabled, name = props.name, onChange = props.onChange, checkedProp = props.checked, RadioProps = props.RadioProps, CheckboxProps = props.CheckboxProps, _a = props.controlPlacement, controlPlacement = _a === void 0 ? 'start' : _a, _b = props.size, size = _b === void 0 ? 'medium' : _b, type = props.type, _c = props.hideControl, hideControl = _c === void 0 ? false : _c, children = props.children, className = props.className, propClasses = props.classes, rootProps = __rest(props, ["avatar", "label", "title", "description", "helperText", "value", "disabled", "name", "onChange", "checked", "RadioProps", "CheckboxProps", "controlPlacement", "size", "type", "hideControl", "children", "className", "classes"]);
+    var avatar = props.avatar, label = props.label, propTitle = props.title, propDescription = props.description, helperText = props.helperText, value = props.value, disabled = props.disabled, name = props.name, onChange = props.onChange, checkedProp = props.checked, RadioProps = props.RadioProps, CheckboxProps = props.CheckboxProps, _a = props.controlPlacement, controlPlacement = _a === void 0 ? 'start' : _a, _b = props.size, size = _b === void 0 ? 'medium' : _b, type = props.type, _c = props.hideControl, hideControl = _c === void 0 ? false : _c, children = props.children, className = props.className, _d = props.noWrap, noWrap = _d === void 0 ? false : _d, propClasses = props.classes, rootProps = __rest(props, ["avatar", "label", "title", "description", "helperText", "value", "disabled", "name", "onChange", "checked", "RadioProps", "CheckboxProps", "controlPlacement", "size", "type", "hideControl", "children", "className", "noWrap", "classes"]);
     var inputRef = React.createRef();
     var radioGroup = (0, radio_1.useRadioGroup)();
     var classes = (0, classes_1.useMergedClasses)(selectable_card_classes_1.selectableCardClasses, selectable_card_classes_1.getSelectableCardUtilityClass, propClasses);
@@ -90,7 +93,7 @@ exports.SelectableCard = React.forwardRef(function (props, ref) {
     if (radioGroup && checked == null) {
         checked = radioGroup.value === value;
     }
-    var content = children || React.createElement(card_1.CardHeader, { avatar: avatar, title: title, subheader: description });
+    var content = children || React.createElement(card_1.CardHeader, { avatar: avatar, title: title, subheader: description, noWrap: noWrap });
     var Control = type === 'radio' ? ControlRadio : ControlCheckbox;
     var control = (React.createElement(Control, __assign({ value: value, inputRef: inputRef, onChange: onChange, disabled: disabled, className: type === 'radio' ? classes.controlRadio : classes.controlCheckbox, ownerState: { hidden: hideControl }, checked: checked }, (type === 'radio' ? RadioProps : CheckboxProps))));
     return (React.createElement(Root, __assign({}, { ref: ref }, { size: size, selected: checked, disabled: disabled, button: true, className: (0, clsx_1.default)(classes.root, className), component: "label" }, rootProps),

package/text/text.js

@@ -115,8 +115,8 @@ var getComponentForVariant = function (_a) {
     return exports.textVariantMapping[variant];
 };
 exports.Text = React.forwardRef(function (props, ref) {
-    var variant = props.variant, propClasses = props.classes, propComponent = props.component, className = props.className, rootProps = __rest(props, ["variant", "classes", "component", "className"]);
+    var variant = props.variant, propClasses = props.classes, propComponent = props.component, className = props.className, sx = props.sx, rootProps = __rest(props, ["variant", "classes", "component", "className", "sx"]);
     var classes = useUtilityClasses(variant, propClasses);
     var component = propComponent || getComponentForVariant({ variant: variant });
-    return (React.createElement(Root, __assign({ ref: ref, variant: variant, className: (0, clsx_1.default)([classes.root, className]) }, { component: component }, rootProps)));
+    return (React.createElement(Root, __assign({ ref: ref, variant: variant, className: (0, clsx_1.default)([classes.root, className]) }, { component: component }, { sx: sx }, rootProps)));
 });

package/title-block/title-block.js

@@ -57,6 +57,6 @@ var title_block_classes_1 = require("./title-block-classes");
 exports.TitleBlock = React.forwardRef(function (_a, ref) {
     var title = _a.title, _b = _a.titleTypographyProps, titleTypographyProps = _b === void 0 ? {} : _b, description = _a.description, _c = _a.descriptionTypographyProps, descriptionTypographyProps = _c === void 0 ? {} : _c, className = _a.className, rootProps = __rest(_a, ["title", "titleTypographyProps", "description", "descriptionTypographyProps", "className"]);
     return (React.createElement(row_layout_1.RowLayout, __assign({ gutter: 0, className: (0, clsx_1.default)(title_block_classes_1.titleBlockClasses.root, className) }, rootProps, { ref: ref }),
-        React.createElement(text_1.Text, __assign({ className: title_block_classes_1.titleBlockClasses.title, variant: "subtitle2", color: "inherit" }, titleTypographyProps, { title: title }), title),
-        !!description && (React.createElement(text_1.Text, __assign({ variant: "body2", color: "textSecondary", className: title_block_classes_1.titleBlockClasses.description }, descriptionTypographyProps, { title: description }), description))));
+        React.createElement(text_1.Text, __assign({ className: title_block_classes_1.titleBlockClasses.title, variant: "subtitle2", color: "inherit" }, titleTypographyProps, { title: (titleTypographyProps === null || titleTypographyProps === void 0 ? void 0 : titleTypographyProps.noWrap) && typeof title === 'string' ? title : '' }), title),
+        !!description && (React.createElement(text_1.Text, __assign({ variant: "body2", color: "textSecondary", className: title_block_classes_1.titleBlockClasses.description }, descriptionTypographyProps, { title: (descriptionTypographyProps === null || descriptionTypographyProps === void 0 ? void 0 : descriptionTypographyProps.noWrap) && typeof title === 'string' ? description : '' }), description))));
 });