widenarrow-ui 2.3.4 → 2.3.6

package/lib/index.d.ts

@@ -1,7 +1,17 @@
 import * as react from 'react';
-import react__default, { CSSProperties, MouseEvent, RefObject, ReactNode, ChangeEvent, KeyboardEvent, FocusEvent, FC, AriaAttributes } from 'react';
+import react__default, { CSSProperties, ReactElement, MouseEvent, RefObject, ReactNode, ChangeEvent, KeyboardEvent, FocusEvent, FC, AriaAttributes } from 'react';
 import { Placement, PositioningStrategy } from '@popperjs/core';
 
+interface AnimatedCountProps {
+    value: string | number;
+    className?: string;
+}
+
+declare const AnimatedCount: {
+    ({ value, className }: AnimatedCountProps): JSX.Element;
+    displayName: string;
+};
+
 declare enum IconTypes {
     ACCOUNT_SETTINGS = "iconAccountSettings",
     ALL_SOURCES = "iconAllSources",
@@ -354,6 +364,18 @@ declare enum FontFamilyTypes {
     TIMES_NEW_ROMAN = "times new roman",
     CUSTOM = "custom"
 }
+/**
+ * Colour variants for badges that carry a count. NumberBadge styles all six values; consuming apps can
+ * also use the same scale for their own counters.
+ */
+declare enum BadgeTypes {
+    ORANGE = "colorBadgeOrange",
+    DARK = "colorBadgeDark",
+    GREY = "colorBadgeGrey",
+    PURPLE = "colorBadgePurple",
+    MINT = "colorBadgeMint",
+    BLUE = "colorBadgeBlue"
+}
 declare enum AppColors {
     TRANSPARENT = "transparent",
     WHITE = "#ffffff",
@@ -391,6 +413,59 @@ declare enum AppColors {
     MAIN_DARK = "#030718"
 }
 
+interface BadgeItem {
+    id: string | number;
+    name: string;
+    allUsers?: boolean;
+    type?: string;
+}
+interface BadgeProps {
+    badgeItem: BadgeItem;
+    className?: string;
+    /** Lets the badge fill the available width instead of being capped by `maxWidth`. */
+    displayAll?: boolean;
+    leftIcon?: Partial<IconTypes>;
+    /** CSS width expression, i.e. `calc(100% - 20px)`. Ignored when `displayAll` is set. */
+    maxWidth?: string;
+    style?: CSSProperties;
+    /** Renders the label as a button. */
+    onClickCallback?: (badgeItem: BadgeItem) => void;
+    /** Renders a remove (X) button after the label. */
+    onRemoveCallback?: (badgeItem: BadgeItem) => void;
+    /** Accessible name and tooltip for the remove button. Set it whenever `onRemoveCallback` is. */
+    removeLabel?: string;
+}
+
+declare const Badge: {
+    ({ badgeItem, className, displayAll, leftIcon, maxWidth, style, onClickCallback, onRemoveCallback, removeLabel }: BadgeProps): JSX.Element;
+    displayName: string;
+};
+
+interface BadgeListProps {
+    /** Either `BadgeItem` objects or ready-made badge components. Entries that render nothing are dropped. */
+    badgeArray: Array<BadgeItem> | Array<ReactElement>;
+    /** How many badges to show before the rest move into the dropdown. `0` shows all of them. */
+    numberToDisplay: number;
+    className?: string;
+    dropDownTitle?: string;
+    /** Reveals the overflow inline behind a toggle instead of in a dropdown. */
+    withToggleShowAll?: boolean;
+    wrapBadges?: boolean;
+    /** Styles the overflow toggle as a link. */
+    displayAsLinks?: boolean;
+    /** Label for the toggle once the overflow is open. Falls back to `- N`. Pass a translated string. */
+    showLessText?: string;
+    onClickCallback?: (badgeItem: BadgeItem) => void;
+    onRemoveCallback?: (badgeItem: BadgeItem) => void;
+    /** Accessible name and tooltip for each remove button. Set it whenever `onRemoveCallback` is. */
+    removeLabel?: string;
+}
+
+declare const BadgeList: {
+    ({ badgeArray, numberToDisplay, className, dropDownTitle, withToggleShowAll, wrapBadges, displayAsLinks, showLessText, onClickCallback, onRemoveCallback, removeLabel }: BadgeListProps): JSX.Element | null;
+    displayName: string;
+};
+
 interface MarginInterface {
     margin?: '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '025' | '05' | '15' | '25' | 'auto';
     marginX?: '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '025' | '05' | '15' | '25' | 'auto';
@@ -941,9 +1016,12 @@ interface IconButtonProps extends IconStyleInterface {
     toolTipComponent?: ReactNode;
     ariaLabel?: string;
     toggleIcon?: IconTypes;
+    badge?: string | number;
+    /** @default BadgeTypes.PURPLE */
+    badgeColor?: BadgeTypes;
 }
 
-declare const IconButton: react.MemoExoticComponent<({ className, disabled, style, icon, id, text, size, type, href, iconColor, iconSize, iconClassName, onClickCallback, rotateIcon, tabIndex, autoFocus, buttonRef, rotateIconByDegree, toolTip, toolTipComponent, ariaLabel, toggleIcon }: IconButtonProps) => JSX.Element>;
+declare const IconButton: react.MemoExoticComponent<({ className, disabled, style, icon, id, text, size, type, href, iconColor, iconSize, iconClassName, onClickCallback, rotateIcon, tabIndex, autoFocus, buttonRef, rotateIconByDegree, toolTip, toolTipComponent, ariaLabel, toggleIcon, badge, badgeColor }: IconButtonProps) => JSX.Element>;
 
 interface IconInterface$1 {
     loading?: boolean;
@@ -1351,6 +1429,29 @@ declare const MultiActionButton: {
     displayName: string;
 };
 
+interface NumberBadgeProps {
+    /** Already formatted. The badge does no rounding or shortening of its own. */
+    count: string | number;
+    /** Animates each digit when `count` changes. Never fires on mount. */
+    animate?: boolean;
+    /** Renders nothing when `count` is empty. */
+    hideWhenEmpty?: boolean;
+    className?: string;
+    id?: string;
+    color?: BadgeTypes;
+    /** @default SizeTypes.MEDIUM */
+    size?: SizeTypes.SMALL | SizeTypes.MEDIUM;
+    /** Pass an already translated string. */
+    toolTip?: string;
+    /** Escape hatch for a one-off colour, i.e. a value picked at runtime. */
+    style?: CSSProperties;
+}
+
+declare const NumberBadge: {
+    ({ count, animate, className, color, id, hideWhenEmpty, size, toolTip, style }: NumberBadgeProps): JSX.Element | null;
+    displayName: string;
+};
+
 interface SeparatorProps extends MarginInterface, PaddingInterface {
     id?: string;
     className?: string;
@@ -1743,16 +1844,16 @@ declare const Heading: {
     ({ children, type, style, id, ...props }: HeadingProps): JSX.Element;
     displayName: string;
     defaultProps: {
-        marginTop: string;
-        marginBottom: string;
-        color: ColorTypes;
+        readonly marginTop: "0";
+        readonly marginBottom: "2";
+        readonly color: ColorTypes.MAIN_DARK;
     };
 };
 declare const Label: {
     ({ children, htmlFor, style, id, ...props }: LabelProps): JSX.Element;
     displayName: string;
     defaultProps: {
-        marginBottom: string;
+        readonly marginBottom: "05";
     };
 };
 declare const Paragraph: {
@@ -1819,4 +1920,4 @@ declare const NoDataMessage: {
     displayName: string;
 };
 
-export { AppColors, AspectRatioTypes, BorderInterface, Box, Button, Card, Checkbox, ColorStyleInterface, ColorTypes, DropDown, DropDownItem, DropDownRef, FacetButton, FlexStylingInterface, FontFamilyTypes, FormSkeleton, Grid, Heading, HierarchyInterface, HierarchyTypes, Icon, IconButton, IconStyleInterface, IconTypes, Image, InlineButton, Input, Label, Link, LinkTypes, ListButton, ListButtonProps, ListItem, ListSkeleton, MarginInterface, MultiActionButton, NoDataMessage, PaddingInterface, Pagination, Paragraph, RadioButton, SelectInput, Separator, SizeStyleInterface, SizeTypes, SkeletonItem, SolidSpinner, SortableTable, SortableTableCellInterface, SortableTableProps, Span, SwitchButton, Tab, TabGroup, TabGroupProps, TabIndicatorProps, TabProps, TabValue, TableTypes, TextAreaInput, ToolTip, borderClassNames, flexClassNames, marginClassNames, paddingClassNames };
+export { AnimatedCount, AnimatedCountProps, AppColors, AspectRatioTypes, Badge, BadgeItem, BadgeList, BadgeListProps, BadgeProps, BadgeTypes, BorderInterface, Box, Button, Card, Checkbox, ColorStyleInterface, ColorTypes, DropDown, DropDownItem, DropDownRef, FacetButton, FlexStylingInterface, FontFamilyTypes, FormSkeleton, Grid, Heading, HierarchyInterface, HierarchyTypes, Icon, IconButton, IconStyleInterface, IconTypes, Image, InlineButton, Input, Label, Link, LinkTypes, ListButton, ListButtonProps, ListItem, ListSkeleton, MarginInterface, MultiActionButton, NoDataMessage, NumberBadge, NumberBadgeProps, PaddingInterface, Pagination, Paragraph, RadioButton, SelectInput, Separator, SizeStyleInterface, SizeTypes, SkeletonItem, SolidSpinner, SortableTable, SortableTableCellInterface, SortableTableProps, Span, SwitchButton, Tab, TabGroup, TabGroupProps, TabIndicatorProps, TabProps, TabValue, TableTypes, TextAreaInput, ToolTip, borderClassNames, flexClassNames, marginClassNames, paddingClassNames };