@devopness/ui-react 2.153.1 → 2.154.0

package/dist/src/components/Buttons/Button/Button.d.ts

@@ -2,20 +2,10 @@ import { ButtonHTMLAttributes } from 'react';
 import { getColor } from '../../../colors';
 import { Icon } from '../../../icons';
 type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
-    /**
-     * By default the button component is 34px high, the "typeSize" property contains
-     * the "medium" variation that changes to 27px
-     */
-    typeSize?: 'default' | 'medium' | 'auto';
-    /** Icon name */
-    icon?: Icon;
-    /** Enable button loading animation */
-    loading?: boolean;
-    /**
-     * With the property "revertOrientation" it is possible to change the positioning of
-     * the elements inside the button as "icon" or "loading"
-     */
-    revertOrientation?: boolean;
+    /** Customize background color */
+    backgroundColor?: string;
+    /** Customize border color */
+    borderColor?: string;
     /** Predefined style variations for the button */
     buttonType?: 'borderless' | 'outlinedSecondary' | 'outlinedAuxiliary' | 'Default';
     /** `Warning`: This property overrides the style defined by the `buttonType` property!
@@ -23,42 +13,46 @@ type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
      * Customize elements color
      */
     color?: string;
-    /** `Warning`: This property overrides the style defined by the `buttonType` property!
-     *
-     * Customize background color
+    /** Icon name */
+    icon?: Icon;
+    /**
+     * By default the icon color is primary, use this prop to customize "iconColor"
      */
-    backgroundColor?: string;
-    /** `Warning`: This property overrides the style defined by the `buttonType` property!
-     *
-     * Customize border color
+    iconColor?: ReturnType<typeof getColor>;
+    /**
+     * By default the icon component is 16px high, use this prop to customize "iconSize"
      */
-    borderColor?: string;
+    iconSize?: number;
+    /** Enable button loading animation */
+    loading?: boolean;
     /**
      * The button component has a 15px margin on its sides, to remove activate the "noMargin" property
      */
-    $noMargin?: boolean;
+    noMargin?: boolean;
     /**
      * The button component has a 10px margin on its sides, to remove activate the "noIconMargin" property
      */
-    $noIconMargin?: boolean;
+    noIconMargin?: boolean;
     /**
      * The button component has a 15px padding on its sides, to remove activate the "noPadding" property
      */
-    $noPadding?: boolean;
+    noPadding?: boolean;
     /**
      * It should be true if the button is wrapped in a tooltip
      */
     noPointerEvents?: boolean;
     /**
-     * By default the icon component is 16px high, use this prop to customize "iconSize"
+     * With the property "revertOrientation" it is possible to change the positioning of
+     * the elements inside the button as "icon" or "loading"
      */
-    iconSize?: number;
+    revertOrientation?: boolean;
     /**
-     * By default the icon color is primary, use this prop to customize "iconColor"
+     * By default the button component is 34px high, the "typeSize" property contains
+     * the "medium" variation that changes to 27px
      */
-    iconColor?: ReturnType<typeof getColor>;
+    typeSize?: 'default' | 'medium' | 'auto';
 };
 /** Primary UI component for user interaction */
-declare const Button: ({ type, typeSize, buttonType, color, backgroundColor, borderColor, disabled, tabIndex, loading: isLoading, icon, children, revertOrientation, $noMargin: noMargin, $noIconMargin, noPointerEvents, iconSize, iconColor, ...props }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
+declare const Button: ({ backgroundColor, borderColor, buttonType, children, color, disabled, icon, iconColor, iconSize, loading: isLoading, noIconMargin, noMargin, noPadding, noPointerEvents, revertOrientation, tabIndex, type, typeSize, ...props }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
 export type { ButtonProps };
 export { Button };

package/dist/src/components/Buttons/Button/Button.styled.d.ts

@@ -1,26 +1,8 @@
 import { ButtonProps } from '.';
-type CustomButton = {
-    backgroundColor?: string;
-    color?: string;
-    borderColor?: string;
-};
 type StyledProps = {
-    $noMargin?: boolean;
-    $noPadding?: boolean;
-    $size: NonNullable<ButtonProps['typeSize']>;
-    $variant?: string;
-    $custom?: CustomButton;
-    icon?: boolean;
-    alignEnd?: boolean;
-    reversed: boolean;
-    noPointerEvents?: boolean;
+    [Key in keyof Pick<ButtonProps, 'backgroundColor' | 'borderColor' | 'buttonType' | 'color' | 'iconSize' | 'noIconMargin' | 'noMargin' | 'noPadding' | 'noPointerEvents' | 'revertOrientation' | 'typeSize'> as `$${Key}`]: ButtonProps[Key];
 };
-declare const ContentIcon: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<ButtonProps, "$noIconMargin"> & {
-    reversed: ButtonProps["revertOrientation"];
-    size: Required<ButtonProps["iconSize"]>;
-}>> & string;
+declare const ContentIcon: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<StyledProps, "$iconSize">>> & string;
 declare const Label: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
-declare const WrapperButtons: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledProps>> & string;
-declare const BaseButton: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, StyledProps>> & string;
-declare const SmallWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledProps>> & string;
-export { ContentIcon, Label, WrapperButtons, BaseButton, SmallWrapper };
+declare const BaseButton: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, Pick<StyledProps, "$buttonType" | "$backgroundColor" | "$borderColor" | "$color" | "$noIconMargin" | "$noMargin" | "$noPadding" | "$noPointerEvents" | "$revertOrientation" | "$typeSize">>> & string;
+export { BaseButton, ContentIcon, Label };

package/dist/src/components/Primitives/Dropdown/Dropdown.d.ts

@@ -4,6 +4,7 @@ import { InjectedProps as PopupStateProps } from 'material-ui-popup-state';
 import { Color } from '../../../colors';
 import { ButtonProps } from '../../Buttons';
 import { IconProps } from '../Icon';
+import { LinkProps } from '../Link';
 import { TooltipProps } from '../Tooltip';
 import { Unwrap } from '../../types';
 type DropdownOptionIcon = Unwrap<Partial<Pick<IconProps, 'name' | 'size'>> & Pick<React.CSSProperties, 'backgroundColor' | 'color'>> & {
@@ -14,9 +15,9 @@ type DropdownOptionLetter = Unwrap<Pick<React.CSSProperties, 'backgroundColor' |
 };
 type DropdownOption = {
     /**
-     * Add separator from previous options
+     * Background Color to use when option is active
      */
-    brokenSequence?: boolean;
+    activeBackgroundColor?: Color;
     /**
      * Option Badge configuration
      *
@@ -24,31 +25,37 @@ type DropdownOption = {
      */
     badge?: DropdownOptionIcon | DropdownOptionLetter;
     /**
-     * Option description
+     * Add separator from previous options
      */
-    label?: string;
+    brokenSequence?: boolean;
+    /**
+     * Label text color
+     *
+     * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/color}
+     */
+    color?: Color;
     /**
      * Highlight option
      */
     isActive?: boolean;
     /**
-     * Background Color to use when option is active
+     * Disables option
      */
-    activeBackgroundColor?: Color;
+    isDisabled?: boolean;
     /**
-     * Event handler called when this option is clicked.
+     * Option description
      */
-    onClick?: () => null;
+    label?: string;
     /**
-     * Transforms label to a Link and point user to this url
+     * Link properties
      *
      * @see {Link}
      */
-    url?: string;
+    linkProps?: LinkProps;
     /**
-     * Disables option
+     * Event handler called when this option is clicked.
      */
-    isDisabled?: boolean;
+    onClick?: () => null;
     /**
      * Tooltip's title
      *
@@ -56,11 +63,11 @@ type DropdownOption = {
      */
     tooltip?: TooltipProps['title'];
     /**
-     * Label text color
+     * Transforms label to a Link and point user to this url
      *
-     * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/color}
+     * @see {Link}
      */
-    color?: Color;
+    url?: string;
 };
 type DropdownSharedProps = {
     /**
@@ -75,45 +82,45 @@ type DropdownSharedProps = {
      * help: https://mui.com/material-ui/react-popover/#anchor-playground
      */
     anchorOrigin?: PopoverOrigin;
-    /**
-     * This is the point on the popover which
-     * will attach to the anchor's origin.
-     *
-     * Options:
-     * vertical: [top, center, bottom, x(px)];
-     * horizontal: [left, center, right, x(px)].
-     *
-     * help: https://mui.com/material-ui/react-popover/#anchor-playground
-     */
-    transformOrigin?: PopoverOrigin;
     /**
      * The unique id to identify the dropdown anchor element.
      */
     id: string;
     /**
-     * Options listed in the Dropdown menu popup.
+     * Event handler called when a dropdown option is selected.
+     *
+     * This prop can be overriden using option.onClick
      *
      * @see {DropdownOption}
      */
-    options: DropdownOption[] | undefined;
+    onSelect?: (itemClicked: DropdownOption) => void;
     /**
      * Event handler called when the dropdown is opened or closed.
      */
     onToggle?: (popupState: PopupStateProps) => void;
     /**
-     * Event handler called when a dropdown option is selected.
-     *
-     * This prop can be overriden using option.onClick
+     * Options listed in the Dropdown menu popup.
      *
      * @see {DropdownOption}
      */
-    onSelect?: (itemClicked: DropdownOption) => void;
+    options: DropdownOption[] | undefined;
     /**
      * Tooltip's title
      *
      * @see {Tooltip}
      */
     tooltip?: TooltipProps['title'];
+    /**
+     * This is the point on the popover which
+     * will attach to the anchor's origin.
+     *
+     * Options:
+     * vertical: [top, center, bottom, x(px)];
+     * horizontal: [left, center, right, x(px)].
+     *
+     * @see {@link https://mui.com/material-ui/react-popover/#anchor-playground}
+     */
+    transformOrigin?: PopoverOrigin;
 };
 type DropdownVariationButtonProps = DropdownSharedProps & {
     /**
@@ -122,6 +129,13 @@ type DropdownVariationButtonProps = DropdownSharedProps & {
      * @see {Button}
      */
     anchorType: 'button';
+    /**
+     * Button properties
+     *
+     * @see {Button}
+     */
+    buttonProps?: ButtonProps;
+    content?: never;
     /**
      * Hide dropdown arrow icon
      */
@@ -130,19 +144,12 @@ type DropdownVariationButtonProps = DropdownSharedProps & {
      * Hide dropdown label text
      */
     hideLabel?: boolean;
-    /**
-     * Button properties
-     *
-     * @see {Button}
-     */
-    buttonProps?: ButtonProps;
     /**
      * Button label
      *
      * Default value: 'Open Popover'
      */
     label?: string | React.JSX.Element;
-    content?: never;
 };
 type DropdownVariationContainerProps = DropdownSharedProps & {
     /**
@@ -160,6 +167,6 @@ type DropdownProps = DropdownVariationContainerProps | DropdownVariationButtonPr
 /**
  * Display a menu with a list of options
  */
-declare const Dropdown: ({ onToggle, onSelect, content, anchorType, ...props }: DropdownProps) => import("react/jsx-runtime").JSX.Element;
+declare const Dropdown: ({ anchorType, content, onSelect, onToggle, ...props }: DropdownProps) => import("react/jsx-runtime").JSX.Element;
 export type { DropdownOption, DropdownProps };
 export { Dropdown };

package/dist/src/components/Primitives/Dropdown/Dropdown.styled.d.ts

@@ -1,17 +1,17 @@
 import { DropdownOption } from './Dropdown';
-import { Color } from '../../../colors';
 type StyledProps = {
-    brokenSequence?: boolean;
-    backgroundColor?: string;
-    isActive?: boolean;
-    disabled?: boolean | undefined;
-    color?: Color;
-} & Partial<Pick<DropdownOption, 'activeBackgroundColor'>>;
-declare const MenuContainer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledProps>> & string;
-declare const MenuOption: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledProps>> & string;
-declare const Text: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, StyledProps>> & string;
-declare const ContentBadge: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, StyledProps>> & string;
-declare const ClickableContainer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledProps>> & string;
-declare const Grid: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledProps>> & string;
-declare const Wrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledProps>> & string;
+    [Key in keyof Pick<DropdownOption, 'activeBackgroundColor' | 'brokenSequence' | 'isActive' | 'color'> as `$${Key}`]: DropdownOption[Key];
+} & {
+    disabled: DropdownOption['isDisabled'];
+};
+declare const MenuContainer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+declare const MenuOption: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<StyledProps, "disabled" | "$activeBackgroundColor" | "$brokenSequence" | "$isActive">>> & string;
+declare const Text: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, Pick<StyledProps, "$color">>> & string;
+type ContentBadgeProps = {
+    [Key in keyof Pick<NonNullable<DropdownOption['badge']>, 'backgroundColor'> as `$${Key}`]: NonNullable<DropdownOption['badge']>[Key];
+};
+declare const ContentBadge: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, Pick<ContentBadgeProps, "$backgroundColor">>> & string;
+declare const ClickableContainer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+declare const Grid: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+declare const Wrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export { MenuContainer, MenuOption, Text, ContentBadge, ClickableContainer, Grid, Wrapper, };