@iota/apps-ui-kit 0.11.0 → 0.13.0

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # @iota/apps-ui-kit
 
+## 0.13.0
+### Minor Changes
+
+- 94c9333: Clickable `TableRow`s ignore clicks coming from interactive elements inside them (links, buttons, inputs, `role="button"`…) or that end a text selection, and accept an `onAuxClick` handler. While one of those elements is hovered the row is not highlighted and the hovered link is highlighted instead. Links spread with `ROW_LINK_PROPS`, which go where the row goes, keep the row hover and are not highlighted. Adds `INTERACTIVE_ELEMENT_SELECTOR`, `ROW_LINK_ATTRIBUTE`, `ROW_LINK_PROPS` and the `row-hover`, `inner-link` and `inner-link-hover` Tailwind variants.
+
+### Patch Changes
+
+- b1718f3: add overflow wrap to infobox
+- a24230f: align Cardaction supporting text
+- fe39bd9: Improve tooltip positioning when there's not enough space
+- 9fe2669: Allow `CardBody` to receive a React node as `title`, not only a string.
+- Updated dependencies [fecdf36]
+  - @iota/apps-ui-icons@0.7.6
+
+## 0.12.0
+
+### Minor Changes
+
+-   352991b: fix checkbox alignment
+
+### Patch Changes
+
+-   dd41759: Add icon for Badge
+-   437f907: Fix Tooltip not closing on scroll and overflowing the viewport.
+-   3ac0260: add prop to disable state layer in the accordion and add a receipt layout option for the keyvalue
+-   2dcb8d1: update some types in displaystats and keyvalueinfo components
+
 ## 0.11.0
 
 ### Minor Changes

package/dist/index.d.ts

@@ -34,7 +34,7 @@ declare interface AccordionContentProps {
     isExpanded: boolean;
 }
 
-export declare function AccordionHeader({ onToggle, children, isExpanded, hideArrow, }: PropsWithChildren<AccordionHeaderProps>): JSX_2.Element;
+export declare function AccordionHeader({ onToggle, children, isExpanded, hideArrow, disableStateLayer, }: PropsWithChildren<AccordionHeaderProps>): JSX_2.Element;
 
 export declare interface AccordionHeaderProps {
     /**
@@ -57,6 +57,12 @@ export declare interface AccordionHeaderProps {
      * Flag for hiding border.
      */
     hideBorder?: boolean;
+    /**
+     * Disable the header state layer while an interactive child is active.
+     * This keeps the parent hover treatment from competing with child links
+     * and controls.
+     */
+    disableStateLayer?: boolean;
 }
 
 export declare function Account({ title, subtitle, badgeType, badgeText, avatarContent, onOptionsClick, onCopy, copyText, onOpen, isCopyable, isExternal, isSelected, isActive, showSelected, badgeTooltipText, badgeTooltipPosition, }: AccountProps): React.JSX.Element;
@@ -186,7 +192,7 @@ export declare interface AssetMediaRendererProps extends VideoProps {
     showFallback?: boolean;
 }
 
-export declare function Badge({ type, label, size }: BadgeProps): React.JSX.Element;
+export declare function Badge({ type, label, size, icon, }: BadgeProps): React.JSX.Element;
 
 declare interface BadgeProps {
     /**
@@ -201,6 +207,10 @@ declare interface BadgeProps {
      * The size of the badge
      */
     size?: BadgeSize;
+    /**
+     * An icon rendered before the label.
+     */
+    icon?: ReactNode;
 }
 
 export declare enum BadgeSize {
@@ -230,7 +240,7 @@ export declare interface BaseInputProps extends InputWrapperProps {
     /**
      * Amount counter that is shown at the side of the caption text.
      */
-    amountCounter?: string | number;
+    amountCounter?: React.ReactNode;
     /**
      * Trailing element that is shown after the input
      */
@@ -246,7 +256,7 @@ export declare interface BaseInputProps extends InputWrapperProps {
     /**
      * Text that is shown below the value of the input.
      */
-    supportingValue?: string | null;
+    supportingValue?: React.ReactNode;
     /**
      * Default value of the input
      */
@@ -285,7 +295,7 @@ export declare interface ButtonProps extends Omit<React.ButtonHTMLAttributes<HTM
     /**
      * The text of the button.
      */
-    text?: string;
+    text?: React.ReactNode;
     /**
      The icon of the button
      */
@@ -382,7 +392,7 @@ export declare function Card({ isDisabled, type, isHoverable, onClick, children,
 export declare function CardAction({ type, onClick, subtitle, title, icon, iconAfterText, buttonType, buttonDisabled, }: CardActionProps): JSX_2.Element | null;
 
 export declare type CardActionProps = {
-    title?: string;
+    title?: React.ReactNode;
     subtitle?: string | React.ReactNode;
     type: CardActionType;
     onClick?: () => void;
@@ -401,7 +411,7 @@ export declare enum CardActionType {
 export declare function CardBody({ title, subtitle, clickableAction, icon, isTextTruncated, tooltipText, tooltipPosition, }: CardBodyProps): JSX_2.Element;
 
 export declare type CardBodyProps = {
-    title: string;
+    title: ReactNode;
     subtitle?: string | ReactNode;
     clickableAction?: React.ReactNode;
     icon?: React.ReactNode;
@@ -643,7 +653,7 @@ declare interface DisplayStatsProps {
     /**
      * The tooltip text.
      */
-    tooltipText?: string;
+    tooltipText?: ReactNode;
     /**
      * The value of the stats.
      */
@@ -832,7 +842,7 @@ declare interface InputWrapperProps {
     /**
      * Shows a caption with the text below the input.
      */
-    caption?: string;
+    caption?: ReactNode;
     /**
      * Error Message. Overrides the caption.
      */
@@ -840,7 +850,7 @@ declare interface InputWrapperProps {
     /**
      * Amount counter that is shown at the side of the caption text.
      */
-    amountCounter?: string | number;
+    amountCounter?: React.ReactNode;
     /**
      * Is the input required
      */
@@ -855,6 +865,8 @@ declare interface InputWrapperProps {
     labelHtmlTag?: LabelHtmlTag;
 }
 
+export declare const INTERACTIVE_ELEMENT_SELECTOR: string;
+
 export declare const IOTA_NAMES_COLOR_PALETTE: {
     'names-primary': {
         '0': string;
@@ -1035,13 +1047,13 @@ export declare const IOTA_PRIMITIVES_COLOR_PALETTE: {
     };
 };
 
-export declare function KeyValueInfo({ keyText, keyIcon, value, tooltipPosition, tooltipText, supportingLabel, size, isTruncated, copyText, onCopySuccess, onCopyError, fullwidth, isReverse, valueHoverTitle, }: KeyValueProps): React.JSX.Element;
+export declare function KeyValueInfo({ keyText, keyIcon, value, tooltipPosition, tooltipText, supportingLabel, size, isTruncated, copyText, onCopySuccess, onCopyError, fullwidth, isReverse, layout, valueHoverTitle, }: KeyValueProps): React.JSX.Element;
 
 declare interface KeyValueProps {
     /**
      * The key of the KeyValue.
      */
-    keyText: string;
+    keyText: ReactNode;
     /**
      * An icon shown next to the key text (optional).
      */
@@ -1090,6 +1102,11 @@ declare interface KeyValueProps {
      * Reverse the KeyValue (optional).
      */
     isReverse?: boolean;
+    /**
+     * Use a receipt-style row with a dotted leader and right-aligned value.
+     * This is opt-in so existing KeyValueInfo layouts remain unchanged.
+     */
+    layout?: 'default' | 'receipt';
     /**
      * Text shown on value hover.
      */
@@ -1345,6 +1362,12 @@ export declare enum Resize {
     Vertical = "vertical"
 }
 
+export declare const ROW_LINK_ATTRIBUTE = "data-row-link";
+
+export declare const ROW_LINK_PROPS: {
+    readonly "data-row-link": true;
+};
+
 export declare enum ScreenSize {
     Sm = "sm",
     Md = "md",
@@ -1603,7 +1626,7 @@ export declare function TableActionButton(props: PropsWithChildren<ButtonProps_2
 
 export declare function TableBody({ children }: PropsWithChildren): JSX.Element;
 
-export declare function TableCellBase({ children, hasLastBorderNoneClass, isContentCentered, }: PropsWithChildren<TableCellBaseProps>): JSX_2.Element;
+export declare function TableCellBase({ children, hasLastBorderNoneClass, isContentCentered, colSpan, }: PropsWithChildren<TableCellBaseProps>): JSX_2.Element;
 
 declare interface TableCellBaseProps {
     /**
@@ -1618,6 +1641,10 @@ declare interface TableCellBaseProps {
      * Whether the cell content should be centered.
      */
     isContentCentered?: boolean;
+    /**
+     * The number of columns the cell should span.
+     */
+    colSpan?: number;
 }
 
 export declare function TableCellPlaceholder(): JSX_2.Element;
@@ -1760,8 +1787,10 @@ export declare type TableProps = {
     heightFull?: boolean;
 };
 
-export declare function TableRow({ children, leading, }: PropsWithChildren<{
+export declare function TableRow({ children, leading, onClick, onAuxClick, }: PropsWithChildren<{
     leading?: React.ReactNode;
+    onClick?: React.MouseEventHandler<HTMLTableRowElement>;
+    onAuxClick?: React.MouseEventHandler<HTMLTableRowElement>;
 }>): JSX.Element;
 
 export declare function TableRowCheckbox({ rowIndex, onCheckboxChange, isDisabled, }: TableRowCheckboxProps): React.JSX.Element;