@digital-ai/dot-components 5.12.1 → 6.0.0

package/index.esm.js

@@ -162,7 +162,6 @@ const DotTypography = ({
   children,
   component,
   hasShimmer,
-  noMarginBottom,
   noWrap,
   variant
 }) => {
@@ -171,9 +170,6 @@ const DotTypography = ({
     if (ariaRole === 'heading' && !ariaLevel) {
       console.warn('please include ariaLevel when using ariaRole="heading"');
     }
-    if (noMarginBottom) {
-      console.warn('DEPRECATED: `noMarginBottom` on `DotTypography` is no longer included');
-    }
   }, []);
   return jsx(StyledTypography, {
     "aria-label": ariaLabel,
@@ -185,9 +181,6 @@ const DotTypography = ({
     "data-testid": dataTestId,
     noWrap: noWrap,
     role: ariaRole,
-    style: {
-      marginBottom: noMarginBottom ? 0 : undefined
-    },
     variant: variant,
     children: children
   });
@@ -3241,10 +3234,6 @@ const DotLink = ({
     if (!isString$2(children) && !ariaLabel) {
       console.warn(`a11y: Consider adding an 'ariaLabel' to 'DotLink' when used without text`);
     }
-    // Include a console warning if the color value is set to initial
-    if (color === 'initial') {
-      console.warn(`deprecated: initial color value is deprecated and inherit will be used instead`);
-    }
   }, []);
   const handleKeyPress = event => {
     if (onClick && event.key === 'Enter') {
@@ -3259,12 +3248,12 @@ const DotLink = ({
       classes: {
         root: rootClasses
       },
-      color: color === 'initial' ? 'inherit' : color,
+      color: color,
       "data-pendoid": dataPendoId,
       "data-testid": dataTestId,
       href: href,
       onClick: onClick,
-      onKeyPress: handleKeyPress,
+      onKeyDown: handleKeyPress,
       onMouseEnter: onMouseEnter,
       onPointerDown: onPointerDown,
       rel: rel,
@@ -4983,7 +4972,6 @@ const DotCopyButton = ({
   className,
   color = 'inherit',
   copiedTooltip = 'Copied!',
-  copyTooltip = 'Copy to clipboard',
   'data-pendoid': dataPendoId = rootClassName$1a,
   'data-testid': dataTestId = 'dot-copy-button',
   disableInteractive,
@@ -5000,10 +4988,6 @@ const DotCopyButton = ({
 }) => {
   const [timedShowCopiedIcon, setTimedShowCopiedIcon] = useState(false);
   const [timedDisabled, setTimedDisabled] = useState(false);
-  // To keep backward compatibility if tooltip is not set, use copyTooltip
-  if (!tooltip) {
-    tooltip = copyTooltip;
-  }
   const copyToClipboard = useCallback(() => {
     // The check for navigator.clipboard.writeText is because this function is
     // only supported in secure contexts (https). This will always be the case in
@@ -5491,7 +5475,7 @@ const createMenuItem = (url, title, subtitle, onClick) => jsxs("div", {
       })]
     })
   }), jsx(DotCopyButton, {
-    copyTooltip: "Copy application URL",
+    tooltip: "Copy application URL",
     value: url
   })]
 }, `app-menu-item-${title}`);
@@ -8306,7 +8290,7 @@ const StyledToggleButtonGroup = styled(ToggleButtonGroup)`
           margin-left: 0;
         }
 
-        .MuiBadge-badge {
+        .MuiBadge-badge:not(.MuiBadge-invisible) {
           position: static;
           transform: none;
         }
@@ -8409,9 +8393,23 @@ const DotButtonToggle = ({
   value
 }) => {
   const rootClasses = useStylesWithRootClass(rootClassName$$, className);
+  const checkIfValidBadge = badge => {
+    const {
+      variant,
+      badgeContent
+    } = badge;
+    return variant === 'standard' && !isNaN(badgeContent) || variant === 'dot';
+  };
+  const renderBadge = (badge, textTypography) => {
+    return jsx(DotBadge, Object.assign({}, badge, {
+      className: useStylesWithRootClass('toggle-button-badge', badge.className),
+      "data-testid": dataTestId && `${dataTestId}-badge`,
+      children: textTypography
+    }));
+  };
   const renderToggleButton = ({
     ariaLabel: optionAriaLabel,
-    badgeContent: optionBadgeContent,
+    badge: optionBadge,
     className: optionClassName,
     disabled: optionDisabled,
     iconId: optionIconId,
@@ -8439,23 +8437,21 @@ const DotButtonToggle = ({
           children: optionText
         })]
       });
-      return optionBadgeContent && !isNaN(optionBadgeContent) && optionBadgeContent > 0 && optionText ? jsx(DotBadge, {
-        "data-testid": dataTestId && `${dataTestId}-badge`,
-        className: "toggle-button-badge",
-        badgeContent: optionBadgeContent,
-        variant: "standard",
-        children: optionTextTypography
-      }) : optionTextTypography;
+      return optionBadge && checkIfValidBadge(optionBadge) ? renderBadge(optionBadge, optionTextTypography) : optionTextTypography;
     };
     const children = getChildren();
-    return optionTooltip ? jsx(TooltipToggleButton, Object.assign({}, commonProps, {
+    const {
+        key: commonPropsKey
+      } = commonProps,
+      commonPropsWithoutKey = __rest(commonProps, ["key"]);
+    return optionTooltip ? createElement(TooltipToggleButton, Object.assign({}, commonPropsWithoutKey, {
+      key: commonPropsKey,
       CustomTooltipProps: {
         title: optionTooltip,
         disableInteractive: optionDisableInteractive
       },
-      value: optionValue,
-      children: children
-    })) : jsx(ToggleButton, Object.assign({}, commonProps, {
+      value: optionValue
+    }), children) : jsx(ToggleButton, Object.assign({}, commonProps, {
       role: "button",
       children: children
     }));
@@ -11563,7 +11559,6 @@ const DotSnackbar = ({
         children: jsxs("div", {
           children: [jsx(DotTypography, {
             variant: "subtitle2",
-            noMarginBottom: false,
             children: getSnackbarTitleFromSeverity(severity)
           }), isString$2(children) ? jsx(DotTypography, {
             ariaLabel: severity,
@@ -14867,7 +14862,6 @@ const DotSwitch = ({
   ariaLabel,
   checked,
   className,
-  color,
   'data-pendoid': dataPendoId = rootClassName$C,
   'data-testid': dataTestId,
   disabled = false,
@@ -14882,11 +14876,6 @@ const DotSwitch = ({
   const handleChange = event => {
     onChange && onChange(event);
   };
-  useEffect(() => {
-    if (color) {
-      console.warn('DEPRECATED: `color` prop is deprecated, please remove any usage of it in your application.');
-    }
-  }, []);
   // Future version of MUI v6 will have proper role="switch" instead of role="checkbox"
   // https://github.com/mui/material-ui/pull/17870
   const switchControl = jsx(StyledSwitch, {
@@ -17512,16 +17501,13 @@ const DotBodyCell = ({
           onClick: () => onActionMenuTrigger(wrapperRef.current, value),
           size: "small"
         }) : value.map(item => {
-          if (item.onclick) {
-            console.warn('The onclick property is deprecated, please use onClick instead');
-          }
           return jsx(DotIconButton, {
             className: "dot-table-action-icon",
             "data-testid": item.dataTestId,
             disabled: item.disabled,
             iconId: item.iconId,
             iconSize: "small",
-            onClick: item.onClick || item.onclick,
+            onClick: item.onClick,
             size: "small",
             tooltip: item.tooltip
           }, `${cellKey}-icon-${CreateUUID()}`);
@@ -18753,7 +18739,6 @@ const StyledTabs = styled(Tabs)`
 const DotTabs = ({
   centered = false,
   className,
-  color,
   'data-pendoid': dataPendoId = rootClassName$l,
   'data-testid': dataTestId,
   initialValue = 0,
@@ -18764,11 +18749,6 @@ const DotTabs = ({
 }) => {
   const [value, setValue] = useState(initialValue);
   const rootClasses = useStylesWithRootClass(rootClassName$l, className);
-  useEffect(() => {
-    if (color) {
-      console.warn('DEPRECATED: `color` prop is deprecated in `<DotTabs>`, please remove any usage of it in your application.');
-    }
-  }, []);
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const handleChange = (_event, val) => {
     setValue(val);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digital-ai/dot-components",
-  "version": "5.12.1",
+  "version": "6.0.0",
   "private": false,
   "license": "SEE LICENSE IN <LICENSE.md>",
   "contributors": [

package/src/lib/components/analytics/dashboard-actions/DashboardPublishConfirm.styles.d.ts

@@ -1,5 +1,5 @@
 export declare const dashboardCategoriesContainerClassName = "dashboard-categories-container";
-export declare const InlineMessage: import("styled-components").StyledComponent<({ ai, ariaLabel, ariaLevel, ariaRole, className, "data-testid": dataTestId, children, component, hasShimmer, noMarginBottom, noWrap, variant, }: import("../../typography/Typography").TypographyProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;
+export declare const InlineMessage: import("styled-components").StyledComponent<({ ai, ariaLabel, ariaLevel, ariaRole, className, "data-testid": dataTestId, children, component, hasShimmer, noWrap, variant, }: import("../../typography/Typography").TypographyProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;
 export declare const StyledPublishConfirmDiv: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const StyledAppSelectDiv: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const StyledAppSelectDotAutoComplete: import("styled-components").StyledComponent<(<T extends import("../..").AutoCompleteOption>({ ListboxComponent, additionalLabelContent, actionItem, ai, aiAction, ariaLabel, autoFocus, autoHighlight, className, "data-pendoid": dataPendoId, "data-testid": dataTestId, defaultValue, dense, disableCloseOnSelect, disabled, disablePortal, endAdornmentTooltip, error, filterOptions, filterSelectedOptions, freesolo, checkIfOptionDisabled, group, helperText, informationToolTip, inputId, inputRef, inputValue, isOptionEqualToValue, label, loading, maxHeight, multiple, onBlur, onChange, onClose, onInputChange, onOpen, open, options, persistentLabel, placeholder, popperClassName, popperPlacement, popperZIndex, preserveGroupOrder, readOnly, renderGroup, renderOption, renderTags, required, size, trimLongOptions, value, warning, }: import("../../auto-complete/AutoComplete").AutoCompleteProps<T>) => import("react/jsx-runtime").JSX.Element), any, {}, never>;

package/src/lib/components/avatar-group/AvatarGroup.styles.d.ts

@@ -2,5 +2,5 @@ import { AvatarGroup } from '@mui/material';
 export declare const rootClassName = "dot-avatar-group";
 export declare const StyledAvatarGroup: import("styled-components").StyledComponent<typeof AvatarGroup, any, {}, never>;
 export declare const StyledDotTooltip: import("styled-components").StyledComponent<({ ariaLabel, ariaRole, arrow, children, className, "data-testid": dataTestId, disablePortal, disableInteractive, followCursor, enterDelay, enterNextDelay, hoverVisibility, leaveDelay, onClose, open, placement, popperClassName, popperOptions, slotProps, title, childrenDisplayStyle, }: import("../tooltip").TooltipProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;
-export declare const StyledDotTypography: import("styled-components").StyledComponent<({ ai, ariaLabel, ariaLevel, ariaRole, className, "data-testid": dataTestId, children, component, hasShimmer, noMarginBottom, noWrap, variant, }: import("../typography/Typography").TypographyProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;
+export declare const StyledDotTypography: import("styled-components").StyledComponent<({ ai, ariaLabel, ariaLevel, ariaRole, className, "data-testid": dataTestId, children, component, hasShimmer, noWrap, variant, }: import("../typography/Typography").TypographyProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;
 export declare const StyledExtraAvatarSpan: import("styled-components").StyledComponent<"span", any, {}, never>;

package/src/lib/components/button/CopyButton.d.ts

@@ -2,13 +2,11 @@ import { CommonIconButtonProps } from './IconButton';
 export interface CopyButtonProps extends CommonIconButtonProps {
     /** Tooltip shown briefly after the value has been copied. */
     copiedTooltip?: string;
-    /** DEPRECATED Use tooltip instead */
-    copyTooltip?: string;
     /** The icon to display on the button, defaults to 'duplicate' */
     iconId?: string;
-    /** By default a check icon will briefly display after the content is copied */
+    /** By default, a check icon will briefly display after the content is copied */
     showCopiedIcon?: boolean;
     /** The content which will be copied to the clipboard */
     value: string;
 }
-export declare const DotCopyButton: ({ ariaLabel, ariaRole, className, color, copiedTooltip, copyTooltip, "data-pendoid": dataPendoId, "data-testid": dataTestId, disableInteractive, disabled, disableRipple, iconId, iconSize, onClick, shape, showCopiedIcon, size, tooltip, value, }: CopyButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DotCopyButton: ({ ariaLabel, ariaRole, className, color, copiedTooltip, "data-pendoid": dataPendoId, "data-testid": dataTestId, disableInteractive, disabled, disableRipple, iconId, iconSize, onClick, shape, showCopiedIcon, size, tooltip, value, }: CopyButtonProps) => import("react/jsx-runtime").JSX.Element;

package/src/lib/components/button-toggle/index.d.ts

@@ -1,3 +1,3 @@
-export type { ButtonToggleOrientation, ButtonToggleOption, ButtonToggleSingleValue, ButtonToggleSize, ButtonToggleValue, } from './utils/models';
+export type { ButtonToggleBadge, ButtonToggleOrientation, ButtonToggleOption, ButtonToggleSingleValue, ButtonToggleSize, ButtonToggleValue, } from './utils/models';
 export type { ButtonToggleProps } from './ButtonToggle';
 export { DotButtonToggle } from './ButtonToggle';

package/src/lib/components/button-toggle/utils/models.d.ts

@@ -1,12 +1,14 @@
 import { ReactNode } from 'react';
 import { CommonProps } from '../../CommonProps';
+import { BadgeProps } from '../../badge';
 export type ButtonToggleSingleValue = string | number | boolean;
 export type ButtonToggleSize = 'small' | 'medium' | 'large';
 export type ButtonToggleOrientation = 'horizontal' | 'vertical';
 export type ButtonToggleValue = ButtonToggleSingleValue | Array<ButtonToggleSingleValue>;
+export type ButtonToggleBadge = Omit<BadgeProps, 'children' | 'data-testid' | 'overlap'>;
 export interface ButtonToggleOption extends CommonProps {
     ariaLabel: string;
-    badgeContent?: number;
+    badge?: ButtonToggleBadge;
     disableInteractive?: boolean;
     disabled?: boolean;
     iconId?: string;

package/src/lib/components/index.d.ts

@@ -8,7 +8,7 @@ export type { AvatarProps } from './avatar/Avatar';
 export type { AvatarTitleProps, AvatarWithDetailsProps, } from './avatar-with-details/AvatarWithDetails';
 export type { BreadcrumbItem } from './breadcrumbs/Breadcrumbs';
 export type { ButtonProps, CopyButtonProps, IconButtonProps, IconButtonColor, IconButtonSize, } from './button';
-export type { ButtonToggleProps, ButtonToggleValue, ButtonToggleOption, ButtonToggleOrientation, ButtonToggleSingleValue, ButtonToggleSize, } from './button-toggle';
+export type { ButtonToggleBadge, ButtonToggleProps, ButtonToggleValue, ButtonToggleOption, ButtonToggleOrientation, ButtonToggleSingleValue, ButtonToggleSize, } from './button-toggle';
 export type { CheckboxProps } from './checkbox/Checkbox';
 export type { CheckboxGroupProps } from './checkbox/CheckboxGroup';
 export type { DialogButtonProps, SubmitButtonProps } from './dialog/Dialog';
@@ -26,7 +26,7 @@ export type { RailItem, RailItemsPosition } from './navigation-rail';
 export type { RadioButtonProps } from './radio/RadioButton';
 export type { RadioGroupProps } from './radio/RadioGroup';
 export type { BackItemProps, SidebarProps } from './sidebar/Sidebar';
-export type { SwitchProps, SwitchColor, SwitchSize, SwitchLabelPlacement, } from './switch';
+export type { SwitchProps, SwitchSize, SwitchLabelPlacement } from './switch';
 export type { CollapsibleTableOptions } from './table/collapsible-table';
 export type { DotColumnHeader, MultiSelect, Order, RowSelectionChangeHandler, RowsPerPageOption, TableActionProps, TableActionsProps, TableDataWithPagination, TableRowProps, TableRowSelectChangeHandler, TextAlignment, SortDirection, } from './table';
 export type { TabProps } from './tabs/Tabs';

package/src/lib/components/link/Link.d.ts

@@ -1,7 +1,7 @@
 import { KeyboardEvent, MouseEvent, PointerEvent, ReactNode } from 'react';
 import { CommonProps } from '../CommonProps';
 import { TypographyVariant } from '../typography/Typography';
-export type LinkColor = 'initial' | 'inherit' | 'primary' | 'secondary' | 'textPrimary' | 'textSecondary' | 'error';
+export type LinkColor = 'inherit' | 'primary' | 'secondary' | 'textPrimary' | 'textSecondary' | 'error';
 export type LinkUnderline = 'always' | 'hover' | 'none';
 export type LinkTarget = '_blank' | '_self';
 export interface LinkProps extends CommonProps {

package/src/lib/components/switch/Switch.d.ts

@@ -1,13 +1,10 @@
 import { ChangeEvent, Ref } from 'react';
 import { CommonProps } from '../CommonProps';
-export type SwitchColor = 'default' | 'primary' | 'secondary';
 export type SwitchSize = 'medium' | 'small';
 export type SwitchLabelPlacement = 'bottom' | 'end' | 'start' | 'top';
 export interface SwitchProps extends CommonProps {
     /** determines the default state of the switch */
     checked?: boolean;
-    /** DEPRECATED: this will be removed in an upcoming release */
-    color?: SwitchColor;
     /** if true makes the switch disabled */
     disabled?: boolean;
     /** id to identify the element */
@@ -23,4 +20,4 @@ export interface SwitchProps extends CommonProps {
     /** controls the size of the switch 'medium', 'small' */
     size?: SwitchSize;
 }
-export declare const DotSwitch: ({ ariaLabel, checked, className, color, "data-pendoid": dataPendoId, "data-testid": dataTestId, disabled, id, inputRef, label, labelPlacement, onChange, size, }: SwitchProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DotSwitch: ({ ariaLabel, checked, className, "data-pendoid": dataPendoId, "data-testid": dataTestId, disabled, id, inputRef, label, labelPlacement, onChange, size, }: SwitchProps) => import("react/jsx-runtime").JSX.Element;

package/src/lib/components/switch/index.d.ts

@@ -1,2 +1,2 @@
-export type { SwitchProps, SwitchColor, SwitchSize, SwitchLabelPlacement, } from './Switch';
+export type { SwitchProps, SwitchSize, SwitchLabelPlacement } from './Switch';
 export { DotSwitch } from './Switch';

package/src/lib/components/tabs/Tabs.d.ts

@@ -1,5 +1,4 @@
 import { CommonProps } from '../CommonProps';
-export type TabsColor = 'primary' | 'secondary';
 export type TabsScrollButtons = 'auto' | boolean;
 export type TabsVariant = 'fullWidth' | 'scrollable' | 'standard';
 export interface TabProps extends CommonProps {
@@ -15,8 +14,6 @@ export interface TabProps extends CommonProps {
 export interface TabsProps extends CommonProps {
     /** Center the tabs */
     centered?: boolean;
-    /** DEPRECATED: this will be removed in an upcoming release */
-    color?: TabsColor;
     /** The value of the initially selected tab */
     initialValue?: any;
     /** Tab change callback */
@@ -28,4 +25,4 @@ export interface TabsProps extends CommonProps {
     /** Determines additional display behavior of the tabs */
     variant?: TabsVariant;
 }
-export declare const DotTabs: ({ centered, className, color, "data-pendoid": dataPendoId, "data-testid": dataTestId, initialValue, onChange, scrollButtons, tabs, variant, }: TabsProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DotTabs: ({ centered, className, "data-pendoid": dataPendoId, "data-testid": dataTestId, initialValue, onChange, scrollButtons, tabs, variant, }: TabsProps) => import("react/jsx-runtime").JSX.Element;

package/src/lib/components/typography/Typography.d.ts

@@ -12,11 +12,9 @@ export interface TypographyProps extends CommonProps {
     component?: ElementType;
     /** If true, applies the shimmer styles. */
     hasShimmer?: boolean;
-    /** DEPRECATED: If true, the typography will not have a bottom margin set */
-    noMarginBottom?: boolean;
     /** If true, the text will wrap and not be truncated */
     noWrap?: boolean;
     /** Applies the theme typography styles. */
     variant?: TypographyVariant;
 }
-export declare const DotTypography: ({ ai, ariaLabel, ariaLevel, ariaRole, className, "data-testid": dataTestId, children, component, hasShimmer, noMarginBottom, noWrap, variant, }: TypographyProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DotTypography: ({ ai, ariaLabel, ariaLevel, ariaRole, className, "data-testid": dataTestId, children, component, hasShimmer, noWrap, variant, }: TypographyProps) => import("react/jsx-runtime").JSX.Element;