widenarrow-ui 2.4.12 → 2.5.0

package/lib/index.d.ts

@@ -441,61 +441,6 @@ 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;
-    /** Ref to the remove button, e.g. to move focus to it. Only set while `onRemoveCallback` is. */
-    removeButtonRef?: RefObject<HTMLButtonElement>;
-}
-
-declare const Badge: {
-    ({ badgeItem, className, displayAll, leftIcon, maxWidth, style, onClickCallback, onRemoveCallback, removeLabel, removeButtonRef }: 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';
@@ -545,8 +490,31 @@ interface ColorStyleInterface {
 interface SizeStyleInterface {
     size?: Partial<SizeTypes>;
 }
+/** Two icons combined: `cornerIcon` is placed in a corner of `icon`, on a cut-out that keeps it legible */
+interface CombinedIcon {
+    /** The main icon */
+    icon: Partial<IconTypes>;
+    /** Secondary icon drawn in a corner, cut out of the main icon. Uses the main icon's color */
+    cornerIcon: Partial<IconTypes>;
+    /**
+     * Which corner of the main icon the corner icon is placed in
+     * @default 'bottom-right'
+     */
+    cornerPosition?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
+    /**
+     * Thickens the corner icon to compensate for the thinner strokes caused by scaling it down.
+     * Grows its outline by this many units on the main icon's 24px grid. Typically 0-0.5.
+     * @default 0.25
+     */
+    weightCompensation?: number;
+    /**
+     * Accessible name for what the combination means, e.g. "Locked document". Without it the icon is
+     * hidden from assistive technology, which suits icons inside a control that has its own label.
+     */
+    ariaLabel?: string;
+}
 interface IconStyleInterface {
-    icon?: Partial<IconTypes>;
+    icon?: Partial<IconTypes> | CombinedIcon;
 }
 declare const paddingClassNames: ({ padding, paddingX, paddingY, paddingTop, paddingBottom, paddingRight, paddingLeft }: PaddingInterface) => {
     [x: string]: boolean;
@@ -564,6 +532,66 @@ declare const borderClassNames: ({ borderColor, border, borderTop, borderLeft, b
     [x: string]: boolean;
 };
 
+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> | CombinedIcon;
+    /**
+     * Height and text size of the badge.
+     * @default SizeTypes.MEDIUM
+     */
+    size?: SizeTypes.SMALL | SizeTypes.MEDIUM;
+    /** 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;
+    /** Ref to the remove button, e.g. to move focus to it. Only set while `onRemoveCallback` is. */
+    removeButtonRef?: RefObject<HTMLButtonElement>;
+}
+
+declare const Badge: {
+    ({ badgeItem, className, displayAll, leftIcon, size, maxWidth, style, onClickCallback, onRemoveCallback, removeLabel, removeButtonRef }: 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 BoxProps extends MarginInterface, PaddingInterface, BorderInterface, FlexStylingInterface {
     children?: react__default.ReactNode;
     id?: string;
@@ -595,13 +623,13 @@ interface ButtonProps {
     sizeMd?: SizeTypes.SMALL | SizeTypes.MEDIUM | SizeTypes.LARGE;
     sizeLg?: SizeTypes.SMALL | SizeTypes.MEDIUM | SizeTypes.LARGE;
     sizeXl?: SizeTypes.SMALL | SizeTypes.MEDIUM | SizeTypes.LARGE;
-    icon?: Partial<IconTypes>;
+    icon?: Partial<IconTypes> | CombinedIcon;
     iconColor?: Partial<ColorTypes>;
     iconSize?: SizeTypes.SMALL | SizeTypes.MEDIUM | SizeTypes.LARGE | SizeTypes.AUTO;
     /** @default false */
     withIconRight?: boolean;
-    leftIcon?: Partial<IconTypes>;
-    rightIcon?: Partial<IconTypes>;
+    leftIcon?: Partial<IconTypes> | CombinedIcon;
+    rightIcon?: Partial<IconTypes> | CombinedIcon;
     /** @default false */
     disabled?: boolean;
     className?: string;
@@ -666,7 +694,7 @@ declare const Checkbox: FC<CheckboxProps>;
 interface NoDataMessageProps {
     id?: string;
     className?: string;
-    icon?: Partial<IconTypes>;
+    icon?: Partial<IconTypes> | CombinedIcon;
     title?: string;
     message?: string;
     /** @default false */
@@ -675,7 +703,7 @@ interface NoDataMessageProps {
     button?: {
         onClickCallback: () => void;
         text: string;
-        icon: Partial<IconTypes>;
+        icon: Partial<IconTypes> | CombinedIcon;
     };
 }
 
@@ -704,7 +732,7 @@ interface OptionItem {
      * Icon before the text. In a Combobox with `multiple`, also shown on the option's pill. Not shown
      * in the field of a single value, nor with `nativeHtmlComponent`.
      */
-    leftIcon?: IconTypes;
+    leftIcon?: Partial<IconTypes> | CombinedIcon;
     /**
      * Component before the text, e.g. an avatar or a logo. Shown in the list in place of `leftIcon`,
      * while pills keep showing `leftIcon`. It doesn't make the option higher, so keep it to the size of an
@@ -859,7 +887,8 @@ interface ComboboxBaseProps {
     onLoadMoreCallback?: () => void;
     /**
      * Let the value be cleared: with a button while there is one, and for a single value also by deleting
-     * all text in the input. Without it, a value can only be replaced by another. @default true
+     * all text in the input. Without it, a value can only be replaced by another. Not shown with
+     * `withPills={false}`. @default true
      */
     withClearButton?: boolean;
     /** Accessible names of the clear, toggle and pill remove buttons, e.g. to translate them. */
@@ -925,6 +954,14 @@ interface ComboboxMultipleProps extends ComboboxBaseProps {
     onChange: (value: Array<ComboboxValue>) => void;
     /** Only with `multiple`: pills shown in the field. The rest are behind a "+ N" button that lists them, as in BadgeList. @default 5 */
     maxVisiblePills?: number;
+    /**
+     * Only with `multiple`: show the selected values as pills in the field. When false the field holds just
+     * the input, e.g. when the selection is shown elsewhere. The selected options stay checked in the list,
+     * the placeholder stays shown, there is no clear button, and Backspace in the empty input no longer
+     * removes the last value.
+     * @default true
+     */
+    withPills?: boolean;
 }
 type ComboboxProps = ComboboxSingleProps | ComboboxMultipleProps;
 
@@ -938,7 +975,7 @@ interface CardProps extends PaddingInterface, MarginInterface, FlexStylingInterf
     onClickCallback?: () => void;
     /** @default AspectRatioTypes.ar16_9 */
     imageAspectRatio?: Partial<AspectRatioTypes>;
-    imageIcon?: Partial<IconTypes>;
+    imageIcon?: Partial<IconTypes> | CombinedIcon;
     imageIconSize?: SizeTypes.SMALL | SizeTypes.MEDIUM | SizeTypes.LARGE | SizeTypes.AUTO | undefined;
     /** @default false */
     withEllipsis?: boolean;
@@ -1147,8 +1184,8 @@ interface DropDownItemProps {
     /** @default 'li' */
     wrapperElement?: 'div' | 'li';
     className?: string;
-    leftIcon?: Partial<IconTypes>;
-    rightIcon?: Partial<IconTypes>;
+    leftIcon?: Partial<IconTypes> | CombinedIcon;
+    rightIcon?: Partial<IconTypes> | CombinedIcon;
     rightComponent?: ReactNode;
     children?: ReactNode | ReactNode[];
     iconSize?: SizeTypes.SMALL | SizeTypes.MEDIUM | SizeTypes.LARGE;
@@ -1186,8 +1223,8 @@ interface FacetButtonProps {
     selected?: boolean;
     /** @default false */
     blocked?: boolean;
-    icon?: Partial<IconTypes>;
-    rightIcon?: Partial<IconTypes>;
+    icon?: Partial<IconTypes> | CombinedIcon;
+    rightIcon?: Partial<IconTypes> | CombinedIcon;
     children?: ReactNode;
     className?: string;
     toolTip?: string;
@@ -1362,7 +1399,7 @@ interface IconButtonProps extends IconStyleInterface {
     toolTip?: string;
     toolTipComponent?: ReactNode;
     ariaLabel?: string;
-    toggleIcon?: IconTypes;
+    toggleIcon?: Partial<IconTypes> | CombinedIcon;
     badge?: string | number;
     /** @default BadgeTypes.PURPLE */
     badgeColor?: BadgeTypes;
@@ -1373,7 +1410,7 @@ declare const IconButton: react.MemoExoticComponent<({ className, disabled, styl
 interface IconInterface$1 {
     loading?: boolean;
     disabled?: boolean;
-    icon: Partial<IconTypes>;
+    icon: Partial<IconTypes> | CombinedIcon;
     toolTip?: string;
     tabIndex?: number;
     onClickCallback: () => void;
@@ -1460,7 +1497,7 @@ interface InlineButtonProps {
     onClickCallback?: (e: MouseEvent<HTMLButtonElement>) => void;
     className?: string;
     children?: ReactNode;
-    icon?: Partial<IconTypes>;
+    icon?: Partial<IconTypes> | CombinedIcon;
     iconSize?: SizeTypes.SMALL | SizeTypes.MEDIUM | SizeTypes.LARGE;
     /** @default false */
     rotateIcon?: boolean;
@@ -1504,7 +1541,7 @@ interface LinkProps {
     /** Renders a react-router Link instead of an anchor. Requires a surrounding Router. */
     to?: string;
     text?: string;
-    icon?: Partial<IconTypes>;
+    icon?: Partial<IconTypes> | CombinedIcon;
     /** @default ColorTypes.CURRENT */
     iconColor?: Partial<ColorTypes>;
     /** @default SizeTypes.MEDIUM */
@@ -1549,7 +1586,7 @@ declare const Link: FC<LinkProps>;
 interface IconInterface {
     loading?: boolean;
     disabled?: boolean;
-    icon: Partial<IconTypes>;
+    icon: Partial<IconTypes> | CombinedIcon;
     toolTip?: string;
     tabIndex?: number;
     onClickCallback: () => void;
@@ -1613,7 +1650,7 @@ interface ListButtonProps {
      */
     labelClassName?: string;
     iconClassName?: string;
-    icon?: Partial<IconTypes>;
+    icon?: Partial<IconTypes> | CombinedIcon;
     /** Applied to the icon if in a Link component. Otherwise, size is inherited from the button's size.
      * @default SizeTypes.SMALL */
     iconSize?: SizeTypes.SMALL | SizeTypes.MEDIUM | SizeTypes.LARGE | SizeTypes.AUTO | undefined;
@@ -1669,7 +1706,7 @@ interface ListItemProps extends MarginInterface, PaddingInterface {
     withHoverEffect?: boolean;
     /** @default true */
     withEllipsis?: boolean;
-    imageIcon?: Partial<IconTypes>;
+    imageIcon?: Partial<IconTypes> | CombinedIcon;
     /** @default SizeTypes.MEDIUM */
     size: Partial<SizeTypes>;
     /** @default AspectRatioTypes.ar1_1 */
@@ -1744,9 +1781,9 @@ interface MultiActionButtonProps {
     sizeLg?: SizeTypes.SMALL | SizeTypes.MEDIUM | SizeTypes.LARGE;
     sizeXl?: SizeTypes.SMALL | SizeTypes.MEDIUM | SizeTypes.LARGE;
     iconSize?: SizeTypes.SMALL | SizeTypes.MEDIUM | SizeTypes.LARGE;
-    leftIcon?: Partial<IconTypes>;
-    middleIcon?: Partial<IconTypes>;
-    rightIcon?: Partial<IconTypes>;
+    leftIcon?: Partial<IconTypes> | CombinedIcon;
+    middleIcon?: Partial<IconTypes> | CombinedIcon;
+    rightIcon?: Partial<IconTypes> | CombinedIcon;
     rotateLeftIconByDegree?: 0 | 45 | 90 | 135 | 180 | 225 | 270 | 315;
     rotateMiddleIconByDegree?: 0 | 45 | 90 | 135 | 180 | 225 | 270 | 315;
     rotateRightIconByDegree?: 0 | 45 | 90 | 135 | 180 | 225 | 270 | 315;
@@ -1965,7 +2002,7 @@ interface SortableTableProps {
     /** Shown in place of the rows when `data` is empty and `loading` is false. */
     noDataMessage?: {
         title?: string;
-        icon?: Partial<IconTypes>;
+        icon?: Partial<IconTypes> | CombinedIcon;
         message?: string;
     };
 }
@@ -2212,4 +2249,4 @@ declare const NoDataMessage: {
     displayName: string;
 };
 
-export { AnimatedCount, AnimatedCountProps, AppColors, AspectRatioTypes, Badge, BadgeItem, BadgeList, BadgeListProps, BadgeProps, BadgeTypes, BorderInterface, Box, Button, Card, Checkbox, ColorStyleInterface, ColorTypes, Combobox, ComboboxAriaLabels, ComboboxMultipleProps, ComboboxProps, ComboboxSingleProps, ComboboxValue, DropDown, DropDownItem, DropDownProps, 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, OptionItem as SelectInputOptionItem, SelectInputProps, 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, CombinedIcon, Combobox, ComboboxAriaLabels, ComboboxMultipleProps, ComboboxProps, ComboboxSingleProps, ComboboxValue, DropDown, DropDownItem, DropDownProps, 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, OptionItem as SelectInputOptionItem, SelectInputProps, Separator, SizeStyleInterface, SizeTypes, SkeletonItem, SolidSpinner, SortableTable, SortableTableCellInterface, SortableTableProps, Span, SwitchButton, Tab, TabGroup, TabGroupProps, TabIndicatorProps, TabProps, TabValue, TableTypes, TextAreaInput, ToolTip, borderClassNames, flexClassNames, marginClassNames, paddingClassNames };