@uniformdev/design-system 17.3.0 → 17.3.1-alpha.146

package/dist/index.d.ts

@@ -399,6 +399,28 @@ declare type LabelProps = React$1.LabelHTMLAttributes<HTMLLabelElement> & {
 };
 declare const Label: ({ children, className, testId, ...props }: LabelProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
+declare type CheckboxWithInforProps = React.HTMLAttributes<HTMLInputElement> & {
+    /** sets the label value */
+    label: string;
+    /** sets the name value of the radio/checkbox input */
+    name: string;
+    /** sets info message */
+    info?: string;
+    /** (optional) sets the checked state of the input */
+    checked?: boolean;
+};
+/** @example <CheckboxWithInfo label="checkbox" name="name" info="some message" /> */
+declare const CheckboxWithInfo: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLInputElement> & {
+    /** sets the label value */
+    label: string;
+    /** sets the name value of the radio/checkbox input */
+    name: string;
+    /** sets info message */
+    info?: string | undefined;
+    /** (optional) sets the checked state of the input */
+    checked?: boolean | undefined;
+} & React$1.RefAttributes<HTMLInputElement>>;
+
 interface MenuProps extends MenuHTMLProps {
     /** sets aria-label attribute */
     menuLabel: string;
@@ -453,6 +475,10 @@ interface CalloutProps {
      * @default "info"
      */
     type: CalloutType;
+    /** make the display of the callout compact. Suitable for small spaces
+     * @default false
+     */
+    compact?: boolean;
     /** (optional) sets the title of the callout */
     title?: React$1.ReactNode;
     /** add child elements to the callout */
@@ -464,7 +490,7 @@ interface CalloutProps {
  * Uniform Callout Component
  * @example <Callout title="my title" type="caution"><p>callout body copy</p></Callout>
  */
-declare const Callout: ({ type, title, children, className }: CalloutProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element | null;
+declare const Callout: ({ type, compact, title, children, className }: CalloutProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element | null;
 
 /**
  * Loading Indicator
@@ -783,6 +809,10 @@ declare type AddListButtonProps = React$1.ButtonHTMLAttributes<HTMLButtonElement
     buttonText?: string;
     /** sets the function action of the button */
     onButtonClick: () => void;
+    /** (optional) - sets the icon within the button, requires the icon provider to work
+     * @default 'regular'
+     */
+    variant?: 'regular' | 'small';
     /** (optional) - sets whether the button is disabled or not
      * @default undefined
      */
@@ -796,7 +826,7 @@ declare type AddListButtonProps = React$1.ButtonHTMLAttributes<HTMLButtonElement
  * Uniform Add List Button Component
  * @example <AddListButton buttonText="my text" onButtonClick={() => console.log('button clicked')} icon="add" />
  */
-declare const AddListButton: ({ buttonText, onButtonClick, disabled, icon, ...buttonProps }: AddListButtonProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+declare const AddListButton: ({ buttonText, onButtonClick, disabled, icon, variant, ...buttonProps }: AddListButtonProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
 declare type TextAlignProps = 'left' | 'right' | 'center';
 declare type BoxHeightProps = 'auto' | 'sm' | 'md' | 'lg';
@@ -1067,4 +1097,65 @@ interface TabContentProps extends Partial<TabPanelProps> {
 }
 declare const TabContent: ({ children, ...props }: TabContentProps) => _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, 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, TileContainer, TileContainerProps, UniformBadge, UniformLogo, UniformLogoProps, breakpointSizeProps, breakpoints, breakpointsProps, button, buttonGhost, buttonPrimary, buttonRippleEffect, buttonSecondary, buttonTertiary, buttonUnimportant, fadeIn, fadeInBottom, fadeInLtr, fadeInRtl, fadeOutBottom, growSubtle, input, inputError, inputSelect, labelText, mq, ripple, scrollbarStyles, skeletonLoading, supports, useCurrentTab, useIconContext, useMenuContext };
+interface DrawerItem {
+    /** An ID for the drawer. It should be unique in the stack where it's rendered */
+    id: string;
+    /** The ReactNode to render inside the drawer */
+    component: React__default.ReactNode;
+    /** The ID of the stack where the drawer should be renderer. It should match the stack ID of an existing DrawerRenderer */
+    stackId: string;
+    /** 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 */
+    instanceKey?: string;
+    /** Called when the close button is clicked, the Escape button is pressed, or when the drawer's overlay is clicked  */
+    onRequestClose?: () => void;
+}
+declare type DrawerContextValue = {
+    drawersRegistry: DrawerItem[];
+    registerDrawer: (drawer: DrawerItem) => void;
+    unregisterDrawer: (drawerId: Pick<DrawerItem, 'id' | 'stackId' | 'instanceKey'>) => void;
+};
+/**
+ * Provides the context to the Drawer and DrawerRenderer components.
+ * @example <DrawerProvider><Drawer id="my-drawer" stackId="my-stack" header="Title">Hello</Drawer><DrawerRenderer stackId="my-stack"/></DrawerProvider>
+ */
+declare const DrawerProvider: ({ children }: React__default.PropsWithChildren) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+declare const useDrawer: () => DrawerContextValue;
+
+interface DrawerProps extends Omit<DrawerItem, 'component'> {
+    header?: React__default.ReactNode;
+    children?: React__default.ReactNode;
+}
+/**
+ * A drawer component that opens from the right side of is parent. The component is used in combination with DrawerProvider and DrawerRenderer
+ * @example <DrawerProvider><Drawer id="my-drawer" stackId="my-stack" header="Title">Hello</Drawer><DrawerRenderer stackId="my-stack"/></DrawerProvider>
+ */
+declare const Drawer: React__default.ForwardRefExoticComponent<DrawerProps & React__default.RefAttributes<HTMLDivElement>>;
+
+interface DrawerRendererProps extends Omit<React__default.HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** The ID of the stack to render. Some drawers need to use the same stack ID to be rendered here */
+    stackId: string;
+    /** The width of the drawers. In any CSS length unit (px, rem, %, et al). Can't use CSS functions (e.g. calc())
+     * @default '45%'
+     */
+    width?: string;
+    /** The minimum width of the drawers. In any CSS length unit (px, rem, %, et al)
+     * @default '0'
+  
+     */
+    minWidth?: string;
+    /** The maximum width of the drawers. In any CSS length unit (px, rem, %, et al)
+     * @default '100%'
+     */
+    maxWidth?: string;
+}
+declare const DrawerRenderer: ({ stackId, width, minWidth, maxWidth, ...otherProps }: DrawerRendererProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element | null;
+interface DrawerRendererItemProps extends React__default.HTMLAttributes<HTMLDivElement> {
+    index: number;
+    totalDrawers: number;
+    width: DrawerRendererProps['width'];
+    minWidth: Required<DrawerRendererProps['minWidth']>;
+    maxWidth: Required<DrawerRendererProps['maxWidth']>;
+    onOverlayClick?: () => void;
+}
+
+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, CheckboxWithInfo, CheckboxWithInforProps, ChildFunction, ComboBoxGroupBase, CreateTeamIntegrationTile, CreateTeamIntegrationTileProps, DashedBox, DashedBoxProps, Drawer, DrawerContextValue, DrawerItem, DrawerProps, DrawerProvider, DrawerRenderer, DrawerRendererItemProps, DrawerRendererProps, 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, 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, TileContainer, TileContainerProps, UniformBadge, UniformLogo, UniformLogoProps, breakpointSizeProps, breakpoints, breakpointsProps, button, buttonGhost, buttonPrimary, buttonRippleEffect, buttonSecondary, buttonTertiary, buttonUnimportant, fadeIn, fadeInBottom, fadeInLtr, fadeInRtl, fadeOutBottom, growSubtle, input, inputError, inputSelect, labelText, mq, ripple, scrollbarStyles, skeletonLoading, supports, useCurrentTab, useDrawer, useIconContext, useMenuContext };