@uniformdev/design-system 20.50.2-alpha.1 → 20.50.2-alpha.39
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/esm/index.js +3294 -1741
- package/dist/index.d.mts +1019 -290
- package/dist/index.d.ts +1019 -290
- package/dist/index.js +3556 -1957
- package/package.json +8 -10
package/dist/index.d.mts
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import * as _emotion_react_jsx_runtime from '@emotion/react/jsx-runtime';
|
|
2
2
|
import { Decorator } from '@storybook/react-vite';
|
|
3
3
|
import * as React$1 from 'react';
|
|
4
|
-
import React__default, { RefObject, ReactElement, HTMLAttributes, ReactNode, ButtonHTMLAttributes, ImgHTMLAttributes, SVGProps, InputHTMLAttributes,
|
|
5
|
-
import { GroupBase, Props, MultiValue, SingleValue } from 'react-select';
|
|
4
|
+
import React__default, { RefObject, ReactElement, HTMLAttributes, ReactNode, ButtonHTMLAttributes, ImgHTMLAttributes, SVGProps, InputHTMLAttributes, HtmlHTMLAttributes, PropsWithChildren, CSSProperties, Ref, FocusEventHandler, ChangeEvent } from 'react';
|
|
5
|
+
import { GroupBase, Props, MultiValue, SingleValue, StylesConfig } from 'react-select';
|
|
6
6
|
export { ActionMeta, FormatOptionLabelContext, FormatOptionLabelMeta, GetOptionLabel, GetOptionValue, GroupBase, GroupHeadingProps, GroupProps, MenuListProps, MenuPlacement, MultiValue, MultiValueGenericProps, MultiValueProps, MultiValueRemoveProps, OnChangeValue, OptionContext, OptionProps, Options, OptionsOrGroups } from 'react-select';
|
|
7
7
|
import * as _emotion_react from '@emotion/react';
|
|
8
|
-
import { SerializedStyles } from '@emotion/react';
|
|
8
|
+
import { SerializedStyles, Interpolation, Theme as Theme$1 } from '@emotion/react';
|
|
9
9
|
import * as _ariakit_react from '@ariakit/react';
|
|
10
10
|
import { TooltipOptions, TooltipStoreProps, TooltipProps as TooltipProps$1, ButtonProps as ButtonProps$1, MenuStoreProps, PopoverStoreState, MenuProps as MenuProps$1, Menu as Menu$1, MenuItemProps as MenuItemProps$1, PopoverProps as PopoverProps$1, PopoverProviderProps, PopoverStore, TabStoreState, TabListProps, TabProps, TabPanelProps } from '@ariakit/react';
|
|
11
11
|
export { PopoverStore } from '@ariakit/react';
|
|
@@ -589,6 +589,19 @@ type ButtonWithVariantProps = Omit<ButtonProps, 'buttonType'> & {
|
|
|
589
589
|
*/
|
|
590
590
|
declare const Button: React$1.ForwardRefExoticComponent<(Omit<ButtonProps, "ref"> | Omit<ButtonWithVariantProps, "ref">) & React$1.RefAttributes<HTMLButtonElement>>;
|
|
591
591
|
|
|
592
|
+
type LinkButtonProps = ButtonProps$1 & {
|
|
593
|
+
/** React child node */
|
|
594
|
+
children?: React$1.ReactNode;
|
|
595
|
+
/** (optional) sets whether the link is truncated or not */
|
|
596
|
+
truncated?: boolean;
|
|
597
|
+
};
|
|
598
|
+
/**
|
|
599
|
+
* @deprecated - Beta - A button styled as a link with ghost-like appearance.
|
|
600
|
+
* Features no padding, left-aligned content, text truncation, and no background hover color.
|
|
601
|
+
* @example <LinkButton onClick={() => {}}>Click me</LinkButton>
|
|
602
|
+
*/
|
|
603
|
+
declare const LinkButton: React$1.ForwardRefExoticComponent<Omit<LinkButtonProps, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
|
|
604
|
+
|
|
592
605
|
declare const rectangleRoundedIcon: IconType$1;
|
|
593
606
|
declare const cardIcon: IconType$1;
|
|
594
607
|
declare const imageTextIcon: IconType$1;
|
|
@@ -1451,12 +1464,25 @@ declare const ButtonWithMenu: ({ onButtonClick, buttonText, icon, disabled, chil
|
|
|
1451
1464
|
* A string in the ISO 8601 date format: YYYY-MM-DD
|
|
1452
1465
|
*/
|
|
1453
1466
|
type IsoDateString = string;
|
|
1467
|
+
type CalendarCellCss = Interpolation<Theme$1> | null | false | undefined;
|
|
1468
|
+
/**
|
|
1469
|
+
* Optional style overrides for calendar sub-elements.
|
|
1470
|
+
*/
|
|
1471
|
+
type CalendarStyles = {
|
|
1472
|
+
/**
|
|
1473
|
+
* Returns custom styles to append to a date cell.
|
|
1474
|
+
*/
|
|
1475
|
+
calendarCell?: (date: Date) => CalendarCellCss[];
|
|
1476
|
+
};
|
|
1454
1477
|
type CalendarProps = Pick<CalendarProps$1<DateValue>, 'autoFocus' | 'isDisabled' | 'isReadOnly' | 'isInvalid'> & Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'onBlur' | 'onFocus'> & {
|
|
1455
1478
|
value: IsoDateString | null | undefined;
|
|
1456
1479
|
timeZone: string;
|
|
1457
1480
|
minValue?: IsoDateString;
|
|
1458
1481
|
maxValue?: IsoDateString;
|
|
1459
1482
|
onChange?: (value: IsoDateString) => void;
|
|
1483
|
+
styles?: CalendarStyles;
|
|
1484
|
+
withTodayButton?: boolean;
|
|
1485
|
+
isDateUnavailable?: (date: Date) => boolean;
|
|
1460
1486
|
};
|
|
1461
1487
|
/**
|
|
1462
1488
|
* A Calendar Grid which allows the user to navigate
|
|
@@ -1464,7 +1490,7 @@ type CalendarProps = Pick<CalendarProps$1<DateValue>, 'autoFocus' | 'isDisabled'
|
|
|
1464
1490
|
*
|
|
1465
1491
|
* @deprecated This component is in beta, name and props are subject to change without a major version
|
|
1466
1492
|
*/
|
|
1467
|
-
declare const Calendar: ({ value, timeZone, minValue, maxValue, onChange, autoFocus, isDisabled, isInvalid, isReadOnly, ...props }: CalendarProps) => _emotion_react_jsx_runtime.JSX.Element;
|
|
1493
|
+
declare const Calendar: ({ value, timeZone, minValue, maxValue, onChange, styles: stylesProp, autoFocus, isDisabled, isInvalid, isReadOnly, withTodayButton, isDateUnavailable, ...props }: CalendarProps) => _emotion_react_jsx_runtime.JSX.Element;
|
|
1468
1494
|
|
|
1469
1495
|
/** Callout button types available to use with our brand */
|
|
1470
1496
|
type CalloutType = 'caution' | 'danger' | 'info' | 'note' | 'success' | 'tip' | 'error';
|
|
@@ -1561,7 +1587,7 @@ declare const CardContainer: ({ bgColor, padding, withLastColumn, children, ...p
|
|
|
1561
1587
|
*/
|
|
1562
1588
|
declare const LoadingCardSkeleton: () => _emotion_react_jsx_runtime.JSX.Element;
|
|
1563
1589
|
|
|
1564
|
-
type ChipSizeProp = 'xs' | 'sm' | 'md';
|
|
1590
|
+
type ChipSizeProp = 'xxs' | 'xs' | 'sm' | 'md';
|
|
1565
1591
|
type ChipTheme = 'accent-light' | 'accent-dark' | 'accent-alt-light' | 'accent-alt-dark' | 'neutral-light' | 'neutral-dark' | 'utility-caution' | 'utility-danger' | 'utility-info' | 'utility-success';
|
|
1566
1592
|
type ChipProps = {
|
|
1567
1593
|
icon?: IconType;
|
|
@@ -1790,6 +1816,8 @@ type DateTimePickerProps = {
|
|
|
1790
1816
|
offset?: number;
|
|
1791
1817
|
/** (optional) sets whether to render the popover in a portal */
|
|
1792
1818
|
portal?: boolean;
|
|
1819
|
+
/** (optional) reduces input height to match compact parameter inputs */
|
|
1820
|
+
compact?: boolean;
|
|
1793
1821
|
};
|
|
1794
1822
|
/**
|
|
1795
1823
|
* Use this context for slots within the date time picker
|
|
@@ -1809,7 +1837,7 @@ declare function useDateTimePickerContext(): {
|
|
|
1809
1837
|
* Subcomponents can manipulate the value directly by using
|
|
1810
1838
|
* the `useDateTimePickerContext()` hook.
|
|
1811
1839
|
*/
|
|
1812
|
-
declare const DateTimePicker: ({ id, label, triggerIcon, value, minVisible, maxVisible, variant, caption, placeholder, belowTimeInputSlot, showLabel, errorMessage, warningMessage, disabled, onChange, offset, testId, placement, portal, ...props }: DateTimePickerProps) => _emotion_react_jsx_runtime.JSX.Element;
|
|
1840
|
+
declare const DateTimePicker: ({ id, label, triggerIcon, value, minVisible, maxVisible, variant, caption, placeholder, belowTimeInputSlot, showLabel, errorMessage, warningMessage, disabled, onChange, offset, testId, placement, portal, compact, ...props }: DateTimePickerProps) => _emotion_react_jsx_runtime.JSX.Element;
|
|
1813
1841
|
|
|
1814
1842
|
declare function DateTimePickerSummary({ value, placeholder, }: {
|
|
1815
1843
|
value: DateTimePickerValue | null | undefined;
|
|
@@ -2719,209 +2747,6 @@ type KeyValueInputProps<TValue extends string = string> = {
|
|
|
2719
2747
|
*/
|
|
2720
2748
|
declare const KeyValueInput: <TValue extends string = string>({ value, onChange, label, newItemDefault, keyLabel, valueLabel, iconLabel, keyInfoPopover, valueInfoPopover, iconInfoPopover, disabled, errors, onFocusChange, showIconColumn, renderIconSelector, }: KeyValueInputProps<TValue>) => _emotion_react_jsx_runtime.JSX.Element;
|
|
2721
2749
|
|
|
2722
|
-
type AsideAndSectionLayout = {
|
|
2723
|
-
/** sets child components in the aside / supporting column */
|
|
2724
|
-
sidebar?: ReactNode;
|
|
2725
|
-
/** sets child components in the section / main content column */
|
|
2726
|
-
children: ReactNode;
|
|
2727
|
-
/** Makes the sidebar sticky to the top of the container
|
|
2728
|
-
* @default false
|
|
2729
|
-
*/
|
|
2730
|
-
isStickyAside?: boolean;
|
|
2731
|
-
};
|
|
2732
|
-
declare const AsideAndSectionLayout: ({ sidebar, children, isStickyAside, }: AsideAndSectionLayout) => _emotion_react_jsx_runtime.JSX.Element;
|
|
2733
|
-
|
|
2734
|
-
type SpacingProp = '0' | '2xs' | 'xs' | 'sm' | 'base' | 'md' | 'lg' | 'xl' | '2xl';
|
|
2735
|
-
type BackgroundColorProp = 'transparent' | 'white' | 'gray-50' | 'gray-100' | 'gray-200' | 'gray-300' | 'gray-400' | 'gray-500' | 'gray-600' | 'gray-700' | 'gray-800' | 'gray-900';
|
|
2736
|
-
type HtmlTagProps = 'div' | 'section' | 'article' | 'aside' | 'span';
|
|
2737
|
-
type BorderRadiusProps = 'rounded-sm' | 'rounded-base' | 'rounded-md';
|
|
2738
|
-
type CommonContainerProps = {
|
|
2739
|
-
/** sets the background color of the element */
|
|
2740
|
-
backgroundColor?: BackgroundColorProp;
|
|
2741
|
-
/** sets border: 1px solid var(--gray-300)*/
|
|
2742
|
-
border?: boolean;
|
|
2743
|
-
/** sets the border radius of the element */
|
|
2744
|
-
rounded?: BorderRadiusProps;
|
|
2745
|
-
/** sets the padding of the element */
|
|
2746
|
-
padding?: string;
|
|
2747
|
-
/** sets the margin of the element */
|
|
2748
|
-
margin?: string;
|
|
2749
|
-
};
|
|
2750
|
-
type RhythmProps = React.HTMLAttributes<HTMLDivElement | HTMLFieldSetElement> & {
|
|
2751
|
-
/** sets the wrapping html tag
|
|
2752
|
-
* @default 'div'
|
|
2753
|
-
*/
|
|
2754
|
-
tag?: HtmlTagProps | 'fieldset';
|
|
2755
|
-
/** sets the spacing between each element
|
|
2756
|
-
* @default 'div'
|
|
2757
|
-
*/
|
|
2758
|
-
gap?: SpacingProp;
|
|
2759
|
-
/** sets the alignment of elements
|
|
2760
|
-
* @default normal browser behaviour
|
|
2761
|
-
*/
|
|
2762
|
-
align?: CSSProperties['alignItems'];
|
|
2763
|
-
justify?: CSSProperties['justifyContent'];
|
|
2764
|
-
children: React.ReactNode;
|
|
2765
|
-
/** for use when fieldset is applied to the tag prop */
|
|
2766
|
-
disabled?: boolean;
|
|
2767
|
-
ref?: Ref<HTMLDivElement>;
|
|
2768
|
-
};
|
|
2769
|
-
|
|
2770
|
-
type ContainerProps = CommonContainerProps & React$1.HTMLAttributes<HTMLDivElement> & {
|
|
2771
|
-
tag?: HtmlTagProps;
|
|
2772
|
-
children: React$1.ReactNode;
|
|
2773
|
-
};
|
|
2774
|
-
declare const Container: ({ tag, backgroundColor, border, rounded, padding, margin, children, ...props }: ContainerProps) => _emotion_react_jsx_runtime.JSX.Element;
|
|
2775
|
-
|
|
2776
|
-
declare const HorizontalRhythm: ({ align, justify, tag, gap, children, ref, ...props }: RhythmProps) => _emotion_react_jsx_runtime.JSX.Element;
|
|
2777
|
-
|
|
2778
|
-
type TwoColumnLayoutProps = {
|
|
2779
|
-
/** sets the full bleed background colour
|
|
2780
|
-
* @default 'var(--white)'
|
|
2781
|
-
*/
|
|
2782
|
-
bgColor?: 'var(--white)' | 'var(--gray-50)';
|
|
2783
|
-
/** sets child components in the aside / supporting column */
|
|
2784
|
-
supportingContent?: ReactNode;
|
|
2785
|
-
/** sets child components in the section / main content column */
|
|
2786
|
-
children?: ReactNode;
|
|
2787
|
-
/** inverts the layout placing the aside container on the left
|
|
2788
|
-
* @default false
|
|
2789
|
-
*/
|
|
2790
|
-
invertLayout?: boolean;
|
|
2791
|
-
};
|
|
2792
|
-
/** @example <TwoColumnLayout supportingContent={<div>supporting content</div>}><h1>title</h1></TwoColumnLayout> */
|
|
2793
|
-
declare const TwoColumnLayout: ({ bgColor, invertLayout, supportingContent, children, }: TwoColumnLayoutProps) => _emotion_react_jsx_runtime.JSX.Element;
|
|
2794
|
-
|
|
2795
|
-
declare const VerticalRhythm: ({ align, justify, tag, gap, children, ref, ...props }: RhythmProps) => _emotion_react_jsx_runtime.JSX.Element;
|
|
2796
|
-
|
|
2797
|
-
type LimitsBarProps = {
|
|
2798
|
-
/** The current value of used limits */
|
|
2799
|
-
current: number;
|
|
2800
|
-
/** The maximum number of limits */
|
|
2801
|
-
max: number;
|
|
2802
|
-
/** @deprecated No longer used */
|
|
2803
|
-
label?: string;
|
|
2804
|
-
/** Optional popover content for info icon */
|
|
2805
|
-
popoverContent?: ReactNode;
|
|
2806
|
-
};
|
|
2807
|
-
/**
|
|
2808
|
-
* Uniform Limits Bar Component
|
|
2809
|
-
* @example <LimitsBar current={3} max={5} />
|
|
2810
|
-
*/
|
|
2811
|
-
declare const LimitsBar: ({ current, max, popoverContent }: LimitsBarProps) => _emotion_react_jsx_runtime.JSX.Element;
|
|
2812
|
-
|
|
2813
|
-
type LinkListProps = React$1.HTMLAttributes<HTMLDivElement> & {
|
|
2814
|
-
/** sets the title field */
|
|
2815
|
-
title: string;
|
|
2816
|
-
/** (optional) sets react child component */
|
|
2817
|
-
children?: React$1.ReactNode;
|
|
2818
|
-
};
|
|
2819
|
-
declare const LinkList: ({ title, children, ...props }: LinkListProps) => _emotion_react_jsx_runtime.JSX.Element;
|
|
2820
|
-
|
|
2821
|
-
type ScrollableListProps = React$1.HTMLAttributes<HTMLDivElement> & {
|
|
2822
|
-
/** (optional) sets the label value */
|
|
2823
|
-
label?: string;
|
|
2824
|
-
/** (optional) allows users to add child components within the container */
|
|
2825
|
-
children?: React$1.ReactNode;
|
|
2826
|
-
};
|
|
2827
|
-
/**
|
|
2828
|
-
* Component that sets the base structure for scrollable content in a max height container
|
|
2829
|
-
* @example <ScrollableList label="allowed content types"><button>say hello</button></ScrollableList>
|
|
2830
|
-
*/
|
|
2831
|
-
declare const ScrollableList: ({ label, children, ...props }: ScrollableListProps) => _emotion_react_jsx_runtime.JSX.Element;
|
|
2832
|
-
|
|
2833
|
-
type ScrollableListContainerProps = {
|
|
2834
|
-
/** sets whether to show or hide the shadow around the element
|
|
2835
|
-
* @default 'false'
|
|
2836
|
-
*/
|
|
2837
|
-
disableShadow?: boolean;
|
|
2838
|
-
/** sets the active style of the button */
|
|
2839
|
-
active: boolean;
|
|
2840
|
-
};
|
|
2841
|
-
|
|
2842
|
-
type ScrollableItemProps = {
|
|
2843
|
-
/** sets an element within the label > span element */
|
|
2844
|
-
icon?: React.ReactElement;
|
|
2845
|
-
/**sets the label value */
|
|
2846
|
-
label: string | React.ReactElement;
|
|
2847
|
-
/** sets a data-testid on the label */
|
|
2848
|
-
labelTestId?: string;
|
|
2849
|
-
/** recommended to use a form input element of type radio or checkbox */
|
|
2850
|
-
children: React.ReactNode;
|
|
2851
|
-
} & ScrollableListContainerProps;
|
|
2852
|
-
/** @example <ScrollableListInputItem label="my label" active={true}><input type="radio" name="age" /></ScrollableListInputItem>*/
|
|
2853
|
-
declare const ScrollableListInputItem: ({ label, icon, active, disableShadow, children, labelTestId, ...props }: ScrollableItemProps) => _emotion_react_jsx_runtime.JSX.Element;
|
|
2854
|
-
|
|
2855
|
-
type ScrollableListItemProps = React$1.ButtonHTMLAttributes<HTMLButtonElement> & {
|
|
2856
|
-
/** sets the button text value */
|
|
2857
|
-
buttonText: string;
|
|
2858
|
-
icon?: React$1.ReactElement;
|
|
2859
|
-
} & ScrollableListContainerProps;
|
|
2860
|
-
/**
|
|
2861
|
-
* Component used within <ScrollableList /> for adding interactive button components with predefined styles
|
|
2862
|
-
* @example <ScrollableListItem buttontext="my button" active={false} />
|
|
2863
|
-
*/
|
|
2864
|
-
declare const ScrollableListItem: ({ buttonText, icon, active, disableShadow, ...props }: ScrollableListItemProps) => _emotion_react_jsx_runtime.JSX.Element;
|
|
2865
|
-
|
|
2866
|
-
type LoadingIndicatorProps = {
|
|
2867
|
-
color?: 'gray' | 'accent-alt';
|
|
2868
|
-
size?: 'lg' | 'sm';
|
|
2869
|
-
} & Omit<HTMLAttributes<HTMLDivElement>, 'color'>;
|
|
2870
|
-
/**
|
|
2871
|
-
* Loading Indicator
|
|
2872
|
-
* @example <LoadingIndicator />
|
|
2873
|
-
*/
|
|
2874
|
-
declare const LoadingIndicator: ({ size, color, ...props }: LoadingIndicatorProps) => _emotion_react_jsx_runtime.JSX.Element;
|
|
2875
|
-
|
|
2876
|
-
interface LoadingOverlayProps {
|
|
2877
|
-
/** sets whether to display the loading overlay components */
|
|
2878
|
-
isActive: boolean;
|
|
2879
|
-
/** (optional) type that sets a text value or React component under the loading icon */
|
|
2880
|
-
statusMessage?: string | ReactNode;
|
|
2881
|
-
/** (optional) the z-index value of the overlay
|
|
2882
|
-
* @default 9999
|
|
2883
|
-
*/
|
|
2884
|
-
zIndex?: number;
|
|
2885
|
-
/** (optional) sets the width and height of the loader
|
|
2886
|
-
* @default 128
|
|
2887
|
-
*/
|
|
2888
|
-
loaderSize?: number;
|
|
2889
|
-
/** (optional) sets the loading overlay background color
|
|
2890
|
-
* @default 'var(--white)'
|
|
2891
|
-
*/
|
|
2892
|
-
overlayBackgroundColor?: 'transparent' | 'var(--white)';
|
|
2893
|
-
/** (optional) if set to true, the animation of the loading indicator is paused
|
|
2894
|
-
* @default false
|
|
2895
|
-
*/
|
|
2896
|
-
isPaused?: boolean;
|
|
2897
|
-
/** (optional) aligns the content of the overlay to the top instead of having it centered
|
|
2898
|
-
* @default false
|
|
2899
|
-
*/
|
|
2900
|
-
isTopAligned?: boolean;
|
|
2901
|
-
children?: React.ReactNode;
|
|
2902
|
-
/** (optional) sets the position of the overlay
|
|
2903
|
-
* @default 'absolute'
|
|
2904
|
-
*/
|
|
2905
|
-
position?: 'absolute' | 'fixed';
|
|
2906
|
-
}
|
|
2907
|
-
/**
|
|
2908
|
-
* Loading Overlay.
|
|
2909
|
-
* NOTE: the container/parent element must have a non-static `position` value for the overlay to work properly.
|
|
2910
|
-
* @example <LoadingOverlay isActive={true} statusMessage="Loading..." />
|
|
2911
|
-
*/
|
|
2912
|
-
declare const LoadingOverlay: ({ isActive, statusMessage, zIndex, loaderSize, overlayBackgroundColor, isTopAligned, isPaused, children, position, }: LoadingOverlayProps) => _emotion_react_jsx_runtime.JSX.Element;
|
|
2913
|
-
interface LoadingIconProps extends HTMLAttributes<SVGSVGElement> {
|
|
2914
|
-
/** (optional) prop that sets a number value for the height of the icon */
|
|
2915
|
-
width?: number;
|
|
2916
|
-
/** (optional) prop that sets a number value for the width of the icon */
|
|
2917
|
-
height?: number;
|
|
2918
|
-
}
|
|
2919
|
-
/**
|
|
2920
|
-
* Loading Icon
|
|
2921
|
-
* @example <LoadingIcon height={128} width={128} />
|
|
2922
|
-
*/
|
|
2923
|
-
declare const LoadingIcon: ({ height, width, ...props }: LoadingIconProps) => _emotion_react_jsx_runtime.JSX.Element;
|
|
2924
|
-
|
|
2925
2750
|
interface DropdownStyleMenuTriggerProps extends React.HTMLAttributes<HTMLButtonElement> {
|
|
2926
2751
|
children: React.ReactNode;
|
|
2927
2752
|
/** sets the background color of the button */
|
|
@@ -2971,6 +2796,8 @@ interface MenuProps extends MenuProps$1 {
|
|
|
2971
2796
|
* @default 'base'
|
|
2972
2797
|
*/
|
|
2973
2798
|
size?: 'small' | 'base';
|
|
2799
|
+
/** (optional) disables the menu trigger so the menu cannot be opened */
|
|
2800
|
+
disabled?: boolean;
|
|
2974
2801
|
}
|
|
2975
2802
|
/**
|
|
2976
2803
|
* Component used for creating clickable menus
|
|
@@ -3102,6 +2929,8 @@ type SearchableMenuProps = {
|
|
|
3102
2929
|
disableSearch?: boolean;
|
|
3103
2930
|
/** Sets the placeholder in the search input */
|
|
3104
2931
|
searchPlaceholder?: string;
|
|
2932
|
+
/** Called when Enter is pressed in the search input and no active menu item handles the event */
|
|
2933
|
+
onSearchEnterKeyDown?: () => void;
|
|
3105
2934
|
} & MenuProps;
|
|
3106
2935
|
/**
|
|
3107
2936
|
* Searchable menu allows searching through its menu items
|
|
@@ -3109,163 +2938,743 @@ type SearchableMenuProps = {
|
|
|
3109
2938
|
declare const SearchableMenu: (props: SearchableMenuProps) => _emotion_react_jsx_runtime.JSX.Element;
|
|
3110
2939
|
|
|
3111
2940
|
interface SelectableMenuItemProps extends PropsWithChildren<Omit<MenuItemProps, 'children'>> {
|
|
2941
|
+
/** whether the menu item is selected */
|
|
3112
2942
|
selected: boolean;
|
|
2943
|
+
/** the styles to use for the selectable menu item
|
|
2944
|
+
* @default 'default'
|
|
2945
|
+
*/
|
|
2946
|
+
selectStyles?: 'default' | 'checkbox-select';
|
|
2947
|
+
/** whether the menu item is selectable
|
|
2948
|
+
* @default true
|
|
2949
|
+
*/
|
|
2950
|
+
isSelectable?: boolean;
|
|
3113
2951
|
}
|
|
3114
|
-
declare function SelectableMenuItem({ selected, children, ...menuItemProps }: SelectableMenuItemProps): _emotion_react_jsx_runtime.JSX.Element;
|
|
2952
|
+
declare function SelectableMenuItem({ selected, children, selectStyles, isSelectable, ...menuItemProps }: SelectableMenuItemProps): _emotion_react_jsx_runtime.JSX.Element;
|
|
3115
2953
|
|
|
3116
|
-
type
|
|
3117
|
-
|
|
3118
|
-
|
|
3119
|
-
/**
|
|
3120
|
-
*
|
|
3121
|
-
* If undefined is passed, the modal will not be closable by the user and the close button will not be rendered.
|
|
2954
|
+
type SwatchSize = 'default' | 'small';
|
|
2955
|
+
type SwatchVariant = 'swatch-default' | 'swatch-red' | 'swatch-orange' | 'swatch-yellow' | 'swatch-green' | 'swatch-blue' | 'swatch-purple' | 'swatch-pink' | 'swatch-brown' | 'swatch-gray';
|
|
2956
|
+
type SwatchProps = {
|
|
2957
|
+
/** sets the size of the swatch
|
|
2958
|
+
* @default 'default'
|
|
3122
2959
|
*/
|
|
3123
|
-
|
|
3124
|
-
/**
|
|
3125
|
-
*
|
|
3126
|
-
* @default 'lg'
|
|
2960
|
+
size?: SwatchSize;
|
|
2961
|
+
/** sets the color variant of the swatch
|
|
2962
|
+
* @default 'swatch-default'
|
|
3127
2963
|
*/
|
|
3128
|
-
|
|
3129
|
-
/**
|
|
3130
|
-
|
|
3131
|
-
/** A valid CSS height */
|
|
3132
|
-
height?: string;
|
|
3133
|
-
/** Removes the default padding on the content wrapper */
|
|
3134
|
-
withoutContentPadding?: boolean;
|
|
3135
|
-
/** Removes the default background color of the content wrapper */
|
|
3136
|
-
withoutContentBackground?: boolean;
|
|
3137
|
-
/** Places buttons at the bottom of the modal */
|
|
3138
|
-
buttonGroup?: ReactNode;
|
|
3139
|
-
/**
|
|
3140
|
-
* Disables scrolling of the modal body if the content exceeds the height.
|
|
3141
|
-
* Can be required for modals that have comboboxes where the menu items are expected
|
|
3142
|
-
* to overflow the bounds of the modal.
|
|
2964
|
+
variant?: SwatchVariant;
|
|
2965
|
+
/** sets the tooltip of the swatch
|
|
2966
|
+
* @default undefined
|
|
3143
2967
|
*/
|
|
3144
|
-
|
|
3145
|
-
|
|
2968
|
+
tooltip?: string;
|
|
2969
|
+
/** sets the test id of the swatch
|
|
2970
|
+
* @default 'swatch'
|
|
2971
|
+
*/
|
|
2972
|
+
testId?: string;
|
|
2973
|
+
};
|
|
2974
|
+
/** @example <Swatch variant="swatch-blue" size="default" /> */
|
|
2975
|
+
declare const Swatch: ({ size, variant, tooltip, testId, }: SwatchProps) => _emotion_react_jsx_runtime.JSX.Element;
|
|
2976
|
+
|
|
2977
|
+
/** Swatch color CSS custom properties
|
|
2978
|
+
* Exports CSS variables for all swatch variants that can be used in other components.
|
|
2979
|
+
* Each variant has --swatch-{variant}-bg and --swatch-{variant}-border variables.
|
|
2980
|
+
* @example <div css={swatchColors}></div>
|
|
2981
|
+
* @example css-in-js my-component { ${swatchColors} }
|
|
2982
|
+
*/
|
|
2983
|
+
declare const swatchColors: _emotion_react.SerializedStyles;
|
|
3146
2984
|
/**
|
|
3147
|
-
*
|
|
3148
|
-
*
|
|
2985
|
+
* Swatch variant styles as plain objects.
|
|
2986
|
+
* Works with both Emotion's css prop and react-select's styles API.
|
|
2987
|
+
* @example <div css={swatchVariant['swatch-blue']}></div>
|
|
2988
|
+
* @example styles={{ multiValue: (base, { data }) => ({ ...base, ...swatchVariant[data.color] }) }}
|
|
3149
2989
|
*/
|
|
3150
|
-
declare const
|
|
2990
|
+
declare const swatchVariant: {
|
|
2991
|
+
readonly 'swatch-default': {
|
|
2992
|
+
readonly '--variant-bg': "var(--swatch-default-bg)";
|
|
2993
|
+
readonly '--variant-border': "var(--swatch-default-border)";
|
|
2994
|
+
};
|
|
2995
|
+
readonly 'swatch-gray': {
|
|
2996
|
+
readonly '--variant-bg': "var(--swatch-gray-bg)";
|
|
2997
|
+
readonly '--variant-border': "var(--swatch-gray-border)";
|
|
2998
|
+
};
|
|
2999
|
+
readonly 'swatch-brown': {
|
|
3000
|
+
readonly '--variant-bg': "var(--swatch-brown-bg)";
|
|
3001
|
+
readonly '--variant-border': "var(--swatch-brown-border)";
|
|
3002
|
+
};
|
|
3003
|
+
readonly 'swatch-orange': {
|
|
3004
|
+
readonly '--variant-bg': "var(--swatch-orange-bg)";
|
|
3005
|
+
readonly '--variant-border': "var(--swatch-orange-border)";
|
|
3006
|
+
};
|
|
3007
|
+
readonly 'swatch-yellow': {
|
|
3008
|
+
readonly '--variant-bg': "var(--swatch-yellow-bg)";
|
|
3009
|
+
readonly '--variant-border': "var(--swatch-yellow-border)";
|
|
3010
|
+
};
|
|
3011
|
+
readonly 'swatch-green': {
|
|
3012
|
+
readonly '--variant-bg': "var(--swatch-green-bg)";
|
|
3013
|
+
readonly '--variant-border': "var(--swatch-green-border)";
|
|
3014
|
+
};
|
|
3015
|
+
readonly 'swatch-blue': {
|
|
3016
|
+
readonly '--variant-bg': "var(--swatch-blue-bg)";
|
|
3017
|
+
readonly '--variant-border': "var(--swatch-blue-border)";
|
|
3018
|
+
};
|
|
3019
|
+
readonly 'swatch-purple': {
|
|
3020
|
+
readonly '--variant-bg': "var(--swatch-purple-bg)";
|
|
3021
|
+
readonly '--variant-border': "var(--swatch-purple-border)";
|
|
3022
|
+
};
|
|
3023
|
+
readonly 'swatch-pink': {
|
|
3024
|
+
readonly '--variant-bg': "var(--swatch-pink-bg)";
|
|
3025
|
+
readonly '--variant-border': "var(--swatch-pink-border)";
|
|
3026
|
+
};
|
|
3027
|
+
readonly 'swatch-red': {
|
|
3028
|
+
readonly '--variant-bg': "var(--swatch-red-bg)";
|
|
3029
|
+
readonly '--variant-border': "var(--swatch-red-border)";
|
|
3030
|
+
};
|
|
3031
|
+
};
|
|
3032
|
+
|
|
3033
|
+
/**
|
|
3034
|
+
* SwatchComboBoxLabelStyles provides custom styles for react-select's multiValue and multiValueLabel.
|
|
3035
|
+
* Dynamically applies color based on each option's color property.
|
|
3036
|
+
* @returns A StylesConfig object with customized styles.
|
|
3037
|
+
*/
|
|
3038
|
+
declare const SwatchComboBoxLabelStyles: <TOption, IsMulti extends boolean = boolean, TGroup extends ComboBoxGroupBase<TOption> = ComboBoxGroupBase<TOption>>() => StylesConfig<TOption, IsMulti, TGroup>;
|
|
3039
|
+
declare function SwatchComboBox<TOption = InputComboBoxOption & {
|
|
3040
|
+
color: SwatchVariant;
|
|
3041
|
+
}, IsMulti extends boolean = false, TGroup extends ComboBoxGroupBase<TOption> = ComboBoxGroupBase<TOption>>({ labelTitle, caption, isMulti, ...props }: InputComboBoxProps<TOption, IsMulti, TGroup> & {
|
|
3042
|
+
labelTitle?: string;
|
|
3043
|
+
caption?: string;
|
|
3044
|
+
isMulti?: boolean;
|
|
3045
|
+
}): _emotion_react_jsx_runtime.JSX.Element;
|
|
3046
|
+
|
|
3047
|
+
type SwatchLabelProps = {
|
|
3048
|
+
/** Sets the color variant of the swatch label
|
|
3049
|
+
* @default 'swatch-default'
|
|
3050
|
+
*/
|
|
3051
|
+
variant?: SwatchVariant;
|
|
3052
|
+
/** The text to display inside the swatch label */
|
|
3053
|
+
label: string;
|
|
3054
|
+
/** The size of the swatch label
|
|
3055
|
+
* @default 'default'
|
|
3056
|
+
*/
|
|
3057
|
+
size?: 'xs' | 'sm' | 'md';
|
|
3058
|
+
/** The right slot to display inside the swatch label */
|
|
3059
|
+
rightSlot?: React.ReactNode;
|
|
3060
|
+
/** The tooltip to display inside the swatch label */
|
|
3061
|
+
tooltip?: string | React.ReactElement;
|
|
3062
|
+
/** The left slot to display inside the swatch label */
|
|
3063
|
+
leftSlot?: React.ReactNode;
|
|
3064
|
+
};
|
|
3065
|
+
/**
|
|
3066
|
+
* A colored label component that uses the same color variants as Swatch.
|
|
3067
|
+
* @example <SwatchLabel variant="swatch-blue" label="Blue Label" />
|
|
3068
|
+
*/
|
|
3069
|
+
declare const SwatchLabel: ({ variant, size, label, rightSlot, tooltip, leftSlot, }: SwatchLabelProps) => _emotion_react_jsx_runtime.JSX.Element;
|
|
3070
|
+
declare const SwatchLabelRemoveButton: ({ onRemove, size, }: {
|
|
3071
|
+
/** The function to call when the remove button is clicked */
|
|
3072
|
+
onRemove: () => void;
|
|
3073
|
+
/** The size of the remove button
|
|
3074
|
+
* @default 'sm'
|
|
3075
|
+
*/
|
|
3076
|
+
size?: SwatchLabelProps["size"];
|
|
3077
|
+
}) => _emotion_react_jsx_runtime.JSX.Element;
|
|
3078
|
+
/**
|
|
3079
|
+
* A tooltip component that displays a swatch label with a parent title and a description.
|
|
3080
|
+
* @example <SwatchLabelTooltip parentTitle="Parent Title" title="Title" description="Description" />
|
|
3081
|
+
*/
|
|
3082
|
+
declare const SwatchLabelTooltip: ({ parentTitle, title, description, }: {
|
|
3083
|
+
parentTitle?: string | React.ReactElement;
|
|
3084
|
+
title?: string | React.ReactElement;
|
|
3085
|
+
description?: string | React.ReactElement;
|
|
3086
|
+
}) => _emotion_react_jsx_runtime.JSX.Element;
|
|
3087
|
+
|
|
3088
|
+
/** Represents a label item that can be displayed in the quick filter */
|
|
3089
|
+
type LabelsQuickFilterItem = {
|
|
3090
|
+
/** Unique identifier for the label */
|
|
3091
|
+
id: string;
|
|
3092
|
+
/** Display name for the label */
|
|
3093
|
+
name: string;
|
|
3094
|
+
/** Optional swatch variant color */
|
|
3095
|
+
variant?: SwatchVariant;
|
|
3096
|
+
/** Optional tooltip content */
|
|
3097
|
+
tooltip?: string | React.ReactElement;
|
|
3098
|
+
/** Whether this item represents a group header */
|
|
3099
|
+
isGroup?: boolean;
|
|
3100
|
+
/** The parent group ID if this label belongs to a group */
|
|
3101
|
+
parent?: string;
|
|
3102
|
+
};
|
|
3103
|
+
type LabelsQuickFilterProps = {
|
|
3104
|
+
/** The text to display on the filter button */
|
|
3105
|
+
buttonText: string;
|
|
3106
|
+
/** The text to display on the add button */
|
|
3107
|
+
addButtonText?: string | null;
|
|
3108
|
+
/** All available label items (including groups and children) */
|
|
3109
|
+
items: LabelsQuickFilterItem[];
|
|
3110
|
+
/** Set or array of currently selected item IDs */
|
|
3111
|
+
selectedIds: Set<string> | string[];
|
|
3112
|
+
/** Callback when a label is selected */
|
|
3113
|
+
onSelect: (item: LabelsQuickFilterItem) => void;
|
|
3114
|
+
/** Callback when a label is deselected */
|
|
3115
|
+
onDeselect: (id: string) => void;
|
|
3116
|
+
/** Whether the filter is disabled */
|
|
3117
|
+
disabled?: boolean;
|
|
3118
|
+
/** Test ID for the component */
|
|
3119
|
+
testId?: string;
|
|
3120
|
+
/** Override the total results count (defaults to items.length excluding groups) */
|
|
3121
|
+
totalResults?: number;
|
|
3122
|
+
/** handles creating a new label */
|
|
3123
|
+
onCreateLabel?: (label: string) => void;
|
|
3124
|
+
/** sets whether to use a React portal rendering or not. */
|
|
3125
|
+
withoutPortal?: boolean;
|
|
3126
|
+
/**
|
|
3127
|
+
* The maximum width of the quick filter container.
|
|
3128
|
+
* Useful for controlling the maximum width of the filter in different layouts (e.g., responsive sidebars).
|
|
3129
|
+
* @default '4rem'
|
|
3130
|
+
*/
|
|
3131
|
+
maxContainerSize?: string;
|
|
3132
|
+
/** the function to call when the quick filter is opened */
|
|
3133
|
+
onOpen?: () => void;
|
|
3134
|
+
/** the function to call when the quick filter is closed */
|
|
3135
|
+
onClose?: () => void;
|
|
3136
|
+
/**
|
|
3137
|
+
* Override the Ariakit placement of the dropdown menu.
|
|
3138
|
+
* @default 'right-start'
|
|
3139
|
+
*/
|
|
3140
|
+
menuPlacement?: MenuProps['placement'];
|
|
3141
|
+
/**
|
|
3142
|
+
* Override the anchor rect for custom menu positioning.
|
|
3143
|
+
* Pass `null` to disable the built-in default and use standard positioning.
|
|
3144
|
+
*/
|
|
3145
|
+
menuGetAnchorRect?: ((anchor: HTMLElement | null) => {
|
|
3146
|
+
x?: number;
|
|
3147
|
+
y?: number;
|
|
3148
|
+
width?: number;
|
|
3149
|
+
height?: number;
|
|
3150
|
+
} | null) | null;
|
|
3151
|
+
/**
|
|
3152
|
+
* Override the updatePosition callback to control when the menu repositions.
|
|
3153
|
+
* Pass `null` to disable the built-in default (position freezing) and allow normal repositioning.
|
|
3154
|
+
*/
|
|
3155
|
+
menuUpdatePosition?: ((props: {
|
|
3156
|
+
updatePosition: () => Promise<void>;
|
|
3157
|
+
}) => void | Promise<void>) | null;
|
|
3158
|
+
/** the maximum number of results to display
|
|
3159
|
+
* @default 0 (no limit)
|
|
3160
|
+
*/
|
|
3161
|
+
maxCount?: number;
|
|
3162
|
+
};
|
|
3163
|
+
/**
|
|
3164
|
+
* A reusable quick filter component for selecting labels with swatch colors.
|
|
3165
|
+
* Supports flat labels and grouped labels with nested menus.
|
|
3166
|
+
* @example <LabelsQuickFilter buttonText="Filter by label" items={labels} selectedIds={selectedSet} onSelect={handleSelect} onDeselect={handleDeselect} />
|
|
3167
|
+
*/
|
|
3168
|
+
declare const LabelsQuickFilter: ({ buttonText, addButtonText, items, selectedIds, onSelect, onDeselect, disabled, testId, totalResults, onCreateLabel, withoutPortal, maxContainerSize, onOpen, onClose, menuPlacement, menuGetAnchorRect, menuUpdatePosition, maxCount, }: LabelsQuickFilterProps) => _emotion_react_jsx_runtime.JSX.Element;
|
|
3169
|
+
|
|
3170
|
+
type AsideAndSectionLayout = {
|
|
3171
|
+
/** sets child components in the aside / supporting column */
|
|
3172
|
+
sidebar?: ReactNode;
|
|
3173
|
+
/** sets child components in the section / main content column */
|
|
3174
|
+
children: ReactNode;
|
|
3175
|
+
/** Makes the sidebar sticky to the top of the container
|
|
3176
|
+
* @default false
|
|
3177
|
+
*/
|
|
3178
|
+
isStickyAside?: boolean;
|
|
3179
|
+
};
|
|
3180
|
+
declare const AsideAndSectionLayout: ({ sidebar, children, isStickyAside, }: AsideAndSectionLayout) => _emotion_react_jsx_runtime.JSX.Element;
|
|
3181
|
+
|
|
3182
|
+
type SpacingProp = '0' | '2xs' | 'xs' | 'sm' | 'base' | 'md' | 'lg' | 'xl' | '2xl';
|
|
3183
|
+
type BackgroundColorProp = 'transparent' | 'white' | 'gray-50' | 'gray-100' | 'gray-200' | 'gray-300' | 'gray-400' | 'gray-500' | 'gray-600' | 'gray-700' | 'gray-800' | 'gray-900';
|
|
3184
|
+
type HtmlTagProps = 'div' | 'section' | 'article' | 'aside' | 'span';
|
|
3185
|
+
type BorderRadiusProps = 'rounded-sm' | 'rounded-base' | 'rounded-md';
|
|
3186
|
+
type CommonContainerProps = {
|
|
3187
|
+
/** sets the background color of the element */
|
|
3188
|
+
backgroundColor?: BackgroundColorProp;
|
|
3189
|
+
/** sets border: 1px solid var(--gray-300)*/
|
|
3190
|
+
border?: boolean;
|
|
3191
|
+
/** sets the border radius of the element */
|
|
3192
|
+
rounded?: BorderRadiusProps;
|
|
3193
|
+
/** sets the padding of the element */
|
|
3194
|
+
padding?: string;
|
|
3195
|
+
/** sets the margin of the element */
|
|
3196
|
+
margin?: string;
|
|
3197
|
+
};
|
|
3198
|
+
type RhythmProps = React.HTMLAttributes<HTMLDivElement | HTMLFieldSetElement> & {
|
|
3199
|
+
/** sets the wrapping html tag
|
|
3200
|
+
* @default 'div'
|
|
3201
|
+
*/
|
|
3202
|
+
tag?: HtmlTagProps | 'fieldset';
|
|
3203
|
+
/** sets the spacing between each element
|
|
3204
|
+
* @default 'div'
|
|
3205
|
+
*/
|
|
3206
|
+
gap?: SpacingProp;
|
|
3207
|
+
/** sets the alignment of elements
|
|
3208
|
+
* @default normal browser behaviour
|
|
3209
|
+
*/
|
|
3210
|
+
align?: CSSProperties['alignItems'];
|
|
3211
|
+
justify?: CSSProperties['justifyContent'];
|
|
3212
|
+
children: React.ReactNode;
|
|
3213
|
+
/** for use when fieldset is applied to the tag prop */
|
|
3214
|
+
disabled?: boolean;
|
|
3215
|
+
ref?: Ref<HTMLDivElement>;
|
|
3216
|
+
};
|
|
3217
|
+
|
|
3218
|
+
type ContainerProps = CommonContainerProps & React$1.HTMLAttributes<HTMLDivElement> & {
|
|
3219
|
+
tag?: HtmlTagProps;
|
|
3220
|
+
children: React$1.ReactNode;
|
|
3221
|
+
};
|
|
3222
|
+
declare const Container: ({ tag, backgroundColor, border, rounded, padding, margin, children, ...props }: ContainerProps) => _emotion_react_jsx_runtime.JSX.Element;
|
|
3223
|
+
|
|
3224
|
+
declare const HorizontalRhythm: ({ align, justify, tag, gap, children, ref, ...props }: RhythmProps) => _emotion_react_jsx_runtime.JSX.Element;
|
|
3225
|
+
|
|
3226
|
+
type TwoColumnLayoutProps = {
|
|
3227
|
+
/** sets the full bleed background colour
|
|
3228
|
+
* @default 'var(--white)'
|
|
3229
|
+
*/
|
|
3230
|
+
bgColor?: 'var(--white)' | 'var(--gray-50)';
|
|
3231
|
+
/** sets child components in the aside / supporting column */
|
|
3232
|
+
supportingContent?: ReactNode;
|
|
3233
|
+
/** sets child components in the section / main content column */
|
|
3234
|
+
children?: ReactNode;
|
|
3235
|
+
/** inverts the layout placing the aside container on the left
|
|
3236
|
+
* @default false
|
|
3237
|
+
*/
|
|
3238
|
+
invertLayout?: boolean;
|
|
3239
|
+
};
|
|
3240
|
+
/** @example <TwoColumnLayout supportingContent={<div>supporting content</div>}><h1>title</h1></TwoColumnLayout> */
|
|
3241
|
+
declare const TwoColumnLayout: ({ bgColor, invertLayout, supportingContent, children, }: TwoColumnLayoutProps) => _emotion_react_jsx_runtime.JSX.Element;
|
|
3242
|
+
|
|
3243
|
+
declare const VerticalRhythm: ({ align, justify, tag, gap, children, ref, ...props }: RhythmProps) => _emotion_react_jsx_runtime.JSX.Element;
|
|
3244
|
+
|
|
3245
|
+
type LimitsBarProps = {
|
|
3246
|
+
/** The current value of used limits */
|
|
3247
|
+
current: number;
|
|
3248
|
+
/** The maximum number of limits */
|
|
3249
|
+
max: number;
|
|
3250
|
+
/** @deprecated No longer used */
|
|
3251
|
+
label?: string;
|
|
3252
|
+
/** Optional popover content for info icon */
|
|
3253
|
+
popoverContent?: ReactNode;
|
|
3254
|
+
/** Optional css value passed to the background color of the bar. Leave empty for dynamic color based on usage percentage. */
|
|
3255
|
+
barColor?: string;
|
|
3256
|
+
} & React.HTMLAttributes<HTMLDivElement>;
|
|
3257
|
+
/**
|
|
3258
|
+
* Uniform Limits Bar Component
|
|
3259
|
+
* @example <LimitsBar current={3} max={5} />
|
|
3260
|
+
*/
|
|
3261
|
+
declare const LimitsBar: ({ current, max, popoverContent, barColor, ...props }: LimitsBarProps) => _emotion_react_jsx_runtime.JSX.Element;
|
|
3262
|
+
|
|
3263
|
+
type LinkListProps = React$1.HTMLAttributes<HTMLDivElement> & {
|
|
3264
|
+
/** sets the title field */
|
|
3265
|
+
title: string;
|
|
3266
|
+
/** (optional) sets react child component */
|
|
3267
|
+
children?: React$1.ReactNode;
|
|
3268
|
+
};
|
|
3269
|
+
declare const LinkList: ({ title, children, ...props }: LinkListProps) => _emotion_react_jsx_runtime.JSX.Element;
|
|
3270
|
+
|
|
3271
|
+
type ScrollableListProps = React$1.HTMLAttributes<HTMLDivElement> & {
|
|
3272
|
+
/** (optional) sets the label value */
|
|
3273
|
+
label?: string;
|
|
3274
|
+
/** (optional) allows users to add child components within the container */
|
|
3275
|
+
children?: React$1.ReactNode;
|
|
3276
|
+
};
|
|
3277
|
+
/**
|
|
3278
|
+
* Component that sets the base structure for scrollable content in a max height container
|
|
3279
|
+
* @example <ScrollableList label="allowed content types"><button>say hello</button></ScrollableList>
|
|
3280
|
+
*/
|
|
3281
|
+
declare const ScrollableList: ({ label, children, ...props }: ScrollableListProps) => _emotion_react_jsx_runtime.JSX.Element;
|
|
3282
|
+
|
|
3283
|
+
type ScrollableListContainerProps = {
|
|
3284
|
+
/** sets whether to show or hide the shadow around the element
|
|
3285
|
+
* @default 'false'
|
|
3286
|
+
*/
|
|
3287
|
+
disableShadow?: boolean;
|
|
3288
|
+
/** sets the active style of the button */
|
|
3289
|
+
active: boolean;
|
|
3290
|
+
};
|
|
3291
|
+
|
|
3292
|
+
type ScrollableItemProps = {
|
|
3293
|
+
/** sets an element within the label > span element */
|
|
3294
|
+
icon?: React.ReactElement;
|
|
3295
|
+
/**sets the label value */
|
|
3296
|
+
label: string | React.ReactElement;
|
|
3297
|
+
/** sets a data-testid on the label */
|
|
3298
|
+
labelTestId?: string;
|
|
3299
|
+
/** recommended to use a form input element of type radio or checkbox */
|
|
3300
|
+
children: React.ReactNode;
|
|
3301
|
+
} & ScrollableListContainerProps;
|
|
3302
|
+
/** @example <ScrollableListInputItem label="my label" active={true}><input type="radio" name="age" /></ScrollableListInputItem>*/
|
|
3303
|
+
declare const ScrollableListInputItem: ({ label, icon, active, disableShadow, children, labelTestId, ...props }: ScrollableItemProps) => _emotion_react_jsx_runtime.JSX.Element;
|
|
3304
|
+
|
|
3305
|
+
type ScrollableListItemProps = React$1.ButtonHTMLAttributes<HTMLButtonElement> & {
|
|
3306
|
+
/** sets the button text value */
|
|
3307
|
+
buttonText: string;
|
|
3308
|
+
icon?: React$1.ReactElement;
|
|
3309
|
+
} & ScrollableListContainerProps;
|
|
3310
|
+
/**
|
|
3311
|
+
* Component used within <ScrollableList /> for adding interactive button components with predefined styles
|
|
3312
|
+
* @example <ScrollableListItem buttontext="my button" active={false} />
|
|
3313
|
+
*/
|
|
3314
|
+
declare const ScrollableListItem: ({ buttonText, icon, active, disableShadow, ...props }: ScrollableListItemProps) => _emotion_react_jsx_runtime.JSX.Element;
|
|
3315
|
+
|
|
3316
|
+
type LoadingIndicatorProps = {
|
|
3317
|
+
color?: 'gray' | 'accent-alt';
|
|
3318
|
+
size?: 'lg' | 'sm';
|
|
3319
|
+
} & Omit<HTMLAttributes<HTMLDivElement>, 'color'>;
|
|
3320
|
+
/**
|
|
3321
|
+
* Loading Indicator
|
|
3322
|
+
* @example <LoadingIndicator />
|
|
3323
|
+
*/
|
|
3324
|
+
declare const LoadingIndicator: ({ size, color, ...props }: LoadingIndicatorProps) => _emotion_react_jsx_runtime.JSX.Element;
|
|
3325
|
+
|
|
3326
|
+
interface LoadingOverlayProps {
|
|
3327
|
+
/** sets whether to display the loading overlay components */
|
|
3328
|
+
isActive: boolean;
|
|
3329
|
+
/** (optional) type that sets a text value or React component under the loading icon */
|
|
3330
|
+
statusMessage?: string | ReactNode;
|
|
3331
|
+
/** (optional) the z-index value of the overlay
|
|
3332
|
+
* @default 9999
|
|
3333
|
+
*/
|
|
3334
|
+
zIndex?: number;
|
|
3335
|
+
/** (optional) sets the width and height of the loader
|
|
3336
|
+
* @default 128
|
|
3337
|
+
*/
|
|
3338
|
+
loaderSize?: number;
|
|
3339
|
+
/** (optional) sets the loading overlay background color
|
|
3340
|
+
* @default 'var(--white)'
|
|
3341
|
+
*/
|
|
3342
|
+
overlayBackgroundColor?: 'transparent' | 'var(--white)';
|
|
3343
|
+
/** (optional) if set to true, the animation of the loading indicator is paused
|
|
3344
|
+
* @default false
|
|
3345
|
+
*/
|
|
3346
|
+
isPaused?: boolean;
|
|
3347
|
+
/** (optional) aligns the content of the overlay to the top instead of having it centered
|
|
3348
|
+
* @default false
|
|
3349
|
+
*/
|
|
3350
|
+
isTopAligned?: boolean;
|
|
3351
|
+
children?: React.ReactNode;
|
|
3352
|
+
/** (optional) sets the position of the overlay
|
|
3353
|
+
* @default 'absolute'
|
|
3354
|
+
*/
|
|
3355
|
+
position?: 'absolute' | 'fixed';
|
|
3356
|
+
}
|
|
3357
|
+
/**
|
|
3358
|
+
* Loading Overlay.
|
|
3359
|
+
* NOTE: the container/parent element must have a non-static `position` value for the overlay to work properly.
|
|
3360
|
+
* @example <LoadingOverlay isActive={true} statusMessage="Loading..." />
|
|
3361
|
+
*/
|
|
3362
|
+
declare const LoadingOverlay: ({ isActive, statusMessage, zIndex, loaderSize, overlayBackgroundColor, isTopAligned, isPaused, children, position, }: LoadingOverlayProps) => _emotion_react_jsx_runtime.JSX.Element;
|
|
3363
|
+
interface LoadingIconProps extends HTMLAttributes<SVGSVGElement> {
|
|
3364
|
+
/** (optional) prop that sets a number value for the height of the icon */
|
|
3365
|
+
width?: number;
|
|
3366
|
+
/** (optional) prop that sets a number value for the width of the icon */
|
|
3367
|
+
height?: number;
|
|
3368
|
+
}
|
|
3369
|
+
/**
|
|
3370
|
+
* Loading Icon
|
|
3371
|
+
* @example <LoadingIcon height={128} width={128} />
|
|
3372
|
+
*/
|
|
3373
|
+
declare const LoadingIcon: ({ height, width, ...props }: LoadingIconProps) => _emotion_react_jsx_runtime.JSX.Element;
|
|
3374
|
+
|
|
3375
|
+
type ModalProps = {
|
|
3376
|
+
header?: React__default.ReactNode;
|
|
3377
|
+
children?: React__default.ReactNode;
|
|
3378
|
+
/**
|
|
3379
|
+
* Called when the close button is clicked, the Escape button is pressed, or when the modal's backdrop is clicked.
|
|
3380
|
+
* If undefined is passed, the modal will not be closable by the user and the close button will not be rendered.
|
|
3381
|
+
*/
|
|
3382
|
+
onRequestClose: (() => void) | undefined;
|
|
3383
|
+
/** The size sets the modal width to one of three options sm = 400px, md = 600px and lg = 800px
|
|
3384
|
+
* if a width attribute is used the size will be overridden by the width attribute
|
|
3385
|
+
* @default 'lg'
|
|
3386
|
+
*/
|
|
3387
|
+
modalSize?: 'sm' | 'md' | 'lg';
|
|
3388
|
+
/** A valid CSS width */
|
|
3389
|
+
width?: string;
|
|
3390
|
+
/** A valid CSS height */
|
|
3391
|
+
height?: string;
|
|
3392
|
+
/** Removes the default padding on the content wrapper */
|
|
3393
|
+
withoutContentPadding?: boolean;
|
|
3394
|
+
/** Removes the default background color of the content wrapper */
|
|
3395
|
+
withoutContentBackground?: boolean;
|
|
3396
|
+
/** Places buttons at the bottom of the modal */
|
|
3397
|
+
buttonGroup?: ReactNode;
|
|
3398
|
+
/**
|
|
3399
|
+
* Disables scrolling of the modal body if the content exceeds the height.
|
|
3400
|
+
* Can be required for modals that have comboboxes where the menu items are expected
|
|
3401
|
+
* to overflow the bounds of the modal.
|
|
3402
|
+
*/
|
|
3403
|
+
disableBodyScroll?: boolean;
|
|
3404
|
+
} & React__default.HTMLProps<HTMLDialogElement>;
|
|
3405
|
+
/**
|
|
3406
|
+
* A modal component to open a dialog with a backdrop that covers the whole page.
|
|
3407
|
+
* @example <Modal>Hello World</Modal>
|
|
3408
|
+
*/
|
|
3409
|
+
declare const Modal: React__default.ForwardRefExoticComponent<Omit<ModalProps, "ref"> & React__default.RefAttributes<HTMLDialogElement>>;
|
|
3151
3410
|
|
|
3152
3411
|
type ModalDialogProps = Omit<ModalProps, 'width'>;
|
|
3153
3412
|
declare const ModalDialog: React$1.ForwardRefExoticComponent<Omit<ModalDialogProps, "ref"> & React$1.RefAttributes<HTMLDialogElement>>;
|
|
3154
3413
|
|
|
3414
|
+
/** Props for {@link ObjectGridContainer}. */
|
|
3155
3415
|
type ObjectGridContainerProps = {
|
|
3156
|
-
/**
|
|
3416
|
+
/** Number of columns in the grid, passed to CSS `repeat()`.
|
|
3417
|
+
* Accepts a number (e.g. `3`) or any valid `repeat()` track value (e.g. `'auto-fill, minmax(200px, 1fr)'`).
|
|
3157
3418
|
* @default 3
|
|
3158
|
-
*
|
|
3159
|
-
* see https://developer.mozilla.org/en-US/docs/Web/CSS/repeat#syntax for examples
|
|
3419
|
+
* @see https://developer.mozilla.org/en-US/docs/Web/CSS/repeat#syntax
|
|
3160
3420
|
*/
|
|
3161
3421
|
gridCount?: string | number;
|
|
3162
|
-
/**
|
|
3422
|
+
/** Grid item children — typically {@link ObjectGridItem} or {@link ObjectGridItemLoadingSkeleton} elements. */
|
|
3163
3423
|
children: React.ReactNode;
|
|
3164
3424
|
};
|
|
3425
|
+
/**
|
|
3426
|
+
* CSS Grid container for laying out {@link ObjectGridItem} elements in a responsive grid.
|
|
3427
|
+
* Supports forwarding a ref to the underlying `<div>`.
|
|
3428
|
+
*
|
|
3429
|
+
* @example
|
|
3430
|
+
* ```tsx
|
|
3431
|
+
* <ObjectGridContainer gridCount={4}>
|
|
3432
|
+
* <ObjectGridItem header={<ObjectGridItemHeading heading="Item" />} cover={...} />
|
|
3433
|
+
* </ObjectGridContainer>
|
|
3434
|
+
* ```
|
|
3435
|
+
*/
|
|
3165
3436
|
declare const ObjectGridContainer: React$1.ForwardRefExoticComponent<ObjectGridContainerProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
3166
3437
|
|
|
3438
|
+
/** Shared props for heading components used across list and grid Object items. */
|
|
3167
3439
|
type ObjectHeadingProps = {
|
|
3168
|
-
/**
|
|
3440
|
+
/** The heading content to display. */
|
|
3169
3441
|
heading: ReactNode;
|
|
3170
|
-
/** Slot
|
|
3442
|
+
/** Slot rendered before the heading text (e.g. an icon or status indicator). */
|
|
3171
3443
|
beforeHeadingSlot?: ReactNode;
|
|
3172
|
-
/** Slot
|
|
3444
|
+
/** Slot rendered after the heading text (e.g. a badge or chip). */
|
|
3173
3445
|
afterHeadingSlot?: ReactNode;
|
|
3174
|
-
/**
|
|
3446
|
+
/** Tooltip text shown on hover when the heading is truncated. */
|
|
3175
3447
|
tooltip?: string;
|
|
3176
3448
|
};
|
|
3449
|
+
/**
|
|
3450
|
+
* Shared props for Object item components ({@link ObjectListItem} and {@link ObjectGridItem}).
|
|
3451
|
+
* Defines the common slot-based API for composing item layouts.
|
|
3452
|
+
*/
|
|
3177
3453
|
type ObjectItemProps = {
|
|
3178
|
-
/** Slot for the header
|
|
3454
|
+
/** Slot for the header — use {@link ObjectGridItemHeading} or {@link ObjectListItemHeading}. */
|
|
3179
3455
|
header: ReactNode;
|
|
3180
|
-
/** Slot for the cover
|
|
3456
|
+
/** Slot for the cover media — use {@link ObjectGridItemCoverButton}, {@link ObjectGridItemCover}, or {@link ObjectListItemCover}. */
|
|
3181
3457
|
cover: ReactNode;
|
|
3182
|
-
/** Slot
|
|
3458
|
+
/** Slot rendered on the right side of the item (e.g. timestamps, status badges). */
|
|
3183
3459
|
rightSlot?: React.ReactNode;
|
|
3184
|
-
/** Slot for
|
|
3460
|
+
/** Slot for context menu items — pass `<MenuItem />` elements here. When provided, a three-dot menu trigger is rendered automatically. */
|
|
3185
3461
|
menuItems?: React.ReactNode;
|
|
3186
|
-
/**
|
|
3462
|
+
/** Whether the item is visually marked as selected via `aria-selected`. */
|
|
3187
3463
|
isSelected?: boolean;
|
|
3188
|
-
/**
|
|
3464
|
+
/** Additional child content rendered below the header (only visible in `renderAs="multi"` mode for list items). */
|
|
3189
3465
|
children?: React.ReactNode;
|
|
3190
3466
|
};
|
|
3191
3467
|
|
|
3468
|
+
/** Props for {@link ObjectGridItem}. */
|
|
3192
3469
|
type ObjectGridItemProps = ObjectItemProps & {
|
|
3470
|
+
/** Whether the item is visually marked as selected. */
|
|
3193
3471
|
isSelected?: boolean;
|
|
3194
|
-
/**
|
|
3195
|
-
* @default object-grid-item-menu-btn
|
|
3472
|
+
/** Override the `data-testid` on the context menu trigger button.
|
|
3473
|
+
* @default 'object-grid-item-menu-btn'
|
|
3196
3474
|
*/
|
|
3197
3475
|
menuTestId?: string;
|
|
3198
3476
|
} & HTMLAttributes<HTMLDivElement>;
|
|
3477
|
+
/**
|
|
3478
|
+
* A card-style grid item for displaying an object with cover media, heading, subtitle, and optional context menu.
|
|
3479
|
+
*
|
|
3480
|
+
* When an `onClick` handler is provided, the entire card becomes clickable with hover styles.
|
|
3481
|
+
* Menu and right-slot interactions use `stopPropagation` to prevent triggering the card click.
|
|
3482
|
+
* Wrap items with {@link ObjectGridContainer} for responsive grid layout.
|
|
3483
|
+
*
|
|
3484
|
+
* @example
|
|
3485
|
+
* ```tsx
|
|
3486
|
+
* <ObjectGridItem
|
|
3487
|
+
* cover={<ObjectGridItemCover imageUrl="/thumb.jpg" icon={uniformComposition} />}
|
|
3488
|
+
* header={<ObjectGridItemHeading heading="My composition" tooltip="My composition" />}
|
|
3489
|
+
* rightSlot={<StatusBullet status="published" />}
|
|
3490
|
+
* menuItems={<MenuItem onClick={onEdit}>Edit</MenuItem>}
|
|
3491
|
+
* onClick={handleOpen}
|
|
3492
|
+
* />
|
|
3493
|
+
* ```
|
|
3494
|
+
*/
|
|
3199
3495
|
declare const ObjectGridItem: ({ header, cover, rightSlot, menuItems, isSelected, children, menuTestId, ...props }: ObjectGridItemProps) => _emotion_react_jsx_runtime.JSX.Element;
|
|
3200
3496
|
|
|
3497
|
+
/**
|
|
3498
|
+
* Props for {@link ObjectGridItemCardCover}.
|
|
3499
|
+
* Pass **either** an `icon` or an `imageUrl` — the component renders the appropriate variant.
|
|
3500
|
+
*/
|
|
3201
3501
|
type ObjectGridItemCardCoverProps = {
|
|
3202
|
-
icon: IconType;
|
|
3203
|
-
iconColor?: 'currentColor' | 'accent-dark' | 'accent-alt-dark';
|
|
3502
|
+
/** Icon to render as the card cover. */ icon: IconType;
|
|
3503
|
+
/** Color applied to the icon. */ iconColor?: 'currentColor' | 'accent-dark' | 'accent-alt-dark';
|
|
3204
3504
|
} | {
|
|
3205
|
-
imageUrl: string;
|
|
3206
|
-
srcSet?: string;
|
|
3207
|
-
alt?: string;
|
|
3208
|
-
errorFallbackSrc?: string;
|
|
3505
|
+
/** URL of the image to render as the card cover. */ imageUrl: string;
|
|
3506
|
+
/** Optional `srcSet` for responsive images. */ srcSet?: string;
|
|
3507
|
+
/** Alt text for the image. */ alt?: string;
|
|
3508
|
+
/** Fallback image URL shown when the primary image fails to load. */ errorFallbackSrc?: string;
|
|
3209
3509
|
};
|
|
3510
|
+
/**
|
|
3511
|
+
* Low-level cover media for a grid card — renders either a lazy-loaded image
|
|
3512
|
+
* or an icon with a ghost background. Typically used via {@link ObjectGridItemCover}
|
|
3513
|
+
* rather than directly.
|
|
3514
|
+
*/
|
|
3210
3515
|
declare const ObjectGridItemCardCover: (props: ObjectGridItemCardCoverProps) => _emotion_react_jsx_runtime.JSX.Element | undefined;
|
|
3516
|
+
/**
|
|
3517
|
+
* Props for {@link ObjectGridItemCover}.
|
|
3518
|
+
* Extends {@link ObjectGridItemCardCoverProps} with overlay slots at each corner.
|
|
3519
|
+
*/
|
|
3211
3520
|
type ObjectGridItemCoverProps = {
|
|
3212
|
-
/**
|
|
3521
|
+
/** Slot positioned at the top-left of the cover (e.g. a selection checkbox). */
|
|
3213
3522
|
coverSlotLeft?: React.ReactNode;
|
|
3214
|
-
/**
|
|
3523
|
+
/** Slot positioned at the top-right of the cover (e.g. a favourite icon). */
|
|
3215
3524
|
coverSlotRight?: React.ReactNode;
|
|
3216
|
-
/**
|
|
3525
|
+
/** Slot positioned at the bottom-left of the cover. */
|
|
3217
3526
|
coverSlotBottomLeft?: React.ReactNode;
|
|
3218
|
-
/**
|
|
3527
|
+
/** Slot positioned at the bottom-right of the cover (e.g. a status chip). */
|
|
3219
3528
|
coverSlotBottomRight?: React.ReactNode;
|
|
3220
3529
|
} & ObjectGridItemCardCoverProps;
|
|
3530
|
+
/**
|
|
3531
|
+
* Grid item cover with corner overlay slots for badges, checkboxes, or status indicators.
|
|
3532
|
+
* Wraps {@link ObjectGridItemCardCover} and positions slot content at each corner.
|
|
3533
|
+
*
|
|
3534
|
+
* @example
|
|
3535
|
+
* ```tsx
|
|
3536
|
+
* <ObjectGridItemCover
|
|
3537
|
+
* imageUrl="/thumb.jpg"
|
|
3538
|
+
* coverSlotRight={<Chip text="New" />}
|
|
3539
|
+
* />
|
|
3540
|
+
* ```
|
|
3541
|
+
*/
|
|
3221
3542
|
declare const ObjectGridItemCover: ({ coverSlotLeft, coverSlotRight, coverSlotBottomLeft, coverSlotBottomRight, ...props }: ObjectGridItemCoverProps) => _emotion_react_jsx_runtime.JSX.Element;
|
|
3543
|
+
/**
|
|
3544
|
+
* Props for {@link ObjectGridItemCoverButton}.
|
|
3545
|
+
* The `coverSlotBottomRight` is reserved for the selection chip and cannot be overridden.
|
|
3546
|
+
*/
|
|
3222
3547
|
type ObjectGridItemCoverButtonProps = {
|
|
3548
|
+
/** Unique identifier passed back to `onSelection` when the cover is clicked. */
|
|
3223
3549
|
id: string;
|
|
3550
|
+
/** Callback fired when the cover button is clicked. */
|
|
3224
3551
|
onSelection: (id: string) => void;
|
|
3552
|
+
/** Whether this cover is currently selected — renders a chip in the bottom-right corner. */
|
|
3225
3553
|
isSelected?: boolean;
|
|
3554
|
+
/** Label text shown on the selection chip.
|
|
3555
|
+
* @default 'selected'
|
|
3556
|
+
*/
|
|
3226
3557
|
selectedText?: string;
|
|
3227
3558
|
} & Omit<ObjectGridItemCoverProps, 'coverSlotBottomRight'> & ObjectGridItemCardCoverProps;
|
|
3559
|
+
/**
|
|
3560
|
+
* Clickable variant of {@link ObjectGridItemCover} that acts as a selection toggle.
|
|
3561
|
+
* When selected, a chip with `selectedText` appears in the bottom-right corner.
|
|
3562
|
+
* Click events are stopped from propagating to parent elements.
|
|
3563
|
+
*
|
|
3564
|
+
* @example
|
|
3565
|
+
* ```tsx
|
|
3566
|
+
* <ObjectGridItemCoverButton
|
|
3567
|
+
* id={item.id}
|
|
3568
|
+
* imageUrl={item.thumbnail}
|
|
3569
|
+
* isSelected={selectedId === item.id}
|
|
3570
|
+
* onSelection={setSelectedId}
|
|
3571
|
+
* />
|
|
3572
|
+
* ```
|
|
3573
|
+
*/
|
|
3228
3574
|
declare const ObjectGridItemCoverButton: ({ id, isSelected, onSelection, selectedText, ...props }: ObjectGridItemCoverButtonProps) => _emotion_react_jsx_runtime.JSX.Element;
|
|
3229
3575
|
|
|
3576
|
+
/** Props for {@link ObjectGridItemHeading}. */
|
|
3230
3577
|
type ObjectGridItemTitleProps = ObjectHeadingProps & HTMLAttributes<HTMLDivElement>;
|
|
3578
|
+
/**
|
|
3579
|
+
* Heading component designed for use inside {@link ObjectGridItem}'s `header` slot.
|
|
3580
|
+
*
|
|
3581
|
+
* Automatically detects when the heading text is truncated (via a `ResizeObserver`)
|
|
3582
|
+
* and shows the `tooltip` on hover so users can still read the full title.
|
|
3583
|
+
* Click events on `beforeHeadingSlot` and `afterHeadingSlot` are stopped from propagating
|
|
3584
|
+
* to the parent grid item.
|
|
3585
|
+
*
|
|
3586
|
+
* @example
|
|
3587
|
+
* ```tsx
|
|
3588
|
+
* <ObjectGridItemHeading
|
|
3589
|
+
* heading="My composition"
|
|
3590
|
+
* tooltip="My composition"
|
|
3591
|
+
* beforeHeadingSlot={<Icon icon={uniformComposition} />}
|
|
3592
|
+
* />
|
|
3593
|
+
* ```
|
|
3594
|
+
*/
|
|
3231
3595
|
declare const ObjectGridItemHeading: ({ heading, beforeHeadingSlot, afterHeadingSlot, tooltip, ...props }: ObjectGridItemTitleProps) => _emotion_react_jsx_runtime.JSX.Element;
|
|
3232
3596
|
|
|
3597
|
+
/** Props for {@link ObjectGridItemIconWithTooltip}. */
|
|
3233
3598
|
type ObjectGridItemIconWithTooltipProps = {
|
|
3234
|
-
/**
|
|
3599
|
+
/** Text shown inside the tooltip on hover. */
|
|
3235
3600
|
tooltipTitle: string;
|
|
3236
|
-
/** The icon to
|
|
3601
|
+
/** The icon to render. */
|
|
3237
3602
|
icon: IconType;
|
|
3238
|
-
/**
|
|
3603
|
+
/** Color applied to the icon.
|
|
3604
|
+
* @default 'accent-dark'
|
|
3605
|
+
*/
|
|
3239
3606
|
iconColor?: IconColor;
|
|
3240
3607
|
} & Pick<TooltipProps, 'placement' | 'withoutPortal'>;
|
|
3608
|
+
/**
|
|
3609
|
+
* Small icon with a tooltip, designed for the `rightSlot` of {@link ObjectGridItem}.
|
|
3610
|
+
* Useful for showing contextual indicators (e.g. entry type, locale) without taking up text space.
|
|
3611
|
+
*
|
|
3612
|
+
* @example
|
|
3613
|
+
* ```tsx
|
|
3614
|
+
* <ObjectGridItemIconWithTooltip
|
|
3615
|
+
* tooltipTitle="Composition"
|
|
3616
|
+
* icon={uniformComposition}
|
|
3617
|
+
* />
|
|
3618
|
+
* ```
|
|
3619
|
+
*/
|
|
3241
3620
|
declare const ObjectGridItemIconWithTooltip: ({ tooltipTitle, placement, icon, iconColor, ...props }: ObjectGridItemIconWithTooltipProps) => _emotion_react_jsx_runtime.JSX.Element;
|
|
3242
3621
|
|
|
3243
|
-
/**
|
|
3244
|
-
* @
|
|
3622
|
+
/**
|
|
3623
|
+
* Animated skeleton placeholder for {@link ObjectGridItem}, displayed while data is loading.
|
|
3624
|
+
* Renders a simulated cover image and two text lines matching the visual dimensions
|
|
3625
|
+
* of a real grid card so the layout doesn't shift on load.
|
|
3626
|
+
*
|
|
3627
|
+
* @example
|
|
3628
|
+
* ```tsx
|
|
3629
|
+
* <ObjectGridContainer gridCount={3}>
|
|
3630
|
+
* <ObjectGridItemLoadingSkeleton />
|
|
3631
|
+
* <ObjectGridItemLoadingSkeleton />
|
|
3632
|
+
* <ObjectGridItemLoadingSkeleton />
|
|
3633
|
+
* </ObjectGridContainer>
|
|
3634
|
+
* ```
|
|
3245
3635
|
*/
|
|
3246
3636
|
declare const ObjectGridItemLoadingSkeleton: () => _emotion_react_jsx_runtime.JSX.Element;
|
|
3247
3637
|
|
|
3248
|
-
/**
|
|
3638
|
+
/** Props for {@link ObjectItemLoadingSkeleton}. */
|
|
3249
3639
|
type ObjectItemLoadingSkeletonProps = {
|
|
3250
|
-
/**
|
|
3640
|
+
/** When `true`, renders an additional 80×55 animated rectangle representing a cover image. */
|
|
3251
3641
|
showCover?: boolean;
|
|
3252
|
-
/**
|
|
3642
|
+
/** Controls the skeleton layout to match the corresponding {@link ObjectListItem} mode.
|
|
3643
|
+
* - `"single"` — single text line (vertically centered).
|
|
3644
|
+
* - `"multi"` — two text lines (top-aligned).
|
|
3253
3645
|
* @default 'single'
|
|
3254
3646
|
*/
|
|
3255
3647
|
renderAs?: 'single' | 'multi';
|
|
3256
3648
|
};
|
|
3257
|
-
/**
|
|
3258
|
-
* @
|
|
3649
|
+
/**
|
|
3650
|
+
* Animated skeleton placeholder for {@link ObjectListItem}, displayed while data is loading.
|
|
3651
|
+
* Matches the visual dimensions of a real list item so the layout doesn't shift on load.
|
|
3652
|
+
*
|
|
3653
|
+
* @example
|
|
3654
|
+
* ```tsx
|
|
3655
|
+
* <ObjectListItemContainer>
|
|
3656
|
+
* <ObjectItemLoadingSkeleton />
|
|
3657
|
+
* <ObjectItemLoadingSkeleton showCover renderAs="multi" />
|
|
3658
|
+
* </ObjectListItemContainer>
|
|
3659
|
+
* ```
|
|
3259
3660
|
*/
|
|
3260
3661
|
declare const ObjectItemLoadingSkeleton: ({ showCover, renderAs, }: ObjectItemLoadingSkeletonProps) => _emotion_react_jsx_runtime.JSX.Element;
|
|
3261
3662
|
|
|
3262
|
-
/**
|
|
3663
|
+
/**
|
|
3664
|
+
* Props for {@link ObjectListItem}.
|
|
3665
|
+
*
|
|
3666
|
+
* Supports two layout modes via `renderAs`:
|
|
3667
|
+
* - `"single"` (default) — header and right slot vertically centered on one line.
|
|
3668
|
+
* - `"multi"` — header aligned to top with additional `children` rendered below it.
|
|
3669
|
+
*/
|
|
3263
3670
|
type ObjectListItemProps = {
|
|
3264
|
-
/**
|
|
3671
|
+
/** Portal target for the context menu, useful inside stacked route containers to prevent clipping. */
|
|
3265
3672
|
portalElement?: MenuProps['portalElement'];
|
|
3673
|
+
/** Optional cover media rendered to the left of the header (e.g. {@link ObjectListItemCover}). */
|
|
3266
3674
|
cover?: ReactNode;
|
|
3675
|
+
/** Optional drag handle rendered at the leading edge (e.g. `<DragHandle />`). */
|
|
3267
3676
|
dragHandle?: ReactNode;
|
|
3268
|
-
/**
|
|
3677
|
+
/** Minimum width at which the container query breakpoint activates to lay out columns side-by-side.
|
|
3269
3678
|
* @default '34rem'
|
|
3270
3679
|
*/
|
|
3271
3680
|
minContainerQueryWidth?: string;
|
|
@@ -3277,29 +3686,86 @@ type ObjectListItemMultiProps = Omit<ObjectItemProps, 'cover'> & {
|
|
|
3277
3686
|
renderAs?: 'multi';
|
|
3278
3687
|
children?: ReactNode;
|
|
3279
3688
|
};
|
|
3280
|
-
/**
|
|
3689
|
+
/**
|
|
3690
|
+
* A horizontal list item for displaying an object with header, cover, right slot, and optional context menu.
|
|
3691
|
+
*
|
|
3692
|
+
* Uses container queries so the layout adapts to its parent width rather than the viewport.
|
|
3693
|
+
* Wrap items with {@link ObjectListItemContainer} to get proper list semantics and dividers.
|
|
3694
|
+
*
|
|
3695
|
+
* @example
|
|
3696
|
+
* ```tsx
|
|
3697
|
+
* <ObjectListItem
|
|
3698
|
+
* header={<ObjectListItemHeading heading="My entry" />}
|
|
3699
|
+
* rightSlot={<StatusBullet status="published" />}
|
|
3700
|
+
* menuItems={<MenuItem onClick={onDelete}>Delete</MenuItem>}
|
|
3701
|
+
* />
|
|
3702
|
+
* ```
|
|
3703
|
+
*/
|
|
3281
3704
|
declare const ObjectListItem: ({ minContainerQueryWidth, ...props }: ObjectListItemProps) => _emotion_react_jsx_runtime.JSX.Element;
|
|
3282
3705
|
|
|
3283
|
-
/**
|
|
3706
|
+
/**
|
|
3707
|
+
* Vertical container that wraps {@link ObjectListItem} elements with `role="list"` semantics
|
|
3708
|
+
* and renders a top-border divider between each item.
|
|
3709
|
+
*
|
|
3710
|
+
* @example
|
|
3711
|
+
* ```tsx
|
|
3712
|
+
* <ObjectListItemContainer>
|
|
3713
|
+
* <ObjectListItem header={<ObjectListItemHeading heading="Item 1" />} />
|
|
3714
|
+
* <ObjectListItem header={<ObjectListItemHeading heading="Item 2" />} />
|
|
3715
|
+
* </ObjectListItemContainer>
|
|
3716
|
+
* ```
|
|
3717
|
+
*/
|
|
3284
3718
|
declare const ObjectListItemContainer: ({ children, gap, ...props }: RhythmProps) => _emotion_react_jsx_runtime.JSX.Element;
|
|
3285
3719
|
|
|
3286
|
-
/**
|
|
3720
|
+
/** Props for {@link ObjectListItemCover}. */
|
|
3287
3721
|
type ObjectListItemCoverProps = {
|
|
3722
|
+
/** URL of the thumbnail image. When omitted, a placeholder with `noImageText` is shown instead. */
|
|
3288
3723
|
imageUrl?: string;
|
|
3289
|
-
/**
|
|
3724
|
+
/** Placeholder text displayed when `imageUrl` is not provided.
|
|
3290
3725
|
* @default 'Image not available'
|
|
3291
3726
|
*/
|
|
3292
3727
|
noImageText?: string;
|
|
3293
3728
|
} & HTMLAttributes<HTMLImageElement>;
|
|
3294
|
-
/**
|
|
3729
|
+
/**
|
|
3730
|
+
* Thumbnail cover image for use inside {@link ObjectListItem}'s `cover` slot.
|
|
3731
|
+
* Renders a fixed-size (80×45) container with a lazy-loaded image, or a
|
|
3732
|
+
* text placeholder when no `imageUrl` is available.
|
|
3733
|
+
*
|
|
3734
|
+
* @example
|
|
3735
|
+
* ```tsx
|
|
3736
|
+
* <ObjectListItem
|
|
3737
|
+
* cover={<ObjectListItemCover imageUrl="https://example.com/thumb.jpg" />}
|
|
3738
|
+
* header={<ObjectListItemHeading heading="My entry" />}
|
|
3739
|
+
* />
|
|
3740
|
+
* ```
|
|
3741
|
+
*/
|
|
3295
3742
|
declare const ObjectListItemCover: ({ imageUrl, noImageText, ...props }: ObjectListItemCoverProps) => _emotion_react_jsx_runtime.JSX.Element;
|
|
3296
3743
|
|
|
3297
|
-
/**
|
|
3744
|
+
/** Props for {@link ObjectListItemHeading}. */
|
|
3298
3745
|
type ObjectListItemHeadingProps = Omit<ObjectHeadingProps, 'heading' | 'tooltip'> & HTMLAttributes<HTMLDivElement> & {
|
|
3746
|
+
/** The heading content — typically a string, link, or inline element. */
|
|
3299
3747
|
heading: ReactNode;
|
|
3748
|
+
/** Override the `data-testid` on the heading element.
|
|
3749
|
+
* @default 'reference-item-name'
|
|
3750
|
+
*/
|
|
3751
|
+
headingTestId?: string;
|
|
3300
3752
|
};
|
|
3301
|
-
/**
|
|
3302
|
-
|
|
3753
|
+
/**
|
|
3754
|
+
* Heading component designed for use inside {@link ObjectListItem}'s `header` slot.
|
|
3755
|
+
*
|
|
3756
|
+
* Renders a responsive heading row that stacks vertically on narrow containers
|
|
3757
|
+
* and switches to a horizontal layout at wider widths (controlled by a container query).
|
|
3758
|
+
*
|
|
3759
|
+
* @example
|
|
3760
|
+
* ```tsx
|
|
3761
|
+
* <ObjectListItemHeading
|
|
3762
|
+
* heading={<a href="/entries/123">My entry</a>}
|
|
3763
|
+
* beforeHeadingSlot={<Icon icon={uniformComposition} />}
|
|
3764
|
+
* afterHeadingSlot={<Chip text="Draft" />}
|
|
3765
|
+
* />
|
|
3766
|
+
* ```
|
|
3767
|
+
*/
|
|
3768
|
+
declare const ObjectListItemHeading: ({ heading, beforeHeadingSlot, afterHeadingSlot, headingTestId, ...props }: ObjectListItemHeadingProps) => _emotion_react_jsx_runtime.JSX.Element;
|
|
3303
3769
|
|
|
3304
3770
|
declare function Pagination({ limit, offset, total, onPageChange, }: {
|
|
3305
3771
|
limit: number;
|
|
@@ -3389,6 +3855,7 @@ type BaseParameterActionButtonProps = {
|
|
|
3389
3855
|
* If a React element is provided, it will be displayed as a tooltip.
|
|
3390
3856
|
*/
|
|
3391
3857
|
tooltip?: string | React__default.ReactNode;
|
|
3858
|
+
tooltipProps?: Partial<TooltipProps>;
|
|
3392
3859
|
/**
|
|
3393
3860
|
* The component to render the button as.
|
|
3394
3861
|
* There maybe a scenario where we want to render the button as a div
|
|
@@ -3407,7 +3874,7 @@ interface FilledVariant extends BaseParameterActionButtonProps {
|
|
|
3407
3874
|
inverted?: boolean;
|
|
3408
3875
|
}
|
|
3409
3876
|
type ParameterActionButtonProps = OutlineVariant | FilledVariant;
|
|
3410
|
-
declare const ParameterActionButton: ({ children, themeType, tooltip, renderAs, disabled, ...props }: ParameterActionButtonProps) => _emotion_react_jsx_runtime.JSX.Element;
|
|
3877
|
+
declare const ParameterActionButton: ({ children, themeType, tooltip, tooltipProps, renderAs, disabled, ...props }: ParameterActionButtonProps) => _emotion_react_jsx_runtime.JSX.Element;
|
|
3411
3878
|
|
|
3412
3879
|
type ParameterDrawerHeaderProps = {
|
|
3413
3880
|
title: string;
|
|
@@ -3496,6 +3963,44 @@ type ParameterLabelProps = HTMLAttributes<HTMLLabelElement> & {
|
|
|
3496
3963
|
/** @example <ParameterLabel id="my-label">my label</ParameterLabel> */
|
|
3497
3964
|
declare const ParameterLabel: ({ id, asSpan, children, testId, ...props }: ParameterLabelProps) => _emotion_react_jsx_runtime.JSX.Element;
|
|
3498
3965
|
|
|
3966
|
+
/** Extended option type that supports label-specific properties */
|
|
3967
|
+
type LabelOption = InputComboBoxOption & {
|
|
3968
|
+
/** The color variant for the label swatch */
|
|
3969
|
+
color?: SwatchVariant;
|
|
3970
|
+
/** Whether this option represents a group header */
|
|
3971
|
+
isGroup?: boolean;
|
|
3972
|
+
/** The parent group ID if this label belongs to a group */
|
|
3973
|
+
parent?: string;
|
|
3974
|
+
/** Tooltip content for the label */
|
|
3975
|
+
tooltip?: string | React.ReactElement;
|
|
3976
|
+
};
|
|
3977
|
+
type ParameterLabelsInnerProps = Pick<InputComboBoxProps<LabelOption, true>, 'options' | 'value' | 'defaultValue' | 'onChange' | 'onBlur' | 'isClearable' | 'isDisabled'> & {
|
|
3978
|
+
/** Callback when an item is removed from the selection */
|
|
3979
|
+
onItemRemoved?: (id: string) => void;
|
|
3980
|
+
/** Callback when a new label is created */
|
|
3981
|
+
onCreateLabel?: (label: string) => void;
|
|
3982
|
+
/** Override the text displayed on the filter button */
|
|
3983
|
+
buttonText?: string;
|
|
3984
|
+
/** Override the text displayed on the add button */
|
|
3985
|
+
addButtonText?: string | null;
|
|
3986
|
+
/** the function to call when the quick filter is opened */
|
|
3987
|
+
onOpen?: () => void;
|
|
3988
|
+
/** the function to call when the quick filter is closed */
|
|
3989
|
+
onClose?: () => void;
|
|
3990
|
+
/** The maximum number of labels that can be selected */
|
|
3991
|
+
maxCount?: number;
|
|
3992
|
+
};
|
|
3993
|
+
type ParameterLabelsProps = CommonParameterInputProps & ParameterLabelsInnerProps & {
|
|
3994
|
+
disabled?: boolean;
|
|
3995
|
+
};
|
|
3996
|
+
/**
|
|
3997
|
+
* A parameter input component for selecting multiple labels with swatch colors.
|
|
3998
|
+
* Supports grouped labels with nested menus.
|
|
3999
|
+
* @example <ParameterLabels id="labels" label="Labels" options={[]} value={[]} onChange={() => {}} />
|
|
4000
|
+
*/
|
|
4001
|
+
declare const ParameterLabels: ({ disabled, ...props }: ParameterLabelsProps) => _emotion_react_jsx_runtime.JSX.Element;
|
|
4002
|
+
declare const ParameterLabelsInner: (props: ParameterLabelsInnerProps) => _emotion_react_jsx_runtime.JSX.Element;
|
|
4003
|
+
|
|
3499
4004
|
type ParameterLinkProps = CommonParameterInputProps & React.InputHTMLAttributes<HTMLInputElement> & {
|
|
3500
4005
|
/** (optional) sets the button text when value is empty
|
|
3501
4006
|
* @default 'Configure link'
|
|
@@ -3900,7 +4405,9 @@ declare const ParameterShell: ({ label, labelLeadingIcon, labelTrailingIcon, hid
|
|
|
3900
4405
|
declare const ParameterShellPlaceholder: ({ children }: {
|
|
3901
4406
|
children?: ReactNode;
|
|
3902
4407
|
}) => _emotion_react_jsx_runtime.JSX.Element;
|
|
3903
|
-
declare const ParameterOverrideMarker: (props: HTMLAttributes<HTMLButtonElement>
|
|
4408
|
+
declare const ParameterOverrideMarker: (props: HTMLAttributes<HTMLButtonElement> & {
|
|
4409
|
+
tooltipProps?: Partial<TooltipProps>;
|
|
4410
|
+
}) => _emotion_react_jsx_runtime.JSX.Element;
|
|
3904
4411
|
|
|
3905
4412
|
type ParameterTextareaProps = CommonParameterInputProps & React.TextareaHTMLAttributes<HTMLTextAreaElement>;
|
|
3906
4413
|
/** @example <ParameterTextarea label="label value" id="my-textarea" /> */
|
|
@@ -4052,6 +4559,120 @@ type ProgressListItem<IdType extends string = string> = {
|
|
|
4052
4559
|
};
|
|
4053
4560
|
declare const ProgressListItem: ({ children, status, error, errorLevel, autoEllipsis, }: ProgressListItemProps) => _emotion_react_jsx_runtime.JSX.Element;
|
|
4054
4561
|
|
|
4562
|
+
type QuickFilterSelectedItem = {
|
|
4563
|
+
/** Unique identifier for the selected item */
|
|
4564
|
+
id: string;
|
|
4565
|
+
/** Display name for the selected item */
|
|
4566
|
+
name: string;
|
|
4567
|
+
/** Optional swatch variant color */
|
|
4568
|
+
variant?: SwatchVariant | string;
|
|
4569
|
+
/** The tooltip to display inside the selected item */
|
|
4570
|
+
tooltip?: string | React.ReactElement;
|
|
4571
|
+
/** Optional icon to display on the left of the selected item */
|
|
4572
|
+
icon?: IconType;
|
|
4573
|
+
};
|
|
4574
|
+
type QuickFilterProps = {
|
|
4575
|
+
/** the icon to display on the left of the quick filter */
|
|
4576
|
+
iconLeft?: IconType;
|
|
4577
|
+
/** the text to display on the quick filter */
|
|
4578
|
+
buttonText: string;
|
|
4579
|
+
/** the function to call when the quick filter is clicked */
|
|
4580
|
+
/** the size of the quick filter
|
|
4581
|
+
* @default 'sm'
|
|
4582
|
+
*/
|
|
4583
|
+
size?: ButtonSizeProps;
|
|
4584
|
+
/** the test id to use for the quick filter */
|
|
4585
|
+
testId?: string;
|
|
4586
|
+
/** the aria label to use for the quick filter */
|
|
4587
|
+
ariaLabel?: string;
|
|
4588
|
+
/** the children to display inside the quick filter */
|
|
4589
|
+
children: ReactNode;
|
|
4590
|
+
/** whether the quick filter is disabled */
|
|
4591
|
+
disabled?: boolean;
|
|
4592
|
+
/** the selected items to display inside the quick filter */
|
|
4593
|
+
selectedItems?: QuickFilterSelectedItem[];
|
|
4594
|
+
/** the function to call when the search term is changed */
|
|
4595
|
+
onSearchTermChanged: (searchTerm: string) => void;
|
|
4596
|
+
/** addButtonText to use for the add button
|
|
4597
|
+
* @default 'Add'
|
|
4598
|
+
*/
|
|
4599
|
+
addButtonText?: string | null;
|
|
4600
|
+
/** the css to use for the swatch colors
|
|
4601
|
+
* @default swatchColors from the Swatch component
|
|
4602
|
+
*/
|
|
4603
|
+
swatchColorsCss?: SerializedStyles;
|
|
4604
|
+
/** the function to call when an item is removed */
|
|
4605
|
+
onItemRemoved?: (id: string) => void;
|
|
4606
|
+
/** the total number of results */
|
|
4607
|
+
totalResults: number;
|
|
4608
|
+
/** the maximum height of the menu
|
|
4609
|
+
* @default '320px'
|
|
4610
|
+
*/
|
|
4611
|
+
maxMenuHeight?: string;
|
|
4612
|
+
/** the maximum number of results to display
|
|
4613
|
+
* @default 5
|
|
4614
|
+
*/
|
|
4615
|
+
maxCount?: number;
|
|
4616
|
+
/** the css to use for the container
|
|
4617
|
+
* @default swatchColors from the Swatch component
|
|
4618
|
+
*/
|
|
4619
|
+
containerCss?: SerializedStyles;
|
|
4620
|
+
/** Render function for displaying selected items. Receives selectedItems and onItemRemoved.
|
|
4621
|
+
* @default Renders SwatchLabel components
|
|
4622
|
+
*/
|
|
4623
|
+
resultsComponent?: (props: {
|
|
4624
|
+
selectedItems: QuickFilterSelectedItem[];
|
|
4625
|
+
onItemRemoved?: (id: string) => void;
|
|
4626
|
+
}) => ReactNode;
|
|
4627
|
+
/** the message to display when there are no results
|
|
4628
|
+
* @default ''
|
|
4629
|
+
*/
|
|
4630
|
+
hasNoResultsMessage?: string;
|
|
4631
|
+
/** the placeholder text to display in the search input
|
|
4632
|
+
* @default 'Search...'
|
|
4633
|
+
*/
|
|
4634
|
+
searchPlaceholderText?: string;
|
|
4635
|
+
/**
|
|
4636
|
+
* The maximum width of the quick filter container.
|
|
4637
|
+
* Useful for controlling the maximum width of the filter in different layouts (e.g., responsive sidebars).
|
|
4638
|
+
* @default '4rem'
|
|
4639
|
+
*/
|
|
4640
|
+
maxContainerSize?: string;
|
|
4641
|
+
/** the icon to display on the left of the quick filter when collapsed */
|
|
4642
|
+
collapsedIcon?: IconType;
|
|
4643
|
+
/** the function to call when the quick filter is opened */
|
|
4644
|
+
onOpen?: () => void;
|
|
4645
|
+
/** the function to call when the quick filter is closed */
|
|
4646
|
+
onClose?: () => void;
|
|
4647
|
+
/**
|
|
4648
|
+
* Override the Ariakit placement of the dropdown menu.
|
|
4649
|
+
* @default 'right-start'
|
|
4650
|
+
*/
|
|
4651
|
+
menuPlacement?: MenuProps['placement'];
|
|
4652
|
+
/**
|
|
4653
|
+
* Override the anchor rect for custom menu positioning.
|
|
4654
|
+
* Pass `null` to disable the built-in default and use standard positioning.
|
|
4655
|
+
* @default Anchors to the container's right edge
|
|
4656
|
+
*/
|
|
4657
|
+
menuGetAnchorRect?: ((anchor: HTMLElement | null) => {
|
|
4658
|
+
x?: number;
|
|
4659
|
+
y?: number;
|
|
4660
|
+
width?: number;
|
|
4661
|
+
height?: number;
|
|
4662
|
+
} | null) | null;
|
|
4663
|
+
/**
|
|
4664
|
+
* Override the updatePosition callback to control when the menu repositions.
|
|
4665
|
+
* Pass `null` to disable the built-in default (position freezing) and allow normal repositioning.
|
|
4666
|
+
* @default Freezes position after initial placement
|
|
4667
|
+
*/
|
|
4668
|
+
menuUpdatePosition?: ((props: {
|
|
4669
|
+
updatePosition: () => Promise<void>;
|
|
4670
|
+
}) => void | Promise<void>) | null;
|
|
4671
|
+
/** Called when Enter is pressed in the search input and no active menu item handles the event */
|
|
4672
|
+
onSearchEnterKeyDown?: () => void;
|
|
4673
|
+
};
|
|
4674
|
+
declare const QuickFilter: ({ iconLeft, collapsedIcon, buttonText, testId, ariaLabel, children, size, disabled, selectedItems, onSearchTermChanged, addButtonText, onItemRemoved, totalResults, maxMenuHeight, maxCount, containerCss, resultsComponent, hasNoResultsMessage, searchPlaceholderText, maxContainerSize, onOpen, onClose, menuPlacement, menuGetAnchorRect, menuUpdatePosition, onSearchEnterKeyDown, }: QuickFilterProps) => _emotion_react_jsx_runtime.JSX.Element;
|
|
4675
|
+
|
|
4055
4676
|
type SegmentedControlOption<TValue extends string = string> = {
|
|
4056
4677
|
value: TValue;
|
|
4057
4678
|
label?: string;
|
|
@@ -4121,6 +4742,114 @@ declare const Spinner: ({ width, label, isPaused, }: {
|
|
|
4121
4742
|
isPaused?: boolean;
|
|
4122
4743
|
}) => _emotion_react_jsx_runtime.JSX.Element;
|
|
4123
4744
|
|
|
4745
|
+
/** The direction of a step transition, determining which slide animation to play. */
|
|
4746
|
+
type StackedModalDirection = 'forward' | 'backward';
|
|
4747
|
+
/** The full navigation state exposed by the `useStackedModal` hook. */
|
|
4748
|
+
type StackedModalContextValue = {
|
|
4749
|
+
/** The zero-indexed active step. */
|
|
4750
|
+
currentStep: number;
|
|
4751
|
+
/** The total number of steps. */
|
|
4752
|
+
totalSteps: number;
|
|
4753
|
+
/** The direction of the last navigation, used to drive slide animations. */
|
|
4754
|
+
direction: StackedModalDirection;
|
|
4755
|
+
/** The zero-indexed step that was active before the last navigation. Used internally for animation. */
|
|
4756
|
+
previousStep: number;
|
|
4757
|
+
/** Navigate to the next step. No-op if already on the last step. */
|
|
4758
|
+
nextStep: () => void;
|
|
4759
|
+
/** Navigate to the previous step. No-op if already on the first step. */
|
|
4760
|
+
goBack: () => void;
|
|
4761
|
+
/** Navigate to a specific step by index. */
|
|
4762
|
+
goToStep: (index: number) => void;
|
|
4763
|
+
};
|
|
4764
|
+
/**
|
|
4765
|
+
* Hook to access the stacked modal navigation context.
|
|
4766
|
+
* Provides the current step, total steps, navigation direction, and functions to navigate between steps.
|
|
4767
|
+
*
|
|
4768
|
+
* @throws If used outside of a `<StackedModal>` component tree.
|
|
4769
|
+
*/
|
|
4770
|
+
declare function useStackedModal(): StackedModalContextValue;
|
|
4771
|
+
/** The semantic transition state for a single step, derived from the navigation context. */
|
|
4772
|
+
type StepTransitionState = {
|
|
4773
|
+
/** Whether this step is the currently visible step. */
|
|
4774
|
+
isActive: boolean;
|
|
4775
|
+
/** Whether this step is animating out after being replaced by a new active step. */
|
|
4776
|
+
isExiting: boolean;
|
|
4777
|
+
/** Whether the modal is idle (no transition in progress). True on initial render and after animations complete. */
|
|
4778
|
+
isIdle: boolean;
|
|
4779
|
+
/** The direction of the current or most recent transition. */
|
|
4780
|
+
direction: StackedModalDirection;
|
|
4781
|
+
};
|
|
4782
|
+
|
|
4783
|
+
type StackedModalProps = {
|
|
4784
|
+
/** The step content. Each child should be a `StackedModalStep` component. */
|
|
4785
|
+
children: ReactNode;
|
|
4786
|
+
/**
|
|
4787
|
+
* Called when the close button is clicked, the Escape button is pressed, or when the modal's backdrop is clicked.
|
|
4788
|
+
* If undefined is passed, the modal will not be closable by the user and the close button will not be rendered.
|
|
4789
|
+
*/
|
|
4790
|
+
onRequestClose: ModalProps['onRequestClose'];
|
|
4791
|
+
/**
|
|
4792
|
+
* The size sets the modal width to one of three options sm = 400px, md = 600px and lg = 800px.
|
|
4793
|
+
* If a width attribute is used the size will be overridden by the width attribute.
|
|
4794
|
+
* @default 'lg'
|
|
4795
|
+
*/
|
|
4796
|
+
modalSize?: ModalProps['modalSize'];
|
|
4797
|
+
/** A valid CSS width. Overrides `modalSize` when provided. */
|
|
4798
|
+
width?: string;
|
|
4799
|
+
/** A valid CSS height. */
|
|
4800
|
+
height?: string;
|
|
4801
|
+
/**
|
|
4802
|
+
* The zero-indexed step to display initially.
|
|
4803
|
+
* @default 0
|
|
4804
|
+
*/
|
|
4805
|
+
initialStep?: number;
|
|
4806
|
+
};
|
|
4807
|
+
/**
|
|
4808
|
+
* A modal component that supports multi-step content with sliding transitions.
|
|
4809
|
+
* Each child should be a `StackedModalStep` component that defines its own header,
|
|
4810
|
+
* content, and button group.
|
|
4811
|
+
*
|
|
4812
|
+
* Use the `useStackedModal` hook inside step content to navigate between steps.
|
|
4813
|
+
*
|
|
4814
|
+
* @example
|
|
4815
|
+
* <StackedModal onRequestClose={handleClose} modalSize="lg">
|
|
4816
|
+
* <StackedModalStep header="Step 1" buttonGroup={<Buttons />}>
|
|
4817
|
+
* <StepOneContent />
|
|
4818
|
+
* </StackedModalStep>
|
|
4819
|
+
* <StackedModalStep header="Step 2" buttonGroup={<Buttons />}>
|
|
4820
|
+
* <StepTwoContent />
|
|
4821
|
+
* </StackedModalStep>
|
|
4822
|
+
* </StackedModal>
|
|
4823
|
+
*/
|
|
4824
|
+
declare const StackedModal: React__default.ForwardRefExoticComponent<StackedModalProps & React__default.RefAttributes<HTMLDialogElement>>;
|
|
4825
|
+
|
|
4826
|
+
/** Props for a single step within a `StackedModal`. */
|
|
4827
|
+
type StackedModalStepProps = {
|
|
4828
|
+
/**
|
|
4829
|
+
* Header content displayed in the modal's header row, inline with the close icon.
|
|
4830
|
+
* This prop is extracted by the parent `StackedModal` and rendered in the
|
|
4831
|
+
* modal chrome -- it is **not** rendered by `StackedModalStep` itself.
|
|
4832
|
+
*/
|
|
4833
|
+
header?: ReactNode;
|
|
4834
|
+
/** Optional button group rendered at the bottom of the step, typically navigation or submit buttons. */
|
|
4835
|
+
buttonGroup?: ReactNode;
|
|
4836
|
+
/** The main body content of the step. */
|
|
4837
|
+
children: ReactNode;
|
|
4838
|
+
};
|
|
4839
|
+
/**
|
|
4840
|
+
* Defines a single step inside a `StackedModal`.
|
|
4841
|
+
*
|
|
4842
|
+
* Renders a scrollable content area and an optional bottom button group.
|
|
4843
|
+
* The `header` prop is read by the parent `StackedModal` and displayed in the
|
|
4844
|
+
* modal header row with a matching slide animation.
|
|
4845
|
+
*
|
|
4846
|
+
* @example
|
|
4847
|
+
* <StackedModalStep header="Account details" buttonGroup={<Button>Next</Button>}>
|
|
4848
|
+
* <FormFields />
|
|
4849
|
+
* </StackedModalStep>
|
|
4850
|
+
*/
|
|
4851
|
+
declare function StackedModalStep({ children, buttonGroup }: StackedModalStepProps): _emotion_react_jsx_runtime.JSX.Element;
|
|
4852
|
+
|
|
4124
4853
|
type SwitchProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> & {
|
|
4125
4854
|
/** sets the label value */
|
|
4126
4855
|
label: ReactNode;
|
|
@@ -4536,4 +5265,4 @@ declare const StatusBullet: ({ status, hideText, size, message, compact, ...prop
|
|
|
4536
5265
|
|
|
4537
5266
|
declare const actionBarVisibilityStyles: _emotion_react.SerializedStyles;
|
|
4538
5267
|
|
|
4539
|
-
export { type ActionButtonsProps, AddButton, type AddButtonProps, AddListButton, type AddListButtonProps, type AddListButtonThemeProps, AsideAndSectionLayout, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, Banner, type BannerProps, type BannerType, BetaDecorator, type BoxHeightProps, type BreakpointSize, type BreakpointsMap, Button, type ButtonProps, type ButtonSizeProps, type ButtonSoftThemeProps, type ButtonThemeProps, ButtonWithMenu, type ButtonWithMenuProps, Calendar, type CalendarProps, Callout, type CalloutProps, type CalloutType, Caption, type CaptionProps, Card, CardContainer, type CardContainerBgColorProps, type CardContainerProps, type CardProps, CardTitle, type CardTitleProps, CheckboxWithInfo, type CheckboxWithInforProps, type ChildFunction, Chip, type ChipProps, type ChipTheme, type ComboBoxGroupBase, type ComboBoxSelectableGroup, type ComboBoxSelectableItem, type ComboBoxSelectableOption, Container, type ContainerProps, type ConvertComboBoxGroupsToSelectableGroupsOptions, Counter, type CounterBgColors, type CounterIconColors, type CounterProps, CreateTeamIntegrationTile, type CreateTeamIntegrationTileProps, CurrentDrawerContext, DashedBox, type DashedBoxProps, DateTimePicker, type DateTimePickerProps, DateTimePickerSummary, type DateTimePickerValue, DateTimePickerVariant, DebouncedInputKeywordSearch, type DebouncedInputKeywordSearchProps, DescriptionList, type DescriptionListProps, Details, type DetailsProps, DismissibleChipAction, DragHandle, type DraggableHandleProps, Drawer, DrawerContent, type DrawerContentProps, type DrawerContextValue, type DrawerItem, type DrawerProps, DrawerProvider, DrawerRenderer, type DrawerRendererItemProps, type DrawerRendererProps, type DrawersRegistryRecord, DropdownStyleMenuTrigger, type DropdownStyleMenuTriggerProps, EditTeamIntegrationTile, type EditTeamIntegrationTileProps, ErrorMessage, type ErrorMessageProps, FieldMessage, type FieldMessageProps, Fieldset, type FieldsetProps, FilterChip, FlexiCard, FlexiCardTitle, type GroupedOption, Heading, type HeadingProps, HexModalBackground, HorizontalRhythm, Icon, IconButton, type IconButtonProps, type IconColor, type IconName, type IconProps, type IconType, IconsProvider, Image, ImageBroken, type ImageProps, InfoMessage, type InfoMessageProps, Input, InputComboBox, type InputComboBoxOption, type InputComboBoxProps, InputCreatableComboBox, type InputCreatableComboBoxProps, InputInlineSelect, type InputInlineSelectOption, type InputInlineSelectProps, InputKeywordSearch, type InputKeywordSearchProps, type InputProps, InputSelect, type InputSelectProps, InputTime, type InputTimeProps, InputToggle, type InputToggleProps, IntegrationComingSoon, type IntegrationComingSoonProps, IntegrationLoadingTile, type IntegrationLoadingTileProps, IntegrationModalHeader, type IntegrationModalHeaderProps, IntegrationModalIcon, type IntegrationModalIconProps, IntegrationTile, type IntegrationTileProps, type IsoDateString, type IsoDateTimeString, type IsoTimeString, JsonEditor, type JsonEditorProps, KeyValueInput, type KeyValueInputProps, type KeyValueItem, Label, LabelLeadingIcon, type LabelLeadingIconProps, type LabelProps, Legend, type LegendProps, type LevelProps, LimitsBar, type LimitsBarProps, Link, type LinkColorProps, LinkList, type LinkListProps, type LinkManagerWithRefType, LinkNode, type LinkProps, LinkTile, type LinkTileWithRefProps, LinkWithRef, LoadingCardSkeleton, LoadingIcon, type LoadingIconProps, LoadingIndicator, LoadingOverlay, type LoadingOverlayProps, Menu, MenuButton, type MenuButtonProp, MenuGroup, type MenuGroupProps, MenuItem, MenuItemEmptyIcon, MenuItemIcon, MenuItemInner, type MenuItemProps, MenuItemSeparator, type MenuItemTextThemeProps, type MenuProps, MenuSelect, MenuThreeDots, type MenuThreeDotsProps, Modal, ModalDialog, type ModalDialogProps, type ModalProps, MultilineChip, type MultilineChipProps, ObjectGridContainer, type ObjectGridContainerProps, ObjectGridItem, ObjectGridItemCardCover, type ObjectGridItemCardCoverProps, ObjectGridItemCover, ObjectGridItemCoverButton, type ObjectGridItemCoverButtonProps, type ObjectGridItemCoverProps, ObjectGridItemHeading, ObjectGridItemIconWithTooltip, type ObjectGridItemIconWithTooltipProps, ObjectGridItemLoadingSkeleton, type ObjectGridItemProps, type ObjectGridItemTitleProps, ObjectItemLoadingSkeleton, type ObjectItemLoadingSkeletonProps, ObjectListItem, ObjectListItemContainer, ObjectListItemCover, type ObjectListItemCoverProps, ObjectListItemHeading, type ObjectListItemHeadingProps, type ObjectListItemProps, PageHeaderSection, type PageHeaderSectionProps, Pagination, Paragraph, type ParagraphProps, ParameterActionButton, type ParameterActionButtonProps, ParameterDrawerHeader, type ParameterDrawerHeaderProps, ParameterGroup, type ParameterGroupProps, ParameterImage, ParameterImageInner, ParameterImagePreview, type ParameterImageProps, ParameterInput, ParameterInputInner, type ParameterInputProps, ParameterLabel, type ParameterLabelProps, ParameterLink, ParameterLinkInner, type ParameterLinkProps, ParameterMenuButton, type ParameterMenuButtonProps, ParameterMultiSelect, ParameterMultiSelectInner, type ParameterMultiSelectOption, type ParameterMultiSelectProps, ParameterNameAndPublicIdInput, type ParameterNameAndPublicIdInputProps, ParameterNumberSlider, ParameterNumberSliderInner, type ParameterNumberSliderProps, ParameterOverrideMarker, ParameterRichText, ParameterRichTextInner, type ParameterRichTextInnerProps, type ParameterRichTextProps, ParameterSelect, ParameterSelectInner, type ParameterSelectProps, ParameterSelectSlider, ParameterSelectSliderInner, type ParameterSelectSliderProps, ParameterShell, ParameterShellContext, ParameterShellPlaceholder, type ParameterShellProps, ParameterTextarea, ParameterTextareaInner, type ParameterTextareaProps, ParameterToggle, ParameterToggleInner, type ParameterToggleProps, Popover, PopoverBody, type PopoverBodyProps, type PopoverProps, ProgressBar, type ProgressBarProps, ProgressList, ProgressListItem, type ProgressListItemProps, type ProgressListProps, type RegisterDrawerProps, ResolveIcon, type ResolveIconProps, ResponsiveTableContainer, type RhythmProps, type RichTextParamValue, RichTextToolbarIcon, type ScrollableItemProps, ScrollableList, type ScrollableListContainerProps, ScrollableListInputItem, ScrollableListItem, type ScrollableListItemProps, type ScrollableListProps, SearchableMenu, type SearchableMenuProps, SegmentedControl, type SegmentedControlOption, type SegmentedControlProps, SelectableMenuItem, type SelectableMenuItemProps, type SerializedLinkNode, type ShortcutReference, Skeleton, type SkeletonProps, Slider, SliderLabels, type SliderLabelsProps, type SliderOption, type SliderProps, Spinner, StatusBullet, type StatusBulletProps, type StatusTypeProps, SuccessMessage, type SuccessMessageProps, Switch, type SwitchProps, TAKEOVER_STACK_ID, TabButton, TabButtonGroup, type TabButtonProps, TabContent, type TabContentProps, Table, TableBody, type TableBodyProps, TableCellData, type TableCellDataProps, TableCellHead, type TableCellHeadProps, TableFoot, type TableFootProps, TableHead, type TableHeadProps, type TableProps, TableRow, type TableRowProps, Tabs, type TabsProps, TakeoverDrawerRenderer, type TextAlignProps, Textarea, type TextareaProps, Theme, type ThemeProps, type TickMark, Tile, TileContainer, type TileContainerProps, type TileProps, TileText, type TileTitleProps, ToastContainer, type ToastContainerProps, Tooltip, type TooltipProps, TwoColumnLayout, type TwoColumnLayoutProps, UniformBadge, UniformLogo, UniformLogoLarge, type UniformLogoProps, type UseShortcutOptions, type UseShortcutResult, VerticalRhythm, WarningMessage, type WarningMessageProps, accessibleHidden, actionBarVisibilityStyles, addPathSegmentToPathname, borderTopIcon, breakpoints, button, buttonAccentAltDark, buttonAccentAltDarkOutline, buttonDestructive, buttonDisabled, buttonGhost, buttonGhostDestructive, buttonGhostUnimportant, buttonPrimary, buttonPrimaryInvert, buttonRippleEffect, buttonSecondary, buttonSecondaryInvert, buttonSoftAccentPrimary, buttonSoftAlt, buttonSoftDestructive, buttonSoftPrimary, buttonSoftTertiary, buttonTertiary, buttonTertiaryOutline, buttonUnimportant, canvasAlertIcon, cardIcon, chatIcon, convertComboBoxGroupsToSelectableGroups, cq, customIcons, debounce, extractParameterProps, fadeIn, fadeInBottom, fadeInLtr, fadeInRtl, fadeInTop, fadeOutBottom, fullWidthScreenIcon, getButtonSize, getButtonStyles, getComboBoxSelectedSelectableGroups, getDrawerAttributes, getFormattedShortcut, getParentPath, getPathSegment, growSubtle, imageTextIcon, infoFilledIcon, input, inputError, inputSelect, isSecureURL, isValidUrl, jsonIcon, labelText, mq, numberInput, prefersReducedMotion, queryStringIcon, rectangleRoundedIcon, replaceUnderscoreInString, richTextToolbarButton, richTextToolbarButtonActive, ripple, scrollbarStyles, settings, settingsIcon, skeletonLoading, slideInRtl, slideInTtb, spin, structurePanelIcon, supports, textInput, uniformAiIcon, uniformComponentIcon, uniformComponentPatternIcon, uniformCompositionPatternIcon, uniformConditionalValuesIcon, uniformContentTypeIcon, uniformEntryIcon, uniformEntryPatternIcon, uniformLocaleDisabledIcon, uniformLocaleIcon, uniformStatusDraftIcon, uniformStatusModifiedIcon, uniformStatusPublishedIcon, uniformUsageStatusIcon, useBreakpoint, useButtonStyles, useCloseCurrentDrawer, useCurrentDrawer, useCurrentTab, useDateTimePickerContext, useDrawer, useIconContext, useImageLoadFallback, useOutsideClick, useParameterShell, usePopoverComponentContext, useRichTextToolbarState, useShortcut, functionalColors as utilityColors, warningIcon, yesNoIcon, zigZag, zigZagThick };
|
|
5268
|
+
export { type ActionButtonsProps, AddButton, type AddButtonProps, AddListButton, type AddListButtonProps, type AddListButtonThemeProps, AsideAndSectionLayout, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, Banner, type BannerProps, type BannerType, BetaDecorator, type BoxHeightProps, type BreakpointSize, type BreakpointsMap, Button, type ButtonProps, type ButtonSizeProps, type ButtonSoftThemeProps, type ButtonThemeProps, ButtonWithMenu, type ButtonWithMenuProps, Calendar, type CalendarCellCss, type CalendarProps, type CalendarStyles, Callout, type CalloutProps, type CalloutType, Caption, type CaptionProps, Card, CardContainer, type CardContainerBgColorProps, type CardContainerProps, type CardProps, CardTitle, type CardTitleProps, CheckboxWithInfo, type CheckboxWithInforProps, type ChildFunction, Chip, type ChipProps, type ChipTheme, type ComboBoxGroupBase, type ComboBoxSelectableGroup, type ComboBoxSelectableItem, type ComboBoxSelectableOption, Container, type ContainerProps, type ConvertComboBoxGroupsToSelectableGroupsOptions, Counter, type CounterBgColors, type CounterIconColors, type CounterProps, CreateTeamIntegrationTile, type CreateTeamIntegrationTileProps, CurrentDrawerContext, DashedBox, type DashedBoxProps, DateTimePicker, type DateTimePickerProps, DateTimePickerSummary, type DateTimePickerValue, DateTimePickerVariant, DebouncedInputKeywordSearch, type DebouncedInputKeywordSearchProps, DescriptionList, type DescriptionListProps, Details, type DetailsProps, DismissibleChipAction, DragHandle, type DraggableHandleProps, Drawer, DrawerContent, type DrawerContentProps, type DrawerContextValue, type DrawerItem, type DrawerProps, DrawerProvider, DrawerRenderer, type DrawerRendererItemProps, type DrawerRendererProps, type DrawersRegistryRecord, DropdownStyleMenuTrigger, type DropdownStyleMenuTriggerProps, EditTeamIntegrationTile, type EditTeamIntegrationTileProps, ErrorMessage, type ErrorMessageProps, FieldMessage, type FieldMessageProps, Fieldset, type FieldsetProps, FilterChip, FlexiCard, FlexiCardTitle, type GroupedOption, Heading, type HeadingProps, HexModalBackground, HorizontalRhythm, Icon, IconButton, type IconButtonProps, type IconColor, type IconName, type IconProps, type IconType, IconsProvider, Image, ImageBroken, type ImageProps, InfoMessage, type InfoMessageProps, Input, InputComboBox, type InputComboBoxOption, type InputComboBoxProps, InputCreatableComboBox, type InputCreatableComboBoxProps, InputInlineSelect, type InputInlineSelectOption, type InputInlineSelectProps, InputKeywordSearch, type InputKeywordSearchProps, type InputProps, InputSelect, type InputSelectProps, InputTime, type InputTimeProps, InputToggle, type InputToggleProps, IntegrationComingSoon, type IntegrationComingSoonProps, IntegrationLoadingTile, type IntegrationLoadingTileProps, IntegrationModalHeader, type IntegrationModalHeaderProps, IntegrationModalIcon, type IntegrationModalIconProps, IntegrationTile, type IntegrationTileProps, type IsoDateString, type IsoDateTimeString, type IsoTimeString, JsonEditor, type JsonEditorProps, KeyValueInput, type KeyValueInputProps, type KeyValueItem, Label, LabelLeadingIcon, type LabelLeadingIconProps, type LabelOption, type LabelProps, LabelsQuickFilter, type LabelsQuickFilterItem, type LabelsQuickFilterProps, Legend, type LegendProps, type LevelProps, LimitsBar, type LimitsBarProps, Link, LinkButton, type LinkButtonProps, type LinkColorProps, LinkList, type LinkListProps, type LinkManagerWithRefType, LinkNode, type LinkProps, LinkTile, type LinkTileWithRefProps, LinkWithRef, LoadingCardSkeleton, LoadingIcon, type LoadingIconProps, LoadingIndicator, LoadingOverlay, type LoadingOverlayProps, Menu, MenuButton, type MenuButtonProp, MenuGroup, type MenuGroupProps, MenuItem, MenuItemEmptyIcon, MenuItemIcon, MenuItemInner, type MenuItemProps, MenuItemSeparator, type MenuItemTextThemeProps, type MenuProps, MenuSelect, MenuThreeDots, type MenuThreeDotsProps, Modal, ModalDialog, type ModalDialogProps, type ModalProps, MultilineChip, type MultilineChipProps, ObjectGridContainer, type ObjectGridContainerProps, ObjectGridItem, ObjectGridItemCardCover, type ObjectGridItemCardCoverProps, ObjectGridItemCover, ObjectGridItemCoverButton, type ObjectGridItemCoverButtonProps, type ObjectGridItemCoverProps, ObjectGridItemHeading, ObjectGridItemIconWithTooltip, type ObjectGridItemIconWithTooltipProps, ObjectGridItemLoadingSkeleton, type ObjectGridItemProps, type ObjectGridItemTitleProps, ObjectItemLoadingSkeleton, type ObjectItemLoadingSkeletonProps, ObjectListItem, ObjectListItemContainer, ObjectListItemCover, type ObjectListItemCoverProps, ObjectListItemHeading, type ObjectListItemHeadingProps, type ObjectListItemProps, PageHeaderSection, type PageHeaderSectionProps, Pagination, Paragraph, type ParagraphProps, ParameterActionButton, type ParameterActionButtonProps, ParameterDrawerHeader, type ParameterDrawerHeaderProps, ParameterGroup, type ParameterGroupProps, ParameterImage, ParameterImageInner, ParameterImagePreview, type ParameterImageProps, ParameterInput, ParameterInputInner, type ParameterInputProps, ParameterLabel, type ParameterLabelProps, ParameterLabels, ParameterLabelsInner, ParameterLink, ParameterLinkInner, type ParameterLinkProps, ParameterMenuButton, type ParameterMenuButtonProps, ParameterMultiSelect, ParameterMultiSelectInner, type ParameterMultiSelectOption, type ParameterMultiSelectProps, ParameterNameAndPublicIdInput, type ParameterNameAndPublicIdInputProps, ParameterNumberSlider, ParameterNumberSliderInner, type ParameterNumberSliderProps, ParameterOverrideMarker, ParameterRichText, ParameterRichTextInner, type ParameterRichTextInnerProps, type ParameterRichTextProps, ParameterSelect, ParameterSelectInner, type ParameterSelectProps, ParameterSelectSlider, ParameterSelectSliderInner, type ParameterSelectSliderProps, ParameterShell, ParameterShellContext, ParameterShellPlaceholder, type ParameterShellProps, ParameterTextarea, ParameterTextareaInner, type ParameterTextareaProps, ParameterToggle, ParameterToggleInner, type ParameterToggleProps, Popover, PopoverBody, type PopoverBodyProps, type PopoverProps, ProgressBar, type ProgressBarProps, ProgressList, ProgressListItem, type ProgressListItemProps, type ProgressListProps, QuickFilter, type QuickFilterSelectedItem, type RegisterDrawerProps, ResolveIcon, type ResolveIconProps, ResponsiveTableContainer, type RhythmProps, type RichTextParamValue, RichTextToolbarIcon, type ScrollableItemProps, ScrollableList, type ScrollableListContainerProps, ScrollableListInputItem, ScrollableListItem, type ScrollableListItemProps, type ScrollableListProps, SearchableMenu, type SearchableMenuProps, SegmentedControl, type SegmentedControlOption, type SegmentedControlProps, SelectableMenuItem, type SelectableMenuItemProps, type SerializedLinkNode, type ShortcutReference, Skeleton, type SkeletonProps, Slider, SliderLabels, type SliderLabelsProps, type SliderOption, type SliderProps, Spinner, StackedModal, type StackedModalProps, StackedModalStep, type StackedModalStepProps, StatusBullet, type StatusBulletProps, type StatusTypeProps, type StepTransitionState, SuccessMessage, type SuccessMessageProps, Swatch, SwatchComboBox, SwatchComboBoxLabelStyles, SwatchLabel, type SwatchLabelProps, SwatchLabelRemoveButton, SwatchLabelTooltip, type SwatchProps, type SwatchSize, type SwatchVariant, Switch, type SwitchProps, TAKEOVER_STACK_ID, TabButton, TabButtonGroup, type TabButtonProps, TabContent, type TabContentProps, Table, TableBody, type TableBodyProps, TableCellData, type TableCellDataProps, TableCellHead, type TableCellHeadProps, TableFoot, type TableFootProps, TableHead, type TableHeadProps, type TableProps, TableRow, type TableRowProps, Tabs, type TabsProps, TakeoverDrawerRenderer, type TextAlignProps, Textarea, type TextareaProps, Theme, type ThemeProps, type TickMark, Tile, TileContainer, type TileContainerProps, type TileProps, TileText, type TileTitleProps, ToastContainer, type ToastContainerProps, Tooltip, type TooltipProps, TwoColumnLayout, type TwoColumnLayoutProps, UniformBadge, UniformLogo, UniformLogoLarge, type UniformLogoProps, type UseShortcutOptions, type UseShortcutResult, VerticalRhythm, WarningMessage, type WarningMessageProps, accessibleHidden, actionBarVisibilityStyles, addPathSegmentToPathname, borderTopIcon, breakpoints, button, buttonAccentAltDark, buttonAccentAltDarkOutline, buttonDestructive, buttonDisabled, buttonGhost, buttonGhostDestructive, buttonGhostUnimportant, buttonPrimary, buttonPrimaryInvert, buttonRippleEffect, buttonSecondary, buttonSecondaryInvert, buttonSoftAccentPrimary, buttonSoftAlt, buttonSoftDestructive, buttonSoftPrimary, buttonSoftTertiary, buttonTertiary, buttonTertiaryOutline, buttonUnimportant, canvasAlertIcon, cardIcon, chatIcon, convertComboBoxGroupsToSelectableGroups, cq, customIcons, debounce, extractParameterProps, fadeIn, fadeInBottom, fadeInLtr, fadeInRtl, fadeInTop, fadeOutBottom, fullWidthScreenIcon, getButtonSize, getButtonStyles, getComboBoxSelectedSelectableGroups, getDrawerAttributes, getFormattedShortcut, getParentPath, getPathSegment, growSubtle, imageTextIcon, infoFilledIcon, input, inputError, inputSelect, isSecureURL, isValidUrl, jsonIcon, labelText, mq, numberInput, prefersReducedMotion, queryStringIcon, rectangleRoundedIcon, replaceUnderscoreInString, richTextToolbarButton, richTextToolbarButtonActive, ripple, scrollbarStyles, settings, settingsIcon, skeletonLoading, slideInRtl, slideInTtb, spin, structurePanelIcon, supports, swatchColors, swatchVariant, textInput, uniformAiIcon, uniformComponentIcon, uniformComponentPatternIcon, uniformCompositionPatternIcon, uniformConditionalValuesIcon, uniformContentTypeIcon, uniformEntryIcon, uniformEntryPatternIcon, uniformLocaleDisabledIcon, uniformLocaleIcon, uniformStatusDraftIcon, uniformStatusModifiedIcon, uniformStatusPublishedIcon, uniformUsageStatusIcon, useBreakpoint, useButtonStyles, useCloseCurrentDrawer, useCurrentDrawer, useCurrentTab, useDateTimePickerContext, useDrawer, useIconContext, useImageLoadFallback, useOutsideClick, useParameterShell, usePopoverComponentContext, useRichTextToolbarState, useShortcut, useStackedModal, functionalColors as utilityColors, warningIcon, yesNoIcon, zigZag, zigZagThick };
|