@iota/apps-ui-kit 0.10.1 → 0.12.0

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # @iota/apps-ui-kit
 
+## 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
+
+-   bf352b1: Add `actionLeft` and `actionRight` props to `TableHeaderCell` to render content (e.g. a tooltip icon) alongside the header label.
+
+### Patch Changes
+
+-   140abe4: Add actionLeft and actionRight to TableHeaderCell
+-   b9462f0: Accept `ReactNode` in `KeyValueInfo` `supportingLabel` and `CardAction` `subtitle`, and fix `InfoBox` elevated-style left padding when no icon is provided.
+-   b656aef: Align card body title and subtitle text to the start.
+
 ## 0.10.1
 
 ### Patch 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,8 +392,8 @@ 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;
-    subtitle?: string;
+    title?: React.ReactNode;
+    subtitle?: string | React.ReactNode;
     type: CardActionType;
     onClick?: () => void;
     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
      */
@@ -1035,13 +1045,17 @@ export declare const IOTA_PRIMITIVES_COLOR_PALETTE: {
     };
 };
 
-export declare function KeyValueInfo({ keyText, 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).
+     */
+    keyIcon?: ReactNode;
     /**
      * The value of the KeyValue.
      */
@@ -1057,7 +1071,7 @@ declare interface KeyValueProps {
     /**
      * The supporting label of the KeyValue (optional).
      */
-    supportingLabel?: string;
+    supportingLabel?: string | ReactNode;
     /**
      * The size of the value (optional).
      */
@@ -1086,6 +1100,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.
      */
@@ -1599,7 +1618,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 {
     /**
@@ -1614,6 +1633,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;
@@ -1626,7 +1649,7 @@ export declare interface TableCellTextProps {
 
 export declare function TableHeader({ children }: PropsWithChildren): JSX.Element;
 
-export declare function TableHeaderCell({ label, columnKey, hasSort, hasCheckbox, isChecked, isIndeterminate, isContentCentered, onSortClick, onCheckboxChange, sortOrder, ...ariaProps }: TableHeaderCellProps): JSX.Element;
+export declare function TableHeaderCell({ label, columnKey, actionLeft, actionRight, hasSort, hasCheckbox, isChecked, isIndeterminate, isContentCentered, onSortClick, onCheckboxChange, sortOrder, ...ariaProps }: TableHeaderCellProps): JSX.Element;
 
 export declare interface TableHeaderCellProps extends React.AriaAttributes {
     /**
@@ -1756,8 +1779,9 @@ export declare type TableProps = {
     heightFull?: boolean;
 };
 
-export declare function TableRow({ children, leading, }: PropsWithChildren<{
+export declare function TableRow({ children, leading, onClick, }: PropsWithChildren<{
     leading?: React.ReactNode;
+    onClick?: React.MouseEventHandler<HTMLTableRowElement>;
 }>): JSX.Element;
 
 export declare function TableRowCheckbox({ rowIndex, onCheckboxChange, isDisabled, }: TableRowCheckboxProps): React.JSX.Element;