@uniformdev/design-system 19.54.0 → 19.54.2-alpha.12
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 +294 -117
- package/dist/index.d.mts +402 -370
- package/dist/index.d.ts +402 -370
- package/dist/index.js +328 -141
- package/package.json +4 -4
package/dist/index.d.mts
CHANGED
|
@@ -75,6 +75,22 @@ declare const cq: (size: string) => string;
|
|
|
75
75
|
|
|
76
76
|
declare const replaceUnderscoreInString: (title?: string) => string | undefined;
|
|
77
77
|
|
|
78
|
+
declare const isSecureURL: (value?: string) => boolean;
|
|
79
|
+
interface IsValidUrlOptions {
|
|
80
|
+
allowRelative?: boolean;
|
|
81
|
+
isSecure?: boolean;
|
|
82
|
+
}
|
|
83
|
+
declare const isValidUrl: (urlString: string, options?: IsValidUrlOptions) => boolean;
|
|
84
|
+
/**
|
|
85
|
+
* Joins different variants of parent relative url with path segment. Path can be "", "/" and "/foo/bar"
|
|
86
|
+
*
|
|
87
|
+
* @param path
|
|
88
|
+
* @param pathSegment
|
|
89
|
+
*/
|
|
90
|
+
declare const addPathSegmentToPathname: (path: string, pathSegment: string) => string;
|
|
91
|
+
declare const getPathSegment: (path: string) => string;
|
|
92
|
+
declare const getParentPath: (path: string | undefined, noRootSlash?: boolean) => string;
|
|
93
|
+
|
|
78
94
|
declare const useOutsideClick: (containerRef: RefObject<HTMLElement | null>, handler: () => void) => void;
|
|
79
95
|
|
|
80
96
|
declare const button: _emotion_react.SerializedStyles;
|
|
@@ -20282,7 +20298,7 @@ declare const UniformLogoLarge: ({ ...props }: React.SVGAttributes<SVGElement>)
|
|
|
20282
20298
|
/** Button themes that are available to use with our brand */
|
|
20283
20299
|
type ButtonThemeProps$1 = 'primary' | 'secondary' | 'destructive' | 'tertiary' | 'tertiaryOutline' | 'unimportant' | 'ghost' | 'ghostDestructive' | 'primaryInvert' | 'secondaryInvert' | 'ghostUnimportant';
|
|
20284
20300
|
/** Button sizes that are available to use with our brand */
|
|
20285
|
-
type ButtonSizeProps = 'zero' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
|
|
20301
|
+
type ButtonSizeProps$1 = 'zero' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
|
|
20286
20302
|
type ButtonProps = ButtonProps$1 & {
|
|
20287
20303
|
/** sets the theme of the button
|
|
20288
20304
|
* @default "primary"
|
|
@@ -20293,7 +20309,7 @@ type ButtonProps = ButtonProps$1 & {
|
|
|
20293
20309
|
/**
|
|
20294
20310
|
* @default "md"
|
|
20295
20311
|
* */
|
|
20296
|
-
size?: ButtonSizeProps;
|
|
20312
|
+
size?: ButtonSizeProps$1;
|
|
20297
20313
|
};
|
|
20298
20314
|
/**
|
|
20299
20315
|
* Uniform Button Component
|
|
@@ -20302,373 +20318,6 @@ type ButtonProps = ButtonProps$1 & {
|
|
|
20302
20318
|
*/
|
|
20303
20319
|
declare const Button: React$1.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
|
|
20304
20320
|
|
|
20305
|
-
type ButtonThemeProps = 'primary' | 'secondary' | 'unimportant' | 'ghost';
|
|
20306
|
-
interface ActionButtonsProps {
|
|
20307
|
-
/** Takes a function for the visible button */
|
|
20308
|
-
onButtonClick: () => void;
|
|
20309
|
-
/** (optional) reakit placements options for the expandable menu */
|
|
20310
|
-
placement?: MenuProps$1['placement'];
|
|
20311
|
-
/** sets the theme of the button
|
|
20312
|
-
* @default "secondary"
|
|
20313
|
-
*/
|
|
20314
|
-
buttonType?: ButtonThemeProps;
|
|
20315
|
-
/** sets the button text value */
|
|
20316
|
-
buttonText: string;
|
|
20317
|
-
/** adds child components to the ButtonWithMenu component */
|
|
20318
|
-
children: React$1.ReactNode;
|
|
20319
|
-
}
|
|
20320
|
-
/** ButtonWithMenuProps combines the ActionButtonsProps with React HTMLButtonElement attributes */
|
|
20321
|
-
type ButtonWithMenuProps = ActionButtonsProps & React$1.ButtonHTMLAttributes<HTMLButtonElement>;
|
|
20322
|
-
/**
|
|
20323
|
-
* Uniform ButtonWithMenu Component
|
|
20324
|
-
* @example
|
|
20325
|
-
<ButtonWithMenu
|
|
20326
|
-
disabled={isDisabled}
|
|
20327
|
-
buttonText="Save and close"
|
|
20328
|
-
onButtonClick={() => someFunction()}
|
|
20329
|
-
placement="bottom-end"
|
|
20330
|
-
>
|
|
20331
|
-
<MenuItem
|
|
20332
|
-
disabled={isDisabled}
|
|
20333
|
-
onClick={() => someFunction()}
|
|
20334
|
-
key="save"
|
|
20335
|
-
className="flex gap-2 items-center"
|
|
20336
|
-
data-testid="save-menu-item-button"
|
|
20337
|
-
>
|
|
20338
|
-
<span className="whitespace-nowrap" data-testid="save-menu-item">
|
|
20339
|
-
Save
|
|
20340
|
-
</span>
|
|
20341
|
-
</MenuItem>
|
|
20342
|
-
</ButtonWithMenu>
|
|
20343
|
-
*/
|
|
20344
|
-
declare const ButtonWithMenu: ({ onButtonClick, buttonType, buttonText, disabled, children, placement, ...buttonProps }: ButtonWithMenuProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
|
|
20345
|
-
|
|
20346
|
-
/** Callout button types available to use with our brand */
|
|
20347
|
-
type CalloutType = 'caution' | 'danger' | 'info' | 'note' | 'success' | 'tip' | 'error';
|
|
20348
|
-
interface CalloutProps {
|
|
20349
|
-
/** sets the type of callout to use and it's styles
|
|
20350
|
-
* @default "info"
|
|
20351
|
-
*/
|
|
20352
|
-
type: CalloutType;
|
|
20353
|
-
/** make the display of the callout compact. Suitable for small spaces
|
|
20354
|
-
* @default false
|
|
20355
|
-
*/
|
|
20356
|
-
compact?: boolean;
|
|
20357
|
-
/** (optional) sets the title of the callout */
|
|
20358
|
-
title?: React$1.ReactNode;
|
|
20359
|
-
/** add child elements to the callout */
|
|
20360
|
-
children?: React$1.ReactNode;
|
|
20361
|
-
/** sets additional css classes or emotion styles on the callout */
|
|
20362
|
-
className?: SerializedStyles | string;
|
|
20363
|
-
/** sets the data-testid on the callout element */
|
|
20364
|
-
testId?: string;
|
|
20365
|
-
}
|
|
20366
|
-
/**
|
|
20367
|
-
* Uniform Callout Component
|
|
20368
|
-
* @example <Callout title="my title" type="caution"><p>callout body copy</p></Callout>
|
|
20369
|
-
*/
|
|
20370
|
-
declare const Callout: ({ type, compact, title, children, className, testId, }: CalloutProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element | null;
|
|
20371
|
-
|
|
20372
|
-
type CardProps = React$1.HTMLAttributes<HTMLDivElement> & {
|
|
20373
|
-
/** (optional) sets the title value of the card */
|
|
20374
|
-
title?: string;
|
|
20375
|
-
/** sets whether or not to apply a margin bottom to the title
|
|
20376
|
-
* @default true
|
|
20377
|
-
*/
|
|
20378
|
-
titleWithMarginBottom?: boolean;
|
|
20379
|
-
/** (optional) sets react child components */
|
|
20380
|
-
children?: React$1.ReactNode;
|
|
20381
|
-
/** (optional) sets options for a dropdown menu */
|
|
20382
|
-
menuItems?: JSX.Element;
|
|
20383
|
-
/** (optional) sets the data-testid attribute on the button element
|
|
20384
|
-
* @default 'list-card-menu'
|
|
20385
|
-
*/
|
|
20386
|
-
menuButtonTestId?: string;
|
|
20387
|
-
/** (optional) sets the menu button disabled state */
|
|
20388
|
-
disabled?: boolean;
|
|
20389
|
-
/**
|
|
20390
|
-
* The name of the HTML tag to render.
|
|
20391
|
-
* @default "div"
|
|
20392
|
-
*/
|
|
20393
|
-
tag?: React$1.ElementType;
|
|
20394
|
-
};
|
|
20395
|
-
declare const Card: ({ title, menuItems, children, titleWithMarginBottom, disabled, tag: Tag, menuButtonTestId, ...props }: CardProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
|
|
20396
|
-
type CardTitleProps = {
|
|
20397
|
-
children?: React$1.ReactNode;
|
|
20398
|
-
} & Pick<CardProps, 'title' | 'titleWithMarginBottom'>;
|
|
20399
|
-
declare const CardTitle: ({ title, titleWithMarginBottom, children }: CardTitleProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
|
|
20400
|
-
|
|
20401
|
-
type CardContainerBgColorProps = 'gray' | 'white';
|
|
20402
|
-
type CardContainerProps = React$1.HTMLAttributes<HTMLDivElement> & {
|
|
20403
|
-
/** (optional): sets the background colour of the wrapping element
|
|
20404
|
-
* @default 'white'
|
|
20405
|
-
*/
|
|
20406
|
-
bgColor?: CardContainerBgColorProps;
|
|
20407
|
-
/** (optional): sets react child components */
|
|
20408
|
-
children?: React$1.ReactNode;
|
|
20409
|
-
/** (optional): sets the padding values of the inner container
|
|
20410
|
-
* @example 'when set to true padding: var(--spacing-2xl) var(--spacing-lg)'
|
|
20411
|
-
* @default true
|
|
20412
|
-
*/
|
|
20413
|
-
padding?: boolean;
|
|
20414
|
-
/** (optional): sets the padding values of the inner container
|
|
20415
|
-
* @example `when set to true`
|
|
20416
|
-
* grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) [last-col] minmax(300px, 1fr);
|
|
20417
|
-
* grid-template-rows: auto [last-line];
|
|
20418
|
-
* @default false
|
|
20419
|
-
*/
|
|
20420
|
-
withLastColumn?: boolean;
|
|
20421
|
-
};
|
|
20422
|
-
/** Uniform Card Container
|
|
20423
|
-
* @example <CardContainer><Card title="card title" /></CardContainer>
|
|
20424
|
-
*/
|
|
20425
|
-
declare const CardContainer: ({ bgColor, padding, withLastColumn, children, ...props }: CardContainerProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
|
|
20426
|
-
|
|
20427
|
-
declare const LoadingCardSkeleton: () => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
|
|
20428
|
-
|
|
20429
|
-
type ChipSizeProp = 'xs' | 'sm' | 'md';
|
|
20430
|
-
type ChipTheme = 'accent-light' | 'accent-dark' | 'accent-alt-light' | 'accent-alt-dark' | 'neutral-light' | 'neutral-dark';
|
|
20431
|
-
type ChipProps = {
|
|
20432
|
-
icon?: IconType;
|
|
20433
|
-
text: ReactNode;
|
|
20434
|
-
/** sets the size of the chip
|
|
20435
|
-
* @default 'sm'
|
|
20436
|
-
*/
|
|
20437
|
-
theme?: ChipTheme;
|
|
20438
|
-
chipAction?: React.ReactNode;
|
|
20439
|
-
size?: ChipSizeProp;
|
|
20440
|
-
} & React.HTMLAttributes<HTMLSpanElement>;
|
|
20441
|
-
/**
|
|
20442
|
-
* @description Chips are used in a variety of ways
|
|
20443
|
-
* To represent tokens, where the value of the chip will be replaced with something dynamically.
|
|
20444
|
-
* To represent tags or important metadata about an object
|
|
20445
|
-
* To represent a different object, as a reference
|
|
20446
|
-
* @example <Chip text="productId" theme="accent-light" chipAction={<DismissibleChipAction onDismiss={() => {...}}/>} />
|
|
20447
|
-
*/
|
|
20448
|
-
declare const Chip: ({ icon, text, size, theme, chipAction, ...props }: ChipProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
|
|
20449
|
-
type DismissibleChipActionProps = {
|
|
20450
|
-
onDismiss: () => void;
|
|
20451
|
-
} & HTMLAttributes<HTMLButtonElement>;
|
|
20452
|
-
/**
|
|
20453
|
-
* @description Dismissible chip action should be used with the Chip component
|
|
20454
|
-
* @example <DismissibleChipAction onDismiss={() => {...}}/>
|
|
20455
|
-
*/
|
|
20456
|
-
declare const DismissibleChipAction: ({ onDismiss, ...props }: DismissibleChipActionProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
|
|
20457
|
-
|
|
20458
|
-
type MultilineChipProps = {
|
|
20459
|
-
children: ReactNode;
|
|
20460
|
-
onClick?: () => void;
|
|
20461
|
-
} & React.HTMLAttributes<HTMLSpanElement | HTMLButtonElement>;
|
|
20462
|
-
/**
|
|
20463
|
-
* @description A chip specifically designed to fit as a chipped element in an multi-line capable content field.
|
|
20464
|
-
* Unlike a regular chip, this one can go onto multiple lines with word wrap, and uses inline behaviours.
|
|
20465
|
-
* @example <MultilineChip text="productId" />
|
|
20466
|
-
*/
|
|
20467
|
-
declare const MultilineChip: ({ children, onClick, ...props }: MultilineChipProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
|
|
20468
|
-
|
|
20469
|
-
type CounterProps = {
|
|
20470
|
-
/** sets the count value, a 0 will show a dot instead of a number. Undefined will cause the counter to disappear. */
|
|
20471
|
-
count: number | undefined;
|
|
20472
|
-
/** sets the background color
|
|
20473
|
-
* @default 'transparent'
|
|
20474
|
-
*/
|
|
20475
|
-
bgColor?: 'var(--white)' | 'var(--gray-50)' | 'transparent';
|
|
20476
|
-
} & React$1.HTMLAttributes<HTMLDivElement>;
|
|
20477
|
-
/** @example <Counter count={1} /> */
|
|
20478
|
-
declare const Counter: ({ count, bgColor, ...props }: CounterProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element | null;
|
|
20479
|
-
|
|
20480
|
-
type TextAlignProps = 'left' | 'right' | 'center';
|
|
20481
|
-
type BoxHeightProps = 'auto' | 'xs' | 'sm' | 'md' | 'lg';
|
|
20482
|
-
type DashedBoxProps = React$1.HTMLAttributes<HTMLDivElement> & {
|
|
20483
|
-
/** React child elements */
|
|
20484
|
-
children: React$1.ReactNode;
|
|
20485
|
-
/** (optional) - sets the text alignment */
|
|
20486
|
-
textAlign?: TextAlignProps;
|
|
20487
|
-
/** (optional) - sets the background color */
|
|
20488
|
-
bgColor?: 'transparent' | 'white' | 'var(--gray-50)';
|
|
20489
|
-
/** (optional) - sets the minimum box height */
|
|
20490
|
-
boxHeight?: BoxHeightProps;
|
|
20491
|
-
};
|
|
20492
|
-
/**
|
|
20493
|
-
* Uniform Dashed Box Component
|
|
20494
|
-
* @example <DashedBox bgColor="white" boxHeight="md" textAlign="center"><h1>hello world</h1></DashedBox>
|
|
20495
|
-
*/
|
|
20496
|
-
declare const DashedBox: ({ bgColor, textAlign, boxHeight, children, ...props }: DashedBoxProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
|
|
20497
|
-
|
|
20498
|
-
type DescriptionListProps = {
|
|
20499
|
-
items: {
|
|
20500
|
-
label: string;
|
|
20501
|
-
value: string | number | boolean | React__default.ReactNode;
|
|
20502
|
-
}[];
|
|
20503
|
-
} & React__default.HTMLAttributes<HTMLDListElement>;
|
|
20504
|
-
/**
|
|
20505
|
-
* A component to render a key-value list (uses <dl />, <dt /> and <dd /> under the hood).
|
|
20506
|
-
* @example <DescriptionList items={[{label: 'Label 1', value: 'Value 1'}]} />
|
|
20507
|
-
*/
|
|
20508
|
-
declare const DescriptionList: React__default.ForwardRefExoticComponent<{
|
|
20509
|
-
items: {
|
|
20510
|
-
label: string;
|
|
20511
|
-
value: string | number | boolean | React__default.ReactNode;
|
|
20512
|
-
}[];
|
|
20513
|
-
} & React__default.HTMLAttributes<HTMLDListElement> & React__default.RefAttributes<HTMLDListElement>>;
|
|
20514
|
-
|
|
20515
|
-
type DetailsProps = React$1.HTMLAttributes<HTMLDetailsElement> & {
|
|
20516
|
-
/** sets the summary inner components */
|
|
20517
|
-
summary: React$1.ReactNode;
|
|
20518
|
-
children: React$1.ReactNode;
|
|
20519
|
-
isOpen?: boolean | undefined;
|
|
20520
|
-
onChange?: (isOpen: boolean) => void;
|
|
20521
|
-
/** sets whether the details should be open by default.
|
|
20522
|
-
* Undefined value means that the details will be controlled by the user.
|
|
20523
|
-
* @default false
|
|
20524
|
-
*/
|
|
20525
|
-
isOpenByDefault?: boolean;
|
|
20526
|
-
};
|
|
20527
|
-
/** @example <Details summary="summary text">child content here</Details>*/
|
|
20528
|
-
declare const Details: ({ summary, children, isOpenByDefault, isOpen, onChange, ...props }: DetailsProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
|
|
20529
|
-
|
|
20530
|
-
interface DrawerRendererProps extends Omit<React__default.HTMLAttributes<HTMLDivElement>, 'children'> {
|
|
20531
|
-
/** The ID of the stack to render. Some drawers need to use the same stack ID to be rendered here */
|
|
20532
|
-
stackId: string;
|
|
20533
|
-
/** The width of the drawers. In any CSS length unit (px, rem, %, et al). Can't use CSS functions (e.g. calc())
|
|
20534
|
-
* @default 'medium'
|
|
20535
|
-
*/
|
|
20536
|
-
width?: 'narrow' | 'medium' | 'wide' | (string & NonNullable<unknown>);
|
|
20537
|
-
/** The minimum width of the drawers. In any CSS length unit (px, rem, %, et al)
|
|
20538
|
-
* @default '0'
|
|
20539
|
-
*/
|
|
20540
|
-
minWidth?: string;
|
|
20541
|
-
/** The maximum width of the drawers. In any CSS length unit (px, rem, %, et al)
|
|
20542
|
-
* @default '100%'
|
|
20543
|
-
*/
|
|
20544
|
-
maxWidth?: string;
|
|
20545
|
-
/** Sets the css position value
|
|
20546
|
-
* @default 'absolute'
|
|
20547
|
-
*/
|
|
20548
|
-
position?: 'absolute' | 'fixed' | 'sticky';
|
|
20549
|
-
/** Opens the drawer from left to right
|
|
20550
|
-
* @default false
|
|
20551
|
-
*/
|
|
20552
|
-
leftAligned?: boolean;
|
|
20553
|
-
/**
|
|
20554
|
-
* If a drawer in the stack has a specific `width` prop, and its value is larger than the width of the current stack,
|
|
20555
|
-
* the width of the stack will be automatically adjusted to accommodate for that.
|
|
20556
|
-
* Set this prop to `true` to disable this behavior.
|
|
20557
|
-
* @default false
|
|
20558
|
-
*/
|
|
20559
|
-
withoutFluidWidth?: boolean;
|
|
20560
|
-
}
|
|
20561
|
-
/**
|
|
20562
|
-
* Renders a stack of drawers in a different location than their original position in the component tree. Uses React Portal under the hood.
|
|
20563
|
-
* @example <DrawerProvider><Drawer id="my-drawer" stackId="my-stack" header="Title">Hello</Drawer><DrawerRenderer stackId="my-stack"/></DrawerProvider>
|
|
20564
|
-
*/
|
|
20565
|
-
declare const DrawerRenderer: ({ stackId, position, width, minWidth, maxWidth, leftAligned, withoutFluidWidth, ...otherProps }: DrawerRendererProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element | null;
|
|
20566
|
-
interface DrawerRendererItemProps extends React__default.HTMLAttributes<HTMLDivElement> {
|
|
20567
|
-
index: number;
|
|
20568
|
-
totalDrawers: number;
|
|
20569
|
-
width: DrawerRendererProps['width'];
|
|
20570
|
-
minWidth: Required<DrawerRendererProps['minWidth']>;
|
|
20571
|
-
maxWidth: Required<DrawerRendererProps['maxWidth']>;
|
|
20572
|
-
leftAligned: Required<DrawerRendererProps['leftAligned']>;
|
|
20573
|
-
onOverlayClick?: () => void;
|
|
20574
|
-
}
|
|
20575
|
-
declare const getDrawerAttributes: ({ providerId, stackId, id, }: {
|
|
20576
|
-
providerId: string;
|
|
20577
|
-
stackId?: string | undefined;
|
|
20578
|
-
id: string;
|
|
20579
|
-
}) => {
|
|
20580
|
-
'data-drawer-id': string;
|
|
20581
|
-
'data-testid': string;
|
|
20582
|
-
};
|
|
20583
|
-
|
|
20584
|
-
interface DrawerItem {
|
|
20585
|
-
/** An ID for the drawer. It should be unique in the stack where it's rendered */
|
|
20586
|
-
id: string;
|
|
20587
|
-
/**
|
|
20588
|
-
* The ID of the stack where the drawer should be renderer. It should match the stack ID of an existing DrawerRenderer.
|
|
20589
|
-
* If not provided, it will fall back to the default renderer of the drawer.
|
|
20590
|
-
* If the drawer is rendered inside another one, this value gets inherited.
|
|
20591
|
-
* */
|
|
20592
|
-
stackId?: string;
|
|
20593
|
-
/** Just like React.Key, changing this value indicates that the drawer has changed and we need to close the current instance and open a new one */
|
|
20594
|
-
instanceKey?: string;
|
|
20595
|
-
/**
|
|
20596
|
-
* The desired width of the drawer.
|
|
20597
|
-
* This value is ignored if the drawer is part of a DrawerRenderer with `withoutFluidWidth`.
|
|
20598
|
-
* If not set, the drawer will use the width of its renderer.
|
|
20599
|
-
*/
|
|
20600
|
-
width?: DrawerRendererProps['width'];
|
|
20601
|
-
/** Called when the close button is clicked, the Escape button is pressed, or when the drawer's overlay is clicked */
|
|
20602
|
-
onRequestClose?: () => void;
|
|
20603
|
-
/** Test ID for test automation **/
|
|
20604
|
-
testId?: string;
|
|
20605
|
-
}
|
|
20606
|
-
type RegisterDrawerProps = {
|
|
20607
|
-
drawer: DrawerItem;
|
|
20608
|
-
/** Called when drawer is rendered for the first time. Useful to set the focus on the drawer */
|
|
20609
|
-
onFirstRender?: () => void;
|
|
20610
|
-
};
|
|
20611
|
-
type DrawersRegistryRecord = DrawerItem & {
|
|
20612
|
-
/** The timestamp of when the drawer was registered. Used to stack the drawers in the right order regardless of where where they are in the DOM */
|
|
20613
|
-
registeredAt?: number;
|
|
20614
|
-
isFirstRender?: boolean;
|
|
20615
|
-
onFirstRender?: RegisterDrawerProps['onFirstRender'];
|
|
20616
|
-
};
|
|
20617
|
-
type DrawerContextValue = {
|
|
20618
|
-
providerId: string;
|
|
20619
|
-
drawersRegistry: DrawersRegistryRecord[];
|
|
20620
|
-
registerDrawer: (props: RegisterDrawerProps) => void;
|
|
20621
|
-
unregisterDrawer: (drawerId: Pick<DrawerItem, 'id' | 'stackId' | 'instanceKey'>) => void;
|
|
20622
|
-
};
|
|
20623
|
-
/**
|
|
20624
|
-
* Provides the context to the Drawer and DrawerRenderer components.
|
|
20625
|
-
* @example <DrawerProvider><Drawer id="my-drawer" stackId="my-stack" header="Title">Hello</Drawer><DrawerRenderer stackId="my-stack"/></DrawerProvider>
|
|
20626
|
-
*/
|
|
20627
|
-
declare const DrawerProvider: ({ children }: React__default.PropsWithChildren) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
|
|
20628
|
-
declare const useDrawer: () => DrawerContextValue;
|
|
20629
|
-
declare const useCloseCurrentDrawer: () => (() => void) | undefined;
|
|
20630
|
-
|
|
20631
|
-
type DrawerProps = DrawerItem & Omit<DrawerRendererProps, 'stackId'> & {
|
|
20632
|
-
header?: React__default.ReactNode;
|
|
20633
|
-
children?: React__default.ReactNode;
|
|
20634
|
-
bgColor?: 'var(--gray-50)' | 'var(--white)';
|
|
20635
|
-
leftAligned?: DrawerRendererProps['leftAligned'];
|
|
20636
|
-
};
|
|
20637
|
-
declare const CurrentDrawerContext: React__default.Context<{
|
|
20638
|
-
id?: string | undefined;
|
|
20639
|
-
stackId?: string | undefined;
|
|
20640
|
-
leftAligned?: DrawerRendererProps['leftAligned'];
|
|
20641
|
-
}>;
|
|
20642
|
-
declare const useCurrentDrawer: () => {
|
|
20643
|
-
id?: string | undefined;
|
|
20644
|
-
stackId?: string | undefined;
|
|
20645
|
-
leftAligned?: DrawerRendererProps['leftAligned'];
|
|
20646
|
-
};
|
|
20647
|
-
/**
|
|
20648
|
-
* A drawer component that opens from the right side of is parent. The component is used in combination with DrawerProvider and DrawerRenderer
|
|
20649
|
-
* @example <Drawer id="my-drawer" header="Title">Hello</Drawer>
|
|
20650
|
-
*/
|
|
20651
|
-
declare const Drawer: React__default.ForwardRefExoticComponent<DrawerItem & Omit<DrawerRendererProps, "stackId"> & {
|
|
20652
|
-
header?: React__default.ReactNode;
|
|
20653
|
-
children?: React__default.ReactNode;
|
|
20654
|
-
bgColor?: "var(--white)" | "var(--gray-50)" | undefined;
|
|
20655
|
-
leftAligned?: DrawerRendererProps['leftAligned'];
|
|
20656
|
-
} & React__default.RefAttributes<HTMLDivElement>>;
|
|
20657
|
-
|
|
20658
|
-
type DrawerContentProps = {
|
|
20659
|
-
children: ReactNode;
|
|
20660
|
-
buttonGroup?: ReactNode;
|
|
20661
|
-
noPadding?: boolean;
|
|
20662
|
-
} & HTMLAttributes<HTMLDivElement>;
|
|
20663
|
-
declare const DrawerContent: ({ children, buttonGroup, noPadding, ...props }: DrawerContentProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
|
|
20664
|
-
|
|
20665
|
-
interface IconButtonProps extends Omit<ButtonProps, 'size'> {
|
|
20666
|
-
variant?: 'square' | 'rounded';
|
|
20667
|
-
/** Style for the larger sizes have not been decided yet */
|
|
20668
|
-
size?: 'xs' | 'sm' | 'md';
|
|
20669
|
-
}
|
|
20670
|
-
declare const IconButton: React$1.ForwardRefExoticComponent<Omit<IconButtonProps, "ref"> & React$1.RefAttributes<unknown>>;
|
|
20671
|
-
|
|
20672
20321
|
declare const allSupportedIcons: {
|
|
20673
20322
|
'rectangle-rounded': (props: _react_icons_all_files.IconBaseProps) => JSX.Element;
|
|
20674
20323
|
card: (props: _react_icons_all_files.IconBaseProps) => JSX.Element;
|
|
@@ -21414,6 +21063,378 @@ declare function IconsProvider({ children }: {
|
|
|
21414
21063
|
children: ReactNode;
|
|
21415
21064
|
}): _emotion_react_types_jsx_namespace.EmotionJSX.Element;
|
|
21416
21065
|
|
|
21066
|
+
type ButtonThemeProps = 'primary' | 'secondary' | 'unimportant' | 'ghost' | 'secondaryOutline';
|
|
21067
|
+
type ButtonSizeProps = 'sm' | 'base' | 'lg';
|
|
21068
|
+
interface ActionButtonsProps {
|
|
21069
|
+
/** Takes a function for the visible button */
|
|
21070
|
+
onButtonClick: () => void;
|
|
21071
|
+
/** (optional) reakit placements options for the expandable menu */
|
|
21072
|
+
placement?: MenuProps$1['placement'];
|
|
21073
|
+
/** sets the theme of the button
|
|
21074
|
+
* @default "secondary"
|
|
21075
|
+
*/
|
|
21076
|
+
buttonType?: ButtonThemeProps;
|
|
21077
|
+
/** sets the button text value */
|
|
21078
|
+
buttonText: string;
|
|
21079
|
+
/** sets a leading icon supporting the button text */
|
|
21080
|
+
icon?: IconName;
|
|
21081
|
+
/** adds child components to the ButtonWithMenu component */
|
|
21082
|
+
children: React$1.ReactNode;
|
|
21083
|
+
/** sets the button size */
|
|
21084
|
+
size?: ButtonSizeProps;
|
|
21085
|
+
}
|
|
21086
|
+
/** ButtonWithMenuProps combines the ActionButtonsProps with React HTMLButtonElement attributes */
|
|
21087
|
+
type ButtonWithMenuProps = ActionButtonsProps & React$1.ButtonHTMLAttributes<HTMLButtonElement>;
|
|
21088
|
+
/**
|
|
21089
|
+
* Uniform ButtonWithMenu Component
|
|
21090
|
+
* @example
|
|
21091
|
+
<ButtonWithMenu
|
|
21092
|
+
disabled={isDisabled}
|
|
21093
|
+
buttonText="Save and close"
|
|
21094
|
+
onButtonClick={() => someFunction()}
|
|
21095
|
+
placement="bottom-end"
|
|
21096
|
+
>
|
|
21097
|
+
<MenuItem
|
|
21098
|
+
disabled={isDisabled}
|
|
21099
|
+
onClick={() => someFunction()}
|
|
21100
|
+
key="save"
|
|
21101
|
+
className="flex gap-2 items-center"
|
|
21102
|
+
data-testid="save-menu-item-button"
|
|
21103
|
+
>
|
|
21104
|
+
<span className="whitespace-nowrap" data-testid="save-menu-item">
|
|
21105
|
+
Save
|
|
21106
|
+
</span>
|
|
21107
|
+
</MenuItem>
|
|
21108
|
+
</ButtonWithMenu>
|
|
21109
|
+
*/
|
|
21110
|
+
declare const ButtonWithMenu: ({ onButtonClick, buttonType, buttonText, icon, disabled, children, placement, size, ...buttonProps }: ButtonWithMenuProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
|
|
21111
|
+
|
|
21112
|
+
/** Callout button types available to use with our brand */
|
|
21113
|
+
type CalloutType = 'caution' | 'danger' | 'info' | 'note' | 'success' | 'tip' | 'error';
|
|
21114
|
+
interface CalloutProps {
|
|
21115
|
+
/** sets the type of callout to use and it's styles
|
|
21116
|
+
* @default "info"
|
|
21117
|
+
*/
|
|
21118
|
+
type: CalloutType;
|
|
21119
|
+
/** make the display of the callout compact. Suitable for small spaces
|
|
21120
|
+
* @default false
|
|
21121
|
+
*/
|
|
21122
|
+
compact?: boolean;
|
|
21123
|
+
/** (optional) sets the title of the callout */
|
|
21124
|
+
title?: React$1.ReactNode;
|
|
21125
|
+
/** add child elements to the callout */
|
|
21126
|
+
children?: React$1.ReactNode;
|
|
21127
|
+
/** sets additional css classes or emotion styles on the callout */
|
|
21128
|
+
className?: SerializedStyles | string;
|
|
21129
|
+
/** sets the data-testid on the callout element */
|
|
21130
|
+
testId?: string;
|
|
21131
|
+
}
|
|
21132
|
+
/**
|
|
21133
|
+
* Uniform Callout Component
|
|
21134
|
+
* @example <Callout title="my title" type="caution"><p>callout body copy</p></Callout>
|
|
21135
|
+
*/
|
|
21136
|
+
declare const Callout: ({ type, compact, title, children, className, testId, }: CalloutProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element | null;
|
|
21137
|
+
|
|
21138
|
+
type CardProps = React$1.HTMLAttributes<HTMLDivElement> & {
|
|
21139
|
+
/** (optional) sets the title value of the card */
|
|
21140
|
+
title?: string;
|
|
21141
|
+
/** sets whether or not to apply a margin bottom to the title
|
|
21142
|
+
* @default true
|
|
21143
|
+
*/
|
|
21144
|
+
titleWithMarginBottom?: boolean;
|
|
21145
|
+
/** (optional) sets react child components */
|
|
21146
|
+
children?: React$1.ReactNode;
|
|
21147
|
+
/** (optional) sets options for a dropdown menu */
|
|
21148
|
+
menuItems?: JSX.Element;
|
|
21149
|
+
/** (optional) sets the data-testid attribute on the button element
|
|
21150
|
+
* @default 'list-card-menu'
|
|
21151
|
+
*/
|
|
21152
|
+
menuButtonTestId?: string;
|
|
21153
|
+
/** (optional) sets the menu button disabled state */
|
|
21154
|
+
disabled?: boolean;
|
|
21155
|
+
/**
|
|
21156
|
+
* The name of the HTML tag to render.
|
|
21157
|
+
* @default "div"
|
|
21158
|
+
*/
|
|
21159
|
+
tag?: React$1.ElementType;
|
|
21160
|
+
};
|
|
21161
|
+
declare const Card: ({ title, menuItems, children, titleWithMarginBottom, disabled, tag: Tag, menuButtonTestId, ...props }: CardProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
|
|
21162
|
+
type CardTitleProps = {
|
|
21163
|
+
children?: React$1.ReactNode;
|
|
21164
|
+
} & Pick<CardProps, 'title' | 'titleWithMarginBottom'>;
|
|
21165
|
+
declare const CardTitle: ({ title, titleWithMarginBottom, children }: CardTitleProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
|
|
21166
|
+
|
|
21167
|
+
type CardContainerBgColorProps = 'gray' | 'white';
|
|
21168
|
+
type CardContainerProps = React$1.HTMLAttributes<HTMLDivElement> & {
|
|
21169
|
+
/** (optional): sets the background colour of the wrapping element
|
|
21170
|
+
* @default 'white'
|
|
21171
|
+
*/
|
|
21172
|
+
bgColor?: CardContainerBgColorProps;
|
|
21173
|
+
/** (optional): sets react child components */
|
|
21174
|
+
children?: React$1.ReactNode;
|
|
21175
|
+
/** (optional): sets the padding values of the inner container
|
|
21176
|
+
* @example 'when set to true padding: var(--spacing-2xl) var(--spacing-lg)'
|
|
21177
|
+
* @default true
|
|
21178
|
+
*/
|
|
21179
|
+
padding?: boolean;
|
|
21180
|
+
/** (optional): sets the padding values of the inner container
|
|
21181
|
+
* @example `when set to true`
|
|
21182
|
+
* grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) [last-col] minmax(300px, 1fr);
|
|
21183
|
+
* grid-template-rows: auto [last-line];
|
|
21184
|
+
* @default false
|
|
21185
|
+
*/
|
|
21186
|
+
withLastColumn?: boolean;
|
|
21187
|
+
};
|
|
21188
|
+
/** Uniform Card Container
|
|
21189
|
+
* @example <CardContainer><Card title="card title" /></CardContainer>
|
|
21190
|
+
*/
|
|
21191
|
+
declare const CardContainer: ({ bgColor, padding, withLastColumn, children, ...props }: CardContainerProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
|
|
21192
|
+
|
|
21193
|
+
declare const LoadingCardSkeleton: () => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
|
|
21194
|
+
|
|
21195
|
+
type ChipSizeProp = 'xs' | 'sm' | 'md';
|
|
21196
|
+
type ChipTheme = 'accent-light' | 'accent-dark' | 'accent-alt-light' | 'accent-alt-dark' | 'neutral-light' | 'neutral-dark';
|
|
21197
|
+
type ChipProps = {
|
|
21198
|
+
icon?: IconType;
|
|
21199
|
+
text: ReactNode;
|
|
21200
|
+
/** sets the size of the chip
|
|
21201
|
+
* @default 'sm'
|
|
21202
|
+
*/
|
|
21203
|
+
theme?: ChipTheme;
|
|
21204
|
+
chipAction?: React.ReactNode;
|
|
21205
|
+
size?: ChipSizeProp;
|
|
21206
|
+
} & React.HTMLAttributes<HTMLSpanElement>;
|
|
21207
|
+
/**
|
|
21208
|
+
* @description Chips are used in a variety of ways
|
|
21209
|
+
* To represent tokens, where the value of the chip will be replaced with something dynamically.
|
|
21210
|
+
* To represent tags or important metadata about an object
|
|
21211
|
+
* To represent a different object, as a reference
|
|
21212
|
+
* @example <Chip text="productId" theme="accent-light" chipAction={<DismissibleChipAction onDismiss={() => {...}}/>} />
|
|
21213
|
+
*/
|
|
21214
|
+
declare const Chip: ({ icon, text, size, theme, chipAction, ...props }: ChipProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
|
|
21215
|
+
type DismissibleChipActionProps = {
|
|
21216
|
+
onDismiss: () => void;
|
|
21217
|
+
} & HTMLAttributes<HTMLButtonElement>;
|
|
21218
|
+
/**
|
|
21219
|
+
* @description Dismissible chip action should be used with the Chip component
|
|
21220
|
+
* @example <DismissibleChipAction onDismiss={() => {...}}/>
|
|
21221
|
+
*/
|
|
21222
|
+
declare const DismissibleChipAction: ({ onDismiss, ...props }: DismissibleChipActionProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
|
|
21223
|
+
|
|
21224
|
+
type MultilineChipProps = {
|
|
21225
|
+
children: ReactNode;
|
|
21226
|
+
onClick?: () => void;
|
|
21227
|
+
} & React.HTMLAttributes<HTMLSpanElement | HTMLButtonElement>;
|
|
21228
|
+
/**
|
|
21229
|
+
* @description A chip specifically designed to fit as a chipped element in an multi-line capable content field.
|
|
21230
|
+
* Unlike a regular chip, this one can go onto multiple lines with word wrap, and uses inline behaviours.
|
|
21231
|
+
* @example <MultilineChip text="productId" />
|
|
21232
|
+
*/
|
|
21233
|
+
declare const MultilineChip: ({ children, onClick, ...props }: MultilineChipProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
|
|
21234
|
+
|
|
21235
|
+
type CounterProps = {
|
|
21236
|
+
/** sets the count value, a 0 will show a dot instead of a number. Undefined will cause the counter to disappear. */
|
|
21237
|
+
count: number | undefined;
|
|
21238
|
+
/** sets the background color
|
|
21239
|
+
* @default 'transparent'
|
|
21240
|
+
*/
|
|
21241
|
+
bgColor?: 'var(--white)' | 'var(--gray-50)' | 'transparent';
|
|
21242
|
+
} & React$1.HTMLAttributes<HTMLDivElement>;
|
|
21243
|
+
/** @example <Counter count={1} /> */
|
|
21244
|
+
declare const Counter: ({ count, bgColor, ...props }: CounterProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element | null;
|
|
21245
|
+
|
|
21246
|
+
type TextAlignProps = 'left' | 'right' | 'center';
|
|
21247
|
+
type BoxHeightProps = 'auto' | 'xs' | 'sm' | 'md' | 'lg';
|
|
21248
|
+
type DashedBoxProps = React$1.HTMLAttributes<HTMLDivElement> & {
|
|
21249
|
+
/** React child elements */
|
|
21250
|
+
children: React$1.ReactNode;
|
|
21251
|
+
/** (optional) - sets the text alignment */
|
|
21252
|
+
textAlign?: TextAlignProps;
|
|
21253
|
+
/** (optional) - sets the background color */
|
|
21254
|
+
bgColor?: 'transparent' | 'white' | 'var(--gray-50)';
|
|
21255
|
+
/** (optional) - sets the minimum box height */
|
|
21256
|
+
boxHeight?: BoxHeightProps;
|
|
21257
|
+
};
|
|
21258
|
+
/**
|
|
21259
|
+
* Uniform Dashed Box Component
|
|
21260
|
+
* @example <DashedBox bgColor="white" boxHeight="md" textAlign="center"><h1>hello world</h1></DashedBox>
|
|
21261
|
+
*/
|
|
21262
|
+
declare const DashedBox: ({ bgColor, textAlign, boxHeight, children, ...props }: DashedBoxProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
|
|
21263
|
+
|
|
21264
|
+
type DescriptionListProps = {
|
|
21265
|
+
items: {
|
|
21266
|
+
label: string;
|
|
21267
|
+
value: string | number | boolean | React__default.ReactNode;
|
|
21268
|
+
}[];
|
|
21269
|
+
} & React__default.HTMLAttributes<HTMLDListElement>;
|
|
21270
|
+
/**
|
|
21271
|
+
* A component to render a key-value list (uses <dl />, <dt /> and <dd /> under the hood).
|
|
21272
|
+
* @example <DescriptionList items={[{label: 'Label 1', value: 'Value 1'}]} />
|
|
21273
|
+
*/
|
|
21274
|
+
declare const DescriptionList: React__default.ForwardRefExoticComponent<{
|
|
21275
|
+
items: {
|
|
21276
|
+
label: string;
|
|
21277
|
+
value: string | number | boolean | React__default.ReactNode;
|
|
21278
|
+
}[];
|
|
21279
|
+
} & React__default.HTMLAttributes<HTMLDListElement> & React__default.RefAttributes<HTMLDListElement>>;
|
|
21280
|
+
|
|
21281
|
+
type DetailsProps = React$1.HTMLAttributes<HTMLDetailsElement> & {
|
|
21282
|
+
/** sets the summary inner components */
|
|
21283
|
+
summary: React$1.ReactNode;
|
|
21284
|
+
children: React$1.ReactNode;
|
|
21285
|
+
isOpen?: boolean | undefined;
|
|
21286
|
+
onChange?: (isOpen: boolean) => void;
|
|
21287
|
+
/** sets whether the details should be open by default.
|
|
21288
|
+
* Undefined value means that the details will be controlled by the user.
|
|
21289
|
+
* @default false
|
|
21290
|
+
*/
|
|
21291
|
+
isOpenByDefault?: boolean;
|
|
21292
|
+
};
|
|
21293
|
+
/** @example <Details summary="summary text">child content here</Details>*/
|
|
21294
|
+
declare const Details: ({ summary, children, isOpenByDefault, isOpen, onChange, ...props }: DetailsProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
|
|
21295
|
+
|
|
21296
|
+
interface DrawerRendererProps extends Omit<React__default.HTMLAttributes<HTMLDivElement>, 'children'> {
|
|
21297
|
+
/** The ID of the stack to render. Some drawers need to use the same stack ID to be rendered here */
|
|
21298
|
+
stackId: string;
|
|
21299
|
+
/** The width of the drawers. In any CSS length unit (px, rem, %, et al). Can't use CSS functions (e.g. calc())
|
|
21300
|
+
* @default 'medium'
|
|
21301
|
+
*/
|
|
21302
|
+
width?: 'narrow' | 'medium' | 'wide' | (string & NonNullable<unknown>);
|
|
21303
|
+
/** The minimum width of the drawers. In any CSS length unit (px, rem, %, et al)
|
|
21304
|
+
* @default '0'
|
|
21305
|
+
*/
|
|
21306
|
+
minWidth?: string;
|
|
21307
|
+
/** The maximum width of the drawers. In any CSS length unit (px, rem, %, et al)
|
|
21308
|
+
* @default '100%'
|
|
21309
|
+
*/
|
|
21310
|
+
maxWidth?: string;
|
|
21311
|
+
/** Sets the css position value
|
|
21312
|
+
* @default 'absolute'
|
|
21313
|
+
*/
|
|
21314
|
+
position?: 'absolute' | 'fixed' | 'sticky';
|
|
21315
|
+
/** Opens the drawer from left to right
|
|
21316
|
+
* @default false
|
|
21317
|
+
*/
|
|
21318
|
+
leftAligned?: boolean;
|
|
21319
|
+
/**
|
|
21320
|
+
* If a drawer in the stack has a specific `width` prop, and its value is larger than the width of the current stack,
|
|
21321
|
+
* the width of the stack will be automatically adjusted to accommodate for that.
|
|
21322
|
+
* Set this prop to `true` to disable this behavior.
|
|
21323
|
+
* @default false
|
|
21324
|
+
*/
|
|
21325
|
+
withoutFluidWidth?: boolean;
|
|
21326
|
+
}
|
|
21327
|
+
/**
|
|
21328
|
+
* Renders a stack of drawers in a different location than their original position in the component tree. Uses React Portal under the hood.
|
|
21329
|
+
* @example <DrawerProvider><Drawer id="my-drawer" stackId="my-stack" header="Title">Hello</Drawer><DrawerRenderer stackId="my-stack"/></DrawerProvider>
|
|
21330
|
+
*/
|
|
21331
|
+
declare const DrawerRenderer: ({ stackId, position, width, minWidth, maxWidth, leftAligned, withoutFluidWidth, ...otherProps }: DrawerRendererProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element | null;
|
|
21332
|
+
interface DrawerRendererItemProps extends React__default.HTMLAttributes<HTMLDivElement> {
|
|
21333
|
+
index: number;
|
|
21334
|
+
totalDrawers: number;
|
|
21335
|
+
width: DrawerRendererProps['width'];
|
|
21336
|
+
minWidth: Required<DrawerRendererProps['minWidth']>;
|
|
21337
|
+
maxWidth: Required<DrawerRendererProps['maxWidth']>;
|
|
21338
|
+
leftAligned: Required<DrawerRendererProps['leftAligned']>;
|
|
21339
|
+
onOverlayClick?: () => void;
|
|
21340
|
+
}
|
|
21341
|
+
declare const getDrawerAttributes: ({ providerId, stackId, id, }: {
|
|
21342
|
+
providerId: string;
|
|
21343
|
+
stackId?: string | undefined;
|
|
21344
|
+
id: string;
|
|
21345
|
+
}) => {
|
|
21346
|
+
'data-drawer-id': string;
|
|
21347
|
+
'data-testid': string;
|
|
21348
|
+
};
|
|
21349
|
+
|
|
21350
|
+
interface DrawerItem {
|
|
21351
|
+
/** An ID for the drawer. It should be unique in the stack where it's rendered */
|
|
21352
|
+
id: string;
|
|
21353
|
+
/**
|
|
21354
|
+
* The ID of the stack where the drawer should be renderer. It should match the stack ID of an existing DrawerRenderer.
|
|
21355
|
+
* If not provided, it will fall back to the default renderer of the drawer.
|
|
21356
|
+
* If the drawer is rendered inside another one, this value gets inherited.
|
|
21357
|
+
* */
|
|
21358
|
+
stackId?: string;
|
|
21359
|
+
/** Just like React.Key, changing this value indicates that the drawer has changed and we need to close the current instance and open a new one */
|
|
21360
|
+
instanceKey?: string;
|
|
21361
|
+
/**
|
|
21362
|
+
* The desired width of the drawer.
|
|
21363
|
+
* This value is ignored if the drawer is part of a DrawerRenderer with `withoutFluidWidth`.
|
|
21364
|
+
* If not set, the drawer will use the width of its renderer.
|
|
21365
|
+
*/
|
|
21366
|
+
width?: DrawerRendererProps['width'];
|
|
21367
|
+
/** Called when the close button is clicked, the Escape button is pressed, or when the drawer's overlay is clicked */
|
|
21368
|
+
onRequestClose?: () => void;
|
|
21369
|
+
/** Test ID for test automation **/
|
|
21370
|
+
testId?: string;
|
|
21371
|
+
}
|
|
21372
|
+
type RegisterDrawerProps = {
|
|
21373
|
+
drawer: DrawerItem;
|
|
21374
|
+
/** Called when drawer is rendered for the first time. Useful to set the focus on the drawer */
|
|
21375
|
+
onFirstRender?: () => void;
|
|
21376
|
+
};
|
|
21377
|
+
type DrawersRegistryRecord = DrawerItem & {
|
|
21378
|
+
/** The timestamp of when the drawer was registered. Used to stack the drawers in the right order regardless of where where they are in the DOM */
|
|
21379
|
+
registeredAt?: number;
|
|
21380
|
+
isFirstRender?: boolean;
|
|
21381
|
+
onFirstRender?: RegisterDrawerProps['onFirstRender'];
|
|
21382
|
+
};
|
|
21383
|
+
type DrawerContextValue = {
|
|
21384
|
+
providerId: string;
|
|
21385
|
+
drawersRegistry: DrawersRegistryRecord[];
|
|
21386
|
+
registerDrawer: (props: RegisterDrawerProps) => void;
|
|
21387
|
+
unregisterDrawer: (drawerId: Pick<DrawerItem, 'id' | 'stackId' | 'instanceKey'>) => void;
|
|
21388
|
+
};
|
|
21389
|
+
/**
|
|
21390
|
+
* Provides the context to the Drawer and DrawerRenderer components.
|
|
21391
|
+
* @example <DrawerProvider><Drawer id="my-drawer" stackId="my-stack" header="Title">Hello</Drawer><DrawerRenderer stackId="my-stack"/></DrawerProvider>
|
|
21392
|
+
*/
|
|
21393
|
+
declare const DrawerProvider: ({ children }: React__default.PropsWithChildren) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
|
|
21394
|
+
declare const useDrawer: () => DrawerContextValue;
|
|
21395
|
+
declare const useCloseCurrentDrawer: () => (() => void) | undefined;
|
|
21396
|
+
|
|
21397
|
+
type DrawerProps = DrawerItem & Omit<DrawerRendererProps, 'stackId'> & {
|
|
21398
|
+
header?: React__default.ReactNode;
|
|
21399
|
+
children?: React__default.ReactNode;
|
|
21400
|
+
bgColor?: 'var(--gray-50)' | 'var(--white)';
|
|
21401
|
+
leftAligned?: DrawerRendererProps['leftAligned'];
|
|
21402
|
+
};
|
|
21403
|
+
declare const CurrentDrawerContext: React__default.Context<{
|
|
21404
|
+
id?: string | undefined;
|
|
21405
|
+
stackId?: string | undefined;
|
|
21406
|
+
leftAligned?: DrawerRendererProps['leftAligned'];
|
|
21407
|
+
}>;
|
|
21408
|
+
declare const useCurrentDrawer: () => {
|
|
21409
|
+
id?: string | undefined;
|
|
21410
|
+
stackId?: string | undefined;
|
|
21411
|
+
leftAligned?: DrawerRendererProps['leftAligned'];
|
|
21412
|
+
};
|
|
21413
|
+
/**
|
|
21414
|
+
* A drawer component that opens from the right side of is parent. The component is used in combination with DrawerProvider and DrawerRenderer
|
|
21415
|
+
* @example <Drawer id="my-drawer" header="Title">Hello</Drawer>
|
|
21416
|
+
*/
|
|
21417
|
+
declare const Drawer: React__default.ForwardRefExoticComponent<DrawerItem & Omit<DrawerRendererProps, "stackId"> & {
|
|
21418
|
+
header?: React__default.ReactNode;
|
|
21419
|
+
children?: React__default.ReactNode;
|
|
21420
|
+
bgColor?: "var(--white)" | "var(--gray-50)" | undefined;
|
|
21421
|
+
leftAligned?: DrawerRendererProps['leftAligned'];
|
|
21422
|
+
} & React__default.RefAttributes<HTMLDivElement>>;
|
|
21423
|
+
|
|
21424
|
+
type DrawerContentProps = {
|
|
21425
|
+
children: ReactNode;
|
|
21426
|
+
buttonGroup?: ReactNode;
|
|
21427
|
+
noPadding?: boolean;
|
|
21428
|
+
} & HTMLAttributes<HTMLDivElement>;
|
|
21429
|
+
declare const DrawerContent: ({ children, buttonGroup, noPadding, ...props }: DrawerContentProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
|
|
21430
|
+
|
|
21431
|
+
interface IconButtonProps extends Omit<ButtonProps, 'size'> {
|
|
21432
|
+
variant?: 'square' | 'rounded';
|
|
21433
|
+
/** Style for the larger sizes have not been decided yet */
|
|
21434
|
+
size?: 'xs' | 'sm' | 'md';
|
|
21435
|
+
}
|
|
21436
|
+
declare const IconButton: React$1.ForwardRefExoticComponent<Omit<IconButtonProps, "ref"> & React$1.RefAttributes<unknown>>;
|
|
21437
|
+
|
|
21417
21438
|
interface ImageProps extends ImgHTMLAttributes<HTMLImageElement> {
|
|
21418
21439
|
imgClassName?: string;
|
|
21419
21440
|
variant?: 'inline' | 'fill-container';
|
|
@@ -22634,6 +22655,17 @@ type PopoverProps = PopoverProps$1 & {
|
|
|
22634
22655
|
};
|
|
22635
22656
|
declare const Popover: ({ iconColor, icon, iconSize, buttonText, ariaLabel, placement, testId, trigger, children, ...otherProps }: PopoverProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
|
|
22636
22657
|
|
|
22658
|
+
interface ProgressBarProps {
|
|
22659
|
+
className?: string;
|
|
22660
|
+
current: number;
|
|
22661
|
+
max: number;
|
|
22662
|
+
theme?: 'primary' | 'secondary';
|
|
22663
|
+
}
|
|
22664
|
+
/**
|
|
22665
|
+
* @deprecated unstable - props and functionality is likely to change
|
|
22666
|
+
*/
|
|
22667
|
+
declare function ProgressBar({ className, current, max, theme }: ProgressBarProps): _emotion_react_types_jsx_namespace.EmotionJSX.Element;
|
|
22668
|
+
|
|
22637
22669
|
type ProgressListItemStatus = 'completed' | 'inProgress' | 'queued';
|
|
22638
22670
|
type ProgressListProps = React__default.HTMLAttributes<HTMLOListElement> & {
|
|
22639
22671
|
/** A list of the items to show in the progress list */
|
|
@@ -23132,4 +23164,4 @@ type StatusBulletProps = React$1.HTMLAttributes<HTMLSpanElement> & {
|
|
|
23132
23164
|
};
|
|
23133
23165
|
declare const StatusBullet: ({ status, hideText, size, message, ...props }: StatusBulletProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
|
|
23134
23166
|
|
|
23135
|
-
export { ActionButtonsProps, AddButton, AddButtonProps, AddListButton, AddListButtonProps, AddListButtonThemeProps, AnimationFile, AnimationFileProps, ArrowPositionProps, Avatar, AvatarGroup, AvatarGroupProps, AvatarProps, Badge, BadgeProps, BadgeSizeProps, BadgeThemeProps, BadgeThemeStyleProps, Banner, BannerProps, BannerType, BoxHeightProps, BreakpointSize, BreakpointsMap, Button, ButtonProps, ButtonSizeProps, ButtonThemeProps$1 as ButtonThemeProps, ButtonWithMenu, ButtonWithMenuProps, Callout, CalloutProps, CalloutType, Caption, CaptionProps, Card, CardContainer, CardContainerBgColorProps, CardContainerProps, CardProps, CardTitle, CardTitleProps, CheckboxWithInfo, CheckboxWithInforProps, ChildFunction, Chip, ChipProps, ChipTheme, ComboBoxGroupBase, ConnectToDataElementButton, ConnectToDataElementButtonProps, Container, ContainerProps, Counter, CounterProps, CreateTeamIntegrationTile, CreateTeamIntegrationTileProps, CurrentDrawerContext, DashedBox, DashedBoxProps, DescriptionList, DescriptionListProps, Details, DetailsProps, DismissibleChipAction, Drawer, DrawerContent, DrawerContentProps, DrawerContextValue, DrawerItem, DrawerProps, DrawerProvider, DrawerRenderer, DrawerRendererItemProps, DrawerRendererProps, DrawersRegistryRecord, EditTeamIntegrationTile, EditTeamIntegrationTileProps, ErrorMessage, ErrorMessageProps, Fieldset, FieldsetProps, Heading, HeadingProps, HexModalBackground, HorizontalRhythm, Icon, IconButton, IconButtonProps, IconColor, IconName, IconProps, IconType, IconsProvider, Image, ImageBroken, ImageProps, InfoMessage, InfoMessageProps, InlineAlert, InlineAlertProps, Input, InputComboBox, InputComboBoxOption, InputComboBoxProps, InputInlineSelect, InputInlineSelectOption, InputInlineSelectProps, InputKeywordSearch, InputKeywordSearchProps, InputProps, InputSelect, InputSelectProps, InputToggle, InputToggleProps, IntegrationComingSoon, IntegrationComingSoonProps, IntegrationHeaderSection, IntegrationHeaderSectionProps, IntegrationLoadingTile, IntegrationLoadingTileProps, IntegrationModalHeader, IntegrationModalHeaderProps, IntegrationModalIcon, IntegrationModalIconProps, IntegrationTile, IntegrationTileProps, JsonEditor, JsonEditorProps, Label, LabelLeadingIcon, LabelProps, Legend, LegendProps, LevelProps, LimitsBar, LimitsBarProps, Link, LinkColorProps, LinkList, LinkListProps, LinkManagerWithRefType, LinkNode, LinkProps, LinkWithRef, LoadingCardSkeleton, LoadingIcon, LoadingIconProps, LoadingIndicator, LoadingOverlay, LoadingOverlayProps, MediaCard, MediaCardProps, Menu, MenuContext, MenuGroup, MenuGroupProps, MenuItem, MenuItemProps, MenuItemSeparator, MenuItemTextThemeProps, MenuProps, Modal, ModalProps, MultilineChip, MultilineChipProps, PageHeaderSection, PageHeaderSectionProps, Paragraph, ParagraphProps, ParameterDataConnectButtonProps, ParameterDataResource, ParameterDrawerHeader, ParameterDrawerHeaderProps, ParameterGroup, ParameterGroupProps, ParameterImage, ParameterImageInner, ParameterImagePreview, ParameterImageProps, ParameterInput, ParameterInputInner, ParameterInputProps, ParameterLabel, ParameterLabelProps, ParameterLink, ParameterLinkInner, ParameterLinkProps, ParameterMenuButton, ParameterMenuButtonProps, ParameterNameAndPublicIdInput, ParameterNameAndPublicIdInputProps, ParameterOverrideMarker, ParameterRichText, ParameterRichTextInner, ParameterRichTextInnerProps, ParameterRichTextProps, ParameterSelect, ParameterSelectInner, ParameterSelectProps, ParameterShell, ParameterShellContext, ParameterShellPlaceholder, ParameterShellProps, ParameterTextarea, ParameterTextareaInner, ParameterTextareaProps, ParameterToggle, ParameterToggleInner, ParameterToggleProps, Popover, PopoverProps, ProgressList, ProgressListItem, ProgressListItemProps, ProgressListProps, RegisterDrawerProps, ResolveIcon, ResolveIconProps, RhythmProps, RichTextParamValue, RichTextToolbarIcon, ScrollableItemProps, ScrollableList, ScrollableListContainerProps, ScrollableListInputItem, ScrollableListItem, ScrollableListItemProps, ScrollableListProps, SegmentedControl, SegmentedControlOption, SegmentedControlProps, SerializedLinkNode, ShortcutContext, ShortcutRevealer, Skeleton, SkeletonProps, StatusBullet, StatusBulletProps, StatusTypeProps, SuccessMessage, SuccessMessageProps, Switch, SwitchProps, TabButton, TabButtonGroup, TabButtonProps, TabContent, TabContentProps, Table, TableBody, TableBodyProps, TableCellData, TableCellDataProps, TableCellHead, TableCellHeadProps, TableFoot, TableFootProps, TableHead, TableHeadProps, TableProps, TableRow, TableRowProps, Tabs, TabsProps, TextAlignProps, Textarea, TextareaProps, Theme, ThemeProps, Tile, TileContainer, TileContainerProps, TileProps, TileText, TileTitleProps, Tooltip, TooltipProps, TwoColumnLayout, TwoColumnLayoutProps, UniformBadge, UniformLogo, UniformLogoLarge, UniformLogoProps, UseShortcutOptions, VerticalRhythm, WarningMessage, WarningMessageProps, accessibleHidden, borderTopIcon, breakpoints, button, buttonDestructive, buttonGhost, buttonGhostDestructive, buttonGhostUnimportant, buttonPrimary, buttonPrimaryInvert, buttonRippleEffect, buttonSecondary, buttonSecondaryInvert, buttonTertiary, buttonTertiaryOutline, buttonUnimportant, canvasAlertIcon, cardIcon, cq, customIcons, extractParameterProps, fadeIn, fadeInBottom, fadeInLtr, fadeInRtl, fadeInTop, fadeOutBottom, fullWidthScreenIcon, getDrawerAttributes, growSubtle, imageTextIcon, infoFilledIcon, input, inputError, inputSelect, isMacLike, jsonIcon, labelText, loader as loaderAnimationData, macifyShortcut, mq, numberInput, queryStringIcon, rectangleRoundedIcon, replaceUnderscoreInString, richTextToolbarButton, richTextToolbarButtonActive, ripple, scrollbarStyles, settings, settingsIcon, skeletonLoading, slideInTtb, spinner as spinnerAnimationData, structurePanelIcon, supports, textInput, useBreakpoint, useCloseCurrentDrawer, useCurrentDrawer, useCurrentTab, useDrawer, useIconContext, useMenuContext, useOutsideClick, useParameterShell, useShortcut, warningIcon, yesNoIcon };
|
|
23167
|
+
export { ActionButtonsProps, AddButton, AddButtonProps, AddListButton, AddListButtonProps, AddListButtonThemeProps, AnimationFile, AnimationFileProps, ArrowPositionProps, Avatar, AvatarGroup, AvatarGroupProps, AvatarProps, Badge, BadgeProps, BadgeSizeProps, BadgeThemeProps, BadgeThemeStyleProps, Banner, BannerProps, BannerType, BoxHeightProps, BreakpointSize, BreakpointsMap, Button, ButtonProps, ButtonSizeProps$1 as ButtonSizeProps, ButtonThemeProps$1 as ButtonThemeProps, ButtonWithMenu, ButtonWithMenuProps, Callout, CalloutProps, CalloutType, Caption, CaptionProps, Card, CardContainer, CardContainerBgColorProps, CardContainerProps, CardProps, CardTitle, CardTitleProps, CheckboxWithInfo, CheckboxWithInforProps, ChildFunction, Chip, ChipProps, ChipTheme, ComboBoxGroupBase, ConnectToDataElementButton, ConnectToDataElementButtonProps, Container, ContainerProps, Counter, CounterProps, CreateTeamIntegrationTile, CreateTeamIntegrationTileProps, CurrentDrawerContext, DashedBox, DashedBoxProps, DescriptionList, DescriptionListProps, Details, DetailsProps, DismissibleChipAction, Drawer, DrawerContent, DrawerContentProps, DrawerContextValue, DrawerItem, DrawerProps, DrawerProvider, DrawerRenderer, DrawerRendererItemProps, DrawerRendererProps, DrawersRegistryRecord, EditTeamIntegrationTile, EditTeamIntegrationTileProps, ErrorMessage, ErrorMessageProps, Fieldset, FieldsetProps, Heading, HeadingProps, HexModalBackground, HorizontalRhythm, Icon, IconButton, IconButtonProps, IconColor, IconName, IconProps, IconType, IconsProvider, Image, ImageBroken, ImageProps, InfoMessage, InfoMessageProps, InlineAlert, InlineAlertProps, Input, InputComboBox, InputComboBoxOption, InputComboBoxProps, InputInlineSelect, InputInlineSelectOption, InputInlineSelectProps, InputKeywordSearch, InputKeywordSearchProps, InputProps, InputSelect, InputSelectProps, InputToggle, InputToggleProps, IntegrationComingSoon, IntegrationComingSoonProps, IntegrationHeaderSection, IntegrationHeaderSectionProps, IntegrationLoadingTile, IntegrationLoadingTileProps, IntegrationModalHeader, IntegrationModalHeaderProps, IntegrationModalIcon, IntegrationModalIconProps, IntegrationTile, IntegrationTileProps, JsonEditor, JsonEditorProps, Label, LabelLeadingIcon, LabelProps, Legend, LegendProps, LevelProps, LimitsBar, LimitsBarProps, Link, LinkColorProps, LinkList, LinkListProps, LinkManagerWithRefType, LinkNode, LinkProps, LinkWithRef, LoadingCardSkeleton, LoadingIcon, LoadingIconProps, LoadingIndicator, LoadingOverlay, LoadingOverlayProps, MediaCard, MediaCardProps, Menu, MenuContext, MenuGroup, MenuGroupProps, MenuItem, MenuItemProps, MenuItemSeparator, MenuItemTextThemeProps, MenuProps, Modal, ModalProps, MultilineChip, MultilineChipProps, PageHeaderSection, PageHeaderSectionProps, Paragraph, ParagraphProps, ParameterDataConnectButtonProps, ParameterDataResource, ParameterDrawerHeader, ParameterDrawerHeaderProps, ParameterGroup, ParameterGroupProps, ParameterImage, ParameterImageInner, ParameterImagePreview, ParameterImageProps, ParameterInput, ParameterInputInner, ParameterInputProps, ParameterLabel, ParameterLabelProps, ParameterLink, ParameterLinkInner, ParameterLinkProps, ParameterMenuButton, ParameterMenuButtonProps, ParameterNameAndPublicIdInput, ParameterNameAndPublicIdInputProps, ParameterOverrideMarker, ParameterRichText, ParameterRichTextInner, ParameterRichTextInnerProps, ParameterRichTextProps, ParameterSelect, ParameterSelectInner, ParameterSelectProps, ParameterShell, ParameterShellContext, ParameterShellPlaceholder, ParameterShellProps, ParameterTextarea, ParameterTextareaInner, ParameterTextareaProps, ParameterToggle, ParameterToggleInner, ParameterToggleProps, Popover, PopoverProps, ProgressBar, ProgressBarProps, ProgressList, ProgressListItem, ProgressListItemProps, ProgressListProps, RegisterDrawerProps, ResolveIcon, ResolveIconProps, RhythmProps, RichTextParamValue, RichTextToolbarIcon, ScrollableItemProps, ScrollableList, ScrollableListContainerProps, ScrollableListInputItem, ScrollableListItem, ScrollableListItemProps, ScrollableListProps, SegmentedControl, SegmentedControlOption, SegmentedControlProps, SerializedLinkNode, ShortcutContext, ShortcutRevealer, Skeleton, SkeletonProps, StatusBullet, StatusBulletProps, StatusTypeProps, SuccessMessage, SuccessMessageProps, Switch, SwitchProps, TabButton, TabButtonGroup, TabButtonProps, TabContent, TabContentProps, Table, TableBody, TableBodyProps, TableCellData, TableCellDataProps, TableCellHead, TableCellHeadProps, TableFoot, TableFootProps, TableHead, TableHeadProps, TableProps, TableRow, TableRowProps, Tabs, TabsProps, TextAlignProps, Textarea, TextareaProps, Theme, ThemeProps, Tile, TileContainer, TileContainerProps, TileProps, TileText, TileTitleProps, Tooltip, TooltipProps, TwoColumnLayout, TwoColumnLayoutProps, UniformBadge, UniformLogo, UniformLogoLarge, UniformLogoProps, UseShortcutOptions, VerticalRhythm, WarningMessage, WarningMessageProps, accessibleHidden, addPathSegmentToPathname, borderTopIcon, breakpoints, button, buttonDestructive, buttonGhost, buttonGhostDestructive, buttonGhostUnimportant, buttonPrimary, buttonPrimaryInvert, buttonRippleEffect, buttonSecondary, buttonSecondaryInvert, buttonTertiary, buttonTertiaryOutline, buttonUnimportant, canvasAlertIcon, cardIcon, cq, customIcons, extractParameterProps, fadeIn, fadeInBottom, fadeInLtr, fadeInRtl, fadeInTop, fadeOutBottom, fullWidthScreenIcon, getDrawerAttributes, getParentPath, getPathSegment, growSubtle, imageTextIcon, infoFilledIcon, input, inputError, inputSelect, isMacLike, isSecureURL, isValidUrl, jsonIcon, labelText, loader as loaderAnimationData, macifyShortcut, mq, numberInput, queryStringIcon, rectangleRoundedIcon, replaceUnderscoreInString, richTextToolbarButton, richTextToolbarButtonActive, ripple, scrollbarStyles, settings, settingsIcon, skeletonLoading, slideInTtb, spinner as spinnerAnimationData, structurePanelIcon, supports, textInput, useBreakpoint, useCloseCurrentDrawer, useCurrentDrawer, useCurrentTab, useDrawer, useIconContext, useMenuContext, useOutsideClick, useParameterShell, useShortcut, warningIcon, yesNoIcon };
|