@uniformdev/design-system 17.0.0 → 17.1.1-alpha.152

package/dist/index.d.ts

@@ -47,7 +47,7 @@ declare const mq: (size: breakpointSizeProps) => string;
 declare const supports: (cssProp: string) => string;
 
 declare const labelText: _emotion_react.SerializedStyles;
-declare const input: _emotion_react.SerializedStyles;
+declare const input: (whiteSpaceWrap: 'wrap' | 'nowrap') => _emotion_react.SerializedStyles;
 declare const inputError: _emotion_react.SerializedStyles;
 declare const inputSelect: _emotion_react.SerializedStyles;
 
@@ -245,7 +245,7 @@ declare type ComboBoxGroupBase<TOption> = GroupBase<TOption>;
 /**
  * InputComboBox
  * @component
- * @example <InputComboBox name="name" id="combo-box" options=[{ value: 'chocolate', label: 'Chocolate' }, { value: 'strawberry', label: 'Strawberry' }, { value: 'vanilla', label: 'Vanilla' }] /> */
+ * @example <InputComboBox name="name" id="combo-box" options={[{ value: 'chocolate', label: 'Chocolate' }, { value: 'strawberry', label: 'Strawberry' }, { value: 'vanilla', label: 'Vanilla' }]} isMulti /> */
 declare function InputComboBox<TOption = InputComboBoxOption, IsMulti extends boolean = false, TGroup extends ComboBoxGroupBase<TOption> = ComboBoxGroupBase<TOption>>(props: InputComboBoxProps<TOption, IsMulti, TGroup>): _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
 declare type InputInlineSelectOption = {
@@ -500,12 +500,16 @@ declare type HeadingProps = {
     level?: LevelProps;
     /** sets the title value */
     children: React$1.ReactNode;
+    /** (optional) sets whether to use the default margin for the heading element
+     * @default true
+     */
+    withMarginBottom?: boolean;
 } & React$1.HTMLAttributes<HTMLHeadingElement>;
 /**
  * Component that sets the heading tag
  * @example <Heading level={1}>Blog Post Title</Heading>
  */
-declare const Heading: ({ level, children, ...hAttributes }: HeadingProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+declare const Heading: ({ level, withMarginBottom, children, ...hAttributes }: HeadingProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
 declare type ParagraphProps = {
     /** (optional) adds child elements to the paragraph tag */
@@ -521,19 +525,6 @@ declare type ParagraphProps = {
  */
 declare const Paragraph: ({ className, htmlContent, children, ...pAttributes }: ParagraphProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
-interface RouteProps {
-    as: string;
-    href: string;
-}
-declare type PageHeaderSectionProps = React$1.HTMLAttributes<HTMLElement> & {
-    title: string | undefined;
-    desc?: React$1.ReactNode;
-    children?: React$1.ReactNode;
-    linkProps?: RouteProps;
-    linkText?: string;
-};
-declare const PageHeaderSection: ({ title, desc, children, linkText, linkProps, ...htmlProps }: PageHeaderSectionProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
-
 declare type LinkColorProps = 'currentColor' | 'red' | 'green';
 declare type LinkProps = React$1.AnchorHTMLAttributes<HTMLAnchorElement> & {
     /** sets the link text and title text */
@@ -546,9 +537,55 @@ declare type LinkProps = React$1.AnchorHTMLAttributes<HTMLAnchorElement> & {
     external?: boolean;
     /** (optional) For supporting inside next/link component */
     ref?: React$1.ForwardedRef<HTMLAnchorElement>;
+    /** (optional) sets react child elements */
+    children?: React$1.ReactNode;
 };
-declare const Link: ({ external, text, linkColor, ...props }: LinkProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
-declare const LinkWithRef: React$1.ForwardRefExoticComponent<Pick<LinkProps, "text" | "external" | keyof React$1.AnchorHTMLAttributes<HTMLAnchorElement> | "linkColor"> & React$1.RefAttributes<HTMLAnchorElement>>;
+/** Uniform Link Component
+ * @example <Link text="my link" href="#" />
+ */
+declare const Link: ({ external, text, linkColor, children, ...props }: LinkProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+declare type LinkManagerWithRefType = (props: Partial<LinkProps> & {
+    as?: string;
+    href: string;
+    passHref: true;
+} & React$1.RefAttributes<HTMLAnchorElement>) => JSX.Element | null;
+/** Uniform LinkWithRef Component
+ * We recommend using this link `next/link`
+ * @example <LinkWithRef linkManagerComponent={NextLink} href="some-url" text="my link" />
+ */
+declare const LinkWithRef: React$1.ForwardRefExoticComponent<Pick<React$1.AnchorHTMLAttributes<HTMLAnchorElement> & {
+    /** sets the link text and title text */
+    text: string;
+    /** (optional) sets the link color
+     * @default 'currentColor'
+     */
+    linkColor?: LinkColorProps | undefined;
+    /** (optional) sets whether the link is external or not adding an icon to the link */
+    external?: boolean | undefined;
+    /** (optional) For supporting inside next/link component */
+    ref?: React$1.ForwardedRef<HTMLAnchorElement> | undefined;
+    /** (optional) sets react child elements */
+    children?: React$1.ReactNode;
+} & {
+    href: string;
+    as?: string | undefined;
+    linkManagerComponent: LinkManagerWithRefType;
+}, "text" | "as" | "external" | "linkColor" | "linkManagerComponent" | keyof React$1.AnchorHTMLAttributes<HTMLAnchorElement>> & React$1.RefAttributes<HTMLAnchorElement>>;
+
+interface RouteProps {
+    as: string;
+    href: string;
+}
+declare type PageHeaderSectionProps = React$1.HTMLAttributes<HTMLElement> & {
+    title: string | undefined;
+    desc?: React$1.ReactNode;
+    children?: React$1.ReactNode;
+    linkProps?: RouteProps;
+    linkText?: string;
+    level?: LevelProps;
+    linkManagerComponent: LinkManagerWithRefType;
+};
+declare const PageHeaderSection: ({ title, desc, children, linkText, level, linkProps, linkManagerComponent, ...htmlProps }: PageHeaderSectionProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
 declare type IntegrationHeaderSectionProps = React$1.HtmlHTMLAttributes<HTMLDivElement> & {
     /** sets the title text of the integration */
@@ -956,4 +993,54 @@ declare const HexModalBackground: ({ ...props }: HexModalBackgroundProps) => _em
  */
 declare const IntegrationModalHeader: ({ icon, name, menu, children }: IntegrationModalHeaderProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
-export { ActionButtonsProps, AddButton, AddButtonProps, AddListButton, AddListButtonProps, ArrowPositionProps, Badge, BadgeProps, BoxHeightProps, Button, ButtonProps, ButtonSizeProps, ButtonThemeProps$1 as ButtonThemeProps, ButtonWithMenu, ButtonWithMenuProps, Callout, CalloutProps, CalloutType, Caption, CaptionProps, ChildFunction, ComboBoxGroupBase, CreateTeamIntegrationTile, CreateTeamIntegrationTileProps, DashedBox, DashedBoxProps, EditTeamIntegrationTile, EditTeamIntegrationTileProps, ErrorMessage, ErrorMessageProps, Heading, HeadingProps, HexModalBackground, Icon, IconColor, IconName, IconProps, IconType, IconsProvider, 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, Label, LabelProps, LevelProps, LimitsBar, LimitsBarProps, Link, LinkColorProps, LinkProps, LinkWithRef, LoadingIcon, LoadingIconProps, LoadingIndicator, LoadingOverlay, LoadingOverlayProps, Menu, MenuContext, MenuItem, MenuItemProps, MenuItemTextThemeProps, MenuProps, PageHeaderSection, PageHeaderSectionProps, Paragraph, ParagraphProps, ResolveIcon, ResolveIconProps, ScrollableList, ScrollableListItem, ScrollableListItemProps, ScrollableListProps, ShortcutContext, ShortcutRevealer, Switch, SwitchProps, Table, TableBody, TableBodyProps, TableCellData, TableCellDataProps, TableCellHead, TableCellHeadProps, TableFoot, TableFootProps, TableHead, TableHeadProps, TableProps, TableRow, TableRowProps, TextAlignProps, Textarea, TextareaProps, Theme, ThemeProps, TileContainer, TileContainerProps, UniformBadge, UniformLogo, UniformLogoProps, breakpointSizeProps, breakpoints, breakpointsProps, button, buttonGhost, buttonPrimary, buttonRippleEffect, buttonSecondary, buttonTertiary, buttonUnimportant, fadeIn, fadeInBottom, fadeInLtr, fadeOutBottom, growSubtle, input, inputError, inputSelect, labelText, mq, ripple, scrollbarStyles, skeletonLoading, supports, useIconContext, useMenuContext };
+declare type CardProps = React$1.HTMLAttributes<HTMLDivElement> & {
+    /** (optional) sets the title value of the card */
+    title?: string;
+    /** (optional) sets react child components */
+    children?: React$1.ReactNode;
+    /** (optional) sets options for a dropdown menu */
+    menuItems?: JSX.Element;
+    /** (optional) sets the data-test-id attribute on the button element
+     * @default 'list-card-menu'
+     */
+    menuButtonTestId?: string;
+    /** (optional) sets the menu button disabled state */
+    disabled?: boolean;
+};
+declare const Card: ({ title, menuItems, children, disabled, menuButtonTestId, ...props }: CardProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+
+declare type CardContainerBgColorProps = 'gray' | 'white';
+declare type CardContainerProps = React$1.HTMLAttributes<HTMLDivElement> & {
+    /** (optional): sets the background colour of the wrapping element
+     * @default 'white'
+     */
+    bgColor?: CardContainerBgColorProps;
+    /** (optional): sets react child components */
+    children?: React$1.ReactNode;
+    /** (optional): sets the padding values of the inner container
+     * @example 'when set to true padding: var(--spacing-2xl) var(--spacing-lg)'
+     * @default true
+     */
+    padding?: boolean;
+    /** (optional): sets the padding values of the inner container
+     * @example `when set to true`
+     * grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) [last-col] minmax(300px, 1fr);
+     * grid-template-rows: auto [last-line];
+     * @default false
+     */
+    withLastColumn?: boolean;
+};
+/** Uniform Card Container
+ * @example <CardContainer><Card title="card title" /></CardContainer>
+ */
+declare const CardContainer: ({ bgColor, padding, withLastColumn, children, ...props }: CardContainerProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+
+declare type LinkListProps = React$1.HTMLAttributes<HTMLDivElement> & {
+    /** sets the title field */
+    title: string;
+    /** (optional) sets react child component */
+    children?: React$1.ReactNode;
+};
+declare const LinkList: ({ title, children, ...props }: LinkListProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+
+export { ActionButtonsProps, AddButton, AddButtonProps, AddListButton, AddListButtonProps, ArrowPositionProps, Badge, BadgeProps, BoxHeightProps, Button, ButtonProps, ButtonSizeProps, ButtonThemeProps$1 as ButtonThemeProps, ButtonWithMenu, ButtonWithMenuProps, Callout, CalloutProps, CalloutType, Caption, CaptionProps, Card, CardContainer, CardContainerBgColorProps, CardContainerProps, CardProps, ChildFunction, ComboBoxGroupBase, CreateTeamIntegrationTile, CreateTeamIntegrationTileProps, DashedBox, DashedBoxProps, EditTeamIntegrationTile, EditTeamIntegrationTileProps, ErrorMessage, ErrorMessageProps, Heading, HeadingProps, HexModalBackground, Icon, IconColor, IconName, IconProps, IconType, IconsProvider, 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, Label, LabelProps, LevelProps, LimitsBar, LimitsBarProps, Link, LinkColorProps, LinkList, LinkListProps, LinkManagerWithRefType, LinkProps, LinkWithRef, LoadingIcon, LoadingIconProps, LoadingIndicator, LoadingOverlay, LoadingOverlayProps, Menu, MenuContext, MenuItem, MenuItemProps, MenuItemTextThemeProps, MenuProps, PageHeaderSection, PageHeaderSectionProps, Paragraph, ParagraphProps, ResolveIcon, ResolveIconProps, ScrollableList, ScrollableListItem, ScrollableListItemProps, ScrollableListProps, ShortcutContext, ShortcutRevealer, Switch, SwitchProps, Table, TableBody, TableBodyProps, TableCellData, TableCellDataProps, TableCellHead, TableCellHeadProps, TableFoot, TableFootProps, TableHead, TableHeadProps, TableProps, TableRow, TableRowProps, TextAlignProps, Textarea, TextareaProps, Theme, ThemeProps, TileContainer, TileContainerProps, UniformBadge, UniformLogo, UniformLogoProps, breakpointSizeProps, breakpoints, breakpointsProps, button, buttonGhost, buttonPrimary, buttonRippleEffect, buttonSecondary, buttonTertiary, buttonUnimportant, fadeIn, fadeInBottom, fadeInLtr, fadeOutBottom, growSubtle, input, inputError, inputSelect, labelText, mq, ripple, scrollbarStyles, skeletonLoading, supports, useIconContext, useMenuContext };