@up42/up-components 1.6.3 → 1.8.0

package/dist/esm/types/components/Grid/Grid.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import { GridProps } from '@mui/material';
+export declare type GridContainerProps = Omit<GridProps, 'container' | 'item' | 'xs' | 'columnSpacing'>;
+/**
+ * Documentation: https://up-components.up42.com/?path=/docs/layout-grid--docs
+ */
+export declare const GridContainer: ({ children, ...props }: GridContainerProps) => JSX.Element;
+export declare type GridItemProps = GridContainerProps & {
+    /**
+     * `span` prop is used to set the column span.
+     */
+    span?: GridProps['xs'];
+};
+/**
+ * Documentation: https://up-components.up42.com/?path=/docs/layout-grid--docs
+ */
+export declare const GridItem: ({ children, span, ...props }: GridItemProps) => JSX.Element;

package/dist/esm/types/components/Grid/Grid.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/esm/types/components/PageContainer/PageContainer.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import { ContainerProps } from '@mui/material';
+export declare type PageContainerProps = Omit<ContainerProps, 'fixed' | 'maxWidth'> & {
+    /**
+     * The number of `columns` to use in the grid system
+     */
+    columns?: number | 'auto';
+    /**
+     * If `true`, the container will be `fluid`, taking the full width of the screen
+     */
+    fluid?: boolean;
+};
+/**
+ * Documentation: https://up-components.up42.com/?path=/docs/layout-pagecontainer--docs
+ */
+export declare const PageContainer: ({ children, fluid, columns, ...props }: PageContainerProps) => JSX.Element;

package/dist/esm/types/components/PageContainer/PageContainer.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/esm/types/index.d.ts

@@ -6,7 +6,8 @@ export { theme } from './global/theme';
 export { Button, type ButtonProps } from './components/Button/Button';
 export { Typography, type TypographyProps } from './components/Typography/Typography';
 export { Avatar, type AvatarProps } from './components/Avatar/Avatar';
-export { Container, type ContainerProps } from './components/Container/Container';
+export { GridContainer, type GridContainerProps, GridItem, type GridItemProps } from './components/Grid/Grid';
+export { PageContainer, type PageContainerProps } from './components/PageContainer/PageContainer';
 export { Box, type BoxProps } from './components/Box/Box';
 export { Checkbox, type CheckboxProps } from './components/Checkbox/Checkbox';
 export { FormCheckbox, type FormCheckboxProps } from './components/FormCheckbox/FormCheckbox';

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 export { default as tokens } from '@up42/design-system-tokens/dist/json/tokens.json';
 import * as _mui_material from '@mui/material';
-import { BoxProps as BoxProps$1, TextFieldProps, AvatarProps as AvatarProps$1, ContainerProps as ContainerProps$1, CheckboxProps as CheckboxProps$1, RadioProps as RadioProps$1, RadioGroupProps, SwitchProps as SwitchProps$1, SelectProps as SelectProps$1, SliderProps as SliderProps$1, LinkProps as LinkProps$1, TabsProps as TabsProps$1, TabProps as TabProps$1, ModalProps as ModalProps$1, CardProps, AlertProps as AlertProps$1, TooltipProps as TooltipProps$1, SxProps, Theme, MenuProps as MenuProps$1, MenuItemProps as MenuItemProps$1, IconButtonProps, PopoverProps as PopoverProps$1, SvgIconProps, BadgeProps as BadgeProps$1, ChipProps, DividerProps as DividerProps$1 } from '@mui/material';
+import { BoxProps as BoxProps$1, TextFieldProps, AvatarProps as AvatarProps$1, GridProps, ContainerProps, CheckboxProps as CheckboxProps$1, RadioProps as RadioProps$1, RadioGroupProps, SwitchProps as SwitchProps$1, SelectProps as SelectProps$1, SliderProps as SliderProps$1, LinkProps as LinkProps$1, TabsProps as TabsProps$1, TabProps as TabProps$1, ModalProps as ModalProps$1, CardProps, AlertProps as AlertProps$1, TooltipProps as TooltipProps$1, SxProps, Theme, MenuProps as MenuProps$1, MenuItemProps as MenuItemProps$1, IconButtonProps, PopoverProps as PopoverProps$1, SvgIconProps, BadgeProps as BadgeProps$1, ChipProps, DividerProps as DividerProps$1 } from '@mui/material';
 export * from '@mui/material';
 import { ThemeProviderProps } from '@mui/material/styles/ThemeProvider';
 import * as React from 'react';
@@ -148,32 +148,36 @@ declare const Avatar: React__default.ForwardRefExoticComponent<Pick<{
     icon?: React__default.ReactNode;
 } & Omit<Omit<AvatarProps$1<"div", {}>, "children" | "sizes" | "alt" | "src" | "srcSet" | "variant" | "imgProps">, "classes" | "tabIndex" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "TouchRippleProps" | "touchRippleRef" | "disableElevation" | "disableFocusRipple">, "className" | "style" | "color" | "sx" | "slot" | "title" | "id" | "lang" | "role" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "icon" | "firstName" | "lastName"> & React__default.RefAttributes<unknown>>;
 
-declare type ContainerProps = MUIGlobalOmit<Omit<ContainerProps$1, 'maxWidth'>, {
+declare type GridContainerProps = Omit<GridProps, 'container' | 'item' | 'xs' | 'columnSpacing'>;
+/**
+ * Documentation: https://up-components.up42.com/?path=/docs/layout-grid--docs
+ */
+declare const GridContainer: ({ children, ...props }: GridContainerProps) => JSX.Element;
+declare type GridItemProps = GridContainerProps & {
     /**
-     * Determine the max-width of the container.
+     * `span` prop is used to set the column span.
      */
-    size?: 'small' | 'medium' | 'large' | 'fluid';
+    span?: GridProps['xs'];
+};
+/**
+ * Documentation: https://up-components.up42.com/?path=/docs/layout-grid--docs
+ */
+declare const GridItem: ({ children, span, ...props }: GridItemProps) => JSX.Element;
+
+declare type PageContainerProps = Omit<ContainerProps, 'fixed' | 'maxWidth'> & {
     /**
-     * The component used for the root node.
-     * Either a string to use a HTML element or a component.
+     * The number of `columns` to use in the grid system
      */
-    component?: React__default.ElementType;
-}>;
+    columns?: number | 'auto';
+    /**
+     * If `true`, the container will be `fluid`, taking the full width of the screen
+     */
+    fluid?: boolean;
+};
 /**
- * In order to maximize the available horizontal space of the UI we use a central column system layout.
- *
- * The header of a page is always `fluid`. The content section will use one of the following layouts:
- *
- * - `small`: 6 columns.
- * - `medium`: 8 columns.
- * - `large`: 12 columns.
- * - `fluid`: full width (maps).
- *
- * To now more about the requirements please check here: https://up42.atlassian.net/browse/B2B-215.
- *
- * Documentation: https://up-components.up42.com/?path=/docs/layout-container--docs
+ * Documentation: https://up-components.up42.com/?path=/docs/layout-pagecontainer--docs
  */
-declare const Container: ({ component, size, children, ...props }: ContainerProps) => JSX.Element;
+declare const PageContainer: ({ children, fluid, columns, ...props }: PageContainerProps) => JSX.Element;
 
 declare type BoxProps = MUIGlobalOmit<BoxProps$1>;
 /**
@@ -2261,4 +2265,4 @@ declare type ContextState = {
  */
 declare const useAlert: () => ContextState;
 
-export { Alert, AlertProps, Avatar, AvatarProps, Badge, BadgeProps, Banner, BannerProps, Box, BoxProps, Button, ButtonProps, Checkbox, CheckboxProps, CodeInline, CodeInlineProps, CodeSnippet, CodeSnippetItemProps, CodeSnippetProps, ContactBox, ContactBoxProps, Container, ContainerProps, ControlButton, ControlButtonProps, CopyButton, CopyButtonProps, CreateAlertProps, DataGrid, DataGridProps, DatePickerDateType, DateTime, DateTimeProps, Divider, DividerProps, DocumentationPopover, DocumentationPopoverProps, EmptyState, EmptyStateProps, FormCheckbox, FormCheckboxProps, FormDatePicker, FormDatePickerProps, FormDateRangePicker, FormDateRangePickerProps, FormInput, FormInputProps, FormRadio, FormRadioProps, FormSelect, FormSelectProps, FormSwitch, FormSwitchProps, Icon, IconProps, InfoCard, InfoCardProps, InfoModal, InfoModalProps, InfoPopover, InfoPopoverProps, Input, InputProps, Link, LinkProps, Loading, LoadingProps, Menu, MenuItem, MenuItemProps, MenuProps, Modal, ModalProps, NotFound, NotFoundProps, PageHeader, PageHeaderProps, PaginatedResponse, Popover, PopoverProps, Radio, RadioProps, Select, SelectProps, Slider, SliderProps, Switch, SwitchProps, Tab, TabGroup, TabGroupProps, TabProps, Table, TableBody, TableBodyProps, TableCell, TableCellProps, TableContainer, TableContainerProps, TableFooter, TableFooterProps, TableHead, TableHeadProps, TablePagination, TablePaginationProps, TableProps, TableRow, TableRowProps, TableSortLabel, TableSortLabelProps, Tabs, TabsProps, Tag, TagProps, Tooltip, TooltipProps, Typography, TypographyProps, UpComponentsProvider, capitalize, copyToClipboard, formatDate, formatFileSize, formatNumber, theme, useAlert, useQueryParams, useRemotePagination };
+export { Alert, AlertProps, Avatar, AvatarProps, Badge, BadgeProps, Banner, BannerProps, Box, BoxProps, Button, ButtonProps, Checkbox, CheckboxProps, CodeInline, CodeInlineProps, CodeSnippet, CodeSnippetItemProps, CodeSnippetProps, ContactBox, ContactBoxProps, ControlButton, ControlButtonProps, CopyButton, CopyButtonProps, CreateAlertProps, DataGrid, DataGridProps, DatePickerDateType, DateTime, DateTimeProps, Divider, DividerProps, DocumentationPopover, DocumentationPopoverProps, EmptyState, EmptyStateProps, FormCheckbox, FormCheckboxProps, FormDatePicker, FormDatePickerProps, FormDateRangePicker, FormDateRangePickerProps, FormInput, FormInputProps, FormRadio, FormRadioProps, FormSelect, FormSelectProps, FormSwitch, FormSwitchProps, GridContainer, GridContainerProps, GridItem, GridItemProps, Icon, IconProps, InfoCard, InfoCardProps, InfoModal, InfoModalProps, InfoPopover, InfoPopoverProps, Input, InputProps, Link, LinkProps, Loading, LoadingProps, Menu, MenuItem, MenuItemProps, MenuProps, Modal, ModalProps, NotFound, NotFoundProps, PageContainer, PageContainerProps, PageHeader, PageHeaderProps, PaginatedResponse, Popover, PopoverProps, Radio, RadioProps, Select, SelectProps, Slider, SliderProps, Switch, SwitchProps, Tab, TabGroup, TabGroupProps, TabProps, Table, TableBody, TableBodyProps, TableCell, TableCellProps, TableContainer, TableContainerProps, TableFooter, TableFooterProps, TableHead, TableHeadProps, TablePagination, TablePaginationProps, TableProps, TableRow, TableRowProps, TableSortLabel, TableSortLabelProps, Tabs, TabsProps, Tag, TagProps, Tooltip, TooltipProps, Typography, TypographyProps, UpComponentsProvider, capitalize, copyToClipboard, formatDate, formatFileSize, formatNumber, theme, useAlert, useQueryParams, useRemotePagination };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@up42/up-components",
-  "version": "1.6.3",
+  "version": "1.8.0",
   "description": "UP42 Component Library",
   "author": "Axel Fuhrmann axel.fuhrmann@up42.com",
   "license": "ISC",

package/dist/cjs/types/components/Container/Container.d.ts

@@ -1,29 +0,0 @@
-import React from 'react';
-import { ContainerProps as MUIContainerProps } from '@mui/material';
-import { MUIGlobalOmit } from '@global/utils/types';
-export declare type ContainerProps = MUIGlobalOmit<Omit<MUIContainerProps, 'maxWidth'>, {
-    /**
-     * Determine the max-width of the container.
-     */
-    size?: 'small' | 'medium' | 'large' | 'fluid';
-    /**
-     * The component used for the root node.
-     * Either a string to use a HTML element or a component.
-     */
-    component?: React.ElementType;
-}>;
-/**
- * In order to maximize the available horizontal space of the UI we use a central column system layout.
- *
- * The header of a page is always `fluid`. The content section will use one of the following layouts:
- *
- * - `small`: 6 columns.
- * - `medium`: 8 columns.
- * - `large`: 12 columns.
- * - `fluid`: full width (maps).
- *
- * To now more about the requirements please check here: https://up42.atlassian.net/browse/B2B-215.
- *
- * Documentation: https://up-components.up42.com/?path=/docs/layout-container--docs
- */
-export declare const Container: ({ component, size, children, ...props }: ContainerProps) => JSX.Element;

package/dist/esm/types/components/Container/Container.d.ts

@@ -1,29 +0,0 @@
-import React from 'react';
-import { ContainerProps as MUIContainerProps } from '@mui/material';
-import { MUIGlobalOmit } from '@global/utils/types';
-export declare type ContainerProps = MUIGlobalOmit<Omit<MUIContainerProps, 'maxWidth'>, {
-    /**
-     * Determine the max-width of the container.
-     */
-    size?: 'small' | 'medium' | 'large' | 'fluid';
-    /**
-     * The component used for the root node.
-     * Either a string to use a HTML element or a component.
-     */
-    component?: React.ElementType;
-}>;
-/**
- * In order to maximize the available horizontal space of the UI we use a central column system layout.
- *
- * The header of a page is always `fluid`. The content section will use one of the following layouts:
- *
- * - `small`: 6 columns.
- * - `medium`: 8 columns.
- * - `large`: 12 columns.
- * - `fluid`: full width (maps).
- *
- * To now more about the requirements please check here: https://up42.atlassian.net/browse/B2B-215.
- *
- * Documentation: https://up-components.up42.com/?path=/docs/layout-container--docs
- */
-export declare const Container: ({ component, size, children, ...props }: ContainerProps) => JSX.Element;